/* ====================================================================
   IT4DUTY v2.0 — Modern Effects Layer
   Loaded after main.css. Adds: glassmorphism, glow, gradients,
   particle background containers, marquee, cursor follower,
   button shine, grid backgrounds.
   ==================================================================== */

:root {
    /* === Internet Rural Tuluá brand palette (extracted from logo) === */
    --c-blue-dark: #016391;     /* arrow / "logotipo arriba" - azul oscuro */
    --c-cyan: #019FE0;          /* símbolo central - cyan brillante */
    --c-lime: #A9C51A;          /* triángulo + texto "INTERNET" - verde lima */
    --c-yellow: #F9C101;        /* texto "RURAL TULUÁ" - amarillo dorado */

    /* Aliases used across the site (kept for backwards-compat) */
    --c-blue: var(--c-blue-dark);

    /* Glows */
    --c-glow-cyan: rgba(1, 159, 224, 0.5);
    --c-glow-blue: rgba(1, 99, 145, 0.5);
    --c-glow-lime: rgba(169, 197, 26, 0.5);
    --c-glow-yellow: rgba(249, 193, 1, 0.5);
    --c-glow-red:  rgba(221, 51, 51, 0.5);

    /* Gradients — now using logo colors */
    --gradient-cyan: linear-gradient(135deg,
        #016391 0%,
        #019FE0 50%,
        #A9C51A 100%);

    --gradient-mix: linear-gradient(135deg,
        #016391 0%,
        #019FE0 30%,
        #A9C51A 65%,
        #F9C101 100%);

    --gradient-red:  linear-gradient(135deg, #ff3838 0%, #dd3333 50%, #b82525 100%);
    --gradient-lime: linear-gradient(135deg, #7ea510 0%, #A9C51A 50%, #F9C101 100%);
}

/* ============================================================
   BACKGROUNDS — particle canvas + grid + glow
   ============================================================ */
.particle-bg {
    position: relative;
    isolation: isolate;
}
.particle-bg > canvas.particle-net {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
}
.particle-bg > * { position: relative; z-index: 1; }

/* Subtle SVG grid behind dark sections */
.grid-bg {
    position: relative;
}
.grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}
.grid-bg > * { position: relative; z-index: 1; }

/* Soft radial glow blobs (decorative) */
.glow-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}
.glow-blob.cyan { background: radial-gradient(circle, var(--c-cyan), transparent 70%); }
.glow-blob.red  { background: radial-gradient(circle, var(--c-accent), transparent 70%); }
.glow-blob.blue { background: radial-gradient(circle, var(--c-blue),  transparent 70%); }

/* ============================================================
   GRADIENT TEXT
   ============================================================ */
.gradient-text {
    background: var(--gradient-cyan);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.gradient-text-mix {
    background: var(--gradient-mix);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gradientShift 8s ease-in-out infinite;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Glow utility */
.glow-cyan { text-shadow: 0 0 20px var(--c-glow-cyan), 0 0 40px var(--c-glow-cyan); }
.glow-red  { text-shadow: 0 0 20px var(--c-glow-red),  0 0 40px var(--c-glow-red); }

/* ============================================================
   GLASSMORPHISM — applied to cards
   ============================================================ */
.glass {
    background: rgba(22, 28, 36, 0.55) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.glass-strong {
    background: rgba(22, 28, 36, 0.75) !important;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
}

/* Promote existing cards to glass */
.pricing-box, .icon-box, .contact-feature, .faq-item,
.support-email-card, .coverage-note, .note-block, .phone-block {
    background: rgba(22, 28, 36, 0.55);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* ============================================================
   PRICING FEATURED — minimalist HUD style
   ============================================================ */
.pricing-box.featured {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(180deg,
            rgba(1, 159, 224, 0.06) 0%,
            rgba(22, 28, 36, 0.65) 50%,
            rgba(169, 197, 26, 0.05) 100%) !important;
    border: 1px solid rgba(1, 159, 224, 0.4) !important;
    box-shadow:
        0 0 0 1px rgba(1, 159, 224, 0.08),
        0 20px 60px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(1, 159, 224, 0.12);
}
.pricing-box.featured:hover {
    border-color: var(--c-cyan) !important;
    box-shadow:
        0 0 0 1px rgba(1, 159, 224, 0.2),
        0 24px 70px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(1, 159, 224, 0.25);
    transform: translateY(-8px);
}

/* HUD corner brackets — always visible on featured */
.pricing-box.featured::before,
.pricing-box.featured::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    z-index: 1;
    border: 2px solid var(--c-cyan);
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.5));
}
.pricing-box.featured::before {
    top: 10px; left: 10px;
    border-right: 0; border-bottom: 0;
    border-radius: 4px 0 0 0;
}
.pricing-box.featured::after {
    bottom: 10px; right: 10px;
    border-left: 0; border-top: 0;
    border-radius: 0 0 4px 0;
}

/* Featured tag — elegant top label */
.featured-tag {
    position: absolute;
    top: -1px; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    font-family: var(--f-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #001624;
    background: var(--gradient-cyan);
    border-radius: 100px;
    box-shadow:
        0 4px 16px rgba(0, 212, 255, 0.4),
        0 0 0 4px rgba(15, 20, 25, 1);
    z-index: 3;
    white-space: nowrap;
}
.featured-tag i {
    font-size: 0.85rem;
    animation: tagBolt 2.5s ease-in-out infinite;
}
@keyframes tagBolt {
    0%, 100% { transform: rotate(0deg) scale(1);    opacity: 1; }
    50%      { transform: rotate(-8deg) scale(1.1); opacity: 0.85; }
}

/* Subtle scanning line at top of featured box */
.pricing-box.featured > .pkg {
    position: relative;
    margin-top: 14px;
}
.pricing-box.featured > .pkg::before {
    content: '';
    position: absolute;
    top: -16px; left: 50%;
    transform: translateX(-50%);
    width: 60%; height: 1px;
    background: linear-gradient(90deg,
        transparent, var(--c-cyan), transparent);
    opacity: 0.6;
}

/* ============================================================
   BUTTONS — shine sweep on hover
   ============================================================ */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.25) 50%,
        transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.7s ease;
    pointer-events: none;
    z-index: -1;
}
.btn:hover::before {
    transform: translateX(100%);
}

/* Primary button: accent glow on hover */
.btn:not(.btn-outline):not(.btn-dark):hover {
    box-shadow: 0 8px 30px var(--c-glow-red), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ============================================================
   MARQUEE (cinta de stats)
   ============================================================ */
.marquee {
    overflow: hidden;
    background: var(--c-bg);
    border-top: 1px solid rgba(0, 212, 255, 0.15);
    border-bottom: 1px solid rgba(0, 212, 255, 0.15);
    padding: 18px 0;
    position: relative;
}
.marquee::before, .marquee::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; width: 120px;
    z-index: 2;
    pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--c-bg), transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--c-bg), transparent); }
