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

:root {
    --neon-cyan: #00f0ff;
    --neon-magenta: #ff2a6d;
    --neon-purple: #9d4edd;
    --neon-yellow: #fcee0a;
    --cyber-dark: #050508;
    --cyber-panel: #0c0c14;
    --cyber-panel-alt: #12121f;
    --cyber-border: rgba(0, 240, 255, 0.22);
    --font-display: "Orbitron", sans-serif;
    --font-body: "Rajdhani", sans-serif;
    --font-mono: "Share Tech Mono", monospace;
    --page-padding: clamp(1rem, 4vw, 4rem);
    --header-height: 72px;
    --glow-cyan: 0 0 12px rgba(0, 240, 255, 0.55), 0 0 32px rgba(0, 240, 255, 0.2);
    --glow-magenta: 0 0 12px rgba(255, 42, 109, 0.55), 0 0 32px rgba(255, 42, 109, 0.2);
}

:root,
[data-theme="dark"] {
    --color-bg: var(--cyber-dark);
    --color-surface: var(--cyber-panel);
    --color-surface-alt: var(--cyber-panel-alt);
    --color-border: var(--cyber-border);
    --color-text: #e8f4ff;
    --color-muted: #7a8fa8;
    --color-primary: var(--neon-magenta);
    --color-primary-hover: #ff4d8a;
    --color-accent: var(--neon-cyan);
    --color-header-bg: rgba(5, 5, 8, 0.88);
    --color-badge-hit: var(--neon-magenta);
    --color-badge-popular: var(--neon-cyan);
    --grid-color: rgba(0, 240, 255, 0.04);
    --scanline-color: rgba(0, 0, 0, 0.35);
}

[data-theme="light"] {
    --color-bg: #e4eaf4;
    --color-surface: #f8faff;
    --color-surface-alt: #dce6f5;
    --color-border: rgba(157, 78, 221, 0.25);
    --color-text: #0a0e1a;
    --color-muted: #4a5568;
    --color-primary: #d4145a;
    --color-primary-hover: #b01048;
    --color-accent: #0099aa;
    --color-header-bg: rgba(228, 234, 244, 0.92);
    --color-badge-hit: #d4145a;
    --color-badge-popular: #007a8a;
    --grid-color: rgba(157, 78, 221, 0.06);
    --scanline-color: rgba(255, 255, 255, 0.15);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 500;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.nav-open {
    overflow: hidden;
}

.mono {
    font-family: var(--font-mono);
}

.neon-cyan {
    color: var(--neon-cyan);
    text-shadow: var(--glow-cyan);
}

.neon-magenta {
    color: var(--neon-magenta);
    text-shadow: var(--glow-magenta);
}

/* Ambient layers */
.grid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
}

.scanlines {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        var(--scanline-color) 2px,
        var(--scanline-color) 4px
    );
    opacity: 0.35;
}

.container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0 var(--page-padding);
}

a {
    color: inherit;
}

main {
    position: relative;
    z-index: 1;
}

/* Header */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-header-bg);
    backdrop-filter: blur(12px);
    padding-top: env(safe-area-inset-top, 0);
}

.header__glow {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--neon-cyan),
        var(--neon-magenta),
        transparent
    );
    opacity: 0.7;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    gap: 1rem;
    position: relative;
}

.header__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.header__buttons {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.header__logout-form,
.header-user__logout-form {
    margin: 0;
}

.header-user {
    position: relative;
}

.header-user__toggle {
    list-style: none;
    cursor: pointer;
    gap: 0.35rem;
}

.header-user__toggle::-webkit-details-marker {
    display: none;
}

.header-user__prefix {
    font-size: 0.65rem;
    opacity: 0.85;
}

.header-user__name {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-user__menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 12rem;
    padding: 0.85rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 0 24px rgba(0, 240, 255, 0.04);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    z-index: 120;
}

.header-user__email {
    font-size: 0.68rem;
    color: var(--color-muted);
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
    word-break: break-all;
}

.header-user__logout {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neon-magenta);
    background: transparent;
    border: 1px solid rgba(255, 42, 109, 0.35);
    cursor: pointer;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    transition: background 0.2s, color 0.2s;
}

.header-user__logout:hover {
    background: var(--neon-magenta);
    color: #fff;
}

.header-user[open] .header-user__toggle {
    background: var(--neon-yellow);
    color: var(--cyber-dark);
    box-shadow: 0 0 12px rgba(252, 238, 10, 0.55), 0 0 32px rgba(252, 238, 10, 0.2);
}

.logo {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: 0.12em;
}

.logo__accent {
    color: var(--neon-cyan);
    text-shadow: var(--glow-cyan);
}

.logo__bracket {
    color: var(--neon-magenta);
    opacity: 0.8;
}

.logo:hover .logo__accent {
    color: var(--neon-magenta);
    text-shadow: var(--glow-magenta);
}

.nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-shrink: 1;
    min-width: 0;
}

.nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.8rem;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.2s, text-shadow 0.2s;
}

.nav__prefix {
    color: var(--neon-cyan);
    opacity: 0.7;
}

.nav__badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.15rem 0.35rem;
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    vertical-align: middle;
    border: 1px solid currentColor;
    clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
}

.nav__badge--test {
    color: var(--neon-magenta);
    opacity: 0.85;
}

.page-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    border: 1px solid currentColor;
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

.page-badge--test {
    color: var(--neon-magenta);
    box-shadow: 0 0 12px rgba(255, 42, 109, 0.25);
}

.nav a:hover {
    color: var(--neon-cyan);
    text-shadow: var(--glow-cyan);
}

.theme-toggle,
.burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--neon-cyan);
    cursor: pointer;
    flex-shrink: 0;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.theme-toggle:hover,
.burger:hover {
    border-color: var(--neon-cyan);
    box-shadow: var(--glow-cyan);
}

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

.theme-toggle__icon--moon {
    display: block;
}

[data-theme="light"] .theme-toggle__icon--sun {
    display: block;
}

[data-theme="light"] .theme-toggle__icon--moon {
    display: none;
}

.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.burger span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 0 auto;
    background: var(--neon-cyan);
    box-shadow: 0 0 6px var(--neon-cyan);
    transition: transform 0.2s, opacity 0.2s;
}

.burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger.is-open span:nth-child(2) {
    opacity: 0;
}

.burger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.6rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.btn--header {
    background: transparent;
    color: var(--neon-cyan);
    border: 1px solid var(--neon-cyan);
    box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.08);
}

.btn--header:hover {
    background: var(--neon-cyan);
    color: var(--cyber-dark);
    box-shadow: var(--glow-cyan);
}

[data-theme="light"] .btn--header {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

[data-theme="light"] .btn--header:hover {
    background: var(--color-primary);
    color: #fff;
}

.btn--header-login {
    background: rgba(252, 238, 10, 0.12);
    color: var(--neon-yellow);
    border-color: var(--neon-yellow);
    box-shadow: inset 0 0 16px rgba(252, 238, 10, 0.14);
}

.btn--header-login:hover {
    background: var(--neon-yellow);
    color: var(--cyber-dark);
    box-shadow: 0 0 12px rgba(252, 238, 10, 0.55), 0 0 32px rgba(252, 238, 10, 0.2);
}

[data-theme="light"] .btn--header-login {
    background: rgba(252, 238, 10, 0.18);
    color: #8a7000;
    border-color: #c9b800;
    box-shadow: inset 0 0 12px rgba(200, 170, 0, 0.12);
}

[data-theme="light"] .btn--header-login:hover {
    background: var(--neon-yellow);
    color: #0a0e1a;
    box-shadow: 0 0 12px rgba(200, 170, 0, 0.4);
}

.btn--primary {
    background: var(--neon-magenta);
    color: #fff;
    box-shadow: var(--glow-magenta);
}

.btn--primary:hover {
    background: var(--color-primary-hover);
}

[data-theme="light"] .btn--primary {
    background: var(--color-primary);
}

/* Hero visual banner */
.hero-visual {
    position: relative;
    width: 100%;
    border-bottom: 1px solid var(--color-border);
}

.hero-visual__media {
    position: relative;
    width: 100%;
    height: clamp(420px, 72vh, 820px);
    overflow: hidden;
    background: var(--cyber-dark);
}

.hero-visual__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}

.hero-visual__image--dark {
    filter: saturate(1.15) contrast(1.08);
}

.hero-visual__image--light {
    display: none;
    filter: saturate(0.95) contrast(1.05) brightness(1.02);
}

[data-theme="light"] .hero-visual__image--dark {
    display: none;
}

[data-theme="light"] .hero-visual__image--light {
    display: block;
}

.hero-visual__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 5, 8, 0.15) 0%, transparent 35%),
        linear-gradient(0deg, var(--color-bg) 0%, transparent 45%),
        linear-gradient(90deg, rgba(5, 5, 8, 0.5) 0%, transparent 30%, transparent 70%, rgba(5, 5, 8, 0.45) 100%),
        linear-gradient(135deg, rgba(0, 240, 255, 0.12) 0%, transparent 40%),
        linear-gradient(225deg, rgba(255, 42, 109, 0.14) 0%, transparent 45%);
    pointer-events: none;
}

[data-theme="light"] .hero-visual__overlay {
    background:
        linear-gradient(180deg, rgba(228, 234, 244, 0.1) 0%, transparent 30%),
        linear-gradient(0deg, var(--color-bg) 0%, transparent 40%),
        linear-gradient(90deg, rgba(228, 234, 244, 0.35) 0%, transparent 35%, transparent 65%, rgba(228, 234, 244, 0.3) 100%),
        linear-gradient(135deg, rgba(0, 153, 170, 0.1) 0%, transparent 40%),
        linear-gradient(225deg, rgba(212, 20, 90, 0.08) 0%, transparent 45%);
}

