/* ==========================================================================
   AdsRotor — landing
   Dark, near-black canvas with violet/indigo atmosphere. Poppins carries the
   display voice (uppercase, heavy), Inter the body, Jura every label and
   number. Motion is the point of the page: a preloader iris, a rotor orb, a
   scroll-driven arc of format cards and two counter-running marquees.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    --bg: #030308;
    --bg-1: #07060e;
    --bg-2: #0b0916;
    --bg-3: #120f21;

    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.16);

    --fg: #f5f3fb;
    --fg-rgb: 245, 243, 251;
    --fg-70: rgba(245, 243, 251, 0.7);
    --fg-55: rgba(245, 243, 251, 0.55);
    --fg-40: rgba(245, 243, 251, 0.4);
    --fg-25: rgba(245, 243, 251, 0.25);

    --violet: #8b5cf6;
    --violet-hi: #a78bfa;
    --indigo: #516bef;
    --indigo-hi: #7b92ff;
    --magenta: #c13de8;

    --grad: linear-gradient(115deg, var(--violet) 0%, var(--indigo) 100%);
    --grad-text: linear-gradient(100deg, #d9c7ff 0%, var(--violet-hi) 38%, var(--indigo-hi) 100%);

    --font-display: "Poppins", "Inter", system-ui, sans-serif;
    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
    --font-label: "Jura", "Inter", system-ui, sans-serif;

    --r-sm: 8px;
    --r: 14px;
    --r-lg: 22px;
    --r-xl: 30px;

    --shell: 1280px;
    --gutter: 26px;
    --section-y: 130px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 90px;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }

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

::selection { background: var(--violet); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #23203a; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #322c52; }

/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

p { text-wrap: pretty; }

.head { max-width: 780px; margin-bottom: 68px; }
.head--center { margin-inline: auto; text-align: center; }

.head__title {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.head__sub {
    font-size: 1.02rem;
    color: var(--fg-55);
    max-width: 78ch;
    line-height: 1.75;
}

.head--center .head__sub { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
    --py: 14px;
    --px: 28px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--py) var(--px);
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-label);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.25s, border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.3s;
}

.btn--primary {
    background: var(--grad);
    color: #fff;
    box-shadow: 0 10px 34px -12px rgba(139, 92, 246, 0.85);
}

/* Second gradient layer cross-fades in on hover — a plain colour swap on a
   gradient background cannot be transitioned. */
.btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: linear-gradient(115deg, var(--magenta), var(--violet) 55%, var(--indigo));
    transition: opacity 0.35s;
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 44px -12px rgba(139, 92, 246, 1);
}

.btn--primary:hover::before { opacity: 1; }

.btn--ghost {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--line-strong);
    color: var(--fg-70);
    backdrop-filter: blur(6px);
}

.btn--ghost:hover {
    border-color: rgba(167, 139, 250, 0.55);
    background: rgba(139, 92, 246, 0.12);
    color: var(--fg);
    transform: translateY(-2px);
}

.btn--sm { --py: 10px; --px: 20px; font-size: 0.72rem; }
.btn--block { width: 100%; }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* --------------------------------------------------------------------------
   6. Preloader — iris closing on the page underneath
   -------------------------------------------------------------------------- */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: var(--bg);
    clip-path: circle(150% at 50% 50%);
    transition: clip-path 1s var(--ease);
}

.preloader.is-done {
    clip-path: circle(0% at 50% 50%);
    pointer-events: none;
}

.preloader__mark {
    width: 68px;
    height: 68px;
    animation: spin 8s linear infinite;
}

.preloader__word {
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--fg-55);
    padding-left: 0.42em;
}

.preloader__rail {
    width: 74px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.preloader__rail i {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--grad);
    transform: translateX(-100%);
    animation: load-sweep 1.1s var(--ease-soft) forwards;
}

@keyframes load-sweep {
    to { transform: translateX(0); }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 200;
    border-bottom: 1px solid transparent;
    transition: background-color 0.35s, border-color 0.35s, backdrop-filter 0.35s;
}

.header.is-stuck {
    background: rgba(3, 3, 8, 0.72);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom-color: var(--line);
}

.header__inner {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 78px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-right: auto;
}

.brand__icon {
    width: 36px;
    height: 36px;
    animation: spin 30s linear infinite;
}

.brand__word {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Brand takes the left edge, the nav and the language toggle ride the right. */
.nav { display: flex; gap: 2px; margin-left: auto; }

.nav__link {
    position: relative;
    padding: 9px 15px;
    font-family: var(--font-label);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-55);
    transition: color 0.25s;
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 2px;
    height: 1px;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
}

