/* ================================================================
   BZMTECH — "CYBER FORGE" Ultra-Pro Landing Page
   Neon + Magic + 3D — Mobile-First
   ================================================================ */

/* ===== DESIGN TOKENS ===== */
:root {
    --void: #050508;
    --surface: #0a0b10;
    --elevated: #111320;
    --card: #14162a;
    --card-hover: #1a1d38;

    --neon: #00e5ff;
    --neon-dim: rgba(0, 229, 255, 0.12);
    --neon-glow: rgba(0, 229, 255, 0.5);
    --violet: #a855f7;
    --violet-dim: rgba(168, 85, 247, 0.12);
    --violet-glow: rgba(168, 85, 247, 0.45);
    --hot: #ff3d8f;
    --hot-dim: rgba(255, 61, 143, 0.12);
    --hot-glow: rgba(255, 61, 143, 0.4);
    --amber: #ff9f1c;
    --amber-dim: rgba(255, 159, 28, 0.12);
    --gold: #ffd600;
    --green: #25d366;

    --txt: #edf0f7;
    --txt2: #8890a8;
    --txt3: #4e5470;
    --inv: #050508;
    --white: #fff;

    --border: rgba(255,255,255,0.06);
    --glass: rgba(255,255,255,0.03);

    --xs: 4px; --sm: 8px; --md: 16px; --lg: 24px;
    --xl: 40px; --2xl: 64px; --3xl: 100px;

    --r-sm: 8px; --r-md: 12px; --r-lg: 20px;
    --r-xl: 28px; --r-full: 9999px;

    --body: 'Inter', -apple-system, sans-serif;
    --heading: 'Space Grotesk', 'Inter', sans-serif;
    --mono: 'JetBrains Mono', monospace;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--void);color:var(--txt);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4,h5{font-family:var(--heading);line-height:1.1;font-weight:800}

.container{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--md)}
section{padding:var(--2xl) 0;position:relative}

/* ================================================================
   MAGIC PARTICLES — CSS-only floating orbs
   ================================================================ */
.magic-particles{
    position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.particle{
    position:absolute;border-radius:50%;
    animation:particleFloat linear infinite;
    opacity:0;
}
.particle:nth-child(1){width:3px;height:3px;background:var(--neon);left:15%;animation-duration:8s;animation-delay:0s}
.particle:nth-child(2){width:2px;height:2px;background:var(--violet);left:35%;animation-duration:12s;animation-delay:2s}
.particle:nth-child(3){width:4px;height:4px;background:var(--hot);left:55%;animation-duration:10s;animation-delay:4s}
.particle:nth-child(4){width:2px;height:2px;background:var(--neon);left:75%;animation-duration:9s;animation-delay:1s}
.particle:nth-child(5){width:3px;height:3px;background:var(--violet);left:90%;animation-duration:11s;animation-delay:3s}
.particle:nth-child(6){width:2px;height:2px;background:var(--hot);left:5%;animation-duration:13s;animation-delay:5s}
.particle:nth-child(7){width:3px;height:3px;background:var(--amber);left:45%;animation-duration:7s;animation-delay:6s}
.particle:nth-child(8){width:2px;height:2px;background:var(--neon);left:65%;animation-duration:14s;animation-delay:0.5s}

@keyframes particleFloat{
    0%{transform:translateY(100vh) scale(0);opacity:0}
    10%{opacity:0.8}
    90%{opacity:0.6}
    100%{transform:translateY(-10vh) scale(1.5);opacity:0}
}

/* ================================================================
   ANIMATED GRADIENT MESH BACKGROUND
   ================================================================ */
.mesh-bg{
    position:fixed;inset:0;z-index:0;pointer-events:none;
}
.mesh-orb{
    position:absolute;border-radius:50%;filter:blur(100px);
    opacity:0.15;animation:orbDrift 20s ease-in-out infinite;
}
.mesh-orb:nth-child(1){width:500px;height:500px;background:var(--neon);top:-10%;left:-10%;animation-delay:0s}
.mesh-orb:nth-child(2){width:400px;height:400px;background:var(--violet);bottom:-5%;right:-5%;animation-delay:-7s}
.mesh-orb:nth-child(3){width:300px;height:300px;background:var(--hot);top:50%;left:50%;animation-delay:-14s}

@keyframes orbDrift{
    0%,100%{transform:translate(0,0) scale(1)}
    25%{transform:translate(50px,-30px) scale(1.1)}
    50%{transform:translate(-30px,50px) scale(0.9)}
    75%{transform:translate(40px,20px) scale(1.05)}
}

/* ================================================================
   PROVISIONAL BANNER
   ================================================================ */
.prov-banner{
    background:linear-gradient(90deg,var(--neon-dim),var(--violet-dim),var(--neon-dim));
    background-size:200% 100%;
    animation:bannerShimmer 4s ease infinite;
    border-bottom:1px solid var(--border);
    text-align:center;padding:var(--sm) var(--md);
    font-size:0.72rem;font-weight:600;letter-spacing:1px;
    color:var(--txt2);position:relative;z-index:1001;
}
.prov-banner .hl{color:var(--neon);font-weight:800}
.prov-banner i{color:var(--violet);margin-right:6px}

@keyframes bannerShimmer{
    0%{background-position:0% 0}
    50%{background-position:100% 0}
    100%{background-position:0% 0}
}

/* ================================================================
   NAVIGATION — Ultra Pro
   ================================================================ */
.navbar{
    position:fixed;top:0;left:0;right:0;z-index:1000;
    background:rgba(5,5,8,0.6);
    backdrop-filter:blur(30px) saturate(1.6);
    -webkit-backdrop-filter:blur(30px) saturate(1.6);
    border-bottom:1px solid var(--border);
    transition:all 0.4s var(--ease);
}
.navbar.has-banner{top:33px}
.navbar.scrolled{
    background:rgba(5,5,8,0.92);
    box-shadow:0 4px 40px rgba(0,229,255,0.06);
}

.navbar-inner{
    display:flex;align-items:center;justify-content:space-between;height:64px;
}

/* Logo */
.logo{
    display:flex;align-items:center;gap:10px;
    text-decoration:none;position:relative;z-index:101;
}
.logo-img{
    width:42px;height:42px;object-fit:contain;
    filter:drop-shadow(0 0 12px var(--neon-glow));
    transition:transform 0.5s var(--spring),filter 0.5s;
}
.logo:hover .logo-img{
    transform:rotate(-8deg) scale(1.15);
    filter:drop-shadow(0 0 20px var(--neon-glow)) drop-shadow(0 0 40px rgba(0,229,255,0.25));
}
.logo-text{
    font-family:var(--heading);font-size:1.35rem;font-weight:900;color:var(--txt);
}
.logo-text span{color:var(--neon)}

/* Mobile nav toggle */
.nav-toggle{
    display:flex;flex-direction:column;gap:5px;
    background:none;border:none;padding:12px;z-index:1060;
    min-width:44px;min-height:44px;
    align-items:center;justify-content:center;
    -webkit-tap-highlight-color:transparent;
    position:relative;
}
.nav-toggle span{
    display:block;width:22px;height:2px;background:var(--txt);
    border-radius:2px;transition:all 0.4s var(--ease);transform-origin:center;
}
.nav-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-toggle.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Mobile menu fullscreen — sits OUTSIDE navbar to avoid stacking context issues */

/* Overlay backdrop */
.nav-overlay{
    position:fixed;inset:0;
    background:rgba(5,5,8,0.65);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;pointer-events:none;
    transition:opacity 0.35s var(--ease);
    z-index:1040;
}
.nav-overlay.open{
    opacity:1;pointer-events:auto;
}

/* Drawer panel — slides from right */
.nav-menu{
    position:fixed;top:0;right:0;bottom:0;
    width:min(320px, 85vw);
    background:var(--surface);
    border-left:1px solid var(--border);
    display:flex;flex-direction:column;
    transform:translateX(100%);
    transition:transform 0.4s var(--ease);
    z-index:1050;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
.nav-menu.open{
    transform:translateX(0);
}

/* Drawer header */
.nav-menu-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 20px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
}
.nav-menu-brand{
    display:flex;align-items:center;gap:10px;
}
.nav-menu-logo{
    width:32px;height:32px;object-fit:contain;
    filter:drop-shadow(0 0 8px var(--neon-glow));
}
.nav-menu-title{
    font-family:var(--heading);font-size:1.1rem;font-weight:900;color:var(--txt);
}
.nav-menu-title span{color:var(--neon)}

/* Close button */
.nav-close{
    width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--border);
    border-radius:var(--r-sm);
    background:var(--glass);
    color:var(--txt2);
    font-size:1.1rem;
    transition:all 0.25s var(--ease);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.nav-close:hover,.nav-close:active{
    background:var(--hot-dim);
    border-color:rgba(255,61,143,0.3);
    color:var(--hot);
}

/* Navigation links */
.nav-menu-links{
    flex:1;display:flex;flex-direction:column;
    padding:12px 0;
}
.nav-menu-links a{
    display:flex;align-items:center;gap:14px;
    padding:14px 24px;
    font-family:var(--body);
    font-size:0.95rem;font-weight:600;
    color:var(--txt2);
    position:relative;
    transition:all 0.25s var(--ease);
    border-left:3px solid transparent;
}
.nav-menu-links a i{
    width:20px;text-align:center;
    color:var(--neon);opacity:0.5;font-size:0.9rem;
    transition:opacity 0.25s;
}
.nav-menu-links a:hover,
.nav-menu-links a:active{
    color:var(--neon);
    background:var(--neon-dim);
    border-left-color:var(--neon);
}
.nav-menu-links a:hover i,
.nav-menu-links a:active i{
    opacity:1;
}

/* Stagger entrance */
.nav-menu.open .nav-menu-links a{
    animation:menuSlideIn 0.35s var(--ease) both;
}
.nav-menu.open .nav-menu-links a:nth-child(1){animation-delay:0.05s}
.nav-menu.open .nav-menu-links a:nth-child(2){animation-delay:0.10s}
.nav-menu.open .nav-menu-links a:nth-child(3){animation-delay:0.15s}
.nav-menu.open .nav-menu-links a:nth-child(4){animation-delay:0.20s}
.nav-menu.open .nav-menu-links a:nth-child(5){animation-delay:0.25s}
@keyframes menuSlideIn{
    from{opacity:0;transform:translateX(20px)}
    to{opacity:1;transform:translateX(0)}
}

/* Drawer footer */
.nav-menu-footer{
    flex-shrink:0;
    padding:16px 20px 24px;
    border-top:1px solid var(--border);
    display:flex;flex-direction:column;gap:10px;
}

.nav-cta-mobile{
    display:flex;align-items:center;justify-content:center;gap:10px;
    padding:13px 20px;
    background:var(--neon);color:var(--inv);
    border-radius:var(--r-md);
    font-size:0.9rem;font-weight:800;
    box-shadow:0 0 20px var(--neon-glow);
    transition:transform 0.3s var(--spring),box-shadow 0.3s;
}
.nav-cta-mobile:active{
    transform:scale(0.97);
}

.nav-cta-secondary{
    display:flex;align-items:center;justify-content:center;gap:10px;
    padding:11px 20px;
    border:1px solid var(--border);
    border-radius:var(--r-md);
    font-size:0.85rem;font-weight:600;
    color:var(--txt2);
    transition:all 0.25s;
}
.nav-cta-secondary:hover{
    border-color:var(--neon-dim);
    color:var(--neon);
    background:var(--neon-dim);
}

.nav-menu-socials{
    display:flex;justify-content:center;gap:16px;
    padding:8px 0;
}
.nav-menu-socials a{
    width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--border);
    border-radius:var(--r-sm);
    color:var(--txt2);font-size:1rem;
    transition:all 0.25s;
}
.nav-menu-socials a:hover{
    border-color:var(--violet-dim);
    color:var(--violet);
    background:var(--violet-dim);
}

