/* Instant.Talk — design system (dark + light)
   Dark is the primary theme; light is a pure color swap (same layout/type/spacing).
   Tokens + components ported from the brand redesign (design.md + Home prototype).
   Fonts: Archivo Black (display, UPPERCASE), Space Grotesk (body/UI), Space Mono (data),
   Caveat (the "always online" script accent). Violet #7C5CFF + yellow #FFD600. */

:root{
  --bg:#0B0D1A; --sf:#14172B; --sf2:#1F243F; --bd:#2D324E; --bd-soft:rgba(255,255,255,.08);
  --ink:#E6E8F0; --ink2:#AEB4CC; --mut:#6C7392;
  --vi:#7C5CFF; --vi-h:#9D7CFF; --ye:#FFD600; --ac:#FFD600;
  --gr:#22C55E; --red:#EF4444;
  --page-bg:radial-gradient(60% 46% at 80% 8%, rgba(124,92,255,.16), transparent 62%),
    radial-gradient(46% 40% at 6% 88%, rgba(124,92,255,.13), transparent 62%),
    linear-gradient(180deg,#0B0D1A 0%,#0C0E1C 100%);
  --shadow:0 24px 60px rgba(0,0,0,.5);
  --cloud:rgba(124,92,255,.16); --vi-tint:rgba(124,92,255,.18); --vi-glow:0 10px 30px rgba(124,92,255,.4);
  --card-glass:rgba(15,18,38,.62);
  /* hero scrim over the bright mascot banner (desktop/tablet), and the top-down mobile band scrim */
  --hero-scrim:radial-gradient(78% 104% at 2% 50%, #0B0D1A 0%, rgba(11,13,26,.68) 32%, rgba(11,13,26,.12) 52%, transparent 66%), linear-gradient(180deg, transparent 68%, #0B0D1A 98%);
  --hero-scrim-m:linear-gradient(180deg, transparent 30%, rgba(11,13,26,.5) 60%, #0B0D1A 90%);
  --hero-shadow:0 2px 10px rgba(0,0,0,.75), 0 3px 34px rgba(0,0,0,.5);
  --hero-shadow-soft:0 1px 8px rgba(0,0,0,.6);
  --disp:'Archivo Black',system-ui,sans-serif;
  --sans:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --script:'Caveat',cursive;
  --maxw:min(1840px, 92vw);
  --spring:cubic-bezier(.34,1.25,.4,1);
}
:root[data-theme="light"]{
  --bg:#F7F8FC; --sf:#FFFFFF; --sf2:#F1F2F8; --bd:#D5DAE6; --bd-soft:#E9ECF3;
  --ink:#1A1D2B; --ink2:#4A5064; --mut:#9AA3B2;
  --vi:#7C5CFF; --vi-h:#A78BFF; --ye:#FFD600; --ac:#7C5CFF;
  --page-bg:radial-gradient(58% 44% at 80% 6%, rgba(124,92,255,.10), transparent 62%),
    radial-gradient(44% 38% at 6% 90%, rgba(124,92,255,.07), transparent 62%),
    linear-gradient(180deg,#F7F8FC 0%,#EEF0F7 100%);
  --shadow:0 20px 40px rgba(20,23,43,.08);
  --cloud:rgba(124,92,255,.10); --vi-tint:rgba(124,92,255,.12); --vi-glow:0 10px 26px rgba(124,92,255,.28);
  --card-glass:rgba(255,255,255,.8);
  --hero-scrim:radial-gradient(78% 104% at 2% 50%, #F7F8FC 0%, rgba(247,248,252,.68) 32%, rgba(247,248,252,.12) 52%, transparent 66%), linear-gradient(180deg, transparent 68%, #F7F8FC 98%);
  --hero-scrim-m:linear-gradient(180deg, transparent 30%, rgba(247,248,252,.5) 60%, #F7F8FC 90%);
  --hero-shadow:0 1px 2px rgba(255,255,255,.6);
  --hero-shadow-soft:none;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
a{text-decoration:none}
::selection{background:rgba(124,92,255,.28)}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  transition:background .3s ease,color .3s ease;min-height:100vh}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes ring{0%{transform:scale(.75);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* ---------- ambient background ---------- */
.bg-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:var(--page-bg)}
.cloud1{position:absolute;width:440px;height:440px;border-radius:50%;filter:blur(90px);background:var(--cloud);top:-120px;right:-80px}
.cloud2{position:absolute;width:480px;height:480px;border-radius:50%;filter:blur(100px);background:var(--cloud);bottom:-160px;left:-120px}
.spark{position:absolute;color:var(--ac);animation:twinkle 4.5s ease-in-out infinite}
.spark.s1{left:22%;top:11%;font-size:20px}
.spark.s2{left:62%;top:7%;font-size:14px;color:var(--vi);animation-delay:.8s}
.spark.s3{left:40%;top:20%;font-size:12px;animation-delay:1.6s}
.spark.s4{left:84%;top:26%;font-size:16px;color:var(--vi);animation-delay:.4s}
.stage{position:relative;z-index:1}

/* ---------- layout + type ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.wrap-narrow{max-width:900px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
section{padding:clamp(52px,7vw,90px) 0;position:relative}
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ac);margin-bottom:16px;font-weight:700}
h1,h2,h3{font-weight:400}
h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(28px,3.3vw,44px);line-height:.98;
  letter-spacing:-.01em;color:var(--ink);max-width:22ch}
h3{font-family:var(--sans);font-weight:700;font-size:18px;color:var(--ink);margin:12px 0 8px;letter-spacing:-.01em}
.lede{font-size:18px;line-height:1.65;color:var(--ink2);max-width:52ch;margin:18px 0 0}
.cardp{font-size:14.5px;color:var(--ink2);line-height:1.6}
.strong{color:var(--ink);font-weight:700}

/* ---------- nav ---------- */
nav.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;
  max-width:var(--maxw);margin:0 auto;padding:18px clamp(20px,4vw,44px)}
/* full-bleed nav background (spans the whole viewport, not just the centered content box,
   so there's no vertical seam where the mascot banner shows beside the nav) */
nav.top::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:100vw;height:100%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 58%,transparent)}
.brandlogo{height:30px;width:auto;display:block}
.navpill{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--vi);
  border:1px solid var(--vi);border-radius:999px;padding:7px 15px;font-weight:700}
.navlinks{display:flex;align-items:center;gap:6px;margin-left:auto}
.navlink{color:var(--ink2);font-size:14.5px;padding:8px 12px;border-radius:999px;transition:color .15s ease;white-space:nowrap}
.navlink:hover{color:var(--ink)}
.toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;background:var(--sf2);border:1px solid var(--bd);cursor:pointer;margin-left:4px;
  transition:transform .15s ease;color:var(--ink)}
.toggle:hover{transform:rotate(20deg) scale(1.05)}
@media(max-width:1000px){.navpill{display:none}}
@media(max-width:860px){.navlink.sec{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:700;white-space:nowrap;
  cursor:pointer;border-radius:999px;border:none;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.btn-p{padding:11px 20px;font-size:14px;background:var(--vi);color:#fff;box-shadow:var(--vi-glow)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(124,92,255,.5)}
.btn-p.big{padding:15px 26px;font-size:15px}
.btn-g{padding:13px 22px;font-size:15px;background:transparent;color:var(--ink);border:1px solid var(--bd)}
.btn-g:hover{transform:translateY(-2px);border-color:var(--vi)}
.btn-full{justify-content:center;width:100%;margin-top:auto}
.play-dot{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--vi);color:#fff}

/* ---------- hero ---------- */
.hero{position:relative;width:100%;overflow:hidden;padding:104px 0 44px;margin-top:-72px}
.hero-art{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;
  -webkit-mask-image:radial-gradient(125% 92% at 60% 42%,#000 62%,transparent 94%);
  mask-image:radial-gradient(125% 92% at 60% 42%,#000 62%,transparent 94%)}
.hero-art.light{display:none}
:root[data-theme="light"] .hero-art.dark{display:none}
:root[data-theme="light"] .hero-art.light{display:block}
.hero-fade{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--hero-scrim)}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 clamp(20px,4vw,44px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.92fr) minmax(0,.82fr);gap:24px;align-items:center}
.hero-spacer{min-height:540px}
.hero-h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(34px,4.4vw,64px);line-height:.9;
  letter-spacing:-.02em;color:var(--ink);margin:0 0 22px;text-shadow:var(--hero-shadow)}
.hero-inner .lede{text-shadow:var(--hero-shadow-soft)}
.script{position:absolute;left:88%;top:8%;font-family:var(--script);font-weight:700;color:var(--ye);
  font-size:.6em;transform:rotate(-6deg);white-space:nowrap;pointer-events:none;text-transform:none;letter-spacing:0;
  text-shadow:0 3px 16px rgba(0,0,0,.7),0 0 26px rgba(255,214,0,.5)}
.checklist{list-style:none;display:grid;gap:11px;margin:24px 0 0}
.check-item{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:var(--ink2)}
.check-disc{flex:none;width:22px;height:22px;border-radius:50%;background:var(--ye);color:#1A1D2B;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:1px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:28px}
.note{font-size:13px;color:var(--mut);margin-top:16px}

/* ---------- call card ---------- */
.callcard{background:var(--card-glass);border:1px solid var(--bd);border-radius:22px;padding:22px;
  box-shadow:var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.chead{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--bd);margin-bottom:14px}
.avatar{position:relative;width:40px;height:40px;border-radius:50%;background:var(--vi);display:flex;
  align-items:center;justify-content:center;flex:none;box-shadow:var(--vi-glow);color:#fff}
.avatar.flat{width:36px;height:36px;box-shadow:none}
.avatar.pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(124,92,255,.4);animation:ring 2.2s ease-out infinite}
.call-who{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--ink)}
.call-sub{font-family:var(--mono);font-size:12px;color:var(--mut);margin-top:1px}
.timer{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--ink2);display:inline-flex;align-items:center;gap:7px}
.green-dot{width:8px;height:8px;border-radius:50%;background:var(--gr);box-shadow:0 0 8px var(--gr)}
.turn{display:flex;gap:12px;margin:11px 0;font-size:13.5px;line-height:1.5}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--mut);flex:none;width:52px;padding-top:2px}
.tag.ai{color:var(--vi)}
.turn p{color:var(--ink2)}
.turn.ai p{color:var(--ink)}
.verify{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;color:var(--vi);
  background:var(--vi-tint);padding:6px 13px;border-radius:999px;margin:6px 0 2px 64px}
.cfoot{display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--bd);flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:11.5px;padding:7px 13px;border-radius:999px;background:var(--sf2);
  color:var(--ink2);border:1px solid var(--bd-soft);white-space:nowrap}

/* ---------- timeline ---------- */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.tl-card{display:flex;gap:14px;background:var(--card-glass);border:1px solid var(--bd);border-radius:18px;
  padding:20px;box-shadow:var(--shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tl-ico{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.tl-ico.v{background:var(--vi);color:#fff}
.tl-ico.y{background:var(--ye);color:#1A1D2B}
.tl-time{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--ac);margin-bottom:7px}
.tl-text{font-size:13.5px;color:var(--ink2);line-height:1.55}

/* ---------- generic card + grids ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.card{background:var(--sf);border:1px solid var(--bd);border-radius:22px;padding:26px;box-shadow:var(--shadow);
  display:flex;flex-direction:column}
.card.hoverable{transition:transform .18s ease,border-color .18s ease}
.card.hoverable:hover{transform:translateY(-4px);border-color:var(--vi)}
.card-win{border-color:var(--vi);box-shadow:0 24px 60px rgba(124,92,255,.22)}
.card-star{position:relative}
.stepn{font-family:var(--mono);font-size:12px;color:var(--vi);letter-spacing:.12em;font-weight:700}
.feat-ico{width:44px;height:44px;border-radius:12px;background:var(--sf2);border:1px solid var(--bd-soft);
  display:flex;align-items:center;justify-content:center;color:var(--vi);margin-bottom:4px}
.mtitle{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--ink)}
.mprice{font-family:var(--mono);font-size:22px;color:var(--ink2);margin:8px 0 10px;font-weight:700}
.mprice.win{color:var(--vi)}

/* ---------- problem ---------- */
.problem-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.grind-card{background:var(--sf);border:1px solid var(--bd);border-radius:20px;padding:22px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:9px}
.grind-head{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);font-weight:700;margin-bottom:4px}
.grind-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 15px;
  background:var(--sf2);border:1px solid var(--bd-soft);border-radius:12px;font-size:14.5px;color:var(--ink)}
.grind-count{font-family:var(--mono);font-size:12px;color:var(--mut);white-space:nowrap}
.grind-foot{font-size:13.5px;color:var(--ink2);margin-top:6px;line-height:1.55}

/* ---------- demo ---------- */
.demo-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;margin-top:40px;align-items:start}
.chatdemo{background:var(--sf);border:1px solid var(--bd);border-radius:22px;padding:22px;display:flex;
  flex-direction:column;height:440px;overflow:hidden;box-shadow:var(--shadow)}
.dbody{flex:1;display:flex;flex-direction:column;gap:10px;justify-content:flex-end;overflow:hidden;padding:8px 2px;min-height:0}
.dmsg{max-width:82%;padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.45}
.dmsg.c{align-self:flex-end;background:var(--vi);color:#fff;border-bottom-right-radius:5px}
.dmsg.a{align-self:flex-start;background:var(--sf2);color:var(--ink);border:1px solid var(--bd-soft);border-bottom-left-radius:5px}
.dinput{margin-top:12px;padding:13px 16px;font-size:12.5px;color:var(--mut);background:var(--sf2);
  border-radius:12px;border:1px solid var(--bd-soft)}
.demo-side{display:grid;gap:16px;align-content:start}
.dpoint{background:var(--sf);border:1px solid var(--bd);border-radius:18px;padding:20px;font-size:14px;color:var(--ink2);box-shadow:var(--shadow)}
.dnum{display:block;font-family:var(--mono);font-weight:700;font-size:22px;color:var(--vi);margin-bottom:7px}

/* ---------- founder ---------- */
.founder-card{display:grid;grid-template-columns:360px 1fr;background:var(--sf);border:1px solid var(--bd);
  border-radius:24px;box-shadow:var(--shadow);max-width:1120px;margin:0 auto;overflow:hidden}
.founder-photo-wrap{position:relative}
.founder-photo{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;min-height:460px}
.founder-badge{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#fff;background:rgba(15,18,38,.7);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:7px 13px;border-radius:999px;font-weight:700}
.founder-badge-dot{width:8px;height:8px;border-radius:50%;background:#EF4444;box-shadow:0 0 8px #EF4444}
.founder-body{padding:clamp(26px,3.4vw,46px)}
.founder-h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(30px,3.2vw,44px);line-height:.98;
  letter-spacing:-.01em;color:var(--ink);margin:14px 0 0}
.founder-tags{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 22px}
.founder-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:600;font-size:13px;
  color:var(--ink);background:var(--vi-tint);padding:8px 15px;border-radius:999px}
.founder-stats{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,44px);margin:0 0 24px}
.stat-num{font-family:var(--disp);font-size:clamp(24px,2.4vw,32px);color:var(--vi);letter-spacing:-.01em;line-height:1}
.stat-lbl{font-family:var(--sans);font-size:13px;color:var(--mut);margin-top:6px}
.founder-quote{font-family:var(--sans);font-size:clamp(15.5px,1.15vw,17px);line-height:1.65;color:var(--ink2);margin:0 0 24px}
.founder-hi{color:var(--vi);font-weight:600}
.founder-sign-name{font-family:var(--script);font-weight:700;font-size:42px;color:var(--ink);line-height:.9}
.founder-name{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--ink);margin-top:2px}
.founder-role{font-family:var(--sans);font-size:13px;color:var(--mut);margin-top:2px}

/* ---------- pricing ---------- */
.plans-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:900px;margin:40px auto 0}
.pname{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);font-weight:700}
.price{font-family:var(--disp);font-size:42px;color:var(--ink);margin:10px 0 2px;letter-spacing:-.02em}
.price-unit{font-family:var(--mono);font-size:14px;color:var(--mut);font-weight:400}
.plan-ul{list-style:none;display:grid;gap:13px;margin:20px 0 24px}
.plan-li{position:relative;padding-left:30px;font-size:14.5px;color:var(--ink2);line-height:1.6}
.li-check{position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--vi-tint);
  color:var(--vi);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.badge{position:absolute;top:-12px;left:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:#fff;background:var(--vi);padding:5px 13px;border-radius:999px;font-weight:700}
.packs{max-width:840px;margin:22px auto 0;padding:18px 24px;display:flex;gap:16px;align-items:center;
  flex-wrap:wrap;background:var(--sf2);border:1px solid var(--bd-soft);border-radius:16px}
.packs-mut{font-family:var(--mono);font-size:12.5px;color:var(--mut)}

/* ---------- faq ---------- */
.faq{display:grid;gap:12px;margin-top:36px}
.faq-item{background:var(--sf);border:1px solid var(--bd);border-radius:16px;padding:4px 22px}
.faq-sum{font-family:var(--sans);font-weight:700;font-size:16px;color:var(--ink);padding:16px 0;cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:12px}
.faq-sum::-webkit-details-marker{display:none}
.faq-plus{margin-left:auto;font-family:var(--mono);font-size:20px;color:var(--vi);transition:transform .2s ease}
.faq-item[open] .faq-plus{transform:rotate(45deg)}
.faq-p{padding:0 0 18px;color:var(--ink2);font-size:14.5px;line-height:1.6}

/* ---------- final + footer ---------- */
.final-card{background:var(--sf);border:1px solid var(--bd);border-radius:26px;padding:56px 32px;text-align:center;box-shadow:var(--shadow)}
.h2-center{font-family:var(--disp);text-transform:uppercase;font-size:clamp(28px,3.2vw,44px);line-height:.98;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:14px;max-width:none}
.kicker-center{text-align:center}
.final-p{font-size:16px;color:var(--ink2);margin-bottom:28px}
.footer{padding:52px 0 64px;font-size:14px;color:var(--mut);border-top:1px solid var(--bd);margin-top:20px}
.foot-cols{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.foot-tag{margin-top:10px;max-width:34ch;color:var(--ink2);font-size:13.5px}
.foot-link{color:var(--ink2);padding:4px 10px;border-radius:999px;transition:color .15s ease;font-size:14px}
.foot-link:hover{color:var(--ink)}
.copyright{margin-top:28px;font-size:12.5px;color:var(--mut)}

/* ---------- doc pages (privacy/terms/support) ---------- */
.doc{background:var(--sf);border:1px solid var(--bd);border-radius:22px;box-shadow:var(--shadow);
  max-width:820px;margin:40px auto 80px;padding:clamp(28px,4vw,48px)}
.doc h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(26px,3vw,36px);line-height:1;letter-spacing:-.01em;color:var(--ink)}
.doc .upd{font-family:var(--mono);font-size:12.5px;color:var(--mut);margin:10px 0 26px}
.doc h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(17px,1.8vw,21px);color:var(--ink);margin:30px 0 10px;letter-spacing:-.01em}
.doc p,.doc li{font-size:15px;color:var(--ink2);line-height:1.7}
.doc a{color:var(--vi)}
.doc ul{padding-left:22px;margin:10px 0}
.doc strong{color:var(--ink)}

