/* ================================================================
   آزوفی (Azophi) — Main Stylesheet
   Astronomy Education Platform for Persian Audiences
   ================================================================ */

/* ── Design Tokens ── */
:root {
        --azophi-font-heading: 'Lalezar', 'Vazirmatn', sans-serif;
        --azophi-font-body: 'Vazirmatn', 'Tahoma', sans-serif;

        --azophi-space-xs: 0.25rem;
        --azophi-space-sm: 0.5rem;
        --azophi-space-md: 1rem;
        --azophi-space-lg: 1.5rem;
        --azophi-space-xl: 2.5rem;
        --azophi-space-2xl: 4rem;
        --azophi-space-3xl: 6rem;

        --azophi-radius-sm: 6px;
        --azophi-radius-md: 10px;
        --azophi-radius-lg: 16px;
        --azophi-radius-xl: 24px;

        --azophi-t-fast: 200ms ease;
        --azophi-t-base: 350ms ease;
        --azophi-t-slow: 600ms ease;
        --azophi-t-theme: 500ms ease;

        --azophi-z-header: 1000;
        --azophi-z-mobile: 999;
        --azophi-z-lightbox: 2000;
        --azophi-z-progress: 1001;
        --azophi-z-toast: 3000;
}

/* ── Dark Theme (Default) ── */
[data-theme="dark"] {
        --azophi-bg-primary: #060B18;
        --azophi-bg-secondary: #0A0F1E;
        --azophi-bg-surface: #0E1428;
        --azophi-bg-surface-hover: #141C34;
        --azophi-bg-card: rgba(14, 20, 40, 0.85);
        --azophi-bg-card-hover: rgba(20, 28, 52, 0.95);
        --azophi-text-primary: #E8F0FE;
        --azophi-text-secondary: #8B9DC3;
        --azophi-text-muted: #4A5A80;
        --azophi-cyan: #38BDF8;
        --azophi-gold: #F6C547;
        --azophi-indigo: #1E2D5A;
        --azophi-cyan-glow: rgba(56, 189, 248, 0.15);
        --azophi-gold-glow: rgba(246, 197, 71, 0.12);
        --azophi-border: rgba(56, 189, 248, 0.12);
        --azophi-border-strong: rgba(56, 189, 248, 0.25);
        --azophi-shadow-card: 0 4px 30px rgba(0, 0, 0, 0.4);
        --azophi-shadow-card-hover: 0 8px 50px rgba(56, 189, 248, 0.08);
        --azophi-overlay: rgba(6, 11, 24, 0.92);
        --azophi-overlay-light: rgba(6, 11, 24, 0.4);
        --azophi-grain: 0.04;
        --azophi-moon-color: #E8F0FE;
        --azophi-moon-shadow: #060B18;
}

/* ── Light Theme ── */
[data-theme="light"] {
        --azophi-bg-primary: #F0F5FF;
        --azophi-bg-secondary: #E4ECFA;
        --azophi-bg-surface: #FFFFFF;
        --azophi-bg-surface-hover: #F0F5FF;
        --azophi-bg-card: rgba(255, 255, 255, 0.9);
        --azophi-bg-card-hover: #FFFFFF;
        --azophi-text-primary: #0A0F1E;
        --azophi-text-secondary: #3A4A6B;
        --azophi-text-muted: #7B8DB3;
        --azophi-cyan: #0284C7;
        --azophi-gold: #D4A017;
        --azophi-indigo: #1E2D5A;
        --azophi-cyan-glow: rgba(2, 132, 199, 0.08);
        --azophi-gold-glow: rgba(212, 160, 23, 0.08);
        --azophi-border: rgba(10, 15, 30, 0.1);
        --azophi-border-strong: rgba(10, 15, 30, 0.2);
        --azophi-shadow-card: 0 4px 30px rgba(0, 0, 0, 0.06);
        --azophi-shadow-card-hover: 0 8px 50px rgba(2, 132, 199, 0.1);
        --azophi-overlay: rgba(240, 245, 255, 0.95);
        --azophi-overlay-light: rgba(240, 245, 255, 0.4);
        --azophi-grain: 0.015;
        --azophi-moon-color: #1E2D5A;
        --azophi-moon-shadow: #F0F5FF;
}

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

