/* ==========================================================================
   About Playgama — page layer. Loads AFTER the vendored library css/.
   Owner decisions baked in:
   - SF Pro to DM Sans: override --font-body / --font-heading, so every
     vendored body / label / heading class follows automatically.
   - --font-promo (Cal Sans) kept from the library for section headings.
   - DM Mono + Times New Roman kept as deliberate stylistic accents.
   - Grid 1128 / 76px margins.
   ========================================================================== */

:root {
    --font-heading: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-serif: "Times New Roman", Times, serif;

    --page-max: 1128px;
    --page-pad: 76px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    background-color: #9747ff;
} /* the ROOT canvas paints the iOS status-bar / Dynamic-Island strip and overscroll (theme-color does NOT — it only tints the bottom bar); JS re-tints it per section, this is the hero load state */
body {
    margin: 0;
    /* Safari 26 tints its Liquid-Glass top/bottom bars from the BODY's
     background-color (the html canvas alone is not enough — benfrain.com/
     ios26-safari-theme-color-tab-tinting…). Load state = hero purple, JS
     re-tints per section; every section owns an explicit background, so
     this colour never shows through the page itself. */
    background: #9747ff;
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img {
    max-width: 100%;
    display: block;
}
a {
    color: inherit;
}
main > section {
    scroll-margin-top: 96px;
}

/* 1128 = content width; page padding sits OUTSIDE it (max-width = 1128 + 2·pad = 1280) */
.container {
    width: 100%;
    max-width: calc(var(--page-max) + var(--page-pad) * 2);
    margin-inline: auto;
    padding-inline: var(--page-pad);
}

/* Stylistic accent (kept per owner) — the testimonial quote */
.u-quote {
    font-family: var(--font-serif);
}

/* ==========================================================================
   Header — Figma 584:835 (calm) · 584:872 (scrolled) · 585:1014 (opened) ·
   585:910 (compact). Transparent always — no surface/backdrop in any state.
   Calm: square logo plate + outline pills with deliberately NO gap; scrolled:
   nav collapses into a "Menu" pill; opened: filled pills wrap under the
   logo row (gap 4) and the fennec chip fills.
   ========================================================================== */
.au-header {
    position: fixed;
    inset: env(safe-area-inset-top, 0px) 0 auto 0;
    z-index: 100; /* viewport-fit=cover: the whole bar drops below the Dynamic Island / clock (env()=0 elsewhere); offsetting via TOP survives every breakpoint's padding override */
    padding-block: var(--space-24);
    background: transparent; /* per design: no подложка, ever — Safari 26 samples fixed edge elements, a surface here would tint the island strip */
}
.au-header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-16);
}
.au-header-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0;
    min-width: 0;
}

.au-logo {
    display: inline-flex;
    flex: 0 0 auto;
}
.au-logo img {
    height: 48px;
    width: auto;
    display: block;
    transition: filter var(--duration-base) var(--ease-out);
}
/* The logo plate follows the buttons' rule (SVG = one lavender plate with the
   wordmark knocked out): floating over dark → pure white, over light → pure
   black. Calm state at the top keeps the lavender fill. */
.au-header.is-scrolled .au-logo img,
.au-header.is-open .au-logo img {
    filter: brightness(0) invert(1);
}
.au-header.is-on-light.is-scrolled .au-logo img,
.au-header.is-on-light.is-open .au-logo img {
    filter: brightness(0);
}

/* Menu / Close pill — hidden while calm on desktop, shown when scrolled */
.au-menu-pill {
    display: none;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding-inline: var(--space-16);
    border: 1px solid var(--color-lavender-600);
    border-radius: var(--radius-rounded);
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-lavender-600);
    transition:
        background-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out);
}
/* Hover = same as a nav pill: full fill + inverted label */
@media (hover: hover) {
    .au-menu-pill:hover {
        background-color: var(--color-lavender-600);
        color: var(--color-black);
    }
}

/* Nav — calm row: outline pills, NO gap between items (стилевое решение) */
.au-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    min-width: 0;
}
.au-navlink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding-inline: var(--space-16);
    border: 1px solid var(--color-lavender-600);
    border-radius: var(--radius-rounded);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-lavender-600);
    text-decoration: none;
    white-space: nowrap;
    transition:
        color var(--duration-base) var(--ease-out),
        background-color var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
    .au-navlink:hover {
        background-color: var(--color-lavender-600);
        color: var(--color-black);
    }
}

/* Fennec chip → playgama.com */
.au-fennec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border: 1px solid var(--color-lavender-600);
    border-radius: var(--radius-rounded);
    background: transparent;
    color: var(--color-lavender-600);
    transition:
        background-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out);
}
/* Hover = full fill + inverted icon. ALL header-control hovers live behind
   (hover: hover): on touch, iOS keeps :hover latched after a tap — the fennec
   stayed a white pill with a black fennec until the next tap elsewhere
   (owner, 14.07.2026). Touch gets no hover state at all — tap acts directly. */
@media (hover: hover) {
    .au-fennec:hover {
        background-color: var(--color-lavender-600);
        color: var(--color-carbon-300);
    }
}
.au-fennec .icon {
    width: 32px;
    height: 32px;
    background-color: currentColor;
    mask: url("assets/icons/system/fennec-24.svg") center / contain no-repeat;
    -webkit-mask: url("assets/icons/system/fennec-24.svg") center / contain no-repeat;
}

/* Scrolled (desktop): nav → Menu pill. Opening restores the row inline
   with the logo; scrolling still closes it. */
.au-header.is-scrolled:not(.is-open) .au-menu-pill {
    display: inline-flex;
}
.au-header.is-scrolled:not(.is-open) .au-nav {
    display: none;
}

/* Close chip (Figma 613:11393) — sits after the logo, ONLY when the user
   opened the menu themselves (.is-open); the calm auto-shown row has none. */
.au-menu-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border: 1px solid var(--hdr, var(--color-lavender-600));
    border-radius: var(--radius-rounded);
    background: transparent;
    cursor: pointer;
    color: var(--hdr, var(--color-lavender-600));
    transition:
        background-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out);
}
.au-header.is-open .au-menu-close {
    display: inline-flex;
    animation: au-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
    .au-menu-close:hover {
        background-color: var(--hdr, var(--color-lavender-600));
        color: var(--hdr-ink, var(--color-black));
    }
}
.au-menu-close .icon {
    width: 24px;
    height: 24px;
    background-color: currentColor;
    mask: url("assets/icons/system/close-24.svg") center / contain no-repeat;
    -webkit-mask: url("assets/icons/system/close-24.svg") center / contain no-repeat;
}
@keyframes au-fadein {
    from {
        opacity: 0;
    }
}

/* Floating states (scrolled / opened): NO blend/inversion — the chrome switches
   between PURE white (over dark sections) and PURE black (over light ones);
   JS toggles .is-on-light from the section under the header. Никаких «грязных»
   инвертированных цветов. The calm state at the top keeps the lavender look.
   Opened menu keeps the SAME outlined style as the primary row; hover fills.
   NB: пилюли меню всегда вплотную — gap 0 во всех состояниях. */
.au-header.is-scrolled,
.au-header.is-open {
    --hdr: var(--color-white);
    --hdr-ink: var(--color-black);
}
.au-header.is-on-light.is-scrolled,
.au-header.is-on-light.is-open {
    --hdr: var(--color-black);
    --hdr-ink: var(--color-white);
}

.au-header.is-scrolled .au-navlink,
.au-header.is-open .au-navlink,
.au-header.is-scrolled .au-menu-pill,
.au-header.is-open .au-menu-pill,
.au-header.is-scrolled .au-fennec,
.au-header.is-open .au-fennec {
    border-color: var(--hdr);
    color: var(--hdr);
    background-color: transparent;
}
@media (hover: hover) {
    .au-header.is-scrolled .au-navlink:hover,
    .au-header.is-open .au-navlink:hover,
    .au-header.is-scrolled .au-menu-pill:hover,
    .au-header.is-open .au-menu-pill:hover,
    .au-header.is-scrolled .au-fennec:hover,
    .au-header.is-open .au-fennec:hover {
        background-color: var(--hdr);
        border-color: var(--hdr);
        color: var(--hdr-ink);
    }
}

/* ==========================================================================
   Reveal — Apple-HIG enter: gentle fade + rise, staggered via --reveal-delay.
   Gated behind html.js so no-JS users always see content.
   ========================================================================== */
html.js .au-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity var(--duration-slower) var(--ease-out),
        transform var(--duration-slower) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
html.js .au-reveal.is-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    html.js .au-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   01 · Hero — Figma 501:51. Purple canvas, content pinned to the bottom:
   744px intro (Cal Sans h1 + DM Sans 21 lead) · 264px aside (stats + story),
   both bottom-aligned, 120px apart (744 + 120 + 264 = 1128).
   ========================================================================== */
.au-hero {
    position: relative;
    overflow: clip; /* hosts the cascade canvas — nothing may paint past the section */
    min-height: 100svh;
    background: var(--color-purple-400);
    color: var(--color-lavender-600);
    display: flex;
    align-items: flex-end;
    padding-block: 160px 56px; /* top clears the fixed header on short screens */
}
.au-hero .container {
    position: relative;
    z-index: 1;
    transition: opacity 200ms var(--ease-out);
} /* text above the cascade */
/* «Throwing mode» (mouse held down on the hero): the text dims to 50% and stops
   catching the pointer, so cards can be thrown right over it; releasing restores.
   user-select kills the text-selection sweep too — pointer-events alone does not
   stop the browser from extending a selection started on the empty canvas. */
