:root {
  color-scheme: dark;
  --bg:#04070d;
  --bg2:#09111d;
  --panel:rgba(10,15,26,.56);
  --line:rgba(255,255,255,.11);
  --line-soft:rgba(255,255,255,.06);
  --text:#f5f8ff;
  --muted:#9cabc2;
  --muted-2:#73829a;
  --cyan:rgba(89,216,255,.95);
  --cyan-soft:rgba(89,216,255,.18);
  --violet:rgba(127,113,255,.85);
  --violet-soft:rgba(127,113,255,.18);
  --emerald:rgba(50,231,167,.95);
  --emerald-soft:rgba(50,231,167,.16);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(112,74,255,.14), transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(38,224,255,.12), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.03), transparent 58%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  color:var(--text);
  font-family:Inter,"Segoe UI","Microsoft YaHei","PingFang SC",Arial,sans-serif;
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
}
body::before{
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  opacity:.62;
  animation:gridMove 24s linear infinite;
}
body::after{
  background:
    radial-gradient(circle at center, transparent 42%, rgba(3,6,12,.25) 70%, rgba(1,3,8,.74) 100%);
}
#particleCanvas,
.aurora,
.scanlines,
.orbit{
  position:fixed;
  inset:0;
  pointer-events:none;
}
#particleCanvas{z-index:1;opacity:.92}
.aurora{z-index:0;filter:blur(75px);overflow:hidden}
.aurora::before,.aurora::after,.aurora .blob{
  content:"";
  position:absolute;
  border-radius:50%;
  opacity:.6;
}
.aurora::before{width:44vw;height:44vw;left:-8vw;top:4vh;background:rgba(79,101,255,.19);animation:float1 13s ease-in-out infinite alternate}
.aurora::after{width:36vw;height:36vw;right:-8vw;bottom:3vh;background:rgba(0,230,201,.14);animation:float2 16s ease-in-out infinite alternate}
.aurora .blob{width:28vw;height:28vw;left:38vw;top:-8vh;background:rgba(162,98,255,.12);animation:float3 18s ease-in-out infinite alternate}
.scanlines{z-index:3;opacity:.16;background:linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,0) 2px);background-size:100% 6px;mix-blend-mode:soft-light}
.orbit{z-index:2;overflow:hidden}
.orbit::before,
.orbit::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
}
.orbit::before{width:78vmax;height:78vmax;left:50%;top:50%;transform:translate(-50%,-50%);animation:spin 40s linear infinite}
.orbit::after{width:54vmax;height:54vmax;left:50%;top:50%;transform:translate(-50%,-50%);animation:spinReverse 28s linear infinite}
.wrap{position:relative;z-index:4;height:100%;display:grid;place-items:center;padding:24px}
.card{
  position:relative;
  isolation:isolate;
  width:min(790px,94vw);
  padding:50px 34px 30px;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    linear-gradient(135deg, rgba(97,224,255,.03), rgba(127,113,255,.04));
  backdrop-filter:blur(18px) saturate(145%);
  border-radius:30px;
  box-shadow:
    0 34px 110px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.03);
  text-align:center;
  transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .18s ease-out, box-shadow .22s ease-out;
  overflow:hidden;
}
.card::before,
.card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.card::before{
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(89,216,255,.45), rgba(255,255,255,.08) 35%, rgba(127,113,255,.38) 70%, rgba(50,231,167,.24));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.7;
}
.card::after{
  background:
    radial-gradient(circle at 15% 0%, rgba(89,216,255,.12), transparent 28%),
    radial-gradient(circle at 86% 100%, rgba(127,113,255,.14), transparent 30%);
}
.card .corner,
.card .corner::before,
.card .corner::after{
  position:absolute;
  width:26px;
  height:26px;
  border-color:rgba(89,216,255,.55);
  pointer-events:none;
}
.card .corner{z-index:1}
.card .corner::before,
.card .corner::after{content:"";position:absolute;border-style:solid}
.card .corner.tl{left:14px;top:14px}
.card .corner.tr{right:14px;top:14px}
.card .corner.bl{left:14px;bottom:14px}
.card .corner.br{right:14px;bottom:14px}
.card .corner.tl::before{left:0;top:0;width:20px;height:20px;border-width:2px 0 0 2px;border-radius:14px 0 0 0}
.card .corner.tr::before{right:0;top:0;width:20px;height:20px;border-width:2px 2px 0 0;border-radius:0 14px 0 0}
.card .corner.bl::before{left:0;bottom:0;width:20px;height:20px;border-width:0 0 2px 2px;border-radius:0 0 0 14px}
.card .corner.br::before{right:0;bottom:0;width:20px;height:20px;border-width:0 2px 2px 0;border-radius:0 0 14px 0}
.card .corner.tl::after,
.card .corner.tr::after,
.card .corner.bl::after,
.card .corner.br::after{
  inset:auto;
  width:6px;
  height:6px;
  border:none;
  border-radius:50%;
  background:rgba(89,216,255,.95);
  box-shadow:0 0 16px rgba(89,216,255,.8);
}
.card .corner.tl::after{left:0;top:0}
.card .corner.tr::after{right:0;top:0}
.card .corner.bl::after{left:0;bottom:0}
.card .corner.br::after{right:0;bottom:0}
.status{position:relative;display:inline-flex;align-items:center;gap:9px;color:#c3cede;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.dot{width:8px;height:8px;border-radius:50%;background:#39e69c;box-shadow:0 0 0 5px rgba(57,230,156,.08),0 0 18px rgba(57,230,156,.55);animation:pulse 2s ease-in-out infinite}
.domain{
  margin:26px 0 14px;
  font-size:clamp(36px,7vw,78px);
  line-height:1;
  font-weight:800;
  letter-spacing:-.045em;
  word-break:break-word;
  text-shadow:0 0 22px rgba(89,216,255,.12), 0 0 40px rgba(127,113,255,.08);
}
.domain-wrap{position:relative}
.domain-wrap::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-14px;
  width:min(240px,48%);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(89,216,255,.85), rgba(127,113,255,.6), transparent);
  box-shadow:0 0 16px rgba(89,216,255,.35);
}
.eyebrow{margin-top:34px;color:#e5edf8;font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.desc{max-width:590px;margin:14px auto 0;color:var(--muted);font-size:clamp(16px,2.2vw,20px);line-height:1.68}
.lang-content{position:relative;z-index:2;transition:opacity .45s ease,filter .45s ease,transform .45s ease}
.lang-content.out{opacity:0;filter:blur(8px);transform:translateY(6px)}
.badges{margin:26px auto 0;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.badge{padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.025);color:var(--muted-2);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.footer{position:relative;z-index:2;margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.075);display:flex;justify-content:space-between;align-items:center;gap:16px;color:#748196;font-size:12px}
.langs{display:flex;gap:6px}
.langs button{border:1px solid transparent;background:transparent;color:#748196;padding:8px 10px;border-radius:10px;cursor:pointer;font:inherit;transition:.2s}
.langs button:hover,.langs button.active{color:#fff;background:rgba(255,255,255,.07);border-color:rgba(89,216,255,.18);box-shadow:0 0 0 1px rgba(89,216,255,.05),0 0 18px rgba(89,216,255,.10)}
.brand{letter-spacing:.12em;text-transform:uppercase}
.brand::before{content:"// ";color:rgba(89,216,255,.74)}
@keyframes pulse{50%{transform:scale(.78);opacity:.72}}
@keyframes gridMove{to{transform:translate3d(42px,42px,0)}}
@keyframes float1{to{transform:translate(20vw,8vh) scale(1.12)}}
@keyframes float2{to{transform:translate(-18vw,-10vh) scale(1.08)}}
@keyframes float3{to{transform:translate(-12vw,14vh) scale(1.1)}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes spinReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@media(max-width:620px){
  .card{padding:38px 22px 24px;border-radius:24px}
  .footer{flex-direction:column-reverse}
  .domain{font-size:clamp(34px,11vw,56px)}
  .badges{gap:8px}
  .badge{font-size:11px;padding:7px 10px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .card{transform:none!important}
  .scanlines{display:none}
}