/* Modern visual layer for the CCTV service page. Scoped so shared navigation and footer remain unchanged. */
.cctv-modern {
  --navy:#041b32;
  --blue:#0069b8;
  --sky:#72cef5;
  --green:#64b92f;
  --yellow:#ffcb2e;
  --ink:#10283f;
  --muted:#63778a;
  --line:#d8e5ed;
  --soft:#f2f7fa;
}

.cctv-modern .hero { min-height:min(820px,calc(100vh - 80px)); padding-bottom:110px; overflow:hidden; background:radial-gradient(circle at 81% 25%,rgba(0,124,204,.4),transparent 29%),radial-gradient(circle at 8% 105%,rgba(100,185,47,.16),transparent 24%),linear-gradient(130deg,#031426,#07325d 58%,#0061aa); }
.cctv-modern .hero::after { position:absolute; right:-9vw; bottom:-22vw; width:63vw; aspect-ratio:1; border:1px solid rgba(114,206,245,.22); border-radius:50%; box-shadow:0 0 0 7vw rgba(255,255,255,.018),0 0 0 14vw rgba(255,255,255,.014); content:""; animation:cctvRadar 7s ease-in-out infinite; }
.cctv-modern .hero-grid,.cctv-modern .crumb { position:relative; z-index:2; }
.cctv-modern .hero h1 em { margin-top:8px; color:#82d8f8; font-size:.7em; }
.cctv-modern .photo { border-radius:50% 50% 22px 22px / 13% 13% 22px 22px; background:linear-gradient(145deg,rgba(3,22,42,.8),rgba(44,136,190,.28)); }
.cctv-modern .photo::before { width:390px; height:390px; box-shadow:0 0 0 70px rgba(120,201,248,.025),0 0 0 140px rgba(120,201,248,.018); }
.cctv-modern .photo::after { width:230px; height:230px; }
.cctv-modern .photo .ph::after { display:block; width:1px; height:70px; margin:22px auto 0; background:linear-gradient(var(--yellow),transparent); content:""; animation:cctvScan 2.5s ease-in-out infinite; }
.cctv-modern .live { z-index:2; border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(12px); }
.cctv-modern .trust { z-index:3; margin-top:-52px; }
.cctv-modern .trust-grid { border-radius:12px; }
.cctv-modern .trust-grid div { min-height:128px; padding:28px; }
.cctv-modern .trust b { margin-bottom:7px; }

.cctv-modern .cs { position:relative; }
.cctv-modern .kick { letter-spacing:.17em; }
.cctv-modern .ttl { letter-spacing:-.045em; }
.cctv-modern .head { margin-bottom:56px; }
.cctv-modern .card { border-radius:14px; box-shadow:none; }
.cctv-modern .card:hover { border-color:rgba(0,105,184,.38); box-shadow:0 24px 60px rgba(4,27,50,.11); }
.cctv-modern .pains { grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.cctv-modern .pain { position:relative; min-height:300px; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; overflow:hidden; }
.cctv-modern .pain::after { position:absolute; right:-45px; bottom:-45px; width:115px; aspect-ratio:1; border:1px solid var(--blue); border-radius:50%; opacity:.08; content:""; transition:.35s; }
.cctv-modern .pain:hover::after { opacity:.23; transform:scale(1.5); }
.cctv-modern .pain .num { border-radius:50%; }
.cctv-modern .estimate { position:relative; overflow:hidden; border-radius:18px; background:linear-gradient(135deg,#062f57,#0067b4); }
.cctv-modern .estimate::after { position:absolute; right:-100px; bottom:-180px; width:420px; aspect-ratio:1; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 65px rgba(255,255,255,.03); content:""; }
.cctv-modern .estimate > * { position:relative; z-index:1; }
.cctv-modern .checks li { border-radius:7px; backdrop-filter:blur(8px); }

.cctv-modern .services { grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.cctv-modern .service { min-height:225px; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; }
.cctv-modern .service small { color:var(--blue); }
.cctv-modern .space { border-radius:10px; }
.cctv-modern .mini { position:relative; overflow:hidden; background:linear-gradient(145deg,#0b3a65,#071d33); }
.cctv-modern .mini::after { position:absolute; width:105px; aspect-ratio:1; border:1px solid rgba(114,206,245,.25); border-radius:50%; box-shadow:0 0 0 28px rgba(114,206,245,.035); content:""; }
.cctv-modern .works { grid-template-rows:repeat(2,270px); }
.cctv-modern .work { border:1px dashed rgba(114,206,245,.32); border-radius:9px; background:linear-gradient(145deg,#123f66,#06192d); }
.cctv-modern .why-point { border-top-color:var(--green); border-radius:7px; }
.cctv-modern .step .num { position:relative; box-shadow:0 0 0 7px #f0f6f9; transition:.3s; }
.cctv-modern .step:hover .num { color:#fff; border-color:var(--blue); background:var(--blue); transform:translateY(-5px); }
.cctv-modern .standard { border-radius:9px; }
.cctv-modern .promo { position:relative; overflow:hidden; border-radius:16px; background:linear-gradient(120deg,#65b936,#9cdb4d); }
.cctv-modern .promo::after { position:absolute; right:18%; width:180px; aspect-ratio:1; border:1px solid rgba(255,255,255,.24); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.07); content:""; }
.cctv-modern .promo > * { position:relative; z-index:1; }
.cctv-modern .final { position:relative; overflow:hidden; padding-block:clamp(100px,12vw,170px); background:radial-gradient(circle at 50% 10%,rgba(0,110,190,.52),transparent 39%),#031526; }
.cctv-modern .final::after { position:absolute; inset:0; opacity:.1; background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size:65px 65px; content:""; }
.cctv-modern .final .cc { position:relative; z-index:1; }
.cctv-modern .final .ttl { font-size:clamp(2.9rem,6vw,6rem); line-height:1.04; }

@keyframes cctvRadar { 0%,100% { opacity:.25; transform:scale(.94); } 50% { opacity:.72; transform:scale(1); } }
@keyframes cctvScan { 0%,100% { opacity:.2; transform:translateY(-15px); } 50% { opacity:1; transform:translateY(15px); } }

@media(max-width:980px){.cctv-modern .pains{grid-template-columns:repeat(2,1fr)}.cctv-modern .hero{min-height:auto}.cctv-modern .photo{border-radius:28px}}
@media(max-width:700px){.cctv-modern .pains,.cctv-modern .services{grid-template-columns:1fr}.cctv-modern .pain{min-height:250px}.cctv-modern .service{min-height:200px}.cctv-modern .trust{margin-top:-25px}.cctv-modern .trust-grid div{min-height:auto}.cctv-modern .works{grid-template-rows:320px 220px 220px}.cctv-modern .final .ttl{font-size:2.8rem}.cctv-modern .promo::after{display:none}}
@media(prefers-reduced-motion:reduce){.cctv-modern .hero::after,.cctv-modern .photo .ph::after{animation:none}}