/* ==========================================================================
   MotorHub.sk – verejný web
   Tmavý "garage / motorsport" dizajn: čierna, off-white, oranžová z loga,
   masívne Anton písmo a rám s vertikálnym logom podľa merchu MotorHub.
   ========================================================================== */

@layer reset, base, layout, components, sections, utilities;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
    img, video { display: block; max-width: 100%; height: auto; }
    svg { flex-shrink: 0; }
    input, button, textarea, select { font: inherit; color: inherit; }
    button { cursor: pointer; }
    [hidden] { display: none !important; }
}

@layer base {
    :root {
        --bg: #0a0a0a;
        --bg-2: #111110;
        --surface: #151514;
        --surface-2: #1c1c1a;
        --line: rgb(244 241 234 / .12);
        --line-2: rgb(244 241 234 / .26);
        --text: #f4f1ea;
        --muted: rgb(244 241 234 / .66);
        --dim: rgb(244 241 234 / .44);
        --danger: #ff6b61;

        --container: 88rem;
        --gutter: clamp(1.125rem, 4vw, 3rem);
        --header-h: 4.75rem;
        --radius: 14px;
        --radius-lg: 22px;

        --fs-base: clamp(1rem, .97rem + .15vw, 1.0625rem);
        --fs-lg: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
        --fs-xl: clamp(1.375rem, 1.15rem + .9vw, 1.875rem);
        --fs-3xl: clamp(3.25rem, 1.6rem + 6.6vw, 8.5rem);
        --fs-hero: clamp(4.5rem, 1.25rem + 13.5vw, 15rem);

        --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        --tread: repeating-linear-gradient(118deg, transparent 0 18px, rgb(244 241 234 / .035) 18px 30px);

        color-scheme: dark;
        scrollbar-color: var(--orange) var(--bg);
    }

    html {
        scroll-padding-top: calc(var(--header-h) + 1rem);
    }

    @media (prefers-reduced-motion: no-preference) {
        html { scroll-behavior: smooth; }
        @view-transition { navigation: auto; }
    }

    body {
        min-height: 100svh;
        background: var(--bg);
        color: var(--text);
        font-family: var(--ff-body);
        font-size: var(--fs-base);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: clip;
    }

    /* Jemné filmové zrno cez celý web */
    body::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 100;
        pointer-events: none;
        background-image: var(--noise);
        opacity: .055;
    }

    body.menu-open { overflow: hidden; }

    h1, h2, h3, h4 { text-wrap: balance; }
    p, li { text-wrap: pretty; }
    a { color: inherit; }

    ::selection { background: var(--orange); color: var(--on-orange); }

    :focus-visible {
        outline: 2px solid var(--orange);
        outline-offset: 3px;
        border-radius: 4px;
    }

    main:focus { outline: none; }
}

/* ------------------------------------------------------------------ layout */
@layer layout {
    .container {
        width: min(100% - 2 * var(--gutter), var(--container));
        margin-inline: auto;
    }

    .section { padding-block: clamp(4.5rem, 10vw, 9rem); }
    .section--tight { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4.5rem, 8vw, 7rem); }

    .section__header {
        display: grid;
        gap: 1.25rem;
        max-width: 62rem;
        margin-bottom: clamp(2rem, 5vw, 3.75rem);
    }

    .section__header--row {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        justify-content: space-between;
        gap: 1rem 2rem;
        max-width: none;
    }

    .section__lead {
        max-width: 40ch;
        color: var(--muted);
        font-size: var(--fs-lg);
    }
}

