/* Hydrex: white, left-aligned hero, pill badge above the headline, the pastel
   wave spanning full width beneath it, then their grey stat row.
   Satoshi is not free to redistribute, so this uses Manrope. */

body{
  background:#fff; color:#5A5A5A;
  font-family:"Manrope", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:1240px; margin:0 auto; padding:0 32px; }

.nav{ height:64px; }
.nav-co{ color:#0F0F0F; font-size:16px; font-weight:800; letter-spacing:.14em; }
.nav-links a{ color:#4A4A4A; font-size:13.5px; font-weight:500; }
.nav-links a:hover{ color:#0F0F0F; }
.nav-r a{ color:#4A4A4A; font-size:13.5px; font-weight:500; }
.nav-r .pill{ background:#0052FF; color:#fff; border-radius:9999px; padding:8px 18px; font-size:13px; }
.nav-r .pill:hover{ background:#0041CC; }
/* the little counter chip that sits left of their Connect button */
.nav-r .count{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:#0052FF; color:#fff;
  font-size:11px; font-weight:700;
}

.hero{ padding:44px 0 0; }
.badge{
  display:inline-block; background:#F4F4F4; border-radius:9999px;
  padding:7px 14px; font-size:12.5px; font-weight:600; color:#0F0F0F;
  margin-bottom:26px; text-decoration:none;
}
.badge em{ font-style:normal; color:#6B6B6B; font-weight:500; }
/* their hero headline is a modest 36px/600 with no tracking, not an oversized
   display line. matched to the live site, a touch larger for the longer copy. */
h1{ color:#0F0F0F; font-size:clamp(30px,3.4vw,40px); font-weight:600; letter-spacing:normal; line-height:1.12; margin-bottom:16px; }
.sub{ color:#5A5A5A; font-size:15.5px; max-width:38ch; margin-bottom:22px; }
.meta{ color:#6B6B6B; font-size:13px; margin-bottom:24px; }
.btn.ghost{
  border:1px solid #DEDEDE; color:#0F0F0F; border-radius:9999px; padding:10px 20px; font-weight:600;
}
.btn.ghost:hover{ border-color:#0052FF; color:#0052FF; }

/* the wave: their signature, drawn rather than imported */
.wave{ width:100%; height:auto; margin-top:-8px; }

/* their swap widget: centred card under the wave */
.swap-sec{ padding:64px 0 56px; }
/* every section heading matches hydrex.fi: flat 36px, weight 600, centred, no
   tracking. measured off the live site. */
.swap-sec h2, .trusted h2, .numbers h2, .onbase h2, .mech h2, .start h2, .aprchart h2{
  text-align:center; color:#0F0F0F; font-size:clamp(27px,3.4vw,36px);
  font-weight:600; letter-spacing:normal; line-height:1.12; margin-bottom:8px;
}
.swap-sec .n-sub, .trusted .n-sub{ text-align:center; color:#6B6B6B; font-size:14px; margin-bottom:32px; }
.swap{
  max-width:430px; margin:0 auto; background:#fff;
  border:1px solid #EDEDED; border-radius:16px; padding:14px;
  box-shadow:0 1px 2px rgba(15,15,15,.04);
}
.swap-side{ background:#FAFAFA; border-radius:12px; padding:14px 16px; }
.swap-top{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:#6B6B6B; font-weight:500; margin-bottom:8px;
}
.swap-max{ font-size:10px; letter-spacing:.08em; color:#0052FF; font-weight:700; }
.swap-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.swap-row b{ color:#0F0F0F; font-size:19px; font-weight:700; letter-spacing:-.02em; }
.tok{
  display:flex; align-items:center; gap:7px; background:#fff; border:1px solid #EDEDED;
  border-radius:9999px; padding:5px 12px 5px 6px; font-size:12.5px; font-weight:700; color:#0F0F0F;
}
.tok i{ width:18px; height:18px; border-radius:50%; background:#0052FF; display:block; }
.swap-bal{ font-size:11.5px; color:#6B6B6B; margin-top:7px; }
.swap-mid{ display:flex; justify-content:center; margin:-9px 0; position:relative; z-index:1; }
.swap-mid span{
  width:30px; height:30px; border-radius:50%; background:#fff; border:1px solid #EDEDED;
  display:flex; align-items:center; justify-content:center; color:#6B6B6B; font-size:13px;
}
.swap-cta{
  display:block; margin-top:12px; background:#0052FF; color:#fff; text-align:center;
  border-radius:10px; padding:13px; font-weight:700; font-size:14px; text-decoration:none;
}
.swap-cta:hover{ background:#0041CC; }

/* their trusted-logo band, as words rather than lifted marks */
.trusted{ background:#F7F7F7; padding:56px 0; }
.logos{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px 42px;
}
.logos a{
  font-size:19px; font-weight:800; letter-spacing:-.02em; color:#B4B4B4;
  text-decoration:none; transition:color .15s ease;
}
.logos a:hover{ color:#0F0F0F; }

/* their "Built On Base for Base." grid: square tiles, one big blue hero tile */
.onbase{ background:#fff; padding:64px 0 56px; }
.onbase h2 em{ font-style:normal; color:#0052FF; }
.btiles{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  max-width:680px; margin:0 auto;
}
.bt{
  background:#F7F7F7; border-radius:12px; min-height:88px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  text-align:center; padding:12px 8px; text-decoration:none;
}
.bt b{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#0F0F0F; font-weight:700; }
.bt span{ font-size:10.5px; color:#6B6B6B; }
/* the big blue tile theirs centres the grid on */
.bt.big{
  grid-column:span 2; grid-row:span 2; background:#0052FF; min-height:auto;
}
.bt.big b{ color:#fff; font-size:15px; letter-spacing:-.01em; text-transform:none; }
.bt.big span{ color:#C8D8FF; font-size:11.5px; }
.bt.big:hover{ background:#0041CC; }
@media (max-width:560px){
  .btiles{ grid-template-columns:repeat(2,1fr); }
  .bt.big{ grid-column:span 2; grid-row:auto; min-height:88px; }
}

.numbers{ background:#F7F7F7; padding:56px 0 8px; }
.numbers .n-sub{ text-align:center; color:#6B6B6B; font-size:14px; margin-bottom:32px; }
.statrow{ grid-template-columns:repeat(4,1fr); }
.statrow-2{ margin-top:12px; }
.stat{
  background:#F4F4F4; border:1px solid rgba(216,218,224,.6); border-radius:12px; padding:16px 14px;
  display:flex; align-items:center; gap:14px;
}
.stat .ico{
  width:30px; height:30px; flex:none; border-radius:8px; background:#F4F4F4;
  display:flex; align-items:center; justify-content:center;
}
.stat .ico svg{ width:15px; height:15px; stroke:#0052FF; }
.stat span{ color:#32343C; font-size:12.5px; font-weight:500; margin-bottom:3px; line-height:1.35; }
.stat b{ color:#0F0F0F; font-size:19px; font-weight:700; letter-spacing:-.02em; }

/* their "Next-gen protocol mechanics." cards, with a pastel blob in one corner */
/* a real APR chart of my own Tropic Tools data, styled to the Hydrex look.
   static bar widths, no motion, so nothing to gate or freeze. */
.aprchart{ background:#F7F7F7; padding:84px 0; }
/* the subtitle carries the gap down to the bars so the block reads as one
   centered column, not a left-aligned title floating over centered bars */
.aprchart .n-sub{ text-align:center; color:#6B6B6B; font-size:14px; max-width:56ch; margin:0 auto 44px; }
.apr{ max-width:640px; margin:0 auto; }
.apr-row{ display:grid; grid-template-columns:180px 1fr 58px; align-items:center; gap:22px; margin-bottom:26px; }
.apr-row:last-child{ margin-bottom:0; }
.apr-lab{ font-size:13px; font-weight:600; color:#0F0F0F; text-align:right; }
.apr-track{ height:28px; background:#EAEAEA; border-radius:7px; overflow:hidden; }
.apr-fill{ display:block; height:100%; background:#0052FF; border-radius:7px; }
.apr-fill.mut{ background:#C3C9D4; }
.apr-val{ font-size:16px; font-weight:700; color:#0F0F0F; letter-spacing:-.02em; }
.apr-note{ max-width:560px; margin:44px auto 0; text-align:center; color:#6B6B6B; font-size:13px; line-height:1.6; }
.apr-note b{ color:#0052FF; font-weight:700; }
@media (max-width:560px){
  .aprchart{ padding:60px 0; }
  .apr-row{ grid-template-columns:104px 1fr 46px; gap:12px; margin-bottom:20px; }
  .apr-lab{ font-size:11.5px; }
  .apr-track{ height:24px; }
}

.mech{ background:#fff; padding:72px 0 64px; }
.mech h2{ margin-bottom:36px; }
.mgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:820px; margin:0 auto; }
.mcard{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid #EDEDED; border-radius:16px; padding:26px 24px;
}
.mcard::after{
  content:""; position:absolute; top:-30px; right:-30px; width:120px; height:120px;
  border-radius:50%; background:#DDE7FF; opacity:.6;
}
.mcard.mc-y::after{ background:#FFF0C4; }
.mcard.mc-g::after{ background:#C9F0E2; }
.mcard.mc-o::after{ background:#FFE0C7; }
.m-ico{ position:relative; z-index:1; display:block; width:26px; height:26px; margin-bottom:16px; }
.m-ico svg{ width:26px; height:26px; }
.mcard b{ position:relative; z-index:1; display:block; color:#0F0F0F; font-size:17px; font-weight:600; margin-bottom:8px; }
.mcard p{ position:relative; z-index:1; color:#5A5A5A; font-size:14px; line-height:1.6; max-width:38ch; }
.mech-more{ display:block; text-align:center; margin-top:32px; color:#0052FF; font-size:14px; font-weight:600; }
.mech-more:hover{ color:#0041CC; }
@media (max-width:640px){ .mgrid{ grid-template-columns:1fr; } }

/* their "Start Earning Now." call to action */
.start{ padding:80px 0; text-align:center; }
.start h2{ margin-bottom:10px; }
.start .n-sub{ text-align:center; color:#6B6B6B; font-size:15px; max-width:46ch; margin:0 auto 28px; }
.start-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.sb-primary{ background:#0052FF; color:#fff; border-radius:9999px; padding:13px 28px; font-weight:600; font-size:14.5px; }
.sb-primary:hover{ background:#0041CC; }
.sb-ghost{ border:1px solid #DEDEDE; color:#0F0F0F; border-radius:9999px; padding:13px 28px; font-weight:600; font-size:14.5px; }
.sb-ghost:hover{ border-color:#0052FF; color:#0052FF; }

/* their big blue footer, with a MATT FARROW watermark instead of theirs */
.hfoot{ position:relative; overflow:hidden; background:#0052FF; color:#C8D8FF; }
.hfoot-in{ display:grid; grid-template-columns:1.4fr 2fr; gap:48px; padding:56px 0 40px; position:relative; z-index:1; }
.hf-mark{
  font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size:15px; font-weight:600; letter-spacing:.04em; color:#fff; margin-bottom:18px;
}
.hf-brand p{ font-size:13px; line-height:1.65; color:#B7CBFF; max-width:44ch; margin-bottom:18px; }
.hf-soc{ display:flex; gap:18px; }
.hf-soc a{ color:#fff; font-size:13px; font-weight:500; }
.hf-soc a:hover{ color:#C8D8FF; }
.hf-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.hf-h{ color:#fff; font-size:13px; font-weight:600; margin-bottom:14px; }
.hf-col a{ display:block; color:#B7CBFF; font-size:13.5px; margin-bottom:10px; }
.hf-col a:hover{ color:#fff; }
/* constrained to the same column as .hfoot-in so it aligns, not full-bleed */
.hf-bar{
  position:relative; z-index:1;
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border-top:1px solid rgba(255,255,255,.18); padding:18px 32px 24px;
  font-size:12.5px; color:#B7CBFF;
}
.hf-bar a{ color:#fff; }
.hfoot .wrap{ position:relative; z-index:1; }
/* the oversized wordmark bleeding off the bottom, as theirs does */
.hf-watermark{
  position:absolute; left:0; right:0; bottom:-3vw; z-index:0;
  text-align:center; font-family:"Manrope", sans-serif; font-weight:800;
  font-size:15vw; line-height:.8; letter-spacing:-.03em;
  color:rgba(255,255,255,.10); pointer-events:none; white-space:nowrap;
}
@media (max-width:720px){
  .hfoot-in{ grid-template-columns:1fr; gap:32px; }
  .hf-cols{ grid-template-columns:1fr 1fr; }
  .hf-bar{ flex-direction:column; align-items:flex-start; gap:8px; }
}