:root {
    --bg: #03070e;
    --bg-soft: #060b15;
    --text: #ffffff;
    --muted: #c9d3de;
    --cyan: #27e7ff;
    --cyan-soft: rgba(39, 231, 255, 0.65);
    --pink: #ff55f8;
    --pink-soft: rgba(255, 85, 248, 0.65);
    --blue: #4d7cff;
    --green: #17d96f;
    --orange: #ff9d25;
    --purple: #b250ff;
    --milk: #f4ead8;
    --blue-soft: #6f9fe8;
    --green-soft: #55c98a;
    --orange-soft: #e9a05a;
    --gold: #e7bd62;
    --surface: rgba(4, 8, 18, 0.82);
    --surface-raised: rgba(5, 12, 24, 0.76);
    --surface-input: rgba(5, 11, 24, 0.8);
    --radius-2xl: 12px;
    --radius-xl: 10px;
    --radius-lg: 10px;
    --radius-md: 8px;
    --container: 1200px;
    --header-bg: linear-gradient(180deg, rgba(3, 7, 14, 0.68), rgba(8, 18, 34, 0.42) 58%, rgba(16, 32, 52, 0.22));
}

    :root.light-theme {
        --bg: #eaf5ff;
        --bg-soft: #d9ebfa;
        --text: #102033;
        --muted: #40566d;
        --surface: rgba(255, 255, 255, 0.78);
        --surface-raised: rgba(255, 255, 255, 0.88);
        --surface-input: rgba(255, 255, 255, 0.9);
        --header-bg: linear-gradient(180deg, rgba(240, 249, 255, 0.72), rgba(220, 239, 251, 0.5) 58%, rgba(205, 229, 246, 0.28));
    }

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Vazirmatn", system-ui, sans-serif;
    color: var(--text);
    background: radial-gradient(circle at 20% 0%, rgba(39, 231, 255, 0.12), transparent 30%), radial-gradient(circle at 80% 10%, rgba(255, 85, 248, 0.12), transparent 34%), radial-gradient(circle at 50% 70%, rgba(77, 124, 255, 0.08), transparent 40%), var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
}

/* Compact advertising plan cards on small screens. */
.ads-plan-buy span {
    display: none;
}

@media (max-width: 768px) {
    .ads-plan-option {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 10px;
        padding: 14px 12px;
    }

    .ads-plan-option-icon {
        display: none;
    }

    .ads-plan-description {
        min-width: 0 !important;
    }

        .ads-plan-description h2,
        .ads-plan-description p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ads-plan-description h2 {
            margin: 0 !important;
            font-size: 13px !important;
        }

        .ads-plan-description p {
            display: none;
        }

    .ads-plan-price {
        margin-inline-start: 0 !important;
        font-size: 15px !important;
    }

    .ads-plan-buy {
        padding: 9px 13px !important;
        font-size: 14px !important;
    }
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 4px;
}

/* =========================
   Main Shell
========================= */

.page-shell {
    width: min(var(--container), calc(100% - 56px));
    margin: 0 auto;
    padding: 138px 0 132px;
}

/* =========================
   Header
========================= */

.site-header {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 20;
    width: min(var(--container), calc(100% - 32px));
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 260px 1fr 170px;
    grid-template-areas: "actions nav brand";
    align-items: center;
    gap: 24px;
    min-height: 78px;
    padding: 12px 20px;
    margin: 0;
    border: 1px solid rgba(170, 231, 255, 0.26);
    border-radius: 10px;
    background: var(--header-bg);
    backdrop-filter: blur(2px) saturate(145%);
    -webkit-backdrop-filter: blur(2px) saturate(145%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: box-shadow 0.25s ease, top 0.25s ease;
    direction: ltr;
}

    .site-header::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 3px;
        border-radius: 0 0 10px 10px;
        background: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan));
        pointer-events: none;
        z-index: 1;
        display: none;
    }

    .site-header::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%, rgba(87, 212, 255, .035));
    }

.header-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 14px;
    justify-self: start;
    direction: ltr;
}

.profile-btn {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 85, 248, 0.62);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(28, 22, 48, 0.92), rgba(7, 14, 27, 0.9));
    color: var(--cyan);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24), 0 0 12px rgba(255, 85, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: 0.25s ease;
}

    .profile-btn svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        filter: drop-shadow(0 0 4px var(--cyan));
    }

    .profile-btn:hover {
        border-color: var(--pink);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 0 16px rgba(255, 85, 248, 0.5), inset 0 0 18px rgba(255, 85, 248, 0.18);
    }

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border: 1px solid rgba(169, 225, 255, 0.16);
    border-radius: 8px;
    background: rgba(8, 16, 31, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.theme-symbol {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    transition: color 0.3s ease, background 0.3s ease, opacity 0.3s ease;
}

    .theme-symbol svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .theme-symbol.sun {
        color: rgba(255, 220, 118, 0.48);
    }

    .theme-symbol.moon {
        color: #cfe2ff;
        background: rgba(106, 142, 255, 0.12);
        filter: drop-shadow(0 0 6px rgba(152, 181, 255, 0.55));
    }

.switch {
    width: 56px;
    height: 48px;
    display: grid;
    place-items: center;
    border: none;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.theme-switch-track {
    position: relative;
    display: block;
    width: 100%;
    height: 38px;
    overflow: hidden;
    border: 1px solid rgba(140, 180, 255, 0.42);
    border-radius: inherit;
    background: linear-gradient(135deg, #101a3a, #334a77);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.34), 0 0 12px rgba(83, 137, 255, 0.26);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.theme-switch-stars {
    position: absolute;
    top: 7px;
    left: 9px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 10px;
    line-height: 1;
    transition: opacity 0.25s ease;
}

.theme-switch-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #ffffff 0 18%, transparent 20%), linear-gradient(145deg, #e8f2ff, #92b7ff);
    box-shadow: 0 0 10px rgba(184, 211, 255, 0.9);
    transform: translateX(20px);
    transition: transform 0.32s cubic-bezier(.2, .8, .2, 1), background 0.3s ease, box-shadow 0.3s ease;
}

.switch.is-light {
    background: transparent;
    box-shadow: none;
}

    .switch.is-light .theme-switch-track {
        border-color: rgba(255, 191, 82, 0.58);
        background: linear-gradient(135deg, #ff9c5b, #ffd469);
        box-shadow: inset 0 0 10px rgba(255, 116, 57, 0.2), 0 0 12px rgba(255, 179, 80, 0.34);
    }

    .switch.is-light .theme-switch-thumb {
        transform: translateX(0);
        background: radial-gradient(circle at 36% 34%, #ffffff 0 18%, #fff7c9 20%, #ffcf55 68%);
        box-shadow: 0 0 12px rgba(255, 222, 105, 0.95);
    }

    .switch.is-light .theme-switch-stars {
        opacity: 0;
    }

:root.light-theme .theme-symbol.sun {
    color: #ffb52e;
    background: rgba(255, 190, 70, 0.13);
    filter: drop-shadow(0 0 6px rgba(255, 181, 46, 0.5));
}

:root.light-theme .theme-symbol.moon {
    color: rgba(69, 90, 145, 0.42);
    background: transparent;
    filter: none;
}

.main-nav {
    grid-area: nav;
    justify-self: center;
    direction: rtl;
    display: flex;
    align-items: center;
    gap: 66px;
    color: #f8fbff;
    font-size: 18px;
    font-weight: 500;
}

    .main-nav a {
        position: relative;
        padding: 8px 0;
        transition: color 0.25s ease;
    }

        .main-nav a::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--pink), var(--cyan));
            box-shadow: 0 0 10px var(--cyan);
            transition: width 0.25s ease;
        }

        .main-nav a:hover {
            color: var(--cyan);
        }

            .main-nav a:hover::after {
                width: 100%;
            }

.brand,
.footer-logo {
    display: block;
    justify-self: end;
    width: 128px;
    height: 54px;
}

    .brand img,
    .footer-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: transparent;
    }

.brand {
    grid-area: brand;
    direction: ltr;
}

.header-document-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #f8fdff;
    border: 1px solid rgba(180, 235, 255, 0.38);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(30, 54, 80, 0.9), rgba(6, 15, 29, 0.94));
    box-shadow: 0 0 13px rgba(118, 216, 255, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

    .header-document-icon svg {
        width: 29px;
        height: 29px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.65;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 0 5px rgba(220, 248, 255, 0.9));
    }

    .header-document-icon:hover {
        color: #fff;
        border-color: rgba(208, 245, 255, 0.8);
        box-shadow: 0 0 18px rgba(118, 216, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.26);
    }

@media (max-width: 1024px) {
    .header-document-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

        .header-document-icon svg {
            width: 25px;
            height: 25px;
        }
}

@media (max-width: 768px) {
    .header-document-icon {
        width: 42px;
        height: 42px;
        border-radius: 8px;
    }
}

/* Keep the document icon aligned with the existing header controls. */
.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* =========================
   Neon Utilities
========================= */

.neon-frame {
    position: relative;
    border-radius: var(--radius-2xl);
    background: var(--surface);
    overflow: hidden;
}

    .neon-frame::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 4px;
        pointer-events: none;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .neon-frame::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0.55;
        box-shadow: inset 0 0 18px rgba(39, 231, 255, 0.08), inset 0 0 12px rgba(255, 85, 248, 0.05);
    }

.neon-mix::before {
    background: linear-gradient(90deg, var(--cyan), var(--pink));
    box-shadow: 0 0 24px var(--cyan), 0 0 24px var(--pink);
}

/* Rotating neon border: the frame's gradient spins around the box forever. */
@keyframes neon-border-rotate {
    to {
        --neon-spin-angle: 360deg;
    }
}

.neon-rotate-border::before {
    background: conic-gradient(from var(--neon-spin-angle, 0deg), var(--neon-rotate-from), var(--neon-rotate-to), var(--neon-rotate-from));
    box-shadow: 0 0 24px color-mix(in srgb, var(--neon-rotate-to) 65%, transparent), 0 0 24px color-mix(in srgb, var(--neon-rotate-from) 65%, transparent);
    animation: neon-border-rotate var(--neon-rotate-duration, 6s) linear infinite;
}

/* Rotating neon border utility: kept for future use; currently unused in markup. */
@property --neon-spin-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}


@media (prefers-reduced-motion: reduce) {
    .neon-rotate-border::before {
        animation: none;
    }
}

.neon-mix {
    box-shadow: 0 0 16px rgba(39, 231, 255, 0.5), 0 0 22px rgba(255, 85, 248, 0.45);
}

/* Permanent lift effect: a soft drop shadow plus a slightly brighter surface
   make the box float above the page, like a raised card. Neon frame and glow
   stay untouched. */
.elevated {
    box-shadow: 0 18px 42px rgba(2, 8, 28, 0.55), 0 8px 18px rgba(2, 8, 28, 0.4), var(--glow-shadow, 0 0 16px rgba(39, 231, 255, 0.5));
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 55%);
}

    /* Keep the exact neon-mix glow while lifting the box. */
    .elevated.neon-mix {
        box-shadow: 0 18px 42px rgba(2, 8, 28, 0.55), 0 8px 18px rgba(2, 8, 28, 0.4), 0 0 16px rgba(39, 231, 255, 0.5), 0 0 22px rgba(255, 85, 248, 0.45);
    }

:root.light-theme .elevated {
    box-shadow: 0 18px 42px rgba(15, 34, 82, 0.16), 0 8px 18px rgba(15, 34, 82, 0.1), var(--glow-shadow, 0 0 16px rgba(39, 231, 255, 0.3));
}

    :root.light-theme .elevated.neon-mix {
        box-shadow: 0 18px 42px rgba(15, 34, 82, 0.16), 0 8px 18px rgba(15, 34, 82, 0.1), 0 0 16px rgba(39, 231, 255, 0.5), 0 0 22px rgba(255, 85, 248, 0.45);
    }

@media (max-width: 768px) {
    .elevated {
        box-shadow: 0 12px 28px rgba(2, 8, 28, 0.5), 0 6px 14px rgba(2, 8, 28, 0.36), var(--glow-shadow, 0 0 16px rgba(39, 231, 255, 0.5));
    }

        .elevated.neon-mix {
            box-shadow: 0 12px 28px rgba(2, 8, 28, 0.5), 0 6px 14px rgba(2, 8, 28, 0.36), 0 0 16px rgba(39, 231, 255, 0.5), 0 0 22px rgba(255, 85, 248, 0.45);
        }

    :root.light-theme .elevated {
        box-shadow: 0 12px 28px rgba(15, 34, 82, 0.14), 0 6px 14px rgba(15, 34, 82, 0.08), var(--glow-shadow, 0 0 16px rgba(39, 231, 255, 0.3));
    }

        :root.light-theme .elevated.neon-mix {
            box-shadow: 0 12px 28px rgba(15, 34, 82, 0.14), 0 6px 14px rgba(15, 34, 82, 0.08), 0 0 16px rgba(39, 231, 255, 0.5), 0 0 22px rgba(255, 85, 248, 0.45);
        }
}

.neon-cyan::before {
    background: linear-gradient(90deg, var(--cyan), #42b7ff);
}

.neon-cyan {
    box-shadow: 0 0 16px rgba(39, 231, 255, 0.6), inset 0 0 22px rgba(39, 231, 255, 0.08);
}

.neon-pink::before {
    background: linear-gradient(90deg, var(--pink), #b459ff);
}

.neon-pink {
    box-shadow: 0 0 16px rgba(255, 85, 248, 0.58), inset 0 0 22px rgba(255, 85, 248, 0.58);
}

.neon-red::before {
    background: linear-gradient(90deg, #ff4757, #ff6b81);
    box-shadow: 0 0 24px rgba(255, 71, 87, 0.6);
}

.neon-red {
    box-shadow: 0 0 16px rgba(255, 71, 87, 0.55), inset 0 0 22px rgba(255, 71, 87, 0.08);
}

/* Section-specific color themes */
.neon-milk::before {
    background: linear-gradient(90deg, #fffaf0, var(--milk), #d8c8ad);
    box-shadow: 0 0 22px rgba(244, 234, 216, 0.58);
}

.neon-milk {
    box-shadow: 0 0 16px rgba(244, 234, 216, 0.46), inset 0 0 22px rgba(244, 234, 216, 0.08);
}

.neon-blue::before {
    background: linear-gradient(90deg, #7da9e8, var(--blue-soft), #4f79bd);
    box-shadow: 0 0 20px rgba(111, 159, 232, 0.42);
}

.neon-blue,
.course-card.neon-blue {
    box-shadow: 0 0 14px rgba(111, 159, 232, 0.42), inset 0 0 22px rgba(111, 159, 232, 0.07);
}

    .neon-blue::after {
        border-color: rgba(159, 194, 245, 0.88);
        box-shadow: 0 0 8px rgba(111, 159, 232, 0.58), 0 0 18px rgba(111, 159, 232, 0.2), inset 0 0 8px rgba(111, 159, 232, 0.3);
    }

.neon-green::before {
    background: linear-gradient(90deg, #7ce0a9, var(--green-soft), #339b67);
    box-shadow: 0 0 20px rgba(85, 201, 138, 0.46);
}

.neon-green {
    box-shadow: 0 0 16px rgba(85, 201, 138, 0.44), inset 0 0 22px rgba(85, 201, 138, 0.08);
}

    .neon-green::after {
        border-color: rgba(139, 235, 180, 0.9);
        box-shadow: 0 0 8px rgba(85, 201, 138, 0.6), 0 0 18px rgba(85, 201, 138, 0.2), inset 0 0 8px rgba(85, 201, 138, 0.32);
    }

.neon-orange::before {
    background: linear-gradient(90deg, #ffd09b, var(--orange-soft), #cb7230);
    box-shadow: 0 0 20px rgba(233, 160, 90, 0.46);
}

.neon-orange {
    box-shadow: 0 0 16px rgba(233, 160, 90, 0.44), inset 0 0 22px rgba(233, 160, 90, 0.08);
}

    .neon-orange::after {
        border-color: rgba(255, 205, 150, 0.9);
        box-shadow: 0 0 8px rgba(233, 160, 90, 0.6), 0 0 18px rgba(233, 160, 90, 0.2), inset 0 0 8px rgba(233, 160, 90, 0.3);
    }

.neon-purple::before {
    background: linear-gradient(90deg, #d29aff, var(--purple), #7230b8);
    box-shadow: 0 0 20px rgba(178, 80, 255, 0.5);
}

.neon-purple {
    box-shadow: 0 0 16px rgba(178, 80, 255, 0.52), inset 0 0 22px rgba(178, 80, 255, 0.08);
}

    .neon-purple::after {
        border-color: rgba(216, 166, 255, 0.92);
        box-shadow: 0 0 8px rgba(178, 80, 255, 0.65), 0 0 18px rgba(178, 80, 255, 0.24), inset 0 0 8px rgba(178, 80, 255, 0.34);
    }

/* =========================
   Hero
========================= */

.hero {
    height: 460px;
    min-height: 460px;
    display: block;
    margin-bottom: 46px;
}

.hero-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 460px;
    padding: 0;
    border-radius: calc(var(--radius-xl) - 2px);
    overflow: hidden;
}

    .hero-image::after {
        display: none;
    }

    .hero-image img {
        position: absolute;
        inset: 4px;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        object-fit: none;
        border-radius: inherit;
        opacity: 0;
        transform: none;
        transition: opacity 1s ease-in-out;
        pointer-events: none;
    }

        .hero-image img.is-active {
            opacity: 1;
        }

/* Full-bleed slides stay beneath the decorative hero frame. */
.hero.neon-frame::before {
    z-index: 4;
}

.hero .hero-dots {
    z-index: 5;
}

.hero-content {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(52%, 560px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 44px 36px 44px 52px;
    box-sizing: border-box;
    direction: rtl;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.45s ease-in-out, transform 0.45s ease-in-out;
}

    .hero-content.is-fading {
        opacity: 0;
        transform: translateY(8px);
    }

.hero-brand {
    text-align: right;
    margin-bottom: 22px;
    font-size: 20px;
}

    .hero-brand strong {
        display: block;
        font-weight: 500;
        color: #fff;
    }

    .hero-brand span {
        font-size: 16px;
        color: #fff;
    }

.hero h1 {
    margin: 0;
    max-width: 410px;
    font-size: clamp(36px, 5vw, 54px);
    line-height: 1.45;
    font-weight: 900;
    text-align: right;
    color: #dffcff;
    text-shadow: 0 0 8px rgba(39, 231, 255, 0.35), 0 0 15px rgba(255, 255, 255, 0.22);
}

    .hero h1 span {
        color: var(--pink);
        text-shadow: 0 0 10px var(--pink), 0 0 18px rgba(255, 85, 248, 0.7);
    }

    .hero h1 .hero-title-line {
        color: inherit;
        text-shadow: inherit;
    }

.btn-neon,
.small-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 700;
    background: rgba(11, 13, 29, 0.8);
    border: 3px solid var(--pink);
    box-shadow: 0 0 12px rgba(255, 85, 248, 0.72), inset 0 0 16px rgba(77, 124, 255, 0.25);
    transition: 0.25s ease;
}

.btn-neon {
    min-width: 300px;
    height: 58px;
    margin-top: 26px;
    font-size: 20px;
}

    .btn-neon b,
    .small-btn b {
        font-size: 30px;
        line-height: 1;
        color: #affcff;
        font-weight: 400;
    }

    .btn-neon:hover,
    .small-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 18px rgba(255, 85, 248, 0.95), 0 0 22px rgba(39, 231, 255, 0.3), inset 0 0 20px rgba(77, 124, 255, 0.35);
    }

.hero-dots {
    position: absolute;
    z-index: 3;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
}

    .hero-dots button {
        position: relative;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        cursor: pointer;
    }

        .hero-dots button::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 11px;
            height: 11px;
            border: 1px solid rgba(158, 248, 255, 0.72);
            border-radius: 50%;
            background: rgba(158, 248, 255, 0.32);
            box-shadow: 0 0 7px rgba(39, 231, 255, 0.56);
            transform: translate(-50%, -50%);
            transition: width 0.3s ease, border-radius 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
        }

        .hero-dots button.is-active {
            width: 44px;
        }

            .hero-dots button.is-active::before {
                width: 28px;
                border-radius: 999px;
                background: #9ef8ff;
                box-shadow: 0 0 12px var(--cyan), 0 0 18px rgba(255, 85, 248, 0.45);
            }

/* =========================
   Sections
========================= */

.section-block {
    margin: 0 0 110px;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-bottom: 24px;
}

    .section-title h2 {
        margin: 0;
        position: relative;
        font-size: 30px;
        font-weight: 900;
        color: #ffffff;
        /*   text-shadow:
    0 0 7px rgba(255, 255, 255, 0.6),
    0 0 14px var(--cyan); */
    }

    /* .section-title h2::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: -12px;
  transform: translateX(50%);
  width: 92px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  box-shadow:
    0 0 8px var(--cyan),
    0 0 10px var(--pink);
} */

    .section-title span {
        width: 140px;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), transparent);
        /*  box-shadow: 0 0 8px var(--cyan); */
    }

.grid {
    display: grid;
    gap: 30px;
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-1 {
    grid-template-columns: minmax(0, 1fr);
}

/* =========================
   Active Cards
========================= */

.active-card {
    position: relative;
    min-height: 265px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    direction: rtl;
    text-align: center;
    overflow: hidden;
    background: url('/assets/classes/class-banner.webp') center / cover no-repeat;
    background-color: #dce5ef;
    padding: 6px;
}

/* Payment card refinements. */
.ads-plan-hero > div {
    position: relative;
    z-index: 1;
}

.ads-payment-info {
    padding: 28px;
}

.ads-payment-slip {
    position: relative;
    z-index: 1;
    padding: 6px;
    border: 1px solid rgba(39, 231, 255, .22);
    border-radius: 16px;
}

.ads-payment-details {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid rgba(39, 231, 255, .28);
    border-radius: 14px;
    overflow: hidden;
}

    .ads-payment-details::after {
        content: "";
        position: absolute;
        top: 18%;
        bottom: 18%;
        left: 50%;
        width: 1px;
        border-radius: 999px;
        background: #fff;
        pointer-events: none;
    }

.ads-payment-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px;
    color: var(--text);
    text-align: center;
}

    .ads-payment-detail + .ads-payment-detail {
        border-inline-start: 1px solid rgba(39, 231, 255, .16);
    }

    .ads-payment-detail strong {
        color: var(--text);
        font-size: clamp(16px, 2.2vw, 24px);
        font-weight: 800;
        letter-spacing: .04em;
    }

    .ads-payment-detail span, .ads-payment-note, .ads-payment-receipt {
        color: var(--muted);
        font-weight: 600;
    }

.ads-payment-note {
    margin: 18px 0 0;
}

.ads-payment-receipt {
    margin: 10px 0 0;
}

:root.light-theme .ads-payment-info,
:root.light-theme .ads-plan-options {
    background: linear-gradient(145deg, #f7fcff, #eaf6fb);
    color: #193248;
    box-shadow: 0 10px 28px rgba(54, 106, 145, .16), 0 0 18px rgba(39, 172, 255, .18);
}

:root.light-theme .ads-payment-details {
    border-color: rgba(8, 125, 158, .35);
    background: rgba(255, 255, 255, .58);
}

:root.light-theme .ads-payment-slip {
    border-color: rgba(8, 125, 158, .3);
    background: rgba(255, 255, 255, .38);
}

:root.light-theme .ads-payment-details::after {
    background: #182b3b;
}

:root.light-theme .ads-payment-detail + .ads-payment-detail {
    border-inline-start-color: rgba(8, 125, 158, .12);
}

:root.light-theme .ads-payment-detail strong {
    color: #17364c;
}

:root.light-theme .ads-payment-detail span,
:root.light-theme .ads-payment-note,
:root.light-theme .ads-payment-receipt {
    color: #31566d;
}

:root.light-theme .ads-plan-hero {
    box-shadow: 0 10px 28px rgba(54, 106, 145, .16), 0 0 22px rgba(39, 172, 255, .2);
}

@media(max-width:768px) {
    .ads-payment-info {
        padding: 18px 14px;
    }

    .ads-payment-detail {
        padding: 16px 10px;
    }

        .ads-payment-detail strong {
            font-size: 14px;
            word-break: break-word;
        }

        .ads-payment-detail span {
            font-size: 12px;
        }

    .ads-payment-note, .ads-payment-receipt {
        font-size: 12px;
        line-height: 1.9;
    }

    .ads-payment-details::after {
        top: 16%;
        bottom: 16%;
        width: 1px;
    }
}

@media (max-width: 460px) {
    .header-actions {
        gap: 12px;
    }
}

/* Light theme: make the user-panel icon clearly green. */
:root.light-theme .profile-btn {
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.48);
    box-shadow: 0 0 14px rgba(22, 163, 74, 0.24), inset 0 0 12px rgba(22, 163, 74, 0.08);
}

    :root.light-theme .profile-btn svg {
        filter: drop-shadow(0 0 5px rgba(22, 163, 74, 0.72));
    }

/* Footer order: software/monitor left, home/book center, ads/image right. */
.fixed-footer .mobile-footer-nav a:nth-child(1) img {
    filter: grayscale(0) drop-shadow(0 0 7px rgba(20, 165, 238, 0.9)) drop-shadow(0 0 15px rgba(20, 165, 238, 0.55)) !important;
}

.fixed-footer .mobile-footer-nav a:nth-child(2) img {
    filter: grayscale(0) drop-shadow(0 0 7px rgba(52, 211, 153, 0.9)) drop-shadow(0 0 15px rgba(52, 211, 153, 0.55)) !important;
}

.fixed-footer .mobile-footer-nav a:nth-child(3) img {
    filter: grayscale(0) drop-shadow(0 0 7px rgba(245, 158, 11, 0.9)) drop-shadow(0 0 15px rgba(245, 158, 11, 0.55)) !important;
}

.class-banner-content {
    position: relative;
    z-index: 5;
    width: min(92%, 440px);
    margin: 0 auto 22px;
    padding: 7px;
    border-radius: 12px;
    color: #fff;
    text-align: center;
    background: rgba(7, 21, 42, 0.22);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

    .class-banner-content h2 {
        margin: 0;
        color: #fff;
        font-size: clamp(24px, 3vw, 34px);
        font-weight: 600;
        line-height: 1.35;
    }

.class-banner-divider {
    width: 112px;
    height: 2px;
    margin: 9px auto 11px;
    background: #fff;
    border-radius: 999px;
}

.class-banner-content p {
    margin: 0 auto 15px;
    color: #fff;
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: 400;
    line-height: 1.8;
}

.active-card-message {
    margin: 0;
    color: #f2f6fb;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.8;
}

.active-card .class-details {
    position: relative;
    z-index: 5;
    width: min(100%, 130px);
    height: 40px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 2px solid rgba(148, 247, 255, 0.85);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(39, 231, 255, 0.6), inset 0 0 12px rgba(39, 231, 255, 0.08);
}

/* Active-class cards: a single-color neon tube inside a softly glowing frame */
.active-card.neon-frame {
    --class-neon: var(--cyan);
    box-shadow: 0 0 14px rgba(39, 231, 255, 0.42), 0 0 32px rgba(39, 231, 255, 0.13), inset 0 0 18px rgba(39, 231, 255, 0.16);
}

    .active-card.neon-frame::before {
        padding: 12px;
        border-radius: 10px;
        background: rgba(39, 231, 255, 0.28);
        box-shadow: 0 0 4px rgba(39, 231, 255, 0.2);
    }

    .active-card.neon-frame::after {
        inset: 3px;
        border: 4px solid rgba(148, 247, 255, 0.95);
        background: transparent;
        opacity: 1;
        box-shadow: 0 0 8px rgba(39, 231, 255, 0.62), 0 0 18px rgba(39, 231, 255, 0.22), inset 0 0 8px rgba(39, 231, 255, 0.38);
    }

.course-card.neon-frame {
    box-shadow: 0 0 14px rgba(39, 231, 255, 0.42), 0 0 32px rgba(39, 231, 255, 0.13);
}

    .course-card.neon-frame::before {
        padding: 10px;
        background: rgba(39, 231, 255, 0.28);
        box-shadow: 0 0 4px rgba(39, 231, 255, 0.2);
    }

    .course-card.neon-frame::after {
        inset: 3px;
        border: 4px solid rgba(148, 247, 255, 0.95);
        background: transparent;
        opacity: 1;
        box-shadow: 0 0 8px rgba(39, 231, 255, 0.62), 0 0 18px rgba(39, 231, 255, 0.22), inset 0 0 8px rgba(39, 231, 255, 0.38);
    }

.active-icon {
    flex: 0 1 42%;
    width: 42%;
    min-width: 0;
    margin-top: 48px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

    .active-icon img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: initial;
        border-radius: 0;
    }

    .active-icon.english-photo {
        flex-basis: 48%;
        width: 48%;
        margin-top: 20px;
        aspect-ratio: 3 / 1;
        border-radius: 16px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34), inset 0 0 14px rgba(255, 156, 255, 0.12);
    }

        .active-icon.english-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            border-radius: inherit;
        }

    .active-icon svg {
        width: 120px;
        height: 120px;
        fill: none;
        stroke-width: 2.2;
    }

    .active-icon.pink svg {
        stroke: #ff9cff;
        filter: drop-shadow(0 0 8px var(--pink));
    }

    .active-icon.cyan svg {
        stroke: var(--cyan);
        filter: drop-shadow(0 0 8px var(--cyan));
    }

    .active-icon text {
        fill: currentColor;
        stroke: none;
        font-family: Arial, sans-serif;
    }

.active-info {
    flex: 1 1 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
}

    .active-info h3 {
        margin: 0 0 10px;
        font-size: 24px;
        font-weight: 800;
    }

    .active-info p {
        margin: 0;
        color: var(--muted);
        font-size: 16px;
        font-weight: 500;
    }

    .active-info .teacher {
        color: #e5edf8;
        margin-bottom: 16px;
    }

        .active-info .teacher strong {
            color: var(--cyan);
            font-weight: 800;
        }

.class-meta {
    display: grid;
    gap: 9px;
    color: #f2f6fb;
}

    .class-meta p {
        display: flex;
        align-items: center;
        gap: 0;
        color: #f2f6fb;
    }

    .class-meta span {
        width: 24px;
        color: #ffffff;
        font-size: 21px;
        line-height: 1;
        text-align: center;
    }

.capacity-bar {
    width: 100%;
    height: 13px;
    margin-top: 18px;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(187, 205, 221, 0.3);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.42);
}

    .capacity-bar span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #27e7ff, #4bd6e8);
        box-shadow: 0 0 10px rgba(39, 231, 255, 0.8);
    }

