/* ── Reset ── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── Visually hidden but readable by screen readers + indexed by crawlers.
   Used e.g. to give the /about H1 a substantive "About " prefix without
   showing it in the visual design. ── */
.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;
}

/* ── Design tokens ── */
:root {
    --bg-deep: #06070b;
    --bg-card: rgba(255, 255, 255, 0.025);
    --bg-card-hover: rgba(255, 255, 255, 0.045);
    --gold: #c9a84c;
    --gold-bright: #e2c36b;
    --gold-light: #f0dfa0;
    --gold-dim: rgba(201, 168, 76, 0.12);
    --gold-glow: rgba(201, 168, 76, 0.25);
    --silver: #9ca3af;
    --text: #d1d5db;
    --text-bright: #f3f4f6;
    --text-muted: #6b7280;
    --green: #34d399;
    --green-glow: rgba(52, 211, 153, 0.3);
    --red: #f87171;
    --red-glow: rgba(248, 113, 113, 0.3);
    --border: rgba(255, 255, 255, 0.06);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg-deep);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ── Particle canvas — floating gold/blue motes ── */
#particles {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ── Grain overlay — subtle film texture ── */
.grain {
    position: fixed;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ── Ambient glow orbs — soft background atmosphere ── */
.glow-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    pointer-events: none;
}
.glow-orb.gold-1 {
    width: 500px; height: 500px;
    background: rgba(201, 168, 76, 0.06);
    top: -10%; left: 20%;
    animation: orbFloat 20s ease-in-out infinite;
}
.glow-orb.gold-2 {
    width: 400px; height: 400px;
    background: rgba(201, 168, 76, 0.04);
    bottom: 10%; right: 10%;
    animation: orbFloat 25s ease-in-out infinite reverse;
}
.glow-orb.blue {
    width: 350px; height: 350px;
    background: rgba(59, 130, 246, 0.03);
    top: 40%; left: -5%;
    animation: orbFloat 18s ease-in-out infinite 5s;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 15px) scale(0.95); }
}

/* ── Main layout ──
   The landing page contains sections at different ideal widths (narrow hero,
   wide script grid, medium status dashboard), so main uses the widest of those
   (1200px) and individual sections cap themselves with their own max-width.
   align-items: center keeps narrower siblings centred. */
main {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 24px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Entrance animations ── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

.animate-in {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.animate-scale {
    opacity: 0;
    animation: scaleIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.6s; }
.delay-5 { animation-delay: 0.75s; }
.delay-6 { animation-delay: 0.9s; }
.delay-7 { animation-delay: 1.05s; }

/* ── Wide banner logo ── */
.logo-wrap {
    position: relative;
    margin-bottom: 22px;
    width: 100%;
    max-width: 440px;
}

.logo-banner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    filter: drop-shadow(0 0 40px rgba(201, 168, 76, 0.15));
}

.logo-banner::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -10%;
    width: 70%;
    height: 140%;
    transform: translateY(-50%);
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 40%, transparent 70%);
    pointer-events: none;
    filter: blur(20px);
}

.logo-banner img {
    width: 100%;
    max-height: 64px;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

/* ── Tagline ── */
.tagline {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--gold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 24px;
    text-align: center;
}

/* ── Decorative divider ── */
.divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dim), var(--gold), var(--gold-dim), transparent);
    margin: 0 auto 36px;
    opacity: 0.7;
}

/* ── Description paragraph ── */
.description {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--silver);
    text-align: center;
    max-width: 520px;
    margin-bottom: 36px;
    font-weight: 300;
}

/* ── Section header (used for "Scripts" and "System Status") ── */
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    justify-content: center;
}

.section-header h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.section-header .line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

.section-header .line:first-child {
    background: linear-gradient(90deg, transparent, var(--border));
}

/* ── Script grid section — wider than the main column to fit 3-5 cards across ── */
.scripts-section {
    width: 100%;
    max-width: 1200px;
    margin-bottom: 56px;
}

/* Auto-fit grid: as many ~210px cards as fit, otherwise scale down to 1 column. */
.scripts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

