/* =========================================================
   Gerbang Digital Niaga — Landing
   Brand: Geist / Geist Mono / Instrument Serif
   Palette: warm paper + ink + teal accent
   ========================================================= */

:root{
  --bg: #f3efe6;
  --bg-2: #ebe5d6;
  --paper: #faf8f2;
  --ink: #0f1417;
  --ink-2: #2a3236;
  --ink-3: #5a6166;
  --rule: #d9d2c2;
  --rule-2: #e6e0d2;
  --teal: #0a7a82;
  --teal-2: #0a8b94;
  --teal-ink: #033c41;
  --ochre: #b8732a;
  --navy: #0f1928;
  --navy-rule: #1f2c3d;

  /* accent is tweakable */
  --accent: var(--teal);
  --accent-2: var(--teal-2);

  --maxw: 1240px;
  --pad: 40px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Geist', system-ui, sans-serif;
  font-feature-settings: "ss01","ss02","cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---------- shared type ---------- */
.eyebrow{
  font-family:'Geist Mono', monospace;
  font-size:13px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:""; width:36px; height:1px; background:currentColor; opacity:0.8;
}
.eyebrow.no-line::before{ display:none; }
.serif-it{
  font-family:'Instrument Serif', serif; font-style:italic; font-weight:400;
  letter-spacing:-0.01em;
}
.mono{ font-family:'Geist Mono', monospace; }

h1,h2,h3,h4{ margin:0; letter-spacing:-0.035em; line-height:1.02; font-weight:600; }
p{ margin:0; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

.section{ padding:120px 0; position:relative; }
.section-head{ max-width:760px; }
.section-head h2{
  font-size:clamp(32px, 4.4vw, 56px); margin-top:22px; color:var(--ink);
}
.section-head h2 .light{ font-weight:300; color:var(--ink-2); }
.section-head h2 .it{ font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; color:var(--accent); }
.section-head .lede{
  margin-top:24px; font-size:19px; line-height:1.6; color:var(--ink-2); max-width:680px;
}
.section-head .lede strong{ color:var(--ink); font-weight:600; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Geist', sans-serif; font-size:15px; font-weight:600; letter-spacing:-0.01em;
  padding:14px 24px; border-radius:8px; cursor:pointer; border:1px solid transparent;
  transition:transform .14s ease, background .15s ease, color .15s, border-color .15s;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; }
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:#000; transform:translateY(-1px); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--rule); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ transform:translateY(-1px); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s, background .2s;
}
.nav.scrolled{ border-bottom-color:var(--rule); }
.nav .nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  height:74px; display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.nav .brand{ display:flex; align-items:center; gap:14px; }
.nav .brand img{ height:30px; width:auto; }
.nav-links{
  display:flex; align-items:center; gap:34px; margin-left:auto;
}
.nav-links a{
  font-size:14.5px; font-weight:500; color:var(--ink-2); letter-spacing:-0.005em;
  transition:color .15s; position:relative;
}
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-cta .btn{ padding:11px 20px; font-size:14px; }
.nav-burger{ display:none; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  padding:96px 0 0;
  border-bottom:1px solid var(--rule);
}
.hero-grid{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:block;
  min-height:0;
}
.hero-copy{ position:relative; z-index:2; padding-bottom:96px; max-width:860px; }
.hero h1{
  font-size:clamp(40px, 6vw, 78px); margin-top:28px; color:var(--ink);
  letter-spacing:-0.04em; line-height:0.98;
}
.hero h1 .light{ font-weight:300; color:var(--ink-2); }
.hero h1 .it{ font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; color:var(--accent); letter-spacing:-0.01em; }
.hero .sub{
  margin-top:30px; font-size:20px; line-height:1.6; color:var(--ink-2); max-width:560px;
}
.hero .sub strong{ color:var(--ink); font-weight:600; }
.hero-actions{ display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }

/* hero bars motif (the GDN gate, recreated in CSS) */
.hero-art{
  position:relative; z-index:1; align-self:stretch;
  display:flex; align-items:center; justify-content:center;
  min-height:520px;
}
.gate{
  display:flex; gap:26px; transform:translateY(-10px);
}
.gate .bar{
  width:62px; height:340px;
  background:linear-gradient(180deg, var(--paper), #fff);
  border:1.5px solid var(--ink);
  transform:skewX(-15deg);
  position:relative;
  box-shadow:14px 18px 0 -2px rgba(15,20,23,0.06);
  animation:gate-rise .9s cubic-bezier(.2,.7,.2,1) both;
}
.gate .bar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1.5px; height:34px;
  background:var(--ink);
  transform:translateY(100%) skewX(0deg);
  clip-path:polygon(0 0,100% 0,76% 100%,-24% 100%);
}
.gate .bar:nth-child(1){ animation-delay:.02s; }
.gate .bar:nth-child(2){ animation-delay:.10s; }
.gate .bar:nth-child(3){ animation-delay:.18s; }
.gate .bar:nth-child(4){ animation-delay:.26s; background:linear-gradient(180deg, var(--accent), var(--accent-2)); border-color:var(--accent-2); }
.gate .bar:nth-child(4)::after{ background:var(--teal-ink); }
@keyframes gate-rise{
  from{ opacity:0; transform:skewX(-15deg) translateY(40px); }
  to{ opacity:1; transform:skewX(-15deg) translateY(0); }
}
/* faint guide lines behind gate */
.hero-art .grid-lines{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--rule) 1px, transparent 1px);
  background-size:100% 56px; opacity:0.5;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 75%);
}
.hero-art .art-tag{
  position:absolute; left:8px; bottom:24px;
  font-family:'Geist Mono', monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-3);
}

