/* ==========================================================================
   Unique Amaze — site styles
   Built on the Unique Amaze V2 design system ("Quiet Confidence"):
   warm canvas + ink, teal as the one accent, gold for premium moments.
   Change from the system: buttons, chips and inputs use squarer corners.
   No build step: modern CSS (layers, nesting, :has, container queries,
   scroll-driven animations, view transitions) with graceful fallbacks.
   ========================================================================== */

@layer tokens, base, layout, components, pages, motion, utilities;

/* ---------- Fonts (self-hosted; Poppins + Space Grotesk, as on the AI Studio site) ---------- */
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-400-700.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

@layer tokens {
  :root {
    /* Raw palette (design system) */
    --ink-950:#101211; --ink-900:#161917; --ink-800:#1d211f; --ink-700:#252a27; --ink-600:#303634; --ink-500:#3d4441;
    --canvas-0:#fff; --canvas-50:#fbfaf7; --canvas-100:#f6f4ee; --canvas-150:#f0eee7; --canvas-200:#e9e7df; --canvas-300:#dedbd1;
    --grey-300:#c7c5bd; --grey-400:#a3a29a; --grey-500:#75766f; --grey-600:#585a54; --grey-700:#40423d;
    /* Brand cyan, sampled from the UXA logo (#01a0cb / #01bee1). Names kept from the design system. */
    --teal-800:#04506b; --teal-700:#036a8d; --teal-600:#027aa1; --teal-500:#01a0cb; --teal-400:#22c3e6; --teal-glow:rgba(1,160,203,.32);
    --gold-700:#8a6d2b; --gold-600:#a3822f; --gold-500:#b8933e; --gold-400:#cfae62; --gold-soft:rgba(163,130,47,.12);
    --brand-cyan:#01bee1;

    /* Semantic — light */
    --bg-page:var(--canvas-50); --bg-alt:var(--canvas-100); --bg-sunken:var(--canvas-150); --bg-elevated:var(--canvas-0);
    --surface-card:var(--canvas-0); --surface-card-hover:var(--canvas-50); --surface-subtle:rgba(20,18,10,.04);
    --text-primary:var(--ink-900); --text-secondary:var(--grey-600); --text-muted:#6c6d66; --text-on-accent:#fff;
    --border-subtle:rgba(20,18,10,.08); --border-strong:rgba(20,18,10,.18); --hover-wash:rgba(20,18,10,.045);
    --accent:var(--teal-600); --accent-hover:var(--teal-500); --accent-press:var(--teal-700); --accent-soft:rgba(1,160,203,.10); --accent-on-soft:var(--teal-700);
    --premium:var(--gold-600); --premium-soft:var(--gold-soft); --premium-border:rgba(163,130,47,.35);
    --success:#1a7f4e; --success-soft:rgba(26,127,78,.10); --danger:#b4362e; --danger-soft:rgba(180,54,46,.08);
    --focus-ring:var(--teal-600);

    /* Glass */
    --glass-tint:rgba(255,255,255,.62); --glass-tint-2:rgba(244,247,250,.36); --glass-plate:rgba(255,255,255,.55);
    --glass-border:rgba(255,255,255,.8); --glass-outline:rgba(30,40,50,.09); --glass-highlight:rgba(255,255,255,.95);
    --glass-rim:rgba(255,255,255,1); --glass-blur:blur(26px) saturate(150%);

    /* Type */
    --font-display:"Poppins",system-ui,sans-serif;
    --font-body:"Poppins",system-ui,sans-serif;
    --font-mono:"Space Grotesk",ui-monospace,monospace;
    --text-display:clamp(52px,8.5vw,128px); --text-hero:clamp(42px,6vw,88px); --text-h1:clamp(34px,4vw,56px); --text-h2:clamp(28px,3vw,40px);
    --text-h3:30px; --text-h4:24px; --text-quote:clamp(24px,2.4vw,36px); --text-body-lg:21px; --text-body:17.5px; --text-body-sm:15.5px;
    --text-caption:14px; --text-micro:12px; --text-eyebrow:13px;
    --leading-display:1.04; --leading-heading:1.12; --leading-body:1.75;
    --tracking-display:-.03em; --tracking-heading:-.02em; --tracking-eyebrow:.14em;

    /* Space & layout */
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:40px; --space-8:48px; --space-9:64px; --space-10:80px; --space-12:128px;
    --section-y:clamp(96px,11vw,176px); --section-y-tight:clamp(64px,8vw,112px);
    --container-max:1360px; --container-narrow:880px; --container-pad:clamp(20px,4.5vw,72px); --gutter:clamp(20px,2.8vw,44px);
    --nav-h:76px;

    /* Shape — buttons dialled down from pills to soft squares */
    --radius-btn:8px; --radius-btn-sm:8px; --radius-chip:8px; --radius-input:8px;
    --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:12px; --radius-xl:16px; --radius-panel:16px;

    /* Depth */
    --shadow-1:0 1px 2px rgba(20,18,10,.05),0 2px 8px rgba(20,18,10,.04);
    --shadow-2:0 2px 6px rgba(20,18,10,.05),0 10px 24px rgba(20,18,10,.07);
    --shadow-3:0 6px 16px rgba(20,18,10,.06),0 24px 48px rgba(20,18,10,.10);
    --shadow-4:0 12px 28px rgba(20,18,10,.10),0 40px 80px rgba(20,18,10,.14);
    --shadow-glow:0 8px 40px var(--teal-glow);

    /* Motion */
    --ease-out:cubic-bezier(.22,1,.36,1); --ease-inout:cubic-bezier(.65,0,.35,1);
    --dur-fast:160ms; --dur-base:220ms; --dur-slow:320ms; --dur-reveal:640ms; --stagger:60ms;
    color-scheme:light;
  }

  /* Dark theme (design system "ua-dark") */
  :root[data-theme="dark"] {
    --bg-page:var(--ink-950); --bg-alt:#131614; --bg-sunken:#0c0e0d; --bg-elevated:var(--ink-800);
    --surface-card:#171a18; --surface-card-hover:#1c201e; --surface-subtle:rgba(255,255,255,.04);
    --text-primary:#f3f2ee; --text-secondary:#b4b6ae; --text-muted:#8b8d86;
    --border-subtle:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.18); --hover-wash:rgba(255,255,255,.06);
    --accent-soft:rgba(34,195,230,.12); --accent-on-soft:var(--teal-400);
    --glass-tint:rgba(40,46,44,.55); --glass-tint-2:rgba(24,28,27,.4); --glass-plate:rgba(255,255,255,.05); --glass-border:rgba(255,255,255,.12); --glass-outline:rgba(0,0,0,.3); --glass-highlight:rgba(255,255,255,.18); --glass-rim:rgba(255,255,255,.4);
    --shadow-2:0 2px 6px rgba(0,0,0,.3),0 10px 24px rgba(0,0,0,.35);
    --shadow-3:0 6px 16px rgba(0,0,0,.35),0 24px 48px rgba(0,0,0,.45);
    color-scheme:dark;
  }

  /* Ink bands are always dark, whatever the theme ("punctuation, not paragraphs"). */
  .ink {
    --bg-page:var(--ink-950); --surface-card:#171a18; --surface-subtle:rgba(255,255,255,.05);
    --text-primary:#f3f2ee; --text-secondary:#b9bbb3; --text-muted:#8b8d86;
    --border-subtle:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.2); --hover-wash:rgba(255,255,255,.07);
    --accent-on-soft:var(--teal-400); --accent-soft:rgba(34,195,230,.12);
    --glass-tint:rgba(255,255,255,.10); --glass-tint-2:rgba(255,255,255,.04); --glass-plate:rgba(255,255,255,.06); --glass-border:rgba(255,255,255,.16); --glass-outline:rgba(0,0,0,.35); --glass-highlight:rgba(255,255,255,.32); --glass-rim:rgba(255,255,255,.6);
    color-scheme:dark;
    background:var(--ink-950); color:var(--text-primary);
  }
}

@layer base {
  *,*::before,*::after { box-sizing:border-box; }
  * { margin:0; }
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 24px); }
  @media (prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
  body {
    min-height:100dvh; background:var(--bg-page); color:var(--text-primary);
    font-family:var(--font-body); font-size:var(--text-body); line-height:var(--leading-body);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;
    transition:background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out);
  }
  img,svg,video { display:block; max-width:100%; height:auto; }
  img { font-style:italic; }
  input,button,select,textarea { font:inherit; color:inherit; }
  button { cursor:pointer; background:none; border:0; }
  a { color:inherit; text-decoration-thickness:1px; text-underline-offset:.2em; }
  h1,h2,h3,h4 { font-family:var(--font-display); font-weight:700; line-height:var(--leading-heading); letter-spacing:var(--tracking-heading); text-wrap:balance; }
  p { text-wrap:pretty; }
  ::selection { background:var(--accent); color:#fff; }
  :focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:4px; }
  [hidden] { display:none !important; }
  kbd { font-family:var(--font-mono); font-size:11px; padding:2px 6px; border-radius:5px; border:1px solid var(--border-subtle); background:var(--surface-subtle); }
  .icon { width:1.15em; height:1.15em; flex:none; }
  .svg-defs { position:absolute; width:0; height:0; overflow:hidden; }
}

@layer layout {
  .container { width:100%; max-width:calc(var(--container-max) + var(--container-pad) * 2); margin-inline:auto; padding-inline:var(--container-pad); }
  .container--narrow { max-width:calc(var(--container-narrow) + var(--container-pad) * 2); }
  main { display:block; }
  main:focus { outline:none; }
  .section { padding-block:var(--section-y); position:relative; }
  .section--tight { padding-block:var(--section-y-tight); }
  .section--alt { background:var(--bg-alt); }
  .section--flush-top { padding-top:0; }
  .section-head { display:flex; align-items:end; justify-content:space-between; gap:var(--space-6); margin-bottom:var(--space-10); flex-wrap:wrap; }
  .measure-heading { max-width:20ch; }
  .btn-row { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }
}