.marquee-track {
    display: flex;
    gap: 60px;
    width: max-content;
    animation: marqueeScroll 35s linear infinite;
}
.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    white-space: nowrap;
}
.marquee-item .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-cyan);
    box-shadow: 0 0 10px var(--c-glow-cyan);
    animation: pulseDot 2s ease-in-out infinite;
}
.marquee-item .num {
    color: var(--c-text);
    background: var(--gradient-cyan);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.3rem;
}
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes pulseDot {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.7; }
}
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ============================================================
   ONLINE BADGE (status indicator)
   ============================================================ */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.4);
    border-radius: 100px;
    color: #6dd29c;
    font-family: var(--f-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
/* Spacing when badge sits above a heading */
.section-heading .live-badge,
.page-hero .live-badge,
.hero-slide-content .live-badge {
    margin-bottom: 22px;
}
.live-badge::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--c-accent-2);
    border-radius: 50%;
    box-shadow: 0 0 0 0 var(--c-accent-2);
    animation: pingDot 2s infinite;
}
@keyframes pingDot {
    0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7); }
    70%  { box-shadow: 0 0 0 14px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* ============================================================
   HERO ENHANCEMENTS — particle layer + content elevation
   ============================================================ */
.hero-slider {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
/* Particle canvas covering ALL slides */
.hero-slider > canvas.hero-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    opacity: 0.55;
    mix-blend-mode: screen;
}
/* Glow blobs above slides, below content */
.hero-slider > .glow-blob { z-index: 2; }
.hero-slide-content {
    position: relative;
    z-index: 10;
    animation: heroFadeUp 1.4s cubic-bezier(.16,.84,.32,1) both;
}
.hero-slide-content h1 {
    font-weight: 900;
    font-family: var(--f-display);
}
.hero-slide-content h1 .gradient-text-mix {
    -webkit-text-fill-color: transparent;
}
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(60px) scale(0.96); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(0)     scale(1);    filter: blur(0); }
}