.au-hero.is-throwing {
    user-select: none;
    -webkit-user-select: none;
}
.au-hero.is-throwing .container {
    opacity: 0.5;
    pointer-events: none;
}
/* Ambient solitaire layer — behind the text; trails self-dissolve on the
   canvas itself, and the mask fades everything fast near the bottom text
   zone (h1 / lead / stats) so reading stays undisturbed. */
.au-hero-fx {
    /* NB: width/height are explicit — an abs-positioned REPLACED element with
     auto sizes keeps its intrinsic (buffer) size instead of stretching to the
     insets, which spilled the canvas 900px into the next section. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 42%,
        rgb(0 0 0 / 0.15) 60%,
        rgb(0 0 0 / 0.1) 86%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 42%,
        rgb(0 0 0 / 0.15) 60%,
        rgb(0 0 0 / 0.1) 86%,
        transparent 100%
    );
}
/* Shown on desktop (≥1161) and mobile (≤700, background-only drift); hidden on
   the 701–1160 tablet band whose middle layout isn't tuned for the mask. */
@media (min-width: 701px) and (max-width: 1160px) {
    .au-hero-fx {
        display: none;
    }
}
.au-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 744px) 264px;
    justify-content: space-between;
    column-gap: 120px;
    align-items: end;
    width: 100%;
}
.au-hero-title {
    margin: 0 0 20px;
    font-family: var(--font-promo);
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
}
.au-hero-lead {
    margin: 0;
    font-family: var(--font-body);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.au-hero-aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
    font-size: 14px;
    line-height: 1.2;
}
.au-hero-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    row-gap: 2px;
}
.au-hero-stats li {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: baseline;
}
.au-stat-num {
    font-variant-numeric: tabular-nums;
}
.au-hero-story {
    margin: 0;
}

/* ==========================================================================
   02 · Highlights — Figma 501:217. Golden stack over a dark→deep-blue veil.
   Scroll-stack: the section pins while the cards arrive one by one from
   below (fade + rise). Once all are assembled (fully opaque) the page
   unpins and scroll continues. Without JS / reduced motion: static, all
   cards visible.
   ========================================================================== */
.au-highlights {
    overflow: clip; /* the entering cards' rise must never paint into the neighbours */
    background: var(
        --color-black
    ); /* own surface — the body colour is a Safari-chrome channel now, no section may rely on it */
}
/* The gradient lives on the pinned band, so it is static relative to the
   view while pinned (no change on scroll). Stops copied 1:1 from Figma
   501:217: rgba(7,7,8,0) → #9E97BD 82.55% → #B6AFD4 90.28% → #C3BCE0 97.18% */
.au-stack-pin {
    padding-block: var(--space-120);
    background: linear-gradient(
        180deg,
        rgba(7, 7, 8, 0) 0%,
        rgb(158, 151, 189) 82.55%,
        rgb(182, 175, 212) 90.28%,
        rgb(195, 188, 224) 97.18%
    );
}
/* No pinning (owner, 10.07.2026): the section scrolls like any other — the band
   is a plain content-height block with its fixed 120px inset; only the cards
   animate, each once, as it enters the view. */
.au-stack {
    max-width: 552px;
    margin-inline: auto;
    display: grid;
    row-gap: 2px;
}
/* Crown — radius 80/80/0/0, title + subtitle in Golden/500. Gradient is LAVENDER
   everywhere (owner: «лавандовая везде» — desktop matched to the mobile look). */
.au-stack-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--space-32) var(--space-24);
    border-radius: 80px 80px 0 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #c3bce0 100%);
    color: var(--color-golden-500);
    text-align: center;
}
.au-stack-head h2 {
    margin: 0;
    font-family: var(--font-promo);
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-golden-500);
}
.au-stack-eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-golden-500);
}
.au-stack-card {
    border-radius: 56px;
    padding: var(--space-16) var(--space-24);
    background: var(--color-golden-400);
    color: var(--color-black);
    display: grid;
    row-gap: 6px;
    text-align: center;
}
.au-stack-card h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
}
.au-stack-card p {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    opacity: 0.6;
}
/* Live initial state — a card waits invisible, slightly below its place; JS
   latches .is-set once as it enters the view (one-way) and the transition on
   the TARGET state plays it in (never on the from-state — that would animate
   the initial hide itself at load). Without JS / with reduced motion all cards
   are simply visible. */
html.js .au-highlights.is-live .au-stack-card {
    opacity: 0;
    transform: translateY(48px);
    will-change:
        transform, opacity; /* six solid-bg cards = cheap compositor layers (old-iPhone fps) */
}
html.js .au-highlights.is-live .au-stack-card.is-set {
    opacity: 1;
    transform: none;
    transition:
        transform 650ms var(--ease-out),
        opacity 500ms var(--ease-out);
}

/* ==========================================================================
   Shared section header — Cal Sans title + uppercase eyebrow, centered
   ========================================================================== */
.au-sechead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.au-sechead h2 {
    margin: 0;
    font-family: var(--font-promo);
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-white);
}
.au-eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* ==========================================================================
   Shared buttons — pill, DM Sans 16 medium; hover fills + inverts
   ========================================================================== */
.au-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding-inline: var(--space-16);
    border: 1px solid transparent;
    border-radius: var(--radius-rounded);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out);
}
.au-btn--s {
    height: 40px;
}
/* Make Money — FILLED green (owner override of the outline mock); mirrors the library's
   .btn-lime (electric-lime fill, black text, brightness hover) and matches the mobile mock */
.au-btn--salad {
    background-color: var(--color-electric-lime);
    border-color: transparent;
    color: var(--color-black);
}
.au-btn--salad:hover {
    filter: brightness(1.08);
}
.au-btn--deepblue {
    border-color: var(--color-deep-blue-600);
    color: var(--color-deep-blue-600);
}
.au-btn--deepblue:hover {
    background-color: var(--color-deep-blue-600);
    color: var(--color-black);
}
.au-btn--white {
    border-color: var(--color-white);
    color: var(--color-white);
}
.au-btn--white:hover {
    background-color: var(--color-white);
    color: var(--color-black);
}

/* ==========================================================================
   03 · Press — Figma 501:219. Article fan (each card a 123.2px slot with a
   390.78px image overflowing → the Figma overlap) drifting as a slow
   marquee; pauses on hover. Static fan under reduced motion.
   ========================================================================== */
.au-press {
    padding-block: var(--space-120);
    overflow-x: clip;
    background: var(--color-black);
}
.au-press .au-sechead {
    margin-bottom: var(--space-48);
}
.au-press .au-eyebrow {
    color: var(--color-carbon-600);
    max-width: 400px;
}

/* Static overlapping article fan (no drift) — clickable cards */
.au-press-fan {
    display: flex;
    justify-content: center;
}
.au-press-card {
    position: relative;
    width: 390.775px;
    margin-right: -267.571px;
    flex: none;
    transition: transform var(--duration-slow) var(--ease-out);
}
.au-press-card:last-child {
    margin-right: 0;
}
.au-press-card:hover {
    transform: translateY(-8px);
} /* lift only — no z-index, so it doesn't jump in front of the others */
/* Transparent window screenshots (a-1…a-7.png) — no clip needed. Figma 513:759:
   each 390.775×350.703, overlapping via the negative margin above. */
.au-press-card img {
    width: 100%;
    height: 350.703px;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* Logos (Figma 602:2246 · 2226 · 2265) — capped at 1280, 24px off the edges.
   JS upgrades the row to an infinite marquee (looped horizontally, fading out
   at the edges); no-JS / reduced-motion keeps this static row. */
.au-press-logos {
    margin-top: var(--space-24);
    margin-inline: auto;
    width: min(1280px, 100% - 48px);
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-24);
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-16);
}
.au-press-logos img {
    display: block;
    flex: none;
}
@media (max-width: 1000px) {
    .au-press-logos {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Marquee variant: [set][clone] drift one set-width per cycle (track gap ==
   set gap, so −50% lands seamlessly); edges dissolve via a gradient mask. */
.au-press-logos.is-marquee {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 8%,
        #000 92%,
        transparent 100%
    );
}
/* NB: the inter-set spacing is the set's own trailing padding (NOT a track
   gap) — with a track gap, −50% ≠ one full period and the loop jumped 32px. */
.au-press-track {
    display: flex;
    width: max-content;
    animation: au-logos-marquee 36s linear infinite;
}
.au-press-set {
    display: flex;
    align-items: center;
    gap: var(--space-64);
    padding-right: var(--space-64);
    flex: none;
}
@keyframes au-logos-marquee {
    to {
        transform: translateX(-50%);
    }
}
/* URLs — same links as the articles, kept in their compact form */
.au-press-urls {
    margin: var(--space-16) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.01em;
}
.au-press-urls a {
    color: var(--color-carbon-500);
    text-decoration: none;
} /* #626266 — owner recoloured per the final mobile mock (581:896), desktop follows */
.au-press-urls a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   04 · Offer — Figma 501:265. Centered 744 column: Money · SAAS orb · Bridge.
   ========================================================================== */
.au-offer {
    padding-block: var(--space-120);
    overflow-x: clip;
    background: var(--color-black);
} /* clips the fixed 640 orb on narrow screens; own surface — body is a Safari-chrome channel */
.au-offer .au-sechead {
    margin-bottom: var(--space-80);
}
.au-offer .au-eyebrow {
    color: var(--color-white);
    opacity: 0.6;
}
.au-offer-blocks {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-80);
    width: min(744px, 100%);
    margin-inline: auto;
}

