:root{
  --bg:#ffffff;
  --panel:#f5f6f8;
  --panel2:#ffffff;
  --text:#111214;
  --muted:#5a616b;
  --line:#e6e8ee;
  --brand:#0b63f6;
  --brand2:#0a53cc;
  --shadow: 0 18px 50px rgba(17,18,20,.10);
  --shadow2: 0 8px 24px rgba(17,18,20,.08);
  --radius: 18px;
  --radius2: 26px;
  --max: 1120px;
  --focus: 2px solid rgba(11,99,246,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display","SF Pro Text","Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.55;
  letter-spacing:.1px;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:hover{color:var(--brand)}
.skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:16px; top:16px; width:auto; height:auto; padding:10px 14px;
  background:var(--panel2); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow2);
  outline:var(--focus);
  z-index:9999;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 18px}
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px}
.brand{display:flex; align-items:center; gap:10px; font-weight:650; letter-spacing:.2px}
.brand__mark{
  width:36px; height:36px; border-radius:12px;
  background:linear-gradient(180deg, rgba(11,99,246,.12), rgba(11,99,246,.04));
  border:1px solid rgba(11,99,246,.18);
  display:grid; place-items:center;
}
.brand__text{font-size:16px}
.ico{width:18px; height:18px; fill:currentColor}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

.nav{display:flex; align-items:center}
.nav__toggle{
  display:none;
  width:42px; height:42px; border-radius:14px;
  border:1px solid var(--line);
  background:var(--panel2);
  box-shadow:var(--shadow2);
  cursor:pointer;
}
.nav__toggle:focus{outline:var(--focus); outline-offset:3px}
.nav__bars{
  position:relative; width:18px; height:2px; background:var(--text); display:block; margin:0 auto; border-radius:2px;
}
.nav__bars::before,.nav__bars::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--text); border-radius:2px;
}
.nav__bars::before{top:-6px}
.nav__bars::after{top:6px}
.nav__list{
  list-style:none; display:flex; gap:10px; margin:0; padding:0;
}
.nav__list a{
  display:inline-block;
  padding:10px 12px;
  border-radius:14px;
  color:var(--muted);
  font-size:14px;
}
.nav__list a:hover{background:rgba(11,99,246,.08); color:var(--text)}
.nav__list a[aria-current="page"]{background:rgba(11,99,246,.12); color:var(--text); border:1px solid rgba(11,99,246,.16)}

.main{padding:22px 0 64px}
.crumbs{font-size:12.5px; color:var(--muted); padding:8px 0 14px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--text)}

.hero{
  padding:34px 0 8px;
}
.hero__grid{
  display:grid; grid-template-columns: 1.25fr .75fr; gap:22px; align-items:start;
}
.kicker{
  display:inline-flex; gap:8px; align-items:center;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
  padding:8px 10px;
  border-radius:999px;
  background:rgba(90,97,107,.08);
  border:1px solid rgba(90,97,107,.14);
}
.h1{
  margin:12px 0 10px;
  font-size: clamp(28px, 4vw, 46px);
  line-height:1.06;
  letter-spacing:-.02em;
}
.lead{font-size:16.5px; color:var(--muted); max-width:66ch}
.ctaRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(11,99,246,.22);
  background:linear-gradient(180deg, rgba(11,99,246,.12), rgba(11,99,246,.06));
  color:var(--text);
  font-weight:620;
  cursor:pointer;
  box-shadow:var(--shadow2);
}
.btn:hover{border-color:rgba(11,99,246,.36); background:linear-gradient(180deg, rgba(11,99,246,.16), rgba(11,99,246,.08))}
.btn--primary{
  background:linear-gradient(180deg, var(--brand), var(--brand2));
  color:#fff;
  border:1px solid rgba(11,99,246,.55);
}
.btn--primary:hover{filter:brightness(1.03)}
.btn:focus{outline:var(--focus); outline-offset:3px}
.btn--ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--text);
}
.card{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:var(--radius2);
  box-shadow:var(--shadow2);
}
.card + .card{margin-top:16px}
.card__header{padding:18px 18px 0}
.card__body{padding:18px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 10px; border-radius:999px;
  background:rgba(11,99,246,.08);
  border:1px solid rgba(11,99,246,.14);
  color:var(--text);
  font-size:13px;
}
.muted{color:var(--muted)}
.small{font-size:13px}
.h2{font-size:22px; letter-spacing:-.01em; margin:0 0 10px}
.h3{font-size:16px; margin:0 0 8px}
.section{margin-top:18px}