html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
        /* Reserve scrollbar space always to prevent layout shift on navigation */
        scrollbar-gutter: stable;
        /* Set background color immediately to prevent white flash before CSS loads */
        background-color: #060B18;
        color-scheme: dark;
}

[data-theme="light"] html,
html[data-theme="light"] {
        background-color: #F0F5FF;
        color-scheme: light;
}

body {
        margin: 0;
        font-family: var(--azophi-font-body);
        font-size: 16px;
        line-height: 1.8;
        color: var(--azophi-text-primary);
        background-color: var(--azophi-bg-primary);
        transition: background-color var(--azophi-t-theme), color var(--azophi-t-theme);
        overflow-x: hidden;
        /* Sticky-footer pattern: body is flex column, main grows to fill */
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        /* Smooth fade-in on page load to mask white flash during navigation */
        animation: azophi-page-fade-in 280ms ease-out;
}

@keyframes azophi-page-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
}

h1, h2, h3, h4, h5, h6 {
        font-family: var(--azophi-font-heading);
        font-weight: 400;
        line-height: 1.3;
        margin: 0 0 var(--azophi-space-md);
        color: var(--azophi-text-primary);
        letter-spacing: 0.3px;
}

a {
        color: var(--azophi-cyan);
        text-decoration: none;
        transition: color var(--azophi-t-fast);
}

a:hover { color: var(--azophi-gold); }

img, video, svg {
        max-width: 100%;
        height: auto;
        vertical-align: middle;
}

button {
        font-family: inherit;
        cursor: pointer;
}

p { margin: 0 0 var(--azophi-space-md); }

ul, ol { padding-right: var(--azophi-space-lg); margin: 0 0 var(--azophi-space-md); }

/* ── Skip Link ── */
.azophi-skip-link {
        position: absolute;
        top: -100px;
        right: 0;
        background: var(--azophi-cyan);
        color: var(--azophi-bg-primary);
        padding: var(--azophi-space-sm) var(--azophi-space-md);
        z-index: 9999;
        border-radius: 0 0 0 var(--azophi-radius-sm);
        transition: top var(--azophi-t-fast);
}

.azophi-skip-link:focus { top: 0; }

/* ── Header ── */
.azophi-header {
        position: sticky;
        top: 0;
        z-index: var(--azophi-z-header);
        background: rgba(6, 11, 24, 0.7);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border-bottom: 1px solid var(--azophi-border);
        transition: background var(--azophi-t-base), border-color var(--azophi-t-base), box-shadow var(--azophi-t-base);
        /* Sticky-footer: don't shrink header */
        flex-shrink: 0;
}

[data-theme="light"] .azophi-header {
        background: rgba(240, 245, 255, 0.8);
}

.azophi-header.is-scrolled {
        background: rgba(6, 11, 24, 0.92);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .azophi-header.is-scrolled {
        background: rgba(240, 245, 255, 0.95);
}

.azophi-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.6rem var(--azophi-space-lg);
        max-width: 1320px;
        margin: 0 auto;
        gap: var(--azophi-space-lg);
}

/* ── Logo ── */
.azophi-logo {
        display: flex;
        align-items: center;
        color: var(--azophi-text-primary);
        transition: color var(--azophi-t-fast);
        flex-shrink: 0;
        text-decoration: none;
        position: relative;
}

.azophi-logo:hover { color: var(--azophi-cyan); }

.azophi-logo__img {
        height: 48px;
        width: auto;
        transition: transform var(--azophi-t-base);
}

/* ── Two logo versions: toggle visibility based on theme ──
   Use !important to guarantee override regardless of CSS load order or cache.
   Default (dark mode / no data-theme): show DARK logo, hide LIGHT logo. */