/* -------------------------------------------------------------- components */
@layer components {
    .skip-link {
        position: fixed;
        top: .75rem;
        left: .75rem;
        z-index: 200;
        padding: .75rem 1.25rem;
        border-radius: 999px;
        background: var(--orange);
        color: var(--on-orange);
        font-weight: 700;
        text-decoration: none;
        transform: translateY(-200%);
        transition: transform .3s var(--ease);
    }
    .skip-link:focus { transform: none; }

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        font-family: var(--ff-mono);
        font-size: .75rem;
        font-weight: 500;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--muted);
    }

    .live-dot {
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: var(--orange);
        box-shadow: 0 0 0 0 rgb(237 108 5 / .7);
    }
    @media (prefers-reduced-motion: no-preference) {
        .live-dot { animation: pulse 2s infinite; }
    }

    /* Sekčný nadpis (01) NÁZOV */
    .section-heading {
        display: flex;
        align-items: flex-start;
        gap: .9rem;
    }
    .section-heading__index {
        padding-top: .55em;
        font-family: var(--ff-mono);
        font-size: .8rem;
        color: var(--orange);
        letter-spacing: .08em;
    }
    .section-heading__title {
        font-family: var(--ff-display);
        font-size: var(--fs-3xl);
        font-weight: 400;
        line-height: .86;
        text-transform: uppercase;
    }

    /* Tlačidlá */
    .btn {
        --btn-bg: transparent;
        --btn-fg: var(--text);
        --btn-bd: var(--line-2);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        min-height: 2.875rem;
        padding: .75rem 1.35rem;
        border: 1px solid var(--btn-bd);
        border-radius: 999px;
        background: var(--btn-bg);
        color: var(--btn-fg);
        font: 650 .9375rem/1 var(--ff-body);
        letter-spacing: .01em;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color .3s, border-color .3s, color .3s, box-shadow .3s, transform .3s var(--ease);
    }
    .btn svg { width: 1.15em; height: 1.15em; transition: transform .45s var(--ease); }
    .btn:hover svg { transform: translate(2px, -2px); }
    .btn:active { transform: scale(.97); }

    .btn--primary { --btn-bg: var(--orange); --btn-fg: var(--on-orange); --btn-bd: var(--orange); }
    .btn--primary:hover { --btn-bg: var(--orange-2); --btn-bd: var(--orange-2); box-shadow: 0 12px 34px -12px rgb(237 108 5 / .8); }
    .btn--outline:hover { --btn-bd: var(--text); --btn-bg: rgb(244 241 234 / .06); }
    .btn--lg { min-height: 3.5rem; padding: 1rem 1.8rem; font-size: 1rem; }
    .btn--sm { min-height: 2.5rem; padding: .55rem 1rem; font-size: .875rem; }
    .btn--block { width: 100%; }
    .btn[disabled], .btn.is-loading { opacity: .7; pointer-events: none; }

    .icon-btn {
        display: inline-grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        border: 1px solid var(--line-2);
        border-radius: 50%;
        background: transparent;
        color: var(--text);
        text-decoration: none;
        transition: background-color .25s, border-color .25s, color .25s, transform .3s var(--ease);
    }
    .icon-btn svg { width: 1.1rem; height: 1.1rem; }
    .icon-btn:hover { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }

    .link-arrow {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-family: var(--ff-mono);
        font-size: .8rem;
        font-weight: 500;
        letter-spacing: .12em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--text);
        padding-block: .35rem;
        background: linear-gradient(var(--orange) 0 0) 0 100% / 0 2px no-repeat;
        transition: background-size .45s var(--ease), color .25s;
    }
    .link-arrow svg { width: 1.1em; height: 1.1em; transition: transform .45s var(--ease); }
    .link-arrow:hover { background-size: 100% 2px; color: var(--orange); }
    .link-arrow:hover svg { transform: translateX(4px); }

    /* Omrvinky */
    .breadcrumbs ol {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        padding: 0;
        list-style: none;
        font-family: var(--ff-mono);
        font-size: .72rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--dim);
    }
    .breadcrumbs li + li::before { content: '/'; margin-right: .5rem; color: var(--line-2); }
    .breadcrumbs a { text-decoration: none; color: var(--muted); }
    .breadcrumbs a:hover { color: var(--orange); }
    .breadcrumbs [aria-current] { color: var(--text); }

    /* Stránkovanie */
    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .75rem;
        margin-top: clamp(3rem, 6vw, 5rem);
    }
    .pagination ol { display: flex; gap: .35rem; padding: 0; list-style: none; }
    .pagination__page, .pagination__gap {
        display: grid;
        place-items: center;
        min-width: 2.75rem;
        height: 2.75rem;
        padding-inline: .5rem;
        border-radius: 999px;
        font-family: var(--ff-mono);
        font-size: .85rem;
        text-decoration: none;
        color: var(--muted);
    }
    .pagination__page:hover { color: var(--text); background: var(--surface-2); }
    .pagination__page.is-current { background: var(--orange); color: var(--on-orange); font-weight: 700; }
    .pagination__arrow {
        display: grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        border: 1px solid var(--line-2);
        border-radius: 50%;
        color: var(--text);
    }
    .pagination__arrow:hover { background: var(--text); color: var(--bg); }
    .pagination__arrow svg { width: 1.1rem; height: 1.1rem; }

    .empty {
        display: grid;
        gap: .5rem;
        justify-items: center;
        padding: clamp(3rem, 8vw, 6rem) 1rem;
        border: 1px dashed var(--line-2);
        border-radius: var(--radius-lg);
        text-align: center;
        color: var(--muted);
    }
    .empty__title {
        font-family: var(--ff-display);
        font-size: clamp(2rem, 5vw, 3.25rem);
        line-height: 1;
        text-transform: uppercase;
        color: var(--text);
    }

    .preview-bar {
        position: fixed;
        bottom: 1rem;
        left: 50%;
        z-index: 90;
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: .5rem .5rem .5rem 1.25rem;
        border-radius: 999px;
        background: var(--orange);
        color: var(--on-orange);
        font-weight: 650;
        font-size: .9rem;
        box-shadow: 0 18px 40px -12px rgb(0 0 0 / .7);
        translate: -50% 0;
        white-space: nowrap;
    }
    .preview-bar a {
        padding: .5rem 1rem;
        border-radius: 999px;
        background: var(--bg);
        color: var(--text);
        text-decoration: none;
    }

    .toast-inline {
        font-family: var(--ff-mono);
        font-size: .72rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--orange);
    }
}

/* ------------------------------------------------------------------ header */
@layer components {
    .site-header {
        position: fixed;
        inset: 0 0 auto;
        z-index: 50;
        height: var(--header-h);
        border-bottom: 1px solid transparent;
        transition: background-color .35s, border-color .35s;
    }

    .site-header.is-scrolled {
        background: rgb(10 10 10 / .82);
        border-bottom-color: var(--line);
        -webkit-backdrop-filter: blur(16px) saturate(1.4);
        backdrop-filter: blur(16px) saturate(1.4);
    }
    /* Pri otvorenom menu bez backdrop-filter – inak by hlavička bola containing block pre fixed menu */
    .site-header.is-open {
        background: var(--bg);
        border-bottom-color: var(--line);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    @supports (animation-timeline: scroll()) {
        .site-header:not(.is-open) {
            animation: header-solid linear both;
            animation-timeline: scroll(root);
            animation-range: 0 140px;
        }
    }

    .site-header__inner {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        height: 100%;
    }

    .site-header__logo { flex: none; }
    .site-header__logo img { display: block; width: clamp(122px, 11vw, 150px); height: auto; }

    .site-nav { margin-inline: auto; }
    .site-nav__list { display: flex; gap: .25rem; padding: 0; list-style: none; }
    .site-nav__link {
        display: flex;
        align-items: baseline;
        gap: .45rem;
        padding: .6rem .95rem;
        border-radius: 999px;
        color: var(--muted);
        font-size: .9375rem;
        font-weight: 600;
        text-decoration: none;
        transition: color .25s, background-color .25s;
    }
    .site-nav__index { font-family: var(--ff-mono); font-size: .64rem; color: var(--orange); }
    .site-nav__link:hover { color: var(--text); background: rgb(244 241 234 / .06); }
    .site-nav__link.is-active { color: var(--text); background: rgb(244 241 234 / .08); }

    .site-header__actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
    .site-header__ig svg { width: 1rem; height: 1rem; }

    .nav-toggle {
        position: relative;
        display: grid;
        place-items: center;
        width: 2.875rem;
        height: 2.875rem;
        border: 1px solid var(--line-2);
        border-radius: 50%;
        background: transparent;
    }
    .nav-toggle__bars,
    .nav-toggle__bars::before {
        display: block;
        width: 1.1rem;
        height: 2px;
        border-radius: 2px;
        background: var(--text);
        transition: transform .4s var(--ease), background-color .2s;
    }
    .nav-toggle__bars { transform: translateY(-3px); }
    .nav-toggle__bars::before { content: ''; transform: translateY(6px); }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bars { transform: rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(-90deg); }

    @media (max-width: 63.99rem) {
        .site-nav { display: none; }
        .site-header__ig span { display: none; }
        .site-header__ig { width: 2.875rem; padding: 0; }
    }
    @media (min-width: 64rem) {
        .site-header__actions { margin-left: 0; }
        .nav-toggle, .mobile-menu { display: none !important; }
    }

    .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: -1;
        overflow-y: auto;
        padding-top: calc(var(--header-h) + 1.5rem);
        background: var(--bg);
        background-image: var(--tread);
    }
    .mobile-menu__list { padding: 0; list-style: none; }
    .mobile-menu__link {
        display: flex;
        align-items: baseline;
        gap: 1rem;
        padding-block: .2em;
        border-bottom: 1px solid var(--line);
        font-family: var(--ff-display);
        font-size: clamp(2.75rem, 12vw, 4.75rem);
        line-height: 1.05;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--text);
    }
    .mobile-menu__link span { font-family: var(--ff-mono); font-size: .8rem; color: var(--orange); }
    .mobile-menu__link:hover, .mobile-menu__link.is-active { color: var(--orange); }
    .mobile-menu__footer {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem 1.5rem;
        padding-block: 2rem 3rem;
        font-family: var(--ff-mono);
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .08em;
    }
    .mobile-menu__footer a { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; color: var(--muted); }
    .mobile-menu__footer svg { width: 1em; height: 1em; }

    @media (prefers-reduced-motion: no-preference) {
        .mobile-menu:not([hidden]) { animation: fade-in .35s var(--ease) both; }
        .mobile-menu:not([hidden]) li { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 60ms); }
    }
}

/* -------------------------------------------------------------------- hero */
@layer sections {
    .hero {
        position: relative;
        display: grid;
        align-items: end;
        min-height: 100svh;
        padding-block: calc(var(--header-h) + 2.5rem) clamp(3.5rem, 7vw, 5.5rem);
        overflow: clip;
        isolation: isolate;
    }

    .hero__media { position: absolute; inset: 0; z-index: -2; }
    .hero__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1) contrast(1.18) brightness(.55);
    }
    @media (prefers-reduced-motion: no-preference) {
        .hero__img { animation: slow-zoom 16s var(--ease) both; }
    }

    .hero::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(70% 55% at 12% 100%, rgb(237 108 5 / .22), transparent 70%),
            linear-gradient(180deg, rgb(10 10 10 / .7) 0%, rgb(10 10 10 / .1) 38%, rgb(10 10 10 / .94) 100%);
    }

    /* Bez fotky: stopy pneumatík a obrysové písmo */
    .hero__tracks {
        position: absolute;
        inset: 0;
        z-index: -2;
        background:
            radial-gradient(55% 45% at 82% 18%, rgb(237 108 5 / .26), transparent 72%),
            var(--tread);
        -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
        mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
    }
    .hero__tracks::before {
        content: 'MOTORHUB';
        position: absolute;
        top: 12%;
        right: -2vw;
        font-family: var(--ff-display);
        font-size: 26vw;
        line-height: .8;
        color: transparent;
        -webkit-text-stroke: 1px rgb(244 241 234 / .09);
        white-space: nowrap;
    }

    .hero__inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }

    /* Rám s medzerou na ľavej strane – motív z MotorHub merchu */
    .hero__frame {
        --frame: 2px;
        --frame-color: var(--text);
        position: relative;
        padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3.25rem) clamp(1.5rem, 3.5vw, 2.75rem) clamp(2.75rem, 7vw, 5.5rem);
        background:
            linear-gradient(var(--frame-color) 0 0) top left / 100% var(--frame) no-repeat,
            linear-gradient(var(--frame-color) 0 0) bottom left / 100% var(--frame) no-repeat,
            linear-gradient(var(--frame-color) 0 0) top right / var(--frame) 100% no-repeat,
            linear-gradient(var(--frame-color) 0 0) top left / var(--frame) 36% no-repeat,
            linear-gradient(var(--frame-color) 0 0) bottom left / var(--frame) 14% no-repeat;
    }
    @media (prefers-reduced-motion: no-preference) {
        .hero__frame { animation: frame-in 1.2s var(--ease) both; }
    }

    .hero__side {
        position: absolute;
        left: 0;
        bottom: 17%;
        translate: -50% 0;
        writing-mode: vertical-rl;
        rotate: 180deg;
        padding-block: .75rem;
        font-family: var(--ff-mono);
        font-size: clamp(.7rem, 1.2vw, .85rem);
        font-weight: 600;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: var(--orange);
        white-space: nowrap;
    }

    .hero__eyebrow { margin-bottom: clamp(.75rem, 2vw, 1.5rem); }

    .hero__title {
        font-family: var(--ff-display);
        font-size: var(--fs-hero);
        font-weight: 400;
        line-height: .84;
        letter-spacing: -.004em;
        text-transform: uppercase;
    }
    .hero__line { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
    .hero__line > span { display: inline-block; }
    .hero__line:nth-child(even) > span { color: var(--orange); }
    @media (prefers-reduced-motion: no-preference) {
        .hero__line > span { animation: line-up 1.1s var(--ease) both; animation-delay: calc(var(--i) * 130ms + 200ms); }
    }

    .hero__bottom {
        display: grid;
        gap: 1.75rem;
        align-items: end;
    }
    @media (min-width: 56rem) {
        .hero__bottom { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
    }

    .hero__text {
        max-width: 46ch;
        color: var(--muted);
        font-size: var(--fs-lg);
        line-height: 1.5;
    }
    .hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

    .hero__scroll {
        position: absolute;
        right: var(--gutter);
        bottom: 1.5rem;
        display: none;
        align-items: center;
        gap: .75rem;
        font-family: var(--ff-mono);
        font-size: .68rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--dim);
        writing-mode: vertical-rl;
    }
    .hero__scroll::after {
        content: '';
        width: 1px;
        height: 3.5rem;
        background: linear-gradient(var(--orange), transparent);
    }
    @media (min-width: 80rem) { .hero__scroll { display: flex; } }

    /* ---------------------------------------------------------- tapes */
    .tapes {
        position: relative;
        z-index: 2;
        display: grid;
        place-items: center;
        height: clamp(8.5rem, 15vw, 12.5rem);
        margin-top: -2.5rem;
        overflow: clip;
    }
    .tape {
        position: absolute;
        left: -4%;
        right: -4%;
        padding-block: clamp(.7rem, 1.4vw, 1rem);
        overflow: clip;
    }
    .tape--a {
        z-index: 2;
        background: var(--orange);
        color: var(--on-orange);
        rotate: -3deg;
        box-shadow: 0 24px 50px -18px rgb(0 0 0 / .8);
    }
    .tape--b {
        background: var(--text);
        color: var(--bg);
        rotate: 2.4deg;
    }
    .tape__track { display: flex; width: max-content; }
    .tape__list { display: flex; padding: 0; list-style: none; }
    .tape__list li {
        display: flex;
        align-items: center;
        gap: 2.25rem;
        padding-inline: 1.125rem;
        font-family: var(--ff-display);
        font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
        line-height: 1;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .tape__list li::after { content: '✦'; font-size: .55em; }
    @media (prefers-reduced-motion: no-preference) {
        .tape__track { animation: marquee 42s linear infinite; }
        .tape--b .tape__track { animation-duration: 52s; animation-direction: reverse; }
        .tapes:hover .tape__track { animation-play-state: paused; }
    }

    /* -------------------------------------------------------- pillars */
    .pillars__grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: clamp(.75rem, 1.4vw, 1.25rem);
        padding: 0;
        list-style: none;
    }
    .pillar { grid-column: span 12; }
    @media (min-width: 44rem) { .pillar { grid-column: span 6; } }
    @media (min-width: 64rem) {
        .pillar--1, .pillar--4 { grid-column: span 7; }
        .pillar--2, .pillar--3 { grid-column: span 5; }
    }

    .pillar__link {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
        min-height: clamp(21rem, 36vw, 31rem);
        padding: clamp(1.25rem, 2.5vw, 2.25rem);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        background-image: var(--tread);
        color: inherit;
        text-decoration: none;
        overflow: clip;
        isolation: isolate;
        transition: border-color .45s var(--ease);
    }
    .pillar__link:hover, .pillar__link:focus-visible { border-color: rgb(237 108 5 / .65); }

    .pillar__media { position: absolute; inset: 0; z-index: -1; }
    .pillar__media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgb(10 10 10 / .1) 20%, rgb(10 10 10 / .88) 100%);
    }
    .pillar__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1) contrast(1.1) brightness(.62);
        transition: filter .8s var(--ease), transform 1.3s var(--ease);
    }
    .pillar__link:hover .pillar__img { filter: grayscale(0) brightness(.72); transform: scale(1.06); }

    .pillar__ghost {
        position: absolute;
        right: -.04em;
        bottom: -.2em;
        font-family: var(--ff-display);
        font-size: clamp(12rem, 24vw, 21rem);
        line-height: 1;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--line-2);
        transition: -webkit-text-stroke-color .5s, translate .9s var(--ease);
    }
    .pillar__link:hover .pillar__ghost { -webkit-text-stroke-color: var(--orange); translate: 0 -4%; }

    .pillar__index {
        position: absolute;
        top: clamp(1.25rem, 2.5vw, 2rem);
        left: clamp(1.25rem, 2.5vw, 2.25rem);
        font-family: var(--ff-mono);
        font-size: .72rem;
        letter-spacing: .14em;
        color: var(--muted);
    }
    .pillar__arrow {
        position: absolute;
        top: clamp(1rem, 2vw, 1.75rem);
        right: clamp(1rem, 2vw, 1.75rem);
        display: grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        border: 1px solid var(--line-2);
        border-radius: 50%;
        transition: background-color .3s, border-color .3s, color .3s, rotate .5s var(--ease);
    }
    .pillar__arrow svg { width: 1.2rem; height: 1.2rem; }
    .pillar__link:hover .pillar__arrow { background: var(--orange); border-color: var(--orange); color: var(--on-orange); rotate: 45deg; }

    .pillar__title {
        font-family: var(--ff-display);
        font-size: clamp(2.75rem, 1.5rem + 4vw, 5.25rem);
        font-weight: 400;
        line-height: .88;
        text-transform: uppercase;
    }
    .pillar__text { max-width: 38ch; margin-top: .85rem; color: var(--muted); }

    /* ---------------------------------------------------------- about */
    .about {
        background: var(--text);
        color: var(--bg);
        --line: rgb(10 10 10 / .14);
    }
    .about ::selection { background: var(--bg); color: var(--text); }
    .about__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); }
    @media (min-width: 64rem) {
        .about__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
    }
    /* Veľkosť písma podľa šírky stĺpca (container query), aby "MOTOR" nikdy nepretieklo */
    .about__side {
        display: flex;
        flex-direction: column;
        container-type: inline-size;
        font-family: var(--ff-display);
        line-height: .8;
        text-transform: uppercase;
        user-select: none;
    }
    .about__side span { font-size: min(36cqi, 12rem); }
    .about__side span:first-child { color: transparent; -webkit-text-stroke: 2px var(--bg); }
    .about__side span:last-child { color: var(--orange); }
    @media (min-width: 64rem) {
        .about__side { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
    }
    .about .section-heading__index { color: #b95300; }

    .about__statement {
        margin-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 3.5rem);
        font-size: clamp(1.625rem, 1.05rem + 2.3vw, 3.1rem);
        font-weight: 620;
        line-height: 1.16;
        letter-spacing: -.018em;
    }
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            .reveal-word {
                animation: word-reveal linear both;
                animation-timeline: view();
                animation-range: entry 10% cover 40%;
            }
        }
    }

    .stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        margin-bottom: 2.5rem;
    }
    .stats__item { display: flex; flex-direction: column-reverse; gap: .35rem; padding-top: 1rem; border-top: 2px solid var(--bg); }
    .stats dt { font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(10 10 10 / .6); }
    .stats dd { font-family: var(--ff-display); font-size: clamp(2.75rem, 6vw, 4.75rem); line-height: .9; }
    .about .link-arrow { color: var(--bg); }
    .about .link-arrow:hover { color: #b95300; }

    /* ---------------------------------------------------------- články */
    .latest__grid { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
    @media (min-width: 64rem) {
        .latest__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
        .latest__grid .card--featured { grid-row: span 2; }
        .latest__grid .card:not(.card--featured) .card__link { flex-direction: row; }
        .latest__grid .card:not(.card--featured) .card__media { flex: 0 0 42%; aspect-ratio: auto; }
    }

    .articles-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
        gap: clamp(1rem, 1.8vw, 1.5rem);
    }
    .articles-grid .card--featured { grid-column: 1 / -1; }
    @media (min-width: 64rem) {
        .articles-grid .card--featured .card__link { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
        .articles-grid .card--featured .card__media { aspect-ratio: 16 / 10; }
        .articles-grid .card--featured .card__body { justify-content: flex-end; padding: clamp(1.5rem, 3vw, 3rem); }
    }

    .card { position: relative; }
    .card__link {
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        color: inherit;
        text-decoration: none;
        overflow: clip;
        transition: border-color .4s var(--ease), translate .5s var(--ease);
    }
    .card__link:hover { border-color: var(--line-2); translate: 0 -4px; }
    .card__media { aspect-ratio: 16 / 10; background: var(--surface-2); overflow: clip; }
    .card--featured .card__media { aspect-ratio: 16 / 11; }
    .card__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(.8);
        transition: scale 1.1s var(--ease), filter .6s;
    }
    .card__link:hover .card__img { scale: 1.05; filter: saturate(1.05); }

    .card__placeholder {
        display: grid;
        place-items: end start;
        height: 100%;
        min-height: 12rem;
        padding: clamp(1rem, 2vw, 1.5rem);
        background:
            radial-gradient(80% 90% at 100% 0%, rgb(237 108 5 / .28), transparent 60%),
            var(--tread),
            var(--surface-2);
    }
    .card__placeholder span {
        font-family: var(--ff-display);
        font-size: clamp(3.5rem, 8vw, 7.5rem);
        line-height: .8;
        text-transform: uppercase;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--line-2);
        transition: -webkit-text-stroke-color .4s;
    }
    .card__link:hover .card__placeholder span { -webkit-text-stroke-color: var(--orange); }

    .card__body {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: .8rem;
        padding: clamp(1.25rem, 2vw, 1.75rem);
    }
    .card__meta {
        display: flex;
        gap: .6rem;
        font-family: var(--ff-mono);
        font-size: .72rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--dim);
    }
    .card__title {
        font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
        font-weight: 760;
        line-height: 1.15;
        letter-spacing: -.02em;
    }
    .card--featured .card__title {
        font-family: var(--ff-display);
        font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.75rem);
        font-weight: 400;
        line-height: .95;
        letter-spacing: 0;
        text-transform: uppercase;
    }
    .card__excerpt {
        display: -webkit-box;
        overflow: hidden;
        color: var(--muted);
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .card__cta {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        margin-top: auto;
        padding-top: .5rem;
        font-family: var(--ff-mono);
        font-size: .72rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--orange);
    }
    .card__cta svg { width: 1em; height: 1em; transition: translate .4s var(--ease); }
    .card__link:hover .card__cta svg { translate: 3px -3px; }

    /* ------------------------------------------------------ instagram */
    .ig-cta { border-top: 1px solid var(--line); overflow: clip; }
    .ig-cta__link {
        position: relative;
        display: grid;
        justify-items: center;
        gap: clamp(1.25rem, 3vw, 2rem);
        padding-block: clamp(4.5rem, 11vw, 9rem);
        color: inherit;
        text-decoration: none;
        isolation: isolate;
    }
    .ig-cta__link::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(50% 60% at 50% 55%, rgb(237 108 5 / .28), transparent 70%);
        opacity: .5;
        transition: opacity .6s;
    }
    .ig-cta__link:hover::before { opacity: 1; }
    .ig-cta__eyebrow svg { width: 1rem; height: 1rem; color: var(--orange); }
    .ig-cta__handle {
        font-family: var(--ff-display);
        font-size: clamp(3.25rem, 12.5vw, 13rem);
        line-height: .86;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .ig-cta__row {
        display: inline-block;
        color: transparent;
        -webkit-text-stroke: 2px var(--text);
        transition: color .5s, -webkit-text-stroke-color .5s;
    }
    .ig-cta__link:hover .ig-cta__row { color: var(--orange); -webkit-text-stroke-color: var(--orange); }
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            .ig-cta__row { animation: drift-x linear both; animation-timeline: view(); }
        }
    }

    /* ---------------------------------------------------- page / article */
    .page-hero {
        padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 6rem));
        padding-bottom: clamp(2rem, 5vw, 3.5rem);
        border-bottom: 1px solid var(--line);
    }
    .page-hero__title {
        margin-top: 1.25rem;
        font-family: var(--ff-display);
        font-size: var(--fs-3xl);
        font-weight: 400;
        line-height: .88;
        text-transform: uppercase;
    }
    .page-hero__count {
        margin-left: .3em;
        font-family: var(--ff-mono);
        font-size: .95rem;
        color: var(--orange);
        vertical-align: super;
    }
    .page-hero__lead { max-width: 52ch; margin-top: 1.25rem; color: var(--muted); font-size: var(--fs-lg); }

    .read-progress {
        position: fixed;
        inset: 0 0 auto;
        z-index: 60;
        height: 3px;
        background: var(--orange);
        transform: scaleX(0);
        transform-origin: 0 50%;
    }
    @supports (animation-timeline: scroll()) {
        .read-progress { animation: progress linear both; animation-timeline: scroll(root); }
    }

    .article__header {
        max-width: 72rem;
        padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 5rem));
        padding-bottom: clamp(2rem, 5vw, 3.5rem);
    }
    .article__meta {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem 1.25rem;
        margin-block: 1.75rem 1.25rem;
        font-family: var(--ff-mono);
        font-size: .75rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--muted);
    }
    .article__meta > * + *::before { content: '●'; margin-right: 1.25rem; font-size: .5em; vertical-align: middle; color: var(--orange); }
    .article__title {
        padding-top: .12em; /* miesto pre diakritiku nad veľkými písmenami (Ú, Š, Ľ) */
        font-family: var(--ff-display);
        font-size: clamp(2.75rem, 1.2rem + 6vw, 7.25rem);
        font-weight: 400;
        line-height: .92;
        text-transform: uppercase;
    }
    .article__perex {
        max-width: 44ch;
        margin-top: 1.5rem;
        font-size: var(--fs-xl);
        font-weight: 480;
        line-height: 1.35;
        color: var(--muted);
    }

    .article__cover {
        width: min(100% - 2 * var(--gutter), calc(var(--container) + 8rem));
        margin-inline: auto;
    }
    .article__cover-img {
        width: 100%;
        aspect-ratio: 21 / 9;
        object-fit: cover;
        border-radius: var(--radius-lg);
    }
    @media (max-width: 48rem) {
        .article__cover { width: 100%; }
        .article__cover-img { aspect-ratio: 4 / 3; border-radius: 0; }
    }

    .article__layout {
        display: grid;
        gap: 2rem;
        padding-block: clamp(2.5rem, 6vw, 5rem);
    }
    @media (min-width: 64rem) {
        .article__layout { grid-template-columns: 4rem minmax(0, 46rem); justify-content: center; gap: 4rem; }
        .article__share { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; flex-direction: column; }
    }
    .article__share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
    .article__share-label { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

    .article-nav {
        display: grid;
        gap: 1rem;
        padding-bottom: clamp(3rem, 6vw, 5rem);
    }
    @media (min-width: 48rem) { .article-nav { grid-template-columns: 1fr 1fr; } }
    .article-nav__item {
        display: grid;
        gap: .75rem;
        padding: clamp(1.25rem, 3vw, 2rem);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        text-decoration: none;
        transition: border-color .3s, background-color .3s;
    }
    .article-nav__item:hover { border-color: var(--orange); background: var(--surface); }
    .article-nav__item--right { text-align: right; justify-items: end; }
    .article-nav__label { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
    .article-nav__label svg { width: 1em; height: 1em; }
    .article-nav__title { font-family: var(--ff-display); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1; text-transform: uppercase; }

    .related { border-top: 1px solid var(--line); }

    /* ------------------------------------------------------------ prose */
    .prose {
        max-width: 46rem;
        font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
        line-height: 1.78;
        color: rgb(244 241 234 / .86);
        counter-reset: h2;
    }
    .prose--page { margin-inline: auto; }
    .prose > * + * { margin-top: 1.3em; }
    .prose h2 {
        margin-top: 2.2em;
        font-family: var(--ff-display);
        font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem);
        font-weight: 400;
        line-height: 1;
        text-transform: uppercase;
        color: var(--text);
        counter-increment: h2;
    }
    .prose h2::before {
        content: counter(h2, decimal-leading-zero) ' —';
        display: block;
        margin-bottom: .8rem;
        font-family: var(--ff-mono);
        font-size: .78rem;
        letter-spacing: .14em;
        color: var(--orange);
    }
    .prose h3 { margin-top: 1.9em; font-size: 1.45rem; font-weight: 760; line-height: 1.2; letter-spacing: -.015em; color: var(--text); }
    .prose h2 + *, .prose h3 + * { margin-top: .8em; }
    .prose strong { color: var(--text); font-weight: 700; }
    .prose a {
        color: var(--text);
        text-decoration: underline;
        text-decoration-color: var(--orange);
        text-decoration-thickness: 2px;
        text-underline-offset: .22em;
        transition: color .2s;
    }
    .prose a:hover { color: var(--orange); }
    .prose blockquote {
        margin-block: 2em;
        padding-left: clamp(1.25rem, 3vw, 2rem);
        border-left: 4px solid var(--orange);
        font-family: var(--ff-display);
        font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
        line-height: 1.02;
        text-transform: uppercase;
        color: var(--text);
    }
    .prose ul, .prose ol { padding-left: 1.5em; }
    .prose ul { list-style: none; }
    .prose ul > li { position: relative; }
    .prose ul > li::before {
        content: '';
        position: absolute;
        top: .72em;
        left: -1.3em;
        width: .42em;
        height: .42em;
        background: var(--orange);
        rotate: 45deg;
    }
    .prose ol > li::marker { font-family: var(--ff-mono); font-size: .85em; color: var(--orange); }
    .prose li + li { margin-top: .5em; }
    .prose img { width: 100%; margin-block: 2.2em; border-radius: var(--radius); }
    .prose hr { height: 1px; margin-block: 3em; border: 0; background: var(--line); }
    .prose code { padding: .15em .4em; border-radius: 6px; background: var(--surface-2); font-family: var(--ff-mono); font-size: .88em; }
    .page-article .prose > p:first-child::first-letter {
        float: left;
        margin: .08em .12em 0 0;
        font-family: var(--ff-display);
        font-size: 4.4em;
        line-height: .82;
        color: var(--orange);
    }

    /* ---------------------------------------------------------- contact */
    .contact {
        display: grid;
        gap: clamp(2.5rem, 6vw, 5rem);
        padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 5rem));
        padding-bottom: clamp(4rem, 8vw, 7rem);
    }
    @media (min-width: 64rem) {
        .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
        .contact__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
    }
    .contact__title {
        margin-top: 1.25rem;
        font-family: var(--ff-display);
        font-size: clamp(4.75rem, 2rem + 10vw, 11rem);
        font-weight: 400;
        line-height: .82;
        text-transform: uppercase;
    }
    .contact__title-accent { color: var(--orange); }
    .contact__lead { max-width: 42ch; margin-top: 1.5rem; color: var(--muted); font-size: var(--fs-lg); }

    .contact-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
        gap: .75rem;
        margin-top: 2.5rem;
        padding: 0;
        list-style: none;
    }
    .contact-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: .9rem;
        align-items: center;
        padding: 1rem 1.15rem;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
    }
    .contact-card__icon {
        display: grid;
        grid-row: span 2;
        place-items: center;
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 10px;
        background: rgb(237 108 5 / .13);
        color: var(--orange);
    }
    .contact-card__icon svg { width: 1.15rem; height: 1.15rem; }
    .contact-card__label { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
    .contact-card__value { overflow: hidden; font-weight: 650; text-overflow: ellipsis; text-decoration: none; color: var(--text); }
    a.contact-card__value:hover { color: var(--orange); }

    .contact-form {
        display: grid;
        gap: 1rem;
        padding: clamp(1.5rem, 4vw, 3rem);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
    }
    .contact-form__title { margin-bottom: .5rem; font-family: var(--ff-display); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 400; line-height: 1; text-transform: uppercase; }
    .contact-form__row { display: grid; gap: 1rem; }
    @media (min-width: 40rem) { .contact-form__row { grid-template-columns: 1fr 1fr; } }

    /* Plávajúce popisky */
    .ff { position: relative; }
    .ff__input {
        width: 100%;
        padding: 1.6rem 1rem .6rem;
        border: 1px solid var(--line-2);
        border-radius: 12px;
        background: var(--bg-2);
        font-size: 1rem;
        line-height: 1.4;
        color: var(--text);
        appearance: none;
        transition: border-color .2s, box-shadow .2s, background-color .2s;
    }
    textarea.ff__input { min-height: 10rem; resize: vertical; }
    .ff__input:hover { border-color: rgb(244 241 234 / .4); }
    .ff__input:focus { outline: none; border-color: var(--orange); background: var(--bg); box-shadow: 0 0 0 4px rgb(237 108 5 / .18); }
    .ff__label {
        position: absolute;
        top: 1.1rem;
        left: 1rem;
        font-size: 1rem;
        line-height: 1.2;
        color: var(--dim);
        pointer-events: none;
        transform-origin: 0 0;
        transition: transform .22s var(--ease), color .2s;
    }
    .ff__label.required::after { content: ' *'; color: var(--orange); }
    .ff__input:focus + .ff__label,
    .ff__input:not(:placeholder-shown) + .ff__label { transform: translateY(-.64rem) scale(.75); color: var(--muted); }
    .ff__input:focus + .ff__label { color: var(--orange); }
    .ff--error .ff__input { border-color: var(--danger); }
    .ff__error { margin: .45rem 0 0 .25rem; font-size: .85rem; color: var(--danger); }

    .ff-check__label { display: flex; align-items: flex-start; gap: .8rem; font-size: .92rem; color: var(--muted); cursor: pointer; }
    .ff-check__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
    .ff-check__box {
        display: grid;
        flex: none;
        place-items: center;
        width: 1.35rem;
        height: 1.35rem;
        margin-top: .1rem;
        border: 1.5px solid var(--line-2);
        border-radius: 6px;
        transition: background-color .2s, border-color .2s;
    }
    .ff-check__box::after {
        content: '';
        width: .38rem;
        height: .7rem;
        margin-top: -.15rem;
        border: solid var(--on-orange);
        border-width: 0 2.5px 2.5px 0;
        rotate: 45deg;
        scale: 0;
        transition: scale .25s var(--ease);
    }
    .ff-check__input:checked + .ff-check__box { background: var(--orange); border-color: var(--orange); }
    .ff-check__input:checked + .ff-check__box::after { scale: 1; }
    .ff-check__input:focus-visible + .ff-check__box { outline: 2px solid var(--orange); outline-offset: 2px; }
    .ff-check__text a { color: var(--text); text-decoration-color: var(--orange); text-underline-offset: .2em; }
    .ff-check .ff__error { margin-left: 2.15rem; }

    .field-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

    .form-alert { padding: .9rem 1.1rem; border: 1px solid rgb(255 107 97 / .4); border-radius: 12px; background: rgb(255 107 97 / .1); color: #ffb3ad; }

    .form-success {
        display: grid;
        justify-items: center;
        gap: 1.1rem;
        padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        text-align: center;
    }
    .form-success:focus { outline: none; }
    .form-success__icon {
        display: grid;
        place-items: center;
        width: 4.75rem;
        height: 4.75rem;
        border-radius: 50%;
        background: var(--orange);
        color: var(--on-orange);
    }
    .form-success__icon svg { width: 2.2rem; height: 2.2rem; }
    @media (prefers-reduced-motion: no-preference) {
        .form-success__icon { animation: pop .7s var(--ease) both; }
    }
    .form-success__title { font-family: var(--ff-display); font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 400; line-height: .95; text-transform: uppercase; }
    .form-success p { max-width: 40ch; color: var(--muted); }

    /* ------------------------------------------------------------ error */
    .error-page {
        display: grid;
        align-content: center;
        justify-items: start;
        gap: 1.25rem;
        min-height: 88svh;
        padding-top: calc(var(--header-h) + 3rem);
        padding-bottom: 4rem;
    }
    .error-page__code {
        display: flex;
        font-family: var(--ff-display);
        font-size: clamp(9rem, 32vw, 26rem);
        font-weight: 400;
        line-height: .78;
    }
    .error-page__code--small { display: block; font-size: clamp(4rem, 13vw, 10rem); text-transform: uppercase; }
    .error-page__zero { color: transparent; -webkit-text-stroke: 3px var(--orange); }
    .error-page__title { font-family: var(--ff-display); font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1; text-transform: uppercase; }
    .error-page__text { max-width: 44ch; color: var(--muted); font-size: var(--fs-lg); }
    .error-page__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

    /* ----------------------------------------------------------- footer */
    .site-footer { position: relative; border-top: 1px solid var(--line); overflow: clip; }
    .footer-cta {
        display: grid;
        justify-items: start;
        gap: 1.5rem;
        padding-block: clamp(4rem, 9vw, 7.5rem);
        border-bottom: 1px solid var(--line);
    }
    .footer-cta__title {
        display: flex;
        flex-wrap: wrap;
        gap: 0 .22em;
        font-family: var(--ff-display);
        font-size: var(--fs-3xl);
        font-weight: 400;
        line-height: .86;
        text-transform: uppercase;
    }
    .footer-cta__outline { color: transparent; -webkit-text-stroke: 2px var(--orange); }

    .footer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
        gap: 2.5rem;
        padding-block: clamp(3rem, 6vw, 5rem);
    }
    @media (min-width: 64rem) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
    .footer-grid__logo { width: 170px; height: auto; }
    .footer-grid__tagline { margin-top: 1.25rem; font-family: var(--ff-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
    .footer-grid__text { max-width: 34ch; margin-top: .6rem; color: var(--muted); }
    .footer-grid__heading { margin-bottom: 1rem; font-family: var(--ff-mono); font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
    .footer-grid ul { display: grid; gap: .65rem; padding: 0; list-style: none; }
    .footer-grid a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--text); transition: color .2s; }
    .footer-grid a:hover { color: var(--orange); }
    .footer-grid a svg { width: 1rem; height: 1rem; }

    .footer-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 1rem;
        padding-block: 1.5rem;
        border-top: 1px solid var(--line);
        font-size: .85rem;
        color: var(--dim);
    }
    .footer-bottom__links { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
    .footer-bottom a, .footer-bottom__button { display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; background: none; text-decoration: none; color: var(--muted); }
    .footer-bottom a:hover, .footer-bottom__button:hover { color: var(--orange); }
    .no-js .footer-bottom__button { display: none; }
    .footer-bottom svg { width: 1em; height: 1em; }

    .footer-wordmark {
        margin-bottom: -.13em;
        font-family: var(--ff-display);
        font-size: 24vw;
        line-height: .78;
        text-align: center;
        text-transform: uppercase;
        white-space: nowrap;
        color: transparent;
        -webkit-text-stroke: 1px var(--line-2);
        user-select: none;
        /* Písmená presahujú nad riadok a inak prekrývajú odkazy v pätičke */
        pointer-events: none;
    }
    .footer-wordmark__hub { color: var(--orange); -webkit-text-stroke: 0; }
}

/* --------------------------------------------------------------- utilities */
@layer utilities {
    .visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

/* -------------------------------------------------------------- keyframes */
@keyframes header-solid {
    to {
        background: rgb(10 10 10 / .82);
        border-bottom-color: rgb(244 241 234 / .12);
        -webkit-backdrop-filter: blur(16px) saturate(1.4);
        backdrop-filter: blur(16px) saturate(1.4);
    }
}
/* ------------------------------------------------------- cookie lišta (Klaro)
   Mimo @layer – CSS knižnice je bez vrstvy a inak by prebilo naše pravidlá. */
.klaro {
    --font-family: var(--ff-body);
    --title-font-family: var(--ff-display);
    --font-size: 15px;
    --border-radius: var(--radius-lg);
    --border-style: solid;
    --border-width: 1px;
    --dark1: var(--surface);
    --dark2: var(--surface-2);
    --dark3: var(--line-2);
    --light1: var(--text);
    --light2: var(--muted);
    --light3: var(--dim);
    --green1: var(--orange);
    --green2: var(--orange-2);
    --green3: var(--orange-2);
    --blue1: var(--orange);
    --blue2: var(--orange-2);
    --white2: var(--text);
    --white3: var(--muted);
    --button-text-color: var(--on-orange);
    --box-shadow-color: rgb(0 0 0 / .8);
    color-scheme: dark;
}
.klaro .cookie-modal .cm-bg { background: rgb(10 10 10 / .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.klaro .cookie-modal .cm-modal.cm-klaro {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 40px 100px -30px rgb(0 0 0 / .9);
    max-width: 40rem;
}
.klaro .cookie-modal .cm-modal .cm-header { border-bottom-color: var(--line); }
.klaro .cookie-modal .cm-modal .cm-header .title {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.klaro .cookie-modal .cm-modal .cm-footer { border-top-color: var(--line); }
.klaro .cookie-modal a, .klaro .cookie-notice a { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.klaro .cookie-modal a:hover, .klaro .cookie-notice a:hover { color: var(--orange); }
.klaro .cookie-modal .cm-btn, .klaro .cookie-notice .cn-buttons .cm-btn {
    padding: .7rem 1.25rem;
    border-radius: 999px;
    font-weight: 650;
    font-size: .9375rem;
}
.klaro .cookie-modal .cm-btn.cm-btn-success, .klaro .cookie-notice .cm-btn.cm-btn-success { background: var(--orange); color: var(--on-orange); }
.klaro .cookie-modal .cm-btn.cm-btn-success:hover, .klaro .cookie-notice .cm-btn.cm-btn-success:hover { background: var(--orange-2); }
.klaro .cookie-modal .cm-btn.cm-btn-danger, .klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-danger, .klaro .cookie-notice .cm-btn.cm-btn-info {
    background: transparent;
    border: 1px solid var(--line-2);
    color: var(--text);
}
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover, .klaro .cookie-modal .cm-btn.cm-btn-info:hover,
.klaro .cookie-notice .cm-btn.cm-btn-danger:hover, .klaro .cookie-notice .cm-btn.cm-btn-info:hover { border-color: var(--text); background: var(--surface-2); }
.klaro .cookie-modal .cm-list-title { font-weight: 650; }
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider { background: var(--orange); }
.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider { background: rgb(237 108 5 / .45); }
.klaro .cookie-modal .cm-list-input:focus-visible + .cm-list-label .slider { outline: 2px solid var(--orange); outline-offset: 3px; }
.klaro .cookie-modal .cm-powered-by { display: none; }

@keyframes line-up { from { transform: translateY(108%); } to { transform: none; } }
@keyframes frame-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes slow-zoom { from { scale: 1.12; } to { scale: 1.02; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes word-reveal { from { opacity: .15; } to { opacity: 1; } }
@keyframes drift-x { from { transform: translateX(10%); } to { transform: translateX(-10%); } }
@keyframes progress { to { transform: scaleX(1); } }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgb(237 108 5 / .7); }
    70% { box-shadow: 0 0 0 .6rem rgb(237 108 5 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(237 108 5 / 0); }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(1.5rem); } }
@keyframes pop { 0% { scale: 0; } 60% { scale: 1.12; } 100% { scale: 1; } }