/* Sorted — public site (landing, legal, not-found). Tokens from tokens.css; component classes (.btn, .chip, .bubble,
   .system-pill, .statusbar, .row__avatar) come from app.css so the mock-up is the app's own rendering. */

.site { min-height:100%; display:flex; flex-direction:column; background:var(--bg-0); color:var(--fg-0); overflow-x:clip; }
/* grid and flex children must be allowed to shrink below their content (the mock's non-wrapping chip row) or a phone gets a sideways scroll */
.hero > *, .grid > *, .split > *, .steps > *, .mock, .mock > * { min-width:0; }
.wrap { width:100%; max-width:1120px; margin:0 auto; padding:0 24px; box-sizing:border-box; }

/* header */
.site__head { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:24px; padding:12px 24px; background:rgba(10,10,12,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:var(--hairline); }
.site__brand { display:inline-flex; align-items:center; gap:10px; color:var(--fg-0); text-decoration:none; font-weight:600; font-size:18px; }
.site__nav { display:flex; gap:22px; margin-left:12px; }
.site__nav a { color:var(--fg-1); text-decoration:none; font-size:14px; font-weight:500; transition:color var(--dur-fast) var(--ease); }
.site__nav a:hover { color:var(--fg-0); }
.site__actions { margin-left:auto; display:flex; align-items:center; gap:16px; }
.site__signin { color:var(--fg-1); text-decoration:none; font-size:14px; font-weight:500; }
.site__signin:hover { color:var(--fg-0); }

/* buttons: the app's .btn is block-level; on the site they sit inline */
.site .btn { width:auto; display:inline-flex; text-decoration:none; padding:0 22px; }
.site .btn--lg { height:52px; font-size:17px; padding:0 28px; }
.site .btn:hover { filter:brightness(1.06); }

/* type */
.eyebrow { margin:0 0 12px; font-size:12px; line-height:16px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-2); }
.site h1 { margin:0 0 20px; font-size:clamp(38px,5.6vw,66px); line-height:1.04; font-weight:700; letter-spacing:-.025em; text-wrap:balance; }
.site h2 { margin:0 0 16px; font-size:clamp(28px,3.4vw,42px); line-height:1.1; font-weight:700; letter-spacing:-.02em; text-wrap:balance; }
.site h3 { margin:0 0 8px; font-size:18px; line-height:24px; font-weight:600; }
.lead { margin:0 0 28px; font-size:19px; line-height:30px; color:var(--fg-1); text-wrap:pretty; max-width:60ch; }
.lead--narrow { max-width:52ch; }
.site p { text-wrap:pretty; }
.site a { color:var(--fg-0); }
.site .card p, .site .faq p, .site .ticks li { color:var(--fg-1); font-size:15px; line-height:24px; margin:0; }

/* hero */
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; padding-top:72px; padding-bottom:72px; }
.hero__actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero__actions--center { justify-content:center; }
.hero__hint { margin:16px 0 0; font-size:13px; line-height:18px; }
.hero__mock { display:flex; justify-content:center; }

