:root{
  --bg:#0b1220;
  --surface:#0f172a;
  --card:#0b1220;
  --text:#0f172a;
  --muted:#475569;
  --white:#ffffff;
  --slate-50:#f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-600:#475569;
  --slate-800:#1f2937;
  --primary:#0ea5e9;
  --primary-600:#0284c7;
  --accent:#22c55e;
  --ring: rgba(14,165,233,.25);
  --shadow: 0 10px 30px rgba(2,6,23,.12);
  --radius: 18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: linear-gradient(180deg, var(--slate-50), #ffffff);
}
a{color:inherit; text-decoration:none}
.container{max-width:1120px; margin:0 auto; padding:0 20px}

header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226,232,240,.9);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0;}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:36px; width:auto}
.menu{display:flex; align-items:center; gap:18px}
.menu a{font-weight:650; color: var(--slate-800); padding:10px 10px; border-radius:12px}
.menu a:hover{background: var(--slate-100)}
.menu a[aria-current="page"]{background: rgba(14,165,233,.10); color: var(--primary-600)}

.cta{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius: 14px;
  font-weight: 750;
  color: var(--white);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: var(--shadow);
}
.cta:hover{transform: translateY(-1px)}
.cta:focus{outline: 4px solid var(--ring); outline-offset:2px}

.hamburger{display:none; border:1px solid var(--slate-200); background:#fff; border-radius:12px; padding:10px}
.hamburger:focus{outline: 4px solid var(--ring); outline-offset:2px}
@media (max-width: 860px){
  .hamburger{display:block}
  .menu{display:none; position:absolute; top:60px; left:0; right:0; padding:12px 20px; background:#fff; border-bottom: 1px solid var(--slate-200)}
  .menu.open{display:flex; flex-direction:column; align-items:flex-start}
}

.hero{ padding: 52px 0 18px; }
.hero-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:28px; align-items:center; }
.badge{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px;
  border-radius: 999px;
  background: rgba(14,165,233,.10);
  color: var(--primary-600);
  font-weight: 750;
}
h1{font-size: clamp(34px, 4vw, 54px); margin:14px 0 10px; letter-spacing:-.02em}
.lead{font-size: 18px; color: var(--slate-600); line-height: 1.6; margin:0 0 18px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.secondary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius: 14px;
  font-weight: 750;
  border:1px solid var(--slate-200);
  background:#fff;
}
.secondary:hover{background: var(--slate-100)}
.kpis{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:18px}
.kpi{padding:12px; border: 1px solid var(--slate-200); border-radius: var(--radius); background:#fff}
.kpi strong{display:block; font-size: 16px}
.kpi span{color: var(--slate-600); font-size: 13px}

.hero-visual{ background:#fff; border:1px solid var(--slate-200); border-radius: var(--radius); padding:14px; box-shadow: var(--shadow); }
.hero-visual img{width:100%; height:auto; border-radius: 14px}

@media (max-width: 980px){ .hero-grid{grid-template-columns: 1fr;} }
@media (max-width: 520px){ .kpis{grid-template-columns:1fr} }

section{padding: 36px 0}
.section-title{display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-bottom: 16px}
.section-title h2{margin:0; font-size: 28px; letter-spacing:-.01em}
.section-title p{margin:0; color: var(--slate-600)}

.cards{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px}
.card{ background:#fff; border:1px solid var(--slate-200); border-radius: var(--radius); padding: 16px; box-shadow: 0 8px 18px rgba(2,6,23,.06); }
.card h3{margin:8px 0 6px; font-size: 16px}
.card p{margin:0; color: var(--slate-600); line-height: 1.55; font-size: 14px}
.pill{display:inline-flex; align-items:center; gap:8px; font-weight:800; color: var(--slate-800)}
.icon{ width:34px; height:34px; border-radius: 12px; background: rgba(34,197,94,.12); display:inline-grid; place-items:center; color: #16a34a; font-weight: 900; }

@media (max-width: 1100px){ .cards{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 560px){ .cards{grid-template-columns: 1fr} }

.split{display:grid; grid-template-columns: 1fr 1fr; gap:18px}
@media (max-width: 900px){.split{grid-template-columns:1fr}}

.callout{ background: linear-gradient(135deg, rgba(14,165,233,.10), rgba(34,197,94,.10)); border: 1px solid rgba(14,165,233,.20); border-radius: var(--radius); padding: 18px; }
.callout h3{margin:0 0 6px}
.callout p{margin:0; color: var(--slate-600); line-height:1.6}

form{display:grid; gap:12px}
label{font-weight: 700; font-size: 14px}
input, textarea{ width:100%; padding: 12px 12px; border-radius: 14px; border: 1px solid var(--slate-200); font: inherit; background:#fff; }
input:focus, textarea:focus{outline: 4px solid var(--ring); border-color: var(--primary-600)}
textarea{min-height: 140px; resize: vertical}
.help{font-size: 13px; color: var(--slate-600)}

footer{padding: 28px 0; border-top: 1px solid var(--slate-200); background:#fff}
.footer-grid{display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:16px}
.footer-grid h4{margin:0 0 10px}
.footer-grid a{display:block; color: var(--slate-600); padding: 6px 0}
.footer-grid a:hover{color: var(--primary-600)}
.fineprint{margin-top: 16px; color: var(--slate-600); font-size: 12px}
@media (max-width: 900px){ .footer-grid{grid-template-columns: 1fr} }

/* Fancy heading (line style) — builder-free replacement for old [fancy_heading] */
.fancy-line{
  position: relative;
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.fancy-line::before,
.fancy-line::after{
  content: "";
  position: absolute;
  top: 50%;
  width: min(140px, 20vw);
  height: 2px;
  background: rgba(2,132,199,.45);
}
.fancy-line::before{ left: 0; }
.fancy-line::after{ right: 0; }
@media (max-width: 560px){
  .fancy-line::before,
  .fancy-line::after{ display:none; }
  .fancy-line{ text-align:left; }
}