/* CCTV Central — tactical/military theme, heavy motion */

:root{
  --bg:#06070a;
  --bg2:#0b0e13;
  --panel:#10141a;
  --panel2:#151a21;
  --line:#262e38;
  --line2:#333d4a;
  --steel:#7c8794;
  --text:#eef1f4;
  --muted:#9aa4b0;
  --red:#e2261b;
  --red-bright:#ff3a2c;
  --red-dark:#7a130c;
  --amber:#f0a623;
  --green:#33d399;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',-apple-system,Segoe UI,sans-serif; background:var(--bg); color:var(--text); line-height:1.65; font-size:16px; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
ul{list-style:none;}
h1,h2,h3,.display{font-family:'Rajdhani',sans-serif; text-transform:uppercase; letter-spacing:0.5px; font-weight:700;}

/* hazard stripe bar */
.hazard{height:6px; background:repeating-linear-gradient(135deg, var(--amber) 0 14px, #0a0a0a 14px 28px); background-size:200% 100%; animation:stripemove 12s linear infinite;}
@keyframes stripemove{0%{background-position:0 0;}100%{background-position:200px 0;}}

/* Header */
header.site{position:sticky; top:0; z-index:60; background:rgba(6,7,10,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:padding .25s;}
nav.main{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; color:#fff; font-family:'Rajdhani',sans-serif; letter-spacing:1px;}
.brand img{height:114px; width:auto; filter:brightness(0) invert(1);}
.navlinks{display:flex; gap:26px; font-size:13px; color:var(--steel); font-weight:600; letter-spacing:1px; text-transform:uppercase;}
.navlinks a{position:relative; padding:4px 0;}
.navlinks a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--red); transition:width .25s;}
.navlinks a:hover::after, .navlinks a.active::after{width:100%;}
.navlinks a:hover, .navlinks a.active{color:#fff;}
.cta-btn{background:var(--red); color:#fff; padding:11px 22px; font-weight:700; font-size:13px; letter-spacing:1px; text-transform:uppercase; clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%); transition:background .2s, transform .15s;}
.cta-btn:hover{background:var(--red-bright); transform:translateY(-1px);}
.mobile-toggle{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
.mobile-toggle span{width:24px; height:2px; background:#fff;}

/* status badge */
.status-badge{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--green);}
.status-badge .dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(51,211,153,0.6); animation:pulse 1.8s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(51,211,153,0.55);}70%{box-shadow:0 0 0 8px rgba(51,211,153,0);}100%{box-shadow:0 0 0 0 rgba(51,211,153,0);}}

/* tag pill */
.tag{display:inline-flex; gap:8px; align-items:center; background:rgba(226,38,27,0.1); border:1px solid rgba(226,38,27,0.35); color:#ff8a80; font-size:12px; font-weight:700; letter-spacing:1.5px; padding:7px 14px; text-transform:uppercase; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);}
.tag .pulse{width:7px; height:7px; border-radius:50%; background:var(--red); animation:pulse2 1.6s infinite;}
@keyframes pulse2{0%{box-shadow:0 0 0 0 rgba(226,38,27,0.6);}70%{box-shadow:0 0 0 7px rgba(226,38,27,0);}100%{box-shadow:0 0 0 0 rgba(226,38,27,0);}}

/* hero / dark base everywhere */
body{background:var(--bg);}
.hero, section, footer.site{position:relative;}
.grid-tex{position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:54px 54px; opacity:0.45; mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, black, transparent 90%); pointer-events:none; animation:gridpulse 6s ease-in-out infinite;}
@keyframes gridpulse{0%,100%{opacity:0.35;}50%{opacity:0.55;}}
.glow{position:absolute; inset:0; background:radial-gradient(ellipse 800px 460px at 85% -10%, rgba(226,38,27,0.22), transparent 60%); pointer-events:none;}
.scanbeam{position:absolute; left:0; right:0; height:120px; background:linear-gradient(to bottom, transparent, rgba(226,38,27,0.06), transparent); pointer-events:none; animation:scanmove 5s linear infinite;}
@keyframes scanmove{0%{top:-120px;}100%{top:100%;}}

.hero{padding:90px 0 70px;}
.hero h1{font-size:54px; line-height:1.06; color:#fff; margin-top:20px;}
.hero h1 span{color:var(--red);}
.page-hero{padding:64px 0 50px;}
.page-hero h1{font-size:38px;}
.lead{margin-top:18px; color:var(--muted); font-size:17px; max-width:520px; font-family:'Inter',sans-serif; text-transform:none; font-weight:400; letter-spacing:0;}
.eyebrow{color:var(--red); font-weight:700; font-size:12px; letter-spacing:2px; text-transform:uppercase; font-family:'Rajdhani',sans-serif;}

/* typewriter */
.typewriter{font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:1px; color:var(--amber); font-size:15px; text-transform:uppercase; min-height:22px;}
.typewriter .cursor{display:inline-block; width:2px; height:14px; background:var(--amber); margin-left:3px; vertical-align:-2px; animation:blink 0.9s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

/* buttons */
.btnrow{display:flex; gap:14px; flex-wrap:wrap;}
.btn-primary, .btn-ghost, .btn-light, .btn-outline-dark{font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:14px; padding:14px 28px; display:inline-block; transition:transform .15s, background .2s, border-color .2s;}
.btn-primary{background:var(--red); color:#fff; clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 100%, 14px 100%);}
.btn-primary:hover{background:var(--red-bright); transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--line2); color:#fff; background:rgba(255,255,255,0.02); clip-path:polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);}
.btn-ghost:hover{border-color:var(--red);}
.btn-outline-dark{border:1px solid rgba(255,255,255,0.25); color:#fff; clip-path:polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);}
.btn-outline-dark:hover{border-color:var(--red);}

/* panel (stat box) */
.panel-dark{background:var(--panel); border:1px solid var(--line); padding:26px; position:relative; z-index:1; clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));}
.panel-head{display:flex; gap:12px; align-items:center; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:16px;}
.panel-head .ic{width:38px; height:38px; background:rgba(226,38,27,0.14); color:var(--red); display:flex; align-items:center; justify-content:center; font-weight:700; clip-path:polygon(20% 0,100% 0,80% 100%,0 100%);}
.stat{display:flex; justify-content:space-between; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--line); font-size:14px;}
.stat:last-child{border-bottom:none;}
.stat b{color:#fff; font-size:16px; font-weight:700; font-family:'Rajdhani',sans-serif;}
.stat span{color:var(--steel);}

/* counters */
.counter-row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:36px;}
.counter-box{text-align:center; border:1px solid var(--line); padding:24px 10px; background:var(--panel); clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));}
.counter-box .num{font-family:'Rajdhani',sans-serif; font-size:34px; font-weight:700; color:var(--red);}
.counter-box .lbl{margin-top:6px; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--steel);}

/* radar widget */
.radar{width:160px; height:160px; border-radius:50%; border:1px solid var(--line2); position:relative; background:radial-gradient(circle, rgba(226,38,27,0.05) 0%, transparent 70%); flex-shrink:0;}
.radar::before, .radar::after{content:""; position:absolute; border-radius:50%; border:1px solid var(--line); }
.radar::before{inset:24px;}
.radar::after{inset:54px;}
.radar .sweep{position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, rgba(226,38,27,0.55), transparent 35%); animation:rotate 3.2s linear infinite;}
.radar .dot1, .radar .dot2{position:absolute; width:5px; height:5px; border-radius:50%; background:var(--red); box-shadow:0 0 6px var(--red);}
.radar .dot1{top:38px; left:62px;}
.radar .dot2{top:96px; left:108px;}
@keyframes rotate{100%{transform:rotate(360deg);}}

/* sections */
section{padding:80px 0;}
section.tight{padding:54px 0;}
h2{font-size:32px; margin-top:10px; color:#fff;}
h2.center{text-align:center;}
.section-sub{color:var(--muted); margin-top:14px; max-width:620px; font-size:16px; font-family:'Inter',sans-serif; text-transform:none; font-weight:400; letter-spacing:0;}
.section-sub.center{margin-left:auto; margin-right:auto; text-align:center;}

/* reveal-on-scroll */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(26px); transition:opacity .5s ease, transform .5s ease;}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.12s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.19s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.26s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.33s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.4s;}