.class-details {
    width: min(100%, 205px);
    height: 46px;
    margin-top: 0;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    direction: ltr;
    border: 2px solid #8fefff;
    border-radius: 8px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 0 13px rgba(39, 231, 255, 0.62), inset 0 0 14px rgba(39, 231, 255, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .class-details b {
        font-size: 25px;
        line-height: 1;
        font-weight: 400;
    }

    .class-details span {
        direction: rtl;
    }

    .class-details:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 20px rgba(39, 231, 255, 0.85), inset 0 0 18px rgba(39, 231, 255, 0.15);
    }

.status-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #071b12;
    border: 3px solid var(--green);
    box-shadow: 0 0 10px var(--green), inset 0 0 7px rgba(23, 217, 111, 0.4);
}

.status-badge {
    position: absolute;
    z-index: 2;
    top: 26px;
    left: 28px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: 0;
    padding: 9px 14px;
    border: 2px solid var(--green);
    border-radius: 11px;
    color: #82ec9a;
    background: rgba(5, 29, 19, 0.68);
    box-shadow: 0 0 10px rgba(23, 217, 111, 0.35), inset 0 0 10px rgba(23, 217, 111, 0.1);
    font-size: 16px;
    font-weight: 700;
}

    .status-badge::first-letter {
        color: var(--green);
    }

/* =========================
   Courses / Ads
========================= */

.course-card,
.ad-card {
    border-radius: var(--radius-lg);
    min-height: 260px;
    padding: 38px 30px 30px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 28px;
}

.course-card {
    position: relative;
}

.ad-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.ad-card {
    border-radius: var(--radius-lg);
    min-height: 0;
    padding: 0;
    display: block;
    overflow: hidden;
}

.tag {
    position: absolute;
    top: 55px;
    right: 36px;
    z-index: 3;
    min-width: 82px;
    height: 38px;
    padding: 0 16px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 12, 25, 0.92);
    font-size: 16px;
    font-weight: 600;
}

.tag-pink {
    border: 3px solid var(--pink);
    box-shadow: 0 0 12px rgba(255, 85, 248, 0.75);
}

.tag-cyan {
    border: 3px solid var(--cyan);
    box-shadow: 0 0 12px rgba(39, 231, 255, 0.75);
}

.tag-orange {
    border: 3px solid var(--orange-soft);
    box-shadow: 0 0 12px rgba(233, 160, 90, 0.7);
}

.tag-green {
    border: 3px solid var(--green-soft);
    box-shadow: 0 0 12px rgba(85, 201, 138, 0.7);
}

.tag-red {
    border: 3px solid #ff5b67;
    box-shadow: 0 0 12px rgba(255, 71, 87, 0.78);
}

.resource-tag {
    min-width: 0;
    padding-inline: 12px;
    font-size: 13px;
    white-space: nowrap;
}

.course-img,
.ad-img {
    height: 170px;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
}

    .course-img img,
    .ad-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.course-content,
.ad-content {
    text-align: right;
}

    .course-content h3,
    .ad-content h3 {
        margin: 0 0 18px;
        font-size: 27px;
        font-weight: 900;
    }

    .course-content p,
    .ad-content p {
        margin: 0 0 26px;
        color: #ffffff;
        font-size: 20px;
        font-weight: 500;
    }

.small-btn {
    min-width: 170px;
    height: 42px;
    padding: 0 15px;
    font-size: 15px;
    direction: ltr;
}

    .small-btn span {
        direction: rtl;
    }

.cyan-btn {
    border-color: var(--cyan);
    box-shadow: 0 0 12px rgba(39, 231, 255, 0.72), inset 0 0 16px rgba(77, 124, 255, 0.25);
}

.orange-btn {
    border-color: var(--orange-soft);
    box-shadow: 0 0 12px rgba(233, 160, 90, 0.7), inset 0 0 16px rgba(233, 160, 90, 0.18);
}

.green-btn {
    border-color: var(--green-soft);
    box-shadow: 0 0 12px rgba(85, 201, 138, 0.7), inset 0 0 16px rgba(85, 201, 138, 0.18);
}

.small-btn.orange-btn:hover {
    border-color: #ffd09b;
    box-shadow: 0 0 10px rgba(233, 160, 90, 0.58), 0 0 22px rgba(233, 160, 90, 0.34), inset 0 0 18px rgba(233, 160, 90, 0.2);
}

.small-btn.green-btn:hover {
    border-color: #9af0bd;
    box-shadow: 0 0 10px rgba(85, 201, 138, 0.58), 0 0 22px rgba(85, 201, 138, 0.34), inset 0 0 18px rgba(85, 201, 138, 0.2);
}

.exam-card.neon-red {
    box-shadow: 0 0 16px rgba(255, 71, 87, 0.46), inset 0 0 22px rgba(255, 71, 87, 0.08);
}

    .exam-card.neon-red::before {
        background: rgba(255, 71, 87, 0.26);
        box-shadow: 0 0 4px rgba(255, 71, 87, 0.24);
    }

    .exam-card.neon-red::after {
        border-color: rgba(255, 151, 158, 0.92);
        box-shadow: 0 0 8px rgba(255, 71, 87, 0.66), 0 0 18px rgba(255, 71, 87, 0.22), inset 0 0 8px rgba(255, 71, 87, 0.34);
    }

.exam-btn {
    border-color: #ff5b67;
    box-shadow: 0 0 12px rgba(255, 71, 87, 0.72), inset 0 0 16px rgba(255, 71, 87, 0.18);
}

/* Center the exam button text inside its box (arrow sits absolute so
   it doesn't offset the label). */
.small-btn.exam-btn {
    position: relative;
}

/* Keep the arrow close to the centered text instead of hugging the
   button edge: place it just before the centered label. */
.small-btn.exam-btn {
    min-width: 210px;
}

.exam-btn b {
    position: absolute;
    left: auto;
    right: calc(50% + 72px);
}

.exam-btn span {
    flex: 1 1 auto;
    text-align: center;
}

.exam-btn:hover {
    border-color: #ffadb3;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.6), 0 0 22px rgba(255, 71, 87, 0.36), inset 0 0 18px rgba(255, 71, 87, 0.22);
}

/* =========================
   Slogan
========================= */

.slogan {
    text-align: center;
    margin: 108px 0 108px;
}

.footer .slogan {
    margin: 34px 0 28px;
}

.ads-section {
    margin-top: 78px !important;
}

.slogan h2 {
    margin: 0;
    font-size: clamp(34px, 5vw, 50px);
    font-weight: 900;
    line-height: 1.4;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(231, 189, 98, 0.38), 0 0 18px rgba(231, 189, 98, 0.2);
    /*  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.65),
    0 0 18px var(--cyan),
    0 0 24px var(--pink); */
    position: relative;
    display: inline-block;
}

    .slogan h2::after {
        content: "";
        position: absolute;
        right: 0%;
        left: 0%;
        bottom: -14px;
        height: 5px;
        border-radius: 999px;
        background: linear-gradient(90deg, #c99d42, var(--gold), #f6dda0);
        box-shadow: 0 0 10px rgba(231, 189, 98, 0.8), 0 0 14px rgba(231, 189, 98, 0.45);
    }

/* =========================
   Trust Section
========================= */

.trust-section {
    margin-top: 20px;
}

.trust-title {
    margin-bottom: 34px;
}

    .trust-title h2 {
        font-size: 22px;
    }

    .trust-title span {
        width: 300px;
        opacity: 0.9;
    }

.trust-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 36px;
}

.trust-card {
    min-height: 128px;
    border-radius: 10px;
    background: rgba(5, 12, 24, 0.76);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 14px 10px;
    border: 3px solid currentColor;
    box-shadow: 0 0 12px currentColor, inset 0 0 18px rgba(255, 255, 255, 0.07), inset 0 0 10px currentColor;
}

    .trust-card p {
        margin: 0;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
    }

.trust-icon {
    font-size: 50px;
    line-height: 1;
    font-weight: 700;
    text-shadow: 0 0 12px currentColor;
}

.trust-card.blue {
    color: #2b91ff;
}

.trust-card.green {
    color: #a4e862;
}

.trust-card.cyan {
    color: var(--cyan);
}

.trust-card.orange {
    color: var(--orange);
}

.trust-card.purple {
    color: var(--purple);
}

.trust-card.teal {
    color: #00e7ff;
}

/* =========================
   Footer
========================= */

.footer {
    position: relative;
    margin-top: 64px;
    padding: 42px 34px 30px;
    border: 1px solid rgba(160, 225, 255, 0.2);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(10, 25, 44, 0.55), rgba(5, 11, 22, 0.5)), var(--bg);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 40px rgba(39, 231, 255, 0.035);
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    align-items: start;
    gap: 42px;
    direction: ltr;
    overflow: hidden;
}

    .footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 8%;
        right: 8%;
        height: 2px;
        background: linear-gradient(90deg, var(--pink), var(--cyan), var(--purple));
        box-shadow: 0 0 14px var(--cyan), 0 0 24px var(--pink);
    }

    .footer::after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        left: -150px;
        bottom: -180px;
        border-radius: 50%;
        background: rgba(39, 231, 255, 0.08);
        filter: blur(12px);
        pointer-events: none;
    }

.footer-logo {
    width: 190px;
    height: 94px;
}

.footer > * {
    direction: rtl;
    position: relative;
    z-index: 1;
}

.footer-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
}

.footer-info {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-right: 0;
    border-right: 0;
}

.footer-caption {
    margin-top: 12px;
    color: var(--cyan);
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(39, 231, 255, 0.55);
}

.footer-content p {
    margin: 10px 0 0;
    font-size: 14px;
    color: #f5f7fb;
}

.footer-copy {
    margin-top: 14px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 12px !important;
}

.footer-links {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
}

    .footer-links a {
        min-height: 74px;
        padding: 10px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid rgba(160, 225, 255, 0.12);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.035);
        text-align: center;
        transition: color 0.25s ease, transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    }

    .footer-links svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: var(--cyan);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 0 5px rgba(39, 231, 255, 0.52));
    }

    .footer-links a:hover {
        color: var(--cyan);
        transform: translateY(-3px);
        border-color: rgba(39, 231, 255, 0.45);
        background: rgba(39, 231, 255, 0.07);
    }

.footer-trust {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

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

    .footer-heading span {
        width: 34px;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--pink), var(--cyan));
        box-shadow: 0 0 9px var(--cyan);
    }

    .footer-heading h2 {
        margin: 0;
        font-size: 18px;
        color: #ffffff;
    }

.footer-trust-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.license-combined {
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

    .license-combined::before,
    .license-combined::after {
        display: none;
    }

    .license-combined img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

.license-card {
    min-height: 122px;
    display: grid;
    place-items: center;
    padding: 10px;
    border-radius: 14px;
    border: 0;
}

    .license-card.neon-frame::before {
        padding: 2px;
    }

    .license-card.neon-frame::after {
        inset: 2px;
        opacity: 0.7;
    }

.license-cyan::before {
    background: linear-gradient(90deg, #86f5ff, var(--cyan), #258bff);
    box-shadow: 0 0 14px rgba(39, 231, 255, 0.55);
}

.license-cyan {
    box-shadow: 0 0 12px rgba(39, 231, 255, 0.42), inset 0 0 16px rgba(39, 231, 255, 0.08);
}

    .license-cyan::after {
        border-color: rgba(144, 247, 255, 0.82);
        box-shadow: 0 0 6px rgba(39, 231, 255, 0.48), inset 0 0 7px rgba(39, 231, 255, 0.2);
    }

.license-pink::before {
    background: linear-gradient(90deg, #ffb1fb, var(--pink), #a24dff);
    box-shadow: 0 0 14px rgba(255, 85, 248, 0.5);
}

.license-pink {
    box-shadow: 0 0 12px rgba(255, 85, 248, 0.4), inset 0 0 16px rgba(255, 85, 248, 0.07);
}

    .license-pink::after {
        border-color: rgba(255, 177, 251, 0.82);
        box-shadow: 0 0 6px rgba(255, 85, 248, 0.46), inset 0 0 7px rgba(255, 85, 248, 0.18);
    }

.license-green::before {
    background: linear-gradient(90deg, #b8f6cf, var(--green-soft), #278f5a);
    box-shadow: 0 0 14px rgba(85, 201, 138, 0.5);
}

.license-green {
    box-shadow: 0 0 12px rgba(85, 201, 138, 0.4), inset 0 0 16px rgba(85, 201, 138, 0.07);
}

    .license-green::after {
        border-color: rgba(184, 246, 207, 0.82);
        box-shadow: 0 0 6px rgba(85, 201, 138, 0.46), inset 0 0 7px rgba(85, 201, 138, 0.18);
    }

.license-orange::before {
    background: linear-gradient(90deg, #ffe0ad, var(--orange-soft), #b95f28);
    box-shadow: 0 0 14px rgba(233, 160, 90, 0.5);
}

.license-orange {
    box-shadow: 0 0 12px rgba(233, 160, 90, 0.4), inset 0 0 16px rgba(233, 160, 90, 0.07);
}

    .license-orange::after {
        border-color: rgba(255, 224, 173, 0.82);
        box-shadow: 0 0 6px rgba(233, 160, 90, 0.46), inset 0 0 7px rgba(233, 160, 90, 0.18);
    }

.license-card img {
    width: 100%;
    height: 100px;
    object-fit: contain;
}

.license-card.license-combined {
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

    .license-card.license-combined::before,
    .license-card.license-combined::after {
        display: none;
    }

    .license-card.license-combined img {
        width: 88%;
        height: auto;
        margin: 0 auto;
        display: block;
        object-fit: contain;
    }

.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
    color: #e0e8f0;
    transition: all 0.25s ease;
}

    .trust-badge:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.18);
        transform: translateY(-2px);
    }

.tb-icon {
    font-size: 18px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Footer Contact */
.footer-contact {
    width: 100%;
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
    text-align: center;
    color: #e0e8f0;
}

.footer-contact-heading {
    justify-content: center;
    margin-bottom: 18px;
}

    .footer-contact-heading h4 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #ffffff;
    }

.footer-contact-details {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.footer-contact-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: fit-content;
    margin: 0;
    font-size: 13px;
    color: #a0b8d0;
    transition: color 0.25s ease, transform 0.25s ease;
}

    .footer-contact-link span {
        color: var(--cyan);
        font-size: 18px;
        text-shadow: 0 0 8px var(--cyan);
    }

    .footer-contact-link:hover {
        color: #ffffff;
        transform: translateX(-4px);
    }

.footer-social {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
}

    .footer-social a {
        min-height: 48px;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 1px solid rgba(160, 225, 255, 0.2);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.05);
        color: #dfeeff;
        font-size: 12px;
        transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    }

    .footer-social svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .footer-social .rubika {
        color: #ff72dc;
    }

    .footer-social .bale {
        color: #62d891;
    }

    .footer-social .telegram {
        color: #58c8ff;
    }

    .footer-social a:hover {
        transform: translateY(-3px);
        border-color: currentColor;
        background: rgba(39, 231, 255, 0.12);
    }

.footer-contact .footer-copy {
    margin-top: 18px !important;
}

/* Fixed legal/navigation bar */
.fixed-footer {
    position: fixed;
    left: 50%;
    bottom: 14px;
    z-index: 25;
    width: min(var(--container), calc(100% - 32px));
    min-height: 62px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 20px;
    border: 1px solid rgba(160, 225, 255, 0.28);
    border-radius: 10px;
    background: rgba(5, 13, 27, 0.35);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34), 0 0 18px rgba(39, 231, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    direction: rtl;
}

.fixed-footer-copy {
    flex: 1 1 auto;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    line-height: 1.7;
    text-align: right;
}

.fixed-footer-links {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .fixed-footer-links a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 10px;
        border: 1px solid rgba(160, 225, 255, 0.16);
        border-radius: 10px;
        color: rgba(255, 255, 255, 0.78);
        font-size: 12px;
        white-space: nowrap;
        transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    }

    .fixed-footer-links svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        fill: none;
        stroke: var(--cyan);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 0 5px rgba(39, 231, 255, 0.52));
    }

    .fixed-footer-links a:hover {
        color: var(--cyan);
        border-color: rgba(39, 231, 255, 0.48);
        background: rgba(39, 231, 255, 0.08);
    }

.mobile-footer-nav {
    display: none;
}

/* =========================
   Responsive
========================= */

@media (max-width: 1024px) {
    .page-shell {
        width: min(100% - 32px, var(--container));
    }

    .site-header {
        grid-template-columns: 230px 1fr 145px;
        grid-template-areas: "actions nav brand";
        gap: 14px;
        top: 10px;
        padding: 0px 16px;
    }

    .header-actions {
        justify-self: start;
    }

    .brand {
        justify-self: end;
        width: 116px;
        height: 48px;
    }

    .main-nav {
        gap: 26px;
        flex-wrap: wrap;
        font-size: 16px;
    }

    .hero {
        height: 400px;
        min-height: 400px;
    }

    .hero-image {
        position: relative;
        inset: auto;
        height: 100%;
        min-height: 400px;
    }

    .trust-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .trust-title span {
        width: 160px;
    }
}

/* Keep the footer and the complete licenses strip on one row. */
.footer {
    grid-template-columns: minmax(0, 1fr);
}

.footer-trust {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
}

.footer-trust-grid {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.license-card.license-combined img {
    width: 40%;
    max-width: none;
    height: auto;
}

.footer-license-copy {
    grid-column: 2;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    line-height: 1.8;
    text-align: center;
}

/* Show the mobile navigation footer on desktop too. */
.mobile-footer-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .mobile-footer-nav a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 10px;
        color: rgba(255, 255, 255, 0.78);
        font-size: 12px;
        white-space: nowrap;
    }

    .mobile-footer-nav svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: var(--cyan);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