.nav-menu-address{
    font-size:0.75rem;color:var(--txt3);text-align:center;
    display:flex;align-items:center;justify-content:center;gap:6px;
}
.nav-menu-address i{color:var(--hot);opacity:0.6;font-size:0.7rem}

/* ================================================================
   3D BUTTONS — Pro
   ================================================================ */
.btn-3d{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:16px 32px;border-radius:var(--r-lg);
    font-size:0.9rem;font-weight:700;border:none;cursor:pointer;
    position:relative;overflow:hidden;
    transition:all 0.4s var(--spring);
    transform-style:preserve-3d;
    perspective:600px;
}
.btn-3d::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,0.15) 0%,transparent 60%);
    pointer-events:none;border-radius:inherit;
}
.btn-3d::after{
    content:'';position:absolute;bottom:-3px;left:8%;width:84%;height:60%;
    border-radius:inherit;filter:blur(16px);
    transition:all 0.4s;opacity:0.6;z-index:-1;
}
.btn-3d:hover{transform:translateY(-4px) rotateX(4deg) scale(1.02)}
.btn-3d:active{transform:translateY(0) rotateX(0) scale(0.98)}

/* Neon variant */
.btn-neon{
    background:linear-gradient(135deg,#00c6ff,#00e5ff,#00ffea);
    color:var(--inv);
    box-shadow:0 6px 24px var(--neon-glow), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-neon::after{background:var(--neon)}
.btn-neon:hover{box-shadow:0 12px 40px var(--neon-glow),0 0 60px rgba(0,229,255,0.2)}

/* Violet variant */
.btn-violet{
    background:linear-gradient(135deg,#9333ea,#a855f7,#c084fc);
    color:var(--white);
    box-shadow:0 6px 24px var(--violet-glow),inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-violet::after{background:var(--violet)}
.btn-violet:hover{box-shadow:0 12px 40px var(--violet-glow),0 0 60px rgba(168,85,247,0.2)}

/* WhatsApp variant */
.btn-wa{
    background:linear-gradient(135deg,#1eb851,#25d366,#34eb7a);
    color:var(--white);
    box-shadow:0 6px 24px rgba(37,211,102,0.35),inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-wa::after{background:var(--green)}
.btn-wa:hover{box-shadow:0 12px 40px rgba(37,211,102,0.45),0 0 60px rgba(37,211,102,0.15)}

/* Ghost variant */
.btn-ghost{
    background:transparent;color:var(--txt2);
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:none;
}
.btn-ghost::after{display:none}
.btn-ghost:hover{
    color:var(--neon);border-color:var(--neon);
    box-shadow:0 0 20px var(--neon-dim);
    background:var(--neon-dim);
}

/* Shimmer sweep on buttons */
.btn-3d .btn-shimmer{
    position:absolute;top:-50%;left:-50%;width:200%;height:200%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);
    transform:rotate(30deg) translateX(-100%);
    transition:none;pointer-events:none;
}
.btn-3d:hover .btn-shimmer{
    animation:btnSweep 0.8s ease forwards;
}
@keyframes btnSweep{
    to{transform:rotate(30deg) translateX(100%)}
}

/* ================================================================
   SECTION HEADERS
   ================================================================ */
.sec-label{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--mono);font-size:0.68rem;font-weight:700;
    text-transform:uppercase;letter-spacing:3px;color:var(--neon);
    margin-bottom:var(--md);
}
.sec-label::before{
    content:'';width:28px;height:2px;
    background:linear-gradient(90deg,var(--neon),transparent);
    border-radius:2px;
}
.sec-title{font-size:clamp(1.6rem,5vw,2.8rem);font-weight:900;margin-bottom:var(--sm)}
.sec-title .glow{
    background:linear-gradient(135deg,var(--neon),var(--violet));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    position:relative;
}
.sec-title .glow::after{
    content:attr(data-text);position:absolute;inset:0;
    background:linear-gradient(135deg,var(--neon),var(--violet));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    filter:blur(20px);opacity:0.5;pointer-events:none;
}
.sec-sub{font-size:0.9rem;color:var(--txt2);max-width:500px;line-height:1.8}
.sec-header{margin-bottom:var(--xl)}
.sec-header.center{text-align:center}
.sec-header.center .sec-sub{margin:0 auto}
.sec-header.center .sec-label{justify-content:center}

/* ================================================================
   HERO — Immersive
   ================================================================ */
.hero{
    min-height:100vh;min-height:100dvh;
    display:flex;align-items:center;
    padding-top:120px;padding-bottom:var(--2xl);
    position:relative;overflow:hidden;z-index:1;
}

/* Animated grid */
.hero::before{
    content:'';position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(0,229,255,0.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(0,229,255,0.04) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,black 20%,transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,black 20%,transparent 70%);
    animation:gridPulse 4s ease-in-out infinite;
}
@keyframes gridPulse{
    0%,100%{opacity:1}50%{opacity:0.5}
}

/* Neon scan line */
.hero::after{
    content:'';position:absolute;top:0;left:0;right:0;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--neon),var(--violet),transparent);
    animation:scanLine 4s ease-in-out infinite;
    z-index:3;
}
@keyframes scanLine{
    0%{top:0;opacity:0}
    10%{opacity:0.8}
    90%{opacity:0.6}
    100%{top:100%;opacity:0}
}

.hero .container{position:relative;z-index:2}

/* Tag pill */
.hero-tag{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--neon-dim);
    border:1px solid rgba(0,229,255,0.2);
    padding:7px 16px;border-radius:var(--r-full);
    font-family:var(--mono);font-size:0.7rem;font-weight:700;
    color:var(--neon);margin-bottom:var(--lg);
    letter-spacing:1px;
    animation:fadeSlideUp 0.6s var(--ease) forwards;
    opacity:0;
}
.hero-tag .dot{
    width:7px;height:7px;background:var(--neon);border-radius:50%;
    box-shadow:0 0 8px var(--neon-glow);
    animation:blink 1.5s ease infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}

/* Hero title with neon text effects */
.hero-title{
    font-size:clamp(2.2rem,8vw,4.2rem);
    font-weight:900;line-height:1.05;
    margin-bottom:var(--lg);
}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line-inner{
    display:inline-block;
    transform:translateY(110%);
    animation:heroSlideUp 0.9s var(--ease) forwards;
}
.hero-title .line:nth-child(2) .line-inner{animation-delay:0.12s}
.hero-title .line:nth-child(3) .line-inner{animation-delay:0.24s}

@keyframes heroSlideUp{to{transform:translateY(0)}}
@keyframes fadeSlideUp{to{opacity:1;transform:translateY(0)}}

/* Neon outline text */
.neon-outline{
    -webkit-text-stroke:2px var(--neon);
    color:transparent;
    position:relative;
    transition:all 0.5s var(--ease);
}
.neon-outline:hover{
    color:var(--neon);
    -webkit-text-stroke:0px;
    text-shadow:0 0 20px var(--neon-glow),0 0 60px rgba(0,229,255,0.3);
}

/* Gradient text fill */
.neon-fill{
    background:linear-gradient(135deg,var(--neon) 0%,var(--violet) 50%,var(--hot) 100%);
    background-size:300% auto;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:heroGrad 5s ease infinite;
}
@keyframes heroGrad{
    0%{background-position:0% center}
    50%{background-position:100% center}
    100%{background-position:0% center}
}

/* Typed cursor */
.typed-cursor{
    font-family:var(--mono);font-weight:300;color:var(--neon);
    animation:cursorBlink 0.7s step-end infinite;
}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}