/* ── Individual script card ── */
.script-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
    position: relative;
}

/* Gold top-edge highlight on hover, same idiom as status cards */
.script-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.script-card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.script-card:hover::before { opacity: 1; }

.script-card .thumb-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #0c0e14;
    overflow: hidden;
    position: relative;
}

.script-card .thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.script-card:hover .thumb-wrap img {
    transform: scale(1.04);
}

.script-card .meta {
    padding: 13px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    text-align: left;
}

.script-card .name {
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gold-bright);
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.script-card .tagline {
    /* Reset the page-level .tagline rule (it sets centred + uppercase + tracking
       for the hero tagline). The card uses left-aligned body-style prose. */
    font-family: 'Outfit', sans-serif;
    text-transform: none;
    letter-spacing: 0;
    color: var(--silver);
    font-size: 0.76rem;
    font-weight: 300;
    line-height: 1.4;
    margin: 0;
    text-align: left;
}

.script-card .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 4px;
    gap: 6px;
}

.script-card .chip {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    white-space: nowrap;
}

.script-card .price {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold-bright);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Featured ribbon — gold corner badge for flagship scripts */
.script-card .ribbon {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 3;
    font-family: 'Cinzel', serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bg-deep);
    background: linear-gradient(135deg, var(--gold-bright), var(--gold));
    padding: 3px 8px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(201, 168, 76, 0.35);
}

.script-card.featured {
    border-color: rgba(201, 168, 76, 0.18);
}

