/* ─── Reset ─── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; overflow-x: hidden; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #070b12;
      color: #e9edf5;
      overflow-x: hidden;
      max-width: 100vw;
      line-height: 1.5;
      user-select: none;
      cursor: default;
    }

    /* ─── Background ─── */
    .bg {
      position: fixed; inset: 0; z-index: -1;
      background: linear-gradient(180deg, #0a0f18 0%, #090d16 55%, #070b12 100%);
      overflow: hidden;
    }
    .orb {
      position: absolute; border-radius: 50%;
      filter: blur(140px); pointer-events: none; will-change: transform;
      animation: float 12s ease-in-out infinite;
    }
    .o1 { width:680px;height:680px; background:rgba(111,195,255,0.17); top:-240px;left:-140px; animation-delay:0s; }
    .o2 { width:560px;height:560px; background:rgba(155,89,255,0.15);  top:-180px;right:-100px;animation-delay:-4s; }
    .o3 { width:500px;height:500px; background:rgba(247,147,26,0.12);  bottom:-80px;right:6%;  animation-delay:-7s; }
    .o4 { width:540px;height:540px; background:rgba(111,202,58,0.09);  bottom:-120px;left:3%; animation-delay:-2s; }
    @keyframes float {
      0%,100% { transform:translateY(0) scale(1); }
      40%      { transform:translateY(-44px) scale(1.04); }
      70%      { transform:translateY(22px) scale(0.96); }
    }

    /* ─── Nav ─── */
    nav {
      position: fixed; top:0;left:0;right:0; z-index:200;
      height: 60px;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 clamp(16px,4vw,52px);
      background: rgba(7,11,18,0.72);
      backdrop-filter: blur(24px);
      border-bottom: 1px solid rgba(255,255,255,0.055);
      transition: background 0.3s;
    }
    nav.opaque { background: rgba(7,11,18,0.96); }
    .nav-logo { display:flex;align-items:center;text-decoration:none; }
    .nav-logo img { height: 25px; }
    .nav-links { display:flex;align-items:center;gap:4px; }
    .nl {
      padding: 6px 14px; border-radius:999px;
      font-size:11px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;
      color:rgba(233,237,245,0.60); text-decoration:none;
      border: 1px solid transparent; transition: all 0.15s;
    }
    .nl:hover  { color:#6fc3ff; border-color:rgba(111,195,255,0.28); background:rgba(111,195,255,0.055); }
    .nl.on     { color:#6fc3ff; border-color:rgba(111,195,255,0.28); background:rgba(111,195,255,0.055); }
    .nav-btn {
      padding:7px 20px; border-radius:999px;
      font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
      color:#060a11; background:#6fca3a; text-decoration:none;
      box-shadow:0 0 18px rgba(111,202,58,0.28);
      transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    }
    .nav-btn:hover { background:#62b332; transform:translateY(-1px); box-shadow:0 0 32px rgba(111,202,58,0.44); }
    @media(max-width:680px){ .nav-links{display:none;} }

    /* ─── Layout ─── */
    .wrap { max-width:1100px; margin:0 auto; padding:0 clamp(16px,4vw,48px); }

    /* ─── Hero ─── */
    .hero {
      min-height:100vh; display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      text-align:center; padding:96px 16px 40px;
    }
    .badge {
      display:inline-flex; align-items:center; gap:7px;
      padding:5px 16px; border-radius:999px;
      font-size:10px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;
      color:#6fca3a; border:1px solid rgba(111,202,58,0.36); background:rgba(111,202,58,0.07);
      margin-bottom:28px;
      opacity:0; animation:up .6s ease .1s forwards;
    }
    .bdot { width:6px;height:6px;border-radius:50%;background:#6fca3a; }

    h1.hero-title {
      font-size: clamp(40px,8vw,88px);
      font-weight:800; letter-spacing:-0.028em; line-height:1.03;
      margin-bottom:22px;
      opacity:0; animation:up .75s ease .25s forwards;
    }
    .c-cyan   { color:#6fc3ff; }
    .c-green  { color:#6fca3a; }
    .c-purple { color:#9b59ff; }
    .c-orange { color:#f7931a; }

    .hero-sub {
      font-size:clamp(15px,2vw,19px); color:rgba(233,237,245,.58);
      max-width:520px; line-height:1.62; margin-bottom:42px;
      opacity:0; animation:up .75s ease .40s forwards;
    }
    .hero-sub b { color:rgba(233,237,245,.88); font-weight:600; }

    .hero-btns {
      display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
      margin-bottom:70px;
      opacity:0; animation:up .75s ease .54s forwards;
    }
    .btn-g {
      padding:13px 28px; border-radius:999px;
      font-size:14px;font-weight:700;color:#060a11;background:#6fca3a;
      text-decoration:none; box-shadow:0 0 28px rgba(111,202,58,0.30);
      transition:background .15s,transform .1s,box-shadow .15s;
    }
    .btn-g:hover { background:#62b332;transform:translateY(-2px);box-shadow:0 0 46px rgba(111,202,58,0.46); }
    .btn-o {
      padding:13px 28px; border-radius:999px;
      font-size:14px;font-weight:600;color:rgba(233,237,245,.82);
      background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);
      text-decoration:none; transition:all .15s;
    }
    .btn-o:hover { background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);transform:translateY(-2px); }

    @keyframes up {
      from{opacity:0;transform:translateY(24px)}
      to  {opacity:1;transform:none}
    }

    /* ─── Preview Window ─── */
    .preview-wrap {
      width:100%;max-width:900px;margin:0 auto;
      opacity:0;transform:translateY(34px) scale(0.97);
      animation:appear 1s ease .72s forwards; position:relative;
      -webkit-mask-image:linear-gradient(to bottom, black 40%, transparent 88%);
      mask-image:linear-gradient(to bottom, black 40%, transparent 88%);
    }
    @keyframes appear { to{opacity:1;transform:none} }
    .pw {
      background:rgba(11,15,24,0.90); border:1px solid rgba(255,255,255,0.12);
      border-radius:18px; overflow:hidden; backdrop-filter:blur(20px);
      box-shadow: 0 4px 50px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.035) inset;
    }
    .pchrome {
      display:flex;align-items:center;gap:7px;
      padding:12px 18px; background:rgba(255,255,255,.018);
      border-bottom:1px solid rgba(255,255,255,.055);
    }
    .cd{width:11px;height:11px;border-radius:50%;}
    .cr{background:#ff5f57;}.cy{background:#febc2e;}.cg{background:#28c840;}
    .curl {
      margin-left:14px; font-size:10px; color:rgba(255,255,255,.28);
      background:rgba(255,255,255,.04); padding:3px 14px;
      border-radius:999px; border:1px solid rgba(255,255,255,.07); letter-spacing:.02em;
    }

    /* ─── Mini App UI ─── */
    .app { padding:0; }

    /* Top nav bar */
    .app-nav {
      display:flex;align-items:center;justify-content:space-between;
      padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.06);
      background:rgba(7,11,18,.60);
    }
    .app-logo { height:18px;opacity:.90; }
    .app-navlinks { display:flex;gap:2px; }
    .anl {
      padding:4px 10px;border-radius:5px;
      font-size:8px;font-weight:500;
      color:rgba(233,237,245,.42);
    }
    .anl.on {
      color:#e9edf5;background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.14);font-weight:700;
    }
    .anl.up { color:#6fca3a;font-weight:700; }   /* mirrors the real green Upgrade link */
    .app-logout {
      padding:4px 10px;border-radius:5px;
      font-size:8px;font-weight:700;color:#fff;background:#dc2626;
    }

    /* Portfolio card */
    .pf-card {
      margin:12px 12px 0;
      border-radius:10px;border:1px solid rgba(255,255,255,.10);
      background:rgba(14,22,34,.70);overflow:hidden;
    }
    .pf-card-top {
      display:flex;align-items:center;justify-content:space-between;
      padding:10px 14px 8px;
    }
    .pf-card-title {
      display:flex;align-items:center;gap:6px;
      font-size:14px;font-weight:700;color:#e9edf5;
    }
    .pf-plus {
      width:16px;height:16px;border-radius:50%;
      background:#6fca3a;color:#060a11;
      display:flex;align-items:center;justify-content:center;
      font-size:11px;font-weight:800;line-height:1;
    }
    .pf-total-right { text-align:right; }
    .pf-total-label { font-size:9px;color:rgba(255,255,255,.38);font-weight:500; }
    .pf-total-val { font-size:16px;font-weight:800;letter-spacing:-.02em;color:#e9edf5; }
    .pf-total-chg { font-size:9px;font-weight:600;color:#ff5f57;margin-top:1px; }

    /* Chart area */
    .pf-chart { height:80px;position:relative; }
    .pf-chart svg { width:100%;height:100%; }
    .pf-usd-badge {
      position:absolute;bottom:10px;left:14px;
      padding:2px 8px;border-radius:4px;
      font-size:8px;font-weight:600;color:rgba(233,237,245,.70);
      background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
    }

    /* Account card inside portfolio */
    .acc-card {
      margin:8px 12px;
      border-radius:8px;border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.02);overflow:hidden;
    }
    .acc-hdr {
      display:flex;align-items:center;justify-content:space-between;
      padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.06);
      gap:8px;
    }
    .acc-name {
      display:flex;align-items:center;gap:5px;
      font-size:9px;font-weight:700;color:rgba(233,237,245,.80);
      min-width:0;
    }
    .acc-addr {
      font-size:8px;color:rgba(255,255,255,.35);font-weight:400;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;
    }
    .acc-refreshed { font-size:8px;color:rgba(255,255,255,.35);white-space:nowrap; }
    .acc-sparkline { flex-shrink:0; }
    .acc-sparkline svg { display:block; }
    .acc-val-col { text-align:right;flex-shrink:0; }
    .acc-val { font-size:13px;font-weight:800;letter-spacing:-.02em;color:#e9edf5; }
    .acc-chg { font-size:8px;font-weight:600;color:#ff5f57;margin-top:1px; }

    /* Assets section */
    .assets-sec { padding:8px 12px 10px; }
    .assets-hdr {
      display:flex;align-items:center;justify-content:space-between;
      margin-bottom:8px;
    }
    .assets-lbl { font-size:10px;font-weight:700;color:#e9edf5; }
    .assets-total { font-size:9px;color:rgba(233,237,245,.50);font-weight:500; }

    /* Chain bar grid - matches real app layout (All tile + chains, 4 across) */
    .chain-bar {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:5px;margin-bottom:8px;
    }
    .chain-bar-all {
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
      padding:5px 8px;border-radius:6px;
      border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
    }
    .chain-bar-all-lbl { font-size:8px;font-weight:700;color:rgba(233,237,245,.75); }
    .chain-bar-all-val { font-size:9px;font-weight:700;color:#e9edf5; }
    .cbt {
      display:flex;align-items:center;gap:5px;
      padding:5px 8px;border-radius:6px;
      border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);
      min-width:0;
    }
    .cbt img { width:13px;height:13px;flex-shrink:0; }
    .cbt-inner { display:flex;flex-direction:column;flex:1;min-width:0; }
    .cbt-name { font-size:7px;font-weight:600;color:rgba(233,237,245,.70);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .cbt-val  { font-size:8px;font-weight:700;color:#e9edf5; }
    .cbt-pct  { font-size:7px;color:rgba(233,237,245,.40);flex-shrink:0; }
    .cbt-eth  { border-color:rgba(111,195,255,.28);background:rgba(111,195,255,.04); }
    .cbt-sol  { border-color:rgba(155,89,255,.28); background:rgba(155,89,255,.04); }
    .cbt-btc  { border-color:rgba(247,147,26,.28); background:rgba(247,147,26,.04); }

    /* Asset table */
    .asset-tbl { width:100%;border-collapse:collapse; }
    .asset-tbl thead th {
      font-size:8px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
      color:rgba(233,237,245,.35);padding:0 0 5px;text-align:left;
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .asset-tbl thead th:not(:first-child) { text-align:right; }
    .asset-tbl tbody tr { border-bottom:1px solid rgba(255,255,255,.045); }
    .asset-tbl tbody tr:last-child { border-bottom:none; }
    .asset-tbl tbody td { padding:5px 0;font-size:9px; }
    .asset-tbl tbody td:not(:first-child) { text-align:right; }
    .at-token { display:flex;align-items:center;gap:5px; }
    .at-token-icon {
      width:16px;height:16px;border-radius:50%;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
      font-size:8px;font-weight:700;object-fit:cover;
    }
    .at-sym { font-size:9px;font-weight:700;color:#e9edf5; }
    .at-chain { display:flex;align-items:center;gap:4px;justify-content:flex-end; }
    .at-chain img { width:10px;height:10px; }
    .at-chain span { font-size:8px;color:rgba(233,237,245,.55); }
    .at-price  { font-size:9px;color:rgba(233,237,245,.65); }
    .at-amount { font-size:9px;color:rgba(233,237,245,.55); }
    .at-usdval { font-size:9px;font-weight:600;color:#e9edf5; }

    .v-green { color:#57d657; } .v-cyan { color:#6fc3ff; } .v-orange { color:#f7931a; }

    /* ─── Divider ─── */
    hr.div {
      border:none;height:1px;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 30%,rgba(255,255,255,.08) 70%,transparent);
    }

    /* ─── Section ─── */
    .sec { padding:clamp(60px,8vw,108px) 0; }
    .sec-label {
      font-size:10px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
      color:#6fca3a;margin-bottom:13px;
    }
    .sec-title {
      font-size:clamp(26px,4.5vw,46px);font-weight:800;letter-spacing:-.022em;
      line-height:1.1;margin-bottom:14px;
    }
    .sec-sub { font-size:15px;color:rgba(233,237,245,.52);line-height:1.65;max-width:480px; }

    /* ─── Stats ─── */
    .stats-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center; }
    @media(max-width:580px){
      .stats-grid{grid-template-columns:repeat(2,1fr);row-gap:30px;}
      .stat-item::after{display:none;}   /* drop stray vertical rules in the 2×2 grid */
    }
    .stat-item { position:relative;padding:0 20px; }
    .stat-item:not(:last-child)::after {
      content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
      width:1px;height:52px;background:rgba(255,255,255,.10);
    }
    .sv {
      font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.025em;
      background:linear-gradient(135deg,#6fc3ff 0%,#9b59ff 100%);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
      line-height:1;
    }
    .sl { font-size:12px;color:rgba(233,237,245,.40);margin-top:6px;letter-spacing:.02em; }

    /* ─── Chains ─── */
    .chains-row { display:flex;flex-wrap:wrap;gap:10px;justify-content:center; }
    .cc {
      display:flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;
      font-size:13px;font-weight:600;color:rgba(233,237,245,.72);
      border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);
      transition:all .22s; cursor:default;
    }
    .cc img { width:20px;height:20px;flex-shrink:0; }
    .cc:hover { transform:translateY(-4px); }
    [dc="eth"]:hover  { border-color:rgba(111,195,255,.55);background:rgba(111,195,255,.08);color:#6fc3ff;box-shadow:0 8px 28px rgba(111,195,255,.18); }
    [dc="sol"]:hover  { border-color:rgba(155,89,255,.55); background:rgba(155,89,255,.08); color:#9b59ff;box-shadow:0 8px 28px rgba(155,89,255,.18); }
    [dc="btc"]:hover  { border-color:rgba(247,147,26,.55); background:rgba(247,147,26,.08); color:#f7931a;box-shadow:0 8px 28px rgba(247,147,26,.18); }
    [dc="l2"]:hover   { border-color:rgba(111,195,255,.42);background:rgba(111,195,255,.06);color:#6fc3ff;box-shadow:0 8px 20px rgba(111,195,255,.12); }
    [dc="op"]:hover   { border-color:rgba(255,4,32,.55);   background:rgba(255,4,32,.07);   color:#ff0420;box-shadow:0 8px 24px rgba(255,4,32,.30); }
    [dc="linea"]:hover{ border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.04);color:#e9edf5;box-shadow:0 8px 20px rgba(0,0,0,.50); }
    [dc="base"]:hover { border-color:rgba(0,82,255,.50);   background:rgba(0,82,255,.07);   color:#4d8eff;box-shadow:0 8px 24px rgba(0,82,255,.28); }
    [dc="monad"]:hover{ border-color:rgba(162,89,255,.50); background:rgba(162,89,255,.07); color:#a259ff;box-shadow:0 8px 24px rgba(162,89,255,.28); }
    [dc="poly"]:hover { border-color:rgba(155,89,255,.42); background:rgba(155,89,255,.06); color:#9b59ff;box-shadow:0 8px 20px rgba(155,89,255,.12); }
    [dc="bnb"]:hover  { border-color:rgba(247,147,26,.42); background:rgba(247,147,26,.06); color:#f7931a; box-shadow:0 8px 20px rgba(247,147,26,.18); }
    [dc="avax"]:hover { border-color:rgba(255,80,80,.42);  background:rgba(255,80,80,.06);  color:#ff5f57; box-shadow:0 8px 20px rgba(255,80,80,.18); }

    /* Chain family tags */
    .chain-family-label {
      font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
      color:rgba(233,237,245,.30);margin:0 auto 10px;text-align:center;width:100%;
    }

    /* ─── Features ─── */
    .feat-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
    @media(max-width:800px){.feat-grid{grid-template-columns:repeat(2,1fr);}}
    @media(max-width:520px){.feat-grid{grid-template-columns:1fr;}}

    /* "What we track" trio (Chains section) — collapses cleanly on small screens */
    .track-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:780px;margin:0 auto; }
    @media(max-width:720px){.track-grid{grid-template-columns:repeat(2,1fr);max-width:520px;}}
    @media(max-width:520px){.track-grid{grid-template-columns:1fr;max-width:360px;}}
    .fc {
      padding:26px 22px; border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(11,15,24,.74); backdrop-filter:blur(10px);
      transition:all .25s; position:relative; overflow:hidden;
    }
    .fc::before {
      content:'';position:absolute;inset:0;
      background:linear-gradient(145deg,var(--fc,rgba(111,195,255,.04)) 0%,transparent 55%);
      opacity:0;transition:opacity .25s;
    }
    .fc:hover { transform:translateY(-5px);border-color:rgba(255,255,255,.14);box-shadow:0 16px 50px rgba(0,0,0,.35); }
    .fc:hover::before { opacity:1; }
    .fi {
      width:46px;height:46px;border-radius:12px;
      display:flex;align-items:center;justify-content:center;
      font-size:21px; margin-bottom:18px;
    }
    .ft { font-size:15px;font-weight:700;margin-bottom:9px;line-height:1.25; }
    .fd { font-size:13px;color:rgba(233,237,245,.52);line-height:1.6; }
    .fd code {
      font-family:monospace;font-size:11px;
      background:rgba(255,255,255,.07);padding:1px 5px;border-radius:3px;
      color:rgba(233,237,245,.75);
    }

    /* ─── Position Types ─── */
    .pos-types { display:flex;flex-wrap:wrap;gap:8px;margin-top:18px; }
    .pt {
      padding:4px 12px;border-radius:999px;font-size:11px;font-weight:600;
      border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);
      color:rgba(233,237,245,.65);
    }
    .pt.lending { border-color:rgba(111,195,255,.35);color:#6fc3ff;background:rgba(111,195,255,.06); }
    .pt.lp      { border-color:rgba(111,202,58,.35); color:#6fca3a;background:rgba(111,202,58,.06); }
    .pt.perp    { border-color:rgba(155,89,255,.35); color:#9b59ff;background:rgba(155,89,255,.06); }
    .pt.pred    { border-color:rgba(247,147,26,.35); color:#f7931a;background:rgba(247,147,26,.06); }
    .pt.stake   { border-color:rgba(87,214,87,.35);  color:#57d657;background:rgba(87,214,87,.06); }

    /* ── Protocol marquee ── */
    .proto-marquee-outer {
      overflow:hidden;
      -webkit-mask-image:linear-gradient(to right, transparent, #000 120px, #000 calc(100% - 120px), transparent);
      mask-image:linear-gradient(to right, transparent, #000 120px, #000 calc(100% - 120px), transparent);
      padding:8px 0;
    }
    .proto-marquee-track {
      display:flex; gap:14px; width:max-content;
      animation:proto-scroll 42s linear infinite;
    }
    .proto-marquee-track.rev {
      animation:proto-scroll-rev 36s linear infinite;
    }
    .proto-marquee-track:hover { animation-play-state:paused; }
    @keyframes proto-scroll     { from{transform:translateX(0)}   to{transform:translateX(-50%)} }
    @keyframes proto-scroll-rev { from{transform:translateX(-50%)} to{transform:translateX(0)} }
    .proto-card {
      display:flex;align-items:center;gap:12px;
      padding:14px 18px;border-radius:14px;
      border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);
      transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;
      flex-shrink:0; width:210px; cursor:default;
    }
    .proto-card img {
      width:36px;height:36px;border-radius:10px;flex-shrink:0;object-fit:cover;
    }
    .proto-card-inner { display:flex;flex-direction:column;min-width:0; }
    .proto-name { font-size:14px;font-weight:700;color:rgba(233,237,245,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .proto-type { font-size:11px;color:rgba(233,237,245,.35);margin-top:2px;font-weight:500; }
    .proto-card:hover {
      border-color:rgba(111,202,58,.4);background:rgba(111,202,58,.05);
      transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.32);
    }
    .proto-card:hover .proto-name { color:#6fca3a; }
    .proto-card:hover .proto-type { color:rgba(111,202,58,.55); }

    /* ─── Live Data Cards ─── */
    .live-row { display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:52px; }
    @media(max-width:640px){.live-row{grid-template-columns:1fr;}}
    .ldc {
      padding:22px;border-radius:14px;
      border:1px solid rgba(255,255,255,.08);background:rgba(11,15,24,.72);
      backdrop-filter:blur(10px);
    }
    .ldc-hdr {
      display:flex;align-items:center;gap:8px;margin-bottom:16px;
      padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06);
    }
    .ldc-hdr-icon {
      width:28px;height:28px;border-radius:8px;
      display:flex;align-items:center;justify-content:center;font-size:14px;
    }
    .ldc-title { font-size:12px;font-weight:700;color:rgba(233,237,245,.70); }
    .ldc-sub   { font-size:10px;color:rgba(233,237,245,.35);margin-top:1px; }
    .ldc-row {
      display:flex;align-items:center;justify-content:space-between;
      padding:8px 0;border-bottom:1px solid rgba(255,255,255,.045);
    }
    .ldc-row:last-child { border-bottom:none; }
    .ldc-row > div:last-child { text-align:right; }
    .ldc-name  { font-size:12px;font-weight:600;color:rgba(233,237,245,.72); }
    .ldc-meta  { font-size:10px;color:rgba(255,255,255,.32);margin-top:2px; }
    .ldc-value { font-size:13px;font-weight:700; }
    .pos  { color:#57d657; } .neg { color:#ff5f57; } .neu { color:#ffffff; }

    /* ─── Pipeline Diagram ─── */
    .pipeline {
      display:flex;align-items:center;justify-content:center;
      flex-wrap:wrap;gap:0;margin-top:64px;
    }
    .pipe-node {
      display:flex;flex-direction:column;align-items:center;
      padding:28px 28px;border-radius:16px;
      border:1px solid rgba(255,255,255,.09);background:rgba(11,15,24,.70);
      min-width:140px;text-align:center;
      transition:border-color .2s,background .2s;
    }
    .pipe-node:hover { border-color:rgba(111,202,58,.35);background:rgba(111,202,58,.04); }
    .pipe-icon { font-size:32px;margin-bottom:12px; }
    .pipe-label { font-size:13px;font-weight:700;color:rgba(233,237,245,.85); }
    .pipe-sub   { font-size:11px;color:rgba(233,237,245,.40);margin-top:4px; }
    .pipe-arrow {
      display:flex;align-items:center;padding:0 12px;
      color:rgba(255,255,255,.20);font-size:22px;
    }
    @media(max-width:640px){ .pipe-arrow{display:none;} .pipeline{gap:12px;} }

    /* ─── CTA ─── */
    .cta-sec { text-align:center;padding:0;position:relative;min-height:calc(100vh - 61px);display:flex;flex-direction:column;justify-content:center; }
    .cta-halo {
      position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      width:700px;height:500px;pointer-events:none;
      background:radial-gradient(ellipse,rgba(111,202,58,.10) 0%,transparent 65%);
    }
    .cta-title { font-size:clamp(30px,5.5vw,58px);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin-bottom:18px; }
    .cta-sub { font-size:15px;color:rgba(233,237,245,.52);margin-bottom:38px;max-width:420px;margin-left:auto;margin-right:auto;line-height:1.65; }

    /* ─── Footer ─── */
    footer { border-top:1px solid rgba(255,255,255,.06);padding:28px 0;font-size:12px;color:rgba(233,237,245,.32); }
    .foot-inner { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px; }
    .foot-left { display:flex;align-items:center;gap:18px;min-width:0; }
    .foot-logo { display:flex;align-items:center;flex:0 0 auto; }
    .foot-logo img { height:18px;opacity:.44; }
    .foot-copy { text-align:center;white-space:nowrap; }
    .foot-social { display:flex;gap:8px;align-items:center;justify-content:flex-end; }
    .foot-social__link { display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;background:rgba(233,237,245,.07);color:rgba(233,237,245,.38);transition:background .18s,color .18s;text-decoration:none; }
    .foot-social__link:hover { background:rgba(233,237,245,.13);color:rgba(233,237,245,.85); }
    .foot-links { display:flex;flex-wrap:wrap;gap:10px;align-items:center; }
    .foot-links a { color:rgba(233,237,245,.46);text-decoration:none; }
    .foot-links a:hover { color:rgba(233,237,245,.82); }
    /* Legal links in the copyright line — keep them white in every state so they
       never fall back to the browser-default blue (link) / purple (visited). */
    .foot-copy a,
    .foot-copy a:link,
    .foot-copy a:visited { color:rgba(233,237,245,.62);text-decoration:none; }
    .foot-copy a:hover,
    .foot-copy a:active { color:rgba(233,237,245,.92); }
    .foot-copy a:focus-visible { outline:2px solid rgba(111,202,58,.55);outline-offset:2px;border-radius:3px; }

    @media (max-width: 720px) {
      .foot-inner { grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px; }
      .foot-left { justify-content:center;flex-wrap:wrap;gap:12px 16px; }
      .foot-links { justify-content:center; }
      .foot-social { justify-content:center; }
    }

    /* ─── Scroll Reveal ─── */
    .r { opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease; }
    .r.in { opacity:1;transform:none; }

    /* ─── Health Factor Badge ─── */
    .hf-badge {
      display:inline-flex;align-items:center;gap:4px;
      padding:2px 8px;border-radius:999px;font-size:9px;font-weight:700;
    }
    .hf-green  { background:rgba(87,214,87,.15); color:#57d657; border:1px solid rgba(87,214,87,.30); }
    .hf-yellow { background:rgba(255,179,77,.15); color:#ffb34d; border:1px solid rgba(255,179,77,.30); }
    .hf-red    { background:rgba(255,43,43,.15);  color:#ff5f57; border:1px solid rgba(255,43,43,.30); }

    /* ─── Sparkline ticker ─── */
    .ticker {
      display:flex;align-items:center;gap:6px;
      padding:3px 10px;border-radius:6px;font-size:9px;font-weight:600;
      background:rgba(87,214,87,.10);color:#57d657;
      border:1px solid rgba(87,214,87,.20);
    }
    .ticker.down { background:rgba(255,95,87,.10);color:#ff5f57;border-color:rgba(255,95,87,.20); }

    /* ─── Range indicator ─── */
    .in-range  { color:#57d657;font-size:9px;font-weight:600; }
    .out-range { color:#ff5f57;font-size:9px;font-weight:600; }

    /* ─── DeFi Mockup Section ─── */
    .defi-card { margin:8px 12px 4px;border-radius:8px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.02);overflow:hidden; }
    .defi-card-hdr { display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-bottom:1px solid rgba(255,255,255,.06); }
    .defi-card-lbl { font-size:10px;font-weight:700;color:#e9edf5; }
    .defi-card-val { font-size:9px;color:rgba(233,237,245,.55);font-weight:500; }
    /* Protocol filter bar (reuses .chain-bar layout) */
    .proto-bar { display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:7px 12px 5px; }
    .proto-bar-all { grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border-radius:5px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04); }
    .pba-lbl { font-size:8px;font-weight:700;color:rgba(233,237,245,.70); }
    .pba-val { font-size:8px;font-weight:700;color:#e9edf5; }
    .ptile { display:flex;align-items:center;gap:4px;padding:4px 7px;border-radius:5px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);min-width:0; }
    .ptile-icon { width:14px;height:14px;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;object-fit:cover; }
    .ptile-inner { display:flex;flex-direction:column;flex:1;min-width:0; }
    .ptile-name { font-size:7px;font-weight:600;color:rgba(233,237,245,.60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
    .ptile-val { font-size:8px;font-weight:700;color:#e9edf5; }
    .ptile-pct { font-size:7px;color:rgba(233,237,245,.38);flex-shrink:0; }
    /* Protocol position card */
    .pp { margin:0 12px 6px;border-radius:7px;border:1px solid rgba(255,255,255,.08);background:rgba(14,22,34,.70);overflow:hidden; }
    .pp-hdr { display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.05); }
    .pp-name { display:flex;align-items:center;gap:5px; }
    .pp-icon { width:16px;height:16px;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;object-fit:cover; }
    .pp-lbl { font-size:9px;font-weight:700;color:rgba(233,237,245,.85); }
    .pp-badge { padding:1px 6px;border-radius:3px;font-size:7px;font-weight:700; }
    .pp-badge.lend { background:rgba(111,195,255,.12);color:#6fc3ff;border:1px solid rgba(111,195,255,.22); }
    .pp-badge.lp   { background:rgba(111,202,58,.12);color:#6fca3a;border:1px solid rgba(111,202,58,.22); }
    .pp-badge.perp { background:rgba(155,89,255,.12);color:#9b59ff;border:1px solid rgba(155,89,255,.22); }
    .pp-badge.pred { background:rgba(247,147,26,.12);color:#f7931a;border:1px solid rgba(247,147,26,.22); }
    .pp-stats { display:flex;gap:12px; }
    .pp-stat { text-align:right; }
    .pp-stat-lbl { font-size:6px;color:rgba(233,237,245,.35);text-transform:uppercase;letter-spacing:.04em; }
    .pp-stat-val { font-size:8px;font-weight:700;color:#e9edf5; }
    .pp-stat-val.g { color:#57d657; }
    /* Lending two-column grid */
    .lend-grid { display:grid;grid-template-columns:1fr 1fr; }
    .lend-col { padding:5px 10px 6px; }
    .lend-col+.lend-col { border-left:1px solid rgba(255,255,255,.05); }
    .lend-th,.lend-tr { display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:0; }
    .lend-th { font-size:7px;color:rgba(233,237,245,.30);font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:3px; }
    .lend-th>*:not(:first-child),.lend-tr>*:not(:first-child) { text-align:right; }
    .lend-tr { font-size:8px;color:rgba(233,237,245,.65);padding:2px 0; }
    .lsym { display:flex;align-items:center;gap:3px;font-weight:600;color:#e9edf5; }
    .lsym img { width:10px;height:10px;border-radius:50%; }
    .lapy { color:#57d657; } .ltot { font-weight:600;color:#e9edf5; }
    .no-borrow-txt { font-size:7px;color:rgba(233,237,245,.28);padding:5px 0; }
    /* Generic DeFi table */
    .dp-tbl { width:100%;border-collapse:collapse; }
    .dp-tbl thead th { font-size:7px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:rgba(233,237,245,.30);padding:4px 10px 3px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06); }
    .dp-tbl thead th:not(:first-child) { text-align:right; }
    .dp-tbl tbody td { font-size:8px;color:rgba(233,237,245,.65);padding:4px 10px;border-bottom:1px solid rgba(255,255,255,.04); }
    .dp-tbl tbody tr:last-child td { border-bottom:none; }
    .dp-tbl tbody td:not(:first-child) { text-align:right; }
    .dp-sym { display:flex;align-items:center;gap:3px;font-weight:600;color:#e9edf5; }
    .dp-sym img { width:11px;height:11px;border-radius:50%; }
    .dp-ico { width:11px;height:11px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:6px;font-weight:800;flex-shrink:0; }
    .dp-pos { color:#57d657; } .dp-neg { color:#ff5f57; }
    .wt-pair { display:flex;align-items:center;gap:2px;justify-content:flex-end; }
    .wt-pair .dp-ico { margin-left:-3px; }
    .show-more-link { text-align:center;padding:4px 0 3px;font-size:8px;color:rgba(233,237,245,.28); }

    /* ════════════════════════════════════════════════════════════
       MOBILE (≤600px)
       The hero "preview window" is a pixel-dense replica of the full
       desktop dashboard (6–8px text, multi-column mini tables). It is
       built for ~900px and is unreadable / cramped on a phone. On
       small screens we hide just the decorative mock — the hero
       headline, sub-copy and CTAs remain. Mirrors the app's existing
       pattern of hiding hero visuals on small screens
       (.home-hero-visual). Desktop (>600px) is unchanged.
       To revert: delete this block.
       ════════════════════════════════════════════════════════════ */
    @media (max-width: 600px) {
      .preview-wrap { display: none; }

      /* Merge the two chain rows (5 L1s + 6 L2s) into a single centered
         wrap so a lone chip (Polygon) flows to the bottom of the list
         instead of sitting alone between the two groups. */
      div:has(> .chains-row) {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
      }
      .chains-row { display: contents; }
    }