:root{
  --bg:#05060b;
  --panel:#0b0d16;
  --card:#0e1120;
  --card2:#0a0c14;
  --text:#f2f5ff;
  --muted:#b7bfd7;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.16);
  --shadow:0 18px 45px rgba(0,0,0,.55);
  --shadow2:0 10px 26px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:12px;
  --max:1180px;
  --accent:#f7b500;
  --accent2:#2ee59d;
  --danger:#ff4d6d;
  --ok:#2ee59d;
  --warn:#f7b500;
  --link:#9bd3ff;
  --focus:0 0 0 3px rgba(155,211,255,.28);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 700px at 15% -10%, rgba(247,181,0,.22), transparent 55%),
    radial-gradient(900px 550px at 90% 5%, rgba(46,229,157,.18), transparent 60%),
    radial-gradient(900px 650px at 50% 105%, rgba(155,211,255,.12), transparent 55%),
    var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 14px}
.main{padding:14px 0 24px}

.skip{
  position:absolute;left:-999px;top:12px;
  background:var(--card);
  border:1px solid var(--line2);
  padding:10px 12px;border-radius:12px;
}
.skip:focus{left:12px;outline:none;box-shadow:var(--focus)}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  font-weight:800;
  color:rgba(242,245,255,.92);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:44px;padding:0 16px;border-radius:12px;
  border:1px solid transparent;
  font-weight:950;letter-spacing:.15px;
  cursor:pointer;user-select:none;white-space:nowrap;
  transition:transform .08s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn:focus{outline:none;box-shadow:var(--focus)}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),#ffd46b);
  color:#10131a;
}
.btn-primary:hover{filter:brightness(1.02)}
.btn-ghost{
  background:rgba(255,255,255,.06);
  border-color:var(--line2);
}
.btn-ghost:hover{border-color:rgba(255,255,255,.26)}
.btn-outline{
  background:transparent;
  border-color:rgba(155,211,255,.45);
  color:var(--link);
}
.btn-outline:hover{border-color:rgba(155,211,255,.72)}
.btn-danger{
  background:linear-gradient(135deg,var(--danger),#ff8aa0);
  color:#17070a;
}

.site-header{position:sticky;top:0;z-index:70;backdrop-filter:blur(12px)}
.bar{
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(5,6,11,.68);
}
.bar-inner{
  display:flex;align-items:center;gap:12px;
  min-height:70px;
}
.brand{
  display:flex;align-items:center;gap:12px;
  min-width:0;
}
.brand img{
  width:78px;height:78px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}
.brand-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand-text b{font-size:14px;letter-spacing:.2px}
.brand-text span{font-size:12px;color:rgba(183,191,215,.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}

.nav{display:none;align-items:center;gap:8px;margin-left:auto}
.nav-link, .nav-drop > summary{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:12px;
  border:1px solid transparent;
  font-weight:950;color:rgba(242,245,255,.92);
}
.nav-link:hover, .nav-drop > summary:hover{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)
}
.nav-link.is-active, .nav-drop[open] > summary{
  background:rgba(155,211,255,.10);
  border-color:rgba(155,211,255,.22);
  color:#eaf4ff;
}
.nav-drop{position:relative}
.nav-drop > summary{list-style:none;cursor:pointer}
.nav-drop > summary::-webkit-details-marker{display:none}
.drop{
  position:absolute;top:52px;left:0;
  min-width:250px;
  background:rgba(10,12,20,.98);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  box-shadow:var(--shadow2);
  padding:10px;
}
.drop-link{
  display:flex;align-items:center;
  padding:10px 10px;border-radius:12px;
  border:1px solid transparent;
  color:rgba(242,245,255,.92);
  font-weight:850;
}
.drop-link:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10)}
.bar-actions{
  display:flex;align-items:center;gap:10px;margin-left:auto
}
.burger{
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  display:inline-flex;align-items:center;justify-content:center;
}
.burger span{
  width:18px;height:2px;background:rgba(242,245,255,.95);position:relative;border-radius:10px
}
.burger span:before,.burger span:after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:rgba(242,245,255,.95);border-radius:10px
}
.burger span:before{top:-6px}
.burger span:after{top:6px}
@media (min-width:980px){
  .nav{display:flex}
  .bar-actions{margin-left:0}
  .burger{display:none}
  .brand img{width:76px;height:76px}
  .brand-text span{max-width:320px}
}