.azophi-logo__img--light { display: none !important; }
.azophi-logo__img--dark  { display: block !important; }

/* Light mode: show LIGHT logo, hide DARK logo */
html[data-theme="light"] .azophi-logo__img--light { display: block !important; }
html[data-theme="light"] .azophi-logo__img--dark  { display: none !important; }

.azophi-logo:hover .azophi-logo__img {
        transform: scale(1.04);
}

.azophi-logo__rim {
        stroke-dasharray: 200;
        stroke-dashoffset: 200;
        animation: azophi-logo-draw 1.4s ease-out forwards;
}

.azophi-logo__ring--1 {
        stroke-dasharray: 200;
        stroke-dashoffset: 200;
        animation: azophi-logo-draw 1.4s ease-out 0.2s forwards;
}

.azophi-logo__ring--2 {
        stroke-dasharray: 200;
        stroke-dashoffset: 200;
        animation: azophi-logo-draw 1.4s ease-out 0.4s forwards;
}

.azophi-logo__detail {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        animation: azophi-logo-draw 1.2s ease-out 0.6s forwards;
}

.azophi-logo__text {
        opacity: 0;
        animation: azophi-logo-fade 0.6s ease-out 0.9s forwards;
}

@keyframes azophi-logo-draw {
        to { stroke-dashoffset: 0; }
}

@keyframes azophi-logo-fade {
        to { opacity: 1; }
}

/* ── Navigation ── */
.azophi-nav--desktop {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: center;
}

.azophi-nav__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 2px;
        flex-wrap: wrap;
        align-items: center;
        background: var(--azophi-bg-card);
        border: 1px solid var(--azophi-border);
        border-radius: 999px;
        padding: 4px;
}

.azophi-nav__list ul { list-style: none; padding: 0; }

.azophi-nav__item { position: relative; }

.azophi-nav__link {
        display: block;
        padding: 8px 18px;
        color: var(--azophi-text-secondary);
        font-size: 0.9rem;
        font-weight: 500;
        border-radius: 999px;
        transition: all var(--azophi-t-fast);
        position: relative;
}

.azophi-nav__link:hover,
.azophi-nav__link:focus {
        color: var(--azophi-text-primary);
        background: var(--azophi-cyan-glow);
}

.current-menu-item > .azophi-nav__link,
.current_page_item > .azophi-nav__link {
        color: var(--azophi-bg-primary);
        background: linear-gradient(135deg, var(--azophi-cyan), var(--azophi-indigo));
        box-shadow: 0 2px 10px rgba(56, 189, 248, 0.25);
}

/* ── Header Actions ── */
.azophi-header__actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
}

.azophi-theme-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--azophi-bg-card);
        border: 1px solid var(--azophi-border);
        color: var(--azophi-text-primary);
        position: relative;
        transition: all var(--azophi-t-base);
        overflow: hidden;
}

.azophi-theme-toggle:hover {
        border-color: var(--azophi-cyan);
        color: var(--azophi-cyan);
        box-shadow: 0 0 18px var(--azophi-cyan-glow);
        transform: rotate(15deg);
}

.azophi-theme-toggle__icon {
        position: absolute;
        transition: opacity var(--azophi-t-base), transform var(--azophi-t-base);
}

[data-theme="dark"] .azophi-theme-toggle__icon--moon { opacity: 0; transform: scale(0.4) rotate(-90deg); }
[data-theme="dark"] .azophi-theme-toggle__icon--sun { opacity: 1; transform: scale(1) rotate(0); }
[data-theme="light"] .azophi-theme-toggle__icon--sun { opacity: 0; transform: scale(0.4) rotate(90deg); }
[data-theme="light"] .azophi-theme-toggle__icon--moon { opacity: 1; transform: scale(1) rotate(0); }

