:root{
  --bg:#0b1220;
  --card:#0f1724;
  --muted:#9aa6b2;
  --accent:#06b6d4;
  --accent2:#6366f1;
  --glass: rgba(255,255,255,0.03);
  --radius:12px;
  --maxw:1100px;
  --gap:20px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,"Helvetica Neue",Arial; background:linear-gradient(180deg,var(--bg),#07101a); color:#e6eef6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.45;}
.container{max-width:var(--maxw);margin:0 auto;padding:28px;}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:8px 0;}
.brand{display:flex;align-items:center;gap:12px;color:var(--accent);text-decoration:none;font-weight:700}
.brand .logo{width:44px;height:44px;color:var(--accent2)}
.brand-text{font-size:1.1rem;color:inherit}
.nav{position:relative}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
.nav-list li a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav-list li a:hover,.nav-list li a.active{color:#fff;background:var(--glass)}

.nav-toggle{display:none;background:transparent;border:0;color:var(--muted);font-size:20px;padding:6px}

.site-header{backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,0.03);position:sticky;top:0;background:linear-gradient(180deg, rgba(8,12,18,0.6), rgba(8,12,18,0.5));z-index:40}

.hero{padding:56px 0}
.hero-inner{display:flex;gap:28px;align-items:center;justify-content:space-between}
.hero-copy{flex:1;min-width:280px}
.hero h1{font-size:clamp(1.6rem,3.4vw,2.6rem);margin:0 0 12px;color:linear-gradient(90deg,var(--accent),var(--accent2))}
.lead{color:var(--muted);font-size:1rem;margin-bottom:18px}
.hero-ctas{display:flex;gap:12px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;border:1px solid transparent}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#041124;box-shadow:0 8px 24px rgba(3,7,18,0.6)}
.btn.outline{background:transparent;color:var(--accent);border:1px solid rgba(100,240,255,0.08)}
.btn.ghost{background:transparent;color:var(--muted)}

.hero-visual{flex:1;display:flex;align-items:center;justify-content:center}
.hero-graphic{width:100%;max-width:420px;height:auto;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.6)}

.why{padding:28px 0}
.grid{display:grid;gap:var(--gap)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);min-height:120px}
.card-icon{font-size:22px;background:rgba(255,255,255,0.02);width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}

.service-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.service-card .icon{font-size:26px;margin-bottom:8px}

.section{padding:36px 0}

.bullets{list-style:none;padding:0;margin:0 0 20px 0}
.bullets li{padding:6px 0;color:var(--muted)}

.cta{padding:36px 0;text-align:center}
.cta-inner{background:linear-gradient(90deg, rgba(6,182,212,0.08), rgba(99,102,241,0.06));padding:24px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}

.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:28px 0;margin-top:36px;background:transparent}
.footer-grid{display:flex;gap:20px;align-items:flex-start;justify-content:space-between}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin:6px 0}

.form-row{margin-bottom:14px;display:flex;flex-direction:column}
input,textarea{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:10px;border-radius:8px;color:var(--muted)}
input:focus,textarea:focus{outline:2px solid rgba(6,182,212,0.12)}

.privacy-note{color:var(--muted);font-size:0.9rem;margin-top:8px}

/* Responsive */
@media (max-width: 980px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .hero-inner{flex-direction:column-reverse;align-items:flex-start}
  .hero-visual{width:100%}
  .nav-list{display:none;position:absolute;right:0;top:56px;background:#07121a;padding:12px;border-radius:10px;flex-direction:column;min-width:180px}
  .nav-toggle{display:block}
  .footer-grid{flex-direction:column;gap:12px}
}
@media (max-width:600px){
  .grid-4{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .container{padding:18px}
  .hero h1{font-size:1.4rem}
  .btn.primary.large{width:100%}
}