:root{
  --navy-900:#04101f;
  --navy-800:#071c33;
  --navy-700:#0b2745;
  --blue:#1c63a7;
  --sky:#8cc3ee;
  --orange:#e8801f;
  --gold:#f3b145;
  --snow:#eef5fb;
  --ink:#c8dced;
  --line:rgba(140,195,238,.22);
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--snow);
  background:radial-gradient(120% 90% at 50% 0%,#0d3057 0%,var(--navy-800) 45%,var(--navy-900) 100%);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- backdrop ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.stars{position:absolute;inset:0}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#dcecfb;opacity:.5;animation:twinkle 5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.85;transform:scale(1)}}

.aurora{position:absolute;filter:blur(70px);opacity:.5;mix-blend-mode:screen}
.aurora-a{width:60vw;height:38vh;left:-8vw;top:-6vh;background:linear-gradient(115deg,rgba(28,99,167,.85),rgba(60,190,170,.25) 60%,transparent);animation:drift 26s ease-in-out infinite alternate}
.aurora-b{width:52vw;height:32vh;right:-6vw;top:2vh;background:linear-gradient(245deg,rgba(232,128,31,.5),rgba(140,195,238,.28) 55%,transparent);animation:drift 32s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(4vw,3vh,0) rotate(6deg)}}

.peaks{position:fixed;left:0;right:0;bottom:0;width:100%;height:46vh;min-height:280px;z-index:1;pointer-events:none}
.peaks path{stroke:none}
.peaks-far{height:56vh;opacity:.35}
.peaks-far path{fill:#123a63}
.peaks-mid{height:44vh}
.peaks-mid>path{fill:#0a2542}
.peaks-mid .snow path{fill:rgba(226,240,252,.72)}
.peaks-near{height:30vh}
.peaks-near path{fill:#04101f}

/* ---------- stage ---------- */
.stage{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:clamp(24px,5vw,64px) 20px}

.card{
  position:relative;
  width:min(980px,100%);
  padding:clamp(30px,4.4vw,58px) clamp(22px,4.6vw,64px) clamp(28px,3.6vw,44px);
  text-align:center;
  background:linear-gradient(180deg,rgba(13,42,72,.82),rgba(5,20,37,.9));
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(18px) saturate(130%);
  overflow:hidden;
  animation:rise .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.card::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 46% at 50% -8%,rgba(140,195,238,.22),transparent 70%),
    radial-gradient(40% 34% at 88% 104%,rgba(232,128,31,.16),transparent 70%);
  pointer-events:none;
}
.card::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(560px,86%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(243,177,69,.9),transparent);
}
.card>*{position:relative}

/* watermark star */
.watermark{position:absolute;right:-70px;bottom:-90px;width:340px;opacity:.06;pointer-events:none;z-index:0}
.watermark svg{width:100%;height:100%}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,34px)}
.brand-plate{
  display:flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:14px;
  background:linear-gradient(180deg,#fff,#e7f0f8);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.9);
}
.brand-plate img{display:block;height:44px;width:auto}
.brand-meta{text-align:left;line-height:1.25}
.brand-kicker{display:block;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--sky);opacity:.85}
.brand-since{display:block;font-family:var(--serif);font-size:19px;color:#e9f3fb;margin-top:3px}

/* ---------- badge ---------- */
.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px 8px 13px;border-radius:999px;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:#ffd9a8;background:rgba(232,128,31,.12);
  border:1px solid rgba(243,177,69,.42);
}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(232,128,31,.7);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 11px rgba(232,128,31,0)}100%{box-shadow:0 0 0 0 rgba(232,128,31,0)}}

