/* Öffentliche Startseite (Bestbrains Options-Desk).
   Eigenständig: wird nur von resources/views/landing.blade.php geladen, nicht vom App-Layout.
   Quelle: Mockup werbeseite.html (Stile) und css/motion.css (Bewegung und Farbe). */

/* ---------- Design tokens: dunkel als Standard, hell per prefers-color-scheme oder data-theme ---------- */
:root{
  --bg:#000; --bg-2:#070708; --surface:#0B0B0D; --surface-2:#131315; --surface-3:#1C1C1F;
  --line:#1E1E22; --line-2:#2A2A2E;
  --fg:#F2F2F4; --fg-2:#A1A1A8; --fg-3:#8B8B92;
  --cta:#FFFFFF; --cta-fg:#0B0B0D;
  --up:#26C2A1; --up-soft:rgba(31,163,138,.14); --down:#E0434F;
  --beam:rgba(140,170,255,.42);
  --f-ui:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-data:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:16px;
  --c-sky:#35A2DE; --c-cobalt:#3746CC; --c-purple:#9200FF; --c-pink:#FF00D6; --c-orange:#FF8A00; --c-teal:#1FA38A;
  --grad-brand:linear-gradient(90deg,var(--c-sky),var(--c-cobalt) 30%,var(--c-purple) 55%,var(--c-pink) 78%,var(--c-orange));
  --aurora-o:.55; --grid-o:.5;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#FFFFFF; --bg-2:#F7F7F8; --surface:#FFFFFF; --surface-2:#F2F2F4; --surface-3:#E8E8EA;
    --line:#E8E8EA; --line-2:#D6D6DA;
    --fg:#0B0B0D; --fg-2:#4F4F55; --fg-3:#66666C;
    --cta:#0B0B0D; --cta-fg:#FFFFFF;
    --up:#0F7A63; --up-soft:rgba(31,163,138,.12); --down:#C9303C;
    --beam:rgba(90,120,230,.20);
    --aurora-o:.28; --grid-o:.35;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --bg-2:#F7F7F8; --surface:#FFFFFF; --surface-2:#F2F2F4; --surface-3:#E8E8EA;
  --line:#E8E8EA; --line-2:#D6D6DA;
  --fg:#0B0B0D; --fg-2:#4F4F55; --fg-3:#66666C;
  --cta:#0B0B0D; --cta-fg:#FFFFFF;
  --up:#0F7A63; --up-soft:rgba(31,163,138,.12); --down:#C9303C;
  --beam:rgba(90,120,230,.20);
  --aurora-o:.28; --grid-o:.35;
  color-scheme:light;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.55 var(--f-ui);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{display:block}
.muted{color:var(--fg-3)}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.eyebrow{font:500 11px/1.2 var(--f-data);letter-spacing:.15em;text-transform:uppercase;color:var(--fg-3)}
:focus-visible{outline:2px solid var(--c-sky);outline-offset:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:60;padding:10px 16px;border-radius:999px;background:var(--cta);color:var(--cta-fg);font-weight:600}
.skip:focus{top:12px}

/* ---------- Moving background ---------- */
.bg-motion{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg)}
.bg-motion .blob{position:absolute;border-radius:50%;opacity:var(--aurora-o);will-change:transform}
.bg-motion .b1{width:70vmax;height:70vmax;left:-20vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(55,70,204,.55),transparent 70%);animation:drift-a 26s ease-in-out infinite alternate}
.bg-motion .b2{width:60vmax;height:60vmax;right:-25vmax;top:-10vmax;background:radial-gradient(closest-side,rgba(146,0,255,.38),transparent 70%);animation:drift-b 32s ease-in-out infinite alternate}
.bg-motion .b3{width:55vmax;height:55vmax;left:20vw;bottom:-35vmax;background:radial-gradient(closest-side,rgba(53,162,222,.32),transparent 70%);animation:drift-c 29s ease-in-out infinite alternate}
.bg-motion .b4{width:40vmax;height:40vmax;right:5vw;bottom:-20vmax;background:radial-gradient(closest-side,rgba(255,0,214,.16),transparent 70%);animation:drift-a 36s ease-in-out infinite alternate-reverse}
.bg-motion .grid{position:absolute;inset:-2px;opacity:var(--grid-o);
  background-image:linear-gradient(color-mix(in srgb,var(--fg) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--fg) 7%,transparent) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 30%,transparent 75%)}
