:root{
  --bg:#070A0D;
  --bg2:#0B1016;
  --card:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.16);
  --txt:#EAF2FF;
  --muted:rgba(234,242,255,.70);
  --muted2:rgba(234,242,255,.52);
  --a:#7AE6FF;
  --b:#B7FF7A;
  --r:22px;
  --shadow:0 20px 60px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--txt);
  background:
    radial-gradient(1100px 700px at 12% -12%, rgba(122,230,255,.18), transparent 55%),
    radial-gradient(900px 620px at 96% 22%, rgba(183,255,122,.12), transparent 60%),
    radial-gradient(800px 600px at 60% 110%, rgba(140,160,255,.10), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.skip{position:absolute;left:-9999px;top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.06);z-index:9999}
.skip:focus{left:10px}

.top{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(14px) saturate(140%);
  background:rgba(7,10,13,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.top__inner{
  max-width:1180px;margin:0 auto;
  padding:14px 16px;
  display:flex;align-items:center;gap:14px;
}
.brand{display:flex;align-items:center;gap:10px}
.mark{
  width:30px;height:30px;border-radius:12px;
  background:
    radial-gradient(10px 10px at 30% 25%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(18px 18px at 70% 70%, rgba(122,230,255,.65), transparent 60%),
    radial-gradient(24px 24px at 30% 80%, rgba(183,255,122,.45), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  border:1px solid var(--line);
}
.word{font-weight:950;letter-spacing:.2px}
.dot{opacity:.7}

.nav{margin-left:auto;display:none;gap:14px}
.nav__a{opacity:.78;font-weight:850}
.nav__a:hover{opacity:1}
.actions{display:flex;align-items:center;gap:10px}

.lang{
  height:40px;padding:0 12px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--txt);
  display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;
}
.lang .code{font-weight:950}
.lang .sep{opacity:.6}

.btn{
  height:40px;padding:0 14px;border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:950;
}
.btn--lg{height:46px;padding:0 16px;border-radius:18px}
.btn--ghost{background:transparent}
.btn--primary{
  border-color:rgba(122,230,255,.28);
  background:linear-gradient(145deg, rgba(122,230,255,.20), rgba(183,255,122,.10));
}

.main{max-width:1180px;margin:0 auto;padding:18px 16px 56px}
.hero{
  position:relative;border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero__bg{
  position:absolute;inset:-1px;
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(122,230,255,.28), transparent 60%),
    radial-gradient(700px 460px at 90% 30%, rgba(183,255,122,.16), transparent 60%),
    radial-gradient(620px 420px at 60% 110%, rgba(255,255,255,.08), transparent 60%);
}
.hero__inner{position:relative;padding:24px}
.h1{margin:0;font-size:34px;letter-spacing:.2px}
.lead{margin:10px 0 0;color:var(--muted);line-height:1.7;max-width:78ch}
.cta{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.chips{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(122,230,255,.25);
  background:rgba(122,230,255,.10);
  font-size:12px;font-weight:900;
}
.chip--ghost{border-color:var(--line);background:transparent;color:var(--muted)}

.section{margin-top:20px}
.section__head{padding:8px 6px}
.h2{margin:0;font-size:18px;font-weight:950}
.sub{margin:8px 0 0;color:var(--muted);line-height:1.7;max-width:90ch}

.grid3{margin-top:12px;display:grid;gap:12px;grid-template-columns:1fr}
.grid2{margin-top:12px;display:grid;gap:12px;grid-template-columns:1fr}

.card{
  border-radius:var(--r);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  padding:14px;
}
.card--wide{padding:16px}
.card--link{display:block;transition:transform .12s ease,border-color .12s ease}
.card--link:hover{transform:translateY(-1px);border-color:var(--line2)}
.h3{margin:0;font-size:14px;font-weight:950}
.p{margin:8px 0 0;color:var(--muted);line-height:1.7}
.tags{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.tag{
  font-size:12px;font-weight:900;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);
  background:transparent;color:var(--muted);
}
.k{font-weight:950}
.v{margin-top:6px;color:var(--muted);line-height:1.6}

.callout{
  margin-top:12px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(122,230,255,.18), transparent 60%),
    rgba(255,255,255,.04);
  padding:16px;
}
.callout__t{font-weight:950}
.callout__p{margin-top:8px;color:var(--muted);line-height:1.7}
.callout__a{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}

.foot{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.foot__grid{display:grid;gap:14px}
.foot__brand{font-weight:950}
.foot__desc{margin-top:8px;color:var(--muted);line-height:1.7}
.foot__links{display:flex;flex-wrap:wrap;gap:12px}
.foot__a{opacity:.8;font-weight:900}
.foot__a:hover{opacity:1}
.foot__bar{margin-top:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted2)}

@media (min-width: 860px){
  .nav{display:flex}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .grid2{grid-template-columns:repeat(2,1fr)}
  .h1{font-size:40px}
}