/* WonderNeuro™ test1 — Malory editorial + Desert Rose tokens + shadcn discipline.
   Tokens, radius scale, focus rings, fluid type, mobile-first. */
/* Self-hosted Malory-style type: Fraunces (Gazpacho-like soft serif) + Manrope */
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("./fonts/FrauncesRoman.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:100 900; font-display:swap;
  src:url("./fonts/FrauncesItalic.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("./fonts/Manrope.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader"; font-style:normal; font-weight:500; font-display:swap;
  src:url("./fonts/Newsreader.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader"; font-style:italic; font-weight:500; font-display:swap;
  src:url("./fonts/Newsreader-Italic.woff2") format("woff2");
}
:root{
  --bg:#f4f2e8;
  --bg-soft:#faf8f1;
  --sand:#e8d5c4;
  --blush:#e8d5c4;
  --blush-soft:#f7ece0;
  --clay:#c26e4a;
  --deep:#8a4a2f;
  --ink:#3a2a24;
  --ink-soft:#4a3423;
  --burgundy:#8a4a2f;
  --muted:#6e5f52;
  --card:#fffefb;
  --line:#e2d6c3;
  --ring:0 0 0 3px rgba(184,125,109,.45);
  --r-sm:14px;
  --r-md:18px;
  --r-lg:26px;
  --r-pill:999px;
  --header-h:66px;
  --serif:"Newsreader","Fraunces",Georgia,serif;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,1vw + .85rem,1.075rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--blush); color:var(--ink)}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; line-height:1.1; letter-spacing:-.01em; margin:.2em 0 .45em; text-wrap:balance}
.accent{font-family:var(--serif); font-style:italic; font-weight:500; letter-spacing:0; color:var(--clay)}
.cta .accent{color:var(--blush)}
.lead{font-size:clamp(1.1rem,1.2vw + 1rem,1.35rem); font-weight:600; line-height:1.55; color:var(--ink-soft); max-width:60ch; margin:0 auto}
.standfirst{font-size:clamp(1.05rem,1vw + 1rem,1.2rem); font-weight:500; color:var(--ink-soft); max-width:64ch}
blockquote{font-size:1.05rem; line-height:1.65; font-style:italic; color:var(--ink-soft)}
.price-line strong,.stats-grid strong,.price-card .price,.bloc-num,.team-card h4{font-family:var(--serif); font-weight:500; letter-spacing:0}
h1{font-size:clamp(2.4rem,5vw + 1.4rem,4.4rem)}
h2{font-size:clamp(1.75rem,3vw + 1rem,2.8rem)}
h3{font-size:1.3rem}
p{margin:.7em 0}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:6px}
.wrap{max-width:1120px; margin-inline:auto; padding-inline:clamp(18px,4vw,28px)}
.wrap.narrow{max-width:780px}
section[id],div[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

/* ---- Header ---- */
.topbar{position:sticky; top:0; z-index:50; min-height:var(--header-h); display:flex; align-items:center; background:rgba(244,242,232,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.topbar-inner{display:flex; align-items:center; gap:14px; width:100%}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:.95rem; white-space:nowrap}
.brand-mark{display:inline-grid; place-items:center; width:36px; height:36px; flex:none; border-radius:50%; background:var(--ink); color:var(--bg); font-family:var(--serif); font-size:20px}
.brand-text em{font-family:var(--serif); font-weight:400; color:var(--muted)}
.topnav{margin-left:auto; display:flex; gap:clamp(12px,2vw,22px)}
.topnav a{color:var(--ink-soft); text-decoration:none; font-size:.92rem; font-weight:600}
.topnav a:hover{color:var(--ink)}
.nav-toggle{display:none; margin-left:auto; background:transparent; border:1.5px solid var(--ink); border-radius:var(--r-pill); color:var(--ink); font-size:1.1rem; line-height:1; padding:8px 14px; cursor:pointer}

/* ---- Buttons ---- */
.btn{display:inline-block; background:var(--clay); color:#fff8f0; border:1.5px solid var(--clay); border-radius:var(--r-pill); padding:15px 30px; font-weight:700; font-size:.98rem; font-family:var(--sans); text-decoration:none; cursor:pointer; transition:transform .15s ease, background .15s ease, color .15s ease}
.btn:hover{background:var(--deep); border-color:var(--deep); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink)}
.btn-ghost:hover{background:var(--ink); color:#fbf7ee}
.btn-small{padding:10px 20px; font-size:.88rem}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 10px}

/* ---- Hero : fills viewport ---- */
.hero{
  min-height:calc(100svh - var(--header-h));
  display:flex; align-items:center;
  padding:clamp(48px,8vh,96px) 0;
  background:linear-gradient(120deg,var(--bg) 25%,var(--blush-soft) 70%,var(--blush) 135%);
  text-align:center;
}
.hero .wrap{max-width:920px; width:100%}
.pill{display:inline-block; background:rgba(255,255,255,.75); border:1px solid var(--line); padding:9px 20px; border-radius:var(--r-pill); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.hero h1{margin:26px 0 10px}
.tags{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:22px 0}
.tags span{border:1px solid var(--ink); color:var(--ink); border-radius:var(--r-pill); padding:6px 16px; font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:rgba(255,255,255,.55)}
.price-line{display:flex; gap:16px 40px; flex-wrap:wrap; justify-content:center; margin:28px auto; padding:20px 8px; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); max-width:560px}
.price-line .label{display:block; text-transform:uppercase; font-size:.72rem; letter-spacing:.2em; color:var(--muted); font-weight:800; margin-bottom:4px}
.price-line strong{font-size:1.5rem}
.price-line s{color:var(--muted); font-weight:400; font-size:1rem}
.hero .cta-row{justify-content:center}
.micro{color:var(--muted); font-size:.92rem; line-height:1.6}
.hero-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,4vw,34px); box-shadow:0 24px 60px rgba(54,26,12,.10); text-align:left; max-width:720px; margin:40px auto 0}
.hero-card-kicker{text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:800}