.feature{
  padding:16px;
  border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(245,246,248,.9), rgba(255,255,255,.98));
  min-height:140px;
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
}
.feature::after{
  content:"";
  position:absolute; inset:-60px -80px auto auto;
  width:180px; height:180px;
  background:radial-gradient(circle at 30% 30%, rgba(11,99,246,.24), rgba(11,99,246,0) 60%);
  transform:rotate(12deg);
}
.feature__icon{
  width:38px; height:38px; border-radius:14px;
  display:grid; place-items:center;
  background:rgba(11,99,246,.10);
  border:1px solid rgba(11,99,246,.16);
  margin-bottom:10px;
  position:relative;
  z-index:1;
}
.feature p{margin:0; position:relative; z-index:1}

.tableWrap{overflow:auto; border-radius:20px; border:1px solid var(--line)}
table{width:100%; border-collapse:separate; border-spacing:0; min-width:760px; background:var(--panel2)}
th,td{padding:14px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
th{position:sticky; top:0; background:rgba(245,246,248,.95); backdrop-filter:blur(10px); font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted)}
tr:last-child td{border-bottom:0}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(90,97,107,.08);
  border:1px solid rgba(90,97,107,.14);
  font-size:13px;
}
.badge--good{background:rgba(0,163,107,.10); border-color:rgba(0,163,107,.18)}
.badge--warn{background:rgba(240,160,0,.12); border-color:rgba(240,160,0,.20)}

.notice{
  padding:16px;
  border-radius:20px;
  background:rgba(11,99,246,.06);
  border:1px solid rgba(11,99,246,.14);
}
.notice strong{font-weight:700}
.prose p{margin:0 0 12px}
.prose ul{margin:10px 0 14px; padding-left:18px}
.prose li{margin:6px 0}

.faq{border-radius:20px; border:1px solid var(--line); overflow:hidden}
.faq details{border-bottom:1px solid var(--line); background:var(--panel2)}
.faq details:last-child{border-bottom:0}
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  font-weight:620;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus{outline:var(--focus); outline-offset:-3px}
.faq .ans{padding:0 16px 16px; color:var(--muted)}
.chev{width:18px; height:18px; flex:0 0 auto; opacity:.75}
details[open] .chev{transform:rotate(180deg)}

.card--tool .tool{padding:18px}
.tool__hint{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  padding:16px; border-radius:20px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(245,246,248,.85), rgba(255,255,255,.98));
}
.tool__icon{
  width:44px; height:44px; border-radius:16px;
  border:1px solid rgba(11,99,246,.16);
  background:rgba(11,99,246,.10);
  display:grid; place-items:center;
}
.tool__title{font-weight:700}
.tool__frame{margin-top:14px; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#fff}

.footer{border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(245,246,248,.55), rgba(255,255,255,1))}
.footer__grid{
  display:grid; grid-template-columns: 1.2fr .8fr .9fr; gap:18px;
  padding:26px 18px;
}
.footer__title{margin:0 0 10px; font-size:14px; letter-spacing:.02em}
.footer__links{list-style:none; padding:0; margin:0}
.footer__links li{margin:8px 0}
.footer__links a{color:var(--muted)}
.footer__links a:hover{color:var(--text)}
.footer__partners{margin-top:14px}
.partner{color:var(--muted)}
.partner:hover{color:var(--text)}
.footer__bottom{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; padding:14px 18px 22px}
.dot{opacity:.35}

.heroArt{
  border-radius:28px;
  border:1px solid var(--line);
  background:radial-gradient(circle at 20% 10%, rgba(11,99,246,.14), rgba(11,99,246,0) 45%),
             radial-gradient(circle at 80% 40%, rgba(0,163,107,.10), rgba(0,163,107,0) 45%),
             linear-gradient(180deg, rgba(245,246,248,.95), rgba(255,255,255,1));
  box-shadow:var(--shadow);
  padding:18px;
  position:sticky;
  top:92px;
}
.heroArt__img{border-radius:22px; overflow:hidden; border:1px solid rgba(17,18,20,.08)}
.statRow{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.stat{
  border-radius:18px; border:1px solid rgba(17,18,20,.08);
  background:rgba(255,255,255,.92);
  padding:12px;
}
.stat__k{font-size:12px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase}
.stat__v{font-size:18px; font-weight:750; letter-spacing:-.02em; margin-top:4px}
.divider{height:1px; background:var(--line); margin:18px 0}

@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr; }
  .heroArt{position:relative; top:auto}
  table{min-width:680px}
}
@media (max-width: 820px){
  .nav__toggle{display:inline-flex; align-items:center; justify-content:center}
  .nav__list{
    position:absolute; right:18px; top:64px;
    flex-direction:column;
    background:rgba(255,255,255,.92);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow);
    padding:10px;
    width:min(340px, calc(100vw - 36px));
    display:none;
  }
  .nav__list[data-open="true"]{display:flex}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  table{min-width:640px}
  .footer__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}
.fadeIn{
  opacity:0;
  transform:translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.fadeIn[data-in="true"]{opacity:1; transform:none}