.nav__link:hover { color: var(--fg); }
.nav__link:hover::after { transform: scaleX(1); }

.header__inner .lang { margin-left: 24px; }

/* Language switcher: a single pill that opens a list. The chevron sits to the
   left of the code, so the code lines up with the nav text next to it and the
   pill reads as one control rather than as a row of choices. */

.lang { position: relative; }

.lang__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    font-family: var(--font-label);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--fg-70);
    cursor: pointer;
    transition: border-color 0.25s, color 0.25s, background 0.25s;
}

.lang__toggle:hover {
    border-color: var(--line-strong);
    color: var(--fg);
}

.lang__chev {
    flex: none;
    color: var(--fg-40);
    transition: transform 0.25s var(--ease), color 0.25s;
}

.lang__toggle:hover .lang__chev { color: var(--fg-70); }
.lang.is-open .lang__chev { transform: rotate(180deg); }

.lang__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 168px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--bg-2);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);

    /* Hidden by default without `display: none`, so the fade has something to
       animate; `visibility` keeps it out of the tab order while closed. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s var(--ease-soft),
                transform 0.2s var(--ease),
                visibility 0.2s;
}

.lang.is-open .lang__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    color: var(--fg-70);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.lang__opt:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--fg);
}

.lang__opt-code {
    font-family: var(--font-label);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--fg-25);
}

.lang__opt.is-active {
    background: var(--grad);
    color: #fff;
}

.lang__opt.is-active .lang__opt-code { color: rgba(255, 255, 255, 0.7); }

.menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 0;
    position: relative;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
}

.menu-toggle span {
    position: absolute;
    left: 12px;
    width: 17px;
    height: 1.5px;
    background: var(--fg);
    transition: transform 0.3s var(--ease);
}

.menu-toggle span:nth-child(1) { top: 17px; }
.menu-toggle span:nth-child(2) { top: 23px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.mobile-nav {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 18px var(--gutter) 30px;
    background: rgba(3, 3, 8, 0.97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
}

.mobile-nav.is-open { display: flex; }

.mobile-nav__link {
    padding: 14px 4px;
    font-family: var(--font-label);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-70);
    border-bottom: 1px solid var(--line);
}

.mobile-nav .lang { align-self: flex-start; margin-top: 20px; }

/* In the burger menu the pill hugs the left edge, so the list has to drop from
   the same side — anchored right it would hang off the screen. */
.mobile-nav .lang__menu { right: auto; left: 0; }
.mobile-nav .btn { margin-top: 18px; }

/* --------------------------------------------------------------------------
   7b. Page-wide rotor backdrop
   -------------------------------------------------------------------------- */

/* Sits above the root background but below every section, so the turbine shows
   through the gaps between cards and behind body copy. Sections that need to
   read cleanly dim it with their own translucent background instead of hiding
   it outright. */
.page-rotor {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.22;
    mask-image: radial-gradient(74% 64% at 50% 50%, transparent 4%, #000 30%, #000 62%, transparent 86%);
}

.page-rotor canvas { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}

.hero__atmosphere {
    position: absolute;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 44%, rgba(112, 43, 214, 0.28), transparent 38%),
        radial-gradient(circle at 50% 54%, rgba(28, 46, 148, 0.24), transparent 44%),
        radial-gradient(circle at 14% 80%, rgba(193, 61, 232, 0.08), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 26%),
        linear-gradient(180deg, #050308 0%, #000 100%);
}

/* The rotor is scenery here, not a subject: it runs oversized behind the copy
   and the veil above it pulls the middle down so the headline stays readable. */
.hero__rotor {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -3;
    width: min(1180px, 128vmin);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    pointer-events: none;
}

.hero__rotor canvas { width: 100%; height: 100%; }

.hero__veil {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(46% 34% at 50% 46%, rgba(3, 3, 8, 0.86), rgba(3, 3, 8, 0.5) 55%, transparent 76%),
        linear-gradient(180deg, var(--bg) 0%, transparent 22% 74%, var(--bg) 100%);
}

.hero__noise {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
    background-size: 96px 96px;
    mask-image: radial-gradient(120% 80% at 50% 45%, #000 25%, transparent 76%);
}

.hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: 130px 110px;
}

.hero__title { display: block; margin-bottom: 30px; }

/* The wordmark is the graphic element of the fold — it is allowed to run far
   larger than anything else on the page. */
.hero__word {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(3.6rem, 14vw, 12.5rem);
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -0.045em;
    background: linear-gradient(180deg, #ffffff 6%, #cbbcff 52%, #7f8fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 12px 46px rgba(139, 92, 246, 0.4));
}

.hero__claim {
    display: block;
    margin-top: 18px;
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.3vw, 1.7rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fg-70);
}

.hero__lead {
    max-width: 62ch;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--fg-55);
    margin-bottom: 38px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 44px;
}

