/* =============================================
   StreamHub Website — exaktes App-Design + Mobile
   ============================================= */

:root {
    --primary:    #6366f1;
    --primary-h:  #4f46e5;
    --grad:       linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    --bg:         #09090b;
    --surface:    rgba(24,24,27,0.55);
    --surface-hi: rgba(39,39,42,0.85);
    --text:       #f8fafc;
    --muted:      #94a3b8;
    --border:     rgba(255,255,255,0.08);
    --border-hi:  rgba(255,255,255,0.18);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--bg);
    background-image:
        radial-gradient(ellipse 90% 60% at 65% -5%,  rgba(99,102,241,.20) 0%, transparent 60%),
        radial-gradient(ellipse 60% 55% at  5% 95%,  rgba(236,72,153,.14) 0%, transparent 60%),
        radial-gradient(ellipse 55% 45% at 95% 60%,  rgba(168,85,247,.12) 0%, transparent 55%);
    background-attachment: fixed;
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ---- HAMBURGER SIDEBAR ---- */
.hb-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
    z-index: 299;
    opacity: 0; pointer-events: none;
    transition: opacity .35s;
}
.hb-backdrop.hb-open { opacity: 1; pointer-events: auto; }

.hb-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(320px, 85vw);
    background: #0f0f12;
    border-right: 1px solid rgba(255,255,255,.08);
    border-radius: 0 24px 24px 0;
    z-index: 300;
    display: flex; flex-direction: column;
    transform: translateX(-110%);
    transition: transform .4s cubic-bezier(0.05, 0.7, 0.1, 1.0),
                box-shadow .4s ease;
    overflow: hidden;
}
.hb-sidebar.hb-open {
    transform: translateX(0);
    box-shadow: 16px 0 48px rgba(0,0,0,.8);
}

.hb-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
}
.hb-logo {
    display: flex; align-items: center; gap: .45rem;
    font-size: 1.25rem; font-weight: 300;
}
.hb-logo i { color: var(--primary); }
.hb-logo strong { font-weight: 700; }
.hb-close {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--muted);
    width: 34px; height: 34px;
    border-radius: 8px; cursor: pointer;
    font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s, transform .2s;
}
.hb-close:hover { background: rgba(255,255,255,.12); color: var(--text); transform: rotate(90deg); }

.hb-nav {
    flex: 1; overflow-y: auto;
    padding: 1rem .75rem;
    display: flex; flex-direction: column; gap: .2rem;
}
.hb-section-label {
    font-size: .68rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); opacity: .6;
    padding: .5rem .75rem .25rem;
    margin-top: .25rem;
}
.hb-item {
    display: flex; align-items: center; gap: .85rem;
    padding: .75rem .9rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--muted);
    transition: background .2s, color .2s, transform .18s;
    -webkit-tap-highlight-color: transparent;
}
.hb-item:hover { background: rgba(255,255,255,.06); color: var(--text); transform: translateX(4px); }
.hb-item-active { background: rgba(99,102,241,.12); color: var(--primary) !important; }
.hb-item-active .hb-item-icon { color: var(--primary); }
.hb-item-icon {
    width: 36px; height: 36px;
    background: rgba(255,255,255,.05);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; flex-shrink: 0;
    transition: background .2s;
}
.hb-item:hover .hb-item-icon { background: rgba(99,102,241,.15); }
.hb-item-text span { display: block; font-size: .9rem; font-weight: 600; color: var(--text); }
.hb-item-text small { display: block; font-size: .73rem; color: var(--muted); margin-top: .05rem; }
.hb-divider { height: 1px; background: rgba(255,255,255,.06); margin: .5rem 0; }
.hb-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,.06);
    display: flex; gap: 1.25rem;
    flex-shrink: 0;
}
.hb-footer span { font-size: .75rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; }
.hb-footer i { color: var(--primary); }