@media (max-width: 768px) {
    .page-shell {
        width: min(100% - 24px, var(--container));
        padding-top: 104px;
    }

    .site-header {
        grid-template-columns: auto auto;
        grid-template-areas: "actions brand";
        min-height: 60px;
        top: 0;
        left: 0;
        width: 100%;
        transform: none;
        padding: 0 12px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

        .site-header::before {
            display: block;
            border-radius: 0;
        }

    .brand {
        justify-self: end;
        width: 118px;
        height: 50px;
    }

    .main-nav {
        display: none;
    }

    .header-actions {
        justify-self: start;
        flex-wrap: nowrap;
    }

    .hero {
        height: clamp(220px, 52vw, 280px);
        min-height: 220px;
    }

    .hero-image {
        min-height: inherit;
        background: #050817;
    }

        .hero-image img {
            object-fit: contain;
            object-position: center;
            background: #050817;
        }

    .hero-content {
        inset: 0;
        width: 100%;
        align-items: center;
        text-align: center;
        justify-content: center;
        padding: clamp(32px, 7vw, 48px) clamp(14px, 5vw, 32px) 80px;
    }

    .hero-brand,
    .hero h1 {
        text-align: center;
    }

    .hero-brand {
        margin-bottom: clamp(8px, 2vw, 16px);
        font-size: clamp(14px, 3.5vw, 18px);
    }

        .hero-brand span {
            font-size: clamp(10px, 2.8vw, 14px);
        }

    .hero h1 {
        width: min(100%, 520px);
        max-width: none;
        font-size: clamp(22px, 6vw, 38px);
        line-height: 1.35;
    }

    .btn-neon {
        width: min(100%, 280px);
        min-width: 0;
        height: clamp(42px, 11vw, 52px);
        margin-top: clamp(14px, 4vw, 22px);
        padding: 0 12px;
        font-size: clamp(13px, 3.5vw, 17px);
        gap: 8px;
    }

        .btn-neon b {
            font-size: clamp(20px, 5.5vw, 26px);
        }

    .hero-dots {
        bottom: 10px;
    }

    .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .ad-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .active-card {
        text-align: center;
        min-height: 160px;
        padding: 0;
        gap: 0;
        justify-content: flex-end;
    }

    .active-info {
        text-align: right;
        width: 100%;
    }

    .active-icon {
        width: 100%;
        margin-top: 12px;
    }

    .class-meta p {
        justify-content: flex-start;
    }

    .class-details {
        margin-top: 0;
        align-self: flex-start;
    }

    .course-card,
    .ad-card {
        grid-template-columns: 1fr;
        padding: 24px 12px 14px;
    }

    .ad-card {
        padding: 0;
    }

    .course-img {
        height: 190px;
    }

    .ad-img {
        height: 260px;
    }

    .course-content,
    .ad-content {
        text-align: center;
    }

    .small-btn {
        margin: 0 auto;
    }

    .section-title {
        gap: 16px;
    }

        .section-title span {
            width: 70px;
        }

    .footer {
        margin-top: 44px;
        padding: 32px 20px 24px;
        gap: 32px;
    }

    .fixed-footer {
        gap: 14px;
        padding: 9px 14px;
    }

    .fixed-footer-copy {
        font-size: 11px;
    }

    .footer-trust-grid {
        gap: 10px;
    }

    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .footer {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 28px;
    }

    .footer-info {
        padding-right: 0;
        border-right: 0;
    }

    .footer-logo {
        justify-self: center;
    }

    .footer-links {
        flex-wrap: wrap;
        gap: 20px 36px;
    }

        .footer-links a::after {
            display: none;
        }

    .footer-contact {
        text-align: center;
    }

    .footer-contact-link {
        margin: 0 auto;
    }

    .footer-social {
        width: min(100%, 430px);
        margin-right: auto;
        margin-left: auto;
    }
}

.ad-img {
    height: clamp(240px, 34vw, 380px);
    border-radius: inherit;
}

@media (max-width: 460px) {
    .active-card {
        min-height: 150px;
        padding: 0;
        gap: 0;
        text-align: center;
    }

    .active-icon {
        width: 40%;
        margin-top: 48px;
    }

    .active-info {
        text-align: right;
    }

    .class-meta p {
        justify-content: flex-start;
    }

    .class-details {
        margin: 0;
        align-self: flex-start;
    }

    .profile-btn {
        width: 42px;
        height: 42px;
        border-radius: 8px;
    }

    .theme-toggle {
        gap: 3px;
        padding: 6px 4px;
        border-radius: 11px;
    }

    .switch {
        width: 42px;
        height: 28px;
    }

    .theme-switch-track {
        height: 28px;
    }

    .theme-switch-thumb {
        top: 3px;
        left: 3px;
        width: 22px;
        height: 22px;
        transform: translate(13px, 0);
    }

    .switch.is-light .theme-switch-thumb {
        transform: translate(0, 0);
    }

    .theme-symbol {
        width: 18px;
        height: 18px;
    }

        .theme-symbol svg {
            width: 15px;
            height: 15px;
        }

    .brand {
        width: 104px;
        height: 44px;
    }

    .main-nav {
        display: none;
    }

    .hero,
    .hero-image {
        height: clamp(200px, 56vw, 260px);
        min-height: 200px;
    }

        .hero-image img {
            object-fit: contain;
        }

    .section-title h2 {
        font-size: 24px;
    }

    .section-title span {
        width: 42px;
    }

    .active-info h3,
    .course-content h3,
    .ad-content h3 {
        font-size: 23px;
    }

    .course-content p,
    .ad-content p {
        font-size: 17px;
    }

    .trust-grid {
        grid-template-columns: 1fr 1fr;
    }

    .trust-card {
        min-height: 112px;
    }

    .trust-icon {
        font-size: 38px;
    }

    .trust-card p {
        font-size: 12px;
    }

    .footer {
        padding-right: 12px;
        padding-left: 12px;
    }

    .fixed-footer {
        left: 0;
        bottom: 0;
        width: 100%;
        min-height: 68px;
        transform: none;
        flex-direction: column;
        justify-content: center;
        gap: 0;
        padding: 8px 10px max(8px, env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }

    .fixed-footer-copy {
        display: none;
    }

    .mobile-footer-nav {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 4px;
        order: 1;
    }

        .mobile-footer-nav a {
            display: inline-flex;
            flex: 1 1 0;
            min-width: 0;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            padding: 4px 2px;
            color: rgba(255, 255, 255, .86);
            font-size: 10px;
            line-height: 1.2;
        }

        .mobile-footer-nav svg {
            width: 23px;
            height: 23px;
            fill: none;
            stroke: var(--cyan);
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
            filter: drop-shadow(0 0 5px rgba(39, 231, 255, .6));
        }

    .fixed-footer-links {
        display: none;
    }

        .fixed-footer-links a {
            flex: 1 1 0;
            justify-content: center;
            gap: 4px;
            padding: 6px 4px;
            font-size: 10px;
        }

        .fixed-footer-links svg {
            width: 16px;
            height: 16px;
        }

    .footer-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
    }

    .license-card {
        min-height: 84px;
        padding: 7px 4px;
        border-radius: 11px;
    }

        .license-card img {
            height: 68px;
        }

    .footer-links {
        gap: 6px;
    }

        .footer-links a {
            min-height: 72px;
            padding: 8px 4px;
            font-size: 10px;
        }

        .footer-links svg {
            width: 20px;
            height: 20px;
        }

    .footer-contact-details {
        flex-direction: column;
        gap: 9px;
    }

    .footer-social {
        gap: 6px;
    }

        .footer-social a {
            min-height: 62px;
            padding: 7px 4px;
            flex-direction: column;
            font-size: 10px;
        }
}

:root.light-theme body {
    color: var(--text);
    background: radial-gradient(circle at 20% 0%, rgba(39, 172, 255, 0.18), transparent 30%), radial-gradient(circle at 80% 10%, rgba(255, 85, 248, 0.16), transparent 34%), var(--bg);
}

:root.light-theme .neon-frame,
:root.light-theme .trust-card,
:root.light-theme .profile-btn,
:root.light-theme .switch {
    color: var(--text);
}

:root.light-theme .main-nav,
:root.light-theme .section-title h2,
:root.light-theme .active-info h3,
:root.light-theme .course-content h3,
:root.light-theme .ad-content h3,
:root.light-theme .hero h1 {
    color: #14263b;
}

:root.light-theme .hero-brand strong,
:root.light-theme .hero-brand span {
    color: #14263b;
}

:root.light-theme .btn-neon {
    color: #14263b;
    background: rgba(255, 255, 255, 0.72);
}

:root.light-theme .course-content p,
:root.light-theme .ad-content p,
:root.light-theme .active-info p,
:root.light-theme .trust-card p,
:root.light-theme .footer-content {
    color: #304b63;
}

:root.light-theme .footer {
    background: linear-gradient(135deg, rgba(226, 243, 255, 0.96), rgba(202, 229, 247, 0.98)), var(--bg-soft);
    border-color: rgba(43, 145, 255, 0.24);
    box-shadow: 0 20px 48px rgba(54, 106, 145, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

:root.light-theme .footer-logo,
:root.light-theme .footer-heading h2,
:root.light-theme .footer-contact h4 {
    color: #14263b;
}

:root.light-theme .brand {
    color: inherit;
}

:root.light-theme .header-document-icon {
    color: #16779b;
    border-color: rgba(8, 125, 158, 0.32);
    background: linear-gradient(145deg, #ffffff, #e7f6ff);
    box-shadow: 0 0 13px rgba(53, 169, 205, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

    :root.light-theme .header-document-icon svg {
        filter: drop-shadow(0 0 4px rgba(47, 157, 194, 0.32));
    }

:root.light-theme .footer-caption {
    color: #087d9e;
}

:root.light-theme .footer-content p {
    color: #304b63;
}

:root.light-theme .footer-copy {
    color: rgba(48, 75, 99, 0.64) !important;
}

:root.light-theme .footer-links,
:root.light-theme .footer-contact-link {
    color: #45627c;
}

:root.light-theme .footer-social a {
    border-color: rgba(43, 145, 255, 0.24);
    background: rgba(255, 255, 255, 0.34);
}

:root.light-theme .neon-frame {
    background: var(--surface);
    box-shadow: 0 14px 28px rgba(54, 106, 145, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

:root.light-theme .active-card.neon-frame {
    background-image: url('/assets/classes/class-banner.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #dce5ef;
    border-color: rgba(39, 172, 255, 0.34);
    box-shadow: 0 12px 26px rgba(42, 103, 145, 0.16), 0 0 18px rgba(39, 172, 255, 0.12), inset 0 0 16px rgba(39, 172, 255, 0.12);
}

    :root.light-theme .active-card.neon-frame::before {
        background: rgba(39, 172, 255, 0.12);
    }

    :root.light-theme .active-card.neon-frame::after {
        border-color: rgba(39, 172, 255, 0.58);
        box-shadow: 0 0 8px rgba(39, 172, 255, 0.22), inset 0 0 8px rgba(39, 172, 255, 0.08);
    }

:root.light-theme .active-info p,
:root.light-theme .active-info .teacher,
:root.light-theme .class-meta,
:root.light-theme .class-meta p {
    color: #38546a;
}

    :root.light-theme .active-info .teacher strong {
        color: #087d9e;
    }

    :root.light-theme .class-meta span {
        color: #087d9e;
    }

:root.light-theme .capacity-bar {
    background: rgba(126, 165, 191, 0.28);
    box-shadow: inset 0 1px 4px rgba(45, 82, 105, 0.18);
}

:root.light-theme .class-details {
    color: #ffffff;
    border-color: rgba(148, 247, 255, 0.85);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 0 12px rgba(39, 231, 255, 0.5), inset 0 0 12px rgba(39, 231, 255, 0.06);
}

:root.light-theme .status-badge {
    color: #16713d;
    background: linear-gradient(135deg, #e8fff0, #c9f5d8);
    border-color: #43bf72;
    box-shadow: 0 5px 12px rgba(35, 145, 78, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

    :root.light-theme .status-badge::first-letter {
        color: #1ca354;
    }

:root.light-theme .small-btn {
    color: #173a4e;
    background: rgba(255, 255, 255, 0.78);
    text-shadow: none;
}

    :root.light-theme .small-btn b {
        color: #176d88;
    }

    :root.light-theme .small-btn.orange-btn {
        border-color: #d98a3b;
        box-shadow: 0 5px 14px rgba(198, 116, 35, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    :root.light-theme .small-btn.green-btn {
        border-color: #35a968;
        box-shadow: 0 5px 14px rgba(35, 145, 78, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

:root.light-theme .profile-btn {
    border-color: rgba(181, 80, 255, 0.4);
    background: rgba(255, 255, 255, 0.82);
    color: #087d9e;
    box-shadow: 0 8px 20px rgba(54, 106, 145, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

:root.light-theme .theme-toggle {
    /* background: rgba(255, 255, 255, 0.72); */
    border-color: rgba(43, 145, 255, 0.2);
}

:root.light-theme .time-pill,
:root.light-theme .tag {
    color: #14263b;
    background: var(--surface-input);
}

:root.light-theme .trust-card {
    background: var(--surface-raised);
}

    :root.light-theme .trust-card p {
        color: #1d364a;
    }

    :root.light-theme .trust-card.blue {
        color: #1769d2;
    }

    :root.light-theme .trust-card.green {
        color: #278a49;
    }

    :root.light-theme .trust-card.cyan,
    :root.light-theme .trust-card.teal {
        color: #087d9e;
    }

    :root.light-theme .trust-card.orange {
        color: #bc6914;
    }

    :root.light-theme .trust-card.purple {
        color: #7a34b5;
    }

:root.light-theme .slogan h2 {
    color: #b8862f;
    text-shadow: 0 3px 12px rgba(231, 189, 98, 0.22), 0 0 18px rgba(231, 189, 98, 0.18);
}

:root.light-theme .footer-links a {
    border-color: rgba(43, 145, 255, 0.14);
    background: rgba(255, 255, 255, 0.48);
}

:root.light-theme .fixed-footer {
    background: rgba(239, 249, 255, 0.12);
    border-color: rgba(43, 145, 255, 0.24);
    box-shadow: 0 12px 30px rgba(54, 106, 145, 0.2), 0 0 18px rgba(43, 145, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

:root.light-theme .fixed-footer-copy,
:root.light-theme .fixed-footer-links a {
    color: #304b63;
}

:root.light-theme .fixed-footer-links a {
    border-color: rgba(43, 145, 255, 0.18);
}

@media (max-width: 460px) {
    .footer-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-links {
        grid-template-columns: 1fr;
    }
}

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

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

/* Single-row footer layout: keep the heading and the complete licenses strip
   on the same row, even when the contact section is disabled. */
.footer {
    grid-template-columns: minmax(0, 1fr);
}

.footer-trust {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
}

.footer-trust-grid {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.license-card.license-combined img {
    width: 100%;
    max-width: none;
    height: auto;
}

/* Center the licenses and place the copyright directly beneath them. */
.footer-trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.footer-trust-grid {
    width: 100%;
}

.license-card.license-combined img {
    width: 100%;
    margin: 0 auto;
}

.footer-license-copy {
    width: 100%;
    grid-column: auto;
    margin: 0;
    text-align: center;
}

@media (min-width: 1025px) {
    .license-card.license-combined img {
        width: 40%;
    }
}

/* Theme control: a single icon button (moon in dark mode, sun in light mode). */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.theme-switch {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(180, 235, 255, 0.38);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(30, 54, 80, 0.9), rgba(6, 15, 29, 0.94));
    color: #cfe2ff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24), 0 0 13px rgba(83, 137, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

    .theme-switch:hover {
        border-color: var(--cyan);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 0 16px rgba(83, 205, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }

.theme-switch-icon {
    display: grid;
    place-items: center;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

    .theme-switch-icon svg {
        width: 25px;
        height: 25px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.theme-switch-sun {
    display: none;
}

.theme-switch.is-light {
    border-color: rgba(255, 191, 82, 0.68);
    background: linear-gradient(145deg, #fff1c2, #ffbd58);
    color: #9b5411;
    box-shadow: 0 8px 20px rgba(190, 114, 32, 0.18), 0 0 14px rgba(255, 191, 82, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

    .theme-switch.is-light .theme-switch-moon {
        display: none;
    }

    .theme-switch.is-light .theme-switch-sun {
        display: grid;
    }

@media (max-width: 1024px) {
    .theme-switch {
        width: 42px;
        height: 42px;
        border-radius: 8px;
    }

    .theme-switch-icon svg {
        width: 22px;
        height: 22px;
    }
}

/* Keep the requested section colors ahead of legacy neon defaults. */
.active-card.neon-frame.neon-blue {
    box-shadow: 0 0 14px rgba(111, 159, 232, 0.42), 0 0 32px rgba(111, 159, 232, 0.13);
}

    .active-card.neon-frame.neon-blue::before {
        background: rgba(111, 185, 255, 0.34);
        box-shadow: 0 0 7px rgba(111, 190, 255, 0.38);
    }

    .active-card.neon-frame.neon-blue::after {
        border-color: rgba(141, 224, 255, 0.98);
        box-shadow: 0 0 10px rgba(111, 190, 255, 0.78), 0 0 22px rgba(111, 159, 232, 0.3), inset 0 0 9px rgba(111, 159, 232, 0.36);
    }

.course-card.neon-frame.neon-orange,
.course-card.neon-frame.neon-green {
}


.course-card.neon-frame.neon-orange::before {
    background: rgba(233, 160, 90, 0.26);
    box-shadow: 0 0 4px rgba(233, 160, 90, 0.2);
}

.course-card.neon-frame.neon-green::before {
    background: rgba(85, 201, 138, 0.26);
    box-shadow: 0 0 4px rgba(85, 201, 138, 0.2);
}

.course-card.neon-frame.neon-orange::after {
    border-color: rgba(255, 205, 150, 0.9);
    box-shadow: 0 0 8px rgba(233, 160, 90, 0.6), 0 0 18px rgba(233, 160, 90, 0.2), inset 0 0 8px rgba(233, 160, 90, 0.3);
}

.course-card.neon-frame.neon-green::after {
    border-color: rgba(139, 235, 180, 0.9);
    box-shadow: 0 0 8px rgba(85, 201, 138, 0.6), 0 0 18px rgba(85, 201, 138, 0.2), inset 0 0 8px rgba(85, 201, 138, 0.32);
}

.course-card.neon-frame.neon-red {
    box-shadow: 0 0 16px rgba(255, 71, 87, 0.44), inset 0 0 22px rgba(255, 71, 87, 0.08);
}

    .course-card.neon-frame.neon-red::before {
        background: rgba(255, 71, 87, 0.26);
        box-shadow: 0 0 4px rgba(255, 71, 87, 0.2);
    }

    .course-card.neon-frame.neon-red::after {
        border-color: rgba(255, 160, 168, 0.9);
        box-shadow: 0 0 8px rgba(255, 71, 87, 0.6), 0 0 18px rgba(255, 71, 87, 0.2), inset 0 0 8px rgba(255, 71, 87, 0.32);
    }

.red-btn {
    border-color: #ff5b67;
    box-shadow: 0 0 12px rgba(255, 71, 87, 0.7), inset 0 0 16px rgba(255, 71, 87, 0.18);
}

.small-btn.red-btn:hover {
    border-color: #ffb3b8;
    box-shadow: 0 0 10px rgba(255, 71, 87, 0.58), 0 0 22px rgba(255, 71, 87, 0.34), inset 0 0 18px rgba(255, 71, 87, 0.2);
}

.ad-card.neon-frame.neon-purple::before {
    background: linear-gradient(90deg, #d29aff, var(--purple), #7230b8);
}

.ad-card.neon-frame.neon-purple::after {
    border-color: rgba(216, 166, 255, 0.92);
}

/* Final mobile layout */
@media (max-width: 768px) {
    body {
        padding-bottom: 0;
    }

    .page-shell {
        padding-bottom: 76px;
    }

    .section-block {
        margin-bottom: 54px;
    }

    .license-card.license-combined {
        width: 100%;
    }

        .license-card.license-combined img {
            width: 100%;
        }

    .footer-contact {
        text-align: right;
    }

    .footer-contact-heading {
        justify-content: flex-start;
        text-align: right;
    }

    .active-card {
        min-height: 160px;
        padding: 0;
        gap: 0;
    }

    .active-icon {
        width: 82%;
        margin: 30px auto 0;
    }

    .status-badge {
        top: 16px;
        left: 18px;
        padding: 4px 7px;
        border-width: 1px;
        border-radius: 7px;
        font-size: 10px;
    }

    .active-info h3 {
        margin-bottom: 5px;
        font-size: 15px;
        line-height: 1.5;
    }

    .active-info p,
    .class-meta p {
        font-size: 10px;
        line-height: 1.55;
    }

    .active-info .teacher {
        margin-bottom: 7px;
    }

    .class-meta {
        gap: 3px;
    }

        .class-meta p {
            gap: 3px;
        }

        .class-meta span {
            width: 14px;
            font-size: 13px;
        }

    .capacity-bar {
        height: 7px;
        margin: 8px 0 9px;
    }

    .class-details {
        width: 100%;
        height: 31px;
        gap: 4px;
        border-width: 1px;
        border-radius: 8px;
        font-size: 10px;
    }

        .class-details b {
            font-size: 16px;
        }

    .slogan {
        margin: 70px 0;
    }

    .footer .slogan {
        margin: 24px 0 20px;
    }

    .slogan h2 {
        font-size: 26px;
    }

    .course-card {
        min-height: 0;
        padding: 25px 15px 20px;
        gap: 10px;
    }

    .course-img {
        height: clamp(120px, 32vw, 190px);
    }

    .ad-img {
        height: clamp(200px, 50vw, 340px);
    }

    .tag {
        top: 35px;
        right: 17px;
        min-width: 48px;
        height: 22px;
        padding: 0 7px;
        border-width: 1px;
        border-radius: 6px;
        font-size: 10px;
    }

    .course-content h3 {
        margin-bottom: 4px;
        font-size: 14px;
    }

    .course-content p {
        margin-bottom: 9px;
        font-size: 10px;
    }

    .small-btn {
        width: 100%;
        min-width: 0;
        height: 31px;
        padding: 0 6px;
        border-radius: 7px;
        font-size: 9px;
    }
}

@media (max-width: 460px) {
    .active-card {
        min-height: 250px;
        padding: 0;
        gap: 0;
    }

    .active-icon {
        width: 50%;
        margin: 28px auto 0;
    }

    .status-badge {
        top: 18px;
        left: 15px;
    }

    .slogan h2 {
        font-size: 22px;
    }

    :root.light-theme .fixed-footer,
    .fixed-footer {
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    :root.light-theme .mobile-footer-nav a,
    .mobile-footer-nav a {
        color: rgba(255, 255, 255, .9);
    }
}

/* Final footer layout override */
.footer {
    grid-template-columns: minmax(0, 1fr);
}

.footer-trust {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
}

.footer-trust-grid {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.license-card.license-combined img {
    width: 100%;
    max-width: none;
    height: auto;
}

/* Final license sizing and copyright placement */
.footer-trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.footer-trust-grid {
    width: 100%;
}

.footer-license-copy {
    width: 100%;
    margin: 0;
    text-align: center;
}

@media (min-width: 1025px) {
    .license-card.license-combined img {
        width: 40%;
        margin: 0 auto;
    }

    .mobile-footer-nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        justify-content: center;
        gap: 8px;
    }

        .mobile-footer-nav a {
            padding: 8px 11px;
            font-size: 12px;
            gap: 6px;
        }

        .mobile-footer-nav svg {
            width: 20px;
            height: 20px;
        }
}

/* Keep the theme icons inside the switch only; hide the duplicate outer icons. */
.theme-toggle > .theme-symbol {
    display: none;
}

.theme-toggle {
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.theme-switch-stars {
    top: 6px;
    left: 8px;
    z-index: 1;
    font-size: 0;
}

    .theme-switch-stars::before {
        content: "☾";
        color: rgba(255, 255, 255, 0.9);
        font-size: 16px;
        line-height: 1;
    }

.theme-switch-track::after {
    content: "☀";
    position: absolute;
    top: 5px;
    right: 7px;
    color: rgba(255, 239, 173, 0.95);
    font-size: 15px;
    line-height: 1;
    text-shadow: 0 0 6px rgba(255, 213, 90, 0.75);
}

@media (min-width: 1025px) {
    .fixed-footer .mobile-footer-nav {
        width: fit-content !important;
        max-width: 70%;
        flex: 0 0 auto;
    }

        .fixed-footer .mobile-footer-nav a {
            flex: 0 0 auto;
            min-width: 0;
        }
}

/* Final responsive and light-theme corrections. */
@media (max-width: 768px) {
    .active-card .class-details {
        width: min(100%, 180px);
    }
}

:root.light-theme .theme-switch,
:root.light-theme .theme-switch.is-light {
    border-color: rgba(8, 125, 158, 0.38);
    background: linear-gradient(145deg, #ffffff, #e7f6ff);
    color: #e19a19;
    box-shadow: 0 7px 16px rgba(54, 106, 145, 0.14), 0 0 12px rgba(39, 172, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

:root.light-theme .active-card.neon-frame .active-info h3 {
    color: #14263b;
}

:root.light-theme .active-card.neon-frame .active-info p,
:root.light-theme .active-card.neon-frame .active-info .teacher,
:root.light-theme .active-card.neon-frame .class-meta,
:root.light-theme .active-card.neon-frame .class-meta p {
    color: #29465d;
}

    :root.light-theme .active-card.neon-frame .class-meta span {
        color: #087d9e;
    }

:root.light-theme .footer-license-copy {
    color: #38566d !important;
    text-shadow: none;
}

:root.light-theme .active-card-message {
    color: #29465d;
}

/* Footer icon strip: image on the left, book in the center, monitor on the right. */
.fixed-footer .mobile-footer-nav {
    direction: ltr;
    gap: clamp(18px, 3vw, 34px);
}

    .fixed-footer .mobile-footer-nav a {
        padding: 8px 14px;
        border-radius: 14px;
    }

    .fixed-footer .mobile-footer-nav svg {
        width: 38px;
        height: 38px;
        stroke-width: 1.55;
        filter: drop-shadow(0 0 7px rgba(39, 231, 255, 0.72));
    }

    .fixed-footer .mobile-footer-nav img {
        width: 48px;
        height: 48px;
        object-fit: contain;
    }

    .fixed-footer .mobile-footer-nav a:nth-child(1) img {
        filter: drop-shadow(0 0 7px rgba(245, 158, 11, 0.58));
    }

    .fixed-footer .mobile-footer-nav a:nth-child(2) img {
        filter: drop-shadow(0 0 7px rgba(20, 165, 238, 0.58));
    }

    .fixed-footer .mobile-footer-nav a:nth-child(3) img {
        filter: drop-shadow(0 0 7px rgba(52, 211, 153, 0.58));
    }

@media (max-width: 768px) {
    .fixed-footer .mobile-footer-nav {
        gap: 8px;
    }

        .fixed-footer .mobile-footer-nav a {
            padding: 5px 8px;
        }

        .fixed-footer .mobile-footer-nav svg {
            width: 34px;
            height: 34px;
            stroke-width: 1.55;
        }

        .fixed-footer .mobile-footer-nav img {
            width: 42px;
            height: 42px;
        }
}













/* =========================
   Migrated styles from ads-list.html
========================= */
/* ===========================
   Design Tokens
=========================== */
@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("assets/fonts/vazirmatn-300.ttf") format("truetype");
}

.class-banner-content .class-details b {
    display: none;
}

@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/vazirmatn-400.ttf") format("truetype");
}

@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("assets/fonts/vazirmatn-500.ttf") format("truetype");
}

@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("assets/fonts/vazirmatn-600.ttf") format("truetype");
}

@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("assets/fonts/vazirmatn-700.ttf") format("truetype");
}

@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("assets/fonts/vazirmatn-800.ttf") format("truetype");
}

@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("assets/fonts/vazirmatn-900.ttf") format("truetype");
}

:root {
    --bg: #03070e;
    --bg-soft: #060b15;
    --text: #ffffff;
    --muted: #c9d3de;
    --cyan: #27e7ff;
    --cyan-soft: rgba(39, 231, 255, 0.65);
    --pink: #ff55f8;
    --pink-soft: rgba(255, 85, 248, 0.65);
    --blue: #4d7cff;
    --green: #17d96f;
    --orange: #ff9d25;
    --purple: #b250ff;
    --milk: #f4ead8;
    --blue-soft: #6f9fe8;
    --green-soft: #55c98a;
    --orange-soft: #e9a05a;
    --gold: #e7bd62;
    --surface: rgba(4, 8, 18, 0.82);
    --surface-raised: rgba(5, 12, 24, 0.76);
    --surface-input: rgba(5, 11, 24, 0.8);
    --border: rgba(255, 255, 255, 0.09);
    --radius-2xl: 12px;
    --radius-xl: 10px;
    --radius-lg: 22px;
    --radius-md: 8px;
    --radius-sm: 10px;
    --shadow-card: 0 18px 45px rgba(0, 0, 0, 0.22);
    --transition: 180ms ease;
    --container: 1200px;
    --header-bg: linear-gradient(180deg, rgba(3, 7, 14, 0.68), rgba(8, 18, 34, 0.42) 58%, rgba(16, 32, 52, 0.22));
}

    :root.light-theme {
        --bg: #eaf5ff;
        --bg-soft: #d9ebfa;
        --text: #102033;
        --muted: #40566d;
        --surface: rgba(255, 255, 255, 0.78);
        --surface-raised: rgba(255, 255, 255, 0.88);
        --surface-input: rgba(255, 255, 255, 0.9);
        --border: rgba(0, 0, 0, 0.08);
        --header-bg: linear-gradient(180deg, rgba(240, 249, 255, 0.72), rgba(220, 239, 251, 0.5) 58%, rgba(205, 229, 246, 0.28));
    }

/* ===========================
   Reset & Base
=========================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Vazirmatn", system-ui, sans-serif;
    color: var(--text);
    background: radial-gradient(circle at 20% 0%, rgba(39, 231, 255, 0.12), transparent 30%), radial-gradient(circle at 80% 10%, rgba(255, 85, 248, 0.12), transparent 34%), radial-gradient(circle at 50% 70%, rgba(77, 124, 255, 0.08), transparent 40%), var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
}

svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

a:focus-visible, button:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 4px;
}

/* ===========================
   Page Shell
=========================== */
.page-shell {
    width: min(var(--container), calc(100% - 56px));
    margin: 0 auto;
    padding: 40px 0 60px;
}

/* ===========================
   Header
=========================== */
.site-header {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 20;
    width: min(var(--container), calc(100% - 32px));
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 260px 1fr 170px;
    grid-template-areas: "actions nav brand";
    align-items: center;
    gap: 24px;
    min-height: 78px;
    padding: 12px 20px;
    border: 1px solid rgba(170, 231, 255, 0.26);
    border-radius: 10px;
    background: var(--header-bg);
    backdrop-filter: blur(2px) saturate(145%);
    -webkit-backdrop-filter: blur(2px) saturate(145%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    direction: ltr;
}

    .site-header::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%, rgba(87, 212, 255, .035));
    }

.header-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 14px;
    justify-self: start;
    direction: ltr;
}

.profile-btn {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 85, 248, 0.62);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(28, 22, 48, 0.92), rgba(7, 14, 27, 0.9));
    color: var(--cyan);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24), 0 0 12px rgba(255, 85, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: 0.25s ease;
}

    .profile-btn svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        filter: drop-shadow(0 0 4px var(--cyan));
    }

    .profile-btn:hover {
        border-color: var(--pink);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 0 16px rgba(255, 85, 248, 0.5), inset 0 0 18px rgba(255, 85, 248, 0.18);
    }

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border: 1px solid rgba(169, 225, 255, 0.16);
    border-radius: 8px;
    background: rgba(8, 16, 31, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.switch {
    width: 56px;
    height: 48px;
    display: grid;
    place-items: center;
    border: none;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.theme-switch-track {
    position: relative;
    display: block;
    width: 100%;
    height: 38px;
    overflow: hidden;
    border: 1px solid rgba(140, 180, 255, 0.42);
    border-radius: inherit;
    background: linear-gradient(135deg, #101a3a, #334a77);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.34), 0 0 12px rgba(83, 137, 255, 0.26);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.theme-switch-stars {
    position: absolute;
    top: 7px;
    left: 9px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 10px;
    line-height: 1;
    transition: opacity 0.25s ease;
}

.theme-switch-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #ffffff 0 18%, transparent 20%), linear-gradient(145deg, #e8f2ff, #92b7ff);
    box-shadow: 0 0 10px rgba(184, 211, 255, 0.9);
    transform: translateX(20px);
    transition: transform 0.32s cubic-bezier(.2, .8, .2, 1), background 0.3s ease, box-shadow 0.3s ease;
}

.switch.is-light .theme-switch-track {
    border-color: rgba(255, 191, 82, 0.58);
    background: linear-gradient(135deg, #ff9c5b, #ffd469);
    box-shadow: inset 0 0 10px rgba(255, 116, 57, 0.2), 0 0 12px rgba(255, 179, 80, 0.34);
}

.switch.is-light .theme-switch-thumb {
    transform: translateX(0);
    background: radial-gradient(circle at 36% 34%, #ffffff 0 18%, #fff7c9 20%, #ffcf55 68%);
    box-shadow: 0 0 12px rgba(255, 222, 105, 0.95);
}

.switch.is-light .theme-switch-stars {
    opacity: 0;
}

.main-nav {
    grid-area: nav;
    justify-self: center;
    direction: rtl;
    display: flex;
    align-items: center;
    gap: 66px;
    color: #f8fbff;
    font-size: 18px;
    font-weight: 500;
}

    .main-nav a {
        position: relative;
        padding: 8px 0;
        transition: color 0.25s ease;
    }

        .main-nav a::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--pink), var(--cyan));
            box-shadow: 0 0 10px var(--cyan);
            transition: width 0.25s ease;
        }

        .main-nav a:hover, .main-nav a.active {
            color: var(--cyan);
        }

            .main-nav a:hover::after, .main-nav a.active::after {
                width: 100%;
            }

.brand {
    grid-area: brand;
    display: block;
    justify-self: end;
    width: 128px;
    height: 54px;
    direction: ltr;
}

    .brand img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: transparent;
    }

.header-document-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #f8fdff;
    border: 1px solid rgba(180, 235, 255, 0.38);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(30, 54, 80, 0.9), rgba(6, 15, 29, 0.94));
    box-shadow: 0 0 13px rgba(118, 216, 255, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

    .header-document-icon svg {
        width: 29px;
        height: 29px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.65;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 0 5px rgba(220, 248, 255, 0.9));
    }

    .header-document-icon:hover {
        color: #fff;
        border-color: rgba(208, 245, 255, 0.8);
        box-shadow: 0 0 18px rgba(118, 216, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.26);
    }

.theme-toggle > .theme-symbol {
    display: none;
}

.theme-toggle {
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.theme-switch-stars {
    top: 6px;
    left: 8px;
    z-index: 1;
    font-size: 0;
}

    .theme-switch-stars::before {
        content: "✦";
        color: rgba(255, 255, 255, 0.9);
        font-size: 16px;
        line-height: 1;
    }

.theme-switch-track::after {
    content: "☀";
    position: absolute;
    top: 5px;
    right: 7px;
    color: rgba(255, 239, 173, 0.95);
    font-size: 15px;
    line-height: 1;
    text-shadow: 0 0 6px rgba(255, 213, 90, 0.75);
}

:root.light-theme .theme-switch, :root.light-theme .theme-switch.is-light {
    border-color: rgba(8, 125, 158, 0.38);
    background: linear-gradient(145deg, #ffffff, #e7f6ff);
    color: #e19a19;
    box-shadow: 0 7px 16px rgba(54, 106, 145, 0.14), 0 0 12px rgba(39, 172, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* ===========================
   Neon Frame
=========================== */
.neon-frame {
    position: relative;
    border-radius: var(--radius-2xl);
    background: var(--surface);
    overflow: hidden;
}

    .neon-frame::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 4px;
        pointer-events: none;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .neon-frame::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0.55;
        box-shadow: inset 0 0 18px rgba(39, 231, 255, 0.08), inset 0 0 12px rgba(255, 85, 248, 0.05);
    }

.neon-pink::before {
    background: linear-gradient(90deg, var(--pink), #b459ff);
    box-shadow: 0 0 24px var(--pink);
}

.neon-pink {
    box-shadow: 0 0 16px rgba(255, 85, 248, 0.58), inset 0 0 22px rgba(255, 85, 248, 0.58);
}

.neon-red::before {
    background: linear-gradient(90deg, #ff4757, #ff6b81);
    box-shadow: 0 0 24px rgba(255, 71, 87, 0.6);
}

.neon-red {
    box-shadow: 0 0 16px rgba(255, 71, 87, 0.55), inset 0 0 22px rgba(255, 71, 87, 0.08);
}

.neon-cyan::before {
    background: linear-gradient(90deg, var(--cyan), #42b7ff);
    box-shadow: 0 0 24px var(--cyan);
}

.neon-cyan {
    box-shadow: 0 0 16px rgba(39, 231, 255, 0.6), inset 0 0 22px rgba(39, 231, 255, 0.08);
}

.neon-gold::before {
    background: linear-gradient(90deg, #f6dda0, var(--gold), #c99d42);
    box-shadow: 0 0 22px rgba(231, 189, 98, 0.58);
}

.neon-gold {
    box-shadow: 0 0 16px rgba(231, 189, 98, 0.46), inset 0 0 22px rgba(231, 189, 98, 0.08);
}

.neon-green::before {
    background: linear-gradient(90deg, #7ce0a9, var(--green-soft), #339b67);
    box-shadow: 0 0 20px rgba(85, 201, 138, 0.46);
}

.neon-green {
    box-shadow: 0 0 16px rgba(85, 201, 138, 0.44), inset 0 0 22px rgba(85, 201, 138, 0.08);
}

/* ===========================
   Page Title
=========================== */
.ads-page-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-bottom: 12px;
}

.ads-page-header-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(39, 231, 255, 0.08);
    border: 1px solid rgba(39, 231, 255, 0.25);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 0 18px rgba(39, 231, 255, 0.2);
    order: -1;
}

    .ads-page-header-icon svg {
        width: 32px;
        height: 32px;
        color: var(--cyan);
    }

.ads-page-header {
    justify-content: flex-start;
}

.ads-page-header-text {
    text-align: right;
}

.ads-page-header h1 {
    margin: 0;
    font-size: clamp(30px, 4.5vw, 48px);
    font-weight: 900;
    color: var(--text);
    line-height: 1.4;
}

/* Breadcrumb */


/* ===========================
   Featured Banner — image only
=========================== */
.featured-banner {
    position: relative;
    display: block;
    min-height: 220px;
    max-height: 280px;
    border-radius: var(--radius-2xl);
    background: var(--surface);
    overflow: hidden;
    margin-bottom: 36px;
    transition: transform var(--transition), box-shadow var(--transition);
}

    .featured-banner:hover {
        transform: translateY(-2px);
    }

    .featured-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 4px;
        pointer-events: none;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        background: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan));
        box-shadow: 0 0 28px var(--pink), 0 0 28px var(--cyan);
        z-index: 2;
    }

    .featured-banner::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0.4;
        box-shadow: inset 0 0 22px rgba(255, 85, 248, 0.1), inset 0 0 16px rgba(39, 231, 255, 0.06);
        z-index: 2;
    }

.featured-banner-image {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 220px;
    max-height: 280px;
}

    .featured-banner-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        background: #03070e;
    }

/* ===========================
   Ad Cards Grid — image only
=========================== */
.ads-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.ad-card {
    position: relative;
    display: block;
    min-height: 260px;
    border-radius: var(--radius-2xl);
    background: var(--surface);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

    .ad-card:hover {
        transform: translateY(-3px);
    }

    .ad-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 4px;
        pointer-events: none;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        z-index: 2;
    }

    .ad-card::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0.35;
        box-shadow: inset 0 0 18px rgba(39, 231, 255, 0.06);
        z-index: 2;
    }

    /* Card color borders */
    .ad-card.card-cyan::before {
        background: linear-gradient(135deg, var(--cyan), #42b7ff);
        box-shadow: 0 0 22px var(--cyan);
    }

    .ad-card.card-cyan:hover {
        box-shadow: 0 0 24px rgba(39, 231, 255, 0.4), inset 0 0 20px rgba(39, 231, 255, 0.06);
    }

    .ad-card.card-pink::before {
        background: linear-gradient(135deg, var(--pink), #b459ff);
        box-shadow: 0 0 22px var(--pink);
    }

    .ad-card.card-pink:hover {
        box-shadow: 0 0 24px rgba(255, 85, 248, 0.4), inset 0 0 20px rgba(255, 85, 248, 0.06);
    }

    .ad-card.card-red::before {
        background: linear-gradient(135deg, #f03c3c, #ff5555);
        box-shadow: 0 0 22px rgba(240, 60, 60, 0.55);
    }

    .ad-card.card-red:hover {
        box-shadow: 0 0 24px rgba(240, 60, 60, 0.4), inset 0 0 20px rgba(240, 60, 60, 0.06);
    }

    .ad-card.card-gold::before {
        background: linear-gradient(135deg, var(--gold), var(--orange), #c99d42);
        box-shadow: 0 0 22px rgba(231, 189, 98, 0.55);
    }

    .ad-card.card-gold:hover {
        box-shadow: 0 0 24px rgba(231, 189, 98, 0.4), inset 0 0 20px rgba(231, 189, 98, 0.06);
    }

    .ad-card.card-green::before {
        background: linear-gradient(135deg, var(--green), var(--green-soft), #339b67);
        box-shadow: 0 0 22px rgba(85, 201, 138, 0.45);
    }

    .ad-card.card-green:hover {
        box-shadow: 0 0 24px rgba(85, 201, 138, 0.4), inset 0 0 20px rgba(85, 201, 138, 0.06);
    }

    /* AdsBox duotone frame: solid pink on the top half, solid purple on the
       bottom half (hard color split, no blending). Applied to every AdsBox
       card (home, details pages, ...) via .ad-duotone. */
    .ad-card.ad-duotone::before {
        background: linear-gradient(180deg, var(--pink) 0 100%);
        box-shadow: 0 0 22px rgba(255, 85, 248, 0.45), 0 0 22px rgba(178, 80, 255, 0.35);
    }

    .ad-card.ad-duotone2::before {
        background: linear-gradient(180deg, var(--purple) 0% 100%);
        box-shadow: 0 0 22px rgba(255, 85, 248, 0.45), 0 0 22px rgba(178, 80, 255, 0.35);
    }

    .ad-card.ad-duotone::after {
        box-shadow: inset 0 14px 22px rgba(255, 85, 248, 0.10), inset 0 -14px 22px rgba(178, 80, 255, 0.12);
        opacity: 1;
    }

    .ad-card.ad-duotone:hover {
        box-shadow: 0 0 26px rgba(255, 85, 248, 0.4), 0 0 26px rgba(178, 80, 255, 0.32), inset 0 0 20px rgba(255, 85, 248, 0.05);
    }

/* Card Image — full cover */
.ad-card-image {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 260px;
}

    .ad-card-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        background: #03070e;
    }

/* AdsBox banners: both images render inside a fixed 16:9 frame, like the
   rest of the site's media. The source banners are ultra-wide (~3.5:1), so
   cover fills the frame (cropping the sides) instead of letterboxing.
   The min-heights further down would stretch the frame off-ratio on narrow
   columns, so they are reset within this component's scope. */
.ads-banners .ad-card,
.ads-banners .ad-card-image {
    min-height: 0;
}

.ads-banners .ad-card-image {
    height: auto;
    aspect-ratio: 16 / 9;
}

.ads-banners .ad-card-image img {
    object-fit: cover;
}

/* ===========================
   Footer
=========================== */
.footer {
    position: relative;
    margin-top: 64px;
    padding: 42px 34px 30px;
    border: 1px solid rgba(160, 225, 255, 0.2);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(10, 25, 44, 0.55), rgba(5, 11, 22, 0.5)), var(--bg);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 40px rgba(39, 231, 255, 0.035);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 42px;
    direction: ltr;
    overflow: hidden;
}

    .footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 8%;
        right: 8%;
        height: 2px;
        background: linear-gradient(90deg, var(--pink), var(--cyan), var(--purple));
        box-shadow: 0 0 14px var(--cyan), 0 0 24px var(--pink);
    }

    .footer > * {
        direction: rtl;
        position: relative;
        z-index: 1;
    }

.footer-trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.footer-trust-grid {
    width: 100%;
}

.license-combined {
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

    .license-combined::before, .license-combined::after {
        display: none;
    }

    .license-combined img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

.footer-license-copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    text-align: center;
}

/* Fixed Footer */
.fixed-footer {
    position: fixed;
    left: 50%;
    bottom: 14px;
    z-index: 25;
    width: min(var(--container), calc(100% - 32px));
    min-height: 62px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 20px;
    border: 1px solid rgba(160, 225, 255, 0.28);
    border-radius: 10px;
    background: rgba(5, 13, 27, 0.35);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34), 0 0 18px rgba(39, 231, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    direction: rtl;
}

.mobile-footer-nav {
    display: none;
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 1024px) {
    .page-shell {
        width: min(100% - 32px, var(--container));
    }

    .site-header {
        grid-template-columns: 230px 1fr 145px;
        grid-template-areas: "actions nav brand";
        gap: 14px;
        top: 10px;
        padding: 0px 16px;
    }

    .main-nav {
        gap: 26px;
        flex-wrap: wrap;
        font-size: 16px;
    }

    .brand {
        justify-self: end;
        width: 116px;
        height: 48px;
    }
}

@media (max-width: 768px) {
    .page-shell {
        width: min(100% - 24px, var(--container));
        padding-top: 104px;
    }

    .site-header {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "brand nav actions";
        gap: 10px;
        top: 8px;
        padding: 8px 12px;
        min-height: auto;
    }

    .header-actions {
        grid-area: actions;
        gap: 8px;
        justify-self: end;
    }

    .profile-btn {
        width: 38px;
        height: 38px;
    }

        .profile-btn svg {
            width: 22px;
            height: 22px;
        }

    .theme-toggle {
        display: none;
    }

    .header-document-icon {
        display: none;
    }

    .brand {
        grid-area: brand;
        width: 90px;
        height: 38px;
    }

    .main-nav {
        grid-area: nav;
        gap: 12px;
        font-size: 13px;
        font-weight: 600;
    }

        .main-nav a {
            padding: 6px 0;
        }

    .ads-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ad-card {
        min-height: 220px;
    }

    .ad-card-image {
        min-height: 220px;
    }

    .ads-page-header h1 {
        font-size: 28px;
    }
}

@media (max-width: 460px) {
    .featured-banner {
        min-height: 160px;
        max-height: 200px;
    }

    .featured-banner-image {
        min-height: 160px;
        max-height: 200px;
    }

    .ad-card {
        min-height: 180px;
    }

    .ad-card-image {
        min-height: 180px;
    }

    .main-nav {
        gap: 8px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================
   Migrated styles from detail.html
========================= */
/* ===========================
   Design Tokens (same as project)
=========================== */
:root {
    --bg: #03070e;
    --bg-soft: #060b15;
    --text: #ffffff;
    --muted: #c9d3de;
    --cyan: #27e7ff;
    --cyan-soft: rgba(39, 231, 255, 0.65);
    --pink: #ff55f8;
    --pink-soft: rgba(255, 85, 248, 0.65);
    --blue: #4d7cff;
    --green: #17d96f;
    --orange: #ff9d25;
    --purple: #b250ff;
    --milk: #f4ead8;
    --blue-soft: #6f9fe8;
    --green-soft: #55c98a;
    --orange-soft: #e9a05a;
    --gold: #e7bd62;
    --surface: rgba(4, 8, 18, 0.82);
    --surface-raised: rgba(5, 12, 24, 0.76);
    --surface-input: rgba(5, 11, 24, 0.8);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(25, 227, 223, 0.35);
    --radius-2xl: 12px;
    --radius-xl: 10px;
    --radius-lg: 22px;
    --radius-md: 8px;
    --radius-sm: 10px;
    --shadow-card: 0 18px 45px rgba(0, 0, 0, 0.22);
    --shadow-cyan: 0 0 28px rgba(25, 227, 223, 0.09);
    --transition: 180ms ease;
    --container: 1200px;
    --header-bg: linear-gradient(180deg, rgba(3, 7, 14, 0.68), rgba(8, 18, 34, 0.42) 58%, rgba(16, 32, 52, 0.22));
}

    :root.light-theme {
        --bg: #eaf5ff;
        --bg-soft: #d9ebfa;
        --text: #102033;
        --muted: #40566d;
        --surface: rgba(255, 255, 255, 0.78);
        --surface-raised: rgba(255, 255, 255, 0.88);
        --surface-input: rgba(255, 255, 255, 0.9);
        --header-bg: linear-gradient(180deg, rgba(240, 249, 255, 0.72), rgba(220, 239, 251, 0.5) 58%, rgba(205, 229, 246, 0.28));
    }

/* ===========================
   Reset & Base
=========================== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Vazirmatn", system-ui, sans-serif;
    color: var(--text);
    background: radial-gradient(circle at 20% 0%, rgba(39, 231, 255, 0.12), transparent 30%), radial-gradient(circle at 80% 10%, rgba(255, 85, 248, 0.12), transparent 34%), radial-gradient(circle at 50% 70%, rgba(77, 124, 255, 0.08), transparent 40%), var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

button {
    font-family: inherit;
}

    a:focus-visible,
    button:focus-visible {
        outline: 3px solid var(--cyan);
        outline-offset: 4px;
    }

/* ===========================
   Main Shell
=========================== */
.page-shell {
    width: min(var(--container), calc(100% - 56px));
    margin: 0 auto;
    padding: 40px 0 60px;
}

/* ===========================
   Header
=========================== */
.site-header {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 20;
    width: min(var(--container), calc(100% - 32px));
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 260px 1fr 170px;
    grid-template-areas: "actions nav brand";
    align-items: center;
    gap: 24px;
    min-height: 78px;
    padding: 12px 20px;
    margin: 0;
    border: 1px solid rgba(170, 231, 255, 0.26);
    border-radius: 10px;
    background: var(--header-bg);
    backdrop-filter: blur(2px) saturate(145%);
    -webkit-backdrop-filter: blur(2px) saturate(145%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: box-shadow 0.25s ease, top 0.25s ease;
    direction: ltr;
}

    .site-header::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%, rgba(87, 212, 255, .035));
    }

.header-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 14px;
    justify-self: start;
    direction: ltr;
}

.profile-btn {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 85, 248, 0.62);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(28, 22, 48, 0.92), rgba(7, 14, 27, 0.9));
    color: var(--cyan);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24), 0 0 12px rgba(255, 85, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: 0.25s ease;
}

    .profile-btn svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        filter: drop-shadow(0 0 4px var(--cyan));
    }

    .profile-btn:hover {
        border-color: var(--pink);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 0 16px rgba(255, 85, 248, 0.5), inset 0 0 18px rgba(255, 85, 248, 0.18);
    }

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border: 1px solid rgba(169, 225, 255, 0.16);
    border-radius: 8px;
    background: rgba(8, 16, 31, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.switch {
    width: 56px;
    height: 48px;
    display: grid;
    place-items: center;
    border: none;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.theme-switch-track {
    position: relative;
    display: block;
    width: 100%;
    height: 38px;
    overflow: hidden;
    border: 1px solid rgba(140, 180, 255, 0.42);
    border-radius: inherit;
    background: linear-gradient(135deg, #101a3a, #334a77);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.34), 0 0 12px rgba(83, 137, 255, 0.26);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.theme-switch-stars {
    position: absolute;
    top: 7px;
    left: 9px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 10px;
    line-height: 1;
    transition: opacity 0.25s ease;
}

.theme-switch-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #ffffff 0 18%, transparent 20%), linear-gradient(145deg, #e8f2ff, #92b7ff);
    box-shadow: 0 0 10px rgba(184, 211, 255, 0.9);
    transform: translateX(20px);
    transition: transform 0.32s cubic-bezier(.2, .8, .2, 1), background 0.3s ease, box-shadow 0.3s ease;
}

.switch.is-light .theme-switch-track {
    border-color: rgba(255, 191, 82, 0.58);
    background: linear-gradient(135deg, #ff9c5b, #ffd469);
    box-shadow: inset 0 0 10px rgba(255, 116, 57, 0.2), 0 0 12px rgba(255, 179, 80, 0.34);
}

.switch.is-light .theme-switch-thumb {
    transform: translateX(0);
    background: radial-gradient(circle at 36% 34%, #ffffff 0 18%, #fff7c9 20%, #ffcf55 68%);
    box-shadow: 0 0 12px rgba(255, 222, 105, 0.95);
}

.switch.is-light .theme-switch-stars {
    opacity: 0;
}

.main-nav {
    grid-area: nav;
    justify-self: center;
    direction: rtl;
    display: flex;
    align-items: center;
    gap: 66px;
    color: #f8fbff;
    font-size: 18px;
    font-weight: 500;
}

    .main-nav a {
        position: relative;
        padding: 8px 0;
        transition: color 0.25s ease;
    }

        .main-nav a::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--pink), var(--cyan));
            box-shadow: 0 0 10px var(--cyan);
            transition: width 0.25s ease;
        }

        .main-nav a:hover,
        .main-nav a.active {
            color: var(--cyan);
        }

            .main-nav a:hover::after,
            .main-nav a.active::after {
                width: 100%;
            }

.brand {
    grid-area: brand;
    display: block;
    justify-self: end;
    width: 128px;
    height: 54px;
    direction: ltr;
}

    .brand img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: transparent;
    }

.header-document-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #f8fdff;
    border: 1px solid rgba(180, 235, 255, 0.38);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(30, 54, 80, 0.9), rgba(6, 15, 29, 0.94));
    box-shadow: 0 0 13px rgba(118, 216, 255, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

    .header-document-icon svg {
        width: 29px;
        height: 29px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.65;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 0 5px rgba(220, 248, 255, 0.9));
    }

    .header-document-icon:hover {
        color: #fff;
        border-color: rgba(208, 245, 255, 0.8);
        box-shadow: 0 0 18px rgba(118, 216, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.26);
    }

.theme-toggle > .theme-symbol {
    display: none;
}

.theme-toggle {
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.theme-switch-stars {
    top: 6px;
    left: 8px;
    z-index: 1;
    font-size: 0;
}

    .theme-switch-stars::before {
        content: "✦";
        color: rgba(255, 255, 255, 0.9);
        font-size: 16px;
        line-height: 1;
    }

.theme-switch-track::after {
    content: "☀";
    position: absolute;
    top: 5px;
    right: 7px;
    color: rgba(255, 239, 173, 0.95);
    font-size: 15px;
    line-height: 1;
    text-shadow: 0 0 6px rgba(255, 213, 90, 0.75);
}

:root.light-theme .theme-switch,
:root.light-theme .theme-switch.is-light {
    border-color: rgba(8, 125, 158, 0.38);
    background: linear-gradient(145deg, #ffffff, #e7f6ff);
    color: #e19a19;
    box-shadow: 0 7px 16px rgba(54, 106, 145, 0.14), 0 0 12px rgba(39, 172, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* ===========================
   Neon Frame
=========================== */
.neon-frame {
    position: relative;
    border-radius: var(--radius-2xl);
    background: var(--surface);
    overflow: hidden;
}

    .neon-frame::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 4px;
        pointer-events: none;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .neon-frame::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0.55;
        box-shadow: inset 0 0 18px rgba(39, 231, 255, 0.08), inset 0 0 12px rgba(255, 85, 248, 0.05);
    }

.neon-cyan::before {
    background: linear-gradient(90deg, var(--cyan), #42b7ff);
    box-shadow: 0 0 24px var(--cyan);
}

.neon-cyan {
    box-shadow: 0 0 16px rgba(39, 231, 255, 0.6), inset 0 0 22px rgba(39, 231, 255, 0.08);
}

/* ===========================
   Sections
=========================== */
.section-block {
    margin: 0 0 48px;
}

/* ===========================
   Breadcrumb
=========================== */
.breadcrumb {
    margin-bottom: 10px;
}

    .breadcrumb ol {
        display: flex;
        align-items: center;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 14px;
        color: var(--muted);
        direction: rtl;
    }

    .breadcrumb li + li::before {
        content: "‹";
        margin-left: 8px;
        color: rgba(255, 255, 255, 0.3);
    }

    .breadcrumb a {
        color: var(--muted);
        transition: color 0.2s;
    }

        .breadcrumb a:hover {
            color: var(--cyan);
        }

    .breadcrumb [aria-current="page"] {
        color: var(--text);
        font-weight: 600;
    }

/* ===========================
   Video Preview Section
=========================== */
.detail-video-section {
    position: relative;
    border-radius: var(--radius-2xl);
    background: var(--surface);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .detail-video-section::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 4px;
        pointer-events: none;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        background: linear-gradient(90deg, var(--cyan), var(--pink));
        box-shadow: 0 0 28px var(--cyan), 0 0 28px var(--pink);
        z-index: 2;
    }

    .detail-video-section::after {
        content: "";
        position: absolute;
        inset: 4px;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0.4;
        box-shadow: inset 0 0 24px rgba(39, 231, 255, 0.12), inset 0 0 16px rgba(255, 85, 248, 0.08);
        z-index: 2;
    }

.detail-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    z-index: 1;
}

.detail-video-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: calc(var(--radius-2xl) - 4px);
}

/* Software detail intro follows the preview image height and sits flush above the tip. */
.software-detail-intro {
    min-height: 0;
    margin-bottom: 0;
}

.software-detail-page .detail-video-tip {
}

.software-detail-intro .detail-video-wrapper {
    min-height: 0;
    max-width: 520px;
}

.software-detail-intro .detail-video-preview {
    height: 100%;
    min-height: 0;
    max-width: none;
    width: 100%;
}

/* Play Button Overlay */
.detail-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 88px;
    height: 88px;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.4), 0 0 40px rgba(39, 231, 255, 0.2), inset 0 0 18px rgba(255, 255, 255, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .detail-play-btn svg {
        width: 32px;
        height: 32px;
        fill: #ffffff;
        stroke: none;
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
    }

    .detail-play-btn:hover {
        transform: translate(-50%, -50%) scale(1.08);
        border-color: var(--cyan);
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), 0 0 50px rgba(39, 231, 255, 0.35), inset 0 0 20px rgba(255, 255, 255, 0.1);
    }

    .detail-play-btn:focus-visible {
        outline: 3px solid var(--cyan);
        outline-offset: 6px;
    }

.ads-page-content .detail-video-wrapper .ads-intro-video-player {
    display: none;
}

.ads-page-content .detail-video-wrapper.is-playing .ads-intro-video-player {
    display: block;
}

@media (max-width: 768px) {
    .ads-page-content .detail-video-wrapper .ads-intro-video-player {
        display: block;
    }

    .ads-page-content .detail-video-wrapper [data-intro-video-poster],
    .ads-page-content .detail-video-wrapper [data-play-intro-video] {
        display: none;
    }
}

/* Video Tip Notice */
.detail-video-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    padding: 6px 0;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: calc(var(--radius-2xl));
    text-align: center;
    margin: 6px 0 6px 0;
}

.detail-video-tip-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange), var(--gold));
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 0 14px rgba(255, 157, 37, 0.4);
}

    .detail-video-tip-icon svg {
        width: 18px;
        height: 18px;
        fill: #ffffff;
        stroke: none;
    }

.detail-video-tip p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--gold);
    line-height: 1.8;
}

:root.light-theme .detail-video-tip {
    border-color: rgba(255, 157, 37, 0.35);
    background: rgba(255, 157, 37, 0.08);
}

    :root.light-theme .detail-video-tip p {
        color: #b25e00;
    }

/* ===========================
   Software Info Section
=========================== */
.detail-info-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: stretch;
    margin-top: 10px;
    padding: 24px;
    overflow: hidden;
}

/* Software Preview Card (left) */
.detail-preview-card {
    position: relative;
    border-radius: var(--radius-2xl);
    background: var(--surface);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
}

    .detail-preview-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 2px;
        pointer-events: none;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        background: linear-gradient(135deg, var(--cyan), var(--pink));
        box-shadow: 0 0 24px var(--cyan), 0 0 24px var(--pink);
        z-index: 2;
    }

    .detail-preview-card::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0.45;
        box-shadow: inset 0 0 20px rgba(39, 231, 255, 0.1), inset 0 0 14px rgba(255, 85, 248, 0.06);
        z-index: 2;
    }

.detail-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius-2xl) - 2px);
    position: relative;
    z-index: 1;
}

/* Software Info Panel (right) */
.detail-info-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 0;
}

.detail-info-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 32px;
}

.detail-info-title-line {
    width: 5px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--cyan), var(--pink));
    box-shadow: 0 0 12px var(--cyan), 0 0 12px var(--pink);
    flex-shrink: 0;
}

.detail-info-title h1 {
    margin: 0;
    font-size: clamp(24px, 3.5vw, 34px);
    font-weight: 900;
    color: var(--text);
    line-height: 1.5;
}

.detail-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.detail-info-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--muted);
    font-weight: 500;
}

.detail-info-label-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(39, 231, 255, 0.08);
    border: 1px solid rgba(39, 231, 255, 0.2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(39, 231, 255, 0.15);
}

    .detail-info-label-icon svg {
        width: 20px;
        height: 20px;
        color: var(--cyan);
    }

.detail-info-value {
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
}

    .detail-info-value.price {
        color: var(--gold);
        text-shadow: 0 0 14px rgba(231, 189, 98, 0.35);
    }

    .detail-info-value.version {
        color: var(--cyan);
        text-shadow: 0 0 14px rgba(39, 231, 255, 0.35);
    }

/* Features List */
.detail-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 36px;
    padding: 0;
    list-style: none;
}

    .detail-features li {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
        line-height: 1.6;
    }

        .detail-features li::before {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--green);
            box-shadow: 0 0 8px rgba(23, 217, 111, 0.5);
            flex-shrink: 0;
        }

