/* =====================================================================
   THEME · NEON / CYBERPUNK — dark with magenta+cyan, scanlines, glow
   ===================================================================== */

[data-theme="neon"] {
    --bg: #0A0318;
    --bg-alt: #14073B;
    --bg-card: rgba(20, 7, 59, 0.55);
    --fg: #F5F0FF;
    --fg-muted: #B8A8E0;
    --accent: #FF2E9F;
    --accent-dark: #CC1B7D;
    --accent-contrast: #0A0318;
    --accent-glow: rgba(255, 46, 159, 0.45);
    --border: rgba(0, 230, 255, 0.25);

    --font-head: "Orbitron", "Audiowide", sans-serif;
    --font-body: "Rajdhani", system-ui, sans-serif;
    --font-weight-head: 800;
    --font-weight-body: 400;

    --radius: 2px;
    --radius-sm: 2px;
    --stroke: 1px;
    --density: 1.1;
    --section-pad: clamp(3.5rem, 8vw, 7rem);
    --photo-filter: saturate(1.4) contrast(1.1) hue-rotate(-5deg);
    --shadow-card: 0 0 24px var(--accent-glow), inset 0 0 0 1px rgba(0,230,255,0.15);
    --btn-shape: 2px;
}

/* Scanlines + grid background */
[data-theme="neon"] body::before {
    content: "";
    position: fixed; inset: 0; pointer-events: none; z-index: 1;
    background:
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,230,255,0.035) 2px 3px),
        radial-gradient(ellipse at 20% 0%, rgba(255,46,159,0.2), transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(0,230,255,0.18), transparent 55%);
    mix-blend-mode: screen;
}

/* Section borders = neon line */
[data-theme="neon"] .section { position: relative; }
[data-theme="neon"] .section + .section::before {
    content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, #00E6FF 50%, transparent);
    box-shadow: 0 0 12px #00E6FF;
}

/* Hero — scanline overlay + glow */
[data-theme="neon"] .hero h1 {
    text-shadow:
        0 0 16px var(--accent),
        0 0 32px var(--accent),
        2px 0 0 #00E6FF, -2px 0 0 #00E6FF;
    letter-spacing: 0.02em;
}

/* Cards — glass with cyan edge */
[data-theme="neon"] .card,
[data-theme="neon"] .paket,
[data-theme="neon"] .work-card,
[data-theme="neon"] .faq-item {
    background: linear-gradient(180deg, rgba(20,7,59,0.6), rgba(10,3,24,0.4));
    border: 1px solid rgba(0,230,255,0.3);
    box-shadow: 0 0 24px rgba(255,46,159,0.18), inset 0 0 0 1px rgba(255,46,159,0.08);
    backdrop-filter: blur(10px);
}

/* Buttons — outlined neon */
[data-theme="neon"] .btn-primary {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    box-shadow: 0 0 14px var(--accent-glow), inset 0 0 14px rgba(255,46,159,0.12);
    text-shadow: 0 0 8px var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
[data-theme="neon"] .btn-primary:hover {
    background: var(--accent); color: var(--accent-contrast);
    box-shadow: 0 0 28px var(--accent), 0 0 60px var(--accent-glow);
}
[data-theme="neon"] .btn-secondary {
    color: #00E6FF; border-color: #00E6FF;
    box-shadow: 0 0 14px rgba(0,230,255,0.35);
    text-transform: uppercase; letter-spacing: 0.15em;
}

/* Eyebrow / labels */
[data-theme="neon"] .section-eyebrow,
[data-theme="neon"] .hero-eyebrow {
    color: #00E6FF;
    text-shadow: 0 0 8px #00E6FF;
}

/* Tile preview */
.tile-preview[data-theme="neon"] {
    background: linear-gradient(180deg, #0A0318, #14073B);
    color: #F5F0FF;
}
.tile-preview[data-theme="neon"] .tile-head {
    text-shadow: 0 0 6px #FF2E9F, 0 0 12px #FF2E9F;
}
.tile-preview[data-theme="neon"] .tile-dot {
    background: #FF2E9F;
    box-shadow: 0 0 8px #FF2E9F, 0 0 16px #FF2E9F;
}