/* ==========================================================================
   LLW AstroCare — Design System v2 "Orbit Premium"
   Drop-in replacement for style.css. Every original selector, theme name
   (calm / night / warm) and JS hook (.reveal, .is-open, .is-visible,
   aria-expanded, data-open, data-theme) is preserved.

   Notes
   - Hover motion uses the individual `translate` / `scale` properties, so it
     never fights GSAP's inline `transform` (orbit nodes, .reveal).
   - Optional: set --mx / --my on cards via JS for a cursor spotlight
     (works without JS too, it just sits top-centre).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,500;1,9..144,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  --radius-s:10px;
  --radius-m:20px;
  --radius-l:32px;
  --container:1220px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-s:.25s;
  --dur-m:.6s;
}

/* ---------- CALM (default) ---------- */
:root,
[data-theme="calm"]{
  color-scheme:light;
  --bg:#F6F5FC;
  --bg-alt:#ECE9F8;
  --surface:#FFFFFF;
  --surface-2:#FAF9FE;
  --text:#1A1533;
  --text-soft:#5A5475;
  --border:rgba(26,21,51,.09);
  --border-strong:rgba(26,21,51,.16);
  --accent:#9A7416;
  --accent-ink:#FFFFFF;
  --accent-2:#6B58D6;
  --accent-3:#C8718A;
  --hairline:inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-soft:0 24px 60px -28px rgba(40,25,110,.35);
  --shadow-card:0 1px 2px rgba(26,21,51,.04), 0 10px 28px -16px rgba(40,25,110,.18);
  --shadow-lift:0 2px 4px rgba(26,21,51,.04), 0 30px 60px -26px rgba(70,50,170,.38);
  --grad-text:linear-gradient(110deg,#9A7416 0%,#B8892B 38%,#6B58D6 100%);
  --aurora:
    radial-gradient(40% 50% at 12% 8%, rgba(107,88,214,.22), transparent 70%),
    radial-gradient(34% 44% at 88% 18%, rgba(200,113,138,.17), transparent 70%),
    radial-gradient(40% 40% at 55% 95%, rgba(184,137,43,.14), transparent 70%);
  --glow:radial-gradient(60% 60% at 50% 40%, rgba(107,88,214,.18), transparent 70%);
  --grain:.035;
}

/* ---------- NIGHT ---------- */
[data-theme="night"]{
  color-scheme:dark;
  --bg:#09071A;
  --bg-alt:#0F0C24;
  --surface:#14112B;
  --surface-2:#1A1636;
  --text:#F2EFFF;
  --text-soft:#A29BC6;
  --border:rgba(242,239,255,.08);
  --border-strong:rgba(242,239,255,.16);
  --accent:#EBCB72;
  --accent-ink:#17122E;
  --accent-2:#9C8EFF;
  --accent-3:#F08AA2;
  --hairline:inset 0 1px 0 rgba(255,255,255,.07);
  --shadow-soft:0 28px 70px -28px rgba(0,0,0,.8);
  --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.7);
  --shadow-lift:0 2px 4px rgba(0,0,0,.3), 0 34px 70px -26px rgba(120,100,255,.35);
  --grad-text:linear-gradient(110deg,#F6DE9A 0%,#EBCB72 38%,#B7ACFF 100%);
  --aurora:
    radial-gradient(42% 52% at 12% 6%, rgba(140,120,255,.30), transparent 70%),
    radial-gradient(34% 44% at 90% 16%, rgba(240,138,162,.18), transparent 70%),
    radial-gradient(40% 40% at 55% 98%, rgba(235,203,114,.14), transparent 70%);
  --glow:radial-gradient(60% 60% at 50% 40%, rgba(156,142,255,.28), transparent 70%);
  --grain:.06;
}

/* ---------- WARM ---------- */
[data-theme="warm"]{
  color-scheme:light;
  --bg:#FBF1E3;
  --bg-alt:#F4E3CB;
  --surface:#FFFAF1;
  --surface-2:#FCF0DE;
  --text:#36210F;
  --text-soft:#7A5C46;
  --border:rgba(54,33,15,.11);
  --border-strong:rgba(54,33,15,.20);
  --accent:#A9570F;
  --accent-ink:#FFF9EF;
  --accent-2:#8B4A62;
  --accent-3:#C88A3F;
  --hairline:inset 0 1px 0 rgba(255,255,255,.85);
  --shadow-soft:0 24px 60px -28px rgba(110,55,15,.38);
  --shadow-card:0 1px 2px rgba(54,33,15,.05), 0 10px 28px -16px rgba(110,55,15,.22);
  --shadow-lift:0 2px 4px rgba(54,33,15,.05), 0 30px 60px -26px rgba(139,74,98,.38);
  --grad-text:linear-gradient(110deg,#A9570F 0%,#C0742A 40%,#8B4A62 100%);
  --aurora:
    radial-gradient(40% 50% at 12% 8%, rgba(201,128,50,.24), transparent 70%),
    radial-gradient(34% 44% at 88% 18%, rgba(139,74,98,.16), transparent 70%),
    radial-gradient(40% 40% at 55% 95%, rgba(181,101,29,.13), transparent 70%);
  --glow:radial-gradient(60% 60% at 50% 40%, rgba(181,101,29,.18), transparent 70%);
  --grain:.04;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background var(--dur-m) var(--ease-out), color var(--dur-m) var(--ease-out);
  overflow-x:hidden;
}
/* fine film grain: removes the flat "digital" look from large gradients */
body::after{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:var(--grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{
  font-family:var(--font-display); font-optical-sizing:auto; font-weight:500;
  margin:0; line-height:1.08; letter-spacing:-.025em; text-wrap:balance;
}
p{margin:0; text-wrap:pretty;}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px;}

/* the accent phrase: gold-to-violet gradient ink */
.italic{
  font-style:italic; font-weight:500; color:var(--accent);
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; padding-right:.06em;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px; border-radius:6px;}
::selection{background:var(--accent-2); color:#fff;}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:var(--bg-alt);}
::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:999px; border:2px solid var(--bg-alt);}
::-webkit-scrollbar-thumb:hover{background:var(--accent-2);}

/* ---------- Eyebrow: quiet pill with a lit dot ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 14px 6px 12px; border-radius:999px;
  border:1px solid var(--border-strong);
  background:color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter:blur(8px);
  font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.01em;
  color:var(--text-soft);
  box-shadow:var(--hairline);
}
.eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 12px var(--accent);
}

/* ---------- Buttons ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px; font-weight:600; font-size:15px; letter-spacing:-.005em;
  white-space:nowrap;
  transition:translate var(--dur-s) var(--ease-out), scale var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out), border-color var(--dur-s), background var(--dur-s);
}
.btn::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .7s var(--ease-out);
}
.btn:hover{translate:0 -2px;}
.btn:hover::after{transform:translateX(120%);}
.btn:active{translate:0 0; scale:.97;}

.btn-primary{
  color:var(--accent-ink);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff) 0%, var(--accent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 0 0 1px color-mix(in srgb, var(--accent) 80%, #000),
    0 12px 28px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn-primary:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 0 0 1px color-mix(in srgb, var(--accent) 80%, #000),
    0 18px 38px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn-ghost{
  color:var(--text);
  background:color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter:blur(10px);
  border:1px solid var(--border-strong);
  box-shadow:var(--hairline);
}
.btn-ghost:hover{border-color:var(--accent-2); background:var(--surface);}

/* ---------- Navbar: frosted glass ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 68%, transparent);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding-block:14px;}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-size:21px; font-weight:600; letter-spacing:-.02em;}
.brand-mark{
  width:34px; height:34px; border-radius:50%;
  background:conic-gradient(from 200deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -6px 10px rgba(0,0,0,.18), 0 8px 20px -6px var(--accent-2);
}
.nav-links{display:flex; align-items:center; gap:32px;}
.nav-links a{font-size:14.5px; font-weight:500; color:var(--text-soft); transition:color var(--dur-s);}
.nav-links a:hover{color:var(--text);}
.nav-links a:not(.nav-dropdown-menu a){position:relative; padding-bottom:2px;}
.nav-links a:not(.nav-dropdown-menu a)::after{
  content:''; position:absolute; left:0; bottom:-4px; width:100%; height:1.5px; border-radius:2px;
  background:var(--grad-text); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-s) var(--ease-out);
}
.nav-links a:not(.nav-dropdown-menu a):hover::after{transform:scaleX(1);}
.nav-actions{display:flex; align-items:center; gap:14px;}

.theme-toggle{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border-strong); border-radius:999px; padding:7px 14px;
  background:color-mix(in srgb, var(--surface) 60%, transparent);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
  color:var(--text-soft);
  transition:border-color var(--dur-s), scale var(--dur-s);
}
.theme-toggle:hover{border-color:var(--accent-2);}
.theme-toggle:active{scale:.95;}
.theme-toggle .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); transition:rotate var(--dur-s);}
.theme-toggle:hover .dot{rotate:180deg;}

.nav-text-link{font-size:14.5px; font-weight:500; color:var(--text-soft); transition:color var(--dur-s);}
.nav-text-link:hover{color:var(--text);}

.nav-dropdown{position:relative;}
.nav-dropdown-trigger{display:flex; align-items:center; gap:5px; font-size:14.5px; font-weight:500; color:var(--text-soft); transition:color var(--dur-s);}
.nav-dropdown-trigger:hover{color:var(--text);}
.dropdown-caret{font-size:10px; transition:transform var(--dur-s);}
.nav-dropdown.is-open .dropdown-caret{transform:rotate(180deg);}
.nav-dropdown-menu{
  display:none; position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%);
  min-width:180px; padding:8px; flex-direction:column; gap:2px; z-index:50;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(18px);
  border:1px solid var(--border-strong); border-radius:var(--radius-m);
  box-shadow:var(--hairline), var(--shadow-lift);
}
.nav-dropdown.is-open .nav-dropdown-menu{display:flex; animation:menuIn .28s var(--ease-out);}
@keyframes menuIn{from{opacity:0; translate:0 -6px;} to{opacity:1; translate:0 0;}}
.nav-dropdown-menu a{padding:10px 12px; font-size:14px; border-radius:12px; color:var(--text-soft);}
.nav-dropdown-menu a:hover{background:var(--surface-2); color:var(--text);}

.hamburger{display:none; flex-direction:column; gap:5px; width:26px; padding:4px;}
.hamburger span{display:block; height:2px; width:100%; background:var(--text); border-radius:2px; transition:transform var(--dur-s), opacity var(--dur-s);}
.hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.is-open span:nth-child(2){opacity:0;}
.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-panel{
  display:none; flex-direction:column; gap:4px;
  border-top:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter:blur(18px);
}
.mobile-panel.is-open{display:flex; animation:menuIn .3s var(--ease-out);}
.mobile-panel a{padding:15px 24px; font-weight:500; border-bottom:1px solid var(--border);}
.mobile-panel .mobile-cta{padding:16px 24px;}

@media (max-width:900px){
  .nav-links, .nav-actions{display:none;}
  .hamburger{display:flex;}
}

/* ---------- Hero: aurora + fading grid + orbit ---------- */
.hero{position:relative; isolation:isolate; padding-block:clamp(72px,10vw,128px) 72px; overflow:hidden;}
.hero::before{
  content:''; position:absolute; inset:-10% -10% 0; z-index:1; pointer-events:none;
  background:var(--aurora);
  animation:auroraDrift 20s ease-in-out infinite alternate;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.75;
  background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 28%, #000 0%, transparent 75%);
  mask-image:radial-gradient(70% 60% at 50% 28%, #000 0%, transparent 75%);
}
@keyframes auroraDrift{from{transform:translate3d(-2%,0,0) scale(1);} to{transform:translate3d(2%,2%,0) scale(1.07);}}
.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden;}
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  opacity:.22; mix-blend-mode:luminosity;
  -webkit-mask-image:radial-gradient(65% 65% at 50% 35%, black 0%, transparent 78%);
  mask-image:radial-gradient(65% 65% at 50% 35%, black 0%, transparent 78%);
}
.hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.hero-copy h1{font-size:clamp(2.6rem, 5.4vw, 4.5rem); line-height:1.02; letter-spacing:-.035em; margin-block:24px 24px;}
.hero-copy p{max-width:48ch; color:var(--text-soft); font-size:clamp(16.5px,1.5vw,18.5px); line-height:1.7;}
.hero-cta{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}

.orbit-wrap{position:relative; aspect-ratio:1/1; max-width:480px; margin-inline:auto;}
.orbit-wrap::before{
  content:''; position:absolute; inset:6%; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent-2) 34%, transparent), transparent 66%);
  filter:blur(34px);
}
.orbit-ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%;
  border:1px solid var(--border-strong);
  box-shadow:inset 0 0 46px color-mix(in srgb, var(--accent-2) 7%, transparent);
}
.orbit-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5;
  width:104px; height:104px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  background:radial-gradient(circle at 30% 25%, var(--surface), var(--surface-2));
  border:1px solid var(--border-strong);
  box-shadow:var(--hairline), var(--shadow-soft), 0 0 0 10px color-mix(in srgb, var(--accent-2) 9%, transparent);
  font-family:var(--font-display); font-size:14px; font-weight:600; text-align:center; line-height:1.2;
  animation:corePulse 4.5s ease-in-out infinite;
}
@keyframes corePulse{
  0%,100%{box-shadow:var(--hairline), var(--shadow-soft), 0 0 0 10px color-mix(in srgb, var(--accent-2) 9%, transparent);}
  50%{box-shadow:var(--hairline), var(--shadow-soft), 0 0 0 20px color-mix(in srgb, var(--accent-2) 2%, transparent);}
}
.orbit-core span{display:block; font-size:10px; font-family:var(--font-mono); font-weight:400; color:var(--text-soft); letter-spacing:.06em;}
.orbit-node{
  position:absolute; top:50%; left:50%; width:auto; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:8px; white-space:nowrap; cursor:default;
  padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:600;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:blur(10px);
  border:1px solid var(--border-strong);
  box-shadow:var(--hairline), 0 10px 26px -14px rgba(20,15,45,.5);
  transition:scale var(--dur-s) var(--ease-out), border-color var(--dur-s);
}
.orbit-node .node-dot{width:7px; height:7px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 10px var(--accent-2);}
.orbit-node:hover{scale:1.12; border-color:var(--accent-2); z-index:6;}