.script-card .ribbon-soon {
    background: linear-gradient(135deg, #475569, #334155);
    color: var(--text-bright);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.script-card.coming-soon .price {
    color: var(--silver);
    font-style: italic;
    font-size: 0.78rem;
    font-weight: 500;
}

.script-card.coming-soon .thumb-wrap {
    background: radial-gradient(circle at center, rgba(201,168,76,0.08), transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.script-card.coming-soon .thumb-wrap img {
    object-fit: contain;
    padding: 24%;
    opacity: 0.7;
}

/* Free ribbon — green badge for the free community scripts at the bottom of the catalog */
.script-card .ribbon-free {
    background: linear-gradient(135deg, #34d399, #059669);
    color: var(--bg-deep);
    box-shadow: 0 6px 18px rgba(52, 211, 153, 0.35);
}

.script-card.free {
    border-color: rgba(52, 211, 153, 0.18);
}

.script-card.free .price {
    color: var(--green);
    font-weight: 600;
}

/* Disabled CTA (used by coming-soon scripts on the detail page) */
.cta.disabled {
    background: linear-gradient(135deg, #4b5563, #374151);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.78;
}

.cta.disabled:hover {
    transform: none;
    box-shadow: none;
    filter: none;
}

/* ── Small ghost link below the script grid ── */
.shop-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 22px auto 0;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.shop-link:hover {
    color: var(--gold-bright);
}

.shop-link svg {
    width: 14px; height: 14px;
}

/* ── Dashboard section layout ── */
.dashboard-section {
    width: 100%;
    max-width: 560px;
}

/* ── Status & stat cards grid ── */
.status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.status-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 16px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.status-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.status-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.status-card:hover::before { opacity: 1; }

.status-card.full-width {
    grid-column: 1 / -1;
}

.status-dot-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.status-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--text-muted);
    position: relative;
    transition: background 0.5s ease;
}

.status-dot.online {
    background: var(--green);
    box-shadow: 0 0 12px var(--green-glow);
}

.status-dot.online::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--green);
    opacity: 0;
    animation: pulse-ring 2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.status-dot.offline {
    background: var(--red);
    box-shadow: 0 0 12px var(--red-glow);
}

.status-dot.checking {
    background: var(--text-muted);
    animation: pulse-check 1.5s ease-in-out infinite;
}

@keyframes pulse-ring {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.8); }
}

@keyframes pulse-check {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

.status-card h3 {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.status-card .status-text {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 400;
    transition: color 0.3s ease;
}

.status-card .status-text.online { color: var(--green); }
.status-card .status-text.offline { color: var(--red); }

.stat-value {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold-bright);
    margin-top: 2px;
    letter-spacing: -0.01em;
}

.stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
}

/* ── Footer ── */
footer {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px 24px 32px;
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

footer a {
    color: var(--gold);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

footer a:hover { opacity: 1; }

footer .footer-line {
    margin-bottom: 6px;
}

footer .footer-line:last-child {
    margin-bottom: 0;
}

footer .footer-legal {
    font-size: 0.72rem;
    opacity: 0.85;
}

footer .footer-sep {
    opacity: 0.5;
    margin: 0 4px;
}

footer .footer-disclaimer {
    color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════
   Legal pages (/terms, /privacy)
   ════════════════════════════════════════════════════════════ */

main.legal {
    max-width: 760px;
}

.legal-article {
    width: 100%;
    color: var(--text);
    line-height: 1.7;
    font-weight: 300;
    font-size: 0.98rem;
}

.legal-article h1 {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-bright);
    line-height: 1.15;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.legal-article .legal-meta {
    color: var(--text-muted);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    margin-bottom: 36px;
}

.legal-article h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--gold-bright);
    margin: 32px 0 10px;
    padding-bottom: 6px;
    background: linear-gradient(90deg, var(--gold) 0%, transparent 60%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    letter-spacing: 0.02em;
}

.legal-article p {
    margin-bottom: 12px;
}

.legal-article strong {
    color: var(--text-bright);
    font-weight: 500;
}

.legal-article a {
    color: var(--gold-bright);
    text-decoration: none;
    border-bottom: 1px dotted rgba(201, 168, 76, 0.4);
}

.legal-article a:hover {
    color: var(--gold-light);
    border-bottom-color: var(--gold-bright);
}

.legal-article code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
    background: rgba(255, 255, 255, 0.04);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--gold-bright);
}

@media (max-width: 560px) {
    .legal-article h1 {
        font-size: 1.5rem;
    }
    .legal-article h2 {
        font-size: 1rem;
        margin-top: 24px;
    }
    .legal-article {
        font-size: 0.92rem;
    }
}

/* ════════════════════════════════════════════════════════════
   Detail page (/scripts/{slug})
   ════════════════════════════════════════════════════════════ */

main.detail {
    max-width: 960px;
}

.back-link {
    align-self: flex-start;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    margin-bottom: 28px;
    transition: color 0.2s ease;
}

.back-link:hover {
    color: var(--gold-bright);
}

/* ── Hero (image + title + CTAs) ── */
.detail-hero {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 320px) 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 56px;
}

.detail-hero .hero-image {
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: #0c0e14;
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(201, 168, 76, 0.06) inset;
}

.detail-hero .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.detail-hero .hero-text {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.detail-hero h1 {
    font-family: 'Cinzel', serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-bright);
    letter-spacing: 0.01em;
}

.detail-hero .hero-tagline {
    font-size: 1.08rem;
    color: var(--gold-bright);
    font-weight: 400;
    line-height: 1.4;
    font-style: italic;
}

.detail-hero .hero-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.detail-hero .hero-meta .chip {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
}

.detail-hero .hero-meta .price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold-bright);
}

/* Detail-page treatment for free community scripts */
.detail-hero.free .hero-meta .price {
    color: var(--green);
}

.detail-hero .hero-meta .chip-free {
    color: var(--bg-deep);
    background: linear-gradient(135deg, #34d399, #059669);
    border: none;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(52, 211, 153, 0.3);
}

/* ── CTA buttons (used in hero + bottom) ── */
.cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    border: 1px solid transparent;
}

.cta.primary {
    background: linear-gradient(135deg, var(--gold-bright), var(--gold));
    color: var(--bg-deep);
    border-color: rgba(201, 168, 76, 0.4);
    box-shadow: 0 8px 24px rgba(201, 168, 76, 0.25);
}

.cta.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(201, 168, 76, 0.4);
    filter: brightness(1.05);
}

