/* =========================================================
   EXPECTNOLESS — v3
   Black · brand blue (#00AFF0) used with restraint · Inter Tight
   ========================================================= */
:root {
  --bg: #000;
  --bg-2: #060708;
  --fg: #fff;
  --dim: rgba(255, 255, 255, 0.6);
  --faint: rgba(255, 255, 255, 0.32);
  --blue: #00aff0;
  --blue-deep: #0072b5;
  --blue-ink: #001d2e;
  --card: #0b0c0e;
  --card-2: #111316;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --glow: radial-gradient(closest-side, rgba(0, 150, 225, 0.45), rgba(0, 110, 190, 0.12) 55%, transparent);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(18px, 4vw, 64px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); overflow-x: hidden; overflow-x: clip; }
html, body { touch-action: pan-y pinch-zoom; overscroll-behavior-x: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--bg); color: var(--fg);
  font-family: 'Inter Tight', system-ui, sans-serif; font-size: 18px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; max-width: 100%;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--blue); color: #000; }

/* ---- type ---- */
.display { font-weight: 800; letter-spacing: -0.05em; line-height: 0.98; }
.wordmark { font-weight: 800; letter-spacing: -0.045em; text-transform: uppercase; }
.blue, .wordmark .dot { color: var(--blue); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.h2 { font-size: clamp(46px, 7.2vw, 128px); }
.lead { font-size: clamp(17px, 1.4vw, 21px); color: var(--dim); max-width: 520px; font-weight: 500; }
.wd, .ch { display: inline-block; will-change: transform, filter; }
.line { display: block; }
.nw { white-space: nowrap; }

.wrap { max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: clamp(110px, 16vh, 200px) 0; overflow-x: clip; }
.glow { position: absolute; border-radius: 50%; background: var(--glow); pointer-events: none; }

/* ---- buttons ---- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px;
  border-radius: 999px; font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; isolation: isolate;
  border: 1.5px solid var(--line-2); transition: border-color .3s, color .3s, box-shadow .4s; }
.btn svg { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.btn:hover svg { transform: translateX(4px) rotate(-45deg); }
.btn-blue { background: var(--blue); color: #000; border-color: var(--blue); }
.btn-blue::after { content: ''; position: absolute; inset: -2px; z-index: -1; background: #fff; transform: translateY(102%); border-radius: 50% 50% 0 0; transition: transform .55s var(--ease), border-radius .55s var(--ease); }
.btn-blue:hover::after { transform: translateY(0); border-radius: 0; }
.btn-blue:hover { box-shadow: 0 0 50px rgba(0, 175, 240, .45); }
.btn-ghost { background: rgba(255,255,255,.03); }
.btn-ghost:hover { border-color: var(--fg); }

/* ---- chrome ---- */
.cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--blue); display: grid; place-items: center; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease); }
.cursor span { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #000; opacity: 0; transition: opacity .2s; }
.cursor.big { width: 86px; height: 86px; margin: -43px 0 0 -43px; }
.cursor.big span { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
.progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); z-index: 300; }
.wipe-frame { position: fixed; inset: 0; overflow: hidden; z-index: 350; pointer-events: none; }
.wipe { position: absolute; top: -20vh; left: 0; width: 180vw; height: 140vh; background: var(--blue); transform: translateX(-320vw) skewX(-16deg); }

.loader { position: fixed; inset: 0; z-index: 500; background: #000; display: grid; place-items: center; }
.loader .wordmark { font-size: clamp(40px, 9vw, 150px); }
.loader-count { position: absolute; right: var(--gutter); bottom: var(--gutter); font-weight: 800; font-size: clamp(40px, 6vw, 90px); letter-spacing: -.05em; color: var(--faint); font-variant-numeric: tabular-nums; }
.loader-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); }

