:root{
  --bg:#0b0f1a;
  --bg-soft:#0f1526;
  --card:#10182b;
  --text:#e6ecff;
  --muted:#a6b1d6;
  --brand:#6c8cff;
  --brand-2:#22d3ee;
  --accent:#a78bfa;
  --ok:#34d399;
  --warn:#f59e0b;
  --danger:#ef4444;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
  background:radial-gradient(1200px 600px at 10% -10%, rgba(108,140,255,.12), transparent 60%),
             radial-gradient(1200px 600px at 110% 10%, rgba(34,211,238,.10), transparent 60%),
             var(--bg);
  color:var(--text);
  line-height:1.6;
}

.container{width:min(1120px, 92%); margin:0 auto}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(10px);
  background:linear-gradient(180deg, rgba(11,15,26,.85), rgba(11,15,26,.65));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-container{display:flex; align-items:center; justify-content:space-between; padding:12px 0; min-height:64px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-mark{display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:var(--shadow)}
.brand-text{font-size:18px}
.brand-logo{display:block; height:36px; max-height:40px; width:auto; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}

.site-nav{position:relative}
.nav-toggle{display:none; width:44px; height:44px; background:transparent; border:0; cursor:pointer}
.nav-toggle .bar{display:block; width:22px; height:2px; background:var(--text); margin:5px auto; transition:.25s}
.nav-list{display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0}
.nav-list a{color:var(--muted); text-decoration:none; font-weight:500}
.nav-list a:hover{color:var(--text)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; text-decoration:none; border:1px solid transparent; border-radius:12px; padding:12px 18px; transition:.25s}
.btn-sm{padding:8px 12px; border-radius:10px}
.btn-primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b0f1a; box-shadow:0 10px 25px rgba(108,140,255,.25)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent; color:var(--text); border-color:rgba(255,255,255,.12)}
.btn-ghost:hover{border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.03)}

/* Hero */
.section{padding:80px 0}
.hero{position:relative; overflow:hidden; padding:120px 0 80px}
.decor-bg .orb{position:absolute; border-radius:50%; filter:blur(60px); opacity:.35}
.orb-a{width:420px; height:420px; background:var(--brand); top:-120px; left:-120px}
.orb-b{width:520px; height:520px; background:var(--brand-2); bottom:-180px; right:-160px}
.decor-bg .grid{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size:80px 80px; mask-image:radial-gradient(60% 60% at 50% 40%, black, transparent)}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center}
.hero h1{font-size:clamp(32px, 5vw, 48px); line-height:1.15; margin:0 0 16px}
.lead{font-size:18px; color:var(--muted); margin:0 0 24px}
.cta-group{display:flex; gap:14px; flex-wrap:wrap}
.trust{display:flex; align-items:center; gap:10px; color:var(--muted); margin-top:18px}
.trust .dot{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 6px rgba(52,211,153,.1)}

.card-3d{position:relative; height:360px; border-radius:24px; background:radial-gradient(120% 120% at 20% 0%, rgba(108,140,255,.25), rgba(16,24,43,.7)), #0c1222; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow); overflow:hidden}
.card-3d .chip{position:absolute; top:16px; right:16px; padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.08); backdrop-filter:blur(6px); font-weight:700; letter-spacing:.08em}
.card-3d .rings::before, .card-3d .rings::after{content:""; position:absolute; inset:-40px; border-radius:60%; border:1px dashed rgba(255,255,255,.08)}
.card-3d .rings::after{transform:scale(1.25)}
.card-3d .mesh{position:absolute; inset:0; background:radial-gradient(circle at 60% 40%, rgba(167,139,250,.25), transparent 50%), radial-gradient(circle at 30% 70%, rgba(34,211,238,.25), transparent 45%)}

/* Sections shared */
.section-head{margin:0 0 28px}
.section-head h2{margin:0 0 8px; font-size:28px}
.section-sub{margin:0; color:var(--muted)}

/* About */
.about-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.about-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.about-card h3{margin:0 0 8px}
.values{margin:0; padding-left:18px; color:var(--muted)}

/* Products */
.product-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:16px}
.product-card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; transition:transform .2s ease, border-color .2s ease; box-shadow:var(--shadow)}
.product-card:hover{transform:translateY(-4px); border-color:rgba(108,140,255,.35)}
.product-card .icon{font-size:22px; margin-bottom:8px}

/* Audience */
.sectors{display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; list-style:none; margin:0; padding:0}
.sectors li{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px; text-align:center}

/* Cases */
.metrics{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin:8px 0 22px}
.metric{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; text-align:center}
.metric .num{font-size:34px; font-weight:800; background:linear-gradient(135deg, var(--brand), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.metric .label{color:var(--muted)}
.case-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.case-card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px}
.case-card .quote{display:block; margin-top:10px; color:var(--muted)}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
.form{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px}
.form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.form-row label{color:var(--muted)}
.form-row input,.form-row textarea{width:100%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.02); color:var(--text); border-radius:12px; padding:12px 14px; outline:none}
.form-row input:focus,.form-row textarea:focus{border-color:rgba(108,140,255,.55); box-shadow:0 0 0 4px rgba(108,140,255,.12)}
.form-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.form-feedback{margin-top:10px; min-height:22px; color:var(--muted)}
.contact-channels .card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px}
.contact-channels ul{margin:10px 0 0; padding-left:18px}
.contact-channels a{color:var(--text)}
.contact-channels .hint{color:var(--muted); margin-top:8px}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.08); padding:18px 0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.04))}
.site-footer .container{display:flex; align-items:center; justify-content:space-between; gap:12px}
.to-top{color:var(--text); text-decoration:none; border:1px solid rgba(255,255,255,.14); padding:8px 10px; border-radius:10px}

/* Reveal animations */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}
.delay-1{transition-delay:.15s}
.delay-2{transition-delay:.3s}

/* Responsive */
@media (max-width: 1024px){
  .hero-inner{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .sectors{grid-template-columns:repeat(3, 1fr)}
  .product-grid{grid-template-columns:repeat(3, 1fr)}
  .about-grid{grid-template-columns:1fr 1fr}
  .case-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav-toggle{display:block}
  .nav-list{position:absolute; right:0; top:54px; background:rgba(16,24,43,.98); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px; width:240px; flex-direction:column; align-items:flex-start; gap:10px; box-shadow:var(--shadow); display:none}
  .nav-list.open{display:flex}
  .sectors{grid-template-columns:1fr 1fr}
  .product-grid{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr}
  .case-grid{grid-template-columns:1fr}
  .hero{padding-top:100px}
}