.bg-motion .ray{position:absolute;top:0;bottom:0;width:30vw;opacity:var(--grid-o);
  background:linear-gradient(90deg,transparent,rgba(53,162,222,.10) 35%,rgba(146,0,255,.12) 55%,transparent);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 30%,transparent 75%);
  animation:grid-ray 11s cubic-bezier(.45,0,.25,1) infinite;will-change:transform}
@keyframes drift-a{0%{transform:translate(0,0) scale(1)}100%{transform:translate(8vw,6vh) scale(1.12)}}
@keyframes drift-b{0%{transform:translate(0,0) scale(1.05)}100%{transform:translate(-10vw,8vh) scale(.95)}}
@keyframes drift-c{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-6vw,-8vh) scale(1.1)}}
@keyframes grid-ray{0%{transform:translateX(-45vw)}100%{transform:translateX(115vw)}}

/* ---------- Status strip (top bar) ---------- */
.strip{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(64,96,220,.28),rgba(20,20,24,.2) 45%,rgba(20,20,24,.2) 55%,rgba(31,163,138,.22))}
.strip::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.2px);background-size:14px 14px;mask-image:linear-gradient(90deg,#000,transparent 25%,transparent 75%,#000);-webkit-mask-image:linear-gradient(90deg,#000,transparent 25%,transparent 75%,#000);opacity:.5}
.strip .wrap{position:relative;display:flex;justify-content:center;align-items:center;gap:14px;height:38px;font-size:13px;font-weight:500}
.strip .mkt{display:flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--fg-3)}
.dot.live{background:var(--up);box-shadow:0 0 0 4px var(--up-soft)}
.strip .sep{width:1px;height:14px;background:var(--line-2)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface-2);font:500 12px/1.4 var(--f-data);color:var(--fg-2);white-space:nowrap}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:28px;height:64px}
.logo{display:flex;align-items:center;gap:9px;font:700 19px/1 var(--f-ui);letter-spacing:-.03em}
.logo-mark{width:26px;height:26px;border-radius:7px;background:var(--fg);display:grid;place-items:center}
.logo-mark svg{width:16px;height:16px}
.hdr .links{display:flex;gap:4px}
.hdr .links a{padding:7px 12px;border-radius:999px;font-size:14px;font-weight:500;color:var(--fg-2);transition:color .15s}
.hdr .links a:hover{color:var(--fg)}
.hdr .tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.hdr .login{font-size:14px;font-weight:500;color:var(--fg-2);padding:7px 10px}
.hdr .login:hover{color:var(--fg)}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:transparent;color:var(--fg);padding:9px 18px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:transform .15s,background .15s}
.btn:hover{background:var(--surface-2)}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--cta);color:var(--cta-fg);border-color:var(--cta)}
.btn.primary:hover{transform:translateY(-1px);background:var(--cta)}
.btn.lg{padding:13px 24px;font-size:15px}
.btn.ghost{border-color:var(--line-2)}