.azophi-mobile-toggle {
        display: none;
        flex-direction: column;
        justify-content: space-around;
        width: 40px;
        height: 40px;
        padding: 10px 8px;
        background: transparent;
        border: 0;
}

.azophi-mobile-toggle__bar {
        display: block;
        height: 2px;
        width: 24px;
        background: var(--azophi-text-primary);
        border-radius: 2px;
        transition: all var(--azophi-t-base);
        transform-origin: center;
}

.azophi-mobile-toggle[aria-expanded="true"] .azophi-mobile-toggle__bar--1 {
        transform: translateY(7px) rotate(45deg);
}
.azophi-mobile-toggle[aria-expanded="true"] .azophi-mobile-toggle__bar--2 {
        opacity: 0;
}
.azophi-mobile-toggle[aria-expanded="true"] .azophi-mobile-toggle__bar--3 {
        transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile Nav ── */
.azophi-mobile-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(320px, 85vw);
        height: 100vh;
        background: var(--azophi-bg-secondary);
        z-index: var(--azophi-z-mobile);
        padding: var(--azophi-space-2xl) var(--azophi-space-lg) var(--azophi-space-lg);
        overflow-y: auto;
        transition: right var(--azophi-t-base);
        border-left: 1px solid var(--azophi-border);
        box-shadow: -10px 0 50px rgba(0, 0, 0, 0.5);
}

.azophi-mobile-nav.is-open {
        right: 0;
}

.azophi-mobile-nav__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--azophi-space-sm);
}

.azophi-mobile-nav__list a {
        display: block;
        padding: var(--azophi-space-md);
        border-radius: var(--azophi-radius-md);
        background: var(--azophi-bg-card);
        color: var(--azophi-text-primary);
        font-size: 1.05rem;
        transition: all var(--azophi-t-fast);
}

.azophi-mobile-nav__list a:hover {
        background: var(--azophi-bg-card-hover);
        color: var(--azophi-cyan);
        transform: translateX(-4px);
}

.azophi-mobile-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: var(--azophi-z-mobile) - 1;
        opacity: 0;
        transition: opacity var(--azophi-t-base);
}

.azophi-mobile-overlay.is-open { opacity: 1; }

/* ── Mobile Bottom Nav ── */
.azophi-bottom-nav {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--azophi-overlay);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--azophi-border);
        padding: var(--azophi-space-xs) 0 env(safe-area-inset-bottom);
        z-index: var(--azophi-z-header);
        justify-content: space-around;
}

.azophi-bottom-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: var(--azophi-space-xs) var(--azophi-space-xs);
        color: var(--azophi-text-secondary);
        font-size: 0.7rem;
        font-weight: 500;
        transition: color var(--azophi-t-fast);
}

.azophi-bottom-nav__item:hover,
.azophi-bottom-nav__item.is-active { color: var(--azophi-cyan); }

/* ── Hero ── */
.azophi-hero {
        position: relative;
        height: 100vh;
        min-height: 600px;
        max-height: 900px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: var(--azophi-bg-primary);
}

.azophi-hero__video,
.azophi-hero__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background-size: cover;
        background-position: center;
        z-index: 0;
}

.azophi-hero__overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
                radial-gradient(ellipse at center, transparent 0%, rgba(6, 11, 24, 0.5) 60%, rgba(6, 11, 24, 0.95) 100%),
                linear-gradient(180deg, rgba(6, 11, 24, 0.4) 0%, rgba(6, 11, 24, 0.6) 50%, rgba(6, 11, 24, 0.95) 100%);
}

[data-theme="light"] .azophi-hero__overlay {
        background:
                radial-gradient(ellipse at center, transparent 0%, rgba(240, 245, 255, 0.5) 60%, rgba(240, 245, 255, 0.95) 100%);
}

.azophi-hero__content {
        position: relative;
        z-index: 3;
        text-align: center;
        padding: 0 var(--azophi-space-lg);
        max-width: 900px;
}

.azophi-hero__orbit {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 600px;
        height: 600px;
        transform: translate(-50%, -50%);
        z-index: -1;
        pointer-events: none;
}

