/* SafeVision CCTV — responsive landing page */
:root{--navy:#071426;--navy2:#0b1d34;--blue:#2878ff;--cyan:#68d8ff;--ink:#101d30;--muted:#66758a;--line:#e8edf3;--paper:#f6f8fb;--white:#fff;--radius:20px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;font-family:"DM Sans",sans-serif;color:var(--ink);background:#fff;line-height:1.65}a{color:inherit;text-decoration:none}button{font:inherit}.container{width:min(1160px,calc(100% - 48px));margin:auto}
.topbar{background:#04101f;color:#aab8ca;font-size:12px}.topbar-inner{height:36px;display:flex;align-items:center;justify-content:space-between}.topbar a{color:#dce9fa}.dot,.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#42d6a0;margin-right:8px;box-shadow:0 0 0 4px #42d6a01c}
.site-header{position:sticky;top:0;z-index:20;background:#071426f2;backdrop-filter:blur(16px);border-bottom:1px solid #ffffff12}.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;color:white;font:800 20px Manrope,sans-serif;letter-spacing:-1px;line-height:1}.brand>span:last-child>span{color:#64cfff}.brand small{display:block;font:600 8px "DM Sans",sans-serif;letter-spacing:2px;color:#8294aa;margin-top:6px}.brand-mark{width:38px;height:38px;border:1px solid #3d8dff;border-radius:12px;display:grid;place-items:center;background:#1c4d8830}.brand-mark svg{width:25px;fill:none;stroke:#6acfff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.nav-menu{display:flex;align-items:center;gap:30px;color:#bdc9d8;font-size:13px}.nav-menu>a:not(.btn):hover{color:#fff}.btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;border-radius:9px;padding:14px 19px;font-weight:700;font-size:13px;transition:.25s ease;border:1px solid transparent}.btn span{font-size:17px}.btn-nav{padding:11px 16px;background:#fff;color:#0b1d34}.btn-nav:hover{background:#dff3ff;transform:translateY(-2px)}.menu-toggle{display:none;background:none;border:0;padding:8px}.menu-toggle span{display:block;width:23px;height:2px;background:#fff;margin:5px}
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 78% 38%,#123c69 0%,transparent 39%),linear-gradient(115deg,#071426 0%,#091a30 60%,#071426 100%);color:#fff;padding:88px 0 24px}.hero-glow{position:absolute;width:500px;height:500px;border-radius:50%;border:1px solid #4b9aff18;right:3%;top:5%;box-shadow:0 0 0 65px #4b9aff08,0 0 0 130px #4b9aff05}.hero-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:45px;min-height:455px}.eyebrow{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:700;letter-spacing:2px;color:#8ab9ed}.eyebrow-line{height:1px;width:25px;background:#48b9ff}.eyebrow.dark{color:#47729d}.hero h1,.section h2,.section-heading h2,.why-copy h2,.cta-inner h2{font:800 clamp(38px,5vw,61px)/1.12 Manrope,sans-serif;letter-spacing:-2.8px;margin:22px 0}.hero h1 span{color:#68caff}.hero-desc{max-width:490px;color:#a8b8cb;font-size:15px;line-height:1.85}.hero-actions{display:flex;gap:12px;margin-top:29px;flex-wrap:wrap}.btn-primary{background:linear-gradient(110deg,#2678ff,#24a8e8);color:#fff;box-shadow:0 10px 30px #1474ff30}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 32px #1474ff50}.btn-ghost{border-color:#ffffff38;color:#e3edf8}.btn-ghost:hover{background:#ffffff12}.hero-proof{display:flex;align-items:center;gap:13px;margin-top:43px}.proof-avatars{display:flex}.proof-avatars span{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#143b61;border:2px solid #071426;color:#72d6ff;margin-left:-5px;font-size:12px}.proof-avatars span:first-child{margin:0}.hero-proof strong,.hero-proof small{display:block}.hero-proof strong{font-size:11px}.hero-proof small{color:#8396ad;font-size:10px;margin-top:2px}
.hero-visual{height:420px;position:relative;display:grid;place-items:center}.visual-orbit{position:absolute;border:1px solid #5ab8ff25;border-radius:50%;width:370px;height:370px}.orbit-two{width:470px;height:470px;border-color:#5ab8ff12}.camera-stage{position:relative;width:min(100%,450px);padding:12px;border:1px solid #9acfff4d;border-radius:17px;background:#112942b8;box-shadow:0 25px 80px #0008;transform:rotate(2deg)}.camera-label{height:29px;display:flex;align-items:center;gap:7px;font-size:8px;letter-spacing:1.4px;color:#b7cce2}.camera-label b{margin-left:auto;color:#ff6868}.camera-label .live-dot{width:6px;height:6px;background:#ff5656;box-shadow:0 0 0 3px #ff565622}.camera-image{height:270px;position:relative;overflow:hidden;border-radius:9px;background:#1a2c3d}.camera-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.1)}.camera-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#00152a20,transparent 50%,#00152a9c)}.camera-time{position:absolute;bottom:12px;left:14px;z-index:2;color:#d7efff;font-size:8px;letter-spacing:1px}.scan-line{position:absolute;z-index:2;top:20%;height:1px;width:100%;background:#6de2ff8a;box-shadow:0 0 15px #6de2ff;animation:scan 5s ease-in-out infinite alternate}@keyframes scan{to{top:85%}}.floating-card{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;background:#f8fbff;color:#10243c;padding:12px 15px;border-radius:12px;box-shadow:0 12px 35px #0004}.floating-card strong,.floating-card small{display:block}.floating-card strong{font-size:11px}.floating-card small{font-size:9px;color:#75869a}.float-icon{width:32px;height:32px;display:grid;place-items:center;background:#e5f2ff;color:#2479ef;border-radius:9px;font-size:23px}.status-check{margin-left:8px;background:#d8f8e9;color:#15945b;border-radius:50%;width:20px;height:20px;text-align:center;font-size:12px}.card-shield{top:44px;left:-5px}.card-signal{bottom:48px;right:-10px}.signal-bars{height:28px;display:flex;align-items:end;gap:3px}.signal-bars i{display:block;width:4px;border-radius:3px;background:#2b8df7}.signal-bars i:nth-child(1){height:9px}.signal-bars i:nth-child(2){height:15px}.signal-bars i:nth-child(3){height:21px}.signal-bars i:nth-child(4){height:27px}.hero-number{position:absolute;right:4px;bottom:0;font:700 18px Manrope;color:#9bcfff}.hero-number span{font:500 8px "DM Sans";letter-spacing:1.5px;color:#718ba7}.hero-bottom{display:flex;align-items:center;gap:18px;margin-top:30px;padding-top:20px;border-top:1px solid #ffffff1c;color:#8295ad;font-size:9px;letter-spacing:2px}.hero-bottom i{width:4px;height:4px;border-radius:50%;background:#50baff}
.section{padding:100px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:42px}.section-heading h2,.section h2,.why-copy h2,.cta-inner h2{font-size:clamp(32px,4vw,45px);letter-spacing:-2px;margin:15px 0 0}.section-heading>p{max-width:350px;color:var(--muted);font-size:13px;margin:0 0 5px;line-height:1.8}.services{background:#fff}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.service-card{position:relative;border:1px solid var(--line);border-radius:14px;padding:25px 21px 22px;min-height:250px;transition:.25s;background:#fff}.service-card:hover{transform:translateY(-6px);border-color:#9acbff;box-shadow:0 18px 40px #15365b0d}.service-icon{width:43px;height:43px;border-radius:12px;background:#edf5ff;color:#2678ef;display:grid;place-items:center;font-size:24px}.service-no{position:absolute;right:22px;top:25px;color:#c1cbd7;font-size:10px}.service-card h3{font:700 16px Manrope;margin:23px 0 8px}.service-card p{font-size:12px;color:#718096;line-height:1.75;margin:0 0 20px}.service-card>a{font-size:11px;color:#2678ef;font-weight:700}.service-card>a b{font-size:16px;margin-left:7px}
.why-section{background:var(--navy);color:#fff;padding:95px 0}.why-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:90px}.why-visual{position:relative;padding:0 25px 25px 0}.why-visual:before{content:"";position:absolute;left:25px;top:25px;right:0;bottom:0;border:1px solid #3d83c866;border-radius:17px}.why-visual img{position:relative;width:100%;height:420px;object-fit:cover;border-radius:15px;filter:saturate(.7)}.experience-tag{position:absolute;right:0;bottom:0;z-index:2;background:#fff;color:#13253b;padding:15px 20px;border-radius:12px;display:flex;align-items:center;gap:13px;box-shadow:0 10px 35px #0003}.experience-tag strong{font:800 31px Manrope;color:#2478ed}.experience-tag span{font-size:10px;font-weight:700;line-height:1.4}.why-copy h2{font-size:clamp(32px,3.6vw,43px);margin:18px 0}.muted-light{color:#99abc0;font-size:13px;line-height:1.85}.benefit-list{margin:25px 0 30px}.benefit-list>div{display:flex;gap:13px;padding:12px 0;border-bottom:1px solid #ffffff16}.benefit-check{flex:none;width:23px;height:23px;border-radius:50%;background:#1d4770;color:#71d7ff;display:grid;place-items:center;font-size:12px}.benefit-list p{margin:0}.benefit-list strong,.benefit-list small{display:block}.benefit-list strong{font-size:12px}.benefit-list small{font-size:10px;color:#8fa2b9;margin-top:3px}
.packages{background:#f6f8fb}.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}.package-card{position:relative;background:#fff;border:1px solid #e5eaf0;border-radius:15px;padding:27px 25px;overflow:hidden}.package-card.featured{border:1px solid #3988ff;box-shadow:0 15px 40px #1c6edb12}.popular{position:absolute;right:0;top:0;background:#2878ff;color:#fff;padding:7px 13px;border-radius:0 0 0 10px;font-size:8px;letter-spacing:1px;font-weight:700}.package-label{font-size:9px;letter-spacing:1.4px;color:#71849a;font-weight:700}.package-card h3{font:800 23px Manrope;margin:12px 0 3px}.package-price{font:800 18px Manrope;color:#2878ef}.package-desc{font-size:11px;color:#8390a0;margin:7px 0 18px}.package-card ul{list-style:none;padding:17px 0;margin:0 0 18px;border-top:1px solid var(--line)}.package-card li{font-size:11px;color:#56677c;padding:6px 0}.package-card li:before{content:"✓";color:#208bdb;font-weight:800;margin-right:9px}.package-card .btn{width:100%}.btn-outline{border-color:#d8e1eb;color:#1c3857}.btn-outline:hover{border-color:#2878ff;color:#2878ff}.package-note{font-size:10px;color:#8995a4;margin-top:18px}
.project-section{background:#08172a;color:#fff;padding:95px 0}.project-section .section-heading>p{color:#91a2b8}.project-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:15px}.project-item{height:300px;position:relative;overflow:hidden;border-radius:14px;background:#142a42}.project-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s;filter:brightness(.75) saturate(.8)}.project-item:hover img{transform:scale(1.06)}.project-item:after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#061426d9)}.project-item>div{position:absolute;z-index:2;left:20px;bottom:18px}.project-item small{font-size:8px;letter-spacing:1.5px;color:#a9d8ff}.project-item h3{font:700 18px Manrope;margin:5px 0}
.faq-section{background:#fff}.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}.faq-intro{font-size:13px;color:#7d8b9d;margin:17px 0 20px}.text-link{font-size:12px;font-weight:700;color:#2878ef}.faq-list details{border-bottom:1px solid var(--line);padding:19px 0}.faq-list summary{cursor:pointer;list-style:none;font:700 13px Manrope;display:flex;justify-content:space-between;gap:15px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:20px;color:#2878ef;font-weight:400;transition:.2s}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details p{font-size:12px;line-height:1.8;color:#718096;margin:12px 30px 0 0}
.cta-section{background:linear-gradient(110deg,#1769d7,#168fc8);color:#fff;padding:66px 0;overflow:hidden;position:relative}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative}.cta-inner h2{font-size:clamp(32px,4vw,45px);margin:14px 0}.cta-inner p{font-size:13px;color:#d5eaff;margin:0}.cta-inner .eyebrow{color:#d1eaff}.cta-inner .eyebrow-line{background:#fff}.btn-light{background:#fff;color:#1556a4;white-space:nowrap;position:relative;z-index:2}.btn-light:hover{transform:translateY(-3px);box-shadow:0 10px 25px #003e7c44}.cta-decoration{position:absolute;right:17%;font:800 150px Manrope;color:#ffffff0c;letter-spacing:-15px;pointer-events:none}.cta-decoration span{color:#ffffff30}
.footer{background:#04101f;color:#fff}.footer-main{padding:42px 0;display:flex;align-items:center;gap:45px;border-bottom:1px solid #ffffff17}.footer-main>p{font-size:11px;color:#8293a8;max-width:260px;margin:0}.footer-links{margin-left:auto;display:flex;gap:23px;font-size:11px;color:#b3c1d2}.footer-links a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;padding:17px 0;color:#64778f;font-size:9px}.floating-wa{position:fixed;right:22px;bottom:22px;z-index:30;display:flex;align-items:center;gap:8px;padding:11px 16px;background:#18b96a;color:#fff;border-radius:50px;box-shadow:0 8px 28px #0b7e493d;font-size:11px;font-weight:700;transition:.2s}.floating-wa:hover{transform:translateY(-3px);background:#0da85c}.wa-symbol{font-size:18px}.back-top{position:fixed;right:27px;bottom:83px;z-index:25;width:35px;height:35px;border:0;border-radius:50%;background:#fff;color:#174d83;box-shadow:0 3px 18px #00152a25;cursor:pointer;opacity:0;pointer-events:none;transition:.2s}.back-top.show{opacity:1;pointer-events:auto}.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:900px){.nav-menu{gap:17px}.hero-grid{gap:20px}.hero-visual{transform:scale(.92)}.service-grid{grid-template-columns:repeat(2,1fr)}.why-grid{gap:45px}.faq-grid{gap:50px}.project-item{height:250px}}
@media(max-width:700px){.container{width:min(100% - 36px,540px)}.topbar-inner{font-size:10px}.topbar-inner>a{display:none}.nav-wrap{height:68px}.menu-toggle{display:block}.nav-menu{display:none;position:absolute;top:68px;left:0;right:0;background:#091a30;padding:18px 22px 24px;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid #ffffff15;box-shadow:0 15px 25px #0003}.nav-menu.open{display:flex}.nav-menu>a:not(.btn){padding:12px 0;border-bottom:1px solid #ffffff12}.nav-menu .btn{margin-top:14px}.hero{padding:62px 0 20px}.hero-grid{grid-template-columns:1fr;gap:5px}.hero h1{font-size:43px;letter-spacing:-2.2px}.hero-desc{font-size:13px}.hero-proof{margin-top:28px}.hero-visual{height:350px;transform:none;margin-top:5px}.camera-stage{width:90%}.camera-image{height:220px}.visual-orbit{width:290px;height:290px}.orbit-two{width:350px;height:350px}.card-shield{left:-3px;top:30px}.card-signal{right:-4px;bottom:24px}.hero-number{bottom:-3px}.hero-bottom{gap:9px;justify-content:space-between;font-size:7px;letter-spacing:1px;margin-top:25px}.section{padding:70px 0}.section-heading{display:block;margin-bottom:28px}.section-heading h2,.section h2,.why-copy h2{font-size:34px;letter-spacing:-1.6px}.section-heading>p{margin-top:15px}.service-grid{gap:10px}.service-card{padding:19px 15px;min-height:245px}.service-card h3{font-size:14px;margin-top:17px}.service-card p{font-size:11px}.why-section{padding:70px 0}.why-grid{grid-template-columns:1fr;gap:40px}.why-visual img{height:310px}.why-copy h2{font-size:34px}.package-grid{grid-template-columns:1fr;gap:12px}.package-card{padding:24px}.project-section{padding:70px 0}.project-grid{grid-template-columns:1fr 1fr}.project-large{grid-column:1/-1}.project-item{height:210px}.project-large{height:250px}.project-item h3{font-size:15px}.faq-grid{grid-template-columns:1fr;gap:25px}.faq-section{padding:70px 0}.cta-section{padding:52px 0}.cta-inner{display:block}.cta-inner h2{font-size:35px}.cta-inner .btn{margin-top:25px}.footer-main{align-items:flex-start;flex-wrap:wrap;gap:20px}.footer-main>p{max-width:100%;width:100%;order:3}.footer-links{margin-left:0;flex-wrap:wrap;gap:15px}.footer-bottom{gap:10px;flex-direction:column}.floating-wa{right:14px;bottom:14px}.back-top{right:19px;bottom:73px}}
@media(max-width:380px){.hero h1{font-size:37px}.hero-actions .btn{padding:12px 13px;font-size:11px}.service-grid{grid-template-columns:1fr}.service-card{min-height:0}.project-grid{grid-template-columns:1fr}.project-large{grid-column:auto}.hero-bottom{font-size:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}