.hero-visual__scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 240, 255, 0.03) 3px,
        rgba(0, 240, 255, 0.03) 4px
    );
    pointer-events: none;
    animation: hero-scan 8s linear infinite;
}

@keyframes hero-scan {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

.hero-visual__frame {
    position: absolute;
    inset: var(--page-padding);
    pointer-events: none;
}

.hero-visual__corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border-color: var(--neon-cyan);
    border-style: solid;
    opacity: 0.7;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}

.hero-visual__corner--tl {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px;
}

.hero-visual__corner--tr {
    top: 0;
    right: 0;
    border-width: 2px 2px 0 0;
}

.hero-visual__corner--bl {
    bottom: 0;
    left: 0;
    border-width: 0 0 2px 2px;
}

.hero-visual__corner--br {
    bottom: 0;
    right: 0;
    border-width: 0 2px 2px 0;
}

.hero-visual__tags {
    position: absolute;
    bottom: calc(var(--page-padding) + 1.5rem);
    left: calc(var(--page-padding) + 1.25rem);
    right: var(--page-padding);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    z-index: 2;
}

.hero-visual__tag {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neon-cyan);
    background: rgba(5, 5, 8, 0.65);
    border: 1px solid rgba(0, 240, 255, 0.35);
    padding: 0.45rem 0.9rem;
    backdrop-filter: blur(6px);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.hero-visual__tag--magenta {
    color: var(--neon-magenta);
    border-color: rgba(255, 42, 109, 0.4);
}

[data-theme="light"] .hero-visual__tag {
    background: rgba(248, 250, 255, 0.8);
}

.hero-visual::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-magenta), transparent);
    z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
    .hero-visual__scan {
        animation: none;
    }
}

/* Cyber hero */
.cyber-hero {
    padding: 3rem 0 3rem;
    text-align: center;
    position: relative;
}

.cyber-hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-magenta), transparent);
}

.cyber-hero__status {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-bottom: 1.5rem;
    letter-spacing: 0.08em;
}

.cyber-hero__title {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 14vw, 9rem);
    font-weight: 900;
    letter-spacing: 0.2em;
    line-height: 1;
    color: var(--color-text);
    margin-bottom: 1rem;
    position: relative;
}

.cyber-hero__subtitle {
    font-family: var(--font-mono);
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    color: var(--neon-cyan);
    letter-spacing: 0.35em;
    margin-bottom: 2.5rem;
    text-shadow: var(--glow-cyan);
}

.cyber-hero__hud {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.hud-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--color-border);
    background: rgba(0, 240, 255, 0.03);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.hud-chip__label {
    font-size: 0.65rem;
    color: var(--color-muted);
    letter-spacing: 0.1em;
}

.hud-chip__value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--neon-cyan);
}

/* Glitch effect */
.glitch {
    position: relative;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--neon-magenta);
    clip-path: inset(0 0 65% 0);
    animation: glitch-top 3s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: 2px 0 var(--neon-cyan);
    clip-path: inset(65% 0 0 0);
    animation: glitch-bottom 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-top {
    0%, 90%, 100% { transform: translate(0); }
    92% { transform: translate(-3px, 1px); }
    94% { transform: translate(3px, -1px); }
    96% { transform: translate(-2px, 0); }
}

@keyframes glitch-bottom {
    0%, 88%, 100% { transform: translate(0); }
    90% { transform: translate(2px, 1px); }
    93% { transform: translate(-3px, -1px); }
    95% { transform: translate(2px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .glitch::before,
    .glitch::after {
        animation: none;
    }

    .product-card__aura,
    .product-card__aura-ring,
    .product-card__aura::before {
        animation: none !important;
    }
}

/* Catalog */
.catalog {
    padding: 0;
}

.product-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
    min-height: min(520px, 70vh);
    position: relative;
    transition: box-shadow 0.3s;
}

.product-card:hover {
    box-shadow: inset 0 0 60px rgba(0, 240, 255, 0.04);
}

.product-card--reverse .product-card__visual {
    order: 2;
}

.product-card--reverse .product-card__body {
    order: 1;
    margin-left: auto;
}

.product-card__visual {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: var(--page-padding);
    min-height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.product-card__index {
    position: absolute;
    top: var(--page-padding);
    left: var(--page-padding);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.08);
    line-height: 1;
    z-index: 1;
}

.product-card__aura {
    position: absolute;
    top: 45%;
    left: 52%;
    width: min(300px, 62%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

.product-card__aura::before {
    content: "";
    position: absolute;
    inset: -8%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--aura-a, rgba(0, 240, 255, 0.35)) 70deg,
        transparent 140deg,
        var(--aura-b, rgba(255, 42, 109, 0.25)) 220deg,
        transparent 300deg
    );
    opacity: 0.14;
    filter: blur(14px);
    animation: aura-flow 22s linear infinite;
}

.product-card__aura-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.product-card__aura-ring--outer {
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at 35% 35%,
        var(--aura-a, rgba(0, 240, 255, 0.18)) 0%,
        transparent 58%
    );
    animation: aura-wave-outer 16s ease-in-out infinite;
}

.product-card__aura-ring--mid {
    width: 68%;
    height: 68%;
    background: radial-gradient(
        circle at 65% 55%,
        var(--aura-b, rgba(255, 42, 109, 0.14)) 0%,
        transparent 55%
    );
    animation: aura-wave-mid 16s ease-in-out infinite;
    animation-delay: -5s;
}

.product-card__aura-ring--inner {
    width: 38%;
    height: 38%;
    border-color: rgba(255, 255, 255, 0.1);
    background: radial-gradient(
        circle at 50% 50%,
        var(--aura-c, rgba(157, 78, 221, 0.12)) 0%,
        transparent 62%
    );
    animation: aura-wave-inner 12s ease-in-out infinite;
    animation-delay: -2s;
}

.product-card__visual--1 {
    --aura-a: rgba(0, 240, 255, 0.32);
    --aura-b: rgba(255, 42, 109, 0.22);
    --aura-c: rgba(0, 240, 255, 0.15);
}

.product-card__visual--2 {
    --aura-a: rgba(255, 42, 109, 0.3);
    --aura-b: rgba(157, 78, 221, 0.22);
    --aura-c: rgba(255, 42, 109, 0.14);
}

.product-card__visual--3 {
    --aura-a: rgba(157, 78, 221, 0.3);
    --aura-b: rgba(252, 238, 10, 0.18);
    --aura-c: rgba(157, 78, 221, 0.14);
}

@keyframes aura-flow {
    to { transform: rotate(360deg); }
}

@keyframes aura-wave-outer {
    0%, 100% {
        opacity: 0.32;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.48;
        transform: translate(calc(-50% + 1%), calc(-50% - 1%)) scale(1.015);
    }
}

@keyframes aura-wave-mid {
    0%, 100% {
        opacity: 0.28;
        transform: translate(-50%, -50%) scale(0.98);
    }
    50% {
        opacity: 0.42;
        transform: translate(calc(-50% - 1%), calc(-50% + 1%)) scale(1.02);
    }
}

@keyframes aura-wave-inner {
    0%, 100% {
        opacity: 0.22;
        transform: translate(-50%, -50%) scale(0.97);
    }
    50% {
        opacity: 0.38;
        transform: translate(-50%, -50%) scale(1.03);
    }
}