/* grids and cards */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.card{background:var(--panel); border:1px solid var(--line); padding:28px; clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); transition:border-color .2s, transform .2s, box-shadow .2s;}
.card:hover{border-color:var(--red); transform:translateY(-4px); box-shadow:0 10px 28px rgba(226,38,27,0.12);}
.card .ic{width:46px; height:46px; background:rgba(226,38,27,0.12); color:var(--red); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:18px; clip-path:polygon(20% 0,100% 0,80% 100%,0 100%);}
.card h3{font-size:16px; margin-bottom:8px; color:#fff;}
.card p{color:var(--muted); font-size:14px; font-family:'Inter',sans-serif; text-transform:none; font-weight:400; letter-spacing:0;}
.card .price{margin-top:14px; font-size:13px; color:var(--red); font-weight:700; font-family:'Rajdhani',sans-serif; letter-spacing:1px;}

/* image placeholder (HUD viewfinder style) */
.imgph{position:relative; min-height:220px; background:var(--panel2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--steel); font-size:12px; letter-spacing:1px; text-transform:uppercase; overflow:hidden;}
.imgph::before{content:""; position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:30px 30px; opacity:0.5;}
.imgph::after{content:""; position:absolute; inset:14px; border:1px solid rgba(226,38,27,0.5);}
.imgph span{position:relative; z-index:1; background:rgba(6,7,10,0.7); padding:5px 12px; border:1px solid var(--line);}
.imgph-dark{position:relative; min-height:220px; background:var(--panel); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--steel); font-size:12px; overflow:hidden;}
.imgph img, .imgph-dark img{width:100%; height:100%; object-fit:cover; display:block;}

