:root{
  --bg0:#070a12;
  --bg1:#0b1220;
  --card:#0f1a30;
  --card2:#0c1527;
  --text:#e8eefc;
  --muted:#a9b5d1;
  --line:rgba(255,255,255,.12);
  --shadow: 0 20px 60px rgba(0,0,0,.45);

  --brand1:#7c3aed;
  --brand2:#06b6d4;
  --brand3:#22c55e;

  --radius:18px;
  --radius2:24px;
  --max:1180px;

  --focus: 0 0 0 4px rgba(124,58,237,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(6,182,212,.18), transparent 55%),
    radial-gradient(800px 600px at 50% 100%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
}

a{color:inherit;text-decoration:none}
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline:none;
  box-shadow: var(--focus);
  border-radius: 10px;
}

.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

.skip{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip:focus{left:16px;top:16px;width:auto;height:auto;padding:10px 12px;background:#111;border-radius:10px;z-index:9999}

.sr{position:absolute;left:-9999px}

.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(7,10,18,.55);
  border-bottom: 1px solid var(--line);
}
.topbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
  gap:18px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{
  width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(124,58,237,.85), rgba(6,182,212,.75));
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__tag{font-size:12px;color:var(--muted)}

.nav{display:flex;gap:14px;align-items:center}
.nav a{
  font-size:14px;color:var(--muted);
  padding:8px 10px;border-radius:12px;
}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.06)}

.topbar__actions{display:flex;gap:10px;align-items:center}

.btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius: 14px;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:hover{transform: translateY(-1px);background:rgba(255,255,255,.10)}
.btn--primary{
  border-color: rgba(124,58,237,.35);
  background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(6,182,212,.85));
}
.btn--primary:hover{background: linear-gradient(135deg, rgba(124,58,237,1), rgba(6,182,212,.95))}
.btn--ghost{background: rgba(255,255,255,.04)}
.btn--big{padding:12px 16px;border-radius:16px;font-weight:600}

.main{padding-bottom:60px}

.hero{padding:52px 0 18px}
.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:28px;
  align-items:stretch;
}
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr; }
  .nav{display:none}
}

.kicker{
  display:inline-block;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.06);
  border:1px solid var(--line);
  padding:8px 10px;
  border-radius: 999px;
  font-size:13px;
  margin:0 0 12px;
}

.hero__h1{
  font-size: clamp(32px, 4.3vw, 54px);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0 0 12px;
}
.grad{
  background: linear-gradient(90deg, #a78bfa, #22d3ee, #34d399);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__p{
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
  margin:0 0 18px;
}

.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 16px}

.hero__trust{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  padding:8px 10px;
  font-size:13px;
  color: rgba(255,255,255,.9);
}

