@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#08090b;--card:#111318;--text:#f5f5f5;--muted:#a5a8b0;--red:#e3262e;--line:#252830}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}.header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;border-bottom:1px solid #17191e;position:sticky;top:0;background:rgba(8,9,11,.88);backdrop-filter:blur(14px);z-index:10}.logo{font-weight:800;font-size:25px;letter-spacing:-1px}.logo span{color:var(--red)}.logo small{font-size:9px;display:block;letter-spacing:2px;color:#aaa;margin-top:-8px}
nav{display:flex;gap:28px;color:#c4c6cc;font-size:14px}nav a:hover{color:#fff}.nav-btn,.btn{border-radius:9px;padding:12px 18px;font-weight:700;font-size:14px}.nav-btn{background:var(--red)}
.hero{min-height:650px;padding:90px 8%;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:70px;background:radial-gradient(circle at 80% 45%,rgba(227,38,46,.16),transparent 34%)}
.eyebrow{color:var(--red);font-size:12px;font-weight:800;letter-spacing:3px;margin:0 0 12px}.hero h1{font-size:clamp(42px,6vw,76px);line-height:1.02;letter-spacing:-3px;margin:0 0 24px;max-width:800px}.hero-text{font-size:19px;color:var(--muted);max-width:650px}.hero-actions{display:flex;gap:12px;margin-top:32px}.primary{background:var(--red)}.secondary{border:1px solid #363942}.hero-card{position:relative;background:linear-gradient(145deg,#17191f,#0e1014);border:1px solid #292c34;border-radius:26px;padding:55px 40px;min-height:340px;display:flex;flex-direction:column;justify-content:end;overflow:hidden}.glow{position:absolute;width:230px;height:230px;border-radius:50%;background:var(--red);filter:blur(100px);opacity:.25;top:15px;right:20px}.pc-icon{font-size:100px;color:var(--red);position:absolute;top:55px;left:40px}.hero-card h3{font-size:24px;margin:0}.hero-card p{color:var(--muted);margin-bottom:0}
.section{padding:100px 8%}.section-title{text-align:center;max-width:650px;margin:0 auto 50px}.section-title h2,.camera-section h2,.contact h2{font-size:42px;line-height:1.1;margin:0 0 15px;letter-spacing:-1.5px}.section-title p:last-child,.contact p{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service{background:var(--card);border:1px solid var(--line);padding:28px;border-radius:16px;transition:.2s}.service:hover{transform:translateY(-4px);border-color:#444852}.service span{font-size:30px}.service h3{margin:18px 0 8px}.service p{color:var(--muted);margin:0;font-size:14px}
.camera-section{padding:90px 8%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px;background:#0d0f13;border-top:1px solid #191b20;border-bottom:1px solid #191b20}.camera-section p:not(.eyebrow){color:var(--muted);max-width:600px;margin-bottom:30px}.camera-visual{width:290px;height:290px;border-radius:50%;border:1px solid #333740;margin:auto;display:grid;place-items:center;position:relative;background:radial-gradient(circle,#22252c 0 20%,#101216 21% 45%,#08090b 46%)}.camera-lens{width:110px;height:110px;border-radius:50%;border:15px solid #292c33;background:#020304;box-shadow:0 0 50px rgba(227,38,46,.25)}.camera-visual span{position:absolute;bottom:35px;color:var(--red);font-weight:800;letter-spacing:3px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.gallery div{aspect-ratio:1/1;background:linear-gradient(135deg,#17191f,#0e1014);border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;color:#777b85;font-size:12px;font-weight:700;letter-spacing:1px}
.contact{padding:100px 8%;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.contact-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:18px}.contact-card a{font-weight:600}.contact-card a:hover{color:var(--red)}.contact-card p{margin:0}
footer{border-top:1px solid var(--line);padding:35px 8%;display:flex;justify-content:space-between;align-items:center;color:#777b85;font-size:12px}.floating-wa{position:fixed;right:22px;bottom:22px;background:#20b958;color:#fff;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-weight:800;box-shadow:0 8px 30px rgba(0,0,0,.4);z-index:20}
@media(max-width:800px){nav{display:none}.header{padding:0 5%}.hero,.camera-section,.contact{grid-template-columns:1fr;padding:70px 6%;gap:40px}.hero h1{font-size:48px;letter-spacing:-2px}.hero-card{min-height:280px}.grid{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:1fr 1fr}.section{padding:75px 6%}.section-title h2,.camera-section h2,.contact h2{font-size:34px}footer{flex-direction:column;gap:15px;text-align:center}}
@media(max-width:500px){.grid{grid-template-columns:1fr}.hero-actions{flex-direction:column}.btn{text-align:center}.logo{font-size:22px}}

.gallery-item{position:relative;overflow:hidden;border-radius:14px;background:#111318;border:1px solid var(--line);aspect-ratio:1/1}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-item span{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 12px;background:linear-gradient(transparent,rgba(0,0,0,.9));font-size:11px;font-weight:800;letter-spacing:1px}
.gallery-item .placeholder{width:100%;height:100%;display:grid;place-items:center;color:#777b85;font-size:12px;font-weight:700;letter-spacing:1px}

.network-card{background:radial-gradient(circle at 50% 35%,#252831 0,#111318 58%,#0b0c0f 100%)}
.network-art{position:absolute;inset:0;display:grid;place-items:center}
.router{position:relative;z-index:3;border:1px solid #555a65;background:#171a20;border-radius:10px;padding:14px 18px;font-size:10px;font-weight:800;letter-spacing:1px;box-shadow:0 0 30px rgba(227,38,46,.16)}
.nodes{position:absolute;inset:0}
.nodes i{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 18px rgba(227,38,46,.5)}
.nodes i:nth-child(1){left:18%;top:22%}.nodes i:nth-child(2){right:18%;top:25%}.nodes i:nth-child(3){left:20%;bottom:24%}.nodes i:nth-child(4){right:20%;bottom:22%}
.network-lines{position:absolute;width:62%;height:55%;border:1px dashed #555a65;border-radius:45%;transform:rotate(12deg)}
.gallery-item{position:relative}