@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/DMSerifDisplay-400.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Fraunces-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Inter-700.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Oswald-600.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/SpaceGrotesk-500.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/SpaceGrotesk-600.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/SpaceGrotesk-700.woff2) format('woff2')}

:root{
  --ink:#23262b; --ink-soft:#3a3f47; --paper:#ffffff; --surface:#f6f7f9; --surface2:#eef0f4;
  --line:rgba(35,38,43,.10); --cobalt:#2f6bff; --cobalt-ink:#1f4fd6; --cobalt-soft:rgba(47,107,255,.09);
  /* White on the brand cobalt measures 4.50:1 - it fails WCAG AA on the rounding
     boundary, which is what Lighthouse flagged on all three #contact buttons.
     Button FILLS use a slightly deeper blue so white label text clears 4.5 with
     room to spare; everything non-text keeps the real brand colour. */
  --cobalt-btn:#2a62f0;
  --muted:#6a7079; --shadow:0 20px 50px rgba(35,38,43,.10); --gold:#fbbc04;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3,.disp{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;line-height:1.08}
section{padding:96px 0;scroll-margin-top:94px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--cobalt-ink);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:12px;background:
  linear-gradient(var(--ink),var(--ink)) 0/3px 100% no-repeat,
  linear-gradient(var(--ink),var(--ink)) 6px 0/3px 70% no-repeat,
  linear-gradient(var(--cobalt),var(--cobalt)) 12px 30%/3px 100% no-repeat,
  linear-gradient(var(--ink),var(--ink)) 18px 0/3px 85% no-repeat,
  linear-gradient(var(--ink),var(--ink)) 24px 0/3px 55% no-repeat;background-repeat:no-repeat}
h2{font-size:clamp(30px,4.4vw,46px);font-weight:700}
.lead{color:var(--muted);font-size:18px;max-width:600px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--cobalt-btn);color:#fff;font-weight:600;font-size:15px;padding:14px 26px;border-radius:12px;border:none;cursor:pointer;transition:transform .18s, box-shadow .18s, background .18s}
.btn:hover{transform:translateY(-2px);background:var(--cobalt-ink);box-shadow:0 12px 28px rgba(47,107,255,.32)}
.btn:disabled{opacity:.75;cursor:default;transform:none;box-shadow:none}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);font-weight:600;padding:13px 24px;border-radius:12px;display:inline-flex;align-items:center;gap:8px;transition:.18s}
.btn-ghost:hover{border-color:var(--ink)}

/* nav */
nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:22px;height:84px}
.nav-in .logo{height:48px;width:auto}
@media(max-width:520px){.nav-in{height:74px}.nav-in .logo{height:40px}}
.nav-links{margin-left:auto;display:flex;gap:26px;font-weight:500;font-size:14.5px;color:var(--ink-soft)}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--cobalt);transition:.2s}
.nav-links a:hover::after{width:100%}
.nav-cta{padding:10px 20px;font-size:14px}
@media(max-width:860px){.nav-links{display:none}.nav-cta{margin-left:auto}}
.hamburger{display:none;width:38px;height:38px;padding:0;border:0;background:none;cursor:pointer;position:relative;flex-shrink:0}
.hamburger span{position:absolute;left:7px;right:7px;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .18s ease,top .22s ease}
.hamburger span:nth-child(1){top:13px}
.hamburger span:nth-child(2){top:18px}
.hamburger span:nth-child(3){top:23px}
.hamburger[aria-expanded="true"] span:nth-child(1){top:18px;transform:rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){top:18px;transform:rotate(-45deg)}
.mobilemenu{position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);display:flex;flex-direction:column;padding:0 24px;gap:0;
  max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .28s ease,opacity .2s ease,padding .28s ease}
.mobilemenu.open{max-height:420px;opacity:1;visibility:visible;padding:8px 24px 22px}
.mobilemenu a{padding:14px 2px;font-weight:600;font-size:16px;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.mobilemenu a.active{color:var(--cobalt-ink)}
.mobilemenu a.btn{border-bottom:0;margin-top:16px;justify-content:center;padding:13px 20px}
body.menu-open{overflow:hidden}
@media(max-width:860px){.hamburger{display:inline-flex;align-items:center;justify-content:center}.nav-cta{display:none}}
@media(min-width:861px){.mobilemenu{display:none}}


/* hero */
.hero{padding:88px 0 76px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(40px,6.1vw,70px);font-weight:700;line-height:1.02}
.hero h1 .blue{color:var(--cobalt)}
.hero .lead{margin:22px 0 32px;font-size:19px;max-width:540px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-sub{margin-top:26px;color:var(--muted);font-size:13.5px;display:flex;gap:20px;flex-wrap:wrap}
.hero-sub span{display:inline-flex;align-items:center;gap:7px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--cobalt)}
/* animated equalizer, the logo alive: soft centered glow that dissolves into the page */
.eq{display:flex;align-items:flex-end;justify-content:center;gap:14px;height:340px;padding:36px;background:
  radial-gradient(58% 56% at 50% 46%, rgba(47,107,255,.07), rgba(47,107,255,0) 72%)}
/* GLITCH FIX: animate HEIGHT, not transform:scaleY. Scaling a rounded bar distorts
   its caps and can leave a 1px dark seam on first paint. */
.eq i{width:26px;border-radius:20px;background:var(--ink);height:var(--h);
  animation:bar 1.9s ease-in-out infinite;backface-visibility:hidden}
.eq i:nth-child(1){--h:52%;animation-delay:-.2s}
.eq i:nth-child(2){--h:88%;animation-delay:-.9s}
.eq i:nth-child(3){--h:40%;background:var(--cobalt);animation-delay:-.5s}
.eq i:nth-child(4){--h:74%;animation-delay:-1.3s}
.eq i:nth-child(5){--h:60%;animation-delay:-.7s}
@keyframes bar{0%,100%{height:calc(var(--h) - 13%)}50%{height:var(--h)}}
@media(prefers-reduced-motion:reduce){.eq i{animation:none;height:var(--h)}}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.eq{height:220px;order:-1}}
/* On a tall desktop window the hero used to fill only about half the screen,
   because its padding and the equalizer are fixed pixel heights. A third of
   the next section then loaded above the fold. Below ~950px tall the original
   spacing already lands correctly, so this only kicks in on the big monitors
   where the problem exists: grow the hero with the window and centre it. */
@media(min-width:861px) and (min-height:950px){
  .hero{min-height:80vh;display:flex;align-items:center}
  .hero>.wrap{width:100%}
  .eq{height:clamp(340px,30vh,440px)}
}

/* stripe divider */
.stripes{display:flex;justify-content:center;gap:8px;padding:6px 0}
.stripes i{width:4px;height:26px;border-radius:4px;background:var(--ink);opacity:.22}
.stripes i:nth-child(3n){background:var(--cobalt);opacity:.5}

/* trust strip */
.trust{background:var(--ink);color:#fff}
.trust .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:26px 24px}
.trust b{font-family:'Space Grotesk';font-weight:600}
.trust .t{display:flex;align-items:center;gap:11px;font-size:15px}
.trust .ic{color:var(--cobalt);font-size:18px}

/* ===== the gap: before / after morph : the main event ===== */
.gap-head{text-align:center;max-width:740px;margin:0 auto}
.gap-head .lead{margin:16px auto 0}
.gap-row{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 28px}
.gcard b{font-family:'Space Grotesk';font-weight:600;font-size:17px;display:block;margin-bottom:6px}
.gcard b .k{color:var(--cobalt);margin-right:7px}
.gcard p{color:var(--muted);font-size:14.5px}
@media(max-width:820px){.gap-row{grid-template-columns:1fr}}

