styles.css

/* ============================================================
   guide.arturx.art · Осциллограф (Артур ИИмерсивный)
   Brand redesign — May 2026
   ============================================================ */

/* === RESET & BASE === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* ---------- Fonts (Geist — geometric sans, NO serif) ---------- */
    --font-display: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'Geist Mono', monospace;

    /* ---------- Backgrounds (Осциллограф) ---------- */
    --bg-primary:    #0B0F0E;       /* page — near-black, green undertone */
    --bg-secondary:  #111614;       /* cards, panels (brand --surface) */
    --bg-terminal:   #070A09;       /* terminals, code blocks (--surface-2) */
    --bg-elev:       #19211E;       /* hover surfaces (derived) */
    /* Alias: brand colors.md names the page background `--bg`. Without this,
       `color: var(--bg)` on the green buttons silently inherits instead of
       going dark. Keep both names — the brand doc and the code each use one. */
    --bg:            #0B0F0E;

    /* ---------- Foregrounds ---------- */
    --ink:           #E8EDEB;       /* primary text */
    --cream:         #E8EDEB;       /* alias */
    --text-primary:  var(--ink);
    --text-secondary:#B8C2BE;       /* readable secondary — guide body copy */
    --text-muted:    #7E8C88;       /* meta, captions (brand --muted) */

    /* ---------- Accent (brand green — do NOT lighten/desaturate) ---------- */
    --accent:        #3CE5B0;       /* brand accent */
    --accent-bright: #5CEFC0;       /* hover (brand --accent-hover) */
    --accent-deep:   #1C5F4C;       /* dim fills (brand --accent-dim) */
    --accent-glow:   rgba(60, 229, 176, 0.16);   /* panel glow — spec intensity */
    --accent-tint:   rgba(60, 229, 176, 0.08);

    /* ---------- Legacy accent aliases — folded into brand green ---------- */
    --accent-mint:   #3CE5B0;       /* terminal $ / green dot */
    --accent-blue:   #3CE5B0;       /* info accents — brand has no blue */
    --accent-green:  #3CE5B0;       /* success / recommended */
    --accent-rose:   #E5594A;       /* semantic red — warnings, terminal dot */

    /* ---------- Borders ---------- */
    --border:        rgba(255, 255, 255, 0.06);   /* hairline */
    --border-strong: rgba(60, 229, 176, 0.32);    /* accent-line */
    --code-bg:       var(--bg-terminal);
    --halo-warm:     rgba(60, 229, 176, 0.10);     /* guide footer glow */

    /* ---------- Geometry ---------- */
    --radius-node: 8px;
    --radius-card: 10px;
    --radius-pill: 999px;

    /* ---------- Type scale ---------- */
    --t-display: clamp(3rem, 9vw, 7rem);
    --t-section: clamp(1.8rem, 3.4vw, 2.6rem);
    --t-card:    1.2rem;
}

html { scroll-behavior: smooth; }

/* Safety net: one runaway long word (headlines, code, URLs) must never
   give the whole page a horizontal scrollbar on a phone. clip, not hidden —
   clip doesn't create a scroll container, so position:sticky keeps working. */
html, body { overflow-x: clip; }