@layer components {
  /* ---------- Type helpers ---------- */
  .eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--text-eyebrow); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--text-secondary); font-weight:400; }
  .eyebrow--accent { color:var(--accent-on-soft); }
  .eyebrow--gold { color:var(--premium); }
  .h1 { font-size:var(--text-h1); margin-top:var(--space-4); }
  p + p { margin-top:1.1em; }
  .h2 { font-size:var(--text-h2); margin-top:var(--space-2); }
  .h3 { font-size:var(--text-h3); }
  .h4 { font-size:var(--text-h4); }
  .fine { font-size:var(--text-caption); color:var(--text-muted); margin-top:var(--space-3); }
  .lede-light { color:var(--text-secondary); font-size:var(--text-body-lg); max-width:46ch; margin-block:var(--space-4) var(--space-6); }
  .prose { max-width:68ch; }
  .prose > * + * { margin-top:1.4em; }
  .prose h2 { font-size:var(--text-h4); margin-top:2em; }
  .prose ul { padding-left:1.2em; }
  .prose li + li { margin-top:.5em; }
  .prose a { color:var(--accent-on-soft); }
  .visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .skip-link { position:fixed; left:16px; top:-60px; z-index:200; background:var(--ink-900); color:#fff; padding:10px 16px; border-radius:var(--radius-btn); transition:top var(--dur-base); }
  .skip-link:focus { top:16px; }

  /* ---------- Buttons (squarer than the system's pills, by request) ---------- */
  .btn {
    --_h:52px;
    display:inline-flex; align-items:center; justify-content:center; gap:10px; height:var(--_h); padding:0 26px;
    border-radius:var(--radius-btn); border:1px solid transparent; font-size:15px; font-weight:600; letter-spacing:.01em; line-height:1;
    text-decoration:none; white-space:nowrap; cursor:pointer; position:relative; isolation:isolate;
    transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
    & .icon { transition:transform var(--dur-base) var(--ease-out); }
    &:hover .icon { transform:translateX(3px); }
    &:active { transform:scale(.97); }
  }
  .btn--sm { --_h:40px; padding:0 18px; font-size:14px; border-radius:var(--radius-btn-sm); }
  .btn--lg { --_h:58px; padding:0 32px; font-size:16px; }
  .btn--block { width:100%; }
  .btn--primary { background:var(--accent); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(4,80,107,.35); }
  .btn--primary:hover { background:var(--accent-hover); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), var(--shadow-glow); }
  .btn--primary:active { background:var(--accent-press); }
  .btn--ink { background:var(--ink-900); color:#fff; }
  .btn--ink:hover { background:var(--ink-700); }
  .btn--secondary { background:transparent; color:var(--text-primary); border-color:var(--border-strong); }
  .btn--secondary:hover { background:var(--hover-wash); border-color:var(--text-primary); }
  .btn--ghost { background:transparent; color:var(--text-primary); }
  .btn--ghost:hover { background:var(--hover-wash); }
  .btn--ghost-light { color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.04); backdrop-filter:blur(10px); }
  .btn--ghost-light:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); }
  .btn--gold { color:var(--premium); border-color:var(--premium-border); }
  .btn--gold:hover { background:var(--premium-soft); }
  .btn--danger { background:var(--danger); color:#fff; }

  .icon-btn {
    display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-btn); color:var(--text-primary);
    border:1px solid var(--border-subtle); background:var(--surface-subtle); transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
    &:hover { background:var(--hover-wash); border-color:var(--border-strong); }
    &:active { transform:scale(.95); }
  }
  .icon-btn--solid { background:var(--accent); border-color:transparent; color:#fff; }
  .icon-btn--solid:hover { background:var(--accent-hover); }
  .icon-btn--light { color:#fff; border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06); }

  .chip {
    display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:6px 14px; border-radius:var(--radius-chip);
    border:1px solid var(--border-subtle); background:var(--surface-subtle); color:var(--text-secondary); font-size:14px; font-weight:500; text-decoration:none; cursor:pointer;
    transition:all var(--dur-fast) var(--ease-out);
    &:hover { color:var(--text-primary); border-color:var(--border-strong); }
    &.is-active, &[aria-pressed="true"] { background:var(--ink-900); color:#fff; border-color:var(--ink-900); }
  }
  :root[data-theme="dark"] .chip.is-active, :root[data-theme="dark"] .chip[aria-pressed="true"] { background:#f3f2ee; color:var(--ink-900); }
  .chips { display:flex; flex-wrap:wrap; gap:8px; }
  .chips--wrap { margin-top:var(--space-6); }
  .chip--check { position:relative; }
  .chip--check input { position:absolute; opacity:0; pointer-events:none; }
  .chip--check:has(input:checked) { background:var(--accent-soft); color:var(--accent-on-soft); border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
  .chip--check:has(input:focus-visible) { outline:2px solid var(--focus-ring); outline-offset:2px; }

  .badge { display:inline-flex; align-items:center; gap:6px; border-radius:6px; font-family:var(--font-mono); font-size:var(--text-micro); letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; background:var(--surface-subtle); color:var(--text-secondary); border:1px solid var(--border-subtle); }
  .badge--accent { background:var(--accent-soft); color:var(--accent-on-soft); border-color:transparent; }
  .badge--gold { background:var(--premium-soft); color:var(--premium); border-color:var(--premium-border); }
  .badge--success { background:var(--success-soft); color:var(--success); border-color:transparent; }
  .badge--danger { background:var(--danger-soft); color:var(--danger); border-color:transparent; }

  .pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--teal-400); box-shadow:0 0 0 0 rgba(34,195,230,.6); animation:pulse 2.4s infinite; flex:none; }
  @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(34,195,230,.55)} 70%{box-shadow:0 0 0 10px rgba(34,195,230,0)} 100%{box-shadow:0 0 0 0 rgba(34,195,230,0)} }

  /* ---------- Cards ---------- */
  .card { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:clamp(28px,3vw,40px); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base); }
  .card--hover:hover, a.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-3); background:var(--surface-card-hover); }
  a.card { text-decoration:none; display:block; }

  /* ---------- Liquid glass ----------
     Layer 1: tinted, blurred backdrop.  Layer 2 (::before): specular rim that catches light.
     Layer 3 (::after): a soft sheen that follows the pointer (--mx/--my set by JS).
     .glass--liquid adds real refraction in Chromium (SVG displacement on the backdrop). */
  /* Liquid glass, after the reference card: a thick frosted shell with a bright inner edge,
     a hairline outer outline, a soft lift shadow, and (optionally) an inner "plate" scrim that
     keeps text readable. Specular rim (::before) + pointer sheen (::after). */
  .glass {
    position:relative; isolation:isolate;
    background:linear-gradient(165deg, var(--glass-tint), var(--glass-tint-2));
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border); border-radius:var(--radius-xl);
    box-shadow:
      0 0 0 1px var(--glass-outline),
      inset 0 1.5px 0 var(--glass-highlight),
      inset 1.5px 0 0 color-mix(in srgb, var(--glass-highlight) 55%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--glass-highlight) 35%, transparent),
      inset 0 0 28px color-mix(in srgb, var(--glass-highlight) 22%, transparent),
      0 12px 32px rgba(20,30,40,.08), 0 32px 64px rgba(20,30,40,.07);
    &::before {
      content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:-1;
      background:linear-gradient(145deg, var(--glass-rim) 0%, transparent 28%, transparent 66%, color-mix(in srgb, var(--glass-rim) 70%, transparent) 100%);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
      mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    }
    &::after {
      content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
      background:
        linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 34%),
        radial-gradient(460px circle at var(--mx,18%) var(--my,0%), rgba(255,255,255,.26), transparent 46%);
      transition:opacity var(--dur-slow);
    }
  }
  /* Inner plate (scrim) for content inside a glass shell */
  .glass-plate {
    position:relative; border-radius:calc(var(--radius-xl) - 6px);
    background:var(--glass-plate); border:1px solid var(--glass-border);
    box-shadow:inset 0 1px 0 var(--glass-highlight), 0 2px 10px rgba(20,30,40,.05);
  }
  /* Stacked plates behind a card, like the reference */
  .glass--stack { margin:0 14px 14px 0; }
  .glass--stack > .glass-stack-layer { display:none; }
  .glass--stack { box-shadow:
      0 0 0 1px var(--glass-outline), inset 0 1.5px 0 var(--glass-highlight), inset 0 0 28px color-mix(in srgb, var(--glass-highlight) 22%, transparent),
      10px 12px 0 -1px color-mix(in srgb, var(--glass-tint) 75%, transparent), 10px 12px 0 0 var(--glass-outline),
      20px 24px 0 -2px color-mix(in srgb, var(--glass-tint) 50%, transparent), 20px 24px 0 -1px var(--glass-outline),
      0 30px 60px rgba(20,30,40,.10); }
  /* Soft liquid backdrop so glass has something to frost */
  .liquid-bg { position:relative; isolation:isolate; }
  .liquid-bg::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(38% 46% at 12% 22%, rgba(1,160,203,.14), transparent 70%),
      radial-gradient(34% 40% at 88% 18%, rgba(140,160,180,.20), transparent 70%),
      radial-gradient(40% 44% at 70% 92%, rgba(207,174,98,.12), transparent 70%),
      radial-gradient(30% 34% at 30% 80%, rgba(180,195,210,.22), transparent 70%); }
  .glass--bar { border-radius:16px; }
  .glass--deep { --glass-tint:color-mix(in srgb, var(--bg-page) 78%, transparent); --glass-tint-2:color-mix(in srgb, var(--bg-page) 62%, transparent); }
  .glass--dark { --glass-tint:rgba(255,255,255,.12); --glass-tint-2:rgba(255,255,255,.04); --glass-plate:rgba(0,0,0,.22); --glass-border:rgba(255,255,255,.18); --glass-outline:rgba(0,0,0,.35); --glass-highlight:rgba(255,255,255,.38); --glass-rim:rgba(255,255,255,.7); color:#f3f2ee; }
  .glass--accent { background:radial-gradient(120% 140% at 100% 0%, rgba(1,160,203,.16), transparent 55%), linear-gradient(165deg, var(--glass-tint), var(--glass-tint-2)); }
  html.liquid-ok .glass--liquid { -webkit-backdrop-filter:url(#liquid-refraction) blur(16px) saturate(170%); backdrop-filter:url(#liquid-refraction) blur(16px) saturate(170%); }
  @media (prefers-reduced-transparency:reduce) {
    .glass { background:var(--surface-card); -webkit-backdrop-filter:none; backdrop-filter:none; }
    .glass--dark { background:var(--ink-800); }
  }
  .glass-edge { position:relative; overflow:hidden; }
  .glass-edge::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(60% 120% at 100% 0%, rgba(1,160,203,.28), transparent 60%), radial-gradient(40% 80% at 0% 100%, rgba(163,130,47,.18), transparent 60%); }

  /* ---------- Navigation ---------- */
  .site-nav { position:fixed; inset:12px 12px auto; z-index:60; pointer-events:none; transition:transform var(--dur-slow) var(--ease-out); }
  .site-nav.on-dark .site-nav__inner { filter:drop-shadow(0 10px 30px rgba(0,0,0,.35));
    --glass-tint:rgba(255,255,255,.13); --glass-tint-2:rgba(255,255,255,.05); --glass-border:rgba(255,255,255,.2); --glass-outline:rgba(0,0,0,.35); --glass-highlight:rgba(255,255,255,.4); --glass-rim:rgba(255,255,255,.75);
    --text-primary:#f3f2ee; --text-secondary:#b9bbb3; --surface-subtle:rgba(255,255,255,.06); --border-subtle:rgba(255,255,255,.1); --border-strong:rgba(255,255,255,.25);
    --hover-wash:rgba(255,255,255,.08); --surface-card:rgba(255,255,255,.14); color:#f3f2ee;
  }
  .site-nav.is-hidden { transform:translateY(calc(-100% - 20px)); }
  /* The bar, drawn to Andrew's sketch: a long glass bar whose right end drops down into a
     "pod" holding Start a project (top) and Search or ask (below). One continuous shape:
     JS writes the outline path; CSS draws the glass, rim and shadow. */
  .site-nav__inner {
    --bar-h:68px; --pod-w:280px; --pod-drop:58px;
    pointer-events:none; position:relative; max-width:var(--container-max); margin-inline:auto;
    display:grid; grid-template-columns:minmax(0,1fr) var(--pod-w); grid-template-rows:var(--bar-h) var(--pod-drop);
    filter:drop-shadow(0 10px 24px rgba(20,30,40,.10)) drop-shadow(0 2px 4px rgba(20,30,40,.06));
    color:var(--text-primary);
  }
  .nav-shape { position:absolute; inset:0; z-index:0; pointer-events:none;
    clip-path:inset(0 0 var(--pod-drop) 0 round 18px);
    background:linear-gradient(170deg, var(--glass-tint), var(--glass-tint-2));
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    transition:background var(--dur-slow) var(--ease-out); }
  .nav-shape::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg, rgba(255,255,255,.3), transparent 30%), radial-gradient(500px circle at var(--mx,30%) var(--my,0%), rgba(255,255,255,.22), transparent 45%); }
  .nav-outline { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:visible; }
  .nav-outline__rim { fill:none; stroke:var(--glass-highlight); stroke-width:3; }
  .nav-outline__line { fill:none; stroke:var(--glass-outline); stroke-width:1; }
  .nav-bar { grid-area:1 / 1; position:relative; z-index:2; pointer-events:auto; display:flex; align-items:center; gap:var(--space-4); padding:0 14px 0 22px; min-width:0; }
  .nav-pod { grid-area:1 / 2 / 3 / 3; position:relative; z-index:2; pointer-events:auto; display:grid; grid-template-rows:var(--bar-h) var(--pod-drop); align-items:center; padding:0 12px 0 10px; }
  .nav-pod__cta { height:46px; width:100%; justify-content:space-between; padding:0 18px; text-transform:uppercase; letter-spacing:.14em; font-size:12.5px; border-radius:10px; }
  .nav-pod__search { display:flex; align-items:center; gap:10px; height:42px; width:100%; margin-top:-8px; padding:0 8px 0 14px; border-radius:10px;
    background:var(--surface-subtle); border:1px solid var(--border-subtle); color:var(--text-secondary); font-size:13px; text-align:left; transition:color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); }
  .nav-pod__search span { flex:1; }
  .nav-pod__search:hover { color:var(--text-primary); border-color:var(--border-strong); background:var(--hover-wash); }
  .site-nav__mini-search { display:none !important; }
  .brand { display:flex; align-items:center; gap:12px; text-decoration:none; flex:none; }
  .brand__mark { width:74px; height:auto; view-transition-name:brand; filter:drop-shadow(0 2px 8px rgba(1,160,203,.35)); transition:transform var(--dur-slow) var(--ease-out), filter var(--dur-slow); }
  .brand:hover .brand__mark { transform:scale(1.04); filter:drop-shadow(0 4px 14px rgba(1,190,225,.55)); }
  .brand__word { font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.24em; text-transform:uppercase; }
  /* Main links: all caps, wide tracking, a glowing glass "lens" that glides to the hovered link */
  .site-nav__links { position:relative; display:flex; gap:2px; margin-left:auto; padding:5px; border-radius:12px; background:color-mix(in srgb, var(--surface-subtle) 100%, transparent); border:1px solid var(--border-subtle); }
  .nav-link { position:relative; z-index:1; font-family:var(--font-display); font-size:12.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--text-secondary); text-decoration:none; padding:10px 14px; white-space:nowrap; border-radius:8px; transition:color var(--dur-base) var(--ease-out); }
  .nav-link:hover, .nav-link:focus-visible { color:var(--text-primary); }
  .nav-link.is-active { color:var(--text-primary); }
  .nav-link.is-active::after { content:""; position:absolute; left:50%; bottom:4px; width:18px; height:2px; transform:translateX(-50%); border-radius:2px; background:linear-gradient(90deg,var(--teal-500),var(--brand-cyan)); box-shadow:0 0 10px rgba(1,190,225,.9); }
  .nav-lens { position:absolute; z-index:0; top:5px; height:calc(100% - 10px); left:0; width:0; border-radius:8px; pointer-events:none; opacity:0;
    background:linear-gradient(165deg, rgba(255,255,255,.75), rgba(255,255,255,.35));
    box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(30,40,50,.08), 0 4px 14px rgba(1,160,203,.18);
    transition:transform 420ms var(--ease-out), width 420ms var(--ease-out), opacity var(--dur-base); }
  .site-nav.on-dark .nav-lens { background:linear-gradient(165deg, rgba(255,255,255,.2), rgba(255,255,255,.06)); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 1px rgba(255,255,255,.08), 0 0 22px rgba(1,190,225,.35); }
  .site-nav__links.has-lens .nav-lens { opacity:1; }
  .site-nav__tools { margin-left:auto; }
  .nav-search { display:inline-flex; align-items:center; gap:10px; height:42px; text-transform:uppercase; letter-spacing:.12em; font-size:11.5px; font-weight:600; padding:0 8px 0 12px; border-radius:var(--radius-btn-sm); border:1px solid var(--border-subtle); background:var(--surface-subtle); color:var(--text-secondary); font-size:14px; transition:border-color var(--dur-fast), color var(--dur-fast); }
  .nav-search:hover { color:var(--text-primary); border-color:var(--border-strong); }
  .site-nav .icon-btn { width:40px; height:40px; border-radius:var(--radius-btn-sm); }
  .icon--moon { display:none; }
  :root[data-theme="dark"] .icon--sun { display:none; }
  :root[data-theme="dark"] .icon--moon { display:block; }
  .site-nav__menu { display:none !important; }

  .market-switch { display:inline-flex; padding:3px; gap:2px; border-radius:var(--radius-btn-sm); background:var(--surface-subtle); border:1px solid var(--border-subtle); }
  .market-switch__opt { font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; padding:6px 9px; border-radius:6px; text-decoration:none; color:var(--text-secondary); transition:all var(--dur-fast); }
  .market-switch__opt:hover { color:var(--text-primary); }
  .market-switch__opt.is-active { background:var(--surface-card); color:var(--text-primary); box-shadow:var(--shadow-1); }
  .market-switch--lg .market-switch__opt { font-family:var(--font-body); font-size:14px; letter-spacing:0; padding:8px 14px; }

  @media (max-width:1360px) { .brand__word { display:none; } .nav-link { padding:10px 11px; letter-spacing:.12em; } }
  @media (max-width:1180px) { .site-nav__links { display:none; } .site-nav__menu { display:inline-grid !important; } }
  @media (max-width:760px) {
    .site-nav__inner { grid-template-columns:1fr; grid-template-rows:var(--bar-h); --pod-drop:0px; }
    .nav-shape { clip-path:inset(0 round 16px); }
    .nav-pod, .site-nav__theme { display:none; }
    .site-nav__menu, .site-nav__mini-search { display:inline-grid !important; }
    .nav-bar { padding-left:16px; }
  }
  @media (max-width:380px) { .site-nav .market-switch { display:none; } }

  /* ---------- Navigator (menu + command palette + Sage) ---------- */
  .navigator { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; padding:clamp(12px,4vw,56px); border:0; background:transparent; color:var(--text-primary); overflow:auto; }
  .navigator::backdrop { background:rgba(10,12,11,.38); -webkit-backdrop-filter:blur(8px) saturate(120%); backdrop-filter:blur(8px) saturate(120%); }
  .navigator[open] { display:grid; place-items:start center; }
  .navigator__panel { width:min(980px,100%); margin-top:clamp(0px,6vh,64px); border-radius:var(--radius-xl); padding:clamp(14px,2.4vw,24px); box-shadow:var(--shadow-4), inset 0 1px 0 var(--glass-highlight); }
  .navigator__search { display:flex; align-items:center; gap:10px; padding:6px 6px 6px 16px; border-radius:16px; background:var(--surface-card); border:1px solid var(--border-subtle); box-shadow:var(--shadow-1); }
  .navigator__search:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
  .navigator__search input { flex:1; min-width:0; height:48px; border:0; background:transparent; font-size:clamp(17px,2vw,20px); outline:none; }
  .navigator__search input::-webkit-search-cancel-button { display:none; }
  .navigator__search-icon { color:var(--text-muted); width:22px; height:22px; }
  .navigator__mic.is-listening { background:var(--accent); color:#fff; animation:pulse 1.4s infinite; }
  .navigator__body { margin-top:var(--space-4); display:grid; gap:var(--space-4); }
  .navigator__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .nav-tile {
    position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center;
    padding:16px 16px 16px 14px; border-radius:16px; text-decoration:none; background:var(--surface-card); border:1px solid var(--border-subtle);
    transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base), background var(--dur-base);
    animation:tile-in 520ms var(--ease-out) both; animation-delay:calc(var(--i) * 35ms);
  }
  .nav-tile:hover, .nav-tile:focus-visible, .nav-tile.is-focus { transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 50%, transparent); box-shadow:var(--shadow-2), 0 0 0 4px var(--accent-soft); }
  .nav-tile.is-active { background:var(--accent-soft); }
  .nav-tile__num { position:absolute; top:10px; right:12px; font-family:var(--font-mono); font-size:11px; color:var(--text-muted); }
  .nav-tile__icon { grid-row:span 2; width:38px; height:38px; padding:9px; border-radius:10px; background:var(--accent-soft); color:var(--accent-on-soft); }
  .nav-tile__label { font-weight:700; font-size:16px; }
  .nav-tile__hint { font-size:13px; color:var(--text-secondary); }
  @keyframes tile-in { from { opacity:0; transform:translateY(10px) scale(.98); } }
  .navigator__suggest { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .navigator__results { display:grid; gap:6px; }
  .nav-result { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:12px 14px; border-radius:12px; text-decoration:none; border:1px solid transparent; }
  .nav-result:hover, .nav-result.is-focus { background:var(--surface-card); border-color:var(--border-subtle); box-shadow:var(--shadow-1); }
  .nav-result strong { display:block; font-size:15px; }
  .nav-result span.nav-result__text { display:block; font-size:13px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-result--ask { background:var(--accent-soft); }
  .navigator__foot { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--border-subtle); }
  .navigator__quick { display:flex; gap:8px; flex-wrap:wrap; }
  .navigator__keys { font-size:12px; color:var(--text-muted); display:flex; gap:4px; align-items:center; width:100%; }
  @media (hover:none) { .navigator__keys { display:none; } }
  @media (max-width:760px) { .navigator__grid { grid-template-columns:1fr 1fr; } .nav-tile__hint { display:none; } }
  @media (max-width:420px) { .navigator__grid { grid-template-columns:1fr; } }
  .navigator[open] .navigator__panel { animation:panel-in 420ms var(--ease-out); }
  @keyframes panel-in { from { opacity:0; transform:translateY(-12px) scale(.985); filter:blur(4px); } }

  /* Sage conversation */
  .navigator__sage { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:18px; padding:var(--space-5); }
  .sage-head { display:flex; gap:12px; align-items:center; margin-bottom:var(--space-4); }
  .sage-head strong { display:block; }
  .sage-head span { font-size:13px; color:var(--text-secondary); }
  .sage-thread { list-style:none; padding:0; display:grid; gap:12px; max-height:min(46vh,420px); overflow:auto; }
  .sage-msg { max-width:88%; padding:12px 16px; border-radius:16px; font-size:15px; }
  .sage-msg--user { justify-self:end; background:var(--ink-900); color:#fff; border-bottom-right-radius:6px; }
  :root[data-theme="dark"] .sage-msg--user { background:var(--teal-700); }
  .sage-msg--bot { background:var(--bg-alt); border-bottom-left-radius:6px; }
  .sage-msg--bot .chips { margin-top:10px; }
  .sage-msg--typing { display:inline-flex; gap:5px; }
  .sage-msg--typing i { width:6px; height:6px; border-radius:50%; background:var(--text-muted); animation:blink 1.2s infinite; }
  .sage-msg--typing i:nth-child(2) { animation-delay:.15s; } .sage-msg--typing i:nth-child(3) { animation-delay:.3s; }
  @keyframes blink { 0%,80%,100% { opacity:.25; } 40% { opacity:1; } }

  .sage-fab { position:fixed; right:clamp(12px,2vw,24px); bottom:clamp(12px,2vw,24px); z-index:55; display:flex; align-items:center; gap:10px; padding:8px 16px 8px 8px; border-radius:14px; font-weight:600; font-size:14px; color:var(--text-primary); box-shadow:var(--shadow-3), inset 0 1px 0 var(--glass-highlight); transition:transform var(--dur-base) var(--ease-out); }
  .sage-fab:hover { transform:translateY(-2px); }
  .sage-fab__orb { width:32px; height:32px; border-radius:10px; flex:none; background:conic-gradient(from var(--orb-a,0deg), var(--teal-400), var(--brand-cyan), var(--gold-400), var(--teal-500), var(--teal-400)); box-shadow:0 0 18px rgba(34,195,230,.45), inset 0 0 0 1px rgba(255,255,255,.4); animation:orb 6s linear infinite; }
  @property --orb-a { syntax:"<angle>"; inherits:false; initial-value:0deg; }
  @keyframes orb { to { --orb-a:360deg; } }
  @media (max-width:520px) { .sage-fab__text { display:none; } .sage-fab { padding:8px; } }

  /* ---------- Hero (landing) ---------- */
  .hero { position:relative; overflow:hidden; padding-top:calc(var(--nav-h) + clamp(40px,8vh,96px)); min-height:min(100svh,1000px); display:flex; flex-direction:column; }
  .hero__photo { position:absolute; inset:0; pointer-events:none; }
  .hero__photo img { width:100%; height:100%; object-fit:cover; opacity:.55; transform:scale(1.04); animation:hero-drift 30s var(--ease-inout) infinite alternate; }
  .hero__photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,13,14,.94) 0%, rgba(10,13,14,.78) 42%, rgba(10,13,14,.35) 100%), linear-gradient(0deg, var(--ink-950) 0%, transparent 35%); }
  @keyframes hero-drift { to { transform:scale(1.12) translate3d(-1.5%,-1%,0); } }
  .hero__aurora { position:absolute; inset:-20%; pointer-events:none; mix-blend-mode:screen; opacity:.8;
    background:
      radial-gradient(38% 42% at 18% 28%, rgba(1,160,203,.42), transparent 70%),
      radial-gradient(30% 36% at 82% 18%, rgba(29,180,222,.30), transparent 70%),
      radial-gradient(34% 40% at 70% 86%, rgba(163,130,47,.24), transparent 70%);
    filter:blur(20px); animation:aurora 22s var(--ease-inout) infinite alternate; }
  @keyframes aurora { 50% { transform:translate3d(3%,-2%,0) rotate(6deg) scale(1.06); } 100% { transform:translate3d(-3%,2%,0) rotate(-4deg) scale(1.02); } }
  .hero__grid { position:absolute; inset:0; pointer-events:none; opacity:.35;
    background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size:64px 64px; mask:radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 75%); }
  .hero__ghost { position:absolute; right:-6%; top:12%; width:min(62vw,880px); opacity:.07; pointer-events:none; filter:saturate(0) brightness(2); transform:rotate(-6deg); }
  .hero__inner { position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,5vw,80px); align-items:center; flex:1; }
  .hero__eyebrow { margin-bottom:var(--space-5); }
  .hero__title { font-size:var(--text-hero); line-height:var(--leading-display); letter-spacing:var(--tracking-display); font-weight:800; max-width:13ch; }
  .hero__title .w { display:inline-block; }
  .hero__lede { margin-top:var(--space-5); font-size:clamp(17px,1.5vw,20px); color:var(--text-secondary); max-width:52ch; }
  .hero .btn-row { margin-top:var(--space-7); }
  .hero__market { margin-top:var(--space-6); font-size:14px; color:var(--text-muted); }
  .hero__market a { color:var(--teal-400); }

  .dock { padding:var(--space-5); border-radius:var(--radius-xl); display:grid; gap:var(--space-4); }
  .dock__label { font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-400); }
  .dock__field { margin-top:10px; display:flex; align-items:center; gap:8px; padding:6px 6px 6px 14px; border-radius:14px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.12); transition:border-color var(--dur-fast), box-shadow var(--dur-fast); }
  .dock__field:focus-within { border-color:var(--teal-400); box-shadow:0 0 0 4px rgba(34,195,230,.16); }
  .dock__field input { flex:1; min-width:0; height:44px; background:transparent; border:0; outline:none; color:#fff; font-size:16px; }
  .dock__field input::placeholder { color:rgba(255,255,255,.45); }
  .dock__spark { color:var(--gold-400); }
  .dock__tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .dock-tile { position:relative; overflow:hidden; display:grid; gap:18px; padding:16px; min-height:112px; border-radius:16px; text-decoration:none; color:#f3f2ee;
    background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base), background var(--dur-base); }
  .dock-tile::before { content:""; position:absolute; inset:0; background:radial-gradient(220px circle at var(--sx,50%) var(--sy,50%), rgba(34,195,230,.22), transparent 60%); opacity:0; transition:opacity var(--dur-base); }
  .dock-tile:hover { transform:translateY(-3px); border-color:rgba(34,195,230,.5); background:rgba(255,255,255,.07); }
  .dock-tile:hover::before { opacity:1; }
  .dock-tile__n { position:absolute; top:12px; right:14px; font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.4); }
  .dock-tile__icon { width:24px; height:24px; color:var(--teal-400); }
  .dock-tile__label { font-weight:700; font-size:15px; align-self:end; }
  .dock-tile__go { position:absolute; right:14px; bottom:14px; opacity:.4; transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base); }
  .dock-tile:hover .dock-tile__go { opacity:1; transform:translate(2px,-2px); }
  .dock__status { display:flex; align-items:center; gap:10px; font-size:13px; color:rgba(255,255,255,.6); }
  @media (max-width:980px) { .hero__inner { grid-template-columns:1fr; } .hero { min-height:auto; } .dock { max-width:640px; } }

  .ticker { position:relative; margin-top:clamp(40px,8vh,88px); border-top:1px solid rgba(255,255,255,.08); padding-block:18px; overflow:hidden; mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .ticker__track { display:flex; width:max-content; animation:ticker 50s linear infinite; }
  .ticker ul { display:flex; list-style:none; padding:0; }
  .ticker li { font-family:var(--font-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); padding-inline:28px; white-space:nowrap; display:flex; align-items:center; gap:28px; }
  .ticker li::after { content:"✦"; color:var(--gold-400); font-size:10px; }
  @keyframes ticker { to { transform:translateX(-50%); } }

  /* ---------- Page hero ---------- */
  .page-hero { padding-top:calc(var(--nav-h) + clamp(56px,10vw,128px)); padding-bottom:clamp(40px,6vw,72px); position:relative; }
  .page-hero::before { content:""; position:absolute; inset:0 0 auto; height:520px; pointer-events:none; z-index:-1;
    background:radial-gradient(50% 60% at 85% 0%, rgba(1,160,203,.12), transparent 70%), radial-gradient(40% 50% at 10% 10%, rgba(163,130,47,.08), transparent 70%); }
  .page-hero__grid { display:grid; gap:clamp(32px,6vw,96px); align-items:center; }
  .page-hero--media .page-hero__grid { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
  @media (max-width:1000px) { .page-hero--media .page-hero__grid { grid-template-columns:1fr; } }
  .page-hero__media { padding:10px; border-radius:var(--radius-xl); }
  .page-hero__media img { width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:calc(var(--radius-xl) - 6px); }
  .page-hero__title { font-size:var(--text-hero); line-height:var(--leading-display); letter-spacing:var(--tracking-display); font-weight:800; max-width:18ch; margin-top:var(--space-4); }
  .page-hero__lede { margin-top:var(--space-5); font-size:var(--text-body-lg); color:var(--text-secondary); max-width:58ch; }
  .crumbs ol { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; font-size:13px; color:var(--text-muted); margin-bottom:var(--space-6); }
  .crumbs li + li::before { content:"/"; margin-right:8px; opacity:.5; }
  .crumbs a { text-decoration:none; } .crumbs a:hover { color:var(--text-primary); }
  .subnav { position:sticky; top:84px; z-index:20; margin-bottom:var(--space-8); }
  .subnav__inner { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-block:6px; }
  .subnav a { flex:none; padding:8px 14px; border-radius:var(--radius-chip); font-size:14px; text-decoration:none; color:var(--text-secondary); background:color-mix(in srgb, var(--bg-page) 80%, transparent); border:1px solid var(--border-subtle); backdrop-filter:blur(12px); }
  .subnav a span { font-family:var(--font-mono); font-size:11px; color:var(--accent-on-soft); }
  .subnav a:hover { color:var(--text-primary); }

  /* ---------- Projects ---------- */
  .work-bento { display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gutter); }
  .work-bento > :nth-child(1) { grid-column:span 4; grid-row:span 2; }
  .work-bento > :nth-child(2) { grid-column:span 2; }
  .work-bento > :nth-child(3) { grid-column:span 2; }
  .work-bento > :nth-child(n+4) { grid-column:span 3; }
  .work-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,360px),1fr)); gap:var(--gutter); }
  .work-grid > .project-card--lg { grid-column:1 / -1; }
  @media (max-width:900px) { .work-bento { grid-template-columns:1fr; } .work-bento > * { grid-column:auto !important; grid-row:auto !important; } }
  .project-card { --accent:var(--teal-600); position:relative; display:flex; flex-direction:column; text-decoration:none; border-radius:var(--radius-lg); background:var(--surface-card); border:1px solid var(--border-subtle); overflow:hidden; transform-style:preserve-3d;
    transition:transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow); }
  .project-card:hover { box-shadow:var(--shadow-4); border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
  .project-card__media { position:relative; overflow:hidden; aspect-ratio:3/2; background:color-mix(in srgb, var(--accent) 22%, var(--ink-900)); }
  .project-card--lg .project-card__media { aspect-ratio:auto; flex:1; min-height:320px; }
  .project-card__media img { width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease-out); }
  .project-card:hover .project-card__media img { transform:scale(1.04); }
  .project-card__glow { position:absolute; inset:0; background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18), transparent 45%); opacity:0; transition:opacity var(--dur-slow); mix-blend-mode:soft-light; }
  .project-card:hover .project-card__glow { opacity:1; }
  .project-card__placeholder { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; color:rgba(255,255,255,.75); font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    background:radial-gradient(60% 80% at 30% 20%, color-mix(in srgb, var(--accent) 60%, transparent), transparent), radial-gradient(60% 80% at 80% 90%, rgba(163,130,47,.35), transparent), var(--ink-900); }
  .project-card__placeholder img { width:46%; max-width:200px; opacity:.9; }
  .project-card__body { padding:var(--space-5) var(--space-6) var(--space-6); display:grid; gap:8px; }
  .project-card__title { font-size:clamp(22px,2vw,28px); }
  .project-card--lg .project-card__title { font-size:clamp(26px,2.6vw,36px); }
  .project-card__summary { color:var(--text-secondary); font-size:15px; }
  .project-card__more { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--accent-on-soft); margin-top:6px; }
  .project-card__more .icon { transition:transform var(--dur-base) var(--ease-out); }
  .project-card:hover .project-card__more .icon { transform:translateX(4px); }
  .project-card--next { background:var(--ink-900); color:#f3f2ee; justify-content:end; min-height:300px; border-color:transparent; }
  .project-card--next .project-card__summary { color:#b9bbb3; }
  .project-card--next .project-card__more { color:var(--gold-400); }
  .filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--space-7); }

  /* Work page: rotating featured stage + gliding strip */
  .work-stage { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:10px; padding:10px; border-radius:var(--radius-xl); }
  @media (max-width:1000px) { .work-stage { grid-template-columns:1fr; } }
  .work-stage__media { position:relative; overflow:hidden; border-radius:calc(var(--radius-xl) - 6px); aspect-ratio:3/2; background:var(--ink-900); }
  .work-stage__slide { position:absolute; inset:0; opacity:0; transform:scale(1.04); transition:opacity .9s var(--ease-out), transform 1.6s var(--ease-out); }
  .work-stage__slide.is-active { opacity:1; transform:none; }
  .work-stage__slide img, .work-stage__slide .project-card__placeholder { width:100%; height:100%; object-fit:cover; }
  .work-stage__timer { position:absolute; left:16px; right:16px; bottom:14px; height:3px; border-radius:3px; background:rgba(255,255,255,.22); overflow:hidden; }
  .work-stage__timer span { display:block; height:100%; width:100%; transform-origin:left; background:linear-gradient(90deg,var(--brand-cyan),var(--gold-400)); animation:stage-timer 5.5s linear forwards; }
  .work-stage.is-paused .work-stage__timer span { animation-play-state:paused; }
  @keyframes stage-timer { from { transform:scaleX(0); } to { transform:scaleX(1); } }
  .work-stage__info { padding:clamp(24px,3vw,44px); display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-6); }
  .work-stage__copy { display:grid; gap:var(--space-4); align-content:start; }
  .work-stage__copy.is-active { animation:copy-in .6s var(--ease-out); }
  @keyframes copy-in { from { opacity:0; transform:translateY(12px); } }
  .work-stage__title { font-size:clamp(28px,3vw,44px); letter-spacing:-.02em; }
  .work-stage__summary { color:var(--text-secondary); font-size:var(--text-body-lg); line-height:1.6; }
  .work-stage__dots { display:flex; gap:8px; flex-wrap:wrap; }
  /* 24px-tall tap target; the visible bar is the 6px ::before. */
  .work-stage__dot { position:relative; width:28px; height:24px; border-radius:6px; transition:width var(--dur-slow) var(--ease-out); }
  .work-stage__dot::before { content:""; position:absolute; inset:9px 0; border-radius:6px; background:var(--border-strong); transition:background var(--dur-base); }
  .work-stage__dot.is-active { width:48px; }
  .work-stage__dot.is-active::before { background:linear-gradient(90deg,var(--teal-500),var(--brand-cyan)); }
  .work-strip { margin-top:var(--space-9); overflow:hidden; padding-block:12px 24px; mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .work-strip__track { display:flex; width:max-content; animation:strip 48s linear infinite; }
  .work-strip:hover .work-strip__track, .work-strip:focus-within .work-strip__track { animation-play-state:paused; }
  .work-strip.is-static { overflow-x:auto; mask:none; } .work-strip.is-static .work-strip__track { animation:none; }
  .work-strip.is-static .work-strip__set[aria-hidden] { display:none; }
  @keyframes strip { to { transform:translateX(-50%); } }
  .work-strip__set { display:flex; gap:var(--gutter); list-style:none; padding:0 calc(var(--gutter) / 2); }
  .strip-card { display:grid; width:clamp(240px,24vw,320px); text-decoration:none; border-radius:var(--radius-lg); overflow:hidden; background:var(--surface-card); border:1px solid var(--border-subtle);
    transition:transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow), border-color var(--dur-slow); }
  .strip-card:hover, .strip-card:focus-visible, .strip-card.is-current { transform:translateY(-6px); box-shadow:var(--shadow-3); border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
  .strip-card.is-current { box-shadow:var(--shadow-3), 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent); }
  .strip-card__media { position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--ink-900); }
  .strip-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
  .strip-card:hover .strip-card__media img { transform:scale(1.05); }
  .strip-card__body { display:grid; gap:6px; padding:16px 20px 20px; }
  .strip-card__body strong { font-size:18px; }
  .work-next { display:grid; grid-template-columns:1fr auto; gap:8px var(--space-6); align-items:center; padding:clamp(28px,4vw,48px); margin-top:var(--space-8); text-decoration:none; border-radius:var(--radius-xl); }
  .work-next .eyebrow, .work-next__title, .work-next__body { grid-column:1; }
  .work-next .btn { grid-column:2; grid-row:1 / 4; }
  .work-next__title { font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3vw,40px); letter-spacing:-.02em; }
  .work-next__body { color:var(--text-secondary); }
  @media (max-width:700px) { .work-next { grid-template-columns:1fr; } .work-next .btn { grid-column:1; grid-row:auto; justify-self:start; } }

  /* Case study */
  .case__meta { display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-8); margin-top:var(--space-7); }
  .case__meta dt { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }
  .case__meta dd { font-weight:600; margin-top:4px; }
  .case__meta a { color:var(--accent-on-soft); text-decoration:none; display:inline-flex; gap:4px; align-items:center; }
  .showcase { position:relative; }
  .showcase__stage { border-radius:var(--radius-panel); overflow:hidden; background:var(--ink-900); box-shadow:var(--shadow-4); }
  .showcase__frame img { width:100%; height:auto; }
  .showcase__frame.is-active { animation:fade-in 500ms var(--ease-out); }
  @keyframes fade-in { from { opacity:0; transform:scale(1.01); } }
  .showcase__tabs { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:flex; gap:4px; padding:4px; border-radius:12px; --glass-tint:rgba(16,18,17,.5); --glass-border:rgba(255,255,255,.14); color:#fff; }
  .showcase__tab { padding:8px 16px; border-radius:9px; font-size:14px; font-weight:600; color:rgba(255,255,255,.7); }
  .showcase__tab.is-active { background:rgba(255,255,255,.92); color:var(--ink-900); }
  .case__body { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:start; }
  .case__story { display:grid; gap:var(--space-8); }
  .case__text { font-size:clamp(18px,1.6vw,22px); line-height:1.55; margin-top:var(--space-3); }
  .case__aside { display:grid; gap:var(--space-4); position:sticky; top:100px; }
  @media (max-width:900px) { .case__body { grid-template-columns:1fr; } .case__aside { position:static; } }
  .coming-soon { padding:clamp(32px,6vw,80px); text-align:center; display:grid; justify-items:center; gap:var(--space-4); }
  .coming-soon img { width:200px; opacity:.9; }
  .coming-soon p { color:var(--text-secondary); max-width:48ch; }
  .case .btn--primary { background:var(--accent-strong, var(--accent)); }
  .next-project { display:flex; align-items:center; gap:var(--space-5); padding:var(--space-6) var(--space-7); text-decoration:none; border-radius:var(--radius-xl); }
  .next-project__title { font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.6vw,48px); letter-spacing:var(--tracking-heading); flex:1; min-width:0; overflow-wrap:anywhere; }
  .next-project__icon { width:40px; height:40px; flex-shrink:0; transition:transform var(--dur-slow) var(--ease-out); }
  @media (max-width:480px) { .next-project { padding:var(--space-5); gap:var(--space-4); } }
  .next-project:hover .next-project__icon { transform:translateX(8px); }

  /* ---------- Lists, ticks, tags ---------- */
  .ticks { list-style:none; padding:0; display:grid; gap:14px; }
  .ticks li { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; }
  .ticks .icon { width:18px; height:18px; margin-top:3px; color:var(--accent-on-soft); }
  .ticks--sm { font-size:15px; gap:8px; }
  .tags { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--space-4); }
  .tags li { font-size:13px; padding:4px 10px; border-radius:6px; background:var(--surface-subtle); border:1px solid var(--border-subtle); color:var(--text-secondary); }

  /* ---------- Packages ---------- */
  .packages { display:grid; gap:var(--gutter); }
  .h1 + .packages, .h1 + .packages[hidden] + .packages, .h1 + [data-market-panel] { margin-top:var(--space-9); }
  .packages--3 { grid-template-columns:repeat(auto-fit, minmax(min(100%,300px),1fr)); }
  .packages--4 { grid-template-columns:repeat(auto-fit, minmax(min(100%,260px),1fr)); }
  .package { display:flex; flex-direction:column; gap:var(--space-4); padding:clamp(28px,3vw,44px); border-radius:var(--radius-lg); }
  .package--featured { box-shadow:var(--shadow-3), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
  .package__name { font-size:var(--text-h4); }
  .package__price { font-family:var(--font-display); font-weight:800; font-size:clamp(24px,2.2vw,30px); letter-spacing:-.02em; }
  .package__best { color:var(--text-secondary); font-size:15px; }
  .package .ticks { margin-block:var(--space-3); flex:1; font-size:15px; align-content:start; }
  .package__time { display:flex; gap:8px; align-items:center; font-size:14px; color:var(--text-secondary); }
  .package .btn { margin-top:var(--space-2); }

  /* ---------- Landing sections ---------- */
  .shifts { list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7) var(--gutter); margin-top:var(--space-9); }
  @media (max-width:640px) { .shifts { grid-template-columns:1fr; } }
  .shift { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; }
  .shift-split { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px,7vw,112px); align-items:center; }
  @media (max-width:1000px) { .shift-split { grid-template-columns:1fr; } }
  .shift-split__media { position:relative; border-radius:var(--radius-xl); overflow:visible; }
  .shift-split__media img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-xl); box-shadow:var(--shadow-4); }
  .shift-split__caption { position:absolute; left:-20px; right:28px; bottom:28px; padding:22px 24px; display:grid; gap:8px; font-size:17px; line-height:1.45; }
  @media (max-width:640px) { .shift-split__caption { left:12px; right:12px; bottom:12px; } }
  .shift__n { font-family:var(--font-mono); font-size:13px; color:var(--accent-on-soft); width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:var(--accent-soft); }
  .shift__from { color:var(--text-muted); font-size:15px; }
  .shift__to { font-weight:700; font-size:20px; display:flex; gap:8px; align-items:center; }
  .shift__to .icon { color:var(--accent-on-soft); }
  .shift__body { color:var(--text-secondary); font-size:15px; }
  .services-row { display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gutter); }
  .services-row > * { grid-column:span 2; }
  .services-row > :nth-child(n+4) { grid-column:span 3; }
  @media (max-width:1000px) { .services-row { grid-template-columns:1fr 1fr; } .services-row > * { grid-column:auto !important; } }
  @media (max-width:600px) { .services-row { grid-template-columns:1fr; } }
  .svc { display:grid; gap:12px; align-content:start; padding:var(--space-5); }
  @media (min-width:1101px) { .svc { min-height:240px; } }
  .svc__n { font-family:var(--font-mono); font-size:12px; color:var(--accent-on-soft); }
  .svc__title { font-size:22px; }
  .svc__body { color:var(--text-secondary); font-size:15px; }
  .amaze-band { display:grid; grid-template-columns:1fr 1.1fr; gap:var(--space-9); align-items:center; }
  @media (max-width:900px) { .amaze-band { grid-template-columns:1fr; } }
  .amaze-letters { list-style:none; padding:0; display:grid; gap:10px; }
  .amaze-letters li { opacity:.12; transform:translateX(-24px); filter:blur(4px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out), background var(--dur-base); }
  .amaze-letters li.is-on { opacity:1; transform:none; filter:none; }
  html:not(.js) .amaze-letters li { opacity:1; transform:none; filter:none; }
  .amaze-letters li { display:flex; align-items:baseline; gap:20px; padding:14px 22px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); transition:background var(--dur-base), transform var(--dur-base) var(--ease-out); }
  .amaze-letters li.is-on:hover { background:rgba(34,195,230,.1); transform:translateX(6px); }
  .amaze-letters__l { font-family:var(--font-display); font-weight:800; font-size:clamp(34px,4vw,52px); line-height:1; background:linear-gradient(135deg,var(--teal-400),var(--brand-cyan) 55%,var(--gold-400)); -webkit-background-clip:text; background-clip:text; color:transparent; width:1.1em; }
  .amaze-letters__w { font-size:clamp(18px,1.8vw,24px); font-weight:600; }
  .quotes { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,340px),1fr)); gap:var(--gutter); margin-top:var(--space-7); }
  .quote blockquote { font-size:clamp(18px,1.6vw,22px); line-height:1.45; }
  .quote figcaption { margin-top:var(--space-5); display:grid; font-size:14px; }
  .quote figcaption span { color:var(--text-secondary); }
  .quote--lg blockquote { font-size:var(--text-quote); font-family:var(--font-display); letter-spacing:-.01em; }

  /* Client reviews */
  .reviews__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,340px),1fr)); gap:var(--gutter); }
  .review { position:relative; display:grid; gap:var(--space-5); align-content:space-between; padding:clamp(28px,3.4vw,48px); padding-top:clamp(52px,5vw,72px); }
  .review__mark { position:absolute; top:4px; left:clamp(24px,3vw,40px); font-family:var(--font-display); font-weight:800; font-size:120px; line-height:1;
    background:linear-gradient(140deg,var(--teal-500),var(--brand-cyan) 55%,var(--gold-400)); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.9; }
  .review__quote { font-size:clamp(19px,1.6vw,23px); line-height:1.55; font-weight:500; letter-spacing:-.005em; }
  .review__by { display:flex; align-items:center; gap:14px; font-size:15px; }
  .review__by span span { display:block; color:var(--text-secondary); font-size:14px; }
  .review__avatar { display:grid; place-items:center; width:48px; height:48px; border-radius:12px; flex:none; font-weight:700; font-size:20px; color:#fff;
    background:linear-gradient(140deg,var(--teal-600),var(--brand-cyan)); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 16px rgba(1,160,203,.3); }
  .review__link { position:absolute; top:clamp(24px,3vw,36px); right:clamp(24px,3vw,36px); display:inline-flex; gap:6px; align-items:center; font-size:13px; font-weight:600; color:var(--accent-on-soft); text-decoration:none; }
  .review__link:hover { text-decoration:underline; }
  .cta-band { display:grid; grid-template-columns:1.3fr auto; gap:var(--space-7); align-items:center; padding:clamp(32px,6vw,72px); border-radius:var(--radius-panel); }
  .cta-band__title { font-size:var(--text-h1); margin-top:var(--space-3); max-width:18ch; }
  .cta-band__lede { color:var(--text-secondary); margin-top:var(--space-4); max-width:52ch; }
  @media (max-width:900px) { .cta-band { grid-template-columns:1fr; } }

  /* ---------- Services page ---------- */
  .service-list { display:grid; gap:clamp(48px,8vw,112px); }
  .service { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,5vw,80px); align-items:start; }
  .service__n { font-family:var(--font-display); font-size:clamp(64px,8vw,120px); font-weight:800; line-height:.8; color:transparent; -webkit-text-stroke:1px var(--border-strong); display:block; margin-bottom:var(--space-4); }
  .service__summary { color:var(--text-secondary); font-size:var(--text-body-lg); margin-top:var(--space-4); max-width:46ch; }
  .service__spec { padding:var(--space-6); display:grid; gap:var(--space-4); justify-items:start; }
  @media (max-width:900px) { .service { grid-template-columns:1fr; } }
  .table-wrap { overflow-x:auto; margin-top:var(--space-7); border-radius:var(--radius-lg); border:1px solid var(--border-subtle); background:var(--surface-card); }
  .compare { width:100%; border-collapse:collapse; min-width:640px; font-size:15px; }
  .compare th, .compare td { text-align:left; padding:16px 20px; border-bottom:1px solid var(--border-subtle); vertical-align:top; }
  .compare thead th { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); font-weight:400; }
  .compare td:nth-child(2) { color:var(--text-muted); }
  .compare td:last-child { font-weight:600; }
  .compare td .icon { display:inline; vertical-align:-3px; color:var(--accent-on-soft); }
  .compare tr:last-child > * { border-bottom:0; }

  /* ---------- Pricing ---------- */
  .market-tabs { display:inline-flex; padding:5px; gap:4px; border-radius:14px; margin-bottom:var(--space-7); }
  .market-tabs__tab { padding:10px 20px; border-radius:10px; text-decoration:none; font-weight:600; color:var(--text-secondary); transition:all var(--dur-fast); }
  .market-tabs__tab.is-active { background:var(--ink-900); color:#fff; }
  :root[data-theme="dark"] .market-tabs__tab.is-active { background:#f3f2ee; color:var(--ink-900); }
  .estimator { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--gutter); margin-top:var(--space-7); align-items:start; }
  @media (max-width:900px) { .estimator { grid-template-columns:minmax(0,1fr); } }
  .estimator__controls { display:grid; gap:var(--space-6); }
  .estimator__result { padding:var(--space-6); display:grid; gap:var(--space-4); position:sticky; top:100px; }
  .estimator__range { font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3vw,40px); letter-spacing:-.02em; line-height:1.1; }
  .estimator__lines { display:grid; gap:10px; }
  .estimator__lines div { display:flex; justify-content:space-between; gap:12px; font-size:15px; border-top:1px solid var(--border-subtle); padding-top:10px; }
  .estimator__lines dt { color:var(--text-secondary); }
  .estimator__lines dd { font-weight:700; text-align:right; }

  /* ---------- Forms ---------- */
  .field { display:grid; gap:8px; align-content:start; }
  .field .check { justify-content:flex-start; font-weight:500; }
  .field label, .field legend { font-size:14px; font-weight:600; display:flex; justify-content:space-between; gap:8px; }
  .field output { font-weight:500; color:var(--accent-on-soft); }
  fieldset.field { border:0; padding:0; }
  .input { width:100%; min-height:52px; padding:0 16px; border-radius:var(--radius-input); border:1px solid var(--border-subtle); background:var(--bg-elevated); color:var(--text-primary); font-size:16px; transition:border-color var(--dur-fast), box-shadow var(--dur-fast); }
  textarea.input { padding:14px 16px; min-height:140px; resize:vertical; line-height:1.5; }
  select.input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375766f' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; padding-right:44px; }
  .input:hover { border-color:var(--border-strong); }
  .input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
  .has-error .input, .input[aria-invalid="true"] { border-color:var(--danger); }
  .field__error { color:var(--danger); font-size:13px; min-height:0; }
  .field__error:empty { display:none; }
  .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); }
  .field--full { grid-column:1 / -1; }
  @media (max-width:640px) { .form-grid { grid-template-columns:minmax(0,1fr); } }
  .form { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
  .check { display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--text-secondary); }
  .check input { width:20px; height:20px; accent-color:var(--accent); margin-top:2px; flex:none; }
  .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  input[type="range"] { width:100%; accent-color:var(--accent); height:28px; }
  .alert { padding:14px 18px; border-radius:12px; font-size:15px; }
  .alert--danger { background:var(--danger-soft); color:var(--danger); }
  .alert--success { background:var(--success-soft); color:var(--success); margin-bottom:var(--space-5); }
  .form__status:empty { display:none; }

  /* Planner */
  .planner-wrap { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:var(--gutter); align-items:start; }
  @media (max-width:960px) { .planner-wrap { grid-template-columns:minmax(0,1fr); } }
  .planner { padding:clamp(20px,4vw,48px); border-radius:var(--radius-xl); display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
  .planner__progress { height:4px; border-radius:4px; background:var(--surface-subtle); overflow:hidden; }
  .planner__progress span { display:block; height:100%; width:var(--p,0%); background:linear-gradient(90deg,var(--teal-500),var(--brand-cyan)); transition:width var(--dur-slow) var(--ease-out); }
  .planner__count { font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; color:var(--text-muted); text-transform:uppercase; }
  .planner__count:empty, html:not(.js) .planner__count { display:none; }
  .planner__step { border:0; padding:0; display:grid; gap:var(--space-4); min-width:0; } /* fieldsets default to min-content width */
  .planner__q { font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.02em; padding:0; }
  .planner__n { font-family:var(--font-mono); font-size:12px; color:var(--accent-on-soft); vertical-align:middle; margin-right:6px; }
  .options { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,210px),1fr)); gap:10px; }
  .option { position:relative; }
  .option input { position:absolute; opacity:0; }
  .option span { display:flex; align-items:center; min-height:56px; padding:12px 16px; border-radius:12px; border:1px solid var(--border-subtle); background:var(--surface-card); font-weight:500; cursor:pointer; transition:all var(--dur-fast) var(--ease-out); }
  .option span:hover { border-color:var(--border-strong); transform:translateY(-1px); }
  .option input:checked + span { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-on-soft); box-shadow:0 0 0 1px var(--accent); }
  .option input:focus-visible + span { outline:2px solid var(--focus-ring); outline-offset:2px; }
  .planner__nav { display:flex; justify-content:space-between; gap:12px; }
  .planner__nav [data-planner-submit], .planner__nav [data-planner-next] { margin-left:auto; }
  @media (max-width:480px) { .planner__nav { flex-wrap:wrap; } .planner__nav [data-planner-submit] { flex:1 1 100%; white-space:normal; } }
  html.js .planner .planner__step:not(.is-current) { display:none; }
  .planner-aside { display:grid; gap:var(--space-4); }
  .steps-mini { padding-left:1.2em; display:grid; gap:8px; margin-top:var(--space-3); color:var(--text-secondary); }
  .result { padding-top:calc(var(--nav-h) + 80px); }
  .result__card { padding:clamp(28px,5vw,64px); border-radius:var(--radius-xl); display:grid; gap:var(--space-5); }
  .result__pkg { font-size:var(--text-hero); letter-spacing:var(--tracking-display); line-height:1; }
  .result__facts { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .result__facts div { padding:16px; border-radius:14px; background:var(--surface-card); border:1px solid var(--border-subtle); }
  .result__facts dt { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
  .result__facts dd { font-weight:700; margin-top:4px; }
  @media (max-width:640px) { .result__facts { grid-template-columns:1fr; } }

  /* Contact */
  .contact { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:var(--gutter); align-items:start; }
  @media (max-width:900px) { .contact { grid-template-columns:minmax(0,1fr); } .contact__form { order:-1; } }
  .contact-list a, .contact-list span { min-width:0; overflow-wrap:anywhere; }
  .contact__info { display:grid; gap:var(--space-4); }
  .contact-list { list-style:none; padding:0; display:grid; gap:14px; margin-top:var(--space-4); }
  .contact-list li { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; }
  .contact-list .icon { color:var(--accent-on-soft); margin-top:3px; }
  .contact-list a { text-decoration:none; font-weight:600; }
  .whatsapp-card { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:var(--space-5); text-decoration:none; }
  .whatsapp-card__icon { width:36px; height:36px; color:#25d366; }
  .planner-link { display:grid; gap:4px; }
  .promises { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,220px),1fr)); gap:var(--space-6); }
  .promise .icon { width:28px; height:28px; color:var(--accent-on-soft); margin-bottom:var(--space-3); }
  .promise h3 { font-size:18px; }
  .promise p { color:var(--text-secondary); font-size:15px; margin-top:6px; }

  /* FAQ */
  .faq { display:grid; grid-template-columns:220px 1fr; gap:var(--space-8); align-items:start; }
  .faq__nav { display:flex; flex-direction:column; align-items:flex-start; gap:8px; position:sticky; top:100px; }
  @media (max-width:860px) { .faq { grid-template-columns:1fr; } .faq__nav { position:static; flex-direction:row; flex-wrap:wrap; } }
  .faq__groups { display:grid; gap:var(--space-8); }
  .faq__group { display:grid; gap:10px; }
  .disclosure { border-radius:16px; background:var(--surface-card); border:1px solid var(--border-subtle); transition:box-shadow var(--dur-base); }
  .disclosure[open] { box-shadow:var(--shadow-2); }
  .disclosure summary { list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 22px; font-weight:600; font-size:17px; cursor:pointer; }
  .disclosure summary::-webkit-details-marker { display:none; }
  .disclosure__icon { transition:transform var(--dur-base) var(--ease-out); color:var(--accent-on-soft); }
  .disclosure[open] .disclosure__icon { transform:rotate(45deg); }
  .disclosure__body { padding:0 22px 20px; color:var(--text-secondary); }
  .disclosure::details-content { block-size:0; overflow:clip; transition:block-size var(--dur-slow) var(--ease-out), content-visibility var(--dur-slow) allow-discrete; }
  .disclosure[open]::details-content { block-size:auto; }
  :root { interpolate-size:allow-keywords; }

  /* Process: each A.M.A.Z.E. letter sits beside its own panel and appears as that panel scrolls in */
  .amaze-rows { list-style:none; padding:0; position:relative; display:grid; gap:clamp(48px,9vh,112px); padding-block:var(--space-6) var(--space-10); }
  .amaze-rows::before { content:""; position:absolute; left:calc(min(22vw, 260px) / 2); top:0; bottom:0; width:2px; border-radius:2px;
    background:linear-gradient(var(--teal-500), var(--brand-cyan), var(--gold-500)); opacity:.18; }
  .amaze-row { display:grid; grid-template-columns:min(22vw, 260px) minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:center; }
  .amaze-row__letter { position:relative; display:grid; justify-items:center; gap:6px; text-align:center; }
  .amaze-row__letter b { font-family:var(--font-display); font-weight:800; font-size:clamp(96px,13vw,200px); line-height:.9; letter-spacing:-.04em;
    background:linear-gradient(140deg, var(--teal-500), var(--brand-cyan) 50%, var(--gold-500)); -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 12px 30px rgba(1,160,203,.22)); }
  .amaze-row__letter small { font-family:var(--font-mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-on-soft); }
  .amaze-row__panel { padding:clamp(28px,3.5vw,48px); }
  .amaze-row__panel p:not(.eyebrow) { color:var(--text-secondary); margin-top:var(--space-4); max-width:60ch; }
  /* reveal: the letter rises in first, then its panel slides in beside it */
  html.js .amaze-row__letter { opacity:0; transform:translateY(60px) scale(.8); filter:blur(10px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
  html.js .amaze-row__panel { opacity:0; transform:translateX(40px); transition:opacity .9s var(--ease-out) .18s, transform .9s var(--ease-out) .18s, box-shadow var(--dur-slow); }
  html.js .amaze-row.is-seen .amaze-row__letter { opacity:1; transform:none; filter:none; }
  html.js .amaze-row.is-seen .amaze-row__panel { opacity:1; transform:none; }
  /* Narrower screens: slide panels up, not in from the side (sideways start pushed the page wider than the screen). */
  @media (max-width:1100px) { html.js .amaze-row__panel { transform:translateY(32px); } }
  .amaze-row.is-active .amaze-row__panel { box-shadow:0 0 0 1px rgba(1,160,203,.35), 0 24px 60px rgba(1,160,203,.16); }
  @media (max-width:760px) {
    .amaze-rows::before { display:none; }
    .amaze-row { grid-template-columns:1fr; gap:12px; }
    .amaze-row__letter { justify-items:start; grid-auto-flow:column; align-items:end; justify-content:start; gap:14px; }
    .amaze-row__letter b { font-size:84px; }
  }

  /* Process timeline */
  .timeline { list-style:none; padding:0; display:grid; gap:var(--space-5); position:relative; }
  .timeline::before { content:""; position:absolute; left:39px; top:20px; bottom:20px; width:1px; background:linear-gradient(var(--teal-500),var(--brand-cyan),var(--gold-500)); opacity:.5; }
  .timeline__step { display:grid; grid-template-columns:80px 1fr; gap:var(--space-5); align-items:start; }
  .timeline__letter { position:relative; display:grid; place-items:center; width:80px; height:80px; border-radius:20px; font-family:var(--font-display); font-weight:800; font-size:40px; color:#fff; background:linear-gradient(135deg,var(--teal-600),var(--teal-800)); box-shadow:var(--shadow-glow); }
  .timeline__content { padding:var(--space-6); }
  .timeline__content p:not(.eyebrow) { color:var(--text-secondary); margin-top:var(--space-3); max-width:60ch; }
  @media (max-width:640px) { .timeline__step { grid-template-columns:1fr; } .timeline::before { display:none; } .timeline__letter { width:56px; height:56px; font-size:28px; border-radius:14px; } }

  /* Industries */
  .industry-list { display:grid; gap:clamp(40px,6vw,88px); }
  .industry { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(24px,5vw,72px); align-items:center; }
  .industry:nth-child(even) .industry__media { order:2; }
  .industry__media { border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; background:var(--bg-sunken); }
  .industry__media img { width:100%; height:100%; object-fit:cover; }
  .industry__body { display:grid; gap:var(--space-4); }
  .industry__body > p:not(.eyebrow):not(.smart) { color:var(--text-secondary); }
  .smart { display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:14px; font-size:15px; }
  .smart .icon { color:var(--premium); margin-top:3px; }
  @media (max-width:860px) { .industry { grid-template-columns:1fr; } .industry:nth-child(even) .industry__media { order:0; } }

  /* About */
  .about-split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); align-items:start; }
  .about-split .prose { font-size:var(--text-body-lg); color:var(--text-secondary); }
  @media (max-width:860px) { .about-split { grid-template-columns:1fr; } }
  .clocks { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,300px),1fr)); gap:var(--gutter); margin-top:var(--space-8); }
  .clock { display:grid; gap:4px; padding:var(--space-8) var(--space-7); border-radius:var(--radius-xl); text-decoration:none; overflow:hidden; }
  .clock__photo { position:absolute; inset:0; z-index:-2; }
  .clock__photo img { width:100%; height:100%; object-fit:cover; opacity:.42; transition:transform 1.2s var(--ease-out), opacity var(--dur-slow); }
  .clock__photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,13,14,.2), rgba(10,13,14,.85)); }
  .clock:hover .clock__photo img { transform:scale(1.05); opacity:.6; }
  .clock__time { font-family:var(--font-mono); font-size:clamp(44px,6vw,72px); letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1; background:linear-gradient(135deg,#fff,var(--teal-400)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .clock__city { font-weight:700; font-size:20px; margin-top:var(--space-4); }
  .clock__region { color:var(--text-secondary); font-size:14px; }
  .pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); margin-top:var(--space-9); }
  @media (max-width:980px) { .pillars { grid-template-columns:1fr 1fr; } }
  @media (max-width:600px) { .pillars { grid-template-columns:1fr; } }
  .pillar { display:grid; gap:10px; align-content:start; }
  .pillar__n { font-family:var(--font-mono); font-size:12px; color:var(--accent-on-soft); }
  .pillar p { color:var(--text-secondary); font-size:15px; }

  /* Search & error */
  .search-form { display:flex; gap:10px; margin-bottom:var(--space-6); }
  .results { list-style:none; padding:0; display:grid; gap:10px; }
  .result-row { display:grid; gap:6px; justify-items:start; }
  .result-row span:last-child { color:var(--text-secondary); font-size:15px; }
  .empty { color:var(--text-secondary); }
  .error-page { padding-top:calc(var(--nav-h) + 120px); min-height:70vh; }
  .error-page p:not(.eyebrow) { color:var(--text-secondary); margin-block:var(--space-4) var(--space-6); }

  /* ---------- Footer ---------- */
  /* Call to action: full-bleed photo, brand gradient and a glass card, so it never blends in */
  .cta-stage { position:relative; isolation:isolate; overflow:hidden; padding-block:clamp(96px,14vw,200px); margin-top:var(--section-y-tight); color:#fff; }
  .cta-stage__photo { position:absolute; inset:0; z-index:-2; }
  .cta-stage__photo img { width:100%; height:100%; object-fit:cover; }
  .cta-stage::before { content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(115deg, rgba(4,40,56,.92) 0%, rgba(3,106,141,.78) 38%, rgba(1,160,203,.35) 70%, rgba(163,130,47,.45) 100%); }
  .cta-stage::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg, var(--gold-400), var(--brand-cyan), var(--gold-400)); }
  .cta-stage__card { max-width:820px; padding:clamp(32px,5vw,64px); display:grid; gap:var(--space-5); justify-items:start; }
  .cta-stage__eyebrow { color:#fff; }
  .cta-stage__title { font-size:clamp(44px,6.4vw,92px); line-height:.98; letter-spacing:var(--tracking-display); font-weight:800; }
  .cta-stage__lede { font-size:var(--text-body-lg); color:rgba(255,255,255,.88); max-width:48ch; }
  .btn--light { background:#fff; color:var(--teal-800); box-shadow:0 10px 30px rgba(0,0,0,.2); }
  .btn--light:hover { background:#f2fbfe; box-shadow:0 14px 40px rgba(0,0,0,.28), 0 0 0 4px rgba(255,255,255,.25); }
  .site-footer { padding-block:var(--space-10) var(--space-7); position:relative; overflow:hidden; }
  .site-footer::before { content:""; position:absolute; inset:auto -10% -40% -10%; height:80%; background:radial-gradient(50% 60% at 50% 100%, rgba(1,160,203,.25), transparent 70%); pointer-events:none; }
  .site-footer__cta { position:relative; display:grid; gap:var(--space-5); justify-items:start; padding-bottom:var(--space-10); border-bottom:1px solid var(--border-subtle); }
  .site-footer__title { font-size:var(--text-display); line-height:.95; letter-spacing:var(--tracking-display); font-weight:800; }
  .site-footer__grid { position:relative; display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--space-7); padding-bottom:var(--space-9); font-size:15px; }
  .site-footer__grid > * { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
  .site-footer__grid a { text-decoration:none; color:var(--text-secondary); }
  .site-footer__grid a:hover { color:var(--text-primary); }
  .site-footer__grid p { color:var(--text-secondary); }
  .site-footer__brand img { width:110px; }
  .footer-h { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); font-weight:400; margin-bottom:6px; }
  .site-footer__base { position:relative; display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4); padding-top:var(--space-6); border-top:1px solid var(--border-subtle); font-size:13px; color:var(--text-muted); }
  .site-footer__legal { display:flex; gap:18px; flex-wrap:wrap; }
  .site-footer__legal a { text-decoration:none; }
  .site-footer__legal a:hover { color:var(--text-primary); }
  @media (max-width:960px) { .site-footer__grid { grid-template-columns:1fr 1fr; } .site-footer__brand { grid-column:1 / -1; } }
}