/* ---------- Stats strip ---------- */
.stats{border-block:1px solid var(--border); background:linear-gradient(180deg, var(--surface-2), var(--bg));}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); padding-block:48px;}
.stat{text-align:center; padding-inline:12px; border-left:1px solid var(--border); transition:translate var(--dur-s) var(--ease-out);}
.stat:first-child{border-left:none;}
.stat:hover{translate:0 -3px;}
.stat b{
  display:block; font-family:var(--font-display); font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:500; letter-spacing:-.03em; line-height:1.15;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stat span{font-size:13.5px; color:var(--text-soft);}
@media (max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr); gap:28px 0;} .stat:nth-child(3){border-left:none;}}

/* ---------- Section shell ---------- */
.section{padding-block:112px;}
.section-head{max-width:680px; margin-bottom:56px;}
.section-head h2{font-size:clamp(2rem,3.8vw,3rem); margin-top:20px;}
.section-head p{color:var(--text-soft); margin-top:16px; font-size:17px; max-width:56ch;}
.section-alt{background:linear-gradient(180deg, var(--surface-2), var(--bg-alt)); border-block:1px solid var(--border);}

/* ---------- Shared card surface + hover (also covers unseen pages) ---------- */
.audience-card, .chip, .info-card, .dash-test-card{
  transition:translate var(--dur-s) var(--ease-out), scale var(--dur-s) var(--ease-out), border-color var(--dur-s), box-shadow var(--dur-m) var(--ease-out), background var(--dur-s);
}
.audience-card:hover, .info-card:hover, .dash-test-card:hover{translate:0 -6px;}

