/* ============================================================
   MANTA — landing page styles (extracted from single-file source)
   Design language: Apple keynote x deep-sea bioluminescence
   All inline styles externalized here to satisfy strict CSP.
   ============================================================ */
:root{
  --bg:        #0A0A0B;
  --bg-1:      #101012;
  --bg-2:      #1A1A1F;
  --ink:       #FFFFFF;
  --ink-dim:   #9CA3AF;
  --ocean:     #0066FF;
  --ocean-2:   #3B82F6;
  --cyan:      #00D4FF;
  --line:      rgba(255,255,255,0.08);
  --line-2:    rgba(255,255,255,0.14);
  --ease:      cubic-bezier(.16,1,.3,1);
  --max:       1280px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-feature-settings:"ss01","cv11","cv05";
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  cursor:none;
}
@media (pointer:coarse){ body{ cursor:auto; } }

a{ color:inherit; text-decoration:none; }
img,svg,canvas{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
::selection{ background:var(--cyan); color:#000; }

.mono{ font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; }

/* skip link (a11y) — visually hidden until focused */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:10001;
  background:var(--ocean); color:#fff; padding:10px 16px; border-radius:0 0 10px 0;
  font-size:14px;
}
.skip-link:focus{ left:0; }

/* ---------- Custom cursor ---------- */
.cursor-ring,.cursor-dot{
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9999;
  mix-blend-mode:difference;
  will-change:transform;
}
.cursor-ring{
  width:32px; height:32px;
  border:1px solid rgba(255,255,255,0.7);
  border-radius:999px;
  transform:translate(-50%,-50%);
  transition:width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.cursor-dot{ width:4px; height:4px; background:#fff; border-radius:999px; }
.cursor-ring.is-hover{ width:64px; height:64px; background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0); }
.cursor-ring.is-press{ width:20px; height:20px; }
@media (pointer:coarse){ .cursor-ring,.cursor-dot{ display:none; } }

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; z-index:10000;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader svg{ width:56px; height:56px; animation:glide 2.4s var(--ease) infinite; }
@keyframes glide{ 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-6px) rotate(2deg);} }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  padding:18px max(20px, 5vw);
  display:flex; align-items:center; justify-content:space-between;
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(0,0,0,0.55);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-color:var(--line);
}
.nav-brand{ display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:0.06em; }
.nav-brand svg{ width:26px; height:26px; }
.nav-links{ display:flex; gap:36px; font-size:14px; color:rgba(255,255,255,0.65); }
.nav-links a{ position:relative; transition:color .3s var(--ease); }
.nav-links a:hover{ color:#fff; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.nav-links a:hover::after{ transform:scaleX(1); }

.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  border-radius:999px;
  color:#fff; font-weight:500; font-size:14px;
  background:linear-gradient(180deg,#1F6FFF 0%,#0066FF 50%,#0052D4 100%);
  box-shadow:0 0 24px rgba(0,102,255,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  transition:box-shadow .35s var(--ease), transform .25s var(--ease);
}
.nav-cta:hover{ box-shadow:0 0 60px rgba(0,102,255,0.65), 0 0 120px rgba(0,212,255,0.25), inset 0 1px 0 rgba(255,255,255,0.4); }
.nav-cta svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.nav-cta:hover svg{ transform:translateX(3px); }

.menu-btn{
  display:none; width:38px; height:38px;
  border-radius:999px; border:1px solid var(--line-2);
  align-items:center; justify-content:center; color:#fff;
  background:rgba(255,255,255,0.03);
}
@media (max-width:880px){ .nav-links{ display:none; } .nav-cta{ display:none; } .menu-btn{ display:inline-flex; } }

/* mobile sheet */
.sheet{
  position:fixed; inset:0; z-index:90;
  background:rgba(0,0,0,0.96); backdrop-filter:blur(24px);
  padding:100px max(20px,5vw) 40px;
  display:flex; flex-direction:column; gap:0;
  transform:translateY(-100%);
  transition:transform .55s var(--ease);
}
.sheet.is-open{ transform:translateY(0); }
.sheet a{ font-size:30px; letter-spacing:-0.02em; padding:18px 0; border-bottom:1px solid var(--line); }
.sheet .nav-cta{ margin-top:24px; align-self:flex-start; }

/* ---------- Common buttons & chips ---------- */
.btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 24px;
  border-radius:999px;
  color:#fff; font-weight:500; font-size:15px;
  background:linear-gradient(180deg,#1F6FFF 0%,#0066FF 50%,#0052D4 100%);
  box-shadow:0 0 30px rgba(0,102,255,0.40), inset 0 1px 0 rgba(255,255,255,0.25);
  transition:box-shadow .35s var(--ease), transform .25s var(--ease);
  position:relative;
}
.btn-primary:hover{ box-shadow:0 0 60px rgba(0,102,255,0.65), 0 0 120px rgba(0,212,255,0.25), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-primary svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.btn-primary:hover svg{ transform:translateX(3px); }
.btn-primary.lg{ padding:20px 36px; font-size:17px; }

.btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 24px;
  border-radius:999px;
  color:#fff; font-weight:500; font-size:15px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--line-2);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.btn-ghost:hover{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.3); }

.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.02);
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.65);
  font-family:'JetBrains Mono', monospace;
}

/* ---------- Typography ---------- */
.h-1, .h-2{ font-weight:600; letter-spacing:-0.045em; margin:0; line-height:1.02; }
.h-1{ font-size:clamp(36px, 6vw, 80px); }
.h-2{ font-size:clamp(32px, 5vw, 68px); }
.h-display{
  font-weight:600; letter-spacing:-0.045em; margin:0;
  font-size:clamp(48px, 9.5vw, 132px); line-height:0.95;
}

