/* ================================================
   TPLfirewall.com — Professional Stylesheet
   Theme: Red & Black (matching techpiratelabs.com)
   ================================================ */

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
    --navy:   #111111;
    --navy2:  #1A1A1A;
    --navy3:  #242424;
    --dark:   #0A0A0A;
    --dark2:  #0A0A0A;
    --gold:   #D10000;
    --gold2:  #FF2222;
    --blue:   #D10000;
    --blue2:  #900000;
    --blue3:  rgba(209,0,0,0.3);
    --green:  #22c55e;
    --white:  #ffffff;
    --text:   rgba(255,255,255,0.72);
    --dim:    rgba(255,255,255,0.42);
    --border: #2E2E2E;
    --radius: 8px;
    --shadow: 0 4px 24px rgba(0,0,0,0.6);
    --glow:   0 0 20px rgba(209,0,0,0.35);
    --t:      0.25s ease;
}
body{
    font-family:'Inter','Segoe UI',system-ui,sans-serif;
    background:var(--dark);
    color:var(--text);
    line-height:1.65;
    overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
.container{max-width:1240px;margin:0 auto;padding:0 24px}

/* ── Utility ── */
.gold{color:var(--gold)}
.tag{
    display:inline-block;font-size:0.68rem;font-weight:700;
    letter-spacing:0.18em;text-transform:uppercase;
    color:var(--gold);margin-bottom:14px;
}
.section-title{
    font-size:clamp(1.8rem,3.2vw,2.7rem);font-weight:900;
    color:var(--white);margin-bottom:14px;line-height:1.12;
    letter-spacing:-0.02em;
}
.section-sub{font-size:1rem;color:var(--dim);max-width:540px;line-height:1.75}
.sec-head{margin-bottom:58px}
.sec-head.c{text-align:center}
.sec-head.c .section-sub{margin:0 auto}

/* ── Buttons ── */
.btn{
    display:inline-flex;align-items:center;gap:9px;
    font-size:0.88rem;font-weight:700;
    padding:13px 26px;border-radius:10px;border:none;cursor:pointer;
    white-space:nowrap;
    transition:transform var(--t),box-shadow var(--t),background var(--t);
}
.btn-gold{
    background:linear-gradient(135deg,var(--gold),var(--gold2));
    color:#ffffff;box-shadow:0 4px 26px rgba(209,0,0,0.32);
}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 10px 38px rgba(209,0,0,0.5)}
.btn-ghost{
    background:transparent;color:var(--white);
    border:1.5px solid rgba(255,255,255,0.22);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.btn-navy{
    background:linear-gradient(135deg,var(--navy2),var(--navy3));
    color:var(--white);border:1px solid rgba(255,255,255,0.1);
}
.btn-navy:hover{background:var(--blue2);transform:translateY(-2px)}

/* ════════════════════════════
   KEYFRAMES
════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes gridScroll{from{background-position:0 0}to{background-position:80px 80px}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.22}}
@keyframes badgePulse{0%,100%{border-color:rgba(209,0,0,0.28)}50%{border-color:rgba(209,0,0,0.75)}}
@keyframes ringPulse{0%,100%{opacity:0.38;transform:scale(1)}50%{opacity:0.82;transform:scale(1.05)}}
@keyframes glowFloat{0%,100%{transform:scale(1);opacity:0.7}50%{transform:scale(1.12);opacity:1}}
@keyframes twinkle{0%,100%{opacity:0.42}50%{opacity:1}}
@keyframes deviceFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes hudFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes scanFall{0%{top:0%;opacity:0}4%{opacity:0.7}96%{opacity:0.7}100%{top:100%;opacity:0}}
@keyframes radarRing{0%{width:100px;height:100px;opacity:0.8}100%{width:440px;height:440px;opacity:0}}
@keyframes lineGrow{from{width:0;opacity:0}to{width:100%;opacity:1}}
@keyframes shimmer{0%{background-position:0% center}100%{background-position:200% center}}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes rowSlide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}

/* ════════════════════════════
   HEADER
════════════════════════════ */
#header{
    position:fixed;top:0;left:0;right:0;z-index:1000;
    padding:0;
    background:rgba(10,10,10,0.92);
    backdrop-filter:blur(22px) saturate(1.5);
    border-bottom:1px solid var(--border);
    transition:box-shadow var(--t);
}
#header.scrolled{box-shadow:0 4px 32px rgba(0,0,0,0.55)}
.nav-inner{
    display:flex;align-items:center;
    justify-content:space-between;height:72px;
}
.nav-logo{
    display:flex;align-items:center;gap:11px;
    font-size:1.12rem;font-weight:900;color:var(--white);
    letter-spacing:-0.01em;
}
.nav-logo-icon{
    width:38px;height:38px;border-radius:10px;
    display:block;object-fit:contain;
    box-shadow:0 4px 16px rgba(209,0,0,0.3);
    flex-shrink:0;
}
.nav-logo span{color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
    font-size:0.85rem;font-weight:600;color:var(--text);
    padding:8px 14px;border-radius:8px;
    transition:color var(--t),background var(--t);
}
.nav-links a:hover,.nav-links a.active{color:var(--gold);background:rgba(209,0,0,0.06)}
.nav-cta{margin-left:14px}
.hamburger{
    display:none;background:none;border:none;cursor:pointer;
    color:var(--white);font-size:1.3rem;padding:6px;
}
.mob-nav{
    display:none;flex-direction:column;gap:2px;
    padding:14px 24px 20px;
    background:rgba(10,10,10,0.97);
    border-top:1px solid var(--border);
}
.mob-nav.open{display:flex}
.mob-nav a{
    font-size:0.9rem;font-weight:600;color:var(--text);
    padding:10px 14px;border-radius:8px;
    transition:background var(--t),color var(--t);
}
.mob-nav a:hover{background:rgba(209,0,0,0.06);color:var(--gold)}