.product-card__visual--1 {
    background-image:
        radial-gradient(circle at 30% 40%, rgba(0, 240, 255, 0.18) 0%, transparent 50%),
        linear-gradient(160deg, rgba(5, 5, 8, 0.78) 0%, rgba(26, 10, 46, 0.62) 50%, rgba(10, 22, 40, 0.82) 100%),
        var(--visual-bg, linear-gradient(160deg, #050508 0%, #1a0a2e 50%, #0a1628 100%));
}

.product-card__visual--2 {
    background-image:
        radial-gradient(circle at 70% 30%, rgba(255, 42, 109, 0.2) 0%, transparent 50%),
        linear-gradient(160deg, rgba(10, 8, 24, 0.78) 0%, rgba(45, 10, 61, 0.62) 50%, rgba(13, 26, 45, 0.82) 100%),
        var(--visual-bg, linear-gradient(160deg, #0a0818 0%, #2d0a3d 50%, #0d1a2d 100%));
}

.product-card__visual--3 {
    background-image:
        radial-gradient(circle at 50% 60%, rgba(157, 78, 221, 0.22) 0%, transparent 50%),
        linear-gradient(160deg, rgba(8, 8, 16, 0.78) 0%, rgba(26, 16, 64, 0.62) 50%, rgba(10, 32, 48, 0.82) 100%),
        var(--visual-bg, linear-gradient(160deg, #080810 0%, #1a1040 50%, #0a2030 100%));
}

.product-card__visual--4 {
    background:
        radial-gradient(circle at 20% 70%, rgba(0, 240, 255, 0.2) 0%, transparent 45%),
        radial-gradient(circle at 80% 20%, rgba(255, 42, 109, 0.25) 0%, transparent 45%),
        linear-gradient(160deg, #050508 0%, #150820 100%);
}

.product-card__visual--5 {
    background:
        radial-gradient(circle at 60% 50%, rgba(252, 238, 10, 0.12) 0%, transparent 40%),
        linear-gradient(160deg, #0a0a12 0%, #1a1535 50%, #0d2840 100%);
}

[data-theme="light"] .product-card__visual--1 {
    background-image:
        radial-gradient(circle at 30% 40%, rgba(0, 153, 170, 0.22) 0%, transparent 50%),
        linear-gradient(160deg, rgba(220, 232, 245, 0.88) 0%, rgba(200, 216, 240, 0.75) 50%, rgba(184, 208, 232, 0.9) 100%),
        var(--visual-bg, linear-gradient(160deg, #dce8f5 0%, #c8d8f0 50%, #b8d0e8 100%));
}

[data-theme="light"] .product-card__visual--2 {
    background-image:
        radial-gradient(circle at 70% 30%, rgba(212, 20, 90, 0.15) 0%, transparent 50%),
        linear-gradient(160deg, rgba(232, 224, 240, 0.88) 0%, rgba(216, 204, 232, 0.75) 50%, rgba(204, 216, 240, 0.9) 100%),
        var(--visual-bg, linear-gradient(160deg, #e8e0f0 0%, #d8cce8 50%, #ccd8f0 100%));
}

[data-theme="light"] .product-card__visual--3 {
    background-image:
        radial-gradient(circle at 50% 60%, rgba(157, 78, 221, 0.15) 0%, transparent 50%),
        linear-gradient(160deg, rgba(224, 232, 245, 0.88) 0%, rgba(208, 216, 240, 0.75) 50%, rgba(200, 224, 240, 0.9) 100%),
        var(--visual-bg, linear-gradient(160deg, #e0e8f5 0%, #d0d8f0 50%, #c8e0f0 100%));
}

[data-theme="light"] .product-card__visual--4 {
    background:
        radial-gradient(circle at 20% 70%, rgba(0, 153, 170, 0.25) 0%, transparent 45%),
        radial-gradient(circle at 80% 20%, rgba(212, 20, 90, 0.15) 0%, transparent 45%),
        linear-gradient(160deg, #e4eaf4 0%, #d8e4f0 100%);
}

[data-theme="light"] .product-card__visual--5 {
    background:
        radial-gradient(circle at 60% 50%, rgba(252, 200, 10, 0.15) 0%, transparent 40%),
        linear-gradient(160deg, #e8eef8 0%, #d8e4f5 50%, #cce0f0 100%);
}

[data-theme="light"] .product-card__index {
    color: rgba(0, 0, 0, 0.06);
}

.product-card__visual-label {
    position: relative;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--neon-cyan);
    background: rgba(5, 5, 8, 0.6);
    border: 1px solid rgba(0, 240, 255, 0.4);
    padding: 0.5rem 1rem;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.product-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--page-padding);
    gap: 0.75rem;
    max-width: 720px;
    position: relative;
}

.product-card__corners::before,
.product-card__corners::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: var(--neon-cyan);
    border-style: solid;
    opacity: 0.5;
}

.product-card__corners::before {
    top: 1.5rem;
    left: 1.5rem;
    border-width: 2px 0 0 2px;
}

.product-card__corners::after {
    bottom: 1.5rem;
    right: 1.5rem;
    border-width: 0 2px 2px 0;
}

.product-card__category {
    font-size: 0.7rem;
    color: var(--neon-magenta);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.product-card__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.product-card__description {
    font-size: 1.1rem;
    line-height: 1.55;
}

.product-card__subtitle {
    font-size: 0.95rem;
    color: var(--color-muted);
}

.product-card__tagline {
    font-size: 0.85rem;
    color: var(--neon-cyan);
    opacity: 0.85;
    border-left: 2px solid var(--neon-magenta);
    padding-left: 0.75rem;
}

.product-card__quote {
    margin: 1rem 0 0;
    padding: 0.85rem 1rem;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-muted);
    font-style: normal;
    border-left: 2px solid var(--neon-cyan);
    background: rgba(0, 240, 255, 0.04);
}

.product-card__includes {
    margin-top: 1.25rem;
}

.product-card__includes-title {
    font-size: 0.68rem;
    color: var(--neon-magenta);
    letter-spacing: 0.12em;
    margin-bottom: 0.65rem;
}

.product-card__includes-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.product-card__includes-list li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--color-text);
}

.product-card__includes-list li::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--neon-cyan);
    font-family: var(--font-mono);
}

.product-card__pricing {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.product-card__price-note {
    font-size: 0.68rem;
    color: var(--color-muted);
    letter-spacing: 0.06em;
}

.product-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.product-card__badge {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
    border: 1px solid;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

.product-card__badge--hit {
    color: var(--color-badge-hit);
    border-color: var(--neon-magenta);
    background: rgba(255, 42, 109, 0.1);
    box-shadow: 0 0 12px rgba(255, 42, 109, 0.15);
}

.product-card__badge--popular {
    color: var(--color-badge-popular);
    border-color: var(--neon-cyan);
    background: rgba(0, 240, 255, 0.08);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.12);
}

.product-card__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-left: auto;
}

.product-card__price {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--neon-yellow);
    text-shadow: 0 0 10px rgba(252, 238, 10, 0.4);
}

[data-theme="light"] .product-card__price {
    color: #8a7000;
    text-shadow: none;
}

.product-card__disclaimer {
    font-size: 0.7rem;
    color: var(--color-muted);
    margin-top: 0.5rem;
}

/* About & Blog */
.about,
.blog-preview {
    padding: 4rem 0;
    position: relative;
}

.about {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.about::before,
.blog-preview::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-purple), transparent);
    opacity: 0.5;
}

.section-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--neon-cyan);
    text-shadow: var(--glow-cyan);
}

[data-theme="light"] .section-title {
    color: var(--color-primary);
    text-shadow: none;
}

.about__inner,
.blog-preview__inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    padding: 0 var(--page-padding);
}

.about__text,
.blog-preview__text {
    color: var(--color-muted);
    font-size: 1.1rem;
}

.about__link {
    margin-top: 1.5rem;
}

/* About page */
.about-page {
    padding: 3rem 0 5rem;
    position: relative;
    z-index: 1;
}

.about-page__container {
    max-width: 960px;
}

.about-page__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-bottom: 2rem;
    letter-spacing: 0.08em;
}

.about-page__breadcrumb a {
    color: var(--neon-cyan);
    text-decoration: none;
    transition: text-shadow 0.2s;
}

.about-page__breadcrumb a:hover {
    text-shadow: var(--glow-cyan);
}

.about-page__sep {
    opacity: 0.4;
}

.about-page__hero {
    text-align: center;
    margin-bottom: 3rem;
}

.about-page__hero::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 2.5rem;
    background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-magenta), transparent);
}

.about-page__code {
    font-size: 0.75rem;
    color: var(--neon-magenta);
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
}

.about-page__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.about-page__lead {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    color: var(--color-muted);
    max-width: 640px;
    margin: 0 auto 2rem;
    line-height: 1.65;
}

.about-page__hud {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.about-page__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.about-page__panel {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: clamp(1.5rem, 4vw, 2rem);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    box-shadow: inset 0 0 40px rgba(0, 240, 255, 0.03);
}

.about-page__corners::before,
.about-page__corners::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: var(--neon-cyan);
    border-style: solid;
    opacity: 0.45;
}

.about-page__corners::before {
    top: 1rem;
    left: 1rem;
    border-width: 2px 0 0 2px;
}

.about-page__corners::after {
    bottom: 1rem;
    right: 1rem;
    border-width: 0 2px 2px 0;
}

.about-page__section-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--neon-cyan);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.about-page__text {
    color: var(--color-text);
    font-size: 1.05rem;
    line-height: 1.65;
    margin-bottom: 1rem;
}

.about-page__text:last-child {
    margin-bottom: 0;
}

.about-page__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.about-page__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.about-page__list li span {
    color: var(--neon-magenta);
    flex-shrink: 0;
    font-size: 0.75rem;
    padding-top: 0.15rem;
}

.about-page__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.about-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 1.5rem;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.about-card:hover {
    border-color: rgba(0, 240, 255, 0.35);
    box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.04);
}

.about-card__label {
    font-size: 0.65rem;
    color: var(--neon-magenta);
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.about-card__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.65rem;
    letter-spacing: 0.04em;
}

.about-card__text {
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.about-page__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.about-page__cta-text {
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    color: var(--neon-cyan);
    letter-spacing: 0.12em;
    margin-bottom: 0.25rem;
}

/* Auth page */
.auth-page {
    padding: 3rem 0 5rem;
    position: relative;
    z-index: 1;
}

.auth-page__container {
    max-width: 480px;
}

.auth-page__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-bottom: 2rem;
    letter-spacing: 0.08em;
}

.auth-page__breadcrumb a {
    color: var(--neon-cyan);
    text-decoration: none;
    transition: text-shadow 0.2s;
}

.auth-page__breadcrumb a:hover {
    text-shadow: var(--glow-cyan);
}

.auth-page__sep {
    opacity: 0.4;
}

.auth-page__header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-page__code {
    font-size: 0.75rem;
    color: var(--neon-magenta);
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
}

.auth-page__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.auth-page__lead {
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    color: var(--color-muted);
    line-height: 1.65;
}

.auth-page__panel {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: clamp(1.5rem, 4vw, 2rem);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    box-shadow: inset 0 0 40px rgba(0, 240, 255, 0.03);
}

.auth-page__corners::before,
.auth-page__corners::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: var(--neon-cyan);
    border-style: solid;
    opacity: 0.45;
}