/* Soft radial cyan glow centered behind content */
.hero-slide::after {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 1200px; height: 600px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center,
        rgba(0, 102, 255, 0.22),
        transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* Vignette + scan line at the very edge for cinematic feel */
.hero-slider::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    background:
        radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.35) 100%),
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 3px,
            rgba(0, 212, 255, 0.025) 3px,
            rgba(0, 212, 255, 0.025) 4px);
}

/* Corner brackets — tech/HUD feel */
.hero-slider::before {
    content: '';
    position: absolute;
    inset: 16px;
    pointer-events: none;
    z-index: 7;
    background:
        /* top-left */
        linear-gradient(to right, var(--c-cyan) 0, var(--c-cyan) 40px, transparent 40px) top left / 40px 2px no-repeat,
        linear-gradient(to bottom, var(--c-cyan) 0, var(--c-cyan) 40px, transparent 40px) top left / 2px 40px no-repeat,
        /* top-right */
        linear-gradient(to left, var(--c-cyan) 0, var(--c-cyan) 40px, transparent 40px) top right / 40px 2px no-repeat,
        linear-gradient(to bottom, var(--c-cyan) 0, var(--c-cyan) 40px, transparent 40px) top right / 2px 40px no-repeat,
        /* bottom-left */
        linear-gradient(to right, var(--c-cyan) 0, var(--c-cyan) 40px, transparent 40px) bottom left / 40px 2px no-repeat,
        linear-gradient(to top, var(--c-cyan) 0, var(--c-cyan) 40px, transparent 40px) bottom left / 2px 40px no-repeat,
        /* bottom-right */
        linear-gradient(to left, var(--c-cyan) 0, var(--c-cyan) 40px, transparent 40px) bottom right / 40px 2px no-repeat,
        linear-gradient(to top, var(--c-cyan) 0, var(--c-cyan) 40px, transparent 40px) bottom right / 2px 40px no-repeat;
    opacity: 0.55;
    filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.5));
}

/* Hero h1 enhanced glow for legibility over particles */
.hero-slide-content h1 {
    text-shadow:
        0 4px 24px rgba(0, 0, 0, 0.7),
        0 0 60px rgba(0, 102, 255, 0.3);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.hero-slide-content p {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

/* Live badge on hero — extra glow */
.hero-slide-content .live-badge {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Swiper controls above particle layer */
.hero-slider .swiper-pagination,
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev { z-index: 12; }
.scroll-indicator { z-index: 12; }

/* Scroll indicator at the bottom of hero */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--f-display);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    animation: bounceY 2.5s ease-in-out infinite;
}
.scroll-indicator .line {
    width: 1px; height: 50px;
    background: linear-gradient(to bottom, transparent, var(--c-cyan));
}
@keyframes bounceY {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.7; }
    50%      { transform: translateX(-50%) translateY(10px); opacity: 1; }
}

/* ============================================================
   TILT 3D for tech icons
   ============================================================ */