body {
    font-family: var(--font-body);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 1.125rem;   /* rem, not 18px — lets the TV query below scale body copy */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* TV / very large screens: content is capped at 1200-1400px, so on a 4K
   panel everything floats tiny in the middle. Scale the root instead. */
@media (min-width: 2200px) {
    html { font-size: 20px; }
}

/* Background layer 2 — scope grid + scanline («Осциллограф» 2.0).
   Sits above the --bg-primary fill but below all content via negative
   z-index, so no markup changes are needed — every page gets it.
   Layer order (first = topmost): scanline, fine 44px grid, coarse 220px grid.
   Scanline opacity 0.012 is the ceiling — any higher and it reads as a
   visible "retro effect". Grid alphas are calibrated against #0B0F0E:
   .045 fine / .09 coarse. Raising them turns the backdrop into graph paper. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent, transparent 3px,
            rgba(255, 255, 255, 0.012) 3px, rgba(255, 255, 255, 0.012) 4px
        ),
        linear-gradient(rgba(60, 229, 176, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60, 229, 176, 0.045) 1px, transparent 1px),
        linear-gradient(rgba(60, 229, 176, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60, 229, 176, 0.09) 1px, transparent 1px);
    background-size:
        auto,
        44px 44px, 44px 44px,
        220px 220px, 220px 220px;
}

/* Background layer 3 — radial fade. Dims the grid toward the edges so
   content never fights it. Renders above ::before (same z-index, later
   in source order). Viewport-fixed, so long guide pages read identically. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(
        ellipse 90% 70% at 50% 22%,
        transparent 0%, transparent 42%,
        rgba(11, 15, 14, 0.72) 100%
    );
}

/* Monospace for code, terminal, tags, nav */
.terminal-window,
code, pre,
.code-block,
.nav-links a,
.logo-text,
.card-badge,
.card-meta,
.guide-category,
.guide-reading-time,
.guide-updated,
.toc,
.breadcrumbs,
.copy-btn,
.tab-btn,
.expand-collapse-btn,
.material-tag,
.material-size,
.materials-total,
.h-num,
.ruler-num,
.ruler-desc,
.group-count,
.materials-banner-cta,
.footer-container,
.card-preview-stub,
.hero-status {
    font-family: var(--font-mono);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.18s ease;
}
a:hover { color: var(--accent-bright); }

::selection {
    background: var(--accent);
    color: var(--ink);
}

/* === HERO (legacy gate page) === */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    background: var(--bg-primary);
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 700;
    margin-top: 2rem;
    letter-spacing: -0.035em;
    line-height: 0.95;
    color: var(--ink);
}

.tagline {
    font-family: var(--font-mono);
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: var(--text-primary);
    margin-top: 1.25rem;
    letter-spacing: 0.01em;
}

.subtitle {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    max-width: 500px;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 0.95rem 1.7rem;
    background: var(--cream);
    color: var(--bg-primary);
    text-decoration: none;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.cta-button:hover {
    background: var(--accent);
    color: var(--cream);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px var(--accent-glow);
}

/* === TERMINAL WINDOW === */
.terminal-window {
    width: 100%;
    max-width: 600px;
    background: var(--bg-terminal);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border);
}