/* Sprachauswahl (details/summary, funktioniert ohne Skript) */
.lang{position:relative}
.lang summary{list-style:none}
.lang summary::-webkit-details-marker{display:none}
.lang-btn{padding:6px 12px;gap:8px;font:600 13px/1 var(--f-data);letter-spacing:.04em}
.flag{display:inline-flex;flex:none}
.flag svg{width:21px;height:14px;stroke:none;stroke-width:0;border-radius:3px;display:block;box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 14%,transparent)}
.lang-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:180px;padding:6px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);box-shadow:0 20px 50px rgba(0,0,0,.35);z-index:40}
.lang-pop a{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;font-size:14px;font-weight:500;color:var(--fg)}
.lang-pop a:hover,.lang-pop a[aria-current="true"]{background:var(--surface-2)}
.lang-pop a b{margin-left:auto;font:600 11.5px var(--f-data);color:var(--fg-3)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:96px 0 0;text-align:center}
.beam{position:absolute;left:58%;top:-140px;width:640px;height:1200px;transform:rotate(34deg);transform-origin:top center;filter:blur(36px);pointer-events:none}
.beam::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--beam),transparent 78%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%)}
.beam.b2{left:60%;width:260px;transform:rotate(30deg);opacity:.7;filter:blur(22px)}
.beam.b2::before{background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 70%)}
.hero-glow{position:absolute;left:50%;top:420px;width:1100px;height:520px;margin-left:-550px;background:radial-gradient(closest-side,rgba(70,100,220,.28),transparent);pointer-events:none}
.hero .wrap{position:relative}
.badge{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--surface) 70%,transparent);font-size:14px;font-weight:500;color:var(--fg)}
.badge .new{font:600 10px/1 var(--f-data);letter-spacing:.08em;padding:5px 9px;border-radius:999px;border:1.5px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad-brand) border-box;color:var(--fg)}
.hero h1{margin:30px auto 0;max-width:1100px;font:600 clamp(42px,7vw,82px)/1.0 var(--f-ui);letter-spacing:-.045em}
.hero .lead{margin:26px auto 0;max-width:640px;font-size:19px;line-height:1.5;color:var(--fg-2)}
.hero .ctas{margin-top:34px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.micro{margin-top:18px;display:flex;justify-content:center;gap:8px 20px;flex-wrap:wrap;font-size:13px;color:var(--fg-3)}
.micro span{display:inline-flex;align-items:center;gap:6px}
.micro svg{width:14px;height:14px;fill:none;stroke:color-mix(in srgb,var(--c-sky) 60%,var(--fg));stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.visual{position:relative;max-width:1120px;margin:72px auto 0}
.shot{display:block;width:100%;border:1px solid var(--line-2);border-radius:18px;background:var(--surface);box-shadow:0 40px 120px rgba(0,0,0,.5);overflow:hidden}
.shot img{display:block;width:100%;height:auto}
.phone{position:absolute;right:-24px;bottom:-48px;width:230px;border-radius:38px;padding:8px;background:#0E0E10;border:1px solid var(--line-2);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.phone img{display:block;width:100%;height:auto;border-radius:31px}
.visual-cap{margin-top:70px;font-size:12.5px;color:var(--fg-3);text-align:center}

/* ---------- Source strip ---------- */
.sources{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:96px}
.sources .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:96px;overflow:hidden}
.sources .eyebrow{white-space:nowrap}
.sources .logos{display:block;min-width:0;flex:1}
.sources .logos span{font:600 22px/1 var(--f-ui);letter-spacing:-.03em;color:var(--fg-3);white-space:nowrap;padding:0 40px}
.sources .logos span:nth-child(2){font-weight:500;letter-spacing:.01em}
.sources .logos span:nth-child(3){font-weight:700;letter-spacing:.06em}
.sources .logos span:nth-child(4){font-weight:500}

/* ---------- Sections ---------- */
.section{padding:120px 0 0}
.sec-head{text-align:center;max-width:760px;margin:0 auto 48px}
.sec-head h2{font:600 clamp(34px,4.6vw,52px)/1.05 var(--f-ui);letter-spacing:-.04em;margin-top:14px}
.sec-head p{margin-top:16px;font-size:17px;color:var(--fg-2)}
.card{border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);overflow:hidden}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font:500 12px/1.5 var(--f-ui);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.good{background:var(--up-soft);color:var(--up)}

/* Problem */
.pain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pain .card{padding:26px}
.pain .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.pain .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pain .card:nth-child(1) .ic{background:color-mix(in srgb,var(--c-orange) 16%,transparent);color:color-mix(in srgb,var(--c-orange) 70%,var(--fg))}
.pain .card:nth-child(2) .ic{background:color-mix(in srgb,var(--c-pink) 14%,transparent);color:color-mix(in srgb,var(--c-pink) 70%,var(--fg))}
.pain .card:nth-child(3) .ic{background:color-mix(in srgb,var(--c-purple) 18%,transparent);color:color-mix(in srgb,var(--c-purple) 65%,var(--fg))}
.pain h3{margin-top:18px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.pain p{margin-top:10px;font-size:14.5px;color:var(--fg-2)}

/* Funktionen */
.feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.feat:first-of-type{border-top:0}
.feat.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feat.rev .txt{order:2}
.feat.wide{grid-template-columns:minmax(0,1fr);gap:32px}
.feat.wide .txt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:12px 56px;align-items:end}
.feat.wide .txt ul{margin:0}
.feat h3{font:600 clamp(26px,3vw,36px)/1.1 var(--f-ui);letter-spacing:-.035em;margin-top:12px}
.feat p{margin-top:14px;font-size:16px;color:var(--fg-2)}
.feat ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.feat li{display:flex;gap:10px;font-size:14.5px}
.feat li svg{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke:var(--c-sky);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.feat .shot{box-shadow:0 30px 90px rgba(0,0,0,.4)}
.feat .eyebrow{color:color-mix(in srgb,var(--c-sky) 60%,var(--fg))}
.feat:nth-child(3) .eyebrow{color:color-mix(in srgb,var(--c-purple) 70%,var(--fg))}
.feat:nth-child(4) .eyebrow{color:color-mix(in srgb,var(--c-teal) 70%,var(--fg))}
.feat:nth-child(5) .eyebrow{color:color-mix(in srgb,var(--c-pink) 65%,var(--fg))}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}

/* Gradient outline pills */
.gpill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;font:600 12.5px/1.4 var(--f-ui);white-space:nowrap;color:var(--fg);
  border:1.5px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--gp) border-box}