/* ---------- copy ---------- */
h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(34px,5.6vw,60px);line-height:1.06;
  margin:clamp(18px,2.4vw,26px) 0 0;letter-spacing:-.01em;color:#fff;
}
.accent{background:linear-gradient(100deg,var(--sky),#fff 42%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{max-width:64ch;margin:clamp(16px,2vw,22px) auto 0;font-size:clamp(15px,1.55vw,17.5px);line-height:1.72;color:var(--ink);font-weight:300}
.kind{max-width:58ch;margin:14px auto 0;font-family:var(--serif);font-size:clamp(17px,1.9vw,21px);font-style:italic;line-height:1.55;color:#f0d9b5}
.lede strong{font-weight:600;color:#fff}

/* ---------- domain change ---------- */
.moved{
  max-width:660px;margin:clamp(24px,3vw,32px) auto 0;padding:clamp(18px,2.4vw,24px) clamp(18px,2.6vw,28px);
  border-radius:16px;text-align:center;
  background:linear-gradient(180deg,rgba(28,99,167,.2),rgba(6,22,40,.5));
  border:1px solid rgba(140,195,238,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.moved-label{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--sky);opacity:.9}
.moved-domains{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;margin-top:12px}
.moved .old{font-size:clamp(15px,1.9vw,19px);color:#7f9cb5;text-decoration-color:rgba(232,128,31,.85);text-decoration-thickness:1.5px}
.moved .new{font-size:clamp(17px,2.3vw,23px);font-weight:600;color:#fff;text-decoration:none;letter-spacing:.01em;padding-bottom:2px;border-bottom:1px solid rgba(243,177,69,.6);transition:color .25s,border-color .25s}
.moved .new:hover{color:var(--gold);border-color:var(--gold)}
.moved .arrow{width:30px;height:12px;color:var(--orange);flex:0 0 auto}
.moved-note{display:block;max-width:52ch;margin:12px auto 0;font-size:12.5px;line-height:1.65;color:#93b0c9;font-weight:300}
.moved-note em{font-style:normal;color:#cfe3f4;font-weight:500}

/* ---------- progress ---------- */
.progress{margin:clamp(26px,3.4vw,38px) auto 0;max-width:660px}
.progress-track{height:4px;border-radius:99px;background:rgba(140,195,238,.16);overflow:hidden}
.progress-fill{height:100%;width:46%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--sky) 55%,var(--gold));box-shadow:0 0 18px rgba(140,195,238,.55);animation:load 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes load{from{width:6%}to{width:46%}}
.steps{list-style:none;display:flex;gap:6px;margin:16px 0 0;padding:0;font-size:11.5px;letter-spacing:.04em}
.steps li{flex:1;color:#8aa8c4;text-transform:uppercase;letter-spacing:.13em;font-weight:500}
.steps li::before{content:"";display:block;width:7px;height:7px;margin:0 auto 9px;border-radius:50%;border:1px solid rgba(140,195,238,.45);background:transparent}
.steps li.done::before{background:var(--sky);border-color:var(--sky)}
.steps li.now{color:#ffd9a8}
.steps li.now::before{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 4px rgba(232,128,31,.18)}

/* ---------- actions ---------- */
.actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(26px,3.2vw,34px)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.02em;text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s}
.btn svg{width:18px;height:18px}
.btn-primary{color:#1a1000;background:linear-gradient(180deg,#ffc76e,var(--orange));box-shadow:0 14px 34px -14px rgba(232,128,31,.9),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(232,128,31,1),inset 0 1px 0 rgba(255,255,255,.6)}
.btn-ghost{color:#e6f2fc;border:1px solid rgba(140,195,238,.42);background:rgba(140,195,238,.07)}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(140,195,238,.15);border-color:rgba(140,195,238,.7)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- channels ---------- */
.channels{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;margin:clamp(26px,3.2vw,34px) 0 0;padding:22px 0 0;border-top:1px solid var(--line);font-size:13px;color:#a9c4da}
.channels li{display:flex;align-items:center;gap:9px;padding:0 18px;border-right:1px solid rgba(140,195,238,.18)}
.channels li:last-child{border-right:0}
.channels span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);opacity:.8}
.channels a{color:#dceaf7;text-decoration:none;border-bottom:1px solid rgba(140,195,238,.35)}
.channels a:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- footer ---------- */
.foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;font-size:12px;color:#7f9cb5;text-align:center}
.foot .rule{width:44px;height:1px;background:linear-gradient(90deg,transparent,rgba(243,177,69,.7),transparent)}

@media (max-width:720px){
  .steps{flex-wrap:wrap;gap:14px 6px}
  .steps li{flex:0 0 44%}
  .channels li{border-right:0;flex:0 0 100%}
  .brand-meta{text-align:center;width:100%}
  .peaks-near{height:22vh}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}