:root{
  --page:#0b0d0f;
  --page-2:#0d1117;
  --panel:#171a20;
  --panel-2:#15181f;
  --line:#303641;
  --soft-line:#20262f;
  --text:#f5f5f6;
  --muted:#c4c6ca;
  --blue:#0759f7;
  --header-h:125px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--page);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit}
.shell{width:min(1320px,calc(100% - 120px));margin-inline:auto}
.blend-section{position:relative;background:transparent}
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  height:var(--header-h);
  background:rgba(10,12,14,.97);
  border-bottom:1px solid rgba(255,255,255,.075);
  backdrop-filter:blur(16px);
}
.header-inner{
  width:min(1320px,calc(100% - 120px));
  height:100%;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{width:180px}
.brand img{width:100%;height:auto}
.button{
  min-height:50px;
  padding:0 28px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.button-blue{
  background:linear-gradient(180deg,#1166ff,#0351ef);
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 10px 28px rgba(0,72,255,.13);
}
.button-blue:hover{filter:brightness(1.08)}
.hero{
  min-height:790px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 650px 520px at 51% 12%,rgba(8,54,146,.31),rgba(5,28,79,.14) 42%,transparent 72%),
    linear-gradient(180deg,#080a0d 0%,#080b0f 100%);
}
.hero:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:140px;
  background:linear-gradient(180deg,transparent,#0b0d0f);
  pointer-events:none;
}
.hero-ambient{
  position:absolute;
  width:880px;height:520px;
  left:50%;top:-90px;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(9,56,150,.18),transparent 68%);
  filter:blur(12px);
}
.hero-spark{
  position:absolute;
  top:40px;
  left:37%;
  z-index:4;
  color:#0c4ed2;
  font-size:48px;
  opacity:.82;
}
.hero-layout{
  min-height:790px;
  display:grid;
  grid-template-columns:43% 57%;
  align-items:center;
  position:relative;
}
.hero-art{
  align-self:end;
  height:645px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:visible;
}
.hero-art img{
  width:535px;
  max-width:none;
  transform:translate(-22px,6px);
  filter:drop-shadow(0 18px 30px rgba(0,42,120,.13));
}
.hero-copy{
  position:relative;
  z-index:3;
  padding:42px 0 0 0;
}
.hero h1{
  font-size:70px;
  line-height:1.08;
  letter-spacing:-4px;
  margin:0;
  font-weight:600;
}
.hero h1 span{white-space:nowrap}
.underline{
  width:435px;
  height:42px;
  position:absolute;
  left:126px;
  top:196px;
  overflow:visible;
}
.underline path{
  fill:none;
  stroke:#0861ff;
  stroke-width:3.2;
  stroke-linecap:round;
}
.hero-copy>p{
  font-size:26px;
  line-height:1.4;
  margin:39px 0 40px;
  color:#f3f3f4;
  letter-spacing:-.45px;
}
.participant-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:54px;
}
.participant-card{
  height:92px;
  padding:0 21px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:15px;
  border-radius:18px;
  background:#15171b;
}
.token-stack{display:flex}
.token-stack img{
  width:39px;height:39px;
  object-fit:cover;border-radius:50%;
  margin-left:-8px;
}
.token-stack img:first-child{margin-left:0}
.participant-copy strong{
  display:block;
  font-size:22px;
  line-height:1;
  font-weight:600;
}
.participant-copy small{
  display:block;
  font-size:11px;
  color:#babdc2;
  margin-top:6px;
}
.reward-copy{display:flex;align-items:center;gap:6px}
.reward-copy>strong{font-size:19px;font-weight:500;margin-left:4px}
.reward-coin{
  width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;font-size:9px;
  border:1px solid rgba(255,255,255,.2)
}
.reward-coin.orange{background:#f39a37;color:#ffe1a9}
.reward-coin.pink{background:#f34972;color:#ffe4ec}
.hero-button{min-width:209px;min-height:62px}
.hero-doodle{
  position:absolute;
  right:286px;
  bottom:25px;
  width:145px;
}
.hero-doodle path,.benefit-arrow path{
  fill:none;
  stroke:#f4f4f5;
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:7 7;
}
.coin-burst{
  position:absolute;
  right:-12px;
  bottom:-16px;
  width:225px;height:168px;
}
.burst{
  position:absolute;
  border-radius:50%;
  width:56px;height:56px;
  display:grid;place-items:center;
  color:#c7dcff;
  background:linear-gradient(145deg,#5aa8ff,#1766ce);
  border:2px solid rgba(190,224,255,.55);
  box-shadow:0 10px 35px rgba(18,94,194,.3);
  font-size:20px;
  font-weight:700;
}
.b1{left:84px;top:4px;width:70px;height:70px}
.b2{left:59px;top:104px}
.b3{left:132px;top:85px;width:45px;height:45px}
.b4{left:172px;top:58px;width:44px;height:44px}
.b5{left:0;top:96px;width:41px;height:41px}
.proof{
  padding:55px 0 105px;
  background:
    radial-gradient(circle at 2% 100%,rgba(6,34,91,.12),transparent 30%),
    linear-gradient(180deg,#0b0d0f,#0b0d0f);
  overflow:hidden;
}
.proof-mesh{
  position:absolute;
  width:850px;height:270px;
  top:-55px;left:50%;transform:translateX(-50%);
  opacity:.12;
  background:
    repeating-radial-gradient(ellipse at center,transparent 0 8px,rgba(255,255,255,.09) 9px 10px);
  filter:blur(.4px);
  mask-image:linear-gradient(180deg,transparent,#000 35%,transparent);
}
.proof-cards{
  width:min(1170px,calc(100% - 150px));
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  position:relative;
  z-index:2;
}
.proof-card{
  min-height:136px;
  border-radius:16px;
  background:linear-gradient(135deg,#1a1b1e,#151618);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 56px;
}
.proof-card>span{font-size:23px;color:#e0e0e1}
.proof-card>div:not(.auditor){display:flex;flex-direction:column}
.proof-card>div>strong{font-size:35px;font-weight:600}
.proof-card>div>small{font-size:19px;color:#d0d1d3;margin-top:12px}
.auditor{display:flex;align-items:center;gap:12px}
.auditor img{width:37px;height:37px;border-radius:50%}
.auditor strong{font-size:31px;font-weight:600}
.benefit-row{
  width:min(1050px,calc(100% - 120px));
  margin:72px auto 0;
  display:grid;
  grid-template-columns:1fr 100px 1fr 100px 1fr;
  align-items:start;
}
.benefit{text-align:center}
.benefit-token{
  width:100px;height:100px;
  object-fit:cover;border-radius:50%;
  margin:0 auto 23px;
}
.benefit h3{
  font-size:24px;
  margin:0 0 18px;
  font-weight:600;
}
.benefit p{font-size:19px;color:#d2d2d3;margin:0}
.benefit-arrow{width:85px;margin:38px auto 0}
.triple-stak{
  height:100px;
  width:160px;
  margin:0 auto 23px;
  position:relative;
}
.triple-stak img{
  width:100px;height:100px;border-radius:50%;
  position:absolute;top:0;
}
.triple-stak img:nth-child(1){left:0;opacity:.65}
.triple-stak img:nth-child(2){left:30px;opacity:.8}
.triple-stak img:nth-child(3){left:60px}
.getting-started{
  min-height:900px;
  padding:32px 0 95px;
  background:
    radial-gradient(circle at 50% 65%,rgba(5,18,43,.16),transparent 36%),
    #0b0d0f;
  overflow:hidden;
}
.section-title{
  text-align:center;
  position:relative;
  z-index:2;
}
.section-title h2{
  font-size:48px;
  line-height:1.1;
  letter-spacing:-2.5px;
  margin:0 0 34px;
  font-weight:600;
}
.section-title p{
  font-size:21px;
  color:#eee;
  margin:0;
}
.ambient-circle{
  position:absolute;
  width:610px;height:610px;
  border-radius:50%;
  border:116px solid rgba(8,17,31,.48);
  opacity:.42;
}
.ambient-left{left:-410px;top:330px}
.ambient-right{right:-420px;top:145px}
.process{
  height:625px;
  margin-top:58px;
  position:relative;
}
.process-lines{
  position:absolute;
  inset:0;
  width:100%;height:100%;
}
.process-lines path{
  fill:none;
  stroke:#afb3ba;
  stroke-width:1.15;
}
.process-main-token{
  position:absolute;
  left:50%;
  top:50px;
  width:110px;height:110px;
  transform:translateX(-50%);
  display:grid;place-items:center;
  z-index:5;
}
.process-main-token img{
  width:110px;height:110px;border-radius:50%;
  position:relative;z-index:5;
  box-shadow:0 0 42px rgba(6,79,255,.34);
}
.halo{
  position:absolute;border-radius:50%;border:1px solid rgba(14,80,255,.27)
}
.h1{inset:-9px}.h2{inset:-18px}.h3{inset:-27px}
.process-card{
  position:absolute;
  width:410px;
  min-height:242px;
  border:1.3px solid #bec3ca;
  border-radius:23px;
  background:linear-gradient(90deg,rgba(12,14,17,.98),rgba(10,21,42,.93));
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:45px 35px 28px;
}
.process-left{left:0;top:240px}
.process-center{left:50%;top:389px;transform:translateX(-50%)}
.process-right{right:0;top:240px}
.process-icon{
  position:absolute;
  width:79px;height:79px;
  border-radius:50%;
  top:-40px;
  object-fit:cover;
}
.process-card h3{
  font-size:34px;
  letter-spacing:-1.5px;
  margin:0 0 21px;
  font-weight:600;
}
.process-card p{
  max-width:315px;
  font-size:19px;
  line-height:1.55;
  color:#dddfe2;
  margin:0;
}
.stake{
  padding:94px 0 102px;
  background:#11151c;
}
.stake .section-title h2{font-size:51px}
.staking-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  margin-top:74px;
}
.stake-card{
  min-height:368px;
  border-radius:17px;
  background:#1a1e28;
  padding:20px;
  display:flex;
  flex-direction:column;
}
.stake-card>img{
  width:100px;height:100px;
  object-fit:cover;border-radius:50%;
  margin-bottom:27px;
}
.stake-card h3{
  font-size:34px;
  line-height:1.15;
  margin:0 0 31px;
  letter-spacing:-1.5px;
  font-weight:600;
}
.stake-stats{
  margin-top:auto;
  min-height:126px;
  border:1px solid #9ca3ae;
  border-radius:21px;
  padding:22px 20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  row-gap:24px;
  align-content:center;
}
.stake-stats strong{
  font-size:20px;
  font-weight:600;
}
.stake-stats span{
  font-size:19px;
  color:#e9eaec;
  display:flex;
  align-items:center;
  gap:15px;
}
.stake-stats span:before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:#2d323d;
}
.load-more{
  min-height:48px;
  padding:0 26px;
  margin:44px auto 0;
  background:#161a22;
  display:flex;
}
.faq{
  padding:110px 0 105px;
  background:#0b0d0f;
}
.faq .section-title h2{font-size:48px}
.faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  margin-top:65px;
}
.faq-card{
  min-height:175px;
  border-radius:17px;
  background:#171719;
  padding:30px;
  display:grid;
  grid-template-columns:48px 1fr;
  gap:24px;
}
.faq-card>span{
  width:48px;height:43px;
  border-radius:8px;
  background:#101b3d;
  color:#0b5dff;
  display:grid;place-items:center;
  font-size:19px;
  font-weight:600;
}
.faq-card h3{
  font-size:23px;
  margin:2px 0 24px;
  font-weight:600;
}
.faq-card p{
  font-size:18px;
  line-height:1.55;
  color:#d4d5d7;
  margin:0;
}
.cta{
  padding:0 0 132px;
  background:
    radial-gradient(circle at 92% 82%,rgba(0,50,135,.16),transparent 25%),
    #0b0d0f;
}
.cta-panel{
  min-height:437px;
  border-radius:24px;
  border:1px solid #1b315c;
  overflow:hidden;
  display:grid;
  grid-template-columns:38% 62%;
  align-items:center;
  position:relative;
  background:
    radial-gradient(circle at 0% 0%,rgba(40,75,185,.38),transparent 36%),
    radial-gradient(circle at 78% 0%,rgba(21,74,202,.37),transparent 34%),
    linear-gradient(105deg,#101a36 0%,#070d18 47%,#080b10 100%);
}
.cta-visual{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cta-visual img{
  width:390px;
  filter:saturate(1.06) contrast(1.03);
}
.cta-copy{padding-left:10px;position:relative;z-index:3}
.cta-copy h2{
  font-size:49px;
  line-height:1.08;
  letter-spacing:-2.3px;
  margin:0 0 29px;
  font-weight:600;
}
.cta-copy p{
  font-size:21px;
  margin:0 0 65px;
  color:#e9e9ea;
}
.compact{min-height:62px;padding:0 31px}
.cta-spark{position:absolute;color:#dce7ff}
.s1{left:75px;top:45px;font-size:29px}
.s2{left:95px;bottom:54px;font-size:18px}
.s3{right:68px;bottom:66px;font-size:15px;opacity:.3}
.footer{
  padding:0 0 60px;
  background:
    radial-gradient(circle at 92% 0%,rgba(5,50,137,.15),transparent 30%),
    #0b0d0f;
}
.footer-panel{
  min-height:450px;
  border-radius:24px;
  border:1px solid #1a315b;
  background:linear-gradient(110deg,#111b38,#051632 67%,#03132d);
  padding:95px 60px 0;
  display:grid;
  grid-template-columns:1.18fr 1fr 1fr 1.05fr;
  column-gap:75px;
  position:relative;
}
.footer-brand img{width:140px}
.footer-brand p{font-size:21px;margin:48px 0 0}
.footer-column h4{
  font-size:23px;
  margin:7px 0 27px;
  font-weight:600;
}
.footer-column a{
  display:block;
  font-size:18px;
  color:#d4d8df;
  margin:0 0 25px;
}
.footer-credit{
  position:absolute;
  left:60px;right:60px;bottom:39px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:26px;
  text-align:center;
  font-size:14px;
  color:#b9c0ca;
}
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.2,.65,.3,1);
}
.reveal.visible{opacity:1;transform:none}
.process-center.reveal{transform:translate(-50%,14px)}
.process-center.reveal.visible{transform:translate(-50%,0)}

@media(max-width:1100px){
  .shell,.header-inner{width:calc(100% - 50px)}
  .hero{min-height:1080px}
  .hero-layout{display:flex;flex-direction:column;min-height:1080px}
  .hero-copy{order:1;padding-top:100px;text-align:center}
  .hero-art{order:2;height:520px}
  .hero-art img{width:500px;transform:none}
  .hero h1{font-size:61px}
  .underline{left:50%;top:240px;transform:translateX(-17%)}
  .participant-grid{max-width:820px;margin-inline:auto;margin-bottom:42px}
  .hero-button{margin:auto}
  .hero-spark{left:50%}
  .coin-burst,.hero-doodle{display:none}
  .proof-cards{width:calc(100% - 50px)}
  .benefit-row{width:calc(100% - 50px);grid-template-columns:1fr;gap:56px}
  .benefit-arrow{display:none}
  .process{transform:scale(.8);transform-origin:top center;margin-bottom:-95px}
  .staking-grid{grid-template-columns:repeat(2,1fr)}
  .footer-panel{grid-template-columns:1fr 1fr;row-gap:45px;padding-bottom:110px}
}
@media(max-width:720px){
  :root{--header-h:92px}
  .shell,.header-inner{width:calc(100% - 28px)}
  .brand{width:112px}
  .button{min-height:49px;padding:0 19px;font-size:13px}
  .hero{min-height:920px}
  .hero-layout{min-height:920px}
  .hero-copy{padding-top:72px}
  .hero h1{font-size:43px;letter-spacing:-2.2px}
  .hero h1 span{white-space:normal}
  .underline{width:260px;top:179px;transform:translateX(-14%)}
  .hero-copy>p{font-size:18px;margin:31px 0}
  .participant-grid{grid-template-columns:1fr;gap:12px}
  .hero-art{height:390px}
  .hero-art img{width:390px}
  .proof{padding-top:45px}
  .proof-cards{width:calc(100% - 28px);grid-template-columns:1fr}
  .proof-card{padding:0 25px}
  .proof-card>span{font-size:17px}
  .proof-card>div>strong{font-size:28px}
  .benefit-row{width:calc(100% - 28px)}
  .section-title h2,.stake .section-title h2,.faq .section-title h2{font-size:36px}
  .section-title p{font-size:17px;line-height:1.5;padding-inline:16px}
  .getting-started{min-height:780px}
  .process{
    width:1320px;
    left:50%;
    transform:translateX(-50%) scale(.53);
    transform-origin:top center;
    margin-bottom:-270px;
  }
  .staking-grid{grid-template-columns:1fr;gap:22px;margin-top:50px}
  .stake-card h3{font-size:30px}
  .faq-grid{grid-template-columns:1fr;gap:18px}
  .faq-card{grid-template-columns:43px 1fr;padding:24px 20px}
  .cta-panel{grid-template-columns:1fr;min-height:620px}
  .cta-visual{height:290px}
  .cta-visual img{width:300px}
  .cta-copy{padding:0 28px 45px;text-align:center}
  .cta-copy h2{font-size:38px}
  .cta-copy p{font-size:17px;margin-bottom:35px}
  .footer-panel{grid-template-columns:1fr;min-height:auto;padding:58px 32px 115px;row-gap:32px}
  .footer-brand p{margin-top:25px}
  .footer-credit{left:32px;right:32px}
}

/* =========================================================
   HERO MATCH PASS V3, 2026-09-03
   Reference-tuned against the supplied original screenshot.
   The rest of the page remains untouched.
   ========================================================= */

/* Header: concentrated blue in the middle, black at both ends.
   No broad continuation layer below the nav. */
.site-header{
  background:
    radial-gradient(
      ellipse 36% 190% at 50% 112%,
      rgba(8,67,188,.40) 0%,
      rgba(6,45,132,.27) 31%,
      rgba(4,27,79,.12) 54%,
      rgba(8,10,13,0) 76%
    ),
    #080a0d;
  border-bottom-color:rgba(255,255,255,.06);
  box-shadow:none;
}
.site-header::after{content:none}

/* Hero: the nav glow dies away first, then a second restrained
   blue field returns around the spark/content instead of one huge wash. */
.hero{
  min-height:805px;
  background:
    radial-gradient(
      ellipse 34% 19% at 50% -2%,
      rgba(7,58,164,.30) 0%,
      rgba(5,39,114,.18) 36%,
      rgba(4,24,69,.055) 61%,
      transparent 79%
    ),
    radial-gradient(
      ellipse 31% 24% at 47% 28%,
      rgba(6,43,124,.19) 0%,
      rgba(4,28,80,.09) 43%,
      rgba(3,18,50,.025) 63%,
      transparent 78%
    ),
    linear-gradient(180deg,#07090c 0%,#03070d 47%,#04080d 100%);
}
.hero:after{
  height:110px;
  background:linear-gradient(180deg,transparent,#0b0d0f 92%);
}
.hero-ambient{
  width:min(650px,45vw);
  height:330px;
  left:47.2%;
  top:32px;
  background:radial-gradient(
    ellipse,
    rgba(11,72,190,.13) 0%,
    rgba(7,43,124,.065) 41%,
    transparent 72%
  );
  filter:blur(30px);
  opacity:.78;
}

/* Sharper four-point spark. The solid core stays crisp while only
   the aura breathes continuously. */
.hero-spark{
  top:48px;
  left:37.8%;
  width:40px;
  height:40px;
  font-size:0;
  color:transparent;
  opacity:1;
  filter:drop-shadow(0 0 4px rgba(13,87,230,.20));
  animation:heroSparkIn .62s cubic-bezier(.22,.75,.28,1) .16s both;
}
.hero-spark::before,
.hero-spark::after{
  content:"";
  position:absolute;
  clip-path:polygon(50% 0,55% 42%,100% 50%,55% 58%,50% 100%,45% 58%,0 50%,45% 42%);
}
.hero-spark::before{
  inset:0;
  background:linear-gradient(145deg,#0e67ff 0%,#0a4fd6 48%,#073493 100%);
  z-index:2;
}
.hero-spark::after{
  inset:-13px;
  background:rgba(11,87,240,.28);
  filter:blur(12px);
  z-index:1;
  animation:sparkAura 2.45s ease-in-out 1s infinite;
}

/* Reference proportions: larger crystal and stronger typography. */
.hero-layout{
  min-height:805px;
  grid-template-columns:42% 58%;
}
.hero-art{
  height:675px;
  align-self:end;
  align-items:flex-end;
  justify-content:center;
}
.hero-art img{
  width:clamp(540px,39vw,615px);
  max-width:none;
  transform:translate(-8px,-4px);
  filter:
    drop-shadow(0 18px 35px rgba(0,38,108,.19))
    drop-shadow(0 0 27px rgba(21,102,255,.09));
}
.hero-copy{
  padding-top:4px;
}
.hero h1{
  position:relative;
  font-size:clamp(64px,5vw,80px);
  line-height:1.055;
  letter-spacing:-.057em;
  font-weight:700;
}
.hero h1 .headline-emphasis{
  position:relative;
  display:inline-block;
  white-space:nowrap;
  z-index:2;
}

/* The original underline starts well into "Passive" and runs beyond
   "Income". It remains attached to that exact text at every width. */
.underline{
  position:absolute;
  z-index:0;
  left:24.5%;
  top:91%;
  width:96%;
  height:.47em;
  overflow:visible;
  pointer-events:none;
}
.underline path{
  fill:none;
  stroke:#0864ff;
  stroke-width:3.45;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:560;
  stroke-dashoffset:560;
}
.underline-line-1{opacity:.98}
.underline-line-2{opacity:.94}

.hero-copy>p{
  margin:44px 0 40px;
  font-size:clamp(24px,1.85vw,28.5px);
  line-height:1.35;
  font-weight:400;
  letter-spacing:-.025em;
  color:#f1f2f4;
}

/* Participant cards retain the tighter reference proportions from V2. */
.participant-grid{
  gap:24px;
  margin-bottom:54px;
}
.participant-card{
  height:93px;
  padding:0 18px;
  grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:9px;
  border-radius:18px;
  background:#111317;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.012);
}
.token-stack{
  display:flex;
  align-items:center;
  min-width:76px;
}
.token-stack img{
  width:40px;
  height:40px;
  flex:0 0 45px;
  object-fit:cover;
  border-radius:50%;
  margin-left:-12px;
  position:relative;
  box-shadow:0 0 0 1px rgba(255,255,255,.035);
}
.token-stack img:first-child{margin-left:0;z-index:1}
.token-stack img:nth-child(2){z-index:2}
.participant-copy{min-width:0;margin-left:-1px}
.participant-copy strong{
  font-size:20px;
  line-height:1;
  font-weight:600;
  letter-spacing:-.025em;
}
.participant-copy small{
  font-size:10.5px;
  margin-top:5px;
  color:#bfc1c6;
}
.reward-copy{gap:5px;white-space:nowrap}
.reward-copy>strong{font-size:18px;margin-left:3px;font-weight:500}
.reward-coin{width:20px;height:20px;font-size:8px}

/* CTA: the fill is intentionally static. The moving highlight exists
   only on the perimeter, matching the reference border shimmer. */
.button-blue{
  position:relative;
  isolation:isolate;
  overflow:visible;
  background:linear-gradient(180deg,#1268ff 0%,#0759f5 54%,#044de5 100%);
  border:1px solid rgba(106,163,255,.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,28,103,.20),
    0 9px 23px rgba(0,64,220,.13);
}
.button-blue::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  padding:2px;
  background:conic-gradient(
    from var(--border-angle),
    rgba(255,255,255,0) 0deg,
    rgba(255,255,255,0) 268deg,
    rgba(121,181,255,.28) 286deg,
    rgba(241,248,255,.98) 304deg,
    rgba(113,176,255,.55) 321deg,
    rgba(255,255,255,0) 341deg,
    rgba(255,255,255,0) 360deg
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:2;
  animation:borderShimmer 3.2s linear 1.25s infinite;
}
.button-blue::after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:inherit;
  border:1px solid rgba(46,125,255,.22);
  box-shadow:0 0 14px rgba(20,96,255,.18);
  opacity:.34;
  pointer-events:none;
  z-index:-1;
  animation:borderGlow 2.8s ease-in-out 1.1s infinite;
}
.button-blue:hover{filter:brightness(1.04)}

@property --border-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}

/* Staged hero entrance stays independent from lower scroll reveals. */
.site-header .brand{
  animation:heroLoadDown .72s cubic-bezier(.22,.75,.28,1) .04s both;
}
.site-header .top-cta{
  animation:heroLoadDown .72s cubic-bezier(.22,.75,.28,1) .13s both;
}
.hero-art{
  animation:heroArtIn 1.05s cubic-bezier(.18,.75,.24,1) .22s both;
}
.hero-copy h1{
  animation:heroLoadUp .82s cubic-bezier(.22,.75,.28,1) .36s both;
}
.hero-copy>p{
  animation:heroLoadUp .76s cubic-bezier(.22,.75,.28,1) .68s both;
}
.participant-card:nth-child(1){
  animation:heroLoadUp .76s cubic-bezier(.22,.75,.28,1) .81s both;
}
.participant-card:nth-child(2){
  animation:heroLoadUp .76s cubic-bezier(.22,.75,.28,1) .91s both;
}
.hero-button{
  animation:heroLoadUp .75s cubic-bezier(.22,.75,.28,1) 1.02s both;
}
.hero-doodle{animation:heroSoftIn .7s ease 1.14s both}
.coin-burst{animation:heroBurstIn .85s cubic-bezier(.18,.8,.25,1) 1.18s both}
.underline-line-1{animation:drawUnderline .66s cubic-bezier(.35,.08,.2,1) .74s forwards}
.underline-line-2{animation:drawUnderline .72s cubic-bezier(.35,.08,.2,1) .84s forwards}

@keyframes heroSparkIn{
  0%{opacity:0;transform:scale(.28) rotate(-6deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes sparkAura{
  0%,100%{opacity:.35;transform:scale(.82);filter:blur(11px)}
  50%{opacity:.88;transform:scale(1.18);filter:blur(14px)}
}
@keyframes heroLoadDown{
  0%{opacity:0;transform:translateY(-13px);filter:blur(3px)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes heroLoadUp{
  0%{opacity:0;transform:translateY(17px);filter:blur(5px)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes heroArtIn{
  0%{opacity:0;transform:translate(-13px,24px) scale(.965);filter:blur(8px)}
  55%{opacity:.88}
  100%{opacity:1;transform:translate(0,0) scale(1);filter:blur(0)}
}
@keyframes heroSoftIn{
  0%{opacity:0;filter:blur(5px)}
  100%{opacity:1;filter:blur(0)}
}
@keyframes heroBurstIn{
  0%{opacity:0;transform:translate(18px,15px) scale(.82);filter:blur(4px)}
  100%{opacity:1;transform:translate(0,0) scale(1);filter:blur(0)}
}
@keyframes drawUnderline{to{stroke-dashoffset:0}}
@keyframes borderShimmer{to{--border-angle:360deg}}
@keyframes borderGlow{
  0%,100%{opacity:.24;box-shadow:0 0 8px rgba(20,96,255,.12)}
  50%{opacity:.58;box-shadow:0 0 18px rgba(20,96,255,.26)}
}

@media(max-width:1100px){
  .hero{min-height:1060px}
  .hero-layout{min-height:1060px}
  .hero-copy{padding-top:78px}
  .hero h1{font-size:clamp(60px,7vw,72px)}
  .hero-art{height:515px}
  .hero-art img{
    width:clamp(500px,57vw,575px);
    transform:translate(0,-2px);
  }
  .underline{
    left:24%;
    top:91%;
    width:96%;
    height:.47em;
  }
  .hero-spark{left:50%;transform:translateX(-50%)}
  .hero-ambient{left:50%;width:min(620px,65vw)}
}

@media(max-width:720px){
  .hero{min-height:920px}
  .hero-layout{min-height:920px}
  .hero-copy{padding-top:66px}
  .hero h1{
    font-size:clamp(42px,11.4vw,49px);
    letter-spacing:-.052em;
  }
  .hero h1 .headline-emphasis{white-space:nowrap}
  .underline{
    left:18%;
    top:91%;
    width:98%;
    height:.48em;
  }
  .hero-copy>p{font-size:19px;margin:34px 0}
  .participant-card{padding-inline:16px;column-gap:8px}
  .token-stack{min-width:70px}
  .token-stack img{width:42px;height:42px;flex-basis:42px;margin-left:-11px}
  .participant-copy strong{font-size:19px}
  .reward-copy>strong{font-size:17px}
  .hero-art{height:375px}
  .hero-art img{width:430px;transform:translate(0,0)}
}

@media(prefers-reduced-motion:reduce){
  .site-header .brand,
  .site-header .top-cta,
  .hero-spark,
  .hero-spark::after,
  .hero-art,
  .hero-copy h1,
  .hero-copy>p,
  .participant-card,
  .hero-button,
  .hero-doodle,
  .coin-burst,
  .underline path,
  .button-blue::before,
  .button-blue::after{
    animation:none!important;
    opacity:1!important;
    filter:none;
    stroke-dashoffset:0;
  }
}

/* =========================================================
   RESPONSIVE + SPARK PASS V4, 2026-09-03
   Keeps the V3 desktop hero intact while hardening tablet/mobile.
   ========================================================= */

/* Bring the spark's breathing glow back on the actual spark itself.
   The load-in animation still runs first, then the glow continues forever. */
.hero-spark{
  animation:
    heroSparkIn .62s cubic-bezier(.22,.75,.28,1) .16s both,
    heroSparkBreath 2.45s ease-in-out .92s infinite;
  will-change:filter,opacity;
}
.hero-spark::before{
  animation:heroSparkCore 2.45s ease-in-out .92s infinite;
}
.hero-spark::after{
  animation:sparkAura 2.45s ease-in-out .92s infinite;
}
@keyframes heroSparkBreath{
  0%,100%{
    filter:
      drop-shadow(0 0 2px rgba(13,87,230,.24))
      drop-shadow(0 0 7px rgba(13,87,230,.12));
  }
  50%{
    filter:
      drop-shadow(0 0 5px rgba(25,112,255,.82))
      drop-shadow(0 0 18px rgba(12,84,236,.60))
      drop-shadow(0 0 34px rgba(7,55,177,.28));
  }
}
@keyframes heroSparkCore{
  0%,100%{filter:brightness(.92) saturate(1);opacity:.86}
  50%{filter:brightness(1.28) saturate(1.22);opacity:1}
}

/* ---------- Large tablet / small laptop ---------- */
@media(max-width:1180px){
  .shell,
  .header-inner{
    width:min(100% - 48px,1060px);
  }

  .site-header{height:108px}
  .brand{width:126px}
  .site-header .button{min-height:54px;padding-inline:24px;font-size:15px}

  .hero{
    min-height:auto;
    padding:0 0 34px;
  }
  .hero-layout{
    min-height:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  .hero-copy{
    order:1;
    text-align:center;
    padding:96px 0 0;
  }
  .hero h1{
    font-size:clamp(54px,6.5vw,68px);
    line-height:1.045;
  }
  .hero-copy>p{
    max-width:760px;
    margin:42px auto 38px;
    font-size:clamp(21px,2.35vw,26px);
  }
  .hero h1 .headline-emphasis{white-space:nowrap}
  .underline{
    left:23%;
    top:91%;
    width:98%;
  }
  .participant-grid{
    width:min(820px,100%);
    margin:0 auto 42px;
  }
  .hero-button{margin-inline:auto}
  .hero-art{
    order:2;
    height:540px;
    width:100%;
    margin-top:18px;
  }
  .hero-art img{
    width:clamp(520px,58vw,600px);
    transform:translate(0,0);
  }
  .hero-spark{
    left:50%;
    top:39px;
    transform:translateX(-50%);
  }
  .hero-ambient{
    left:50%;
    width:min(620px,68vw);
  }
  .coin-burst,.hero-doodle{display:none}

  .proof-cards,
  .benefit-row,
  .faq-grid,
  .cta-panel,
  .footer-panel{
    width:min(100% - 48px,1060px);
  }

  .proof-card{padding-inline:36px}
  .benefit-row{gap:34px;grid-template-columns:1fr 70px 1fr 70px 1fr}
  .benefit-arrow{width:62px}

  .process{
    width:min(100% - 48px,1060px);
  }
  .process-card{width:32%}
  .process-left{left:0}
  .process-right{right:0}
  .process-center{width:34%}

  .staking-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-copy h2{font-size:clamp(40px,4vw,48px)}
  .footer-panel{column-gap:46px;padding-inline:44px}
}

/* ---------- Tablet ---------- */
@media(max-width:900px){
  :root{--header-h:96px}

  .shell,
  .header-inner{
    width:calc(100% - 36px);
  }

  .site-header{height:96px}
  .brand{width:116px}
  .site-header .button{min-height:50px;padding-inline:20px;font-size:14px}

  .hero-copy{padding-top:82px}
  .hero h1{font-size:clamp(48px,7.2vw,60px)}
  .hero-copy>p{font-size:clamp(20px,2.8vw,24px)}
  .underline{left:21%;width:100%}
  .hero-art{height:500px}
  .hero-art img{width:clamp(480px,68vw,560px)}

  .proof{padding-block:54px 82px}
  .proof-cards{
    width:calc(100% - 36px);
    grid-template-columns:1fr;
    gap:16px;
  }
  .proof-card{min-height:118px}

  .benefit-row{
    width:calc(100% - 36px);
    grid-template-columns:1fr;
    gap:52px;
    margin-top:62px;
  }
  .benefit-arrow{display:none}
  .benefit-token{width:88px;height:88px}
  .triple-stak{height:88px}
  .triple-stak img{width:88px;height:88px}

  .getting-started{
    min-height:auto;
    padding:72px 0 90px;
  }
  .process{
    width:calc(100% - 36px);
    height:auto;
    margin:58px auto 0;
    display:grid;
    grid-template-columns:1fr;
    gap:76px;
    padding-top:158px;
    transform:none;
    left:auto;
  }
  .process-lines{display:none}
  .process-main-token{
    top:6px;
    width:104px;height:104px;
  }
  .process-main-token img{width:104px;height:104px}
  .process-card,
  .process-left,
  .process-center,
  .process-right{
    position:relative;
    inset:auto;
    top:auto;
    left:auto;
    right:auto;
    width:min(620px,100%);
    min-height:214px;
    margin-inline:auto;
    transform:none;
  }
  .process-center.reveal,
  .process-center.reveal.visible{transform:none}
  .process-card h3{font-size:30px}
  .process-card p{font-size:18px}

  .stake{padding-block:78px 88px}
  .staking-grid{
    width:calc(100% - 36px);
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
    margin-top:58px;
  }

  .faq{padding-block:84px}
  .faq-grid{
    width:calc(100% - 36px);
    grid-template-columns:1fr;
    gap:18px;
    margin-top:50px;
  }
  .faq-card{min-height:150px}

  .cta{padding-bottom:86px}
  .cta-panel{
    width:calc(100% - 36px);
    min-height:auto;
    grid-template-columns:1fr;
    padding-bottom:52px;
  }
  .cta-visual{height:310px}
  .cta-visual img{width:min(370px,78vw)}
  .cta-copy{text-align:center;padding:0 38px}
  .cta-copy p{margin-bottom:36px}

  .footer-panel{
    width:calc(100% - 36px);
    min-height:auto;
    grid-template-columns:1fr 1fr;
    gap:42px 52px;
    padding:58px 42px 118px;
  }
  .footer-brand{grid-column:1/-1}
  .footer-brand p{margin-top:24px}
}

/* ---------- Mobile ---------- */
@media(max-width:640px){
  :root{--header-h:84px}

  .shell,
  .header-inner{width:calc(100% - 24px)}

  .site-header{height:84px}
  .brand{width:96px}
  .site-header .button{
    min-height:44px;
    padding-inline:15px;
    font-size:12px;
  }

  .hero{padding-bottom:18px}
  .hero-ambient{
    width:88vw;
    height:270px;
    top:8px;
  }
  .hero-spark{
    width:31px;height:31px;
    top:32px;
  }
  .hero-copy{padding-top:74px}
  .hero h1{
    font-size:clamp(38px,11vw,47px);
    line-height:1.065;
    letter-spacing:-.052em;
  }
  .hero h1 .headline-emphasis{white-space:nowrap}
  .underline{
    left:15%;
    top:91%;
    width:106%;
    height:.50em;
  }
  .hero-copy>p{
    max-width:540px;
    margin:34px auto 30px;
    padding-inline:4px;
    font-size:clamp(17px,4.8vw,20px);
    line-height:1.5;
  }
  .participant-grid{
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
    margin-bottom:30px;
  }
  .participant-card{
    width:100%;
    height:82px;
    padding-inline:14px;
    column-gap:8px;
  }
  .token-stack{min-width:68px}
  .token-stack img{
    width:41px;height:41px;flex-basis:41px;
    margin-left:-11px;
  }
  .participant-copy strong{font-size:19px}
  .participant-copy small{font-size:10px}
  .reward-copy>strong{font-size:16px}
  .reward-coin{width:18px;height:18px}
  .hero-button{min-height:50px;min-width:186px}
  .hero-art{
    height:370px;
    margin-top:16px;
    overflow:visible;
  }
  .hero-art img{
    width:min(470px,118vw);
    transform:translateY(4px);
  }

  .section-title h2,
  .stake .section-title h2,
  .faq .section-title h2{
    font-size:clamp(34px,9.5vw,42px);
    line-height:1.08;
    letter-spacing:-.045em;
  }
  .section-title p{
    font-size:16px;
    line-height:1.55;
    padding-inline:12px;
  }

  .proof{padding-block:42px 72px}
  .proof-cards{width:calc(100% - 24px)}
  .proof-card{
    min-height:106px;
    padding-inline:20px;
  }
  .proof-card>span{font-size:16px}
  .proof-card>div>strong{font-size:27px}
  .proof-card>div>small{font-size:14px;margin-top:7px}
  .auditor strong{font-size:23px}
  .auditor img{width:31px;height:31px}

  .benefit-row{width:calc(100% - 24px);gap:48px}
  .benefit h3{font-size:22px}
  .benefit p{font-size:16px}

  .getting-started{padding-block:64px 74px}
  .process{
    width:calc(100% - 24px);
    gap:68px;
    padding-top:146px;
  }
  .process-main-token{width:92px;height:92px}
  .process-main-token img{width:92px;height:92px}
  .process-card,
  .process-left,
  .process-center,
  .process-right{
    min-height:198px;
    padding:44px 22px 27px;
    border-radius:19px;
  }
  .process-icon{width:68px;height:68px;top:-34px}
  .process-card h3{font-size:27px;margin-bottom:15px}
  .process-card p{font-size:16px;line-height:1.5}

  .stake{padding-block:68px 76px}
  .staking-grid{
    width:calc(100% - 24px);
    grid-template-columns:1fr;
    gap:18px;
    margin-top:44px;
  }
  .stake-card{min-height:330px;padding:18px}
  .stake-card>img{width:84px;height:84px;margin-bottom:22px}
  .stake-card h3{font-size:28px;margin-bottom:24px}
  .stake-stats{min-height:116px;padding:18px}
  .stake-stats strong{font-size:18px}
  .stake-stats span{font-size:16px}

  .faq{padding-block:72px}
  .faq-grid{width:calc(100% - 24px);margin-top:42px}
  .faq-card{
    min-height:auto;
    padding:22px 18px;
    grid-template-columns:42px 1fr;
    gap:16px;
  }
  .faq-card>span{width:42px;height:39px;font-size:16px}
  .faq-card h3{font-size:20px;margin-bottom:16px}
  .faq-card p{font-size:16px;line-height:1.5}

  .cta{padding-bottom:64px}
  .cta-panel{width:calc(100% - 24px);border-radius:20px;padding-bottom:40px}
  .cta-visual{height:250px}
  .cta-visual img{width:min(300px,82vw)}
  .cta-copy{padding-inline:22px}
  .cta-copy h2{font-size:clamp(34px,9vw,40px);line-height:1.08}
  .cta-copy p{font-size:16px;line-height:1.5;margin-bottom:30px}

  .footer{padding-bottom:24px}
  .footer-panel{
    width:calc(100% - 24px);
    grid-template-columns:1fr;
    gap:30px;
    padding:44px 26px 108px;
    border-radius:20px;
  }
  .footer-brand{grid-column:auto}
  .footer-brand img{width:118px}
  .footer-brand p{font-size:17px;margin-top:20px}
  .footer-column h4{font-size:19px;margin-bottom:18px}
  .footer-column a{font-size:15px;margin-bottom:17px}
  .footer-credit{left:26px;right:26px;bottom:27px;font-size:12px}
}

/* ---------- Very narrow phones ---------- */
@media(max-width:390px){
  .brand{width:88px}
  .site-header .button{padding-inline:12px;font-size:11px}
  .hero h1{font-size:37px}
  .underline{left:13%;width:108%}
  .participant-card{padding-inline:11px}
  .token-stack{min-width:62px}
  .token-stack img{width:38px;height:38px;flex-basis:38px;margin-left:-10px}
  .participant-copy strong{font-size:18px}
  .reward-copy{gap:4px}
  .reward-copy>strong{font-size:15px;margin-left:1px}
  .hero-art{height:340px}
  .hero-art img{width:124vw}
}

/* Keep spark centering transforms from being overwritten by the load-in. */
@keyframes heroSparkIn{
  0%{opacity:0;scale:.28;rotate:-6deg}
  100%{opacity:1;scale:1;rotate:0deg}
}

@media(prefers-reduced-motion:reduce){
  .hero-spark,
  .hero-spark::before,
  .hero-spark::after{
    animation:none!important;
  }
}

/* =========================================================
   MOBILE MATCH PASS V5, 2026-09-03
   Tuned directly against the supplied original iPhone 15 Pro Max
   screen recording (430 x 932 CSS viewport).
   Desktop/V3 styling remains unchanged.
   ========================================================= */
@media(max-width:640px){
  :root{--header-h:84px}

  /* Mobile shell matches the original's ~20px content gutter. */
  .shell{width:calc(100% - 40px)}
  .header-inner{width:calc(100% - 32px)}

  /* The original mobile header switches to an all-blue mark. */
  .site-header{
    height:84px;
    background:
      radial-gradient(ellipse 52% 145% at 53% 116%,rgba(5,49,139,.22),transparent 66%),
      #090b0d;
    border-bottom-color:rgba(255,255,255,.065);
  }
  .brand{width:100px}
  .site-header .brand img{
    filter:brightness(0) saturate(100%) invert(31%) sepia(97%) saturate(5103%) hue-rotate(218deg) brightness(101%) contrast(111%);
  }
  .site-header .button{
    min-height:50px;
    padding-inline:19px;
    font-size:13px;
  }

  /* HERO: left-aligned type, two exact heading lines, button + doodle
     above the crystal, matching the real mobile composition. */
  .hero{
    min-height:auto;
    padding:0 0 62px;
    background:
      radial-gradient(ellipse 52% 15% at 58% -1%,rgba(7,54,156,.20),transparent 76%),
      radial-gradient(ellipse 35% 14% at 93% 11%,rgba(7,54,156,.08),transparent 78%),
      linear-gradient(180deg,#080a0d 0%,#030609 48%,#05080c 100%);
  }
  .hero:after{
    height:92px;
    background:linear-gradient(180deg,transparent,#0b0d0f 94%);
  }
  .hero-layout{
    width:calc(100% - 40px);
    min-height:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  .hero-ambient{
    width:86vw;
    height:230px;
    top:3px;
    left:56%;
    opacity:.56;
    filter:blur(31px);
  }
  .hero-spark{
    left:auto;
    right:2px;
    top:30px;
    width:21px;
    height:21px;
    transform:none;
  }
  .hero-copy{
    order:1;
    padding:68px 0 0;
    text-align:left;
  }
  .hero h1{
    white-space:nowrap;
    font-size:36px;
    line-height:1.03;
    letter-spacing:-.052em;
    font-weight:600;
    text-align:left;
  }
  .hero h1 .headline-emphasis{white-space:nowrap}
  .underline{
    left:16%;
    top:90%;
    width:101%;
    height:.52em;
  }
  .underline path{stroke-width:2.5}
  .hero-copy>p{
    max-width:360px;
    margin:29px 0 30px;
    padding:0;
    font-size:16px;
    line-height:1.48;
    letter-spacing:-.018em;
    text-align:left;
  }
  .participant-grid{
    width:100%;
    grid-template-columns:1fr;
    gap:12px;
    margin:0 0 34px;
  }
  .participant-card{
    height:82px;
    padding:0 18px;
    column-gap:9px;
    border-radius:15px;
    background:#141518;
    box-shadow:none;
  }
  .token-stack{min-width:70px}
  .token-stack img{
    width:42px;
    height:42px;
    flex-basis:42px;
    margin-left:-10px;
  }
  .participant-copy{justify-self:start;margin-left:0}
  .participant-copy strong{font-size:17px;letter-spacing:-.02em}
  .participant-copy small{font-size:9px;margin-top:4px}
  .reward-copy{gap:5px}
  .reward-copy>strong{font-size:16px;margin-left:3px}
  .reward-coin{width:19px;height:19px;font-size:8px}
  .hero-button{
    min-width:207px;
    min-height:53px;
    margin:0;
    align-self:flex-start;
  }
  .hero-doodle{
    display:block;
    width:78px;
    right:2px;
    bottom:407px;
  }
  .hero-doodle path{stroke-width:1.7}
  .coin-burst{display:none}
  .hero-art{
    order:2;
    width:100%;
    height:390px;
    margin-top:68px;
    align-items:flex-end;
    overflow:visible;
  }
  .hero-art img{
    width:min(410px,105vw);
    max-width:none;
    transform:translateY(2px);
  }

  /* TVL and audit are vertical centered cards on mobile in the source. */
  .proof{
    padding:52px 0 80px;
    background:linear-gradient(180deg,#0b0d0f,#0b0d0f);
  }
  .proof-mesh{
    width:130%;
    height:240px;
    top:260px;
    opacity:.13;
  }
  .proof-cards{
    width:calc(100% - 32px);
    grid-template-columns:1fr;
    gap:17px;
  }
  .proof-card{
    min-height:144px;
    padding:23px 20px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:15px;
    text-align:center;
    border-radius:15px;
    background:linear-gradient(145deg,#191a1c,#151618);
  }
  .proof-card>span{font-size:15px;color:#e2e2e3}
  .proof-card>div:not(.auditor){align-items:center}
  .proof-card>div>strong{font-size:24px}
  .proof-card>div>small{font-size:13px;margin-top:8px}
  .auditor{justify-content:center;gap:9px}
  .auditor img{width:29px;height:29px}
  .auditor strong{font-size:21px}

  /* Three staking benefits stay lightweight and airy. */
  .benefit-row{
    width:calc(100% - 40px);
    margin-top:86px;
    gap:58px;
  }
  .benefit-token{width:72px;height:72px;margin-bottom:18px}
  .triple-stak{width:116px;height:72px;margin-bottom:18px}
  .triple-stak img{width:72px;height:72px}
  .triple-stak img:nth-child(1){left:0}
  .triple-stak img:nth-child(2){left:22px}
  .triple-stak img:nth-child(3){left:44px}
  .benefit h3{font-size:18px;margin-bottom:12px}
  .benefit p{font-size:14px;line-height:1.4}

  /* The original mobile layout removes the desktop hub token/connector
     diagram and turns the three process items into ordinary stacked cards. */
  .getting-started{
    min-height:auto;
    padding:74px 0 82px;
    background:radial-gradient(circle at 75% 32%,rgba(9,38,91,.11),transparent 36%),#0b0d0f;
  }
  .getting-started .section-title h2{
    font-size:30px;
    line-height:1.08;
    letter-spacing:-.04em;
    white-space:nowrap;
    margin-bottom:24px;
  }
  .getting-started .section-title p{
    max-width:390px;
    margin-inline:auto;
    padding-inline:8px;
    font-size:15px;
    line-height:1.55;
  }
  .process{
    width:calc(100% - 32px);
    height:auto;
    margin:46px auto 0;
    padding-top:0;
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
  }
  .process-main-token,.process-lines{display:none}
  .process-card,
  .process-left,
  .process-center,
  .process-right{
    position:relative;
    inset:auto;
    width:100%;
    min-height:194px;
    margin:0;
    padding:27px 24px 25px;
    border:1px solid #43506a;
    border-radius:17px;
    background:linear-gradient(100deg,#0c0e12 0%,#0d1422 100%);
    transform:none;
  }
  .process-center.reveal,
  .process-center.reveal.visible{transform:none}
  .process-icon{
    position:static;
    width:64px;
    height:64px;
    margin:0 auto 20px;
  }
  .process-card h3{
    font-size:22px;
    letter-spacing:-.03em;
    margin:0 0 16px;
  }
  .process-card p{
    max-width:340px;
    font-size:15px;
    line-height:1.5;
  }

  /* Asset cards are slightly denser than V4 and match the source scale. */
  .stake{padding:74px 0 78px}
  .stake .section-title h2{
    font-size:32px;
    line-height:1.08;
    margin-bottom:23px;
  }
  .stake .section-title p{
    max-width:380px;
    margin-inline:auto;
    font-size:15px;
    line-height:1.5;
  }
  .staking-grid{
    width:calc(100% - 32px);
    grid-template-columns:1fr;
    gap:18px;
    margin-top:42px;
  }
  .stake-card{
    min-height:310px;
    padding:20px;
    border-radius:14px;
  }
  .stake-card>img{width:72px;height:72px;margin-bottom:25px}
  .stake-card h3{
    font-size:22px;
    line-height:1.15;
    letter-spacing:-.035em;
    margin-bottom:27px;
  }
  .stake-stats{
    min-height:110px;
    padding:18px 19px;
    row-gap:18px;
    border-radius:16px;
  }
  .stake-stats strong{font-size:16px}
  .stake-stats span{font-size:14px;gap:12px}
  .stake-stats span:before{width:6px;height:6px}
  .load-more{min-height:48px;margin-top:39px;padding-inline:29px}

  .faq{padding:78px 0 82px}
  .faq .section-title h2{
    max-width:360px;
    margin:0 auto 26px;
    font-size:34px;
    line-height:1.08;
  }
  .faq .section-title p{
    max-width:390px;
    margin-inline:auto;
    font-size:15px;
    line-height:1.55;
  }
  .faq-grid{
    width:calc(100% - 32px);
    gap:18px;
    margin-top:44px;
  }
  .faq-card{
    min-height:148px;
    padding:24px 21px;
    grid-template-columns:38px 1fr;
    gap:17px;
    border-radius:13px;
  }
  .faq-card>span{width:38px;height:36px;font-size:14px;border-radius:6px}
  .faq-card h3{font-size:17px;line-height:1.28;margin:2px 0 16px}
  .faq-card p{font-size:15px;line-height:1.5}

  /* Mobile CTA is text first, artwork second, with the blue bloom behind
     the heading rather than behind the illustration. */
  .cta{padding:0 0 72px}
  .cta-panel{
    width:calc(100% - 32px);
    min-height:650px;
    display:flex;
    flex-direction:column;
    padding:44px 18px 22px;
    border-radius:19px;
    background:
      radial-gradient(ellipse 78% 34% at 50% 9%,rgba(15,78,227,.60),rgba(10,52,158,.28) 43%,transparent 72%),
      linear-gradient(180deg,#071124 0%,#080b10 47%,#080a0d 100%);
  }
  .cta-copy{
    order:1;
    width:100%;
    padding:0 8px;
    text-align:center;
  }
  .cta-copy h2{
    max-width:330px;
    margin:0 auto 24px;
    font-size:34px;
    line-height:1.08;
    letter-spacing:-.045em;
  }
  .cta-copy p{
    max-width:330px;
    margin:0 auto 33px;
    font-size:16px;
    line-height:1.55;
  }
  .cta-copy .compact{min-width:188px;min-height:54px}
  .cta-visual{
    order:2;
    height:334px;
    margin-top:26px;
  }
  .cta-visual img{width:min(330px,88vw)}
  .cta-spark.s1{left:21px;top:28px;font-size:16px}
  .cta-spark.s2{left:45px;bottom:62px;font-size:17px}
  .cta-spark.s3{right:31px;bottom:48px;font-size:13px}

  .footer{padding:0 0 26px}
  .footer-panel{
    width:calc(100% - 32px);
    min-height:auto;
    grid-template-columns:1fr;
    gap:35px;
    padding:58px 28px 112px;
    border-radius:20px;
    background:linear-gradient(120deg,#101c3c 0%,#061a3b 55%,#03132e 100%);
  }
  .footer-brand{grid-column:auto}
  .footer-brand img{width:136px;filter:none}
  .footer-brand p{font-size:18px;margin-top:35px}
  .footer-column h4{font-size:18px;margin:0 0 20px}
  .footer-column a{font-size:15px;margin:0 0 19px}
  .footer-credit{left:28px;right:28px;bottom:30px;font-size:11px}
}

/* Extra guard for narrow Android/iPhone widths without changing the layout. */
@media(max-width:390px){
  .hero h1{font-size:33px}
  .hero-copy>p{font-size:15px}
  .participant-card{padding-inline:14px}
  .token-stack{min-width:64px}
  .token-stack img{width:39px;height:39px;flex-basis:39px}
  .participant-copy strong{font-size:16px}
  .reward-copy>strong{font-size:15px}
  .hero-button{min-width:192px}
  .getting-started .section-title h2{font-size:27px}
  .process-card h3{font-size:21px}
  .cta-copy h2{font-size:31px}
}


/* =========================================================
   COOKIE CONSENT
   ========================================================= */

.cookie-consent[hidden],
.cookie-preferences[hidden],
.cookie-settings-button[hidden]{
  display:none!important;
}

.cookie-consent{
  position:fixed;
  z-index:300;
  left:50%;
  bottom:24px;
  width:min(1180px,calc(100% - 48px));
  transform:translateX(-50%);
}

.cookie-consent-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:38px;
  align-items:center;
  padding:24px 26px;
  border:1px solid rgba(74,125,255,.26);
  border-radius:22px;
  background:
    radial-gradient(circle at 8% 0%,rgba(2,81,255,.12),transparent 31%),
    rgba(13,18,27,.97);
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter:blur(18px);
}

.cookie-consent-label{
  display:block;
  margin-bottom:8px;
  color:#4c89ff;
  font-size:11px;
  line-height:1;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.cookie-consent-copy h2{
  margin:0 0 8px;
  color:#f6f7f8;
  font-size:22px;
  line-height:1.22;
  letter-spacing:-.035em;
  font-weight:600;
}

.cookie-consent-copy p{
  max-width:760px;
  margin:0;
  color:#b8bec7;
  font-size:14px;
  line-height:1.62;
}

.cookie-consent-copy p a,
.cookie-preferences-policy a{
  color:#dce7ff;
  text-decoration:underline;
  text-decoration-color:rgba(108,156,255,.55);
  text-underline-offset:3px;
}

.cookie-consent-copy p a:hover,
.cookie-preferences-policy a:hover{
  color:#ffffff;
}

.cookie-consent-actions,
.cookie-preferences-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.cookie-action{
  min-height:46px;
  padding:0 17px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.11);
  font:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:
    border-color .2s ease,
    background .2s ease,
    color .2s ease;
}

.cookie-action-secondary{
  color:#d6dbe3;
  background:#121720;
}

.cookie-action-secondary:hover{
  color:#fff;
  border-color:rgba(69,126,255,.36);
  background:#151b25;
}

.cookie-accept{
  min-height:46px;
  padding:0 19px;
  font-size:13px;
  white-space:nowrap;
}

/* Preferences dialog */
.cookie-preferences{
  position:fixed;
  z-index:320;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
}

.cookie-preferences-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,5,10,.74);
  backdrop-filter:blur(8px);
}

.cookie-preferences-panel{
  position:relative;
  z-index:2;
  width:min(640px,100%);
  max-height:min(760px,calc(100vh - 48px));
  overflow:auto;
  padding:30px;
  border:1px solid rgba(74,125,255,.24);
  border-radius:24px;
  background:
    radial-gradient(circle at 8% 0%,rgba(2,81,255,.11),transparent 31%),
    #0f141c;
  box-shadow:0 28px 85px rgba(0,0,0,.55);
}

.cookie-preferences-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.cookie-preferences-head h2{
  margin:0;
  color:#f5f6f8;
  font-size:30px;
  line-height:1.15;
  letter-spacing:-.04em;
  font-weight:600;
}

.cookie-close{
  flex:0 0 auto;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  background:#121720;
  color:#dce0e6;
  font-size:23px;
  line-height:1;
  cursor:pointer;
}

.cookie-close:hover{
  color:#fff;
  border-color:rgba(65,123,255,.38);
}

.cookie-preferences-intro{
  margin:20px 0 26px;
  color:#aeb5bf;
  font-size:15px;
  line-height:1.65;
}

.cookie-preference-list{
  border-top:1px solid rgba(255,255,255,.09);
}

.cookie-preference-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:30px;
  align-items:center;
  padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.09);
}

.cookie-preference-row strong{
  display:block;
  margin-bottom:7px;
  color:#f0f2f5;
  font-size:17px;
  font-weight:600;
}

.cookie-preference-row p{
  max-width:420px;
  margin:0;
  color:#969eaa;
  font-size:13px;
  line-height:1.55;
}

/* Toggle */
.cookie-switch{
  position:relative;
  display:grid;
  grid-template-columns:auto;
  justify-items:end;
  gap:7px;
  cursor:pointer;
}

.cookie-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.cookie-switch>span{
  position:relative;
  width:46px;
  height:26px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:#1b222d;
  transition:background .2s ease,border-color .2s ease;
}

.cookie-switch>span::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#aeb5bf;
  transition:transform .2s ease,background .2s ease;
}

.cookie-switch input:checked+span{
  border-color:rgba(92,146,255,.50);
  background:#0759f7;
}

.cookie-switch input:checked+span::after{
  transform:translateX(20px);
  background:#ffffff;
}

.cookie-switch input:focus-visible+span{
  outline:2px solid #79a5ff;
  outline-offset:3px;
}

.cookie-switch em{
  color:#7e8793;
  font-size:10px;
  font-style:normal;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.cookie-switch-disabled{
  cursor:default;
  opacity:.68;
}

.cookie-preferences-actions{
  justify-content:flex-end;
  margin-top:28px;
}

.cookie-preferences-policy{
  margin:20px 0 0;
  color:#89919c;
  font-size:12px;
  line-height:1.55;
  text-align:right;
}

/* Persistent settings shortcut */
.cookie-settings-button{
  position:fixed;
  z-index:190;
  left:18px;
  bottom:18px;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(92,146,255,.22);
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 30%,rgba(2,81,255,.14),transparent 50%),
    rgba(15,20,28,.92);
  color:#a9c5ff;
  cursor:pointer;
  box-shadow:
    0 12px 34px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter:blur(12px);
  transition:
    transform .22s ease,
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.cookie-settings-button:not([hidden]){
  animation:cookieSettingsFadeIn .42s cubic-bezier(.2,.72,.22,1) both;
}

.cookie-settings-button:hover{
  transform:translateY(-2px) scale(1.04);
  color:#fff;
  border-color:rgba(91,147,255,.48);
  background:
    radial-gradient(circle at 38% 30%,rgba(2,81,255,.22),transparent 52%),
    rgba(17,24,35,.96);
  box-shadow:
    0 15px 38px rgba(0,0,0,.34),
    0 0 22px rgba(2,81,255,.10);
}

.cookie-settings-button:focus-visible{
  outline:2px solid #79a5ff;
  outline-offset:3px;
}

.cookie-settings-icon{
  width:22px;
  height:22px;
  overflow:visible;
}

.cookie-settings-icon path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.cookie-settings-icon circle{
  fill:currentColor;
}

.cookie-modal-open{
  overflow:hidden;
}


.cookie-preferences:not([hidden]) .cookie-preferences-backdrop{
  animation:cookiePreferencesBackdropIn .30s ease both;
}

.cookie-preferences:not([hidden]) .cookie-preferences-panel{
  transform-origin:50% 54%;
  animation:cookiePreferencesPanelIn .38s cubic-bezier(.18,.76,.22,1) both;
}

@keyframes cookiePreferencesBackdropIn{
  0%{opacity:0}
  100%{opacity:1}
}

@keyframes cookiePreferencesPanelIn{
  0%{
    opacity:0;
    transform:translateY(18px) scale(.975);
    filter:blur(4px);
  }
  58%{
    opacity:1;
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes cookieSettingsFadeIn{
  0%{
    opacity:0;
    transform:translateY(8px) scale(.86);
    filter:blur(3px);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@media(max-width:900px){
  .cookie-consent{
    bottom:16px;
    width:calc(100% - 32px);
  }

  .cookie-consent-inner{
    grid-template-columns:1fr;
    gap:20px;
    padding:22px;
  }

  .cookie-consent-actions{
    justify-content:flex-end;
  }
}

@media(max-width:640px){
  .cookie-consent{
    bottom:10px;
    width:calc(100% - 20px);
  }

  .cookie-consent-inner{
    gap:18px;
    padding:20px 18px;
    border-radius:19px;
  }

  .cookie-consent-copy h2{
    font-size:20px;
  }

  .cookie-consent-copy p{
    font-size:13px;
    line-height:1.58;
  }

  .cookie-consent-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
  }

  .cookie-consent-actions .cookie-accept{
    grid-column:1/-1;
    width:100%;
  }

  .cookie-action,
  .cookie-accept{
    width:100%;
    min-height:44px;
    padding:0 12px;
    font-size:12px;
  }

  .cookie-preferences{
    padding:12px;
    align-items:end;
  }

  .cookie-preferences-panel{
    width:100%;
    max-height:88vh;
    padding:24px 18px 20px;
    border-radius:22px 22px 18px 18px;
  }

  .cookie-preferences-head h2{
    font-size:25px;
  }

  .cookie-preference-row{
    gap:18px;
    padding:19px 0;
  }

  .cookie-preferences-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .cookie-preferences-actions .cookie-accept{
    grid-column:1/-1;
  }

  .cookie-preferences-policy{
    text-align:left;
  }

  .cookie-settings-button{
    left:10px;
    bottom:10px;
    width:42px;
    height:42px;
  }

  .cookie-settings-icon{
    width:20px;
    height:20px;
  }
}

@media(max-width:380px){
  .cookie-consent-actions,
  .cookie-preferences-actions{
    grid-template-columns:1fr;
  }

  .cookie-consent-actions .cookie-accept,
  .cookie-preferences-actions .cookie-accept{
    grid-column:auto;
  }
}

@media(prefers-reduced-motion:reduce){
  .cookie-action,
  .cookie-close,
  .cookie-switch>span,
  .cookie-switch>span::after,
  .cookie-settings-button,
  .cookie-preferences-backdrop,
  .cookie-preferences-panel{
    transition:none!important;
    animation:none!important;
  }
}


/* =========================================================
   PRIMARY NAV + FOOTER SPACING FIX
   ========================================================= */

.header-inner{
  position:relative;
}

.site-nav{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:34px;
  white-space:nowrap;
}

.site-nav a{
  position:relative;
  color:#c9ced6;
  font-size:15px;
  line-height:1;
  font-weight:500;
  transition:color .22s ease;
}

.site-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:1px;
  background:#3f7fff;
  transform:scaleX(0);
  transform-origin:center;
  opacity:.85;
  transition:transform .22s ease;
}

.site-nav a:hover{
  color:#ffffff;
}

.site-nav a:hover::after{
  transform:scaleX(1);
}

/* Copyright now follows the footer links instead of sitting underneath them. */
.footer-panel{
  min-height:auto;
  padding-bottom:38px;
  row-gap:0;
}

.footer-credit{
  position:static;
  grid-column:1/-1;
  margin-top:52px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
  font-size:14px;
  color:#b9c0ca;
}

.footer-column a:last-child{
  margin-bottom:0;
}

@media(max-width:1180px){
  .site-nav{
    gap:22px;
  }

  .site-nav a{
    font-size:13px;
  }
}

@media(max-width:900px){
  .site-nav{
    display:none;
  }

  .footer-panel{
    padding-bottom:36px;
  }

  .footer-credit{
    margin-top:18px;
  }
}

@media(max-width:640px){
  .footer-credit{
    margin-top:8px;
    padding-top:24px;
  }
}

@media(prefers-reduced-motion:reduce){
  .site-nav a,
  .site-nav a::after{
    transition:none!important;
  }
}


/* =========================================================
   MOBILE HEADER LOGO FIX
   Keep the original white logo and improve visibility.
   ========================================================= */

@media(max-width:640px){
  .site-header .brand{
    width:126px;
    flex:0 0 126px;
  }

  .site-header .brand img{
    width:100%;
    height:auto;
    filter:none!important;
  }
}

@media(max-width:380px){
  .site-header .brand{
    width:118px;
    flex-basis:118px;
  }
}


/* =========================================================
   FOOTER RESPONSIVE LAYOUT FIX
   Desktop 1280px+ remains unchanged.
   ========================================================= */

/* Small desktop / large tablet: keep all four footer groups in one row. */
@media(min-width:901px) and (max-width:1279px){
  .footer-panel{
    width:calc(100% - 48px);
    grid-template-columns:1.12fr .92fr .92fr 1.18fr;
    column-gap:28px;
    row-gap:0;
    padding:52px 38px 34px;
  }

  .footer-brand{
    grid-column:auto;
  }

  .footer-brand img{
    width:128px;
  }

  .footer-brand p{
    margin-top:34px;
    font-size:17px;
    line-height:1.45;
  }

  .footer-column h4{
    margin:5px 0 22px;
    font-size:18px;
  }

  .footer-column a{
    margin-bottom:18px;
    font-size:15px;
    line-height:1.45;
  }

  .footer-credit{
    grid-column:1/-1;
    margin-top:38px;
    padding-top:24px;
  }
}

/* Tablet: deliberate 2 x 2 structure with real vertical separation. */
@media(min-width:641px) and (max-width:900px){
  .footer-panel{
    width:calc(100% - 36px);
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "brand quick"
      "resources legal"
      "credit credit";
    column-gap:64px;
    row-gap:52px;
    padding:52px 42px 34px;
    align-items:start;
  }

  .footer-brand{
    grid-area:brand;
  }

  .footer-quick-links{
    grid-area:quick;
  }

  .footer-resources{
    grid-area:resources;
  }

  .footer-legal-support{
    grid-area:legal;
  }

  .footer-credit{
    grid-area:credit;
    margin-top:2px;
    padding-top:25px;
  }

  .footer-brand img{
    width:132px;
  }

  .footer-brand p{
    margin-top:28px;
    font-size:17px;
    line-height:1.5;
  }

  .footer-column h4{
    margin:2px 0 20px;
    font-size:18px;
  }

  .footer-column a{
    margin-bottom:17px;
    font-size:15px;
    line-height:1.45;
  }
}

/* Mobile: single clean stack with spacing between every group. */
@media(max-width:640px){
  .footer{
    padding-bottom:42px;
  }

  .footer-panel{
    width:calc(100% - 24px);
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "brand"
      "quick"
      "resources"
      "legal"
      "credit";
    row-gap:36px;
    padding:38px 26px 28px;
    border-radius:20px;
  }

  .footer-brand{
    grid-area:brand;
  }

  .footer-quick-links{
    grid-area:quick;
  }

  .footer-resources{
    grid-area:resources;
  }

  .footer-legal-support{
    grid-area:legal;
  }

  .footer-credit{
    grid-area:credit;
    margin-top:2px;
    padding-top:23px;
    font-size:12px;
    line-height:1.45;
  }

  .footer-brand img{
    width:130px;
  }

  .footer-brand p{
    margin:24px 0 0;
    font-size:16px;
    line-height:1.5;
  }

  .footer-column h4{
    margin:0 0 18px;
    font-size:18px;
    line-height:1.2;
  }

  .footer-column a{
    margin:0 0 15px;
    font-size:15px;
    line-height:1.45;
  }

  .footer-column a:last-child{
    margin-bottom:0;
  }
}

@media(max-width:380px){
  .footer-panel{
    padding-inline:22px;
    row-gap:32px;
  }

  .footer-brand img{
    width:124px;
  }
}


/* =========================================================
   HOME STAKING CARDS
   Spacious reference-style layout with duration and returns.
   ========================================================= */

.stake .staking-grid{
  gap:30px;
}

.stake .stake-card{
  min-height:430px;
  padding:22px;
  border-radius:18px;
  background:#1a1e28;
}

.stake .stake-card>img{
  width:104px;
  height:104px;
  margin-bottom:32px;
}

.stake .stake-card h3{
  margin:0 0 34px;
  font-size:36px;
  line-height:1.12;
  letter-spacing:-.045em;
  font-weight:600;
}

.stake .stake-stats{
  min-height:184px;
  margin-top:auto;
  padding:20px 22px 22px;
  display:block;
  border:1px solid #929aa6;
  border-radius:21px;
}

.stake .stake-stats-head,
.stake .stake-plan-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  column-gap:26px;
}

.stake .stake-stats-head{
  padding:0 2px 14px;
  border-bottom:1px solid rgba(255,255,255,.09);
}

.stake .stake-stats-head span{
  color:#8f97a3;
  font-size:13px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.stake .stake-stats-head span:last-child{
  text-align:right;
}

.stake .stake-plan-row{
  min-height:43px;
  padding:10px 2px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.stake .stake-plan-row:last-child{
  padding-bottom:4px;
  border-bottom:0;
}

.stake .stake-plan-row strong{
  color:#f3f4f6;
  font-size:18px;
  line-height:1.3;
  font-weight:600;
}

.stake .stake-plan-row span{
  display:block;
  color:#e1e4e9;
  font-size:18px;
  line-height:1.3;
  font-weight:500;
  text-align:right;
}

/* Remove the old dot decoration inherited from the previous
   Locked/Flexible stat layout. */
.stake .stake-stats span::before{
  content:none!important;
  display:none!important;
}

/* Large tablet / small desktop */
@media(min-width:721px) and (max-width:1100px){
  .stake .staking-grid{
    gap:24px;
  }

  .stake .stake-card{
    min-height:410px;
    padding:21px;
  }

  .stake .stake-card>img{
    width:92px;
    height:92px;
    margin-bottom:28px;
  }

  .stake .stake-card h3{
    margin-bottom:30px;
    font-size:30px;
  }

  .stake .stake-stats{
    min-height:176px;
    padding:18px 19px 20px;
  }

  .stake .stake-plan-row strong,
  .stake .stake-plan-row span{
    font-size:16px;
  }
}

/* Mobile */
@media(max-width:720px){
  .stake .stake-card{
    min-height:390px;
    padding:22px;
    border-radius:17px;
  }

  .stake .stake-card>img{
    width:86px;
    height:86px;
    margin-bottom:28px;
  }

  .stake .stake-card h3{
    margin-bottom:30px;
    font-size:28px;
    line-height:1.14;
  }

  .stake .stake-stats{
    min-height:172px;
    padding:18px 18px 19px;
    border-radius:18px;
  }

  .stake .stake-stats-head{
    padding-bottom:12px;
  }

  .stake .stake-stats-head span{
    font-size:11px;
  }

  .stake .stake-plan-row{
    min-height:42px;
    padding:9px 1px;
  }

  .stake .stake-plan-row strong,
  .stake .stake-plan-row span{
    font-size:15px;
  }
}

@media(max-width:380px){
  .stake .stake-card{
    min-height:370px;
    padding:20px;
  }

  .stake .stake-card h3{
    font-size:26px;
  }

  .stake .stake-plan-row strong,
  .stake .stake-plan-row span{
    font-size:14px;
  }
}


/* =========================================================
   HOME STAKING CARD ALIGNMENT FIX
   Push Returns fully to the right edge of the stats panel.
   ========================================================= */

.stake .stake-stats-head,
.stake .stake-plan-row{
  grid-template-columns:auto 1fr;
}

.stake .stake-stats-head span:last-child,
.stake .stake-plan-row span{
  justify-self:end;
  text-align:right;
}


/* =========================================================
   HOME STAKING CARD MONTHLY RETURN LABEL
   State frequency once in the header to avoid row clutter.
   ========================================================= */

.stake .stake-stats-head span:last-child{
  white-space:nowrap;
  font-size:12px;
  letter-spacing:.055em;
}

@media(max-width:720px){
  .stake .stake-stats-head span:last-child{
    font-size:10px;
    letter-spacing:.045em;
  }
}


/* =========================================================
   FOOTER CONTACT DETAILS
   Added on top of the current 3053-line stylesheet.
   ========================================================= */

.footer-contact{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:30px;
}

.footer-contact-link{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  width:max-content;
  max-width:100%;
  text-decoration:none;
}

.footer-contact-link span{
  color:#7183a2;
  font-size:11px;
  line-height:1;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.footer-contact-link strong{
  max-width:100%;
  color:#d7dce4;
  font-size:14px;
  line-height:1.45;
  font-weight:500;
  overflow-wrap:anywhere;
  transition:color .2s ease;
}

.footer-contact-link:hover strong{
  color:#ffffff;
}

@media(min-width:901px) and (max-width:1279px){
  .footer-contact{
    gap:12px;
    margin-top:24px;
  }

  .footer-contact-link strong{
    font-size:13px;
  }
}

@media(min-width:641px) and (max-width:900px){
  .footer-contact{
    margin-top:24px;
  }

  .footer-contact-link strong{
    font-size:13px;
  }
}

@media(max-width:640px){
  .footer-contact{
    gap:12px;
    margin-top:22px;
  }

  .footer-contact-link strong{
    font-size:14px;
  }
}