/* Smart download hint */
.smart-dl-hint {
    font-size: .78rem;
    color: var(--muted);
    margin-top: .5rem;
    display: flex; align-items: center; gap: .35rem;
    flex-wrap: wrap;
    min-height: 1.2rem;
}
.smart-dl-hint i { color: var(--primary); flex-shrink: 0; }
.smart-dl-hint a { color: #818cf8; text-decoration: underline; }
.smart-dl-hint a:hover { color: #c7c8ff; }

/* ---- NAV ---- */
.nav {
    position: fixed;
    top:0; left:0; right:0;
    z-index: 200;
    background: rgba(9,9,11,.88);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
}
.nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 62px;
    padding: 0 1.75rem;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.35rem;
    font-weight: 300;
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
}
.nav-logo i { color: var(--primary); font-size: 1.5rem; }
.nav-logo strong { font-weight: 700; }

.nav-left-group {
    display: flex; align-items: center; gap: .75rem;
}
.nav-burger {
    display: flex;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
    color: var(--text);
    width: 38px; height: 38px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.nav-burger:hover {
    background: rgba(255,255,255,.1);
    border-color: var(--border-hi);
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}
.nav-links a {
    color: var(--muted);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
    transition: color .2s;
}
.nav-links a:hover { color: var(--text); }
.nav-link-active {
    color: var(--text) !important;
    font-weight: 600 !important;
}
.nav-gh {
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
    color: var(--text) !important;
    padding: .4rem .95rem;
    border-radius: 8px;
}
.nav-gh:hover { background: rgba(255,255,255,.1) !important; }

/* ---- HERO ---- */
.hero {
    padding: 5.5rem 1.75rem 4rem;
    max-width: 1280px;
    margin: 0 auto;
    min-height: 100svh;
    display: flex;
    align-items: center;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
}

/* Hero text */
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(16,185,129,.1);
    border: 1px solid rgba(16,185,129,.3);
    color: #10b981;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .3rem .85rem;
    border-radius: 100px;
    margin-bottom: 1.4rem;
}
.tag-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
    animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
    0%,100% { opacity:1; }
    50% { opacity:.4; }
}
.hero-copy h1 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -.03em;
    margin-bottom: 1.25rem;
}
.h1-accent {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-copy p {
    color: var(--muted);
    font-size: 1rem;
    max-width: 460px;
    margin-bottom: 2rem;
    line-height: 1.75;
}
.hero-btns {
    display: flex;
    gap: .85rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}
.btn-hero-primary, .btn-hero-ghost {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.6rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.btn-hero-primary {
    background: var(--grad);
    color: white;
    box-shadow: 0 6px 20px rgba(99,102,241,.35);
}
.btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(99,102,241,.45); }
.btn-hero-web {
    background: rgba(16,185,129,.12);
    color: #6ee7b7;
    border: 1px solid rgba(16,185,129,.35);
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.6rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: transform .2s, background .2s;
}
.btn-hero-web:hover { background: rgba(16,185,129,.22); transform: translateY(-2px); }
.btn-hero-ghost {
    background: rgba(255,255,255,.05);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-hero-ghost:hover { background: rgba(255,255,255,.1); }

.hero-meta {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.hero-meta span {
    font-size: .8rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .35rem;
}
.hero-meta i { color: var(--primary); }

/* ---- APP MOCKUP ---- */
.hero-mockup { position: relative; }
.mockup-shell {
    background: #131316;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.13);
    box-shadow:
        0 32px 80px rgba(0,0,0,.7),
        0 0 0 1px rgba(99,102,241,.12),
        inset 0 1px 0 rgba(255,255,255,.06);
    overflow: hidden;
}
.mockup-bar {
    background: #0d0d10;
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: relative;
}
.mockup-dots {
    display: flex; gap: .38rem;
}
.mockup-dots span {
    width: 11px; height: 11px; border-radius: 50%;
}
.mockup-dots span:nth-child(1) { background:#ff5f57; }
.mockup-dots span:nth-child(2) { background:#febc2e; }
.mockup-dots span:nth-child(3) { background:#28c840; }
.mockup-url {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-size: .72rem; color: var(--muted);
}

/* Mockup inner navbar — clone of real app */
.mockup-nav {
    background: #131316;
    border-bottom: 1px solid var(--border);
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 46px;
    gap: .75rem;
}
.mockup-nav-l { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.m-logo { display:flex; align-items:center; gap:.3rem; font-size:.92rem; font-weight:300; white-space:nowrap; flex-shrink:0; }
.m-logo i { color: var(--primary); }
.m-logo strong { font-weight:700; }
.m-cats { display:flex; gap:.1rem; }
.m-cat { color:var(--muted); font-size:.7rem; padding:.25rem .55rem; border-radius:5px; white-space:nowrap; }
.m-cat.is-active { color:var(--text); background:rgba(39,39,42,.85); }
.mockup-nav-r { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.m-search {
    display:flex; align-items:center; gap:.4rem;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.06);
    border-radius:100px;
    padding:.28rem .75rem;
    font-size:.68rem; color:var(--muted);
    white-space:nowrap;
}
.m-iconbtn {
    background:var(--surface); border:1px solid var(--border);
    width:28px; height:28px; border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    font-size:.7rem; color:var(--muted);
}

/* Mockup content body */
.mockup-body {
    padding: 1rem 1.1rem .9rem;
    background: var(--bg);
    background-image: radial-gradient(circle at top right, rgba(99,102,241,.05), transparent 40%);
}
.m-sec-header {
    display:flex; justify-content:space-between; align-items:center;
    font-size:.78rem; font-weight:600; margin-bottom:.7rem;
}
.m-fire { color: var(--primary); }
.m-live-dot { color:#ef4444; font-size:.5rem; margin-right:.1rem; }
.m-count { font-size:.68rem; color:var(--muted); font-weight:400; }

/* Video Cards inside mockup */
.m-cards { display:grid; grid-template-columns:repeat(5,1fr); gap:.7rem; }
.m-card {
    background: rgba(24,24,27,.55);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    backdrop-filter:blur(4px);
}
.m-card:hover { border-color:var(--border-hi); }
.m-thumb {
    position:relative;
    padding-top:56.25%;
}
.m-arte { background:linear-gradient(145deg,#0d1b2a,#1b2838,#2a3f5f); }
.m-br   { background:linear-gradient(145deg,#001232,#003087,#1565c0); }
.m-swr  { background:linear-gradient(145deg,#3b0000,#7f0000,#b71c1c); }
.m-zdf  { background:linear-gradient(145deg,#1a0000,#6b0011,#b71c1c); }
.m-ard  { background:linear-gradient(145deg,#001a4d,#003087,#1976d2); }
.m-play {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:26px; height:26px;
    background:rgba(99,102,241,.85);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:.58rem;
    opacity:0; transition:opacity .2s;
}
.m-card:hover .m-play { opacity:1; }
.m-badge {
    position:absolute; bottom:4px; left:4px;
    font-size:.55rem; font-weight:700;
    padding:.12rem .35rem;
    border-radius:3px; color:white;
}
.m-dur, .m-live-badge {
    position:absolute;
    font-size:.55rem;
    padding:.12rem .35rem;
    border-radius:3px;
}
.m-dur { bottom:4px; right:4px; background:rgba(0,0,0,.7); }
.m-live-badge { top:4px; right:4px; background:#ef4444; font-weight:700; color:white; }
.m-info { padding:.5rem .55rem; }
.m-ch { font-size:.6rem; margin-bottom:.2rem; display:flex; align-items:center; gap:.3rem; }
.m-title { font-size:.65rem; font-weight:600; line-height:1.3; margin-bottom:.2rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.m-meta { font-size:.58rem; color:var(--muted); }

/* Live chips */
.m-live-chips { display:flex; gap:.45rem; flex-wrap:wrap; }
.m-chip {
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    padding:.22rem .6rem;
    border-radius:100px;
    font-size:.65rem;
    display:flex; align-items:center; gap:.3rem;
    color:var(--muted);
}
.m-chip-active {
    background:rgba(99,102,241,.15);
    border-color:rgba(99,102,241,.4);
    color:var(--text);
}
.chip-live { color:#ef4444; font-size:.45rem; }

.mockup-glow {
    position:absolute;
    bottom:-40px; left:50%; transform:translateX(-50%);
    width:80%; height:60px;
    background:rgba(99,102,241,.25);
    filter:blur(35px);
    pointer-events:none;
}

/* ---- STATS BAR ---- */
.stats-bar {
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    background:rgba(24,24,27,.4);
    backdrop-filter:blur(8px);
}
.stats-inner {
    max-width:900px; margin:0 auto;
    display:flex; align-items:center; justify-content:center;
    padding:1.75rem 2rem;
    gap:0;
}
.stat-item { text-align:center; flex:1; }
.stat-num {
    display:block;
    font-size:2rem; font-weight:800;
    background:var(--grad);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    line-height:1;
}
.stat-label { font-size:.78rem; color:var(--muted); margin-top:.25rem; display:block; }
.stat-div { width:1px; height:40px; background:var(--border); flex-shrink:0; margin:0 2rem; }

/* ---- SECTIONS ---- */
.section { padding:6rem 1.75rem; }
.section-inner { max-width:1280px; margin:0 auto; }

.sec-label {
    font-size:.75rem; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase;
    background:var(--grad);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    margin-bottom:.6rem;
}
.section h2 {
    font-size:clamp(1.7rem,3vw,2.4rem);
    font-weight:800; letter-spacing:-.02em;
    margin-bottom:3rem;
}

/* Features */
.features-sec { background:rgba(15,15,18,.6); border-top:1px solid var(--border); }
.feat-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.25rem;
}
.feat-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
    padding:1.75rem;
    backdrop-filter:blur(8px);
    transition:border-color .3s, transform .3s;
}
.feat-card:hover { border-color:rgba(99,102,241,.4); transform:translateY(-3px); }
.feat-icon {
    width:46px; height:46px;
    background:rgba(99,102,241,.15);
    color:var(--primary);
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; margin-bottom:1.1rem;
}
.feat-card h3 { font-size:1rem; margin-bottom:.5rem; }
.feat-card p { color:var(--muted); font-size:.9rem; line-height:1.65; }

/* Sender */
.sender-sec { border-top:1px solid var(--border); text-align:center; }
.sender-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:.65rem; }
.s-chip {
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    padding:.5rem 1.1rem;
    border-radius:100px;
    font-size:.88rem; font-weight:500;
    transition:all .2s;
}
.s-chip:hover { border-color:rgba(99,102,241,.5); background:rgba(99,102,241,.08); }
.s-chip-ard  { border-color:rgba(0,79,158,.4);  background:rgba(0,79,158,.08); }
.s-chip-zdf  { border-color:rgba(226,0,26,.3);  background:rgba(226,0,26,.07); }
.s-chip-arte { border-color:rgba(255,69,0,.35); background:rgba(255,69,0,.07); }
.s-chip-3sat { border-color:rgba(99,102,241,.3);background:rgba(99,102,241,.08); }

/* Download */
.download-sec { border-top:1px solid var(--border); }
.dl-sub { color:var(--muted); margin-top:-2rem; margin-bottom:3rem; }
.dl-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.25rem;
}
.dl-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding:1.75rem;
    display:flex;
    flex-direction:column;
    gap:.9rem;
    backdrop-filter:blur(8px);
}
.dl-card-main { border-color:rgba(99,102,241,.35); background:rgba(99,102,241,.06); }
.dl-card-soon { opacity:.75; }

.dl-card-top { display:flex; align-items:center; gap:.9rem; }
.dl-platform-icon {
    width:52px; height:52px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.6rem; flex-shrink:0;
}
.dl-ubuntu  { background:rgba(255,90,10,.12);  color:#ff5a0a; }
.dl-snap    { background:rgba(99,102,241,.15); color:#818cf8; }
.dl-android { background:rgba(56,176,0,.12);   color:#56c900; }
.dl-fdroid  { background:rgba(99,102,241,.12); color:#a78bfa; }

.dl-card h3 { font-size:1.05rem; font-weight:700; }
.dl-format { font-weight:400; color:var(--muted); font-size:.85rem; }
.dl-soon-tag {
    background:rgba(168,85,247,.2); border:1px solid rgba(168,85,247,.4);
    color:#c084fc; font-size:.7rem; font-weight:600;
    padding:.15rem .55rem; border-radius:100px; margin-left:.4rem;
}
.dl-compat { font-size:.75rem; color:var(--muted); margin-top:.15rem; }
.dl-card p { color:var(--muted); font-size:.88rem; line-height:1.6; }
.dl-code {
    background:rgba(0,0,0,.5);
    border:1px solid rgba(255,255,255,.07);
    border-radius:8px;
    padding:.55rem .85rem;
    font-size:.75rem;
    font-family:'Courier New',monospace;
    color:#7dd3fc;
    overflow-x:auto;
    white-space:nowrap;
}
.dl-btn {
    display:flex; align-items:center; gap:.75rem;
    padding:.75rem 1.1rem;
    border-radius:10px;
    font-weight:600; font-size:.88rem;
    text-decoration:none;
    margin-top:auto;
    transition:transform .2s, box-shadow .2s;
}
.dl-btn i { font-size:1.2rem; flex-shrink:0; }
.dl-btn span { display:block; line-height:1.2; }
.dl-btn small { font-size:.72rem; font-weight:400; color:rgba(255,255,255,.55); display:block; }
.dl-btn-deb {
    background:var(--grad); color:white;
    box-shadow:0 6px 18px rgba(99,102,241,.3);
}
.dl-btn-deb:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(99,102,241,.45); }
.dl-btn-snap {
    background:rgba(99,102,241,.15);
    border:1px solid rgba(99,102,241,.35);
    color:#c7c8ff;
}
.dl-btn-snap:hover { background:rgba(99,102,241,.25); }
.dl-btn-apk {
    background:rgba(56,176,0,.12);
    border:1px solid rgba(56,176,0,.35);
    color:#86efac;
}
.dl-btn-apk:hover { background:rgba(56,176,0,.22); }
.dl-btn-fdroid {
    background:rgba(168,85,247,.1);
    border:1px solid rgba(168,85,247,.3);
    color:#d8b4fe;
}
.dl-btn-fdroid:hover { background:rgba(168,85,247,.2); }
.dl-github-link { margin-top:2.5rem; text-align:center; }
.dl-github-link a {
    color:var(--muted); text-decoration:none;
    font-size:.88rem; display:inline-flex; align-items:center; gap:.5rem;
    transition:color .2s;
}
.dl-github-link a:hover { color:var(--text); }

/* Flatpak button */
.dl-flatpak { background:rgba(0,160,100,.12); color:#34d399; }
.dl-btn-flatpak {
    background:rgba(0,160,100,.1);
    border:1px solid rgba(0,160,100,.35);
    color:#6ee7b7;
}
.dl-btn-flatpak:hover { background:rgba(0,160,100,.2); }

/* "Alle Features ansehen" button */
.btn-features-more {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem 1.6rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    color: var(--text);
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
    transition: background .2s, border-color .2s, transform .2s;
}
.btn-features-more:hover {
    background: rgba(99,102,241,.12);
    border-color: rgba(99,102,241,.4);
    transform: translateY(-2px);
}

/* ---- FOOTER ---- */
.footer { border-top:1px solid var(--border); padding:2.5rem 1.75rem; }
.footer-inner { max-width:1280px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:.85rem; text-align:center; }
.footer-logo { display:flex; align-items:center; gap:.45rem; font-size:1.2rem; font-weight:300; }
.footer-logo i { color:var(--primary); }
.footer-logo strong { font-weight:700; }
.footer p { color:var(--muted); font-size:.82rem; }
.footer-links { display:flex; gap:1.5rem; }
.footer-links a { color:var(--muted); text-decoration:none; font-size:.82rem; display:flex; align-items:center; gap:.35rem; transition:color .2s; }
.footer-links a:hover { color:var(--text); }

/* ---- MOBILE ---- */
@media (max-width: 1024px) {
    .hero { padding-top: 5rem; min-height: auto; }
    .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
    .hero-copy h1 { font-size: 2.4rem; }
    .hero-copy p { max-width: 100%; }

    /* Hide some mockup cols on tablet */
    .m-cards { grid-template-columns: repeat(3,1fr); }
    .m-card:nth-child(4), .m-card:nth-child(5) { display:none; }
    .m-cats .m-cat:nth-child(n+4) { display:none; }
    .m-search { display:none; }
}

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

    .hero { padding-top: 4.5rem; padding-left:1.1rem; padding-right:1.1rem; }
    .hero-copy h1 { font-size:2rem; }
    .hero-btns { gap:.6rem; }
    .btn-hero-primary, .btn-hero-ghost { font-size:.88rem; padding:.7rem 1.2rem; }

    /* Mockup: hide on very small, or simplify */
    .m-cats { display:none; }
    .m-cards { grid-template-columns:repeat(2,1fr); }
    .m-card:nth-child(n+3) { display:none; }
    .m-live-chips .m-chip:nth-child(n+4) { display:none; }

    .stats-inner { flex-wrap:wrap; gap:1.5rem; }
    .stat-div { display:none; }
    .stat-item { flex:0 0 calc(50% - 1.5rem); }

    .dl-grid { grid-template-columns:1fr; }
    .feat-grid { grid-template-columns:1fr; }
}

@media (max-width: 420px) {
    .hero-copy h1 { font-size:1.7rem; }
    .mockup-shell { font-size:85%; }
    .m-cards { grid-template-columns:1fr 1fr; }
}