.cta.outline {
    background: var(--bg-card);
    color: var(--gold-bright);
    border-color: rgba(201, 168, 76, 0.3);
}

.cta.outline:hover {
    background: var(--bg-card-hover);
    border-color: rgba(201, 168, 76, 0.5);
    transform: translateY(-2px);
}

.cta.muted {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--border);
}

.cta.muted:hover {
    background: var(--bg-card-hover);
    color: var(--text-bright);
    transform: translateY(-2px);
}

.cta svg {
    width: 16px; height: 16px;
    flex-shrink: 0;
}

/* ── Body section (rendered markdown) ── */
.detail-body-section {
    width: 100%;
    margin-bottom: 56px;
}

.detail-body {
    color: var(--text);
    line-height: 1.7;
    font-size: 1rem;
    font-weight: 300;
}

/* Markdown body styling — all selectors target rendered HTML */
.detail-body h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--gold-bright);
    margin: 44px 0 18px;
    padding-bottom: 8px;
    letter-spacing: 0.02em;
    background: linear-gradient(90deg, var(--gold) 0%, transparent 60%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
}

.detail-body h2:first-child {
    margin-top: 0;
}

.detail-body h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--text-bright);
    margin: 28px 0 12px;
    letter-spacing: 0.02em;
}

.detail-body p {
    margin-bottom: 14px;
}

.detail-body strong {
    color: var(--text-bright);
    font-weight: 500;
}

.detail-body ul,
.detail-body ol {
    margin: 0 0 18px 4px;
    padding-left: 22px;
    list-style: none;
}

.detail-body ul li,
.detail-body ol li {
    position: relative;
    padding: 4px 0 4px 4px;
}

.detail-body ul li::before {
    content: '\25C6'; /* ◆ */
    position: absolute;
    left: -18px;
    top: 5px;
    color: var(--gold);
    font-size: 0.75rem;
    line-height: 1.7;
}

.detail-body ol {
    counter-reset: ol-counter;
    padding-left: 26px;
}

.detail-body ol li {
    counter-increment: ol-counter;
}

.detail-body ol li::before {
    content: counter(ol-counter) ".";
    position: absolute;
    left: -22px;
    top: 4px;
    color: var(--gold);
    font-weight: 600;
    font-size: 0.85rem;
}

.detail-body a {
    color: var(--gold-bright);
    text-decoration: none;
    border-bottom: 1px dotted rgba(201, 168, 76, 0.4);
    transition: border-bottom-color 0.2s ease, color 0.2s ease;
}

.detail-body a:hover {
    color: var(--gold-light);
    border-bottom-color: var(--gold-bright);
}

.detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 18px 0;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(201, 168, 76, 0.08);
    display: block;
}

.detail-body details {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 20px;
    margin: 22px 0;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.detail-body details[open] {
    background: var(--bg-card-hover);
    border-color: rgba(201, 168, 76, 0.18);
}

.detail-body details summary {
    cursor: pointer;
    color: var(--gold-bright);
    font-weight: 500;
    list-style: none;
    padding: 4px 0;
    user-select: none;
}

.detail-body details summary::-webkit-details-marker { display: none; }

.detail-body details summary::before {
    content: '+';
    display: inline-block;
    width: 20px;
    color: var(--gold);
    font-weight: 700;
    transition: transform 0.2s ease;
}

.detail-body details[open] summary::before {
    content: '\2212'; /* − */
}

.detail-body details > *:not(summary) {
    margin-top: 12px;
}

.detail-body hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 32px 0;
}

/* ── Tables in markdown body ──
   Matches the gold-tinted card aesthetic. Wraps overflow on narrow screens. */
.detail-body table {
    width: 100%;
    margin: 22px 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    font-size: 0.95rem;
    /* On narrow screens, show a subtle scrollbar inside the wrapper rather than overflowing the page */
    display: table;
}

.detail-body thead {
    background: linear-gradient(180deg, rgba(201,168,76,0.08), rgba(201,168,76,0.02));
}

.detail-body th {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold-bright);
    letter-spacing: 0.04em;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.18);
    white-space: nowrap;
}