.azophi-hero__orbit-ring {
        position: absolute;
        border: 1px solid var(--azophi-border-strong);
        border-radius: 50%;
        inset: 0;
        opacity: 0.3;
}

.azophi-hero__orbit-ring--1 {
        inset: 0;
        animation: azophi-orbit-spin 60s linear infinite;
        border-style: dashed;
}

.azophi-hero__orbit-ring--2 {
        inset: 80px;
        animation: azophi-orbit-spin 90s linear infinite reverse;
        border-color: var(--azophi-gold);
        border-style: dotted;
}

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

.azophi-hero__title {
        font-size: clamp(3rem, 8vw, 6rem);
        font-family: var(--azophi-font-heading);
        line-height: 1;
        margin: 0;
        color: var(--azophi-text-primary);
        text-shadow: 0 0 60px rgba(56, 189, 248, 0.4);
        animation: azophi-hero-title 1.2s ease-out 0.3s both;
}

.azophi-hero__subtitle {
        display: block;
        font-size: clamp(1rem, 2.5vw, 1.5rem);
        margin-top: var(--azophi-space-sm);
        color: var(--azophi-cyan);
        font-family: var(--azophi-font-body);
        font-weight: 500;
        letter-spacing: 1px;
}

.azophi-hero__tagline {
        font-size: clamp(1rem, 2vw, 1.25rem);
        color: var(--azophi-text-secondary);
        max-width: 600px;
        margin: var(--azophi-space-xl) auto 0;
        line-height: 1.7;
        animation: azophi-hero-fade 1s ease-out 0.8s both;
}

.azophi-hero__badges {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--azophi-space-md);
        margin-top: var(--azophi-space-xl);
        animation: azophi-hero-fade 1s ease-out 1.1s both;
}

.azophi-hero__badge {
        display: inline-flex;
        align-items: center;
        gap: var(--azophi-space-xs);
        padding: var(--azophi-space-sm) var(--azophi-space-md);
        background: var(--azophi-bg-card);
        border: 1px solid var(--azophi-border);
        border-radius: 999px;
        color: var(--azophi-text-secondary);
        font-size: 0.875rem;
        backdrop-filter: blur(10px);
        transition: all var(--azophi-t-base);
}

.azophi-hero__badge:hover {
        border-color: var(--azophi-cyan);
        color: var(--azophi-cyan);
        transform: translateY(-2px);
}

.azophi-hero__badge svg { color: var(--azophi-gold); }

.azophi-hero__scroll-hint {
        position: absolute;
        bottom: var(--azophi-space-xl);
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--azophi-space-xs);
        color: var(--azophi-text-secondary);
        font-size: 0.75rem;
        z-index: 3;
        animation: azophi-hero-fade 1s ease-out 1.5s both, azophi-bounce 2s ease-in-out infinite 2s;
}

.azophi-hero__scroll-hint svg {
        animation: azophi-scroll-arrow 2s ease-in-out infinite;
}

@keyframes azophi-scroll-arrow {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(6px); }
}

@keyframes azophi-bounce {
        0%, 100% { transform: translateX(-50%) translateY(0); }
        50% { transform: translateX(-50%) translateY(-4px); }
}

@keyframes azophi-hero-title {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
}

@keyframes azophi-hero-fade {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
}

/* ── Main ── */
.azophi-main {
        min-height: 50vh;
        padding-top: var(--azophi-space-xl);
        padding-bottom: var(--azophi-space-3xl);
        /* Sticky-footer: main grows to push footer down */
        flex: 1 0 auto;
}

/* Home page (front page) — hero only, no extra padding */
.azophi-main--home {
        min-height: auto;
        padding-top: 0;
        padding-bottom: 0;
}

.azophi-page-content {
        padding: var(--azophi-space-2xl) 0;
        line-height: 1.9;
}

/* ── Section ── */
.azophi-section {
        padding: var(--azophi-space-2xl) 0;
}

