@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');
:root{
  --bg:#0b0f14; --surface:#0e141c; --text:#e8f1f8; --muted:#9ab0bf;
  --primary:#6ad4ff; --accent:#7df9b6; --line:rgba(255,255,255,.08);
  --radius:22px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;overflow-x:hidden;background:radial-gradient(1200px 800px at 10% 10%, #0f1520 0%, #0b0f14 60%),radial-gradient(900px 700px at 90% 10%, #0c2230 0%, #0b0f14 60%),radial-gradient(900px 700px at 50% 120%, #0a1a26 0%, #0b0f14 60%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.04;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.8"/></svg>');mix-blend-mode:overlay}

.container{max-width:1200px;margin:0 auto;padding:0 20px}
section{padding:88px 0;scroll-margin-top:84px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}

header.top{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(8px);background:linear-gradient(180deg, rgba(15,21,32,.75), rgba(15,21,32,.2));border-bottom:1px solid var(--line)}
nav{height:72px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:12px;align-items:center;font-weight:800;letter-spacing:.3px}
.logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 10px 20px rgba(106,212,255,.2)}

.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--primary),var(--accent));z-index:60;box-shadow:0 0 20px rgba(106,212,255,.6)}

.hero{padding:120px 0 56px;position:relative;overflow:hidden}
.hero h1{font-size:clamp(36px, 6vw, 72px);line-height:1.08;margin:0 0 16px}
.hero p{font-size:clamp(16px, 2.2vw, 20px);color:var(--muted);margin:0 0 16px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.btn{padding:12px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg, rgba(106,212,255,.15), rgba(125,249,182,.15));color:var(--text);font-weight:600;text-decoration:none}
.btn.ghost{background:transparent}
.hero .scroll-cue{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;opacity:.8}
.caret{width:12px;height:12px;border-left:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);animation:bounce 1.6s infinite ease-in-out}
@keyframes bounce{0%,100%{transform:translate(-2px,0) rotate(-45deg)}50%{transform:translate(-2px,6px) rotate(-45deg)}}

.grid{display:grid;gap:22px}
.split{grid-template-columns:1.2fr .8fr}
@media (max-width:1024px){.split{grid-template-columns:1fr !important}}

.hero-visual{min-height:320px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:26px;text-align:center}
.hero-eyebrow{font-size:14px;color:var(--muted);margin-bottom:10px}
.hero-headline{font-size:56px;font-weight:800;letter-spacing:.5px;line-height:1.08;margin:0}
.parallax{position:absolute;right:-80px;top:-80px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(106,212,255,.45), rgba(125,249,182,.25) 40%, transparent 60%);
  filter:blur(30px);transform:translate3d(0,0,0);will-change:transform;pointer-events:none}

.feature-mobile{display:none}
.hide-mobile{display:block}
.show-mobile{display:none}

@media (max-width:900px){
  .hero{padding:96px 0 24px}
  .container{padding:0 16px}
  nav{height:64px}
  section{padding:72px 0}
  .hero-headline{font-size:36px}
  .parallax{right:-120px;top:-100px;width:520px;height:520px;filter:blur(40px)}
  .cta .btn{flex:1;text-align:center}
  .hide-mobile{display:none}
  .show-mobile{display:block}
  .feature-mobile{display:block;padding:24px 0}
  .feature-mobile .card{padding:24px}
}

.services{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.service{grid-column:span 6;padding:26px;min-height:160px;display:flex;flex-direction:column;gap:10px}
.service h3{margin:0}
.service p{margin:0;color:var(--muted)}
@media (max-width:900px){
  .services{gap:14px}
  .service{grid-column:1 / -1;padding:18px}
}

.list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.list{grid-template-columns:1fr;gap:14px}}
.item{padding:24px}
.item h4{margin:0 0 8px}
.item p{margin:0;color:var(--muted)}

footer{padding:44px 0;border-top:1px solid var(--line);color:var(--muted)}

.reveal{opacity:0;transform:translateY(18px) scale(.98);transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1;transform:none}

.contact-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid var(--line);backdrop-filter:blur(6px);cursor:pointer;z-index:80;box-shadow:var(--shadow)}
.contact-fab img{width:56px;height:56px;display:block}
.contact-fab:hover{transform:translateY(-2px)}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:90;padding:20px}
.modal.show{display:flex}
.modal .panel{width:min(560px,100%);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.modal .panel h3{margin:0 0 10px}
.form{display:grid;gap:10px;margin-top:8px}
.input, .textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text)}
.textarea{min-height:120px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form .actions{display:flex;gap:10px;justify-content:flex-end}
.badge{font-size:12px;opacity:.9}
.success{color:#7df9b6}.error{color:#ff9b9b}

@media (max-width:768px){
  .modal .panel{border-radius:16px;padding:16px;max-height:80vh;overflow:auto}
  .row{grid-template-columns:1fr}
  .contact-fab{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:64px;height:64px}
  .contact-fab img{width:48px;height:48px}
}