.detail-body td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: top;
}

.detail-body tbody tr:last-child td {
    border-bottom: none;
}

.detail-body tbody tr:hover td {
    background: rgba(255, 255, 255, 0.018);
}

.detail-body tbody tr:hover {
    /* Subtle gold left edge on row hover */
    box-shadow: inset 2px 0 0 var(--gold-dim);
}

.detail-body table strong {
    color: var(--gold-bright);
}

/* Wrap wide tables on small screens — let the table itself scroll horizontally */
@media (max-width: 720px) {
    .detail-body table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .detail-body th,
    .detail-body td {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
}

.detail-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88em;
    background: rgba(255, 255, 255, 0.04);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--gold-bright);
}

/* ── Empty body state — script with no markdown content yet ── */
.detail-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
    padding: 36px 0;
}

.detail-empty a {
    color: var(--gold-bright);
}

/* ── Closing CTA section ── */
.detail-cta-section {
    width: 100%;
    text-align: center;
    margin-bottom: 32px;
}

.detail-cta-section .cta-row {
    justify-content: center;
    margin-top: 24px;
}

/* ── Mobile responsive ── */
@media (max-width: 720px) {
    .detail-hero {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }

    .detail-hero .hero-image {
        max-width: 280px;
        margin: 0 auto;
    }

    .detail-hero .hero-text {
        align-items: center;
    }

    .detail-hero h1 {
        font-size: 1.85rem;
    }

    .detail-hero .hero-meta {
        justify-content: center;
    }

    .cta-row {
        justify-content: center;
    }

    .detail-body h2 {
        font-size: 1.25rem;
    }
}

@media (max-width: 560px) {
    main {
        padding: 48px 16px 32px;
    }

    .logo-wrap {
        max-width: 300px;
        margin-bottom: 16px;
    }

    .logo-banner img {
        max-height: 48px;
    }

    .tagline {
        font-size: 0.85rem;
        letter-spacing: 0.12em;
        margin-bottom: 18px;
    }

    .divider {
        margin-bottom: 24px;
    }

    .description {
        font-size: 0.92rem;
        margin-bottom: 28px;
    }

    .scripts-grid {
        gap: 10px;
    }

    .scripts-section {
        margin-bottom: 44px;
    }

    .dashboard-section {
        max-width: 100%;
    }

    .status-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .status-card {
        padding: 18px 12px;
    }

    .status-card h3 {
        font-size: 0.72rem;
    }

    .stat-value {
        font-size: 1.2rem;
    }

    .section-header h2 {
        font-size: 1rem;
    }

    footer {
        padding: 28px 16px 24px;
    }
}

@media (max-width: 360px) {
    .status-grid {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════════════
   About page (/about)
   Cinematic personal page — animated headline, scroll-reveal
   sections, self-drawing timeline rail, count-up stat tiles,
   shimmer-edge contact CTAs. Sits on top of the global ambient.
   ════════════════════════════════════════════════════════════ */

main.about {
    max-width: 860px;
}

main.about .back-link {
    align-self: flex-start;
    margin-bottom: 28px;
}

/* ── Ornament — a thin gold rule with a pulsing diamond, sitting above
   the headline as the page-topper flourish. ── */
.about-ornament {
    width: 100%;
    max-width: 240px;
    margin: 4px 0 14px;
    line-height: 0;
}
.about-ornament svg {
    width: 100%;
    height: 16px;
    overflow: visible;
}
.about-ornament polygon {
    transform-origin: center;
    transform-box: fill-box;
    animation: ornamentPulse 3.6s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.6));
}
@keyframes ornamentPulse {
    0%, 100% { opacity: 0.7; transform: rotate(45deg) scale(1); }
    50%      { opacity: 1;   transform: rotate(45deg) scale(1.18); }
}

/* ── Headline container — holds the breathing aura behind the H1 plus the
   H1 itself. Perspective lives here (not on .about-name) so the cursor-
   driven rotateX/Y on the H1 actually reads as 3D. No padding: the aura
   is sized off this container, so any padding here grows the aura into a
   rectangular halo around the text — we want the glow tight on the H1. ── */
