/* ═══════════ SweepR Sweeper landing — aurora glass ═══════════
       Loaded AFTER bridge-core.css, which supplies the backdrop, the header,
       the hero type scale, .sec-head / .assure-* / .closer and the footer.
       Everything here is what the sweeper page adds on top: the live stat
       strip, the chain rail, the protocol grid, the step row and the support
       bubble. The accent on this page leans MINT (rescue) where the payment
       pages lean violet — same palette, different lead colour.
       ?v= is a cache buster; express.static sends no Cache-Control for .css,
       so bump it in landing.html whenever this file changes. */

    /* The header badge is baked into bridge-core as "Private Pay". This page is
       the other product, so it says so. */
    .logo-text::after{
      content:'Sweeper';color:var(--mint);
      border-color:rgba(52,224,176,.32);background:rgba(52,224,176,.08);
    }

    .sweep-nav{margin-left:auto}
    .sweep-launch{
      display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:14px;
      background:var(--grad);color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;
      white-space:nowrap;box-shadow:0 12px 30px rgba(139,92,246,.35);
      transition:transform .26s var(--ease),box-shadow .26s var(--ease);
    }
    .sweep-launch svg{width:15px;height:15px}
    .sweep-launch:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(139,92,246,.5)}

    /* ── Hero ── */
    .sweep-hero{padding:58px 0 10px}
    .sweep-hero h1{max-width:15ch}
    .sweep-hero p{max-width:56ch}
    .sweep-hero .hero-dot{background:var(--mint)}
    .sweep-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
    .cta-mint{background:linear-gradient(120deg,#34e0b0 0%,#22d3ee 55%,#8b5cf6 100%);box-shadow:0 14px 38px rgba(52,224,176,.3)}
    .cta-mint:hover{box-shadow:0 20px 50px rgba(52,224,176,.42)}

    /* ── Live stat strip ──
       Five numbers straight off /api/public-stats. Tabular figures so a value
       ticking over on the 15s refresh does not shuffle the row. */
    .sweep-stats{
      display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px;
      padding:24px 20px;border-radius:var(--r-lg);
      background:var(--glass-2);border:1px solid var(--line);
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    }
    .sweep-stat{text-align:center;position:relative}
    .sweep-stat+.sweep-stat::before{
      content:'';position:absolute;left:-7px;top:12%;height:76%;width:1px;background:var(--line);
    }
    .sweep-stat b{
      display:block;font-family:'Space Grotesk','Inter',sans-serif;
      font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.03em;
      font-variant-numeric:tabular-nums;
      background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    }
    .sweep-stat:first-child b{background:linear-gradient(120deg,#34e0b0,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    .sweep-stat>span{display:block;margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
    /* Lives in the label, not in the numeral: inside a background-clip:text
       element the dot loses its own fill. */
    .sweep-stat .live-dot{
      display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mint);
      margin-right:6px;vertical-align:middle;animation:pulseDot 2.4s infinite;
    }

    /* ── Chain rail ──
       One continuous marquee. The track holds the same set of logos twice, so
       translating it exactly -50% lands back on an identical frame and the loop
       is invisible. Pauses on hover so you can actually look at one. */
    .chain-rail{
      position:relative;overflow:hidden;margin-top:18px;padding:18px 0;
      border-radius:var(--r-lg);background:var(--glass-2);border:1px solid var(--line);
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
      mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    }
    /* .looping is added by the page script once it has cloned the set: without
       the clone, translating -50% would jump. */
    .chain-track{display:flex;align-items:center;gap:16px;width:max-content;margin:0 auto}
    .chain-track.looping{margin:0;animation:railScroll 52s linear infinite}
    .chain-rail:hover .chain-track{animation-play-state:paused}
    @keyframes railScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    .chain-coin{
      width:46px;height:46px;border-radius:50%;flex:0 0 auto;position:relative;
      display:flex;align-items:center;justify-content:center;
      background:var(--glass);border:1px solid var(--line);
      transition:transform .26s var(--ease),border-color .26s var(--ease),box-shadow .26s var(--ease);
    }
    .chain-coin img{width:30px;height:30px;border-radius:50%;position:relative;z-index:1}
    /* Shown when the remote logo 404s: the alt text's first letter, so a dead
       CDN leaves a coin rather than a hole. */
    .chain-coin::after{
      content:attr(data-sym);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
      font-size:15px;font-weight:700;color:var(--muted);
    }
    .chain-coin:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 12px 26px rgba(0,0,0,.45)}

    /* ── Sections ── */
    .sweep-section{margin-top:72px}
    .sweep-section .sec-kicker{color:var(--mint)}

    /* Protocol grid */
    .eco-grid{
      /* 100px lands on ten columns at the 1220px shell, so the twenty cards
         fill two rows exactly instead of leaving a ragged tail. */
      display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin-top:22px;
    }
    .eco-card{
      position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:10px;
      padding:18px 10px 14px;border-radius:var(--r-md);
      background:var(--glass-2);border:1px solid var(--line);
      transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
    }
    .eco-card::before{
      content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s var(--ease);pointer-events:none;
      background:radial-gradient(120px 80px at 50% 0%,var(--eco-color,var(--violet)),transparent 70%);
    }
    .eco-card:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--glass)}
    .eco-card:hover::before{opacity:.22}
    .eco-badge{
      width:40px;height:40px;border-radius:50%;position:relative;z-index:1;
      display:flex;align-items:center;justify-content:center;
      background:rgba(255,255,255,.05);border:1px solid var(--line);
    }
    .eco-badge img{width:26px;height:26px;border-radius:50%;position:relative;z-index:1}
    .eco-badge::after{
      content:attr(data-sym);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
      font-size:14px;font-weight:700;color:var(--muted);
    }
    .eco-card span{position:relative;z-index:1;font-size:12.5px;font-weight:600;color:var(--muted)}
    .eco-card:hover span{color:var(--ink)}

    /* Network pills under the grid */
    .net-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;justify-content:center}
    .net-pill{
      display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
      background:var(--glass-2);border:1px solid var(--line);
      font-size:12.5px;font-weight:600;color:var(--muted);transition:all .24s var(--ease);
    }
    .net-pill img{width:16px;height:16px;border-radius:50%}
    .net-pill:hover{color:var(--ink);border-color:var(--line-2);transform:translateY(-2px)}

    /* ── Four steps ──
       The hairline sits behind the numerals and stops at the first and last
       card, so it reads as a track rather than a border running off the edge. */
    .step-row{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
    .step-row::before{
      content:'';position:absolute;top:50px;left:12.5%;right:12.5%;height:1px;
      background:linear-gradient(90deg,rgba(52,224,176,.5),rgba(34,211,238,.5),rgba(139,92,246,.5));
      opacity:.45;
    }
    .step-card{
      position:relative;text-align:center;padding:26px 18px 22px;border-radius:var(--r-lg);
      background:var(--glass-2);border:1px solid var(--line);
      backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
      transition:transform .3s var(--ease),border-color .3s var(--ease);
    }
    .step-card:hover{transform:translateY(-4px);border-color:var(--line-2)}
    .step-num{
      width:46px;height:46px;margin:0 auto 14px;border-radius:15px;
      display:flex;align-items:center;justify-content:center;
      font-family:'Space Grotesk','Inter',sans-serif;font-size:19px;font-weight:700;color:#fff;
      background:var(--grad);box-shadow:0 10px 26px rgba(139,92,246,.34);
    }
    .step-card:nth-child(1) .step-num{background:linear-gradient(120deg,#34e0b0,#22d3ee);box-shadow:0 10px 26px rgba(52,224,176,.32)}
    .step-card h4{font-family:'Space Grotesk','Inter',sans-serif;font-size:15.5px;font-weight:700;letter-spacing:-.02em;margin-bottom:7px}
    .step-card p{font-size:13px;line-height:1.6;color:var(--muted)}

    /* ── Leaving-the-page wipe (kept from the old deck) ── */
    .page-transition{
      position:fixed;inset:0;z-index:9998;background:var(--bg);
      display:flex;align-items:center;justify-content:center;
      opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s var(--ease);
    }
    .page-transition.active{opacity:1;visibility:visible}
    .page-transition .logo-icon{width:56px;height:56px;border-radius:18px;animation:wipePulse 1s var(--ease) infinite alternate}
    .page-transition .logo-icon svg{width:28px;height:28px;stroke:#fff}
    @keyframes wipePulse{to{transform:scale(1.12)}}

    /* ── Support bubble ── */
    .help-bubble-container{position:fixed;bottom:20px;right:20px;z-index:1000;display:flex;align-items:center;gap:10px}
    .help-bubble-wrapper{position:relative;display:flex;align-items:center;gap:10px}
    .help-label{
      padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;
      background:var(--glass);border:1px solid var(--line);color:var(--muted);
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
      transition:opacity .5s var(--ease),transform .5s var(--ease);
    }
    .help-label.hidden{opacity:0;transform:translateX(16px);pointer-events:none}
    .help-bubble{
      display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
      background:var(--grad);box-shadow:0 12px 30px rgba(139,92,246,.42);
      transition:transform .26s var(--ease),box-shadow .26s var(--ease);
    }
    .help-bubble:hover{transform:scale(1.08);box-shadow:0 16px 38px rgba(139,92,246,.55)}
    .help-bubble svg{width:23px;height:23px;stroke:#fff;fill:none}
    .help-menu{
      position:absolute;bottom:58px;right:0;min-width:168px;padding:8px;border-radius:16px;
      background:rgba(11,13,24,.94);border:1px solid var(--line-2);box-shadow:var(--shadow);
      backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
      opacity:0;visibility:hidden;transform:translateY(10px) scale(.95);transition:all .22s var(--ease);
    }
    .help-bubble-container.open .help-menu{opacity:1;visibility:visible;transform:none}
    .help-menu-item{
      display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
      text-decoration:none;color:var(--ink);font-size:13px;font-weight:600;transition:background .16s var(--ease);
    }
    .help-menu-item:hover{background:rgba(255,255,255,.07)}
    .help-menu-item svg{width:20px;height:20px;flex-shrink:0}
    .help-menu-item.telegram svg{fill:#0088cc}
    .help-menu-item.discord svg{fill:#5865F2}

    /* ── Tablet ── */
    @media (max-width:1040px){
      .sweep-stats{grid-template-columns:repeat(3,1fr);gap:18px 12px}
      .sweep-stat+.sweep-stat::before{display:none}
      .step-row{grid-template-columns:repeat(2,1fr)}
      .step-row::before{display:none}
    }

    /* ── Phone ──
       The header folds to two rows (nav underneath), which is what
       bridge-chrome.js tucks away on the way down the page. */
    @media (max-width:780px){
      .header{flex-wrap:wrap;row-gap:12px}
      .sweep-nav{order:3;width:100%;justify-content:space-between;margin-left:0}
      .sweep-nav .nav-item{flex:1;justify-content:center;padding:11px 8px;font-size:13px;min-height:44px}
      .sweep-launch{margin-left:auto;padding:12px 18px;min-height:44px}
      .sweep-hero{padding:34px 0 4px}
      .sweep-hero p{font-size:15px}
      .sweep-cta{gap:10px}
      .sweep-cta .cta-primary,.sweep-cta .cta-ghost{width:100%;justify-content:center;min-height:52px}
      .sweep-cta .cta-primary:hover,.sweep-cta .cta-ghost:hover{transform:none}
      .sweep-cta .cta-primary:active,.sweep-cta .cta-ghost:active{transform:scale(.98)}
      .sweep-stats{grid-template-columns:repeat(2,1fr);gap:20px 12px;padding:20px 14px;margin-top:26px}
      .sweep-stat:last-child{grid-column:1/-1}
      .chain-coin{width:42px;height:42px}
      .chain-coin img{width:27px;height:27px}
      .sweep-section{margin-top:52px}
      .eco-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
      .eco-card{padding:14px 8px 12px}
      .eco-card:hover{transform:none}
      .eco-card:active{transform:scale(.97)}
      .step-card:hover,.chain-coin:hover,.net-pill:hover{transform:none}
      .help-bubble-container{bottom:calc(16px + env(safe-area-inset-bottom));right:16px}

      /* The two-row header keeps ~130px of a ~660px screen. bridge-chrome.js
         adds the class on the way down and drops it the moment you scroll up.
         The rule lives here because this page does not load bridge-mobile.css,
         which carries it for the payment pages. */
      .header{transition:transform .28s var(--ease),opacity .28s var(--ease);will-change:transform}
      .header.header-tucked{transform:translateY(calc(-100% - 20px));opacity:0;pointer-events:none}
    }
    @media (max-width:780px) and (prefers-reduced-motion:reduce){
      .header{transition:none}
    }
    @media (max-width:420px){
      .step-row{grid-template-columns:1fr}
      .sweep-nav .nav-item span{gap:6px}
    }

    @media (prefers-reduced-motion:reduce){
      .chain-track.looping{animation:none}
      .page-transition .logo-icon{animation:none}
      .sweep-stat .live-dot{animation:none}
    }