/* ====================================================================
   DynoSense.ai — Pre-Launch Home
   Design tokens for two directions (Refined ↔ Futuristic) + base reset.
   ==================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink-strong);
  background: #FAF6EC; /* fallback before .page mounts */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.page {
  min-height: 100vh;
  color: var(--ink-strong);
  transition: background-color 400ms var(--ease), color 400ms var(--ease);
}
.page.dir-refined { background-color: #F8F3E8; }
.page.dir-futuristic { background-color: #060C18; }
img { max-width: 100%; display: block; }
button { font: inherit; }
a { color: inherit; }

/* ---------------- BRAND COLOR PRIMITIVES (constant) ---------------- */
:root {
  --brand-blue: #0076FE;
  --brand-blue-tint: #7FB3FE;
  --brand-gold: #F5BD22;
  --brand-gold-tint: #F9DA80;
  --brand-ink: #373435;
  --brand-navy: #0B1B33;

  /* type stacks */
  --font-display: "Nunito", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* type scale (mobile-first; desktop overrides at .md+) */
  --fs-eyebrow: 11px;
  --fs-body: 16px;
  --fs-body-lg: 18px;
  --fs-h4: 20px;
  --fs-h3: 26px;
  --fs-h2: 34px;
  --fs-h1: 44px;
  --fs-mega: 72px;

  /* spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* layout */
  --maxw: 1180px;
  --gutter: 20px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-1: 240ms;
  --dur-2: 480ms;
  --dur-3: 800ms;
}

/* desktop type scale */
@media (min-width: 760px) {
  :root {
    --fs-h4: 22px;
    --fs-h3: 32px;
    --fs-h2: 44px;
    --fs-h1: 56px;
    --fs-mega: 128px;
  }
}
@media (min-width: 1080px) {
  :root {
    --fs-h1: 64px;
    --fs-h2: 48px;
    --fs-mega: 168px;
  }
}

/* ---------------- DIRECTION A: REFINED ---------------- */
.dir-refined {
  --surface-1: #F8F3E8;
  --surface-2: #F1E9D5;
  --surface-3: #E9F0E5;     /* sage tint card */
  --surface-ink: #0B1B33;   /* dark navy panel */
  --ink-strong: #1F2A3F;
  --ink-mid: #4A5269;
  --ink-soft: #6F7587;
  --ink-on-dark: #F8F3E8;
  --ink-on-dark-soft: #B7C0D2;
  --partners-dark: #2D333F;  /* warm slate — used on partners.html dark sections */
  --line: #DDD1B3;
  --line-soft: #ECE3CA;
  --accent: #7A9B7E;         /* sage (primary warm accent) */
  --accent-soft: #D9E4D2;
  --highlight: #F5BD22;      /* brand gold for callouts */
  --rose: #E5B5A8;
  --primary: #0067DD;        /* brand blue for primary CTA (AA-contrast bumped from #0076FE) */
  --hero-glow: radial-gradient(60% 80% at 70% 30%, #E9DFC4 0%, transparent 65%),
               radial-gradient(50% 70% at 20% 80%, #D9E4D2 0%, transparent 60%);
  --grain-opacity: 0.04;
}

/* ---------------- DIRECTION B: FUTURISTIC ---------------- */
.dir-futuristic {
  --surface-1: #060C18;
  --surface-2: #0C1628;
  --surface-3: #11203B;
  --surface-ink: #07101F;
  --ink-strong: #F2EEE3;
  --ink-mid: #B7C2D6;
  --ink-soft: #7886A0;
  --ink-on-dark: #F2EEE3;
  --ink-on-dark-soft: #B7C2D6;
  --partners-dark: #1B2230;  /* slightly cooler in futuristic direction */
  --line: rgba(127,179,254,0.16);
  --line-soft: rgba(127,179,254,0.08);
  --accent: #7FB3FE;         /* glow blue */
  --accent-soft: rgba(127,179,254,0.12);
  --highlight: #F9DA80;
  --rose: #E5B5A8;
  --primary: #0067DD;
  --hero-glow: radial-gradient(70% 70% at 65% 35%, rgba(0,118,254,0.35) 0%, transparent 60%),
               radial-gradient(50% 60% at 15% 85%, rgba(127,179,254,0.18) 0%, transparent 60%);
  --grain-opacity: 0.06;
}

/* ---------------- DENSITY ---------------- */
.dens-roomy { --section-pad-y: clamp(72px, 12vw, 144px); --gap: var(--s7); }
.dens-cozy  { --section-pad-y: clamp(56px, 9vw, 104px);  --gap: var(--s6); }
.dens-compact { --section-pad-y: clamp(40px, 7vw, 72px); --gap: var(--s5); }

/* ---------------- LAYOUT PRIMITIVES ---------------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--section-pad-y);
  position: relative;
}
.eyebrow {
  font: 500 var(--fs-eyebrow)/1.2 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.h1 { font: 700 var(--fs-h1)/1.08 var(--font-display); letter-spacing: -0.02em; text-wrap: pretty; }
.h2 { font: 700 var(--fs-h2)/1.14 var(--font-display); letter-spacing: -0.015em; text-wrap: pretty; }
.h3 { font: 600 var(--fs-h3)/1.2 var(--font-display); letter-spacing: -0.01em; text-wrap: pretty; }
.h4 { font: 600 var(--fs-h4)/1.25 var(--font-display); letter-spacing: -0.005em; }
.lede { font: 400 var(--fs-body-lg)/1.55 var(--font-body); color: var(--ink-mid); text-wrap: pretty; }
.body { font: 400 var(--fs-body)/1.65 var(--font-body); color: var(--ink-mid); text-wrap: pretty; }
.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }

/* ---------------- BUTTONS ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: 48px; padding-inline: 22px;
  border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1 var(--font-body); letter-spacing: -0.005em;
  cursor: pointer; transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { box-shadow: 0 8px 24px -10px var(--primary); }
.btn-ghost {
  background: transparent; color: var(--ink-strong);
  border-color: color-mix(in oklch, var(--ink-strong) 18%, transparent);
}
.btn-ghost:hover { background: color-mix(in oklch, var(--ink-strong) 6%, transparent); }
.btn-sm { height: 36px; padding-inline: 14px; font-size: 13px; }

/* ---------------- LINKS ---------------- */
.link-quiet {
  color: var(--ink-mid); text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
.link-quiet:hover { color: var(--ink-strong); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--primary); text-decoration: none; font-weight: 500;
}
.link-arrow:hover .arr { transform: translateX(3px); }
.arr { display: inline-block; transition: transform var(--dur-1) var(--ease); }

/* ---------------- CARDS / SURFACES ---------------- */
.card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s6);
}
.card-soft {
  background: color-mix(in oklch, var(--surface-2) 92%, transparent);
  backdrop-filter: blur(8px);
}

/* ---------------- TRUST PILL ---------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding-inline: 12px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--ink-strong) 6%, transparent);
  color: var(--ink-mid);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.04em;
}
.dir-futuristic .pill {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------------- FADE-UP ON SCROLL ---------------- */
.fade-up {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.fade-up.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------------- GRAIN OVERLAY (subtle) ---------------- */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
  opacity: var(--grain-opacity);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.dir-futuristic .grain::after { mix-blend-mode: screen; opacity: calc(var(--grain-opacity) * 0.6); }

/* ---------------- SCREEN/COMMENT LABEL HELPERS ---------------- */
[data-screen-label] { scroll-margin-top: 80px; }

/* ============ TYPE STACK SWAPS via tweaks ============ */
.type-plex-nunito { --font-display: "Nunito", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; }
.type-nunito-only { --font-display: "Nunito", system-ui, sans-serif; --font-body: "Nunito", system-ui, sans-serif; }
.type-plex-only   { --font-display: "IBM Plex Sans", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; }
.type-serif-mix   { --font-display: "Newsreader", Georgia, serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; }