.terminal-header {
    background: var(--bg-secondary);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.terminal-btn { width: 12px; height: 12px; border-radius: 50%; }
.terminal-btn.red    { background: var(--accent-rose); }
.terminal-btn.yellow { background: #c4b9a4; }
.terminal-btn.green  { background: var(--accent-mint); }

.terminal-title {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.terminal-body { padding: 1.5rem; min-height: 80px; }

.typing-container { display: flex; align-items: center; gap: 8px; }
.prompt { color: var(--accent-mint); font-weight: 700; }
.typing-text { color: var(--text-primary); }
.cursor {
    color: var(--accent);
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* === FEATURES === */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature {
    background: var(--bg-secondary);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    text-align: center;
    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.feature:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 0 24px var(--accent-glow);
}

.feature-icon { font-size: 2.4rem; display: block; margin-bottom: 1rem; }
.feature h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.feature p { color: var(--text-secondary); font-size: 0.92rem; }

/* === SECTIONS === */
.section {
    padding: 4rem 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.section h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

.accent {
    color: var(--accent);
    font-weight: 700;
}

.section-desc {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* === TABS === */
.install-tabs { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.tab-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    transition: all 0.24s ease;
}
.tab-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.tab-btn.active {
    background: transparent;
    color: var(--accent-bright);
    border-color: var(--accent);
    box-shadow: 0 0 16px var(--accent-glow);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* === CODE BLOCKS === */
.code-block {
    background: var(--code-bg);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
}
.code-block.large pre { max-height: 400px; overflow-y: auto; }

.code-header {
    background: var(--bg-secondary);
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;   /* long captions push the copy button off 320px screens */
    gap: 0.4rem 1rem;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}
.code-header span {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
    min-width: 0;
}

.copy-btn {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    transition: all 0.2s ease;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent-bright); }
.copy-btn.copied {
    background: var(--accent-mint);
    color: var(--bg-primary);
    border-color: var(--accent-mint);
}

.code-block pre { padding: 1.5rem; overflow-x: auto; }
.code-block code {
    color: #c9d1d9;
    font-size: 0.9rem;
    line-height: 1.7;
}

/* === REQUIREMENTS === */
.requirements {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 10px;
    margin-top: 2rem;
    border: 1px solid var(--border);
}
.requirements h4 {
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: var(--accent);
    margin-bottom: 1rem;
}
.requirements ul { list-style: none; }
.requirements li {
    color: var(--text-secondary);
    padding: 0.3rem 0;
    padding-left: 1.5rem;
    position: relative;
}
.requirements li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--accent-mint);
    font-family: var(--font-mono);
}

/* === TIP === */
.tip {
    color: var(--accent-bright);
    font-size: 0.9rem;
    margin-top: 1rem;
    padding: 1rem;
    background: var(--accent-tint);
    border-radius: 8px;
    border-left: 3px solid var(--accent);
    font-family: var(--font-mono);
    line-height: 1.6;
}

/* === VPS === */
.vps-recommendation {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 2rem;
    border: 1px solid var(--accent);
}
.vps-recommendation h4 {
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-bright);
    font-size: 0.82rem;
    margin-bottom: 1rem;
}
.vps-recommendation ul { list-style: none; }
.vps-recommendation li { color: var(--text-secondary); padding: 0.3rem 0; }
.vps-recommendation strong { color: var(--text-primary); font-weight: 700; }

/* === API CARDS === */
.api-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.api-card {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.api-card:hover { border-color: var(--accent); box-shadow: 0 0 20px var(--accent-glow); }
.api-card h4 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.api-card > p { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 1rem; }
.api-card ul { list-style: none; margin-bottom: 1rem; }
.api-card li { color: var(--text-secondary); font-size: 0.9rem; padding: 0.2rem 0; }

.link-btn {
    display: inline-block;
    color: var(--accent);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    transition: color 0.2s ease;
}
.link-btn:hover { color: var(--accent-bright); }

/* === WARNING BOX === */
.warning-box {
    background: rgba(255, 126, 138, 0.06);
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid var(--accent-rose);
}
.warning-box h4 {
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-rose);
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
}
.warning-box p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 0.5rem; }
.warning-box ul { list-style: none; }
.warning-box li {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 0.2rem 0;
    padding-left: 1rem;
    position: relative;
}
.warning-box li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: var(--accent-rose);
    font-weight: 700;
}

/* === CTA SECTION === */
.cta-section {
    padding: 5rem 2rem;
    background: transparent;   /* let the scope grid run through */
    border-top: 1px solid var(--border);
}
.cta-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.cta-content h2 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}
.cta-content p { color: var(--text-secondary); margin-bottom: 2rem; }

.telegram-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--accent);
    color: var(--bg);
    padding: 0.9rem 1.7rem;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
}
.telegram-btn:hover {
    background: var(--accent-bright);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px var(--accent-glow);
}

/* === FOOTER (legacy) === */
footer { padding: 2rem; text-align: center; border-top: 1px solid var(--border); }
footer p { color: var(--text-secondary); font-size: 0.9rem; }
footer .small { font-size: 0.8rem; margin-top: 0.5rem; }
footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* === SITE HEADER / NAVIGATION === */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(11, 15, 14, 0.72);
    -webkit-backdrop-filter: blur(12px);   /* iOS Safari still needs the prefix */
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.logo { text-decoration: none; display: flex; align-items: center; gap: 0.6rem; }

/* Logo mark — the waveform glyph in a rounded box. */
.logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: 1px solid rgba(60, 229, 176, 0.4);
    border-radius: 6px;
}
.logo-mark svg { display: block; }
.logo:hover .logo-mark { border-color: var(--accent); }

.logo-text {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.logo-dot { color: var(--accent); }

.nav-links { display: flex; list-style: none; gap: 2rem; margin: 0; padding: 0; }
.nav-links a {
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--accent-bright); }