.azophi-section__inner {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 var(--azophi-space-lg);
}

.azophi-section__inner--narrow {
        max-width: 860px;
}

.azophi-section__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: var(--azophi-space-xl);
        gap: var(--azophi-space-md);
        flex-wrap: wrap;
}

.azophi-section__title {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        margin: 0;
        position: relative;
        padding-right: var(--azophi-space-md);
}

.azophi-section__title::before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, var(--azophi-cyan), var(--azophi-gold));
        border-radius: 4px;
}

.azophi-section__more {
        display: inline-flex;
        align-items: center;
        gap: var(--azophi-space-xs);
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--azophi-cyan);
        transition: gap var(--azophi-t-fast);
}

.azophi-section__more:hover { gap: var(--azophi-space-sm); }

/* ── Page Banner ── */
.azophi-page-banner {
        padding: var(--azophi-space-2xl) var(--azophi-space-lg);
        background:
                radial-gradient(ellipse at top, var(--azophi-cyan-glow), transparent 60%),
                var(--azophi-bg-secondary);
        border-bottom: 1px solid var(--azophi-border);
        text-align: center;
        position: relative;
        overflow: hidden;
}

.azophi-page-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
                radial-gradient(2px 2px at 20% 30%, var(--azophi-text-primary) 0%, transparent 50%),
                radial-gradient(1px 1px at 60% 70%, var(--azophi-text-primary) 0%, transparent 50%),
                radial-gradient(1px 1px at 80% 20%, var(--azophi-text-primary) 0%, transparent 50%),
                radial-gradient(1.5px 1.5px at 30% 80%, var(--azophi-text-primary) 0%, transparent 50%),
                radial-gradient(1px 1px at 90% 60%, var(--azophi-text-primary) 0%, transparent 50%);
        opacity: 0.3;
        pointer-events: none;
}

.azophi-page-banner__inner {
        position: relative;
        z-index: 1;
        max-width: 800px;
        margin: 0 auto;
}

.azophi-page-banner__title {
        font-size: clamp(2rem, 5vw, 3rem);
        margin: 0 0 var(--azophi-space-sm);
        color: var(--azophi-text-primary);
}

.azophi-page-banner__desc {
        color: var(--azophi-text-secondary);
        font-size: 1.05rem;
        line-height: 1.7;
        margin: 0;
}

/* ── Empty Message ── */
.azophi-empty-message {
        text-align: center;
        color: var(--azophi-text-secondary);
        padding: var(--azophi-space-2xl) var(--azophi-space-lg);
        background: var(--azophi-bg-card);
        border: 1px dashed var(--azophi-border-strong);
        border-radius: var(--azophi-radius-lg);
}

/* ── Buttons ── */
.azophi-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--azophi-space-xs);
        padding: var(--azophi-space-md) var(--azophi-space-xl);
        border-radius: var(--azophi-radius-md);
        font-size: 1rem;
        font-weight: 600;
        font-family: var(--azophi-font-body);
        border: 1px solid transparent;
        transition: all var(--azophi-t-base);
        text-decoration: none;
        cursor: pointer;
}

.azophi-btn--primary {
        background: linear-gradient(135deg, var(--azophi-cyan), var(--azophi-indigo));
        color: var(--azophi-text-primary);
        box-shadow: 0 4px 20px var(--azophi-cyan-glow);
}

.azophi-btn--primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px var(--azophi-cyan-glow);
        color: var(--azophi-text-primary);
}

.azophi-btn--ghost {
        background: transparent;
        border-color: var(--azophi-border-strong);
        color: var(--azophi-text-primary);
}

.azophi-btn--ghost:hover {
        border-color: var(--azophi-cyan);
        color: var(--azophi-cyan);
}

/* ── Pagination ── */
.azophi-pagination { margin-top: var(--azophi-space-2xl); }

.azophi-pagination .page-numbers {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--azophi-space-xs);
        list-style: none;
        padding: 0;
        margin: 0;
}

