:root {
    --nav-h: 64px;
    --bg: #0B0B0F;
    --elev: #131319;
    --elev2: #1A1B22;
    --text: #E8EAED;
    --muted: #B3B8C2;
    --line: #2A2B33;
    --accent: #FF2D2D;
    --biznes: #FFD166;
    --biznes-outline: #7A5E1A;
    --statystyki: #3ABFF8;
    --statystyki-outline: #0A5F86;
    --artykuly: #9CA3AF;
    --artykuly-outline: #5B616A;
    --polityka: #E84C72;
    --sport: #00D17A;
    --muzyka: #1E6BFF;
    --film: #FFE24D;
}

*,
*::before,
*::after {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    padding-top: var(--nav-h);
    margin: 0;
    font: 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text)
}

img {
    max-width: 100%;
    display: block
}

a {
    color: inherit;
    text-decoration: none
}

h1,
h2,
h3 {
    margin: 0 0 .5rem 0;
    line-height: 1.2
}

p {
    margin: .5rem 0 1rem
}

.container {
    width: min(1200px, 94vw);
    margin-inline: auto
}

header.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    backdrop-filter: saturate(140%) blur(10px);
    background: rgba(11, 11, 15, .7);
    border-bottom: 1px solid var(--line)
}

.nav__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    padding: .6rem .2rem
}

.brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    cursor: pointer;
}

.brand img {
    height: 34px;
    width: auto
}

.brand__name {
    font-weight: 800;
    letter-spacing: .5px
}

.menu {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap
}

.menu a {
    padding: .5rem .7rem;
    border-radius: .6rem;
    color: var(--muted)
}

.menu a.active,
.menu a:hover {
    color: #fff;
    background: var(--elev);
    outline: 1px solid #2d2f3c
}

.lang {
    display: flex;
    gap: .35rem;
    align-items: center
}

.lang button {
    background: var(--elev2);
    border: 1px solid var(--line);
    color: #fff;
    padding: .45rem .6rem;
    border-radius: .5rem;
    cursor: pointer
}

.lang button[aria-pressed="true"] {
    outline: 2px solid var(--accent)
}

.hero {
    position: relative;
    isolation: isolate;
    padding: 64px 0 40px;
    background:
        radial-gradient(1000px 500px at 80% 0%, rgba(255, 255, 255, .04), transparent 60%),
        radial-gradient(800px 400px at 10% 20%, rgba(122, 94, 26, .08), transparent 60%);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 24px;
    align-items: center
}

@media (max-width:900px) {
    .hero__grid {
        grid-template-columns: 1fr
    }
}

.hero__card {
    background: var(--elev2);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1rem;
    border-radius: .8rem;
    border: 1px solid var(--line);
    background: var(--elev);
    color: #fff;
    cursor: pointer;
    transition: .2s
}

.btn:hover {
    transform: translateY(-1px)
}

.btn--primary {
    background: var(--accent);
    border-color: #812020
}

.btn--ghost {
    background: transparent
}

section {
    scroll-margin-top: 72px;
    padding: 56px 0;
    border-top: 1px solid var(--line)
}

.section__title {
    font-size: 1.8rem;
    margin-bottom: .5rem
}

.section__lead {
    color: var(--muted);
    margin-bottom: 1rem
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

@media (max-width:900px) {
    .grid-3 {
        grid-template-columns: 1fr
    }
}

.card {
    background: var(--elev2);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px
}

.badge {
    display: inline-block;
    padding: .28rem .55rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .78rem
}

.badge--biznes {
    background: var(--biznes);
    color: #0B0B0F
}

.badge--statystyki {
    background: var(--statystyki);
    color: #0B0B0F
}

.badge--artykuly {
    background: var(--artykuly);
    color: #111827
}

.badge--polityka {
    background: var(--polityka);
}

.badge--sport {
    background: var(--sport);
    color: #111827
}

.badge--muzyka {
    background: var(--muzyka);
}

.badge--film {
    background: var(--film);
    color: #111827
}

.kpi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}

@media (max-width:900px) {
    .kpi {
        grid-template-columns: 1fr
    }
}

.kpi .tile {
    background: linear-gradient(180deg, rgba(58, 191, 248, .12), transparent 60%);
    border: 1px solid var(--statystyki-outline);
    border-radius: 14px;
    padding: 16px
}

.tile__n {
    font-size: 1.9rem;
    font-weight: 800
}

.tile__l {
    color: var(--muted)
}

footer {
    border-top: 1px solid var(--line);
    padding: 32px 0;
    color: var(--muted);
    text-align: center
}

html {
    scroll-behavior: smooth
}

/* Form extras */
.form-msg {
    padding: .75rem 1rem;
    border-radius: .6rem;
    border: 1px solid var(--line);
    display: none
}

.form-msg.ok {
    display: block;
    background: #0f3d2e
}

.form-msg.err {
    display: block;
    background: #3d0f17
}

.hp-wrap {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    width: 0;
    overflow: hidden
}