.gpill.blue{--gp:linear-gradient(90deg,var(--c-sky),var(--c-cobalt))}
.gpill.violet{--gp:linear-gradient(90deg,var(--c-cobalt),var(--c-purple),var(--c-pink))}
.gpill.pink{--gp:linear-gradient(90deg,var(--c-pink),var(--c-orange))}
.gpill.teal{--gp:linear-gradient(90deg,var(--c-sky),var(--c-teal));background:linear-gradient(color-mix(in srgb,var(--c-sky) 12%,var(--surface)),color-mix(in srgb,var(--c-sky) 12%,var(--surface))) padding-box,var(--gp) border-box}

/* Datenquellen */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.trust .card{padding:22px;position:relative}
.trust .card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--c-sky),var(--c-cobalt))}
.trust .card:nth-child(2)::before{background:linear-gradient(90deg,var(--c-cobalt),var(--c-purple))}
.trust .card:nth-child(3)::before{background:linear-gradient(90deg,var(--c-purple),var(--c-pink))}
.trust .card:nth-child(4)::before{background:linear-gradient(90deg,var(--c-pink),var(--c-orange))}
.trust h4{margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.trust h4 i{width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 12px var(--up)}
.trust p{margin-top:8px;font-size:13.5px;color:var(--fg-2)}
.dash-demo{margin:24px auto 0;max-width:620px;display:flex;align-items:center;gap:22px;padding:22px 26px;border:1px dashed var(--line-2);border-radius:var(--r)}
.dash-demo .d{font:600 44px/1 var(--f-data)}
.dash-demo b{display:block;font-size:15px}
.dash-demo small{color:var(--fg-3);font-size:13.5px}

/* So geht's */
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.how .card{padding:26px;position:relative}
.how .n{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;font:700 15px var(--f-data)}
.how h3{margin-top:14px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.how p{margin-top:8px;font-size:14.5px;color:var(--fg-2)}

/* Passt das zu Ihnen */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fit .card{padding:26px}
.fit h3{font-size:19px;font-weight:600;letter-spacing:-.02em}
.fit ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.fit li{display:flex;gap:10px;font-size:14.5px;color:var(--fg-2)}
.fit li svg{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fit .yes svg{stroke:var(--up)}
.fit .no svg{stroke:var(--down)}

/* Preise */
.pricing{max-width:560px;margin:0 auto;position:relative}
.toggle{display:flex;justify-content:center;margin-bottom:22px}
.seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface)}
.seg button{border:0;background:transparent;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:500;color:var(--fg-2);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface-3);color:var(--fg)}
.save-tag{font:600 11px var(--f-data);padding:3px 8px;border-radius:999px;background:var(--up-soft);color:var(--up);margin-left:6px}
.price-card{padding:32px;border:1px solid var(--line-2);border-radius:22px;background:linear-gradient(180deg,var(--surface-2),var(--surface) 55%);position:relative;overflow:hidden}
.price-card .top-row{display:flex;justify-content:space-between;align-items:center}
.price-card h3{font-size:20px;font-weight:600;letter-spacing:-.02em}
.price-card .pill.good{border:1.5px solid transparent;background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,var(--grad-brand) border-box;color:var(--fg)}
.price{display:flex;align-items:baseline;gap:8px;margin-top:20px}
.price .amt{font:600 56px/1 var(--f-ui);letter-spacing:-.04em}
.price .per{color:var(--fg-3);font-size:15px}
.price-sub{margin-top:8px;font-size:13.5px;color:var(--fg-3);min-height:20px}
.price-card ul{list-style:none;margin:24px 0;padding:24px 0 0;border-top:1px solid var(--line);display:grid;gap:11px}
.price-card li{display:flex;gap:10px;font-size:14.5px}
.price-card li svg{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke:var(--c-sky);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.price-card li .gpill{margin-left:8px;font-size:11.5px;padding:1px 9px;vertical-align:1px}
.price-card .btn{width:100%;justify-content:center}
.risk{margin-top:12px;font-size:12px;color:var(--fg-3)}
.cur-sel{border:1px solid var(--line-2);background:var(--surface);color:var(--fg-2);border-radius:999px;padding:2px 8px;font:500 12px var(--f-data)}
html:not(.js) .toggle,html:not(.js) .cur-pick{display:none}

/* FAQ */
.faq{max-width:780px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-size:17px;font-weight:600;letter-spacing:-.01em;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--fg-3);stroke-width:2;transition:transform .2s}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{padding:0 4px 22px;color:var(--fg-2);font-size:15px;max-width:680px}