/* Download Button */
.detail-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 0 24px;
    border: 3px solid var(--green);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(23, 217, 111, 0.15), rgba(39, 231, 255, 0.1));
    color: var(--green);
    font-size: 18px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(23, 217, 111, 0.35), inset 0 0 16px rgba(23, 217, 111, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    text-decoration: none;
}

    .detail-download-btn svg {
        width: 24px;
        height: 24px;
        color: var(--green);
    }

    .detail-download-btn:hover {
        transform: translateY(-3px);
        border-color: #4dff97;
        box-shadow: 0 0 26px rgba(23, 217, 111, 0.55), 0 0 40px rgba(39, 231, 255, 0.2), inset 0 0 20px rgba(23, 217, 111, 0.12);
        background: linear-gradient(135deg, rgba(23, 217, 111, 0.25), rgba(39, 231, 255, 0.18));
    }

    .detail-download-btn:focus-visible {
        outline: 3px solid var(--cyan);
        outline-offset: 4px;
    }

/* Back Button */
.detail-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: min(420px, 100%);
    margin: 16px auto 0;
    min-height: 56px;
    padding: 0 24px;
    border: 3px solid #ff3d4d;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 61, 77, 0.15), rgba(255, 106, 61, 0.1));
    color: #ff6c76;
    font-size: 18px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(255, 61, 77, 0.3), inset 0 0 16px rgba(255, 61, 77, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    text-decoration: none;
}

    .detail-back-btn svg {
        width: 24px;
        height: 24px;
        color: #ff6c76;
    }

    .detail-back-btn:hover {
        transform: translateY(-3px);
        border-color: #ff6c76;
        box-shadow: 0 0 26px rgba(255, 61, 77, 0.5), 0 0 40px rgba(255, 106, 61, 0.2), inset 0 0 20px rgba(255, 61, 77, 0.12);
        background: linear-gradient(135deg, rgba(255, 61, 77, 0.25), rgba(255, 106, 61, 0.18));
    }

    .detail-back-btn:focus-visible {
        outline: 3px solid #ff3d4d;
        outline-offset: 4px;
    }