.about-headline {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 0 18px;
    perspective: 1200px;
}

/* Breathing radial aura behind the headline. Gives the H1 atmosphere and
   keeps the page from feeling static between page-load and first scroll. */
.about-aura {
    position: absolute;
    inset: -40% -25%;
    background: radial-gradient(
        ellipse at center,
        rgba(201, 168, 76, 0.30) 0%,
        rgba(201, 168, 76, 0.12) 35%,
        transparent 70%
    );
    filter: blur(24px);
    pointer-events: none;
    animation: auraBreath 6s ease-in-out infinite;
}
@keyframes auraBreath {
    0%, 100% { opacity: 0.55; transform: scale(0.95); }
    50%      { opacity: 1;    transform: scale(1.10); }
}

/* ── Animated headline ── */
.about-name {
    font-family: 'Cinzel', serif;
    font-size: clamp(3.4rem, 9vw, 5.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--text-bright);
    margin: 0;
    position: relative;
    text-align: center;
    display: inline-flex;
    gap: 0.04em;
    /* Just a hard depth-shadow on the letters. We deliberately do NOT add
       a soft gold glow here: overflow:hidden (needed so the letterRise
       cascade doesn't peek below the line into the tagline beneath) would
       clip the glow at the top/bottom of the line-box, producing a visible
       rectangular halo around the text. Atmospheric glow comes from the
       .about-aura sibling instead. */
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
    overflow: hidden;
    padding: 0 0.12em;
    /* 3D tilt driven by cursor — variables written by about.js */
    transform-style: preserve-3d;
    transform: rotateX(var(--rot-x, 0deg)) rotateY(var(--rot-y, 0deg));
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Each letter rises into place with a staggered cascade. After the cascade
   completes, the letters' `translate` property (independent of `transform`)
   shifts each by a per-letter depth driven by the cursor, giving a subtle
   "splay" effect against the parent's rotateX/Y tilt.
   The letter background stacks two layers — a moving 110deg bright-cream
   sweep on top of the static vertical gold gradient — both clipped to the
   glyph shape so the periodic shimmer is visible ON the letter outlines
   rather than as a rectangular overlay (which is what produced the
   "visible box" we used to have around the headline). */
.about-name .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(60%);
    background:
        linear-gradient(110deg,
            transparent 35%,
            rgba(255, 240, 200, 0.85) 50%,
            transparent 65%
        ) 200% 0 / 250% 100% no-repeat,
        linear-gradient(180deg, var(--text-bright) 0%, #d6c084 70%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation:
        letterRise 1s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        letterShimmer 7s ease-in-out 2.5s infinite;
    animation-delay: calc(0.25s + var(--i) * 0.12s), 2.5s;
    translate: var(--mx, 0) var(--my, 0);
    transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes letterRise {
    from { opacity: 0; transform: translateY(60%) rotateX(40deg); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0)    rotateX(0);    filter: blur(0); }
}

/* Slow-pause, fast-sweep loop. Both endpoints sit the bright band well
   off-letter (200% = far left, -120% = far right) so the inter-iteration
   position jump is invisible — the user only ever sees a single left-to-
   right wipe per cycle. */
@keyframes letterShimmer {
    0%, 70% { background-position: 200% 0, 0 0; }
    100%    { background-position: -120% 0, 0 0; }
}

/* ── Tagline beneath the headline ── */
.about-tagline {
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--gold);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 24px;
    text-align: center;
}

/* ── Reading column for the body content ── */
.about-column {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 56px;
    margin-top: 16px;
}

/* ── Scroll reveals — sections wait below the viewport then rise into place ── */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Intro paragraph — sets the personal tone, slightly larger than body ── */
.about-intro p {
    font-size: 1.12rem;
    line-height: 1.75;
    color: var(--text);
    font-weight: 300;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.about-intro strong {
    color: var(--text-bright);
    font-weight: 500;
}

/* ── Section heading (asymmetric — gold rule on right only) ── */
.about-h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gold-bright);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.about-h2 span {
    flex-shrink: 0;
}