.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: 26px;
    height: 42px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    display: grid;
    place-items: start center;
    padding-top: 8px;
    z-index: 3;
}

.hero__scroll span {
    width: 3px;
    height: 7px;
    border-radius: 999px;
    background: var(--violet-hi);
    animation: scroll-hint 1.8s ease-in-out infinite;
}

@keyframes scroll-hint {
    0%, 100% { transform: translateY(0); opacity: 1; }
    60% { transform: translateY(14px); opacity: 0; }
}

/* -- entrance ------------------------------------------------------------ */

.rise {
    opacity: 0;
    transform: translateY(28px);
    animation: rise 0.9s var(--ease) forwards;
    animation-delay: var(--d, 0s);
}

@keyframes rise {
    to { opacity: 1; transform: none; }
}

@keyframes ticker {
    to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   10. Formats — scroll-driven arc carousel
   -------------------------------------------------------------------------- */

.fmt { position: relative; }

/* Runway height is set from JS: it is the vertical distance the page scrolls
   through while the panel below stays pinned, and it maps onto arc rotation. */
.fmt__runway { position: relative; }

.fmt__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fmt__aura {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 40%, rgba(112, 43, 214, 0.16), transparent 55%),
        radial-gradient(circle at 18% 74%, rgba(193, 61, 232, 0.06), transparent 46%),
        radial-gradient(circle at 84% 28%, rgba(81, 107, 239, 0.08), transparent 46%);
}

/* Outlined display type behind the cards, two rows counter-scrolling. */
.fmt__marquee {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.fmt__mq-row {
    display: flex;
    width: max-content;
    animation: ticker 34s linear infinite;
}

.fmt__mq-row--rev { animation-duration: 44s; animation-direction: reverse; }

.fmt__mq-row span {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(64px, 15vw, 230px);
    line-height: 0.92;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(139, 92, 246, 0.3);
}

.fmt__head {
    position: relative;
    z-index: 4;
    text-align: center;
    padding: 92px var(--gutter) 32px;
}

.fmt__title {
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.fmt__sub {
    max-width: 62ch;
    margin-inline: auto;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--fg-40);
}

/* The stage is a fixed point; cards are positioned from its centre and swung
   around an arc whose radius is far below the fold. */
.fmt__stage {
    position: relative;
    flex: 1;
    width: 100%;
    z-index: 3;
}

.fmt-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 540px;
    height: 620px;
    margin-left: -270px;
    margin-top: -310px;
    border-radius: 38px;
    overflow: hidden;
    background:
        radial-gradient(90% 70% at 22% 4%, rgba(255, 255, 255, 0.2), transparent 58%),
        radial-gradient(80% 60% at 100% 100%, rgba(24, 6, 56, 0.34), transparent 62%),
        linear-gradient(152deg, #9061f8 0%, #6f5cf2 44%, #4f63ea 100%);
    box-shadow:
        0 46px 100px -30px rgba(80, 20, 190, 0.72),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Faint dot grid over the panel — enough texture to keep the flat brand colour
   from reading as a plain swatch. */
.fmt-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(90% 80% at 50% 40%, #000, transparent 78%);
}

.fmt-card__art {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 14px 12px;
    display: grid;
    place-items: center;
}

.fmt-card__art svg { width: 100%; height: 100%; }

/* -- wireframe illustration ---------------------------------------------- */

.wf {
    fill: none;
    stroke: rgba(19, 5, 46, 0.6);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The phone stands in front of the monitor, so its body has to be opaque —
   otherwise the monitor's wireframe shows straight through it. */
.phone rect {
    fill: #7a5ef2;
    stroke: none;
    filter: drop-shadow(-16px 12px 30px rgba(21, 5, 52, 0.5));
}

.slot rect {
    fill: #fdfcff;
    filter: drop-shadow(0 12px 26px rgba(21, 5, 52, 0.42));
}

.slot--float rect { animation: slot-pulse 3.6s var(--ease-soft) infinite; }

@keyframes slot-pulse {
    0%, 100% { opacity: 1; transform: translateY(0); }
    50% { opacity: 0.94; transform: translateY(-4px); }
}

.slot__label {
    fill: #180a3a;
    font-family: var(--font-display);
    font-weight: 800;
    text-anchor: middle;
    letter-spacing: -0.01em;
}

.slot__label--xl { font-size: 60px; }
.slot__label--lg { font-size: 34px; }
.slot__label--md { font-size: 38px; }
.slot__label--sm { font-size: 26px; }
.slot__label--xs { font-size: 20px; }
.slot__label--left { text-anchor: start; }

.slot__play { fill: #8b5cf6; filter: none; }
.slot__playicon { fill: #fdfcff; }

.cursor { fill: #180a3a; }

/* -- caption below the arc ----------------------------------------------- */

.fmt__captions {
    position: relative;
    z-index: 4;
    width: min(660px, 92vw);
    min-height: 128px;
    margin-inline: auto;
    text-align: center;
}

.fmt-cap {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
    pointer-events: none;
}

.fmt-cap.is-on { opacity: 1; transform: none; }

.fmt-cap h3 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.fmt-cap p {
    font-size: 0.94rem;
    line-height: 1.7;
    color: var(--fg-55);
    max-width: 54ch;
    margin-inline: auto;
}

.fmt__rail {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding-bottom: 26px;
}

.fmt__arrow {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--fg-70);
    cursor: pointer;
    transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.25s var(--ease);
}

.fmt__arrow svg { width: 18px; height: 18px; }

.fmt__arrow:hover {
    border-color: rgba(167, 139, 250, 0.6);
    background: rgba(139, 92, 246, 0.14);
    color: var(--fg);
    transform: translateY(-2px);
}

.fmt__dots { display: flex; gap: 8px; }

.fmt__dots button {
    width: 26px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: width 0.4s var(--ease), background 0.35s;
}

.fmt__dots button.is-active { width: 52px; background: var(--grad); }

/* --------------------------------------------------------------------------
   11. Tiles
   -------------------------------------------------------------------------- */

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 18px;
}

.tile {
    position: relative;
    padding: 36px 32px 34px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
    overflow: hidden;
    transition: border-color 0.35s, transform 0.35s var(--ease);
}

/* Pointer-tracked wash; --mx/--my come from main.js. */
.tile::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s;
    pointer-events: none;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 92, 246, 0.16), transparent 70%);
}

.tile:hover { border-color: rgba(167, 139, 250, 0.34); transform: translateY(-4px); }
.tile:hover::before { opacity: 1; }

.tile__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(167, 139, 250, 0.32);
    border-radius: var(--r);
    background: rgba(139, 92, 246, 0.12);
    color: var(--violet-hi);
    margin-bottom: 24px;
}

