/* ==========================================================================
   LLW AstroCare — Design Tokens
   Signature: the Orbit Wheel — a central "self" node with assessment
   dimensions held in orbit around it, at different radii/speeds. It is a
   literal, honest picture of what the product does: many facets, one map.
   ========================================================================== */

@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', serif;
  --font-body:'Plus Jakarta Sans', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius-s:10px;
  --radius-m:18px;
  --radius-l:28px;
  --container:1220px;

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

  --shadow-soft:0 20px 60px -25px rgba(20,15,45,.35);
}

/* ---------- CALM (default) ---------- */
:root,
[data-theme="calm"]{
  --bg:#F3F1FA;
  --bg-alt:#EAE6F7;
  --surface:#FFFFFF;
  --surface-2:#F8F6FD;
  --text:#241F3B;
  --text-soft:#5B5476;
  --border:rgba(36,31,59,.10);
  --accent:#B08A2E;        /* muted gold */
  --accent-ink:#FFFFFF;
  --accent-2:#7C6FBE;      /* soft violet */
  --accent-3:#C88A9A;      /* dusty rose, orbit dots */
  --glow: radial-gradient(60% 60% at 50% 40%, rgba(124,111,190,.18), transparent 70%);
}

/* ---------- NIGHT ---------- */
[data-theme="night"]{
  --bg:#100E1F;
  --bg-alt:#171429;
  --surface:#1B1830;
  --surface-2:#211D3A;
  --text:#EDEAFB;
  --text-soft:#A79FC9;
  --border:rgba(237,234,251,.10);
  --accent:#E8C468;        /* starlight gold */
  --accent-ink:#1B1830;
  --accent-2:#8C7FE0;      /* violet glow */
  --accent-3:#E8899E;
  --glow: radial-gradient(60% 60% at 50% 40%, rgba(140,127,224,.28), transparent 70%);
}

/* ---------- WARM ---------- */
[data-theme="warm"]{
  --bg:#FBF0E1;
  --bg-alt:#F5E4CD;
  --surface:#FFF9EF;
  --surface-2:#FBEEDA;
  --text:#3A2417;
  --text-soft:#7A5C46;
  --border:rgba(58,36,23,.12);
  --accent:#B5651D;        /* burnt copper */
  --accent-ink:#FFF9EF;
  --accent-2:#8B4A62;      /* dusty mauve */
  --accent-3:#C88A3F;
  --glow: radial-gradient(60% 60% at 50% 40%, rgba(181,101,29,.16), transparent 70%);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  transition:background var(--dur-m) var(--ease-out), color var(--dur-m) var(--ease-out);
  overflow-x:hidden;
}
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-weight:600;margin:0;line-height:1.12;letter-spacing:-.01em;}
p{margin:0;}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px;}
.italic{font-style:italic;font-weight:500;color:var(--accent);}
@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:4px;}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--accent);}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:999px; font-weight:600; font-size:15px;
  transition:transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out), background var(--dur-s);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-soft);}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--accent-2);}

/* ---------- Navbar ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding-block:16px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:20px; font-weight:600;}
.brand-mark{width:34px;height:34px;border-radius:50%; background:conic-gradient(from 180deg, var(--accent), var(--accent-2), var(--accent));}
.nav-links{display:flex; align-items:center; gap:34px;}
.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-actions{display:flex; align-items:center; gap:14px;}

.theme-toggle{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:999px; padding:7px 14px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-soft);
}
.theme-toggle .dot{width:8px;height:8px;border-radius:50%; background:var(--accent);}

.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% + 14px); left:50%; transform:translateX(-50%);
  min-width:160px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-s);
  box-shadow:var(--shadow-soft); padding:8px; flex-direction:column; gap:2px; z-index:50;
}
.nav-dropdown.is-open .nav-dropdown-menu{display:flex;}
.nav-dropdown-menu a{padding:9px 12px; font-size:14px; border-radius:8px; 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:var(--bg);
}
.mobile-panel.is-open{display:flex;}
.mobile-panel a{padding:14px 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 ---------- */
.hero{position:relative; padding-block:96px 60px; overflow:hidden;}
.hero::before{content:'';position:absolute; inset:-20% -10%; background:var(--glow); pointer-events:none; z-index:1;}
.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:.28; 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:48px; align-items:center;}
.hero-copy h1{font-size:clamp(2.4rem, 4.4vw, 3.6rem); margin-block:20px 22px;}
.hero-copy p{max-width:46ch; color:var(--text-soft); font-size:17px;}
.hero-cta{display:flex; gap:16px; margin-top:32px; flex-wrap:wrap;}