/* --- Money (502:182) --- */
.au-money {
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
    width: 100%;
}
.au-money-visual {
    position: relative;
    margin: 0;
    width: 100%;
}

/* --- Monetization switcher (Figma 602:2347 off · 602:2356 on) ---------------
   Native 744×342, geometry in % so it scales with the column. Scroll-bound:
   JS adds .is-on once the switcher's centre crosses the view centre (and
   removes it back — reversible). OFF: grey outlines @60%, lime knob at left.
   ON: lime frame, #b7f83a well + inset shadow, GAM plate fades in, the knob
   springs right and the lime face bounce-swaps to the coins face.
   Turning ON is staged (slide → swap); turning OFF is instant-quick. */
.au-switch {
    position: relative;
    width: 100%;
    aspect-ratio: 744 / 342;
}
.au-switch-frame {
    position: absolute;
    inset: 0;
    border-radius: 200px;
    border: 1px solid var(--color-carbon-500); /* both states — no lime */
}
.au-switch-inner {
    position: absolute;
    inset: 7.9% 4.03%; /* 27/342 · 30/744 */
    border-radius: var(--radius-rounded);
    overflow: hidden;
    border: 1px solid var(--color-carbon-500);
    background: transparent;
    transition: border-color var(--duration-base) var(--ease-out);
}
.au-switch.is-on .au-switch-inner {
    border-color: transparent;
}
/* Staging (owner's call): the LIME knob glides right over the dark well
   first; only once it lands (320ms) does the green well FADE in — and the
   face swaps to the coins in parallel. No moving fill edge (a sweeping clip
   read as a hard rectangle behind the knob). OFF reverses instantly-quick. */
.au-switch-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: #b7f83a;
    box-shadow: inset 0 12px 44px rgb(0 0 0 / 0.25);
    opacity: 0;
    transition: opacity 200ms var(--ease-out); /* OFF: quick fade-out, no delay */
}
.au-switch.is-on .au-switch-fill {
    opacity: 1;
    transition: opacity 300ms var(--ease-out) 320ms;
}
/* GAM plate — 205/684 wide at 51/684, centred vertically; appears with ON */
.au-switch-gam {
    position: absolute;
    left: 7.46%;
    top: 50%;
    width: 30%;
    height: auto;
    z-index: 1; /* above the green fill */
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
}
.au-switch.is-on .au-switch-gam {
    opacity: 1;
    transition: opacity 300ms var(--ease-out) 320ms;
} /* waits for the knob, fades in with the green fill */
/* Knob — 287/288 of the well height, travels (684−287)/287 = 138.33% of itself.
   The slide itself is Apple-HIG motion (standard ease-in-out glide, no
   overshoot) — the ONLY bounce lives on the face swap below. */
.au-switch-knob {
    position: absolute;
    left: 0;
    top: 50%;
    height: 99.65%;
    aspect-ratio: 1;
    z-index: 2; /* rides above the green fill it "paints" */
    transform: translateY(-50%) translateX(0);
    transition: transform 320ms var(--ease-in-out);
}
.au-switch.is-on .au-switch-knob {
    transform: translateY(-50%) translateX(138.33%);
}
.au-knob-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}
.au-knob-face--lime {
    background: var(--color-electric-lime);
    transition: opacity 160ms linear;
}
.au-knob-face--coins {
    background: #a15eee;
    opacity: 0;
    transform: scale(0.95);
    transition:
        opacity 160ms linear,
        transform 200ms var(--ease-out);
}
.au-knob-face--coins img {
    position: absolute;
    left: 0.7%;
    top: 0.7%;
    width: 98.6%;
    height: 98.6%;
} /* 283/287, per Figma */
/* ON, staged: (1) the knob first fully reaches the right edge (320ms glide),
   (2) only then the face swaps to the coins with a barely-there spring settle
   (.95 → 1, soft overshoot — owner asked to tone the bounce down). */
.au-switch.is-on .au-knob-face--lime {
    opacity: 0;
    transition-delay: 320ms;
}
.au-switch.is-on .au-knob-face--coins {
    opacity: 1;
    transform: scale(1);
    transition:
        opacity 180ms linear 320ms,
        transform 280ms cubic-bezier(0.34, 1.2, 0.64, 1) 320ms;
}
@media (prefers-reduced-motion: reduce) {
    .au-switch *,
    .au-switch-knob,
    .au-ads-row li,
    .au-ads-ico-c {
        transition: none !important;
    } /* static ON: ads icons jump straight to colored */
}
/* Text column per Figma 502:182 — 24px rhythm: h3 · ads row · divider · note · button */
.au-money-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
    text-align: center;
}
.au-money-text h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-white);
}

.au-ads {
    width: 100%;
}
.au-ads-row {
    list-style: none;
    margin: 0;
    padding: 0;
    width: min(724px, 100%);
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    gap: var(--space-16);
}
.au-ads-row li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-carbon-600);
    text-align: center;
    transition: color 260ms var(--ease-out);
}
/* Ad-format icons (Figma 689:38790): grey art + colored twin stacked. Calm = grey icon,
   carbon-600 label. Once the switcher has finished its flip (~620ms after .is-on) the
   icons colorize LEFT TO RIGHT, one per second — each swap itself is a fast 260ms
   crossfade (icon + its label together). Scrolling back reverts them all at once. */
.au-ads-ico {
    position: relative;
    width: 100px;
    height: 100px;
}
.au-ads-ico img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.au-ads-ico-c {
    opacity: 0;
    transition: opacity 260ms var(--ease-out);
}
.au-ads.is-live .au-ads-row li {
    color: var(--color-white);
}
.au-ads.is-live .au-ads-ico-c {
    opacity: 1;
}
.au-ads.is-live .au-ads-row li:nth-child(1),
.au-ads.is-live .au-ads-row li:nth-child(1) .au-ads-ico-c {
    transition-delay: 620ms;
}
.au-ads.is-live .au-ads-row li:nth-child(2),
.au-ads.is-live .au-ads-row li:nth-child(2) .au-ads-ico-c {
    transition-delay: 1620ms;
}
.au-ads.is-live .au-ads-row li:nth-child(3),
.au-ads.is-live .au-ads-row li:nth-child(3) .au-ads-ico-c {
    transition-delay: 2620ms;
}
.au-ads.is-live .au-ads-row li:nth-child(4),
.au-ads.is-live .au-ads-row li:nth-child(4) .au-ads-ico-c {
    transition-delay: 3620ms;
}
.au-ads.is-live .au-ads-row li:nth-child(5),
.au-ads.is-live .au-ads-row li:nth-child(5) .au-ads-ico-c {
    transition-delay: 4620ms;
}
/* Dashed divider (Figma 563:306) — same 2-2 dash as .au-line, #99999975 (owner's
   literal). Double class: the base .au-line is declared LATER in the file (dev
   section) and would win the order tie-break otherwise. */
.au-line.au-line--white {
    background: repeating-linear-gradient(to right, #99999975 0 2px, transparent 2px 4px);
}

.au-ads-note {
    margin: 0;
    width: max-content;
    max-width: 100%; /* exactly 2 lines: the forced break + one natural line; narrow screens wrap as needed */
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    text-align: center;
    color: var(
        --color-carbon-600
    ); /* owner (10.07.2026): flat Carbon 600 — the lime→lavender gradient text is retired */
}

/* --- SAAS orb (501:305) — Figma spec: radius 1000, radial transparent→#9747FF.
       Fixed 640 (never shrinks — may overflow on phones, clipped by section). --- */
.au-saas {
    position: relative;
    isolation: isolate;
    width: 640px;
    aspect-ratio: 1;
    border-radius: var(--radius-rounded);
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-40);
    padding: var(--space-64) var(--space-40) var(--space-40);
}
/* Sphere glow on its own layer so it fades independently of the icons: transparent
   off-centre, saturating to full as the orb nears the view's vertical middle
   (--orb-fade set on scroll by JS; full when static / no-JS / reduced-motion). */
.au-saas::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 50.96%, #9747ff 100%);
    opacity: var(--orb-fade, 1);
}
/* Fixed 264 → always exactly 5 icons per row (last row of 4 centred) */
.au-saas-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    width: 264px;
}
.au-p {
    position: relative;
    width: 36px;
    height: 36px;
}
.au-p img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity var(--duration-fast) var(--ease-out);
}
/* Hover: true cross-fade — lavender fades OUT while colour fades IN, so no
   mono "trace" shows through the coloured icon's transparent parts. */
.au-p-c {
    opacity: 0;
}
.au-p:has(.au-p-c):hover > img:first-child {
    opacity: 0;
}
.au-p:hover .au-p-c {
    opacity: 1;
}
/* Ambient shimmer — a soft glint sweeps across the icons (перелив); NO colour
   change. Runs only while the orb is on screen; off under reduced motion. */