/* the mock-up phone */
.mock { width:min(380px,100%); background:var(--bg-0); border:1px solid var(--bg-3); border-radius:28px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6); font-size:16px; }
.mock__head { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--bg-1); }
.mock__title { display:flex; flex-direction:column; min-width:0; }
.mock__title b { font-size:16px; line-height:22px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mock__title span { font-size:12px; line-height:16px; color:var(--fg-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mock .statusbar { overflow:hidden; }
.mock__dot { width:8px; height:8px; border-radius:var(--radius-full); display:inline-block; }
.mock__thread { display:flex; flex-direction:column; gap:8px; padding:14px 12px 18px; min-height:300px; }
.mock .bubble { animation:none; }
.mock__mention { color:var(--accent); font-weight:600; }
.mock__composer { display:flex; align-items:center; gap:10px; margin:0 12px 14px; height:44px; padding:0 8px 0 16px; border-radius:var(--radius-full); background:var(--bg-2); color:var(--fg-2); font-size:15px; }
.mock__composer span:first-child { flex:1; }
.mock__mic { width:32px; height:32px; border-radius:var(--radius-full); background:var(--bg-3); position:relative; }
.mock__mic::before { content:""; position:absolute; left:12px; top:8px; width:8px; height:12px; border-radius:4px; background:var(--fg-1); }
.mock__mic::after { content:""; position:absolute; left:10px; top:13px; width:10px; height:9px; border:1.5px solid var(--fg-1); border-top:none; border-radius:0 0 7px 7px; }

/* sections */
.band { padding-top:72px; padding-bottom:72px; border-top:var(--hairline); }
.grid { display:grid; gap:16px; margin-top:32px; }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--2 { grid-template-columns:repeat(2,1fr); }
/* app.css also has a .card (the 78%-wide chat card, a flex column); the site's card is a plain block that fills its grid cell */
.card { display:block; width:auto; align-self:auto; gap:0; background:var(--bg-1); border:var(--hairline); border-radius:var(--radius-lg); padding:24px; box-sizing:border-box; }

.neon-card__dot { width:12px; height:12px; border-radius:var(--radius-full); margin-bottom:16px; }

.steps { list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.step__n { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--radius-full); background:var(--bg-3); color:var(--fg-0); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; margin-bottom:16px; }

.split { display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:start; }
.ticks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.ticks li { position:relative; padding-left:28px; }
.ticks li::before { content:""; position:absolute; left:0; top:7px; width:10px; height:10px; border-radius:var(--radius-full); background:var(--neon-green); }
.ticks li b { color:var(--fg-0); font-weight:600; }
.ticks--tight { gap:10px; margin:20px 0 24px; }
.ticks--tight li::before { top:8px; width:8px; height:8px; }

.plans { align-items:stretch; }
.plan { display:flex; flex-direction:column; }
.plan .btn { margin-top:auto; }
.plan__price { margin:8px 0 4px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.plan__amount { font-size:44px; line-height:48px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.plan__unit { font-size:14px; color:var(--fg-1); }
.plan__for { margin:0 !important; }
.plan--team { border-color:var(--bg-4); }
.plans__note { margin:20px 0 0; font-size:13px; line-height:20px; }

.faqs { gap:8px 40px; }
.faq { padding:20px 0; border-bottom:1px solid var(--bg-2); }

.cta { text-align:center; display:flex; flex-direction:column; align-items:center; }
.cta .lead { margin-left:auto; margin-right:auto; }

/* footer */
.site__foot { margin-top:auto; border-top:var(--hairline); padding:28px 24px 40px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.site__foot-brand { display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.site__foot-by { color:var(--fg-2); font-weight:400; font-size:13px; margin-left:4px; }
.site__foot-nav { display:flex; gap:18px; }
.site__foot-nav a { color:var(--fg-1); text-decoration:none; font-size:14px; }
.site__foot-nav a:hover { color:var(--fg-0); }
.site__foot-copy { margin-left:auto; color:var(--fg-2); font-size:13px; }

/* not found */
.site-404 { text-align:center; padding:96px 24px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.site-404 h1 { margin:16px 0 4px; font-size:32px; }
.site-404 p { margin:0 0 24px; color:var(--fg-1); }
.site-404__actions { display:flex; gap:12px; }

@media (max-width: 960px) {
  .hero { grid-template-columns:1fr; gap:40px; padding-top:48px; padding-bottom:48px; }
  .grid--3, .steps { grid-template-columns:1fr 1fr; }
  .grid--3 > :last-child:nth-child(odd), .steps > :last-child:nth-child(odd) { grid-column:1 / -1; }   /* no orphan card in two columns */
  .split { grid-template-columns:1fr; gap:24px; }
  .site__nav { display:none; }
}
@media (max-width: 640px) {
  .grid--3, .grid--2, .steps { grid-template-columns:1fr; }
  .band { padding-top:48px; padding-bottom:48px; }
  .site__head { padding:10px 16px; gap:12px; }
  .site__signin { display:none; }
  .site__foot { flex-direction:column; align-items:flex-start; gap:14px; }
  .site__foot-copy { margin-left:0; }
  .site-404__actions { flex-direction:column; }
}

/* ───────────────────────────────────────────────────────────────────────────────────────────────────────────
   Motion and colour for the brochure. The app keeps its rule (neon only where it carries meaning, no glow
   except the timer and an overdue chip); the landing page is allowed to show the neon off, but every colour
   still keeps its meaning: green = done, pink = needs you, purple = in motion. Everything below is CSS-only
   except scroll reveal, the scroll progress line and the live phone mock, which site.js drives. With
   prefers-reduced-motion, tokens.css already zeroes every animation and transition on the page.
   ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */

@keyframes site-rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes site-word { from { opacity:0; transform:translateY(.55em) rotate(2deg); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
@keyframes site-drift-a { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(60px,-40px) scale(1.12); } 66% { transform:translate(-30px,30px) scale(.94); } }
@keyframes site-drift-b { 0%,100% { transform:translate(0,0) scale(1); } 40% { transform:translate(-70px,50px) scale(1.08); } 70% { transform:translate(40px,-20px) scale(.9); } }
@keyframes site-drift-c { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(50px,60px) scale(1.15); } }
@keyframes site-bob { 0%,100% { transform:translateY(0) rotate(-1.5deg); } 50% { transform:translateY(-10px) rotate(1deg); } }
@keyframes site-bob-b { 0%,100% { transform:translateY(0) rotate(1.5deg); } 50% { transform:translateY(-14px) rotate(-1deg); } }
@keyframes site-ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes site-ring { 0% { transform:scale(.6); opacity:.9; } 100% { transform:scale(2.6); opacity:0; } }
@keyframes site-blink { 0%,100% { opacity:1; } 50% { opacity:.25; } }
@keyframes site-dots { 0%,80%,100% { transform:translateY(0); opacity:.4; } 40% { transform:translateY(-4px); opacity:1; } }
@keyframes site-underline { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes site-shine { from { transform:translateX(-140%) skewX(-18deg); } to { transform:translateX(240%) skewX(-18deg); } }
@keyframes site-spin { to { transform:rotate(360deg); } }
@keyframes site-bars { 0%,100% { transform:scaleY(1); } 50% { transform:scaleY(.55); } }
@keyframes site-badge { 0%,100% { box-shadow:0 0 0 0 rgba(255,61,166,.45); } 60% { box-shadow:0 0 0 10px rgba(255,61,166,0); } }

/* neon text helpers */
.txt-green { color:var(--neon-green); } .txt-pink { color:var(--neon-pink); } .txt-purple { color:var(--neon-purple); }

/* ambient light: three blurred neon orbs drifting very slowly behind the hero and the closing call to action */
.hero, .cta { position:relative; isolation:isolate; }
.hero__sky, .cta__sky { position:absolute; inset:-120px -40vw; z-index:-1; pointer-events:none; overflow:hidden; }
/* soft-edged gradients rather than filter:blur, so a cheap phone isn't re-blurring three big layers every frame */
.orb { position:absolute; width:900px; height:900px; border-radius:50%; opacity:.5; will-change:transform; }
.orb--purple { background:radial-gradient(circle, rgba(165,107,255,.55) 0%, rgba(165,107,255,.18) 30%, rgba(165,107,255,0) 62%); left:0; top:-30%; animation:site-drift-a 22s ease-in-out infinite; }
.orb--pink { background:radial-gradient(circle, rgba(255,61,166,.5) 0%, rgba(255,61,166,.14) 30%, rgba(255,61,166,0) 62%); right:-4%; top:-10%; width:760px; height:760px; animation:site-drift-b 26s ease-in-out infinite; }
.orb--green { background:radial-gradient(circle, rgba(57,255,136,.4) 0%, rgba(57,255,136,.1) 30%, rgba(57,255,136,0) 62%); left:40%; bottom:-55%; width:700px; height:700px; animation:site-drift-c 30s ease-in-out infinite; }
.cta__sky .orb { opacity:.35; }
/* a faint dot grid under the hero so the black has texture without being noise */
.hero::before { content:""; position:absolute; inset:0 -24px; z-index:-1; background-image:radial-gradient(rgba(243,243,245,.08) 1px, transparent 1.2px); background-size:26px 26px; -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 75%); pointer-events:none; }

/* hero entrance: everything with --n rises in order; the headline is word by word */
.hero__in { animation:site-rise .7s var(--ease) both; animation-delay:calc(var(--n,0) * 70ms); }
.hero__title .w { display:inline-block; animation:site-word .8s var(--ease) both; animation-delay:calc(60ms + var(--n,0) * 80ms); }
.hl { position:relative; white-space:nowrap; }
/* the underline is the logo: three solid bars, drawn in after the word lands */
.hl::after { content:""; position:absolute; left:.02em; right:.02em; bottom:-.02em; height:.11em; border-radius:2px; transform-origin:left; transform:scaleX(0); animation:site-underline .7s var(--ease) both; animation-delay:calc(500ms + var(--n,0) * 80ms); background:linear-gradient(90deg, var(--neon-purple) 0 33.3%, var(--neon-pink) 33.3% 66.6%, var(--neon-green) 66.6% 100%); }
.hl--wide::after { height:.13em; }
.cta .hl::after { --n:2; }

.eyebrow--live { display:inline-flex; align-items:center; gap:10px; color:var(--neon-purple); }
.live-dot { position:relative; width:8px; height:8px; border-radius:var(--radius-full); background:var(--neon-purple); flex:none; }
.live-dot::after { content:""; position:absolute; inset:0; border-radius:inherit; background:inherit; animation:site-ring 1.8s var(--ease) infinite; }

.hero__proof { list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13px; line-height:18px; color:var(--fg-1); }
.hero__proof li { display:inline-flex; align-items:center; gap:8px; }
.proof__dot { width:7px; height:7px; border-radius:var(--radius-full); flex:none; }
.proof__dot--green { background:var(--neon-green); box-shadow:0 0 8px rgba(57,255,136,.6); }
.proof__dot--pink { background:var(--neon-pink); box-shadow:0 0 8px rgba(255,61,166,.6); }
.proof__dot--purple { background:var(--neon-purple); box-shadow:0 0 8px rgba(165,107,255,.6); }

/* buttons: primary gets a light sweep on hover and a lift, secondary a visible edge */
.site .btn { position:relative; overflow:hidden; transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), filter var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.site .btn:hover { transform:translateY(-2px); }
.site .btn--primary:hover { box-shadow:0 10px 30px rgba(57,255,136,.28), 0 0 0 1px rgba(57,255,136,.35); }
.site .btn--secondary { box-shadow:inset 0 0 0 1px var(--bg-4); }
.site .btn--secondary:hover { background:var(--bg-4); }
.btn--shine::after { content:""; position:absolute; top:-20%; bottom:-20%; left:0; width:40%; background:rgba(255,255,255,.35); transform:translateX(-140%) skewX(-18deg); pointer-events:none; }
.btn--shine:hover::after { animation:site-shine .8s var(--ease); }

/* the phone: tilts in 3D toward the cursor's side, with two chips floating around it */
.hero__mock { perspective:1400px; }
.mock__stage { position:relative; width:min(380px,100%); }
.mock { transform:rotateY(-8deg) rotateX(3deg); transition:transform .6s var(--ease), box-shadow .6s var(--ease); box-shadow:0 40px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04), 0 0 80px rgba(165,107,255,.12); }
.mock__stage:hover .mock { transform:rotateY(0) rotateX(0); box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06), 0 0 100px rgba(165,107,255,.2); }
.mock__thread { position:relative; }
/* messages land one by one (site.js adds .is-in); without JS everything is simply visible */
.js .mock [data-beat] { opacity:0; transform:translateY(12px) scale(.98); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.js .mock [data-beat].is-in { opacity:1; transform:none; }
.mock__typing { position:absolute; left:12px; bottom:18px; flex-direction:row; gap:4px; padding:10px 14px; opacity:0; transform:translateY(8px); transition:opacity .3s var(--ease), transform .3s var(--ease); pointer-events:none; }
.mock__typing.is-in { opacity:1; transform:none; }
.mock__typing span, .neon-card__typing span { width:6px; height:6px; border-radius:var(--radius-full); background:var(--neon-purple); animation:site-dots 1.2s ease-in-out infinite; }
.mock__typing span:nth-child(2), .neon-card__typing span:nth-child(2) { animation-delay:.15s; }
.mock__typing span:nth-child(3), .neon-card__typing span:nth-child(3) { animation-delay:.3s; }
.float { position:absolute; z-index:2; display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius-md); background:rgba(26,26,32,.92); border:1px solid var(--bg-4); box-shadow:0 20px 50px rgba(0,0,0,.55); font-size:13px; line-height:18px; color:var(--fg-1); white-space:nowrap; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.float b { color:var(--fg-0); font-weight:600; }
.float__dot { width:9px; height:9px; border-radius:var(--radius-full); flex:none; }
.float--done { right:-36px; top:64px; animation:site-bob 6s ease-in-out infinite; }
.float--pink { left:-44px; bottom:96px; animation:site-bob-b 7s ease-in-out infinite; animation-delay:-2s; }

/* the pill ticker: the stream of system pills a chat collects, scrolling under the hero */
.ticker { position:relative; overflow:hidden; border-top:var(--hairline); border-bottom:var(--hairline); padding:14px 0; background:var(--bg-1); -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker__track { display:flex; gap:10px; width:max-content; animation:site-ticker 48s linear infinite; }
.ticker.is-paused .ticker__track { animation-play-state:paused; }
.ticker .system-pill { background:var(--bg-2); border:1px solid var(--bg-3); flex:none; align-self:auto; max-width:none; }

/* scroll reveal: site.js adds .is-in to a [data-reveal] section as it scrolls into view */
.rv, [data-stagger] > * { transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--i,0) * 80ms); }
.js [data-reveal]:not(.is-in) .rv, .js [data-reveal]:not(.is-in) [data-stagger] > * { opacity:0; transform:translateY(26px); }

/* the scroll progress line under the header: purple, because it is in motion */
.site__progress { position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--neon-purple); box-shadow:0 0 10px rgba(165,107,255,.7); transform-origin:left; transform:scaleX(0); }
.site__brand svg polygon, .cta__mark svg polygon { transform-box:fill-box; transform-origin:50% 100%; }
.site__brand svg polygon { transition:transform var(--dur-slow) var(--ease); }
.site__brand:hover svg polygon:nth-child(1) { transform:translateY(-2px); }
.site__brand:hover svg polygon:nth-child(2) { transform:translateY(-4px); }
.site__brand:hover svg polygon:nth-child(3) { transform:translateY(-6px); }

/* cards lift and light up on hover, each in its own colour */
.card { position:relative; transition:transform var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), background var(--dur-slow) var(--ease); --card-neon:var(--neon-purple); --card-tint:var(--tint-purple); --card-glow:rgba(165,107,255,.22); }
.card:hover { transform:translateY(-4px); border-color:var(--card-neon); box-shadow:0 18px 50px rgba(0,0,0,.5), 0 0 40px var(--card-glow); }
/* feature cards cycle purple, pink, green; the neon, step and plan cards name their colour explicitly */
.features > .card:nth-child(3n+1) { --card-neon:var(--neon-purple); --card-tint:var(--tint-purple); --card-glow:rgba(165,107,255,.22); }
.features > .card:nth-child(3n+2) { --card-neon:var(--neon-pink); --card-tint:var(--tint-pink); --card-glow:rgba(255,61,166,.2); }
.features > .card:nth-child(3n) { --card-neon:var(--neon-green); --card-tint:var(--tint-green); --card-glow:rgba(57,255,136,.2); }
.step--purple { --card-neon:var(--neon-purple); --card-tint:var(--tint-purple); --card-glow:rgba(165,107,255,.22); }
.step--pink { --card-neon:var(--neon-pink); --card-tint:var(--tint-pink); --card-glow:rgba(255,61,166,.2); }
.step--green { --card-neon:var(--neon-green); --card-tint:var(--tint-green); --card-glow:rgba(57,255,136,.2); }

/* the three neon cards: each is a small live demo of its colour */
.band--neon { background:radial-gradient(ellipse 60% 50% at 20% 0%, rgba(165,107,255,.1), transparent 60%), radial-gradient(ellipse 50% 50% at 80% 100%, rgba(255,61,166,.08), transparent 60%); border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.neon-card { overflow:hidden; }
.neon-card::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--card-neon); box-shadow:0 0 18px var(--card-neon); transform:scaleX(.25); transform-origin:left; transition:transform .6s var(--ease); }
.neon-card:hover::before { transform:scaleX(1); }
.neon-card h3 { color:var(--card-neon); }
.neon-card--green { --card-neon:var(--neon-green); --card-tint:var(--tint-green); --card-glow:rgba(57,255,136,.22); }
.neon-card--pink { --card-neon:var(--neon-pink); --card-tint:var(--tint-pink); --card-glow:rgba(255,61,166,.22); }
.neon-card--purple { --card-neon:var(--neon-purple); --card-tint:var(--tint-purple); --card-glow:rgba(165,107,255,.22); }
.neon-card__dot { position:relative; width:14px; height:14px; margin-bottom:18px; background:var(--card-neon); box-shadow:0 0 14px var(--card-neon); }
.neon-card__dot::after { content:""; position:absolute; inset:0; border-radius:inherit; background:inherit; animation:site-ring 2.4s var(--ease) infinite; }
.neon-card--pink .neon-card__dot::after { animation-duration:1.4s; }
.neon-card--green .neon-card__dot::after { animation:none; }
.neon-card__demo { display:flex; align-items:center; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--bg-2); }
.neon-card__demo .chip { background:var(--card-tint); }
.neon-card__ticks { color:var(--neon-green); font-size:14px; font-weight:700; letter-spacing:-.1em; }
.neon-card__typing { display:inline-flex; gap:4px; padding:0 4px; }

/* steps: numbers in colour, joined by a dotted line on wide screens */
.steps { position:relative; }
.steps::before { content:""; position:absolute; left:16.66%; right:16.66%; top:40px; border-top:2px dashed var(--bg-4); z-index:0; }
.step { z-index:1; }
.step__n { background:var(--card-tint); color:var(--card-neon); border:1px solid var(--card-neon); box-shadow:0 0 16px var(--card-glow); transition:transform var(--dur-slow) var(--ease); }
.step:hover .step__n { transform:scale(1.12) rotate(-6deg); }

/* the numbers band */
.band--stats { padding-top:40px; padding-bottom:40px; }
.stats { margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stat { display:flex; flex-direction:column-reverse; gap:4px; padding:22px 24px; border-radius:var(--radius-lg); background:var(--bg-1); border:var(--hairline); --stat-neon:var(--fg-0); --stat-glow:transparent; transition:transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease); }
.stat:hover { transform:translateY(-3px); box-shadow:0 0 40px var(--stat-glow); }
.stat--purple { --stat-neon:var(--neon-purple); --stat-glow:rgba(165,107,255,.25); }
.stat--pink { --stat-neon:var(--neon-pink); --stat-glow:rgba(255,61,166,.25); }
.stat--green { --stat-neon:var(--neon-green); --stat-glow:rgba(57,255,136,.25); }
.stat dd { margin:0; font-size:48px; line-height:52px; font-weight:700; letter-spacing:-.03em; color:var(--stat-neon); font-variant-numeric:tabular-nums; text-shadow:0 0 24px var(--stat-glow); }
.stat dd small { font-size:26px; font-weight:600; margin-right:2px; }
.stat dt { font-size:13px; line-height:18px; color:var(--fg-1); }

/* features: an icon per card, in the card's colour, spinning a quarter turn on hover */
.feature__icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:var(--card-tint); color:var(--card-neon); margin-bottom:16px; transition:transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease); }
.feature__icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.feature:hover .feature__icon { transform:rotate(-8deg) scale(1.1); box-shadow:0 0 20px var(--card-glow); }