.text-grad{
  background:linear-gradient(180deg,#fff 30%, rgba(255,255,255,0.55) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.text-ocean{
  background:linear-gradient(120deg,#00D4FF 0%,#3B82F6 50%,#0066FF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Sections layout ---------- */
section{ position:relative; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 max(20px, 5vw); }

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  position:relative; isolate:isolate;
  display:flex; flex-direction:column; justify-content:center;
  padding:140px max(20px,5vw) 80px;
  overflow:hidden;
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0.9; }

.mesh{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.mesh::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(0,102,255,0.18), transparent 60%),
    radial-gradient(900px 500px at 85% 30%, rgba(0,212,255,0.10), transparent 60%);
}
.mesh-blob{
  position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none;
}
.mesh-blob.b1{ top:-12vw; left:-12vw; width:55vw; height:55vw;
  background:radial-gradient(circle at 30% 30%, rgba(0,102,255,0.35), transparent 60%);
  animation:drift1 18s ease-in-out infinite;
}
.mesh-blob.b2{ top:30%; right:-20%; width:60vw; height:60vw;
  background:radial-gradient(circle at 60% 40%, rgba(0,212,255,0.22), transparent 60%);
  animation:drift2 22s ease-in-out infinite;
}
.mesh-blob.b3{ bottom:-30%; left:20%; width:50vw; height:50vw;
  background:radial-gradient(circle at 40% 60%, rgba(59,130,246,0.20), transparent 60%);
  animation:drift3 28s ease-in-out infinite;
}
.mesh-grid{
  position:absolute; inset:0; opacity:0.05;
  background-image:
    linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
}
@keyframes drift1{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(8%,4%) scale(1.08);} }
@keyframes drift2{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-6%,-3%) scale(0.95);} }
@keyframes drift3{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(4%,-6%) scale(1.05);} }

.spotlight{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px circle at var(--mx,50%) var(--my,20%), rgba(0,212,255,0.10), transparent 55%);
  transition:background .15s linear;
}

.hero-inner{ position:relative; z-index:2; max-width:var(--max); margin:0 auto; width:100%; }
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,0.02);
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.75);
  opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.hero.in .hero-badge{ opacity:1; transform:translateY(0); }
.dot-live{ width:8px; height:8px; border-radius:999px; background:#10B981; position:relative; }
.dot-live::after{ content:""; position:absolute; inset:-4px; border-radius:999px; box-shadow:0 0 0 0 rgba(16,185,129,.6); animation:pulse-dot 1.8s ease-in-out infinite; }
@keyframes pulse-dot{
  0%{ box-shadow:0 0 0 0 rgba(16,185,129,.6); }
  100%{ box-shadow:0 0 0 12px rgba(16,185,129,0); }
}

.hero h1{ margin:36px 0 0; max-width:20ch; }
.hero h1 .word{ display:inline-block; overflow:hidden; vertical-align:top; margin-right:0.22em; }
.hero h1 .word > span{ display:inline-block; transform:translateY(110%); transition:transform 1s var(--ease); }
.hero.in h1 .word > span{ transform:translateY(0); }
.hero h1 .word:nth-child(1) > span{ transition-delay:.15s; }
.hero h1 .word:nth-child(2) > span{ transition-delay:.22s; }
.hero h1 .word:nth-child(3) > span{ transition-delay:.29s; }
.hero h1 .word:nth-child(4) > span{ transition-delay:.36s; }
.hero h1 .word:nth-child(5) > span{ transition-delay:.43s; }
.hero h1 .word:nth-child(6) > span{ transition-delay:.50s; }
.hero h1 .word:nth-child(7) > span{ transition-delay:.57s; }
.hero h1 .word:nth-child(8) > span{ transition-delay:.64s; }

.hero p{ margin:32px 0 0; max-width:60ch; color:rgba(255,255,255,0.65); font-size:clamp(15px,1.4vw,18px); line-height:1.55;
  opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease) .85s, transform .8s var(--ease) .85s;
}
.hero.in p{ opacity:1; transform:translateY(0); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px;
  opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease) 1s, transform .8s var(--ease) 1s;
}
.hero.in .hero-actions{ opacity:1; transform:translateY(0); }
.hero-proof{ margin-top:32px; font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.45);
  opacity:0; transition:opacity .8s var(--ease) 1.2s;
}
.hero.in .hero-proof{ opacity:1; }

.hero-bottom-fade{ position:absolute; left:0; right:0; bottom:0; height:160px; background:linear-gradient(to bottom, transparent, var(--bg)); pointer-events:none; }

/* ---------- Reveal pattern ---------- */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); filter:blur(8px);}
.rv.in{ opacity:1; transform:translateY(0); filter:blur(0); }
.rv.d1{ transition-delay:.05s; } .rv.d2{ transition-delay:.10s; } .rv.d3{ transition-delay:.16s; }
.rv.d4{ transition-delay:.22s; } .rv.d5{ transition-delay:.28s; } .rv.d6{ transition-delay:.34s; }

/* ---------- Section heads ---------- */
.sec{ padding:120px max(20px,5vw); position:relative; overflow:hidden; }
.sec-head{ max-width:var(--max); margin:0 auto; display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.sec-head .h-1{ max-width:22ch; }
.sec-head p.lede{ max-width:62ch; color:rgba(255,255,255,0.62); font-size:clamp(15px,1.4vw,18px); margin:8px 0 0; }

/* ---------- Glass card ---------- */
.glass{
  position:relative; overflow:hidden; border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
}
.glass.outcome{
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
}
.glass.outcome::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,212,255,0.7), transparent); opacity:0.55;
}
.glass:hover{ border-color:rgba(255,255,255,0.18); }
.card-spot{ position:absolute; inset:0; opacity:0; transition:opacity .4s var(--ease); pointer-events:none;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(0,102,255,0.18), transparent 60%);
}
.glass:hover .card-spot{ opacity:1; }