/* ==========================================================================
   Motion: reveals, view transitions, reduced motion
   ========================================================================== */
@layer motion {
  /* Scroll-driven reveal where supported (CSS only, no JS)… */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion:no-preference) {
      .reveal { animation:reveal linear both; animation-timeline:view(); animation-range:entry 0% cover 22%; }
    }
  }
  /* …otherwise IntersectionObserver adds .is-in (only when JS runs, so no-JS stays visible). */
  @supports not (animation-timeline: view()) {
    html.js .reveal:not(.is-in) { opacity:0; transform:translateY(24px); }
    html.js .reveal { transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
  }
  @keyframes reveal { from { opacity:0; transform:translateY(28px); filter:blur(3px); } to { opacity:1; transform:none; filter:none; } }

  /* Hero headline words rise in after the intro */
  html.js .hero__title .w { opacity:0; transform:translateY(.4em); filter:blur(6px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); transition-delay:calc(var(--wi) * 55ms + 120ms); }
  html.js.hero-in .hero__title .w { opacity:1; transform:none; filter:none; }

  /* Cross-document view transitions: pages morph instead of flashing */
  @view-transition { navigation:auto; }
  ::view-transition-old(root) { animation:vt-out 260ms var(--ease-out) both; }
  ::view-transition-new(root) { animation:vt-in 420ms var(--ease-out) both; }
  ::view-transition-group(*) { animation-duration:520ms; animation-timing-function:var(--ease-out); }
  @keyframes vt-out { to { opacity:0; transform:scale(.99); filter:blur(4px); } }
  @keyframes vt-in { from { opacity:0; transform:translateY(12px); } }

  @media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
    .ticker__track { animation:none; }
    html.js .hero__title .w { opacity:1; transform:none; filter:none; }
  }
}

