body{
  display:flex;
  flex-direction:column;
  color:var(--cosmos-ink);
  background:var(--cosmos-void);
  font-family:var(--cosmos-font-body);
}

.space{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background:
    radial-gradient(900px 520px at 18% 12%,rgba(196,77,255,.18),transparent 58%),
    radial-gradient(820px 480px at 88% 82%,rgba(61,224,255,.12),transparent 62%),
    linear-gradient(180deg,var(--cosmos-void) 0%,var(--cosmos-void-2) 100%);
}

.space-scene{
  display:block;
  width:100%;
  height:100%;
}

.vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 42%,transparent 42%,rgba(2,1,10,.42) 100%),
    linear-gradient(180deg,rgba(2,1,10,.18),transparent 18%,transparent 78%,rgba(2,1,10,.55));
  pointer-events:none;
}

.twinkle{transform-box:fill-box;transform-origin:center}
.twinkle-a{animation:cosmos-twinkle 3.2s ease-in-out infinite}
.twinkle-b{animation:cosmos-twinkle 4.1s ease-in-out .6s infinite}
.twinkle-c{animation:cosmos-twinkle 2.7s ease-in-out 1.1s infinite}

.shooting-star{
  animation:cosmos-streak 7.5s linear 1.4s infinite;
  transform-box:fill-box;
  transform-origin:center;
}

.moon-orbit{
  transform-origin:0 0;
  animation:cosmos-orbit 28s linear infinite;
}

.shell{
  width:100%;
  max-width:42rem;
  margin:0 auto;
  padding:clamp(1.25rem,4vw,2rem) 1.25rem clamp(2rem,6vw,3rem);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:clamp(1.75rem,6vh,3.25rem);
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.42rem .95rem;
  border-radius:999px;
  color:var(--cosmos-cyan);
  background:rgba(8,12,32,.62);
  border:1px solid var(--cosmos-line);
  box-shadow:0 0 0 1px rgba(61,224,255,.08),0 0 24px -10px rgba(61,224,255,.7);
  font-family:var(--cosmos-font-display);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.22em;
}

.badge-icon{
  width:.95rem;
  height:.95rem;
}

.hud{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(1.6rem,4vw,2.4rem) clamp(1.2rem,4vw,2rem) 1.9rem;
  color:var(--cosmos-ink);
  background:
    linear-gradient(180deg,rgba(61,224,255,.08),transparent 22%),
    var(--cosmos-glass);
  border:1px solid var(--cosmos-line);
  box-shadow:
    0 0 0 1px rgba(2,1,10,.5),
    0 28px 70px -24px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(232,244,255,.08);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  animation:cosmos-rise .75s cubic-bezier(.22,1,.36,1) both;
}

.hud::before,
.hud::after{
  content:"";
  position:absolute;
  width:1.15rem;
  height:1.15rem;
  border:2px solid var(--cosmos-cyan);
  pointer-events:none;
  opacity:.7;
}
.hud::before{
  top:.55rem;
  left:.55rem;
  border-right:0;
  border-bottom:0;
}
.hud::after{
  bottom:.55rem;
  right:.55rem;
  border-left:0;
  border-top:0;
}

.eyebrow{
  margin:0;
  font-family:var(--cosmos-font-display);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--cosmos-cyan);
}

.ornament{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  width:min(100%,16rem);
  margin:1rem 0 1.35rem;
  color:var(--cosmos-cyan);
}

.ornament-line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cosmos-cyan),transparent);
}

.ornament-star{
  width:.85rem;
  height:.85rem;
  filter:drop-shadow(0 0 6px rgba(61,224,255,.7));
}

.domain{
  position:relative;
  margin:0;
  font-family:var(--cosmos-font-display);
  font-size:clamp(2.1rem,7.4vw,3.6rem);
  font-weight:700;
  line-height:1.12;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
  text-shadow:0 0 28px rgba(61,224,255,.28);
}

.domain-visual{display:inline}
.domain-label{color:var(--cosmos-ink)}
.domain-tld{
  color:var(--cosmos-cyan);
  text-shadow:0 0 18px rgba(61,224,255,.55);
}