/* Glitch on hover */
.word-hover{
    position:relative;display:inline-block;cursor:default;
    transition:all 0.3s var(--ease);
}
.word-hover::before,.word-hover::after{
    content:attr(data-text);position:absolute;top:0;left:0;
    opacity:0;pointer-events:none;
}
.word-hover:hover{text-shadow:0 0 20px var(--neon-glow)}
.word-hover:hover::before{animation:glitchA 0.3s ease 1;color:var(--hot);opacity:0.7}
.word-hover:hover::after{animation:glitchB 0.3s ease 0.05s 1;color:var(--violet);opacity:0.6}

@keyframes glitchA{
    0%{clip-path:inset(20% 0 60% 0);transform:translate(-3px,-2px);opacity:0.7}
    50%{clip-path:inset(50% 0 20% 0);transform:translate(3px,2px);opacity:0.5}
    100%{clip-path:inset(0);transform:translate(0);opacity:0}
}
@keyframes glitchB{
    0%{clip-path:inset(60% 0 10% 0);transform:translate(3px,-1px);opacity:0.6}
    50%{clip-path:inset(10% 0 70% 0);transform:translate(-2px,2px);opacity:0.4}
    100%{clip-path:inset(0);transform:translate(0);opacity:0}
}

/* Hero description */
.hero-desc{
    font-size:0.95rem;color:var(--txt2);max-width:460px;line-height:1.8;
    margin-bottom:var(--xl);
    opacity:0;transform:translateY(20px);
    animation:fadeSlideUp 0.8s var(--ease) 0.45s forwards;
}

/* Hero actions */
.hero-actions{
    display:flex;flex-wrap:wrap;gap:var(--sm);
    margin-bottom:var(--xl);
    opacity:0;animation:fadeSlideUp 0.8s var(--ease) 0.6s forwards;
}

/* Hero metrics */
.hero-metrics{
    display:flex;gap:var(--xl);
    opacity:0;animation:fadeSlideUp 0.8s var(--ease) 0.75s forwards;
}
.metric-val{
    font-family:var(--heading);font-size:1.6rem;font-weight:900;color:var(--txt);
}
.metric-val .unit{font-size:0.65em;color:var(--neon)}
.metric-lbl{font-size:0.68rem;color:var(--txt3);font-weight:500;margin-top:2px}

/* Floating hero illustration */
.hero-visual{display:none}
.hero-illust{
    position:relative;width:100%;max-width:420px;
    animation:floatY 6s ease-in-out infinite;
}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* Neon decorative shapes */
.deco-ring{
    position:absolute;border:2px solid rgba(0,229,255,0.1);
    border-radius:50%;pointer-events:none;
    animation:ringRotate 20s linear infinite;
}
.deco-ring.r1{width:300px;height:300px;top:-50px;right:-50px;border-color:rgba(168,85,247,0.08)}
.deco-ring.r2{width:200px;height:200px;bottom:20%;left:-30px;border-color:rgba(0,229,255,0.08);animation-direction:reverse}

@keyframes ringRotate{to{transform:rotate(360deg)}}

/* ================================================================
   STORE GALLERY
   ================================================================ */
.store-gallery{
    background:var(--surface);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    z-index:1;position:relative;
}
.gallery-grid{display:grid;grid-template-columns:1fr;gap:var(--md)}
.gallery-item{
    position:relative;border-radius:var(--r-lg);overflow:hidden;
    aspect-ratio:16/10;cursor:pointer;
    border:1px solid var(--border);
    transition:all 0.5s var(--ease);
}
.gallery-item::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 30%,rgba(5,5,8,0.9) 100%);
    pointer-events:none;z-index:1;
}
/* Neon scan ring overlay on hover */
.gallery-item .scan-ring{
    position:absolute;inset:0;z-index:2;
    border:2px solid transparent;border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(var(--surface),var(--surface)) padding-box,
               conic-gradient(from var(--scan-angle,0deg),transparent 80%,var(--neon) 90%,transparent 100%) border-box;
    opacity:0;transition:opacity 0.5s var(--ease);
    animation:scanBorder 3s linear infinite;
}
.gallery-item:hover .scan-ring{opacity:1}
.gallery-item img{
    width:100%;height:100%;object-fit:cover;
    transition:transform 0.8s var(--ease),filter 0.8s;
}
.gallery-item:hover img{transform:scale(1.08);filter:brightness(1.15)}
.gallery-item:hover{border-color:var(--neon);box-shadow:0 0 30px var(--neon-dim)}