.au-p::after {
    content: "";
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    background: radial-gradient(
        circle at 32% 28%,
        rgba(255, 255, 255, 0.85),
        rgba(255, 255, 255, 0) 55%
    );
    animation: au-glint 5s var(--ease-in-out) calc(var(--gi, 0) * 0.16s) infinite;
    animation-play-state: paused;
}
.au-saas.is-shimmer .au-p::after {
    animation-play-state: running;
}
@keyframes au-glint {
    0%,
    72%,
    100% {
        opacity: 0;
    }
    84% {
        opacity: 0.5;
    }
}
@media (prefers-reduced-motion: reduce) {
    .au-p::after {
        animation: none;
    }
}
.au-saas-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-16);
    text-align: center;
    max-width: 352px;
    color: var(--color-deep-blue-600);
}
.au-saas-text h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
}
.au-saas-text p {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
}

/* --- Bridge (501:282) — dark metal gradient Figma 1:1 (off-token by design) --- */
.au-bridge {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* top 88 = the mock's pt-48 + its zero-height spacer slot + 40 gap */
    gap: var(--space-40);
    padding: 88px var(--space-24) 56px;
    border-radius: var(--radius-8);
    text-align: center;
    background: linear-gradient(180deg, #242424 14.55%, #3c3c3c 53.78%, #8a8a8a 100%);
}
.au-bridge-art {
    width: 254px;
    height: auto;
}
/* Depth-weighted sheen — JS builds a relief mask from the artwork (alpha ×
   luminance²) and sweeps a wide, weak light band through it, so the glint
   rolls over the metal's ridges instead of a flat stripe. */
.au-bridge-logo {
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.au-bridge-sheen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
}
.au-bridge-text {
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}
.au-bridge-text h3 {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-white);
} /* DM Mono — stylistic, per owner */
.au-bridge-text p {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.8);
}

/* ==========================================================================
   05 · Developers — Figma 506:201. Indigo band (#543AE5 — Figma exact,
   off-token, flagged), DM Mono headings (stylistic), Times New Roman quote
   (stylistic). Card grays are Figma solids — alpha over indigo would tint.
   ========================================================================== */
.au-dev {
    background: #543ae5;
    padding-block: 160px;
}
.au-dev-inner {
    display: flex;
    flex-direction: column;
    gap: 56px;
}
/* Dashed rule — Figma: stroke #999, dash-array 2 2 (repeating-gradient gives
   exact dash length; CSS `border: dashed` can't). */
.au-line {
    border: 0;
    margin: 0;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(to right, #999999 0 2px, transparent 2px 4px);
}
.au-dev-head {
    display: grid;
    row-gap: var(--space-8);
}
.au-dev-head h2 {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 48px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-white);
}
.au-dev-sub {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: left;
    color: #d3d3d3;
}
.au-dev-cols {
    display: flex;
    gap: 2px;
    align-items: stretch;
}
.au-dev-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.au-dev-tag {
    margin: 0;
    align-self: flex-start;
    background: var(--color-black);
    padding: var(--space-8) var(--space-12);
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-white);
}
.au-dev-card {
    flex: 1;
    background: #d4d4d4;
    padding: var(--space-24) var(--space-12) 96px;
}
.au-dev-card p {
    margin: 0;
    max-width: 361px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-carbon-100);
}
.au-dev-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.au-dev-list li {
    display: flex;
    align-items: center;
    gap: var(--space-20);
    padding-block: var(--space-12);
    background-image: repeating-linear-gradient(to right, #999999 0 2px, transparent 2px 4px);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top left;
}
.au-dev-list li:last-child {
    background-image:
        repeating-linear-gradient(to right, #999999 0 2px, transparent 2px 4px),
        repeating-linear-gradient(to right, #999999 0 2px, transparent 2px 4px);
    background-size:
        100% 1px,
        100% 1px;
    background-position:
        top left,
        bottom left;
}
.au-dev-list img {
    width: 120px;
    height: 120px;
    object-fit: contain;
} /* owner (июль 2026): desktop 120×120 (assets re-cut to 240² = 2×); mobile card keeps 140 via its override */
.au-dev-list span {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #d4d4d4;
} /* Figma: DM Mono 24px, tracking -0.24px; #D4D4D4 — owner's literal (was white) */
.au-btn-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding-inline: var(--space-12);
    flex: none;
    border: 1px solid var(--color-white);
    border-radius: var(--radius-rounded);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-white);
    transition:
        background-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out);
}
.au-btn-mini:hover {
    background-color: var(--color-white);
    color: var(--color-black);
}
.au-dev-list .au-btn-mini {
    border-color: #d4d4d4;
    color: #d4d4d4;
} /* owner: "Why Developers Choose Us" pills #D4D4D4 (was white) */
.au-dev-list .au-btn-mini:hover {
    background-color: #d4d4d4;
    color: var(--color-black);
} /* explicit black: the non-hover #d4d4d4 color above out-cascades the BASE hover (equal specificity, later in file), so it must be restated here */
.au-dev-quote {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
}
/* Quotes sit stacked in one grid cell for the crossfade; the avatar row now
   lives ABOVE them, so the container is free to follow the ACTIVE quote's
   height (set inline by JS, animated) — no dead gap under short reviews. */
.au-dev-quotes {
    display: grid;
    overflow: hidden;
    transition: height 240ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
    .au-dev-quotes {
        transition: none;
    }
}
.au-dev-quotes blockquote {
    grid-area: 1 / 1;
    align-self: start; /* natural height — the grid must NOT stretch quotes to the tallest, JS measures them */
    margin: 0;
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1;
    color: #d4d4d4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms var(--ease-out);
} /* #D4D4D4 — owner's literal (was white) */
.au-dev-quotes blockquote.is-on {
    opacity: 1;
}
.au-dev-author {
    display: flex;
    align-items: center;
}
/* Author avatars are the switch: the active one expands into the grey chip
   with the name; the rest sit as faded circles (CLICK switches — owner's call). */
.au-dev-face {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-rounded);
    background: transparent;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-black);
    text-align: left;
    transition:
        background-color 250ms var(--ease-out),
        padding-right 300ms var(--ease-out);
}
.au-dev-face img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    opacity: 0.5;
    transition: opacity 250ms var(--ease-out);
}
.au-dev-face:hover img {
    opacity: 0.8;
}
.au-dev-face.is-on {
    background: #c5c5c5;
    padding-right: var(--space-12);
}
.au-dev-face.is-on img {
    opacity: 1;
}
.au-dev-face-label {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    overflow: hidden;
    white-space: nowrap;
    transition:
        max-width 300ms var(--ease-out),
        opacity 250ms var(--ease-out),
        margin-left 300ms var(--ease-out);
}
.au-dev-face.is-on .au-dev-face-label {
    max-width: 260px;
    opacity: 1;
    margin-left: var(--space-8);
}

/* ==========================================================================
   06 · Web & App — Figma 513:715. Indigo→lavender ramp (Figma exact,
   flagged); 20%-opacity placeholder game grid behind (JS-filled — to be
   wired to the live playgama.com trending feed); lime chips; clipped iPhone.
   ========================================================================== */
.au-webapp {
    position: relative;
    overflow: hidden;
    padding-top: 160px;
    /* Seamless: ONE full-bleed whitening ramp (edge to edge of the view, 0% alpha
     at the top — the grid carries no background of its own any more) over the
     base; the base starts at the Developers indigo so the section joint has no
     step. The .2 matches the ramp's old strength inside the 20%-opacity grid. */
    background:
        linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.2) 87.8%),
        linear-gradient(180deg, #543ae5 0%, #ab65d0 32%, #dccbf5 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 88px;
}
.au-webapp-grid {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* Card 199px = mock's 284 − 30%, gap scaled 14 → 10. Shrink-wraps to its
     tracks, centered; JS sets repeat(N) with N rounded UP so the row always
     overflows the view edges, and adds rows until the section is covered.
     repeat(6) is the no-JS fallback. */
    display: grid;
    grid-template-columns: repeat(6, 199px);
    gap: 10px;
    opacity: 0.2; /* cards only — the whitening ramp lives full-bleed on the section */
    cursor: pointer; /* the backdrop grid links to playgama.com (desktop) */
}
/* NB: NOT named ".cover" — the vendored layout.css has a global .cover utility
   with min-block-size:100svh that inflated the cards to 900px. Height comes ONLY
   from aspect-ratio (284 → 159.75, per Figma card 284×174); the img is absolute
   so it can never inflate the box. */
.au-game-cover {
    position: relative;
    aspect-ratio: 480/270;
    background: var(--color-white);
    border-radius: var(--radius-16);
    overflow: hidden;
}
/* Covers washed toward white: the plate stays white (as in the mock) and the
   artwork shows through faintly — keeps the mock's airy white lattice. */