.about-h2::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
}

/* ── Body text inside sections ── */
.about-text {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--text);
    font-weight: 300;
}

.about-text strong {
    color: var(--text-bright);
    font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   Timeline — vertical rail with three milestones.
   The rail draws itself from top to bottom once the section
   enters the viewport. Markers fade in along with it.
   ════════════════════════════════════════════════════════════ */

.timeline {
    list-style: none;
    position: relative;
    padding: 8px 0 0 72px;
    margin: 0;
}

/* The rail itself — gold gradient line that scales down from the top */
.timeline::before {
    content: '';
    position: absolute;
    left: 25px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--gold) 8%,
        var(--gold-bright) 50%,
        var(--gold) 92%,
        transparent 100%
    );
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
    box-shadow: 0 0 12px rgba(201, 168, 76, 0.35);
}

.about-section.is-visible .timeline::before {
    transform: scaleY(1);
}

/* Timeline items — sit on the rail, each fades in from the left with stagger */
.timeline-item {
    position: relative;
    padding-bottom: 36px;
    opacity: 0;
    transform: translateX(-18px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(0.4s + var(--i) * 0.25s);
}

.timeline-item:last-child { padding-bottom: 0; }

.about-section.is-visible .timeline-item {
    opacity: 1;
    transform: translateX(0);
}

/* Numbered circular markers — sit centred on the rail */
.t-marker {
    position: absolute;
    left: -72px;
    top: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #1a1b22 0%, #0b0c12 100%);
    border: 1px solid rgba(201, 168, 76, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--gold-bright);
    letter-spacing: 0.04em;
    box-shadow:
        inset 0 0 12px rgba(0, 0, 0, 0.6),
        0 0 0 4px var(--bg-deep);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Current chapter (TRiBot) — glows softly and pulses on a loop, with a
   slowly-rotating conic gradient ring around the outside for extra emphasis.
   `isolation: isolate` forces a local stacking context so the ::before
   ring with z-index:-1 stays scoped to this marker (otherwise -1 risks
   getting pushed behind the timeline item itself). */
.timeline-item.current .t-marker {
    border-color: var(--gold-bright);
    box-shadow:
        inset 0 0 14px rgba(0, 0, 0, 0.6),
        0 0 0 4px var(--bg-deep),
        0 0 22px rgba(201, 168, 76, 0.45);
    animation: markerPulse 3.4s ease-in-out infinite;
    isolation: isolate;
}

/* Rotating conic-gradient halo. Sits behind the marker (z-index -1),
   masked to a thin ring with radial-gradient, and spins on a slow loop. */
.timeline-item.current .t-marker::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(201, 168, 76, 0)   0deg,
        rgba(201, 168, 76, 0.9) 60deg,
        rgba(255, 232, 170, 1)  90deg,
        rgba(201, 168, 76, 0.9) 120deg,
        rgba(201, 168, 76, 0)   180deg,
        rgba(201, 168, 76, 0)   360deg
    );
    -webkit-mask: radial-gradient(circle, transparent 56%, #000 60%, #000 75%, transparent 80%);
            mask: radial-gradient(circle, transparent 56%, #000 60%, #000 75%, transparent 80%);
    animation: markerOrbit 5.5s linear infinite;
    z-index: -1;
    pointer-events: none;
    filter: blur(0.5px);
}

@keyframes markerPulse {
    0%, 100% {
        box-shadow:
            inset 0 0 14px rgba(0, 0, 0, 0.6),
            0 0 0 4px var(--bg-deep),
            0 0 22px rgba(201, 168, 76, 0.45);
    }
    50% {
        box-shadow:
            inset 0 0 14px rgba(0, 0, 0, 0.6),
            0 0 0 4px var(--bg-deep),
            0 0 34px rgba(201, 168, 76, 0.75);
    }
}

@keyframes markerOrbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Right-hand body — title + meta + paragraph */
.t-body {
    padding-top: 2px;
}

.t-title {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    letter-spacing: 0.02em;
}

.t-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--gold-bright);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 9px;
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 999px;
    background: rgba(201, 168, 76, 0.06);
}