.mnav{position:fixed;inset:0;z-index:120;display:grid;place-items:stretch}
.mnav[hidden]{display:none}
.mnav-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);border:0}
.mnav-panel{
  position:relative;
  width:min(520px, 92vw);
  height:100%;
  background:rgba(8,10,18,.98);
  border-right:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow);
  padding:16px;
}
.mnav-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mnav-brand{display:flex;align-items:center;gap:12px}
.mnav-brand img{border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
.mnav-brand b{font-size:14px}
.mnav-close{
  width:44px;height:44px;border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(242,245,255,.95);
  cursor:pointer;
}
.mnav-links{display:grid;gap:8px;margin-top:14px;max-height:calc(100vh - 220px);overflow:auto;padding-right:6px}
.m-link{
  padding:12px 12px;border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  font-weight:950;
}
.m-sublink{
  margin-left:10px;
  padding:10px 12px;border-radius:14px;
  background:rgba(155,211,255,.06);
  border:1px solid rgba(155,211,255,.12);
  font-weight:900;
  color:rgba(234,244,255,.95);
}
.m-link:hover,.m-sublink:hover{border-color:rgba(255,255,255,.22)}
.mnav-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.mnav-fine{margin-top:10px;color:rgba(183,191,215,.9);font-size:12px;line-height:1.5}

.hero{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(247,181,0,.30), transparent 60%),
    radial-gradient(820px 520px at 85% 12%, rgba(46,229,157,.22), transparent 62%),
    linear-gradient(0deg, rgba(5,6,11,.72), rgba(5,6,11,.30)),
    var(--img) center/cover no-repeat;
  filter:saturate(1.06) contrast(1.02);
}
.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  padding:18px;
}
@media (min-width:900px){
  .hero-inner{grid-template-columns:1.15fr .85fr;align-items:center;padding:24px}
}
.hero-kicker{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hero h1{
  margin:10px 0 10px;
  font-size:clamp(22px, 3.4vw, 40px);
  line-height:1.08;
  letter-spacing:.1px;
}
.hero p{margin:0 0 14px;color:rgba(242,245,255,.90);line-height:1.65;font-weight:700}
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.hero-aside{
  border-radius:18px;
  background:rgba(12,14,26,.72);
  border:1px solid rgba(255,255,255,.12);
  padding:14px;
}
.hero-aside h3{margin:0 0 8px;font-size:16px}
.hero-aside ul{margin:0;padding-left:18px;color:rgba(242,245,255,.90);line-height:1.6;font-weight:700}
.hero-media{
  aspect-ratio:16/11;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.92}

.section{padding:16px 0}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:2px 0 12px;
}
.section-head h2{
  margin:0;
  font-size:clamp(18px, 2.2vw, 28px);
}
.section-head .muted{max-width:720px}

.muted{color:rgba(183,191,215,.92)}
.grid{display:grid;gap:12px}
.cards{grid-template-columns:1fr}
@media(min-width:720px){.cards{grid-template-columns:repeat(2, 1fr)}}
@media(min-width:1050px){.cards{grid-template-columns:repeat(3, 1fr)}}

.card{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(14,17,32,.80);
  box-shadow:0 6px 22px rgba(0,0,0,.35);
  overflow:hidden;
}
.card-pad{padding:14px}
.card-top{display:flex;gap:12px;align-items:center}
.card-top img{
  width:52px;height:52px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  object-fit:cover;
  background:rgba(255,255,255,.06);
}
.card-top b{display:block;font-size:16px}
.card-top small{display:block;color:rgba(183,191,215,.9);font-weight:750}
.rating{
  margin-left:auto;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
}
.rating .score{
  font-size:18px;font-weight:1000;letter-spacing:.2px;
  background:rgba(46,229,157,.12);
  border:1px solid rgba(46,229,157,.22);
  padding:8px 10px;border-radius:14px
}
.rating .note{font-size:12px;color:rgba(183,191,215,.9);font-weight:750}
.card ul{margin:10px 0 0;padding-left:18px;line-height:1.55;color:rgba(242,245,255,.92);font-weight:720}
.hr{height:1px;background:rgba(255,255,255,.10);margin:12px 0}
.card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.card-actions .btn{flex:1 1 140px}
.card-tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tag{
  padding:6px 10px;border-radius:999px;font-size:12px;
  background:rgba(247,181,0,.10);border:1px solid rgba(247,181,0,.18);
  color:rgba(255,238,191,.98);font-weight:900
}