/* ===========================
   Footer
=========================== */
.footer {
    position: relative;
    margin-top: 64px;
    padding: 42px 34px 30px;
    border: 1px solid rgba(160, 225, 255, 0.2);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(10, 25, 44, 0.55), rgba(5, 11, 22, 0.5)), var(--bg);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 40px rgba(39, 231, 255, 0.035);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 42px;
    direction: ltr;
    overflow: hidden;
}

    .footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 8%;
        right: 8%;
        height: 2px;
        background: linear-gradient(90deg, var(--pink), var(--cyan), var(--purple));
        box-shadow: 0 0 14px var(--cyan), 0 0 24px var(--pink);
    }

    .footer > * {
        direction: rtl;
        position: relative;
        z-index: 1;
    }

.footer-trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.footer-trust-grid {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
}

.license-combined {
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

    .license-combined::before,
    .license-combined::after {
        display: none;
    }

    .license-combined img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

.footer-license-copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    text-align: center;
}

/* Fixed Footer */
.fixed-footer {
    position: fixed;
    left: 50%;
    bottom: 14px;
    z-index: 25;
    width: min(var(--container), calc(100% - 32px));
    min-height: 62px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 20px;
    border: 1px solid rgba(160, 225, 255, 0.28);
    border-radius: 10px;
    background: rgba(5, 13, 27, 0.35);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34), 0 0 18px rgba(39, 231, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    direction: rtl;
}

.mobile-footer-nav {
    display: none;
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 1024px) {
    .page-shell {
        width: min(100% - 32px, var(--container));
    }

    .site-header {
        grid-template-columns: 230px 1fr 145px;
        grid-template-areas: "actions nav brand";
        gap: 14px;
        top: 10px;
        padding: 0px 16px;
    }

    .header-actions {
        justify-self: start;
    }

    .brand {
        justify-self: end;
        width: 116px;
        height: 48px;
    }

    .main-nav {
        gap: 26px;
        flex-wrap: wrap;
        font-size: 16px;
    }

    .detail-info-section {
        gap: 28px;
    }

    .detail-video-wrapper {
        aspect-ratio: 16/9;
        min-height: 0;
    }

    .detail-video-preview {
        height: 100%;
    }
}

@media (max-width: 768px) {
    .page-shell {
        width: min(100% - 24px, var(--container));
        padding-top: 104px;
    }

    .site-header {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "brand nav actions";
        gap: 10px;
        top: 8px;
        padding: 8px 12px;
        min-height: auto;
    }

    .header-actions {
        grid-area: actions;
        gap: 8px;
        justify-self: end;
    }

    .profile-btn {
        width: 38px;
        height: 38px;
    }

        .profile-btn svg {
            width: 22px;
            height: 22px;
        }

    .theme-toggle {
        display: none;
    }

    .header-document-icon {
        display: none;
    }

    .brand {
        grid-area: brand;
        width: 90px;
        height: 38px;
    }

    .main-nav {
        grid-area: nav;
        gap: 12px;
        font-size: 13px;
        font-weight: 600;
    }

        .main-nav a {
            padding: 6px 0;
        }

    /* Mobile: stack vertically */
    .detail-info-section {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .detail-video-wrapper {
        aspect-ratio: 16/9;
        min-height: 0;
    }

    .detail-video-preview {
        height: 100%;
    }

    .detail-play-btn {
        width: 70px;
        height: 70px;
    }

        .detail-play-btn svg {
            width: 26px;
            height: 26px;
        }

    .detail-preview-card {
        min-height: 180px;
    }

    .detail-info-title h1 {
        font-size: 24px;
    }

    .detail-info-value {
        font-size: 17px;
    }

    .detail-features li {
        font-size: 14px;
    }

    .detail-video-tip p {
        font-size: 14px;
    }

    .detail-download-btn {
        min-height: 48px;
        font-size: 16px;
    }

    .detail-back-btn {
        min-height: 48px;
        font-size: 16px;
    }
}

@media (max-width: 460px) {
    .detail-video-wrapper {
        aspect-ratio: 16/9;
        min-height: 0;
    }

    .detail-video-preview {
        height: 100%;
    }

    .detail-play-btn {
        width: 60px;
        height: 60px;
    }

        .detail-play-btn svg {
            width: 22px;
            height: 22px;
        }

    .detail-info-title h1 {
        font-size: 20px;
    }

    .detail-info-title-line {
        height: 32px;
    }

    .detail-info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .detail-info-value {
        font-size: 16px;
    }

    .detail-features li {
        font-size: 13px;
    }

    .main-nav {
        gap: 8px;
        font-size: 12px;
    }

    .slogan h2 {
        font-size: 22px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================
   Migrated styles from software.html
========================= */
:root {
    --bg: #03070e;
    --bg-soft: #060b15;
    --text: #ffffff;
    --muted: #c9d3de;
    --cyan: #27e7ff;
    --cyan-soft: rgba(39, 231, 255, 0.65);
    --pink: #ff55f8;
    --pink-soft: rgba(255, 85, 248, 0.65);
    --blue: #4d7cff;
    --green: #17d96f;
    --orange: #ff9d25;
    --purple: #b250ff;
    --milk: #f4ead8;
    --blue-soft: #6f9fe8;
    --green-soft: #55c98a;
    --orange-soft: #e9a05a;
    --gold: #e7bd62;
    --surface: rgba(4, 8, 18, 0.82);
    --surface-raised: rgba(5, 12, 24, 0.76);
    --surface-input: rgba(5, 11, 24, 0.8);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(25, 227, 223, 0.35);
    --muted-light: #b8becc;
    --radius-2xl: 12px;
    --radius-xl: 10px;
    --radius-lg: 22px;
    --radius-md: 8px;
    --radius-sm: 10px;
    --shadow-card: 0 18px 45px rgba(0, 0, 0, 0.22);
    --shadow-cyan: 0 0 28px rgba(25, 227, 223, 0.09);
    --transition: 180ms ease;
    --container: 1200px;
    --header-bg: linear-gradient(180deg, rgba(3, 7, 14, 0.68), rgba(8, 18, 34, 0.42) 58%, rgba(16, 32, 52, 0.22));
}

    :root.light-theme {
        --bg: #eaf5ff;
        --bg-soft: #d9ebfa;
        --text: #102033;
        --muted: #40566d;
        --surface: rgba(255, 255, 255, 0.78);
        --surface-raised: rgba(255, 255, 255, 0.88);
        --surface-input: rgba(255, 255, 255, 0.9);
        --header-bg: linear-gradient(180deg, rgba(240, 249, 255, 0.72), rgba(220, 239, 251, 0.5) 58%, rgba(205, 229, 246, 0.28));
    }

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Vazirmatn", system-ui, sans-serif;
    color: var(--text);
    background: radial-gradient(circle at 20% 0%, rgba(39, 231, 255, 0.12), transparent 30%), radial-gradient(circle at 80% 10%, rgba(255, 85, 248, 0.12), transparent 34%), radial-gradient(circle at 50% 70%, rgba(77, 124, 255, 0.08), transparent 40%), var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

button {
    font-family: inherit;
}

    a:focus-visible,
    button:focus-visible {
        outline: 3px solid var(--cyan);
        outline-offset: 4px;
    }

/* =========================
   Main Shell
========================= */

.page-shell {
    width: min(var(--container), calc(100% - 56px));
    margin: 0 auto;
    padding: 138px 0 110px;
}

/* =========================
   Header
========================= */

.site-header {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 20;
    width: min(var(--container), calc(100% - 32px));
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 260px 1fr 170px;
    grid-template-areas: "actions nav brand";
    align-items: center;
    gap: 24px;
    min-height: 78px;
    padding: 12px 20px;
    margin: 0;
    border: 1px solid rgba(170, 231, 255, 0.26);
    border-radius: 10px;
    background: var(--header-bg);
    backdrop-filter: blur(2px) saturate(145%);
    -webkit-backdrop-filter: blur(2px) saturate(145%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: box-shadow 0.25s ease, top 0.25s ease;
    direction: ltr;
}

    .site-header::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 3px;
        border-radius: 0 0 10px 10px;
        background: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan));
        pointer-events: none;
        z-index: 1;
        display: none;
    }

    .site-header::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%, rgba(87, 212, 255, .035));
    }

.header-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 14px;
    justify-self: start;
    direction: ltr;
}

.profile-btn {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 85, 248, 0.62);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(28, 22, 48, 0.92), rgba(7, 14, 27, 0.9));
    color: var(--cyan);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24), 0 0 12px rgba(255, 85, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: 0.25s ease;
}

    .profile-btn svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        filter: drop-shadow(0 0 4px var(--cyan));
    }

    .profile-btn:hover {
        border-color: var(--pink);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 0 16px rgba(255, 85, 248, 0.5), inset 0 0 18px rgba(255, 85, 248, 0.18);
    }

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border: 1px solid rgba(169, 225, 255, 0.16);
    border-radius: 8px;
    background: rgba(8, 16, 31, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.theme-symbol {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    transition: color 0.3s ease, background 0.3s ease, opacity 0.3s ease;
}

    .theme-symbol svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .theme-symbol.sun {
        color: rgba(255, 220, 118, 0.48);
    }

    .theme-symbol.moon {
        color: #cfe2ff;
        background: rgba(106, 142, 255, 0.12);
        filter: drop-shadow(0 0 6px rgba(152, 181, 255, 0.55));
    }

.switch {
    width: 56px;
    height: 48px;
    display: grid;
    place-items: center;
    border: none;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.theme-switch-track {
    position: relative;
    display: block;
    width: 100%;
    height: 38px;
    overflow: hidden;
    border: 1px solid rgba(140, 180, 255, 0.42);
    border-radius: inherit;
    background: linear-gradient(135deg, #101a3a, #334a77);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.34), 0 0 12px rgba(83, 137, 255, 0.26);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.theme-switch-stars {
    position: absolute;
    top: 7px;
    left: 9px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 10px;
    line-height: 1;
    transition: opacity 0.25s ease;
}

.theme-switch-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #ffffff 0 18%, transparent 20%), linear-gradient(145deg, #e8f2ff, #92b7ff);
    box-shadow: 0 0 10px rgba(184, 211, 255, 0.9);
    transform: translateX(20px);
    transition: transform 0.32s cubic-bezier(.2, .8, .2, 1), background 0.3s ease, box-shadow 0.3s ease;
}

.switch.is-light {
    background: transparent;
    box-shadow: none;
}

    .switch.is-light .theme-switch-track {
        border-color: rgba(255, 191, 82, 0.58);
        background: linear-gradient(135deg, #ff9c5b, #ffd469);
        box-shadow: inset 0 0 10px rgba(255, 116, 57, 0.2), 0 0 12px rgba(255, 179, 80, 0.34);
    }

    .switch.is-light .theme-switch-thumb {
        transform: translateX(0);
        background: radial-gradient(circle at 36% 34%, #ffffff 0 18%, #fff7c9 20%, #ffcf55 68%);
        box-shadow: 0 0 12px rgba(255, 222, 105, 0.95);
    }

    .switch.is-light .theme-switch-stars {
        opacity: 0;
    }

:root.light-theme .theme-symbol.sun {
    color: #ffb52e;
    background: rgba(255, 190, 70, 0.13);
    filter: drop-shadow(0 0 6px rgba(255, 181, 46, 0.5));
}

:root.light-theme .theme-symbol.moon {
    color: rgba(69, 90, 145, 0.42);
    background: transparent;
    filter: none;
}

.main-nav {
    grid-area: nav;
    justify-self: center;
    direction: rtl;
    display: flex;
    align-items: center;
    gap: 66px;
    color: #f8fbff;
    font-size: 18px;
    font-weight: 500;
}

    .main-nav a {
        position: relative;
        padding: 8px 0;
        transition: color 0.25s ease;
    }

        .main-nav a::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--pink), var(--cyan));
            box-shadow: 0 0 10px var(--cyan);
            transition: width 0.25s ease;
        }

        .main-nav a:hover,
        .main-nav a.active {
            color: var(--cyan);
        }

            .main-nav a:hover::after,
            .main-nav a.active::after {
                width: 100%;
            }

.brand,
.footer-logo {
    display: block;
    justify-self: end;
    width: 128px;
    height: 54px;
}

    .brand img,
    .footer-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: transparent;
    }

.brand {
    grid-area: brand;
    direction: ltr;
}

.header-document-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #f8fdff;
    border: 1px solid rgba(180, 235, 255, 0.38);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(30, 54, 80, 0.9), rgba(6, 15, 29, 0.94));
    box-shadow: 0 0 13px rgba(118, 216, 255, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

    .header-document-icon svg {
        width: 29px;
        height: 29px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.65;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 0 5px rgba(220, 248, 255, 0.9));
    }

    .header-document-icon:hover {
        color: #fff;
        border-color: rgba(208, 245, 255, 0.8);
        box-shadow: 0 0 18px rgba(118, 216, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.26);
    }

/* =========================
   Neon Utilities
========================= */

.neon-frame {
    position: relative;
    border-radius: var(--radius-2xl);
    background: var(--surface);
    overflow: hidden;
}

    .neon-frame::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 5px;
        pointer-events: none;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .neon-frame::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0.55;
        box-shadow: inset 0 0 18px rgba(39, 231, 255, 0.08), inset 0 0 12px rgba(255, 85, 248, 0.05);
    }

/* =========================
   Sections
========================= */

.section-block {
    margin: 0 0 10px;
}

/* =========================
   Breadcrumb
========================= */

