/* Homepage-specifieke stijlen (uit de vroegere inline <style> van index.php). */
        :root {
            color-scheme: dark;
            --bg: #090d0a;
            --panel: #121a14;
            --panel-2: #19231b;
            --green: #67df52;
            --green-dark: #348f32;
            --yellow: #f5d269;
            --text: #f6f8f6;
            --muted: #a9b6ab;
            --border: rgba(255,255,255,.09);
            --shadow: 0 22px 65px rgba(0,0,0,.42);
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            min-height: 100vh;
            overflow-x: hidden;
            color: var(--text);
            background:
                radial-gradient(circle at 15% 8%, rgba(72,172,61,.23), transparent 32rem),
                radial-gradient(circle at 88% 31%, rgba(245,210,105,.08), transparent 30rem),
                linear-gradient(180deg, #0e1510, var(--bg));
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -1;
            opacity: .05;
            background-image: linear-gradient(90deg,#fff 1px,transparent 1px),linear-gradient(#fff 1px,transparent 1px);
            background-size: 36px 36px;
            mask-image: linear-gradient(#000, transparent 85%);
        }
        a { color: inherit; }
        .wrap { width: min(1160px, calc(100% - 34px)); margin: 0 auto; }
        header { position: relative; z-index: 5; padding: 22px 0; }
        nav { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
        .brand { display: flex; align-items: center; gap: 13px; text-decoration: none; font-size: 1.08rem; font-weight: 950; letter-spacing: -.03em; }
        .brand img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 9px 20px rgba(72,172,61,.23)); }
        .nav-links { display: flex; align-items: center; gap: 24px; }
        .nav-links a { color: var(--muted); text-decoration: none; font-weight: 750; }
        .nav-links a:hover { color: var(--text); }
        .nav-join { padding: 10px 16px; border-radius: 11px; color: #11200f !important; background: var(--green); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
        .hero { display: grid; grid-template-columns: 1.18fr .82fr; gap: 50px; align-items: center; min-height: 650px; padding: 72px 0 110px; }
        .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid rgba(103,223,82,.25); border-radius: 999px; color: #a1f893; background: rgba(103,223,82,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
        .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(103,223,82,.11); }
        h1 { margin: 22px 0 18px; max-width: 760px; font-size: clamp(3.4rem, 7.5vw, 6.6rem); line-height: .91; letter-spacing: -.075em; }
        h1 span { color: var(--green); }
        .lead { max-width: 650px; margin: 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.22rem); line-height: 1.7; }
        .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
        .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 51px; padding: 0 20px; border: 1px solid var(--border); border-radius: 13px; color: var(--text); background: rgba(255,255,255,.045); text-decoration: none; font-weight: 900; transition: transform .18s ease, filter .18s ease, border-color .18s ease; }
        .button:hover { transform: translateY(-2px); border-color: rgba(103,223,82,.34); }
        .button.primary { border: 0; color: #10200e; background: var(--green); box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 12px 30px rgba(71,178,57,.18); }
        .copy-line { display: flex; align-items: center; gap: 13px; margin-top: 20px; color: var(--muted); font-size: .9rem; }
        .copy-ip { padding: 0; border: 0; color: #b4faaa; background: transparent; font: 850 1rem ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
        .server-card { position: relative; padding: 28px; overflow: hidden; border: 1px solid var(--border); border-radius: 26px; background: linear-gradient(150deg, rgba(27,41,30,.96), rgba(13,20,15,.96)); box-shadow: var(--shadow); }
        .server-card::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: rgba(103,223,82,.08); }
        .server-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
        .server-logo-wrap { position: relative; display: inline-block; }
        .server-logo { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 15px 28px rgba(0,0,0,.35)); }
        .server-favicon-badge { position: absolute; right: -6px; bottom: -4px; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--panel); background: #000; image-rendering: pixelated; }
        .status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 999px; font-size: .78rem; font-weight: 900; transition: color .2s ease, background-color .2s ease; }
        .status.online { color: #aaf99d; background: rgba(103,223,82,.1); }
        .status.offline { color: #ffb5ad; background: rgba(255,91,75,.1); }
        .status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
        .server-card h2 { margin: 23px 0 4px; font-size: 2rem; letter-spacing: -.045em; }
        .server-address { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
        .version-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted); font-family: Inter, sans-serif; font-size: .68rem; font-weight: 750; }
        .server-motd { margin: 10px 0 0; color: var(--muted); font-size: .85rem; font-style: italic; line-height: 1.5; }
        .counter-box strong.is-updating { animation: pop .35s ease; }
        @keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); color: #aaf99d; } 100% { transform: scale(1); } }
        .counter { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 25px; }
        .counter-box { padding: 17px; border: 1px solid var(--border); border-radius: 15px; background: rgba(0,0,0,.18); }
        .counter-box strong { display: block; font-size: 1.65rem; }
        .counter-box span { color: var(--muted); font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
        .section { padding: 92px 0; }
        .section-title { max-width: 680px; margin-bottom: 30px; }
        .section-title small { color: var(--green); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
        .section-title h2 { margin: 9px 0; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.06em; }
        .section-title p { margin: 0; color: var(--muted); line-height: 1.65; }
        .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .online-community { padding: 15px 0 85px; }
        .online-panel { padding: 27px; border: 1px solid var(--border); border-radius: 23px; background: linear-gradient(145deg, rgba(25,36,27,.94), rgba(14,21,16,.94)); box-shadow: var(--shadow); }
        .online-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
        .online-heading h2 { margin: 0; font-size: clamp(1.7rem,4vw,2.5rem); letter-spacing: -.045em; }
        .online-heading p { margin: 5px 0 0; color: var(--muted); }
        .online-count { color: #aaf99d; font-weight: 850; white-space: nowrap; }
        .online-heads { display: flex; flex-wrap: wrap; gap: 13px; }
        .online-player { display: grid; justify-items: center; gap: 7px; width: 70px; color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 750; }
        .online-player img { width: 52px; height: 52px; border-radius: 11px; background: #67df5214; image-rendering: pixelated; transition: transform .18s ease, box-shadow .18s ease; }
        .online-player span { width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
        .online-player:hover { color: var(--text); }
        .online-player:hover img { transform: translateY(-3px); box-shadow: 0 9px 22px #0008; }
        .online-private { margin: 0; color: var(--muted); }
        .feature { padding: 25px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(150deg, rgba(25,36,27,.92), rgba(14,21,16,.92)); }
        .feature-icon { font-size: 1.8rem; }
        .feature h3 { margin: 15px 0 8px; font-size: 1.25rem; }
        .feature p { margin: 0; color: var(--muted); line-height: 1.55; }
        .cta { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 38px; border: 1px solid rgba(103,223,82,.2); border-radius: 25px; background: linear-gradient(135deg, rgba(45,111,40,.27), rgba(18,27,20,.95)); box-shadow: var(--shadow); }
        .cta h2 { margin: 0 0 7px; font-size: clamp(1.75rem, 4vw, 2.6rem); letter-spacing: -.045em; }
        .cta p { margin: 0; color: var(--muted); }
        footer { margin-top: 90px; padding: 32px 0; border-top: 1px solid var(--border); color: var(--muted); }
        .footer-row { display: flex; justify-content: space-between; gap: 18px; }
        .toast { position: fixed; left: 50%; bottom: 24px; z-index: 10; transform: translate(-50%, 120px); padding: 12px 18px; border-radius: 12px; color: #10200f; background: var(--green); font-weight: 900; box-shadow: var(--shadow); transition: transform .25s ease; }
        .toast.show { transform: translate(-50%,0); }
        @media (max-width: 850px) {
            .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 45px; }
            .server-card { max-width: 620px; }
            .features { grid-template-columns: 1fr; }
            .cta { align-items: flex-start; flex-direction: column; }
        }
        @media (max-width: 590px) {
            .wrap { width: min(100% - 22px, 1160px); }
            .nav-links a:not(.nav-join) { display: none; }
            .brand span { display: none; }
            .hero { padding-bottom: 70px; }
            h1 { font-size: clamp(3.1rem, 18vw, 5.1rem); }
            .actions .button { width: 100%; }
            .server-card { padding: 21px; }
            .section { padding: 68px 0; }
            .cta { padding: 27px; }
            .footer-row { flex-direction: column; }
        }

/* Sparkline (spelers online, laatste 24 uur) */
.online-trend { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: .8rem; }
.online-trend .sparkline { flex: 1; max-width: 260px; height: 44px; }
.online-trend b { color: var(--text); }

/* Toegankelijkheid: minder beweging voor wie dat instelt */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}