.auth-page__corners::before {
    top: 1rem;
    left: 1rem;
    border-width: 2px 0 0 2px;
}

.auth-page__corners::after {
    bottom: 1rem;
    right: 1rem;
    border-width: 0 2px 2px 0;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.auth-tabs__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--neon-cyan);
    background: transparent;
    border: 1px solid var(--color-border);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.auth-tabs__btn:hover {
    border-color: var(--neon-cyan);
    box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.08);
}

.auth-tabs__btn.is-active {
    background: var(--neon-cyan);
    color: var(--cyber-dark);
    border-color: var(--neon-cyan);
    box-shadow: var(--glow-cyan);
}

.auth-tabs__btn--register.is-active {
    background: var(--neon-yellow);
    color: var(--cyber-dark);
    border-color: var(--neon-yellow);
    box-shadow: 0 0 12px rgba(252, 238, 10, 0.55), 0 0 32px rgba(252, 238, 10, 0.2);
}

[data-theme="light"] .auth-tabs__btn {
    color: var(--color-primary);
}

[data-theme="light"] .auth-tabs__btn.is-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

[data-theme="light"] .auth-tabs__btn--register.is-active {
    background: var(--neon-yellow);
    color: #0a0e1a;
    border-color: #c9b800;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.auth-form__label {
    font-size: 0.68rem;
    color: var(--neon-cyan);
    letter-spacing: 0.1em;
}

.auth-form__input {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    outline: none;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-form__input::placeholder {
    color: var(--color-muted);
    opacity: 0.7;
}

.auth-form__input:focus {
    border-color: var(--neon-cyan);
    box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.1), 0 0 8px rgba(0, 240, 255, 0.15);
}

.auth-form__error {
    font-size: 0.8rem;
    color: var(--neon-magenta);
}

.auth-form__errors {
    padding: 0.85rem 1rem;
    background: rgba(255, 42, 109, 0.08);
    border: 1px solid rgba(255, 42, 109, 0.35);
    font-size: 0.85rem;
    color: var(--neon-magenta);
}

.auth-form__errors p + p {
    margin-top: 0.35rem;
}

.auth-form__note {
    font-size: 0.78rem;
    color: var(--color-muted);
    line-height: 1.5;
}

.auth-form__note a {
    color: var(--neon-cyan);
    text-decoration: none;
}

.auth-form__note a:hover {
    text-shadow: var(--glow-cyan);
}

.auth-form__submit {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.95rem 1.5rem;
    font-size: 0.78rem;
}

.auth-social {
    margin-top: 1.75rem;
    padding-top: 0;
    text-align: left;
}

.auth-social__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    font-size: 0.68rem;
    color: var(--color-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.auth-social__divider::before,
.auth-social__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.auth-social__label {
    margin: 0 0 0.75rem;
    font-size: 0.65rem;
    color: var(--neon-cyan);
    letter-spacing: 0.1em;
}

[data-theme="light"] .auth-social__label {
    color: var(--color-primary);
}

.auth-social__list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.auth-social__hint {
    margin: 0.75rem 0 0;
    font-size: 0.65rem;
    color: var(--color-muted);
    letter-spacing: 0.08em;
}

.auth-page__actions {
    display: flex;
    justify-content: center;
    margin-top: 1.75rem;
}

/* Site messages */
.site-messages {
    position: fixed;
    top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 0.5rem);
    left: 50%;
    z-index: 110;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    max-width: min(92vw, 420px);
    padding: 0.35rem 0.65rem;
    background: rgba(5, 5, 8, 0.5);
    border: 1px solid rgba(0, 240, 255, 0.18);
    backdrop-filter: blur(6px);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    animation: site-message-in 0.25s ease-out;
}

[data-theme="light"] .site-messages {
    background: rgba(248, 250, 255, 0.72);
    border-color: rgba(0, 153, 170, 0.22);
}

.site-messages.is-hiding {
    opacity: 0;
    transform: translateX(-50%) translateY(-0.25rem);
}

.site-message {
    margin: 0;
    padding: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

[data-theme="light"] .site-message {
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.55);
}

.site-message--success {
    color: var(--neon-cyan);
}

.site-message--error {
    color: var(--neon-magenta);
}

.site-message--info {
    color: var(--neon-yellow);
}

@keyframes site-message-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-0.35rem);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-messages {
        animation: none;
        transition: none;
    }
}

/* Course learning (purchased) */
.course-learning {
    padding: 3rem 0 5rem;
    position: relative;
    z-index: 1;
}

.course-learning__container {
    max-width: 960px;
}

.course-learning__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-bottom: 2rem;
    letter-spacing: 0.08em;
}

.course-learning__breadcrumb a {
    color: var(--neon-cyan);
    text-decoration: none;
    transition: text-shadow 0.2s;
}

.course-learning__breadcrumb a:hover {
    text-shadow: var(--glow-cyan);
}

.course-learning__sep {
    opacity: 0.4;
}

.course-welcome {
    text-align: center;
    margin-bottom: 3rem;
}

.course-welcome__code {
    font-size: 0.75rem;
    color: var(--neon-cyan);
    letter-spacing: 0.14em;
    margin-bottom: 0.75rem;
}

.course-welcome__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.course-welcome__video {
    max-width: 820px;
    margin: 0 auto 1.25rem;
}

.course-welcome__description {
    max-width: 680px;
    margin: 0 auto;
    color: var(--color-muted);
    line-height: 1.6;
    text-align: left;
}

.course-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--cyber-panel);
    border: 1px solid var(--color-border);
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.course-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.course-video--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    font-size: 0.8rem;
}

.course-module + .course-module {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--color-border);
}

.course-module__index {
    font-size: 0.72rem;
    color: var(--neon-cyan);
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
}

.course-module__title {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 3vw, 1.5rem);
    margin-bottom: 0.65rem;
}

.course-module__description {
    color: var(--color-muted);
    line-height: 1.55;
    margin-bottom: 1.5rem;
    max-width: 720px;
}

.course-lessons {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.course-lesson {
    display: grid;
    grid-template-columns: minmax(240px, 360px) 1fr;
    gap: 1.25rem;
    align-items: start;
    padding: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.course-lesson__media {
    position: relative;
}

.course-lesson__duration {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    font-size: 0.68rem;
    padding: 0.2rem 0.45rem;
    background: rgba(5, 5, 8, 0.75);
    border: 1px solid rgba(0, 240, 255, 0.25);
    color: var(--neon-cyan);
}

[data-theme="light"] .course-lesson__duration {
    background: rgba(248, 250, 255, 0.85);
}

.course-lesson__title {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
    line-height: 1.35;
}

.course-lesson__text {
    color: var(--color-muted);
    line-height: 1.55;
    font-size: 0.92rem;
}

.course-learning__empty {
    text-align: center;
    color: var(--color-muted);
    padding: 2rem 0;
}

.course-learning__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 3rem;
}

@media (max-width: 768px) {
    .course-lesson {
        grid-template-columns: 1fr;
    }

    .course-welcome__description {
        text-align: center;
    }
}

/* Checkout page */
.checkout-page {
    padding: 3rem 0 5rem;
    position: relative;
    z-index: 1;
}

.checkout-page__container {
    max-width: 640px;
}

.checkout-page__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-bottom: 2rem;
    letter-spacing: 0.08em;
}

.checkout-page__breadcrumb a {
    color: var(--neon-cyan);
    text-decoration: none;
    transition: text-shadow 0.2s;
}

.checkout-page__breadcrumb a:hover {
    text-shadow: var(--glow-cyan);
}

.checkout-page__sep {
    opacity: 0.4;
}

.checkout-page__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.checkout-page__code {
    font-size: 0.75rem;
    color: var(--neon-cyan);
    letter-spacing: 0.14em;
    margin-bottom: 0.75rem;
}

.checkout-page__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.checkout-page__lead {
    color: var(--color-muted);
    line-height: 1.55;
    max-width: 520px;
    margin: 0 auto;
}