/* ---------- Audience cards ---------- */
.audience-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.audience-card{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; gap:14px; padding:24px;
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border); border-radius:var(--radius-m);
  box-shadow:var(--hairline), var(--shadow-card);
}
.audience-card::before, .chip::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 62%);
  opacity:0; transition:opacity var(--dur-m) var(--ease-out);
}
.audience-card:hover::before, .chip:hover::before{opacity:1;}
.audience-card:hover{border-color:color-mix(in srgb, var(--accent-2) 50%, var(--border)); box-shadow:var(--hairline), var(--shadow-lift);}
.audience-thumb{width:100%; aspect-ratio:16/10; border-radius:var(--radius-s); overflow:hidden; background:var(--bg-alt); box-shadow:inset 0 0 0 1px var(--border);}
.audience-thumb img{width:100%; height:100%; object-fit:cover; transition:scale .9s var(--ease-out);}
.audience-card:hover .audience-thumb img{scale:1.07;}
.audience-card h3{font-size:21px; margin-top:4px;}
.audience-card ul{display:flex; flex-direction:column; gap:8px; margin-top:4px;}
.audience-card li{font-size:14px; color:var(--text-soft); padding-left:18px; position:relative; line-height:1.5;}
.audience-card li::before{content:''; position:absolute; left:2px; top:8px; width:5px; height:5px; border-radius:1px; rotate:45deg; background:var(--accent);}
@media (max-width:960px){.audience-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.audience-grid{grid-template-columns:1fr;}}