.azophi-pagination a,
.azophi-pagination span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        height: 42px;
        padding: 0 var(--azophi-space-sm);
        border-radius: var(--azophi-radius-sm);
        background: var(--azophi-bg-card);
        border: 1px solid var(--azophi-border);
        color: var(--azophi-text-secondary);
        font-weight: 500;
        transition: all var(--azophi-t-fast);
}

.azophi-pagination a:hover,
.azophi-pagination .current {
        background: var(--azophi-cyan-glow);
        border-color: var(--azophi-cyan);
        color: var(--azophi-cyan);
}

/* ── Footer ── */
.azophi-footer {
        background: var(--azophi-bg-secondary);
        border-top: 1px solid var(--azophi-border);
        padding: var(--azophi-space-lg) 0 var(--azophi-space-md);
        position: relative;
        overflow: hidden;
        /* Sticky-footer: don't shrink footer */
        flex-shrink: 0;
        margin-top: auto;
}

.azophi-footer::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--azophi-cyan), var(--azophi-gold), transparent);
        opacity: 0.5;
}

.azophi-footer__inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--azophi-space-lg);
}

.azophi-footer__top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--azophi-space-xl);
        flex-wrap: wrap;
        padding-bottom: var(--azophi-space-md);
}

.azophi-footer__brand {
        flex: 1;
        min-width: 280px;
        max-width: 480px;
}

.azophi-footer__brand-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
        color: var(--azophi-cyan);
}

.azophi-footer__logo {
        height: 40px;
        width: auto;
        transition: transform var(--azophi-t-base);
}

/* ── Two footer logo versions: toggle based on theme ── */
.azophi-footer__logo--light { display: none !important; }
.azophi-footer__logo--dark  { display: block !important; }

html[data-theme="light"] .azophi-footer__logo--light { display: block !important; }
html[data-theme="light"] .azophi-footer__logo--dark  { display: none !important; }

.azophi-footer__brand-head:hover .azophi-footer__logo {
        transform: scale(1.04);
}

.azophi-footer__brand-name {
        font-family: var(--azophi-font-heading);
        font-size: 1.35rem;
        margin: 0;
        color: var(--azophi-text-primary);
        line-height: 1;
}

.azophi-footer__about {
        color: var(--azophi-text-secondary);
        font-size: 0.82rem;
        line-height: 1.7;
        margin: 0 0 10px;
}

.azophi-footer__social {
        display: flex;
        gap: 6px;
}

.azophi-social-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--azophi-bg-card);
        border: 1px solid var(--azophi-border);
        color: var(--azophi-text-secondary);
        transition: all var(--azophi-t-base);
}

.azophi-social-icon:hover {
        color: var(--azophi-cyan);
        border-color: var(--azophi-cyan);
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 4px 16px var(--azophi-cyan-glow);
}

.azophi-social-icon--youtube:hover {
        color: #FF0000;
        border-color: #FF0000;
        box-shadow: 0 4px 16px rgba(255, 0, 0, 0.2);
}

.azophi-social-icon--aparat:hover {
        color: #ED145B;
        border-color: #ED145B;
        box-shadow: 0 4px 16px rgba(237, 20, 91, 0.2);
}

.azophi-social-icon--bale:hover {
        color: #00C853;
        border-color: #00C853;
        box-shadow: 0 4px 16px rgba(0, 200, 83, 0.2);
}

.azophi-footer__col {
        flex-shrink: 0;
}

.azophi-footer__title {
        font-size: 0.95rem;
        margin: 0 0 10px;
        color: var(--azophi-text-primary);
        font-family: var(--azophi-font-body);
        font-weight: 700;
}

.azophi-footer__links {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(2, auto);
        gap: 4px 18px;
}

.azophi-footer__links li { margin: 0; }

.azophi-footer__links a {
        color: var(--azophi-text-secondary);
        font-size: 0.82rem;
        transition: all var(--azophi-t-fast);
}