/* ---------- reveal on scroll ---------- */
.rv{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  .rv.pre{opacity:0;transform:translateY(18px)}
  .rv.in{opacity:1;transform:none;transition:opacity .6s var(--spring),transform .6s var(--spring)}
}

/* ---------- responsive ----------
   Breakpoints: mobile <640, tablet 640-1023, desktop >=1024.
   Hero banner is a full-bleed background behind the content on tablet+desktop; on mobile it
   becomes a fixed top band and the content is pushed below it. */

/* tablet: hero drops the center mascot-spacer column, banner stays full-bleed behind */
@media(max-width:1023px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:20px}
  .hero-spacer{display:none}
  .grid3,.timeline{grid-template-columns:repeat(2,1fr)}
}

/* any sidebar / 2-column section collapses to one column below 900 */
@media(max-width:900px){
  .problem-grid{grid-template-columns:1fr;gap:26px}
  .demo-grid{grid-template-columns:1fr}
  .founder-card{grid-template-columns:1fr}
  .founder-photo{min-height:340px}
}

/* mobile: banner = fixed top band; hero content pushed down to emerge over its faded edge */
@media(max-width:639px){
  .hero{position:relative;overflow:hidden;padding:0 0 8px;margin-top:0}
  .hero-art{position:absolute;top:0;left:0;width:100%;height:62vh;object-fit:cover;object-position:50% 32%;
    -webkit-mask-image:none;mask-image:none}
  .hero-fade{position:absolute;top:0;left:0;right:0;bottom:auto;height:64vh;background:var(--hero-scrim-m)}
  .hero-inner{padding-top:50vh}
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero-h1{font-size:clamp(34px,10vw,52px)}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%;justify-content:center}
  .navlinks .btn-p{padding:10px 16px;font-size:13px}
  .chatdemo{height:500px}
  .grid3,.timeline,.plans-grid{grid-template-columns:1fr}
  .plans-grid{max-width:440px}
  h2{font-size:clamp(26px,7vw,34px)}
  .script{left:auto;right:2%;top:-2%;font-size:.5em}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* ── Mascot artwork ─────────────────────────────────────────────────────────────
   Rocket appears as illustration rather than as an icon font, so these are sized
   like the icons they replaced and given the same violet glow the cards use. */