/* ---------- Dimensions wheel ---------- */
.wheel-section{position:relative;}
.wheel-layout{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center;}
.dim-wheel{max-width:520px; margin-inline:auto; width:100%;}
.dim-image-frame{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  border-radius:var(--radius-l); border:1px solid var(--border-strong);
  box-shadow:var(--hairline), var(--shadow-lift);
}
.dim-image-frame img{width:100%; height:100%; object-fit:cover;}
.dim-image-frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--bg) 60%, transparent));
}
.dim-image-badge{position:absolute; top:auto; bottom:18px; left:18px; right:auto; z-index:2;}
.dim-list{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.dim-item{
  display:flex; align-items:center; gap:12px; cursor:default;
  padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-s);
  box-shadow:var(--hairline), var(--shadow-card);
  transition:translate var(--dur-s) var(--ease-out), border-color var(--dur-s), background var(--dur-s);
}
.dim-item .dim-index{font-family:var(--font-mono); font-size:11px; color:var(--accent); width:22px; transition:color var(--dur-s);}
.dim-item .dim-name{font-size:14px; font-weight:600; letter-spacing:-.005em;}
.dim-item:hover{translate:6px 0; border-color:var(--accent-2); background:var(--surface-2);}
.dim-item:hover .dim-index{color:var(--accent-2);}
@media (max-width:960px){.wheel-layout{grid-template-columns:1fr;}}
@media (max-width:560px){.dim-list{grid-template-columns:1fr;}}

