:root{
  --bg:#071122;
  --bg-soft:#0c1830;
  --panel:#0f1d38;
  --panel-2:#122446;
  --text:#ecf2ff;
  --muted:#b7c3df;
  --line:rgba(255,255,255,.08);
  --brand:#4d72ff;
  --brand-2:#20b7ff;
  --success:#22c55e;
  --shadow:0 18px 50px rgba(0,0,0,.28);
  --radius:18px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(77,114,255,.16), transparent 25%),
    radial-gradient(circle at top right, rgba(32,183,255,.10), transparent 18%),
    linear-gradient(180deg, #081224 0%, #09111d 100%);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--max), calc(100% - 32px)); margin:0 auto}
.topbar{
  position:sticky; top:0; z-index:40;
  backdrop-filter: blur(12px);
  background:rgba(7,17,34,.82);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:78px;
}
.brand{
  display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:.03em;
}
.brand img{width:54px; height:54px; object-fit:contain}
.brand span{font-size:1.08rem}
.nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.nav li{position:relative}
.nav > ul > li > a, .nav > ul > li > span{
  display:inline-flex; align-items:center;
  padding:12px 14px; border-radius:12px; color:#dfe8ff; font-size:.95rem; font-weight:600;
}
.nav > ul > li:hover > a,
.nav > ul > li:hover > span{background:rgba(255,255,255,.05)}
.submenu{
  position:absolute; left:0; top:100%; min-width:270px;
  background:#0d1931; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:8px; display:none;
}
li:hover > .submenu{display:block}
.submenu a{
  display:block; padding:11px 12px; border-radius:10px; color:var(--muted);
}
.submenu a:hover{background:rgba(255,255,255,.05); color:var(--text)}
.mobile-toggle{display:none; background:none; border:1px solid var(--line); color:var(--text); border-radius:12px; padding:10px 12px}

.hero{
  padding:72px 0 42px;
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:center;
}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.85rem; color:#c8d4fb; padding:8px 12px;
  border:1px solid rgba(77,114,255,.28); background:rgba(77,114,255,.12); border-radius:999px;
}
h1,h2,h3,h4{line-height:1.15; margin:0 0 14px}
h1{font-size:clamp(2.2rem,5vw,4rem)}
h2{font-size:clamp(1.7rem,3vw,2.6rem)}
h3{font-size:1.32rem}
.lead{
  color:var(--muted); font-size:1.08rem; max-width:740px;
}
.actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 18px; border-radius:14px; font-weight:700;
  border:1px solid transparent; transition:.2s ease;
}
.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 12px 30px rgba(77,114,255,.28);
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-secondary{
  border-color:var(--line); color:var(--text); background:rgba(255,255,255,.03)
}
.hero-card, .panel{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
}
.hero-card{overflow:hidden}
.hero-card img{width:100%; height:100%; min-height:420px; object-fit:cover}
.metrics{
  margin-top:22px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.metric{
  padding:16px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid var(--line)
}
.metric small{display:block; color:#afbddf}
.metric strong{display:block; font-size:1.25rem; margin-top:6px}
.section{padding:28px 0 68px}
.section-header{
  display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:24px;
}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
.service-card{
  overflow:hidden; border-radius:20px; border:1px solid var(--line);
  background:#0d1931; box-shadow:var(--shadow);
}
.service-card img{width:100%; aspect-ratio: 1 / .74; object-fit:cover}
.service-content{padding:18px}
.service-content p{margin:0; color:var(--muted)}
.service-content h3{font-size:1.15rem; min-height:2.3em}
.eyebrow{color:#9cb2f3; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px}
.feature{
  display:grid; grid-template-columns:74px 1fr; gap:18px; padding:22px;
}
.icon{
  width:74px; height:74px; border-radius:18px;
  background:linear-gradient(135deg, rgba(77,114,255,.25), rgba(32,183,255,.18));
  border:1px solid rgba(77,114,255,.18);
  display:grid; place-items:center; font-size:2rem;
}
.page-hero{
  padding:54px 0 28px;
}
.page-banner{
  overflow:hidden; border-radius:28px; border:1px solid var(--line); box-shadow:var(--shadow);
  margin-bottom:24px;
}
.page-banner img{width:100%; height:clamp(230px,38vw,420px); object-fit:cover}
.page-layout{display:grid; grid-template-columns: 1fr 320px; gap:24px}
.content-box{
  padding:32px; border-radius:24px; background:#0d1931; border:1px solid var(--line); box-shadow:var(--shadow)
}
.content-box p{margin:0 0 16px; color:var(--muted)}
.side-box{
  padding:22px; border-radius:24px; background:#0d1931; border:1px solid var(--line); box-shadow:var(--shadow); position:sticky; top:96px; height:max-content;
}
.side-box ul{margin:0; padding-left:18px; color:var(--muted)}
.side-box li + li{margin-top:10px}
.cards-stack{display:grid; gap:16px}
.price-card{
  padding:22px; border-radius:22px; background:#0d1931; border:1px solid var(--line); box-shadow:var(--shadow)
}
.price{
  font-size:1.8rem; font-weight:800; margin:10px 0 6px;
}
.muted{color:var(--muted)}
.price-card ul{margin:14px 0 0; padding-left:18px; color:var(--muted)}
.price-card li + li{margin-top:8px}
.cta{
  margin-top:26px; padding:26px; border-radius:24px;
  background:linear-gradient(135deg, rgba(77,114,255,.22), rgba(32,183,255,.14));
  border:1px solid rgba(77,114,255,.18);
}
.footer{
  padding:28px 0 54px; color:#bac7e4;
}
.footer .panel{
  padding:22px;
}
.whatsapp-float{
  position:fixed; right:18px; bottom:18px; z-index:30;
  display:flex; align-items:center; gap:10px;
  background:#22c55e; color:#fff; padding:14px 16px; border-radius:999px; box-shadow:var(--shadow); font-weight:800;
}
.small{font-size:.92rem}
.note{font-size:.9rem;color:#9fb0d7}
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:#d7e2ff; font-size:.84rem;
}
@media (max-width: 1080px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .page-layout{grid-template-columns:1fr}
  .side-box{position:static}
}
@media (max-width: 860px){
  .mobile-toggle{display:inline-flex}
  .nav{padding:12px 0}
  .nav-menu{
    display:none!important; position:absolute; left:16px; right:16px; top:78px;
    flex-direction:column; align-items:stretch; gap:6px; padding:12px;
    background:#09152b; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow)
  }
  .nav-menu.open{display:flex!important}
  .nav ul{flex-direction:column; align-items:stretch}
  .nav > ul > li > a, .nav > ul > li > span{width:100%}
  .submenu{
    position:static; display:block; min-width:unset; box-shadow:none;
    margin:4px 0 0 12px; background:transparent; border:none; padding:0
  }
  .hero-grid, .grid-3, .grid-2{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .grid-4{grid-template-columns:1fr}
  .feature{grid-template-columns:1fr}
  .content-box{padding:24px}
  .whatsapp-float span{display:none}
}
/* Incremental SEO/content patch */
.footer a{color:#dce7ff;text-decoration:underline;text-underline-offset:3px}
.price-card h4{margin:0 0 8px;font-size:1rem;line-height:1.2}
.cta .grid-3{align-items:stretch}
.cta .price-card{height:100%}
.side-box a{color:#dbe5ff}
.side-box a:hover{text-decoration:underline;text-underline-offset:3px}