/* CTA band + footer */
.cta-band{position:relative;overflow:hidden;margin-top:140px;padding:110px 0;text-align:center;border-top:1px solid var(--line)}
.cta-band .beam{left:55%;top:-300px;opacity:.8}
.cta-band h2{position:relative;font:600 clamp(34px,5vw,60px)/1.03 var(--f-ui);letter-spacing:-.045em;max-width:820px;margin:0 auto}
.cta-band p{position:relative;margin-top:18px;color:var(--fg-2);font-size:17px}
.cta-band .ctas{position:relative;margin-top:30px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.cta-band .risk{position:relative;margin-top:16px}
.risk a{text-decoration:underline}
.foot{border-top:1px solid var(--line);padding:48px 0 60px;font-size:13px;color:var(--fg-3)}
.foot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.foot h4{margin:0 0 12px;font:500 11px var(--f-data);letter-spacing:.15em;text-transform:uppercase;color:var(--fg-2)}
.foot a,.foot .legal{display:block;padding:3px 0;color:var(--fg-3)}
.foot a:hover{color:var(--fg)}
.foot a.logo{display:flex;color:var(--fg)}
.foot p + p{margin-top:10px}
.sticky-cta{display:none}

/* ---------- Spinning gradient ring, glow, text effects ---------- */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.gring{position:relative;isolation:isolate;border-color:transparent !important}
.gring::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--ang),var(--line-2) 0deg,var(--line-2) 40deg,var(--c-sky) 78deg,var(--c-cobalt) 104deg,var(--c-purple) 128deg,var(--c-pink) 150deg,var(--c-orange) 172deg,var(--line-2) 210deg,var(--line-2) 360deg);
  -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);
  animation:ring-spin 7s linear infinite}