.tech-icons .item.tilt {
    transition: transform 0.4s cubic-bezier(.16,.84,.32,1);
    transform-style: preserve-3d;
    will-change: transform;
}
.tech-icons .item.tilt::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 16px;
    background: radial-gradient(circle at center,
        rgba(0, 212, 255, 0.15),
        transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.tech-icons .item.tilt:hover::after { opacity: 1; }
.tech-icons .item {
    position: relative;
    border-radius: 16px;
}

/* ============================================================
   SECTION HEADING UPGRADE
   ============================================================ */
.section-heading::after {
    height: 2px;
    background: var(--gradient-cyan);
    box-shadow: 0 0 14px var(--c-glow-cyan);
    width: 100px;
}
.section-heading .title {
    font-weight: 900;
}

/* ============================================================
   FAQ enhancement: gradient underline on hover
   ============================================================ */
.faq-item summary {
    transition: padding 0.25s;
}
.faq-item:hover summary { padding-left: 30px; }
.faq-item[open] {
    border-color: var(--c-cyan) !important;
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2);
}
.faq-item[open] summary::after { color: var(--c-cyan); }

/* ============================================================
   PROGRESS BARS — neon look
   ============================================================ */
.progress-item .bar {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 212, 255, 0.15);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}
.progress-item .fill {
    background: var(--gradient-cyan) !important;
    box-shadow: 0 0 14px var(--c-glow-cyan);
    position: relative;
    overflow: hidden;
}
.progress-item .fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent);
    animation: shimmer 2.5s ease-in-out infinite;
}
@keyframes shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* ============================================================
   FORM ENHANCEMENTS
   ============================================================ */
.contact-form input,
.contact-form textarea {
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    transition: all 0.3s;
}
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--c-cyan) !important;
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.1), 0 0 20px rgba(0, 212, 255, 0.15);
    background: rgba(0, 0, 0, 0.5) !important;
}

/* ============================================================
   PRICING BOX UPGRADE
   ============================================================ */
.pricing-box .speed-pill {
    background: var(--gradient-cyan);
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
}
.pricing-box.featured .speed-pill {
    background: var(--gradient-red);
    box-shadow: 0 4px 20px var(--c-glow-red);
}
.pricing-box .price {
    background: var(--gradient-cyan);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pricing-box.featured .price {
    background: var(--gradient-red);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pricing-box li::before { color: var(--c-cyan) !important; }
.pricing-box.featured li::before { color: #ff6b6b !important; }

/* ============================================================
   MAP HUD — fused dashboard look for coverage map
   ============================================================ */
.map-hud {
    position: relative;
    margin: 40px 0 0;
    padding: 0;
    background:
        linear-gradient(180deg,
            rgba(0, 212, 255, 0.04) 0%,
            rgba(0, 0, 0, 0.4) 100%);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 14px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 212, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Top bar — status + stats */
.map-hud-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    background:
        linear-gradient(90deg,
            rgba(0, 212, 255, 0.08),
            rgba(0, 102, 255, 0.04),
            rgba(221, 51, 51, 0.06));
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    font-family: var(--f-display);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    flex-wrap: wrap;
    gap: 16px;
}
.map-hud-bar-left, .map-hud-bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.hud-led {
    width: 10px; height: 10px;
    background: var(--c-accent-2);
    border-radius: 50%;
    box-shadow: 0 0 0 0 var(--c-accent-2), 0 0 12px var(--c-accent-2);
    animation: pingDot 2s infinite;
}
.hud-label { color: #6dd29c; font-weight: 700; }
.hud-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-text-muted);
    font-weight: 600;
}
.hud-stat-num {
    font-family: var(--f-display);
    font-size: 1.05rem;
    font-weight: 900;
    background: var(--gradient-cyan);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    min-width: 24px;
}
.hud-divider {
    width: 1px; height: 16px;
    background: rgba(0, 212, 255, 0.3);
}

/* Map frame: contains iframe + corners + scanline */
.map-hud-frame {
    position: relative;
    height: 580px;
    background: #0a0e13;
    overflow: hidden;
}
.map-hud-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* Subtle enhancement only — preserve satellite/real colors */
    filter: saturate(1.15) contrast(1.05) brightness(0.96);
    transition: filter 0.4s ease;
}
.map-hud-frame:hover iframe {
    filter: saturate(1.2) contrast(1.08) brightness(1);
}

/* Sci-fi corner brackets */
.map-corner {
    position: absolute;
    width: 26px; height: 26px;
    border: 2px solid var(--c-cyan);
    pointer-events: none;
    z-index: 4;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
}
.map-corner.tl { top: 12px; left: 12px;  border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.map-corner.tr { top: 12px; right: 12px; border-left: 0;  border-bottom: 0; border-radius: 0 4px 0 0; }
.map-corner.bl { bottom: 12px; left: 12px;  border-right: 0; border-top: 0; border-radius: 0 0 0 4px; }
.map-corner.br { bottom: 12px; right: 12px; border-left: 0;  border-top: 0; border-radius: 0 0 4px 0; }

/* Scanline overlay (subtle CRT/radar feel) */
.map-scanline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            rgba(0, 212, 255, 0.03) 3px,
            rgba(0, 212, 255, 0.03) 4px);
}
.map-scanline::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 100px;
    background: linear-gradient(180deg,
        transparent,
        rgba(0, 212, 255, 0.08) 50%,
        transparent);
    animation: scanlineSweep 6s linear infinite;
}
@keyframes scanlineSweep {
    0%   { top: -100px; }
    100% { top: 100%; }
}

