/* ===================================================================
   PayHood — onchain payments for stocks & ETH
   =================================================================== */
:root{
  --white:#FFFFFF;
  --surface:#FFFFFF;
  --surface-soft:#FAFBFC;
  --surface-green:#F5FBF3;

  --ink:#0B111A;
  --ink-2:#11161D;
  --text:#5F6673;
  --muted:#848B97;

  --line:#E4E7EB;
  --line-soft:#EEF0F2;

  --green:#45B82D;
  --green-bright:#82DF3E;
  --green-dark:#20941B;
  --green-soft:#EAF8E5;
  --lime:#9BE42D;

  --black-btn:#0A1118;
  --black-banner:#071016;

  --purple:#6155F5;
  --blue:#4767F2;

  --success-bg:#E8F7E2;
  --success-fg:#41952B;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:Inter,"SF Pro Display",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.5;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
a{color:inherit;text-decoration:none}
p{margin:0}
h1{margin:0;font-weight:700}
svg{display:block}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}

/* The composition is designed at 1536px. Past that it centres rather than
   stretching — widening the grid only pulls the dashboard and the floating
   modal apart until they no longer overlap. */
.nav,.hero{max-width:1536px;margin-left:auto;margin-right:auto}
.usecases,.devsec,.secbanner,.finalcta,.site-footer{
  width:calc(100% - 110px);max-width:1290px;margin-left:auto;margin-right:auto;
}

/* ============================ NAVBAR ============================ */
.nav{height:96px;display:flex;align-items:center;padding:0 75px 0 50px;position:relative;z-index:40}
.nav__logo{display:flex;align-items:center;gap:10px;flex:none}
.nav__logo-mark{width:35px;height:35px}
.nav__logo-text{font-size:27px;font-weight:700;letter-spacing:-1px;color:var(--ink)}

.nav__links{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:46px;
}
.nav__link{
  display:inline-flex;align-items:center;gap:5px;
  font-size:14px;font-weight:500;color:var(--ink-2);letter-spacing:-.1px;
  transition:color .16s ease;
}
.nav__link:hover{color:var(--green)}

.nav__actions{margin-left:auto;display:flex;align-items:center;gap:27px}
.nav__signin{font-size:14px;font-weight:500;color:var(--ink-2);transition:color .16s ease}
.nav__signin:hover{color:var(--green)}
.nav__signin.is-authed{color:var(--green);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.nav__signin.is-authed::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}

/* ============================ BUTTONS =========================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:8px;font-weight:500;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease;
}
.btn--dark{background:var(--black-btn);color:#fff}
.btn--dark:hover{background:#16202B;transform:translateY(-1px);box-shadow:0 8px 20px rgba(10,17,24,.18)}
.btn--dark .arrow{color:var(--lime)}
.btn--ghost{background:#fff;color:#10151C;border:1px solid #DDE1E6}
.btn--ghost:hover{border-color:#BFC6CD;transform:translateY(-1px)}
.btn--nav{width:146px;height:44px;font-size:14px}
.btn--lg{height:56px;font-size:15px}
.arrow{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ============================== HERO ============================ */
.hero{
  position:relative;height:649px;display:grid;grid-template-columns:36% 64%;
  padding:64px 38px 0 50px;
}
/* Centred in its row. With the feature tiles gone the copy is ~360px tall in a
   585px row, and top-aligned it floated well above the dashboard's midline. */
.hero__copy{
  position:relative;z-index:10;width:510px;
  display:flex;flex-direction:column;justify-content:center;
  /* The dashboard is pulled 42px above its column, so plain centring leaves the
     copy sitting low. Padding the bottom shifts the centred content up by half
     that padding, putting both midlines on the same line. */
  padding-bottom:108px;
}

/* States a checkable fact rather than a status word. The pill outline and
   pulsing dot were the generic part; a short rule and normal sentence case
   read as something a person wrote. */
.badge{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:500;letter-spacing:-.1px;color:var(--text);
}
/* The text lives in its own span: as bare children, the rule, the <b> and each
   text node were all flex items, so gap padded both sides of the number. */