.tile__icon svg { width: 21px; height: 21px; }

.tile h3 {
    font-size: 1.06rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-bottom: 12px;
}

.tile p { font-size: 0.88rem; line-height: 1.7; color: var(--fg-40); }

/* --------------------------------------------------------------------------
   12. Audience sections
   -------------------------------------------------------------------------- */

.section--alt {
    background:
        radial-gradient(90% 120% at 50% 0%, rgba(139, 92, 246, 0.07), transparent 60%),
        rgba(7, 6, 14, 0.72);
    border-block: 1px solid var(--line);
}

.audience .head { margin-bottom: 58px; }

/* --------------------------------------------------------------------------
   13. About
   -------------------------------------------------------------------------- */

/* The heading stays centred and breaks into two lines; the copy below is one
   continuous block of text running the full width of the shell, on the same
   left and right lines as the advertiser and publisher card grids. */
.about .head { max-width: none; }

/* Smaller than the other section titles so the forced break lands two lines
   wide instead of spilling onto a third. */
.about .head__title { font-size: clamp(1.5rem, 3.2vw, 2.6rem); }

.about__copy {
    text-align: left;
}

.about__copy p {
    font-size: 0.98rem;
    line-height: 1.9;
    color: var(--fg-55);
    /* Красная строка: абзац начинается с отступа. */
    text-indent: 2em;
}

/* --------------------------------------------------------------------------
   17. Contact
   -------------------------------------------------------------------------- */

.contact__panel {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--bg-1);
    overflow: hidden;
}

.contact__aside {
    padding: 60px 52px;
    background:
        radial-gradient(140% 100% at 0% 0%, rgba(139, 92, 246, 0.18), transparent 58%),
        radial-gradient(100% 90% at 100% 100%, rgba(81, 107, 239, 0.12), transparent 60%),
        var(--bg-2);
    border-right: 1px solid var(--line);
}

.contact__direct {
    margin-top: 36px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 10px;
    font-size: 0.86rem;
    color: var(--fg-40);
}

