:root{
  --bg:#f4f7fb;
  --white:#ffffff;
  --text:#0f172a;
  --muted:#5b6475;
  --line:#dbe3ee;
  --dark:#08111f;
  --dark2:#0f1d33;
  --green:#11936e;
  --green2:#0f7b5d;
  --card:#f8fafc;
  --shadow:0 18px 48px rgba(8,17,31,.12);
  --radius:24px;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(var(--max), calc(100% - 32px)); margin:0 auto}
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(219,227,238,.9);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  min-height:86px; gap:20px;
}
.brand{display:flex; align-items:center; gap:14px}
.brand img{height:58px; width:auto; border-radius:10px}
.brand-text strong{display:block; font-size:18px; letter-spacing:-.02em}
.brand-text span{display:block; color:var(--muted); font-size:12px}
.menu{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.menu a{
  padding:10px 16px; border-radius:999px; color:#344054; font-weight:600; font-size:14px;
}
.menu a.active,.menu a:hover{background:#0f172a; color:#fff}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--green); color:#fff; padding:14px 22px;
  border-radius:999px; font-weight:700; box-shadow:none; border:0; cursor:pointer;
}
.btn:hover{background:var(--green2)}
.btn-outline{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.22);
}
.btn-outline-dark{
  background:#fff; color:var(--text); border:1px solid var(--line);
}
.hero{
  position:relative; overflow:hidden;
  background:
    linear-gradient(120deg, rgba(8,17,31,.92), rgba(8,17,31,.58)),
    url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=1800&auto=format&fit=crop') center/cover no-repeat;
}
.hero .inner{
  min-height:680px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center;
  padding:72px 0;
}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:999px;
  color:#e2e8f0; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.11);
  font-size:14px; font-weight:600;
}
.hero h1{
  color:#fff; font-size:clamp(42px,6vw,74px); line-height:1.02; letter-spacing:-.04em; margin:20px 0 0;
  max-width:840px;
}
.hero p{
  color:#c8d2e1; font-size:18px; max-width:720px; margin:24px 0 0;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px; max-width:760px}
.stat{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:24px; padding:22px 20px; backdrop-filter: blur(8px);
}
.stat strong{display:block; color:#fff; font-size:28px; letter-spacing:-.03em}
.stat span{color:#c8d2e1; font-size:14px}
.feature-panel{
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.1);
  border-radius:34px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.2);
  backdrop-filter: blur(14px);
}
.feature-head{padding:30px 30px 22px; border-bottom:1px solid rgba(255,255,255,.1)}
.feature-head small{display:block; text-transform:uppercase; letter-spacing:.22em; color:#9fe1cb; font-weight:700}
.feature-head h2{color:#fff; margin:10px 0 0; font-size:34px; line-height:1.08; letter-spacing:-.03em}
.feature-body{padding:24px 26px 28px; display:grid; gap:14px}
.feature-card{
  border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.12);
  border-radius:24px; padding:18px 18px;
}
.feature-card h3{color:#fff; margin:0 0 6px; font-size:18px}
.feature-card p{color:#c8d2e1; margin:0; font-size:14px}
.section{padding:84px 0}
.section.white{background:#fff}
.section.dark{background:var(--dark)}
.section-title small{
  display:block; text-transform:uppercase; letter-spacing:.25em; font-weight:800;
  color:var(--green); font-size:12px;
}
.section.dark .section-title small{color:#99dfc8}
.section-title h2{
  margin:14px 0 0; font-size:clamp(32px,4.6vw,54px); line-height:1.05; letter-spacing:-.04em;
}
.section-title p{
  margin:18px 0 0; max-width:840px; color:var(--muted); font-size:18px;
}
.section.dark .section-title h2{color:#fff}
.section.dark .section-title p{color:#c4d0e0}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:34px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:30px; padding:28px; box-shadow:var(--shadow);
}
.card.soft{background:var(--card); box-shadow:none}
.card.darkish{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); box-shadow:none}
.card h3{margin:16px 0 0; font-size:24px; letter-spacing:-.03em; line-height:1.15}
.card p{margin:14px 0 0; color:var(--muted); font-size:15px}
.section.dark .card h3{color:#fff}
.section.dark .card p{color:#c8d2e1}
.icon{
  width:54px; height:54px; border-radius:18px; display:grid; place-items:center;
  background:#0f172a; color:#fff; font-size:25px; font-weight:900;
}
.icon.light{background:#e7f7f2; color:var(--green)}
.list{display:grid; gap:12px; margin-top:24px}
.list .item{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:15px 16px;
  display:flex; gap:12px; align-items:flex-start; color:#334155;
}
.section.dark .list .item{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#d3dbe7;
}
.tick{
  width:24px; height:24px; border-radius:999px; background:#dff6ee; color:var(--green);
  display:grid; place-items:center; flex:0 0 24px; font-size:14px; font-weight:900; margin-top:1px;
}
.cta-band{
  background:linear-gradient(130deg,#11936e,#08111f); color:#fff; border-radius:34px; padding:38px;
  box-shadow:var(--shadow);
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
}
.cta-band h3{margin:0; font-size:38px; line-height:1.05; letter-spacing:-.03em}
.cta-band p{margin:14px 0 0; color:#e1edf1; max-width:780px}
.info-stack{display:grid; gap:10px}
.info-pill{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.11)
}
.split-hero{
  background:linear-gradient(180deg,var(--dark),var(--dark2));
  color:#fff;
}
.split-hero .inner{padding:82px 0}
.split-hero h1{margin:16px 0 0; font-size:clamp(36px,5vw,62px); line-height:1.04; letter-spacing:-.04em}
.split-hero p{max-width:860px; margin:18px 0 0; color:#c8d2e1; font-size:18px}
.pricing-box{
  background:linear-gradient(180deg,#08111f,#15253f); color:#fff; border-radius:34px; padding:38px; box-shadow:var(--shadow)
}
.pricing-box .from{color:#99dfc8; text-transform:uppercase; letter-spacing:.22em; font-size:12px; font-weight:800}
.price{font-size:86px; font-weight:900; line-height:.95; letter-spacing:-.05em; margin-top:14px}
.subtle-box{
  margin-top:22px; padding:16px 18px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#d8e2ee
}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px}
label{display:block; font-size:14px; font-weight:700; margin-bottom:8px}
input,textarea{
  width:100%; padding:14px 16px; border-radius:18px; border:1px solid var(--line);
  font:inherit; background:#fff; color:var(--text)
}
textarea{min-height:170px; resize:vertical}
.small{font-size:12px; color:#667085}
.footer{
  background:#fff; border-top:1px solid var(--line); padding:30px 0 40px;
}
.footer-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:24px; align-items:start}
.footer .brand img{height:54px}
.footer p{color:var(--muted); max-width:760px}
.contact-list{display:grid; gap:10px; color:#475467}
.tag-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:22px}
.tag{
  padding:14px 15px; border-radius:18px; background:#f8fafc; border:1px solid var(--line); color:#344054; font-weight:600
}
@media (max-width: 1024px){
  .hero .inner,.grid-4,.grid-3,.grid-2,.footer-grid,.cta-band{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr}
  .menu{display:none}
}
@media (max-width: 720px){
  .brand-text{display:none}
  .section{padding:66px 0}
  .hero .inner,.split-hero .inner{padding:56px 0}
  .card,.pricing-box,.cta-band{padding:26px}
  .price{font-size:72px}
  .form-grid,.tag-grid{grid-template-columns:1fr}
}