:root{
  --bg:#081122;
  --bg-alt:#0a1530;
  --text:#e7eef7;
  --muted:#b0c2d9;
  --brand:#4aa8ff;
  --brand-2:#1b4cd8;
  --card:#0d1a36;
  --stroke:#1a2433;
  --accent:#1d2a3b;
  --ok:#2ecc71;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#07101b 0%, #0a1420 60%, #0b1726 100%);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1120px, calc(100% - 2rem)); margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;background:#fff;color:#000;padding:.5rem 1rem;border-radius:.5rem}
/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(11,15,20,.7);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--stroke);
}
.header-wrap{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.brand{display:flex; gap:.75rem; align-items:center; color:var(--text); text-decoration:none}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-text strong{font-weight:800; letter-spacing:.2px}
.brand-text em{font-style:normal; font-size:.9rem; color:var(--muted)}
.nav-toggle{display:none; font-size:1.25rem; background:transparent; border:1px solid var(--stroke); color:var(--text); padding:.25rem .5rem; border-radius:.4rem}
.menu{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.menu a{padding:.4rem .7rem; border-radius:.5rem}
.menu a:hover{background:var(--accent); text-decoration:none}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.1rem; border-radius:.75rem; background:linear-gradient(180deg, var(--brand), #005ee6); color:white; font-weight:700; border:0; box-shadow:0 8px 24px rgba(10,124,255,.25)}
.btn:hover{filter:brightness(1.05); text-decoration:none}
.btn-outline{background:transparent; color:var(--text); border:1px solid var(--stroke)}
.btn-small{padding:.5rem .7rem; font-weight:600}
.lead{font-size:1.125rem; color:var(--muted)}
/* Hero */
.hero{padding:4.5rem 0 3rem; background:radial-gradient(1200px 600px at 80% -10%, rgba(10,124,255,.25), transparent), radial-gradient(900px 400px at 10% 10%, rgba(138,182,255,.16), transparent)}
.hero-wrap{display:grid; grid-template-columns: 1.15fr .85fr; gap:2rem; align-items:center}
.hero h1{font-size:clamp(2rem, 2.6vw + 1.6rem, 3.2rem); line-height:1.1; margin:.25rem 0 .75rem}
.grad{background:linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 60%, #c8e1ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.cta{display:flex; gap:1rem; margin:1rem 0 1.25rem}
.trust{display:flex; flex-wrap:wrap; gap:1rem; color:var(--muted); padding:0; margin:0; list-style: "✓ "}
.trust li{padding-left:.25rem}
.hero-card{
  background:linear-gradient(180deg, #0f1826, #0c1420);
  border:1px solid var(--stroke);
  border-radius:1rem; padding:1.25rem; box-shadow:0 12px 30px rgba(0,0,0,.25)
}
.hero-card h3{margin-top:.25rem}
.hero-card ul{margin:.5rem 0 1rem; padding-left:1.1rem}
.hero-badge{display:inline-block; font-weight:700; font-size:.8rem; color:#b7d7ff; border:1px solid var(--stroke); padding:.25rem .5rem; border-radius:999px}
.mini-cta{display:inline-flex; align-items:center; gap:.5rem}
/* Sections */
.section{padding:3.5rem 0}
.section.alt{background:linear-gradient(180deg, #0a121d, #0b1420)}
.section-head{margin-bottom:1.5rem}
.section-head h2{font-size:1.75rem; margin:0 0 .5rem}
/* Services grid */
.grid.services{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1rem}
.card{background:var(--card); border:1px solid var(--stroke); border-radius:.9rem; padding:1.1rem; transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-3px); border-color:#26405f; box-shadow:0 10px 24px rgba(10,124,255,.12)}
.card .icon{font-size:1.45rem; line-height:1; width:2.1rem; height:2.1rem; display:grid; place-items:center; background:#0f1b2b; border:1px solid #1a2a40; border-radius:.6rem; margin-bottom:.7rem}
/* CTA band */
.cta-band{padding:2.4rem 0; background:linear-gradient(90deg, #0a7cff22, #0000)}
.cta-band-wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem}
/* About */
.about{display:grid; grid-template-columns:.9fr 1.1fr; gap:1.5rem; align-items:center}
.about-photo{min-height:220px; border-radius:1rem; background:
  radial-gradient(300px 100px at 20% 10%, rgba(10,124,255,.2), transparent),
  conic-gradient(from 230deg at 70% 40%, #0a7cff22, #0000),
  linear-gradient(180deg, #0e1a2a, #0b1522);
  border:1px solid var(--stroke);
}
.ticks{list-style:"✓ "; padding-left:1.2rem; margin:1rem 0 0}
/* Contact */
.contact-panels{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.panel{background:var(--card); border:1px solid var(--stroke); border-radius:.9rem; padding:1.1rem}
.contact-form{display:grid; gap:.75rem}
.contact-form input, .contact-form textarea{
  width:100%; padding:.8rem .9rem; border-radius:.6rem; border:1px solid var(--stroke);
  background:#0f1723; color:var(--text)
}
.contact-form button{width:fit-content}
.muted{color:var(--muted); font-size:.95rem}
/* Footer */
.site-footer{border-top:1px solid var(--stroke); padding:1rem 0; color:var(--muted)}
.foot-wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.foot-brand{display:flex; align-items:center; gap:.6rem; color:var(--text)}
/* Floating WhatsApp */
.floating-whatsapp{
  position:fixed; right:1rem; bottom:1rem; z-index:50;
  width:3rem; height:3rem; display:grid; place-items:center;
  background:linear-gradient(180deg, #128C7E, #0b6d62);
  border-radius:999px; color:white; font-size:1.3rem; border:0;
  box-shadow:0 8px 22px rgba(0,0,0,.35)
}
.floating-whatsapp:hover{filter:brightness(1.05); text-decoration:none}
/* Responsive */
@media (max-width: 960px){
  .hero-wrap{grid-template-columns:1fr; padding-top:.5rem}
  .grid.services{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:1fr}
  .cta-band-wrap{flex-direction:column; align-items:flex-start}
}
@media (max-width: 680px){
  .menu{display:none; position:absolute; right:1rem; top:3.25rem; flex-direction:column; background:#0b121d; border:1px solid var(--stroke); border-radius:.75rem; padding:.5rem}
  .nav-toggle{display:inline-block}
  .grid.services{grid-template-columns:1fr}
  .contact-panels{grid-template-columns:1fr}
}