.u-clip{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.lead{
  margin:1.25rem 0 0;
  max-width:26rem;
  color:var(--cosmos-ink);
  font-size:clamp(.98rem,2vw,1.12rem);
  line-height:1.9;
}

.note{
  margin:1.25rem 0 0;
  max-width:28rem;
  padding:.9rem 1.1rem;
  background:rgba(61,224,255,.06);
  border:1px solid rgba(61,224,255,.2);
  color:var(--cosmos-ink);
  font-size:.94rem;
  text-align:left;
}

.muted-note{
  margin:1.5rem 0 0;
  max-width:26rem;
  color:var(--cosmos-ink-soft);
  font-size:.94rem;
}

.domain-facts{
  list-style:none;
  margin:1.35rem auto 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.45rem;
  max-width:32rem;
}

.domain-facts li{
  display:inline-flex;
  align-items:baseline;
  gap:.3rem;
  padding:.32rem .75rem;
  color:var(--cosmos-ink-soft);
  background:rgba(8,12,32,.45);
  border:1px solid rgba(61,224,255,.22);
  font-family:var(--cosmos-font-display);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.06em;
}

.domain-facts li::marker{content:none}

.fact-en{
  color:rgba(138,160,196,.86);
  font-family:var(--cosmos-font-body);
  font-size:.92em;
  font-weight:500;
  letter-spacing:0;
}

.foot{
  margin-top:auto;
  padding-top:clamp(2rem,7vh,3.4rem);
  text-align:center;
  color:rgba(138,160,196,.72);
  font-size:.75rem;
  animation:cosmos-fade .8s ease .15s both;
}

.foot p{margin:0}
.foot a{
  color:rgba(61,224,255,.82);
  text-decoration:none;
}
.foot a:hover{color:var(--cosmos-cyan)}

.offer-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  width:min(100%,32.5rem);
  margin-top:2.15rem;
  padding:1.2rem 1.4rem;
  background:rgba(8,12,32,.42);
  border:1px solid rgba(61,224,255,.22);
  text-align:left;
}

.offer-main{display:grid;gap:.2rem;min-width:0}
.offer-label{
  font-family:var(--cosmos-font-display);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cosmos-cyan);
}
.offer-price{
  font-family:var(--cosmos-font-display);
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--cosmos-ink);
  line-height:1.2;
}
.offer-price .currency{margin-right:.08em}
.offer-sub{
  font-size:.75rem;
  color:var(--cosmos-ink-soft);
}

.offer-link{
  flex-shrink:0;
  display:inline-grid;
  justify-items:end;
  gap:.15rem;
  color:var(--cosmos-cyan);
  font-size:.8125rem;
  font-weight:600;
  text-decoration:none;
  line-height:1.35;
  transition:color .2s ease,text-shadow .2s ease;
}
.offer-link-ja{
  border-bottom:1px dashed currentColor;
  padding-bottom:2px;
  white-space:nowrap;
}
.offer-link .en{
  color:inherit;
  opacity:.78;
  font-size:.78em;
  font-weight:500;
}
.offer-link:hover{
  color:#7aeeff;
  text-shadow:0 0 12px rgba(61,224,255,.45);
}

@keyframes cosmos-rise{
  from{opacity:0;transform:translateY(.9rem)}
  to{opacity:1;transform:none}
}
@keyframes cosmos-fade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes cosmos-twinkle{
  0%,100%{opacity:.35;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.15)}
}
@keyframes cosmos-orbit{
  to{transform:rotate(360deg)}
}
@keyframes cosmos-streak{
  0%{opacity:0;transform:translate(40px,-16px)}
  8%{opacity:1}
  22%{opacity:0;transform:translate(-220px,80px)}
  100%{opacity:0;transform:translate(-220px,80px)}
}

@media (max-width:420px){
  .offer-card{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (prefers-reduced-motion:reduce){
  .twinkle-a,.twinkle-b,.twinkle-c,.shooting-star,.moon-orbit{
    animation:none;
  }
}