/* ---------- Health mapping (accordion chips) ---------- */
.chip-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start;}
.chip{
  position:relative; isolation:isolate; text-align:left; padding:20px 22px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m);
  box-shadow:var(--hairline), var(--shadow-card);
}
.chip:hover{border-color:color-mix(in srgb, var(--accent-2) 45%, var(--border)); translate:0 -2px;}
.chip[aria-expanded="true"]{
  border-color:var(--accent-2); background:var(--surface-2); translate:0 -2px;
  box-shadow:var(--hairline), 0 0 0 4px color-mix(in srgb, var(--accent-2) 13%, transparent), var(--shadow-card);
}
.chip-top{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.chip-top h4{font-size:16px; letter-spacing:-.015em;}
.chip-plus{
  flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--border-strong); font-family:var(--font-mono); font-size:15px; line-height:1; color:var(--accent-2);
  transition:transform var(--dur-s) var(--ease-out), background var(--dur-s), color var(--dur-s);
}
.chip[aria-expanded="true"] .chip-plus{transform:rotate(45deg); background:var(--accent-2); border-color:var(--accent-2); color:#fff;}
.chip-body{max-height:0; overflow:hidden; transition:max-height var(--dur-m) var(--ease-out);}
.chip-body p{padding-top:12px; font-size:14px; color:var(--text-soft); line-height:1.65;}
@media (max-width:760px){.chip-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.chip-grid{grid-template-columns:1fr;}}

/* ---------- Sample report ---------- */
.report-layout{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.report-mock{
  position:relative; padding:20px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-l);
  box-shadow:var(--hairline), var(--shadow-lift), 0 50px 90px -40px color-mix(in srgb, var(--accent-2) 40%, transparent);
}
.report-mock img{border-radius:var(--radius-m); box-shadow:0 0 0 1px var(--border);}
.report-mock .badge{
  position:absolute; top:-16px; right:24px;
  padding:8px 16px; border-radius:999px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent));
  color:var(--accent-ink); font-family:var(--font-mono); font-size:11px; letter-spacing:.05em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 12px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.report-checklist{display:flex; flex-direction:column; gap:16px; margin-block:28px;}