.badge > span{display:block}
.badge::before{content:"";width:22px;height:1px;background:#C6D0C3;flex:none}
.badge b{font-weight:600;color:var(--green-dark);font-variant-numeric:tabular-nums}

.hero__title{
  margin-top:24px;
  font-size:62px;line-height:1.13;font-weight:700;letter-spacing:-3px;color:var(--ink);
}
.hero__title span{display:block;width:fit-content;white-space:nowrap}
.g1{color:#39A728}
.g2{color:#49B934}

.hero__desc{margin-top:18px;font-size:18px;line-height:1.65;color:#626875;max-width:470px}

.hero__cta{margin-top:35px;display:flex;gap:16px}
.hero__cta .btn--dark{width:173px}
.hero__cta .btn--ghost{width:155px}


/* ---- decoration ---- */
.decor{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.decor__glow{
  position:absolute;right:-40px;bottom:-140px;width:450px;height:450px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(155,232,91,.55),rgba(155,232,91,0));
  filter:blur(95px);opacity:.2;
}
.decor__orbit{position:absolute;opacity:.55}
.decor__orbit--right{right:34px;top:-52px;width:300px;height:300px}
.decor__orbit--left{left:498px;top:300px;width:130px;height:190px;opacity:.4}

.rh-float{
  /* Dash-anchored like .paymodal — a right anchor dragged the feather inward
     as the column narrowed until it sat on the topbar chip. 853 = the 1536
     position, and its right edge (925) stays inside the 930px composition. */
  position:absolute;left:853px;top:-52px;width:72px;height:72px;border-radius:50%;
  background:#fff;box-shadow:0 12px 35px rgba(0,0,0,.07);
  display:flex;align-items:center;justify-content:center;z-index:20;
}
.rh-float svg{width:34px;height:34px;color:var(--green)}

/* ========================= DASHBOARD MOCK ======================= */
.hero__visual{position:relative;z-index:5}
.dash{
  position:absolute;left:17px;top:-42px;width:750px;height:562px;
  background:#fff;border:1px solid #DDE2E7;border-radius:20px;
  box-shadow:0 28px 70px rgba(17,24,39,.08);overflow:hidden;
  display:grid;grid-template-columns:140px 1fr;z-index:6;
}
.dash__side{border-right:1px solid #ECEFF2;padding:24px 14px;display:flex;flex-direction:column}
.dash__brand{display:flex;align-items:center;gap:7px;margin-bottom:22px;padding-left:4px}
.dash__brand svg{width:25px;height:25px}
.dash__brand b{font-size:14px;font-weight:600;letter-spacing:-.4px;color:var(--ink)}
.dash__nav{display:flex;flex-direction:column;gap:2px}
.dash__nav a{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;
  font-size:11.5px;color:#6C737E;
}
.dash__nav a svg{width:14px;height:14px;flex:none;opacity:.8}
.dash__nav a.on{background:#F2F8EF;color:#3A9D26;font-weight:600}
.dash__nav a.on svg{opacity:1}

.dash__main{padding:22px 22px 14px;min-width:0;display:flex;flex-direction:column}
.dash__top{display:flex;align-items:center;gap:10px}
.dash__top h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.4px;color:var(--ink)}
.dash__top .sp{margin-left:auto}
.netsel{
  display:inline-flex;align-items:center;gap:7px;height:33px;padding:0 11px;
  border:1px solid #E5E9ED;border-radius:7px;background:#fff;font-size:11px;color:var(--ink);
}
.netsel svg:first-child{width:13px;height:13px;color:var(--green)}
.netsel svg:last-child{width:9px;height:9px;color:var(--muted);fill:none;stroke:currentColor;stroke-width:1.8}
.bell{width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:#6C737E}
.bell svg{width:15px;height:15px}

.metrics{margin-top:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* A column so the sparkline can be pinned to the card's floor. Two of the four
   labels wrap ("Successful Payments", "Avg. Settlement Time"); left to flow,
   that pushed their values 15px down out of line with the other two and shoved
   the sparkline 12px through the bottom border. The label reserves two lines
   either way, so all four values share a baseline. */
.metric{
  height:111px;border:1px solid #E5E9ED;border-radius:11px;padding:14px 16px;background:#fff;
  display:flex;flex-direction:column;overflow:hidden;
}
.metric .lbl{
  font-size:9.5px;line-height:1.35;color:var(--muted);letter-spacing:.02em;
  min-height:26px;  /* 2 x 12.8px line box */
}
.metric .val{margin-top:2px;font-size:16px;font-weight:700;letter-spacing:-.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.metric .chg{margin-top:3px;font-size:9.5px;font-weight:600;color:var(--green)}
.metric .chg.dn{color:var(--green)}
.metric svg.spark{margin-top:auto;width:100%;height:22px;display:block;flex:none}

.midrow{margin-top:13px;display:grid;grid-template-columns:1.2fr .9fr;gap:14px}
.midrow .panel{height:233px;overflow:hidden}
.panel{border:1px solid #E5E9ED;border-radius:11px;padding:14px;background:#fff}
.panel__h{display:flex;align-items:center;margin-bottom:11px}
.panel__h b{font-size:11.5px;font-weight:600;color:var(--ink)}
.panel__h a{margin-left:auto;font-size:9.5px;color:var(--muted)}

.act{display:flex;align-items:center;gap:9px;padding:4px 0}
.act__ic{width:26px;height:26px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center}
.act__ic svg{width:15px;height:15px}
.act__t{min-width:0;flex:1}
.act__t b{display:block;font-size:10.5px;line-height:1.35;font-weight:600;color:var(--ink)}
.act__t span{font-size:9px;line-height:1.35;color:var(--muted)}
.pill{
  padding:2px 7px;border-radius:5px;background:var(--success-bg);color:var(--success-fg);
  font-size:8.5px;font-weight:600;flex:none;
}
.act__when{font-size:9px;color:var(--muted);width:40px;text-align:right;flex:none}

/* The portfolio panel's right edge runs under the floating modal, so the legend
   has ~91px of usable width, not the 99px the panel suggests. A slightly smaller
   donut and tighter gap buy back the room "Cash (USDC) 6.8%" needs. */
.donutwrap{display:flex;align-items:center;gap:10px}
.donutwrap svg{width:84px;height:84px;flex:none}
.legend{display:flex;flex-direction:column;gap:9px;min-width:0}
.legend div{display:flex;align-items:center;gap:5px;font-size:8.5px;white-space:nowrap}
.legend .dot{width:6px;height:6px;border-radius:50%;flex:none}
/* The name yields first: "Cash (USDC)" is long enough to push its percentage
   out of the legend and under the floating modal, clipping it to "6.8". */
.legend .nm{color:#6C737E;min-width:0;overflow:hidden;text-overflow:ellipsis}
.legend .pc{margin-left:5px;color:var(--ink);font-weight:600;flex:none}

/* The floating payment modal overlaps the last ~23px of the dashboard.
   Panels may run under it, but a right-aligned link must not — it landed
   mid-word as "View a". Hold this one clear of the modal edge. */
@media (min-width:1141px){ .holdings .panel__h a{margin-right:40px} }
.holdings{margin-top:13px;height:102px;border:1px solid #E5E9ED;border-radius:11px;padding:14px}
.holdings .row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:9px}
.hold{display:flex;align-items:flex-start;gap:7px}
.hold__ic{width:22px;height:22px;border-radius:6px;flex:none;display:flex;align-items:center;justify-content:center}
.hold__ic svg{width:13px;height:13px}
.hold b{display:block;font-size:9.5px;font-weight:600;color:var(--ink)}
/* :not(.hold__ic) — the bare selector also hit the icon tile and
   overrode its flex centring. */
.hold span:not(.hold__ic){display:block;font-size:9px;color:var(--ink);font-weight:600}
.hold i{display:block;font-size:8.5px;color:var(--muted);font-style:normal}

/* Sidebar footer chip, pinned to the bottom of the rail. */
.dash__side{position:relative}
.dash__user{
  position:absolute;left:10px;right:10px;bottom:12px;
  display:flex;align-items:center;gap:7px;padding:7px 8px;
  border-radius:8px;border:1px solid #EDF0F2;background:#fff;
}
.dash__avatar{width:20px;height:20px;flex:none}
.dash__avatar svg{width:20px;height:20px;border-radius:50%;display:block}
.dash__who{min-width:0}
.dash__who b{display:block;font-size:8.5px;font-weight:600;color:var(--ink);line-height:1.25}
.dash__who span{display:block;font-size:7.5px;color:var(--muted);line-height:1.25}
.dash__uchev{width:8px;height:8px;margin-left:auto;flex:none;fill:none;stroke:#9AA1AB;stroke-width:1.6}

/* ========================= PAYMENT MODAL ======================== */
.paymodal{
  /* Anchored to the dashboard, not to .hero__visual. The visual is a grid
     column whose box narrows with the viewport while .dash stays 750px, so a
     right anchor slid the modal inward — 46px of overlap at 1536 became 230px
     by 1200, burying the panel headings. .dash is left:17px w750, so its right
     edge is always 767: left:721 keeps the overlap at 46px everywhere. */
  position:absolute;left:721px;top:96px;width:209px;
  background:#fff;border:1px solid #DFE4E8;border-radius:14px;
  box-shadow:0 22px 55px rgba(18,28,45,.12);padding:16px;z-index:12;
}
.paymodal__h{display:flex;align-items:center}
.paymodal__h b{font-size:11px;font-weight:600;color:var(--ink)}
.paymodal__h button{margin-left:auto;color:#9AA1AB}
.paymodal__h svg{width:11px;height:11px}
.paymodal .tot-l{margin-top:12px;font-size:8.5px;color:var(--muted)}
.paymodal .tot{display:flex;align-items:baseline;gap:5px;margin-top:2px}
.paymodal .tot b{font-size:17px;font-weight:700;letter-spacing:-.6px;color:var(--ink)}
.paymodal .tot span{font-size:8.5px;color:var(--muted)}
.ptabs{display:flex;gap:16px;margin-top:11px;border-bottom:1px solid #EDF0F3}
.ptab{padding-bottom:7px;font-size:9.5px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.ptab.on{color:#2E9B21;font-weight:600;border-bottom-color:#49B934}
.passets{margin-top:11px;display:flex;flex-direction:column;gap:5px}
.pa{
  display:flex;align-items:center;gap:7px;height:42px;padding:0 8px;
  border:1px solid #E2E6EA;border-radius:8px;background:#fff;text-align:left;width:100%;
  transition:border-color .15s,background-color .15s;
}
.pa:hover{border-color:#C9D0D7}
.pa.on{border-color:#91D984;background:#FBFFF9}
.pa__ic{width:22px;height:22px;border-radius:6px;flex:none;display:flex;align-items:center;justify-content:center}
.pa__ic svg{width:13px;height:13px}
.pa__t{min-width:0;flex:1}
.pa__t b{display:block;font-size:9.5px;font-weight:600;color:var(--ink)}
.pa__t span{font-size:8px;color:var(--muted)}
.pa__v{text-align:right;flex:none}
.pa__v b{display:block;font-size:8.5px;font-weight:600;color:var(--ink)}
.pa__v span{font-size:8px;color:var(--muted)}
.pa__r{width:12px;height:12px;border-radius:50%;border:1.4px solid #D5DBE1;flex:none}
.pa.on .pa__r{border:0;background:var(--green);position:relative}
.pa.on .pa__r::after{content:"";position:absolute;left:4px;top:1.5px;width:3px;height:6px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.preview{
  margin-top:11px;width:100%;height:42px;display:flex;align-items:center;justify-content:center;gap:7px;
  background:#09121A;color:#fff;border-radius:7px;font-size:10.5px;font-weight:500;
}
.preview svg{width:11px;height:11px}

/* ========================= BENEFIT BAND ========================= */
/* A faintly-tinted band carrying the benefit cards, hairlined off the hero. */
.band{background:var(--surface-soft);border-top:1px solid #F0F2F0;margin-top:6px}

.benefits{
  max-width:1420px;margin:0 auto;padding:58px 28px 70px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.bcard{
  min-height:185px;padding:28px;background:#fff;
  border:1px solid #E6EAE7;border-radius:12px;
}
.bcard__ic{
  width:38px;height:38px;border-radius:9px;background:var(--green-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
}
.bcard__ic svg{width:19px;height:19px;color:var(--green)}
.bcard b{display:block;font-size:15px;font-weight:600;letter-spacing:-.3px;color:var(--ink)}
.bcard p{margin:9px 0 0;font-size:13px;line-height:1.62;color:var(--text);max-width:230px}

/* ========================== HOW IT WORKS ======================== */
.eyebrow{
  display:block;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#31A625;
}
.s-title{
  margin:14px 0 0;font-size:30px;font-weight:650;letter-spacing:-1.05px;
  color:var(--ink);text-align:center;
}
.s-title--left{text-align:left}

.hiw{max-width:1420px;margin:0 auto;padding:62px 28px;text-align:center}
.hiw__row{
  list-style:none;margin:46px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.hiw__item{position:relative;padding:0 18px}
/* Dashed connector between rings, drawn from each hiw__item except the last so it
   never trails off the right edge. */
.hiw__item:not(:last-child)::after{
  content:"";position:absolute;top:36px;left:calc(50% + 46px);width:calc(100% - 92px);
  border-top:1px dashed #D8DDD9;
}
.hiw__ring{
  width:72px;height:72px;margin:0 auto;border-radius:50%;
  border:1px solid #DDE2DF;background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.hiw__ring svg{width:26px;height:26px;color:var(--ink);stroke-width:1.5}
.hiw__head{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px}
.hiw__n{
  width:18px;height:18px;border-radius:50%;background:#34AA26;color:#fff;
  font-size:10px;font-weight:700;font-style:normal;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.hiw__head b{font-size:15px;font-weight:600;letter-spacing:-.3px;color:var(--ink)}
.hiw__item p{margin:10px auto 0;font-size:12.5px;line-height:1.6;color:var(--text);max-width:186px}

/* ============================ USE CASES ========================= */
.usecases{
  max-width:1290px;margin:54px auto 0;padding:45px 50px;
  border:1px solid #E5E9E6;border-radius:16px;background:#fff;text-align:center;
}
.usecases__row{
  margin-top:34px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:left;
}
.ucard{background:#FCFEFB;border:1px solid #E7EEE4;border-radius:11px;padding:26px}
.ucard__ic{
  width:34px;height:34px;border-radius:8px;background:#fff;border:1px solid #E4EDE0;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.ucard__ic svg{width:17px;height:17px;color:var(--green)}
.ucard b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.3px;color:var(--ink)}
.ucard p{margin:8px 0 0;font-size:12.5px;line-height:1.62;color:var(--text)}

.learnmore{
  display:inline-flex;align-items:center;gap:7px;margin-top:26px;
  font-size:13px;font-weight:500;color:#35A928;text-decoration:none;
}
.learnmore .arrow{width:14px;height:14px;transition:transform .15s ease}
.learnmore:hover .arrow{transform:translateX(3px)}

/* ======================== DEVELOPER SECTION ===================== */
.devsec{
  max-width:1290px;margin:0 auto;padding:72px 0;
  display:grid;grid-template-columns:39% 61%;gap:70px;align-items:center;
}
.devsec__copy .s-title{margin-top:16px;font-size:29px}
.devsec__body{margin:16px 0 0;font-size:13.5px;line-height:1.68;color:var(--text);max-width:330px}
.devfeat{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,auto);gap:11px 26px;justify-content:start;
}
.devfeat li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text)}
.devfeat svg{width:15px;height:15px;color:var(--green);flex:none}
.devsec__actions{display:flex;align-items:center;gap:22px;margin-top:30px}
.devsec__actions .btn{width:126px;height:44px;font-size:13.5px}
.linkarrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:500;color:var(--ink);text-decoration:none;
}
.linkarrow .arrow{width:14px;height:14px;transition:transform .15s ease}
.linkarrow:hover .arrow{transform:translateX(3px)}

/* --- code panel --- */
.code{
  background:var(--black-banner);border-radius:13px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.10);
}
.code__bar{
  display:flex;align-items:center;gap:4px;height:44px;padding:0 8px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.code__tab{
  appearance:none;background:none;border:0;cursor:pointer;
  padding:7px 13px;border-radius:7px;font:inherit;font-size:12px;font-weight:500;
  color:#7E8894;transition:color .15s ease,background .15s ease;
}
.code__tab:hover{color:#C3CAD2}
.code__tab.is-active{color:#fff;background:rgba(255,255,255,.08)}
.code__copy{
  appearance:none;margin-left:auto;background:none;border:0;cursor:pointer;
  display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:7px;
  font:inherit;font-size:11.5px;color:#7E8894;transition:color .15s ease,background .15s ease;
}
.code__copy:hover{color:#C3CAD2;background:rgba(255,255,255,.07)}
.code__copy svg{width:13px;height:13px}
.code__pane{
  margin:0;padding:20px 22px;height:256px;overflow:auto;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.85;color:#D5DADF;white-space:pre;tab-size:2;
}
.code__pane::-webkit-scrollbar{width:8px;height:8px}
.code__pane::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}
.t-k{color:#C792EA}      /* keyword  */
.t-s{color:#57D13E}      /* string   */
.t-a{color:#7FD3F7}      /* key      */
.t-f{color:#F0C674}      /* function */
.t-u{color:#8AB9F5}      /* url      */
.t-n{color:#F0A868}      /* number   */
.t-c{color:#6B7684;font-style:italic}

/* ========================= SECURITY BANNER ====================== */
.secbanner{
  max-width:1290px;margin:0 auto;min-height:120px;padding:0 32px;
  background:linear-gradient(90deg,#071016 0%,#081219 65%,#0D1A12 100%);
  border-radius:14px;display:grid;grid-template-columns:2fr repeat(4,1fr);
  align-items:center;gap:20px;
}
.secbanner__intro{display:flex;align-items:center;gap:16px;padding:24px 0}
.secbanner__ic{
  width:44px;height:44px;border-radius:11px;background:rgba(121,221,55,.12);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.secbanner__ic svg{width:21px;height:21px;color:#79DD37}
.secbanner__intro b{display:block;font-size:15px;font-weight:600;letter-spacing:-.3px;color:#fff}
/* :not(.secbanner__ic) — a bare `.secbanner__intro span` also matches the icon
   tile and outranks .secbanner__ic, undoing its flex centring. */
.secbanner__intro span:not(.secbanner__ic){
  display:block;margin-top:5px;font-size:12px;line-height:1.55;color:#A9B1B9;max-width:305px;
}
.secmetric{text-align:center}
.secmetric b{display:block;font-size:21px;font-weight:650;letter-spacing:-.7px;color:#81DE3E}
.secmetric span{display:block;margin-top:3px;font-size:11.5px;color:#C5CBD0}

/* =========================== FINAL CTA ========================== */
.finalcta{
  position:relative;overflow:hidden;
  max-width:1290px;margin:40px auto 0;min-height:175px;padding:35px 45px;
  border:1px solid #DDE4DD;border-radius:15px;background:#fff;
  display:flex;align-items:center;gap:40px;
}
.finalcta__wave{position:absolute;right:-20px;top:0;width:560px;height:100%;pointer-events:none}
.finalcta__copy{position:relative;z-index:1}
.finalcta__copy h2{
  margin:0;font-size:25px;font-weight:650;letter-spacing:-.85px;line-height:1.3;color:var(--ink);
}
.finalcta__copy p{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--text);max-width:330px}
.finalcta__actions{position:relative;z-index:1;display:flex;gap:14px;margin-left:auto}
.finalcta__actions .btn{width:auto;padding:0 24px;height:50px;font-size:14px}

/* ============================= FOOTER =========================== */
.site-footer{max-width:1290px;margin:0 auto;padding:48px 0 25px}
.footer-grid{display:grid;grid-template-columns:1.55fr repeat(3,1fr);gap:30px}
.footer-brand{display:flex;align-items:center;gap:9px}
.footer-brand .nav__logo-mark{width:26px;height:26px}
.footer-brand b{font-size:19px;font-weight:650;letter-spacing:-.6px;color:var(--ink)}
.footer-note{margin:15px 0 0;font-size:12.5px;line-height:1.62;color:var(--text)}
.footer-social{display:flex;align-items:center;gap:16px;margin-top:18px}
.footer-social a,.footer-social span{display:flex;color:#8C949E;transition:color .15s ease}
.footer-social a:hover{color:var(--ink)}
.footer-social svg{width:16px;height:16px}
.footer-col h4{margin:2px 0 14px;font-size:12.5px;font-weight:600;color:var(--ink)}
.footer-col a{display:block;margin-bottom:9px;font-size:12.5px;color:var(--text);text-decoration:none}
.footer-col a:hover{color:var(--ink)}
.footer-base{
  display:flex;align-items:center;gap:26px;margin-top:44px;padding-top:20px;
  border-top:1px solid #ECEFED;font-size:12px;color:var(--muted);
}
.footer-base .spacer{flex:1}
.footer-base a{color:var(--muted);text-decoration:none}
.footer-base a:hover{color:var(--ink)}
.footer-disclaimer{margin:9px 0 0;font-size:11.5px;color:#9AA1AB}
.footer-disclaimer a{color:#9AA1AB}

/* ============================ RESPONSIVE ======================== */
.hero__visual{transform-origin:0 0}
@media (max-width:1535px){ .hero__visual{transform:scale(.94)} }
@media (max-width:1440px){
  .hero__visual{transform:scale(.88)}
  .nav__links{gap:34px}
  .hero__copy{width:auto;max-width:480px}
}
@media (max-width:1360px){
  .devsec{gap:44px}
  .usecases{padding:40px 34px}
  .hero{grid-template-columns:42% 58%}
  .hero__visual{transform:scale(.77)}
  .hero__title{font-size:54px;letter-spacing:-1.8px}
}
@media (max-width:1200px){
  .benefits{grid-template-columns:repeat(2,1fr);padding-bottom:52px}
  .usecases__row{grid-template-columns:repeat(2,1fr)}
  .secbanner{grid-template-columns:1fr repeat(2,1fr);row-gap:0;padding-bottom:24px}
  .secbanner__intro{grid-column:1/-1}
  .hero__title{font-size:46px;letter-spacing:-1.4px}
  .nav__links{display:none}
}
/* The composition is intrinsically 930px wide — the 750px dashboard plus the
   modal floating off its right edge — which is wider than the grid column it
   sits in. Each hiw__item is the largest scale that still keeps 930*scale inside
   the viewport at the BOTTOM of its range, measured rather than guessed. */
@media (max-width:1300px){ .hero__visual{transform:scale(.73)} }
@media (max-width:1240px){ .hero__visual{transform:scale(.69)} }
@media (max-width:1180px){ .hero__visual{transform:scale(.66)} }
@media (max-width:1140px){
  .usecases,.devsec,.secbanner,.finalcta,.site-footer{width:calc(100% - 56px)}
  .devsec{grid-template-columns:1fr;gap:34px;padding:56px 0}
  .devsec__body,.finalcta__copy p{max-width:none}
  .footer-grid{grid-template-columns:1.4fr repeat(2,1fr);row-gap:34px}
  .nav{padding:0 28px}
  .hero{grid-template-columns:1fr;height:auto;padding:34px 28px 40px}
  .hero__copy{width:auto;max-width:none}
  .hero__visual{transform:none;margin-top:38px;position:relative}
  .dash{position:relative;left:0;top:0;width:100%;height:auto;grid-template-columns:1fr}
  .dash__side{display:none}
  .paymodal{position:relative;left:auto;right:auto;top:0;margin:16px 0 0 auto;width:240px}
  .rh-float,.decor__orbit{display:none}
}
@media (max-width:760px){
  .usecases,.devsec,.secbanner,.finalcta,.site-footer{width:calc(100% - 40px)}
  .benefits{grid-template-columns:1fr;padding:28px 20px 40px;gap:16px}
  .bcard{min-height:0;padding:22px}
  .bcard p{max-width:none}
  .hiw{padding:48px 20px}
  .hiw__row{grid-template-columns:1fr;gap:30px;text-align:left}
  .hiw__item{padding:0;display:grid;grid-template-columns:56px 1fr;column-gap:16px;align-items:start}
  .hiw__item:not(:last-child)::after{display:none}
  .hiw__ring{width:56px;height:56px;grid-row:1/3}
  .hiw__head{margin-top:6px;justify-content:flex-start}
  .hiw__item p{margin-left:0;max-width:none}
  .usecases{padding:30px 22px;margin-top:34px}
  .usecases__row{grid-template-columns:1fr;gap:14px}
  .s-title{font-size:25px;letter-spacing:-.8px}
  .devsec__actions{flex-wrap:wrap;gap:16px}
  .secbanner{grid-template-columns:repeat(2,1fr);padding:0 22px 26px}
  .secmetric{text-align:left}
  .finalcta{flex-direction:column;align-items:flex-start;gap:24px;padding:30px 24px}
  .finalcta__actions{margin-left:0;width:100%}
  .finalcta__actions .btn{flex:1}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .footer-brandcol{grid-column:1/-1}
  .footer-base{flex-wrap:wrap;gap:14px;margin-top:32px}
  .footer-base .spacer{flex:1 0 100%;display:none}
  .nav{height:74px;padding:0 20px}
  .nav__logo-text{font-size:22px}
  .btn--nav{width:124px;height:40px}
  .hero{padding:26px 20px 34px}
  .hero__title{font-size:42px;letter-spacing:-1.2px}
  .hero__desc{font-size:16.5px}
  .hero__cta{flex-wrap:wrap}
  .hero__cta .btn{flex:1 1 auto;min-width:150px}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .midrow{grid-template-columns:1fr}
  .holdings{height:auto}
  .holdings .row{grid-template-columns:repeat(2,1fr);row-gap:10px}
  .paymodal{width:100%;margin:16px 0 0}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}