/* ═══════════════════════════════════════════════════════════
   ⚡ ELECTRIC MADNESS THEME — KeniGsm
   Background: Cables, Wires, Components, Sparks & Chaos
═══════════════════════════════════════════════════════════ */

/* ── Override Core Variables for MADNESS ─────────────────── */
:root {
    --blue: #00ffff;
    --blue-dim: rgba(0, 255, 255, .22);
    --orange: #ff4500;
    --yellow: #ffe600;
    --green: #39ff14;
    --purple: #bf00ff;
    --dark: #05080f;
    --dark2: #070c18;
    --dark3: #0a1020;
    --card-bg: rgba(0, 255, 255, .04);
    --border: rgba(0, 255, 255, .2);
    --text: #e8faff;
    --text-dim: rgba(220, 245, 255, .6);
    --radius: 14px;
    --chaos-glow: 0 0 20px #00ffff, 0 0 40px rgba(0, 255, 255, .3);
    --spark-glow: 0 0 15px #ffe600, 0 0 30px rgba(255, 230, 0, .4);
    --danger-glow: 0 0 15px #ff4500, 0 0 30px rgba(255, 69, 0, .4);
}

/* ── Electric Canvas Background ──────────────────────────── */
#electric-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .85;
}

/* ── Body: Deep Electric Dark ────────────────────────────── */
body {
    background: var(--dark);
    background-image:
        radial-gradient(ellipse at 15% 20%, rgba(0, 255, 255, .06) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 10%, rgba(255, 69, 0, .05) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 90%, rgba(191, 0, 255, .04) 0%, transparent 50%),
        radial-gradient(ellipse at 5% 75%, rgba(57, 255, 20, .04) 0%, transparent 35%),
        radial-gradient(ellipse at 95% 60%, rgba(255, 230, 0, .04) 0%, transparent 35%);
}

/* ── Scanlines: Denser & More Intense ───────────────────── */
body::after {
    background: repeating-linear-gradient(0deg,
            transparent, transparent 2px,
            rgba(0, 255, 255, .025) 2px, rgba(0, 255, 255, .025) 4px);
    animation: scanline-flicker 8s linear infinite;
}

@keyframes scanline-flicker {

    0%,
    100% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    93% {
        opacity: .4;
    }

    94% {
        opacity: 1;
    }

    96% {
        opacity: .6;
    }

    97% {
        opacity: 1;
    }
}

/* ── Navbar: Electric Edge ───────────────────────────────── */
.navbar {
    background: rgba(5, 8, 15, .92);
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, transparent, #00ffff, #ffe600, #ff4500, transparent) 1;
    box-shadow: 0 2px 30px rgba(0, 255, 255, .18), inset 0 -1px 0 rgba(0, 255, 255, .1);
}

.navbar.scrolled {
    box-shadow: 0 4px 40px rgba(0, 255, 255, .25);
}

/* Logo warp glow */
.nav-logo .logo-text {
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff, 0 0 30px rgba(0, 255, 255, .5), 0 0 60px rgba(0, 255, 255, .2);
    animation: logo-flicker 5s ease-in-out infinite;
}

.nav-logo .logo-text .g {
    color: #ff4500;
    text-shadow: 0 0 10px #ff4500, 0 0 30px rgba(255, 69, 0, .5);
}

@keyframes logo-flicker {

    0%,
    100% {
        text-shadow: 0 0 10px #00ffff, 0 0 30px rgba(0, 255, 255, .5);
    }

    48% {
        text-shadow: 0 0 10px #00ffff, 0 0 30px rgba(0, 255, 255, .5);
    }

    50% {
        text-shadow: 0 0 4px #00ffff, 0 0 10px rgba(0, 255, 255, .3);
    }

    52% {
        text-shadow: 0 0 10px #00ffff, 0 0 30px rgba(0, 255, 255, .5);
    }

    78% {
        text-shadow: 0 0 10px #00ffff, 0 0 30px rgba(0, 255, 255, .5);
    }

    80% {
        text-shadow: 0 0 25px #00ffff, 0 0 60px rgba(0, 255, 255, .7), 0 0 100px rgba(0, 255, 255, .3);
    }

    82% {
        text-shadow: 0 0 10px #00ffff, 0 0 30px rgba(0, 255, 255, .5);
    }
}

/* Nav links */
.nav-links a:hover,
.nav-links a.active {
    color: #00ffff;
    text-shadow: 0 0 8px #00ffff;
}

/* ── Hero: Electric Storm ────────────────────────────────── */
.hero-bg {
    background:
        radial-gradient(ellipse at 25% 55%, rgba(0, 255, 255, .12) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 30%, rgba(255, 69, 0, .08) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 100%, rgba(191, 0, 255, .06) 0%, transparent 50%);
    animation: hero-pulse 6s ease-in-out infinite alternate;
}

@keyframes hero-pulse {
    from {
        opacity: .8;
    }

    to {
        opacity: 1;
    }
}