.gallery-caption{
    position:absolute;bottom:0;left:0;right:0;
    padding:var(--lg);z-index:2;
}
.gallery-caption .tag{
    display:inline-block;background:var(--neon-dim);color:var(--neon);
    font-family:var(--mono);font-size:0.6rem;font-weight:700;
    padding:3px 12px;border-radius:var(--r-full);
    margin-bottom:8px;letter-spacing:1.5px;text-transform:uppercase;
}
.gallery-caption h3{font-size:1rem;font-weight:700;margin-bottom:4px}
.gallery-caption p{font-size:0.75rem;color:var(--txt2)}

/* ================================================================
   BRANDS — Text-Only Marquee
   ================================================================ */
.brands{
    background:var(--void);padding:var(--xl) 0;
    border-bottom:1px solid var(--border);
    overflow:hidden;z-index:1;position:relative;
}
.brands-label{
    text-align:center;font-family:var(--mono);
    font-size:0.62rem;color:var(--txt3);
    text-transform:uppercase;letter-spacing:4px;
    margin-bottom:var(--lg);
}
.marquee-wrap{
    overflow:hidden;position:relative;
    padding:var(--sm) 0;margin-bottom:var(--sm);
}
.marquee-wrap::before,.marquee-wrap::after{
    content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.marquee-wrap::before{left:0;background:linear-gradient(90deg,var(--void),transparent)}
.marquee-wrap::after{right:0;background:linear-gradient(270deg,var(--void),transparent)}

.marquee-track{
    display:flex;align-items:center;width:max-content;
    animation:marqueeLeft 30s linear infinite;
}
.marquee-track.reverse{animation:marqueeRight 34s linear infinite}
.marquee-track:hover{animation-play-state:paused}

@keyframes marqueeLeft{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes marqueeRight{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}

.brand-word{
    font-family:var(--heading);
    font-size:clamp(1.2rem,3vw,1.8rem);
    font-weight:800;color:var(--txt3);
    letter-spacing:-0.5px;
    cursor:default;white-space:nowrap;padding:0 4px;
    transition:color 0.4s,text-shadow 0.4s,transform 0.3s var(--spring),letter-spacing 0.3s;
}
.brand-word:hover{transform:scale(1.1) translateY(-2px);letter-spacing:1px}
.brand-sep{
    font-size:1.2rem;color:rgba(255,255,255,0.06);
    padding:0 clamp(8px,2vw,20px);user-select:none;
}

/* ================================================================
   SERVICES — Bento Grid Pro
   ================================================================ */
.services{background:var(--void);position:relative;z-index:1}

/* Dot grid behind */
.services::before{
    content:'';position:absolute;inset:0;
    background-image:radial-gradient(circle at 1px 1px,rgba(0,229,255,0.03) 1px,transparent 0);
    background-size:32px 32px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black,transparent);
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black,transparent);
    pointer-events:none;
}
.services .container{position:relative;z-index:1}

.services-grid{display:grid;grid-template-columns:1fr;gap:var(--lg)}

.svc-card{
    background:rgba(10,11,16,0.8);
    backdrop-filter:blur(12px);
    border:1px solid var(--border);
    border-radius:var(--r-xl);
    padding:var(--xl) var(--lg);
    position:relative;overflow:hidden;
    transition:all 0.5s var(--ease);
    transform-style:preserve-3d;
}

/* Top gradient bar animated */
.svc-card::after{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    transform:scaleX(0);transform-origin:left;
    transition:transform 0.6s var(--ease);
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    z-index:2;
}
.svc-card:hover::after{transform:scaleX(1)}
.svc-card:nth-child(1)::after{background:linear-gradient(90deg,var(--neon),var(--violet))}
.svc-card:nth-child(2)::after{background:linear-gradient(90deg,var(--amber),var(--hot))}
.svc-card:nth-child(3)::after{background:linear-gradient(90deg,var(--violet),var(--hot))}

/* Glow orb on hover */
.svc-glow{
    position:absolute;width:200px;height:200px;border-radius:50%;
    filter:blur(70px);opacity:0;
    transition:opacity 0.6s;pointer-events:none;
    top:-60px;right:-60px;
}
.svc-card:hover .svc-glow{opacity:1}
.svc-card:nth-child(1) .svc-glow{background:var(--neon-glow)}
.svc-card:nth-child(2) .svc-glow{background:var(--amber);opacity:0}
.svc-card:nth-child(3) .svc-glow{background:var(--violet-glow)}

.svc-card:hover{
    border-color:rgba(255,255,255,0.1);
    transform:translateY(-8px);
    box-shadow:0 24px 64px rgba(0,0,0,0.5);
}

/* Big faded number */
.svc-big-num{
    font-family:var(--heading);font-size:5rem;font-weight:900;
    line-height:1;opacity:0.04;position:absolute;
    top:16px;right:20px;pointer-events:none;
    transition:opacity 0.4s,transform 0.4s var(--spring);
}
.svc-card:hover .svc-big-num{opacity:0.08;transform:scale(1.1)}

/* Icon wrap with animated ring */
.svc-icon{
    width:60px;height:60px;border-radius:var(--r-lg);
    display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;position:relative;
    margin-bottom:var(--lg);
    transition:all 0.4s var(--spring);
}
.svc-icon .ring{
    position:absolute;inset:-5px;border-radius:inherit;
    border:2px solid transparent;
    transition:all 0.5s var(--spring);
}
.svc-card:hover .svc-icon{transform:scale(1.12) rotate(-5deg)}
.svc-card:hover .svc-icon .ring{transform:rotate(90deg) scale(1.15)}

.svc-card:nth-child(1) .svc-icon{background:var(--neon-dim);color:var(--neon)}
.svc-card:nth-child(1):hover .svc-icon{box-shadow:0 0 30px var(--neon-glow)}
.svc-card:nth-child(1):hover .ring{border-color:var(--neon)}

.svc-card:nth-child(2) .svc-icon{background:var(--amber-dim);color:var(--amber)}
.svc-card:nth-child(2):hover .svc-icon{box-shadow:0 0 30px rgba(255,159,28,0.4)}
.svc-card:nth-child(2):hover .ring{border-color:var(--amber)}

.svc-card:nth-child(3) .svc-icon{background:var(--violet-dim);color:var(--violet)}
.svc-card:nth-child(3):hover .svc-icon{box-shadow:0 0 30px var(--violet-glow)}
.svc-card:nth-child(3):hover .ring{border-color:var(--violet)}

/* Tag pill */
.svc-tag{
    display:inline-block;font-family:var(--mono);
    font-size:0.6rem;font-weight:700;text-transform:uppercase;
    letter-spacing:2px;padding:4px 14px;border-radius:var(--r-full);
    margin-bottom:var(--md);
}
.svc-tag.t1{background:var(--neon-dim);color:var(--neon);border:1px solid rgba(0,229,255,0.15)}
.svc-tag.t2{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(255,159,28,0.15)}
.svc-tag.t3{background:var(--violet-dim);color:var(--violet);border:1px solid rgba(168,85,247,0.15)}

.svc-card h3{font-size:1.2rem;font-weight:800;margin-bottom:var(--sm);transition:color 0.3s}
.svc-card:hover h3{color:var(--white)}
.svc-card>p{font-size:0.85rem;color:var(--txt2);line-height:1.8;margin-bottom:var(--lg)}

/* Feature list */
.svc-list li{
    display:flex;align-items:center;gap:12px;
    font-size:0.82rem;color:var(--txt2);
    padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.03);
    transition:all 0.3s;
}
.svc-list li:last-child{border-bottom:none}
.svc-card:hover .svc-list li{color:var(--txt)}
.li-dot{
    width:6px;height:6px;border-radius:50%;flex-shrink:0;
    transition:all 0.4s var(--spring);
}
.svc-card:nth-child(1) .li-dot{background:var(--neon)}
.svc-card:nth-child(2) .li-dot{background:var(--amber)}
.svc-card:nth-child(3) .li-dot{background:var(--violet)}
.svc-card:hover .li-dot{transform:scale(1.6)}
.svc-card:nth-child(1):hover .li-dot{box-shadow:0 0 10px var(--neon-glow)}
.svc-card:nth-child(2):hover .li-dot{box-shadow:0 0 10px rgba(255,159,28,0.4)}
.svc-card:nth-child(3):hover .li-dot{box-shadow:0 0 10px var(--violet-glow)}