.gring.slow::after{animation-duration:12s}
@keyframes ring-spin{to{--ang:360deg}}
.gring-static{position:relative;isolation:isolate;border-color:transparent !important}
.gring-static::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,var(--c-purple),var(--c-cobalt) 28%,var(--line-2) 50%,var(--line-2) 72%,var(--c-orange));
  -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)}
.glow-under{position:relative}
.glow-under::before{content:"";position:absolute;left:8%;right:8%;bottom:-18px;height:60px;border-radius:50%;z-index:-1;filter:blur(36px);opacity:.55;
  background:linear-gradient(90deg,var(--c-sky),var(--c-purple),var(--c-pink));animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:.65}}
.grad-text{background:var(--grad-brand);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 9s linear infinite}
@keyframes sheen{to{background-position:200% 0}}
.btn.primary.shine{position:relative;overflow:hidden}
.btn.primary.shine::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:250% 100%;animation:btn-sheen 4.5s ease-in-out infinite;mix-blend-mode:overlay;pointer-events:none}
@keyframes btn-sheen{0%,60%{background-position:150% 0}100%{background-position:-60% 0}}
.reveal{opacity:0;transform:translateY(16px);filter:blur(8px)}
.reveal.in{animation:reveal-in .8s cubic-bezier(.16,1,.3,1) var(--d,0s) both}
@keyframes reveal-in{0%{opacity:0;filter:blur(8px);transform:translateY(16px)}100%{opacity:1;filter:blur(0);transform:none}}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.lift{transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s}
.lift:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c-purple) 45%,var(--line-2));box-shadow:0 18px 50px -20px color-mix(in srgb,var(--c-purple) 55%,transparent)}
.hero .beam{animation:beam-sway 14s ease-in-out infinite alternate}
.hero .beam.b2{animation:beam-sway2 18s ease-in-out infinite alternate}
.cta-band .beam{animation:beam-sway 16s ease-in-out infinite alternate}
@keyframes beam-sway{0%{transform:rotate(30deg);opacity:.8}100%{transform:rotate(38deg);opacity:1}}
@keyframes beam-sway2{0%{transform:rotate(26deg);opacity:.5}100%{transform:rotate(33deg);opacity:.8}}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hdr .links{display:none}
  .trust{grid-template-columns:1fr 1fr}
  .phone{width:180px;right:-6px;bottom:-30px}
}
@media (max-width:900px){
  .hdr .wrap{gap:14px}
  .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  .hdr .cta{display:none}
  .feat,.feat.rev{grid-template-columns:minmax(0,1fr);gap:28px}
  .feat.rev .txt{order:0}
  .feat.wide .txt{grid-template-columns:minmax(0,1fr)}
  .pain,.how,.fit{grid-template-columns:minmax(0,1fr)}
  .foot .wrap{grid-template-columns:1fr}
  .sticky-cta{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;justify-content:center;padding:14px;border-radius:999px;background:var(--cta);color:var(--cta-fg);font-weight:600;box-shadow:0 10px 40px rgba(0,0,0,.5)}
  body{padding-bottom:90px}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .hdr .tools{gap:8px}
  .strip .wrap{gap:10px;font-size:12px}
  .strip .sep,.strip .mkt .muted{display:none}
  .hero{padding-top:64px}
  .hero .lead{font-size:16.5px}
  .visual{margin-top:48px}
  .visual-cap{margin-top:16px}
  .phone{display:none}
  .section{padding-top:88px}
  .sources .logos span{font-size:17px;padding:0 28px}
  .trust{grid-template-columns:minmax(0,1fr)}
  .price .amt{font-size:46px}
  .dash-demo{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;scroll-behavior:auto !important}
  .bg-motion *,.gring::after,.grad-text,.btn.primary.shine::after,.float,.marquee-track,.glow-under::before,.hero .beam,.cta-band .beam{animation:none !important}
  .reveal{opacity:1;transform:none;filter:none}
  .reveal.in{animation:none}
}
@media print{ .bg-motion,.sticky-cta{display:none} }