.contact__direct a { color: var(--fg-70); border-bottom: 1px solid var(--line-strong); transition: color 0.25s, border-color 0.25s; }
.contact__direct a:hover { color: var(--violet-hi); border-color: var(--violet); }

.contact__form { padding: 60px 52px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 20px; }

.field__label {
    display: block;
    font-family: var(--font-label);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-55);
    margin-bottom: 9px;
}

.field__opt { color: var(--fg-25); letter-spacing: 0.06em; }

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    background: rgba(0, 0, 0, 0.35);
    font-size: 0.9rem;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

.field textarea { resize: vertical; min-height: 124px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-25); }

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

.field select {
    appearance: none;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--fg-40) 50%),
        linear-gradient(135deg, var(--fg-40) 50%, transparent 50%);
    background-position: right 19px center, right 14px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.field select option { background: #0b0916; }

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: #ef4444; }

.field__error { display: none; margin-top: 7px; font-size: 0.76rem; color: #f87171; }
.field.is-invalid .field__error { display: block; }

.form-note { margin-top: 14px; font-size: 0.74rem; color: var(--fg-25); text-align: center; }

.form-state {
    padding: 44px 28px;
    text-align: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: rgba(0, 0, 0, 0.3);
}

.form-state__icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(167, 139, 250, 0.34);
    color: var(--violet-hi);
}

.form-state h3 { font-size: 1.2rem; text-transform: uppercase; margin-bottom: 10px; }
.form-state p { font-size: 0.88rem; color: var(--fg-40); }
.form-state button { margin-top: 22px; }

.form-state--error .form-state__icon {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.footer {
    position: relative;
    border-top: 1px solid var(--line);
    background: rgba(7, 6, 14, 0.82);
    padding-top: 64px;
    overflow: hidden;
}

.footer .shell { position: relative; z-index: 1; }

.footer__top {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    justify-content: space-between;
    padding-bottom: 24px;
}

.footer__brand { margin-right: 0; }
.footer__cols { display: flex; flex-wrap: wrap; gap: 64px; }
.footer__col { min-width: 180px; }

.footer__heading {
    font-family: var(--font-label);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--fg-25);
    margin-bottom: 20px;
}

.footer__links { display: grid; gap: 11px; font-size: 0.88rem; }

.footer__links a,
.footer__contacts a { color: var(--fg-40); transition: color 0.25s, border-color 0.25s; }

/* Telegram and email sit inside a run of plain text, so they need to look
   clickable on their own rather than inherit the colour around them. */
.footer__contacts a { color: var(--fg-70); border-bottom: 1px solid var(--line-strong); }

.footer__links a:hover,
.footer__contacts a:hover { color: var(--violet-hi); }

.footer__contacts a:hover { border-color: var(--violet); }

.footer__contacts { display: grid; gap: 11px; font-size: 0.86rem; color: var(--fg-40); line-height: 1.6; }

/* Oversized wordmark, sunk behind the bottom row rather than stacked above it
   — it is scenery, so it must not push the layout around. */
/* Scenery, but it has to stay inside its own block: the box is inset from the
   shell on both sides and the type is sized to fit within it rather than run
   off the edge of the screen. */
.footer__word {
    position: absolute;
    left: 50%;
    bottom: 62px;
    transform: translateX(-50%);
    width: calc(100% - 38px);
    z-index: 0;
    pointer-events: none;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(48px, 11.5vw, 168px);
    line-height: 0.9;
    text-align: center;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1.2px rgba(139, 92, 246, 0.2);
    user-select: none;
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding-block: 12px 18px;
    font-size: 0.78rem;
    color: var(--fg-25);
}

.footer__bottom a { transition: color 0.25s; }
.footer__bottom a:hover { color: var(--violet-hi); }

/* --------------------------------------------------------------------------
   19. Legal page
   -------------------------------------------------------------------------- */

.header__back {
    font-family: var(--font-label);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-40);
    transition: color 0.25s;
}

.header__back:hover { color: var(--fg); }

.legal-page {
    position: relative;
    padding-block: 160px 100px;
}

.legal-page::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 520px;
    pointer-events: none;
    background: radial-gradient(70% 100% at 50% 0%, rgba(139, 92, 246, 0.14), transparent 68%);
}

.legal-page__head { position: relative; max-width: 780px; margin-bottom: 44px; }

.legal-page__head h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.legal-page__head p { font-size: 1rem; color: var(--fg-55); line-height: 1.75; }

.legal-nav {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 58px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--line);
}

.legal-nav a {
    padding: 10px 20px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    font-family: var(--font-label);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-55);
    transition: border-color 0.25s, color 0.25s, background 0.25s;
}