.orbit-wrap{position:relative; aspect-ratio:1/1; max-width:460px; margin-inline:auto;}
.orbit-ring{position:absolute; border:1px solid var(--border); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%);}
.orbit-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:96px; height:96px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  box-shadow:var(--shadow-soft); z-index:5;
  font-family:var(--font-display); font-size:13px; text-align:center;
}
.orbit-core span{display:block; font-size:10px; font-family:var(--font-mono); color:var(--text-soft); text-transform:uppercase; letter-spacing:.1em;}
.orbit-node{
  position:absolute; top:50%; left:50%;
  width:auto; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:7px;
  background:var(--surface); border:1px solid var(--border);
  padding:8px 13px; border-radius:999px; font-size:12.5px; font-weight:600;
  white-space:nowrap; box-shadow:0 8px 24px -14px rgba(20,15,45,.4);
}
.orbit-node .node-dot{width:7px;height:7px;border-radius:50%; background:var(--accent-2);}

/* ---------- Stats strip ---------- */
.stats{border-block:1px solid var(--border); background:var(--surface-2);}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); padding-block:40px;}
.stat{text-align:center; padding-inline:12px; border-left:1px solid var(--border);}
.stat:first-child{border-left:none;}
.stat b{display:block; font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:600;}
.stat span{font-size:13px; color:var(--text-soft);}
@media (max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr); gap:24px 0;} .stat:nth-child(3){border-left:none;}}

/* ---------- Section shell ---------- */
.section{padding-block:100px;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:16px;}
.section-head p{color:var(--text-soft); margin-top:14px; font-size:16px;}
.section-alt{background:var(--surface-2); border-block:1px solid var(--border);}

/* ---------- Audience cards ---------- */
.audience-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.audience-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:28px; display:flex; flex-direction:column; gap:14px;
  transition:transform var(--dur-s) var(--ease-out), border-color var(--dur-s);
}
.audience-card:hover{transform:translateY(-6px); border-color:var(--accent-2);}
.audience-thumb{width:100%; aspect-ratio:16/10; border-radius:var(--radius-s); overflow:hidden; background:var(--bg-alt);}
.audience-thumb img{width:100%; height:100%; object-fit:cover;}
.audience-card h3{font-size:19px;}
.audience-card ul{display:flex; flex-direction:column; gap:6px; margin-top:4px;}
.audience-card li{font-size:13.5px; color:var(--text-soft); padding-left:16px; position:relative;}
.audience-card li::before{content:'';position:absolute; left:0; top:8px; width:6px; height:1px; 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:48px; align-items:center;}
.dim-wheel{max-width:520px; margin-inline:auto; width:100%;}
.dim-image-frame{
  position:relative; border-radius:var(--radius-l); overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow-soft); aspect-ratio:1/1;
}
.dim-image-frame img{width:100%; height:100%; object-fit:cover;}
.dim-image-badge{position:absolute; top:auto; bottom:18px; left:18px; right:auto;}
.dim-list{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.dim-item{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-s);
  padding:14px 16px;
}
.dim-item .dim-index{font-family:var(--font-mono); font-size:11px; color:var(--accent); width:20px;}
.dim-item .dim-name{font-size:14px; font-weight:600;}
@media (max-width:960px){.wheel-layout{grid-template-columns:1fr;}}
@media (max-width:560px){.dim-list{grid-template-columns:1fr;}}

/* ---------- Health mapping ---------- */
.chip-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.chip{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:20px; text-align:left; transition:border-color var(--dur-s), background var(--dur-s);
}
.chip[aria-expanded="true"]{border-color:var(--accent-2); background:var(--surface-2);}
.chip-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.chip-top h4{font-size:15.5px;}
.chip-plus{font-family:var(--font-mono); font-size:16px; color:var(--accent-2); transition:transform var(--dur-s);}
.chip[aria-expanded="true"] .chip-plus{transform:rotate(45deg);}
.chip-body{max-height:0; overflow:hidden; transition:max-height var(--dur-m) var(--ease-out);}
.chip-body p{padding-top:10px; font-size:13.5px; color:var(--text-soft);}
@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:52px; align-items:center;}
.report-mock{
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l);
  padding:28px; box-shadow:var(--shadow-soft);
}
.report-mock img{border-radius:var(--radius-s);}
.report-mock .badge{
  position:absolute; top:-16px; right:24px; background:var(--accent); color:var(--accent-ink);
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  padding:8px 14px; border-radius:999px; box-shadow:var(--shadow-soft);
}
.report-checklist{display:flex; flex-direction:column; gap:14px; margin-block:26px;}
.report-checklist li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--text-soft);}
.check-mark{flex:none; width:20px; height:20px; border-radius:50%; background:var(--surface-2); border:1px solid var(--accent-2); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--accent-2); margin-top:1px;}
@media (max-width:900px){.report-layout{grid-template-columns:1fr;}}