.report-checklist li{display:flex; gap:14px; align-items:flex-start; font-size:15px; color:var(--text-soft); transition:translate var(--dur-s) var(--ease-out);}
.report-checklist li:hover{translate:4px 0;}
.check-mark{
  flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
  background:color-mix(in srgb, var(--accent-2) 14%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent-2) 55%, transparent); color:var(--accent-2);
  transition:background var(--dur-s), border-color var(--dur-s), color var(--dur-s);
}
.report-checklist li:hover .check-mark{background:var(--accent-2); border-color:var(--accent-2); color:#fff;}
@media (max-width:900px){.report-layout{grid-template-columns:1fr;}}

/* ---------- FAQ ---------- */
.faq-list{display:flex; flex-direction:column; border-top:1px solid var(--border-strong);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 4px; text-align:left;
  font-family:var(--font-display); font-size:clamp(17px,2vw,20px); font-weight:500; letter-spacing:-.015em;
  transition:color var(--dur-s);
}
.faq-q:hover{color:var(--accent-2);}
.faq-plus{
  flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--border-strong); font-family:var(--font-mono); font-size:16px; line-height:1; color:var(--accent-2);
  transition:transform var(--dur-s) var(--ease-out), background var(--dur-s), color var(--dur-s), border-color var(--dur-s);
}
.faq-item[data-open="true"] .faq-plus{transform:rotate(45deg); background:var(--accent-2); border-color:var(--accent-2); color:#fff;}
.faq-a{max-height:0; overflow:hidden; transition:max-height var(--dur-m) var(--ease-out);}
.faq-a p{padding:0 4px 26px; color:var(--text-soft); max-width:68ch; font-size:15.5px; line-height:1.7;}
.faq-a a, .info-card a, .contact-info a{text-decoration:underline; text-underline-offset:3px; transition:color var(--dur-s);}
.faq-a a:hover, .info-card a:hover, .contact-info a:hover{color:var(--accent-2);}

/* ---------- CTA band: gradient-edged panel ---------- */
.cta-band{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; padding:72px 40px;
  border:1px solid transparent; border-radius:var(--radius-l);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--accent-2), transparent 38%, transparent 62%, var(--accent)) border-box;
  box-shadow:var(--hairline), var(--shadow-lift);
}
.cta-band::before{content:''; position:absolute; inset:0; z-index:-1; background:var(--glow);}
.cta-band::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(60% 80% at 50% 50%, #000, transparent 80%);
  mask-image:radial-gradient(60% 80% at 50% 50%, #000, transparent 80%);
}
.cta-band h2{font-size:clamp(1.9rem,3.6vw,2.8rem); max-width:22ch;}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border); padding-block:72px 32px; background:linear-gradient(180deg, var(--surface-2), var(--bg-alt));}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:48px;}
.footer-brand p{color:var(--text-soft); font-size:14.5px; margin-top:16px; max-width:34ch;}
.footer-col h5{font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:.01em; color:var(--text); margin:0 0 18px;}
.footer-col ul{display:flex; flex-direction:column; gap:11px;}
.footer-col a{font-size:14px; color:var(--text-soft); transition:color var(--dur-s), translate var(--dur-s) var(--ease-out); display:inline-block;}
.footer-col a:hover{color:var(--text); translate:3px 0;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--border); font-size:13px; color:var(--text-soft);}

.footer-contact address {
  font-style: normal;
  line-height: 1.8;
  margin: 0 0 12px;
}

.footer-phone {
  margin: 0;
}

.footer-phone a {
  text-decoration: none;
}

.footer-phone a:hover {
  text-decoration: underline;
}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- Forms (focus polish only; layout lives with your form CSS) ---------- */
.field input:focus, .field select:focus, .form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  translate:0 -1px; border-color:var(--accent-2);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent-2) 18%, transparent);
  outline:none;
}

/* ---------- Responsive section scale ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; text-align:center; gap:48px;}
  .hero-copy p{margin-inline:auto;}
  .hero-cta{justify-content:center;}
  .section{padding-block:80px;}
  .report-layout{gap:40px;}
}
@media (max-width:600px){
  .section{padding-block:60px;}
  .section-head{margin-bottom:40px;}
  .cta-band{padding:48px 22px;}
}

/* Reveal-on-scroll base state (GSAP toggles .is-visible) */
.reveal{opacity:0; transform:translateY(28px);}
.reveal.is-visible{opacity:1; transform:none;}

/* Skip link */
.skip-link{
  position:absolute; left:16px; top:-50px; z-index:999;
  background:var(--accent); color:var(--accent-ink); padding:10px 16px;
  border-radius:var(--radius-s); font-size:13px; font-weight:600;
  transition:top var(--dur-s) var(--ease-out);
}
.skip-link:focus{top:16px;}

/* ==========================================================================
   v2.1 additions
   ========================================================================== */
