/* ElevatorPlus design tokens + shared primitives.
   Extracted verbatim from landing-revenue-leak-walkthrough/index.html so both
   pages share one system. Do not fork this file — edit here, both pages move.
   Brand: Deep Blue #0A1A6F / Yellow #FFCC00 / Poppins only. */

:root{
  --blue:#0A1A6F; --blue-deep:#0C1549; --blue-vivid:#1200A5;
  --yellow:#FFCC00; --yellow-soft:#FFED67;
  --ink:#454545; --line:#E7E7E7; --white:#FFFFFF;
  --paper:#F6F7FB;
  --maxw:1120px;
  --r:14px;
  --shadow:0 18px 50px -22px rgba(10,26,111,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Poppins',sans-serif; color:var(--ink);
  background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased;
  font-size:17px;
}
h1,h2,h3,h4{font-weight:700; line-height:1.12; letter-spacing:-.02em; color:var(--blue); margin:0}
p{margin:0 0 1rem}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-vivid); margin:0 0 14px;
}
section{padding:88px 0}
@media(max-width:640px){section{padding:60px 0}}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:1.02rem;
  background:var(--yellow); color:var(--blue-deep); text-decoration:none;
  padding:16px 30px; border-radius:999px; border:2px solid var(--yellow);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 10px 26px -10px rgba(255,204,0,.7); cursor:pointer;
  font-family:inherit;
}
.btn:hover{transform:translateY(-2px); background:var(--yellow-soft); border-color:var(--yellow-soft)}
.btn:focus-visible{outline:3px solid var(--blue-vivid); outline-offset:3px}
.btn[disabled]{opacity:.7; cursor:default; transform:none}
.btn .arw{font-size:1.15em; line-height:0}
.sub-cta{font-size:.92rem; color:var(--ink); margin-top:14px}
.on-blue .sub-cta{color:rgba(255,255,255,.75)}

/* Header */
header.nav{
  position:sticky; top:0; z-index:50; background:var(--blue);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-in{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:var(--maxw); margin:0 auto}
.logo{display:flex; height:38px}
.logo svg{height:38px; width:auto; display:block}
.nav .btn{padding:11px 20px; font-size:.9rem}
@media(max-width:560px){.nav .btn .full{display:none}}

/* Hero shell */
.hero{background:
    radial-gradient(1200px 600px at 80% -10%, rgba(18,0,165,.55), transparent 60%),
    linear-gradient(180deg,var(--blue),var(--blue-deep));
  color:var(--white); position:relative; overflow:hidden; padding:96px 0 104px;}
.hero:before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(900px 500px at 75% 10%,#000,transparent 75%); opacity:.5;
}
.hero .wrap{position:relative}
.hero h1{color:#fff; font-size:clamp(2.1rem,5.3vw,3.9rem); max-width:17ch}
.hero h1 .hl{color:var(--yellow)}
.hero-lede{font-size:clamp(1.02rem,2.2vw,1.22rem); color:rgba(255,255,255,.82); max-width:60ch; margin:22px 0 30px; font-weight:400}
.hero-lede b{color:#fff; font-weight:600}

.anim{opacity:0; transform:translateY(16px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.32s}.d4{animation-delay:.46s}.d5{animation-delay:.6s}
@keyframes rise{to{opacity:1; transform:none}}

.trust{display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:40px; align-items:center}
.chip{
  display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; color:#fff;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  padding:8px 14px; border-radius:999px;
}
.chip b{color:var(--yellow); font-weight:700}

/* Section bits */
.lede{font-size:1.12rem; max-width:60ch}
.sec-head{max-width:42ch; margin-bottom:44px}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
.kicker-line{width:52px; height:4px; background:var(--yellow); border-radius:3px; margin-bottom:22px}

/* Cards */
.grid{display:grid; gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.g3,.g2{grid-template-columns:1fr}}
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:28px; transition:transform .18s ease, box-shadow .2s ease, border-color .2s;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:#d3d8ee}
.card h3{font-size:1.18rem; margin-bottom:10px}
.card p{margin:0; font-size:.98rem}
.card .num{font-weight:800; font-size:1.1rem; color:var(--blue-vivid); display:block; margin-bottom:6px}

/* Dark section */
.dark{background:linear-gradient(180deg,var(--blue),var(--blue-deep)); color:#fff}
.dark h2,.dark h3{color:#fff}
.dark .sec-head p,.dark .lede{color:rgba(255,255,255,.8)}
.dark .card{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)}
.dark .card:hover{border-color:rgba(255,204,0,.4); box-shadow:none}
.dark .card h3{color:#fff}.dark .card p{color:rgba(255,255,255,.78)}

/* Footer */
footer{background:var(--blue-deep); color:rgba(255,255,255,.7); padding:44px 0; text-align:center; font-size:.88rem}
footer .wm{font-weight:800; letter-spacing:.02em; color:#fff; font-size:1.1rem; margin-bottom:10px}
footer a{color:var(--yellow); text-decoration:none}

/* Sticky mobile CTA */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:60; padding:12px 16px; background:rgba(12,21,73,.96); backdrop-filter:blur(6px); display:none; border-top:1px solid rgba(255,255,255,.12)}
.sticky-cta .btn{width:100%; justify-content:center}
@media(max-width:640px){.sticky-cta{display:block} body{padding-bottom:78px}}

@media(prefers-reduced-motion:reduce){.anim{animation:none; opacity:1; transform:none}}