/* Stat footer */
.svc-footer{
    display:flex;align-items:baseline;gap:6px;
    padding-top:var(--md);border-top:1px solid var(--border);
    margin-top:var(--lg);
}
.svc-stat{font-family:var(--heading);font-size:1.8rem;font-weight:900;line-height:1}
.svc-card:nth-child(1) .svc-stat{color:var(--neon)}
.svc-card:nth-child(2) .svc-stat{color:var(--amber)}
.svc-card:nth-child(3) .svc-stat{color:var(--violet)}
.svc-stat-lbl{font-size:0.72rem;color:var(--txt3);font-weight:500}

/* ================================================================
   WHY US — Glass cards
   ================================================================ */
.why-us{
    background:var(--surface);border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);z-index:1;position:relative;
}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--md)}
.why-card{
    padding:var(--lg);border-radius:var(--r-lg);
    border:1px solid transparent;
    transition:all 0.4s var(--ease);
    position:relative;
}
.why-card:hover{
    background:rgba(255,255,255,0.02);
    border-color:var(--border);
    transform:translateY(-4px);
}
.why-icon{
    width:44px;height:44px;border-radius:var(--r-md);
    background:var(--neon-dim);
    display:flex;align-items:center;justify-content:center;
    font-size:1rem;color:var(--neon);
    margin-bottom:var(--md);
    transition:all 0.5s var(--spring);
}
.why-card:hover .why-icon{
    transform:scale(1.15) rotate(-8deg);
    box-shadow:0 0 24px var(--neon-glow);
}
.why-card h4{font-size:0.92rem;font-weight:700;margin-bottom:var(--xs)}
.why-card p{font-size:0.78rem;color:var(--txt3);line-height:1.6}

/* ================================================================
   REVIEWS
   ================================================================ */
.reviews{background:var(--void);z-index:1;position:relative}
.reviews-badge{
    display:flex;align-items:center;gap:var(--md);
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r-lg);padding:var(--md) var(--lg);
    margin-bottom:var(--xl);flex-wrap:wrap;
}
.reviews-score{
    font-family:var(--heading);font-size:2.8rem;font-weight:900;
    color:var(--gold);line-height:1;
}
.reviews-stars{color:var(--gold);font-size:0.85rem;margin-bottom:2px}
.reviews-count{font-size:0.72rem;color:var(--txt3)}
.reviews-count strong{color:var(--txt2)}

/* Google Review button */
.btn-google-review{
    margin-left:auto;
    background:linear-gradient(135deg,#4285F4,#34A853,#FBBC05,#EA4335);
    background-size:300% auto;
    animation:googleGrad 4s ease infinite;
    color:var(--white)!important;
    font-size:0.78rem;
    border:none;
}
.btn-google-review:hover{
    box-shadow:0 6px 24px rgba(66,133,244,0.35);
}
@keyframes googleGrad{
    0%{background-position:0% center}50%{background-position:100% center}100%{background-position:0% center}
}

.reviews-grid{display:grid;grid-template-columns:1fr;gap:var(--md)}
.rv-card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r-lg);padding:var(--lg);
    transition:all 0.4s var(--ease);
}
.rv-card:hover{border-color:rgba(255,255,255,0.1);transform:translateY(-4px)}
.rv-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--md)}
.rv-author{display:flex;align-items:center;gap:var(--sm)}
.rv-avatar{
    width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:0.85rem;color:var(--inv);flex-shrink:0;
}
.rv-avatar.c1{background:var(--neon)}
.rv-avatar.c2{background:var(--amber)}
.rv-avatar.c3{background:var(--violet)}
.rv-name{font-size:0.85rem;font-weight:600}
.rv-date{font-size:0.68rem;color:var(--txt3)}
.rv-stars{color:var(--gold);font-size:0.65rem;display:flex;gap:2px}
.rv-text{font-size:0.82rem;color:var(--txt2);line-height:1.7}

/* ================================================================
   CONTACT
   ================================================================ */
.contact{
    background:var(--surface);border-top:1px solid var(--border);
    z-index:1;position:relative;
}
.contact-grid{display:grid;grid-template-columns:1fr;gap:var(--lg)}
.contact-card{
    background:var(--elevated);border:1px solid var(--border);
    border-radius:var(--r-lg);padding:var(--lg);
}
.contact-card h3{font-size:1.1rem;font-weight:700;margin-bottom:var(--lg)}
.contact-row{
    display:flex;gap:var(--md);padding:var(--md) 0;
    border-bottom:1px solid var(--border);
}
.contact-row:last-of-type{border-bottom:none}
.contact-icon{
    width:40px;height:40px;min-width:40px;border-radius:var(--r-sm);
    background:var(--neon-dim);display:flex;align-items:center;justify-content:center;
    color:var(--neon);font-size:0.95rem;
    transition:all 0.3s var(--spring);
}
.contact-row:hover .contact-icon{
    transform:scale(1.1);box-shadow:0 0 16px var(--neon-glow);
}
.contact-row h4{
    font-size:0.75rem;font-weight:600;color:var(--txt3);
    margin-bottom:4px;text-transform:uppercase;letter-spacing:0.5px;
}
.contact-row p,.contact-row a{font-size:0.88rem;color:var(--txt2);transition:color 0.3s}
.contact-row a:hover{color:var(--neon)}

