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

.realm{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background:var(--f2-dusk);
}

.realm-art{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.realm-veil{
  position:absolute;
  inset:0;
  background:
    radial-gradient(720px 420px at 50% 42%,rgba(12,6,24,.08),transparent 58%),
    linear-gradient(180deg,rgba(12,6,24,.28) 0%,transparent 22%,transparent 58%,rgba(12,6,24,.72) 100%);
  pointer-events:none;
}

.moon{filter:drop-shadow(0 0 18px rgba(255,236,180,.45))}

.star-twinkle{animation:f2-twinkle 3.6s ease-in-out infinite}
.star-twinkle:nth-of-type(2){animation-delay:1.1s}
.star-twinkle:nth-of-type(3){animation-delay:2.2s}

.window{animation:f2-flicker 2.8s ease-in-out infinite}
.window:nth-of-type(2){animation-delay:.4s}
.window:nth-of-type(3){animation-delay:.9s}
.window:nth-of-type(5){animation-delay:1.6s}
.window:nth-of-type(8){animation-delay:2.1s}

.wisp{animation:f2-drift 7s ease-in-out infinite}
.wisp-2{animation-duration:8.4s;animation-delay:1s}
.wisp-3{animation-duration:6.6s;animation-delay:1.8s}
.wisp-4{animation-duration:9s;animation-delay:.6s}
.wisp-5{animation-duration:7.5s;animation-delay:2.4s}

.shell{
  width:100%;
  max-width:44rem;
  margin:0 auto;
  padding:clamp(1.15rem,4vw,2rem) 1.15rem 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.5rem,5vh,2.8rem);
}

.crest{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.4rem .95rem .4rem .7rem;
  color:var(--f2-gold-bright);
  background:rgba(20,12,28,.62);
  border:1px solid rgba(228,180,90,.42);
  box-shadow:0 0 0 1px rgba(12,6,24,.45),0 12px 28px -16px rgba(126,236,216,.45);
  font-family:var(--f2-font-display);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.24em;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.crest-mark{
  width:1.05rem;
  height:1.2rem;
  color:var(--f2-magic);
}

.tablet,
.form-card{
  position:relative;
  color:var(--f2-ink);
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(126,236,216,.1),transparent 42%),
    linear-gradient(180deg,rgba(255,244,220,.08),transparent 18%),
    linear-gradient(180deg,rgba(42,32,52,.82),rgba(20,14,30,.88));
  border:1px solid rgba(228,180,90,.5);
  box-shadow:
    0 0 0 1px rgba(12,6,24,.55),
    inset 0 1px 0 rgba(255,244,220,.08),
    0 0 48px -10px rgba(126,236,216,.28),
    0 28px 70px -24px rgba(0,0,0,.62);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.tablet{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(1.7rem,4.5vw,2.4rem) clamp(1.25rem,4vw,2.1rem) 1.85rem;
  animation:f2-rise .8s cubic-bezier(.22,1,.36,1) both;
}

.tablet-corner{
  position:absolute;
  width:4.4rem;
  height:4.4rem;
  color:var(--f2-gold);
  pointer-events:none;
  z-index:1;
}

.tablet-corner-art{display:block;width:100%;height:100%}
.tablet-corner-tl{top:.2rem;left:.2rem}
.tablet-corner-tr{top:.2rem;right:.2rem;transform:scaleX(-1)}
.tablet-corner-bl{bottom:.2rem;left:.2rem;transform:scaleY(-1)}
.tablet-corner-br{bottom:.2rem;right:.2rem;transform:scale(-1)}

.eyebrow{
  margin:0;
  font-family:var(--f2-font-display);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--f2-gold-bright);
}

.ornament{
  width:min(100%,15.5rem);
  margin:.85rem 0 1.05rem;
  color:var(--f2-gold);
}

.arms{display:block;width:100%;height:auto}

.domain-stage{
  position:relative;
  display:grid;
  place-items:center;
  width:min(100%,22rem);
  min-height:11.5rem;
  margin:0 0 .35rem;
}

.domain-stage-compact{
  min-height:8.5rem;
  width:min(100%,18rem);
}

.sigil-wrap{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:.42;
  pointer-events:none;
}

.sigil{
  width:min(100%,17.5rem);
  height:auto;
  animation:f2-spin 72s linear infinite;
}

.domain-stage-compact .sigil{width:min(100%,13.5rem)}

.domain{
  position:relative;
  z-index:1;
  margin:0;
  font-family:var(--f2-font-title);
  font-size:clamp(2.15rem,7.4vw,3.6rem);
  font-weight:700;
  line-height:1.12;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
  text-shadow:0 0 28px rgba(126,236,216,.18);
}

.domain-visual{display:inline}
.domain-label{color:var(--f2-ink)}
.domain-tld{color:var(--f2-gold-bright)}

.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.05rem 0 0;
  max-width:26rem;
  color:var(--f2-ink);
  font-size:clamp(.98rem,2vw,1.12rem);
  line-height:1.9;
}

.flavor{
  margin:.6rem 0 0;
  max-width:26rem;
  color:var(--f2-ink-soft);
  font-size:.92rem;
  line-height:1.85;
}

.note{
  margin:1.25rem 0 0;
  max-width:28rem;
  padding:.9rem 1.1rem;
  background:rgba(255,244,220,.06);
  border:1px solid rgba(228,180,90,.22);
  color:var(--f2-ink);
  font-size:.94rem;
  text-align:left;
}

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

.domain-facts{
  list-style:none;
  margin:1.3rem 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(--f2-ink-soft);
  background:rgba(255,244,220,.05);
  border:1px solid rgba(228,180,90,.24);
  font-family:var(--f2-font-title);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.04em;
}

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

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

.foot{
  margin-top:auto;
  padding-top:clamp(1.8rem,6vh,3rem);
  text-align:center;
  color:rgba(240,215,138,.58);
  font-size:.75rem;
  animation:f2-fade .8s ease .15s both;
}

.foot p{margin:0}
.foot a{
  color:rgba(244,234,216,.78);
  text-decoration:none;
}
.foot a:hover{color:var(--f2-gold-bright)}

.offer-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  width:min(100%,32.5rem);
  margin-top:2rem;
  padding:1.15rem 1.3rem;
  background:rgba(12,6,24,.28);
  border:1px solid rgba(228,180,90,.28);
  text-align:left;
}

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

.offer-link{
  flex-shrink:0;
  display:inline-grid;
  justify-items:end;
  gap:.15rem;
  color:var(--f2-gold-bright);
  font-size:.8125rem;
  font-weight:600;
  text-decoration:none;
  line-height:1.35;
  transition:color .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:#fff1c0}

@keyframes f2-rise{
  from{opacity:0;transform:translateY(.9rem)}
  to{opacity:1;transform:none}
}
@keyframes f2-fade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes f2-spin{
  to{transform:rotate(360deg)}
}
@keyframes f2-twinkle{
  0%,100%{opacity:.35}
  50%{opacity:1}
}
@keyframes f2-flicker{
  0%,100%{opacity:1}
  40%{opacity:.55}
  55%{opacity:.9}
  70%{opacity:.4}
}
@keyframes f2-drift{
  0%,100%{transform:translate3d(0,0,0);opacity:.7}
  50%{transform:translate3d(0,-14px,0);opacity:1}
}

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