.t-meta {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    color: var(--gold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 400;
}

.t-text {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--text);
    font-weight: 300;
}

.t-text strong {
    color: var(--text-bright);
    font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   Stat tiles — count-up numerals, gold-edged on hover
   ════════════════════════════════════════════════════════════ */

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 100%;
}

.stat-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 26px 18px 22px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Gold top-edge highlight reveal — same idiom as script cards */
.stat-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-block:hover {
    background: var(--bg-card-hover);
    border-color: rgba(201, 168, 76, 0.28);
    transform: translateY(-3px);
}

.stat-block:hover::before { opacity: 1; }

.stat-num {
    font-family: 'Cinzel', serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--gold-bright);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   Contact CTAs
   Primary = Discord (filled gold tint, gold border, shimmer sweep)
   Secondary = TRiBot forum (outline)
   ════════════════════════════════════════════════════════════ */

.about-contact .about-text {
    margin-bottom: 20px;
}

.contact-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.contact-btn {
    flex: 1 1 240px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 22px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-bright);
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    position: relative;
    overflow: hidden;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        color 0.3s ease;
}

.contact-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.contact-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(201, 168, 76, 0.45);
    color: var(--gold-light);
    background: var(--bg-card-hover);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

/* Primary (Discord) — gold-tinted, with a sweep highlight that crosses on hover */
.contact-btn.primary {
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.18) 0%, rgba(201, 168, 76, 0.08) 100%);
    border-color: rgba(201, 168, 76, 0.5);
    color: var(--gold-light);
}

.contact-btn.primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 240, 200, 0.18) 50%,
        transparent 100%
    );
    transition: left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-btn.primary:hover::before { left: 130%; }

.contact-btn.primary:hover {
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.28) 0%, rgba(201, 168, 76, 0.14) 100%);
    border-color: var(--gold-bright);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.3),
        0 0 22px rgba(201, 168, 76, 0.18);
}

/* ── About page responsive ── */
@media (max-width: 720px) {
    main.about {
        max-width: 100%;
    }

    .about-column {
        gap: 44px;
    }

    .about-tagline {
        font-size: 0.78rem;
        letter-spacing: 0.22em;
    }

    .about-intro p {
        font-size: 1rem;
    }

    .timeline {
        padding-left: 56px;
    }

    .timeline::before {
        left: 19px;
    }

    .t-marker {
        left: -56px;
        width: 42px;
        height: 42px;
        font-size: 0.82rem;
    }

    .t-title {
        font-size: 1.18rem;
    }

    .t-badge {
        font-size: 0.62rem;
    }

    .about-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .stat-block {
        padding: 18px 14px 16px;
    }

    .stat-num {
        font-size: 2rem;
    }

    .contact-btn {
        flex: 1 1 100%;
        padding: 14px 18px;
        font-size: 0.9rem;
    }
}

@media (max-width: 460px) {
    .about-name {
        letter-spacing: 0.04em;
    }
}

/* Honour reduced-motion preferences — kill every looping/cascading effect.
   Mouse-parallax is suppressed by about.js (which exits early under
   prefers-reduced-motion) so CSS only needs to handle the visual layer. */
@media (prefers-reduced-motion: reduce) {
    .about-name,
    .about-name .letter,
    .about-aura,
    .about-ornament polygon,
    .timeline-item.current .t-marker,
    .timeline-item.current .t-marker::before,
    .reveal,
    .timeline::before,
    .timeline-item {
        animation: none !important;
        transition: none !important;
    }
    .about-name { transform: none; }
    .about-name .letter { opacity: 1; transform: none; translate: 0 0; }
    .about-aura { opacity: 0.7; transform: scale(1); }
    .about-ornament polygon { opacity: 1; transform: rotate(45deg) scale(1); }
    .reveal { opacity: 1; transform: none; }
    .timeline::before { transform: scaleY(1); }
    .timeline-item { opacity: 1; transform: none; }
}