.au-game-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.3;
    filter: saturate(0.7);
}
.au-game-card span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1;
    color: rgb(255 255 255 / 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
} /* long titles clip to one line with … */
.au-webapp-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}
.au-webapp-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 745px;
}
.au-webapp-head h2 {
    margin: 0;
}
.au-webapp-head p {
    margin: 0;
}
.au-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(192 255 71 / 0.9);
    border-radius: 56px;
    padding: var(--space-8) var(--space-24);
    font-family: var(--font-promo);
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-black);
}
.au-chip--sub {
    padding: var(--space-12) var(--space-16);
    max-width: 432px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
}
.au-phone-clip {
    display: flex;
    justify-content: center;
    width: 100%;
}
.au-phone-link {
    display: block;
    line-height: 0;
    cursor: pointer;
} /* wraps the phone as a store link; block so it hugs the img and keeps the flush-bottom clip */
.au-phone-img {
    display: block;
    width: 380px;
    max-width: 100%;
    height: auto;
} /* full iPhone render from the project */
/* QR card (Figma 611:7420 / 7415) — lime plate 179×218, platform tabs on top,
   Android selected by default. Stays 24px off the view right + section bottom. */
.au-qr {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 179px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 15px 8px 6px;
    border-radius: var(--radius-24);
    background: var(--color-electric-lime);
    transition: background-color var(--duration-base) var(--ease-out);
}
.au-qr.is-ios {
    background: #eaf7ff;
} /* iOS plate — Figma 611:7415 literal (off-token by design) */
.au-qr-tabs {
    display: flex;
    gap: var(--space-8);
}
.au-qr-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-16);
    border: 1px solid var(--color-black);
    border-radius: 40px;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-black);
    transition:
        background-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out);
}
.au-qr-tab.is-active {
    background: var(--color-black);
    color: var(--color-white);
}
.au-qr-code {
    display: none;
    width: 163px;
    height: 163px;
}
.au-qr-code.is-active {
    display: block;
}

/* ==========================================================================
   07 · Team & Jam — Figma 513:392. Black band: Green Jam banner, Discord
   open-source card (black→#5A4CF3, Figma exact, flagged), team gallery.
   ========================================================================== */
.au-team {
    background: var(--color-black);
    padding-block: 140px 212px;
} /* extended bottom: the enlarged bottom-row photo's caption (cell + 142px offset + 2 lines) must stay on black, not spill onto the light Story section; measured clearance +12px */
.au-team .au-eyebrow {
    max-width: 400px;
    color: var(--color-white);
    opacity: 0.6;
} /* same as the Offer eyebrow */
.au-team-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-120);
} /* owner's DevTools pick */
.au-team-text {
    max-width: 560px;
    text-align: center;
}
.au-team-text h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-white);
}
.au-team-text p {
    margin: 8px 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-carbon-600);
}
.au-jam {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-20);
}
/* Text block per Figma 547:722 — heading, chips row and copy stack with 16px
   gaps. The 560px cap moves from the block onto the heading/copy ONLY, so the
   chips row keeps its natural single-line width (wider than the text column,
   just like before the move) and still wraps by itself on narrow screens. */
.au-jam .au-team-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-16);
    max-width: none;
}
.au-jam .au-team-text h3,
.au-jam .au-team-text p {
    max-width: min(556px, calc(100% - 64px));
} /* owner: match the Open Source Community copy width exactly — the discord card is min(620,100%) with 32px side pads, so its text = min(556, 100%−64) at every width */
.au-jam .au-team-text p {
    margin: 0;
    transition: opacity 180ms var(--ease-out);
} /* per-jam copy fades on chip switch (JS swaps the text at the dip) */
.au-jam-banner {
    position: relative;
    width: min(800px, 100%);
    aspect-ratio: 2/1;
    border-radius: 248px;
    overflow: hidden;
    /* the component is fully transparent: any gap during a switch shows the
     section behind it, and the rim antialias melts into the same colour */
    /* click opens the jam's itch.io page; horizontal swipes switch it on TOUCH
     only (mouse drag is disabled — desktop switches via the chips) */
    touch-action: pan-y;
    cursor: pointer;
}
/* Slides ride a horizontal track (swipe-style switch); NO per-slide bleed —
   it leaked slivers of the neighbouring jam into the banner sides.
   Each slide is clipped to the same pill as the banner: the jam JPEGs carry
   the pill shape BAKED IN with white corners (JPEG has no alpha), so an
   unclipped neighbour slid its white corners into view mid-switch. Clipped,
   the space between sliding slides shows the section instead. */
.au-jam-track {
    display: flex;
    height: 100%;
    transition: transform 450ms var(--ease-in-out);
}
.au-jam-banner img {
    flex: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    clip-path: inset(0 round 248px);
}
/* Auto-rotation affordance (apple.com-style): the active chip slowly fills
   while the dwell runs; pauses freeze it; manual control removes it for good.
   NB: 3s here must match DWELL in main.js. */
.au-jam.is-auto .au-pill--on::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: rgb(0 0 0 / 0.08);
    transform-origin: left;
    transform: scaleX(0);
    animation: au-jam-dwell 3s linear forwards;
}
.au-jam.is-paused .au-pill--on::before {
    animation-play-state: paused;
}
@keyframes au-jam-dwell {
    to {
        transform: scaleX(1);
    }
}
.au-jam-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}
.au-pill {
    position: relative;
    overflow: hidden; /* hosts + clips the dwell progress fill */
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding-inline: var(--space-12);
    border: 0;
    border-radius: var(--radius-rounded);
    background: var(--color-carbon-400);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-carbon-600);
    transition:
        background-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out);
}
.au-pill:not(.au-pill--on):hover {
    color: var(--color-white);
} /* the selected chip has no hover (white-on-white bug) */
.au-pill--on {
    background: var(--color-white);
    color: var(--color-black);
}
.au-discord {
    position: relative;
    overflow: hidden;
    background: #000; /* base under the gradient layers */
    width: min(620px, 100%);
    border-radius: var(--radius-8);
    padding: var(--space-32);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
}
.au-discord > :not(.au-discord-bg) {
    position: relative;
    z-index: 1;
} /* content above the gradients */
/* Three stacked gradient layers (Figma 645:20639/20659/20679) cross-fade on
   hover — SMOOTH (550ms); background-image itself can't transition, opacity can.
   Same ellipse as the approved Discord gradient, only the colours change. */
.au-discord-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms var(--ease-out) 300ms; /* touch auto-cycle (mobile/tablet): staged smooth swap — mascot leads, gradient trails 300ms. Desktop hover overrides to a faster timing in the @media(hover:hover) block below. */
}
.au-discord-bg--discord {
    opacity: 1;
    background: radial-gradient(
        183.23% 89.69% at 50% 10.31%,
        #000 28.51%,
        #0c0a20 46.03%,
        #201b57 61.24%,
        #5a4cf3 100%
    );
}
.au-discord-bg--telegram {
    background: radial-gradient(
        183.23% 89.69% at 50% 10.31%,
        #000 28.51%,
        #0f2534 46.03%,
        #114b71 61.24%,
        #3b90ff 100%
    );
}
.au-discord-bg--github {
    background: radial-gradient(
        183.23% 89.69% at 50% 10.31%,
        #000 28.51%,
        #093121 46.03%,
        #0e6049 61.24%,
        #0fbf3e 100%
    );
}
.au-discord.is-net-telegram .au-discord-bg--discord,
.au-discord.is-net-github .au-discord-bg--discord {
    opacity: 0;
}
.au-discord.is-net-telegram .au-discord-bg--telegram {
    opacity: 1;
}
.au-discord.is-net-github .au-discord-bg--github {
    opacity: 1;
}

.au-discord-art {
    position: relative;
    width: 300px;
    height: 300px;
    display: block;
}
/* Mascots stacked; the swap GLIDES (520ms ease-in-out — soft start, accelerates
   through the middle so two very different mascots don't linger as a double image)
   on the touch auto-cycle; desktop hover uses a faster timing (see @media(hover:hover)).
   Each carries its own colour glow following the alpha shape (a box inset-shadow
   read as a stray rectangle around the transparent PNG). */
.au-discord-mascot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    opacity: 0;
    transition: opacity 520ms var(--ease-in-out);
}
.au-discord-mascot.is-on {
    opacity: 1;
}
.au-discord-mascot[data-net="discord"] {
    filter: drop-shadow(0 8px 14px rgb(218 183 255 / 0.2));
}
.au-discord-mascot[data-net="telegram"] {
    filter: drop-shadow(0 8px 16px rgb(59 144 255 / 0.35));
}
.au-discord-mascot[data-net="github"] {
    filter: drop-shadow(0 8px 16px rgb(109 165 68 / 0.4));
}
.au-discord.is-net-telegram .au-discord-mascot[data-net="discord"],
.au-discord.is-net-github .au-discord-mascot[data-net="discord"] {
    opacity: 0;
}
.au-discord.is-net-telegram .au-discord-mascot[data-net="telegram"] {
    opacity: 1;
}
.au-discord.is-net-github .au-discord-mascot[data-net="github"] {
    opacity: 1;
}
.au-discord .au-team-text p {
    color: #ffffff8a;
} /* owner's literal */
.au-discord-btns {
    display: flex;
    gap: var(--space-8);
}
/* Hover devices (desktop): faster swap than the touch auto-cycle keeps hover snappy
   (owner) — base stays 520/600 for the mobile/tablet auto-cycle; here it's ~halved. */