/* ════════════════════════════
   HERO — matches reference style
════════════════════════════ */
#hero{
    position:relative;
    height:calc(100vh - 0px);min-height:640px;
    overflow:hidden;background:#0A0A0A;
    display:flex;align-items:center;
    padding-top:72px;
}

/* Starfield */
.stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.stars::before{
    content:'';position:absolute;width:1px;height:1px;
    background:transparent;border-radius:50%;
    box-shadow:
        80px 120px rgba(255,120,120,0.5),210px 340px rgba(255,120,120,0.4),
        380px 80px rgba(209,0,0,0.32),520px 460px rgba(255,120,120,0.45),
        680px 200px rgba(255,120,120,0.38),840px 560px rgba(209,0,0,0.22),
        960px 140px rgba(255,120,120,0.5),1100px 380px rgba(255,120,120,0.32),
        1240px 260px rgba(209,0,0,0.28),1360px 480px rgba(255,120,120,0.38),
        160px 540px rgba(255,120,120,0.32),440px 680px rgba(255,120,120,0.28),
        760px 720px rgba(209,0,0,0.18),920px 620px rgba(255,120,120,0.32),
        50px 780px rgba(255,120,120,0.22),300px 180px rgba(255,120,120,0.38),
        620px 840px rgba(209,0,0,0.18),1050px 700px rgba(255,120,120,0.28),
        1300px 600px rgba(255,120,120,0.22),1450px 300px rgba(209,0,0,0.28),
        730px 40px rgba(255,120,120,0.48),1180px 90px rgba(255,120,120,0.32),
        350px 430px rgba(255,120,120,0.28),890px 350px rgba(209,0,0,0.18);
    animation:twinkle 7s ease-in-out infinite;
}
.stars::after{
    content:'';position:absolute;width:2px;height:2px;
    background:transparent;border-radius:50%;
    box-shadow:
        130px 250px rgba(255,120,120,0.28),400px 120px rgba(209,0,0,0.22),
        600px 380px rgba(255,120,120,0.32),1000px 240px rgba(255,120,120,0.28),
        780px 560px rgba(209,0,0,0.18),1200px 440px rgba(255,120,120,0.22),
        250px 660px rgba(255,120,120,0.28),550px 760px rgba(209,0,0,0.14),
        900px 80px rgba(255,120,120,0.32),1380px 560px rgba(255,120,120,0.22),
        70px 400px rgba(209,0,0,0.18),1100px 500px rgba(255,120,120,0.28);
    animation:twinkle 11s ease-in-out 3.5s infinite;
}
/* Radial bg */
.hero-bg{
    position:absolute;inset:0;z-index:2;pointer-events:none;
    background:
        radial-gradient(ellipse 72% 68% at 72% 52%,rgba(209,0,0,0.15) 0%,transparent 65%),
        radial-gradient(ellipse 50% 65% at 22% 52%,rgba(209,0,0,0.07) 0%,transparent 60%),
        linear-gradient(180deg,#0A0A0A 0%,#111111 45%,#0A0A0A 100%);
}
/* Gold grid */
.hero-grid{
    position:absolute;inset:0;z-index:3;pointer-events:none;
    background-image:
        linear-gradient(rgba(209,0,0,0.016) 1px,transparent 1px),
        linear-gradient(90deg,rgba(209,0,0,0.016) 1px,transparent 1px);
    background-size:80px 80px;
    animation:gridScroll 22s linear infinite;
}
/* Left glow blob */
.hero-glow-blob{
    position:absolute;z-index:4;pointer-events:none;
    top:50%;left:22%;transform:translate(-50%,-50%);
    width:720px;height:720px;
    background:radial-gradient(circle,rgba(209,0,0,0.1) 0%,transparent 65%);
}
/* Scene right */
.hero-scene{
    position:absolute;
    right:0;top:0;bottom:0;width:55%;
    z-index:5;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;
}
.scene-glow{
    position:absolute;
    width:560px;height:560px;
    background:radial-gradient(circle,rgba(209,0,0,0.2) 0%,rgba(140,0,0,0.08) 40%,transparent 70%);
    border-radius:50%;
    animation:glowFloat 7s ease-in-out infinite;
    z-index:0;
}
/* Concentric rings */
.rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ring{position:absolute;border-radius:50%;animation:ringPulse 4.5s ease-in-out infinite}
.ring.r1{width:360px;height:360px;border:1px solid rgba(209,0,0,0.28);animation-delay:0s}
.ring.r2{width:500px;height:500px;border:1px solid rgba(209,0,0,0.1);animation-delay:1.5s}
.ring.r3{width:640px;height:640px;border:1px solid rgba(209,0,0,0.06);animation-delay:3s}
/* Scan line */
.scan{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.scan::after{
    content:'';position:absolute;left:8%;right:8%;height:1px;top:0;
    background:linear-gradient(90deg,transparent 0%,rgba(255,80,80,0.6) 38%,rgba(255,150,150,1) 50%,rgba(255,80,80,0.6) 62%,transparent 100%);
    box-shadow:0 0 16px rgba(255,80,80,0.45);
    animation:scanFall 4.5s ease-in-out infinite;
}
/* Device image */
.hero-device-wrap{position:relative;z-index:3}
.hero-device-img{
    display:block;
    width:min(580px,48vw);height:auto;object-fit:contain;
    position:relative;z-index:3;
    mix-blend-mode:screen;
    filter:
        brightness(1.3) contrast(1.1) saturate(1.15)
        drop-shadow(0 0 55px rgba(209,0,0,0.62))
        drop-shadow(0 0 110px rgba(209,0,0,0.28))
        drop-shadow(0 30px 55px rgba(0,0,40,0.88))
        drop-shadow(0 0 18px rgba(209,0,0,0.14));
    transform:perspective(1400px) rotateY(-14deg) rotateX(5deg);
    animation:deviceFloat 8s ease-in-out infinite;
    will-change:transform;
}
.hero-floor{
    position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);
    width:88%;height:65px;
    background:radial-gradient(ellipse 100% 100% at 50% 100%,rgba(209,0,0,0.7) 0%,rgba(80,120,255,0.3) 35%,transparent 80%);
    filter:blur(18px);z-index:1;
    animation:glowFloat 4s ease-in-out infinite;
}
/* HUD cards */
.hud{
    position:absolute;z-index:6;pointer-events:none;
    background:rgba(3,7,22,0.86);
    backdrop-filter:blur(22px) saturate(1.5);
    border:1px solid rgba(209,0,0,0.18);
    border-radius:13px;padding:11px 16px;min-width:128px;
    box-shadow:0 14px 40px rgba(0,1,16,0.8),inset 0 1px 0 rgba(255,255,255,0.04);
    animation:hudFloat 5.5s ease-in-out infinite;
}
.hud-1{top:14%;right:6%;animation-delay:0s;border-color:rgba(34,197,94,0.24)}
.hud-2{bottom:20%;right:4%;animation-delay:2.2s}
.hud-3{top:52%;left:2%;animation-delay:4s}
.hud-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);margin-right:5px;vertical-align:middle;animation:blink 1.8s infinite}
.hud-val{display:block;font-size:1.05rem;font-weight:800;color:var(--white);font-family:monospace;line-height:1.25}
.hud-lbl{display:block;font-size:0.52rem;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:0.1em;margin-top:2px}
/* Hero text content */
.hero-content{
    position:relative;z-index:10;
    width:100%;max-width:1240px;margin:0 auto;padding:0 24px;
}
.hero-left{max-width:560px}
.hero-badge{
    display:inline-flex;align-items:center;gap:10px;
    background:rgba(209,0,0,0.06);
    border:1px solid rgba(209,0,0,0.3);
    border-radius:100px;padding:7px 18px 7px 7px;
    margin-bottom:28px;
    animation:fadeUp 0.8s ease 0.1s both,badgePulse 3s ease-in-out 1s infinite;
}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 2s infinite}
.badge-text{font-size:0.72rem;font-weight:700;color:var(--gold);letter-spacing:0.07em;text-transform:uppercase}
.hero-h1{
    font-size:clamp(2.6rem,4.8vw,4.6rem);font-weight:900;
    color:var(--white);line-height:1.06;letter-spacing:-0.03em;
    margin:0 0 6px;
    text-shadow:0 1px 0 rgba(255,255,255,0.08),0 3px 8px rgba(0,0,0,0.5),0 10px 32px rgba(0,0,0,0.4);
    animation:fadeUp 0.9s ease 0.25s both;
}
.hero-h1 .accent{
    color:var(--gold);
    background:linear-gradient(90deg,#D10000,#FF2222,#D10000);
    background-size:200% auto;
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    animation:shimmer 3s linear infinite 1.5s;
}
.hero-h1-line{
    display:block;height:3px;border-radius:2px;margin-top:10px;
    background:linear-gradient(90deg,var(--gold) 0%,rgba(209,0,0,0.35) 60%,transparent 100%);
    animation:lineGrow 1.2s ease 0.9s both;
}
.hero-sub{
    font-size:1.02rem;line-height:1.75;color:var(--dim);
    margin:22px 0 36px;max-width:460px;
    animation:fadeUp 0.9s ease 0.45s both;
}
.hero-btns{
    display:flex;flex-wrap:wrap;gap:14px;
    margin-bottom:40px;
    animation:fadeUp 0.9s ease 0.6s both;
}
.hero-stats{
    display:flex;gap:38px;
    animation:fadeUp 0.9s ease 0.75s both;
}
.stat-val{font-size:1.8rem;font-weight:900;color:var(--white);font-family:'Courier New',monospace;line-height:1}
.stat-lbl{font-size:0.65rem;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:0.1em;margin-top:4px}

/* ════════════════════════════
   TRUST STRIP
════════════════════════════ */
#trust{background:var(--navy2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center}
.trust-item{
    flex:1;min-width:150px;
    padding:20px 18px;text-align:center;
    border-right:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;gap:10px;
}
.trust-item:last-child{border-right:none}
.trust-item i{font-size:1.1rem;color:var(--gold);flex-shrink:0}
.trust-item span{font-size:0.8rem;font-weight:600;color:var(--white)}

/* ════════════════════════════
   ABOUT
════════════════════════════ */
#about{
    padding:100px 0;
    background:linear-gradient(180deg,#0A0A0A 0%,var(--navy) 100%);
}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
/* Visual panel */
.about-panel{
    background:linear-gradient(135deg,var(--navy2),var(--navy3));
    border:1px solid var(--border);border-radius:20px;
    padding:48px 36px;text-align:center;
    box-shadow:var(--shadow);
    position:relative;overflow:hidden;
}
.about-panel::before{
    content:'';position:absolute;inset:0;
    background-image:linear-gradient(rgba(209,0,0,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(209,0,0,0.015) 1px,transparent 1px);
    background-size:30px 30px;animation:gridScroll 18s linear infinite;
}
.about-shield{
    font-size:88px;color:var(--gold);
    filter:drop-shadow(0 0 28px rgba(209,0,0,0.45));
    animation:deviceFloat 6s ease-in-out infinite;
    position:relative;z-index:1;margin-bottom:24px;
}
.about-label{font-size:1rem;font-weight:700;color:var(--white);position:relative;z-index:1;margin-bottom:6px}
.about-desc{font-size:0.8rem;color:var(--dim);line-height:1.7;position:relative;z-index:1;margin-bottom:28px}
.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;z-index:1}
.a-stat{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:12px;padding:18px 12px;text-align:center}
.a-stat-n{font-size:1.55rem;font-weight:900;color:var(--gold);font-family:monospace;display:block}
.a-stat-l{font-size:0.62rem;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:0.1em}
/* Text side */
.about-features{margin-top:28px;display:flex;flex-direction:column;gap:14px}
.af-item{
    display:flex;align-items:flex-start;gap:14px;
    padding:16px 18px;
    background:rgba(255,255,255,0.025);border:1px solid var(--border);border-radius:12px;
    transition:all var(--t);
}
.af-item:hover{background:rgba(209,0,0,0.04);border-color:rgba(209,0,0,0.15)}
.af-icon{
    width:40px;height:40px;border-radius:10px;flex-shrink:0;
    background:rgba(209,0,0,0.1);border:1px solid rgba(209,0,0,0.2);
    display:flex;align-items:center;justify-content:center;
    font-size:0.92rem;color:var(--gold);
}
.af-text strong{display:block;font-size:0.88rem;font-weight:700;color:var(--white);margin-bottom:2px}
.af-text span{font-size:0.77rem;color:var(--dim)}

/* ════════════════════════════
   PRODUCTS
════════════════════════════ */
#products{
    padding:100px 0;
    background:linear-gradient(180deg,var(--navy) 0%,#111111 100%);
    position:relative;overflow:hidden;
}
#products::before{
    content:'';position:absolute;inset:0;
    background-image:linear-gradient(rgba(209,0,0,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(209,0,0,0.03) 1px,transparent 1px);
    background-size:44px 44px;pointer-events:none;
}
.product-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:32px;
    position:relative;z-index:1;
}
.product-card{
    background:rgba(255,255,255,0.025);
    border:1px solid var(--border);border-radius:var(--radius);
    overflow:hidden;
    transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.product-card:hover{
    transform:translateY(-10px);
    box-shadow:0 28px 70px rgba(0,0,0,0.5),0 0 0 1px rgba(209,0,0,0.14);
    border-color:rgba(209,0,0,0.2);
}
.prod-img-wrap{
    position:relative;height:240px;
    background:linear-gradient(135deg,var(--navy2) 0%,var(--navy3) 100%);
    display:flex;align-items:center;justify-content:center;overflow:hidden;
}
/* CSS device art fallback */
.prod-img-wrap::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 65% 35%,rgba(209,0,0,0.14) 0%,transparent 60%);
}
.prod-device-art{
    position:relative;z-index:1;
    width:200px;height:auto;
    display:flex;flex-direction:column;align-items:center;gap:0;
}
/* Rack-unit device visual */
.dev-body{
    width:220px;height:56px;
    background:linear-gradient(135deg,#1A1A1A,#242424);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:8px;
    display:flex;align-items:center;padding:0 16px;gap:12px;
    box-shadow:0 8px 32px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.06);
    position:relative;
}
.dev-body::after{
    content:'';position:absolute;bottom:0;left:10%;right:10%;height:2px;
    background:linear-gradient(90deg,transparent,rgba(209,0,0,0.6),rgba(209,0,0,0.4),rgba(209,0,0,0.6),transparent);
    border-radius:1px;filter:blur(1px);
}
.dev-logo{
    font-size:0.6rem;font-weight:900;color:var(--gold);
    letter-spacing:0.06em;text-transform:uppercase;margin-right:auto;
    text-shadow:0 0 10px rgba(209,0,0,0.5);
}
.dev-ports{display:flex;gap:5px;align-items:center}
.dev-port{
    width:8px;height:6px;border-radius:2px;
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.18);
}
.dev-leds{display:flex;gap:4px;align-items:center;margin-left:6px}
.dev-led{width:5px;height:5px;border-radius:50%}
.dev-led.g{background:#22c55e;box-shadow:0 0 8px #22c55e;animation:blink 1.4s ease-in-out infinite}
.dev-led.g2{animation-delay:0.4s}
.dev-led.y{background:var(--gold);box-shadow:0 0 8px var(--gold);animation:blink 2.2s ease-in-out infinite}
/* compact variant */
.dev-body.compact{width:180px;height:44px}
/* Floor glow under device art */
.dev-floor{
    width:80%;height:12px;margin-top:2px;
    background:radial-gradient(ellipse,rgba(209,0,0,0.5) 0%,transparent 70%);
    filter:blur(6px);
}
/* Product badge */
.prod-badge{
    position:absolute;top:14px;right:14px;z-index:3;
    font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;
    padding:4px 12px;border-radius:20px;
    background:linear-gradient(135deg,var(--navy2),var(--navy3));
    color:var(--white);border:1px solid rgba(255,255,255,0.1);
}
/* Product body */
.prod-body{padding:26px 26px 28px}
.prod-body h3{font-size:1.22rem;font-weight:900;color:var(--white);margin-bottom:6px}
.prod-tagline{font-size:0.83rem;color:var(--dim);margin-bottom:20px;line-height:1.55}
.spec-list{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.spec-list li{display:flex;align-items:flex-start;gap:9px;font-size:0.82rem;color:var(--text);line-height:1.45}
.spec-list li i{color:var(--green);font-size:11px;margin-top:3px;flex-shrink:0}
.prod-meta{
    font-size:0.76rem;color:var(--dim);margin-bottom:20px;
    display:flex;align-items:flex-start;gap:7px;
    padding:11px 14px;background:rgba(255,255,255,0.03);
    border:1px solid var(--border);border-radius:8px;line-height:1.5;
}
.prod-meta i{color:var(--gold);flex-shrink:0;margin-top:2px}
.prod-quote{width:100%;justify-content:center;font-size:0.83rem;padding:12px}

/* ════════════════════════════
   FEATURES
════════════════════════════ */
#features{
    padding:100px 0;
    background:linear-gradient(180deg,#111111 0%,var(--dark) 100%);
}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat-card{
    background:rgba(255,255,255,0.025);border:1px solid var(--border);
    border-radius:var(--radius);padding:28px 24px;
    transition:transform var(--t),border-color var(--t),box-shadow var(--t);
}
.feat-card:hover{
    transform:translateY(-6px);
    border-color:rgba(209,0,0,0.28);
    box-shadow:0 16px 44px rgba(0,0,0,0.35),0 0 0 1px rgba(209,0,0,0.08);
}
.feat-icon{
    width:50px;height:50px;border-radius:13px;
    background:rgba(209,0,0,0.1);border:1px solid rgba(209,0,0,0.2);
    display:flex;align-items:center;justify-content:center;
    font-size:1.15rem;color:#D10000;margin-bottom:18px;
}
.feat-card h4{font-size:0.95rem;font-weight:700;color:var(--white);margin-bottom:8px}
.feat-card p{font-size:0.8rem;color:var(--dim);line-height:1.65}

/* ════════════════════════════
   WHY CHOOSE
════════════════════════════ */
#why{
    padding:100px 0;
    background:linear-gradient(180deg,var(--dark) 0%,var(--navy) 100%);
}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:center}
/* Radar visual */
.why-visual{
    position:relative;min-height:430px;
    background:linear-gradient(135deg,#111111,var(--navy2),#1A1A1A);
    border-radius:20px;overflow:hidden;
    border:1px solid var(--border);
    box-shadow:0 8px 40px rgba(0,0,0,0.4);
    display:flex;align-items:center;justify-content:center;
}
.why-visual::before{
    content:'';position:absolute;inset:0;
    background-image:linear-gradient(rgba(209,0,0,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(209,0,0,0.02) 1px,transparent 1px);
    background-size:24px 24px;animation:gridScroll 20s linear infinite;
}
.why-icon{
    font-size:96px;color:var(--gold);opacity:0.92;
    filter:drop-shadow(0 0 28px rgba(209,0,0,0.42));
    animation:deviceFloat 6s ease-in-out infinite;
    position:relative;z-index:2;
}
.radar-ring{
    position:absolute;border:2px solid rgba(209,0,0,0.14);
    border-radius:50%;animation:radarRing 4s ease-out infinite;
}
.radar-ring:nth-child(2){animation-delay:1.35s}
.radar-ring:nth-child(3){animation-delay:2.7s}
.why-status{
    position:absolute;top:20px;left:50%;transform:translateX(-50%);
    background:rgba(0,0,0,0.72);border:1px solid rgba(209,0,0,0.25);
    border-radius:20px;padding:8px 18px;
    display:flex;align-items:center;gap:8px;z-index:4;white-space:nowrap;
}
.ws-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 2s infinite}
.ws-text{font-size:11px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:1px}
/* Why items */
.why-items{display:flex;flex-direction:column;gap:18px}
.why-item{
    display:flex;gap:16px;align-items:flex-start;
    padding:20px;background:rgba(255,255,255,0.025);
    border:1px solid var(--border);border-radius:12px;
    transition:all var(--t);
}
.why-item:hover{border-color:rgba(209,0,0,0.2);background:rgba(209,0,0,0.03);transform:translateX(6px)}
.wi-icon{
    width:44px;height:44px;flex-shrink:0;border-radius:12px;
    background:rgba(209,0,0,0.1);border:1px solid rgba(209,0,0,0.18);
    display:flex;align-items:center;justify-content:center;
    font-size:1rem;color:var(--gold);
}
.wi-text h4{font-size:0.92rem;font-weight:700;color:var(--white);margin-bottom:4px}
.wi-text p{font-size:0.8rem;color:var(--dim);line-height:1.55}

/* ════════════════════════════
   CTA BANNER
════════════════════════════ */
#cta{
    padding:100px 0;
    background:linear-gradient(135deg,#0A0A0A 0%,#1a0505 50%,#0A0A0A 100%);
    position:relative;overflow:hidden;
}
#cta::before{
    content:'';position:absolute;
    top:50%;left:50%;transform:translate(-50%,-50%);
    width:700px;height:300px;
    background:radial-gradient(ellipse,rgba(209,0,0,0.07) 0%,transparent 70%);
    pointer-events:none;
}
.cta-box{text-align:center;position:relative;z-index:1;max-width:680px;margin:0 auto}
.cta-box h2{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--white);margin-bottom:18px;line-height:1.14}
.cta-box p{font-size:1rem;color:var(--dim);margin-bottom:36px;line-height:1.75}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ════════════════════════════
   CONTACT