.nav-telegram {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent);
    color: var(--bg-primary);
    padding: 0.55rem 1rem;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 0.24s ease;
}
.nav-telegram:hover {
    background: var(--accent-bright);
    transform: translateY(-1px);
}
.nav-telegram span { display: none; }
@media (min-width: 768px) { .nav-telegram span { display: inline; } }

/* Mobile menu */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.mobile-menu-btn span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}
.mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 768px) {
    .mobile-menu-btn { display: flex; }
    .nav-links {
        /* absolute inside the fixed header, not fixed at a hardcoded 60px —
           tracks the real header height (safe-area padding varies per phone). */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-primary);
        flex-direction: column;
        padding: 1rem 2rem 2rem;
        gap: 0;
        border-bottom: 1px solid var(--border);
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease;
    }
    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }
    .nav-links li { border-bottom: 1px solid var(--border); }
    .nav-links a { display: block; padding: 1rem 0; }
    .nav-container { padding: 0.75rem 1rem; }
}

/* Very narrow phones: logo + telegram pill + burger don't fit with 2rem gaps */
@media (max-width: 480px) {
    .nav-container { gap: 0.75rem; }
    .logo-text { font-size: 0.82rem; }
}

/* === SITE FOOTER === */
.site-footer {
    padding: 2.5rem 2rem;
    border-top: 1px solid var(--border);
    background: transparent;   /* let the scope grid run through */
    margin-top: 6rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.footer-brand { color: var(--text-primary); font-weight: 700; }
.footer-dot { color: var(--border-strong); }
.footer-credit { color: var(--text-secondary); }
.footer-tg {
    color: var(--accent);
    text-decoration: none;
    transition: opacity 0.2s ease;
    font-weight: 600;
}
.footer-tg:hover { opacity: 0.75; color: var(--accent-bright); }

@media (max-width: 540px) {
    .footer-container { flex-direction: column; gap: 0.5rem; }
    .footer-dot { display: none; }
}

/* === CATALOG / CATEGORIES === */
.categories-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.category { margin-bottom: 4rem; }

/* Two compact categories side by side (02 Тюнинг + 03 Инфраструктура).
   Collapses to a single column below --bp-md. */
.category-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.75rem;
    margin-bottom: 4rem;
}
.category-row > .category-compact { margin-bottom: 0; }
@media (max-width: 768px) {
    .category-row { grid-template-columns: 1fr; gap: 2rem; }
}

.category-compact { margin-bottom: 2.5rem; }
.category-compact .category-ruler { margin-bottom: 1rem; }
.category-compact .ruler-h2 { font-size: 1.4rem; }
.category-compact .guides-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.category-compact .guide-card { padding: 1rem 1.25rem; }
.category-compact .guide-card h3 { font-size: 1rem; }
.category-compact .guide-card > p { font-size: 0.84rem; line-height: 1.5; }
/* Inside .category-row the ruler has ~half the width — the trailing
   description wraps the heading onto two lines. Drop it there. */
.category-row .ruler-desc { display: none; }

/* Explicit catalog grids — only where there is room. Below 1024px the
   .guides-grid auto-fill default keeps handling the layout. */
@media (min-width: 1024px) {
    #tools .guides-grid { grid-template-columns: 1.6fr 1fr 1fr; }
    #ai-access .guides-grid { grid-template-columns: repeat(4, 1fr); }
    .category-row .guides-grid { grid-template-columns: 1fr 1fr; }
}

/* === EDITORIAL CATEGORY RULER === */
.category-ruler {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.category-ruler .ruler-num {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 0.18rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
}
.category-ruler .ruler-h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--t-section);
    letter-spacing: -0.03em;
    color: var(--ink);
}
.category-ruler .ruler-line {
    height: 1px;
    background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
    align-self: center;
}
.category-ruler .ruler-desc {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: right;
}

@media (max-width: 720px) {
    .category-ruler { grid-template-columns: auto 1fr; }
    .category-ruler .ruler-line { display: none; }
    .category-ruler .ruler-desc { grid-column: 1 / -1; text-align: left; }
}

/* === GUIDE CARDS === */
.guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}
/* Grid items default to min-width:auto — nowrap innards (preview stubs)
   would silently widen the card past a 320px viewport. */
