/* ==========================================================================
   HSBR Innovations — Brand tokens
   Pulled from the live hsbr.online landing palette.
   "Simple. Scalable. Smart."
   ========================================================================== */
:root {
  /* Core navy family */
  --navy:       #1f3a5f;
  --navy-2:     #15263f;
  --navy-3:     #0c1a2e;
  --ink:        #0a1220;

  /* Paper / cream surfaces */
  --paper:      #f4f3ee;
  --paper-2:    #eceae0;
  --paper-3:    #e3e0d4;

  /* Accents */
  --hot:        #ff5b1f;   /* signature orange */
  --hot-soft:   #ff7a45;
  --lime:       #c9ff3d;

  /* Text */
  --mute:       #5d6675;
  --dim:        #8b94a4;
  --on-dark:    #f4f3ee;
  --on-dark-mute: rgba(244, 243, 238, 0.66);

  /* Lines */
  --line:       rgba(15, 30, 51, 0.14);
  --line-2:     rgba(15, 30, 51, 0.22);
  --line-d:     rgba(244, 243, 238, 0.14);

  /* Geometry */
  --radius:     18px;
  --radius-sm:  12px;
  --radius-lg:  26px;
  --shadow:     0 18px 50px -20px rgba(10, 18, 32, 0.45);
  --shadow-sm:  0 8px 24px -12px rgba(10, 18, 32, 0.35);

  /* Type */
  --font-sans:  "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

.brand-gradient-text {
  background: linear-gradient(100deg, var(--navy) 0%, var(--hot) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subtle grain so flat navy never looks dead */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Buttons shared across showcase + demos */
.btn-hsbr {
  --b: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 0;
  border-radius: 999px;
  padding: 0.8rem 1.5rem;
  background: var(--b);
  color: var(--paper);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  text-decoration: none;
}
.btn-hsbr:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-hsbr.is-hot { --b: var(--hot); color: #fff; }
.btn-hsbr.is-ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--line-2);
}
.btn-hsbr.is-ghost:hover { border-color: var(--navy); background: rgba(31, 58, 95, 0.05); }