:root{
  --paper:#F6F6F1;--card:#FFFFFF;--ink:#101321;--ink-soft:#565D75;
  --cobalt:#2E4BFF;--cobalt-deep:#1B32C4;--lime:#C9F63F;--amber:#FFB020;--green:#18B26B;--warn:#E8503A;
  --rule:rgba(16,19,33,.12);
  --display:'Archivo',sans-serif;--body:'Instrument Sans',sans-serif;--mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.65;font-size:16.5px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.015em;line-height:1.05}
::selection{background:var(--lime);color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4.5vw,48px)}
.mono{font-family:var(--mono)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(246,246,241,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.nav-inner{display:flex;justify-content:space-between;align-items:center;height:66px}
.logo{font-family:var(--display);font-weight:900;font-size:19px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px;letter-spacing:-.01em}
.logo .dotmark{width:12px;height:12px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 0 4px var(--lime)}
.navlinks{display:flex;gap:26px;align-items:center;font-size:14.5px;font-weight:500}
.navlinks a{color:var(--ink-soft);text-decoration:none;transition:color .2s}
.navlinks a:hover{color:var(--ink)}
.pill{background:var(--ink);color:#fff !important;border-radius:999px;padding:10px 20px;font-family:var(--display);font-weight:700;transition:background .2s}
.pill:hover{background:var(--cobalt)}
@media(max-width:820px){.navlinks a:not(.pill){display:none}}

/* ---------- HERO ---------- */
.hero{padding:clamp(60px,10vh,110px) 0 60px}
.status-chip{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);background:var(--card);border:1px solid var(--rule);border-radius:999px;
  padding:8px 16px;margin-bottom:30px}
.status-chip .d{width:8px;height:8px;border-radius:50%;background:var(--green);animation:blink 2s infinite}
@keyframes blink{50%{opacity:.35}}
h1.big{font-size:clamp(44px,7.4vw,102px);font-weight:900;font-variation-settings:'wdth' 120;text-transform:uppercase;max-width:14ch}
h1.big .hl{position:relative;white-space:nowrap}
h1.big .hl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:8%;height:34%;background:var(--lime);z-index:-1;
  transform:scaleX(0);transform-origin:left;animation:mark .7s .5s ease forwards}
@keyframes mark{to{transform:scaleX(1)}}
h1.big .swap-wrap{display:inline-grid;overflow:hidden;height:1.05em;vertical-align:top}
.swap{display:grid;transition:transform .5s cubic-bezier(.75,0,.2,1)}
.swap span{height:1.05em;color:var(--cobalt);white-space:nowrap}
.hero .lede{font-size:clamp(16.5px,1.9vw,20px);color:var(--ink-soft);max-width:52ch;margin:28px 0 36px}
.hero .lede b{color:var(--ink)}
.ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:15.5px;
  padding:16px 30px;border-radius:999px;text-decoration:none;cursor:pointer;border:none;transition:transform .15s,background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--cobalt);box-shadow:0 12px 28px -10px rgba(46,75,255,.5)}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-line:hover{background:var(--lime);border-color:var(--lime)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-ghostw{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.hero-foot{margin-top:44px;display:flex;gap:26px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-soft)}
.hero-foot span{display:flex;gap:8px;align-items:center}
.hero-foot i{font-style:normal;color:var(--cobalt)}

/* ---------- MARQUEE ---------- */
.marq{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);background:var(--lime);overflow:hidden;padding:14px 0}
.marq-track{display:flex;gap:44px;width:max-content;white-space:nowrap;font-family:var(--display);font-weight:800;
  font-size:17px;text-transform:uppercase;letter-spacing:.02em;animation:mq 26s linear infinite}
.marq-track i{font-style:normal;color:var(--cobalt)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- BENTO ---------- */
.bento-sec{padding:96px 0 30px}
.sec-kick{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--cobalt);margin-bottom:14px}
h2.sec{font-size:clamp(30px,4.2vw,52px);font-weight:900;font-variation-settings:'wdth' 118;text-transform:uppercase;max-width:20ch}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
@media(max-width:960px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bento{grid-template-columns:1fr}}
.cell{background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:26px;position:relative;overflow:hidden;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.cell:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(16,19,33,.18);border-color:var(--ink)}
.cell .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.cell h3{font-size:20px;font-weight:800;margin:10px 0 8px;font-variation-settings:'wdth' 114}
.cell p{font-size:14.5px;color:var(--ink-soft)}
.span2{grid-column:span 2}
.span2r{grid-column:span 2;grid-row:span 2}
@media(max-width:560px){.span2,.span2r{grid-column:span 1}}

/* migration cell */
.mig .toggle{display:inline-flex;background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:3px;margin:14px 0 16px}
.mig .toggle button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:none;
  background:transparent;padding:7px 16px;border-radius:999px;cursor:pointer;color:var(--ink-soft)}