/* Socials */
.socials{display:flex;gap:var(--sm);margin-top:var(--lg)}
.social-btn{
    width:46px;height:46px;border-radius:var(--r-md);
    display:flex;align-items:center;justify-content:center;
    font-size:1.1rem;color:var(--white);
    position:relative;overflow:hidden;
    transition:all 0.4s var(--spring);
    transform-style:preserve-3d;
}
.social-btn:hover{transform:translateY(-5px) rotateX(8deg) scale(1.08)}
.social-btn.fb{background:#1877f2;box-shadow:0 4px 20px rgba(24,119,242,0.3)}
.social-btn.fb:hover{box-shadow:0 8px 30px rgba(24,119,242,0.45)}
.social-btn.ig{
    background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
    box-shadow:0 4px 20px rgba(220,39,67,0.3);
}
.social-btn.ig:hover{box-shadow:0 8px 30px rgba(220,39,67,0.45)}
.social-btn.wa-s{background:var(--green);box-shadow:0 4px 20px rgba(37,211,102,0.3)}
.social-btn.wa-s:hover{box-shadow:0 8px 30px rgba(37,211,102,0.45)}

/* Social tooltip */
.social-btn[data-tooltip]::after{
    content:attr(data-tooltip);
    position:absolute;
    bottom:calc(100% + 10px);
    left:50%;transform:translateX(-50%) translateY(6px);
    background:var(--elevated);
    color:var(--txt);
    font-family:var(--mono);
    font-size:0.7rem;
    font-weight:600;
    letter-spacing:0.02em;
    padding:6px 12px;
    border-radius:var(--r-sm);
    white-space:nowrap;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.3s var(--ease), transform 0.3s var(--ease);
    border:1px solid var(--border);
    box-shadow:0 6px 20px rgba(0,0,0,0.5);
    z-index:10;
}
.social-btn.fb[data-tooltip]::after{border-color:rgba(24,119,242,0.3);box-shadow:0 4px 16px rgba(24,119,242,0.2)}
.social-btn.ig[data-tooltip]::after{border-color:rgba(220,39,67,0.3);box-shadow:0 4px 16px rgba(220,39,67,0.2)}
.social-btn.wa-s[data-tooltip]::after{border-color:rgba(37,211,102,0.3);box-shadow:0 4px 16px rgba(37,211,102,0.2)}
/* Tooltip arrow */
.social-btn[data-tooltip]::before{
    content:'';
    position:absolute;
    bottom:calc(100% + 4px);
    left:50%;transform:translateX(-50%) translateY(6px);
    border:5px solid transparent;
    border-top-color:var(--elevated);
    opacity:0;
    transition:opacity 0.3s var(--ease), transform 0.3s var(--ease);
    z-index:10;
    pointer-events:none;
}
.social-btn[data-tooltip]:hover::after,
.social-btn[data-tooltip]:hover::before{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

/* Map */
.contact-map{
    border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);
    min-height:280px;
}
.contact-map iframe{
    width:100%;height:100%;min-height:280px;border:none;
    filter:grayscale(0.6) brightness(0.7) contrast(1.1);
    transition:filter 0.5s;
}
.contact-map:hover iframe{filter:grayscale(0.2) brightness(0.85) contrast(1.05)}

/* ================================================================
   CTA
   ================================================================ */
.cta-section{background:var(--void);z-index:1;position:relative;overflow:hidden}
.cta-box{
    background:var(--surface);
    border:1px solid rgba(0,229,255,0.15);
    border-radius:var(--r-xl);
    padding:var(--xl) var(--lg);text-align:center;
    position:relative;overflow:hidden;
}
.cta-box::before{
    content:'';position:absolute;top:-2px;left:-2px;right:-2px;height:3px;
    background:linear-gradient(90deg,var(--neon),var(--violet),var(--hot),var(--neon));
    background-size:300% auto;
    animation:ctaGrad 3s ease infinite;
    border-radius:var(--r-xl) var(--r-xl) 0 0;
}
@keyframes ctaGrad{
    0%{background-position:0% center}
    50%{background-position:100% center}
    100%{background-position:0% center}
}
.cta-box h2{font-size:1.5rem;font-weight:900;margin-bottom:var(--sm)}
.cta-box p{font-size:0.9rem;color:var(--txt2);margin-bottom:var(--lg);max-width:500px;margin-left:auto;margin-right:auto}
.cta-actions{display:flex;flex-direction:column;gap:var(--sm);align-items:center}

/* ================================================================
   FOOTER
   ================================================================ */
.footer{background:var(--void);border-top:1px solid var(--border);padding:var(--lg) 0;z-index:1;position:relative}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:var(--md);text-align:center}
.footer-logo{display:flex;align-items:center;gap:var(--sm)}
.footer-logo-img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 0 8px var(--neon-glow))}
.footer-logo-text{font-family:var(--heading);font-weight:800;font-size:1.1rem}
.footer-logo-text span{color:var(--neon)}
.footer p{font-size:0.72rem;color:var(--txt3)}
.footer-socials{display:flex;gap:var(--sm)}
.footer-socials a{
    width:36px;height:36px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--surface);border:1px solid var(--border);
    color:var(--txt3);font-size:0.85rem;
    transition:all 0.4s var(--spring);
}
.footer-socials a:hover{
    color:var(--neon);border-color:rgba(0,229,255,0.3);
    transform:translateY(-3px);box-shadow:0 0 12px var(--neon-dim);
}

/* ================================================================
   FLOATING WHATSAPP
   ================================================================ */
.wa-float{
    position:fixed;bottom:20px;right:20px;z-index:999;
    width:58px;height:58px;background:var(--green);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:var(--white);font-size:1.7rem;
    box-shadow:0 4px 24px rgba(37,211,102,0.45);
    transition:all 0.4s var(--spring);
    animation:waPulse 2.5s ease infinite;
}
.wa-float:hover{transform:scale(1.15);box-shadow:0 8px 36px rgba(37,211,102,0.55)}
@keyframes waPulse{
    0%{box-shadow:0 0 0 0 rgba(37,211,102,0.4)}
    70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}
    100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

/* ================================================================
   LIGHTBOX
   ================================================================ */
.lightbox{
    position:fixed;inset:0;z-index:2000;
    background:rgba(5,5,8,0.96);backdrop-filter:blur(24px);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity 0.4s var(--ease);
}
.lightbox.active{opacity:1;pointer-events:auto}
.lightbox img{
    max-width:92vw;max-height:85vh;border-radius:var(--r-md);
    object-fit:contain;transform:scale(0.9);
    transition:transform 0.5s var(--spring);
}
.lightbox.active img{transform:scale(1)}
.lightbox-close{
    position:absolute;top:16px;right:16px;
    color:var(--txt2);font-size:1.5rem;cursor:pointer;
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;background:var(--surface);border:1px solid var(--border);
    transition:all 0.3s;
}
.lightbox-close:hover{color:var(--txt);background:var(--elevated)}

/* ================================================================
   SCROLL PROGRESS BAR
   ================================================================ */
.scroll-progress{
    position:fixed;top:0;left:0;height:3px;z-index:10000;
    background:linear-gradient(90deg,var(--neon),var(--violet),var(--hot));
    width:0%;
    transition:width 0.1s linear;
    box-shadow:0 0 12px var(--neon-glow),0 0 30px var(--violet-glow);
    pointer-events:none;
}

/* ================================================================
   SCROLL REVEAL — Enhanced Transition System
   ================================================================ */

/* Base reveal */
.reveal{
    opacity:0;
    transform:translateY(40px);
    transition:opacity 0.8s var(--ease),transform 0.8s var(--ease),filter 0.8s var(--ease);
    will-change:opacity,transform;
}

/* Direction variants */
.reveal.from-left{transform:translateX(-60px)}
.reveal.from-right{transform:translateX(60px)}
.reveal.from-bottom{transform:translateY(60px)}
.reveal.scale-up{transform:scale(0.85)}

/* Special variants — blur in */
.reveal.blur-in{
    transform:translateY(20px) scale(0.97);
    filter:blur(8px);
}

/* Rotate in */
.reveal.rotate-in{
    transform:perspective(600px) rotateX(12deg) translateY(30px);
    transform-origin:center bottom;
}

/* Flip up */
.reveal.flip-up{
    transform:perspective(800px) rotateX(-20deg) translateY(25px);
    transform-origin:center bottom;
}

/* Zoom in from center */
.reveal.zoom-in{
    transform:scale(0.6);
}

/* Slide + fade from far right */
.reveal.slide-right{
    transform:translateX(80px);
}

/* Slide + fade from far left */
.reveal.slide-left{
    transform:translateX(-80px);
}

/* Visible state — clears ALL transforms */
.reveal.visible{
    opacity:1;
    transform:translate(0) scale(1) rotate(0deg) rotateX(0deg) rotateY(0deg);
    filter:blur(0);
}

/* Stagger delay classes */
.reveal.d1{transition-delay:0.08s}
.reveal.d2{transition-delay:0.16s}
.reveal.d3{transition-delay:0.24s}
.reveal.d4{transition-delay:0.32s}
.reveal.d5{transition-delay:0.40s}
.reveal.d6{transition-delay:0.48s}
.reveal.d7{transition-delay:0.56s}
.reveal.d8{transition-delay:0.64s}

/* Hero stagger — each child fades in */
.hero-stagger{
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.7s var(--ease),transform 0.7s var(--ease),filter 0.7s var(--ease);
    filter:blur(4px);
}
.hero-stagger.visible{
    opacity:1;transform:translateY(0);filter:blur(0);
}

/* Section title slide-in from left with neon clip */
.sec-title-reveal{
    clip-path:inset(0 100% 0 0);
    transition:clip-path 0.9s var(--ease);
}
.sec-title-reveal.visible{
    clip-path:inset(0 0% 0 0);
}

/* Active nav link highlight */
.nav-menu-links a.active{
    color:var(--neon)!important;
    text-shadow:0 0 12px var(--neon-glow);
    border-left-color:var(--neon);
    background:var(--neon-dim);
}
.nav-menu-links a.active::after{
    width:100%!important;left:0!important;
}

/* Parallax header text (set via JS transform) */
.parallax-title{
    transition:transform 0.1s linear;
    will-change:transform;
}

/* ================================================================
   ENIGMA — SVG Illustrations & Decorative Elements
   ================================================================ */
.enigma-circuit,.enigma-hex,.enigma-crosshair,.enigma-radar,.enigma-dna{
    position:absolute;pointer-events:none;z-index:0;
}

/* Hero circuits */
.ec-hero{
    width:260px;height:260px;
    top:15%;left:-40px;
    opacity:0.6;
}
.ec-hero-br{
    width:200px;height:200px;
    bottom:10%;right:20px;
    opacity:0.5;
}