════════════════════════════ */
#contact{
    padding:100px 0;
    background:linear-gradient(180deg,var(--navy) 0%,var(--dark) 100%);
}
.contact-grid{display:grid;grid-template-columns:1fr 1.45fr;gap:62px;align-items:start}
.contact-cards{display:flex;flex-direction:column;gap:14px}
.c-card{
    display:flex;gap:14px;align-items:flex-start;
    padding:18px;background:rgba(255,255,255,0.025);
    border:1px solid var(--border);border-radius:12px;
    transition:border-color var(--t),background var(--t);
}
.c-card:hover{border-color:rgba(209,0,0,0.2);background:rgba(209,0,0,0.03)}
.c-icon{
    width:44px;height:44px;flex-shrink:0;border-radius:11px;
    background:rgba(209,0,0,0.1);border:1px solid rgba(209,0,0,0.2);
    display:flex;align-items:center;justify-content:center;
    font-size:1rem;color:var(--gold);
}
.c-card h4{font-size:0.78rem;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px}
.c-card p,.c-card a{font-size:0.88rem;color:var(--white);font-weight:600}
.c-card a:hover{color:var(--gold)}
/* Form */
.c-form-wrap{
    background:rgba(255,255,255,0.025);border:1px solid var(--border);
    border-radius:18px;padding:36px;box-shadow:var(--shadow);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:0.73rem;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:7px}