.guides-grid > * { min-width: 0; }

.guide-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    transition: all 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.guide-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 0 28px var(--accent-glow);
}

.guide-card.featured {
    border-color: var(--accent);
    cursor: pointer;
}
.guide-card.featured:hover { box-shadow: 0 0 32px var(--accent-glow); }

.guide-card.coming-soon { opacity: 1; }
.guide-card.coming-soon:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: none;
}

.card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--accent);
    color: var(--bg-primary);
    padding: 0.22rem 0.6rem;
    border-radius: 4px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.card-badge.muted { background: var(--border-strong); color: var(--text-secondary); }
.card-badge.scheduled {
    background: transparent;
    color: var(--accent-rose);
    border: 1px solid rgba(229, 89, 74, 0.40);
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
}

.guide-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    letter-spacing: -0.015em;
    padding-right: 5rem;
    line-height: 1.2;
}
.guide-card h3 a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}
.guide-card h3 a::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}
.guide-card:hover h3 a { color: var(--accent-bright); }
.guide-card > p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    margin: 0;
    line-height: 1.6;
}

.guide-card em,
.material-card em {
    font-style: normal;
    color: var(--accent-bright);
    font-weight: 700;
}

/* Inline numbered chip — used on materials too */
.h-num {
    display: inline-block;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.7em;
    padding: 0.12em 0.5em;
    border: 1px solid var(--border);
    border-radius: 4px;
    margin-right: 0.5rem;
    vertical-align: 0.1em;
    letter-spacing: 0.04em;
}

.module-list {
    list-style: none;
    counter-reset: module;
    padding: 0;
    margin: 0.85rem 0 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 1rem;
}
.module-list li {
    counter-increment: module;
    color: var(--text-secondary);
    font-size: 0.84rem;
    padding-left: 1.7rem;
    position: relative;
    line-height: 1.4;
}
.module-list li::before {
    content: counter(module, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.1em;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--accent);
    font-weight: 700;
}
.module-list a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s;
}
.module-list a:hover { color: var(--accent-bright); }

@media (max-width: 640px) {
    .module-list { grid-template-columns: 1fr; }
}

.card-meta {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.74rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.card-meta span { display: flex; align-items: center; gap: 0.25rem; }

.card-preview-stub {
    margin-top: 1rem;
    padding: 0.6rem 0.85rem;
    background: var(--bg-terminal);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.76rem;
    color: var(--text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.card-preview-stub::before {
    content: "$ ";
    color: var(--accent-mint);
    font-weight: 700;
}

/* Hero compact / general hero adjustments for header */
.hero-compact { min-height: 50vh; padding-top: 80px; }
.hero-compact h1 { font-size: clamp(2rem, 8vw, 4rem); }
.hero-compact .terminal-window { max-width: 500px; }
.hero { padding-top: 80px; }

@media (max-width: 768px) {
    .categories-section { padding: 1.5rem; }
    .guides-grid { grid-template-columns: 1fr; }
    .guide-card h3 { padding-right: 0; }
    .card-badge { position: static; display: inline-block; margin-bottom: 0.75rem; }
}

/* ============================================================
   EDITORIAL HERO  (Smoke · Indigo redesign)
   ============================================================ */

.editorial-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8rem 2rem 5rem;
    text-align: center;
    /* transparent, not --bg-primary: an opaque fill here would paint over
       the body::before scope grid. The grid IS the hero background now. */
    background: transparent;
}

.hero-inner {
    position: relative;
    z-index: 5;
    max-width: 1000px;
    margin: 0 auto;
}

.hero-marker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    margin-bottom: 2rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-tint);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
}
.hero-marker .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
    animation: marker-pulse 1.8s ease-in-out infinite;
}
.hero-marker .ruler { display: none; }

@keyframes marker-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
}

.display-headline {
    font-family: var(--font-display);
    font-weight: 700;
    /* min 2.2rem, not 3rem: «ИИмерсивного.» is one unbreakable 13-char word —
       at 48px it clips on 320-375px phones. 8vw+0.4rem matches 9vw at ~1000px. */
    font-size: clamp(2.2rem, 8vw + 0.4rem, 7rem);
    line-height: 0.92;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin: 0;
    font-variation-settings: "opsz" 144, "SOFT" 0;
}
.display-headline .headline-accent,
.display-headline .hl-accent {
    color: var(--accent);
    font-weight: 700;
}