.panel{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,12,20,.72);
  padding:14px;
}
.panel h3{margin:0 0 10px;font-size:16px}
.cols{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:920px){.cols{grid-template-columns:1fr 1fr}}
.kv{
  display:grid;grid-template-columns:1fr;gap:10px
}
@media(min-width:520px){.kv{grid-template-columns:1fr 1fr}}
.kv .k{
  padding:12px;border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.kv .k b{display:block;font-size:12px;color:rgba(183,191,215,.92);letter-spacing:.2px;text-transform:uppercase}
.kv .k span{display:block;margin-top:6px;font-weight:950}

.table-wrap{
  width:100%;
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(14,17,32,.68);
}
table{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  min-width:640px;
  font-size:14px;
}
th,td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
}
th{
  text-align:left;
  font-size:12px;
  letter-spacing:.25px;
  text-transform:uppercase;
  color:rgba(183,191,215,.92);
  background:rgba(255,255,255,.04);
}
tr:last-child td{border-bottom:0}
td b{font-weight:1000}
td .muted{font-size:12px}

.notice{
  border-radius:18px;
  padding:14px;
  border:1px solid rgba(155,211,255,.18);
  background:rgba(155,211,255,.08);
}
.notice b{display:block;margin-bottom:6px}
.notice p{margin:0;color:rgba(234,244,255,.92);line-height:1.6;font-weight:720}
.notice a{color:var(--link);text-decoration:underline;text-underline-offset:3px}

.meter{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap
}
.meter .bar{
  flex:1 1 180px;height:12px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.meter .fill{
  height:100%;
  width:var(--pct);
  background:linear-gradient(90deg, rgba(46,229,157,.92), rgba(247,181,0,.92));
}
.meter .label{font-size:12px;color:rgba(183,191,215,.9);font-weight:850;white-space:nowrap}

.faq details{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  padding:10px 12px;
}
.faq details + details{margin-top:10px}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-weight:950;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{color:rgba(183,191,215,.92);font-weight:800;font-size:12px}
.faq p{margin:10px 0 0;color:rgba(242,245,255,.92);line-height:1.65;font-weight:720}

.form{
  display:grid;gap:10px
}
.field label{display:block;margin:0 0 6px;font-weight:900;color:rgba(242,245,255,.92)}
.field input,.field textarea, .field select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:rgba(242,245,255,.95);
  font-weight:750;
  outline:none;
}
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:var(--focus);border-color:rgba(155,211,255,.30)}
.field textarea{min-height:120px;resize:vertical}
.form .row{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:740px){.form .row{grid-template-columns:1fr 1fr}}

.site-footer{
  margin-top:18px;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(5,6,11,.70);
}
.foot-grid{
  display:grid;gap:16px;
  grid-template-columns:1fr;
  padding:22px 0 18px;
}
@media(min-width:900px){.foot-grid{grid-template-columns:1.2fr .7fr .9fr .9fr}}
.foot-brand{display:flex;gap:12px;align-items:flex-start}
.foot-logo img{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}
.foot-copy p{margin:8px 0 0;color:rgba(183,191,215,.92);line-height:1.6;font-weight:720}
.foot-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.foot-title{font-weight:1000;margin:0 0 10px}
.foot-links{display:grid;gap:8px}
.foot-links a{
  color:rgba(242,245,255,.92);
  font-weight:850;
  opacity:.92;
}
.foot-links a:hover{opacity:1;color:var(--link);text-decoration:underline;text-underline-offset:3px}
.foot-callout{
  margin-top:10px;
  border-radius:18px;
  border:1px solid rgba(247,181,0,.20);
  background:rgba(247,181,0,.09);
  padding:12px;
}
.foot-callout b{display:block;margin-bottom:6px}
.foot-callout p{margin:0;color:rgba(255,244,214,.95);line-height:1.55;font-weight:720}

.foot-bottom{
  border-top:1px solid rgba(255,255,255,.10);
  padding:14px 0 20px;
  display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  color:rgba(183,191,215,.92);
  font-size:12px;
  line-height:1.6;
}
.foot-bottom-links{display:flex;gap:12px;flex-wrap:wrap}
.foot-bottom-links a{color:rgba(183,191,215,.95);font-weight:850}
.foot-bottom-links a:hover{color:var(--link);text-decoration:underline;text-underline-offset:3px}

.to-top{
  position:fixed;
  right:14px;
  bottom:14px;
  width:48px;height:48px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(14,17,32,.78);
  color:rgba(242,245,255,.95);
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.40);
  opacity:0;pointer-events:none;
  transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, border-color .18s ease;
}
.to-top.is-on{opacity:1;pointer-events:auto;transform:translateY(0)}
.to-top:hover{border-color:rgba(155,211,255,.30)}
.to-top:focus{outline:none;box-shadow:var(--focus)}

.small{font-size:12px}
kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  padding:2px 6px;border-radius:8px;
}