.legal-nav a:hover {
    border-color: rgba(167, 139, 250, 0.55);
    background: rgba(139, 92, 246, 0.12);
    color: var(--fg);
}

.legal-doc { position: relative; max-width: 78ch; margin-bottom: 88px; scroll-margin-top: 110px; }

.legal-doc h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    text-transform: uppercase;
    padding-bottom: 18px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--line);
}

.legal-doc h3 { font-size: 1.02rem; font-weight: 700; margin: 38px 0 14px; }

.legal-doc p,
.legal-doc li { font-size: 0.9rem; color: var(--fg-40); line-height: 1.8; }

.legal-doc p { margin-bottom: 14px; }

.legal-doc ul { margin: 0 0 20px; padding-left: 20px; display: grid; gap: 9px; list-style: disc; }
.legal-doc li::marker { color: var(--violet-hi); }

.legal-doc a { color: var(--fg-70); border-bottom: 1px solid var(--line-strong); transition: color 0.25s, border-color 0.25s; }
.legal-doc a:hover { color: var(--violet-hi); border-color: var(--violet); }

.legal-updated {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-family: var(--font-label);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-25);
}

/* --------------------------------------------------------------------------
   20. Reveal
   -------------------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-visible { opacity: 1; transform: none; }
.stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    :root { --section-y: 96px; }

    .contact__panel { grid-template-columns: 1fr; }
    .contact__aside { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 900px) {
    .nav,
    .header__inner .lang { display: none; }

    .menu-toggle { display: block; }

    /* Pinning fights small viewports: the arc collapses into a snap rail. */
    .fmt__runway { height: auto !important; }

    .fmt__pin {
        position: static;
        height: auto;
        padding-bottom: 40px;
    }

    .fmt__marquee { display: none; }
    .fmt__head { padding-top: 90px; }

    .fmt__stage {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 30px max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
    }

    .fmt__stage::-webkit-scrollbar { display: none; }

    .fmt-card {
        position: relative;
        left: auto;
        top: auto;
        margin: 0;
        flex: 0 0 min(440px, 84vw);
        height: min(540px, 64vh);
        scroll-snap-align: center;
        transform: none !important;
        opacity: 1 !important;
    }

    .fmt__captions { min-height: 170px; padding-inline: var(--gutter); }
    .fmt__rail { padding-bottom: 0; }
}

@media (max-width: 640px) {
    :root { --gutter: 18px; }

    .hero { min-height: auto; }
    .hero__inner { padding-block: 118px 90px; }
    .hero__scroll { display: none; }
    .hero__rotor { width: 150vmin; opacity: 0.5; }
    .contact__aside, .contact__form { padding: 38px 24px; }
    .field-row { grid-template-columns: 1fr; gap: 0; }
    .footer__cols { gap: 36px; }
    .tile { padding: 28px 24px; }
    .fmt-card__art { padding: 12px 10px; }
}

/* --------------------------------------------------------------------------
   22. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal, .rise { opacity: 1; transform: none; }
    .preloader { display: none; }
}

/* --------------------------------------------------------------------------
   23. Auth — header buttons and the log in / sign up modal

   Собственный слой поверх шапки (z 200) и ниже прелоадера (z 9999). Внутри —
   ещё один ротор: страничный к этому моменту уехал вниз вместе со скроллом.
   -------------------------------------------------------------------------- */

.auth-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-left: 18px;
}

.auth-cta .btn { --py: 9px; --px: 20px; font-size: 0.7rem; }

.auth-cta__link {
    padding: 6px 2px;
    border: 0;
    background: none;
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-55);
    cursor: pointer;
    transition: color 0.25s;
}

.auth-cta__link:hover { color: var(--fg); }

.mobile-nav__auth {
    display: flex;
    gap: 10px;
    margin: 14px 0 4px;
}

.mobile-nav__auth .btn { flex: 1; }

/* ---- overlay ---- */

.auth[hidden] { display: none; }

.auth {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    place-items: center;
    padding: 24px var(--gutter);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.auth__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 3, 8, 0.82);
    backdrop-filter: blur(16px) saturate(140%);
    animation: auth-fade 0.35s var(--ease-soft) both;
}

/* Ротор живёт между подложкой и диалогом: сквозь стекло карточки он читается
   как подсветка, а не как картинка за текстом. */