.breadcrumb {
    margin-bottom: 10px;
}

    .breadcrumb ol {
        display: flex;
        align-items: center;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 14px;
        color: var(--muted);
        direction: rtl;
    }

    .breadcrumb li + li::before {
        content: ">";
        margin-left: 8px;
        color: rgba(255, 255, 255, 0.3);
    }

    .breadcrumb a {
        color: var(--muted);
        transition: color 0.2s;
    }

        .breadcrumb a:hover {
            color: var(--cyan);
        }

    .breadcrumb [aria-current="page"] {
        color: var(--text);
        font-weight: 600;
    }

/* =========================
   Page Header
========================= */

.sw-page-header {
    text-align: center;
    margin-bottom: 48px;
}

    .sw-page-header h1 {
        margin: 0 0 14px;
        font-size: clamp(30px, 4.5vw, 48px);
        font-weight: 900;
        color: var(--text);
    }

    .sw-page-header p {
        margin: 0;
        font-size: 17px;
        color: var(--muted);
        max-width: 620px;
        margin-inline: auto;
        line-height: 1.7;
    }

/* =========================
   Software List
========================= */

.software-list {
    display: flex;
    flex-direction: column;
    gap: 44px;
}

/* =========================
   Software Card - Desktop
   Layout: [Logo (right)] [Content (middle)] [Action (center)] [Image (left)]
========================= */

.software-card {
    display: grid;
    overflow: hidden;
    grid-template-columns: 160px minmax(0, 1fr) 240px 280px;
    align-items: stretch;
    gap: 0;
    min-height: 205px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient( 120deg, rgba(255, 255, 255, 0.02), transparent 50% ), var(--surface);
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

    .software-card:hover {
        border-color: rgba(25, 227, 223, 0.28);
        box-shadow: var(--shadow-card), var(--shadow-cyan);
        transform: translateY(-2px);
    }

.featured-card {
    border-color: rgba(25, 227, 223, 0.3);
}

/* =========================
   Software Logo Column
========================= */

.software-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-width: 160px;
}

    .software-logo img {
        width: 110px;
        height: 110px;
        object-fit: contain;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
        transition: transform 0.3s ease;
    }

.software-card:hover .software-logo img {
    transform: scale(1.05);
}

/* Card Color Variants */
.card-gold {
    border: 2px solid rgba(231, 189, 98, 0.7);
    --fade: #b8921a;
    background: linear-gradient(180deg, #f5c400, #c58f00);
    box-shadow: 0 0 26px rgba(255, 210, 35, 0.5), 0 0 54px rgba(255, 190, 0, 0.25), inset 0 0 28px rgba(255, 220, 80, 0.12);
}

    .card-gold .software-image {
        background-image: url('assets/software/mahak-bg.webp');
    }

    .card-gold:hover {
        border-color: rgba(231, 189, 98, 0.7);
        box-shadow: 0 0 30px rgba(231, 189, 98, 0.25), inset 0 0 40px rgba(231, 189, 98, 0.05);
    }

    .card-gold .software-category {
        color: #e7bd62;
    }

    .card-gold .featured-badge {
        border-color: rgba(231, 189, 98, 0.35);
        background: rgba(231, 189, 98, 0.1);
        color: #e7bd62;
    }

.card-orange {
    border: 2px solid rgba(255, 140, 50, 0.7);
    --fade: #b85a12;
    background: linear-gradient(180deg, #f47b20, #c4510b);
    box-shadow: 0 0 26px rgba(255, 140, 50, 0.5), 0 0 54px rgba(255, 110, 20, 0.25), inset 0 0 28px rgba(255, 170, 70, 0.12);
}

    .card-orange .software-image {
        background-image: url('assets/software/holoo-bg.webp');
    }

    .card-orange:hover {
        border-color: rgba(255, 140, 50, 0.7);
        box-shadow: 0 0 30px rgba(255, 140, 50, 0.25), inset 0 0 40px rgba(255, 140, 50, 0.05);
    }

    .card-orange .software-category {
        color: #ff8c32;
    }

    .card-orange .featured-badge {
        border-color: rgba(255, 140, 50, 0.35);
        background: rgba(255, 140, 50, 0.1);
        color: #ff8c32;
    }

.card-green {
    border: 2px solid rgba(50, 210, 120, 0.7);
    --fade: #167a48;
    background: linear-gradient(180deg, #1a8e52, #127040);
    box-shadow: 0 0 26px rgba(50, 210, 120, 0.5), 0 0 54px rgba(50, 210, 120, 0.25), inset 0 0 28px rgba(50, 210, 120, 0.12);
}

    .card-green .software-image {
        background-image: url('assets/software/sepidar-bg.webp');
    }

    .card-green:hover {
        border-color: rgba(50, 210, 120, 0.7);
        box-shadow: 0 0 30px rgba(50, 210, 120, 0.25), inset 0 0 40px rgba(50, 210, 120, 0.05);
    }

    .card-green .software-category {
        color: #32d278;
    }

    .card-green .featured-badge {
        border-color: rgba(50, 210, 120, 0.35);
        background: rgba(50, 210, 120, 0.1);
        color: #32d278;
    }

.card-red {
    border: 2px solid rgba(240, 60, 60, 0.7);
    --fade: #8c1e28;
    background: linear-gradient(180deg, #a02530, #881a24);
    box-shadow: 0 0 26px rgba(240, 60, 60, 0.5), 0 0 54px rgba(240, 60, 60, 0.25), inset 0 0 28px rgba(240, 60, 60, 0.12);
}

    .card-red .software-image {
        background-image: url('assets/software/orash.webp');
    }

    .card-red:hover {
        border-color: rgba(240, 60, 60, 0.7);
        box-shadow: 0 0 30px rgba(240, 60, 60, 0.25), inset 0 0 40px rgba(240, 60, 60, 0.05);
    }

    .card-red .software-category {
        color: #f03c3c;
    }

    .card-red .featured-badge {
        border-color: rgba(240, 60, 60, 0.35);
        background: rgba(240, 60, 60, 0.1);
        color: #f03c3c;
    }

/* Keep the glow intensity consistent across all five software cards. */
.software-card.card-blue:hover {
    box-shadow: 0 0 30px rgba(42, 164, 255, .55), 0 0 60px rgba(42, 164, 255, .28), inset 0 0 32px rgba(91, 203, 255, .14);
}

.software-card.card-gold:hover {
    box-shadow: 0 0 30px rgba(255, 210, 35, .55), 0 0 60px rgba(255, 190, 0, .28), inset 0 0 32px rgba(255, 220, 80, .14);
}

.software-card.card-orange:hover {
    box-shadow: 0 0 30px rgba(255, 140, 50, .55), 0 0 60px rgba(255, 110, 20, .28), inset 0 0 32px rgba(255, 170, 70, .14);
}

.software-card.card-green:hover {
    box-shadow: 0 0 30px rgba(50, 210, 120, .55), 0 0 60px rgba(50, 210, 120, .28), inset 0 0 32px rgba(50, 210, 120, .14);
}

.software-card.card-red:hover {
    box-shadow: 0 0 30px rgba(240, 60, 60, .55), 0 0 60px rgba(240, 60, 60, .28), inset 0 0 32px rgba(240, 60, 60, .14);
}

/* Card Button Colors */
.card-gold .view-button {
    border-color: #e0b34f;
    background: rgba(231, 189, 98, 0.25);
    box-shadow: 0 0 12px rgba(231, 189, 98, 0.55), inset 0 0 14px rgba(231, 189, 98, 0.25);
}

    .card-gold .view-button:hover {
        border-color: #c99d42;
        box-shadow: 0 0 18px rgba(231, 189, 98, 0.8), inset 0 0 18px rgba(231, 189, 98, 0.35);
    }

.card-orange .view-button {
    border-color: #e8811f;
    background: rgba(255, 140, 50, 0.25);
    box-shadow: 0 0 12px rgba(255, 140, 50, 0.55), inset 0 0 14px rgba(255, 140, 50, 0.25);
}

    .card-orange .view-button:hover {
        border-color: #cf6f10;
        box-shadow: 0 0 18px rgba(255, 140, 50, 0.8), inset 0 0 18px rgba(255, 140, 50, 0.35);
    }

.card-green .view-button {
    border-color: #27b569;
    background: rgba(50, 210, 120, 0.25);
    box-shadow: 0 0 12px rgba(50, 210, 120, 0.55), inset 0 0 14px rgba(50, 210, 120, 0.25);
}

    .card-green .view-button:hover {
        border-color: #1d9a56;
        box-shadow: 0 0 18px rgba(50, 210, 120, 0.8), inset 0 0 18px rgba(50, 210, 120, 0.35);
    }

.card-red .view-button {
    border-color: #e0454f;
    background: rgba(240, 60, 60, 0.25);
    box-shadow: 0 0 12px rgba(240, 60, 60, 0.55), inset 0 0 14px rgba(240, 60, 60, 0.25);
}

    .card-red .view-button:hover {
        border-color: #c72f39;
        box-shadow: 0 0 18px rgba(240, 60, 60, 0.8), inset 0 0 18px rgba(240, 60, 60, 0.35);
    }

/* White text inside cards */
.software-card .software-heading h2 {
    color: #ffffff;
}

.software-card .software-description {
    color: rgba(255, 255, 255, 0.88);
}

.software-card .software-meta {
    color: rgba(255, 255, 255, 0.82);
}

.card-gold .software-meta svg {
    color: #e7bd62;
}

.card-orange .software-meta svg {
    color: #ff8c32;
}

.card-green .software-meta svg {
    color: #32d278;
}

.card-red .software-meta svg {
    color: #f03c3c;
}

/* Image Column */
.software-image {
    min-height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

    .software-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, transparent 40%, var(--fade, var(--surface)) 100%);
        pointer-events: none;
    }

/* Content */
.software-content {
    min-width: 0;
    padding: 24px;
}

/* Action Column */
.software-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.software-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.software-category {
    display: block;
    margin-bottom: 5px;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 600;
}

.software-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
}

.featured-badge {
    flex-shrink: 0;
    padding: 5px 10px;
    border: 1px solid rgba(250, 79, 155, 0.25);
    border-radius: 7px;
    background: var(--pink-soft);
    color: #ff86b9;
    font-size: 10px;
    white-space: nowrap;
}

.software-description {
    max-width: 620px;
    margin: 10px 0 16px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
}

.software-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: var(--muted-light);
    font-size: 11px;
}

    .software-meta span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .software-meta svg {
        width: 16px;
        height: 16px;
        color: var(--cyan);
    }

/* Design-system button */
.view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 150px;
    min-height: 42px;
    padding: 0 15px;
    white-space: nowrap;
    border: 3px solid var(--pink);
    border-radius: 8px;
    background: rgba(11, 13, 29, 0.8);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(255, 85, 248, 0.72), inset 0 0 16px rgba(77, 124, 255, 0.25);
    transition: 0.25s ease;
}

    .view-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 18px rgba(255, 85, 248, 0.95), 0 0 22px rgba(39, 231, 255, 0.3), inset 0 0 20px rgba(77, 124, 255, 0.35);
    }

    .view-button svg {
        width: 22px;
        height: 22px;
        color: #ffffff;
    }

/* =========================
   Footer
========================= */

.footer {
    position: relative;
    margin-top: 20px;
    padding: 42px 34px 30px;
    border: 1px solid rgba(160, 225, 255, 0.2);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(10, 25, 44, 0.55), rgba(5, 11, 22, 0.5)), var(--bg);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 40px rgba(39, 231, 255, 0.035);
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 42px;
    direction: ltr;
    overflow: hidden;
}

    .footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 8%;
        right: 8%;
        height: 2px;
        background: linear-gradient(90deg, var(--pink), var(--cyan), var(--purple));
        box-shadow: 0 0 14px var(--cyan), 0 0 24px var(--pink);
    }

    .footer > * {
        direction: rtl;
        position: relative;
        z-index: 1;
    }