.grid-6{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:var(--max); margin:60px auto 0; }
@media (max-width:980px){ .grid-6{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-6{ grid-template-columns:1fr; } }

.card{ padding:26px; min-height:200px; display:flex; flex-direction:column; gap:14px; }
.card .ix{
  width:44px; height:44px; border-radius:14px;
  border:1px solid var(--line-2); background:rgba(255,255,255,0.03);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.card.outcome .ix{
  border-color:rgba(0,212,255,0.30);
  background:linear-gradient(180deg, rgba(0,212,255,0.16), rgba(0,212,255,0.02));
  color:#7CC4FF;
}
.card h3{ margin:0; font-size:18px; letter-spacing:-0.02em; font-weight:500; }
.card p{ margin:0; color:rgba(255,255,255,0.55); font-size:14px; line-height:1.55; }
.card .num{ position:absolute; right:18px; top:18px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.18em; color:rgba(255,255,255,0.3); text-transform:uppercase; }
.card.outcome .num{ color:rgba(0,212,255,0.55); }

/* ---------- Features (3 large cards w/ mock UI) ---------- */
.features{ padding:120px max(20px,5vw); }
.features-stack{ display:flex; flex-direction:column; gap:24px; max-width:var(--max); margin:60px auto 0; }
.feature{
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  padding:36px;
  border-radius:28px;
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(160%);
}
.feature.rev{ direction:rtl; }
.feature.rev > *{ direction:ltr; }
.feature .meta{ display:flex; flex-direction:column; gap:18px; justify-content:center; }
.feature .badge{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#7CC4FF; }
.feature h3{ margin:0; font-size:clamp(22px,3vw,40px); letter-spacing:-0.03em; font-weight:600; line-height:1.05; max-width:18ch;}
.feature p{ margin:0; color:rgba(255,255,255,0.65); font-size:15.5px; line-height:1.55; max-width:42ch;}
.feature .ix{ width:48px; height:48px; border-radius:16px; border:1px solid var(--line-2); background:rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center;}

@media (max-width:880px){ .feature{ grid-template-columns:1fr; padding:24px; } .feature.rev{ direction:ltr; } }

/* mock browser */
.mock{ border-radius:18px; border:1px solid var(--line); background:#08080A; overflow:hidden; box-shadow:0 50px 90px -40px rgba(0,0,0,0.6); }
.mock-bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line); background:rgba(255,255,255,0.02); }
.mock-bar .d{ width:10px; height:10px; border-radius:999px; }
.mock-bar .d.r{ background:#ff5f57; } .mock-bar .d.y{ background:#febc2e; } .mock-bar .d.g{ background:#28c840; }
.mock-bar .ttl{ margin-left:8px; font-family:'JetBrains Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.14em; color:rgba(255,255,255,0.45); }
.mock-body{ padding:14px; }
.kpi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.kpi{ border:1px solid var(--line); background:rgba(255,255,255,0.02); border-radius:12px; padding:10px; }
.kpi .l{ font-family:'JetBrains Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:0.14em; color:rgba(255,255,255,0.45); }
.kpi .v{ font-size:18px; font-weight:500; letter-spacing:-0.02em; margin-top:4px; }
.kpi .d{ font-size:10px; color:#7CC4FF; }
.pipe-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px; }
.pipe{ border:1px solid var(--line); background:rgba(255,255,255,0.015); border-radius:10px; padding:10px; }
.pipe .ph{ display:flex; align-items:center; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:0.14em; color:rgba(255,255,255,0.45); margin-bottom:8px; }
.pipe-bar{ height:5px; background:rgba(255,255,255,0.10); border-radius:999px; margin-bottom:5px; }
.pipe-bar.c{ background:rgba(0,212,255,0.45); }

.onb-row{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); background:rgba(255,255,255,0.02); border-radius:12px; padding:10px 12px; margin-bottom:6px; }
.onb-tag{ font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.14em; color:rgba(255,255,255,0.45); margin-left:auto; }
.dot-pill{ width:18px; height:18px; border-radius:999px; display:grid; place-items:center; font-size:11px; font-weight:500; }
.dot-pill.done{ background:rgba(16,185,129,0.16); color:#34D399; }
.dot-pill.live{ background:rgba(0,212,255,0.16); color:#67E8F9; }
.dot-pill.todo{ background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.45); }

.feed-row{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:rgba(255,255,255,0.012); border-radius:8px; padding:6px 10px; margin-bottom:6px; font-family:'JetBrains Mono',monospace; font-size:11px;}
.feed-row .tg{ color:rgba(255,255,255,0.35); }
.feed-row .pill{ border:1px solid rgba(0,212,255,0.30); background:rgba(0,212,255,0.05); padding:1px 8px; border-radius:999px; font-size:9px; text-transform:uppercase; letter-spacing:0.14em; color:#7CC4FF;}
.feed-row .m{ color:rgba(255,255,255,0.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Integrations marquee ---------- */
.marquee{ position:relative; overflow:hidden; mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.marquee-track{ display:flex; gap:12px; width:max-content; will-change:transform; }
.marquee.a .marquee-track{ animation:scroll-l 50s linear infinite; }
.marquee.b .marquee-track{ animation:scroll-r 60s linear infinite; }
@keyframes scroll-l{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes scroll-r{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

.logo-pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:54px; width:160px; flex-shrink:0;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.02);
  border-radius:14px;
  color:rgba(255,255,255,0.85);
  font-family:'JetBrains Mono', monospace;
  font-size:13px; letter-spacing:0.04em;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.logo-pill svg{ width:18px; height:18px; margin-right:10px; opacity:0.85; }
.logo-pill img{ width:18px; height:18px; margin-right:10px; opacity:0.85; }
.logo-pill:hover{ color:#fff; background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.20); }

.int-foot{ text-align:center; margin-top:36px; font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.45); }

/* ---------- Stats ---------- */
.stats{ padding:80px max(20px,5vw); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.stats::before{ content:""; position:absolute; inset:0; background:radial-gradient(900px 400px at 50% 50%, rgba(0,102,255,0.08), transparent 70%); pointer-events:none; }
.stats-grid{ max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
.stat{ display:flex; flex-direction:column; gap:10px; }
.stat .v{ font-size:clamp(40px,6vw,86px); font-weight:600; letter-spacing:-0.045em; line-height:1; }
.stat .l{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
@media (max-width:820px){ .stats-grid{ grid-template-columns:repeat(2,1fr); gap:32px 24px; } }

/* ---------- Closing CTA ---------- */
.cta{ padding:160px max(20px,5vw); position:relative; isolation:isolate; overflow:hidden; text-align:center; }
.cta .wrap{ max-width:1000px; text-align:center; }
.cta .chip{ margin:0 auto; }
.cta h2{ margin:24px auto 0; }
.cta p{ margin:24px auto 0; max-width:56ch; color:rgba(255,255,255,0.65); font-size:clamp(15px,1.4vw,18px); }
.cta-actions{ margin-top:40px; display:flex; justify-content:center; }
.cta-trust{ margin-top:24px; font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.45);}

/* ---------- Footer ---------- */
.foot{ border-top:1px solid var(--line); padding:48px max(20px,5vw) 32px; }
.foot-row{ max-width:var(--max); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.foot-links{ display:flex; gap:24px; font-size:13px; color:rgba(255,255,255,0.55); }
.foot-links a:hover{ color:#fff; }
.foot-mono{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.40);}
.foot-tag{ max-width:var(--max); margin:24px auto 0; padding-top:24px; border-top:1px solid var(--line); font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.20em; text-transform:uppercase; color:rgba(255,255,255,0.35); }

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.70); backdrop-filter:blur(10px);
  display:grid; place-items:center;
  padding:20px;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.modal-backdrop.is-open{ opacity:1; visibility:visible; }
.modal{
  position:relative; width:100%; max-width:540px;
  border-radius:24px; padding:32px;
  background:rgba(11,11,15,0.95);
  border:1px solid var(--line);
  box-shadow:0 50px 100px -30px rgba(0,0,0,0.8);
  transform:translateY(30px) scale(0.97); opacity:0;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.modal-backdrop.is-open .modal{ transform:translateY(0) scale(1); opacity:1; }
.modal::before{ content:""; position:absolute; inset:-1px; border-radius:24px; pointer-events:none;
  background:radial-gradient(700px circle at 30% -10%, rgba(0,102,255,0.20), transparent 60%); }
.modal-close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.85);
  display:grid; place-items:center;
}
.modal-close:hover{ color:#fff; }
.modal h3{ margin:24px 0 6px; font-size:clamp(22px,3vw,30px); font-weight:600; letter-spacing:-0.03em; }
.modal .sub{ color:rgba(255,255,255,0.62); font-size:14px; max-width:44ch; }

.form{ margin-top:24px; display:grid; gap:12px; }
.field{ position:relative; }
.field input, .field select{
  width:100%; appearance:none;
  border:1px solid var(--line); background:rgba(255,255,255,0.02);
  border-radius:14px; color:#fff; font:inherit; font-size:15px;
  padding:22px 14px 10px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field select{ padding:22px 36px 10px 14px; }
/* Native dropdown popup: the <select> color is #fff for the dark field, but the
   OS renders the option list on a white background — which made the options
   white-on-white. Force readable dark text on a white popup. */
.field select option{ background:#ffffff; color:#101828; }
.field select option:disabled{ color:#98a2b3; }
.field input:focus, .field select:focus{ outline:none; border-color:rgba(0,212,255,0.55); background:rgba(0,212,255,0.04); }
.field label{
  position:absolute; left:14px; top:18px;
  color:rgba(255,255,255,0.5); font-size:14px;
  pointer-events:none; transition:all .25s var(--ease);
}
.field.float label, .field input:focus + label{
  top:8px; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#7CC4FF;
}
.field select + label{ top:8px; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.field.float select + label, .field select:focus + label{ color:#7CC4FF; }
.field .caret{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:12px; height:12px; pointer-events:none; color:rgba(255,255,255,0.5); }

.form-err{
  border:1px solid rgba(239,68,68,0.30); background:rgba(239,68,68,0.10);
  color:#FCA5A5; border-radius:14px; padding:10px 14px; font-size:13px;
  display:none;
}
.form-err.show{ display:block; }

.form-submit{ justify-content:center; }
.form-submit:disabled{ opacity:0.6; cursor:not-allowed; }

.success{
  margin-top:8px; position:relative; overflow:hidden;
  border:1px solid rgba(0,212,255,0.30); background:rgba(0,212,255,0.05);
  border-radius:16px; padding:18px;
  display:none;
}
.success.show{ display:block; }
.success-inner{ display:flex; align-items:flex-start; gap:12px; position:relative; z-index:1;}
.success-mark{
  width:36px; height:36px; border-radius:999px;
  border:1px solid rgba(0,212,255,0.4); background:rgba(0,212,255,0.10); color:#7CC4FF;
  display:grid; place-items:center; flex-shrink:0;
}
.success .ttl{ font-weight:500; color:#fff; }
.success .sb{ margin-top:4px; font-size:13px; color:rgba(255,255,255,0.6);}
.burst{ position:absolute; inset:0; pointer-events:none; }
.burst span{ position:absolute; width:6px; height:6px; border-radius:999px; }
@keyframes burst-out{ 0%{ transform:translate(0,0) scale(0.5); opacity:0; } 30%{opacity:1;} 100%{ transform:translate(var(--tx),var(--ty)) scale(1); opacity:0; } }

/* ============================================================
   Externalized inline-style helpers (CSP: no inline style="")
   ============================================================ */
#problem{ padding-top:160px; }
#transform{ background:linear-gradient(180deg, var(--bg) 0%, #0B1020 50%, var(--bg) 100%); }
.cta .wrap{ position:relative; z-index:1; }
.cta h2.h-display{ font-size:clamp(40px,7.5vw,104px); line-height:1.0; }
.marquee-wrap{ max-width:var(--max); margin:48px auto 0; display:flex; flex-direction:column; gap:12px; }
.modal-eyebrow{ display:flex; align-items:center; gap:10px; }
.modal-eyebrow svg{ width:28px; height:28px; }
.modal-eyebrow-label{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.6); }

/* pipeline-bar widths (were inline) */
.pipe-bar.w40{ width:40%; }
.pipe-bar.w55{ width:55%; }
.pipe-bar.w60{ width:60%; }
.pipe-bar.w65{ width:65%; }
.pipe-bar.w70{ width:70%; }
.pipe-bar.w75{ width:75%; }
.pipe-bar.w80{ width:80%; }
.pipe-bar.w90{ width:90%; }
.pipe-bar.w100{ width:100%; }

/* ============================================================
   Platform "whole team" note (inside Web Platform feature)
   ============================================================ */
.feature .feat-team{
  margin-top:6px; padding-left:14px;
  border-left:2px solid rgba(0,212,255,0.55);
  color:rgba(255,255,255,0.72);
}
.feature .feat-team strong{ color:#fff; font-weight:600; }

/* ============================================================
   What's Included — deliverables checklist
   ============================================================ */
.incl-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:var(--max); margin:56px auto 0; }
@media (max-width:780px){ .incl-grid{ grid-template-columns:1fr; } }
.incl-item{
  display:flex; align-items:flex-start; gap:14px;
  padding:20px 22px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border:1px solid var(--line);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.incl-item:hover{ border-color:rgba(255,255,255,0.18); background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); }
.incl-item.full{
  grid-column:1 / -1;
  border-color:rgba(0,212,255,0.22);
  background:linear-gradient(180deg, rgba(0,212,255,0.06), rgba(255,255,255,0.015));
}
.incl-check{
  flex-shrink:0; width:30px; height:30px; border-radius:999px; margin-top:1px;
  display:grid; place-items:center;
  border:1px solid rgba(0,212,255,0.40);
  background:linear-gradient(180deg, rgba(0,212,255,0.16), rgba(0,212,255,0.02));
  color:#7CC4FF;
}
.incl-check svg{ width:15px; height:15px; }
.incl-item .it-txt{ display:flex; flex-direction:column; gap:3px; }
.incl-item .it-h{ font-size:16px; font-weight:500; letter-spacing:-0.01em; color:#fff; line-height:1.35; }
.incl-item .it-d{ font-size:13.5px; color:rgba(255,255,255,0.55); line-height:1.5; }

/* ============================================================
   Guarantee — centered risk-reversal panel
   ============================================================ */
.guarantee{ padding:120px max(20px,5vw); position:relative; overflow:hidden; }
.guarantee::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 500px at 50% 25%, rgba(0,102,255,0.12), transparent 65%);
}
.guar-panel{
  position:relative; max-width:920px; margin:0 auto; text-align:center;
  border-radius:28px; padding:56px max(24px,4vw); overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
}
.guar-panel::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,212,255,0.7), transparent);
}
.guar-badge{
  width:64px; height:64px; margin:0 auto 22px; border-radius:20px;
  display:grid; place-items:center;
  border:1px solid rgba(0,212,255,0.35);
  background:linear-gradient(180deg, rgba(0,212,255,0.16), rgba(0,212,255,0.02));
  color:#7CC4FF;
}
.guar-badge svg{ width:30px; height:30px; }
.guarantee .chip{ margin:0 auto; }
.guar-panel h2{ margin:18px auto 0; max-width:20ch; }
.guar-body{ margin:24px auto 0; max-width:58ch; color:rgba(255,255,255,0.68); font-size:clamp(15px,1.4vw,18px); line-height:1.6; }
.guar-body strong{ color:#fff; font-weight:600; }
.guar-tag{
  display:inline-block; margin-top:28px; padding:12px 22px; border-radius:999px;
  border:1px solid rgba(0,212,255,0.30); background:rgba(0,212,255,0.06);
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:#7CC4FF;
}

/* ============================================================
   Pricing — two transparent plan cards
   ============================================================ */
.pricing{ padding:120px max(20px,5vw); position:relative; overflow:hidden; }
.price-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:920px; margin:56px auto 0; }
@media (max-width:720px){ .price-grid{ grid-template-columns:1fr; } }
.price-card{
  position:relative; overflow:hidden; border-radius:24px; padding:36px;
  display:flex; flex-direction:column; gap:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  transition:border-color .3s var(--ease);
}
.price-card:hover{ border-color:rgba(255,255,255,0.18); }
.price-card.accent{ border-color:rgba(0,212,255,0.30); background:linear-gradient(180deg, rgba(0,212,255,0.07), rgba(255,255,255,0.015)); }
.price-card.accent::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,212,255,0.7), transparent);
}
.price-card .p-label{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#7CC4FF; }
.price-card .p-amount{ display:flex; align-items:baseline; gap:6px; }
.price-card .p-amount .num{ font-size:clamp(40px,6vw,64px); font-weight:600; letter-spacing:-0.045em; line-height:1; }
.price-card .p-amount .per{ font-size:15px; color:rgba(255,255,255,0.55); }
.price-card .p-desc{ margin:0; color:rgba(255,255,255,0.62); font-size:14.5px; line-height:1.55; }
.price-card .p-desc strong{ color:#fff; font-weight:600; }
.price-card .p-flag{
  align-self:flex-start; margin-top:2px; padding:6px 12px; border-radius:999px;
  border:1px solid rgba(0,212,255,0.30); background:rgba(0,212,255,0.06);
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:#7CC4FF;
}
.price-foot{ max-width:920px; margin:40px auto 0; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.price-note{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.45); }

/* ============================================================
   Legal pages (privacy / terms) — match the dark theme
   ============================================================ */
.legal{ max-width:820px; margin:0 auto; padding:160px max(20px,5vw) 120px; }
.legal h1{ font-size:clamp(34px,5vw,60px); font-weight:600; letter-spacing:-0.04em; margin:0 0 8px; }
.legal .legal-meta{ font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.45); margin-bottom:48px; }
.legal h2{ font-size:clamp(20px,2.4vw,26px); font-weight:600; letter-spacing:-0.02em; margin:44px 0 12px; }
.legal p, .legal li{ color:rgba(255,255,255,0.66); font-size:16px; line-height:1.7; }
.legal ul{ padding-left:20px; }
.legal a{ color:#7CC4FF; }
.legal a:hover{ text-decoration:underline; }
.legal-back{ display:inline-flex; align-items:center; gap:8px; margin-top:48px; color:rgba(255,255,255,0.7); font-size:14px; }
.legal-back:hover{ color:#fff; }

/* ============================================================
   Agency homepage — anchor offset under the fixed nav
   ============================================================ */
section[id]{ scroll-margin-top:84px; }

/* ============================================================
   Agency homepage — featured offer card
   ============================================================ */
.offer-card{
  position:relative; display:grid; grid-template-columns:1.15fr 1fr; gap:40px;
  max-width:var(--max); margin:56px auto 0;
  padding:40px max(28px,3vw); border-radius:28px;
}
@media (max-width:880px){ .offer-card{ grid-template-columns:1fr; gap:26px; padding:28px 22px; } }
.offer-main{ display:flex; flex-direction:column; gap:16px; }
.offer-badge{
  align-self:flex-start; padding:7px 14px; border-radius:999px;
  border:1px solid rgba(0,212,255,0.30); background:rgba(0,212,255,0.06);
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#7CC4FF;
}
.offer-name{ margin:0; font-size:clamp(26px,3.4vw,40px); font-weight:600; letter-spacing:-0.03em; line-height:1.05; }
.offer-one{ margin:0; color:rgba(255,255,255,0.68); font-size:15.5px; line-height:1.6; max-width:46ch; }
.offer-price{ display:flex; align-items:baseline; gap:14px; margin-top:2px; }
.op-now{ font-size:clamp(40px,6vw,60px); font-weight:600; letter-spacing:-0.045em; line-height:1;
  background:linear-gradient(120deg,#00D4FF 0%,#3B82F6 50%,#0066FF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.op-was{ font-size:22px; color:rgba(255,255,255,0.40); text-decoration:line-through; }
.offer-risk{
  display:flex; align-items:center; gap:12px; margin:0;
  padding:14px 16px; border-radius:14px;
  border:1px solid rgba(0,212,255,0.28); background:rgba(0,212,255,0.05);
  color:#fff; font-weight:500; font-size:15px; line-height:1.4;
}
.offer-risk-ic{ flex-shrink:0; width:30px; height:30px; border-radius:999px; display:grid; place-items:center;
  border:1px solid rgba(0,212,255,0.40); background:rgba(0,212,255,0.10); color:#7CC4FF; }
.offer-risk-ic svg{ width:16px; height:16px; }
.offer-foot{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:6px; }
.offer-value{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.10em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.offer-value strong{ color:#fff; font-weight:600; }
.offer-incl{ border-left:1px solid var(--line); padding-left:36px; display:flex; flex-direction:column; gap:16px; }
@media (max-width:880px){ .offer-incl{ border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:24px; } }
.offer-incl-label{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#7CC4FF; }
.offer-incl ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.offer-incl li{ position:relative; padding-left:34px; font-size:14.5px; color:rgba(255,255,255,0.82); line-height:1.45; }
.offer-incl li .incl-check{ position:absolute; left:0; top:0; width:24px; height:24px; }
.offer-incl li .incl-check svg{ width:13px; height:13px; }
.offer-incl .incl-sub{ display:block; color:rgba(255,255,255,0.50); font-size:13px; margin-top:2px; }

/* ============================================================
   Agency homepage — services grid
   ============================================================ */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:var(--max); margin:56px auto 0; }
@media (max-width:980px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .svc-grid{ grid-template-columns:1fr; } }
.svc-card{ padding:26px; display:flex; flex-direction:column; gap:12px; min-height:190px; }
.svc-flag{ position:absolute; right:16px; top:16px; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:#04121f; background:linear-gradient(120deg,#00D4FF,#3B82F6); padding:4px 9px; border-radius:999px; font-weight:700; }
.svc-feat{ border-color:rgba(0,212,255,0.30); background:linear-gradient(180deg, rgba(0,212,255,0.07), rgba(255,255,255,0.015)); }
.svc-feat::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(0,212,255,0.7), transparent); }
.svc-name{ margin:0; font-size:18px; font-weight:600; letter-spacing:-0.02em; max-width:18ch; }
.svc-price{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.svc-num{ font-size:24px; font-weight:600; letter-spacing:-0.03em; color:#fff; }
.svc-per{ font-size:13px; color:rgba(255,255,255,0.55); }
.svc-was{ font-size:14px; color:rgba(255,255,255,0.40); text-decoration:line-through; }
.svc-desc{ margin:0; color:rgba(255,255,255,0.55); font-size:14px; line-height:1.55; flex-grow:1; }
.svc-guar{ display:inline-flex; align-items:flex-start; gap:8px; margin-top:2px; padding:10px 12px; border-radius:12px;
  border:1px solid rgba(0,212,255,0.28); background:rgba(0,212,255,0.06); color:#cfe9ff; font-size:12.5px; line-height:1.4; }
.svc-guar svg{ width:15px; height:15px; flex-shrink:0; margin-top:1px; color:#7CC4FF; }
.svc-link{ margin-top:2px; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#7CC4FF; }
.svc-link:hover{ color:#fff; }

/* ============================================================
   Agency homepage — unfair advantages
   ============================================================ */
.adv-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:var(--max); margin:56px auto 0; }
@media (max-width:1080px){ .adv-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .adv-grid{ grid-template-columns:1fr; } }
.adv-card{ padding:24px; display:flex; flex-direction:column; gap:12px; min-height:170px; }
.adv-card .ix{ width:44px; height:44px; border-radius:14px; border:1px solid rgba(0,212,255,0.30);
  background:linear-gradient(180deg, rgba(0,212,255,0.14), rgba(0,212,255,0.02)); color:#7CC4FF; display:flex; align-items:center; justify-content:center; }
.adv-card .ix svg{ width:22px; height:22px; }
.adv-card h3{ margin:0; font-size:16.5px; font-weight:600; letter-spacing:-0.02em; line-height:1.25; }
.adv-card p{ margin:0; color:rgba(255,255,255,0.55); font-size:13.5px; line-height:1.5; }

/* ============================================================
   Agency homepage — results
   ============================================================ */
.results-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:var(--max); margin:56px auto 0; }
@media (max-width:780px){ .results-grid{ grid-template-columns:1fr; } }
.result-card{ padding:34px; display:flex; flex-direction:column; gap:16px; }
.result-tag{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:#7CC4FF; }
.result-quote{ margin:0; font-size:clamp(19px,2.2vw,26px); font-weight:500; letter-spacing:-0.02em; line-height:1.35; color:#fff; }
.result-meta{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.45); margin-top:auto; }

/* ============================================================
   Agency homepage — lead capture form
   ============================================================ */
.lead-sec{ position:relative; isolation:isolate; overflow:hidden; }
.lead-wrap{ max-width:760px; margin:48px auto 0; position:relative; z-index:1; }
.lead-form{ margin-top:0; }
.lead-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .lead-grid{ grid-template-columns:1fr; } }
.lead-grid .wide{ grid-column:1 / -1; }
.field textarea{
  width:100%; appearance:none; resize:vertical; min-height:120px;
  border:1px solid var(--line); background:rgba(255,255,255,0.02);
  border-radius:14px; color:#fff; font:inherit; font-size:15px; line-height:1.5;
  padding:26px 14px 12px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea:focus{ outline:none; border-color:rgba(0,212,255,0.55); background:rgba(0,212,255,0.04); }
.field textarea + label{ top:18px; }
.field.float textarea + label, .field textarea:focus + label{ top:8px; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:#7CC4FF; }
.lead-form .form-submit{ margin-top:16px; width:100%; }
.lead-consent{ margin:14px auto 0; max-width:54ch; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,0.52); text-align:center; }
.lead-consent a{ color:#7CC4FF; }
.lead-consent a:hover{ text-decoration:underline; }
.lead-bilingual{ margin:10px 0 0; text-align:center; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.10em; text-transform:uppercase; color:rgba(255,255,255,0.42); }
.lead-form .success{ margin-top:16px; }

/* ============================================================
   Agency homepage — pricing tiers (3-up)
   Built from existing tokens/patterns: .glass, .card-spot,
   gradient price (mirrors .op-now), cyan badges/risk boxes,
   .incl-check, .btn-primary, .svc-feat emphasis.
   ============================================================ */
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:var(--max); margin:56px auto 0; align-items:stretch; }
/* 3 cards in 2 cols would orphan the 3rd — let Empire span the bottom row */
@media (max-width:980px){ .tier-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } .tier-card.empire{ grid-column:1 / -1; } }
@media (max-width:640px){ .tier-grid{ grid-template-columns:1fr; } .tier-card.empire{ grid-column:auto; } }

/* overflow:visible so the straddling .tier-flag isn't clipped by .glass{overflow:hidden};
   re-round .card-spot itself (it relied on the parent clip for rounded corners) */
.tier-card{ position:relative; overflow:visible; display:flex; flex-direction:column; gap:15px; padding:32px 28px; border-radius:24px; }
.tier-card .card-spot{ border-radius:24px; }
@media (max-width:520px){ .tier-card{ padding:26px 22px; } }

/* Most-popular emphasis — mirrors .svc-feat treatment */
.tier-card.pop{ border-color:rgba(0,212,255,0.34);
  background:linear-gradient(180deg, rgba(0,212,255,0.075), rgba(255,255,255,0.015));
  box-shadow:0 0 0 1px rgba(0,212,255,0.10), 0 40px 90px -50px rgba(0,102,255,0.65); }
.tier-card.pop::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,212,255,0.75), transparent); }

/* Most-popular flag — mirrors .svc-flag pill, straddling the top edge */
.tier-flag{ position:absolute; left:50%; top:-13px; transform:translateX(-50%); white-space:nowrap;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:#04121f; background:linear-gradient(120deg,#00D4FF,#3B82F6); padding:6px 14px; border-radius:999px; font-weight:700;
  box-shadow:0 8px 24px -6px rgba(0,212,255,0.6); }

/* Badge — mirrors .offer-badge */
.tier-badge{ align-self:flex-start; padding:7px 13px; border-radius:999px;
  border:1px solid rgba(0,212,255,0.30); background:rgba(0,212,255,0.06);
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.10em; text-transform:uppercase; color:#7CC4FF; line-height:1.35; }
.tier-card.pop .tier-badge-quiet{ margin-top:6px; }
.tier-badge-quiet{ border-color:var(--line-2); background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.6); }

.tier-name{ margin:0; font-size:24px; font-weight:600; letter-spacing:-0.03em; line-height:1.1; }
.tier-one{ margin:0; color:rgba(255,255,255,0.66); font-size:14px; line-height:1.55; }

.tier-price{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:2px; }
.tier-now{ font-size:clamp(34px,3.4vw,46px); font-weight:600; letter-spacing:-0.045em; line-height:1;
  background:linear-gradient(120deg,#00D4FF 0%,#3B82F6 50%,#0066FF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tier-was{ font-size:19px; color:rgba(255,255,255,0.40); text-decoration:line-through; }
.tier-per{ font-size:13px; color:rgba(255,255,255,0.55); }
.tier-custom{ font-size:clamp(30px,3vw,42px); font-weight:600; letter-spacing:-0.035em; line-height:1; color:#fff; }
.tier-sub{ margin:0; font-size:13px; color:rgba(255,255,255,0.60); line-height:1.5; }
.tier-sub strong{ color:#fff; font-weight:600; }
.tier-urgency{ margin:0; font-size:12.5px; line-height:1.45; color:#cfe9ff;
  display:inline-flex; align-self:flex-start; gap:7px; padding:8px 12px; border-radius:11px;
  border:1px solid rgba(0,212,255,0.22); background:rgba(0,212,255,0.05); }

/* Include list — mirrors .offer-incl ul */
.tier-feat{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.tier-feat li{ position:relative; padding-left:30px; font-size:13.8px; color:rgba(255,255,255,0.82); line-height:1.45; }
.tier-feat li .incl-check{ position:absolute; left:0; top:0; width:22px; height:22px; }
.tier-feat li .incl-check svg{ width:12px; height:12px; }
.tier-feat .sub{ display:block; color:rgba(255,255,255,0.50); font-size:12.5px; margin-top:2px; }
.tier-feat li.head{ padding-left:0; font-size:13px; font-weight:600; color:#fff; letter-spacing:-0.01em; }

/* Bonus stack (Tier 1) — cyan-tinted inner panel */
.tier-bonus{ border:1px solid rgba(0,212,255,0.26); background:rgba(0,212,255,0.05); border-radius:16px;
  padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.tier-bonus-h{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:#7CC4FF; line-height:1.45; }
.tier-bonus ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.tier-bonus li{ position:relative; padding-left:28px; font-size:13px; color:rgba(255,255,255,0.80); line-height:1.4; }
.tier-bonus li .incl-check{ position:absolute; left:0; top:0; width:20px; height:20px; }
.tier-bonus li .incl-check svg{ width:11px; height:11px; }

.tier-anchor{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:rgba(255,255,255,0.55); line-height:1.5; }
.tier-anchor strong{ color:#fff; font-weight:600; }

/* Hook line (Tier 2) */
.tier-hook{ margin:0; font-size:13px; color:rgba(255,255,255,0.64); line-height:1.55; padding-left:13px; border-left:2px solid rgba(0,212,255,0.4); }

/* Empire (Tier 3) aspirational copy */
.tier-empire-body{ display:flex; flex-direction:column; gap:14px; }
.tier-empire-copy{ margin:0; font-size:13.8px; color:rgba(255,255,255,0.70); line-height:1.62; }
.tier-excl{ margin:0; font-size:13.5px; color:#cfe9ff; font-weight:500; letter-spacing:-0.01em; }

/* Foot — pins risk + CTA to the bottom so they align across cards */
.tier-foot{ margin-top:auto; padding-top:6px; display:flex; flex-direction:column; gap:13px; }
.tier-risk{ display:flex; align-items:center; gap:11px; margin:0; padding:11px 13px; border-radius:13px;
  border:1px solid rgba(0,212,255,0.26); background:rgba(0,212,255,0.05); color:#fff; font-weight:500; font-size:12.8px; line-height:1.4; }
.tier-risk .offer-risk-ic{ width:28px; height:28px; }
.tier-risk .offer-risk-ic svg{ width:15px; height:15px; }
.tier-cta{ width:100%; justify-content:center; }

/* Trust line under the grid */
.tier-trust{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; text-align:center;
  max-width:var(--max); margin:30px auto 0; color:rgba(255,255,255,0.72); font-size:14.5px; line-height:1.5; }

/* ============================================================
   Agency homepage — monthly performance report section
   Reuses .feature + .mock (+ .kpi/.pipe/.feed-row) verbatim;
   only the copy bullet list + 3 narrow bar widths are new.
   ============================================================ */
.rep-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.rep-points li{ position:relative; padding-left:30px; font-size:14px; color:rgba(255,255,255,0.78); line-height:1.5; max-width:42ch; }
.rep-points li .incl-check{ position:absolute; left:0; top:0; width:22px; height:22px; }
.rep-points li .incl-check svg{ width:12px; height:12px; }
.rep-effort{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.10em; text-transform:uppercase; color:rgba(255,255,255,0.50); }
/* extra bar widths (match existing .pipe-bar.wNN scale) for traffic-source mock */
.pipe-bar.w10{ width:10%; }
.pipe-bar.w20{ width:20%; }
.pipe-bar.w30{ width:30%; }

/* ============================================================
   Cookie consent banner (dark theme, gates GA)
   ============================================================ */
.cookie-banner{
  position:fixed; left:max(16px,3vw); right:max(16px,3vw); bottom:max(16px,3vw); z-index:300;
  max-width:560px; margin-left:auto;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:18px 20px; border-radius:18px;
  background:rgba(11,11,15,0.92); border:1px solid var(--line-2);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.85);
  animation:cookie-in .5s var(--ease) both;
}
@keyframes cookie-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
.cookie-msg{ margin:0; flex:1 1 240px; font-size:13px; line-height:1.5; color:rgba(255,255,255,0.72); }
.cookie-msg a{ color:#7CC4FF; }
.cookie-msg a:hover{ text-decoration:underline; }
.cookie-actions{ display:flex; gap:10px; flex-shrink:0; }
.cookie-btn{ padding:10px 18px; border-radius:999px; font-size:13px; font-weight:500; transition:box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.cookie-decline{ border:1px solid var(--line-2); background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.8); }
.cookie-decline:hover{ background:rgba(255,255,255,0.07); color:#fff; }
.cookie-accept{ color:#fff; background:linear-gradient(180deg,#1F6FFF 0%,#0066FF 50%,#0052D4 100%); box-shadow:0 0 24px rgba(0,102,255,0.35), inset 0 1px 0 rgba(255,255,255,0.25); }
.cookie-accept:hover{ box-shadow:0 0 50px rgba(0,102,255,0.6); }
@media (max-width:520px){ .cookie-banner{ flex-direction:column; align-items:stretch; } .cookie-actions{ justify-content:flex-end; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; filter:none; }
  .hero .hero-badge, .hero p, .hero-actions, .hero-proof{ opacity:1; transform:none; }
  .hero h1 .word > span{ transform:none; }
}