/* hero stat strip */
.hero-stats{
  border-top:1px solid var(--rule);
  background:color-mix(in srgb, var(--paper) 70%, transparent);
}
.hero-stats .row{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.hero-stats .stat{
  padding:30px 28px; border-left:1px solid var(--rule);
  display:flex; flex-direction:column; gap:6px;
}
.hero-stats .stat:first-child{ border-left:0; padding-left:0; }
.hero-stats .stat .v{
  font-size:38px; font-weight:600; letter-spacing:-0.04em; color:var(--ink); line-height:1;
  display:flex; align-items:baseline; gap:8px;
}
.hero-stats .stat .v .u{ font-size:17px; font-weight:500; color:var(--accent); }
.hero-stats .stat .k{
  font-family:'Geist Mono', monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3);
}

/* =========================================================
   MARQUEE / SOURCES STRIP
   ========================================================= */
.sources{
  padding:46px 0; border-bottom:1px solid var(--rule); background:var(--paper);
}
.sources .lab{
  font-family:'Geist Mono', monospace; font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-3); text-align:center; margin-bottom:26px;
}
.chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  max-width:980px; margin:0 auto;
}
.chips .chip{
  font-family:'Geist Mono', monospace; font-size:13px; letter-spacing:0.04em;
  color:var(--ink-2); background:var(--bg); border:1px solid var(--rule);
  padding:10px 18px; border-radius:99px;
}

/* =========================================================
   GENERIC: cards / flow
   ========================================================= */
