:root{
  --navy:#0B1320;
  --teal:#00B7A8;
  --slate:#5B6777;
  --bg:#ffffff;
  --muted:#EEF2F6;
  --line:#D7E1F0;
  --amber:#FFB020;
  --radius:16px;
  --shadow: 0 10px 30px rgba(11,19,32,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--navy); background:var(--bg)}
a{color:inherit; text-decoration:none}
a:hover{opacity:.9}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.85); backdrop-filter: blur(10px); border-bottom:1px solid var(--line);}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:18px}
.brand{display:flex; align-items:center; gap:2px}
.brand img{height:64px}
.brand strong{font-size:18px}
.navlinks{display:flex; align-items:center; gap:18px; color:var(--slate); font-weight:600}
.navlinks a{padding:8px 10px; border-radius:10px}
.navlinks a.active{background:var(--navy); color:#fff; border-radius:999px;}
.cta{display:flex; gap:10px; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 14px; border-radius:12px; font-weight:800; border:1px solid var(--line); background:#fff; color:var(--navy);}
.btn.primary{background:var(--navy); color:#fff; border-color:var(--navy)}
.btn.teal{background:var(--teal); border-color:var(--teal); color:var(--navy)}
.btn.small{padding:8px 12px; border-radius:10px; font-weight:800}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:var(--muted); border:1px solid var(--line); color:var(--slate); font-weight:700; font-size:12px}
.hero{padding:56px 0 28px;
  background: radial-gradient(800px 300px at 20% 0%, rgba(0,183,168,.22), transparent 60%),
              radial-gradient(800px 300px at 90% 10%, rgba(76,111,255,.18), transparent 60%);}
.grid{display:grid; gap:18px}
.heroGrid{grid-template-columns:1.15fr .85fr; align-items:start}
@media (max-width: 920px){ .heroGrid{grid-template-columns:1fr} .navlinks{display:none} }
h1{font-size:46px; line-height:1.05; margin:14px 0 12px}
@media (max-width: 520px){ h1{font-size:36px} }
p.lead{font-size:18px; line-height:1.5; color:var(--slate); margin:0 0 18px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow: var(--shadow); padding:18px;}
.card.soft{background:var(--muted); box-shadow:none}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width: 720px){ .kpis{grid-template-columns:1fr} }
.kpi{border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--muted)}
.kpi b{display:block; font-size:20px}
.kpi span{color:var(--slate); font-weight:650}
.section{padding:34px 0}
.section h2{font-size:26px; margin:0 0 12px}
.section p{color:var(--slate); line-height:1.6}
.features{grid-template-columns:repeat(3,1fr)}
@media (max-width: 920px){ .features{grid-template-columns:1fr} }
.feature{padding:16px}
.icon{width:42px; height:42px; border-radius:14px; background:rgba(0,183,168,.14); border:1px solid rgba(0,183,168,.35); display:flex; align-items:center; justify-content:center; font-weight:900;}
.steps{grid-template-columns:repeat(3,1fr)}
@media (max-width: 920px){ .steps{grid-template-columns:1fr} }
.step{border:1px solid var(--line); border-radius:14px; padding:16px; background:#fff}
.step .n{width:26px;height:26px;border-radius:999px;background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;margin-right:8px}
.hr{height:1px;background:var(--line); margin:18px 0}
.pricing{grid-template-columns:repeat(3,1fr)}
@media (max-width: 980px){ .pricing{grid-template-columns:1fr} }
.priceCard{position:relative}
.price{font-size:34px; margin:0}
.price small{font-size:14px; color:var(--slate); font-weight:700}
.ul{margin:10px 0 0; padding-left:18px; color:var(--slate); line-height:1.7}
.tag{position:absolute; right:14px; top:14px; background:rgba(255,176,32,.18); border:1px solid rgba(255,176,32,.35); padding:6px 10px; border-radius:999px; font-weight:900; color:var(--navy); font-size:12px}
.tableWrap{overflow:auto; border:1px solid var(--line); border-radius:16px}
table{border-collapse:collapse; width:100%; min-width:780px; background:#fff}
th,td{padding:12px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--navy); color:#fff; text-align:left; font-size:13px}
td{color:var(--slate); font-weight:650}
td strong{color:var(--navy)}
.footer{padding:28px 0; border-top:1px solid var(--line); color:var(--slate);}
.footerGrid{display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap:16px}
@media (max-width: 920px){ .footerGrid{grid-template-columns:1fr} }
.footer a{color:var(--slate)}
.notice{font-size:12.5px;color:var(--slate);line-height:1.5}
.formRow{display:flex; gap:10px; align-items:center}
@media (max-width: 520px){ .formRow{flex-direction:column; align-items:stretch} }
.input{width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--line); outline:none;}
.input:focus{border-color:rgba(0,183,168,.65); box-shadow:0 0 0 4px rgba(0,183,168,.12)}