.checkout-page__panel {
    position: relative;
    padding: 1.75rem 1.5rem 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    box-shadow: inset 0 0 40px rgba(0, 240, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.checkout-page__corners::before,
.checkout-page__corners::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: var(--neon-cyan);
    border-style: solid;
    opacity: 0.45;
}

.checkout-page__corners::before {
    top: 1rem;
    left: 1rem;
    border-width: 2px 0 0 2px;
}

.checkout-page__corners::after {
    bottom: 1rem;
    right: 1rem;
    border-width: 0 2px 2px 0;
}

.checkout-order__label,
.checkout-user__label {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: var(--neon-cyan);
    margin-bottom: 0.5rem;
}

.checkout-order__product {
    font-size: 1.15rem;
    line-height: 1.35;
    margin-bottom: 0.35rem;
}

.checkout-order__category {
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-bottom: 0.75rem;
}

.checkout-order__price {
    font-size: 1.5rem;
    color: var(--neon-cyan);
    margin-bottom: 0.25rem;
}

.checkout-order__note {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.checkout-user__name {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.checkout-user__email {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.checkout-stub {
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.checkout-stub__status {
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
}

.checkout-stub__text {
    color: var(--color-muted);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.checkout-stub__btn {
    width: 100%;
    max-width: 320px;
    opacity: 0.55;
    cursor: not-allowed;
}

.checkout-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* FAQ page */
.faq-page {
    padding: 3rem 0 5rem;
    position: relative;
    z-index: 1;
}

.faq-page__container {
    max-width: 860px;
}

.faq-page__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-bottom: 2rem;
    letter-spacing: 0.08em;
}

.faq-page__breadcrumb a {
    color: var(--neon-cyan);
    text-decoration: none;
    transition: text-shadow 0.2s;
}

.faq-page__breadcrumb a:hover {
    text-shadow: var(--glow-cyan);
}

.faq-page__sep {
    opacity: 0.4;
}

.faq-page__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.faq-page__code {
    font-size: 0.75rem;
    color: var(--neon-magenta);
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
}

.faq-page__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.faq-page__lead {
    font-size: clamp(1rem, 2vw, 1.1rem);
    color: var(--color-muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.65;
}

.faq-page__panel {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    box-shadow: inset 0 0 40px rgba(0, 240, 255, 0.03);
}

.faq-page__corners::before,
.faq-page__corners::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: var(--neon-cyan);
    border-style: solid;
    opacity: 0.45;
}

.faq-page__corners::before {
    top: 1rem;
    left: 1rem;
    border-width: 2px 0 0 2px;
}

.faq-page__corners::after {
    bottom: 1rem;
    right: 1rem;
    border-width: 0 2px 2px 0;
}

.faq-page__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    border: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.15);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: border-color 0.2s, box-shadow 0.2s;
}

[data-theme="light"] .faq-item {
    background: rgba(255, 255, 255, 0.35);
}

.faq-item[open] {
    border-color: rgba(0, 240, 255, 0.35);
    box-shadow: inset 0 0 24px rgba(0, 240, 255, 0.04);
}

.faq-item__question {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.faq-item__question::-webkit-details-marker {
    display: none;
}

.faq-item__index {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--neon-magenta);
    letter-spacing: 0.08em;
    padding-top: 0.2rem;
}

.faq-item__text {
    flex: 1;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--color-text);
}

.faq-item__toggle {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    position: relative;
    border: 1px solid var(--color-border);
    clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
    transition: border-color 0.2s;
}

.faq-item__toggle::before,
.faq-item__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.55rem;
    height: 2px;
    background: var(--neon-cyan);
    transform: translate(-50%, -50%);
    transition: transform 0.2s, opacity 0.2s;
}

.faq-item__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-item__toggle {
    border-color: rgba(0, 240, 255, 0.45);
}

.faq-item[open] .faq-item__toggle::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
}

.faq-item__answer {
    padding: 0 1.25rem 1.25rem 3.25rem;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.faq-item__answer p {
    margin: 0;
}

.faq-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.faq-page__actions-note {
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    color: var(--neon-cyan);
    letter-spacing: 0.12em;
    margin-bottom: 0.25rem;
}

/* Video page */
.video-page {
    padding: 3rem 0 5rem;
    position: relative;
    z-index: 1;
}

.video-page__container {
    max-width: 960px;
}

.video-page__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-bottom: 2rem;
    letter-spacing: 0.08em;
}

.video-page__breadcrumb a {
    color: var(--neon-cyan);
    text-decoration: none;
    transition: text-shadow 0.2s;
}

.video-page__breadcrumb a:hover {
    text-shadow: var(--glow-cyan);
}

.video-page__sep {
    opacity: 0.4;
}

.video-page__header {
    text-align: center;
    margin-bottom: 2rem;
}

.video-page__code {
    font-size: 0.75rem;
    color: var(--neon-magenta);
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
}

.video-page__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.video-page__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}

.video-page__lead {
    font-size: clamp(1rem, 2vw, 1.1rem);
    color: var(--color-muted);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.65;
}

.video-page__notice {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.85rem 1.25rem;
    margin-bottom: 2rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--neon-magenta);
    background: rgba(255, 42, 109, 0.08);
    border: 1px dashed rgba(255, 42, 109, 0.45);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.video-page__notice-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neon-magenta);
    box-shadow: 0 0 10px var(--neon-magenta);
    animation: video-notice-pulse 1.5s ease-in-out infinite;
}

@keyframes video-notice-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.video-page__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.video-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.video-card:hover {
    border-color: rgba(0, 240, 255, 0.3);
    box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.04);
}

.video-card__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background:
        linear-gradient(135deg, rgba(0, 240, 255, 0.06) 0%, transparent 50%),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.03) 0,
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px,
            transparent 4px
        ),
        var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

.video-card__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 100%;
}

.video-card__play {
    width: 3rem;
    height: 3rem;
    border: 2px solid rgba(0, 240, 255, 0.5);
    border-radius: 50%;
    position: relative;
    opacity: 0.6;
}

.video-card__play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent var(--neon-cyan);
}

.video-card__signal {
    font-size: 0.65rem;
    color: var(--color-muted);
    letter-spacing: 0.12em;
    opacity: 0.7;
}

.video-card__duration {
    position: absolute;
    bottom: 0.65rem;
    right: 0.65rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.65rem;
    color: var(--color-text);
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid var(--color-border);
}

[data-theme="light"] .video-card__duration {
    background: rgba(255, 255, 255, 0.85);
}

.video-card__test-label {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.6rem;
    color: var(--neon-magenta);
    background: rgba(255, 42, 109, 0.12);
    border: 1px solid rgba(255, 42, 109, 0.45);
}

.video-card__body {
    padding: 1.15rem 1.25rem 1.35rem;
}

.video-card__category {
    font-size: 0.65rem;
    color: var(--neon-cyan);
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.video-card__title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.35;
    margin-bottom: 0.5rem;
}

.video-card__text {
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}

.video-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.video-page__actions-note {
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    color: var(--neon-cyan);
    letter-spacing: 0.12em;
    margin-bottom: 0.25rem;
}

/* Product page */
.product-page {
    padding: 3rem 0 5rem;
    position: relative;
    z-index: 1;
}

.product-page__container {
    max-width: 960px;
}

.product-page__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-bottom: 2rem;
    letter-spacing: 0.08em;
}

.product-page__breadcrumb a {
    color: var(--neon-cyan);
    text-decoration: none;
    transition: text-shadow 0.2s;
}

.product-page__breadcrumb a:hover {
    text-shadow: var(--glow-cyan);
}

.product-page__sep {
    opacity: 0.4;
}

.product-page__hero {
    text-align: center;
    margin-bottom: 2.5rem;
}

.product-page__hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.product-page__category {
    font-size: 0.7rem;
    color: var(--neon-magenta);
    letter-spacing: 0.15em;
    margin: 0;
}

.product-page__badge {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.75rem;
    border: 1px solid;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

.product-page__badge--hit {
    color: var(--color-badge-hit);
    border-color: var(--neon-magenta);
    background: rgba(255, 42, 109, 0.1);
}

.product-page__badge--popular {
    color: var(--color-badge-popular);
    border-color: var(--neon-cyan);
    background: rgba(0, 240, 255, 0.08);
}

.product-page__code {
    font-size: 0.75rem;
    color: var(--neon-magenta);
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
}

.product-page__title {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.product-page__lead {
    font-size: clamp(1rem, 2vw, 1.15rem);
    color: var(--color-muted);
    max-width: 680px;
    margin: 0 auto 1.25rem;
    line-height: 1.65;
}

.product-page__subtitle {
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    color: var(--color-text);
    max-width: 640px;
    margin: 0 auto 1.25rem;
    line-height: 1.6;
    opacity: 0.9;
}

.product-page__quote {
    max-width: 640px;
    margin: 0 auto 1.75rem;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-muted);
    font-style: normal;
    text-align: left;
    border-left: 2px solid var(--neon-cyan);
    background: rgba(0, 240, 255, 0.04);
}

.product-page__hud {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.product-page__modules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.product-module {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.03);
    transition: border-color 0.2s;
}

.product-module:hover {
    border-color: rgba(0, 240, 255, 0.28);
}

.product-module__corners::before,
.product-module__corners::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--neon-cyan);
    border-style: solid;
    opacity: 0.4;
}

.product-module__corners::before {
    top: 0.85rem;
    left: 0.85rem;
    border-width: 2px 0 0 2px;
}

.product-module__corners::after {
    bottom: 0.85rem;
    right: 0.85rem;
    border-width: 0 2px 2px 0;
}

.product-module__index {
    font-size: 0.65rem;
    color: var(--neon-magenta);
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.product-module__title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.35;
    margin-bottom: 0.75rem;
    color: var(--neon-cyan);
}

[data-theme="light"] .product-module__title {
    color: var(--color-accent);
}

.product-module__text {
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.product-module__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.product-module__list li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--color-muted);
}

.product-module__list li::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--neon-cyan);
    font-family: var(--font-mono);
}

.product-page__upsell {
    position: relative;
    padding: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: 2rem;
    background: rgba(255, 42, 109, 0.06);
    border: 1px dashed rgba(255, 42, 109, 0.4);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    text-align: center;
}

.product-page__upsell-corners::before,
.product-page__upsell-corners::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: var(--neon-magenta);
    border-style: solid;
    opacity: 0.35;
}

.product-page__upsell-corners::before {
    top: 1rem;
    left: 1rem;
    border-width: 2px 0 0 2px;
}

.product-page__upsell-corners::after {
    bottom: 1rem;
    right: 1rem;
    border-width: 0 2px 2px 0;
}

.product-page__upsell-label {
    font-size: 0.68rem;
    color: var(--neon-magenta);
    letter-spacing: 0.12em;
    margin-bottom: 0.65rem;
}

.product-page__upsell-title {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}

.product-page__upsell-text {
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 1.25rem;
}

.product-page__extras {
    margin-bottom: 2rem;
}