.footer-trust {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-trust-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.license-combined {
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

    .license-combined::before,
    .license-combined::after {
        display: none;
    }

    .license-combined img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

.license-card {
    min-height: 122px;
    display: grid;
    place-items: center;
    padding: 10px;
    border-radius: 14px;
    border: 0;
}

.footer-license-copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    text-align: center;
}

/* =========================
   Fixed Footer
========================= */

.fixed-footer {
    position: fixed;
    left: 50%;
    bottom: 14px;
    z-index: 25;
    width: min(var(--container), calc(100% - 32px));
    min-height: 62px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 20px;
    border: 1px solid rgba(160, 225, 255, 0.28);
    border-radius: 10px;
    background: rgba(5, 13, 27, 0.35);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34), 0 0 18px rgba(39, 231, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    direction: rtl;
}

.mobile-footer-nav {
    display: none;
}

/* =========================
   Responsive
========================= */

@media (max-width: 1024px) {
    .page-shell {
        width: min(100% - 32px, var(--container));
    }

    .site-header {
        grid-template-columns: 230px 1fr 145px;
        grid-template-areas: "actions nav brand";
        gap: 14px;
        top: 10px;
        padding: 0px 16px;
    }

    .header-actions {
        justify-self: start;
    }

    .brand {
        justify-self: end;
        width: 116px;
        height: 48px;
    }

    .main-nav {
        gap: 26px;
        flex-wrap: wrap;
        font-size: 16px;
    }

    .software-card {
        grid-template-columns: 140px minmax(0, 1fr) 200px 240px;
    }

    .software-logo {
        min-width: 140px;
        padding: 16px;
    }

        .software-logo img {
            max-width: 90px;
            max-height: 90px;
        }

    .software-image {
        min-height: 160px;
    }

    .software-action {
        padding: 16px;
    }

    .view-button {
        width: auto;
        min-width: 0;
        padding: 0 12px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .page-shell {
        width: min(100% - 24px, var(--container));
        padding-top: 104px;
    }

    .site-header {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "brand nav actions";
        gap: 10px;
        top: 8px;
        padding: 8px 12px;
        min-height: auto;
    }

    .header-actions {
        grid-area: actions;
        gap: 8px;
        justify-self: end;
    }

    .profile-btn {
        width: 38px;
        height: 38px;
    }

        .profile-btn svg {
            width: 22px;
            height: 22px;
        }

    .theme-toggle {
        display: none;
    }

    .header-document-icon {
        display: none;
    }

    .brand {
        grid-area: brand;
        width: 90px;
        height: 38px;
    }

    .main-nav {
        grid-area: nav;
        gap: 12px;
        font-size: 13px;
        font-weight: 600;
    }

        .main-nav a {
            padding: 6px 0;
        }

    /* --- Mobile two-column card: image (right) | content (left) --- */
    .software-card {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "content image"
            "action image";
        gap: 0;
        align-items: stretch;
        min-height: auto;
        padding: 0;
        border-width: 2px;
    }

    .software-logo {
        display: none;
    }

    .software-card .software-image {
        grid-area: image;
        min-height: 180px;
        border-radius: 0;
        overflow: hidden;
    }

        .software-card .software-image::after {
            display: none;
        }

    .software-content {
        grid-area: content;
        padding: 14px 12px 6px;
    }

    .software-action {
        grid-area: action;
        padding: 4px 12px 14px;
    }

    .software-heading {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

        .software-heading h2 {
            color: #ffffff;
            font-size: 18px;
            font-weight: 800;
        }

    .software-category {
        display: inline-block;
        margin-bottom: 6px;
        padding: 3px 10px;
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.25);
        font-size: 11px;
        font-weight: 500;
    }

    .featured-badge {
        display: none;
    }

    .software-description,
    .software-meta {
        display: none;
    }

    .view-button {
        width: auto;
        min-width: 0;
        min-height: 34px;
        padding: 0 14px;
        font-size: 12px;
    }

        .view-button svg {
            width: 16px;
            height: 16px;
        }

    /* Tiny logo next to title via ::before */
    .card-gold .software-heading h2::before {
        content: "";
        display: inline-block;
        width: 26px;
        height: 26px;
        margin-left: 6px;
        vertical-align: middle;
        background: url('assets/software/mahak.webp') center / contain no-repeat;
        flex-shrink: 0;
    }

    .card-orange .software-heading h2::before {
        content: "";
        display: inline-block;
        width: 26px;
        height: 26px;
        margin-left: 6px;
        vertical-align: middle;
        background: url('assets/software/holoo.webp') center / contain no-repeat;
        flex-shrink: 0;
    }

    .card-green .software-heading h2::before {
        content: "";
        display: inline-block;
        width: 26px;
        height: 26px;
        margin-left: 6px;
        vertical-align: middle;
        background: url('assets/software/sepidar.webp') center / contain no-repeat;
        flex-shrink: 0;
    }

    .card-red .software-heading h2::before {
        content: "";
        display: inline-block;
        width: 26px;
        height: 26px;
        margin-left: 6px;
        vertical-align: middle;
        background: url('assets/software/orash-logo.webp') center / contain no-repeat;
        flex-shrink: 0;
    }

    /* Mobile saturated backgrounds per card */
    .card-gold {
        background: linear-gradient(180deg, #c9a020, #a88214);
    }

    .card-orange {
        background: linear-gradient(180deg, #c96a18, #a85010);
    }

    .card-green {
        background: linear-gradient(180deg, #1a8e52, #127040);
    }

    .card-red {
        background: linear-gradient(180deg, #a02530, #881a24);
    }

    .sw-list {
        gap: 32px;
    }
}

@media (max-width: 460px) {
    .software-card {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "content image"
            "action image";
        padding: 0;
        gap: 0;
    }

        .software-card .software-image {
            min-height: 150px;
        }

    .software-heading h2 {
        font-size: 15px;
    }

    n .view-button {
        width: auto;
        min-height: 30px;
        font-size: 11px;
    }

    .software-content {
        padding: 10px 8px 4px;
    }

    .software-action {
        padding: 4px 8px 10px;
    }

    .main-nav {
        gap: 8px;
        font-size: 12px;
    }
}

/* Homepage header theme control: preserve the original icon-button design. */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

    .theme-toggle > .theme-symbol {
        display: none;
    }

.theme-switch {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(180, 235, 255, 0.38);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(30, 54, 80, 0.9), rgba(6, 15, 29, 0.94));
    color: #cfe2ff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24), 0 0 13px rgba(83, 137, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

    .theme-switch:hover {
        border-color: var(--cyan);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 0 16px rgba(83, 205, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }

.theme-switch-icon {
    display: grid;
    place-items: center;
}

    .theme-switch-icon svg {
        width: 25px;
        height: 25px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.theme-switch-sun {
    display: none;
}

.theme-switch.is-light {
    border-color: rgba(255, 191, 82, 0.68);
    background: linear-gradient(145deg, #fff1c2, #ffbd58);
    color: #9b5411;
    box-shadow: 0 8px 20px rgba(190, 114, 32, 0.18), 0 0 14px rgba(255, 191, 82, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

    .theme-switch.is-light .theme-switch-moon {
        display: none;
    }

    .theme-switch.is-light .theme-switch-sun {
        display: grid;
    }

@media (max-width: 1024px) {
    .theme-switch {
        width: 42px;
        height: 42px;
        border-radius: 8px;
    }

    .theme-switch-icon svg {
        width: 22px;
        height: 22px;
    }
}

/* Footer icon navigation: keep the three image icons visible. */
.fixed-footer .mobile-footer-nav {
    display: flex !important;
    align-items: center;
    justify-content: center;
    direction: ltr;
    gap: clamp(18px, 3vw, 34px);
    width: 100%;
}

    .fixed-footer .mobile-footer-nav a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 14px;
        border-radius: 14px;
    }

    .fixed-footer .mobile-footer-nav img {
        display: block;
        width: 48px;
        height: 48px;
        object-fit: contain;
    }

@media (max-width: 768px) {
    .fixed-footer .mobile-footer-nav {
        gap: 8px;
    }

        .fixed-footer .mobile-footer-nav a {
            padding: 5px 8px;
        }

        .fixed-footer .mobile-footer-nav img {
            width: 42px;
            height: 42px;
        }
}

/* Mobile header parity with the supplied index.html reference. */
@media (max-width: 768px) {
    .page-shell {
        width: min(100% - 24px, var(--container));
        padding: 104px 0 0px;
    }

    .site-header {
        grid-template-columns: auto auto;
        grid-template-areas: "actions brand";
        min-height: 60px;
        top: 0;
        left: 0;
        width: 100%;
        transform: none;
        padding: 0 12px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

        .site-header::before {
            display: block;
            border-radius: 0;
        }

    .brand {
        grid-area: brand;
        justify-self: end;
        width: 118px;
        height: 50px;
    }

    .main-nav {
        display: none;
    }

    .header-actions {
        grid-area: actions;
        justify-self: start;
        flex-wrap: nowrap;
        gap: 14px;
    }

    .profile-btn,
    .header-document-icon,
    .theme-switch {
        width: 48px;
        height: 48px;
    }

        .profile-btn svg,
        .header-document-icon svg,
        .theme-switch-icon svg {
            width: 25px;
            height: 25px;
        }
}

@media (max-width: 460px) {
    .site-header {
        padding-inline: 12px;
    }

    .brand {
        width: 104px;
        height: 44px;
    }

    .header-actions {
        gap: 8px;
    }

    .profile-btn,
    .header-document-icon,
    .theme-switch {
        width: 42px;
        height: 42px;
    }

        .profile-btn svg,
        .header-document-icon svg,
        .theme-switch-icon svg {
            width: 22px;
            height: 22px;
        }
}

/* Homepage active class card: restore its original banner background. */
.active-card.neon-frame {
    background-image: url("/assets/classes/class-banner.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #dce5ef;
}

/* Exact mobile header layout from sample1/index.html */
@media (max-width: 768px) {
    .page-shell {
        width: min(100% - 24px, var(--container));
        padding-top: 104px;
    }

    .site-header {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "brand nav actions";
        gap: 10px;
        top: 8px;
        padding: 8px 12px;
        min-height: auto;
        width: calc(100% - 16px);
        border: 1px solid rgba(170, 231, 255, 0.26);
        border-radius: 10px;
    }

        .site-header::before {
            display: none;
        }

    .brand {
        grid-area: brand;
        justify-self: start;
        width: 90px;
        height: 38px;
    }

    .main-nav {
        grid-area: nav;
        display: flex;
        justify-self: center;
        gap: 12px;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }

        .main-nav a {
            padding: 6px 0;
        }

    .header-actions {
        grid-area: actions;
        justify-self: end;
        gap: 8px;
    }

    .profile-btn {
        width: 38px;
        height: 38px;
    }

        .profile-btn svg {
            width: 22px;
            height: 22px;
        }

    .theme-toggle, .header-document-icon {
        display: none;
    }
}

@media (max-width: 460px) {
    .site-header {
        width: calc(100% - 8px);
        padding-inline: 8px;
    }

    .brand {
        width: 78px;
        height: 34px;
    }

    .main-nav {
        gap: 8px;
        font-size: 11px;
    }

    .profile-btn {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 768px) {
    .site-header {
        grid-template-columns: auto auto;
        grid-template-areas: 'actions brand';
        justify-content: space-between;
        gap: 12px;
        width: calc(100% - 16px);
        min-height: 60px;
        top: 8px;
        padding: 8px 12px;
        border: 1px solid rgba(170,231,255,.26);
        border-radius: 10px;
    }

    .main-nav {
        display: none !important;
    }

    .header-actions {
        grid-area: actions;
        justify-self: start;
        display: flex;
        align-items: center;
        gap: 8px;
        direction: ltr;
    }

    .brand {
        grid-area: brand;
        justify-self: end;
        width: 90px;
        height: 38px;
    }

    .profile-btn, .header-document-icon, .theme-switch {
        width: 38px;
        height: 38px;
    }

        .profile-btn svg {
            width: 22px;
            height: 22px;
        }

        .header-document-icon svg, .theme-switch-icon svg {
            width: 21px;
            height: 21px;
        }

    .theme-toggle {
        display: flex !important;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
}

@media (max-width: 460px) {
    .site-header {
        width: calc(100% - 8px);
        padding-inline: 8px;
    }

    .header-actions {
        gap: 6px;
    }

    .brand {
        width: 78px;
        height: 34px;
    }

    .profile-btn, .header-document-icon, .theme-switch {
        width: 34px;
        height: 34px;
    }
}

/* Footer navigation states: muted by default, color and glow when active. */
.fixed-footer .mobile-footer-nav a {
    opacity: .42;
    filter: grayscale(1);
    transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}

    .fixed-footer .mobile-footer-nav a.is-active {
        opacity: 1;
        filter: none;
        transform: translateY(-2px);
    }

        .fixed-footer .mobile-footer-nav a.is-active:nth-child(1) img {
            filter: drop-shadow(0 0 7px rgba(245,158,11,.95)) drop-shadow(0 0 14px rgba(245,158,11,.7));
        }

        .fixed-footer .mobile-footer-nav a.is-active:nth-child(2) img {
            filter: drop-shadow(0 0 7px rgba(20,165,238,.95)) drop-shadow(0 0 14px rgba(20,165,238,.7));
        }

        .fixed-footer .mobile-footer-nav a.is-active:nth-child(3) img {
            filter: drop-shadow(0 0 7px rgba(255,85,248,.95)) drop-shadow(0 0 14px rgba(255,85,248,.7));
        }

/* Mobile header controls: show all three icons and enlarge them slightly. */
@media (max-width: 768px) {
    .header-document-icon {
        display: grid !important;
    }

    .profile-btn, .header-document-icon, .theme-switch {
        width: 44px;
        height: 44px;
    }

        .profile-btn svg, .header-document-icon svg, .theme-switch-icon svg {
            width: 25px;
            height: 25px;
        }

    .header-actions {
        gap: 10px;
    }
}

@media (max-width: 460px) {
    .profile-btn, .header-document-icon, .theme-switch {
        width: 40px;
        height: 40px;
    }

        .profile-btn svg, .header-document-icon svg, .theme-switch-icon svg {
            width: 23px;
            height: 23px;
        }

    .header-actions {
        gap: 8px;
    }
}

/* Footer icon glow follows each icon color; inactive icons stay softly muted. */
.fixed-footer .mobile-footer-nav a {
    opacity: .72;
    filter: grayscale(.45);
}

    .fixed-footer .mobile-footer-nav a.is-active {
        opacity: 1;
        filter: none;
    }

        .fixed-footer .mobile-footer-nav a.is-active:nth-child(1) {
            background: rgba(245,158,11,.12);
            box-shadow: 0 0 10px rgba(245,158,11,.55), 0 0 22px rgba(245,158,11,.28), inset 0 0 10px rgba(245,158,11,.12);
        }

        .fixed-footer .mobile-footer-nav a.is-active:nth-child(2) {
            background: rgba(20,165,238,.12);
            box-shadow: 0 0 10px rgba(20,165,238,.55), 0 0 22px rgba(20,165,238,.28), inset 0 0 10px rgba(20,165,238,.12);
        }

        .fixed-footer .mobile-footer-nav a.is-active:nth-child(3) {
            background: rgba(255,85,248,.12);
            box-shadow: 0 0 10px rgba(255,85,248,.55), 0 0 22px rgba(255,85,248,.28), inset 0 0 10px rgba(255,85,248,.12);
        }

    /* Final footer icon states: light gray defaults, color/glow only on the active icon. */
    .fixed-footer .mobile-footer-nav a,
    .fixed-footer .mobile-footer-nav a:hover,
    .fixed-footer .mobile-footer-nav a.is-active {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        opacity: 1 !important;
        transform: none;
    }

        .fixed-footer .mobile-footer-nav a img {
            opacity: 1 !important;
            filter: grayscale(1) brightness(1.45) !important;
            transition: filter .25s ease, transform .25s ease;
        }

        .fixed-footer .mobile-footer-nav a.is-active img {
            transform: scale(1.06);
        }

        .fixed-footer .mobile-footer-nav a.is-active:nth-child(1) img {
            filter: grayscale(0) drop-shadow(0 0 5px #f59e0b) drop-shadow(0 0 12px rgba(245,158,11,.8)) !important;
        }

        .fixed-footer .mobile-footer-nav a.is-active:nth-child(2) img {
            filter: grayscale(0) drop-shadow(0 0 5px #14a5ee) drop-shadow(0 0 12px rgba(20,165,238,.8)) !important;
        }

        .fixed-footer .mobile-footer-nav a.is-active:nth-child(3) img {
            filter: grayscale(0) drop-shadow(0 0 5px #ff55f8) drop-shadow(0 0 12px rgba(255,85,248,.8)) !important;
        }

        /* Software/monitor active state uses the blue brand color. */
        .fixed-footer .mobile-footer-nav a.is-active:nth-child(1) img {
            filter: grayscale(0) drop-shadow(0 0 5px #27e7ff) drop-shadow(0 0 12px rgba(39,231,255,.85)) !important;
        }

        /* Ads/image active state uses orange. */
        .fixed-footer .mobile-footer-nav a.is-active:nth-child(3) img {
            filter: grayscale(0) drop-shadow(0 0 5px #f59e0b) drop-shadow(0 0 12px rgba(245,158,11,.85)) !important;
        }

/* Ads page section layout. */
.ads-page-content {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

    .ads-page-content > .featured-banner {
        order: 1;
    }

    .ads-page-content > .detail-video-section {
        order: 2;
        margin: 0;
    }

    .ads-page-content > .ads-list-cta {
        order: 3;
    }

.ads-testimonials {
    order: 4;
    margin-top: 15px;
}

.ads-banners {
    order: 5;
    margin-bottom: 40px;
}

.ads-page-content > .software-ad-section {
    order: 6;
}

.ads-section-heading {
    text-align: center;
    margin-bottom: 18px;
}

    .ads-section-heading h2 {
        margin: 0;
        color: var(--text);
        font-size: clamp(24px, 4vw, 34px);
    }

    .ads-section-heading p {
        margin: 8px 0 0;
        color: var(--muted);
    }

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.testimonial-card {
    padding: 24px 20px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .testimonial-card p {
        margin: 0 0 18px;
        color: var(--text);
        line-height: 2;
    }

    .testimonial-card strong {
        color: var(--cyan);
    }

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

    .ads-page-content {
        gap: 15px;
    }
}

/* Scrollable testimonials panel with a permanently docked composer. */
.testimonials-shell {
    --testimonial-glow: var(--cyan);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: clamp(390px, 58vh, 560px);
    min-height: 390px;
    padding: 22px;
    overflow: hidden;
    box-shadow: 0 0 18px color-mix(in srgb, var(--testimonial-glow) 55%, transparent), 0 0 42px color-mix(in srgb, var(--testimonial-glow) 24%, transparent), inset 0 0 28px color-mix(in srgb, var(--testimonial-glow) 10%, transparent);
}

    .testimonials-shell > * {
        position: relative;
        z-index: 1;
    }

.testimonials-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 3px 8px 18px 3px;
}

    .testimonials-scroll::-webkit-scrollbar {
        display: none;
    }

    .testimonials-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .testimonials-scroll::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: var(--testimonial-glow);
        box-shadow: 0 0 8px var(--testimonial-glow);
    }

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.testimonial-card {
    min-height: 152px;
    padding: 20px 18px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 0 14px color-mix(in srgb, currentColor 44%, transparent), inset 0 0 18px color-mix(in srgb, currentColor 9%, transparent);
}

    .testimonial-card::before {
        padding: 3px;
    }

    .testimonial-card::after {
        inset: 2px;
        opacity: .8;
    }

    .testimonial-card p {
        position: relative;
        z-index: 1;
        margin: 0 0 18px;
    }

.testimonial-meta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .testimonial-meta strong {
        color: var(--testimonial-name-color, var(--cyan));
        font-size: 1rem;
        text-shadow: 0 0 7px color-mix(in srgb, var(--testimonial-name-color, var(--cyan)) 75%, transparent);
    }

.testimonial-card.neon-blue {
    --testimonial-name-color: #7dd3fc;
}

.testimonial-card.neon-green {
    --testimonial-name-color: #86efac;
}

.testimonial-card.neon-purple {
    --testimonial-name-color: #d8b4fe;
}

.testimonial-card.neon-pink {
    --testimonial-name-color: #f9a8d4;
}

.testimonial-date {
    color: var(--muted);
    font-size: .78rem;
    white-space: nowrap;
}

.testimonial-composer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding: 15px 18px;
    border: 1px solid rgba(39, 231, 255, .58);
    border-radius: 13px;
    background: rgba(6, 18, 35, .92);
    color: var(--text);
    box-shadow: 0 0 15px rgba(39, 231, 255, .38), inset 0 0 16px rgba(39, 231, 255, .08);
}

.testimonial-composer-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    width: 100%;
}

.testimonials-scroll {
    transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}

.testimonials-shell.is-form-open .testimonials-scroll {
    filter: blur(2px);
    opacity: .52;
    transform: scale(.995);
    pointer-events: none;
}

.testimonial-composer-button {
    flex: none;
    padding: 8px 15px;
    border: 1px solid var(--cyan);
    border-radius: 9px;
    color: var(--cyan);
    background: rgba(39, 231, 255, .1);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(39, 231, 255, .3);
}

    .testimonial-composer-button:hover {
        background: rgba(39, 231, 255, .2);
    }

.testimonial-form {
    display: none;
}

.testimonial-composer.is-form-open .testimonial-composer-prompt {
    display: none;
}

.testimonial-composer.is-form-open .testimonial-form {
    display: block;
}

.testimonial-form-fields {
    display: grid;
    grid-template-columns: minmax(170px, .7fr) minmax(0, 1.3fr);
    gap: 12px;
}

.testimonial-form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--muted);
    font-size: .78rem;
}

.testimonial-form input, .testimonial-form textarea {
    width: 100%;
    border: 1px solid rgba(39, 231, 255, .45);
    border-radius: 8px;
    padding: 8px 10px;
    background: rgba(3, 12, 25, .9);
    color: var(--text);
    outline: none;
    font-family: "Vazirmatn", "IRANSansX", system-ui, sans-serif;
}

.testimonial-form label {
    font-weight: 700;
    color: var(--text);
}

.testimonial-form input::placeholder, .testimonial-form textarea::placeholder {
    color: var(--muted);
}

.testimonial-form input:focus, .testimonial-form textarea:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 9px rgba(39, 231, 255, .35);
}

.testimonial-form-actions {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 10px;
}

.testimonial-form-back {
    padding: 8px 18px;
    border: 1px solid rgba(255, 142, 165, .62);
    border-radius: 9px;
    color: #f64a6d;
    background: rgba(255, 92, 125, .18);
    font-family: 1rem;
    font-weight: 700;
    transition: .2s ease;
}

    .testimonial-form-back:hover {
        color: #fff;
        border-color: #ff8ea5;
        background: rgba(255, 92, 125, .2);
        box-shadow: 0 0 12px rgba(255, 92, 125, .34);
    }

.testimonial-form-error {
    margin: 8px 0 0;
    color: #ff8ea5;
    font-size: .78rem;
}

@media (max-width: 768px) {
    .testimonials-shell {
        height: min(70vh, 520px);
        min-height: 360px;
        padding: 14px;
    }

    .testimonials-scroll {
        padding: 2px 4px 14px 2px;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .testimonial-card {
        min-height: 132px;
        padding: 17px 15px;
    }

    .testimonial-composer {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
        margin-top: 10px;
        padding: 13px 14px;
    }

    .testimonial-composer-prompt {
        flex-direction: column;
        gap: 18px;
        text-align: center;
    }

    .testimonial-composer-button {
        width: 100%;
    }

    .testimonial-form-fields {
        grid-template-columns: 1fr;
    }

    .testimonial-form-actions {
        flex-direction: column;
    }

        .testimonial-form-actions button {
            width: 100%;
        }
}

/* Keep the comment composer bright and readable in the light theme. */
:root.light-theme .testimonial-composer {
    background: linear-gradient(145deg, #f7fcff, #eaf6fb);
    border-color: rgba(8, 125, 158, .42);
    color: #193248;
    box-shadow: 0 8px 22px rgba(54, 106, 145, .16), inset 0 0 16px rgba(39, 172, 255, .08);
}

:root.light-theme .testimonial-form label {
    color: #24445b;
}

:root.light-theme .testimonial-form input,
:root.light-theme .testimonial-form textarea {
    background: #fff;
    color: #183247;
    border-color: rgba(8, 125, 158, .42);
}

/* Confirmation dialog shown after a visitor submits a review. */
.review-submitted-dialog {
    border: none;
    border-radius: 16px;
    padding: 0;
    max-width: min(90vw, 420px);
    background: var(--surface, #141a2e);
    color: var(--text, #fff);
    box-shadow: 0 20px 60px rgb(0 0 0 / 0.5);
}

    .review-submitted-dialog::backdrop {
        background: rgb(0 0 0 / 0.6);
    }

.review-submitted-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem 1.5rem;
    text-align: center;
}

    .review-submitted-dialog-body p {
        margin: 0;
        line-height: 1.9;
    }

.review-submitted-dialog-button {
    align-self: center;
    border: none;
    border-radius: 999px;
    padding: 0.6rem 2.5rem;
    font: inherit;
    cursor: pointer;
    background: linear-gradient(135deg, #22d3ee, #3b82f6);
    color: #fff;
}

    .review-submitted-dialog-button:hover {
        filter: brightness(1.1);
    }

/* کاربردی software tiles */
.software-apps-strip {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 22px;
    margin-bottom: 38px;
}

.app-tile {
    text-align: center;
    color: var(--text);
    font-weight: 700;
}

.app-tile-image {
    aspect-ratio: 1.45;
    display: grid;
    place-items: center;
    padding: 10px;
    border: 2px solid currentColor;
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .app-tile-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.app-tile span {
    display: block;
    margin-top: 10px;
}

.app-tile:hover .app-tile-image {
    transform: translateY(-3px);
}

.app-tile-blue {
    color: #27e7ff;
}

    .app-tile-blue:hover .app-tile-image {
        box-shadow: 0 0 14px #27e7ff, inset 0 0 16px rgba(39,231,255,.22);
    }

.app-tile-cyan {
    color: #39b7ff;
}

    .app-tile-cyan:hover .app-tile-image {
        box-shadow: 0 0 14px #39b7ff, inset 0 0 16px rgba(57,183,255,.22);
    }

.app-tile-green {
    color: #17d96f;
}

    .app-tile-green:hover .app-tile-image {
        box-shadow: 0 0 14px #17d96f, inset 0 0 16px rgba(23,217,111,.22);
    }

.app-tile-purple {
    color: #b250ff;
}

    .app-tile-purple:hover .app-tile-image {
        box-shadow: 0 0 14px #b250ff, inset 0 0 16px rgba(178,80,255,.22);
    }

@media (max-width:768px) {
    .software-apps-strip {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 12px;
        margin-bottom: 28px;
    }

    .app-tile-image {
        aspect-ratio: 1.15;
        padding: 6px;
    }

    .app-tile span {
        font-size: 13px;
        margin-top: 7px;
    }
}

/* Information page */
.information-page {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: -30px;
}

.information-header {
    text-align: center;
}

    .information-header h1 {
        margin: 0;
        color: var(--text);
        font-size: clamp(28px,5vw,44px);
    }

    .information-header p {
        margin: 10px 0 0;
        color: var(--muted);
    }

.information-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px;
}

.information-card {
    min-height: 280px;
    padding: 28px 24px;
}

    .information-card h2 {
        margin: 0 0 18px;
        color: var(--text);
        font-size: 26px;
    }

    .information-card p {
        color: var(--muted);
        line-height: 2.1;
        margin: 0 0 14px;
    }

@media(max-width:768px) {
    .information-grid {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .information-card {
        min-height: auto;
        padding: 22px 18px
    }

        .information-card h2 {
            font-size: 22px
        }
}

/* Decorative neon lamps at the top corners of software details. */
.software-detail-page {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

    .software-detail-page > * {
        width: 100%;
    }

    .software-detail-page > .detail-back-btn {
        width: min(420px, 100%);
    }

.neon-lamp {
    position: absolute;
    top: -18px;
    width: 72px;
    height: 112px;
    pointer-events: none;
    z-index: 1;
    opacity: .95;
}

    .neon-lamp::before {
        content: '';
        position: absolute;
        left: 18px;
        top: 0;
        width: 36px;
        height: 72px;
        border: 4px solid var(--cyan);
        border-bottom-width: 8px;
        border-radius: 22px 22px 10px 10px;
        box-shadow: 0 0 8px var(--cyan),0 0 20px var(--cyan),0 0 38px rgba(39,231,255,.72);
    }

    .neon-lamp::after {
        content: '';
        position: absolute;
        left: 27px;
        top: 68px;
        width: 18px;
        height: 26px;
        border-left: 4px solid var(--cyan);
        border-right: 4px solid var(--cyan);
        box-shadow: 0 0 8px var(--cyan);
    }

.neon-lamp-left {
    left: 8px;
    transform: rotate(-10deg);
}

.neon-lamp-right {
    right: 8px;
    transform: rotate(10deg);
}

    .neon-lamp-right::before, .neon-lamp-right::after {
        border-color: var(--pink);
        box-shadow: 0 0 8px var(--pink),0 0 20px var(--pink),0 0 38px rgba(255,85,248,.72);
    }

@media(max-width:768px) {
    .neon-lamp {
        top: -10px;
        transform: scale(.7)
    }

    .neon-lamp-left {
        left: -2px
    }

    .neon-lamp-right {
        right: -2px
    }
}

/* Three application cards per row on mobile. */
@media (max-width: 768px) {
    .software-apps-strip {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        align-items: start;
    }

    .app-tile-image {
        width: 100%;
        aspect-ratio: 1 / 1 !important;
        padding: 5px !important;
    }

        .app-tile-image img {
            object-fit: contain !important;
        }

    .app-tile span {
        font-size: 12px;
        line-height: 1.5;
    }
}

/* Popular software card */
.card-blue {
    border: 2px solid rgba(71, 181, 255, .82);
    --fade: #075b9d;
    background: linear-gradient(180deg, #087fca, #075294);
    box-shadow: 0 0 26px rgba(42, 164, 255, .5), 0 0 54px rgba(42, 164, 255, .25), inset 0 0 28px rgba(91, 203, 255, .12);
}

.popular-software-card {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 240px 280px;
    margin-bottom: 44px;
}

.popular-software-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

    .popular-software-card-link:hover {
        color: inherit;
    }

.popular-apps-column {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 20px;
}

    .popular-apps-column .popular-app-grid {
        width: min(100%, 380px);
        gap: 12px;
    }

.card-blue:hover {
    border-color: rgba(117, 211, 255, .95);
    box-shadow: 0 0 34px rgba(42, 164, 255, .62), inset 0 0 40px rgba(91, 203, 255, .16);
}

.card-blue .software-category {
    color: #b8ebff;
}

.card-blue .featured-badge {
    border-color: rgba(174, 232, 255, .42);
    background: rgba(122, 216, 255, .16);
    color: #d8f6ff;
}

.card-blue .view-button {
    border-color: #76d4ff;
    background: rgba(73, 190, 255, .28);
    box-shadow: 0 0 14px rgba(73, 190, 255, .6), inset 0 0 14px rgba(73, 190, 255, .25);
}

.popular-software-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .popular-software-logo svg {
        width: 104px;
        height: 104px;
        fill: none;
        stroke: #d8f7ff;
        stroke-width: 3;
        filter: drop-shadow(0 0 12px rgba(154, 232, 255, .9));
    }

.popular-software-card .software-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.popular-software-card .software-heading {
    justify-content: center;
}

    .popular-software-card .software-heading h2 {
        color: #fff;
        font-size: clamp(22px, 3vw, 34px);
        font-weight: 800;
        line-height: 1.45;
        text-align: center;
    }

.popular-software-page {
    width: 100%;
    padding: 24px 0 36px;
}

.popular-software-page-heading {
    margin-bottom: 30px;
    text-align: center;
}

    .popular-software-page-heading h1 {
        margin: 0;
        color: var(--text);
        font-size: clamp(26px, 4vw, 38px);
        font-weight: 800;
        line-height: 1.4;
    }

    .popular-software-page-heading p {
        margin: 8px 0 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.8;
    }

.popular-software-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 24px;
    width: min(100%, 720px);
    margin: 0 auto;
}

.popular-app-tile {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: center;
    transition: transform 180ms ease;
}

    /* display:flex above would override the [hidden] attribute (used by the
   client-side search), so hide matching tiles explicitly. */
    .popular-app-tile[hidden] {
        display: none;
    }


.popular-app-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    padding: 12px;
    overflow: visible;
    border: 1px solid var(--app-glow, rgba(180, 235, 255, 0.72));
    border-radius: 21px;
    background: linear-gradient( 145deg, rgba(164, 229, 255, 0.34), rgba(87, 159, 211, 0.22) 52%, rgba(39, 95, 156, 0.28) );
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.popular-app-tile:hover .popular-app-icon {
    border-color: var(--app-glow, rgba(220, 249, 255, 0.92));
    background: linear-gradient( 145deg, rgba(184, 239, 255, 0.43), rgba(99, 177, 222, 0.28) 52%, rgba(42, 104, 166, 0.32) );
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.48), inset 0 -10px 18px rgba(17, 86, 143, 0.24), 0 0 12px var(--app-glow, rgba(220, 249, 255, 0.76)), 0 10px 24px rgba(8, 58, 108, 0.34);
}

.popular-app-tile:nth-child(4n + 1) {
    --app-glow: rgba(74, 202, 255, 0.9);
}

.popular-app-tile:nth-child(4n + 2) {
    --app-glow: rgba(206, 102, 255, 0.9);
}

.popular-app-tile:nth-child(4n + 3) {
    --app-glow: rgba(101, 239, 154, 0.9);
}

.popular-app-tile:nth-child(4n) {
    --app-glow: rgba(255, 190, 72, 0.9);
}

.popular-app-icon::after {
    position: absolute;
    inset: 1px;
    pointer-events: none;
    border-radius: 20px;
    content: "";
}

.popular-app-icon img {
    position: relative;
    z-index: 1;
    display: block;
    width: 82%;
    height: 82%;
    object-fit: contain;
    border-radius: 14px;
    filter: drop-shadow(0 5px 7px rgba(0, 39, 78, 0.3));
}

.popular-app-badge {
    position: absolute;
    top: -9px;
    right: -8px;
    z-index: 4;
    display: grid;
    min-width: 45px;
    height: 30px;
    padding: 0 9px;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: #ff3d2e;
    box-shadow: 0 3px 9px rgba(255, 45, 35, 0.42), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.popular-app-name {
    display: block;
    width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* آیکن نرم‌افزارهایی که تصویرشان پس‌زمینه دارد */
.popular-app-icon img[src*="idm"],
.popular-app-icon img[src*="chrome"],
.popular-app-icon img[src*="winrar"],
.popular-app-icon img[src*="hd-video-player"] {
    border-radius: 14px;
}

/* تبلت */
@media (max-width: 768px) {
    .popular-software-page {
        padding: 20px 12px 0px;
    }

    .popular-software-page-heading {
        margin-bottom: 24px;
    }

        .popular-software-page-heading h1 {
            font-size: 26px;
        }

    .popular-software-grid {
        gap: 24px 16px;
        width: min(100%, 560px);
    }

    .popular-app-icon {
        padding: 10px;
        border-radius: 18px;
    }

        .popular-app-icon::after {
            border-radius: 17px;
        }

    .popular-app-name {
        font-size: 13px;
    }
}

/* موبایل */
@media (max-width: 460px) {
    .popular-software-page {
        padding-right: 10px;
        padding-left: 10px;
    }

    .popular-software-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px 16px;
    }

    .popular-app-icon {
        padding: 7px;
        border-radius: 15px;
    }

        .popular-app-icon::after {
            border-radius: 14px;
        }

        .popular-app-icon img {
            width: 86%;
            height: 86%;
            border-radius: 10px;
        }

    .popular-app-name {
        font-size: 11px;
        font-weight: 600;
    }

    .popular-app-badge {
        top: -7px;
        right: -7px;
        min-width: 31px;
        height: 23px;
        padding: 0 6px;
        font-size: 10px;
    }
}

@media (max-width: 768px) {
    .popular-software-card {
        margin-bottom: 28px;
    }

    .popular-software-card {
        position: relative;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "content image"
            "action image";
        align-items: stretch;
    }

        .popular-software-card .popular-software-logo {
            display: flex;
            position: absolute;
            top: 50%;
            right: 10px;
            z-index: 3;
            width: 48px;
            min-width: 0;
            height: 48px;
            flex-direction: column;
            justify-content: center;
            padding: 0;
            transform: translateY(-50%);
        }

            .popular-software-card .popular-software-logo svg {
                width: 46px;
                height: 46px;
            }

        .popular-software-card .software-content {
            grid-area: content;
            min-height: 40px;
            padding: 0px 0px 0px 12px;
        }

        .popular-software-card .software-heading h2 {
            font-size: 16px;
            line-height: 1.55;
            text-align: right;
        }

        .popular-software-card .software-action {
            grid-area: action;
            padding: 4px 10px 10px;
        }

        .popular-software-card .popular-software-image {
            grid-area: image;
            min-height: 180px;
            padding: 10px;
        }
}

/* Shared promotional boxes shown below software cards and on the ads page. */
.software-ad-section {
    margin-top: 44px;
}

.software-ad-grid {
    gap: 44px;
}

    .software-ad-grid .ad-card {
        min-height: 205px;
        height: 205px;
        padding: 0;
        overflow: hidden;
    }

    .software-ad-grid .ad-img {
        height: 100%;
        border-radius: inherit;
    }

        .software-ad-grid .ad-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    .software-ad-grid .ad-card.neon-pink {
        box-shadow: 0 0 32px rgba(255, 85, 248, .62), 0 0 64px rgba(255, 85, 248, .28);
    }

    .software-ad-grid .ad-card.neon-purple {
        box-shadow: 0 0 32px rgba(178, 80, 255, .62), 0 0 64px rgba(178, 80, 255, .28);
    }

@media (max-width: 768px) {
    .software-ad-section {
        margin-top: 38px;
    }

    .software-ad-grid {
        gap: 16px;
    }

        .software-ad-grid .ad-card {
            height: 180px;
            min-height: 180px;
        }
}

.ads-list-cta {
    margin-top: 44px;
    padding: 34px 28px;
    text-align: center;
    background: linear-gradient(135deg, rgba(10, 24, 52, .96), rgba(32, 12, 54, .9));
}

.ads-list-cta-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin-inline: auto;
}

.ads-list-cta-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--cyan);
    font-size: 14px;
    font-weight: 800;
}

.ads-list-cta h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(24px, 4vw, 38px);
}

.ads-list-cta p {
    position: relative;
    z-index: 1;
    display: block;
    visibility: visible;
    opacity: 1;
    margin: 10px auto 22px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.9;
}

.ads-list-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
}

@media (max-width: 768px) {
    .ads-list-cta {
        margin-top: 15px;
        padding: 26px 16px;
    }

        .ads-list-cta h2 {
            font-size: 22px;
        }

        .ads-list-cta p {
            display: none !important;
        }

    .ads-list-cta-button {
        width: 100%;
        font-size: 14px;
    }
}

/* Header icon colors: orange by default, gender-specific after profile completion. */
.profile-btn {
    color: #f59e0b;
}

    .profile-btn svg {
        filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.72));
    }

.profile-btn--male {
    color: #3b82f6;
}

    .profile-btn--male svg {
        filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.82));
    }

.profile-btn--female {
    color: #ec4899;
}

    .profile-btn--female svg {
        filter: drop-shadow(0 0 5px rgba(236, 72, 153, 0.82));
    }

.header-document-icon {
    color: #a855f7;
}

    .header-document-icon svg {
        filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.82));
    }

/* Final mobile header override: matches the supplied reference cascade. */
@media (max-width: 768px) {
    .page-shell {
        width: min(100% - 24px, var(--container));
        padding-top: 104px;
    }

    .site-header {
        grid-template-columns: auto auto;
        grid-template-areas: "actions brand";
        min-height: 60px;
        top: 0;
        left: 0;
        width: 100%;
        transform: none;
        padding: 0 12px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

        .site-header::before {
            display: block;
            border-radius: 0;
        }

    .brand {
        grid-area: brand;
        justify-self: end;
        width: 118px;
        height: 50px;
    }

    .main-nav {
        display: none !important;
    }

    .header-actions {
        grid-area: actions;
        justify-self: start;
        flex-wrap: nowrap;
        gap: 14px;
    }

    .profile-btn {
        width: 48px;
        height: 48px;
    }

    .theme-toggle {
        display: flex !important;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .theme-switch,
    .header-document-icon {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 460px) {
    .brand {
        width: 104px;
        height: 44px;
    }

    .header-actions {
        gap: 8px;
    }

    .profile-btn {
        width: 42px;
        height: 42px;
    }

    .theme-switch,
    .header-document-icon {
        width: 40px;
        height: 40px;
    }
}

/* Footer parity with the supplied reference: three native-color icons in a
   centered floating bar, ordered image, book, monitor. */
.fixed-footer {
    position: fixed;
    left: 50%;
    bottom: 14px;
    z-index: 25;
    width: min(var(--container), calc(100% - 32px));
    min-height: 62px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 1px solid rgba(160, 225, 255, 0.28);
    border-radius: 10px;
    background: rgba(5, 13, 27, 0.35);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34), 0 0 18px rgba(39, 231, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

    .fixed-footer .mobile-footer-nav {
        display: flex !important;
        align-items: center;
        justify-content: center;
        direction: ltr;
        gap: clamp(18px, 3vw, 34px);
        width: 100%;
    }

        .fixed-footer .mobile-footer-nav a,
        .fixed-footer .mobile-footer-nav a:hover,
        .fixed-footer .mobile-footer-nav a.is-active {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 0 !important;
            border-radius: 14px;
            background: transparent !important;
            box-shadow: none !important;
            opacity: 1 !important;
            filter: none !important;
            transform: none;
        }

        .fixed-footer .mobile-footer-nav img {
            display: block;
            width: 48px;
            height: 48px;
            object-fit: contain;
            filter: none !important;
        }

@media (max-width: 768px) {
    .fixed-footer {
        width: calc(100% - 32px);
        bottom: 14px;
        padding: 9px 14px;
    }

        .fixed-footer .mobile-footer-nav {
            gap: 8px;
        }

            .fixed-footer .mobile-footer-nav a {
                flex: 1 1 0;
                padding: 4px 2px;
            }

            .fixed-footer .mobile-footer-nav img {
                width: 42px;
                height: 42px;
            }
}


/* Home page: 20px gap between the class, course and exam section boxes. */
.home-page .section-block {
    margin-bottom: 30px;
}

    .home-page .section-block:last-child {
        margin-bottom: 0;
    }

/* =========================
   Section date bar (Hijri | Shamsi | Gregorian)
   Rendered directly above each section intro box; attaches to it.
========================= */
.section-date-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 95%;
    margin: auto;
    padding: 9px 18px;
    position: relative;
    z-index: 2;
    border: 1px solid rgba(39, 231, 255, 0.28);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(180deg, rgba(39, 231, 255, 0.1), rgba(255, 85, 248, 0.05)), var(--surface);
    box-shadow: 0 -6px 18px rgba(39, 231, 255, 0.06);
    color: var(--muted);
}

.section-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.section-date-hijri {
    color: #ff9d3f; /* orange tone: distinct, low-emphasis */
    text-shadow: 0 0 10px rgba(255, 157, 63, 0.4);
}

.section-date-shamsi {
    color: #2dd4a8; /* green tone: primary emphasis: Shamsi in the middle */
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(45, 212, 168, 0.45);
}

.section-date-gregorian {
    color: #3fa9f5; /* blue tone */
    font-feature-settings: "tnum";
    letter-spacing: 0.2px;
    text-shadow: 0 0 10px rgba(63, 169, 245, 0.3);
}

.section-date-divider {
    flex: 1 1 auto;
    align-self: stretch;
    max-height: 22px;
    min-width: 14px;
    margin: auto 0;
    border-left: 1px solid rgba(39, 231, 255, 0.35);
    background: linear-gradient(180deg, rgba(39, 231, 255, 0.04), rgba(39, 231, 255, 0.35), rgba(39, 231, 255, 0.04));
    box-shadow: 1px 0 6px rgba(39, 231, 255, 0.18);
}

:root.light-theme .section-date-bar {
    border-color: rgba(8, 125, 158, 0.35);
    background: linear-gradient(180deg, rgba(39, 231, 255, 0.08), rgba(255, 255, 255, 0.6)), #fff;
    box-shadow: 0 -4px 14px rgba(8, 125, 158, 0.08);
    margin: auto;
}

:root.light-theme .section-date-hijri {
    color: #d97316;
    text-shadow: none;
}

:root.light-theme .section-date-shamsi {
    color: #0e9d76;
    text-shadow: none;
}

:root.light-theme .section-date-gregorian {
    color: #1d7fd6;
}

:root.light-theme .section-date-divider {
    border-left-color: rgba(8, 125, 158, 0.35);
    background: linear-gradient(180deg, rgba(8, 125, 158, 0.04), rgba(8, 125, 158, 0.35), rgba(8, 125, 158, 0.04));
    box-shadow: 1px 0 6px rgba(8, 125, 158, 0.15);
}

@media (max-width: 768px) {
    .section-date-bar {
        gap: 6px;
        margin: auto;
        padding: 7px 10px;
    }

    .section-date {
        font-size: 10.5px;
    }

    .section-date-shamsi {
        font-size: 11.5px;
    }

    .section-date-divider {
        flex: 0 1 10px;
    }
}

/* Information page continuous sections */
.information-sections {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.information-section {
    padding: 4px 0 14px;
}

    .information-section:last-child {
        border-bottom: 0
    }

    .information-section h2 {
        margin: 0 0 8px;
        color: var(--text);
        font-size: clamp(20px,3vw,26px)
    }

    .information-section p {
        margin: 0 0 8px;
        max-width: 920px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.9
    }

.information-terms h2 {
    color: var(--purple);
    text-shadow: 0 0 12px rgba(178,80,255,.55)
}

.information-privacy h2 {
    color: #6f9fe8;
    text-shadow: 0 0 12px rgba(111,159,232,.55)
}

.information-about h2 {
    color: var(--cyan);
    text-shadow: 0 0 12px rgba(39,231,255,.55)
}

.information-learning h2 {
    color: #34d399;
    text-shadow: 0 0 12px rgba(52,211,153,.55)
}

.information-software h2 {
    color: #6fe3ff;
    text-shadow: 0 0 12px rgba(111,227,255,.55)
}

.information-ads h2 {
    color: #ffd166;
    text-shadow: 0 0 12px rgba(255,209,102,.55)
}

/* Link to the rules / privacy / about page, shown at the bottom of the
   section-specific information page. */
.site-rules-link {
    display: block;
    margin-top: 26px;
    color: var(--cyan);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none
}

    .site-rules-link:hover {
        text-decoration: underline
    }

@media(max-width:768px) {
    .information-sections {
        gap: 24px
    }

    .information-section {
        padding-bottom: 20px
    }

        .information-section p {
            font-size: 14px;
            line-height: 2
        }
}

/* Removed decorative lamps from software details. */
.neon-lamp {
    display: none !important;
}

/* Exact mobile footer treatment from the supplied reference. */
@media (max-width: 768px) {
    .fixed-footer {
        left: 0;
        bottom: 0;
        width: 100%;
        min-height: 68px;
        transform: none;
        flex-direction: column;
        justify-content: center;
        gap: 0;
        padding: 8px 10px max(8px, env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }

        .fixed-footer .mobile-footer-nav {
            width: 100%;
            justify-content: space-around;
            gap: 4px;
        }

            .fixed-footer .mobile-footer-nav a {
                flex: 1 1 0;
                min-width: 0;
                flex-direction: column;
                gap: 2px;
                padding: 4px 2px;
            }

            .fixed-footer .mobile-footer-nav img {
                width: 48px;
                height: 48px;
                transition: filter .25s ease, transform .25s ease;
            }

            .fixed-footer .mobile-footer-nav a:nth-child(1) img {
                filter: drop-shadow(0 0 7px rgba(245, 158, 11, .9)) drop-shadow(0 0 15px rgba(245, 158, 11, .55)) !important;
            }

            .fixed-footer .mobile-footer-nav a:nth-child(2) img {
                filter: drop-shadow(0 0 7px rgba(52, 211, 153, .9)) drop-shadow(0 0 15px rgba(52, 211, 153, .55)) !important;
            }

            .fixed-footer .mobile-footer-nav a:nth-child(3) img {
                filter: drop-shadow(0 0 7px rgba(20, 165, 238, .9)) drop-shadow(0 0 15px rgba(20, 165, 238, .55)) !important;
            }
}

/* Advertising plan selector */
.ads-plan-page {
    display: flex;
    flex-direction: column;
    gap: 25px
}

.ads-plan-hero {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 28px 34px;
    min-height: 170px;
    background-image: url('/assets/ads/ads-plan-hero.png');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 100%
}

    .ads-plan-hero h1 {
        margin: 0;
        font-size: clamp(32px,5vw,56px);
        color: var(--text)
    }

    .ads-plan-hero p {
        margin: 12px 0 0;
        color: var(--muted);
        font-size: 17px
    }

.ads-plan-tabs {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px
}

.ads-plan-tab {
    min-height: 76px;
    border: 1px solid rgba(160,190,230,.22);
    border-radius: 14px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: 22px;
    font-weight: 800;
    cursor: pointer;
    transition: .25s
}

    .ads-plan-tab span {
        margin-inline-start: 10px
    }

    .ads-plan-tab.is-selected {
        color: var(--cyan);
        border-color: var(--cyan);
        box-shadow: 0 0 15px rgba(39,231,255,.5),inset 0 0 18px rgba(39,231,255,.1)
    }

.ads-plan-options {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.ads-plan-option {
    display: none;
    align-items: center;
    gap: 28px;
    min-height: 150px;
    padding: 24px 28px;
    border: 1px solid rgba(150,180,220,.25);
    border-radius: 16px;
    background: var(--surface);
    animation: adsPlanIn .3s ease
}

    .ads-plan-option.is-visible {
        display: flex
    }

.ads-plan-option-icon {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border: 2px solid currentColor;
    border-radius: 14px;
    font-size: 54px;
    flex: none
}

.ads-plan-description {
    flex: 1
}

    .ads-plan-description h2 {
        margin: 0 0 8px;
        color: var(--text);
        font-size: clamp(22px,3vw,34px)
    }

    .ads-plan-description p {
        margin: 0;
        color: var(--muted);
        line-height: 1.9
    }

.ads-plan-price {
    font-size: clamp(22px,3vw,34px);
    color: var(--cyan);
    white-space: nowrap
}

.ads-plan-price-gold {
    color: var(--gold)
}

.ads-plan-price-pink {
    color: var(--pink)
}

.ads-plan-buy {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border: 2px solid var(--cyan);
    border-radius: 12px;
    color: var(--cyan);
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap
}

.ads-plan-buy-gold {
    border-color: var(--gold);
    color: var(--gold)
}

.ads-plan-buy-pink {
    border-color: var(--pink);
    color: var(--pink)
}

.ads-plan-buy:hover {
    box-shadow: 0 0 16px currentColor
}

@keyframes adsPlanIn {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media(max-width:768px) {
    .ads-plan-hero {
        padding: 20px;
        gap: 14px;
        min-height: 130px;
        background-size: auto 100%
    }

        .ads-plan-hero p {
            font-size: 13px
        }

    .ads-plan-tabs {
        gap: 8px
    }

    .ads-plan-tab {
        min-height: 58px;
        font-size: 14px
    }

        .ads-plan-tab span {
            display: none
        }

    .ads-plan-option {
        flex-wrap: wrap;
        gap: 14px;
        padding: 18px;
        min-height: 0
    }

    .ads-plan-option-icon {
        width: 58px;
        height: 58px;
        font-size: 38px
    }

    .ads-plan-description {
        min-width: calc(100% - 80px)
    }

        .ads-plan-description h2 {
            font-size: 19px
        }

        .ads-plan-description p {
            font-size: 12px
        }

    .ads-plan-price {
        margin-inline-start: auto;
        font-size: 20px
    }

    .ads-plan-buy {
        padding: 10px 18px;
        font-size: 16px
    }
}

/* Footer navigation: inactive icons are gray; the current page keeps its own color and glow. */
.fixed-footer .mobile-footer-nav a img {
    filter: grayscale(1) brightness(1.45) contrast(.72) !important;
    transition: filter .25s ease, transform .25s ease;
}

.fixed-footer .mobile-footer-nav a:nth-child(1) img,
.fixed-footer .mobile-footer-nav a:nth-child(2) img,
.fixed-footer .mobile-footer-nav a:nth-child(3) img {
    filter: grayscale(1) brightness(1.45) contrast(.72) !important;
}

.fixed-footer .mobile-footer-nav a:is(.is-active, [aria-current="page"]) img {
    transform: scale(1.06);
}

.fixed-footer .mobile-footer-nav a:is(.is-active, [aria-current="page"]):nth-child(1) img {
    filter: grayscale(0) drop-shadow(0 0 6px #f59e0b) drop-shadow(0 0 14px rgba(245, 158, 11, .8)) !important;
}

.fixed-footer .mobile-footer-nav a:is(.is-active, [aria-current="page"]):nth-child(2) img {
    filter: grayscale(0) drop-shadow(0 0 6px #34d399) drop-shadow(0 0 14px rgba(52, 211, 153, .8)) !important;
}

.fixed-footer .mobile-footer-nav a:is(.is-active, [aria-current="page"]):nth-child(3) img {
    filter: grayscale(0) drop-shadow(0 0 6px #14a5ee) drop-shadow(0 0 14px rgba(20, 165, 238, .8)) !important;
}

/* Footer active-state contract: each icon and every part of its glow share one color. */
.fixed-footer .mobile-footer-nav a:nth-child(1) {
    --footer-active-rgb: 20, 165, 238;
}

.fixed-footer .mobile-footer-nav a:nth-child(2) {
    --footer-active-rgb: 52, 211, 153;
}

.fixed-footer .mobile-footer-nav a:nth-child(3) {
    --footer-active-rgb: 245, 158, 11;
}

.fixed-footer .mobile-footer-nav a:is(.is-active, [aria-current="page"]) {
    background: transparent !important;
    box-shadow: none !important;
}

    .fixed-footer .mobile-footer-nav a:is(.is-active, [aria-current="page"]) img {
        filter: grayscale(0) drop-shadow(0 0 6px rgb(var(--footer-active-rgb))) drop-shadow(0 0 14px rgba(var(--footer-active-rgb), .8)) !important;
    }

/* Keep active footer glow aligned with each SVG's native icon color. */
.fixed-footer .mobile-footer-nav a:not(.is-active):not([aria-current="page"]) img {
    filter: grayscale(1) brightness(1.45) contrast(.72) !important;
}

.fixed-footer .mobile-footer-nav a.is-active:nth-child(1) img,
.fixed-footer .mobile-footer-nav a[aria-current="page"]:nth-child(1) img {
    filter: grayscale(0) drop-shadow(0 0 6px #14a5ee) drop-shadow(0 0 14px rgba(20, 165, 238, .8)) !important;
}

.fixed-footer .mobile-footer-nav a.is-active:nth-child(2) img,
.fixed-footer .mobile-footer-nav a[aria-current="page"]:nth-child(2) img {
    filter: grayscale(0) drop-shadow(0 0 6px #34d399) drop-shadow(0 0 14px rgba(52, 211, 153, .8)) !important;
}

.fixed-footer .mobile-footer-nav a.is-active:nth-child(3) img,
.fixed-footer .mobile-footer-nav a[aria-current="page"]:nth-child(3) img {
    filter: grayscale(0) drop-shadow(0 0 6px #f59e0b) drop-shadow(0 0 14px rgba(245, 158, 11, .8)) !important;
}

/* Homepage class banner typography and image-fitted glow. */
.class-banner-content h2,
.class-banner-content p {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 600;
    line-height: 1.35;
}

.active-card .class-details span {
    font-size: 18px;
    font-weight: 700;
}

.active-card.neon-frame {
    box-shadow: 0 0 14px rgba(111, 159, 232, 0.34), 0 0 30px rgba(111, 159, 232, 0.12);
}

    .active-card.neon-frame::before {
        padding: 7px;
        background: rgba(111, 185, 255, 0.18);
        box-shadow: 0 0 5px rgba(111, 190, 255, 0.24);
    }

    .active-card.neon-frame::after {
        inset: 2px;
        border-width: 2px;
        box-shadow: 0 0 8px rgba(111, 190, 255, 0.52), inset 0 0 7px rgba(111, 159, 232, 0.12);
    }

/* Slightly increase spacing between the header controls. */
.header-actions {
    gap: 18px;
}

@media (max-width: 768px) {
    .header-actions {
        gap: 16px;
    }
}

@media (max-width: 460px) {
    .header-actions {
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .active-card {
        min-height: 240px;
    }

    .class-banner-content h2,
    .class-banner-content p {
        font-size: clamp(20px, 6vw, 28px);
        line-height: 1.4;
    }

    .active-card .class-details span {
        font-size: 14px;
    }
}

/* Mobile plan cards: full-width title, borderless price row. */
@media (max-width: 768px) {
    .ads-plan-options .ads-plan-option {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "description description"
            "price buy";
        align-items: center;
        gap: 10px 14px;
        min-height: 0;
        padding: 15px 14px 14px;
    }

    .ads-plan-options .ads-plan-option-icon {
        display: none;
    }

    .ads-plan-options .ads-plan-description {
        grid-area: description;
        width: 100%;
        min-width: 0 !important;
    }

        .ads-plan-options .ads-plan-description h2 {
            margin: 0 !important;
            overflow: visible;
            text-overflow: clip;
            white-space: nowrap;
            font-size: 14px !important;
            line-height: 1.6;
        }

        .ads-plan-options .ads-plan-description p {
            display: none;
        }

    .ads-plan-options .ads-plan-price {
        grid-area: price;
        justify-self: start;
        margin: 0 !important;
        padding: 7px;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 17px !important;
    }

    .ads-plan-options .ads-plan-buy {
        grid-area: buy;
        justify-self: end;
        min-height: 40px;
        padding: 8px 18px !important;
        font-size: 14px !important;
    }
}

/* Keep the footer slogan on one line on narrow phones; ES7 remains on its own line because the markup contains an explicit line break. */
@media (max-width: 460px) {
    .footer .slogan h2 {
        white-space: nowrap;
        font-size: clamp(15px, 4.7vw, 20px);
    }
}

/* Keep scrollbars available for interaction while hiding their visual chrome on every device. */
* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    *::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

/* Mobile page-swipe feedback. The gesture itself is handled in scripts.js. */
@media (max-width: 768px) {
    .page-shell {
        touch-action: pan-y pinch-zoom;
        will-change: transform, opacity;
    }

        .page-shell.is-swipe-dragging {
            transform: translate3d(var(--swipe-offset, 0), 0, 0);
            opacity: .985;
            transition: transform .08s linear, opacity .08s linear;
        }

        .page-shell.is-swipe-navigating {
            transform: translate3d(var(--swipe-exit-offset, 0), 0, 0);
            opacity: 0;
            transition: transform .17s cubic-bezier(.22, .61, .36, 1), opacity .17s ease-out;
        }
}

@media (prefers-reduced-motion: reduce) {
    .page-shell.is-swipe-dragging,
    .page-shell.is-swipe-navigating {
        transform: none;
        opacity: 1;
        transition: none;
    }
}

/* Keep the mobile chrome attached to the viewport. These elements live
   outside .page-shell so swipe transforms cannot change their containing block. */
@media (max-width: 768px) {
    body {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        z-index: 1000;
    }

    .fixed-footer {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        transform: none !important;
        z-index: 1000;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
}

/* Desktop footer transparency: match the header gradient alphas exactly
   (--header-bg: 0.68 -> 0.42 at 58% -> 0.22; light theme 0.72 -> 0.5 -> 0.28).
   No opaque base layer underneath, same as the header, so the page background
   actually shows through. */
@media (min-width: 1025px) {
    .footer {
        background: linear-gradient(135deg, rgba(10, 25, 44, 0.68), rgba(5, 11, 22, 0.42) 58%, rgba(5, 11, 22, 0.22));
    }

    :root.light-theme .footer {
        background: linear-gradient(135deg, rgba(226, 243, 255, 0.72), rgba(202, 229, 247, 0.5) 58%, rgba(205, 229, 246, 0.28));
    }
}

/* Desktop polish for the review composer (ads list page): the fields stack
   (name above message) and the whole form is centered by a single max-width.
   Buttons keep the base (mobile) colors. Mobile stays untouched. */
@media (min-width: 1025px) {
    .testimonial-composer {
        padding: 20px 24px;
        border-radius: 15px;
        background: linear-gradient(180deg, rgba(9, 24, 44, .96), rgba(5, 13, 27, .94));
        box-shadow: 0 0 18px rgba(39, 231, 255, .26), inset 0 0 20px rgba(39, 231, 255, .06);
    }

    .testimonial-composer-prompt > span {
        color: var(--text);
        font-size: 17px;
        font-weight: 700;
    }

    /* Wide, right-aligned (RTL) form on desktop. */
    .testimonial-form {
        max-width: 1280px;
        width: 40%;
        margin-inline: auto;
    }

    .testimonial-form-fields {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .testimonial-form label {
        gap: 8px;
        align-items: flex-start;
        text-align: right;
    }

        .testimonial-form label span {
            font-size: 13px;
            letter-spacing: .01em;
        }

    .testimonial-form input,
    .testimonial-form textarea {
        width: 100%;
        padding: 11px 14px;
        border-radius: 10px;
        font-size: 15px;
        text-align: right;
        background: rgba(2, 10, 22, .85);
        transition: border-color .25s ease, box-shadow .25s ease;
    }

    .testimonial-form textarea {
        min-height: 118px;
        line-height: 1.9;
        resize: vertical;
    }

        .testimonial-form input::placeholder,
        .testimonial-form textarea::placeholder {
            color: var(--muted);
            opacity: .75;
        }

    .testimonial-form-actions {
        justify-content: center;
        margin-top: 14px;
        gap: 12px;
    }
}

/* ===========================
   Site Content media — enforce 16:9
   Images/videos rendered from the SiteContentOverrides table must always
   use a 16:9 frame on both desktop and mobile, regardless of the source
   file's own aspect ratio.
=========================== */

    .course-img img,
    .ad-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.featured-banner-image {
    aspect-ratio: 16 / 9;
    min-height: 0;
    max-height: none;
    height: auto;
}

    .featured-banner-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.detail-video-wrapper,
.course-video-wrapper {
    aspect-ratio: 16 / 9;
    min-height: 0;
    max-height: none;
}

    .detail-video-wrapper .detail-video-preview,
    .course-video-wrapper .course-video-preview {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.software-image {
    min-height: 0;
}

.software-detail-intro .detail-video-wrapper {
    max-width: none;
    aspect-ratio: 16 / 9;
}

/* Ads-plan hero uses a SiteContent image as background: keep a 16:9 frame. */
.ads-plan-hero {
    aspect-ratio: 16 / 9;
    min-height: 0;
    background-size: cover;
    background-position: center;
}

/* Azmoonestan welcome card renders a SiteContent image: keep a 16:9 frame. */
.azmoonestan-page .welcome-card {
    aspect-ratio: 16 / 9;
    min-height: 0;
}

    .azmoonestan-page .welcome-card-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }