:root {
    color-scheme: dark;

    --bg: #0d0e10;
    --surface: #15171a;

    --text: #f5f5f7;
    --muted: #92959c;
    --muted-strong: #b3b5ba;

    --border: #292c31;
    --border-hover: #4a4e55;

    --red: #ff3045;
    --red-soft: rgba(255, 48, 69, 0.16);

    --radius: 14px;
    --content-width: 680px;
}


/* =========================================================
   Base
   ========================================================= */

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

html {
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;

    background: var(--bg);
    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 17px;
    line-height: 1.65;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    -webkit-tap-highlight-color: transparent;
}

.container {
    width: 100%;
    max-width: var(--content-width);

    margin: 0 auto;
    padding: 38px 24px 56px;
}


/* =========================================================
   OBSCURA — cyberpunk / hologram / glitch
   ========================================================= */

.brand {
    position: relative;
    display: inline-block;

    margin: 0 0 34px;

    color: #878a91;

    font-size: 12px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.24em;

    text-shadow:
        1px 0 rgba(255, 255, 255, 0.13),
        -1px 0 rgba(255, 48, 69, 0.12);

    animation: obscura-flicker 7s infinite;
}


/*
 * Красная цифровая копия OBSCURA.
 * Почти всегда невидима и появляется только
 * короткими glitch-вспышками.
 */
.brand::after {
    content: "OBSCURA";

    position: absolute;
    inset: 0;

    color: rgba(255, 48, 69, 0.78);

    opacity: 0;

    pointer-events: none;

    text-shadow:
        2px 0 rgba(255, 48, 69, 0.42),
        -1px 0 rgba(255, 255, 255, 0.10);

    transform: translateX(0);

    animation: obscura-red-glitch 8s infinite;
}


/*
 * Маленькие красные/белые "битые пиксели"
 * около логотипа.
 */
.brand::before {
    content: "";

    position: absolute;

    width: 3px;
    height: 3px;

    right: -9px;
    top: 1px;

    background: var(--red);

    opacity: 0;

    pointer-events: none;

    box-shadow:
        5px 3px 0 rgba(255, 48, 69, 0.80),
        10px -2px 0 rgba(255, 48, 69, 0.52),
        4px 8px 0 rgba(255, 255, 255, 0.22),
        13px 6px 0 rgba(255, 48, 69, 0.32),
        17px 1px 0 rgba(255, 48, 69, 0.18),
        9px 11px 0 rgba(255, 255, 255, 0.10);

    animation: obscura-pixels 8s infinite;
}


@keyframes obscura-flicker {
    0%,
    89%,
    91%,
    94%,
    100% {
        opacity: 1;
    }

    90% {
        opacity: 0.65;
    }

    92% {
        opacity: 0.88;
    }

    93% {
        opacity: 0.74;
    }
}


@keyframes obscura-red-glitch {
    0%,
    84%,
    91%,
    100% {
        opacity: 0;
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
    }

    85% {
        opacity: 0.62;
        transform: translateX(2px);
        clip-path: inset(0 0 58% 0);
    }

    86% {
        opacity: 0.22;
        transform: translateX(-2px);
        clip-path: inset(42% 0 24% 0);
    }

    87% {
        opacity: 0.75;
        transform: translateX(1px);
        clip-path: inset(68% 0 0 0);
    }

    88% {
        opacity: 0;
        transform: translateX(0);
    }

    89% {
        opacity: 0.28;
        transform: translateX(-1px);
        clip-path: inset(20% 0 62% 0);
    }

    90% {
        opacity: 0;
        transform: translateX(0);
    }
}


@keyframes obscura-pixels {
    0%,
    84%,
    91%,
    100% {
        opacity: 0;
        transform: translate(0, 0);
    }

    85% {
        opacity: 0.95;
        transform: translate(2px, -1px);
    }

    86% {
        opacity: 0.30;
        transform: translate(-2px, 2px);
    }

    87% {
        opacity: 0.80;
        transform: translate(1px, 1px);
    }

    88% {
        opacity: 0;
    }

    89% {
        opacity: 0.45;
        transform: translate(3px, -2px);
    }

    90% {
        opacity: 0;
    }
}


/* =========================================================
   Typography
   ========================================================= */

h1,
h2,
h3 {
    color: var(--text);
    text-wrap: balance;
}

h1 {
    margin: 0 0 16px;

    font-size: clamp(34px, 8vw, 50px);
    line-height: 1.05;

    font-weight: 760;
    letter-spacing: -0.04em;
}

h2 {
    margin: 40px 0 12px;

    font-size: 24px;
    line-height: 1.2;

    font-weight: 700;
    letter-spacing: -0.025em;
}

h3 {
    margin: 32px 0 10px;

    font-size: 19px;
    line-height: 1.3;

    font-weight: 700;
}

p {
    margin: 0 0 20px;
}

.lead {
    max-width: 560px;

    margin: 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.55;
}

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


/* =========================================================
   Legal content
   ========================================================= */

.card {
    margin: 0;
    padding: 0;

    background: transparent;

    border: 0;
    border-radius: 0;

    box-shadow: none;
}

.card > :last-child {
    margin-bottom: 0;
}


/* =========================================================
   Documents navigation
   ========================================================= */

.doc-list {
    display: grid;
    gap: 12px;

    margin-top: 38px;
}


/* ---------- Card ---------- */