.product-page__extras-panel {
    position: relative;
    padding: clamp(1.5rem, 4vw, 2rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.03);
}

.product-page__extras-corners::before,
.product-page__extras-corners::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: var(--neon-cyan);
    border-style: solid;
    opacity: 0.4;
}

.product-page__extras-corners::before {
    top: 1rem;
    left: 1rem;
    border-width: 2px 0 0 2px;
}

.product-page__extras-corners::after {
    bottom: 1rem;
    right: 1rem;
    border-width: 0 2px 2px 0;
}

.product-page__extras-title {
    font-size: 0.75rem;
    color: var(--neon-cyan);
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
}

.product-page__extras-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1.5rem;
}

.product-page__extras-list li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--color-text);
}

.product-page__extras-list li::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--neon-magenta);
    font-family: var(--font-mono);
}

.product-page__bonuses {
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 42, 109, 0.05);
    border: 1px solid rgba(255, 42, 109, 0.25);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.product-page__bonuses-title {
    font-size: 0.72rem;
    color: var(--neon-magenta);
    letter-spacing: 0.12em;
    margin-bottom: 0.85rem;
}

.product-page__bonuses-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-page__bonuses-list li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-muted);
}

.product-page__bonuses-list li::before {
    content: "+";
    position: absolute;
    left: 0;
    color: var(--neon-magenta);
    font-family: var(--font-mono);
}

.product-page__buy {
    text-align: center;
    margin-bottom: 2rem;
}

.product-page__buy-panel {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 420px;
    padding: 2rem 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
    box-shadow: inset 0 0 40px rgba(0, 240, 255, 0.04);
}

.product-page__buy-corners::before,
.product-page__buy-corners::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: var(--neon-cyan);
    border-style: solid;
    opacity: 0.45;
}

.product-page__buy-corners::before {
    top: 1rem;
    left: 1rem;
    border-width: 2px 0 0 2px;
}

.product-page__buy-corners::after {
    bottom: 1rem;
    right: 1rem;
    border-width: 0 2px 2px 0;
}

.product-page__buy-label {
    font-size: 0.72rem;
    color: var(--neon-cyan);
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
}

.product-page__buy-price {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    color: var(--neon-yellow);
    text-shadow: 0 0 12px rgba(252, 238, 10, 0.35);
    margin-bottom: 0.35rem;
}

[data-theme="light"] .product-page__buy-price {
    color: #8a7000;
    text-shadow: none;
}

.product-page__buy-note {
    font-size: 0.75rem;
    color: var(--color-muted);
    letter-spacing: 0.06em;
    margin-bottom: 1.25rem;
}

.product-page__buy-btn {
    width: 100%;
    justify-content: center;
}

.product-page__disclaimer {
    margin-top: 1rem;
    font-size: 0.68rem;
    color: var(--color-muted);
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.product-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

/* Footer */
.footer {
    margin-top: auto;
    position: relative;
    z-index: 1;
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0));
    background:
        radial-gradient(ellipse at 20% 0%, rgba(255, 42, 109, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(0, 240, 255, 0.12) 0%, transparent 50%),
        linear-gradient(180deg, #1a0828 0%, #2a0e3d 45%, #12081c 100%);
    border-top: 1px solid rgba(255, 42, 109, 0.35);
    padding: 0;
}

[data-theme="light"] .footer {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(212, 20, 90, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(0, 153, 170, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, #d8c0e8 0%, #c8a8dc 45%, #e0d0ec 100%);
    border-top-color: rgba(157, 78, 221, 0.35);
}

.footer__watermark {
    display: block;
    width: 100%;
    height: auto;
    color: rgba(255, 42, 109, 0.18);
    filter: drop-shadow(0 0 40px rgba(255, 42, 109, 0.25));
    padding: clamp(2.5rem, 6vw, 4.5rem) max(1rem, env(safe-area-inset-left, 0), env(safe-area-inset-right, 0)) clamp(0.75rem, 2.5vw, 2rem);
    margin: 0;
    margin-bottom: -0.5rem;
    user-select: none;
    pointer-events: none;
    box-sizing: border-box;
    overflow: visible;
}

.footer__watermark text {
    fill: currentColor;
}

[data-theme="light"] .footer__watermark {
    color: rgba(255, 255, 255, 0.45);
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.2));
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: 1rem var(--page-padding) 0;
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.footer__col {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    align-self: start;
}

.footer__col--left {
    align-items: flex-start;
    text-align: left;
}

.footer__col--center {
    align-items: center;
    text-align: center;
    justify-content: flex-start;
}

.footer__col--right {
    align-items: flex-end;
    text-align: right;
}

.footer__company {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    font-weight: 600;
    line-height: 1.45;
    color: #fff;
    max-width: 22rem;
}

[data-theme="light"] .footer__company {
    color: #1a0e28;
}

.footer__meta {
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}

[data-theme="light"] .footer__meta {
    color: rgba(26, 14, 40, 0.85);
}

.footer__social {
    margin-top: 0.5rem;
}

.footer__social-label {
    font-size: 0.65rem;
    color: var(--neon-cyan);
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
    opacity: 0.85;
}

[data-theme="light"] .footer__social-label {
    color: var(--color-accent);
}

.footer__social-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-text);
    background: rgba(5, 5, 8, 0.55);
    border: 1px solid var(--color-border);
    text-decoration: none;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: color 0.2s, border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.2s;
}

[data-theme="light"] .social-btn {
    background: rgba(26, 14, 40, 0.08);
    color: #1a0e28;
}

.social-btn:hover {
    transform: translateY(-2px);
}

.social-btn--telegram:hover {
    color: #fff;
    border-color: #29b6f6;
    background: rgba(41, 182, 246, 0.2);
    box-shadow: 0 0 16px rgba(41, 182, 246, 0.45);
}

.social-btn--vk:hover {
    color: #fff;
    border-color: #4c75a3;
    background: rgba(76, 117, 163, 0.25);
    box-shadow: 0 0 16px rgba(76, 117, 163, 0.45);
}

.social-btn--youtube:hover {
    color: #fff;
    border-color: var(--neon-magenta);
    background: rgba(255, 42, 109, 0.2);
    box-shadow: var(--glow-magenta);
}

.social-btn--instagram:hover {
    color: #fff;
    border-color: var(--neon-purple);
    background: rgba(157, 78, 221, 0.25);
    box-shadow: 0 0 16px rgba(157, 78, 221, 0.45);
}

.social-btn--yandex {
    background: rgba(252, 63, 29, 0.08);
    border-color: rgba(252, 63, 29, 0.28);
}

[data-theme="light"] .social-btn--yandex {
    background: rgba(252, 63, 29, 0.06);
    border-color: rgba(252, 63, 29, 0.35);
}

.social-btn__logo {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
    transition: filter 0.2s, transform 0.2s, opacity 0.2s;
}

.social-btn__logo--yandex {
    opacity: 0.92;
    filter: drop-shadow(0 0 5px rgba(252, 63, 29, 0.35));
}

.social-btn--yandex:hover .social-btn__logo--yandex {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(252, 63, 29, 0.75));
    transform: scale(1.06);
}

.social-btn--yandex:hover {
    color: #fff;
    border-color: #fc3f1d;
    background: rgba(252, 63, 29, 0.25);
    box-shadow: 0 0 16px rgba(252, 63, 29, 0.45);
}

.social-btn__logo--vk {
    opacity: 0.92;
    filter: drop-shadow(0 0 5px rgba(0, 119, 255, 0.35));
}

.social-btn--vk:hover .social-btn__logo--vk {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(0, 119, 255, 0.75));
    transform: scale(1.06);
}

.social-btn--mailru {
    background: rgba(0, 95, 249, 0.08);
    border-color: rgba(0, 95, 249, 0.28);
}

[data-theme="light"] .social-btn--mailru {
    background: rgba(0, 95, 249, 0.06);
    border-color: rgba(0, 95, 249, 0.35);
}

.social-btn__logo--mailru {
    opacity: 0.92;
    filter: drop-shadow(0 0 5px rgba(0, 95, 249, 0.35));
}

.social-btn--mailru:hover .social-btn__logo--mailru {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(255, 158, 0, 0.75));
    transform: scale(1.06);
}

.social-btn--mailru:hover {
    color: #fff;
    border-color: #005ff9;
    background: rgba(0, 95, 249, 0.25);
    box-shadow: 0 0 16px rgba(0, 95, 249, 0.45);
}