@media (hover: hover) {
    .au-discord-mascot {
        transition: opacity 260ms var(--ease-in-out);
    }
    .au-discord-bg {
        transition: opacity 300ms var(--ease-out) 150ms;
    }
}
@media (prefers-reduced-motion: reduce) {
    .au-discord-bg,
    .au-discord-mascot {
        transition: none;
    }
}
.au-people {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-32);
}
/* Photo gallery (Figma 625:18325) — CRT-barrel cells (601:2222), 11 members
   → 5/5/1 via centred wrap. Hovering a photo dims + blurs all the others hard;
   the photo itself springs to ×3.025 (≈302×357 off the 100px cells, matching
   the mock's 304×360) near-instantly, the WebGL CRT render rides it, and the
   caption appears below. Leaving restores the calm grid. */
.au-people-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: min(800px, 100%);
} /* matches the jam banner width — 7 cells per row → 11 members in 2 rows (7+4) */
.au-ph {
    position: relative;
    width: 105px;
    height: 124px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
} /* cell +5% (was 100×118), mock's 122:144 ratio */
.au-ph-img {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: #0a0a0a;
    clip-path: url(#au-crt);
    /* the visual never captures the pointer — hovering works off the UNSCALED
     button box, so sweeping the cursor reaches every photo even under an
     enlarged neighbour */
    pointer-events: none;
    transition:
        transform 120ms var(--ease-out),
        filter 200ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
    .au-ph-img {
        transition: none;
    }
}
.au-ph-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* peek state (JS: cursor over an actual PHOTO, not the grid's empty zones):
   every cell blurs hard and dims gently… */
.au-people-grid.is-peek .au-ph-img {
    filter: blur(10px) brightness(0.55);
}
/* …except the hovered one — it snaps up (fast, but animated; 3.025 → the
   enlarged photo is ≈318×375 off the 105px cells).
   HOVER DEVICES ONLY — on touch a tap opens the fullscreen lightbox instead;
   the calm mobile gallery has no zoom/peek at all. */
@media (hover: hover) {
    .au-ph:hover {
        z-index: 5;
    }
    .au-people-grid .au-ph:hover .au-ph-img {
        filter: none;
        transform: scale(3.025);
    }
    .au-ph:hover .au-ph-cap {
        opacity: 1;
    }
    .au-ph:hover .au-crt-canvas {
        display: block;
    }
}
/* caption under the enlarged photo: scaled bottom ≈ 100% + 126px, + 16 gap (124px cell) */
.au-ph-cap {
    position: absolute;
    left: 50%;
    top: calc(100% + 142px);
    transform: translateX(-50%);
    width: 400px;
    pointer-events: none;
    z-index: 6;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-carbon-600);
    opacity: 0;
    transition: opacity 150ms var(--ease-out) 60ms;
}
.au-ph-cap strong {
    color: var(--color-white);
    font-weight: 600;
}
/* The caption is a hover-only flourish; on touch it never shows, yet its 400px
   absolute box overflowed the viewport on the rightmost photo → a page-wide
   horizontal scrollbar (black band on the right at tablet widths). Hide it on any
   non-hover OR ≤tablet device; desktop hover (≥1161) keeps it. */
@media (hover: none), (max-width: 1160px) {
    .au-ph-cap {
        display: none;
    }
}
/* the WebGL CRT canvas rides the hovered cell only (hover rules live in the
   (hover: hover) block above; mobile has no hover/spotlight — just static photos) */
.au-crt-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: none;
}

/* Team lightbox (Figma 677:32138) — mobile only: tapping a photo opens a
   fullscreen, swipeable member card. The dark blurred backdrop IS the fade;
   opening/closing cross-fades it (opacity). Built + opened by JS on touch. */
.au-lb {
    position: fixed;
    inset: 0;
    z-index: 200;
    overflow: hidden;
    touch-action: none; /* the overlay owns the gesture — the page behind must not scroll */
    background: rgb(0 0 0 / 0.8); /* owner: fade = 80% black */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 300ms var(--ease-out),
        visibility 0s linear 300ms;
}
.au-lb.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 300ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
    .au-lb,
    .au-lb-track {
        transition: none;
    }
}
.au-lb-close {
    position: absolute;
    top: calc(48px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2; /* the fullscreen lightbox now extends under the island (viewport-fit=cover) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding-inline: var(--space-12);
    border: 1px solid var(--color-carbon-600);
    border-radius: var(--radius-rounded);
    background: transparent;
    color: var(--color-carbon-600);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}
/* horizontal carousel — JS translates it so the ACTIVE card sits centred, the
   neighbours peek at the screen edges; top-aligned so the active card's LinkedIn
   grows downward without nudging the photos */
.au-lb-track {
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
    gap: var(--space-16);
    align-items: flex-start;
    will-change: transform;
    transition: transform 340ms var(--ease-out);
}
.au-lb-card {
    flex: none;
    width: 304px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-16);
}
.au-lb-photo {
    position: relative;
    width: 304px;
    height: 360px;
    background: #0a0a0a;
    clip-path: url(#au-crt);
}
.au-lb-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.au-lb-photo .au-crt-canvas {
    display: block;
} /* the shared WebGL CRT canvas rides the active lightbox photo */
.au-lb-cap {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-carbon-600);
}
.au-lb-cap strong {
    color: var(--color-white);
    font-weight: 600;
}
/* LinkedIn shows on the active card only (677:32159) */
.au-lb-link {
    display: none;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding-inline: var(--space-12);
    border-radius: var(--radius-rounded);
    background: var(--color-white);
    color: var(--color-black);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}
.au-lb-card.is-active .au-lb-link {
    display: inline-flex;
}

/* ==========================================================================
   Light island (Story · FAQ · Join · Contacts) — the page ends on a light
   ramp; colors are local literals since the page theme stays dark.
   ========================================================================== */
.au-line-dark {
    border: 0;
    margin: 0;
    width: 100%;
    height: 1px;
    background: rgb(0 0 0 / 0.12);
}
.au-m-only {
    display: none;
} /* elements that exist only in the mobile mock */
.au-m-br {
    display: none;
} /* forced line breaks that exist only in the mobile mock */
/* visually-hidden text: adds descriptive continuation to generic "More" buttons
   so the accessible name / link text is meaningful without changing the design */
.au-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.au-store-badge {
    height: 62px;
    width: auto;
} /* Apple 184×62; the Google Play swap keeps the height, width follows its ratio */
/* Tablet (701–1160, owner): Web & App uses the MOBILE arrangement — the phone with a
   store-download badge, NOT the desktop QR card + game-grid backdrop (tablets are touch,
   so scan-the-QR makes no sense; the store link does). Target .au-store-link, not the
   shared .au-m-only class, so the Story-section divider stays hidden here. */
@media (min-width: 701px) and (max-width: 1160px) {
    .au-webapp-grid {
        display: none;
    }
    .au-qr {
        display: none;
    }
    .au-store-link {
        display: block;
    }
}

/* --- 08 · The Story (Figma 512:126) --- */
.au-story {
    background: linear-gradient(180deg, #dcdcdc 0%, var(--color-white) 100%);
    padding-block: 140px;
    color: var(--color-black);
}
.au-story-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-80);
}
.au-story .au-sechead h2 {
    color: var(--color-black);
}
.au-story .au-eyebrow {
    color: rgb(0 0 0 / 0.6);
    font-weight: 600;
}
.au-story-photo {
    border-radius: var(--radius-16);
}
.au-timeline {
    width: min(744px, 100%);
    display: flex;
    flex-direction: column;
    gap: 56px;
}
.au-story-statement {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.05;
    color: var(--color-carbon-400);
}
.au-tl-row {
    display: flex;
    gap: var(--space-24);
}
.au-tl-meta {
    width: 264px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
}
.au-tl-year {
    display: inline-flex;
    align-items: center;
    padding: 5px var(--space-12);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
}
.au-tl-tag {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
}
.au-tl-meta--2023 .au-tl-year {
    background: #e3d5ff;
    color: #945eff;
    border-radius: var(--radius-rounded);
}
.au-tl-meta--2023 .au-tl-tag {
    color: #945eff;
}
.au-tl-meta--2024 .au-tl-year {
    background: #ddfe9e;
    color: #6ab000;
    border-radius: var(--radius-8);
}
.au-tl-meta--2024 .au-tl-tag {
    color: #6ab000;
}
.au-tl-meta--2025 .au-tl-year {
    background: #c2ffff;
    color: #38b5b5;
}
.au-tl-meta--2025 .au-tl-tag {
    color: #38b5b5;
}
.au-tl-row > p {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    color: var(--color-black);
}
.au-facts {
    width: min(744px, 100%);
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.au-facts-label p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-black);
}
.au-facts-label .is-muted {
    color: #a2a2a8;
    margin-top: 4px;
}
/* One row, auto-distributed spacing (space-between) with a 12px minimum gap */
.au-investors {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.au-investors img {
    width: auto;
    mix-blend-mode: darken;
} /* darken kills baked white boxes, as in Figma */
.au-facts-grid {
    display: flex;
    gap: var(--space-20);
}
.au-facts-grid p {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-black);
}
.au-facts-grid span {
    color: #a2a2a8;
}