.hero h1 {
    background: linear-gradient(135deg, #00ffff 0%, #ffe600 40%, #ff4500 70%, #bf00ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 18px rgba(0, 255, 255, .4));
    animation: hero-text-glow 3s ease-in-out infinite alternate;
}

@keyframes hero-text-glow {
    from {
        filter: drop-shadow(0 0 10px rgba(0, 255, 255, .3));
    }

    to {
        filter: drop-shadow(0 0 25px rgba(0, 255, 255, .7)) drop-shadow(0 0 50px rgba(255, 230, 0, .3));
    }
}

.hero-badge {
    background: rgba(0, 255, 255, .1);
    border: 1px solid rgba(0, 255, 255, .35);
    box-shadow: 0 0 12px rgba(0, 255, 255, .18), inset 0 0 15px rgba(0, 255, 255, .05);
    color: #00ffff;
    animation: badge-spark 4s ease-in-out infinite;
}

@keyframes badge-spark {

    0%,
    100% {
        box-shadow: 0 0 12px rgba(0, 255, 255, .18);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 255, 255, .4), 0 0 40px rgba(0, 255, 255, .15);
    }
}

/* ── Buttons: Electric Charge ────────────────────────────── */
.btn-primary {
    background: linear-gradient(135deg, #00ccff, #0066cc);
    box-shadow: 0 4px 20px rgba(0, 255, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .15);
    border: 1px solid rgba(0, 255, 255, .4);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
    transform: skewX(-20deg);
    transition: left .6s;
}

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

.btn-primary:hover {
    box-shadow: 0 6px 35px rgba(0, 255, 255, .6), 0 0 60px rgba(0, 255, 255, .2);
    transform: translateY(-3px);
}

.btn-outline {
    color: #00ffff;
    border: 2px solid #00ffff;
    box-shadow: 0 0 12px rgba(0, 255, 255, .2), inset 0 0 12px rgba(0, 255, 255, .05);
}

.btn-outline:hover {
    background: rgba(0, 255, 255, .12);
    box-shadow: 0 0 25px rgba(0, 255, 255, .5), 0 0 50px rgba(0, 255, 255, .2);
    color: #fff;
}

/* ── Section Titles: High Voltage ────────────────────────── */
.section-title h2 {
    color: #00ffff;
    text-shadow: 0 0 15px rgba(0, 255, 255, .5), 0 0 40px rgba(0, 255, 255, .2);
}

.section-title .accent-line {
    height: 4px;
    background: linear-gradient(90deg, var(--purple), var(--blue), var(--yellow), var(--orange));
    box-shadow: 0 0 10px rgba(0, 255, 255, .5);
    animation: line-charge 2s linear infinite;
    background-size: 200% 100%;
}

@keyframes line-charge {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* ── Service Cards: PCB Style ────────────────────────────── */
.service-card {
    background: rgba(0, 10, 20, .85);
    border: 1px solid rgba(0, 255, 255, .2);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(4px);
    transition: transform .3s, box-shadow .3s, border-color .3s;
}

/* PCB trace lines on cards */
.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(0deg, transparent 96%, rgba(0, 255, 255, .06) 96%),
        linear-gradient(90deg, transparent 96%, rgba(0, 255, 255, .06) 96%);
    background-size: 18px 18px;
    pointer-events: none;
}

.service-card::before {
    background: linear-gradient(90deg, #00ffff, #ffe600, #ff4500);
    box-shadow: 0 0 8px #00ffff;
}

.service-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 0 25px rgba(0, 255, 255, .3), 0 0 60px rgba(0, 255, 255, .1), inset 0 0 30px rgba(0, 255, 255, .04);
    border-color: #00ffff;
    background: rgba(0, 15, 30, .9);
}

.service-card h3 {
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, .4);
}

.service-card .icon {
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, .5));
    animation: icon-pulse 3s ease-in-out infinite alternate;
}

@keyframes icon-pulse {
    from {
        filter: drop-shadow(0 0 4px rgba(0, 255, 255, .3));
        transform: scale(1);
    }

    to {
        filter: drop-shadow(0 0 16px rgba(255, 230, 0, .7));
        transform: scale(1.08);
    }
}

/* ── Stats: Power Meters ─────────────────────────────────── */
.stat-box {
    background: rgba(0, 255, 255, .04);
    border: 1px solid rgba(0, 255, 255, .2);
    position: relative;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
}

.stat-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 25px rgba(0, 255, 255, .25);
    border-color: rgba(0, 255, 255, .5);
}

.stat-box::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
    animation: stat-charge 3s linear infinite;
}