.footer__nav {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.footer__nav a {
    font-family: var(--font-body);
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    font-weight: 500;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: color 0.2s, text-shadow 0.2s;
}

[data-theme="light"] .footer__nav a {
    color: rgba(26, 14, 40, 0.9);
}

.footer__nav a:hover {
    color: var(--neon-cyan);
    text-shadow: var(--glow-cyan);
}

[data-theme="light"] .footer__nav a:hover {
    color: var(--color-primary);
    text-shadow: none;
}

.footer__col--center .footer__nav a {
    max-width: 20rem;
}

.footer__nav--offers a {
    white-space: nowrap;
}

.btn--footer {
    margin-top: 0.75rem;
    align-self: flex-start;
    background: var(--cyber-dark);
    color: #fff;
    border: 1px solid rgba(0, 240, 255, 0.5);
    box-shadow: inset 0 0 16px rgba(0, 240, 255, 0.06);
    font-size: 0.7rem;
    padding: 1rem 1.4rem;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
}

.btn--footer:hover {
    background: var(--neon-cyan);
    color: var(--cyber-dark);
    border-color: var(--neon-cyan);
    box-shadow: var(--glow-cyan);
}

[data-theme="light"] .btn--footer {
    background: #1a0e28;
    border-color: rgba(0, 153, 170, 0.5);
}

[data-theme="light"] .btn--footer:hover {
    background: var(--color-accent);
    color: #fff;
}

.footer__disclaimer {
    margin-top: 1.25rem;
    font-size: clamp(0.75rem, 1vw, 0.85rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    max-width: 22rem;
}

[data-theme="light"] .footer__disclaimer {
    color: rgba(26, 14, 40, 0.7);
}

/* Legal pages */
.legal-page {
    padding: 3rem 0 5rem;
    position: relative;
    z-index: 1;
}

.legal-page__container {
    max-width: 860px;
}

.legal-page__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-bottom: 2rem;
    letter-spacing: 0.08em;
}

.legal-page__breadcrumb a {
    color: var(--neon-cyan);
    text-decoration: none;
    transition: text-shadow 0.2s;
}

.legal-page__breadcrumb a:hover {
    text-shadow: var(--glow-cyan);
}

.legal-page__sep {
    opacity: 0.4;
}

.legal-page__header {
    margin-bottom: 2rem;
}

.legal-page__code {
    font-size: 0.75rem;
    color: var(--neon-magenta);
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
}

.legal-page__title {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3.5vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.03em;
    margin-bottom: 0.75rem;
}

.legal-page__meta {
    font-size: 0.8rem;
    color: var(--color-muted);
    letter-spacing: 0.06em;
}

.legal-page__panel {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    box-shadow: inset 0 0 40px rgba(0, 240, 255, 0.03);
}

.legal-page__corners::before,
.legal-page__corners::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: var(--neon-cyan);
    border-style: solid;
    opacity: 0.45;
}

.legal-page__corners::before {
    top: 1rem;
    left: 1rem;
    border-width: 2px 0 0 2px;
}

.legal-page__corners::after {
    bottom: 1rem;
    right: 1rem;
    border-width: 0 2px 2px 0;
}

.legal-section + .legal-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.legal-section__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--neon-cyan);
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

[data-theme="light"] .legal-section__title {
    color: var(--color-accent);
}

.legal-section__text {
    color: var(--color-text);
    font-size: 1.05rem;
    line-height: 1.65;
    margin-bottom: 0.75rem;
}

.legal-section__text:last-child {
    margin-bottom: 0;
}

.legal-section__list {
    margin: 0.5rem 0 0 1.25rem;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.65;
}

.legal-section__list li + li {
    margin-top: 0.35rem;
}

.legal-section__list li::marker {
    color: var(--neon-magenta);
}

.legal-page__actions {
    margin-top: 2rem;
}