/* made in south africa: the three bars again, bouncing like an equaliser */
.band--local { background:radial-gradient(ellipse 50% 60% at 0% 50%, rgba(57,255,136,.08), transparent 60%); }
.local__bars { display:flex; gap:8px; align-items:flex-end; height:56px; margin-top:12px; }
.local__bars span { width:14px; height:100%; border-radius:4px; transform:skewX(-14deg); transform-origin:bottom; animation:site-bars 1.6s ease-in-out infinite; }
.local__bars span:nth-child(1) { background:var(--neon-purple); }
.local__bars span:nth-child(2) { background:var(--neon-pink); animation-delay:.2s; }
.local__bars span:nth-child(3) { background:var(--neon-green); animation-delay:.4s; }
.ticks li::before { box-shadow:0 0 10px rgba(57,255,136,.6); }

/* pricing: each plan in its colour; Team wears a pulsing badge */
.plan--free { --card-neon:var(--neon-green); --card-tint:var(--tint-green); --card-glow:rgba(57,255,136,.2); }
.plan--team { --card-neon:var(--neon-pink); --card-tint:var(--tint-pink); --card-glow:rgba(255,61,166,.2); }
.plan--business { --card-neon:var(--neon-purple); --card-tint:var(--tint-purple); --card-glow:rgba(165,107,255,.2); }
.plan .plan__amount { color:var(--card-neon); text-shadow:0 0 30px var(--card-glow); }
.plan--popular { border-color:var(--neon-pink); box-shadow:0 0 0 1px rgba(255,61,166,.3), 0 0 60px rgba(255,61,166,.14); overflow:visible; }
.plan__badge { position:absolute; top:-14px; left:24px; padding:5px 12px; border-radius:var(--radius-full); background:var(--neon-pink); color:var(--bg-0); font-size:12px; line-height:18px; font-weight:700; letter-spacing:.02em; animation:site-badge 2.4s var(--ease) infinite; }