@keyframes stat-charge {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.stat-box .num {
    color: #00ffff;
    text-shadow: 0 0 15px rgba(0, 255, 255, .6), 0 0 30px rgba(0, 255, 255, .3);
    font-size: 2.4rem;
}

/* ── CTA Bar: Danger Zone ────────────────────────────────── */
.cta-bar {
    background: linear-gradient(135deg,
            rgba(0, 255, 255, .08),
            rgba(255, 69, 0, .06),
            rgba(191, 0, 255, .05));
    border: 1px solid rgba(0, 255, 255, .25);
    box-shadow: 0 0 40px rgba(0, 255, 255, .08), inset 0 0 40px rgba(0, 255, 255, .03);
    position: relative;
    overflow: hidden;
}

/* Corner sparks */
.cta-bar::before {
    content: '⚡';
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 1.8rem;
    opacity: .4;
    animation: corner-spark 1.5s ease-in-out infinite alternate;
}

.cta-bar::after {
    content: '⚡';
    position: absolute;
    bottom: 12px;
    left: 20px;
    font-size: 1.8rem;
    opacity: .4;
    animation: corner-spark 1.8s .5s ease-in-out infinite alternate;
}

@keyframes corner-spark {
    from {
        opacity: .2;
        transform: scale(.9);
    }

    to {
        opacity: .7;
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px #ffe600);
    }
}

/* ── Footer: Dark Current Flow ───────────────────────────── */
.footer {
    background: linear-gradient(180deg, var(--dark2), #030508);
    border-top: 2px solid transparent;
    border-image: linear-gradient(90deg, transparent, #00ffff, #ff4500, transparent) 1;
}

.footer-brand .logo-text {
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff, 0 0 25px rgba(0, 255, 255, .4);
}

/* ── Contact Cards ───────────────────────────────────────── */
.contact-card {
    background: rgba(0, 255, 255, .04);
    border: 1px solid rgba(0, 255, 255, .18);
    transition: transform .3s, box-shadow .3s;
}

.contact-card:hover {
    box-shadow: 0 0 25px rgba(0, 255, 255, .25), 0 0 60px rgba(0, 255, 255, .08);
    border-color: rgba(0, 255, 255, .4);
    transform: translateY(-5px);
}

/* ── Form Fields ─────────────────────────────────────────── */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, .25), 0 0 35px rgba(0, 255, 255, .08);
    background: rgba(0, 255, 255, .06);
}

/* ── Service Hero: Electric Banner ──────────────────────── */
.service-hero {
    background:
        linear-gradient(180deg, var(--dark2) 0%, var(--dark) 100%),
        repeating-linear-gradient(90deg,
            transparent, transparent 24px,
            rgba(0, 255, 255, .03) 24px, rgba(0, 255, 255, .03) 25px);
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, transparent, #00ffff, transparent) 1;
}

.service-hero h1 {
    color: #00ffff;
    text-shadow: 0 0 20px rgba(0, 255, 255, .5), 0 0 60px rgba(0, 255, 255, .2);
}

/* ── Service Text Lightning Bullets ─────────────────────── */
.service-text li::before {
    content: '⚡';
    filter: drop-shadow(0 0 4px #ffe600);
    animation: bolt-blink 2s ease-in-out infinite;
}

@keyframes bolt-blink {

    0%,
    100% {
        filter: drop-shadow(0 0 4px #ffe600);
    }

    50% {
        filter: drop-shadow(0 0 12px #ff4500);
    }
}

/* ── DOWNLOAD BACKGROUNDS SECTION ────────────────────────── */
.dl-backgrounds {
    padding: 4rem 0;
    background: var(--dark2);
    border-top: 1px solid var(--border);
}

.dl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.dl-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
    text-decoration: none;
    color: var(--text);
}

.dl-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 35px rgba(0, 255, 255, .2);
    border-color: #00ffff;
}

.dl-card-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.dl-card-body {
    padding: 1rem 1.2rem;
}

.dl-card-body h4 {
    font-family: 'Orbitron', sans-serif;
    font-size: .85rem;
    color: #00ffff;
    margin-bottom: .3rem;
}

.dl-card-body p {
    font-size: .78rem;
    color: var(--text-dim);
    margin-bottom: .8rem;
}

.dl-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(135deg, #00ccff, #0066cc);
    color: #fff;
    border-radius: 20px;
    padding: .35rem .9rem;
    font-size: .8rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(0, 255, 255, .3);
}

/* ── Wire Component Decorators ─────────────────────────────
   Add small decorative circuit-like borders to sections     */
.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, #00ffff, transparent);
    opacity: .3;
}

.section::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 3px;
    background: linear-gradient(270deg, #ff4500, transparent);
    opacity: .3;
}

/* ── Particle override: electric sparks ─────────────────── */
.particle {
    background: radial-gradient(circle, #00ffff, #ffe600 60%, transparent);
    box-shadow: 0 0 6px #00ffff, 0 0 12px rgba(0, 255, 255, .5);
}

/* ── Scrollbar: Electric Style ───────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #05080f;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00ffff, #0044cc);
    border-radius: 3px;
    box-shadow: 0 0 6px #00ffff;
}