/* Edge fade — soft vignette so map "blends" into background */
.map-hud-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        radial-gradient(ellipse at center,
            transparent 50%,
            rgba(15, 20, 25, 0.5) 95%,
            rgba(15, 20, 25, 0.85) 100%);
}

/* Legend bar */
.map-hud-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    padding: 16px 22px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(0, 212, 255, 0.15);
    border-bottom: 1px solid rgba(0, 212, 255, 0.15);
    font-size: 0.85rem;
    color: var(--c-text-muted);
}
.legend-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.legend-active  { background: #2ecc71; box-shadow: 0 0 8px rgba(46, 204, 113, 0.6); }
.legend-pending { background: #f39c12; box-shadow: 0 0 8px rgba(243, 156, 18, 0.6); }
.legend-planned { background: var(--c-accent); box-shadow: 0 0 8px var(--c-glow-red); }

/* Bottom note + CTA */
.map-hud-note {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    background: rgba(0, 0, 0, 0.3);
    flex-wrap: wrap;
}
.map-hud-note > i {
    flex-shrink: 0;
    width: 42px; height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-cyan);
    color: #001624;
    border-radius: 50%;
    font-size: 1.1rem;
    box-shadow: 0 4px 14px rgba(0, 212, 255, 0.3);
}
.map-hud-note p {
    flex: 1;
    margin: 0;
    color: var(--c-text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    min-width: 280px;
}
.map-hud-note .btn { white-space: nowrap; }

@media (max-width: 700px) {
    .map-hud-frame { height: 420px; }
    .map-hud-bar { font-size: 0.7rem; padding: 12px 16px; }
    .map-hud-bar-right { gap: 10px; }
    .map-corner { width: 18px; height: 18px; }
    .map-hud-note { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   FOOTER — animated network background + glow accents
   ============================================================ */
.site-footer {
    position: relative;
    background:
        radial-gradient(ellipse at top,
            rgba(0, 102, 255, 0.08) 0%,
            transparent 50%),
        linear-gradient(180deg, #050810 0%, #000 100%) !important;
    overflow: hidden;
    isolation: isolate;
}
.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, var(--c-cyan), var(--c-accent), var(--c-cyan), transparent);
    opacity: 0.6;
    z-index: 3;
}
/* Footer particle canvas — sits behind content */
.site-footer canvas.particle-net {
    opacity: 0.7;
}
/* Footer SVG grid lines */
.site-footer.grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    pointer-events: none;
    z-index: 0;
    height: auto; opacity: 1;
}
/* Footer content above effects */
.site-footer .container { position: relative; z-index: 2; }

/* Footer brand logo glow on hover */
.footer-brand img {
    filter: drop-shadow(0 4px 14px rgba(0, 212, 255, 0.2));
    transition: filter 0.4s, transform 0.4s;
}
.footer-brand img:hover {
    filter: drop-shadow(0 8px 28px rgba(0, 212, 255, 0.5));
    transform: translateY(-2px);
}

/* Footer headings — gradient underline */
.site-footer h5 {
    position: relative;
    padding-bottom: 10px;
}
.site-footer h5::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 30px; height: 2px;
    background: var(--gradient-cyan);
    border-radius: 2px;
    transition: width 0.35s;
}
.footer-links:hover h5::after,
.footer-contact:hover h5::after { width: 60px; }

/* Footer links — animated gradient underline on hover */
.site-footer ul li a,
.site-footer .footer-contact a {
    position: relative;
    transition: color 0.25s, padding-left 0.25s;
    display: inline-block;
}
.site-footer ul li a::before {
    content: '›';
    position: absolute;
    left: -14px;
    opacity: 0;
    color: var(--c-cyan);
    transition: opacity 0.25s, left 0.25s;
}
.site-footer ul li a:hover {
    color: var(--c-cyan);
    padding-left: 14px;
}
.site-footer ul li a:hover::before {
    opacity: 1;
    left: 0;
}
.site-footer .footer-contact a:hover { color: var(--c-cyan); }

/* Footer bottom — glassy strip */
.site-footer .footer-bottom {
    background: rgba(0, 212, 255, 0.03);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 8px;
    padding: 18px 24px !important;
    margin-top: 30px;
}

/* ============================================================
   WhatsApp floating button — modern halo
   ============================================================ */
.wa-float {
    box-shadow:
        0 0 0 0 rgba(37, 211, 102, 0.6),
        0 4px 20px rgba(37, 211, 102, 0.4);
    animation: waPulse 2.5s infinite;
}
.wa-float::before { display: none; }
@keyframes waPulse {
    0%   { box-shadow: 0 0 0 0  rgba(37, 211, 102, 0.6), 0 4px 20px rgba(37, 211, 102, 0.4); }
    70%  { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0), 0 4px 20px rgba(37, 211, 102, 0.4); }
    100% { box-shadow: 0 0 0 0  rgba(37, 211, 102, 0),    0 4px 20px rgba(37, 211, 102, 0.4); }
}

