@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

:root{
  --bg-1:#283140;
  --bg-2:#1f2632;
  --accent:#16C284;
  --secondary:#CE7AFF;
  --secondary-hover:#b85ae6;
  --text:#ffffff;
  --text-muted:rgba(255,255,255,.75);
  --text-dim:rgba(255,255,255,.6);
  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg-2);
  color:var(--text);
  line-height:1.45;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
svg{display:block}

.container{
  max-width: 1152px; /* ~max-w-6xl */
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 640px){ .container{ padding:0 24px; } }
@media (min-width: 1024px){ .container{ padding:0 32px; } }

.header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  background:var(--bg-1);
  border-bottom:2px solid var(--accent);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  gap:16px;
}
.nav{
  display:none;
  gap:32px;
  align-items:center;
}
@media (min-width: 768px){ .nav{ display:flex; } }
.nav a{opacity:.7; transition:opacity .15s ease}
.nav a:hover{opacity:1}

.header-ctas{
  display:flex; gap:12px; align-items:center;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:10px;
  font-weight:600;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
  user-select:none;
}
.btn:active{ transform: translateY(1px); }

.btn-outline{
  border:2px solid var(--secondary);
  color:var(--secondary);
  background:transparent;
}
.btn-outline:hover{
  background:var(--secondary);
  color:var(--bg-1);
}
.btn-primary{
  background:var(--secondary);
  color:var(--bg-1);
}
.btn-primary:hover{ background:var(--secondary-hover); }

.hide-sm{ display:none; }
@media (min-width: 640px){ .hide-sm{ display:inline-flex; } }

.section{ padding:80px 0; }
.section-hero{
  padding:128px 0 80px;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
}
.section-alt{ background: var(--bg-1); }
.section-dark{ background: var(--bg-2); }
.section-cta{
  background: linear-gradient(90deg, var(--bg-1), var(--bg-2));
}

.h1{
  font-size: 36px;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0 0 16px;
}
@media (min-width: 640px){ .h1{ font-size:48px; } }
@media (min-width: 1024px){ .h1{ font-size:60px; } }

.h2{
  font-size: 32px;
  font-weight:800;
  margin:0 0 16px;
  letter-spacing:-0.01em;
}
@media (min-width: 640px){ .h2{ font-size:36px; } }

.p-lead{
  font-size: 18px;
  color: var(--text-muted);
  margin:0;
}
@media (min-width: 640px){ .p-lead{ font-size:20px; } }

.center{text-align:center}
.mb-16{margin-bottom:64px}
.mb-12{margin-bottom:48px}
.mb-8{margin-bottom:32px}
.mt-16{margin-top:64px}

.cta-row{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:stretch;
  justify-content:center;
}
@media (min-width: 640px){
  .cta-row{ flex-direction:row; align-items:center; }
}
.btn-lg{ padding:18px 32px; border-radius:12px; font-size:18px; }

.grid{
  display:grid;
  gap:24px;
}
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:repeat(2,1fr); }

@media (min-width: 768px){
  .grid-2{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(4,1fr); }
}

.card{
  background:var(--bg-2);
  border:2px solid var(--accent);
  border-radius: var(--radius);
  padding:24px;
  box-shadow: 0 2px 0 rgba(0,0,0,.0);
}
.card.hover:hover{ box-shadow: var(--shadow); }
.card.kpi{ border-color: var(--accent); }
.card.kpi .value{ color: var(--secondary); font-size:28px; font-weight:800; }
.card.kpi .label{ color: var(--text-muted); font-size:14px; }

.value-big{ font-size:40px; font-weight:800; color:var(--secondary); margin:0 0 6px; }
.value-green{ color:var(--accent); font-weight:800; }

.list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  color:rgba(255,255,255,.9);
}
.icon{
  width:20px; height:20px;
  flex: 0 0 auto;
  margin-top:2px;
}
.icon.purple{ color:var(--secondary); }
.icon.green{ color:var(--accent); }

.feature{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.feature .iconbox{
  width:40px; height:40px;
  border-radius:12px;
  background: rgba(206,122,255,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--secondary);
  flex:0 0 auto;
}
.feature h3{
  margin:0 0 6px;
  font-size:18px;
}
.feature p{
  margin:0;
  color:var(--text-muted);
}

.note{
  background: rgba(22,194,132,.10);
  border:1px solid rgba(22,194,132,.30);
  border-radius: var(--radius);
  padding:20px;
}
.note p{ margin:0; color:rgba(255,255,255,.9); }

.panel{
  background: var(--bg-2);
  border:2px solid var(--accent);
  border-radius: var(--radius);
  padding:32px;
}
@media (min-width: 768px){ .panel{ padding:48px; } }

.panel-soft{
  background: rgba(206,122,255,.10);
  border:1px solid rgba(206,122,255,.30);
  border-radius: var(--radius);
  padding:20px;
}

.hr{
  border-top:1px solid rgba(255,255,255,.10);
  margin-top:24px;
  padding-top:24px;
}

.roi-box{
  background: linear-gradient(135deg, rgba(206,122,255,.10), var(--bg-1));
  border:2px solid var(--secondary);
  border-radius: var(--radius);
  padding:32px;
}
@media (min-width: 768px){ .roi-box{ padding:48px; } }

.roi-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:center;
  margin-bottom:32px;
}
@media (min-width: 768px){
  .roi-grid{ grid-template-columns: repeat(5, 1fr); }
}
.roi-cell{ text-align:center; }
.roi-x{ font-size:26px; opacity:.3; text-align:center; }
.roi-var{ font-size:28px; font-weight:800; color:var(--secondary); margin-bottom:8px; }
.roi-label{ font-size:13px; color:var(--text-muted); }

.example{
  background: rgba(22,194,132,.10);
  border:2px solid var(--accent);
  border-radius: var(--radius);
  padding:20px;
}

.footer{
  background: var(--bg-2);
  border-top:2px solid var(--accent);
  padding:64px 0;
  color: rgba(255,255,255,.7);
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  margin-bottom:48px;
}
@media (min-width: 768px){
  .footer-grid{ grid-template-columns:repeat(4,1fr); gap:48px; }
}
.footer h3{ margin:0 0 16px; color:#fff; font-weight:700; }
.footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.footer a{ color: rgba(255,255,255,.6); transition:color .15s ease; }
.footer a:hover{ color:#fff; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  font-size:14px;
  color: rgba(255,255,255,.6);
}
@media (min-width: 768px){
  .footer-bottom{ flex-direction:row; align-items:center; }
}
.social{ display:flex; gap:24px; }
.small{ font-size:14px; color: rgba(255,255,255,.6); }