/* Gallery radar */
.enigma-radar{
    width:160px;height:160px;
    top:30px;right:40px;
    opacity:0.7;
}

/* Services hex + code */
.services{position:relative;overflow:hidden}
.enigma-hex{
    width:180px;height:200px;
    top:60px;right:-30px;
    opacity:0.8;
}
.enigma-code{
    position:absolute;top:100px;left:-10px;
    font-family:var(--mono);font-size:0.6rem;
    color:var(--neon);opacity:0.06;
    line-height:1.8;
    transform:rotate(-8deg);
    pointer-events:none;z-index:0;
    animation:codeFloat 6s ease-in-out infinite;
}
.enigma-code em{color:var(--violet);font-style:normal}
.enigma-code span{display:block}
@keyframes codeFloat{
    0%,100%{transform:rotate(-8deg) translateY(0)}
    50%{transform:rotate(-8deg) translateY(-12px)}
}

/* Why-us crosshair */
.why-us{position:relative;overflow:hidden}
.enigma-crosshair{
    width:140px;height:140px;
    bottom:40px;left:20px;
    opacity:0.7;
}

/* CTA DNA */
.enigma-dna{
    width:40px;height:300px;
    left:20px;top:50%;
    transform:translateY(-50%);
    opacity:0.6;
}

/* ================================================================
   EXTRA ANIMATIONS — Aurora Borders & Pulse FX
   ================================================================ */

/* Subtle border glow for svc-card on hover */
.svc-card::before{
    content:'';position:absolute;inset:-1px;
    border-radius:inherit;z-index:-1;
    border:1px solid transparent;
    opacity:0;transition:opacity 0.4s var(--ease);
}
.svc-card:hover::before{opacity:1}
.svc-card:nth-child(1)::before{border-color:var(--neon);box-shadow:0 0 20px var(--neon-dim),inset 0 0 20px var(--neon-dim)}
.svc-card:nth-child(2)::before{border-color:var(--amber);box-shadow:0 0 20px var(--amber-dim),inset 0 0 20px var(--amber-dim)}
.svc-card:nth-child(3)::before{border-color:var(--violet);box-shadow:0 0 20px var(--violet-dim),inset 0 0 20px var(--violet-dim)}

/* Glow pulse on why-card icons */
.why-icon{
    animation:iconPulse 3s ease-in-out infinite;
}
@keyframes iconPulse{
    0%,100%{box-shadow:0 0 0 0 var(--neon-dim)}
    50%{box-shadow:0 0 20px 4px var(--neon-dim)}
}

/* Scan field overlay on store gallery hover */
.gallery-item::before{
    content:'';position:absolute;inset:0;z-index:2;
    background:repeating-linear-gradient(
        0deg,transparent,transparent 2px,rgba(0,229,255,0.02) 2px,rgba(0,229,255,0.02) 4px
    );
    opacity:0;transition:opacity 0.5s;pointer-events:none;
}
.gallery-item:hover::before{opacity:1}

/* Gentle float on rv-cards */
.rv-card:hover{
    animation:rvFloat 2s ease-in-out infinite;
}
@keyframes rvFloat{
    0%,100%{transform:translateY(-4px)}
    50%{transform:translateY(-8px)}
}

/* CTA box enhanced glow pulse */
.cta-box::after{
    content:'';position:absolute;inset:0;
    border-radius:inherit;
    box-shadow:inset 0 0 60px rgba(0,229,255,0.02),inset 0 0 120px rgba(168,85,247,0.01);
    animation:ctaPulse 3s ease-in-out infinite;pointer-events:none;
}
@keyframes ctaPulse{
    0%,100%{opacity:0.5}50%{opacity:1}
}

/* Ticker tape for brands on hover expand */
.brand-word{
    transition:all 0.4s var(--spring);
}
.brand-word:hover{
    transform:scale(1.25) translateY(-4px);
    letter-spacing:2px;
}

/* Section divider neon line */
.store-gallery,.services,.why-us,.reviews,.contact{
    position:relative;
}
.store-gallery::after,.services::after,.why-us::after,.reviews::after{
    content:'';position:absolute;bottom:0;left:50%;
    transform:translateX(-50%);
    width:80px;height:1px;
    background:linear-gradient(90deg,transparent,var(--neon),transparent);
    opacity:0.2;
}

/* ================================================================
   BINARY RAIN (Matrix Effect)
   ================================================================ */
.binary-rain{
    position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
    opacity:0.025;
}
.br-col{
    position:absolute;top:-100%;
    font-family:var(--mono);font-size:11px;
    color:var(--neon);line-height:1.6;
    white-space:pre;letter-spacing:2px;
    animation:binRain var(--rain-dur,10s) linear infinite;
    text-shadow:0 0 6px var(--neon-glow);
}
@keyframes binRain{
    0%{top:-100%;opacity:0}
    10%{opacity:1}
    90%{opacity:0.5}
    100%{top:110vh;opacity:0}
}

/* ================================================================
   TECH ILLUSTRATIONS — Phone, Laptop, Chip, Repair, Signal, WiFi, Wave
   ================================================================ */
.tech-illust{
    position:absolute;pointer-events:none;z-index:0;
    transition:transform 0.3s ease;
}

/* Floating phone — hero right side */
.tech-phone{
    width:80px;height:140px;
    bottom:18%;right:8%;
    opacity:0.7;
}

/* Floating laptop — hero left bottom */
.tech-laptop{
    width:160px;height:110px;
    bottom:5%;left:2%;
    opacity:0.5;
}

/* Chip / motherboard — gallery section */
.tech-chip{
    width:120px;height:120px;
    bottom:20px;left:30px;
    opacity:0.6;
}

/* Repair gear — services */
.tech-repair{
    width:100px;height:100px;
    bottom:30px;right:10px;
    opacity:0.5;
}

/* Signal waves — contact top right */
.tech-signal{
    width:200px;height:80px;
    top:50px;right:20px;
    opacity:0.6;
}

/* WiFi — contact bottom left */
.tech-wifi{
    width:80px;height:60px;
    bottom:40px;left:30px;
    opacity:0.5;
}

/* EM wave — brands */
.tech-wave{
    width:100%;max-width:600px;height:40px;
    top:10px;left:50%;
    transform:translateX(-50%);
    opacity:0.7;
}

/* Second code enigma block */
.enigma-code.ec2{
    top:auto;bottom:80px;left:auto;right:10px;
    transform:rotate(5deg);
    animation:codeFloat2 7s ease-in-out infinite;
    opacity:0.05;
}
.blink-cursor{
    animation:cursorBlink 0.7s step-end infinite;
    color:var(--neon);
}
@keyframes cursorBlink{
    0%,100%{opacity:1}50%{opacity:0}
}
@keyframes codeFloat2{
    0%,100%{transform:rotate(5deg) translateY(0)}
    50%{transform:rotate(5deg) translateY(-15px)}
}

/* Tech float animation (durations set via JS) */
@keyframes techFloat{
    0%,100%{transform:translateY(0) rotate(0deg)}
    25%{transform:translateY(-8px) rotate(0.5deg)}
    50%{transform:translateY(-3px) rotate(-0.5deg)}
    75%{transform:translateY(-10px) rotate(0.3deg)}
}

/* Neon border scan animation */
@property --scan-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes scanBorder{to{--scan-angle:360deg}}

/* Data stream bits on brands background */
.brands::before{
    content:'0 1 0 1 1 0 0 1  0 1 0 0 1 1 0 1  1 0 1 0 0 1 1 0';
    position:absolute;top:50%;left:0;right:0;
    text-align:center;
    font-family:var(--mono);font-size:0.55rem;
    letter-spacing:6px;
    color:var(--neon);opacity:0.03;
    pointer-events:none;
    transform:translateY(-50%);
}
.brands{position:relative}

/* Pulsing glow on why-cards hover */
.why-card:hover{
    animation:whyPulse 1.5s ease-in-out infinite;
}
@keyframes whyPulse{
    0%,100%{box-shadow:0 0 0 0 var(--neon-dim),0 10px 40px rgba(0,0,0,0.3)}
    50%{box-shadow:0 0 25px 5px var(--neon-dim),0 15px 50px rgba(0,0,0,0.4)}
}

