
:root{
  --bg:#0b1220;
  --ink:#0b1220;
  --ink-2:#334155;
  --muted:#64748b;
  --brand:#2563eb;
  --brand-2:#0ea5e9;
  --card:#ffffff;
  --shade:#f1f5f9;
  --rad:18px;
  --shadow:0 10px 30px rgba(2,6,23,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto; color:var(--ink); background:#fff;}
a{color:var(--brand); text-decoration:none}
.container{width:min(1180px, 92%); margin:0 auto}
.muted{color:var(--muted)}
.btn{display:inline-block;background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;padding:.8rem 1.2rem;border-radius:12px;box-shadow:var(--shadow);transition:.2s all ease;border:none;cursor:pointer}
.btn.ghost{background:#eaf2ff;color:var(--brand)}
.btn.sm{padding:.5rem .8rem;border-radius:10px}
.btn.lg{padding:.9rem 1.3rem;font-weight:600}
.btn.xl{padding:1rem 1.4rem;font-size:1.05rem}
.btn:hover{transform:translateY(-1px)}
.nav{position:sticky;top:0;background:#ffffffd9;backdrop-filter: blur(8px);z-index:20;border-bottom:1px solid #eef2f7}
.nav .container{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.nav-left{display:flex;align-items:center;gap:.8rem}
.logo{width:38px;height:38px}
.logo.small{width:26px;height:26px}
.brand{display:flex;flex-direction:column;line-height:1}
.nav-links{display:flex;align-items:center;gap:1rem}
.lang{padding:.4rem .6rem;border-radius:10px;border:1px solid #e5e7eb;background:#fff}
.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 400px at 20% 0%, #e6f1ff 0%, #fff 60%);}
.hero .container{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; padding:4.2rem 0 3.2rem}
.hero-copy h1{font-size: clamp(1.9rem, 2.2vw + 1.1rem, 3rem); margin:.2rem 0 1rem;font-weight:800}
.lead{font-size:1.05rem;color:var(--ink-2);max-width:52ch}
.hero-badges{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.hero-badges span{background:#fff;border:1px solid #e6ecf3;padding:.4rem .6rem;border-radius:999px;font-size:.85rem;color:#334}
.hero-visual{position:relative;min-height:380px}
.phone{width:320px;height:620px;border-radius:30px;background:#0b2650;box-shadow:0 40px 90px rgba(15,35,75,.3), inset 0 0 0 8px #0d1b32; border:1px solid #0d1b32;margin:0 auto;position:relative}
.screen{position:absolute;left:14px;right:14px;top:14px;bottom:14px;background:linear-gradient(180deg,#0ea5e9,#1e3a8a);border-radius:22px}
.shimmer{background:linear-gradient(120deg,#0ea5e9 0%,#2563eb 60%,#1d4ed8 100%);animation:shine 6s linear infinite; background-size:300% 300%}
@keyframes shine{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.blob{position:absolute; right:-120px; top:-120px; width:420px; opacity:.5}
.grid-2{display:grid; grid-template-columns:1.1fr 0.9fr; gap:2rem; align-items:center}
.about{padding:3.4rem 0}
.card{background:var(--card);border-radius:var(--rad);box-shadow:var(--shadow);padding:1.2rem}
.kpis{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; text-align:center}
.kpis div{background:var(--shade);border-radius:14px;padding:1.2rem}
.kpis strong{font-size:1.6rem}
.ticks{list-style:none;padding:0;margin:1rem 0 0}
.ticks li{margin:.4rem 0;padding-left:1.4rem;position:relative}
.ticks li::before{content:"✓"; position:absolute; left:0; color:#10b981; font-weight:700}
.services{padding:3rem 0;background:linear-gradient(180deg,#fff,#f7fbff)}
.services h2{text-align:center;margin:0 0 1.2rem}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.svc{background:#fff;border:1px solid #edf2f6;border-radius:16px;padding:1rem;box-shadow:var(--shadow);transition:.2s}
.svc:hover{transform:translateY(-2px)}
.svc .ico{font-size:28px}
.regions{padding:3rem 0}
.chips{display:flex;gap:.6rem;flex-wrap:wrap}
.chips span{background:#eef5ff;border:1px solid #d9e7ff;padding:.45rem .65rem;border-radius:999px;font-size:.9rem}
.subs{padding:2.6rem 0;background:#f8fafc}
.subs-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.sub{background:#fff;border:1px solid #e7eef6;border-radius:14px;padding:1rem;text-align:center}
.sub .tag{display:inline-block;background:#ecfeff;border:1px solid #a5f3fc;color:#0e7490;padding:.2rem .5rem;border-radius:10px;font-size:.75rem;margin-bottom:.4rem}
.cta-band{background:linear-gradient(90deg,#0ea5e9,#2563eb);color:#fff;padding:2.2rem 0}
.cta-band .container{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.contact{padding:3rem 0}
.form label{font-size:.9rem;color:var(--muted);margin-top:.4rem;display:block}
.form input,.form textarea{width:100%;padding:.8rem;border-radius:12px;border:1px solid #e5eaf0;margin:.3rem 0 .6rem;outline:none}
.alert.success{margin-top:.8rem;padding:.8rem;border-radius:12px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.footer{background:#0b1220;color:#cbd5e1;padding:2rem 0 2.4rem}
.brandline{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr; gap:2rem}
.footlinks{list-style:none;margin:0;padding:0}
.footlinks li{margin:.35rem 0}
@media (max-width: 980px){
  .hero .container{grid-template-columns:1fr; padding:3rem 0 2rem}
  .grid-2{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .subs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-band .container{flex-direction:column;align-items:flex-start}
}
@media (max-width: 520px){
  .svc-grid{grid-template-columns:1fr}
}