/* pricing table */
table.pricing{width:100%; border-collapse:collapse; margin-top:30px; background:var(--panel); border:1px solid var(--line);}
table.pricing th{background:#000; color:#fff; text-align:left; padding:14px 20px; font-size:13px; font-weight:700; font-family:'Rajdhani',sans-serif; letter-spacing:1px; text-transform:uppercase;}
table.pricing td{padding:16px 20px; border-bottom:1px solid var(--line); font-size:15px;}
table.pricing tr:last-child td{border-bottom:none;}
table.pricing td.price{font-weight:700; color:var(--red); white-space:nowrap; font-family:'Rajdhani',sans-serif;}

/* steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:46px;}
.step .num{width:38px; height:38px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; margin-bottom:16px; clip-path:polygon(20% 0,100% 0,80% 100%,0 100%); font-family:'Rajdhani',sans-serif;}
.step h3{font-size:15px; color:#fff; margin-bottom:6px;}
.step p{font-size:14px; color:var(--muted); font-family:'Inter',sans-serif; text-transform:none; font-weight:400; letter-spacing:0;}

/* checklist */
.checklist li{display:flex; gap:10px; padding:8px 0; color:var(--text); font-size:15px;}
.checklist li::before{content:"▸"; color:var(--red); font-weight:700; flex-shrink:0;}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:46px;}
.gallery .imgph{aspect-ratio:4/3;}
.gallery figcaption{margin-top:8px; font-size:13px; color:var(--muted);}

/* brand strip / marquee */
.marquee{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; background:var(--bg2);}
.marquee .track{display:flex; gap:60px; white-space:nowrap; animation:marquee 22s linear infinite; width:max-content;}
.marquee span{font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--steel); font-size:15px;}
@keyframes marquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* form */
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.formgrid .full{grid-column:1 / -1;}
label{display:block; font-size:12px; font-weight:700; color:var(--steel); margin-bottom:6px; letter-spacing:1px; text-transform:uppercase; font-family:'Rajdhani',sans-serif;}
input, select, textarea{width:100%; border:1px solid var(--line); background:var(--bg2); border-radius:0; padding:12px 14px; font-size:15px; font-family:'Inter',sans-serif; color:var(--text);}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--red);}
textarea{resize:vertical; min-height:110px;}