.auth__rotor {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(112vmin, 900px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    opacity: 0.42;
    pointer-events: none;
    animation: auth-fade 0.9s var(--ease-soft) both;
}

.auth__rotor canvas { width: 100%; height: 100%; }

.auth__dialog {
    position: relative;
    width: min(468px, 100%);
    margin: auto;
    padding: 38px 36px 32px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xl);
    background:
        radial-gradient(120% 90% at 50% -20%, rgba(139, 92, 246, 0.18), transparent 60%),
        rgba(7, 6, 14, 0.86);
    box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(139, 92, 246, 0.08);
    backdrop-filter: blur(22px);
    animation: auth-rise 0.45s var(--ease) both;
}

.auth__x {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    color: var(--fg-40);
    cursor: pointer;
    transition: color 0.25s, border-color 0.25s, background 0.25s;
}

.auth__x:hover {
    color: var(--fg);
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.07);
}

.auth__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
}

.auth__mark { animation: spin 30s linear infinite; }
.auth__brand .brand__word { font-size: 0.9rem; }

/* ---- tabs ---- */

.auth__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    padding: 3px;
    margin-bottom: 26px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
}

.auth__tabs[hidden] { display: none; }

.auth__tab {
    padding: 10px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-family: var(--font-label);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-40);
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}

.auth__tab:hover { color: var(--fg); }

.auth__tab.is-active {
    background: var(--grad);
    color: #fff;
    box-shadow: 0 8px 26px -14px rgba(139, 92, 246, 0.9);
}

/* ---- panes ---- */

.auth__pane[hidden] { display: none; }
.auth__pane { animation: auth-swap 0.32s var(--ease) both; }

.auth__title {
    font-family: var(--font-display);
    font-size: 1.24rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    margin-bottom: 8px;
}

.auth__sub {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--fg-40);
    text-align: center;
    margin-bottom: 26px;
}

.auth__pane .field { margin-bottom: 16px; }

/* Ссылка «забыли пароль» встаёт под поле пароля, справа. */
.auth__minor {
    display: block;
    margin: -6px 0 20px auto;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.78rem;
    color: var(--fg-40);
    cursor: pointer;
    transition: color 0.25s;
}

.auth__minor:hover { color: var(--violet-hi); }

.auth__switch {
    margin-top: 18px;
    font-size: 0.8rem;
    color: var(--fg-40);
    text-align: center;
}

.auth__switch button {
    padding: 0;
    border: 0;
    background: none;
    font-size: inherit;
    font-weight: 600;
    color: var(--violet-hi);
    cursor: pointer;
    transition: color 0.25s;
}

.auth__switch button:hover { color: var(--fg); }

/* ---- password field extras ---- */

.field__lock { position: relative; }
.field__lock input { padding-right: 46px; }

.field__eye {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--fg-40);
    cursor: pointer;
    transition: color 0.25s, background 0.25s;
}

.field__eye:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); }

/* Глаз рисуем в CSS, чтобы не тащить ещё один svg в разметку каждого поля. */
.field__eye::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--eye-open) center / contain no-repeat;
    mask: var(--eye-open) center / contain no-repeat;
}

.field__eye.is-on::before {
    -webkit-mask-image: var(--eye-off);
    mask-image: var(--eye-off);
}