.form-group input,.form-group select,.form-group textarea{
    width:100%;background:rgba(255,255,255,0.04);
    border:1.5px solid rgba(255,255,255,0.08);border-radius:10px;
    padding:12px 16px;font-size:0.88rem;color:var(--white);
    outline:none;font-family:inherit;resize:none;
    transition:border-color var(--t),box-shadow var(--t);
}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,0.22)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
    border-color:var(--gold);box-shadow:0 0 0 3px rgba(209,0,0,0.08);
}
.form-group select option{background:var(--navy2);color:var(--white)}
.f-submit{width:100%;justify-content:center;font-size:0.9rem;padding:14px}
.f-note{text-align:center;margin-top:12px;font-size:0.7rem;color:var(--dim)}
.f-note i{color:var(--green);margin-right:4px}

/* ════════════════════════════
   FOOTER
════════════════════════════ */
#footer{background:var(--dark2);border-top:1px solid var(--border);padding:64px 0 0}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:48px;padding-bottom:48px;border-bottom:1px solid var(--border)}
.f-brand p{font-size:0.8rem;color:var(--dim);line-height:1.75;margin:16px 0 20px;max-width:280px}
.f-logo{display:flex;align-items:center;gap:10px;font-size:1.05rem;font-weight:900;color:var(--white)}
.f-logo-icon{width:34px;height:34px;border-radius:9px;display:block;object-fit:contain;box-shadow:0 4px 12px rgba(209,0,0,0.25)}
.f-logo span{color:var(--gold)}
.f-tagline{font-size:0.68rem;color:var(--dim);margin-bottom:18px}
.f-socials{display:flex;gap:10px}
.f-social{
    width:36px;height:36px;border-radius:10px;
    background:rgba(255,255,255,0.05);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    font-size:0.85rem;color:var(--dim);
    transition:all var(--t);
}
.f-social:hover{background:var(--gold);color:#ffffff;border-color:var(--gold)}
.f-col h4{font-size:0.76rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--gold);margin-bottom:18px}
.f-col ul{display:flex;flex-direction:column;gap:10px}
.f-col ul li a{font-size:0.8rem;color:var(--dim);transition:color var(--t)}
.f-col ul li a:hover{color:var(--white)}
.f-newsletter p{font-size:0.8rem;color:var(--dim);margin-bottom:14px}
.nl-form{display:flex}
.nl-input{
    flex:1;background:rgba(255,255,255,0.05);
    border:1.5px solid rgba(255,255,255,0.08);border-right:none;
    border-radius:8px 0 0 8px;padding:10px 14px;
    font-size:0.8rem;color:var(--white);outline:none;
}
.nl-input:focus{border-color:var(--gold)}
.nl-btn{
    padding:10px 16px;border-radius:0 8px 8px 0;border:none;
    background:var(--gold);color:#ffffff;font-weight:700;font-size:0.8rem;
    cursor:pointer;transition:background var(--t);white-space:nowrap;
}
.nl-btn:hover{background:var(--gold2)}
.f-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.f-badge{font-size:0.7rem;padding:4px 10px;border-radius:6px}
.fb-gold{background:rgba(209,0,0,0.08);border:1px solid rgba(209,0,0,0.2);color:var(--gold)}
.fb-blue{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.6)}
.fb-green{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);color:var(--green)}
.footer-btm{
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 0;gap:12px;flex-wrap:wrap;
}
.footer-btm p{font-size:0.76rem;color:var(--dim)}
.f-btm-links{display:flex;gap:20px}
.f-btm-links a{font-size:0.76rem;color:var(--dim);transition:color var(--t)}
.f-btm-links a:hover{color:var(--gold)}