/* the faq rows */
.faq { transition:padding-left var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.faq:hover { padding-left:8px; border-bottom-color:var(--neon-purple); }
.faq h3 { transition:color var(--dur-base) var(--ease); }
.faq:hover h3 { color:var(--neon-purple); }

/* closing call to action: the logo breathes */
.cta__mark { display:inline-flex; padding:18px; border-radius:24px; background:var(--bg-1); border:var(--hairline); box-shadow:0 0 60px rgba(165,107,255,.25), 0 0 120px rgba(255,61,166,.12); margin-bottom:24px; }
.cta__mark svg polygon { animation:site-bars 2.2s ease-in-out infinite; }
.cta__mark svg polygon:nth-child(2) { animation-delay:.25s; }
.cta__mark svg polygon:nth-child(3) { animation-delay:.5s; }

@media (max-width: 960px) {
  .steps::before { display:none; }
  .stats { grid-template-columns:1fr 1fr; }
  .float--done { right:-8px; }
  .float--pink { left:-8px; }
}
@media (max-width: 640px) {
  .orb { width:520px; height:520px; }
  .float { display:none; }
  .mock { transform:none; }

  /* on a phone everything is centred; the mock keeps the app's own chat layout, the ticker keeps scrolling */
  .site__body { text-align:center; }
  .mock, .ticker { text-align:left; }
  .lead, .lead--narrow, .plans__note { margin-left:auto; margin-right:auto; }
  .hero__actions, .hero__proof, .eyebrow--live, .neon-card__demo, .plan__price, .local__bars, .site__foot-nav { justify-content:center; }
  .hero__mock { justify-content:center; }
  .neon-card__dot { margin-left:auto; margin-right:auto; }
  .ticks li { padding-left:0; }
  .ticks li::before { position:static; display:inline-block; margin-right:8px; vertical-align:middle; }
  .stat, .plan { align-items:center; }
  .plan__badge { left:50%; transform:translateX(-50%); }
  .site__foot { align-items:center; text-align:center; }
  .site__foot-brand { justify-content:center; }
  .site__foot-nav { flex-wrap:wrap; }
  .site-404 { align-items:center; }
}