:root {
    --eye-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 12S5.4 5.4 12 5.4 22.2 12 22.2 12 18.6 18.6 12 18.6 1.8 12 1.8 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3C/svg%3E");
    --eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 5.6A9.7 9.7 0 0 1 12 5.4c6.6 0 10.2 6.6 10.2 6.6a18 18 0 0 1-3.3 4.2M6.4 6.9A17.8 17.8 0 0 0 1.8 12S5.4 18.6 12 18.6a9.6 9.6 0 0 0 4-.85'/%3E%3Cpath d='M10 10a2.8 2.8 0 0 0 4 4'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}

/* ---- password strength ---- */

.pw { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.pw[hidden] { display: none; }

.pw__rail {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.pw__rail i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--grad);
    transition: width 0.35s var(--ease), background 0.35s;
}

.pw[data-level="1"] .pw__rail i { width: 33%; background: #ef4444; }
.pw[data-level="2"] .pw__rail i { width: 66%; background: #f59e0b; }
.pw[data-level="3"] .pw__rail i { width: 100%; background: linear-gradient(90deg, var(--violet), #34d399); }

.pw__label {
    font-family: var(--font-label);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-40);
    white-space: nowrap;
}

/* ---- segmented radio (advertiser / publisher) ---- */

.seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Радио и чекбокс прячем, а не удаляем: они остаются доступны с клавиатуры
   и для скринридера. position:relative на обёртке — чтобы скрытый инпут не
   уехал к дальнему предку и не растянул страницу. */
.seg__opt { position: relative; }

.seg__opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.seg__opt span {
    display: block;
    padding: 12px 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    background: rgba(0, 0, 0, 0.35);
    font-family: var(--font-label);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--fg-55);
    cursor: pointer;
    transition: border-color 0.25s, background 0.25s, color 0.25s;
}

.seg__opt span:hover { color: var(--fg); border-color: rgba(167, 139, 250, 0.45); }

.seg__opt input:checked + span {
    border-color: rgba(167, 139, 250, 0.7);
    background: rgba(139, 92, 246, 0.16);
    color: var(--fg);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

.seg__opt input:focus-visible + span { outline: 2px solid var(--violet-hi); outline-offset: 2px; }

/* ---- terms checkbox ---- */

.field--check { margin-top: 20px; }

.check {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    align-items: start;
    cursor: pointer;
}

.check input { position: absolute; opacity: 0; pointer-events: none; }

.check__box {
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    transition: background 0.25s, border-color 0.25s;
}

.check input:checked + .check__box {
    border-color: transparent;
    background:
        var(--grad) padding-box,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.check input:focus-visible + .check__box { outline: 2px solid var(--violet-hi); outline-offset: 2px; }

.check__text { font-size: 0.8rem; line-height: 1.5; color: var(--fg-55); }
.check__text a { color: var(--violet-hi); text-decoration: underline; text-underline-offset: 2px; }
.check__text a:hover { color: var(--fg); }

.field--check .field__error { margin-left: 30px; }

/* ---- экран ошибки ---- */

.auth__fail { text-align: center; padding-block: 8px 4px; }

.auth__fail-mark {
    width: 66px;
    height: 66px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(248, 113, 113, 0.34);
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
    box-shadow: 0 0 34px -10px rgba(248, 113, 113, 0.55);
}

/* Код ошибки — крупной цифрой: экран должен читаться как сбой сервера
   с первого взгляда, ещё до того, как прочитают текст. */
.auth__fail-code {
    font-family: var(--font-label);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--fg-25);
    margin-bottom: 14px;
}

.auth__fail .btn { margin-top: 6px; }

@keyframes auth-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes auth-rise {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes auth-swap {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
    .auth-cta { display: none; }
}

@media (max-width: 640px) {
    .auth { padding: 16px 14px; }
    .auth__dialog { padding: 32px 22px 26px; border-radius: var(--r-lg); }
    .auth__rotor { width: 130vmin; opacity: 0.32; }
    .seg { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .auth__rotor { display: none; }
    .auth__backdrop, .auth__dialog, .auth__pane { animation: none; }
}

/* --------------------------------------------------------------------------
   Подвал: ряд иконок и кнопки под карточками
   -------------------------------------------------------------------------- */

/* Иконки живут под логотипом, в той же колонке: так они читаются как «вот мы»,
   а не как отдельная полоса над копирайтом. */
.footer__brand-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.footer__social {
    display: flex;
    gap: 12px;
    align-items: center;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted, #9aa0b5);
    background: rgba(255, 255, 255, 0.02);
    transition: color .18s ease, border-color .18s ease, transform .18s ease, background .18s ease;
}

.social-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
}

.social-btn:focus-visible {
    outline: 2px solid rgba(139, 92, 246, 0.9);
    outline-offset: 2px;
}

/* Кнопка «зарегистрироваться» под карточками раздела. */
.audience__cta {
    margin-top: 54px;
    text-align: center;
}

.audience__cta-note {
    margin: 14px 0 0;
    font-size: 0.9rem;
    color: var(--muted, #9aa0b5);
}

/* Заголовок разделов «Buy traffic» и «Monetize traffic» стоял в 130 пикселях
   от линии над ним: при переходе из шапки по якорю экран открывался пустотой,
   а сам заголовок оказывался у середины. Сверху оставляем около сантиметра —
   нижний отступ не трогаем, между разделами воздух нужен. */
.audience { padding-top: 40px; }

/* --------------------------------------------------------------------------
   Уведомление о хранении в браузере
   -------------------------------------------------------------------------- */

.cookie-note {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 18px;
    width: min(920px, calc(100vw - 32px));
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(10, 9, 18, 0.94);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.cookie-note[hidden] { display: none; }

.cookie-note__text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--muted, #9aa0b5);
}

.cookie-note__text a { color: inherit; text-decoration: underline; }
.cookie-note__text a:hover { color: #fff; }

.cookie-note .btn { flex: 0 0 auto; }

@media (max-width: 640px) {
    .cookie-note {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        text-align: left;
    }
}