/* --- 09 · FAQ (Figma 547:1067) — native <details> accordion --- */
.au-faq {
    background: var(--color-white);
    padding-block: 140px;
    color: var(--color-black);
}
.au-faq-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-64);
}
.au-faq .au-sechead h2 {
    color: var(--color-black);
}
.au-faq .au-eyebrow {
    color: #a2a2a8;
    font-weight: 600;
    max-width: 400px;
}
.au-faq-list {
    width: min(744px, 100%);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.au-q {
    background: #efeff5;
    border-radius: 80px;
    transition: background-color var(--duration-base) var(--ease-out);
}
/* Hover a closed card → the opened-question lavender (same fill as .au-q[open]) */
.au-q:not([open]):hover {
    background: rgb(199 171 255 / 0.56);
}
/* While the close animation runs, the question must READ closed at once —
   grey card, plus icon back — otherwise the state flip lands 200ms+ late
   and the whole accordion feels laggy. */
.au-q[open].is-closing {
    background: #efeff5;
    border-radius: 80px;
}
/* Under the cursor the closing card stays lavender (= its final hover colour):
   otherwise it went grey and instantly re-lit lavender via :hover after the
   close — a double colour change that read as lag. */
.au-q[open].is-closing:hover {
    background: rgb(199 171 255 / 0.56);
}
.au-q[open].is-closing .au-q-btn {
    background: transparent;
    border-color: #a2a2a8;
}
.au-q[open].is-closing .au-q-btn::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.au-q summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-20);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
}
.au-q summary::-webkit-details-marker {
    display: none;
}
.au-q summary span {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-black);
}
.au-q-btn {
    position: relative;
    width: 32px;
    height: 32px;
    flex: none;
    border: 1px solid #a2a2a8;
    border-radius: 50%;
}
.au-q-btn::before,
.au-q-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1.6px;
    background: #626266;
    transform: translate(-50%, -50%);
}
.au-q-btn::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform var(--duration-base) var(--ease-out);
}
.au-q[open] {
    background: rgb(199 171 255 / 0.56);
    border-radius: 0;
}
.au-q[open] .au-q-btn {
    background: var(--color-white);
    border-color: var(--color-white);
}
.au-q[open] .au-q-btn::after {
    transform: translate(-50%, -50%) rotate(0deg);
}
.au-q-a {
    padding: 0 80px var(--space-20) var(--space-20);
}
.au-q-a p {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    color: var(--color-black);
}

/* --- 10 · Join Us (Figma 518:192) --- */
.au-join {
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-lavender-400) 100%);
    padding-block: 140px;
    color: var(--color-black);
}
.au-join-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-64);
}
.au-join .au-sechead h2 {
    color: var(--color-black);
}
.au-join .au-eyebrow {
    color: #a2a2a8;
    font-weight: 600;
    max-width: 400px;
}
.au-features {
    width: 100%;
    display: flex;
    border-block: 1px solid rgb(0 0 0 / 0.12);
}
.au-feature {
    flex: 1;
    min-width: 0;
    padding: var(--space-40) var(--space-16);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
    text-align: center;
    border-left: 1px solid rgb(0 0 0 / 0.12);
}
.au-feature:last-child {
    border-right: 1px solid rgb(0 0 0 / 0.12);
}
.au-feature img {
    width: 140px;
    height: 140px;
    object-fit: contain;
}
.au-feature h3 {
    margin: 0 0 -8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--color-black);
} /* 24px flex gap − 8 = 16px heading→text */
.au-feature p {
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-carbon-400);
}
.au-feature .au-btn-mini {
    margin-top: auto;
}
.au-btn-mini--sans {
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
} /* Label/S-m per mock (Discord card) */
.au-btn-mini--gray {
    border-color: #939397;
    color: #000000;
    font-family: var(--font-body);
    text-transform: none;
    font-size: 14px;
} /* owner: border #939397, text #000000 */
.au-btn-mini--gray:hover {
    background: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
}

/* --- 11 · Contacts (Figma 548:339) --- */
.au-contacts {
    background: var(--color-lavender-400);
    padding: var(--space-64) 0 var(--space-120);
}
.au-contacts-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-40);
}
.au-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-24);
}
.au-social a {
    display: block;
    width: 40px;
    height: 40px;
}
.au-social i {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #421b75;
    mask: var(--icon) center / contain no-repeat;
    -webkit-mask: var(--icon) center / contain no-repeat;
    transition: background-color var(--duration-base) var(--ease-out);
}
.au-social a:hover i {
    background-color: var(--color-purple-400);
}
.au-emails {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
}
.au-email-row {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}
.au-email-tag {
    background: rgb(199 171 255 / 0.48);
    border-radius: 40px;
    padding: 6px var(--space-8);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    color: #2b104f;
}
.au-email-row a {
    font-size: 26px;
    line-height: 1;
    color: #421b75;
    text-decoration: none;
}
.au-email-row a:hover {
    text-decoration: underline;
}
.au-legal {
    margin: 0;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    color: #421b75;
}
.au-legal a {
    color: inherit;
}
.au-mascot {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.au-mascot-art {
    display: block;
}

/* ==========================================================================
   Responsive — header collapses to fennec toggle
   ========================================================================== */
@media (max-width: 1160px) {
    :root {
        --page-pad: 24px;
    }

    /* Compact header (Figma 585:910 / 585:1014 FINAL): ALWAYS collapsed to the
     Menu pill until the user opens it; opened = FILLED pills wrap under the
     logo row (gap 4) and any scroll snaps it shut (JS). The pill reads "Close"
     while open — no separate close chip. Fennec chip is ALWAYS an outline, no
     fill (owner's call, июль 2026 — поверх мока 585:910 с заливкой);
     chrome is pure white by default, adaptive black over light sections. */
    .au-header {
        --hdr: var(--color-white);
        --hdr-ink: var(--color-black);
    }
    .au-menu-pill {
        display: inline-flex;
        height: 40px;
        border-color: var(--hdr);
        color: var(--hdr);
    }
    .au-menu-pill:hover {
        background-color: var(--hdr);
        color: var(--hdr-ink);
    }
    .au-header.is-open .au-menu-close {
        display: none;
    }
    .au-header:not(.is-open) .au-nav {
        display: none;
    }
    .au-header.is-open .au-nav {
        flex-basis: 100%;
    } /* wraps under the logo row */
    .au-header-left {
        row-gap: 4px;
    }
    .au-nav {
        gap: 4px;
    } /* 585:1052 — компакт: 4px между пилюлями (десктопное «gap 0» живёт >1160) */
    .au-logo img {
        height: 40px;
    }
    .au-navlink {
        height: 40px;
    }
    .au-header.is-open .au-navlink {
        background-color: var(--hdr);
        border-color: var(--hdr);
        color: var(--hdr-ink);
    } /* filled, per 585:1053 */
    /* owner: фенек — ВСЕГДА аутлайн без заливки; белый, над светлым — чёрный (--hdr) */
    .au-fennec {
        width: 40px;
        height: 40px;
        border-color: var(--hdr);
        color: var(--hdr);
    }
    .au-fennec .icon {
        width: 28px;
        height: 28px;
    }

    /* Hero stacks: intro on top, stats aside below */
    .au-hero {
        min-height: auto;
        padding-top: 140px;
    }
    .au-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 48px;
    }
}

