@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* Shared design layer: type, rhythm, buttons, cards, section bands. Loaded after theme.css. */

:root{--font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;--brand:#3b63ff;--brand2:#7c4dff;
  --grad:linear-gradient(100deg,#3b63ff,#7c4dff)}
body,button,input,select,textarea{font-family:var(--font)}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{letter-spacing:-.02em}

/* ---- light palette: cleaner white, deeper ink, real contrast between sections ---- */
html[data-theme="light"]{
  --bg:#fbfcff; --bg2:#eef3ff; --panel:#ffffff; --panel2:#f3f6ff; --panel-2:#f3f6ff;
  --line:rgba(10,21,48,.10); --line-2:rgba(10,21,48,.06);
  --ink:#0a1530; --muted:#51607f; --soft:#2a3a5e;
}
html[data-theme="light"] body{
  background:radial-gradient(900px 480px at 88% -8%,rgba(124,77,255,.12),transparent),
             radial-gradient(900px 480px at 0% -6%,rgba(59,99,255,.12),transparent),var(--bg)}
html[data-theme="light"] .glass,
html[data-theme="light"] .card{background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(10,21,48,.04),0 14px 34px -14px rgba(30,50,130,.20)}
html[data-theme="light"] .glass:hover,
html[data-theme="light"] .card:hover{border-color:rgba(59,99,255,.45);transform:translateY(-3px)}
html[data-theme="light"] .pill{background:#fff;border:1px solid var(--line);box-shadow:0 2px 8px -4px rgba(10,21,48,.15)}
html[data-theme="light"] .btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 2px 8px -4px rgba(10,21,48,.15)}
html[data-theme="light"] .btn-ghost:hover{border-color:var(--brand)}

/* ---- header ---- */
header.nav{backdrop-filter:blur(14px)}
.nav-in{height:64px}
.nav-links a,.sp a{font-weight:600}
.nav-cta,.ia-signin,.ia-theme{height:42px}
.nav-cta{padding:0 20px;display:inline-flex;align-items:center;border-radius:12px;font-size:15px}

/* ---- buttons ---- */
.btn{padding:14px 26px;border-radius:14px;font-weight:700;font-size:16px;letter-spacing:-.005em;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}
.btn-primary{background:var(--grad);box-shadow:0 14px 30px -10px rgba(59,99,255,.65)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}

/* ---- section headings ---- */
.eyebrow{display:inline-flex;align-items:center;padding:6px 13px;border-radius:999px;font-size:11.5px;font-weight:800;
  letter-spacing:.12em;background:rgba(59,99,255,.10);color:var(--brand);margin-bottom:14px}
html[data-theme="dark"] .eyebrow,html:not([data-theme]) .eyebrow{background:rgba(124,150,255,.14);color:#9db4ff}
.head-c h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.028em;line-height:1.12}
.head-c p{font-size:17.5px;line-height:1.65}
section{padding:80px 0}

/* ---- hero: lead with the promise and the offer ---- */
.hero{padding:76px 0 40px}
.hero h1{font-size:clamp(36px,5.4vw,66px);font-weight:800;letter-spacing:-.035em;line-height:1.06;max-width:15em;margin-left:auto;margin-right:auto}
html[data-theme] .hero h1{background:none;-webkit-text-fill-color:currentColor;animation:none;color:var(--ink)}
.hero h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero .sub{font-size:19px;line-height:1.65;max-width:680px;margin:20px auto 0}
.hero-cta{margin-top:30px;gap:12px}
.hero-cta .btn{padding:16px 30px;font-size:17px}
.ia-price-line{display:inline-block;margin-top:20px;padding:9px 18px;border-radius:999px;font-size:15.5px;font-weight:600;
  background:rgba(59,99,255,.09);border:1px solid rgba(59,99,255,.25)}
.ia-price-line b{color:var(--brand);font-weight:800}
html[data-theme="dark"] .ia-price-line b{color:#9db4ff}

/* ---- section bands: rhythm instead of one flat colour ---- */
html[data-theme="light"] #journey{background:linear-gradient(180deg,#f2f5ff,#fff)}
html[data-theme="light"] #topics{background:#fff}
html[data-theme="light"] #download{background:linear-gradient(180deg,#fff,#eff3ff)}
html[data-theme="light"] #faq{background:#fff}
html[data-theme="light"] #testimonials{background:#f6f8ff}

/* the app: a dark band so the product is the star of the page */
#app-demo{background:linear-gradient(180deg,#0a1230 0%,#101a42 100%);color:#eaf0ff;
  --ink:#eaf0ff;--muted:#aab7da;--line:rgba(255,255,255,.12);--panel:#141d45;--link:#9db4ff;
  padding:84px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
#app-demo .eyebrow{background:rgba(124,150,255,.16);color:#a9bcff}
#app-demo h2{color:#fff}
#app-demo .ad-desk{box-shadow:0 30px 80px -20px rgba(0,0,0,.6);border-color:rgba(255,255,255,.12)}
#app-demo .ad-side{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
#app-demo .ad-chip{color:#dfe7ff;border-color:rgba(255,255,255,.18)}
#app-demo .ad-chip:hover{border-color:#8ea6ff}
#app-demo .ad-detail h4,#app-demo .ad-left h3{color:#fff}

/* pricing band */
#price-band{padding:70px 0}
.pb{display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center;border-radius:28px;padding:48px 52px;color:#fff;
  background:radial-gradient(600px 300px at 90% 0%,rgba(255,255,255,.18),transparent),linear-gradient(120deg,#2b4fe0,#6a3df0);
  box-shadow:0 30px 70px -24px rgba(59,63,230,.6)}
.pb .eyebrow{background:rgba(255,255,255,.18);color:#fff}
.pb h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;line-height:1.1;color:#fff;margin:0}
.pb h2 b{color:#ffe08a}
.pb p{margin:14px 0 0;font-size:17px;color:rgba(255,255,255,.88);max-width:520px}
.pb-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.pb .btn-light{background:#fff;color:#2340a0;box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
.pb .btn-wa{background:#25d366;color:#fff;box-shadow:0 14px 30px -12px rgba(37,211,102,.7)}
.pb ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pb li{display:flex;gap:12px;align-items:center;font-size:16.5px;font-weight:600;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:13px 16px}
@media(max-width:900px){.pb{grid-template-columns:1fr;padding:34px 24px;gap:24px}section{padding:60px 0}.hero{padding:52px 0 28px}}

/* footer + small polish */
footer{border-top:1px solid var(--line)}
:focus-visible{outline:3px solid rgba(59,99,255,.55);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

/* ---- icons (Lucide, self-hosted, coloured with currentColor) ---- */
.li{display:inline-block;width:1.2em;height:1.2em;background:currentColor;flex:none;vertical-align:-.2em;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.card .ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;color:#fff;font-size:22px;
  background:linear-gradient(135deg,#3b63ff,#7c4dff);box-shadow:0 10px 22px -10px rgba(59,99,255,.75);border:0}
.card .ic .li{width:24px;height:24px}
.pill .li{color:var(--brand);width:1.05em;height:1.05em}
html[data-theme="dark"] .pill .li{color:#9db4ff}
.pb li .li{color:#ffe08a;width:1.3em;height:1.3em}

/* no one-word last lines in headings */
h1,h2,h3{text-wrap:balance}
.hero .sub,.head-c p{text-wrap:pretty}

/* ================= hero motion graphics ================= */
.hero{overflow:visible}
.hero > *:not(.hero-fx){position:relative;z-index:2}
.hero-fx{position:absolute;z-index:0;top:-90px;bottom:-30px;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;pointer-events:none}
.fx-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(59,99,255,.28) 1.2px,transparent 1.4px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 38%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 60% 70% at 50% 38%,#000 15%,transparent 72%);
  animation:fxgrid 40s linear infinite}
@keyframes fxgrid{to{background-position:280px 140px}}
.fx-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.fx-glow.g1{width:520px;height:520px;left:6%;top:-8%;background:rgba(59,99,255,.38);animation:fxd1 18s ease-in-out infinite}
.fx-glow.g2{width:480px;height:480px;right:4%;top:2%;background:rgba(124,77,255,.34);animation:fxd2 22s ease-in-out infinite}
@keyframes fxd1{50%{transform:translate(90px,50px) scale(1.12)}}
@keyframes fxd2{50%{transform:translate(-80px,70px) scale(1.1)}}

.fx-b{position:absolute;max-width:270px;padding:12px 15px 12px;border-radius:16px;font-size:13.5px;line-height:1.45;font-weight:600;
  display:block;box-shadow:0 18px 40px -18px rgba(20,30,90,.45);backdrop-filter:blur(8px);will-change:transform;animation:fxfloat 8s ease-in-out infinite}
.fx-b small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-bottom:4px;opacity:.75}
.fx-b .li{width:1.1em;height:1.1em;margin-right:5px;vertical-align:-.18em}
.fx-b.q{background:rgba(255,255,255,.82);border:1px solid rgba(10,21,48,.10);color:#1b2a4d}
.fx-b.a{background:linear-gradient(135deg,rgba(59,99,255,.95),rgba(124,77,255,.95));color:#fff;border:1px solid rgba(255,255,255,.25)}
.fx-b.a .li{color:#9ff0c0}
html[data-theme="dark"] .fx-b.q{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#dfe7ff}
.fx-b.l{left:max(14px,calc(50% - 650px))}
.fx-b.r{right:max(14px,calc(50% - 650px))}
.fx-b.b1{top:150px;animation-delay:0s}
.fx-b.b2{top:292px;animation-delay:-2.6s;animation-duration:9.5s}
.fx-b.b3{top:430px;animation-delay:-5s;animation-duration:7.5s}
.fx-b.r.b1{animation-delay:-1.4s}.fx-b.r.b2{animation-delay:-4s}.fx-b.r.b3{animation-delay:-6.5s}
@keyframes fxfloat{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-14px) rotate(.6deg)}}
@media(max-width:1179px){.fx-b{display:none}}

.fx-wave{position:absolute;left:0;right:0;bottom:6px;height:64px;display:flex;align-items:flex-end;justify-content:center;gap:7px;opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.fx-wave span{width:4px;border-radius:3px;background:linear-gradient(180deg,#7c4dff,#3b63ff);height:14px;
  animation:fxbar 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.11s)}
@keyframes fxbar{0%,100%{height:10px}50%{height:calc(18px + (var(--i) * 7 % 38) * 1px)}}
@media(max-width:700px){.fx-wave{height:44px;gap:5px}.fx-wave span:nth-child(n+25){display:none}.hero-fx{top:-60px}}
@media(prefers-reduced-motion:reduce){html:not(.force-motion) .fx-grid,html:not(.force-motion) .fx-glow,html:not(.force-motion) .fx-b{animation:none}}

/* hero fixes: no sideways scroll from the full-width effect layer, left-aligned bubbles */
html,body{overflow-x:clip}
.fx-b{text-align:left}

/* keep the headline clear of the floating bubbles */
.hero h1{font-size:clamp(34px,4.5vw,58px);max-width:min(12.6em,100%)}
.fx-b{max-width:230px}
@media(max-width:1179px){.hero h1{max-width:15em}}

/* listening bar + scrolling question/answer rows: always visible, at every screen size */
.fx-listen{display:flex;align-items:center;justify-content:center;gap:10px;margin:34px auto 12px;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fx-live{width:9px;height:9px;border-radius:50%;background:#ff5a6a;animation:fxrec 1.4s ease-out infinite}
@keyframes fxrec{0%{box-shadow:0 0 0 0 rgba(255,90,106,.6)}100%{box-shadow:0 0 0 10px rgba(255,90,106,0)}}
.fx-bars{display:inline-flex;align-items:center;gap:3px;height:26px}
.fx-bars span{width:3px;border-radius:2px;background:linear-gradient(180deg,#7c4dff,#3b63ff);height:8px;
  animation:fxbar2 1.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.09s)}
@keyframes fxbar2{0%,100%{height:6px}50%{height:calc(10px + (var(--i) * 5 % 17) * 1px)}}
.fx-ticker{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;padding:6px 0 4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.fx-row{overflow:hidden;margin:8px 0}
.fx-track{display:flex;gap:12px;width:max-content;animation:fxmarq 55s linear infinite}
.fx-row:nth-child(2) .fx-track{animation-direction:reverse;animation-duration:62s}
@keyframes fxmarq{to{transform:translateX(-50%)}}
.tk{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600}
.tk .li{width:1.1em;height:1.1em}
.tk.tq{background:#fff;color:#1b2a4d;border:1px solid var(--line);box-shadow:0 6px 16px -10px rgba(20,30,90,.35)}
html[data-theme="dark"] .tk.tq{background:rgba(255,255,255,.07);color:#dfe7ff;border-color:rgba(255,255,255,.14)}
.tk.ta{background:linear-gradient(100deg,rgba(59,99,255,.14),rgba(124,77,255,.14));color:var(--ink);border:1px solid rgba(59,99,255,.3)}
.tk.ta .li{color:#22a06b}
.fx-play{display:block;margin:14px auto 0;background:#fff7e0;border:1px solid #f0d58a;color:#6b4e00;border-radius:999px;padding:8px 16px;font-size:13px;cursor:pointer}
html[data-theme="dark"] .fx-play{background:rgba(255,224,138,.12);border-color:rgba(255,224,138,.4);color:#ffe08a}
.fx-play u{font-weight:800}
@media(max-width:640px){.tk{font-size:13px;padding:8px 13px}.fx-listen{margin-top:24px;font-size:12px}}

/* reduced motion: respect the device setting, unless the visitor chose to play them */
@media(prefers-reduced-motion:reduce){
  html:not(.force-motion) .fx-live,html:not(.force-motion) .fx-bars span,html:not(.force-motion) .fx-track{animation:none}
}
html.force-motion .fx-grid,html.force-motion .fx-glow,html.force-motion .fx-b,html.force-motion .fx-live,
html.force-motion .fx-bars span,html.force-motion .fx-track{animation-play-state:running}

/* ================= hero: copy on the left, product picture on the right ================= */
.hero-split{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:8px 24px;align-items:center;text-align:left}
.hero-copy{min-width:0}
.hero-copy .hero-cta{justify-content:flex-start}
.hero .hero-copy h1{max-width:none;margin:0;font-size:clamp(34px,4.1vw,56px)}
.hero .hero-copy .sub{margin:20px 0 0;max-width:560px}
.hero-art{position:relative;min-width:0;margin-right:-34px}
.hero-art img{display:block;width:100%;height:auto;animation:fxart 9s ease-in-out infinite;filter:drop-shadow(0 28px 40px rgba(40,50,130,.22))}
@keyframes fxart{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
html[data-theme="dark"] .hero-art img{filter:drop-shadow(0 28px 50px rgba(0,0,0,.55))}
.hero .fx-b{display:none}
@media(max-width:1000px){
  .hero-split{grid-template-columns:1fr;text-align:center}
  .hero-copy .hero-cta{justify-content:center}
  .hero .hero-copy .sub{margin-left:auto;margin-right:auto}
  .hero-art{margin:18px auto 0;max-width:640px}
}
@media(prefers-reduced-motion:reduce){html:not(.force-motion) .hero-art img{animation:none}}

/* bigger picture, edges feathered into the page (no visible rectangle) */
.hero-split{grid-template-columns:minmax(0,.92fr) minmax(0,1.13fr)}
.hero-art{margin-right:-78px;margin-left:-20px}
.hero-art img{filter:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
html[data-theme="dark"] .hero-art img{filter:none}
@media(max-width:1000px){.hero-art{margin:6px auto 0;max-width:680px}}

/* wider hero so the headline stays on three lines next to the picture */
section.hero.wrap{max-width:1260px}
.hero .hero-copy h1{font-size:clamp(32px,3.5vw,50px);line-height:1.08}
.hero-split{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
.hero-art{margin-right:-60px;margin-left:-10px}
@media(max-width:1000px){.hero .hero-copy h1{font-size:clamp(32px,7vw,46px)}}

/* small screens: one column (must come after the desktop overrides above) */
@media(max-width:1000px){
  .hero-split{grid-template-columns:minmax(0,1fr);text-align:center}
  .hero-art{margin:8px auto 0;max-width:680px}
  .hero .hero-copy h1{max-width:none}
}

/* dark theme: a lighter gradient so the highlighted words stay readable on the glow */
html[data-theme="dark"] .hero h1 .hl{background:linear-gradient(100deg,#9db4ff,#d2b8ff);-webkit-background-clip:text;background-clip:text}

/* header never wraps its labels */
.nav-links a,.sp a,.nav-cta,.ia-signin{white-space:nowrap}
.nav-links{gap:22px}
@media(max-width:1180px){.nav-links{gap:16px}.nav-links a{font-size:14px}}