/* Waveform signal — the brand motif. Sits between headline and lead.
   The dash animation makes the trace "run" left-to-right like a live scope. */
.hero-waveform {
    display: block;
    width: 100%;
    max-width: 760px;
    height: 34px;
    margin: 1.1rem auto 0;
}
.hero-waveform .baseline { stroke: rgba(60, 229, 176, 0.14); stroke-width: 1; }
.hero-waveform .trace {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-dasharray: 10 8;
    filter: drop-shadow(0 0 6px rgba(60, 229, 176, 0.5));
    animation: scope-dash 22s linear infinite;
}

@keyframes scope-dash {
    to { stroke-dashoffset: -1200; }
}

.hero-lead {
    margin: 1.25rem auto 0;
    max-width: 56ch;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.75;
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
}
.hero-lead strong {
    color: var(--ink);
    font-weight: 500;
}

.hero-inner .cta-primary { margin-top: 2.25rem; }

/* Mini terminal — glass */
.hero-mini-terminal {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin: 2.1rem auto 0;
    padding: 1rem 1.4rem;
    background: rgba(7, 10, 9, 0.75);
    border: 1px solid rgba(60, 229, 176, 0.25);
    border-radius: 12px;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--ink);
    backdrop-filter: blur(20px);
    max-width: 600px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    text-align: left;
}
.hero-mini-terminal .prompt { color: var(--accent-mint); font-weight: 700; }
.hero-mini-terminal .typing-text { color: var(--ink); overflow-wrap: anywhere; }
.hero-mini-terminal .cursor {
    color: var(--accent);
}

/* Phone: long typed phrases wrap — smaller type, tighter padding, and a
   reserved two-line height so the box doesn't pump while phrases cycle. */
@media (max-width: 480px) {
    .hero-mini-terminal {
        align-items: flex-start;
        width: 100%;
        font-size: 0.85rem;
        padding: 0.8rem 1rem;
        min-height: 4.4em;
        text-align: left;
    }
}

.hero-status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(94, 236, 212, 0.06);
    border: 1px solid rgba(94, 236, 212, 0.30);
    font-size: 0.74rem;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-mint);
    box-shadow: 0 0 0 0 rgba(94, 236, 212, 0.6);
    animation: status-pulse 2.2s ease-out infinite;
    flex-shrink: 0;
}

@keyframes status-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(94, 236, 212, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(94, 236, 212, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(94, 236, 212, 0);    }
}

.hero-cta-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--cream);
    color: var(--bg-primary);
    padding: 0.9rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cta-primary:hover {
    background: var(--accent);
    color: var(--cream);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px var(--accent-glow);
}
.cta-primary .cta-arrow { transition: transform 0.2s ease; }
.cta-primary:hover .cta-arrow { transform: translateX(3px); }

.cta-secondary {
    color: var(--text-primary);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    padding-bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s ease;
}
.cta-secondary::before {
    content: "→";
    color: var(--accent);
}
.cta-secondary:hover {
    color: var(--accent-bright);
}

.hero-terminal { justify-self: end; width: 100%; max-width: 460px; }
.hero-terminal .terminal-window {
    max-width: 100%;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(60, 229, 176, 0.08);
}

@media (max-width: 960px) {
    .editorial-hero { padding: 6rem 1.5rem 3.5rem; min-height: auto; }
    .hero-terminal { justify-self: stretch; max-width: 100%; }
    .hero-lead { max-width: 100%; }
}

/* ============================================================
   MATERIALS BANNER
   ============================================================ */

.materials-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto 2.5rem;
    padding: 1.6rem 2rem;
    background: linear-gradient(120deg, rgba(60, 229, 176, 0.14) 0%, var(--bg-secondary) 70%);
    border: 1.5px solid rgba(60, 229, 176, 0.55);
    border-radius: 14px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    /* Slow glow pulse — the eye must land here first. Killed globally by
       prefers-reduced-motion. */
    animation: banner-glow 3.2s ease-in-out infinite;
    transition: border-color 0.24s ease, transform 0.24s ease;
}

