/* ============================ TOKENS ============================ */

:root{
  --blue-700: oklch(0.42 0.15 258);
  --blue-600: oklch(0.50 0.18 257);
  --blue-500: oklch(0.57 0.20 256);
  --blue-400: oklch(0.66 0.17 255);
  --blue-100: oklch(0.93 0.04 255);
  --blue-50:  oklch(0.965 0.018 255);

  --red-600: oklch(0.54 0.21 27);
  --red-500: oklch(0.61 0.22 28);
  --red-100: oklch(0.93 0.05 28);

  --ink-900: oklch(0.24 0.025 258);
  --ink-700: oklch(0.40 0.02 258);
  --ink-500: oklch(0.56 0.018 258);
  --ink-300: oklch(0.78 0.012 258);

  --paper:    oklch(0.99 0.004 255);
  --paper-2:  oklch(0.975 0.008 255);
  --surface:  oklch(1 0 0);
  --line:     oklch(0.91 0.008 258);

  --brand: var(--blue-600);
  --brand-strong: var(--blue-700);
  --accent: var(--red-500);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 40px;

  --shadow-sm: 0 1px 2px oklch(0.4 0.03 258 / .06), 0 2px 6px oklch(0.4 0.03 258 / .05);
  --shadow-md: 0 8px 24px oklch(0.4 0.05 258 / .10), 0 2px 6px oklch(0.4 0.03 258 / .05);
  --shadow-lg: 0 24px 60px oklch(0.4 0.06 258 / .16), 0 8px 20px oklch(0.4 0.04 258 / .08);
  --shadow-blue: 0 18px 40px oklch(0.50 0.18 257 / .28);

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}


*{box-sizing:border-box;margin:0;padding:0}

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

body{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink-900);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:"Bricolage Grotesque",system-ui,sans-serif;line-height:1.06;letter-spacing:-0.02em;font-weight:700;color:var(--ink-900)}

a{color:inherit;text-decoration:none}

.material-symbols-rounded{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;line-height:1;user-select:none}

.fill .material-symbols-rounded{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}


.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--brand);
}

.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--accent)}

.eyebrow.center{justify-content:center}


/* ============================ BUTTONS ============================ */

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;
  padding:13px 22px;border-radius:999px;border:1.5px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
  white-space:nowrap;
}

.btn .material-symbols-rounded{font-size:20px}

.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-blue)}

.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 48px oklch(0.50 0.18 257 / .36)}

.btn-red{background:var(--accent);color:#fff;box-shadow:0 16px 34px oklch(0.61 0.22 28 / .30)}

.btn-red:hover{transform:translateY(-2px)}

.btn-ghost{background:var(--surface);color:var(--ink-900);border-color:var(--line);box-shadow:var(--shadow-sm)}

.btn-ghost:hover{transform:translateY(-2px);border-color:var(--ink-300)}

.btn-soft{background:var(--blue-50);color:var(--brand-strong)}

.btn-soft:hover{background:var(--blue-100)}

.btn-lg{padding:16px 28px;font-size:16px}


/* ============================ NAV ============================ */

.nav{
  position:sticky;top:0;z-index:60;
  background:oklch(0.99 0.004 255 / .72);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}

.nav.scrolled{border-color:var(--line);background:oklch(0.99 0.004 255 / .85)}

.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}

.brand{display:flex;align-items:center;gap:10px}



.brand img{display:block;height:40px;width:auto}

.nav-links{display:flex;align-items:center;gap:4px}

.nav-links a{
  font-size:14.5px;font-weight:500;color:var(--ink-700);
  padding:9px 14px;border-radius:999px;transition:background .2s,color .2s;
}

.nav-links a:hover{background:var(--blue-50);color:var(--ink-900)}