.hero__card{
  position:relative;
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  min-height: 320px;
}
.hero__bg{
  position:absolute; inset:-60px;
  background:
    radial-gradient(400px 200px at 20% 20%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(350px 260px at 80% 30%, rgba(6,182,212,.20), transparent 55%),
    radial-gradient(320px 240px at 50% 90%, rgba(34,197,94,.12), transparent 60%);
  filter: blur(0px);
  pointer-events:none;
}

.glass{
  position:relative;
  margin:16px;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(12,21,39,.55);
  backdrop-filter: blur(10px);
}
.glass__header{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.dot{width:10px;height:10px;border-radius:99px;display:inline-block}
.dot--r{background:#ef4444}
.dot--y{background:#f59e0b}
.dot--g{background:#22c55e}
.glass__title{margin-left:6px;color:rgba(255,255,255,.85);font-size:13px}
.glass__body{padding:14px 14px 16px}

.steps{margin:0 0 12px;padding-left:18px;color:rgba(255,255,255,.88)}
.steps li{margin:8px 0}
.mini{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding:12px;
}
.mini__row{display:grid;grid-template-columns: 1fr 3fr auto;gap:10px;align-items:center}
.mini__label{color:var(--muted);font-size:13px}
.mini__bar{height:10px;background:rgba(255,255,255,.09);border-radius:99px;overflow:hidden}
.mini__bar span{display:block;height:100%;background: linear-gradient(90deg, rgba(124,58,237,1), rgba(6,182,212,1), rgba(34,197,94,1))}
.mini__val{font-size:13px;color:rgba(255,255,255,.85)}
.mini__hint{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.45}

.section{padding:30px 0}
.section__head{
  display:flex;gap:18px;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.h2{margin:0;font-size:24px;letter-spacing:-.01em}
.muted{color:var(--muted);margin:6px 0 0;line-height:1.6}
code{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding:2px 6px;
  border-radius: 8px;
  font-size: 0.95em;
}

.search{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius2);
  padding:18px;
  display:flex;gap:18px;justify-content:space-between;align-items:center;
  flex-wrap:wrap;
}
.search__left{min-width:240px}
.search__form{display:flex;gap:10px;align-items:center;flex:1;justify-content:flex-end;min-width:260px}
.search__form input{
  width:min(520px, 100%);
  border:1px solid rgba(255,255,255,.16);
  background: rgba(10,16,30,.55);
  color:var(--text);
  padding:12px 12px;
  border-radius: 14px;
  font-size:14px;
}

.filters{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color:rgba(255,255,255,.88);
  padding:8px 10px;border-radius:999px;
  cursor:pointer;
}
.chip:hover{background: rgba(255,255,255,.08)}
.chip.is-active{
  background: rgba(124,58,237,.25);
  border-color: rgba(124,58,237,.45);
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 980px){ .grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .grid{grid-template-columns: 1fr;} }

.card{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border-radius: var(--radius);
  padding:16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  display:flex;flex-direction:column;gap:10px;
  min-height: 180px;
  transition: transform .15s ease, background .15s ease;
}
.card:hover{transform: translateY(-2px);background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035))}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card__title{margin:0;font-size:16px;letter-spacing:-.01em}
.badge{
  font-size:12px;
  color: rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding:5px 8px;border-radius:999px;
  white-space:nowrap;
}
.card__desc{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.card__meta{display:flex;gap:10px;flex-wrap:wrap;color:rgba(255,255,255,.85);font-size:13px}
.card__meta span{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:6px 8px;border-radius:12px;
}
.card__actions{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px}
.link{color:rgba(168,139,250,.95)}
.link:hover{text-decoration:underline}

.empty, .notice{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius2);
  padding:18px;
  margin-top:14px;
}
.notice strong{display:block;margin-bottom:6px}

.routeGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 980px){ .routeGrid{grid-template-columns: 1fr;} }
.route{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius2);
  padding:18px;
}
.route h3{margin:0 0 6px}
.route ul{margin:10px 0 0;padding-left:18px;color:rgba(255,255,255,.88)}
.route li{margin:6px 0}

.method{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 980px){ .method{grid-template-columns: 1fr;} }
.method__item{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius2);
  padding:18px;
}
.method__item h3{margin:0 0 8px}

.faq details{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: var(--radius2);
  padding:14px 16px;
  margin-bottom:10px;
}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--muted);line-height:1.6;margin:10px 0 0}

.cta{padding:44px 0}
.cta__inner{
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(600px 260px at 20% 10%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(600px 260px at 80% 30%, rgba(6,182,212,.18), transparent 55%),
    rgba(255,255,255,.04);
  border-radius: 28px;
  padding:26px 22px;
  text-align:center;
  box-shadow: var(--shadow);
}
.cta__inner h2{margin:0 0 8px;font-size:26px;letter-spacing:-.01em}
.cta__inner p{margin:0 0 14px}

.footer{
  border-top:1px solid var(--line);
  background: rgba(7,10,18,.55);
  backdrop-filter: blur(10px);
}
.footer__inner{
  padding:18px 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  flex-wrap:wrap;
}
.footer__links{display:flex;gap:12px;flex-wrap:wrap}
.footer__links a{color:var(--muted)}
.footer__links a:hover{color:var(--text)}
.noscript{
  position:fixed;left:16px;bottom:16px;right:16px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.65);
  padding:12px 14px;border-radius:14px;
}