@keyframes banner-glow {
    0%, 100% { box-shadow: 0 0 26px var(--accent-glow); }
    50%      { box-shadow: 0 0 54px rgba(60, 229, 176, 0.30); }
}

.materials-banner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 100%);
    box-shadow: 0 0 12px var(--accent-glow);
}

.materials-banner:hover {
    border-color: var(--accent-bright);
    transform: translateY(-2px);
}

.materials-banner-left {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-left: 0.6rem;
    min-width: 0;
}

.materials-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    font-size: 1.6rem;
    color: var(--accent-bright);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: rgba(60, 229, 176, 0.08);
}

.materials-banner-text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.materials-banner-title {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

.materials-banner-sub {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.materials-banner-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    vertical-align: 0.15em;
    margin-left: 0.35rem;
    background: var(--accent-bright);
    box-shadow: 0 0 14px var(--accent-bright);
    animation: marker-pulse 1.8s ease-in-out infinite;
}

.materials-banner-cta {
    flex-shrink: 0;
    color: var(--bg-primary);
    background: var(--accent);
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 22px var(--accent-glow);
    transition: all 0.2s ease;
}
.materials-banner:hover .materials-banner-cta {
    background: var(--accent-bright);
    transform: translateX(2px);
}

/* Phone: stack panel vertically, CTA becomes a full-width button. */
@media (max-width: 640px) {
    .materials-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 1.1rem;
        margin-left: 1rem;
        margin-right: 1rem;
        padding: 1.35rem 1.25rem;
    }
    .materials-banner-left {
        margin-left: 0.4rem;
    }
    .materials-banner-icon {
        width: 44px;
        height: 44px;
        font-size: 1.35rem;
    }
    .materials-banner-title { font-size: 1.2rem; }
    .materials-banner-cta {
        text-align: center;
        margin-left: 0.4rem;
    }
}

/* ============================================================
   MATERIALS PAGE
   ============================================================ */

.materials-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 6rem 1.5rem 4rem;
}

.materials-page .back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.78rem;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    margin-bottom: 2.5rem;
    transition: color 0.2s ease;
}
.materials-page .back-link:hover { color: var(--accent-bright); }

.materials-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.materials-header::after {
    content: "";
    position: absolute;
    bottom: -1px; left: 0; width: 30%;
    height: 1px;
    background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
}

.materials-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 4rem);
    letter-spacing: -0.04em;
    color: var(--ink);
    margin-bottom: 0.6rem;
    line-height: 0.95;
}

.materials-header p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 62ch;
    font-family: var(--font-display);
}

.materials-total {
    margin-top: 1rem;
    font-size: 0.74rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.material-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.6rem 1.8rem;
    margin-bottom: 1rem;
    transition: border-color 0.24s ease, box-shadow 0.24s ease;
}

.material-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 24px var(--accent-glow);
}

.material-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.015em;
    margin-bottom: 0.6rem;
    display: flex;
    flex-wrap: wrap;   /* long <em> chunks must wrap on 320px, not poke out */
    align-items: baseline;
    gap: 0.5rem;
    color: var(--ink);
    line-height: 1.25;
}

.material-card p {
    color: var(--text-secondary);
    font-size: 0.96rem;
    margin-bottom: 1.1rem;
    line-height: 1.65;
    font-family: var(--font-display);
}

.material-card p strong {
    color: var(--ink);
    font-weight: 700;
}

/* Global reset zeroes list padding — install steps need it back */
.material-card ol,
.material-card ul {
    padding-left: 1.4rem;
    margin-bottom: 1.1rem;
}
.material-card li {
    color: var(--text-secondary);
    font-size: 0.96rem;
    line-height: 1.65;
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
}
.material-card li strong { color: var(--ink); font-weight: 700; }

.material-card code {
    background: var(--bg-terminal);
    color: var(--accent-bright);
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.84em;
    font-family: var(--font-mono);
}