@view-transition { navigation: auto; }

/* Header gets a firmer edge once the page scrolls (class added by script.js) */
.site-header{transition:background var(--dur-s), box-shadow var(--dur-s), border-color var(--dur-s);}
.site-header.is-scrolled{
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom-color:var(--border-strong);
  box-shadow:0 10px 30px -18px rgba(20,15,45,.35);
}

/* Chip open state: works whether the marker sits on the chip or the button inside it */
.chip:is([aria-expanded="true"], [data-open="true"], :has([aria-expanded="true"])){
  border-color:var(--accent-2); background:var(--surface-2); translate:0 -2px;
  box-shadow:var(--hairline), 0 0 0 4px color-mix(in srgb, var(--accent-2) 13%, transparent), var(--shadow-card);
}
.chip:is([aria-expanded="true"], [data-open="true"], :has([aria-expanded="true"])) .chip-plus{
  transform:rotate(45deg); background:var(--accent-2); border-color:var(--accent-2); color:#fff;
}

/* Small reassurance line under forms and buttons */
.trust-note{font-size:13px; color:var(--text-soft); text-align:center; max-width:52ch; margin:16px auto 0;}

/* Mobile bottom button (slides up after the hero) */
.mobile-cta-bar{display:none;}
@media (max-width:900px){
  .mobile-cta-bar{
    display:block; position:fixed; left:14px; right:14px; z-index:90;
    bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    translate:0 160%; transition:translate .5s var(--ease-out);
    filter:drop-shadow(0 14px 24px rgba(20,15,45,.3));
  }
  .mobile-cta-bar.is-visible{translate:0 0;}
  .mobile-cta-bar .btn{width:100%; padding-block:16px;}
  .site-footer{padding-bottom:110px;}
}

/* Tools dropdown */
.tools-nav-dropdown { position: relative; }

.tools-nav-trigger {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tools-nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--surface, var(--bg, #fff));
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  z-index: 60;
}

.tools-nav-dropdown.is-open > .tools-nav-menu { display: flex; }

.tools-nav-dropdown.is-open .dropdown-caret {
  display: inline-block;
  transform: rotate(180deg);
}

.tools-nav-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

.tools-nav-menu a:hover,
.tools-nav-menu a:focus-visible {
  background: rgba(127, 127, 127, 0.12);
}

/* Mobile grouped links */
.mobile-group { display: flex; flex-direction: column; gap: 4px; }

.mobile-group-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
  padding: 8px 0 0;
}

.mobile-group a { padding-left: 12px; }

/* WhatsApp share button */
.btn-whatsapp{background:#25D366; border-color:#25D366; color:#fff;}
.btn-whatsapp:hover{background:#1ebe5a; border-color:#1ebe5a; color:#fff;}

/* ===== Mobile menu ===== */
.mobile-panel{
  max-height:calc(100vh - 76px);
  max-height:calc(100dvh - 76px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px 20px 24px;
}
.mobile-panel > a,
.mobile-group > summary{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 4px; font-size:16px; font-weight:500;
  border-bottom:1px solid var(--border-strong);
}
.mobile-group > summary{list-style:none; cursor:pointer;}
.mobile-group > summary::-webkit-details-marker{display:none;}
.mobile-group > summary::after{content:"▾"; font-size:14px; transition:transform .2s;}
.mobile-group[open] > summary::after{transform:rotate(180deg);}
.mobile-group[open]{border-bottom:1px solid var(--border-strong);}
.mobile-group[open] > summary{border-bottom:0;}
.mobile-group > a{
  display:block; padding:11px 4px 11px 18px;
  font-size:15px; color:var(--text-soft);
}
.mobile-group > a:last-child{padding-bottom:16px;}
.mobile-cta{margin-top:20px;}


/* ===== Footer layout ===== */
.footer-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:36px 32px;
}
.footer-grid .footer-brand{grid-column:1 / -1; max-width:520px;}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.footer-col h5{margin:0 0 14px;}
.footer-col a{font-size:14px;}

@media (max-width:960px){
  .footer-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .footer-grid{grid-template-columns:repeat(2,1fr); gap:28px 20px;}
  .footer-grid .footer-contact{grid-column:1 / -1;}
}

.mobile-group > summary.mobile-group-label{
  text-transform:none;
  letter-spacing:normal;
  font-size:16px;
  font-weight:500;
  color:inherit;
}