.doc-link {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 76px;
    padding: 20px 22px;

    overflow: hidden;

    color: var(--text);
    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius);

    text-decoration: none;

    font-size: 17px;
    font-weight: 650;
    line-height: 1.3;

    isolation: isolate;

    touch-action: manipulation;

    transition:
        border-color 320ms ease,
        transform 320ms cubic-bezier(.16, 1, .3, 1),
        box-shadow 320ms ease;
}


/*
 * Основной белый слой.
 *
 * Он плавно "заполняет" кнопку
 * слева направо.
 */
.doc-link::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.135) 0%,
            rgba(255, 255, 255, 0.095) 55%,
            rgba(255, 255, 255, 0.055) 100%
        );

    transform: scaleX(0);
    transform-origin: left center;

    transition:
        transform 650ms cubic-bezier(.16, 1, .3, 1);
}


/*
 * Второй слой — digital/pixel texture.
 *
 * Он появляется чуть позже основной заливки.
 * Hard-stop repeating gradients создают
 * маленькие пиксельные сегменты.
 */
.doc-link::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.055) 0px,
            rgba(255, 255, 255, 0.055) 4px,
            transparent 4px,
            transparent 10px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 8px,
            rgba(255, 48, 69, 0.050) 8px,
            rgba(255, 48, 69, 0.050) 10px,
            transparent 10px,
            transparent 17px
        );

    background-position:
        0 0,
        0 0;

    transform: scaleX(0);
    transform-origin: left center;

    transition:
        transform 780ms cubic-bezier(.16, 1, .3, 1),
        opacity 260ms ease;
}


/*
 * Текст всегда выше обоих слоёв.
 */
.doc-link span {
    position: relative;
    z-index: 2;

    transition:
        transform 420ms cubic-bezier(.16, 1, .3, 1),
        text-shadow 300ms ease,
        color 300ms ease;
}


.doc-link:visited {
    color: var(--text);
}


/* ---------- Pixel movement ---------- */

@keyframes document-pixel-shift {
    0% {
        background-position:
            0 0,
            0 0;
    }

    35% {
        background-position:
            8px 0,
            0 4px;
    }

    70% {
        background-position:
            14px 0,
            0 -3px;
    }

    100% {
        background-position:
            20px 0,
            0 0;
    }
}


/* ---------- Desktop hover ---------- */

@media (hover: hover) {

    .doc-link:hover {
        border-color: var(--border-hover);

        transform: translateY(-2px);

        box-shadow:
            0 12px 34px rgba(0, 0, 0, 0.26),
            -2px 0 18px rgba(255, 48, 69, 0.055);
    }


    /*
     * Сначала идёт основная плавная заливка.
     */
    .doc-link:hover::before {
        transform: scaleX(1);
    }


    /*
     * Потом поверх неё проявляются цифровые пиксели.
     */
    .doc-link:hover::after {
        opacity: 1;

        transform: scaleX(1);

        animation:
            document-pixel-shift 900ms steps(7, end) forwards;

        transition-delay: 55ms;
    }


    /*
     * Текст немного уезжает вправо.
     */
    .doc-link:hover span {
        transform: translateX(8px);

        text-shadow:
            -1px 0 rgba(255, 48, 69, 0.18),
            1px 0 rgba(255, 255, 255, 0.055);
    }
}


/* ---------- Touch / Telegram mobile ---------- */

.doc-link:active {
    border-color: var(--border-hover);

    transform: scale(0.985);
}

.doc-link:active::before {
    transform: scaleX(1);

    transition-duration: 350ms;
}

.doc-link:active::after {
    opacity: 1;

    transform: scaleX(1);

    animation:
        document-pixel-shift 600ms steps(6, end) forwards;

    transition-duration: 450ms;
}

.doc-link:active span {
    transform: translateX(6px);

    text-shadow:
        -1px 0 rgba(255, 48, 69, 0.16);
}


/* =========================================================
   Back
   ========================================================= */

.back {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin: 0 0 28px;
    padding: 4px 0;

    color: var(--muted-strong);

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

    transition:
        color 180ms ease,
        transform 180ms ease;
}

.back:visited {
    color: var(--muted-strong);
}

@media (hover: hover) {
    .back:hover {
        color: var(--text);

        transform: translateX(-2px);
    }
}


/* =========================================================
   Links inside legal documents
   ========================================================= */

.card a:not(.back) {
    color: var(--text);

    text-decoration-color: #676a70;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.card a:not(.back):visited {
    color: var(--text);
}

.card a:not(.back):hover {
    text-decoration-color: var(--text);
}


/* =========================================================
   Lists
   ========================================================= */

ul,
ol {
    margin: 0 0 22px;
    padding-left: 24px;
}

li {
    margin: 7px 0;
}

li::marker {
    color: #73767c;
}


/* =========================================================
   Divider
   ========================================================= */

hr {
    height: 1px;

    margin: 36px 0;

    background: var(--border);

    border: 0;
}


/* =========================================================
   Accessibility
   ========================================================= */

a:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 4px;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 520px) {

    .container {
        padding: 30px 20px 44px;
    }

    .brand {
        margin-bottom: 28px;
    }

    h1 {
        font-size: 36px;
    }

    .lead {
        font-size: 17px;
    }

    .doc-list {
        gap: 10px;

        margin-top: 32px;
    }

    .doc-link {
        min-height: 68px;

        padding: 17px 18px;
    }
}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}