.azophi-footer__links a:hover {
        color: var(--azophi-cyan);
        padding-right: 4px;
}

.azophi-footer__bottom {
        border-top: 1px solid var(--azophi-border);
        padding-top: var(--azophi-space-sm);
        margin-top: var(--azophi-space-sm);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
}

.azophi-footer__copyright,
.azophi-footer__credit {
        font-size: 0.78rem;
        color: var(--azophi-text-muted);
        margin: 0;
}

.azophi-footer__credit span { color: var(--azophi-cyan); }

/* ── Scroll Top Button ── */
.azophi-scroll-top {
        position: fixed;
        bottom: var(--azophi-space-xl);
        left: var(--azophi-space-xl);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--azophi-bg-card);
        border: 1px solid var(--azophi-border-strong);
        color: var(--azophi-text-primary);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: all var(--azophi-t-base);
        backdrop-filter: blur(10px);
}

.azophi-scroll-top.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
}

.azophi-scroll-top:hover {
        background: var(--azophi-cyan);
        border-color: var(--azophi-cyan);
        color: var(--azophi-bg-primary);
        transform: translateY(-4px);
}

/* ── Progress Bar (Reading) ── */
.azophi-progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: transparent;
        z-index: var(--azophi-z-progress);
}

.azophi-progress-bar__fill {
        height: 100%;
        width: 0;
        background: linear-gradient(90deg, var(--azophi-cyan), var(--azophi-gold));
        transition: width 80ms linear;
        box-shadow: 0 0 10px var(--azophi-cyan-glow);
}

/* ── Reveal animations ── */
[data-reveal] {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-reveal].is-revealed {
        opacity: 1;
        transform: translateY(0);
}

[data-reveal-stagger] > * {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal-stagger].is-revealed > * {
        opacity: 1;
        transform: translateY(0);
}

[data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 0.15s; }
[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 0.25s; }
[data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 0.35s; }
[data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 0.45s; }
[data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 0.55s; }
[data-reveal-stagger].is-revealed > *:nth-child(7) { transition-delay: 0.65s; }
[data-reveal-stagger].is-revealed > *:nth-child(8) { transition-delay: 0.75s; }
[data-reveal-stagger].is-revealed > *:nth-child(9) { transition-delay: 0.85s; }

/* ── Focus Visible ── */
*:focus-visible {
        outline: 2px solid var(--azophi-cyan);
        outline-offset: 2px;
        border-radius: var(--azophi-radius-sm);
}

/* ── Screen Reader Text ── */
.screen-reader-text,
.azophi-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;
}

/* ── Selection ── */
::selection {
        background: var(--azophi-cyan);
        color: var(--azophi-bg-primary);
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
        width: 12px;
        height: 12px;
}

::-webkit-scrollbar-track {
        background: var(--azophi-bg-secondary);
}

::-webkit-scrollbar-thumb {
        background: var(--azophi-indigo);
        border-radius: 6px;
        border: 2px solid var(--azophi-bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
        background: var(--azophi-cyan);
}

/* ── 404 ── */
.azophi-404 {
        min-height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--azophi-space-2xl) var(--azophi-space-lg);
        text-align: center;
}

.azophi-404__inner {
        max-width: 600px;
}

.azophi-404__icon {
        color: var(--azophi-cyan);
        margin-bottom: var(--azophi-space-lg);
        animation: azophi-orbit-spin 30s linear infinite;
        display: inline-block;
}

.azophi-404__title {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        margin: 0 0 var(--azophi-space-md);
}

.azophi-404__text {
        color: var(--azophi-text-secondary);
        margin-bottom: var(--azophi-space-xl);
}

.azophi-404__actions {
        display: flex;
        justify-content: center;
        gap: var(--azophi-space-md);
        flex-wrap: wrap;
        margin-bottom: var(--azophi-space-xl);
}

.azophi-404__search { max-width: 400px; margin: 0 auto; }