.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 84px; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; transition: background .4s, backdrop-filter .4s; }
.nav.solid { background: rgba(0, 0, 0, .55); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.nav .wordmark { font-size: 20px; justify-self: start; }
.nav-links { display: flex; gap: 30px; }
.nav-links a { font-size: 14px; font-weight: 600; color: var(--dim); position: relative; transition: color .3s; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--blue); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav-links a:hover, .nav-links a.on { color: var(--fg); }
.nav-links a:hover::after, .nav-links a.on::after { transform: scaleX(1); transform-origin: left; }
.nav .btn { justify-self: end; height: 46px; padding: 0 22px; }
@media (max-width: 900px) { .nav { grid-template-columns: 1fr auto; height: 70px; } .nav-links { display: none; } .nav .wordmark { font-size: 17px; } .nav .btn { height: 40px; padding: 0 18px; font-size: 14px; } }

/* ---- HERO: headline + film that expands to full screen ---- */
.hero { position: relative; height: 240vh; }
.hero-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hero .glow { width: 1300px; height: 900px; left: 50%; top: 40%; transform: translate(-50%, -50%); }
.hero-head { position: absolute; left: 0; right: 0; top: 15vh; text-align: center; padding: 0 var(--gutter); z-index: 2; }
.hero-head .eyebrow { margin-bottom: 26px; }
.hero h1 { font-size: clamp(52px, 8.4vw, 168px); }
.hero-film { position: absolute; left: 50%; top: 50%; width: 40vw; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); margin-top: 30vh;
  border-radius: 26px; overflow: hidden; background: #000; z-index: 3; box-shadow: 0 50px 140px -30px rgba(0, 140, 220, .45); border: 1px solid var(--line-2); }
.hero-film video { width: 100%; height: 100%; object-fit: cover; }
.hero-scroll { position: absolute; left: var(--gutter); bottom: 34px; z-index: 4; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 12px; }
.hero-scroll i { width: 40px; height: 1.5px; background: var(--line-2); position: relative; overflow: hidden; }
.hero-scroll i::after { content: ''; position: absolute; inset: 0; background: var(--blue); animation: slide 1.8s var(--ease) infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.hero-meta { position: absolute; right: var(--gutter); bottom: 34px; z-index: 4; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
@media (max-width: 900px) {
  .hero { height: auto; }
  .hero-sticky { position: relative; height: auto; display: flex; flex-direction: column; padding: 86px var(--gutter) 64px; }
  .hero-film { position: relative; left: auto; top: auto; width: 100%; transform: none; margin: 0 0 34px; order: -1; border-radius: 18px; }
  .hero-head { position: relative; top: auto; padding: 0; text-align: left; }
  .hero h1 { font-size: 13.4vw; }
  .hero-cta-m { display: flex; gap: 10px; margin-top: 30px; }
  .hero-scroll, .hero-meta { display: none; }
}
.hero-cta-m { display: none; }
@media (max-width: 900px) { .hero-cta-m { display: flex; } }

/* ---- marquee ---- */
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 22px 0; }
.ticker-track { display: flex; width: max-content; animation: tick 38s linear infinite; }
.ticker span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-size: 13px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.ticker span::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---- reframe (pinned) ---- */
.reframe { height: 260vh; position: relative; }
.reframe-pin { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; text-align: center; overflow: hidden; }
.reframe .pain { position: absolute; inset: 0; display: grid; place-items: center; }
.reframe .pain h2 { font-size: clamp(50px, 9vw, 168px); }
.reframe .pre { font-size: clamp(20px, 2.4vw, 38px); font-weight: 600; color: var(--dim); letter-spacing: -.02em; }
.reframe .swap { position: relative; height: clamp(120px, 19vw, 330px); margin: 4px 0 8px; }
.reframe .word { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-size: clamp(96px, 17vw, 300px); white-space: nowrap; }
.reframe .strike { position: absolute; left: 50%; top: 50%; height: clamp(8px, 1.1vw, 16px); width: 0; background: var(--blue); border-radius: 8px; transform: translateX(-50%); box-shadow: 0 0 30px rgba(0,175,240,.7); }
.reframe .post { font-size: clamp(17px, 1.6vw, 24px); color: var(--dim); max-width: 620px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---- manifesto ---- */
.manifesto p { font-size: clamp(32px, 4.6vw, 80px); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; max-width: 1240px; }
.manifesto .wd { color: rgba(255,255,255,.14); transition: color .35s; }
.manifesto .wd.lit { color: var(--fg); }
.manifesto .wd.lit.acw { color: var(--blue); }
.manifesto .eyebrow { margin-bottom: 40px; }

/* ---- numbers (the one blue moment) ---- */
.numbers { background: var(--blue); color: #000; overflow: hidden; }
.numbers .eyebrow { color: rgba(0,0,0,.7); }
.numbers .eyebrow::before { background: #000; box-shadow: none; }
.num-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 60px; border-top: 1.5px solid rgba(0,0,0,.18); }
.num { padding: 40px 0 44px; border-bottom: 1.5px solid rgba(0,0,0,.18); }
.num:nth-child(odd) { padding-right: 40px; border-right: 1.5px solid rgba(0,0,0,.18); }
.num:nth-child(even) { padding-left: 40px; }
.num .n { font-size: clamp(64px, 9.4vw, 176px); font-weight: 800; letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; }
.num .l { margin-top: 16px; font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(0,0,0,.66); }
.numbers .note { margin-top: 36px; font-size: 15px; font-weight: 600; color: rgba(0,0,0,.66); }
@media (max-width: 700px) {
  .num-grid { grid-template-columns: 1fr 1fr; }
  .num:nth-child(odd) { padding-right: 16px; } .num:nth-child(even) { padding-left: 16px; }
  .num .n { font-size: 15vw; } .num .l { font-size: 11px; letter-spacing: .14em; }
}

/* ---- testimonials ---- */
.tm { overflow: hidden; margin-top: 56px; display: grid; gap: 16px; }
.tm-row { display: flex; gap: 16px; width: max-content; will-change: transform; }
.tcard { flex: none; width: 370px; border-radius: 26px; border: 1px solid var(--line); background: var(--card); padding: 26px; display: flex; flex-direction: column; gap: 16px; transition: border-color .3s, transform .5s var(--ease); }
.tcard:hover { border-color: rgba(0,175,240,.6); transform: translateY(-6px); }
.tcard .res { font-size: 42px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--blue); }
.tcard .dur { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.tcard q { quotes: none; font-size: 16.5px; line-height: 1.45; color: rgba(255,255,255,.88); }
.tcard .who { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font-size: 14px; font-weight: 600; color: var(--dim); }
.tcard .who em { font-style: normal; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.blur { filter: blur(6px); user-select: none; -webkit-user-select: none; pointer-events: none; }
.m-hide { }
@media (max-width: 900px) { .m-hide { display: none !important; } .tcard { width: 290px; padding: 22px; } .tcard .res { font-size: 34px; } .tm { margin-top: 30px; } }

/* ---- process ---- */
.process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.process-steps { padding: 18vh 0 28vh; }
.pstep { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; opacity: .2; transition: opacity .5s; }
.pstep.on { opacity: 1; }
.pstep .k { font-size: 14px; font-weight: 800; color: var(--blue); letter-spacing: .12em; }
.pstep h3 { font-size: clamp(44px, 5.2vw, 92px); font-weight: 800; letter-spacing: -.05em; line-height: 1; margin: 12px 0 16px; }
.pstep p { color: var(--dim); max-width: 430px; font-size: 19px; }
.process-sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
.process-sticky .glow { width: 900px; height: 900px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.phone { position: relative; width: 330px; aspect-ratio: 450 / 930; border-radius: 56px; border: 2px solid #26292e; background: var(--card); padding: 20px 18px;
  box-shadow: 0 60px 140px -40px rgba(0,140,220,.5), inset 0 0 0 7px #000; }
.phone .island { width: 96px; height: 28px; border-radius: 16px; margin: 0 auto 18px; background: #000; }
.screen { position: absolute; inset: 0; padding: 70px 18px 18px; opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .6s var(--ease); }
.screen.on { opacity: 1; transform: none; }
.screen .hi { font-size: 13px; color: var(--dim); font-weight: 500; }
.screen .ttl { font-size: 32px; font-weight: 800; letter-spacing: -.045em; margin: 2px 0 14px; }
.row { display: flex; align-items: center; gap: 12px; height: 64px; border-radius: 18px; border: 1px solid var(--line); background: var(--card-2); padding: 0 14px; margin-bottom: 9px; }
.row .av { width: 36px; height: 36px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #0072b5, #00aff0); }
.row:nth-child(even) .av { background: linear-gradient(135deg, #00aff0, #c6efff); }
.row .n { font-size: 14px; font-weight: 700; }
.row .p { font-size: 12px; color: var(--dim); }
.tick { width: 28px; height: 28px; border-radius: 50%; margin-left: auto; border: 1.5px solid var(--blue); display: grid; place-items: center; flex: none; }
.tick svg { width: 14px; height: 14px; stroke: var(--blue); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mcard { border-radius: 22px; border: 1px solid var(--line); background: var(--card-2); padding: 16px; margin-bottom: 10px; }
.mcard .k2 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.mcard .v { font-size: 44px; font-weight: 800; letter-spacing: -.05em; margin-top: 2px; }
.mcard svg { width: 100%; height: 50px; margin-top: 6px; overflow: visible; }
.mcard path { fill: none; stroke: var(--blue); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(0,175,240,.8)); }
.big-check { width: 110px; height: 110px; border-radius: 50%; margin: 40px auto 16px; display: grid; place-items: center; background: var(--blue); box-shadow: 0 0 60px rgba(0,175,240,.5); }
.big-check svg { width: 50px; height: 50px; stroke: #000; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.center { text-align: center; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 12px 0; }
.cal i { aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--line); font-style: normal; font-size: 11px; display: grid; place-items: center; color: var(--dim); }
.cal i.sel { background: var(--blue); color: #000; border-color: var(--blue); font-weight: 800; }
@media (max-width: 900px) {
  .process-grid { grid-template-columns: 1fr; gap: 0; }
  .process-sticky { display: none; }
  .process-steps { padding: 30px 0 0; }
  .pstep { min-height: 0; padding: 22px 0; opacity: 1; border-top: 1px solid var(--line); }
  .pstep h3 { font-size: 36px; margin: 6px 0 6px; }
  .pstep p { font-size: 16px; }
}

/* ---- services ---- */
.field-wrap { position: relative; height: 74vh; min-height: 520px; overflow: hidden; display: grid; place-items: center; }
.field { position: absolute; left: -20%; top: -30%; width: 140%; transform: rotate(-12deg); }
.chips { display: flex; gap: 16px; margin-bottom: 18px; white-space: nowrap; will-change: transform; }
.chip { flex: none; height: 60px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); font-size: 19px; font-weight: 700; display: inline-flex; align-items: center; gap: 12px; color: rgba(255,255,255,.75); }
.chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.chip.hot { background: var(--blue); color: #000; border-color: var(--blue); }
.field-vig { position: absolute; inset: 0; background: radial-gradient(ellipse 46% 36% at 50% 50%, rgba(0,0,0,.97), rgba(0,0,0,.85) 50%, transparent 80%); pointer-events: none; }
.field-wrap h2 { position: relative; z-index: 2; text-align: center; font-size: clamp(52px, 10vw, 180px); }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 56px; }
.svc { position: relative; border-radius: 26px; border: 1px solid var(--line); background: var(--card); padding: 26px; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: border-color .4s; transform-style: preserve-3d; }
.svc:hover { border-color: rgba(0,175,240,.6); }
.svc .k { font-size: 13px; font-weight: 800; color: var(--blue); letter-spacing: .12em; }
.svc h3 { font-size: 30px; font-weight: 800; letter-spacing: -.045em; line-height: 1.02; }
.svc p { color: var(--dim); margin-top: 10px; font-size: 15px; }
.svc .spot { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,175,240,.2), transparent); left: var(--mx, 50%); top: var(--my, 50%); transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.svc:hover .spot { opacity: 1; }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .field-wrap { height: 50vh; min-height: 360px; } .svc { min-height: 150px; padding: 18px; border-radius: 20px; } .svc h3 { font-size: 21px; } .svc p { display: none; } .svc-grid { gap: 10px; margin-top: 26px; } }

/* ---- discretion ---- */
.priv { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.priv h2 { font-size: clamp(46px, 6.2vw, 112px); }
.panel { position: relative; border-radius: 34px; border: 1px solid var(--line); background: var(--card); padding: 46px 38px; text-align: center; overflow: visible; }
.shield { width: 110px; height: 110px; margin: 0 auto 22px; border-radius: 50%; border: 2px solid var(--blue); background: rgba(0,175,240,.07); display: grid; place-items: center; box-shadow: 0 0 60px rgba(0,175,240,.25); }
.shield svg { width: 50px; height: 50px; stroke: var(--blue); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.panel h3 { font-size: 34px; font-weight: 800; letter-spacing: -.045em; margin-bottom: 24px; }
.opt { display: flex; align-items: center; height: 64px; padding: 0 12px 0 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); margin-bottom: 10px; font-weight: 700; font-size: 17px; text-align: left; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; left: 50%; top: 22%; width: 9px; height: 15px; border-radius: 2px; background: var(--blue); opacity: 0; }
.confetti i:nth-child(3n) { background: #fff; } .confetti i:nth-child(4n) { background: var(--blue-deep); }
@media (max-width: 900px) { .priv { grid-template-columns: 1fr; gap: 34px; } .panel { padding: 30px 20px; } .shield { width: 78px; height: 78px; } .shield svg { width: 36px; height: 36px; } .panel h3 { font-size: 26px; margin-bottom: 16px; } .opt { height: 54px; font-size: 15px; } }

/* ---- offer ---- */
.offer { text-align: center; }
.offer .glow { width: 1100px; height: 700px; left: 50%; top: 10%; transform: translateX(-50%); }
.badge-wrap { position: relative; width: 220px; height: 220px; margin: 0 auto 18px; }
.badge-crown { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 32px; background: var(--blue); display: grid; place-items: center; box-shadow: 0 0 90px rgba(0,175,240,.55); }
.badge-crown svg { width: 58px; height: 58px; stroke: #000; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.orbit { position: absolute; inset: 0; animation: spin 16s linear infinite; }
.orbit i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); }
.orbit i:nth-child(even) { background: #fff; width: 8px; height: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.offer h2 { font-size: clamp(46px, 7.4vw, 132px); position: relative; }
.offer-list { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
.pill { height: 54px; padding: 0 20px 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; }
.pill .tick { margin: 0; }
@media (max-width: 900px) { .badge-wrap { transform: scale(.72); margin: -40px auto -20px; } .offer-list { flex-direction: column; align-items: center; } }

/* ---- FAQ ---- */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-item:first-child { border-top: 1px solid var(--line-2); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px 0; text-align: left; font-size: clamp(18px, 1.7vw, 24px); font-weight: 700; letter-spacing: -.02em; }
.faq-q .pm { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; flex: none; transition: background .3s, border-color .3s, transform .5s var(--ease); }
.faq-q .pm::before, .faq-q .pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq-q .pm::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s; }
.faq-item.open .pm { background: var(--blue); border-color: var(--blue); color: #000; transform: rotate(180deg); }
.faq-item.open .pm::after { transform: translate(-50%, -50%) rotate(0); }
.faq-a { height: 0; overflow: hidden; }
.faq-a p { padding: 0 60px 28px 0; color: var(--dim); }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 26px; } .faq-q { padding: 20px 0; } .faq-a p { padding-right: 0; } }

/* ---- CTA with round magnetic button ---- */
.cta { min-height: 100vh; display: grid; place-items: center; text-align: center; overflow: hidden; }
.cta .glow { width: 1400px; height: 1000px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.cta h2 { position: relative; font-size: clamp(56px, 11vw, 210px); }
.cta-sub { position: relative; margin-top: 18px; color: var(--dim); font-size: clamp(16px, 1.4vw, 20px); }
.orb-btn { position: relative; display: inline-grid; place-items: center; width: 230px; height: 230px; margin-top: 54px; border-radius: 50%; }
.orb-btn .core { position: absolute; inset: 34px; border-radius: 50%; background: var(--blue); color: #000; display: grid; place-items: center; font-weight: 800; font-size: 22px; letter-spacing: -.02em;
  box-shadow: 0 0 80px rgba(0,175,240,.5); transition: transform .6s var(--ease), background .3s; }
.orb-btn:hover .core { transform: scale(1.08); background: #fff; }
.orb-btn svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.orb-btn svg.ring text { font-size: 11.5px; font-weight: 700; letter-spacing: .32em; fill: var(--dim); text-transform: uppercase; }

/* ---- footer (centered) ---- */
.footer { position: relative; border-top: 1px solid var(--line); padding: 80px var(--gutter) 0; text-align: center; overflow: hidden; }
.footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 34px; font-size: 14px; font-weight: 600; color: var(--dim); }
.footer-nav a { transition: color .3s; }
.footer-nav a:hover { color: var(--fg); }
.footer-mail { display: inline-block; margin-top: 30px; font-size: clamp(22px, 3vw, 44px); font-weight: 800; letter-spacing: -.04em; position: relative; }
.footer-mail::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.footer-mail:hover::after { transform: scaleX(1); transform-origin: left; }
.footer-legal { margin-top: 26px; font-size: 13px; color: var(--faint); display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.footer-legal a:hover { color: var(--fg); }
.footer-mega { margin-top: 60px; font-size: 11.4vw; line-height: .78; font-weight: 800; letter-spacing: -.05em; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.footer-mega .dot { -webkit-text-fill-color: var(--blue); opacity: .7; }

@media (max-width: 900px) {
  .section { padding: 84px 0; } .reframe { height: 200vh; }
  .h2, .priv h2, .offer h2 { font-size: 11.6vw; }
  .cta h2 { font-size: 12.4vw; }
  .manifesto p { font-size: 8.6vw; }
  .footer-nav { gap: 8px 20px; font-size: 13px; }
  .footer { padding-top: 64px; }
  .orb-btn { width: 200px; height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .loader, .cursor { display: none; }
  .ticker-track, .orbit, .orb-btn svg.ring { animation: none; }
  .hero { height: auto; } .hero-sticky { position: relative; height: auto; min-height: 100vh; }
  .reframe { height: auto; } .reframe-pin { position: relative; height: auto; padding: 120px 0; } .reframe .pain { display: none; }
}

/* =========================================================
   v3.1 — contemporary type + minimal layout
   Geist (grotesk) · Instrument Serif italic accents · Geist Mono labels
   ========================================================= */
:root {
  --sans: 'Geist', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --glow: radial-gradient(closest-side, rgba(0, 150, 225, 0.22), rgba(0, 110, 190, 0.05) 55%, transparent);
}
body { font-family: var(--sans); font-size: 17px; letter-spacing: -0.005em; }
.display { font-family: var(--sans); font-weight: 500; letter-spacing: -0.055em; line-height: 0.94; }
.display .blue, .h2 .blue, h1 .blue, h2 .blue, .manifesto .acw {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--blue);
}
.wordmark { font-family: var(--sans); font-weight: 600; letter-spacing: -0.03em; }
.eyebrow, .hero-scroll, .hero-meta, .ticker span, .num .l, .pstep .k, .svc-row .k, .tcard .dur, .tcard .who em, .footer-nav, .faq-q .k {
  font-family: var(--mono); font-weight: 400; letter-spacing: 0.08em;
}
.eyebrow { font-size: 11px; text-transform: uppercase; }
.eyebrow::before { box-shadow: none; }
.btn { font-family: var(--sans); font-weight: 500; font-size: 15px; }
.nav-links a { font-weight: 450; }

/* hero */
.hero h1 { font-size: clamp(64px, 11vw, 220px); }
.hero-head { top: 13vh; }
.hero-film { box-shadow: 0 40px 120px -40px rgba(0, 140, 220, .35); border-color: var(--line); }
.hero .glow { opacity: .8; }

/* section heads */
.sec-head { display: grid; grid-template-columns: 1fr 2fr; align-items: end; gap: 40px; }
.sec-head .h2 { margin: 0; }
.h2 { font-size: clamp(44px, 6.4vw, 116px); }

/* manifesto */
.manifesto p { font-family: var(--sans); font-weight: 500; letter-spacing: -0.045em; line-height: 1.06; font-size: clamp(30px, 4.2vw, 74px); }
.manifesto .wd { color: rgba(255,255,255,.13); }

/* numbers */
.num .n { font-family: var(--sans); font-weight: 500; letter-spacing: -0.065em; }
.num .l { font-size: 12px; text-transform: uppercase; }

/* testimonials */
.tcard .res { font-family: var(--sans); font-weight: 500; letter-spacing: -0.05em; }
.tcard q { font-size: 16px; }

/* process */
.pstep h3 { font-weight: 500; letter-spacing: -0.05em; }
.screen .ttl, .mcard .v { font-weight: 600; }

/* services — numbered list */
.svc-list { list-style: none; margin-top: 64px; border-top: 1px solid var(--line-2); }
.svc-row { position: relative; display: grid; grid-template-columns: 90px 1.2fr 1fr 40px; align-items: center; gap: 24px; padding: 34px 0; border-bottom: 1px solid var(--line-2); overflow: hidden; }
.svc-row::before { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.svc-row:hover::before { transform: scaleX(1); }
.svc-row .k { font-size: 12px; color: var(--faint); }
.svc-row h3 { font-weight: 500; font-size: clamp(28px, 3.2vw, 52px); letter-spacing: -0.05em; line-height: 1; transition: transform .7s var(--ease), color .4s; }
.svc-row:hover h3 { transform: translateX(14px); color: var(--blue); }
.svc-row p { color: var(--dim); font-size: 16px; max-width: 380px; }
.svc-row .arr { width: 28px; height: 28px; color: var(--faint); transition: transform .6s var(--ease), color .3s; }
.svc-row:hover .arr { transform: rotate(45deg); color: var(--blue); }

/* discretion — plain list */
.priv { grid-template-columns: 1.3fr 1fr; align-items: end; }
.priv .h2 { margin-top: 24px; }
.check-list { list-style: none; border-top: 1px solid var(--line-2); }
.check-list li { display: flex; align-items: center; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line-2); font-size: clamp(18px, 1.6vw, 22px); font-weight: 450; letter-spacing: -0.02em; }
.check-list .tick { margin: 0; border-color: var(--blue); }

/* offer — one line */
.offer h2 { font-size: clamp(44px, 7vw, 128px); }
.offer-line { margin-top: 30px; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.offer-line i { width: 4px; height: 4px; border-radius: 50%; background: var(--blue); }

/* faq */
.faq-q { font-weight: 450; letter-spacing: -0.02em; }

/* cta */
.cta h2 { font-size: clamp(56px, 10vw, 200px); }
.orb-btn .core { font-family: var(--sans); font-weight: 500; font-size: 20px; }
.orb-btn svg.ring text { font-family: var(--mono); font-weight: 400; letter-spacing: .26em; font-size: 10.5px; }

/* footer */
.footer-mail { font-family: var(--sans); font-weight: 500; letter-spacing: -0.04em; }
.footer-mega { font-family: var(--sans); font-weight: 600; letter-spacing: -0.06em; }

/* loader */
.loader .wordmark { font-weight: 600; }
.loader-count { font-family: var(--mono); font-weight: 400; letter-spacing: 0; font-size: clamp(14px, 1.2vw, 16px); color: var(--dim); }

@media (max-width: 900px) {
  .hero-head { top: auto; }
  .hero h1 { font-size: 17vw; }
  .sec-head { grid-template-columns: 1fr; gap: 20px; }
  .svc-list { margin-top: 34px; }
  .svc-row { grid-template-columns: 44px 1fr 24px; gap: 12px; padding: 22px 0; }
  .svc-row p { display: none; }
  .svc-row h3 { font-size: 26px; }
  .svc-row .arr { width: 20px; height: 20px; }
  .priv { grid-template-columns: 1fr; gap: 30px; }
  .h2, .priv h2, .offer h2 { font-size: 12.4vw; }
  .manifesto p { font-size: 9vw; }
  .offer-line { flex-direction: column; gap: 10px; }
  .offer-line i { display: none; }
}

/* ---- Wordmark: original brand type (Anton + white→grey gradient) ---- */
.wordmark, .footer-mega {
  font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #8c8c8c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.nav .wordmark { font-size: 21px; }
.loader .wordmark { background: none; -webkit-text-fill-color: initial; font-size: clamp(48px, 11vw, 190px); }
.loader .wordmark .ch {
  background: linear-gradient(180deg, #ffffff 0%, #8c8c8c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.footer-mega {
  font-size: 16vw; letter-spacing: 0.02em; line-height: .82; margin-top: 56px;
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(140,140,140,.06) 85%);
  -webkit-background-clip: text; background-clip: text;
}
@media (max-width: 900px) { .nav .wordmark { font-size: 18px; } }

/* ---- accents: same grotesk, blue only (no serif italic) ---- */
.display .blue, .h2 .blue, h1 .blue, h2 .blue, .manifesto .acw {
  font-family: var(--sans); font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--blue);
}
.manifesto .wd.acw { color: rgba(255,255,255,.13); }
.manifesto .wd.acw.lit { color: var(--blue); }

/* ---- CTA: fill button (replaces rotating orb) ---- */
.fill-btn { position: relative; display: inline-flex; align-items: center; gap: 18px; margin-top: 48px; height: 88px; padding: 0 14px 0 40px;
  border-radius: 999px; border: 1px solid var(--line-2); overflow: hidden; isolation: isolate; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--fg); }
.fill-btn__bg { position: absolute; left: var(--fx, 50%); top: var(--fy, 50%); width: 0; height: 0; border-radius: 50%; background: var(--blue);
  transform: translate(-50%, -50%); transition: width .7s var(--ease), height .7s var(--ease); z-index: -1; }
.fill-btn:hover .fill-btn__bg { width: 260%; height: 900%; }
.fill-btn__label { position: relative; transition: color .35s; }
.fill-btn:hover .fill-btn__label { color: #000; }
.fill-btn__icon { position: relative; width: 60px; height: 60px; border-radius: 50%; background: var(--blue); color: #000; display: grid; place-items: center; overflow: hidden; transition: background .35s; }
.fill-btn:hover .fill-btn__icon { background: #000; color: var(--blue); }
.fill-btn__icon svg { width: 22px; height: 22px; transition: transform .6s var(--ease); }
.fill-btn:hover .fill-btn__icon svg { transform: translateX(120%); animation: arrow-loop .6s var(--ease) .1s forwards; }
@keyframes arrow-loop { 0% { transform: translateX(-120%); } 100% { transform: translateX(0); } }
.cta .cta-sub { margin-top: 20px; }
@media (max-width: 900px) { .fill-btn { height: 72px; font-size: 18px; padding-left: 30px; } .fill-btn__icon { width: 50px; height: 50px; } }

/* ---- Content protection CTA ---- */
.protect-card { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center;
  border: 1px solid var(--line); border-radius: 32px; padding: clamp(28px, 5vw, 72px);
  background: radial-gradient(ellipse 70% 90% at 100% 50%, rgba(0, 140, 220, .14), transparent 70%), var(--card); overflow: hidden; }
.protect-copy .h2 { margin: 22px 0 22px; }
.protect-copy .lead { margin-bottom: 32px; }
.protect-stat { display: grid; justify-items: center; gap: 22px; text-align: center; }
.protect-ring { position: relative; width: min(280px, 60vw); aspect-ratio: 1; }
.protect-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.protect-ring circle { fill: none; stroke-width: 2; }
.protect-ring .track { stroke: var(--line-2); }
.protect-ring .arc { stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 8px rgba(0,175,240,.6)); }
.protect-num { position: absolute; inset: 0; display: grid; place-items: center; grid-auto-flow: column; justify-content: center; align-items: baseline; align-content: center;
  font-weight: 500; letter-spacing: -0.06em; font-size: clamp(80px, 9vw, 132px); line-height: 1; font-variant-numeric: tabular-nums; }
.protect-num small { font-size: .38em; letter-spacing: -0.02em; color: var(--blue); margin-left: 4px; }
.protect-label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); line-height: 1.7; }
@media (max-width: 900px) { .protect-card { grid-template-columns: 1fr; gap: 40px; border-radius: 24px; } .protect-stat { order: -1; } }
.footer { padding-bottom: 56px; }
@media (max-width: 900px) {
  .cta h2 { font-size: 11vw; }
  .footer-nav { gap: 8px 14px; font-size: 12px; letter-spacing: .04em; }
}

/* ---- Hero sub-line (core service from the first second) ---- */
.hero h1 { font-size: clamp(64px, min(11vw, 18vh), 220px); }
.hero-sub { margin: 22px auto 0; max-width: 620px; font-size: clamp(16px, 1.35vw, 20px); color: var(--dim); line-height: 1.45; }
.hero-sub b { color: var(--fg); font-weight: 500; }
@media (max-width: 900px) { .hero-sub { margin: 18px 0 0; font-size: 16px; } }

/* ---- ORGANIC TRAFFIC — core service ---- */
.traffic { border-bottom: 1px solid var(--line); }
.traffic-lead { margin-top: 26px; max-width: 560px; }
.flow { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(40px, 8vw, 140px); margin-top: 80px; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.flow-lines path { fill: none; stroke-width: 1.5; }
.flow-lines .base { stroke: rgba(255,255,255,.1); }
.flow-lines .pulse { stroke: var(--blue); stroke-dasharray: 0.04 0.16; stroke-linecap: round; stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(0,175,240,.9)); animation: flow 2.4s linear infinite; opacity: .9; transition: opacity .3s, stroke-width .3s; }
.flow-lines .pulse.dim { opacity: .2; }
.flow-lines .pulse.hot { stroke-width: 3.5; opacity: 1; }
@keyframes flow { to { stroke-dashoffset: -0.2; } }
.flow-col { position: relative; z-index: 1; }
.flow-label { display: block; margin-bottom: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.nodes { list-style: none; display: grid; gap: 12px; }
.node { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 18px 22px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--card); cursor: default; transition: border-color .35s, background .35s, transform .5s var(--ease); }
.node:hover, .node.on { border-color: var(--blue); background: rgba(0,175,240,.07); transform: translateX(4px); }
.flow-col:last-child .node:hover, .flow-col:last-child .node.on { transform: translateX(-4px); }
.node-name { font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; letter-spacing: -0.035em; }
.node-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.flow-core { position: relative; z-index: 1; width: clamp(200px, 20vw, 280px); aspect-ratio: 1; display: grid; place-items: center; }
.core-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(0,175,240,.45);
  background: radial-gradient(closest-side, rgba(0,175,240,.22), rgba(0,175,240,.04) 70%, transparent); box-shadow: 0 0 80px rgba(0,175,240,.25); }
.core-ring::before, .core-ring::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(0,175,240,.25); animation: ping 3s var(--ease) infinite; }
.core-ring::after { animation-delay: 1.5s; }
@keyframes ping { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
.core-inner { position: relative; text-align: center; display: grid; gap: 6px; }
.core-k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.core-name { font-family: 'Anton', sans-serif; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff, #8c8c8c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.core-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.traffic-points { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 80px; border-top: 1px solid var(--line-2); }
.traffic-points > div { padding: 28px 0 0; display: grid; gap: 6px; }
.traffic-points > div + div { padding-left: 28px; border-left: 1px solid var(--line-2); }
.tp-n { font-size: clamp(36px, 4vw, 64px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.tp-l { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; gap: 26px; margin-top: 44px; }
  .flow-lines { display: none; }
  .flow-core { margin: 0 auto; width: 190px; }
  .flow-core::before, .flow-core::after { content: ''; position: absolute; left: 50%; width: 1.5px; height: 26px; background: linear-gradient(var(--blue), transparent); }
  .flow-core::before { top: -26px; background: linear-gradient(transparent, var(--blue)); }
  .flow-core::after { bottom: -26px; }
  .nodes { grid-template-columns: 1fr 1fr; gap: 8px; }
  .node { padding: 14px 14px; border-radius: 14px; }
  .node-name { font-size: 19px; }
  .node-tag { font-size: 9.5px; }
  .node:hover, .node.on, .flow-col:last-child .node:hover { transform: none; }
  .traffic-points { grid-template-columns: 1fr; margin-top: 44px; }
  .traffic-points > div + div { padding-left: 0; border-left: 0; }
  .traffic-points > div { padding: 18px 0; border-bottom: 1px solid var(--line-2); }
}

/* services: core service highlighted */
.svc-row.key h3 { color: var(--blue); }
.svc-row.key .k { color: var(--blue); }
.svc-row.key::after { content: 'Core'; position: absolute; right: 64px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #000; background: var(--blue); padding: 4px 9px; border-radius: 999px; }
@media (max-width: 900px) { .svc-row.key::after { right: 40px; } }
@media (max-width: 900px) { .flow-core { width: 220px; } .core-sub { font-size: 8.5px; } }

/* ---- Engine v2: beam-bordered card + travelling arrows ---- */
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.flow-core { width: auto; aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; }
.flow-core::before, .flow-core::after { content: none !important; }
.core-ring { display: none; }
.core-card { position: relative; isolation: isolate; width: clamp(240px, 22vw, 300px); padding: 30px 26px 26px; border-radius: 26px; background: #06080b; text-align: center;
  display: grid; gap: 10px; justify-items: center; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 90px -30px rgba(0,175,240,.45); }
.core-card::before { content: ''; position: absolute; inset: -1.5px; border-radius: 27.5px; z-index: -1;
  background: conic-gradient(from var(--beam), transparent 0deg, transparent 250deg, rgba(0,175,240,.25) 300deg, #00aff0 345deg, transparent 360deg);
  animation: beam 3.2s linear infinite; }
.core-card::after { content: ''; position: absolute; inset: 0; border-radius: 26px; z-index: -1; background: radial-gradient(120% 80% at 50% 0%, rgba(0,175,240,.16), transparent 60%), #06080b; }
@keyframes beam { to { --beam: 360deg; } }
.core-k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: 8px; }
.core-k::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.core-name { font-size: clamp(26px, 2.4vw, 34px); }
.core-stages { position: relative; height: 34px; width: 100%; overflow: hidden; }
.core-stages span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; font-weight: 500; letter-spacing: -0.03em; color: var(--fg);
  opacity: 0; transform: translateY(100%); filter: blur(6px); transition: opacity .5s var(--ease), transform .6s var(--ease), filter .5s; }
.core-stages span.on { opacity: 1; transform: none; filter: none; }
.core-stages span.out { opacity: 0; transform: translateY(-100%); filter: blur(6px); }
.core-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.core-bars i { height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; position: relative; }
.core-bars i::after { content: ''; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.core-bars i.done::after { transform: scaleX(1); }
.core-bars i.run::after { animation: fillbar var(--stage, 1.8s) linear forwards; }
@keyframes fillbar { to { transform: scaleX(1); } }

/* travelling arrows along connectors (desktop) */
.flow-lines .pulse { stroke-dasharray: none; animation: none; stroke-width: 1.5; opacity: .5; filter: none; }
.flow-arrow { position: absolute; left: 0; top: 0; width: 18px; height: 18px; color: var(--blue); pointer-events: none; z-index: 2;
  offset-rotate: auto; offset-anchor: center; animation: travel 2.6s cubic-bezier(.45,0,.55,1) infinite; filter: drop-shadow(0 0 6px rgba(0,175,240,.9)); opacity: 0; }
.flow-arrow svg { width: 100%; height: 100%; display: block; }
@keyframes travel { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.flow-arrow.dim { opacity: .15 !important; animation-play-state: running; }

/* cascading chevrons (mobile) */
.m-arrows { display: none; }
@media (max-width: 900px) {
  .m-arrows { display: grid; justify-items: center; gap: 0; padding: 10px 0; color: var(--blue); }
  .m-arrows i { width: 22px; height: 14px; display: grid; place-items: center; opacity: .15; animation: cascade 1.4s ease-in-out infinite; }
  .m-arrows i svg { width: 22px; height: 22px; }
  .m-arrows i:nth-child(2) { animation-delay: .2s; }
  .m-arrows i:nth-child(3) { animation-delay: .4s; }
  .core-card { width: min(300px, 86vw); }
}
@keyframes cascade { 0%, 100% { opacity: .15; transform: translateY(-2px); } 40% { opacity: 1; transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .core-card::before, .flow-arrow, .m-arrows i, .core-k::before { animation: none; } .flow-arrow { display: none; } }

/* ---- HERO v4: film first, centered, static (no scroll zoom) ---- */
.hero { height: auto; }
.hero-sticky { position: relative; height: auto; min-height: 100svh; overflow: visible; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 120px var(--gutter) 90px; }
.hero-film { position: relative; left: auto; top: auto; transform: none; margin: 0 0 64px; width: min(1080px, 72vw); height: auto; aspect-ratio: 16 / 9; order: -1; border-radius: 28px; }
.hero-head { position: relative; top: auto; padding: 0; }
.hero h1 { font-size: clamp(56px, 8.4vw, 168px); }
.hero .glow { top: 32%; }
.hero-cta-m { display: flex; justify-content: center; gap: 12px; margin-top: 34px; }
.hero-scroll, .hero-meta { display: none; }
@media (max-width: 900px) {
  .hero-sticky { min-height: 0; align-items: stretch; padding: 86px var(--gutter) 64px; }
  .hero-film { width: 100%; margin: 0 0 34px; border-radius: 18px; }
  .hero-cta-m { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .hero-sticky { align-items: center; text-align: center; }
  .hero-head { text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta-m { justify-content: center; }
}
@media (min-width: 901px) {
  .hero-film { width: min(980px, 58vw, 92vh); margin-bottom: 48px; }
  .hero-sticky { padding-top: 110px; }
  .hero h1 { font-size: clamp(56px, min(7.4vw, 14vh), 150px); }
}

/* ---- Hero type: same as the wordmark (Anton, bold condensed, white→grey gradient) ---- */
.hero h1 { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.96; }
.hero h1 .wd {
  background: linear-gradient(180deg, #ffffff 0%, #8c8c8c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  padding-top: .04em;
}
.hero h1 .blue .wd { background: none; -webkit-text-fill-color: var(--blue); color: var(--blue); }
.hero h1 .blue { font-family: 'Anton', sans-serif; letter-spacing: 0.01em; }
.hero-sub { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.35;
  font-size: clamp(17px, 1.5vw, 24px); color: rgba(255,255,255,.55); max-width: 760px; }
.hero-sub b { font-weight: 400; color: #fff; }
@media (min-width: 901px) { .hero h1 { font-size: clamp(72px, min(9.6vw, 16vh), 190px); } }
@media (max-width: 900px) { .hero h1 { font-size: 19vw; } .hero-sub { font-size: 17px; } }
@media (max-width: 900px) { .hero h1 { font-size: 14.6vw; } }
/* hero sub-line back to previous style (Geist) */
.hero-sub { font-family: var(--sans); font-weight: 400; text-transform: none; letter-spacing: -0.005em; line-height: 1.45;
  font-size: clamp(16px, 1.35vw, 20px); color: var(--dim); max-width: 620px; }
.hero-sub b { font-weight: 500; color: var(--fg); }
@media (max-width: 900px) { .hero-sub { font-size: 16px; } }

/* ---- Services: scrolling diagonal chip field (as in the film) ---- */
.services-v2 { padding-top: 0; }
.services-v2 .field-wrap { height: 78vh; min-height: 560px; }
.services-v2 .field-wrap h2 { font-size: clamp(56px, 10vw, 190px); }
.services-v2 .wrap > .eyebrow { margin-top: 40px; }
.services-v2 .svc-list { margin-top: 28px; }
.chip { font-family: var(--sans); font-weight: 500; letter-spacing: -0.02em; height: 58px; font-size: 18px; color: rgba(255,255,255,.7); }
.chip.hot { color: #000; }
.field-vig { background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(0,0,0,.97), rgba(0,0,0,.82) 50%, transparent 82%); }
.services-v2 .field-wrap::before, .services-v2 .field-wrap::after { content: ''; position: absolute; left: 0; right: 0; height: 120px; z-index: 1; pointer-events: none; }
.services-v2 .field-wrap::before { top: 0; background: linear-gradient(#000, transparent); }
.services-v2 .field-wrap::after { bottom: 0; background: linear-gradient(transparent, #000); }
@media (max-width: 900px) {
  .services-v2 .field-wrap { height: 56vh; min-height: 380px; }
  .services-v2 .field-wrap h2 { font-size: 15vw; }
  .chip { height: 46px; font-size: 15px; padding: 0 18px; }
}

/* ---- Hero headline back to the site type (Geist) ---- */
.hero h1 { font-family: var(--sans); font-weight: 500; text-transform: none; letter-spacing: -0.055em; line-height: 0.94; }
.hero h1 .wd { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: inherit; padding-top: 0; }
.hero h1 .blue, .hero h1 .blue .wd { font-family: var(--sans); color: var(--blue); -webkit-text-fill-color: var(--blue); letter-spacing: inherit; }
@media (min-width: 901px) { .hero h1 { font-size: clamp(56px, min(7.4vw, 14vh), 150px); } }
@media (max-width: 900px) { .hero h1 { font-size: 15vw; } }

/* ---- Reframe v2: "content" struck dead-centre → "your system" as the real problem ---- */
.reframe .pre-wrap { position: relative; height: 1.4em; font-size: clamp(20px, 2.4vw, 38px); }
.reframe .pre-wrap .pre { position: absolute; left: 0; right: 0; top: 0; font-size: 1em; }
.reframe .pre-b { color: var(--fg); font-weight: 600; }
.reframe .word .w-inner { position: relative; z-index: 1; display: inline-block; }
.reframe .w-content .strike { position: absolute; left: -4%; width: 108%; top: 0.6em; height: 0.075em; margin-top: -0.0375em; transform: scaleX(0); transform-origin: left center;
  background: var(--blue); border-radius: 0.04em; box-shadow: 0 0 24px rgba(0,175,240,.75); z-index: 2; }
.reframe .w-system .mark { position: absolute; left: -3%; right: -3%; top: 0.24em; bottom: 0.02em; border-radius: 0.06em; background: var(--blue);
  transform: scaleX(0); transform-origin: left center; z-index: 0; box-shadow: 0 0 80px rgba(0,175,240,.45); }
.reframe .w-system .ch { color: var(--fg); }
.reframe .problem-tag { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 18px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(0,175,240,.5); background: rgba(0,175,240,.08); color: var(--blue);
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: 0; }
.reframe .problem-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); animation: blink 1.2s ease-in-out infinite; }
.reframe .post { margin-top: 0; }

/* ---- Mobile engine: same travelling arrows as desktop ---- */
@media (max-width: 900px) {
  .flow { gap: 72px; }
  .flow-lines { display: block; }
  .m-arrows { display: none !important; }
  .flow > .flow-col:first-of-type .nodes { row-gap: 40px; }
  .flow-arrow { width: 16px; height: 16px; z-index: 0; }
  .flow-col, .flow-core { position: relative; z-index: 1; }
}

/* ---- "system." glitch / malfunction ---- */
.reframe .w-system .gl { position: absolute; left: 0; top: 0; z-index: 2; white-space: nowrap; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.reframe .w-system .g1 { color: #ff2d55; }
.reframe .w-system .g2 { color: #00f0ff; }
.reframe.sys-on .w-system .g1 { animation: glitch-a 2.4s steps(1) infinite; }
.reframe.sys-on .w-system .g2 { animation: glitch-b 2.4s steps(1) infinite; }
.reframe.sys-on .w-system .w-inner { animation: glitch-main 2.4s steps(1) infinite; }
.reframe.sys-on .w-system .mark { animation: glitch-mark 2.4s steps(1) infinite; }
@keyframes glitch-a {
  0%, 100% { opacity: 0; }
  2% { opacity: 1; transform: translate(-0.07em, 0); clip-path: inset(18% 0 52% 0); }
  5% { opacity: 1; transform: translate(0.08em, 0); clip-path: inset(60% 0 12% 0); }
  8% { opacity: 1; transform: translate(-0.04em, 0); clip-path: inset(35% 0 40% 0); }
  11% { opacity: 0; }
  48% { opacity: 1; transform: translate(0.06em, 0); clip-path: inset(8% 0 70% 0); }
  51% { opacity: 1; transform: translate(-0.09em, 0); clip-path: inset(55% 0 20% 0); }
  54% { opacity: 0; }
  80% { opacity: 1; transform: translate(-0.05em, 0); clip-path: inset(25% 0 45% 0); }
  83% { opacity: 0; }
}
@keyframes glitch-b {
  0%, 100% { opacity: 0; }
  2% { opacity: 1; transform: translate(0.06em, 0); clip-path: inset(52% 0 18% 0); }
  5% { opacity: 1; transform: translate(-0.06em, 0); clip-path: inset(12% 0 60% 0); }
  8% { opacity: 1; transform: translate(0.08em, 0); clip-path: inset(40% 0 35% 0); }
  11% { opacity: 0; }
  48% { opacity: 1; transform: translate(-0.07em, 0); clip-path: inset(70% 0 8% 0); }
  51% { opacity: 1; transform: translate(0.05em, 0); clip-path: inset(20% 0 55% 0); }
  54% { opacity: 0; }
  80% { opacity: 1; transform: translate(0.08em, 0); clip-path: inset(45% 0 25% 0); }
  83% { opacity: 0; }
}
@keyframes glitch-main {
  0%, 11%, 54%, 83%, 100% { transform: none; }
  2% { transform: translateX(-0.025em) skewX(-8deg); }
  5% { transform: translateX(0.03em) skewX(6deg); }
  48% { transform: translateX(0.02em) skewX(-5deg); }
  80% { transform: translateX(-0.03em) skewX(7deg); }
}
@keyframes glitch-mark {
  0%, 11%, 54%, 83%, 100% { opacity: 1; }
  2%, 5%, 48%, 80% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .reframe.sys-on .w-system .gl, .reframe.sys-on .w-system .w-inner, .reframe.sys-on .w-system .mark { animation: none; } }

/* ---- Privacy & protection (single, confident section) ---- */
.pv-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid var(--line-2); }
.pv { position: relative; padding: 32px 32px 40px 0; display: grid; gap: 10px; align-content: start; }
.pv + .pv { padding-left: 32px; border-left: 1px solid var(--line-2); }
.pv-k { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--blue); }
.pv h3 { font-weight: 500; font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -0.045em; line-height: 1.05; margin-top: 8px; }
.pv p { color: var(--dim); font-size: 16px; max-width: 300px; }
.pv-line { position: absolute; left: 0; right: 0; top: -1px; height: 1.5px; background: var(--blue); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px rgba(0,175,240,.6); }
.pv + .pv .pv-line { left: 0; }
@media (max-width: 900px) {
  .pv-grid { grid-template-columns: 1fr; margin-top: 34px; }
  .pv, .pv + .pv { padding: 24px 0 26px; border-left: 0; border-bottom: 1px solid var(--line-2); }
}

/* ---- Footer email: subtle ---- */
.footer-mail { display: inline-block; margin-top: 22px; font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--dim); transition: color .3s; }
.footer-mail:hover { color: var(--fg); }
.footer-mail::after { height: 1px; bottom: -3px; }
@media (max-width: 900px) { .footer-mail { font-size: 14px; margin-top: 18px; } }

/* ---- Section divider (hero → core service) ---- */
.divider { position: relative; display: flex; align-items: center; gap: 18px; max-width: 1360px; margin: 0 auto; padding: 10px var(--gutter); }
.dv-line { position: relative; flex: 1; height: 1px; overflow: hidden; }
.dv-line.l { background: linear-gradient(90deg, transparent, rgba(255,255,255,.22)); transform-origin: right center; }
.dv-line.r { background: linear-gradient(270deg, transparent, rgba(255,255,255,.22)); transform-origin: left center; }
.dv-line::after { content: ''; position: absolute; top: 0; width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--blue), transparent); box-shadow: 0 0 10px var(--blue); }
.dv-line.l::after { left: -120px; animation: dv-in-l 3.2s cubic-bezier(.45,0,.55,1) infinite; }
.dv-line.r::after { right: -120px; animation: dv-in-r 3.2s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes dv-in-l { to { left: 100%; } }
@keyframes dv-in-r { to { right: 100%; } }
.dv-core { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 14px var(--blue); flex: none; }
.dv-core::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(0,175,240,.5); animation: ping 2.4s var(--ease) infinite; }
.hero-sticky { min-height: 0; padding-bottom: 72px; }
@media (min-width: 901px) { .hero-sticky { min-height: 92vh; } }
@media (prefers-reduced-motion: reduce) { .dv-line::after, .dv-core::after { animation: none; } }

/* ---- Footer email: brand blue + light sweep ---- */
.footer-mail {
  color: transparent;
  background: linear-gradient(100deg, var(--blue) 0%, var(--blue) 40%, #d9f4ff 50%, var(--blue) 60%, var(--blue) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: mail-sweep 3.6s cubic-bezier(.45,0,.55,1) infinite;
  font-weight: 500;
}
.footer-mail:hover { color: transparent; }
.footer-mail::after { background: var(--blue); height: 1px; bottom: -4px; box-shadow: 0 0 8px rgba(0,175,240,.7); }
@keyframes mail-sweep { 0%, 55% { background-position: 100% 0; } 100% { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .footer-mail { animation: none; } }

/* ---- Loader WOW: 3D letters, light sweep, glitch, underline ---- */
.loader .lw { position: relative; display: inline-block; perspective: 700px; }
.loader .lw .wordmark { font-size: clamp(48px, 11vw, 190px); line-height: 1.05; white-space: nowrap; }
.loader .lw-shine, .loader .lw-g { position: absolute; left: 0; top: 0; pointer-events: none; }
.loader .lw-shine {
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.95) 48%, rgba(170,225,255,.9) 52%, transparent 62%);
  background-size: 300% 100%; background-position: 160% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 12px rgba(0,175,240,.6));
}
.loader .lw-g { opacity: 0; background: none; -webkit-text-fill-color: currentColor; mix-blend-mode: screen; }
.loader .lw-g.g1 { color: #ff2d55; }
.loader .lw-g.g2 { color: #00f0ff; }
.loader .lw-line { position: absolute; left: 4%; right: 4%; bottom: -14px; height: 2px; border-radius: 2px; background: var(--blue);
  transform: scaleX(0); box-shadow: 0 0 18px rgba(0,175,240,.9), 0 0 2px #fff; }

/* ---- CTA: original glitch logo under Ready to scale ---- */
.cta-logo { position: relative; width: clamp(180px, 20vw, 260px); margin: 64px auto 0; }
.cta-logo img { width: 100%; height: auto; display: block; animation: logo-jolt 3s steps(1) infinite; }
@keyframes logo-jolt {
  0%, 100% { transform: none; filter: none; }
  6% { transform: translateX(-4px) skewX(-4deg); filter: drop-shadow(3px 0 0 rgba(255,45,85,.7)) drop-shadow(-3px 0 0 rgba(0,240,255,.7)); }
  9% { transform: translateX(5px) skewX(3deg); filter: drop-shadow(-4px 0 0 rgba(255,45,85,.7)) drop-shadow(4px 0 0 rgba(0,240,255,.7)); }
  12% { transform: none; filter: none; }
  58% { transform: translateX(3px); filter: drop-shadow(2px 0 0 rgba(255,45,85,.6)) drop-shadow(-2px 0 0 rgba(0,240,255,.6)); }
  61% { transform: none; filter: none; }
}
@media (max-width: 900px) { .cta-logo { margin-top: 48px; width: 180px; } }
@media (prefers-reduced-motion: reduce) { .cta-logo img { animation: none; } }
.cta-logo { width: clamp(240px, 26vw, 340px); margin-top: 40px; }
@media (max-width: 900px) { .cta-logo { width: 250px; margin-top: 28px; } }

/* ---- CTA logo WOW entrance ---- */
.cta-logo { perspective: 800px; }
.cta-logo img { animation: none; }
.cta-logo.live img { animation: logo-jolt 3s steps(1) infinite; }
.cta-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.95) 48%, rgba(170,225,255,.9) 52%, transparent 62%);
  background-size: 300% 100%; background-position: 160% 0;
  -webkit-mask: url(logo-glitch.webp) center / contain no-repeat; mask: url(logo-glitch.webp) center / contain no-repeat; }
.cta-line { position: absolute; left: 22%; right: 22%; bottom: 14%; height: 2px; border-radius: 2px; background: var(--blue);
  transform: scaleX(0); box-shadow: 0 0 16px rgba(0,175,240,.9), 0 0 2px #fff; }
.cta-line { bottom: -4px; left: 26%; right: 26%; }
/* CTA logo: no jolt / 3D — simple loop handled in JS */
.cta-logo img, .cta-logo.live img { animation: none; }

/* ---- Loader: original logo above the wordmark ---- */
.loader-stack { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.loader-logo { width: clamp(140px, 15vw, 210px); height: auto; opacity: 0; }
@media (max-width: 900px) { .loader-logo { width: 150px; } }

/* ---- Loader wordmark: iridescent liquid chrome ---- */
.loader .lw > .wordmark:first-child {
  filter: drop-shadow(0 0 1px rgba(255,255,255,.85)) drop-shadow(0 0 14px rgba(140,90,255,.45)) drop-shadow(0 0 28px rgba(0,200,255,.28));
}
.loader .lw > .wordmark:first-child .ch {
  background: linear-gradient(180deg,
    #ffffff 0%, #bfeaff 8%, #2a3550 22%, #0a0d16 34%, #12d6ff 46%, #7a5cff 56%, #3dffa8 64%,
    #0b0f18 76%, #2b2140 84%, #e6dcff 93%, #ffffff 100%);
  background-size: 100% 220%;
  background-position: 0 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  -webkit-text-stroke: 1px rgba(235,240,255,.55);
  animation: chrome-flow 3.2s ease-in-out infinite alternate;
}
.loader .lw > .wordmark:first-child .ch:nth-child(odd) { animation-delay: -.6s; }
.loader .lw > .wordmark:first-child .ch:nth-child(3n) { animation-delay: -1.4s; }
@keyframes chrome-flow { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }
.loader .spark { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; opacity: 0; z-index: 3;
  background:
    radial-gradient(circle, #fff 0 2px, rgba(200,170,255,.9) 3px, transparent 7px),
    linear-gradient(90deg, transparent 0 46%, rgba(255,255,255,.95) 50%, transparent 54%) center / 100% 2px no-repeat,
    linear-gradient(0deg, transparent 0 46%, rgba(255,255,255,.95) 50%, transparent 54%) center / 2px 100% no-repeat;
  filter: drop-shadow(0 0 6px rgba(160,120,255,.9)) drop-shadow(0 0 10px rgba(0,200,255,.6));
  animation: spark 2.2s ease-in-out infinite; animation-delay: 1.1s; }
@keyframes spark { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 45% { opacity: 1; transform: scale(1.1) rotate(45deg); } 60% { opacity: .9; transform: scale(.9) rotate(60deg); } }
@media (prefers-reduced-motion: reduce) { .loader .lw > .wordmark:first-child .ch, .loader .spark { animation: none; } }

/* ---- Loader wordmark: polished silver chrome (overrides iridescent) ---- */
.loader .lw > .wordmark:first-child {
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 -1px 0 rgba(0,0,0,.9)) drop-shadow(0 10px 18px rgba(0,0,0,.85));
}
.loader .lw > .wordmark:first-child .ch {
  background: linear-gradient(180deg,
    #ffffff 0%, #f4f4f6 12%, #cfd0d4 26%, #8d8f95 40%, #3a3b3f 49%, #1d1e21 51%,
    #e9eaee 53%, #ffffff 60%, #c4c6cb 74%, #8a8c92 86%, #d9dadf 96%, #ffffff 100%);
  background-size: 100% 100%;
  background-position: 0 0;
  -webkit-text-stroke: 1px rgba(255,255,255,.75);
  animation: none;
}
.loader .spark {
  background:
    radial-gradient(circle, #fff 0 2px, rgba(255,255,255,.7) 3px, transparent 7px),
    linear-gradient(90deg, transparent 0 46%, #fff 50%, transparent 54%) center / 100% 2px no-repeat,
    linear-gradient(0deg, transparent 0 46%, #fff 50%, transparent 54%) center / 2px 100% no-repeat;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.9));
}
.loader .lw > .wordmark:first-child .ch { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ---- Silver chrome with OnlyFans-blue reflections ---- */
.loader .lw > .wordmark:first-child {
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 -1px 0 rgba(0,0,0,.9)) drop-shadow(0 0 14px rgba(0,175,240,.35)) drop-shadow(0 10px 18px rgba(0,0,0,.85));
}
.loader .lw > .wordmark:first-child .ch {
  background-image: linear-gradient(180deg,
    #ffffff 0%, #e9f7ff 10%, #b9e6fb 22%, #6f8fa3 38%, #1b2a33 48%, #071019 51%,
    #00aff0 53%, #7fd9ff 58%, #ffffff 63%, #bfc8d0 76%, #3fb8ec 87%, #d8f2ff 95%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  -webkit-text-stroke: 1px rgba(220,245,255,.8);
}
.loader .spark { filter: drop-shadow(0 0 6px rgba(255,255,255,.9)) drop-shadow(0 0 10px rgba(0,175,240,.8)); }

/* ---- Loader wordmark: original type & colour + blue marker (no glitch, no chrome) ---- */
.loader .lw > .wordmark[data-chars] { position: relative; z-index: 1; filter: drop-shadow(0 4px 14px rgba(0, 30, 55, .45)); }
.loader .lw > .wordmark[data-chars] .ch {
  background: linear-gradient(180deg, #ffffff 0%, #8c8c8c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  -webkit-text-stroke: 0; animation: none;
}
.loader .lw-mark { position: absolute; left: -3%; right: -3%; top: 0.24em; bottom: 0.02em; z-index: 0; font-size: clamp(48px, 11vw, 190px);
  border-radius: 0.06em; background: var(--blue); transform: scaleX(0); transform-origin: left center; box-shadow: 0 0 80px rgba(0,175,240,.45); }
.loader .lw-g, .loader .lw-line, .loader .spark { display: none; }
.loader .lw-shine { z-index: 2; }

/* ---- Loader: original logo only, stylish entrance ---- */
.loader .ll { position: relative; width: clamp(200px, 22vw, 300px); aspect-ratio: 1; display: grid; place-items: center; }
.loader .ll .loader-logo { width: 100%; height: 100%; opacity: 0; position: relative; z-index: 1; }
.loader .ll-ring { position: absolute; inset: 18%; border-radius: 50%; border: 1.5px solid rgba(0,175,240,.7); box-shadow: 0 0 30px rgba(0,175,240,.45), inset 0 0 20px rgba(0,175,240,.25); opacity: 0; z-index: 0; }
.loader .ll-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.95) 48%, rgba(170,225,255,.9) 52%, transparent 62%);
  background-size: 300% 100%; background-position: 160% 0;
  -webkit-mask: url(logo-glitch.webp) center / contain no-repeat; mask: url(logo-glitch.webp) center / contain no-repeat; }
@media (max-width: 900px) { .loader .ll { width: 220px; } }

/* mobile: drop the whole pain → reframe sequence (desktop keeps it) */
@media (max-width: 900px) {
  .reframe { display: none; }
}

/* compact final CTA (no full-screen height) */
.cta { min-height: 0; padding: clamp(110px, 16vh, 170px) 0 clamp(100px, 14vh, 150px); }
@media (max-width: 900px) { .cta { padding: 72px 0 80px; } }
.cta .glow { width: min(1100px, 140vw); height: 100%; top: 0; transform: translateX(-50%); }

/* hero: slightly more compact */
.hero h1 { line-height: 0.9; }
.hero-sub { margin-top: 14px; }
.hero-cta-m { margin-top: 24px; }
@media (max-width: 900px) { .hero-sub { margin-top: 12px; } .hero-cta-m { margin-top: 20px; } }

/* brand glyphs (monochrome, per platform guidelines) */
.brand { width: 1em; height: 1em; flex: none; display: block; }
.node-name { display: inline-flex; align-items: center; gap: .45em; }
.node-name .brand { width: .78em; height: .78em; color: var(--fg); opacity: .9; transition: filter .35s, opacity .35s; }
.node:hover .node-name .brand, .node.on .node-name .brand { opacity: 1; filter: drop-shadow(0 0 8px rgba(0,175,240,.85)); }
.svc-brands { display: inline-flex; gap: 14px; margin-left: 22px; vertical-align: middle; transform: translateY(-.06em); }
.svc-brands .brand { width: 22px; height: 22px; color: var(--faint); transition: color .35s, transform .5s var(--ease); }
.svc-row:hover .svc-brands .brand { color: var(--fg); }
.svc-row:hover .svc-brands .brand:nth-child(2) { transition-delay: .05s; }
.svc-row:hover .svc-brands .brand:nth-child(3) { transition-delay: .1s; }
@media (max-width: 900px) {
  .svc-brands { display: flex; margin: 10px 0 0; gap: 12px; transform: none; }
  .svc-brands .brand { width: 16px; height: 16px; color: var(--dim); }
}
/* platform names: a notch smaller, balanced with the glyphs */
.node-name { font-size: clamp(17px, 1.35vw, 21px); }
.flow-col:first-of-type .node-name .brand { width: .9em; height: .9em; }
@media (max-width: 900px) { .node-name { font-size: 16px; } }

/* hero: "lead." and "cash out." in bold */
.hero h1 .bd, .hero h1 .blue { font-weight: 700; }

/* supporting copy → Geist Mono uppercase (option 1) */
.hero-sub, .cta-sub, .traffic-lead, .reframe .post, .svc-row p, .pv p, .pstep p, .faq-a p, .note {
  font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; line-height: 1.7; font-size: 13px; }
.hero-sub b, .cta-sub b, .traffic-lead b, .faq-a b { font-weight: 400; color: var(--fg); }
.hero-sub { max-width: 500px; }
.faq-a p { font-size: 12.5px; line-height: 1.8; }
@media (min-width: 901px) { .hero-sub, .cta-sub, .traffic-lead, .reframe .post { font-size: 14px; } }
.hero-sub, .cta-sub, .traffic-lead, .reframe .post, .note { text-wrap: balance; }
.cta-sub { padding: 0 var(--gutter); }

/* account recovery section */
@media all {
  .recovery-m { display: block; padding-top: 24px; }
  .recovery-m .h2 { margin-top: 22px; }
  .rec-sub { margin-top: 18px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; line-height: 1.7; color: var(--dim); text-wrap: balance; }
  .rec-sub b { font-weight: 400; color: var(--fg); }
  .rec-plats { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .rec-plats li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
  .rec-plats .brand { width: 22px; height: 22px; color: var(--fg); filter: drop-shadow(0 0 10px rgba(0,175,240,.35)); }
}

/* account recovery — "banned → restored" sequence */
@media all {
  .rec-plats li.rp { position: relative; overflow: hidden; gap: 8px; padding: 20px 6px 14px; isolation: isolate; }
  .rp::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: conic-gradient(from var(--beam), transparent 0 70%, var(--blue) 85%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; }
  .rp-ico { position: relative; width: 30px; height: 30px; display: grid; place-items: center; }
  .rp-ico > .brand, .rp-gl .brand { width: 26px; height: 26px; }
  .rp-ico > .brand { color: var(--fg); opacity: .22; filter: grayscale(1) blur(1.5px); transition: opacity .5s, filter .6s; }
  .rp-gl { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; mix-blend-mode: screen; pointer-events: none; }
  .rp-gl.g1 .brand { color: #ff2d55; } .rp-gl.g2 .brand { color: #00f0ff; }
  .rp-cut { position: absolute; left: -4px; right: -4px; top: 50%; height: 1.5px; background: #ff3b4e; transform: rotate(-38deg) scaleX(1); border-radius: 2px;
    box-shadow: 0 0 8px rgba(255,59,78,.6); transition: transform .45s cubic-bezier(.7,0,.3,1); }
  .rp-wave { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 1.5px solid var(--blue); opacity: 0; transform: scale(.4); }
  .rp-scan { position: absolute; left: 0; right: 0; top: 0; height: 40%; transform: translateY(-110%); pointer-events: none; z-index: -1;
    background: linear-gradient(180deg, transparent, rgba(0,175,240,.18) 70%, rgba(0,175,240,.9) 98%, transparent); }
  .rp-name { color: var(--dim); transition: color .4s; }
  .rp-st { position: relative; display: grid; height: 14px; overflow: hidden; font-size: 9px; letter-spacing: .12em; }
  .rp-st > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: transform .5s cubic-bezier(.7,0,.3,1), opacity .4s; }
  .rp-st .off { color: #ff5a6a; }
  .rp-st .on { color: var(--blue); transform: translateY(110%); opacity: 0; }
  .rp-st .on i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); }

  /* restore sequence (class added on scroll, staggered per card) */
  .rp.go .rp-scan { animation: rp-scan .9s cubic-bezier(.6,0,.2,1) forwards; }
  .rp.go .rp-gl.g1 { animation: rp-gl1 .5s steps(1) .45s 1; }
  .rp.go .rp-gl.g2 { animation: rp-gl2 .5s steps(1) .45s 1; }
  .rp.go .rp-ico > .brand { animation: rp-jolt .5s steps(1) .45s 1; }
  .rp.done .rp-ico > .brand { opacity: 1; filter: grayscale(0) blur(0) drop-shadow(0 0 10px rgba(0,175,240,.55)); }
  .rp.done .rp-cut { transform: rotate(-38deg) scaleX(0); }
  .rp.done .rp-wave { animation: rp-wave 1.1s cubic-bezier(.2,.7,.3,1) forwards; }
  .rp.done .rp-name { color: var(--fg); }
  .rp.done .rp-st .off { transform: translateY(-110%); opacity: 0; }
  .rp.done .rp-st .on { transform: none; opacity: 1; }
  .rp.done { border-color: rgba(0,175,240,.35); transition: border-color .6s; }
  .rp.done::after { animation: rp-beam 1.4s cubic-bezier(.4,0,.2,1) forwards; }
}
@keyframes rp-scan { 0% { transform: translateY(-110%); } 100% { transform: translateY(260%); } }
@keyframes rp-wave { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes rp-beam { 0% { --beam: 0deg; opacity: 1; } 85% { opacity: 1; } 100% { --beam: 360deg; opacity: 0; } }
@keyframes rp-jolt { 0% { transform: translate(2px,0) skewX(8deg); opacity: .8; } 25% { transform: translate(-3px,1px); opacity: .3; } 50% { transform: translate(1px,-1px) skewX(-6deg); opacity: 1; } 75% { transform: translate(-1px,0); opacity: .6; } 100% { transform: none; } }
@keyframes rp-gl1 { 0% { opacity: .9; transform: translate(-3px,0); clip-path: inset(10% 0 55% 0); } 33% { opacity: .9; transform: translate(3px,1px); clip-path: inset(60% 0 5% 0); } 66% { opacity: .7; transform: translate(-2px,0); clip-path: inset(30% 0 40% 0); } 100% { opacity: 0; } }
@keyframes rp-gl2 { 0% { opacity: .9; transform: translate(3px,0); clip-path: inset(50% 0 20% 0); } 33% { opacity: .9; transform: translate(-3px,-1px); clip-path: inset(5% 0 70% 0); } 66% { opacity: .7; transform: translate(2px,0); clip-path: inset(70% 0 0 0); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rp .rp-scan, .rp .rp-gl, .rp-wave { display: none; } }

/* account recovery — desktop layout */
@media (min-width: 901px) {
  .recovery-m { padding-top: 40px; }
  .recovery-m .wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 24px 72px; align-items: center; }
  .recovery-m .eyebrow { grid-column: 1; }
  .recovery-m .h2 { grid-column: 1; margin-top: 0; font-size: clamp(56px, 6vw, 104px); }
  .recovery-m .rec-sub { grid-column: 1; font-size: 14px; max-width: 520px; margin-top: 4px; }
  .recovery-m .rec-plats { grid-column: 2; grid-row: 1 / span 3; margin: 0; gap: 16px; }
  .rec-plats li.rp { padding: 40px 12px 26px; gap: 14px; border-radius: 20px; font-size: 12px; }
  .rp-ico { width: 56px; height: 56px; }
  .rp-ico > .brand, .rp-gl .brand { width: 48px; height: 48px; }
  .rp-wave { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .rp-st { height: 16px; font-size: 10.5px; }
}

/* reframe words: center without transform so GSAP x/y tweens can't offset them */
.reframe .word { left: 50%; transform: translateX(-50%); } /* JS re-applies this as GSAP xPercent */

/* =========================================================
   Loader v3 — "signal lock" (slices + focus brackets, no glow)
   ========================================================= */
.loader { background: #000; }
.loader .ll { position: relative; width: clamp(220px, 24vw, 330px); aspect-ratio: 1; display: block; }
.loader .ll .loader-logo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0 !important; visibility: hidden; }
.ll-slices { position: absolute; inset: 0; }
.ll-sl { position: absolute; inset: 0; background: url(logo-glitch.webp) center / contain no-repeat; opacity: 0; will-change: transform; }
.ll-br { position: absolute; width: 18px; height: 18px; border: 0 solid var(--blue); opacity: 0; }
.ll-br.tl { left: 14%; top: 8%; border-left-width: 1.5px; border-top-width: 1.5px; transform-origin: 100% 100%; }
.ll-br.tr { right: 14%; top: 8%; border-right-width: 1.5px; border-top-width: 1.5px; transform-origin: 0 100%; }
.ll-br.bl { left: 14%; bottom: 8%; border-left-width: 1.5px; border-bottom-width: 1.5px; transform-origin: 100% 0; }
.ll-br.br { right: 14%; bottom: 8%; border-right-width: 1.5px; border-bottom-width: 1.5px; transform-origin: 0 0; }
.loader-meta { position: absolute; top: var(--gutter); left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.loader-meta span:first-child { color: var(--fg); }
.loader-tag { position: absolute; left: var(--gutter); bottom: calc(var(--gutter) + 2px); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.loader-tag::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--blue); vertical-align: 1px; animation: blink 1.2s ease-in-out infinite; }
.loader-count { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--fg); bottom: calc(var(--gutter) + 2px); }
.loader-bar { height: 1px; }
@media (max-width: 900px) { .loader-meta span:last-child { display: none; } }

/* footer email in the supporting-copy type (Geist Mono uppercase) */
.footer-mail { font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
@media (max-width: 900px) { .footer-mail { font-size: 12px; } }
.footer-nav { font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }

/* results cards: key figure bold (like "lead." / "cash out."), quote in the supporting-copy type */
.tcard .res { font-weight: 700; }
.tcard q { font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; line-height: 1.75; color: var(--dim); }
.tcard .who span { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .06em; }

/* =========================================================
   Loader — EXPECTNOLESS wordmark (same as the end of the launch video)
   ========================================================= */
.loader .lwm { position: relative; display: inline-block; perspective: 900px; font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.04em; line-height: 1.05; font-size: clamp(46px, 11vw, 190px); white-space: nowrap; }
.loader .lwm-c { display: inline-block; }
.loader .lwm-c .ch { display: inline-block; white-space: pre; background: linear-gradient(180deg, #ffffff 0%, #8c8c8c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-top: .04em; }
.loader .lwm-sh, .loader .lwm-g { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; opacity: 0; padding-top: .04em; }
.loader .lwm-sh { background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.95) 48%, rgba(170,225,255,.9) 52%, transparent 62%);
  background-size: 300% 100%; background-position: 160% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.loader .lwm-g { mix-blend-mode: screen; }
.loader .lwm-g.g1 { color: #ff2d55; } .loader .lwm-g.g2 { color: #00f0ff; }
.loader .lwm-line { position: absolute; left: 4%; right: 4%; bottom: -0.05em; height: max(2px, .025em); border-radius: 3px; background: var(--blue);
  transform: scaleX(0); transform-origin: center; box-shadow: 0 0 22px rgba(0,175,240,.85); }
.loader-stack { display: grid; place-items: center; height: 100%; }
.loader-stack { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.loader .lwm-tag { margin-top: .9em; font-family: 'Inter Tight', 'Geist', sans-serif; font-weight: 700; letter-spacing: -0.03em; color: #fff; opacity: 0;
  font-size: clamp(17px, 3.2vw, 56px); text-align: center; padding: 0 var(--gutter); text-wrap: balance; }

/* process steps — slot-machine reels */
.pstep .reel { display: inline-block; height: 1.12em; line-height: 1.12em; overflow: hidden; vertical-align: top; }
.pstep .reel-s { display: flex; flex-direction: column; will-change: transform; }
.pstep .reel-s > span { display: block; height: 1.12em; white-space: nowrap; }
.pstep h3 { line-height: 1.12; }
.pstep .k .reel { height: 1.3em; line-height: 1.3em; } .pstep .k .reel-s > span { height: 1.3em; }

/* process phone — denser dashboard screens */
.screen.dense { padding: 58px 16px 16px; display: flex; flex-direction: column; gap: 7px; }
.screen.dense .sbar { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--fg); margin-bottom: 2px; }
.screen.dense .sbar .hi { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.screen.dense .ttl { font-size: 27px; margin: 0 0 4px; }
.screen.dense .row { height: 50px; margin: 0; padding: 0 12px; border-radius: 14px; gap: 10px; }
.screen.dense .row .n { font-size: 13px; }
.screen.dense .row .p { font-size: 11px; }
.screen.dense .row .av { width: 30px; height: 30px; }
.screen.dense .tick { width: 22px; height: 22px; } .screen.dense .tick svg { width: 11px; height: 11px; }
.screen.dense .tm { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--dim); }
.screen.dense .up { color: var(--blue); }
.screen.dense .center { margin-top: 2px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.prog { border: 1px solid var(--line); background: var(--card-2); border-radius: 14px; padding: 10px 12px; }
.prog .pl { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); margin-bottom: 7px; } .prog .pl b { color: var(--fg); font-weight: 600; }
.pb, .bar > i { display: block; height: 5px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.pb .fill, .bar > i > i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: var(--blue); box-shadow: 0 0 10px rgba(0,175,240,.7); transform-origin: left; }
.tl3 { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.tl3 i { flex: 1; height: 1px; background: var(--line-2); }
.tl3 span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; border: 1px solid var(--faint); vertical-align: 0; }
.tl3 .done { color: var(--fg); } .tl3 .done::before { background: var(--blue); border-color: var(--blue); }
.tl3 .now { color: var(--blue); } .tl3 .now::before { border-color: var(--blue); animation: blink 1.2s ease-in-out infinite; }
.screen.dense .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0; }
.screen.dense .cal i { font-style: normal; text-align: center; font-size: 11px; padding: 6px 0; border-radius: 8px; color: var(--dim); }
.screen.dense .cal i:nth-child(-n+7) { font-family: var(--mono); font-size: 9px; color: var(--faint); padding: 2px 0; }
.screen.dense .cal i.sel { background: var(--blue); color: #000; font-weight: 700; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kpis > div { border: 1px solid var(--line); background: var(--card-2); border-radius: 12px; padding: 8px 9px; display: flex; flex-direction: column; gap: 1px; }
.kpis span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.kpis b { font-size: 17px; font-weight: 600; letter-spacing: -.03em; color: var(--fg); }
.kpis em { font-style: normal; font-size: 9.5px; color: var(--dim); }
.chk { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); font-size: 12.5px; color: var(--fg); }
.src { border: 1px solid var(--line); background: var(--card-2); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.src .sl { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.bar { display: grid; grid-template-columns: 62px 1fr 30px; align-items: center; gap: 8px; font-size: 11px; color: var(--dim); }
.bar b { text-align: right; font-weight: 600; color: var(--fg); font-size: 11px; }
.screen.dense .mcard { margin: 0; padding: 12px 14px; }
.screen.dense .mcard .mrow { display: flex; justify-content: space-between; align-items: center; } .screen.dense .mcard .mrow .up { font-family: var(--mono); font-size: 11px; }
.screen.dense .mcard .v { font-size: 36px; }
.screen.dense .mcard svg { height: 40px; }
.screen.dense .tstamp { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--dim); white-space: nowrap; }
.screen.dense .tstamp.up { color: var(--blue); }
.tabbar { position: absolute; left: 12px; right: 12px; bottom: 16px; display: flex; justify-content: space-around; padding: 9px 4px 7px; border-radius: 18px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.tabbar span { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tabbar i { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid currentColor; }
.tabbar span.on { color: var(--blue); } .tabbar span.on i { background: rgba(0,175,240,.18); box-shadow: 0 0 10px rgba(0,175,240,.5); }

/* organic traffic: particle streams replace the arrows */
.flow-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.flow-arrow, .flow-lines .pulse { display: none !important; }
.flow-lines .base { stroke: rgba(255,255,255,.06); }
@media (max-width: 900px) { .flow-lines { display: block; } .m-arrows i { opacity: 0 !important; animation: none; } }
.rev-count { margin: -6px 0 14px; font-size: clamp(30px, 3.4vw, 48px); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(0,175,240,.35); }
@media (max-width: 900px) { .rev-count { font-size: 30px; margin: -4px 0 12px; } }

/* =========================================================
   Loader — retro TV wordmark (option 8): scanlines, RGB fringe, colourful glitch, TV on/off
   ========================================================= */
.loader .lwm-wrap { position: relative; display: inline-block; }
.loader .lwm { transform-origin: 50% 50%; }
.loader .lwm-c { display: inline-block; position: relative; padding-top: .04em;
  background: repeating-linear-gradient(180deg, #f2fbff 0 2px, rgba(170,225,255,.55) 2px 3.5px);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(-2px 0 rgba(255,31,160,.75)) drop-shadow(2px 0 rgba(0,246,255,.75)) drop-shadow(0 0 12px rgba(0,175,240,.75));
  animation: lw-roll 1.6s linear infinite, lw-flick 3.2s steps(1) infinite; }
@keyframes lw-roll { to { background-position: 0 7px; } }
@keyframes lw-flick { 0%, 100% { opacity: 1; } 41% { opacity: .8; } 42% { opacity: 1; } 77% { opacity: .9; } 78% { opacity: 1; } }
.loader .lwm-g { position: absolute; left: 0; top: 0; padding-top: .04em; opacity: 0; mix-blend-mode: screen; -webkit-text-fill-color: currentColor; pointer-events: none; }
.loader .crt-dot { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0%, #bfefff 35%, rgba(0,175,240,.6) 60%, transparent 72%); }
.loader .lwm-sh { display: none; }
.loader .lwm { position: relative; }
@media (prefers-reduced-motion: reduce) { .loader .lwm-c { animation: none; } }
/* revenue block replaces the Premium page / Paying fans cards */
.rev-block { display: flex; flex-direction: column; align-items: flex-start; }
.rev-block .flow-label { margin-bottom: 8px; }
.rev-block .rev-count { margin: 0; font-size: clamp(40px, 4.6vw, 68px); }
.rev-sub { margin-top: 10px; font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; letter-spacing: -.03em; color: var(--fg); }
@media (max-width: 900px) { .rev-block { align-items: center; text-align: center; padding-top: 6px; } .rev-block .rev-count { font-size: 44px; } .rev-sub { font-size: 18px; } }
.loader .lwm-tag .blue { color: var(--blue); -webkit-text-fill-color: var(--blue); }
/* loader: wavy blue underline that draws out from the centre and keeps flowing */
.loader .lwm-wave { position: absolute; left: 3%; right: 3%; bottom: -0.2em; width: 94%; height: .16em; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(0,175,240,.9)); }
.loader .lwm-wave .wv-p { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: wv-flow 1.1s linear infinite; }
.loader .lwm-wave { clip-path: inset(-60% 50% -60% 50%); }
.loader .lwm-wave { overflow: hidden; }
@keyframes wv-flow { to { transform: translateX(-40px); } }
@media (prefers-reduced-motion: reduce) { .loader .lwm-wave .wv-p { animation: none; } }
/* loader: electric underline */
.loader .lwm-elec { filter: drop-shadow(0 0 6px rgba(0,175,240,1)) drop-shadow(0 0 14px rgba(0,175,240,.7)); animation: el-flick .18s steps(2) infinite; }
.loader .lwm-elec .el-glow { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .75; }
.loader .lwm-elec .el-core { fill: none; stroke: #eafaff; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@keyframes el-flick { 50% { opacity: .82; } }
.rev-block .rev-count { font-size: clamp(30px, 3.2vw, 46px); }
@media (max-width: 900px) { .rev-block .rev-count { font-size: 34px; } }
/* more breathing room between sources, engine and revenue (desktop) */
@media (min-width: 901px) { .flow { column-gap: clamp(120px, 16.5vw, 360px); } .rev-block { padding-left: clamp(10px, 1.5vw, 30px); } }
/* engine charge: glow follows the incoming particle flow (--e set from JS) */
.core-card { --e: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 90px -30px rgba(0,175,240,.45), 0 0 calc(20px + 50px * var(--e)) rgba(0,175,240, calc(.1 + .4 * var(--e))), inset 0 0 calc(30px * var(--e)) rgba(0,175,240, calc(.25 * var(--e))); will-change: transform; }
.core-card { transition: transform .07s ease-out; }
.loader .lwm-tag .blue { text-transform: uppercase; }
/* loader: straight blue line that switches on/off together with the wordmark */
.loader .lwm-line.lwm-line-on { display: block; transform: none; bottom: -0.08em; left: 3%; right: 3%; height: max(2px, .028em); }
/* small © next to the loader wordmark */
.loader .lwm-copy { position: absolute; left: 100%; top: .12em; margin-left: .08em; font-family: 'Geist', sans-serif; font-size: .2em; font-weight: 500; line-height: 1; color: #eaf8ff;
  text-shadow: -1px 0 rgba(255,31,160,.7), 1px 0 rgba(0,246,255,.7), 0 0 8px rgba(0,175,240,.8); }
/* revenue column: total on top, the two revenue streams below */
.rev-block { margin-bottom: 18px; }
.rev-nodes .node-name { font-size: clamp(17px, 1.35vw, 21px); }
@media (max-width: 900px) {
  .rev-nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .rev-block { margin-bottom: 14px; }
}
/* revenue column: streams on top, running total below */
.rev-block { margin: 22px 0 0; }
@media (max-width: 900px) { .rev-block { margin: 18px 0 0; } }
@media (max-width: 900px) { .rev-block { margin-top: 58px; } }
@media (min-width: 901px) { .rev-block { margin-top: 46px; } }
/* pricing section */
.pricing-sub { margin-top: 26px; max-width: 640px; font-family: var(--mono); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; line-height: 1.75; color: var(--dim); text-wrap: balance; }
@media (min-width: 901px) { .pricing-sub { font-size: 14px; margin-left: auto; } }

/* revenue as a proper card under the two stream cards */
.rev-block.rev-card { margin: 12px 0 0; padding: 18px 22px 20px; border-radius: 18px; border: 1px solid rgba(0,175,240,.45); text-align: left;
  background: radial-gradient(120% 120% at 0% 0%, rgba(0,175,240,.14), transparent 60%), #06080b; box-shadow: 0 0 40px -10px rgba(0,175,240,.45); display: block; }
.rev-k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.rev-k i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); animation: blink 1.2s ease-in-out infinite; }
.rev-card .rev-count { margin-top: 8px; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; }
@media (max-width: 900px) { .rev-block.rev-card { margin-top: 58px; text-align: center; } .rev-card .rev-count { font-size: 34px; } }
/* loader wordmark: smaller, more refined */
.loader .lwm { font-size: clamp(34px, 6.2vw, 104px); }
@media (max-width: 900px) { .loader .lwm { font-size: 9.6vw; } }

/* =========================================================
   Voice testimonial card (Results)
   ========================================================= */
.vcard { margin-top: 48px; max-width: 880px; border: 1px solid var(--line); border-radius: 26px; background: var(--card); padding: 26px 28px; display: grid; gap: 20px; position: relative; overflow: hidden; transition: border-color .3s; }
.vcard::before { content: ''; position: absolute; inset: -40% -10% auto auto; width: 60%; height: 140%; background: var(--glow); opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; }
.vcard.playing { border-color: rgba(0,175,240,.6); }
.vcard.playing::before { opacity: 1; }
.vc-top, .vc-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); position: relative; }
.vc-tag { display: inline-flex; align-items: center; gap: 10px; }
.vc-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.vcard.playing .vc-tag i { animation: vc-blink 1.2s steps(2) infinite; }
@keyframes vc-blink { 50% { opacity: .2; } }
.vc-time b { font-weight: 400; color: var(--fg); }
.vc-main { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; position: relative; }
.vc-play { width: 64px; height: 64px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; transition: transform .4s var(--ease), box-shadow .4s; }
.vc-play:hover { transform: scale(1.06); box-shadow: 0 0 40px rgba(0,175,240,.45); }
.vc-play:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.vc-play svg { width: 24px; height: 24px; fill: #000; grid-area: 1 / 1; }
.vc-play .i-pause, .vcard.playing .vc-play .i-play { display: none; }
.vcard.playing .vc-play .i-pause { display: block; }
.vc-wave { height: 56px; display: flex; align-items: center; gap: 3px; cursor: pointer; touch-action: none; }
.vc-wave i { flex: 1; min-width: 2px; height: calc(var(--h, .2) * 100%); border-radius: 2px; background: rgba(255,255,255,.22); transition: background .2s; }
.vc-wave i.on { background: var(--blue); }
.vc-res { text-align: right; }
.vc-res .res { font-family: var(--sans); font-size: 34px; font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--blue); white-space: nowrap; }
.vc-res .dur { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-top: 8px; }
.vc-sub { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; line-height: 1.75; color: var(--dim); min-height: 3.5em; position: relative; }
.vc-sub .w { transition: color .25s; }
.vc-sub .w.lit { color: var(--fg); }
.vc-foot .blur { font-size: 12px; color: var(--dim); }
.vc-foot em { font-style: normal; }
@media (max-width: 900px) {
  .vcard { margin-top: 30px; padding: 22px 18px; gap: 16px; }
  .vc-main { grid-template-columns: auto 1fr; gap: 16px; }
  .vc-res { grid-column: 1 / -1; text-align: left; order: -1; }
  .vc-res .res { font-size: 30px; }
  .vc-play { width: 56px; height: 56px; }
  .vc-wave { height: 46px; gap: 2px; }
  .vc-top, .vc-foot { font-size: 10px; flex-wrap: wrap; }
}

/* revenue counter: "+$" gains floating up */
.rev-block.rev-card { position: relative; overflow: visible; }
.rev-gain { position: absolute; z-index: 3; pointer-events: none; white-space: nowrap; transform-origin: center;
  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #9fe6ff; text-shadow: 0 0 10px rgba(0,175,240,.85); }
@media (max-width: 900px) { .rev-gain { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .rev-gain { display: none; } }

/* account recovery section: desktop only (still listed in Services on mobile) */
@media (max-width: 900px) { .recovery-m { display: none !important; } }

/* blurred names stay on one line */
.tcard .who .blur { white-space: nowrap; }
.tcard .who { gap: 12px; }
.tcard .who em { white-space: nowrap; }
.tcard .who .handle { display: inline-flex; align-items: baseline; white-space: nowrap; }
.tcard .who .handle .blur { margin-left: 1px; }

/* risk reversal lines: hero + final CTA */
.hero-risk { display: inline-flex; align-items: center; gap: 10px; margin: 22px auto 0; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg); }
.hero-risk i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.hero-risk { display: flex; justify-content: center; width: 100%; }
@media (max-width: 900px) { .hero-risk { margin: 18px 0 0; font-size: 11px; } }
.cta-risk { position: relative; margin-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
@media (max-width: 900px) { .cta-risk { font-size: 11px; } }


/* book a call (WhatsApp) */
.btn-call { display: inline-flex; align-items: center; gap: 8px; }
.btn-call .wa { width: 16px; height: 16px; }
.cta-call { position: relative; display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); transition: color .25s; }
.cta-call .wa { width: 15px; height: 15px; color: var(--blue); }
.cta-call:hover { color: var(--fg); }
.cta > div { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 900px) { .cta-call { font-size: 10.5px; margin-top: 18px; } }
/* WhatsApp brand green on the icon only */
.btn-call .wa, .cta-call .wa { color: #25D366; }
.btn-call:hover { border-color: rgba(37,211,102,.55); }

/* Instagram DM contact (cold DM traffic) */
.btn-ig { width: 54px; padding: 0; display: inline-grid; place-items: center; }
.btn-ig .ig { width: 18px; height: 18px; }
.btn-ig:hover { border-color: rgba(225,48,108,.55); }
p.cta-call { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; }
p.cta-call a { display: inline-flex; align-items: center; gap: 7px; color: var(--fg); transition: color .25s; }
p.cta-call a:hover { color: var(--blue); }
.cta-call .ig { width: 15px; height: 15px; color: #E1306C; }
@media (max-width: 900px) { .btn-ig { width: 48px; } p.cta-call { gap: 8px 14px; } }

/* pricing as a conversion block: $0 + comparison + CTA */
.pz { display: grid; grid-template-columns: .8fr 1.2fr; gap: 16px; margin-top: 46px; }
.pz-zero { position: relative; overflow: hidden; padding: 30px 32px 34px; border: 1px solid rgba(0,175,240,.45); border-radius: 26px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(0,175,240,.16), transparent 60%), #06080b; box-shadow: 0 0 60px -18px rgba(0,175,240,.55); }
.pz-k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.pz-k i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); animation: blink 1.2s ease-in-out infinite; }
.pz-big { margin-top: 14px; font-size: clamp(110px, 12vw, 200px); font-weight: 700; letter-spacing: -.07em; line-height: .9; color: var(--blue); text-shadow: 0 0 60px rgba(0,175,240,.45); }
.pz-zero p { margin-top: 18px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); }
.pz-cmp { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 26px; background: var(--card); overflow: hidden; }
.pz-col { padding: 30px 28px; }
.pz-them { border-right: 1px solid var(--line); }
.pz-h { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.pz-us .pz-h { color: var(--blue); }
.pz-col ul { list-style: none; margin-top: 22px; display: grid; gap: 16px; }
.pz-col li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.35; letter-spacing: -.01em; }
.pz-col li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.pz-them li { color: var(--faint); }
.pz-them li svg { color: #5a5f68; }
.pz-us li { color: var(--fg); }
.pz-us li svg { color: var(--blue); }
.pz-line { margin-top: 56px; text-align: center; font-size: clamp(28px, 3.6vw, 52px); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.pz-cta { display: flex; flex-direction: column; align-items: center; }
.pz-cta .fill-btn { margin-top: 34px; }
.pz-note { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.pz-note a { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); }
.pz-note a:hover { color: var(--blue); }
.pz-note .ig { width: 14px; height: 14px; color: #E1306C; }
@media (max-width: 900px) {
  .pz { grid-template-columns: 1fr; margin-top: 30px; gap: 12px; }
  .pz-zero { padding: 24px 22px 26px; border-radius: 20px; }
  .pz-big { font-size: 120px; }
  .pz-cmp { grid-template-columns: 1fr; border-radius: 20px; }
  .pz-them { border-right: 0; border-bottom: 1px solid var(--line); }
  .pz-col { padding: 22px 20px; }
  .pz-col ul { margin-top: 16px; gap: 12px; }
  .pz-col li { font-size: 15px; }
  .pz-line { margin-top: 40px; font-size: 30px; }
  .pz-note { font-size: 10.5px; }
}

/* $0 card: depth, sheen, slot reel, rotating badge */
.pz-zero { isolation: isolate; }
.pz-zero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(0,175,240,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,175,240,.08) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: radial-gradient(70% 80% at 25% 55%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 80% at 25% 55%, #000 0%, transparent 75%); }
.pz-zero::after { content: ''; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; left: -10%; top: 10%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(0,175,240,.35), transparent 65%); filter: blur(20px); animation: pz-orb 9s ease-in-out infinite alternate; }
@keyframes pz-orb { to { transform: translate(35%, -12%) scale(1.15); } }
.pz-big { display: flex; align-items: flex-start; height: .92em; overflow: visible; color: transparent; text-shadow: none; }
.pz-big > span { background: linear-gradient(180deg, #f2fbff 0%, #8fe0ff 30%, #00aff0 62%, #006a96 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pz-big { filter: drop-shadow(0 0 26px rgba(0,175,240,.5)); }
.pz-d { font-size: .62em; margin-top: .12em; margin-right: .02em; }
.pz-reel { display: inline-block; height: .92em; overflow: hidden; background: none !important; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.pz-strip { display: flex; flex-direction: column; transform: translateY(0); }
.pz-strip b { display: block; height: .92em; line-height: .92; font-weight: 700; background: linear-gradient(180deg, #f2fbff 0%, #8fe0ff 30%, #00aff0 62%, #006a96 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pz-zero.in .pz-strip { animation: pz-spin 1.6s cubic-bezier(.2, .9, .25, 1.12) .2s both; }
.pz-zero:not(.in) .pz-strip { transform: translateY(0); }
@keyframes pz-spin { from { transform: translateY(0); filter: blur(2px); } 70% { filter: blur(0); } to { transform: translateY(-90%); } }
.pz-zero.done .pz-strip { transform: translateY(-90%); animation: none; }
/* sheen sweeping across the figure (inside the text only) */
.pz-big { display: flex; width: max-content; }
.pz-zero.done .pz-d, .pz-zero.done .pz-strip b:last-child {
  background-image: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%), linear-gradient(180deg, #f2fbff 0%, #8fe0ff 30%, #00aff0 62%, #006a96 100%);
  background-size: 300% 100%, 100% 100%; background-repeat: no-repeat; background-position: 150% 0, 0 0; animation: pz-sheen 4.5s ease-in-out infinite; }
@keyframes pz-sheen { 0%, 55% { background-position: 150% 0, 0 0; } 85%, 100% { background-position: -50% 0, 0 0; } }
/* rotating badge */
.pz-badge { position: absolute; right: 24px; top: 22px; width: 128px; height: 128px; overflow: visible; }
.pz-badge text { font-family: var(--mono); font-size: 9.4px; letter-spacing: 2.6px; fill: rgba(255,255,255,.7); }
.pz-badge > text:first-of-type { transform-origin: 60px 60px; animation: pz-rot 16s linear infinite; }
.pz-badge circle { fill: rgba(0,175,240,.12); stroke: rgba(0,175,240,.6); stroke-width: 1; }
.pz-badge .pz-pc { font-family: var(--sans, sans-serif); font-size: 26px; font-weight: 700; letter-spacing: 0; fill: #00aff0; text-anchor: middle; dominant-baseline: middle; }
@keyframes pz-rot { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .pz-badge { width: 100px; height: 100px; right: 16px; top: 16px; } }
@media (max-width: 380px) { .pz-badge { width: 88px; height: 88px; right: 12px; top: 14px; } }
@media (prefers-reduced-motion: reduce) { .pz-strip { transform: translateY(-90%) !important; animation: none !important; } .pz-badge > text:first-of-type, .pz-zero::after, .pz-big::after { animation: none !important; } }
.pz-reel { padding: 0 .08em 0 .02em; }
.pz-strip b { text-align: center; }
.pz-strip b { letter-spacing: 0; }
.pz-d { letter-spacing: 0; }
.pz-sure { margin-top: 16px; text-align: center; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); text-wrap: balance; }
@media (max-width: 900px) { .pz-sure { font-size: 11.5px; } }

/* $0 glitch: colourful RGB slices in short bursts (same language as the loader) */
.pz-big > .pz-gl { position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: flex-start; pointer-events: none; opacity: 0;
  background: none !important; -webkit-text-fill-color: currentColor; mix-blend-mode: screen; font-weight: 700; }
.pz-gl em { font-style: normal; display: block; line-height: .92; padding: 0 .08em 0 .02em; letter-spacing: 0; }
.pz-gl { font-size: inherit; }
.pz-gl i { font-style: normal; font-size: .62em; margin-top: .12em; margin-right: .02em; line-height: 1; }
.pz-gl.g1 { color: #ff1fa0; }
.pz-gl.g2 { color: #00f6ff; }
.pz-zero.done .pz-gl.g1 { animation: pz-gl-a 3.2s steps(1) infinite; }
.pz-zero.done .pz-gl.g2 { animation: pz-gl-b 3.2s steps(1) infinite; }
.pz-zero.done .pz-big { animation: pz-jolt 3.2s steps(1) infinite; }
@keyframes pz-gl-a {
  0%, 72%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  73% { opacity: .9; transform: translate(-7px, 0); clip-path: inset(10% 0 60% 0); }
  75% { opacity: .9; transform: translate(5px, 0); clip-path: inset(58% 0 12% 0); color: #ffe14d; }
  77% { opacity: .9; transform: translate(-3px, 0); clip-path: inset(34% 0 40% 0); color: #39ff88; }
  79% { opacity: 0; }
  90% { opacity: .9; transform: translate(4px, 0); clip-path: inset(68% 0 6% 0); color: #7c4dff; }
  92% { opacity: 0; } }
@keyframes pz-gl-b {
  0%, 72%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  73% { opacity: .9; transform: translate(7px, 0); clip-path: inset(52% 0 22% 0); }
  75% { opacity: .9; transform: translate(-5px, 0); clip-path: inset(6% 0 72% 0); color: #7c4dff; }
  77% { opacity: .9; transform: translate(4px, 0); clip-path: inset(42% 0 30% 0); color: #ff1fa0; }
  79% { opacity: 0; }
  90% { opacity: .9; transform: translate(-4px, 0); clip-path: inset(18% 0 60% 0); color: #39ff88; }
  92% { opacity: 0; } }
@keyframes pz-jolt { 0%, 72%, 80%, 89%, 93%, 100% { transform: none; } 73% { transform: translateX(3px) skewX(-6deg); } 75% { transform: translateX(-4px) skewX(5deg); } 77% { transform: translateX(2px); } 90% { transform: translateX(-3px) skewX(4deg); } }
@media (prefers-reduced-motion: reduce) { .pz-gl { display: none !important; } .pz-zero.done .pz-big { animation: none; } }

/* $0 in Anton (same face as the EXPECTNOLESS wordmark) */
.pz-big, .pz-big b, .pz-big .pz-gl em, .pz-big .pz-gl i { font-family: 'Anton', sans-serif; font-weight: 400; }
.pz-big { font-size: clamp(130px, 13vw, 220px); letter-spacing: .01em; }
.pz-d, .pz-gl i { font-size: .6em; margin-top: .1em; }
@media (max-width: 900px) { .pz-big { font-size: 140px; } }
.pz-big, .pz-reel, .pz-strip b { height: 1.2em; }
.pz-strip b, .pz-gl em { line-height: 1.2; }
.pz-reel { -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); }
.pz-d, .pz-gl i { line-height: 1.2; margin-top: .05em; }
.pz-zero p { margin-top: 10px; }

/* "them vs us" comparison table */
.pz-cmp.vs { position: relative; display: grid; grid-template-columns: 1.15fr 1fr 1.1fr; grid-auto-rows: auto; align-items: stretch; padding: 10px 10px 12px; }
.vs-head, .vs-row { display: contents; }
.vs > .vs-head > *, .vs > .vs-row > * { position: relative; z-index: 1; display: flex; align-items: center; padding: 16px 16px; }
.vs-head > * { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding-top: 18px !important; padding-bottom: 14px !important; }
.vs-head .vs-them { color: var(--faint); }
.vs-head .vs-us { color: var(--blue); gap: 8px; font-weight: 600; }
.vs-head .vs-us i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); animation: blink 1.2s ease-in-out infinite; }
.vs-row > * { border-top: 1px solid var(--line); }
.vs-l { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.vs-row .vs-them { font-size: 16px; color: #6f747d; text-decoration: line-through; text-decoration-color: rgba(255,80,110,.65); text-decoration-thickness: 1.5px; }
.vs-row .vs-us { gap: 10px; font-size: 17px; color: var(--fg); }
.vs-row .vs-us b { font-weight: 600; letter-spacing: -.01em; }
.vs-row .vs-us svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--blue); color: #000; }
.vs-last .vs-us b { color: var(--blue); font-size: 19px; }
.vs-last .vs-them { font-size: 17px; }
.vs-glow { grid-column: 3; grid-row: 1 / span 6; z-index: 0; border-radius: 18px; border: 1px solid rgba(0,175,240,.5);
  background: linear-gradient(180deg, rgba(0,175,240,.16), rgba(0,175,240,.05)); box-shadow: 0 0 50px -12px rgba(0,175,240,.6), inset 0 1px 0 rgba(255,255,255,.08); }
.vs-row .vs-us { border-top-color: rgba(0,175,240,.18); }
@media (max-width: 900px) {
  .pz-cmp.vs { grid-template-columns: 1.05fr .95fr 1.1fr; padding: 6px 6px 8px; }
  .vs > .vs-head > *, .vs > .vs-row > * { padding: 13px 10px; }
  .vs-head > * { font-size: 9px; letter-spacing: .08em; }
  .vs-l { font-size: 9.5px; letter-spacing: .04em; }
  .vs-row .vs-them { font-size: 13px; }
  .vs-row .vs-us { font-size: 14px; gap: 7px; }
  .vs-row .vs-us svg { width: 15px; height: 15px; }
  .vs-last .vs-us b { font-size: 15px; }
  .vs-glow { border-radius: 14px; }
}
/* highlighted column drawn on the cells themselves (no extra grid item) */
.vs-glow { display: none !important; }
.vs > .vs-head > .vs-us, .vs > .vs-row > .vs-us { background: linear-gradient(180deg, rgba(0,175,240,.13), rgba(0,175,240,.07)); border-left: 1px solid rgba(0,175,240,.5); border-right: 1px solid rgba(0,175,240,.5); }
.vs > .vs-head > .vs-us { border-top: 1px solid rgba(0,175,240,.5); border-radius: 16px 16px 0 0; box-shadow: 0 -18px 40px -24px rgba(0,175,240,.7); }
.vs > .vs-last > .vs-us { border-bottom: 1px solid rgba(0,175,240,.5); border-radius: 0 0 16px 16px; box-shadow: 0 18px 40px -24px rgba(0,175,240,.7); }

/* receipt: simple, readable in one glance */
.pz-cmp.rcpt { display: flex; flex-direction: column; justify-content: center; padding: 30px 32px; border-radius: 26px; }
.rc-h { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.rcpt ul { list-style: none; margin-top: 18px; display: grid; gap: 4px; }
.rcpt li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; }
.rc-l { font-size: 19px; letter-spacing: -.015em; color: var(--dim); white-space: nowrap; }
.rcpt li i { flex: 1; border-bottom: 2px dotted rgba(255,255,255,.14); transform: translateY(-4px); }
.rcpt li b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--blue); }
.rc-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 18px; border-top: 1px solid rgba(0,175,240,.4); }
.rc-total span { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg); }
.rc-total b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 46px; line-height: 1; color: var(--blue); text-shadow: 0 0 24px rgba(0,175,240,.5); }
.rc-foot { margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.7; color: var(--faint); }
@media (max-width: 900px) {
  .pz-cmp.rcpt { padding: 22px 20px; border-radius: 20px; }
  .rcpt ul { margin-top: 12px; }
  .rcpt li { padding: 10px 0; gap: 10px; }
  .rc-l { font-size: 16px; }
  .rcpt li b { font-size: 18px; }
  .rc-total b { font-size: 38px; }
  .rc-foot { font-size: 10px; }
}

/* LIVE PROOF: blurred dashboard, unblurred on the call */
.live-wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.live-sub { margin-top: 22px; max-width: 520px; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.8; color: var(--dim); }
.live-list { list-style: none; margin-top: 30px; display: grid; gap: 16px; }
.live-list li { display: flex; gap: 16px; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--dim); line-height: 1.45; }
.live-list li b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--fg); margin-bottom: 2px; }
.ll-k { font-family: var(--mono); font-size: 11px; color: var(--blue); flex: none; }
.live-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.live-cta .btn-blue svg { width: 16px; height: 16px; margin-left: 4px; }
.live-screen { position: relative; border: 1px solid rgba(0,175,240,.35); border-radius: 22px; overflow: hidden; background: #070a0e;
  box-shadow: 0 30px 80px -30px rgba(0,175,240,.45), 0 0 0 1px rgba(255,255,255,.03); transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); }
.ls-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); }
.ls-bar > i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.ls-url { margin-left: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ls-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: rgba(255,59,59,.14); color: #ff5a5a; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; font-weight: 600; }
.ls-live b { width: 7px; height: 7px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b; animation: blink 1s ease-in-out infinite; }
.ls-body { padding: 20px; display: grid; gap: 16px; }
.ls-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ls-kpi { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
.ls-kpi span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.ls-kpi b { display: block; margin-top: 8px; font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--fg); }
.ls-blur { filter: blur(6px); user-select: none; }
.ls-chart { height: 130px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 0 0; overflow: hidden; }
.ls-chart svg { width: 100%; height: 100%; display: block; }
.ls-line { stroke-dasharray: 520; stroke-dashoffset: 520; filter: drop-shadow(0 0 6px rgba(0,175,240,.8)); }
.ls-area { opacity: 0; }
.live-screen.in .ls-line { animation: ls-draw 2.2s cubic-bezier(.4,0,.2,1) forwards; }
.live-screen.in .ls-area { animation: ls-fade 1.2s ease 1.2s forwards; }
@keyframes ls-draw { to { stroke-dashoffset: 0; } }
@keyframes ls-fade { to { opacity: 1; } }
.ls-rows { display: grid; gap: 8px; }
.ls-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.025); font-size: 14px; color: var(--dim); }
.ls-row b { margin-left: auto; color: var(--blue); font-weight: 600; }
.ls-av { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #2a3340, #12171d); filter: blur(2px); flex: none; }
.ls-veil { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3; }
.ls-veil span { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; background: rgba(0,0,0,.7); border: 1px solid rgba(0,175,240,.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg); white-space: nowrap; box-shadow: 0 0 30px -6px rgba(0,175,240,.6); }
.ls-veil i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); animation: blink 1.2s ease-in-out infinite; }
.numbers .note a { color: inherit; border-bottom: 1px solid rgba(0,175,240,.5); }
.numbers .note a:hover { color: var(--blue); }
@media (max-width: 900px) {
  .live-wrap { grid-template-columns: 1fr; gap: 36px; }
  .live-sub { font-size: 12px; }
  .live-list li b { font-size: 17px; }
  .live-list li { font-size: 14px; }
  .live-cta .btn { flex: 1 1 auto; justify-content: center; }
  .live-screen { transform: none; border-radius: 18px; }
  .ls-body { padding: 14px; gap: 12px; }
  .ls-kpi { padding: 10px; }
  .ls-kpi b { font-size: 16px; }
  .ls-kpi span { font-size: 8px; }
  .ls-chart { height: 100px; }
  .ls-row { font-size: 12.5px; padding: 8px 10px; }
  .ls-veil span { font-size: 10px; padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) { .ls-line { stroke-dashoffset: 0; } .ls-area { opacity: 1; } }
@media (max-width: 900px) {
  .live-wrap { gap: 0; }
  .live-copy { display: contents; }
  .live-copy .eyebrow { order: 1; } .live-copy .h2 { order: 2; } .live-sub { order: 3; }
  .live-screen { order: 4; margin-top: 28px; }
  .live-list { order: 5; } .live-cta { order: 6; }
}
.live .h2 { margin-top: 22px; }

/* comparison v2: two clean columns, ours highlighted */
.pz-cmp.vs2 { display: grid; grid-template-columns: 1fr 1.08fr; gap: 0; padding: 8px; border-radius: 26px; }
.v2-col { padding: 26px 26px 28px; border-radius: 20px; }
.v2-h { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.v2-them .v2-h { color: var(--faint); }
.v2-us { background: linear-gradient(180deg, rgba(0,175,240,.14), rgba(0,175,240,.05)); border: 1px solid rgba(0,175,240,.5); box-shadow: 0 0 50px -14px rgba(0,175,240,.6); }
.v2-us .v2-h { color: var(--blue); font-weight: 600; }
.v2-us .v2-h i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); animation: blink 1.2s ease-in-out infinite; }
.v2-col ul { list-style: none; margin-top: 22px; display: grid; gap: 18px; }
.v2-col li { display: flex; align-items: center; gap: 12px; font-size: 18px; line-height: 1.3; letter-spacing: -.015em; }
.v2-col li svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; }
.v2-them li { color: #6f747d; }
.v2-them li span { text-decoration: line-through; text-decoration-color: rgba(255,90,110,.6); text-decoration-thickness: 1.5px; }
.v2-them li svg { color: #ff5a6e; background: rgba(255,90,110,.1); }
.v2-us li { color: var(--fg); font-weight: 500; }
.v2-us li svg { color: #000; background: var(--blue); }
@media (max-width: 900px) {
  .pz-cmp.vs2 { padding: 6px; border-radius: 20px; grid-template-columns: .95fr 1.05fr; }
  .v2-col { padding: 18px 14px 20px; border-radius: 16px; }
  .v2-h { font-size: 9.5px; letter-spacing: .1em; }
  .v2-col ul { margin-top: 16px; gap: 14px; }
  .v2-col li { font-size: 14px; gap: 9px; align-items: flex-start; }
  .v2-col li svg { width: 18px; height: 18px; padding: 3px; margin-top: 1px; }
}
.pz { align-items: stretch; }
/* long comparison: tighter rows, rows aligned across both columns */
.vs2-long .v2-col ul { gap: 0; margin-top: 16px; }
.vs2-long .v2-col li { min-height: 46px; font-size: 15.5px; border-top: 1px solid rgba(255,255,255,.06); }
.vs2-long .v2-us li { border-top-color: rgba(0,175,240,.16); }
.vs2-long .v2-col li svg { width: 20px; height: 20px; padding: 4px; }
@media (max-width: 900px) {
  .vs2-long .v2-col { padding: 16px 12px 14px; }
  .vs2-long .v2-col li { min-height: 52px; font-size: 13px; gap: 8px; align-items: center; }
  .vs2-long .v2-col li svg { width: 17px; height: 17px; padding: 3px; margin-top: 0; }
}
/* $0 card removed: comparison alone, centered */
.pz { grid-template-columns: 1fr; max-width: 920px; margin-left: auto; margin-right: auto; }

/* hero film: play button shown only when autoplay is blocked */
.film-play { position: absolute; left: 50%; top: 50%; z-index: 3; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; border: 0; cursor: pointer;
  display: none; place-items: center; background: rgba(0,175,240,.92); box-shadow: 0 0 40px rgba(0,175,240,.5); }
.film-play svg { width: 26px; height: 26px; fill: #000; margin-left: 3px; }
.hero-film.needs-tap .film-play { display: grid; }