/* ==========================================================
   Spacing scale
   ----------------------------------------------------------
   Introduced for new homepage components going forward, so future
   additions pull from one consistent scale instead of one-off pixel
   values. Existing already-tuned components (coin-tools-card,
   bridge-promo-card) are left as-is for now to avoid re-shifting sizes
   that were just confirmed - they can be migrated to this scale later
   if wanted.
   ========================================================== */
:root{
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:24px;
    --space-6:32px;
    --space-7:48px;
}

/* ---------- Hero ---------- */
.site-hero{
    position:relative;
    padding:var(--space-7) 0 var(--space-6);
    text-align:center;
    overflow:hidden;
}
.site-hero:before{
    content:"";
    position:absolute;
    top:-120px;left:50%;
    width:640px;height:360px;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center,rgba(250,204,21,.14),transparent 65%);
    pointer-events:none;
}

.site-hero-badge{
    position:relative;z-index:1;
    display:inline-flex;align-items:center;gap:7px;
    padding:7px 16px;
    border-radius:999px;
    border:1px solid rgba(250,204,21,.35);
    background:rgba(250,204,21,.08);
    color:var(--yellow-400,#facc15);
    font-size:12.5px;font-weight:700;
    margin-bottom:var(--space-4);
}

.site-hero-title{
    position:relative;z-index:1;
    font-size:clamp(28px,4.2vw,46px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-0.5px;
    background:linear-gradient(135deg,#fff 40%,#facc15 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    max-width:760px;
    margin:0 auto var(--space-3);
}
.site-hero-sub{
    position:relative;z-index:1;
    color:#aab2c5;
    font-size:15px;
    line-height:1.7;
    max-width:620px;
    margin:0 auto var(--space-5);
}

.site-hero-chips{
    position:relative;z-index:1;
    display:flex;justify-content:center;flex-wrap:wrap;
    gap:10px;
    margin-bottom:var(--space-6);
}
.site-hero-chip{
    padding:7px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    color:#dfe3ec;
    font-size:12.5px;font-weight:600;
}

.site-hero-stats{
    position:relative;z-index:1;
    display:flex;
    justify-content:center;
    gap:var(--space-6);
    flex-wrap:wrap;
}
.site-hero-stat{display:flex;flex-direction:column;gap:2px}
.site-hero-stat strong{font-size:22px;font-weight:800;color:var(--yellow-400,#facc15)}
.site-hero-stat span{font-size:11.5px;color:#8b93a7;font-weight:600;text-transform:uppercase;letter-spacing:.04em}

@media(max-width:600px){
    .site-hero{padding:var(--space-6) 0 var(--space-5)}
    .site-hero-stats{gap:var(--space-5)}
    .site-hero-chip{font-size:11.5px;padding:6px 12px}
}

/* ---------- Nav menu (Tools / FAQ / About) ---------- */
.nav-content{position:relative}
.nav-menu{display:flex;align-items:center;gap:var(--space-6)}
.nav-link{
    color:#c3cad9;font-size:14px;font-weight:600;
    text-decoration:none;
    padding:6px 2px;
    position:relative;
    transition:color .18s ease;
}
.nav-link:hover{color:var(--yellow-400,#facc15)}
.nav-link:focus-visible{outline:2px solid #facc15;outline-offset:3px}
.nav-link:after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
    background:var(--yellow-400,#facc15);
    transform:scaleX(0);transform-origin:left;
    transition:transform .18s ease;
}
.nav-link:hover:after{transform:scaleX(1)}

.nav-toggle{
    display:none;
    align-items:center;justify-content:center;
    width:38px;height:38px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    color:#e5e7eb;
    cursor:pointer;
}
.nav-toggle:focus-visible{outline:2px solid #facc15;outline-offset:2px}

@media(max-width:768px){
    .nav-toggle{display:inline-flex}
    .nav-menu{
        position:absolute;top:calc(100% + 10px);right:0;left:0;
        flex-direction:column;align-items:stretch;gap:0;
        background:rgba(17,14,35,.98);
        border:1px solid rgba(255,255,255,.1);
        border-radius:14px;
        padding:var(--space-2);
        box-shadow:0 18px 40px rgba(0,0,0,.4);
        display:none;
    }
    .nav-menu.open{display:flex}
    .nav-link{padding:12px 14px;border-radius:8px}
    .nav-link:hover{background:rgba(255,255,255,.05)}
    .nav-link:after{display:none}
}

/* ---------- Collapsible code preview ---------- */
.code-wrap{
    position:relative;
    max-height:110px;
    overflow:hidden;
    transition:max-height .3s cubic-bezier(.2,.8,.2,1);
}
.code-wrap.expanded{max-height:3000px}

.code-fade{
    position:absolute;left:0;right:0;bottom:0;height:44px;
    background:linear-gradient(to bottom,transparent,rgba(11,14,23,.96) 85%);
    pointer-events:none;
    transition:opacity .2s ease;
}
.code-wrap.expanded .code-fade{opacity:0}

.code-toggle-btn{
    display:flex;align-items:center;justify-content:center;gap:6px;
    width:100%;
    padding:var(--space-2) var(--space-3);
    border:none;border-top:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.02);
    color:#9aa4bb;
    font-size:12.5px;font-weight:600;
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
}
.code-toggle-btn:hover{background:rgba(255,255,255,.05);color:#e5e7eb}
.code-toggle-btn:focus-visible{outline:2px solid var(--yellow-400,#facc15);outline-offset:-2px}
.code-toggle-btn svg{transition:transform .2s ease}
.code-toggle-btn.expanded svg{transform:rotate(180deg)}

/* ---------- Info card icons now use real SVGs instead of emoji ----------
   style.css's .info-icon{font-size:48px} was sized for an emoji glyph -
   this gives the SVG its own explicit sizing/centering instead of relying
   on font-size, which doesn't affect SVG dimensions at all. */
.info-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px}
.info-icon svg{width:26px;height:26px}

/* ---------- Lazy-loaded YouTube iframe ----------
   The real YouTube iframe (unchanged appearance/behavior - YouTube's
   own thumbnail rendering and native red play button) - only its src
   is deferred via IntersectionObserver (see the inline script), so
   cards far below the fold never trigger YouTube's heavy player bundle
   until the user actually scrolls near them. */
.yt-lazy-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}