/* Responsive — tablet */
@media (max-width: 1024px) {
    .header__inner {
        gap: 0.75rem;
    }

    .header__actions {
        gap: 0.75rem;
    }

    .nav {
        gap: 0.85rem;
    }

    .nav a {
        font-size: 0.72rem;
    }

    .btn--header {
        padding: 0.65rem 1rem;
        font-size: 0.68rem;
    }

    .header__buttons {
        gap: 0.5rem;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer__col--center {
        grid-column: 1 / -1;
        align-items: center;
        text-align: center;
    }

    .footer__col--center .footer__nav a {
        max-width: 28rem;
    }

    .footer__col--right {
        align-items: flex-start;
        text-align: left;
    }

    .footer__nav--offers a {
        white-space: normal;
    }

    .product-card__title {
        font-size: clamp(1.35rem, 4vw, 2.25rem);
    }

    .about-page__cards {
        grid-template-columns: 1fr 1fr;
    }
}

/* Responsive — product cards stack */
@media (max-width: 900px) {
    .product-card,
    .product-card--reverse {
        grid-template-columns: 1fr;
    }

    .product-card--reverse .product-card__visual,
    .product-card--reverse .product-card__body {
        order: unset;
    }

    .product-card--reverse .product-card__body {
        margin-left: 0;
    }

    .product-card {
        min-height: auto;
    }

    .product-card__visual {
        min-height: 260px;
    }

    .product-card__body {
        max-width: none;
    }

    .product-card__actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* Responsive — header mobile menu */
@media (max-width: 1024px) {
    .burger {
        display: flex;
    }

    .nav {
        display: none;
        position: fixed;
        top: calc(var(--header-height) + env(safe-area-inset-top, 0));
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        flex-shrink: unset;
        min-width: unset;
        background: var(--color-header-bg);
        border-bottom: 1px solid var(--color-border);
        padding: 0.5rem var(--page-padding) 1rem;
        backdrop-filter: blur(12px);
        max-height: calc(100dvh - var(--header-height) - env(safe-area-inset-top, 0));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 99;
    }

    .nav.is-open {
        display: flex;
    }

    .nav a {
        justify-content: flex-start;
        padding: 0.9rem 0;
        min-height: 44px;
        font-size: 0.85rem;
        white-space: normal;
        border-bottom: 1px solid var(--color-border);
    }

    .nav a:last-child {
        border-bottom: none;
    }

    .header__buttons {
        display: flex;
    }

    .header__buttons > .btn--header:first-child {
        display: none;
    }
}

/* Responsive — mobile */
@media (max-width: 768px) {
    :root {
        --header-height: 64px;
        --page-padding: clamp(1rem, 5vw, 1.5rem);
    }

    .scanlines {
        opacity: 0.2;
    }

    .grid-bg {
        background-size: 32px 32px;
    }

    .header__actions {
        gap: 0.65rem;
    }

    .theme-toggle,
    .burger {
        width: 40px;
        height: 40px;
    }

    .cyber-hero {
        padding: 2rem 0 2.5rem;
        overflow: hidden;
    }

    .cyber-hero__status {
        font-size: 0.7rem;
        margin-bottom: 1rem;
        padding: 0 0.5rem;
    }

    .cyber-hero__title {
        font-size: clamp(2.25rem, 12vw, 4rem);
        letter-spacing: 0.06em;
        padding: 0 0.25rem;
    }

    .cyber-hero__subtitle {
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        margin-bottom: 1.75rem;
        padding: 0 0.5rem;
        line-height: 1.5;
    }

    .cyber-hero__hud {
        gap: 0.65rem;
        padding: 0 0.25rem;
    }

    .hud-chip {
        flex: 1 1 calc(50% - 0.65rem);
        min-width: 7rem;
        padding: 0.65rem 0.75rem;
    }

    .hud-chip__value {
        font-size: 1.1rem;
    }

    .hero-visual__media {
        height: clamp(280px, 50vh, 480px);
    }

    .hero-visual__corner {
        width: 24px;
        height: 24px;
    }

    .hero-visual__frame {
        inset: var(--page-padding);
    }

    .hero-visual__tags {
        bottom: calc(var(--page-padding) + 1.5rem);
        left: calc(var(--page-padding) + 0.75rem);
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .hero-visual__tag {
        font-size: 0.62rem;
        padding: 0.4rem 0.7rem;
    }

    .product-card__body {
        padding: 1.25rem var(--page-padding) 1.5rem;
    }

    .product-card__corners::before {
        top: 1rem;
        left: 1rem;
    }

    .product-card__corners::after {
        bottom: 1rem;
        right: 1rem;
    }

    .product-card__description {
        font-size: 1rem;
    }

    .product-card__tagline {
        font-size: 0.8rem;
    }

    .product-card__quote {
        font-size: 0.78rem;
        padding: 0.75rem 0.85rem;
    }

    .product-card__includes-list li {
        font-size: 0.88rem;
    }

    .product-card__footer {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .product-card__actions {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .product-card__actions .btn--primary {
        flex: 1 1 auto;
        min-width: 9rem;
        justify-content: center;
    }

    .about,
    .blog-preview {
        padding: 2.5rem 0;
    }

    .about__text,
    .blog-preview__text {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1rem;
        letter-spacing: 0.1em;
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0.5rem var(--page-padding) 1rem;
    }

    .footer__col--left,
    .footer__col--center,
    .footer__col--right {
        align-items: center;
        text-align: center;
    }

    .footer__social-list {
        justify-content: center;
    }

    .footer__company,
    .footer__disclaimer {
        max-width: none;
    }

    .footer__col--center .footer__nav a {
        max-width: none;
    }

    .btn--footer {
        width: 100%;
        max-width: 22rem;
        align-self: center;
    }

    .legal-page {
        padding: 2rem 0 3rem;
    }

    .faq-page {
        padding: 2rem 0 3rem;
    }

    .faq-page__breadcrumb {
        font-size: 0.68rem;
        margin-bottom: 1.5rem;
    }

    .faq-page__title {
        font-size: clamp(1.15rem, 5vw, 1.5rem);
    }

    .faq-page__panel {
        padding: 1.25rem 1rem;
        clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    }

    .faq-page__corners::before {
        left: 0.5rem;
    }

    .faq-item__question {
        padding: 1rem;
        gap: 0.75rem;
    }

    .faq-item__answer {
        padding: 0 1rem 1rem 1rem;
        font-size: 0.95rem;
    }

    .faq-page__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .video-page {
        padding: 2rem 0 3rem;
    }

    .video-page__breadcrumb {
        font-size: 0.68rem;
        margin-bottom: 1.5rem;
    }

    .video-page__title {
        font-size: clamp(1.15rem, 5vw, 1.5rem);
    }

    .video-page__notice {
        font-size: 0.62rem;
        padding: 0.75rem 1rem;
        text-align: center;
    }

    .video-page__grid {
        grid-template-columns: 1fr;
    }

    .video-page__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .product-page {
        padding: 2rem 0 3rem;
    }

    .product-page__breadcrumb {
        font-size: 0.68rem;
        margin-bottom: 1.5rem;
    }

    .product-page__title {
        font-size: clamp(1.1rem, 5vw, 1.45rem);
    }

    .product-page__quote {
        font-size: 0.78rem;
    }

    .product-page__modules {
        grid-template-columns: 1fr;
    }

    .product-page__extras-list {
        grid-template-columns: 1fr;
    }

    .product-page__upsell .btn {
        width: 100%;
        justify-content: center;
    }

    .product-page__actions {
        flex-direction: column;
    }

    .product-page__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .legal-page__breadcrumb {
        font-size: 0.68rem;
        margin-bottom: 1.5rem;
    }

    .legal-page__title {
        font-size: clamp(1.15rem, 5vw, 1.5rem);
    }

    .legal-page__panel {
        padding: 1.25rem 1rem;
        clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    }

    .legal-page__corners::before {
        left: 0.5rem;
    }

    .legal-section + .legal-section {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
    }

    .legal-section__text,
    .legal-section__list {
        font-size: 0.95rem;
    }

    .legal-page__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .about-page__grid {
        grid-template-columns: 1fr;
    }

    .about-page__cards {
        grid-template-columns: 1fr;
    }

    .about-page__cta {
        flex-direction: column;
    }

    .about-page__cta .btn {
        width: 100%;
        max-width: 20rem;
        justify-content: center;
    }
}

/* Responsive — small phones */
@media (max-width: 480px) {
    .cyber-hero__title {
        font-size: clamp(1.85rem, 11vw, 2.75rem);
        letter-spacing: 0.04em;
    }

    .hud-chip {
        flex: 1 1 100%;
    }

    .product-card__visual {
        min-height: 200px;
    }

    .product-card__index {
        font-size: 2.5rem;
    }

    .product-card__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .product-card__actions .btn--primary {
        width: 100%;
        min-width: 0;
    }

    .product-card__price {
        text-align: center;
        width: 100%;
    }

    .btn {
        white-space: normal;
        text-align: center;
        line-height: 1.35;
    }

    .neon-cyan,
    .neon-magenta {
        text-shadow: none;
    }

    .cyber-hero__subtitle {
        text-shadow: none;
    }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .footer__nav a,
    .theme-toggle,
    .burger,
    .social-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .product-card:hover {
        box-shadow: none;
    }
}

/* Prevent horizontal scroll */
@media (max-width: 768px) {
    .footer,
    .cyber-hero,
    .hero-visual {
        max-width: 100vw;
    }
}

/* ==========================================================================
   Cyber animations
   ========================================================================== */

@keyframes grid-drift {
    0% {
        background-position: 0 0, 0 0;
    }
    100% {
        background-position: 48px 48px, 48px 48px;
    }
}

@keyframes header-glow-pulse {
    0%,
    100% {
        opacity: 0.45;
        filter: brightness(1);
    }
    50% {
        opacity: 1;
        filter: brightness(1.25);
    }
}

@keyframes hero-ken-burns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
    }
}

@keyframes corner-draw {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }
    100% {
        opacity: 0.85;
        transform: scale(1);
    }
}

@keyframes tag-enter {
    0% {
        opacity: 0;
        transform: translateX(-16px);
        clip-path: inset(0 100% 0 0);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes cyber-enter {
    0% {
        opacity: 0;
        transform: translateY(28px);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes neon-blink {
    0%,
    45% {
        opacity: 1;
    }
    46%,
    50% {
        opacity: 0.35;
    }
    51%,
    100% {
        opacity: 1;
    }
}

@keyframes hud-pulse {
    0%,
    100% {
        box-shadow: inset 0 0 0 rgba(0, 240, 255, 0);
        border-color: var(--color-border);
    }
    50% {
        box-shadow: inset 0 0 18px rgba(0, 240, 255, 0.08);
        border-color: rgba(0, 240, 255, 0.45);
    }
}

@keyframes btn-scan {
    0% {
        left: -120%;
    }
    100% {
        left: 120%;
    }
}

@keyframes footer-glow-dark {
    0%,
    100% {
        filter: drop-shadow(0 0 40px rgba(255, 42, 109, 0.25));
    }
    50% {
        filter: drop-shadow(0 0 56px rgba(255, 42, 109, 0.42));
    }
}

@keyframes footer-glow-light {
    0%,
    100% {
        filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.2));
    }
    50% {
        filter: drop-shadow(0 0 44px rgba(255, 255, 255, 0.38));
    }
}

@keyframes card-scan-sweep {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.grid-bg {
    animation: grid-drift 80s linear infinite;
}

.header__glow {
    animation: header-glow-pulse 5s ease-in-out infinite;
}

.hero-visual__image {
    animation: hero-ken-burns 22s ease-in-out infinite alternate;
}

.hero-visual__corner {
    opacity: 0;
}

body.page-ready .hero-visual__corner--tl {
    animation: corner-draw 0.55s ease forwards;
    animation-delay: 0.1s;
}

body.page-ready .hero-visual__corner--tr {
    animation: corner-draw 0.55s ease forwards;
    animation-delay: 0.2s;
}

body.page-ready .hero-visual__corner--bl {
    animation: corner-draw 0.55s ease forwards;
    animation-delay: 0.3s;
}

body.page-ready .hero-visual__corner--br {
    animation: corner-draw 0.55s ease forwards;
    animation-delay: 0.4s;
}

.hero-visual__tag {
    opacity: 0;
}

body.page-ready .hero-visual__tag:nth-child(1) {
    animation: tag-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.55s;
}

body.page-ready .hero-visual__tag:nth-child(2) {
    animation: tag-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.72s;
}

.cyber-enter {
    opacity: 0;
}

body.page-ready .cyber-enter {
    animation: cyber-enter 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(0.08s * var(--enter-order, 0));
}

body.page-ready .cyber-enter.hud-chip {
    animation:
        cyber-enter 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        hud-pulse 4s ease-in-out 0.85s infinite;
    animation-delay: calc(0.08s * var(--enter-order, 0)), calc(0.85s + 0.08s * var(--enter-order, 0));
}

.neon-blink {
    animation: neon-blink 2.4s step-end infinite;
}

.hud-chip {
    position: relative;
}

body.page-ready .hud-chip:not(.cyber-enter) {
    animation: hud-pulse 4s ease-in-out infinite;
}

body.page-ready .hud-chip:not(.cyber-enter):nth-child(2) {
    animation-delay: -1.3s;
}

body.page-ready .hud-chip:not(.cyber-enter):nth-child(3) {
    animation-delay: -2.6s;
}

.nav a {
    position: relative;
}

.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.35rem;
    width: 100%;
    height: 1px;
    background: var(--neon-cyan);
    box-shadow: var(--glow-cyan);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s ease;
}

.nav a:hover::after {
    transform: scaleX(1);
}

.btn--primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 65%
    );
    transform: translateX(-130%);
    transition: transform 0.55s ease;
    pointer-events: none;
    z-index: 0;
}

.btn--primary:hover::before {
    transform: translateX(130%);
}

.btn--primary > * {
    position: relative;
    z-index: 1;
}

.product-card {
    overflow: hidden;
}

.product-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 240, 255, 0.06),
        transparent
    );
    transform: translateX(-120%);
    pointer-events: none;
    z-index: 4;
    opacity: 0;
}

.product-card.is-visible::after {
    animation: card-scan-sweep 1.1s ease forwards;
}

.product-card:hover .product-card__index {
    color: rgba(0, 240, 255, 0.18);
    text-shadow: 0 0 24px rgba(0, 240, 255, 0.35);
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

.footer__watermark {
    animation: footer-glow-dark 6s ease-in-out infinite;
}

[data-theme="light"] .footer__watermark {
    animation: footer-glow-light 6s ease-in-out infinite;
}

.cyber-reveal {
    opacity: 0;
    transform: translateY(32px);
    filter: blur(5px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.cyber-reveal[data-delay="0"] { transition-delay: 0s; }
.cyber-reveal[data-delay="1"] { transition-delay: 0.08s; }
.cyber-reveal[data-delay="2"] { transition-delay: 0.16s; }
.cyber-reveal[data-delay="3"] { transition-delay: 0.24s; }
.cyber-reveal[data-delay="4"] { transition-delay: 0.32s; }
.cyber-reveal[data-delay="5"] { transition-delay: 0.4s; }

.faq-item.is-visible .faq-item__toggle {
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.35);
}

.faq-item[open] .faq-item__answer {
    animation: cyber-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.logo {
    transition: letter-spacing 0.35s ease, text-shadow 0.35s ease;
}

.logo:hover {
    letter-spacing: 0.16em;
}

@media (prefers-reduced-motion: reduce) {
    .grid-bg,
    .header__glow,
    .hero-visual__image,
    .hero-visual__corner,
    .hero-visual__tag,
    .cyber-enter,
    .neon-blink,
    .hud-chip,
    .footer__watermark,
    .product-card::after,
    .faq-item[open] .faq-item__answer {
        animation: none !important;
    }

    .cyber-reveal {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .hero-visual__corner,
    .hero-visual__tag,
    .cyber-enter {
        opacity: 1;
    }

    .nav a::after,
    .btn--primary::before {
        transition: none;
    }

    .btn--primary:hover::before {
        transform: none;
    }
}