@media (max-width: 700px) {
    /* ======= Mobile pass per Figma «About Us Mobile - 390» (581:841) ======= */
    :root {
        --page-pad: 12px;
    } /* mock: sections sit at 12px; hero overrides to 16 */

    /* — Header: компакт как на ≤1160 (585:910/1014 — всегда свёрнут до Menu,
     владелец подтвердил); здесь только плотнее полоса — */
    .au-header {
        padding-block: var(--space-12);
    }

    /* — Hero (581:842) — */
    .au-hero {
        padding-block: 312px 56px;
    }
    .au-hero .container {
        padding-inline: 16px;
    }
    .au-hero-grid {
        row-gap: 40px;
    }
    .au-hero-title {
        font-size: 32px;
    }
    .au-hero-lead {
        font-size: 16px;
    }
    .au-hero-aside {
        gap: 37px;
        font-size: 16px;
    }

    /* — Highlights (581:850): mobile sizing; the assemble-on-entry rules live in the base — */
    .au-stack-pin {
        padding-block: 80px;
    } /* 120 on desktop → 80 here */
    .au-highlights .container {
        padding-inline: 12px;
    }
    .au-stack-head h2 {
        font-size: 36px;
    } /* crown gradient is lavender in the base rule now (everywhere) */
    .au-stack-card h3 {
        font-size: 24px;
    }

    .au-sechead h2 {
        font-size: 32px;
    } /* final mock: all section titles are 32 on mobile */
    .au-m-br {
        display: inline;
    } /* re-enable the mock's forced breaks */

    /* — Press (581:873 final): 311×280 card strip, start-aligned, swipe-looped by JS;
     logos wrap py10/gap20, no marquee — */
    .au-press {
        padding-block: 80px;
    }
    .au-press .au-sechead {
        margin-bottom: var(--space-32);
    }
    /* the strip scrolls natively (looped by JS clones); snap centres a card */
    .au-press-fan {
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        gap: 12px;
        /* The wheel needs ~92px below the card line or the SCROLLER clips the sunken
       side cards — but the box must stay compact (owner: 16 top / 0 bottom, cards
       may hang past it). So: real padding for paint room, negative margin to
       collapse the footprint — the side cards visually overflow the box. */
        padding: 16px 0 100px;
        margin-bottom: -100px;
    }
    .au-press-fan::-webkit-scrollbar {
        display: none;
    }
    /* One article always centred, neighbours peeking. The wheel (JS) writes
     transform every scroll frame — the base hover transition MUST die here,
     an eased lag would turn the ride to mush. */
    .au-press-card {
        flex: none;
        width: 311px;
        margin-right: 0;
        scroll-snap-align: center;
        transition: none;
    }
    .au-press-card:hover {
        transform: none;
    } /* no hover lift on touch layouts */
    .au-press-card img {
        width: 100%;
        height: 280px;
    }
    .au-press-logos.is-marquee {
        flex-wrap: wrap;
        overflow: visible;
        margin-top: var(--space-32);
        padding: 10px 32px;
        mask-image: none;
        -webkit-mask-image: none;
    }
    .au-press-track {
        animation: none;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
    .au-press-set {
        flex: 1 1 auto;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-12);
        padding-right: 0;
    } /* flex:none + max-content на десктопе — здесь набор обязан переноситься */
    .au-press-set[aria-hidden="true"] {
        display: none;
    } /* clone is only for the loop */
    .au-press-urls {
        margin-top: var(--space-8);
        gap: 10px;
        font-size: 12px;
    }

    /* — Offer (581:904 final): head gap 40; mobile buttons are FILLED; money rhythm 32;
     ads wrap 16×32 with 80px orbs — */
    .au-offer .au-sechead {
        margin-bottom: var(--space-40);
    }
    .au-money {
        gap: var(--space-32);
    }
    .au-ads-ico {
        width: 80px;
        height: 80px;
    }
    .au-money-text {
        gap: var(--space-32);
    }
    .au-money-text h3 {
        font-size: 24px;
    }
    .au-ads-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px 32px;
    }
    .au-ads-note {
        width: 320px;
    }
    .au-btn--s {
        height: 48px;
    } /* mock: all offer buttons are 48 on mobile */
    /* .au-btn--salad is now filled in the base rule (owner: Make Money filled everywhere) */
    .au-btn--deepblue {
        background: var(--color-deep-blue-600);
        border-color: transparent;
        color: var(--color-black);
    }
    .au-btn--white {
        background: var(--color-white);
        border-color: transparent;
        color: var(--color-black);
    }
    .au-saas-text {
        max-width: 288px;
    }
    .au-bridge {
        padding: 24px var(--space-16) 56px;
        gap: var(--space-32);
    }
    .au-bridge-art {
        width: 226px;
    }
    .au-bridge-text {
        max-width: 310px;
    }

    /* — Developers (581:971): px8 band, h2 40, cols gap 10, features 2×2 bordered grid — */
    .au-dev {
        padding-block: 80px 120px;
    }
    .au-dev .container {
        padding-inline: 8px;
    }
    .au-dev-head h2 {
        font-size: 40px;
    }
    .au-dev-head .au-line:first-child {
        display: none;
    } /* owner: drop the divider ABOVE the heading on mobile; grid row-gap collapses with it */
    .au-dev-cols {
        flex-direction: column;
        gap: 10px;
    }
    /* Figma 581:996 — mobile 2×2 of FLUSH bordered cards. Single 1px lines: the grid
     draws the top+left outer edges, each cell draws its right+bottom — so the shared
     interior lines never double up (works whatever the order tweaks place where). */
    .au-dev-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-top: 1px solid rgb(255 255 255 / 0.4);
        border-left: 1px solid rgb(255 255 255 / 0.4);
    }
    .au-dev-list li {
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-16);
        border-right: 1px solid rgb(255 255 255 / 0.4);
        border-bottom: 1px solid rgb(255 255 255 / 0.4);
        padding: 16px 12px;
        min-height: 281px;
        background-image: none;
    }
    .au-dev-list li:last-child {
        background-image: none;
    } /* base li:last-child carries a dashed bg with higher specificity — kill it on mobile too (cards use solid borders) */
    .au-dev-list li:nth-child(4) {
        order: 2;
    } /* grid order: Game · Business · Testing · Optimise */
    .au-dev-list li:nth-child(2) {
        order: 3;
    }
    .au-dev-list li:nth-child(3) {
        order: 4;
    }
    /* icons inherit the base 120×120 (owner: mobile matches desktop) */
    .au-dev-list span {
        font-size: 14px;
        line-height: 1.1;
        letter-spacing: 0;
        text-align: center;
        width: 100%;
    }
    .au-dev-list .au-btn-mini {
        margin-top: auto;
    } /* pin the pill to the card bottom */
    .au-dev-quote blockquote {
        font-size: 22px;
    }
    /* avatars (581:1024) never squish: the row bleeds past the screen edges and
     scrolls horizontally instead of shrinking its 44px faces */
    .au-dev-author {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        width: 100vw;
        margin-inline: calc((100% - 100vw) / 2);
        padding-inline: 8px;
    }
    .au-dev-author::-webkit-scrollbar {
        display: none;
    }
    .au-dev-face {
        flex: none;
    }

    /* — Web&App (581:1031 final): clean gradient (no game-grid backdrop), App Store
     badge between head and cropped phone, rhythm 28 — */
    .au-webapp {
        padding-top: 80px;
        padding-inline: var(--page-pad);
        gap: 60px;
    }
    .au-webapp-grid {
        display: none;
    }
    .au-webapp-content {
        gap: 28px;
    }
    .au-webapp-head .au-chip {
        font-size: 32px;
    }
    .au-webapp-head .au-chip--sub {
        width: 100%;
        max-width: none;
        font-size: 12px;
    } /* the title override outweighs .au-chip--sub otherwise */
    /* No fixed clip height: it hugs the phone so the phone's (pre-cropped) bottom stays
     flush with the section's bottom edge at every width — a fixed 546px left lavender
     showing below the phone once max-width shrank it on ≤375px screens (Figma 513:715). */
    .au-phone-img {
        width: 366px;
    }
    .au-qr {
        display: none;
    }

    /* — Team (581:1144 final): 120 band, inner gap 64, body copy 14, cells 110×130 — */
    .au-team {
        padding-block: 120px;
    } /* no hover captions on touch — the 212px reserve is desktop-only */
    /* классический (не overlay) вертикальный скроллбар делает 100vw шире вьюпорта —
     full-bleed ленты внутри секций клипуем на самих секциях */
    .au-team,
    .au-dev {
        overflow-x: clip;
    }
    .au-team-inner {
        gap: 64px;
    }
    .au-team-text p {
        font-size: 14px;
    } /* jam copy, discord copy, gallery label */
    /* jam chips (662:23765): one full-bleed row, scrolls past the screen edges,
     looped by the same JS clones as the press strip */
    .au-jam-pills {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        width: 100vw;
        margin-inline: calc((100% - 100vw) / 2);
        padding-inline: var(--page-pad);
    }
    .au-jam-pills::-webkit-scrollbar {
        display: none;
    }
    .au-pill {
        flex: none;
    }
    .au-people-grid {
        width: 100%;
    }
    .au-ph {
        width: 110px;
        height: 130px;
    }
    .au-ph-cap {
        display: none;
    } /* calm mobile gallery = just photos; names live in the lightbox */
    .au-discord-art {
        width: 220px;
        height: 220px;
    }
    /* the staged smooth swap (mascot 520ms ease-in-out · gradient 600ms + 300ms) now
     lives in the base rules — desktop hover and the mobile auto-cycle share it */

    /* — The Story (581:1297 final): band 80, timeline 40/16, year+tag in a row, facts grid 2 cols — */
    .au-story {
        padding-block: 80px;
    }
    .au-timeline {
        gap: 40px;
    }
    .au-story-statement {
        font-size: 24px;
    }
    .au-tl-row {
        flex-direction: column;
        gap: var(--space-16);
    }
    .au-tl-meta {
        width: auto;
        flex-direction: row;
        align-items: center;
    }
    .au-investors {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 24px 40px;
    }
    .au-facts-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-20);
    }
    .au-m-only {
        display: block;
    }

    /* — FAQ (581:1355) & Join Us (581:1388) final: band 80, head gap 40 — */
    .au-faq,
    .au-join {
        padding-block: 80px;
    }
    .au-faq-inner,
    .au-join-inner {
        gap: var(--space-40);
    }
    .au-q summary span {
        font-size: 14px;
        line-height: 1.1;
    } /* owner: mobile FAQ questions 14px / lh 1.1 */
    .au-features {
        flex-direction: column;
    }
    .au-feature {
        padding: var(--space-24) 0;
        border-left: 0;
        border-top: 1px solid rgb(0 0 0 / 0.12);
    }
    .au-feature:first-child {
        border-top: 0;
    }
    .au-feature:last-child {
        border-right: 0;
    }
    .au-feature h3 {
        margin-bottom: -16px;
    } /* 24px flex gap − 16 = 8px heading→text per mock */
    .au-feature .au-btn-mini {
        height: 40px;
        padding-inline: var(--space-16);
        font-size: 16px;
    }

    /* — Contacts (581:1430 final): emails ABOVE socials; tag above the address (gap 4);
     socials = 5-column grid, rows 40 + 24 — */
    .au-emails {
        order: -1;
    }
    .au-email-row {
        flex-direction: column;
        gap: 4px;
    }
    .au-email-row a {
        font-size: min(20px, 6vw);
    } /* 20px stays on all common phones (≥334); only ~320px screens scale it down so the long address doesn't overflow */
    .au-social {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        justify-items: center;
        row-gap: var(--space-24);
        width: 100%;
    }
}