.mig .toggle button.on{background:var(--ink);color:#fff}
.mig .diagram{position:relative;height:190px}
.mig svg{width:100%;height:100%}
.mig .messy line{stroke:var(--warn);stroke-width:1.2;stroke-dasharray:3 4}
.mig .messy circle{fill:var(--warn)}
.mig .clean line{stroke:var(--cobalt);stroke-width:1.6}
.mig .clean rect{fill:#fff;stroke:var(--cobalt);stroke-width:1.4;rx:6}
.mig .clean text{font-family:var(--mono);font-size:8.5px;fill:var(--ink)}
.mig .messy text{font-family:var(--mono);font-size:8.5px;fill:var(--warn)}
.mig .state{transition:opacity .45s ease}
.mig .state.off{opacity:0;pointer-events:none;position:absolute;inset:0}

/* terminal cell */
.term-cell{background:var(--ink);color:#DFE6FF;border-color:var(--ink)}
.term-cell .tag{color:#8B93B8}
.term-cell:hover{border-color:var(--cobalt)}
.term{font-family:var(--mono);font-size:12.5px;line-height:1.9;margin-top:14px;min-height:150px}
.term .c{color:var(--lime)}
.term .ok{color:#5CE0A9}
.cursor{display:inline-block;width:8px;height:13px;background:var(--lime);vertical-align:-2px;animation:cur 1s steps(1) infinite}
@keyframes cur{50%{opacity:0}}

/* stat cells */
.stat-cell{display:flex;flex-direction:column;justify-content:space-between}
.stat-cell .big-n{font-family:var(--display);font-weight:900;font-variation-settings:'wdth' 122;font-size:clamp(40px,4.6vw,58px);
  line-height:1;color:var(--cobalt)}
.stat-cell.limey{background:var(--lime);border-color:var(--ink)}
.stat-cell.limey .big-n{color:var(--ink)}
.stat-cell .cap{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px}
.stat-cell.limey .cap{color:var(--ink)}

/* savings bar cell */
.save-cell .bars{display:flex;align-items:flex-end;gap:10px;height:120px;margin-top:18px}
.save-cell .bar{border-radius:8px 8px 4px 4px;position:relative;background:var(--paper);border:1px solid var(--rule);overflow:hidden}
.save-cell .bar i{position:absolute;bottom:0;left:0;right:0;background:var(--ink);transition:height 1.2s cubic-bezier(.2,.8,.2,1);height:0}
.save-cell .bar.two i{background:var(--cobalt)}
.save-cell .bl{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink-soft);text-align:center;margin-top:6px;text-transform:uppercase}
.save-cell .delta{position:absolute;top:22px;right:24px;font-family:var(--display);font-weight:900;font-size:26px;color:var(--green)}

/* badge cell */
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.badges span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;border:1.5px solid var(--ink);border-radius:999px;padding:7px 14px}
.badges span.f{background:var(--ink);color:#fff}

/* quote cell */
.quote-cell{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.quote-cell .tag{color:#B9C4FF}
.quote-cell p.q{font-size:16.5px;font-weight:500;color:#fff;line-height:1.55;margin-top:12px}
.quote-cell .who{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#B9C4FF;margin-top:16px}

/* local cell */
.local-cell .map{margin-top:14px;height:110px;border-radius:12px;background:
  repeating-linear-gradient(0deg,rgba(46,75,255,.08) 0 1px,transparent 1px 14px),
  repeating-linear-gradient(90deg,rgba(46,75,255,.08) 0 1px,transparent 1px 14px),var(--paper);
  position:relative;border:1px solid var(--rule)}
.local-cell .pin{position:absolute;top:44%;left:56%;width:14px;height:14px;border-radius:50%;background:var(--cobalt);
  box-shadow:0 0 0 5px rgba(46,75,255,.2)}
.local-cell .pin::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(46,75,255,.35);animation:ping 2s infinite}
@keyframes ping{to{transform:scale(1.9);opacity:0}}

/* ---------- PROCESS ---------- */
.proc{padding:100px 0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:50px;border-top:1.5px solid var(--ink)}
@media(max-width:880px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{padding:26px 22px 30px;border-right:1px solid var(--rule);position:relative}
.step:last-child{border-right:none}
@media(max-width:880px){.step{border-bottom:1px solid var(--rule)}}
.step .num{font-family:var(--display);font-weight:900;font-size:44px;color:transparent;-webkit-text-stroke:1.5px var(--ink);opacity:.8}
.step:hover .num{color:var(--lime)}
.step h3{font-size:18px;font-weight:800;text-transform:uppercase;margin:12px 0 8px}
.step p{font-size:14px;color:var(--ink-soft)}

/* ---------- CTA + FORM ---------- */
.cta{background:var(--ink);color:#fff;padding:110px 0;position:relative;overflow:hidden}
.cta-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
@media(max-width:900px){.cta-grid{grid-template-columns:1fr}}
.cta h2{font-size:clamp(36px,5.6vw,74px);font-weight:900;font-variation-settings:'wdth' 122;text-transform:uppercase;line-height:.98}
.cta h2 em{font-style:normal;color:var(--lime)}
.cta p{color:#9BA3C4;margin:22px 0 34px;max-width:46ch}
.cta .mono-note{margin-top:36px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:#666F94;text-transform:uppercase}
.form-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:28px}
.form-card label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#9BA3C4;margin:16px 0 7px}
.form-card label:first-of-type{margin-top:0}
.form-card input,.form-card textarea{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:10px;color:#fff;font-family:var(--body);font-size:15px;padding:13px 14px}
.form-card input::placeholder,.form-card textarea::placeholder{color:#666F94}
.form-card textarea{min-height:96px;resize:vertical}
.form-card .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-card button{margin-top:22px;width:100%}
.form-msg{margin-top:14px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;min-height:1.4em}
.form-msg.ok{color:var(--lime)}
.form-msg.err{color:#FF9B8D}

footer{background:var(--ink);border-top:1px solid rgba(255,255,255,.14);color:#9BA3C4;padding:24px 0;font-family:var(--mono);font-size:12px;letter-spacing:.08em}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer a{color:#9BA3C4;text-decoration:none}
footer a:hover{color:var(--lime)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  h1.big .hl::after{transform:scaleX(1)}
}