/* footer */
footer.site{background:#000; color:var(--steel); padding:56px 0 30px; border-top:1px solid var(--line);}
footer.site h4{color:#fff; font-size:14px; margin-bottom:16px; font-family:'Rajdhani',sans-serif; letter-spacing:1px; text-transform:uppercase;}
footer.site a:hover{color:#fff;}
.footgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px;}
.footgrid li{padding:5px 0; font-size:14px;}
.footbottom{border-top:1px solid var(--line); margin-top:40px; padding-top:24px; display:flex; justify-content:space-between; font-size:13px; flex-wrap:wrap; gap:10px;}

@media (max-width: 900px){
  .navlinks{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:#000; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px 0;}
  .navlinks.open{display:flex;}
  .navlinks a{padding:14px 32px; width:100%;}
  .navlinks a::after{display:none;}
  .mobile-toggle{display:flex;}
  .grid2, .grid3, .grid4, .steps, .gallery, .footgrid, .counter-row{grid-template-columns:1fr;}
  .hero h1{font-size:32px;}
  table.pricing{font-size:14px;}
  .radar{display:none;}
}

/* ===== Hunter — driving mascot ===== */
.hunter-mascot{
  position:fixed;
  right:14px;
  bottom:14px;
  width:192px;
  z-index:55;
  pointer-events:none;
  transition:transform .35s ease;
  transform:scaleX(1);
}
.hunter-mascot.reverse{transform:scaleX(-1);}
.hunter-mascot .hunter-rig{
  position:relative;
  pointer-events:auto;
  cursor:pointer;
}
@media (prefers-reduced-motion: no-preference){
  .hunter-mascot .hunter-rig{animation:hunter-idle 1.5s ease-in-out infinite;}
  .hunter-mascot.boost .hunter-rig{animation:hunter-idle .55s ease-in-out infinite;}
}
@keyframes hunter-idle{
  0%, 100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-3px) rotate(-0.6deg);}
}
.hunter-mascot img{
  width:100%;
  display:block;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,0.6));
}
.hunter-exhaust{
  position:absolute;
  right:6%;
  bottom:18%;
  width:6px;
  height:6px;
  pointer-events:none;
}
.hunter-exhaust span{
  position:absolute;
  left:0; bottom:0;
  width:7px; height:7px;
  border-radius:50%;
  background:rgba(154,164,176,0.55);
  opacity:0;
}
@media (prefers-reduced-motion: no-preference){
  .hunter-exhaust span{animation:hunter-puff 1.4s ease-out infinite;}
  .hunter-exhaust span:nth-child(2){animation-delay:.35s;}
  .hunter-exhaust span:nth-child(3){animation-delay:.7s;}
  .hunter-mascot.boost .hunter-exhaust span{animation-duration:.6s;}
}
@keyframes hunter-puff{
  0%{opacity:0; transform:translate(0,0) scale(0.6);}
  15%{opacity:0.65;}
  100%{opacity:0; transform:translate(10px,-16px) scale(1.6);}
}
.hunter-speech{
  position:absolute;
  right:6%;
  bottom:104%;
  max-width:170px;
  background:#0b0e13;
  border:1px solid var(--red);
  color:#fff;
  font-family:'Rajdhani',sans-serif;
  font-weight:700;
  letter-spacing:0.3px;
  font-size:12.5px;
  line-height:1.35;
  padding:10px 12px;
  text-transform:none;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 8px), 30% calc(100% - 8px), 18% 100%, 18% calc(100% - 8px), 0 calc(100% - 8px));
  opacity:0;
  transform:translateY(6px) scale(0.92);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.hunter-speech.show{opacity:1; transform:translateY(0) scale(1);}
/* keep speech text upright when the rig is mirrored (reversing) */
.hunter-mascot.reverse .hunter-speech{transform:scaleX(-1) translateY(6px) scale(0.92);}
.hunter-mascot.reverse .hunter-speech.show{transform:scaleX(-1) translateY(0) scale(1);}
@media (max-width: 900px){
  .hunter-mascot{width:132px; right:10px; bottom:10px;}
  .hunter-speech{font-size:11px; max-width:130px;}
}

/* mid-width screens: 8 nav tabs + quote button on one line */
@media (min-width: 901px) and (max-width: 1140px){
  .navlinks{gap:16px; font-size:12px;}
  .cta-btn{white-space:nowrap; padding:11px 16px;}
}