/* ---------- FAQ ---------- */
.faq-list{display:flex; flex-direction:column; border-top:1px solid var(--border);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 4px; text-align:left; font-family:var(--font-display); font-size:17px; font-weight:500;}
.faq-plus{font-family:var(--font-mono); color:var(--accent-2); font-size:18px; transition:transform var(--dur-s); flex:none;}
.faq-item[data-open="true"] .faq-plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height var(--dur-m) var(--ease-out);}
.faq-a p{padding:0 4px 22px; color:var(--text-soft); max-width:70ch; font-size:15px;}

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:var(--radius-l); background:var(--surface); border:1px solid var(--border);
  padding:56px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px;
  position:relative; overflow:hidden;
}
.cta-band::before{content:''; position:absolute; inset:0; background:var(--glow);}
.cta-band > *{position:relative;}
.cta-band h2{font-size:clamp(1.7rem,3.2vw,2.3rem); max-width:22ch;}
.cta-actions{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border); padding-block:64px 30px; background:var(--surface-2);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:44px;}
.footer-brand p{color:var(--text-soft); font-size:14px; margin-top:14px; max-width:34ch;}
.footer-col h5{font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-soft); margin-bottom:16px;}
.footer-col ul{display:flex; flex-direction:column; gap:10px;}
.footer-col a{font-size:14px; color:var(--text-soft); transition:color var(--dur-s);}
.footer-col a:hover{color:var(--text);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--border); font-size:13px; color:var(--text-soft); gap:16px; flex-wrap:wrap;}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}

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

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


/* ========================================================================
   Interactivity pass — micro-interactions on top of existing components.
   Everything below reuses existing tokens only.
   ======================================================================== */

/* Custom selection + smoother scrollbar, small but felt everywhere */
::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); border-radius:999px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent-2); }

/* Buttons: press feedback + sheen sweep on hover */
.btn{ position:relative; overflow:hidden; }
.btn::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s var(--ease-out);
  pointer-events:none;
}
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(0) scale(.97); }

/* Nav links: animated underline instead of flat color swap */
.nav-links a{ position:relative; padding-bottom:2px; }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-3px; width:0; height:1.5px;
  background:var(--accent-2); transition:width var(--dur-s) var(--ease-out);
}
.nav-links a:hover::after{ width:100%; }

/* Cards: tilt-on-hover + sharper lift, using existing surfaces */
.audience-card, .info-card, .dash-test-card, .chip{
  transition:transform var(--dur-s) var(--ease-out), border-color var(--dur-s), box-shadow var(--dur-s);
}
.audience-card:hover, .info-card:hover, .dash-test-card:hover{
  transform:translateY(-8px) scale(1.012);
}

/* Orbit nodes: hover pop, invites play (they're already drag/click-ready
   on the test page's aside orbit — this extends the same affordance to
   the homepage hero orbit nodes) */
.orbit-node{ transition:transform var(--dur-s) var(--ease-out), border-color var(--dur-s); cursor:default; }
.orbit-node:hover{ transform:translate(-50%,-50%) scale(1.12); border-color:var(--accent-2); z-index:6; }

/* Dim-list items (the 11-dimension grid): hover highlight + index pop */
.dim-item{ transition:transform var(--dur-s) var(--ease-out), border-color var(--dur-s), background var(--dur-s); cursor:default; }
.dim-item:hover{ transform:translateX(6px); border-color:var(--accent-2); background:var(--surface-2); }
.dim-item:hover .dim-index{ color:var(--accent-2); }

/* Stats: count-up feel on hover (static nudge, cheap) */
.stat{ transition:transform var(--dur-s) var(--ease-out); }
.stat:hover{ transform:translateY(-3px); }
.stat:hover b{ color:var(--accent-2); }

/* Form inputs: lift + glow on focus beyond the existing border change */
.field input:focus, .field select:focus, .form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  transform:translateY(-1px);
}

/* Links inside body copy, FAQ answers etc — give bare <a> a visible hover
   even outside nav/buttons */
.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); }

/* Theme toggle button: visible press + icon spin */
.theme-toggle{ transition:border-color var(--dur-s), transform var(--dur-s); }
.theme-toggle:hover{ border-color:var(--accent-2); }
.theme-toggle:active{ transform:scale(.95); }
.theme-toggle .dot{ transition:transform var(--dur-s); }
.theme-toggle:hover .dot{ transform:rotate(180deg); }

/* Checklist items: stagger-friendly hover nudge */
.report-checklist li{ transition:transform var(--dur-s) var(--ease-out); }
.report-checklist li:hover{ transform:translateX(4px); }
.report-checklist li:hover .check-mark{ background:var(--accent-2); border-color:var(--accent-2); color:#fff; }

/* Chip grid (health mapping): subtle scale on the whole chip when open,
   not just the plus icon */
.chip[aria-expanded="true"]{ transform:translateY(-2px); }

/* Skip-link visibility for keyboard users opening any page fresh */
.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; }