@layer utilities {
  .text-center { text-align:center; }
}

/* Nav tools: one height for the market switch and theme button, and a coloured theme toggle */
@layer components {
  .site-nav__tools { display:flex; align-items:center; gap:10px; margin-left:auto; flex:none; }
  .site-nav .market-switch { height:42px; align-items:center; padding:4px; }
  .site-nav .market-switch__opt { display:grid; place-items:center; height:32px; min-width:38px; padding:0 9px; }
  .site-nav .icon-btn { width:42px; height:42px; }
  .site-nav__theme {
    color:#5a3d00 !important; border:0 !important;
    background:linear-gradient(145deg, #ffd66b, #f2a93b) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(160,100,10,.25), 0 4px 14px rgba(242,169,59,.45);
  }
  .site-nav__theme:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(160,100,10,.3), 0 6px 20px rgba(242,169,59,.65); transform:translateY(-1px); }
  .site-nav__theme .icon { width:20px; height:20px; }
  :root[data-theme="dark"] .site-nav__theme {
    color:#e9ecff !important;
    background:linear-gradient(145deg, #4b4fd6, #23246b) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(255,255,255,.12), 0 4px 16px rgba(75,79,214,.55);
  }
}

@layer components {
  /* Reviews: comfortable reading size in three columns */
  .review__quote { font-size:clamp(17px,1.3vw,19px); line-height:1.65; font-weight:400; }
  /* Nav glass: denser frost so page text never shows through the menu */
  .site-nav__inner { --glass-tint:rgba(255,255,255,.84); --glass-tint-2:rgba(248,250,252,.72); --glass-blur:blur(30px) saturate(160%); }
  :root[data-theme="dark"] .site-nav__inner { --glass-tint:rgba(30,34,33,.86); --glass-tint-2:rgba(20,23,22,.78); }
  .site-nav.on-dark .site-nav__inner { --glass-tint:rgba(18,22,22,.62); --glass-tint-2:rgba(18,22,22,.5); }
}

/* Phone / WhatsApp reveal */
@layer components {
  .reveal-dialog { margin:auto; width:min(560px, calc(100% - 24px)); max-height:calc(100dvh - 24px); padding:0; border:0; background:transparent; color:var(--text-primary); overflow:auto; }
  .reveal-dialog::backdrop { background:rgba(10,12,11,.45); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .reveal-dialog[open] .reveal-dialog__panel { animation:panel-in 360ms var(--ease-out); }
  .reveal-dialog__panel { position:relative; padding:clamp(24px,4vw,40px); border-radius:var(--radius-xl); display:grid; gap:var(--space-4); }
  .reveal-dialog__panel [data-reveal-step] { display:grid; gap:var(--space-4); }
  .reveal-dialog__panel [hidden] { display:none !important; }
  .reveal-dialog__close { position:absolute; top:14px; right:14px; }
  .reveal-dialog__lede { color:var(--text-secondary); }
  .reveal-dialog .form { gap:var(--space-5); }
  .reveal-number { font-family:var(--font-display); font-weight:800; font-size:clamp(32px,6vw,46px); letter-spacing:-.02em; color:var(--accent-on-soft); }
  .btn--whatsapp { background:#25d366; color:#06301a; }
  .btn--whatsapp:hover { background:#3ee07a; box-shadow:0 8px 30px rgba(37,211,102,.35); }
  .footer-reveal { display:inline-flex; align-items:center; gap:8px; padding:0; color:var(--text-secondary); font-size:15px; }
  .footer-reveal:hover { color:var(--text-primary); }
  .link-btn { padding:0; font-weight:600; color:var(--accent-on-soft); text-decoration:underline; text-underline-offset:.2em; }
  button.whatsapp-card { width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; }
  .form__status:empty { display:none; }
  .form__status { color:var(--danger); font-size:14px; }
}

/* Free AI Readiness Scan: a full-width violet "AI" stage, unlike any other band on the site */
@layer components {
  .scan-stage { position:relative; isolation:isolate; overflow:hidden; padding-block:clamp(80px,10vw,144px); color:#f3f2ee;
    background:radial-gradient(60% 80% at 15% 20%, rgba(139,123,255,.35), transparent 60%), radial-gradient(50% 70% at 90% 90%, rgba(34,195,230,.25), transparent 60%), #0b0a1d; }
  .scan-stage__photo { position:absolute; inset:0; z-index:-1; }
  .scan-stage__photo img { width:100%; height:100%; object-fit:cover; opacity:.45; mix-blend-mode:screen; animation:scan-drift 26s var(--ease-inout) infinite alternate; }
  .scan-stage__photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,10,29,.92) 0%, rgba(11,10,29,.6) 45%, rgba(11,10,29,.2) 100%); }
  .scan-stage::before, .scan-stage::after { content:""; position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, #8b7bff, #22c3e6, transparent); opacity:.8; }
  .scan-stage::before { top:0; } .scan-stage::after { bottom:0; }
  @keyframes scan-drift { to { transform:scale(1.08) translate3d(-2%,1%,0); } }
  .scan-stage__grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,6vw,96px); align-items:center; }
  @media (max-width:960px) { .scan-stage__grid { grid-template-columns:1fr; } }
  .scan-stage__badge { display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:8px; font-family:var(--font-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
    color:#e9e5ff; background:rgba(139,123,255,.18); border:1px solid rgba(139,123,255,.45); }
  .scan-stage__title { font-size:clamp(40px,5.6vw,80px); line-height:1.02; letter-spacing:-.03em; font-weight:800; margin-top:var(--space-5); }
  .scan-stage__title span { background:linear-gradient(100deg, #b7acff, #22c3e6 60%, #cfae62); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .scan-stage__text { margin-top:var(--space-5); font-size:var(--text-body-lg); color:rgba(243,242,238,.82); max-width:50ch; }
  .scan-stage__checks { list-style:none; padding:0; margin-top:var(--space-6); display:grid; grid-template-columns:repeat(2, minmax(0, max-content)); gap:12px 28px; font-size:15px; color:rgba(243,242,238,.9); }
  .scan-stage__checks li { display:flex; align-items:center; gap:10px; }
  .scan-stage__checks .icon { color:#b7acff; }
  .scan-stage__panel { padding:clamp(24px,3.4vw,40px); border-radius:var(--radius-xl); display:grid; gap:var(--space-6);
    --glass-tint:rgba(139,123,255,.16); --glass-tint-2:rgba(11,10,29,.35); --glass-rim:rgba(200,190,255,.8); }
  .scan-stage__gauge { position:relative; display:grid; place-items:center; width:180px; margin-inline:auto; }
  .scan-stage__gauge svg { width:180px; height:180px; filter:drop-shadow(0 0 18px rgba(139,123,255,.55)); }
  .scan-stage__arc { animation:scan-sweep 3.6s var(--ease-inout) infinite; }
  @keyframes scan-sweep { 0% { stroke-dashoffset:100; } 55%,80% { stroke-dashoffset:24; } 100% { stroke-dashoffset:100; } }
  .scan-stage__score { position:absolute; top:58px; font-family:var(--font-display); font-weight:800; font-size:46px; line-height:1; }
  .scan-stage__score small { font-size:16px; font-weight:600; opacity:.6; margin-left:2px; }
  .scan-stage__score-label { white-space:nowrap; margin-top:10px; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,242,238,.7); }
  .scan-stage__form { display:grid; gap:12px; }
  .scan-stage__label { font-size:14px; font-weight:600; }
  .scan-stage__form .input { background:rgba(255,255,255,.95); color:var(--ink-900); border-color:transparent; min-height:56px; }
  .btn--scan { color:#fff; background:linear-gradient(100deg, #7b6bff, #4b8bff 55%, #22c3e6); box-shadow:0 10px 30px rgba(123,107,255,.45), inset 0 1px 0 rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:.12em; font-size:14px; }
  .btn--scan:hover { box-shadow:0 14px 40px rgba(123,107,255,.65), 0 0 0 4px rgba(139,123,255,.25), inset 0 1px 0 rgba(255,255,255,.4); filter:brightness(1.06); }
  .scan-stage__fine { font-size:13px; color:rgba(243,242,238,.65); text-align:center; }
  @media (prefers-reduced-motion:reduce) { .scan-stage__arc { animation:none; stroke-dashoffset:24; } }
}

/* The Leaf mark: flat on light surfaces, brushed metal on dark ones (100×131, never stretched) */
@layer components {
  .ua-mark { position:relative; display:inline-block; flex:none; aspect-ratio:100 / 131; }
  .ua-mark > img { position:absolute; inset:0; width:100%; height:100%; }
  .ua-mark__metal { opacity:0; }
  :root[data-theme="dark"] .ua-mark__light, .site-nav.on-dark .ua-mark__light, .ink .ua-mark__light { opacity:0; }
  :root[data-theme="dark"] .ua-mark__metal, .site-nav.on-dark .ua-mark__metal, .ink .ua-mark__metal { opacity:1; }
  .ua-mark > img { transition:opacity var(--dur-slow) var(--ease-out); }
  .brand__mark.ua-mark { height:46px; width:auto; filter:drop-shadow(0 2px 8px rgba(1,160,203,.3)); view-transition-name:brand; }
  .footer-brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
  .footer-brand img { height:52px; width:auto; }
  .footer-brand span { font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.24em; text-transform:uppercase; color:#f3f2ee; }
  .site-footer__brand .footer-brand + p { margin-top:4px; }
  .placeholder-mark { width:auto !important; height:38%; max-height:120px; filter:drop-shadow(0 8px 24px rgba(1,190,225,.35)); }
  .coming-soon__mark { width:auto !important; height:120px; }
  .hero__ghost { width:auto; height:min(86%, 680px); right:4%; top:8%; opacity:.06; filter:saturate(0) brightness(2.2); transform:rotate(-4deg); }
}