:root {
  --bg: #050b13;
  --bg-soft: #0b1825;
  --text: #f2f8ff;
  --muted: #b9c8d8;
  --line: rgba(255,255,255,.15);
  --accent: #19C3A3;
  --accent2: #2382FF;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",system-ui,Arial,sans-serif;scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.skip{position:absolute;left:-9999px;top:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:#000;padding:10px;border-radius:8px}

.header{position:fixed;top:0;left:0;right:0;z-index:90;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(2,7,13,.9),rgba(2,7,13,.2),transparent);backdrop-filter:blur(7px)}
.logo{font-weight:800;letter-spacing:.4px;font-size:20px}
.logo span{background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.header-actions{display:flex;gap:10px;flex-wrap:wrap}
.pill{border:1px solid var(--line);padding:10px 14px;border-radius:999px;background:rgba(8,18,29,.7);font-size:14px;transition:.25s}
.pill:hover{border-color:var(--accent);transform:translateY(-1px)}

.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;padding:120px 20px 56px}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.06) contrast(1.04) brightness(.86)}
.hero-glow{position:absolute;inset:0;background:
 radial-gradient(70% 50% at 80% 12%,rgba(78,117,255,.35),transparent 65%),
 radial-gradient(64% 50% at 18% 82%,rgba(29,202,170,.28),transparent 60%),
 linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.72));}
.hero-inner{position:relative;z-index:2;max-width:1120px;margin:0 auto;width:100%}
.kicker{font-size:13px;letter-spacing:.7px;color:var(--accent);text-transform:uppercase;margin:0 0 12px}
h1{margin:0;font-size:clamp(36px,6.6vw,84px);line-height:1.03;max-width:900px;text-wrap:balance}
.hero p{margin:18px 0 0;color:#d8e8f7;font-size:clamp(18px,2.7vw,28px);max-width:780px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:13px 21px;font-weight:600;border:1px solid transparent;cursor:pointer}
.btn-main{background:linear-gradient(120deg,var(--accent),var(--accent2));color:#fff}
.btn-main:hover{filter:brightness(1.08)}
.btn-ghost{border-color:rgba(255,255,255,.32);background:rgba(6,15,24,.65)}

main section{padding:96px 20px}
.container{max-width:1120px;margin:0 auto}
h2{margin:0;font-size:clamp(30px,5.2vw,58px);line-height:1.08;text-wrap:balance}
.lead{margin-top:14px;color:var(--muted);max-width:840px;font-size:18px;line-height:1.6}
.grid2{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;margin-top:30px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
.card{border:1px solid var(--line);border-radius:22px;padding:20px;background:linear-gradient(180deg,rgba(12,25,40,.75),rgba(5,13,22,.85));box-shadow:0 10px 35px rgba(0,0,0,.25)}
.card h3{margin:0 0 10px;font-size:22px}
.card p{margin:0;color:#d2e1f0;line-height:1.55}

.process-video,.generic-video{width:100%;aspect-ratio:16/9;border-radius:16px;object-fit:cover;border:1px solid rgba(255,255,255,.2)}
.timeline{display:grid;gap:12px}
.timeline-item{padding:14px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(0,0,0,.24)}
.timeline-item strong{display:block;font-size:16px;margin-bottom:5px}

.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.metric{padding:14px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(2,7,12,.45)}
.metric .value{font-size:clamp(31px,4.4vw,52px);font-weight:800;line-height:1;margin-bottom:8px}
.metric span{color:#d0e1ef;font-size:14px}

.before-after{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.2);height:320px}
.before-after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.before-after .after{clip-path:inset(0 calc(100% - var(--slice,50%)) 0 0)}
.range{margin-top:10px}
.range input{width:100%}

.faq{display:grid;gap:10px;margin-top:16px}
.faq-item{padding:13px;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:rgba(0,0,0,.18)}
.faq-item h4{margin:0 0 8px;font-size:18px}
.faq-item p{margin:0;color:#d4e4f3;line-height:1.5}

.panorama{position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(255,255,255,.2);height:230px;cursor:grab}
.panorama-track{position:absolute;inset:0;width:220%;height:100%;background-size:cover;background-position:left center;transform:translateX(0)}
.panorama-note{position:absolute;left:10px;bottom:10px;font-size:12px;background:rgba(0,0,0,.58);padding:6px 9px;border-radius:999px}

.scenes{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.scene{border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.25);color:#fff;padding:7px 11px;cursor:pointer}
.scene:hover{border-color:var(--accent)}

.order{background:linear-gradient(180deg,#0b1520,#07111b)}
.order-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
form{display:grid;gap:10px}
label{font-size:14px;color:#d4e3f2}
input,select,textarea{width:100%;margin-top:6px;padding:11px 12px;border-radius:11px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.28);color:#fff}
textarea{min-height:92px;resize:vertical}
.form-status{min-height:24px;color:#88ffd4}

.float-contacts{position:fixed;right:14px;bottom:14px;z-index:95;display:grid;gap:8px;max-width:300px}
.float-contacts a{padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.68);font-size:13px;text-align:center}
.float-contacts a:hover{border-color:var(--accent)}

footer{padding:28px 20px 80px;border-top:1px solid rgba(255,255,255,.12);color:#b5c9dc}
.footer{max-width:1120px;margin:0 auto;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.on{opacity:1;transform:translateY(0)}

@media (max-width:980px){
  .grid2,.grid3,.metrics,.order-grid{grid-template-columns:1fr}
  .hero{padding-top:115px}
  .float-contacts{left:12px;right:12px;max-width:none}
}