/* Reviews card neon top-bar slide */
.rv-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--neon),var(--violet),transparent);
    background-size:200% 100%;
    opacity:0;transition:opacity 0.4s;
    animation:rvBarSlide 3s ease infinite;
}
.rv-card:hover::before{opacity:1}
@keyframes rvBarSlide{
    0%{background-position:0% center}
    50%{background-position:100% center}
    100%{background-position:0% center}
}

/* Contact card vertical scan */
.contact-card::after{
    content:'';position:absolute;top:0;left:0;right:0;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--neon),transparent);
    animation:contactScan 5s ease-in-out infinite;
    pointer-events:none;opacity:0.3;
}
@keyframes contactScan{
    0%{top:0;opacity:0}10%{opacity:0.3}90%{opacity:0.2}100%{top:100%;opacity:0}
}

/* EM pulse on section header hover */
.sec-title .glow{position:relative}
.sec-title .glow::before{
    content:'';position:absolute;top:50%;left:50%;width:0;height:0;
    border-radius:50%;
    background:radial-gradient(circle,var(--neon-glow) 0%,transparent 70%);
    opacity:0;transition:all 0.6s var(--ease);
    transform:translate(-50%,-50%);pointer-events:none;z-index:-1;
}
.sec-title .glow:hover::before{
    width:200px;height:200px;opacity:0.15;
}

/* ================================================================
   SECTION SCROLL TRANSITION — Active Section Glow
   ================================================================ */
section[id]{
    transition:border-color 0.6s var(--ease),box-shadow 0.6s var(--ease);
}
section[id].section-active{
    border-top-color:rgba(0,229,255,0.08);
}
/* Neon line that sweeps when section enters — via inner divider */
.section-line{
    position:absolute;top:0;left:0;
    width:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--neon),var(--violet),transparent);
    transition:width 1.2s var(--ease);
    z-index:5;pointer-events:none;
}
section[id].section-active .section-line{
    width:100%;
}

/* ================================================================
   RESPONSIVE ENIGMA & MOBILE FIXES
   ================================================================ */
@media(max-width:767px){
    .enigma-circuit,.enigma-hex,.enigma-crosshair,.enigma-radar,.enigma-dna,.enigma-code,
    .tech-illust,.binary-rain{
        display:none;
    }

    /* Hero mobile fixes */
    .hero{padding-top:100px;min-height:auto}
    .hero-title{font-size:clamp(1.8rem,7vw,2.6rem)}
    .hero-actions{flex-direction:column;gap:var(--sm)}
    .hero-actions .btn-3d{width:100%;justify-content:center;padding:14px 20px;font-size:0.85rem}
    .hero-metrics{gap:var(--lg);flex-wrap:wrap}
    .hero-desc{font-size:0.88rem}

    /* Reviews badge mobile */
    .btn-google-review{margin-left:0;margin-top:var(--sm);width:100%;text-align:center}
    .reviews-badge{flex-wrap:wrap;justify-content:center;text-align:center;gap:var(--sm);padding:var(--md)}
    .reviews-score{font-size:2.2rem}

    /* Why grid 1-col on very small */
    .why-grid{grid-template-columns:1fr 1fr;gap:var(--sm)}
    .why-card{padding:var(--md)}
    .why-card h4{font-size:0.82rem}
    .why-card p{font-size:0.72rem}

    /* CTA mobile */
    .cta-box{padding:var(--xl) var(--md)}
    .cta-box h2{font-size:1.3rem}
    .cta-actions{flex-direction:column;width:100%}
    .cta-actions .btn-3d{width:100%;justify-content:center}

    /* Contact card mobile */
    .contact-card{padding:var(--md)}
    .contact-row{gap:var(--sm)}

    /* Brands mobile */
    .brands{padding:var(--md) 0}
    .brands-label{font-size:0.55rem;letter-spacing:2px;margin-bottom:var(--sm)}

    /* Footer mobile */
    .footer-socials{flex-wrap:wrap;justify-content:center}

    /* Reduce animations on mobile for perf */
    .reveal{transition-duration:0.5s!important}
    .reveal.flip-up,.reveal.rotate-in{
        transform:translateY(30px)!important;
    }
}

/* Small phones (max 380px) */
@media(max-width:380px){
    .why-grid{grid-template-columns:1fr}
    .hero-metrics{flex-direction:column;gap:var(--sm)}
    .metric{display:flex;align-items:center;gap:var(--sm)}
    .metric-lbl{margin-top:0}
    .nav-menu a:not(.nav-cta-mobile){font-size:1rem}
    .nav-menu-links a{font-size:0.9rem;padding:12px 20px}
}

/* ================================================================
   TABLET — 768px
   ================================================================ */
@media(min-width:768px){
    :root{--xl:48px;--2xl:80px;--3xl:120px}
    .container{padding:0 32px}
    section{padding:var(--3xl) 0}
    .navbar-inner{height:70px}
    .sec-title{font-size:2.5rem}
    .hero-actions{flex-direction:row}
    .gallery-grid{grid-template-columns:1fr 1fr;gap:var(--lg)}
    .services-grid{grid-template-columns:1fr 1fr}
    .reviews-grid{grid-template-columns:1fr 1fr}
    .why-grid{grid-template-columns:repeat(4,1fr)}
    .contact-grid{grid-template-columns:1fr 1fr}
    .cta-box{padding:var(--2xl) var(--xl)}
    .cta-box h2{font-size:2rem}
    .cta-actions{flex-direction:row;justify-content:center}
    .footer-inner{flex-direction:row;justify-content:space-between}
}

/* ================================================================
   DESKTOP — 1024px
   ================================================================ */
@media(min-width:1024px){
    .nav-toggle{display:none}
    .nav-overlay{display:none}
    .nav-menu{
        /* Desktop: horizontal bar synced by JS */
        position:fixed;
        top:0;right:40px;
        width:auto;height:64px;
        transform:none;
        background:none;
        border-left:none;
        flex-direction:row;
        align-items:center;
        justify-content:flex-end;
        gap:var(--lg);
        z-index:1001;
        overflow:visible;
    }
    .nav-menu-header{display:none}
    .nav-menu-footer{display:none}
    .nav-menu-links{
        flex-direction:row;
        padding:0;gap:var(--lg);
        align-items:center;
    }
    .nav-menu-links a{
        font-size:0.85rem;font-family:var(--body);font-weight:600;
        color:var(--txt2);padding:0;gap:0;
        border-left:none;
        position:relative;
        transition:color 0.3s,letter-spacing 0.3s,text-shadow 0.3s;
    }
    .nav-menu-links a i{display:none}
    /* Desktop underline */
    .nav-menu-links a::after{
        content:'';position:absolute;
        bottom:-8px;left:50%;width:0;height:2px;
        background:var(--neon);border-radius:2px;
        box-shadow:0 0 8px var(--neon-glow);
        transition:width 0.35s var(--ease),left 0.35s var(--ease);
    }
    .nav-menu-links a:hover::after{width:100%;left:0}
    .nav-menu-links a:hover{
        color:var(--neon);text-shadow:0 0 12px var(--neon-glow);letter-spacing:0.5px;
        background:none;border-left-color:transparent;
    }
    .nav-menu-links a:hover i{display:none}
    .nav-menu.open .nav-menu-links a{animation:none}
    .nav-menu-links a.active{
        background:none;border-left:none;
        color:var(--neon)!important;
    }
    .sec-title{font-size:2.8rem}
    /* Hero 2-col */
    .hero .container{
        display:grid;grid-template-columns:1fr 1fr;gap:var(--2xl);align-items:center;
    }
    .hero-visual{display:flex;justify-content:center;align-items:center}
    .services-grid{grid-template-columns:repeat(3,1fr)}
    .reviews-grid{grid-template-columns:repeat(3,1fr)}
}

@media(min-width:1280px){
    .container{padding:0 40px}
}