/* ---- Marquee : seamless loop ---- */
.marquee{background:var(--clay); color:#fff8f0; overflow:hidden; padding:14px 0; font-size:.85rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase}
.marquee-track{display:flex; width:max-content; will-change:transform}
.marquee-track span{flex:none; padding-right:12px; white-space:nowrap}

/* ---- Sections ---- */
.section{padding:clamp(56px,9vw,96px) 0}
.section.alt{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.kicker{text-transform:uppercase; letter-spacing:.16em; font-size:.8rem; font-weight:800; margin:0 0 8px; color:var(--ink)}
.section h2{max-width:24ch}
.cols-2{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,3vw,30px) clamp(20px,3vw,28px); box-shadow:0 10px 30px rgba(54,26,12,.06)}
.card h3{margin-top:0}
.bullets{padding-left:20px}
.bullets li{margin:.45em 0}
.check-list{list-style:none; padding:0; display:grid; gap:12px; margin-top:24px}
.check-list li{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px 16px 46px; position:relative}
.check-list li::before{content:"✦"; position:absolute; left:18px; color:var(--clay)}
.bloc-num{font-size:2rem; color:var(--clay); margin:0; line-height:1}
.bloc-sub{font-style:italic; color:var(--ink-soft); margin-top:2px; font-size:.98rem}
.bloc ul{padding-left:20px; font-size:.95rem; margin-bottom:0}
.bloc ul li{margin:.35em 0}
.free-card{margin-top:28px; text-align:center}
.free-card .btn{margin-top:12px}

/* ---- Stats band ---- */
.stats{background:var(--ink); color:#f4f2e8; padding:clamp(28px,5vw,44px) 0}
.stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center}
.stats-grid strong{display:block; font-size:clamp(1.8rem,3vw,2.4rem)}
.stats-grid span{font-size:.9rem; color:#cbbfae}

/* ---- Team ---- */
.audrey-card{display:grid; grid-template-columns:200px 1fr; gap:clamp(20px,4vw,32px); max-width:960px; margin:40px auto 0; align-items:start}
.audrey-photo{width:200px; height:200px; border-radius:22px; background:linear-gradient(135deg,var(--blush),var(--burgundy)); color:#fbf7ee; display:grid; place-items:center; font-family:var(--serif); font-size:3rem}
.audrey-card .role{font-size:.82rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--clay)}
.team-sub{text-align:center; font-size:clamp(1.4rem,2.5vw,1.7rem); margin:56px 0 0}
.team-grid{margin-top:24px}
.team-card{text-align:center}
.avatar{width:88px; height:88px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center; font-family:var(--serif); font-size:1.6rem; color:#fbf7ee; background:var(--ink)}
.team-card h4{margin:.2em 0; font-size:1.15rem}
.team-card p{color:var(--muted); font-size:.92rem; margin:0}

/* ---- Testimonials ---- */
figure.card{margin:0}
figure.card blockquote{border:0; padding:0; margin:0}
blockquote cite{display:block; font-style:normal; font-family:var(--sans); color:var(--muted); font-size:.85rem; margin-top:10px}

/* ---- Pricing ---- */
.price-cards{align-items:stretch}
.price-card{display:flex; flex-direction:column}
.price-card .price{font-size:clamp(1.9rem,3vw,2.3rem); margin:.1em 0; line-height:1.1}
.price-card ul{list-style:none; padding:0; flex:1; margin-bottom:0}
.price-card ul li{padding-left:26px; position:relative; margin:.45em 0; font-size:.95rem}
.price-card ul li::before{content:"✓"; position:absolute; left:2px; color:var(--clay); font-weight:800}
.price-card .btn{margin-top:18px; text-align:center}
.price-card.featured{border:2px solid var(--ink)}
.badge{display:inline-block; align-self:flex-start; background:var(--ink); color:#fbf7ee; border-radius:var(--r-pill); padding:4px 14px; font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase}

/* ---- FAQ ---- */
details{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 22px; margin:12px 0}
summary{font-weight:700; cursor:pointer; font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-size:1.4rem; color:var(--clay); flex:none}
details[open] summary::after{content:"−"}

/* ---- Final CTA ---- */
.cta{background:var(--ink); color:#f4f2e8; text-align:center}
.cta h2{color:#fbf7ee; margin-inline:auto}
.cta .micro{color:#cbbfae}
.cta form{display:grid; gap:14px; max-width:520px; width:100%; margin:28px auto; text-align:left}
.cta label{display:grid; gap:8px; font-weight:600; font-size:.92rem}
.cta input,.cta select{width:100%; padding:15px 20px; border-radius:var(--r-pill); border:1px solid #6b5c4e; font-size:1rem; background:#fbf7ee; color:var(--ink); font-family:var(--sans)}
.cta .btn{background:#fbf7ee; color:var(--ink); border-color:#fbf7ee}
.cta .btn:hover{background:var(--blush); border-color:var(--blush)}
.footer{padding:36px 0; border-top:1px solid var(--line)}
.footer-row{display:flex; justify-content:space-between; align-items:flex-end; gap:12px 32px; text-align:left}
.footer-row .micro{margin:6px 0 0}
.built-with{flex:none; font-size:.9rem; color:var(--muted); margin:0; white-space:nowrap}
.built-with a{color:var(--ink); font-weight:800; text-decoration:underline; text-underline-offset:3px}
.built-with a:hover{color:var(--clay)}
@media(max-width:700px){.footer-row{flex-direction:column; align-items:flex-start}}

/* ---- Mobile ---- */
@media(max-width:900px){
  .cols-2,.grid-3,.grid-2{grid-template-columns:1fr}
  .section h2{max-width:none}
}
@media(max-width:760px){
  .nav-toggle{display:inline-block}
  .topnav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--bg-soft);
    border-bottom:1px solid var(--line); padding:8px 20px 16px;
  }
  .topnav.open{display:flex}
  .topnav a{padding:12px 4px; border-top:1px solid var(--line); font-size:1rem}
  .topbar .btn-small{margin-left:0}
  .brand-text em{display:none}
  .stats-grid{grid-template-columns:1fr; gap:18px}
  .audrey-card{grid-template-columns:1fr}
  .audrey-photo{width:140px; height:140px; font-size:2.2rem}
  .price-line{gap:14px 28px}
  .cta input,.cta select{font-size:16px} /* stops iOS zoom */
}

/* ---- Reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}