/* Scroll top */
#scrollTop{
    position:fixed;bottom:28px;right:28px;
    width:44px;height:44px;border-radius:12px;
    background:var(--gold);color:#ffffff;border:none;
    font-size:1rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 22px rgba(209,0,0,0.35);
    opacity:0;pointer-events:none;transform:translateY(10px);
    transition:opacity var(--t),transform var(--t);z-index:999;
}
#scrollTop.show{opacity:1;pointer-events:auto;transform:translateY(0)}
#scrollTop:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(209,0,0,0.5)}

/* Toast */
.toast{
    position:fixed;top:88px;right:20px;
    background:var(--navy2);border:1px solid var(--border);border-radius:12px;
    padding:14px 20px;display:flex;align-items:center;gap:12px;
    font-size:0.84rem;color:var(--white);
    box-shadow:0 10px 40px rgba(0,0,0,0.45);
    z-index:9999;max-width:380px;animation:toastIn 0.3s ease;
}
.toast.ok{border-color:rgba(34,197,94,0.3)}
.toast.err{border-color:rgba(239,68,68,0.3)}
.toast i{font-size:1.1rem}
.toast.ok i{color:var(--green)}
.toast.err i{color:#ef4444}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 0.62s ease,transform 0.62s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* ════════════════════════════
   RESPONSIVE
════════════════════════════ */
@media(max-width:1024px){
    .about-grid,.why-grid,.contact-grid{grid-template-columns:1fr;gap:44px}
    .product-grid{grid-template-columns:1fr 1fr}
    .feat-grid{grid-template-columns:1fr 1fr}
    .footer-top{grid-template-columns:1fr 1fr;gap:32px}
    .hero-scene{width:52%}
    .hero-device-img{width:min(420px,46vw)}
    .hud-3{display:none}
}
@media(max-width:768px){
    .nav-links,.nav-cta{display:none}
    .hamburger{display:block}
    .hero-scene{width:100%;height:45%;top:auto;bottom:0;opacity:0.35;pointer-events:none}
    .hero-device-img{width:min(280px,70vw)}
    .hud{display:none}
    .rings{display:none}
    .product-grid{grid-template-columns:1fr}
    .feat-grid{grid-template-columns:1fr}
    .footer-top{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
    .trust-item{min-width:120px;padding:12px}
}
@media(max-width:480px){
    .hero-stats{gap:22px;flex-wrap:wrap}
    .cta-btns{flex-direction:column;align-items:center}
    .footer-btm{flex-direction:column;text-align:center}
    .hero-btns{flex-direction:column;align-items:flex-start}
}