:root{
  --bg:#07111f;
  --bg-2:#0a1830;
  --text:#eef6ff;
  --text-dark:#101829;
  --muted:#afc0d2;
  --muted-dark:#5d6b7a;
  --primary:#18c0f0;
  --primary-2:#6de4ff;
  --shadow:0 20px 60px rgba(2,12,29,.35);
  --shadow-soft:0 18px 40px rgba(15,23,42,.08);
  --container: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(24,192,240,.14), transparent 22%),
    radial-gradient(circle at bottom right, rgba(109,228,255,.10), transparent 20%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 34%,#f4f8fc 34%,#f4f8fc 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:inherit}
.container{width:min(calc(100% - 32px),var(--container));margin:0 auto}

.bg-grid{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 80%);
}
.bg-glow{
  position:fixed;z-index:-2;border-radius:999px;filter:blur(90px);opacity:.4;pointer-events:none;
}
.glow-1{width:340px;height:340px;right:8%;top:60px;background:#15c8f3}
.glow-2{width:250px;height:250px;left:4%;top:300px;background:#355fff}

.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(7,17,31,.72);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-inner{
  min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand strong{display:block}
.brand small{color:var(--muted)}
.brand-mark{
  width:50px;height:50px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,#13c5f1,#205eff);
  color:#fff;font-weight:900;box-shadow:var(--shadow);
}
.nav{display:flex;gap:24px;color:#d5e5f2}
.nav a:hover{color:#fff}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;font-weight:800;border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:12px 18px;font-size:.94rem}
.btn-lg{padding:16px 26px}
.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#052331;
  box-shadow:0 14px 34px rgba(24,192,240,.28);
}
.btn-secondary{
  color:#fff;background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
}

.hero{padding:80px 0 46px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.eyebrow{
  display:inline-block;margin-bottom:14px;font-size:.82rem;letter-spacing:.18em;font-weight:900;color:#6ce1ff;
}
.eyebrow.dark{color:#108db5}
.hero h1{
  margin:0 0 16px;max-width:760px;
  font-size:clamp(2.6rem,4.2vw,4.4rem);
  line-height:.95;letter-spacing:-.05em;
  text-shadow:0 10px 40px rgba(0,0,0,.4);
}
.hero-text{
  max-width:660px;color:var(--muted);
  font-size:1.08rem;line-height:1.75;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 24px}
.hero-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hero-points div{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;padding:18px;
}
.hero-points strong{display:block;margin-bottom:6px;color:#fff}
.hero-points span{color:#c7d8e7;font-size:.93rem}

.hero-visual{position:relative}
.visual-shell{
  position:relative;border-radius:34px;padding:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.09);box-shadow:var(--shadow);
}
.visual-shell img{border-radius:24px;width:100%}
.floating-note{
  position:absolute;z-index:3;padding:14px 16px;border-radius:18px;
  background:rgba(10,22,36,.88);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.24);
}
.floating-note strong{display:block;margin-bottom:4px}
.floating-note span{font-size:.9rem;color:#c9d8e7}
.note-1{left:-10px;top:28px}
.note-2{right:-10px;bottom:28px}

.bar-proof{padding:18px 0 34px}
.bar-proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.proof-chip{
  text-align:center;padding:16px 18px;border-radius:20px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
  font-weight:800;color:#e5f2fb;
}

.section{padding:94px 0;color:var(--text-dark)}
.section-soft{background:linear-gradient(180deg,#edf5fb,#f8fbfe)}
.section-head{max-width:860px;margin:0 auto 42px;text-align:center}
.section h2,.cta-box h2{
  margin:0 0 14px;font-size:clamp(2rem,3.8vw,3.35rem);
  line-height:1.06;letter-spacing:-.035em;
}
.section-head p,.feature-card p,.timeline-item p,.benefit-box p,.cta-box p{color:var(--muted-dark);line-height:1.72}

.cards-grid,.benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature-card,.benefit-box{
  background:#fff;border-radius:28px;padding:28px;
  border:1px solid rgba(15,23,42,.06);box-shadow:var(--shadow-soft);
}
.icon-chip{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,#def8ff,#d6e7ff);
  color:#0d6b95;font-weight:900;margin-bottom:16px;
}
.feature-card h3,.benefit-box h3{margin:0 0 10px;font-size:1.16rem;color:#132132}

.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.timeline{display:grid;gap:18px;margin-top:28px}
.timeline-item{
  background:#fff;border-radius:20px;padding:18px 20px;
  border-left:5px solid #11b7e4;box-shadow:0 14px 32px rgba(15,23,42,.06);
}
.timeline-item strong{display:block;margin-bottom:6px;color:#142234}
.media-stack{position:relative;min-height:500px}
.media-card{
  width:100%;border-radius:28px;border:1px solid rgba(15,23,42,.06);
  box-shadow:0 24px 60px rgba(15,23,42,.14);
}
.small-float{position:absolute;max-width:280px;right:-8px;bottom:-18px}

.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px}
.gallery-grid img{
  border-radius:24px;box-shadow:0 18px 44px rgba(15,23,42,.1);
}

.cta-section{
  padding-top:48px;padding-bottom:86px;
  background:linear-gradient(180deg,#f4f8fc,#eaf4fb);
}
.cta-box{
  background:linear-gradient(135deg,#071523,#12365c 58%,#0a7eab);
  color:#fff;border-radius:34px;padding:42px;
  display:grid;grid-template-columns:1.3fr .9fr;gap:24px;align-items:center;
  box-shadow:0 26px 80px rgba(3,20,39,.24);
}
.cta-box p{color:#d1e2ef}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}

.whatsapp-float{
  position:fixed;right:22px;bottom:22px;z-index:60;
  padding:14px 18px;border-radius:999px;
  background:linear-gradient(135deg,#25d366,#54e38e);
  color:#062914;font-weight:900;box-shadow:0 18px 40px rgba(0,0,0,.24);
}

.pulse{animation:pulse 2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(24,192,240,.5)}
  70%{box-shadow:0 0 0 15px rgba(24,192,240,0)}
  100%{box-shadow:0 0 0 0 rgba(24,192,240,0)}
}

@media (max-width:1100px){
  .hero-grid,.split,.cta-box{grid-template-columns:1fr}
  .hero-points,.cards-grid,.benefits-grid,.bar-proof-grid,.gallery-grid{grid-template-columns:1fr 1fr}
  .cta-actions{justify-content:flex-start}
}
@media (max-width:760px){
  .nav{display:none}
  .hero{padding-top:42px}
  .hero h1{font-size:2.55rem}
  .hero-points,.cards-grid,.benefits-grid,.bar-proof-grid,.gallery-grid{grid-template-columns:1fr}
  .small-float{position:static;max-width:100%;margin-top:16px}
  .media-stack{min-height:auto}
  .cta-box{padding:28px}
  .note-1,.note-2{position:static;margin:0 0 12px}
  .whatsapp-float{right:14px;bottom:14px}
}