.flow{
  margin-top:64px;
  display:grid; grid-template-columns:1fr 56px 1.15fr 56px 1fr; align-items:stretch;
}
.flow-col{
  background:var(--paper); border:1px solid var(--rule); border-radius:10px;
  padding:30px; display:flex; flex-direction:column; gap:18px;
}
.flow-col.core{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.flow-col .col-tag{
  display:flex; align-items:center; gap:12px;
  font-family:'Geist Mono', monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-3);
}
.flow-col.core .col-tag{ color:#a8b3b8; }
.flow-col .col-tag .num{
  background:var(--accent); color:#fff; padding:3px 9px; border-radius:99px; font-weight:600; font-size:10px;
}
.flow-col.core .col-tag .num{ background:var(--accent-2); color:var(--ink); }
.flow-col .col-ttl{ font-size:23px; font-weight:600; letter-spacing:-0.02em; line-height:1.18; color:var(--ink); }
.flow-col.core .col-ttl{ color:#fff; }
.flow-col .col-sub{ font-size:14.5px; line-height:1.5; color:var(--ink-3); }
.flow-col.core .col-sub{ color:#a8b3b8; }
.flow-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.flow-chips span{
  font-family:'Geist Mono', monospace; font-size:11.5px; letter-spacing:0.03em; color:var(--ink-2);
  border:1px solid var(--rule); border-radius:99px; padding:6px 12px; background:var(--bg);
}
.flow-col.core .core-stack{ display:flex; flex-direction:column; gap:14px; margin-top:6px; }
.flow-col.core .core-line{ border-top:1px solid #2a3236; padding-top:13px; }
.flow-col.core .core-line:first-child{ border-top:0; padding-top:0; }
.flow-col.core .core-h{ display:block; font-size:16px; font-weight:600; color:#fff; }
.flow-col.core .core-d{ display:block; font-family:'Geist Mono', monospace; font-size:12px; color:#a8b3b8; margin-top:3px; }
.flow-arrow{ display:flex; align-items:center; justify-content:center; color:var(--ink-3); }
.flow-arrow svg{ width:42px; height:14px; }

/* =========================================================
   PLATFORMS
   ========================================================= */
.platforms{ background:var(--bg-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.plat-grid{
  margin-top:64px; display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.plat{
  border-radius:14px; padding:44px 44px 40px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:22px; min-height:420px;
}
.plat.konekta{ background:var(--navy); color:#e8edf2; border:1px solid var(--navy-rule); }
.plat.socx{ background:var(--ink); color:var(--bg); border:1px solid var(--ink); }
.plat .plat-head{ display:flex; align-items:center; justify-content:space-between; }
.plat .plat-logo{ height:36px; width:auto; }
.plat.socx .plat-logo{ height:30px; }
.plat .plat-badge{
  font-family:'Geist Mono', monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(255,255,255,0.6); border:1px solid rgba(255,255,255,0.18); padding:5px 11px; border-radius:99px;
}
.plat h3{ font-size:30px; font-weight:600; color:#fff; letter-spacing:-0.03em; line-height:1.1; }
.plat .plat-desc{ font-size:16px; line-height:1.6; color:rgba(255,255,255,0.72); max-width:480px; }
.plat .plat-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin-top:auto; }
.plat .plat-list li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:rgba(255,255,255,0.88); }
.plat .plat-list li::before{ content:""; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.plat.konekta .plat-list li::before{ background:var(--teal-2); }
.plat.socx .plat-list li::before{ background:var(--accent-2); }
.plat .plat-foot{ display:flex; align-items:center; gap:10px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.12); margin-top:6px; }
.plat .plat-foot .pk{ font-family:'Geist Mono', monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.plat .plat-foot .pv{ font-size:14px; font-weight:600; color:#fff; }
.plat .plat-link{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--teal-2); }
.plat.socx .plat-link{ color:var(--accent-2); }

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.steps{ margin-top:64px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:step; }
.step{
  padding:34px 30px 30px; border-left:1px solid var(--rule); position:relative;
  display:flex; flex-direction:column; gap:14px;
}
.step:first-child{ border-left:0; padding-left:0; }
.step .sn{
  font-family:'Geist Mono', monospace; font-size:12px; letter-spacing:0.16em; color:var(--accent); font-weight:600;
}
.step h4{ font-size:21px; font-weight:600; color:var(--ink); letter-spacing:-0.02em; line-height:1.2; }
.step p{ font-size:14.5px; line-height:1.55; color:var(--ink-2); }

/* =========================================================
   BANK PARTNERSHIP (dark navy)
   ========================================================= */
.bank{ background:var(--navy); color:#e8edf2; }
.bank .section-head h2{ color:#fff; }
.bank .section-head h2 .light{ color:#9aa6b2; }
.bank .section-head h2 .it{ color:var(--teal-2); }
.bank .section-head .lede{ color:#b8c2cc; }
.bank .section-head .lede strong{ color:#fff; }
.bank .eyebrow{ color:var(--teal-2); }
.bank-grid{ margin-top:64px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.area{
  background:rgba(255,255,255,0.02); border:1px solid var(--navy-rule); border-radius:12px;
  padding:30px 28px 28px; display:flex; flex-direction:column; gap:16px; min-height:280px;
}
.area .ah{ display:flex; align-items:center; justify-content:space-between; }
.area .an{ font-family:'Geist Mono', monospace; font-size:10px; letter-spacing:0.16em; color:var(--ink); background:var(--teal-2); padding:4px 9px; border-radius:99px; font-weight:600; }
.area .acat{ font-family:'Geist Mono', monospace; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:#6b7785; }
.area h4{ font-size:22px; font-weight:600; color:#fff; letter-spacing:-0.025em; line-height:1.15; }
.area p{ font-size:14px; line-height:1.55; color:#9aa6b2; }
.area .atag{ margin-top:auto; padding-top:16px; border-top:1px solid var(--navy-rule); font-family:'Geist Mono', monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--teal-2); }

/* =========================================================
   STATS BAND
   ========================================================= */
.band{ background:var(--ink); color:#fff; padding:84px 0; }
.band .row{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.band .b{
  padding:0 36px; border-left:1px solid #2a3236; display:flex; flex-direction:column; gap:10px;
}
.band .b:first-child{ border-left:0; padding-left:0; }
.band .b .v{ font-size:clamp(40px,4.6vw,58px); font-weight:600; letter-spacing:-0.04em; line-height:1; color:#fff; }
.band .b .v .u{ font-size:0.4em; color:var(--accent-2); font-weight:500; margin-left:6px; letter-spacing:-0.01em; }
.band .b .k{ font-family:'Geist Mono', monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:#7a868d; }

/* =========================================================
   CONTACT / CTA
   ========================================================= */
.cta{ padding:120px 0; }
.cta-card{
  background:var(--accent); color:#fff; border-radius:20px; overflow:hidden;
  display:grid; grid-template-columns:1.1fr 0.9fr; position:relative;
}
.cta-card .cta-l{ padding:64px 60px; }
.cta-card .eyebrow{ color:rgba(255,255,255,0.8); }
.cta-card h2{ font-size:clamp(34px,4vw,52px); color:#fff; margin-top:22px; letter-spacing:-0.035em; }
.cta-card h2 .it{ font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; }
.cta-card p{ margin-top:22px; font-size:18px; line-height:1.6; color:rgba(255,255,255,0.88); max-width:440px; }
.cta-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.cta-card .cta-r{
  background:rgba(0,0,0,0.16); padding:64px 56px; display:flex; flex-direction:column; gap:0; justify-content:center;
}
.contact-line{ padding:20px 0; border-top:1px solid rgba(255,255,255,0.18); display:flex; flex-direction:column; gap:4px; }
.contact-line:first-child{ border-top:0; padding-top:0; }
.contact-line:last-child{ padding-bottom:0; }
.contact-line .ck{ font-family:'Geist Mono', monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.65); }
.contact-line .cv{ font-size:19px; font-weight:600; color:#fff; letter-spacing:-0.01em; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--ink); color:#cfd3d6; padding:72px 0 40px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid #2a3236; }
.footer .f-brand img{ height:30px; margin-bottom:20px; }
.footer .f-brand p{ font-size:14.5px; line-height:1.6; color:#9aa6b2; max-width:300px; }
.footer .f-col h5{ font-family:'Geist Mono', monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:#7a868d; margin-bottom:18px; font-weight:500; }
.footer .f-col a{ display:block; font-size:14.5px; color:#cfd3d6; padding:6px 0; transition:color .15s; }
.footer .f-col a:hover{ color:#fff; }
.footer-bot{ display:flex; align-items:center; justify-content:space-between; padding-top:28px; gap:20px; flex-wrap:wrap; }
.footer-bot .legal{ font-size:13px; color:#7a868d; }
.footer-bot .est{ font-family:'Geist Mono', monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:#5a6166; }

/* =========================================================
   reveal-on-scroll
   ========================================================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   TWEAKS PANEL
   ========================================================= */
#tweaks-panel{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  background:#0f1417; color:#fff; border:1px solid #2a3236; border-radius:12px;
  font-family:'Geist', sans-serif; font-size:13px; width:270px; padding:14px 16px 14px;
  box-shadow:0 16px 44px rgba(0,0,0,0.4); display:none;
}
#tweaks-panel.open{ display:block; }
@media print{ #tweaks-panel{ display:none !important; } }
#tweaks-panel .tp-head{ display:flex; align-items:center; justify-content:space-between; font-family:'Geist Mono', monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#a8b3b8; padding-bottom:12px; border-bottom:1px solid #2a3236; margin-bottom:6px; }
#tweaks-panel .tp-close{ background:transparent; border:0; color:#a8b3b8; font-size:17px; cursor:pointer; line-height:1; }
#tweaks-panel .tp-close:hover{ color:#fff; }
#tweaks-panel .tp-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid #1f2629; }
#tweaks-panel .tp-row:last-child{ border-bottom:0; padding-bottom:2px; }
#tweaks-panel .tp-label{ color:#dadfe1; font-weight:500; }
#tweaks-panel .tp-hint{ font-family:'Geist Mono', monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:#6b7785; display:block; margin-top:3px; }
#tweaks-panel .tp-swatches{ display:flex; gap:8px; flex-shrink:0; }
#tweaks-panel .tp-sw{ width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent; outline:1px solid #2a3236; }
#tweaks-panel .tp-sw.on{ border-color:#fff; }
#tweaks-panel .tp-seg{ display:flex; gap:4px; background:#1f2629; border-radius:8px; padding:3px; flex-shrink:0; }
#tweaks-panel .tp-seg button{ appearance:none; border:0; cursor:pointer; background:transparent; color:#a8b3b8; font-family:'Geist', sans-serif; font-size:12px; font-weight:500; padding:6px 12px; border-radius:6px; transition:background .15s,color .15s; line-height:1; }
#tweaks-panel .tp-seg button.on{ background:var(--accent); color:#fff; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  :root{ --pad:28px; }
  .hero-grid{ grid-template-columns:1fr; gap:0; min-height:0; }
  .hero-art{ display:none; }
  .hero-copy{ padding-bottom:64px; }
  .flow{ grid-template-columns:1fr; gap:14px; }
  .flow-arrow{ transform:rotate(90deg); height:40px; }
  .plat-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .step{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:28px; }
  .step:nth-child(2){ border-top:1px solid var(--rule); }
  .bank-grid{ grid-template-columns:1fr 1fr; }
  .band .row{ grid-template-columns:1fr 1fr; gap:40px 0; }
  .hero-stats .row{ grid-template-columns:1fr 1fr; }
  .hero-stats .stat:nth-child(3){ border-left:0; padding-left:0; }
  .cta-card{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:680px){
  .section{ padding:80px 0; }
  .nav-links{ display:none; }
  .nav-cta .btn-ghost{ display:none; }
  .hero h1{ font-size:clamp(34px,9vw,48px); }
  .steps{ grid-template-columns:1fr; }
  .bank-grid{ grid-template-columns:1fr; }
  .band .row{ grid-template-columns:1fr; gap:32px; }
  .band .b{ border-left:0; padding-left:0; }
  .hero-stats .row{ grid-template-columns:1fr 1fr; }
  .cta-card .cta-l, .cta-card .cta-r{ padding:40px 30px; }
  .footer-top{ grid-template-columns:1fr; gap:30px; }
}