.material-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.material-tag {
    font-size: 0.7rem;
    padding: 0.22rem 0.6rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
}

.material-size {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.material-card .download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--cream);
    color: var(--bg-primary);
    text-decoration: none;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: all 0.2s ease;
    margin-left: auto;
}

.material-card .download-btn:hover {
    background: var(--accent);
    color: var(--cream);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px var(--accent-glow);
}

/* === MATERIALS GROUPS === */
.materials-group {
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.24s ease;
}

.materials-group[open] {
    border-color: var(--border-strong);
}

.materials-group-summary {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.15rem 1.4rem;
    cursor: pointer;
    list-style: none;
    background: var(--bg-secondary);
    transition: background 0.2s ease;
}
.materials-group-summary::-webkit-details-marker { display: none; }
.materials-group-summary:hover { background: var(--accent-tint); }

.materials-group-summary .group-icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    filter: grayscale(0.4);
}

.materials-group-summary .group-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.015em;
    color: var(--ink);
    flex: 1;
}

.materials-group-summary .group-count {
    font-size: 0.74rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.materials-group-summary .group-toggle {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--accent);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.materials-group[open] .group-toggle { transform: rotate(45deg); }

.materials-group-content {
    padding: 1.5rem 1.4rem 1.6rem;
    border-top: 1px solid var(--border);
    background: var(--bg-primary);
}

/* Link from a materials group back to its source video (loop: files ↔ video) */
.group-video {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: -0.5rem 0 1.5rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.group-video:hover {
    border-color: var(--accent);
    background: var(--accent-tint);
    color: var(--accent-bright);
}

.materials-group-content .group-intro {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.96rem;
    line-height: 1.7;
    padding-left: 0.85rem;
    border-left: 2px solid var(--accent);
    font-family: var(--font-display);
}

.materials-group-content .material-card:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
    .materials-group-summary { padding: 0.95rem 1rem; gap: 0.6rem; }
    .materials-group-summary .group-title { font-size: 1.05rem; }
    .materials-group-summary .group-count { display: none; }
    .materials-group-content { padding: 1rem; }
}

/* === LOGO PULSE-DOT MICRO-INTERACTION === */
.logo:hover .logo-dot { animation: dot-blink 1.4s ease-in-out infinite; }
@keyframes dot-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* === FOCUS STATES === */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .cursor { animation: none; opacity: 1; }
    .editorial-hero canvas[data-smoke] { display: none; }
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .terminal-window { max-width: 100%; }
    .section { padding: 3rem 1.5rem; }
    .install-tabs { flex-direction: column; }
    .tab-btn { width: 100%; }
    .code-block pre { padding: 1rem; font-size: 0.8rem; }
    .features { padding: 2rem 1.5rem; }
}

/* ============================================================
   MOBILE ADAPTATION — touch targets · safe areas · viewport
   Added 2026-07-09. The layout was already responsive; this
   tunes the phone experience. Desktop is untouched — every rule
   is gated by (pointer: coarse) or env()/safe-area (0 elsewhere).
   ============================================================ */

/* Fixed chrome clears the notch / home indicator (viewport-fit=cover). */
.site-header { padding-top: env(safe-area-inset-top); }
.site-footer { padding-bottom: max(2.5rem, env(safe-area-inset-bottom)); }

/* Touch input: every primary action becomes a ≥44px tap target,
   and stacked in-card link lists get real tap rows instead of
   18px slivers. Pointer devices (mouse) keep the compact sizing. */
@media (pointer: coarse) {
    .nav-telegram,
    .cta-primary,
    .telegram-btn,
    .materials-banner-cta,
    .group-video,
    .material-card .download-btn,
    .copy-btn,
    .tab-btn,
    .expand-collapse-btn {
        min-height: 44px;
    }
    .nav-telegram { padding: 0.7rem 1rem; }

    /* Padding goes on the anchor (the tap target), not the <li>,
       and the number marker is nudged down to stay aligned. */
    .module-list { gap: 0.1rem 1rem; }
    .module-list a { display: block; padding: 0.5rem 0; }
    .module-list li::before { top: 0.6rem; }

    .card-meta { gap: 1.25rem; }
}