/* ============================================================
   SECTIONS: gentle gradient line at top
   ============================================================ */
.section + .section::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), transparent);
    margin-top: -1px;
}

/* ============================================================
   ICON BOX (business section) — neon hover
   ============================================================ */
.icon-box {
    transition: all 0.35s cubic-bezier(.16,.84,.32,1);
}
.icon-box:hover {
    border-color: var(--c-cyan) !important;
    box-shadow: 0 12px 40px rgba(0, 212, 255, 0.15);
    transform: translateY(-6px);
}
.icon-box .ico {
    background: var(--gradient-red);
    box-shadow: 0 4px 16px var(--c-glow-red);
    transition: all 0.3s;
}
.icon-box:hover .ico {
    background: var(--gradient-cyan);
    box-shadow: 0 4px 24px var(--c-glow-cyan);
}

/* ============================================================
   REDUCED MOTION SAFETY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .marquee-track, .gradient-text-mix, .hero-slide-content,
    .scroll-indicator, .live-badge::before, .pricing-box.featured::after,
    .progress-item .fill::after, .wa-float, .glow-blob {
        animation: none !important;
    }
}

/* ============================================================
   MOBILE TUNING
   ============================================================ */
@media (max-width: 800px) {
    .grid-bg::before { background-size: 30px 30px; }
    .marquee-item { font-size: 0.9rem; }
    .marquee-item .num { font-size: 1.05rem; }
    .scroll-indicator { display: none; }
}