.bframe{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 70px rgba(35,38,43,.14);overflow:hidden;max-width:900px;margin:48px auto 0}
.bbar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.bbar .d{width:10px;height:10px;border-radius:50%;background:#d7dade}
.bbar .d:nth-child(1){background:#f47c6c}.bbar .d:nth-child(2){background:#f5c04e}.bbar .d:nth-child(3){background:#67c987}
.bbar .url{flex:1;max-width:300px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:11.5px;color:var(--muted);padding:4px 12px;text-align:center}
.bstage{position:relative;aspect-ratio:760/520;overflow:hidden}
/* scenes are laid out at a fixed 760x520 design size, then scaled to the frame
   width by JS, so the mockups never overflow or clip on small screens */
.bscene{position:absolute;top:0;left:0;width:760px;height:520px;padding:26px;transform-origin:top left;overflow:hidden}
/* --- act 1: the dated site (idle horrors: marquee, blink, under-construction) --- */
.ob{background:#d8d4c8;font-family:'Times New Roman',Georgia,serif;animation:mBefore 22s linear infinite}
.ob-head{background:linear-gradient(#3a3f8f,#23255c);color:#ffef9f;text-align:center;padding:8px;font-size:21px;font-weight:700;letter-spacing:.5px;text-shadow:1px 1px 0 #000;border:2px outset #8a8ecf}
.ob-nav{display:flex;gap:16px;justify-content:center;background:#b8b4a4;border:2px inset #979383;margin-top:7px;padding:6px;font-size:13px}
.ob-nav span{color:#1b1bb0;text-decoration:underline}
.ob-body{display:grid;grid-template-columns:1fr 170px;gap:12px;margin-top:10px}
.ob-main{background:#fffef2;border:2px inset #979383;padding:12px;font-size:13.5px;color:#333}
.ob-main .t{font-size:17px;font-weight:700;color:#8b0000;margin-bottom:6px}
.ob-new{display:inline-block;background:#e00;color:#ff0;font-size:10.5px;font-weight:700;font-family:Arial,sans-serif;padding:1px 6px;margin-left:8px;transform:rotate(-5deg);animation:obblink .9s steps(1) infinite}
@keyframes obblink{50%{opacity:.15}}
.ob-main .marq{overflow:hidden;white-space:nowrap;background:#ffff9c;border:1px dashed #b0a000;font-size:12px;margin-bottom:7px}
.ob-main .marq span{display:inline-block;padding-left:100%;animation:marq 9s linear infinite}
.ob-btn{display:inline-block;margin-top:9px;background:linear-gradient(#fdfdfd,#c9c9c9);border:2px outset #dcdcdc;padding:5px 14px;font-size:12.5px;font-weight:700;color:#222}
.ob-uc{margin-top:9px;text-align:center;font-family:Arial,sans-serif;font-size:10px;font-weight:700;color:#6b5900;letter-spacing:.08em}
.ob-uc i{display:block;height:15px;margin-top:3px;border:1px solid #6b5900;font-style:normal;
  background:repeating-linear-gradient(45deg,#f7c700 0 12px,#141414 12px 24px);background-size:200% 100%;animation:ucmove 1.1s linear infinite}
@keyframes ucmove{to{background-position:34px 0}}
.ob-side{background:#e4e0d0;border:2px outset #979383;padding:11px;font-size:11px;text-align:center;color:#444}
.ob-side .cnt{background:#000;color:#3f3;font-family:monospace;padding:2px 7px;margin-top:7px;display:inline-block;font-size:12px}
.ob-img{margin-top:9px;background:#fff;border:1px inset #979383;height:58px;display:grid;place-items:center;font-family:Arial,sans-serif;font-size:10px;color:#888}
.ob-img span{display:flex;align-items:center;gap:6px}
.ob-img b{width:15px;height:15px;background:#eee;border:1px solid #aaa;display:inline-grid;place-items:center;color:#c00;font-size:10px;font-weight:700}
.ob-svc{margin-top:10px;border:2px inset #979383;background:#eceadb}
.ob-svc .h{background:#3a3f8f;color:#ffef9f;font-size:12px;font-weight:700;text-align:center;padding:3px;letter-spacing:.06em}
.ob-svc .cells{display:grid;grid-template-columns:repeat(4,1fr)}
.ob-svc .cells div{border:1px outset #b5b1a0;background:#f4f2e4;font-size:11px;text-align:center;padding:5px 4px;color:#333}
.ob-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.ob-photos .ph{height:56px;border:2px inset #979383;background:linear-gradient(160deg,#9aa4a8,#6d787d 55%,#aab3b0);display:grid;place-items:center;font-family:Arial,sans-serif;font-size:9.5px;color:#e8e8e8;text-shadow:0 1px 0 #333;letter-spacing:.04em;filter:saturate(.6)}
.ob-photos .ph.bk{background:#fff;color:#888;text-shadow:none;filter:none}
.ob-photos .ph.bk span{display:flex;align-items:center;gap:5px}
.ob-photos .ph.bk b{width:14px;height:14px;background:#eee;border:1px solid #aaa;display:inline-grid;place-items:center;color:#c00;font-size:9px;font-weight:700}
.ob-foot{margin-top:10px;text-align:center;font-size:10.5px;color:#555}
.ob-foot a{color:#1b1bb0;text-decoration:underline}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
/* --- act 3: the zeebra version builds itself, then scrolls through a full site --- */
.nb{background:#fff;font-family:'Inter',sans-serif;animation:mAfter 22s linear infinite;position:relative}
.nb-page{animation:nbScroll 22s cubic-bezier(.45,0,.25,1) infinite}
.nb-nav{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;color:var(--ink-soft);
  opacity:0;animation:nbDrop 22s linear infinite}
.nb-nav .mark{display:flex;gap:2.5px;align-items:flex-end;height:15px}
.nb-nav .mark i{width:3.5px;border-radius:2px;background:var(--ink)}
.nb-nav .mark i:nth-child(1){height:60%}.nb-nav .mark i:nth-child(2){height:100%}
.nb-nav .mark i:nth-child(3){height:45%;background:var(--cobalt)}.nb-nav .mark i:nth-child(4){height:80%}
.nb-nav .sp{margin-left:auto;display:flex;gap:12px;color:var(--muted);font-weight:500}
.nb-nav .pill{background:var(--cobalt);color:#fff;border-radius:7px;padding:3px 10px;font-size:11px}
.nb-hero2{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center;margin-top:22px;
  opacity:0;animation:nbIn 22s linear infinite;animation-delay:.25s}
.nb-hero2 .hl{font-family:'Space Grotesk';font-weight:700;font-size:29px;line-height:1.1;letter-spacing:-.02em}
.nb-hero2 .hl b{color:var(--cobalt)}
.nb-hero2 .sub{height:8px;border-radius:5px;background:var(--surface2);margin-top:13px;width:84%}
.nb-photo{height:174px;border-radius:14px;background:linear-gradient(140deg,#3f5f8f,#7fa7d9 55%,#c8d9ef)}
.nb-stars{display:flex;align-items:center;gap:7px;margin-top:13px}
.nb-stars b{color:#e4e6ea;font-weight:400;font-size:21px;animation:nbStar 22s linear infinite}
.nb-stars b:nth-child(2){animation-delay:.16s}.nb-stars b:nth-child(3){animation-delay:.32s}
.nb-stars b:nth-child(4){animation-delay:.48s}.nb-stars b:nth-child(5){animation-delay:.64s}
.nb-chip{margin-left:9px;background:var(--cobalt-soft);color:var(--cobalt-ink);font-size:10.5px;font-weight:700;border-radius:999px;padding:4px 11px;
  opacity:0;animation:nbChip 22s linear infinite}
.nb-cta{display:inline-block;margin-top:16px;background:var(--cobalt);color:#fff;font-size:12px;font-weight:600;border-radius:9px;padding:8px 16px;
  opacity:0;animation:nbCta 22s linear infinite}
.nb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.nb-card{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:12px;opacity:0;animation:nbPop 22s linear infinite}
.nb-card:nth-child(2){animation-delay:.18s}.nb-card:nth-child(3){animation-delay:.36s}
.nb-card .ln{height:7px;border-radius:4px;background:var(--surface2);margin-top:7px}
.nb-card .ln.w1{width:80%}.nb-card .ln.w2{width:55%}
.nb-card .ic2{width:15px;height:15px;border-radius:4px;background:var(--cobalt)}
/* below the fold: revealed by the scroll, no build-in needed */
.nb-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.nb-gal i{height:104px;border-radius:12px}
.nb-gal i:nth-child(1){background:linear-gradient(150deg,#6b7f4f,#a9bf85)}
.nb-gal i:nth-child(2){background:linear-gradient(150deg,#8f6a3f,#d9b98a)}
.nb-gal i:nth-child(3){background:linear-gradient(150deg,#4f6b7f,#8fb3c9)}
.nb-gal i:nth-child(4){background:linear-gradient(150deg,#5f5470,#a99cc4)}
.nb-gal i:nth-child(5){background:linear-gradient(150deg,#7f4f5c,#c98fa3)}
.nb-gal i:nth-child(6){background:linear-gradient(150deg,#4f7f78,#8fc9bd)}
.nb-gal i:nth-child(7){background:linear-gradient(150deg,#8a7a3f,#d1c283)}
.nb-gal i:nth-child(8){background:linear-gradient(150deg,#54607a,#9aa8c9)}
.nb-revs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.nb-rev{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center}
.nb-rev .av2{width:26px;height:26px;border-radius:50%;flex-shrink:0}
.nb-rev .ln{flex:1;height:7px;border-radius:5px;background:var(--surface2)}
.nb-rev .st2{color:var(--gold);font-size:11px;letter-spacing:1px;white-space:nowrap}
.nb-band{margin-top:22px;border-radius:14px;background:linear-gradient(120deg,var(--cobalt),var(--cobalt-ink));color:#fff;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px}
.nb-band .bt{font-family:'Space Grotesk';font-weight:700;font-size:17px}
.nb-band .bb{background:#fff;color:var(--cobalt-ink);font-size:11.5px;font-weight:700;border-radius:8px;padding:7px 14px;white-space:nowrap}
.nb-foot{margin:22px -26px -26px;background:var(--ink);padding:18px 26px;display:flex;align-items:center;gap:12px}
.nb-foot .mark{display:flex;gap:2.5px;align-items:flex-end;height:14px}
.nb-foot .mark i{width:3.5px;border-radius:2px;background:#fff}
.nb-foot .mark i:nth-child(1){height:60%}.nb-foot .mark i:nth-child(2){height:100%}
.nb-foot .mark i:nth-child(3){height:45%;background:var(--cobalt)}.nb-foot .mark i:nth-child(4){height:80%}
.nb-foot .ln{height:7px;border-radius:5px;background:rgba(255,255,255,.25);width:120px}
.nb-foot .ln+.ln{width:70px;margin-left:auto}
.nb-speed{position:absolute;top:62px;right:26px;display:inline-flex;align-items:center;gap:6px;background:#eafaf0;color:#137a3d;border:1px solid rgba(19,122,61,.2);border-radius:999px;font-size:11px;font-weight:700;font-family:'Inter';padding:5px 11px;
  opacity:0;animation:nbFade 22s linear infinite;z-index:3}
.nb-speed i{width:7px;height:7px;border-radius:50%;background:#1fae57;font-style:normal}
/* build-ins: swap at ~20%, pieces land 26-46%, scroll tour 44-72%, reset by 0% */
@keyframes nbDrop{0%,26%{opacity:0;transform:translateY(-12px)}29%,100%{opacity:1;transform:none}}
@keyframes nbIn{0%,28%{opacity:0;transform:translateY(12px)}31%,100%{opacity:1;transform:none}}
@keyframes nbStar{0%,31%{color:#e4e6ea;text-shadow:none;transform:scale(1)}
  33%{color:var(--gold);text-shadow:0 0 20px rgba(251,188,4,.95);transform:scale(1.45)}
  35%{transform:scale(1)}80%{color:var(--gold);text-shadow:0 0 7px rgba(251,188,4,.4)}
  86%,100%{color:#e4e6ea;text-shadow:none;transform:scale(1)}}
@keyframes nbChip{0%,35%{opacity:0;transform:translateX(14px)}38%,100%{opacity:1;transform:none}}
@keyframes nbPop{0%,37%{opacity:0;transform:scale(.85) translateY(8px)}40%,100%{opacity:1;transform:none}}
@keyframes nbCta{0%,40%{opacity:0;transform:translateY(8px)}43%{opacity:1;transform:none;box-shadow:0 0 0 0 rgba(47,107,255,.5)}
  46%{box-shadow:0 0 0 12px rgba(47,107,255,0)}100%{opacity:1;transform:none;box-shadow:0 0 0 0 rgba(47,107,255,0)}}
@keyframes nbFade{0%,42%{opacity:0}45%,100%{opacity:1}}
/* the guided scroll: down to the middle, pause, down to the footer, hold */
@keyframes nbScroll{0%,44%{transform:translateY(0)}54%,60%{transform:translateY(-170px)}70%,100%{transform:translateY(-330px)}}
/* wipe bars + labels */
.wipe{position:absolute;inset:0;display:flex;pointer-events:none}
.wipe i{flex:1;background:var(--ink);transform:scaleX(0);animation:wipebar 22s ease-in-out infinite}
.wipe i:nth-child(4){background:var(--cobalt)}
.wipe i:nth-child(1){animation-delay:0s}.wipe i:nth-child(2){animation-delay:.06s}
.wipe i:nth-child(3){animation-delay:.12s}.wipe i:nth-child(4){animation-delay:.18s}
.wipe i:nth-child(5){animation-delay:.24s}.wipe i:nth-child(6){animation-delay:.3s}
.wipe i:nth-child(7){animation-delay:.36s}
.blab{position:absolute;left:14px;bottom:12px;z-index:5;font-family:'Space Grotesk';font-weight:600;font-size:12px;border-radius:999px;padding:5px 13px}
.blab.before{background:#fff;color:#8b2020;border:1px solid rgba(139,32,32,.25);box-shadow:0 4px 14px rgba(0,0,0,.12);animation:mBefore 22s linear infinite}
.blab.after{background:var(--cobalt);color:#fff;animation:mAfter 22s linear infinite}
/* master timeline (22s): 0-17% dated site | 17-22 bars cover, swap | 22-26 uncover
   | 26-46 the new site assembles | 44-72 guided scroll through the whole page
   | 72-80 hold at footer | 80-90 bars return | back to dated */
@keyframes wipebar{0%,17%{transform:scaleX(0)}20.5%,22.5%{transform:scaleX(1.02)}26.5%,79%{transform:scaleX(0)}82.5%,84.5%{transform:scaleX(1.02)}88.5%,100%{transform:scaleX(0)}}
@keyframes mBefore{0%,19%{opacity:1}21%,82%{opacity:0}84.5%,100%{opacity:1}}
@keyframes mAfter{0%,19%{opacity:0}21%,82%{opacity:1}84.5%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .wipe,.blab.before{display:none}
  .ob{animation:none;opacity:0}.nb{animation:none;opacity:1}
  .blab.after{animation:none;opacity:1}
  .ob-main .marq span,.ob-new,.ob-uc i{animation:none;padding-left:0}
  .nb-page,.nb-nav,.nb-hero2,.nb-card,.nb-cta,.nb-chip,.nb-speed{animation:none;opacity:1;transform:none}
  .nb-stars b{animation:none;color:var(--gold);text-shadow:none;transform:none}
}

/* ===== why it matters: the ceiling story, told in pictograms ===== */
.why{background:var(--surface)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
@media(max-width:860px){.why-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}
.wcard2{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:30px 28px 32px;text-align:center}
.wcard2 .pic{width:100%;max-width:168px;height:auto;margin:0 auto 20px;display:block}
.wcard2 .n2{font-family:'Space Grotesk';font-weight:600;color:var(--cobalt);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px}
.wcard2 h3{font-size:20px;font-weight:600;margin-bottom:9px}
.wcard2 p{color:var(--muted);font-size:15px}
/* pictogram parts: charcoal figures, red for what holds them down, cobalt for release */
.pic .fig{fill:var(--ink)}
.pic .lid{fill:#e5484d}
.pic .go{fill:var(--cobalt)}
.pic .crowd{fill:var(--ink);opacity:.26}
.pic .star{fill:var(--cobalt)}
.pic .wave{fill:none;stroke:var(--cobalt);stroke-width:4.5;stroke-linecap:round;opacity:.5}
/* the lid presses down, the figure strains */
.why-live .p-cap .lid{animation:lidPress 3.4s ease-in-out infinite}
.why-live .p-cap .fig{animation:figSquash 3.4s ease-in-out infinite;transform-origin:70px 120px}
@keyframes lidPress{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes figSquash{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.965)}}
/* the lid lifts away and the figure rises */
.why-live .p-free .lid{animation:lidLift 3.4s cubic-bezier(.3,0,.2,1) infinite}
.why-live .p-free .fig{animation:figRise 3.4s cubic-bezier(.3,0,.2,1) infinite}
.why-live .p-free .go{animation:goFade 3.4s ease-in-out infinite}
@keyframes lidLift{0%{transform:translateY(26px);opacity:.85}30%,100%{transform:translateY(0);opacity:.18}}
@keyframes figRise{0%{transform:translateY(9px)}34%,100%{transform:translateY(0)}}
@keyframes goFade{0%,20%{opacity:0}40%,88%{opacity:1}100%{opacity:0}}
/* the crowd arrives */
.why-live .p-reach .crowd{animation:crowdIn 3.8s ease-out infinite}
.why-live .p-reach .crowd.c2{animation-delay:.26s}.why-live .p-reach .crowd.c3{animation-delay:.52s}
.why-live .p-reach .crowd.c4{animation-delay:.78s}
.why-live .p-reach .wave{animation:waveOut 3.8s ease-out infinite}
.why-live .p-reach .wave.w2{animation-delay:.42s}
@keyframes crowdIn{0%{opacity:0;transform:translateY(10px)}22%,86%{opacity:.26;transform:none}100%{opacity:0;transform:translateY(10px)}}
@keyframes waveOut{0%{opacity:0;transform:scale(.55)}25%{opacity:.5}72%,100%{opacity:0;transform:scale(1.25)}}
.pic .wave{transform-origin:70px 55px}

/* the load race */
.race-wrap{max-width:820px;margin:52px auto 0}
.race{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.race{grid-template-columns:1fr}}
.rcol .rlab{display:flex;align-items:center;gap:8px;font-family:'Space Grotesk';font-weight:600;font-size:14px;margin-bottom:11px;color:var(--ink-soft)}
.rcol .rlab i{width:8px;height:8px;border-radius:50%;background:#c9ccd2;font-style:normal}
.rcol.win .rlab{color:var(--ink)}
.rcol.win .rlab i{background:#1fae57}
.rscreen{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:14px;height:196px;padding:14px;overflow:hidden;box-shadow:0 12px 30px rgba(35,38,43,.07)}
.rblk{display:block;border-radius:6px;background:var(--surface2);opacity:0}
.rblk.hero2{height:52px;margin-bottom:10px;background:linear-gradient(120deg,#c9d4e6,#e3e9f2)}
.rblk.l1{height:9px;width:78%;margin-bottom:8px}
.rblk.l2{height:9px;width:94%;margin-bottom:8px}
.rblk.l3{height:9px;width:56%;margin-bottom:12px}
.rblk.cta2{height:26px;width:104px;border-radius:7px;background:var(--cobalt);opacity:0}
.rspin{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:3px solid var(--surface2);border-top-color:#c9ccd2}
.rdone{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:6px;background:#eafaf0;color:#137a3d;border:1px solid rgba(19,122,61,.22);
  border-radius:999px;font-size:11px;font-weight:700;padding:4px 10px;opacity:0}
.race-live .slow .rblk{animation:blkIn .35s ease forwards}
.race-live .slow .hero2{animation-delay:1.5s}.race-live .slow .l1{animation-delay:2.5s}
.race-live .slow .l2{animation-delay:3.3s}.race-live .slow .l3{animation-delay:4.1s}
.race-live .slow .cta2{animation-delay:5.1s}
.race-live .slow .rspin{animation:spin .9s linear infinite,spinOut .3s ease 5.1s forwards}
.race-live .fast .rblk{animation:blkIn .3s ease forwards}
.race-live .fast .hero2{animation-delay:.2s}.race-live .fast .l1{animation-delay:.28s}
.race-live .fast .l2{animation-delay:.34s}.race-live .fast .l3{animation-delay:.4s}
.race-live .fast .cta2{animation-delay:.48s}
.race-live .fast .rdone{animation:blkIn .3s ease .75s forwards}
@keyframes blkIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinOut{to{opacity:0}}
.race-note{text-align:center;color:var(--muted);font-size:14.5px;margin-top:22px}
.race-note b{color:var(--ink);font-weight:600}
@media(prefers-reduced-motion:reduce){
  .why-live .p-cap .lid,.why-live .p-cap .fig,.why-live .p-free .lid,.why-live .p-free .fig,
  .why-live .p-free .go,.why-live .p-reach .crowd,.why-live .p-reach .wave{animation:none}
  .p-free .lid{opacity:.18}.p-reach .crowd{opacity:.26}
  .race-live .rblk,.race-live .rdone{animation:none;opacity:1}
  .rspin{display:none}
}

/* the mirror: type a name, every mockup wears it */
.bizfield{display:flex;align-items:center;gap:12px;justify-content:center;margin:34px auto 0;flex-wrap:wrap}
.bizfield label{font-family:'Space Grotesk';font-weight:600;font-size:15px;color:var(--ink-soft)}
.bizfield input{width:min(300px,80vw);padding:12px 18px;border:1.5px solid var(--line);border-radius:999px;font-family:inherit;font-size:15px;background:var(--paper);transition:.18s;text-align:center}
.bizfield input:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 4px var(--cobalt-soft)}

/* the promise band: risk reversal, said once, big */
.risk{background:linear-gradient(120deg,var(--cobalt),var(--cobalt-ink));color:#fff;padding:84px 0}
.risk .eyebrow{color:#cdddff}
.risk .eyebrow::before{background:
  linear-gradient(#fff,#fff) 0/3px 100% no-repeat,
  linear-gradient(#fff,#fff) 6px 0/3px 70% no-repeat,
  linear-gradient(#0c2f7a,#0c2f7a) 12px 30%/3px 100% no-repeat,
  linear-gradient(#fff,#fff) 18px 0/3px 85% no-repeat,
  linear-gradient(#fff,#fff) 24px 0/3px 55% no-repeat}
.risk h2{color:#fff;max-width:820px}
.risk .lead{color:#d9e4ff;max-width:640px;margin-top:18px}
.risk .btn-ghost{margin-top:30px;color:#fff;border-color:rgba(255,255,255,.45)}
.risk .btn-ghost:hover{border-color:#fff}

/* the closer: a destination for the scroll */
.closer2{background:var(--ink);color:#fff;padding:96px 0;text-align:center}
.closer2 h2{color:#fff;margin:30px auto 12px;max-width:720px}
.closer2 p{color:#9aa0a9;font-size:16px;margin-bottom:30px}
.ceq{display:flex;align-items:flex-end;justify-content:center;gap:10px;height:96px}
.ceq i{width:16px;border-radius:12px;background:#fff;height:0;transition:height .7s cubic-bezier(.2,.8,.2,1)}
.ceq i:nth-child(3){background:var(--cobalt)}
.closer2.go .ceq i{height:var(--h);animation:bar 1.9s ease-in-out 1s infinite}
.ceq i:nth-child(1){--h:52%;transition-delay:0s;animation-delay:-.2s!important}
.ceq i:nth-child(2){--h:88%;transition-delay:.1s;animation-delay:-.9s!important}
.ceq i:nth-child(3){--h:40%;transition-delay:.2s;animation-delay:-.5s!important}
.ceq i:nth-child(4){--h:74%;transition-delay:.3s;animation-delay:-1.3s!important}
.ceq i:nth-child(5){--h:60%;transition-delay:.4s;animation-delay:-.7s!important}
@media(prefers-reduced-motion:reduce){.ceq i{transition:none;height:var(--h)}.closer2.go .ceq i{animation:none}}

/* multi-step form: fields exist statically for Netlify, JS turns them into steps */
.fprog{display:none;gap:8px;margin-bottom:22px}
.steps-on .fprog{display:flex}
.fprog i{flex:1;height:3px;border-radius:3px;background:var(--surface2);transition:background .3s}
.fprog i.on{background:var(--cobalt)}
.fstep{border:none;padding:0;margin:0;min-width:0}
/* without JS the chip step and Next button are inert, so they stay hidden and the
   form renders as one plain stacked form that still submits fine */
.fstep.s1,#toStep3{display:none}
.steps-on #toStep3{display:inline-flex}
.steps-on .fstep{display:none}
.steps-on .fstep.active{display:block;animation:stepIn .35s ease}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.flabel{display:block;font-family:'Space Grotesk';font-weight:600;font-size:17px;margin-bottom:14px}
.fchips{display:none;flex-wrap:wrap;gap:10px}
.steps-on .fchips{display:flex}
.fchip{border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:11px 19px;font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:.18s}
.fchip:hover{border-color:var(--cobalt);color:var(--cobalt-ink)}
.fchip.on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.fnav{display:flex;align-items:center;gap:14px;margin-top:6px}
.fnav .btn{flex:1;margin-top:0}
.fback{display:none;background:none;border:none;color:var(--muted);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:10px 4px}
.fback:hover{color:var(--ink)}
.steps-on .fback{display:inline-block}
@media(prefers-reduced-motion:reduce){.steps-on .fstep.active{animation:none}}

/* services */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:32px;transition:.22s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.card .n{font-family:'Space Grotesk';font-weight:600;color:var(--cobalt);font-size:14px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.card .n::before{content:"";width:14px;height:14px;background:var(--cobalt);border-radius:4px}
.card h3{font-size:21px;font-weight:600;margin-bottom:9px}
.card p{color:var(--muted);font-size:15px}
@media(max-width:820px){.svc{grid-template-columns:1fr}}

/* difference */
.diff{background:var(--surface)}
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.diff ul{list-style:none;margin-top:24px;display:grid;gap:16px}
.diff li{display:flex;gap:14px;font-size:16px}
.diff li .k{color:var(--cobalt);font-weight:800;flex-shrink:0;margin-top:2px}
.diff li b{font-weight:600}
.diff-visual{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow)}
.own-lab{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;font-weight:600;margin-bottom:10px}
.own-row{display:flex;flex-wrap:wrap;gap:5px}
.own-row i{width:15px;height:22px;border-radius:3px;background:#d3d7de;font-style:normal}
.own-row.rent i{opacity:0}
.diff-visual.paid .own-row.rent i{animation:rentStack .45s ease forwards}
@media(prefers-reduced-motion:reduce){.own-row.rent i{opacity:1}}
.own-row i.one{width:56px;background:var(--cobalt);box-shadow:0 6px 16px rgba(47,107,255,.3)}
@keyframes rentStack{to{opacity:1}}
@media(max-width:820px){.diff-grid{grid-template-columns:1fr}}

/* ===== no two alike: the personality cycler ===== */
.pcy{max-width:680px;margin:44px auto 0}
.pstage{position:relative;height:330px;border-radius:22px;overflow:hidden;box-shadow:0 26px 60px rgba(35,38,43,.16);border:1px solid var(--line)}
.pskin{position:absolute;inset:0;padding:38px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;opacity:0;animation:pskin 13.5s ease infinite}
.pk-b{animation-delay:4.5s}.pk-c{animation-delay:9s}
@keyframes pskin{0%{opacity:0;transform:translateY(16px)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-10px)}}
.pskin .ptag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:5px 12px}
.pskin .ph1{font-size:34px;line-height:1.12}
.pskin .pln{height:9px;border-radius:6px;width:56%;opacity:.3}
.pskin .pstars{letter-spacing:3px;font-size:15px}
.pskin .pbtn{font-size:13px;font-weight:700;padding:10px 20px;margin-top:2px}
/* each skin gets its own composition, not just its own paint: the section's whole
   claim is that layouts differ, so the demo has to actually show that */
.pk-a{background:#fdf4e7;color:#47301d;font-family:'Fraunces',serif;
  align-items:center;text-align:center;justify-content:center}
.pk-a .ptag{background:rgba(194,87,27,.12);color:#a34715;font-family:'Inter'}
.pk-a .pln{background:#47301d}
.pk-a .pstars{color:#c2571b}
.pk-a .pbtn{background:#c2571b;color:#fff;border-radius:999px;font-family:'Inter'}
.pk-b{background:#20262e;color:#f2f4f6;font-family:'Oswald',sans-serif;text-transform:uppercase;
  justify-content:flex-end;gap:12px}
.pk-b .ph1{letter-spacing:.02em}
.pk-b .ptag{background:rgba(255,106,43,.16);color:#ff8a56;font-family:'Inter'}
.pk-b .pln{background:#f2f4f6}
.pk-b .pstars{color:#ff6a2b}
.pk-b .pbtn{background:#ff6a2b;color:#181b20;border-radius:6px;font-family:'Inter';text-transform:none}
.pk-c{background:#f5f3ef;color:#2c2a26;font-family:'DM Serif Display',serif;
  align-items:flex-end;text-align:right;justify-content:center;gap:18px}
.pk-c .ptag{background:rgba(185,138,47,.13);color:#8f6a22;font-family:'Inter'}
.pk-c .pln{background:#2c2a26}
.pk-c .pstars{color:#b98a2f}
.pk-c .pbtn{background:transparent;color:#2c2a26;border:1.5px solid #2c2a26;border-radius:0;letter-spacing:.14em;text-transform:uppercase;font-family:'Inter';font-size:11px}
.pdots{display:flex;justify-content:center;gap:10px;margin-top:20px}
.pd{font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 14px;animation:pdot 13.5s ease infinite}
.pd.d2{animation-delay:4.5s}.pd.d3{animation-delay:9s}
@keyframes pdot{0%,3%{background:transparent;color:var(--muted)}5%,30%{background:var(--ink);color:#fff;border-color:transparent}34%,100%{background:transparent;color:var(--muted)}}
.pcy-note{text-align:center;color:var(--muted);font-size:14px;margin-top:18px}
@media(max-width:640px){.pstage{height:300px}.pskin{padding:28px 26px}.pskin .ph1{font-size:27px}}
@media(prefers-reduced-motion:reduce){
  .pskin{animation:none}.pk-a{opacity:1}
  .pd{animation:none}.pd.d1{background:var(--ink);color:#fff;border-color:transparent}
}

/* reviews (dark) */
.rev{background:var(--ink);color:#fff}
.rev .lead{color:#9aa0a9}
.rev-note{color:#9aa0a9;font-size:13px;margin-top:16px;text-align:center}

/* signature widget: search -> thinking -> your reviews, illustrated */
.zfx{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 24px 60px rgba(0,0,0,.28);max-width:680px;margin:40px auto 0;color:var(--ink)}
.zbar{display:flex;align-items:center;gap:14px;border:1px solid #dfe1e5;border-radius:16px;padding:13px 18px;transition:box-shadow .3s,border-color .3s}
.zbar.on{box-shadow:0 2px 18px var(--cobalt-soft);border-color:transparent}
.zeq{display:flex;align-items:flex-end;gap:2.5px;height:22px;flex-shrink:0}
.zeq i{width:3.5px;border-radius:3px;background:var(--ink);height:40%}
.zeq i:nth-child(3){background:var(--cobalt)}
.zbar.thinking .zeq i{animation:zbar .9s ease-in-out infinite}
.zbar.thinking .zeq i:nth-child(1){animation-delay:-.1s}.zbar.thinking .zeq i:nth-child(2){animation-delay:-.5s}
.zbar.thinking .zeq i:nth-child(3){animation-delay:-.3s}.zbar.thinking .zeq i:nth-child(4){animation-delay:-.7s}
.zbar.thinking .zeq i:nth-child(5){animation-delay:-.2s}
@keyframes zbar{0%,100%{height:35%}50%{height:100%}}
.zq{flex:1;font-size:15.5px;white-space:nowrap;overflow:hidden;font-weight:500}
.zcur{display:inline-block;width:2px;height:18px;background:var(--cobalt);vertical-align:-3px;animation:zblink 1s steps(1) infinite}
@keyframes zblink{50%{opacity:0}}
.zsub{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:13px 4px 2px;height:16px;opacity:0;transition:opacity .4s}
.zsub.show{opacity:1}
.zsub .g{display:inline-flex;gap:5px}
.zsub .g b{width:6px;height:6px;border-radius:50%;background:var(--cobalt);animation:zpulse 1.2s ease-in-out infinite}
.zsub .g b:nth-child(2){animation-delay:.2s}.zsub .g b:nth-child(3){animation-delay:.4s}
@keyframes zpulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.zfeed{position:relative;height:0;overflow:hidden;margin-top:8px;opacity:0;transition:height .55s ease,opacity .55s ease;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.zfx.open .zfeed{height:440px;opacity:1}
.ztrack{will-change:transform}
.zcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:12px}
.zcard .zhead{display:flex;align-items:center;gap:12px}
.zcard .zav{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:
  radial-gradient(circle at 32% 30%, var(--c1), var(--c2))}
.zcard .znb{flex:1;min-width:0}
.zcard .zst{color:var(--gold);font-size:13px;letter-spacing:2px}
.zcard .zvf{margin-left:auto;display:flex;align-items:center;gap:5px;background:var(--cobalt-soft);color:var(--cobalt-ink);font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px;flex-shrink:0;white-space:nowrap}
.gl{height:9px;border-radius:6px;background:linear-gradient(90deg,#e7e9ee 25%,#dcdfe6 37%,#e7e9ee 63%);background-size:300% 100%;animation:shimmer 1.6s linear infinite}
.zcard .znb .gl{margin-bottom:6px}
.zcard .zlines{margin-top:12px;display:grid;gap:7px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.zeq i,.zsub .g b{animation:none!important}.gl{animation:none}}

/* ===== the review-animation lineup (all greeked, all looping) ===== */
.flair-head{text-align:center;margin-top:72px}
.flair-head h3{font-family:'Space Grotesk';font-size:clamp(21px,3vw,26px);color:#fff;font-weight:600;letter-spacing:-.01em}
.flair-head p{color:#9aa0a9;font-size:15px;margin-top:8px}
.flair-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
@media(max-width:940px){.flair-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.flair-grid{grid-template-columns:1fr}}
.fcard{background:#fff;border-radius:18px;overflow:hidden;color:var(--ink);box-shadow:0 18px 44px rgba(0,0,0,.3)}
.fstage{height:195px;padding:20px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.fcap{border-top:1px solid var(--line);padding:10px 16px;font-size:12.5px;color:var(--muted)}
.fcap b{color:var(--ink);font-weight:600;font-family:'Space Grotesk';margin-right:7px}
.fav{width:32px;height:32px;border-radius:50%;flex-shrink:0;background:radial-gradient(circle at 32% 30%,var(--c1),var(--c2))}
.fst{color:var(--gold);letter-spacing:2px;font-size:12.5px}
/* 1 : stars light like bulbs */
.fw1 .row{display:flex;gap:11px;font-size:36px}
.fw1 .row b{color:#e4e6ea;font-weight:400;animation:bulb 5.5s ease-in-out infinite}
.fw1 .row b:nth-child(2){animation-delay:.22s}.fw1 .row b:nth-child(3){animation-delay:.44s}
.fw1 .row b:nth-child(4){animation-delay:.66s}.fw1 .row b:nth-child(5){animation-delay:.88s}
@keyframes bulb{0%,10%{color:#e4e6ea;text-shadow:none}20%{color:var(--gold);text-shadow:0 0 24px rgba(251,188,4,1),0 0 6px rgba(251,188,4,.8)}
  72%{color:var(--gold);text-shadow:0 0 9px rgba(251,188,4,.5)}88%,100%{color:#e4e6ea;text-shadow:none}}
.fw1 .gl{width:130px}
/* 2 : skeleton resolves live */
.fw2{width:100%}
.fw2 .rr{position:relative;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;height:118px;overflow:hidden}
.fw2 .lay{position:absolute;inset:0;padding:15px;display:flex;gap:12px;align-items:flex-start}
.fw2 .skl{animation:fw2sk 7s linear infinite}
.fw2 .skc{width:32px;height:32px;border-radius:50%;background:#e4e7eb;flex-shrink:0}
.fw2 .lns{flex:1;display:grid;gap:8px;align-content:start}
.fw2 .lns span{display:block;height:9px;border-radius:6px;background:#e4e7eb}
.fw2 .lns .a{width:38%}.fw2 .lns .b{width:92%}.fw2 .lns .c{width:64%}
.fw2 .rl{opacity:0;animation:fw2rl 7s linear infinite}
.fw2 .rl .lns span{background:linear-gradient(90deg,#e7e9ee 25%,#dcdfe6 37%,#e7e9ee 63%);background-size:300% 100%}
.fw2 .stamp{position:absolute;top:13px;right:13px;background:var(--cobalt-soft);color:var(--cobalt-ink);font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:999px;opacity:0;transform:scale(1.6) rotate(-8deg);animation:fw2st 7s cubic-bezier(.2,1.5,.4,1) infinite}
@keyframes fw2sk{0%,38%{opacity:1}44%,88%{opacity:0}94%,100%{opacity:1}}
@keyframes fw2rl{0%,38%{opacity:0}44%,88%{opacity:1}94%,100%{opacity:0}}
@keyframes fw2st{0%,46%{opacity:0;transform:scale(1.6) rotate(-8deg)}52%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:scale(1.6) rotate(-8deg)}}
/* 3 : dealt in like cards */
.fw3{display:grid;gap:10px;width:100%}
.fw3 .c{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 13px;display:flex;gap:11px;align-items:center;opacity:0;animation:fw3deal 6.5s cubic-bezier(.2,1.1,.3,1) infinite}
.fw3 .c:nth-child(2){animation-delay:.28s}.fw3 .c:nth-child(3){animation-delay:.56s}
.fw3 .gl{flex:1;max-width:46%}
@keyframes fw3deal{0%,8%{opacity:0;transform:translate(-52px,-30px) rotate(-9deg)}17%,84%{opacity:1;transform:none}92%,100%{opacity:0;transform:translate(26px,12px) rotate(4deg)}}
/* 4 : one at a time */
.fw4{position:relative;width:100%;height:100%}
.fw4 .q{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;opacity:0;animation:fw4cyc 9s ease infinite}
.fw4 .q:nth-child(2){animation-delay:3s}.fw4 .q:nth-child(3){animation-delay:6s}
.fw4 .st{font-size:20px;letter-spacing:4px}
.fw4 .gl{width:72%}.fw4 .gl+.gl{width:52%}
.fw4 .dots{position:absolute;bottom:2px;left:0;right:0;display:flex;gap:6px;justify-content:center}
.fw4 .dots i{width:6px;height:6px;border-radius:50%;background:#dfe1e5}
@keyframes fw4cyc{0%,3%{opacity:0;transform:translateY(10px)}8%,27%{opacity:1;transform:none}33%,100%{opacity:0;transform:translateY(-10px)}}
/* 5 : they stack up */
.fw5w{display:flex;flex-direction:column;align-items:center;gap:12px}
.fw5{display:grid;grid-template-columns:repeat(8,22px);gap:6px}
.fw5 i{width:22px;height:22px;border-radius:6px;background:var(--gold);display:grid;place-items:center;font-style:normal;font-size:10px;color:#fff;opacity:0;transform:scale(.3);animation:fw5t 8s cubic-bezier(.2,1.4,.4,1) infinite}
@keyframes fw5t{0%,4%{opacity:0;transform:scale(.3)}9%,88%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.3)}}
.fw5cap{font-size:12px;color:var(--muted);font-weight:600}
/* 6 : pin drop */
.fw6{position:relative;width:100%;height:100%;border-radius:12px;background:linear-gradient(135deg,#e8f0fe,#f1f3f5);overflow:hidden;border:1px solid var(--line)}
.fw6::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.045) 0 1px,transparent 1px 24px),
  repeating-linear-gradient(90deg,rgba(0,0,0,.045) 0 1px,transparent 1px 24px)}
.fw6 .pin{position:absolute;left:50%;top:34%;width:22px;height:22px;margin-left:-11px;background:var(--cobalt);border-radius:50% 50% 50% 0;transform:rotate(-45deg) scale(0);transform-origin:bottom;box-shadow:0 4px 10px rgba(47,107,255,.5);animation:fw6p 6s cubic-bezier(.2,1.5,.4,1) infinite}
.fw6 .ring{position:absolute;left:50%;top:40%;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid var(--cobalt);border-radius:50%;opacity:0;animation:fw6r 6s ease-out infinite}
.fw6 .card{position:absolute;left:12px;right:12px;bottom:12px;background:#fff;border-radius:11px;padding:10px 12px;display:flex;gap:10px;align-items:center;box-shadow:0 8px 18px rgba(0,0,0,.14);opacity:0;animation:fw6c 6s ease infinite}
.fw6 .card .gl{flex:1;max-width:44%}
@keyframes fw6p{0%,8%{transform:rotate(-45deg) scale(0)}16%,88%{transform:rotate(-45deg) scale(1)}94%,100%{transform:rotate(-45deg) scale(0)}}
@keyframes fw6r{0%,14%{opacity:0;transform:scale(.4)}20%{opacity:.7}42%,100%{opacity:0;transform:scale(3.2)}}
@keyframes fw6c{0%,22%{opacity:0;transform:translateY(12px)}30%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(12px)}}
@media(prefers-reduced-motion:reduce){
  .fw1 .row b{animation:none;color:var(--gold);text-shadow:none}
  .fw2 .skl{animation:none;opacity:0}.fw2 .rl{animation:none;opacity:1}
  .fw2 .stamp{animation:none;opacity:1;transform:none}
  .fw3 .c,.fw5 i,.fw6 .card{animation:none;opacity:1;transform:none}
  .fw6 .pin{animation:none;transform:rotate(-45deg) scale(1)}
  .fw6 .ring{animation:none;opacity:0}
  .fw4 .q{animation:none}.fw4 .q:first-child{opacity:1}
}

/* ===== a real section, lifted from a build and de-identified ===== */
.demo-wrap{max-width:900px;margin:34px auto 0}
.demo-frame{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.demo-stage{position:relative;overflow-x:auto;overflow-y:hidden;line-height:0;-webkit-overflow-scrolling:touch}
.demo-track{position:relative}
/* laid out at a fixed 1180px design width, then scaled by JS. On wide screens it
   fits exactly; on phones it holds a legible minimum scale and scrolls sideways
   inside the frame, so the 3-across grid never becomes unreadable mush */
.demo-scene{position:absolute;top:0;left:0;width:1180px;transform-origin:top left}
.demo-note{text-align:center;color:#9aa0a9;font-size:13px;margin-top:16px}
.demo-swipe{display:none;text-align:center;color:#7d838c;font-size:12px;margin-top:14px}
.demo-wrap.scrollable .demo-swipe{display:block}
.demo-wrap.scrollable .demo-note{margin-top:8px}
/* the build's own palette, reproduced: near-black wall, steel cards, amber tags */
.sunwall{background:#05090d;padding:40px 38px 44px;font-family:'IBM Plex Sans',Inter,system-ui,sans-serif;line-height:1.55}
.sunwall .eb{display:block;font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#f18b0a;margin-bottom:10px}
.sunwall .wh{font-family:'Zilla Slab',Georgia,serif;font-weight:700;color:#eef3f8;font-size:31px;line-height:1.15;margin-bottom:22px;letter-spacing:0}
.sunwall .wh em{font-style:normal;color:#9cc9f2}
.sunwall .term{border:1px solid #1b2733;background:#080f16;border-radius:3px;padding:15px 17px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:#6f8598;margin-bottom:24px}
.sunwall .term div{margin-bottom:3px}
.sunwall .term .score{display:flex;align-items:baseline;gap:11px;margin:11px 0 0}
.sunwall .term .score .st{color:#fbbc04;font-size:14px;letter-spacing:2px}
.sunwall .term .score .num{font-family:'Zilla Slab',Georgia,serif;font-size:25px;color:#eef3f8;font-weight:700;line-height:1}
.sunwall .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sunwall .rc{background:#0d141c;border:1px solid #1b2733;border-radius:3px;padding:22px;opacity:.28}
.sunwall.lit .rc{animation:sunbulb 9s ease-in-out infinite}
.sunwall.lit .rc:nth-child(1){animation-delay:0s}.sunwall.lit .rc:nth-child(2){animation-delay:1.1s}
.sunwall.lit .rc:nth-child(3){animation-delay:.4s}.sunwall.lit .rc:nth-child(4){animation-delay:1.8s}
.sunwall.lit .rc:nth-child(5){animation-delay:.75s}.sunwall.lit .rc:nth-child(6){animation-delay:1.45s}
@keyframes sunbulb{0%{opacity:.28}4%{opacity:1}6%{opacity:.45}9%{opacity:1}12%{opacity:.6}15%,88%{opacity:1}92%{opacity:.5}100%{opacity:.28}}
.sunwall .rc .st{display:block;color:#fbbc04;font-size:13px;letter-spacing:1px;margin-bottom:7px}
.sunwall .rc .nr{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.sunwall .rc .mono{width:34px;height:34px;border-radius:50%;background:#4085d1;color:#06121f;font-weight:700;font-family:'Zilla Slab',Georgia,serif;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sunwall .rc .nm{font-weight:600;color:#eef3f8;font-size:14.5px}
.sunwall .rc .tg{display:inline-block;background:#f18b0a;color:#211200;font-size:11px;font-weight:700;padding:2px 8px;border-radius:2px;margin-top:3px}
.sunwall .rc .q{color:#a8bacb;font-size:13.5px;font-family:ui-monospace,Menlo,Consolas,monospace}
@media(prefers-reduced-motion:reduce){.sunwall .rc{opacity:1}.sunwall.lit .rc{animation:none}}
/* On phones the scale-and-scroll approach fell apart: it clipped the heading and
   forced sideways scrolling. Below 760px the scene stops being a scaled miniature
   and renders natively instead, 2x2 with four bulbs and real, readable text. */
@media(max-width:760px){
  .demo-stage{overflow:hidden}
  .demo-track{width:auto!important;height:auto!important}
  .demo-scene{position:static;width:100%;transform:none!important}
  .demo-swipe{display:none!important}
  .sunwall{padding:26px 18px 30px}
  .sunwall .eb{font-size:11px;margin-bottom:8px}
  .sunwall .wh{font-size:22px;margin-bottom:16px}
  .sunwall .term{font-size:10.5px;padding:12px 13px;margin-bottom:18px}
  .sunwall .term .score{gap:8px;margin-top:9px}
  .sunwall .term .score .num{font-size:20px}
  .sunwall .term .score .st{font-size:12px}
  .sunwall .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .sunwall .rc{padding:14px 13px}
  .sunwall .rc:nth-child(5),.sunwall .rc:nth-child(6){display:none}
  .sunwall .rc .st{font-size:11px;margin-bottom:5px}
  .sunwall .rc .nr{gap:7px;margin-bottom:7px}
  .sunwall .rc .mono{width:24px;height:24px;font-size:12px}
  .sunwall .rc .nm{font-size:11.5px;white-space:nowrap}
  .sunwall .rc .tg{font-size:9.5px;padding:2px 6px}
  .sunwall .rc .q{font-size:11.5px;line-height:1.45}
}

/* shared caption under each demo */
.demo-cap{text-align:center;font-size:14px;color:#9aa0a9;margin-top:16px}
.demo-cap b{font-family:'Space Grotesk';font-weight:600;color:#fff;margin-right:8px}

/* --- demo 2: before / after drag slider --- */
.ba{position:relative;container-type:inline-size;line-height:0;background:#0d141c;touch-action:pan-y}
.ba img{width:100%;height:auto;display:block}
.ba-clip{position:absolute;inset:0;width:50%;overflow:hidden}
.ba-clip img{width:100cqw;max-width:none;height:100%;object-fit:cover;position:absolute;left:0;top:0}
.ba.auto.live .ba-clip{animation:baW 9s ease-in-out infinite}
.ba.auto.live .ba-handle{animation:baL 9s ease-in-out infinite}
@keyframes baW{0%,100%{width:50%}22%{width:84%}62%{width:18%}}
@keyframes baL{0%,100%{left:50%}22%{left:84%}62%{left:18%}}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;margin-left:-1.5px;box-shadow:0 0 14px rgba(0,0,0,.55);pointer-events:none}
.ba-handle span{position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.45);display:grid;place-items:center;color:#10202f;font-size:14px;font-weight:700;line-height:1}
.ba-chip{position:absolute;top:14px;z-index:3;font-family:'Space Grotesk';font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;line-height:1}
.ba-chip.cb{left:14px;background:rgba(13,20,28,.82);color:#fff}
.ba-chip.ca{right:14px;background:#f18b0a;color:#211200}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:4}

/* --- demos 3 + 4 share the example-build palette --- */
.demo-pair{display:grid;grid-template-columns:296px 1fr;gap:22px;max-width:900px;margin:34px auto 0;align-items:start}
@media(max-width:760px){.demo-pair{grid-template-columns:1fr;max-width:420px}}
.dcell{min-width:0}

/* demo 3: tap to call */
.pframe{width:100%;max-width:262px;margin:0 auto;border:8px solid #1c1f24;border-radius:30px;background:#1c1f24;box-shadow:0 26px 54px rgba(0,0,0,.42);overflow:hidden}
.pscreen{position:relative;background:#101b26;height:404px;overflow:hidden;font-family:'Inter',sans-serif}
.ptop{display:flex;align-items:center;gap:8px;padding:13px 14px;border-bottom:1px solid #1b2733}
.plogo{width:20px;height:20px;border-radius:5px;background:#f18b0a;flex-shrink:0}
.phero{height:104px;background:linear-gradient(140deg,#24435f,#4f7ba6 60%,#93b7d4)}
.pbody{padding:14px}
/* scoped to .pscreen: an unscoped .pln would leak into the personality cycler */
.pscreen .pln{display:block;height:8px;border-radius:5px;background:#24313e;margin-bottom:9px}
.pscreen .pln.w1{width:74px;background:#31414f}.pscreen .pln.w2{width:100%}.pscreen .pln.w3{width:66%}
.pcard{margin:4px 14px 0;background:#0d141c;border:1px solid #1b2733;border-radius:8px;padding:11px}
.pbar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;padding:10px;background:#0b131b;border-top:1px solid #1b2733}
.pb{flex:1;text-align:center;font-size:12.5px;font-weight:700;padding:10px 0;border-radius:8px;line-height:1}
.pb.txt{background:#1b2733;color:#a8bacb;flex:0 0 34%}
.pb.call{background:#f18b0a;color:#211200;position:relative}
.live .pb.call{animation:pbPress 8s ease-in-out infinite}
@keyframes pbPress{0%,36%{transform:scale(1);filter:brightness(1)}41%{transform:scale(.94);filter:brightness(1.25)}47%,100%{transform:scale(1);filter:brightness(1)}}
.pring{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid rgba(255,255,255,.85);opacity:0;pointer-events:none}
.live .pring{animation:pbRing 8s ease-out infinite}
@keyframes pbRing{0%,38%{opacity:0;transform:scale(.4)}42%{opacity:.9}58%,100%{opacity:0;transform:scale(3.4)}}
.thumb{position:absolute;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.5),rgba(255,255,255,.16));
  border:1px solid rgba(255,255,255,.32);left:55px;bottom:-70px;pointer-events:none}
.live .thumb{animation:thumbTap 8s ease-in-out infinite}
@keyframes thumbTap{0%{transform:translateY(0)}22%,36%{transform:translateY(-72px)}42%{transform:translateY(-64px)}
  58%{transform:translateY(-72px)}76%,100%{transform:translateY(0)}}
.ptoast{position:absolute;left:14px;right:14px;bottom:62px;background:#eef3f8;color:#10202f;border-radius:9px;padding:10px 13px;
  font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(10px);box-shadow:0 10px 26px rgba(0,0,0,.4)}
.ptoast i{width:8px;height:8px;border-radius:50%;background:#1fae57;font-style:normal;flex-shrink:0}
.live .ptoast{animation:toastIn 8s ease-in-out infinite}
@keyframes toastIn{0%,44%{opacity:0;transform:translateY(10px)}50%,72%{opacity:1;transform:none}80%,100%{opacity:0;transform:translateY(10px)}}

/* demo 4: instant estimate flow */
.eframe{background:#101b26;border:1px solid #1b2733;border-radius:16px;overflow:hidden;font-family:'Inter',sans-serif;box-shadow:0 22px 50px rgba(0,0,0,.36)}
.ehead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid #1b2733}
.ehead .et{font-family:'Space Grotesk';font-weight:600;color:#eef3f8;font-size:15px}
.ehead .eg{width:9px;height:9px;border-radius:50%;background:#f18b0a}
.ebar{height:3px;background:#1b2733}
.ebar i{display:block;height:100%;width:33%;background:#f18b0a}
.live .ebar i{animation:eBar 13s ease-in-out infinite}
@keyframes eBar{0%,20%{width:33%}27%,46%{width:66%}53%,72%{width:100%}79%,100%{width:100%}}
.epanes{position:relative;height:312px}
/* centred so short steps and tall steps both sit balanced in the fixed-height frame */
.epane{position:absolute;inset:0;padding:24px 22px;opacity:0;display:flex;flex-direction:column;justify-content:center}
.live .epane{animation:ePane 13s ease-in-out infinite}
.live .epane.p2{animation-delay:3.25s}.live .epane.p3{animation-delay:6.5s}.live .epane.p4{animation-delay:9.75s}
@keyframes ePane{0%{opacity:0;transform:translateY(10px)}3%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-8px)}}
/* NOTE: do not name this .eq, that class is the hero equalizer (340px tall flex box) */
.equest{font-size:16px;color:#eef3f8;font-weight:600;margin-bottom:16px;line-height:1.35}
.echips{display:flex;flex-wrap:wrap;gap:10px}
.echip{border:1px solid #24313e;color:#a8bacb;border-radius:999px;padding:10px 17px;font-size:13.5px;font-weight:600}
.echip.on{background:#f18b0a;border-color:#f18b0a;color:#211200}
.efield{background:#0b131b;border:1px solid #24313e;border-radius:9px;padding:14px 15px;font-size:14px;color:#a8bacb;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.efield.filled{color:#eef3f8;border-color:#31414f}
.ecaret{display:inline-block;width:1.5px;height:14px;background:#f18b0a;vertical-align:-2px}
.live .ecaret{animation:eBlink 1s steps(1) infinite}
@keyframes eBlink{50%{opacity:0}}
.esend{margin-top:8px;background:#f18b0a;color:#211200;font-size:14px;font-weight:700;border-radius:9px;padding:13px 0;text-align:center}
.edone{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;text-align:center}
.edone .tick{width:52px;height:52px;border-radius:50%;background:rgba(31,174,87,.14);border:2px solid #1fae57;color:#1fae57;display:grid;place-items:center;font-size:24px;line-height:1}
.edone b{font-family:'Space Grotesk';font-weight:600;color:#eef3f8;font-size:16px}
.edone span{color:#a8bacb;font-size:13px}

@media(prefers-reduced-motion:reduce){
  .ba.auto.live .ba-clip,.ba.auto.live .ba-handle,.live .pb.call,.live .pring,.live .thumb,
  .live .ptoast,.live .ebar i,.live .epane,.live .ecaret{animation:none}
  .live .epane{opacity:0}.live .epane.p1{opacity:1}
}

/* work: one featured build, desktop with the phone alongside */
.feature{position:relative;margin:44px 0 0;padding-bottom:38px}
.fshot{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px rgba(35,38,43,.2);line-height:0}
.fshot img{width:100%;height:auto}
.fphone{position:absolute;right:38px;bottom:0;width:172px;border:7px solid #1c1f24;border-radius:24px;overflow:hidden;
  box-shadow:0 26px 54px rgba(0,0,0,.34);background:#1c1f24;line-height:0}
.fphone img{width:100%;height:auto}
.fmeta{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:26px}
.fmeta b{font-family:'Space Grotesk';font-weight:600;font-size:19px}
.fmeta span{color:var(--muted);font-size:14.5px}
.fmeta a{margin-left:auto;color:var(--cobalt-ink);font-weight:600;font-size:14px;border-bottom:1.5px solid var(--cobalt-soft);transition:.18s}
.fmeta a:hover{border-bottom-color:var(--cobalt)}
@media(max-width:820px){.fphone{right:16px;width:112px;border-width:5px;border-radius:17px}.feature{padding-bottom:24px}}
@media(max-width:520px){.fphone{width:88px;border-width:4px;border-radius:14px}.fmeta a{margin-left:0;flex-basis:100%}}

/* the deal */
.deal{background:var(--surface)}
.deal-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;margin-top:44px;align-items:stretch}
.price-card{background:var(--ink);color:#fff;border-radius:22px;padding:40px 36px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.price-card::after{content:"";position:absolute;right:-30px;top:-40px;width:190px;height:190px;background:
  radial-gradient(closest-side, rgba(47,107,255,.28), rgba(47,107,255,0))}
.price-card .num{font-family:'Space Grotesk';font-weight:700;font-size:clamp(56px,7vw,76px);letter-spacing:-.03em;line-height:1}
.price-card .num small{font-size:22px;font-weight:600;color:#9ab4ff;vertical-align:super}
.price-card .once{color:#b7bcc4;font-size:16px;margin-top:10px}
/* launch offer: list price struck through, then the cut. Plays once on scroll in. */
.promo-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(229,72,77,.14);border:1px solid rgba(229,72,77,.4);color:#ff9ea1;
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:6px 13px;margin-bottom:20px;position:relative;z-index:2}
.promo-badge i{width:7px;height:7px;border-radius:50%;background:#e5484d;font-style:normal}
.pricecut{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;position:relative;z-index:2}
.was{position:relative;font-family:'Space Grotesk';font-weight:700;font-size:38px;letter-spacing:-.02em;color:#7e858f;line-height:1;transform-origin:left bottom}
.was::after{content:"";position:absolute;left:-6%;right:-6%;top:50%;height:5px;margin-top:-2px;border-radius:4px;background:#e5484d;
  box-shadow:0 0 14px rgba(229,72,77,.65);transform:scaleX(0);transform-origin:left}
.price-card.cut .was{animation:wasShrink 2.6s cubic-bezier(.4,0,.2,1) forwards}
.price-card.cut .was::after{animation:slashIn .42s cubic-bezier(.3,0,.2,1) .95s forwards}
/* `both` holds the hidden first frame through the delay, so the price stays
   visible if the observer never runs. Never hide the price behind JS. */
.price-card.cut .num{animation:cutIn .55s cubic-bezier(.2,1.35,.4,1) 1.55s both}
@keyframes wasShrink{0%,52%{transform:scale(1.95) translateY(9px)}70%,100%{transform:none}}
@keyframes slashIn{to{transform:scaleX(1)}}
@keyframes cutIn{0%{opacity:0;transform:translateY(16px) scale(.86)}100%{opacity:1;transform:none}}
.promo-why{color:#9aa0a9;font-size:13.5px;margin-top:12px;position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){
  .price-card.cut .was,.price-card.cut .num{animation:none}
  .was::after{transform:scaleX(1)}
}
.price-row{display:flex;gap:0;margin-top:auto;padding-top:34px}
.price-row div{flex:1}
.price-row div+div{border-left:1px solid rgba(255,255,255,.14);padding-left:18px;margin-left:18px}
.price-row b{font-family:'Space Grotesk';font-size:19px;display:block}
.price-row span{color:#9aa0a9;font-size:12.5px}
.deal-feats{display:grid;gap:18px}
.feat{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px 26px;display:flex;gap:18px;align-items:flex-start}
.feat .fic{width:44px;height:44px;border-radius:12px;background:var(--cobalt-soft);color:var(--cobalt-ink);display:grid;place-items:center;font-size:19px;flex-shrink:0}
.feat h3{font-size:17.5px;font-weight:600;margin-bottom:3px}
.feat p{color:var(--muted);font-size:14.5px}
.feat.hot{border:1.5px solid var(--cobalt);box-shadow:0 12px 34px rgba(47,107,255,.14)}
.deal-math{margin-top:26px;text-align:center;color:var(--muted);font-size:15.5px}
.deal-math b{color:var(--ink);font-weight:600}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;counter-reset:s}
.step{position:relative;padding:32px;border:1px solid var(--line);border-radius:18px;background:var(--paper);counter-increment:s}
.step::before{content:"0" counter(s);font-family:'Space Grotesk';font-weight:700;font-size:15px;color:var(--cobalt);letter-spacing:.05em}
.step h3{font-size:20px;font-weight:600;margin:12px 0 8px}
.step p{color:var(--muted);font-size:15px}
.step:nth-child(2){background:var(--ink);color:#fff;border-color:transparent}
.step:nth-child(2) p{color:#b7bcc4}
@media(max-width:900px){.deal-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr}}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.contact h2{margin-bottom:14px}
.contact-info{margin-top:26px;display:grid;gap:16px}
.contact-info a{display:flex;align-items:center;gap:12px;font-weight:600}
.contact-info .ic{width:40px;height:40px;border-radius:11px;background:var(--cobalt-soft);color:var(--cobalt-ink);display:grid;place-items:center;font-size:17px}
form{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px}
.field input,.field textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;font-family:inherit;font-size:15px;background:var(--paper);transition:.18s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 4px var(--cobalt-soft)}
form .btn{width:100%;justify-content:center;margin-top:6px}
.form-note{font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center}
.form-note.err{color:#b3261e;font-weight:600}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:13.5px}
/* width:auto is REQUIRED once the img carries width/height attributes: with only
   a height rule the 440 attribute becomes the used width and the logo renders
   440x26 instead of its real 2.7:1. The nav copy already had it. */
.foot img{height:26px;width:auto}

/* Offscreen sections hold every animation inside them at frame zero until the
   visitor actually arrives. Two reasons: nothing burns compositing on a section
   nobody is looking at (the page's whole pitch is speed), and each loop starts
   from its FIRST frame, so the morph opens on the dated site rather than
   whatever moment the 22s cycle happened to be at. */
[data-anim-hold]:not(.anim-go),
[data-anim-hold]:not(.anim-go) *{animation-play-state:paused!important}

[data-an]{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease}
[data-an].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-an]{opacity:1;transform:none}}

.mcta{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:11px 16px;display:none}
.mcta .btn{width:100%;justify-content:center}
@media(max-width:700px){.mcta.show{display:block}}

/* ===== multi-page: sub-page headers, active nav, footer nav ===== */
/* Sub-pages get a compact header instead of the full hero, so the visitor lands
   on the argument rather than scrolling past a second sales pitch. */
.page-hero{padding:64px 0 8px}
.page-hero h1{font-size:clamp(34px,5vw,56px);font-weight:700;line-height:1.05;max-width:16ch}
.page-hero .lead{margin-top:18px;font-size:18px;max-width:620px}
.page-hero .back{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:14px;font-weight:600;margin-bottom:20px}
.page-hero .back:hover{color:var(--cobalt-ink)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{width:100%}
/* Cross-links from the homepage into the deeper pages. */
.more-link{display:inline-flex;align-items:center;gap:9px;margin-top:30px;color:var(--cobalt-ink);font-weight:600;font-size:15.5px;
  border-bottom:1.5px solid var(--cobalt-soft);padding-bottom:2px;transition:.18s}
.more-link:hover{border-bottom-color:var(--cobalt)}
.foot{gap:14px}
.foot-nav{display:flex;gap:20px;flex-wrap:wrap}
.foot-nav a{color:var(--muted);font-size:13.5px;font-weight:600}
.foot-nav a:hover{color:var(--ink)}
@media(max-width:700px){.foot{flex-direction:column;align-items:flex-start;text-align:left}}

/* ---- legal pages (privacy, terms) ---- */
.legal{padding:36px 0 88px}
.legal .wrap{max-width:720px}
.legal .eff{color:var(--muted);font-size:14px;font-weight:600;margin-bottom:34px}
.legal h2{font-size:22px;margin:38px 0 12px}
.legal p,.legal li{font-size:16.5px;line-height:1.65;color:var(--ink)}
.legal p+p{margin-top:12px}
.legal ul{margin:12px 0 0 20px}
.legal li+li{margin-top:8px}
.legal a{color:var(--cobalt-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.form-consent{margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.form-consent a{color:var(--cobalt-ink);font-weight:600}