.step-mascot{width:120px;height:120px;object-fit:contain;display:block;margin:0 0 14px;
  filter:drop-shadow(0 8px 22px rgba(124,92,255,.35))}
.feat-mascot{width:96px;height:96px;object-fit:contain;display:block;margin:0 0 12px;
  filter:drop-shadow(0 6px 18px rgba(124,92,255,.3))}
.card:hover .feat-mascot{transform:translateY(-3px) scale(1.04);transition:transform .3s var(--spring)}
.feat-mascot,.step-mascot{transition:transform .3s var(--spring)}
@media (max-width:720px){.step-mascot{width:92px;height:92px}.feat-mascot{width:76px;height:76px}}

/* ── Wordmark ───────────────────────────────────────────────────────────────────
   A text logo rather than an image, so it stays crisp at any size, swaps with the
   theme for free, and never ships the wrong brand's PNG. "Instant" takes the ink
   colour, the dot and "Place" take the violet, which is the same accent the buttons
   and the mascot glow use. */
.wordmark{font-family:var(--disp);font-size:24px;letter-spacing:-.02em;color:var(--ink);
  display:inline-block;line-height:1;white-space:nowrap}
.wordmark-dot{color:var(--vi);margin:0 .02em}
.wordmark-accent{background:linear-gradient(92deg,var(--vi) 0%,var(--vi-h) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand:hover .wordmark-accent{filter:brightness(1.15)}
.wordmark,.wordmark-accent{transition:filter .25s ease}
@media (max-width:720px){.wordmark{font-size:20px}}

/* ── Footer: centred ────────────────────────────────────────────────────────────
   The inherited layout pushed the wordmark hard left and the links hard right,
   which reads as unfinished on a short page. Centre the whole block and stack it. */
.foot-centered{flex-direction:column;align-items:center;text-align:center;gap:18px}
.foot-centered .foot-tag{max-width:46ch;margin-left:auto;margin-right:auto}
.foot-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.footer .copyright{text-align:center;margin-top:22px}

/* ── Hero banner: blend into the black section below ────────────────────────────
   The supplied art ends abruptly, so a gradient carries the last third of the image
   into the page background instead of leaving a visible horizontal seam. */
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(11,13,26,.55) 45%,var(--bg) 100%)}
:root[data-theme="light"] .hero-fade{
  background:linear-gradient(180deg,transparent 0%,rgba(247,248,252,.55) 45%,var(--bg) 100%)}