:root {
  color-scheme: dark;
  --ink: #f5f7ff;
  --muted: #989bb4;
  --subtle: #686d88;
  --edge: rgba(202,207,255,.13);
  --violet: #b39bff;
  --blue: #8aceff;
  --pointer-x: 50%;
  --pointer-y: 40%;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: #080c19; }
body {
  margin: 0; min-width: 320px; min-height: 100svh; overflow-x: hidden;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: radial-gradient(ellipse at 73% 43%, #191d42 0, #0c1025 38%, #080c19 74%);
  -webkit-font-smoothing: antialiased;
}
::selection { color: #0b1024; background: #c8b8ff; }
.ambient { position: fixed; pointer-events: none; filter: blur(65px); border-radius: 50%; opacity: .4; z-index: 0; }
.ambient-one { width: 50vw; height: 40vw; min-width: 350px; min-height: 300px; right: -20vw; top: -18vw; background: #483c97; }
.ambient-two { width: 36vw; height: 35vw; min-width: 250px; min-height: 250px; left: -24vw; bottom: -22vw; background: #123c77; opacity: .27; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 8; opacity: .24;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.13' filter='url(%23n)'/%3E%3C/svg%3E"); }
.page-shell { position: relative; min-height: 100svh; display: flex; flex-direction: column; isolation: isolate; max-width: 1800px; margin: auto; }
.page-shell::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(circle 340px at var(--pointer-x) var(--pointer-y), rgba(130,124,234,.055), transparent 100%); }
.topbar, .footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.topbar { padding: 38px clamp(28px, 6.2vw, 110px); position: relative; z-index: 4; }
.identity { display: flex; align-items: center; gap: 14px; }
.identity-mark { width: 31px; height: 31px; display: inline-flex; align-items: center; }
.identity-mark svg { width: 31px; height: 31px; fill: none; stroke: #d0c6ff; stroke-width: 1.4; }
.identity-mark svg path + path { stroke: #8e8ec6; stroke-width: 1; }
.identity-name { font-size: 11px; letter-spacing: .27em; font-weight: 690; }
.top-status { display: flex; align-items: center; gap: 11px; color: #d1d0e5; letter-spacing: .23em; font-size: 10px; font-weight: 580; }
.pulse-dot { width: 7px; height: 7px; background: #9deed6; border-radius: 50%; box-shadow: 0 0 0 4px rgba(110,235,203,.08), 0 0 17px rgba(118,255,205,.4); animation: glow 3.4s ease-in-out infinite; }
.main { position: relative; flex: 1; display: flex; align-items: center; min-height: 590px; padding: 50px clamp(28px, 9.6vw, 170px) 70px; }
.hero { width: min(100%, 780px); position: relative; z-index: 3; padding-bottom: 8px; }
.eyebrow { display: flex; align-items: center; gap: 15px; font-size: 11px; letter-spacing: .29em; color: #c0b6e2; font-weight: 640; }
.eyebrow-line { height: 1px; width: 34px; background: linear-gradient(90deg, #beb0ff, transparent); }
.eyebrow-separator { color: #626484; font-size: 13px; }
h1 { font-size: clamp(56px, 7.3vw, 122px); font-weight: 550; letter-spacing: -.082em; line-height: .99; margin: 26px 0 30px; text-wrap: balance; }
.text-shimmer { background: linear-gradient(100deg, #eae8ff 2%, #bbaaff 36%, #9ddaff 69%, #f0ddff 98%); color: transparent; background-clip: text; -webkit-background-clip: text; }
.intro { color: #b9bcd0; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.88; font-weight: 365; letter-spacing: .007em; max-width: 630px; }
.domain-card { margin-top: 37px; display: flex; align-items: center; gap: 17px; width: min(100%, 420px); min-height: 78px; padding: 16px 21px;
  border: 1px solid rgba(197,203,249,.19); border-radius: 16px; background: linear-gradient(125deg, rgba(225,228,255,.075), rgba(171,175,230,.025));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 18px 60px rgba(0,0,0,.12); }
.domain-card-icon { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 11px; background: rgba(198,197,255,.1); flex-shrink: 0; }
.domain-card-icon svg { width: 19px; height: 19px; fill: none; stroke: #cccbff; stroke-width: 1.3; stroke-linecap: round; }
.domain-details { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 5px; }
.detail-label { font-size: 9px; font-weight: 600; letter-spacing: .21em; color: #aaa8c3; }
.domain-details strong { font-size: 15px; font-weight: 580; letter-spacing: .015em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.domain-card-decoration { font-size: 20px; font-weight: 300; opacity: .6; }
.translation { margin-top: 31px; font-size: 12px; color: #777995; letter-spacing: .18em; }
.cosmos { width: min(58vw, 900px); aspect-ratio: 1; position: absolute; right: -6%; top: 48%; transform: translateY(-50%); pointer-events: none; z-index: 1; }
.cosmos::before { content: ""; position: absolute; inset: 2%; border-radius: 50%; filter: blur(35px);
  background: radial-gradient(circle at 48% 48%, rgba(143,102,242,.18), rgba(54,79,177,.13) 30%, transparent 65%); }
.planet { position: absolute; width: 55%; aspect-ratio: 1; left: 23%; top: 20%; border-radius: 50%;
  background: radial-gradient(circle at 29% 19%, rgba(237,221,255,.95), rgba(166,165,242,.92) 7%, #847dc5 18%, #373c82 39%, #181e48 63%, #0a0d21 81%);
  box-shadow: inset -28px -34px 65px 5px rgba(1,3,16,.8), inset 8px 8px 28px rgba(236,221,255,.38), -25px -20px 110px rgba(111,101,219,.19), 0 0 0 1px rgba(229,223,255,.1);
  animation: rise 11s ease-in-out infinite alternate; }
.planet::after { content: ""; position: absolute; width: 80%; height: 30%; border-radius: 100%; top: 21%; left: -6%; transform: rotate(-23deg);
  border-top: 1px solid rgba(241,233,255,.25); filter: blur(1px); }
.planet-shadow { position: absolute; width: 67%; height: 66%; top: 13%; left: 17%; filter: blur(60px); background: rgba(125,101,211,.16); border-radius: 50%; }
.outer-orbit, .inner-orbit { position: absolute; border: 1px solid rgba(177,183,255,.14); border-radius: 50%; transform: rotate(-26deg); }
.outer-orbit { width: 99%; height: 46%; top: 27%; left: 0; border-left-color: rgba(169,192,255,.3); border-bottom-color: rgba(169,192,255,.23); animation: orbit 19s ease-in-out infinite alternate; }
.inner-orbit { width: 77%; height: 35%; top: 32%; left: 11%; border-right-color: rgba(234,205,255,.32); transform: rotate(32deg); }
.orbiting-light { position: absolute; width: 8px; height: 8px; top: 33%; left: 17%; background: #ebdefd; border-radius: 50%; box-shadow: 0 0 25px 7px rgba(179,152,249,.62); }
.tiny-star { width: 2px; height: 2px; position: absolute; background: #d7d4ff; border-radius: 50%; box-shadow: 0 0 8px #d7d4ff; }
.star-a { top: 8%; left: 44%; } .star-b { top: 20%; right: 8%; } .star-c { bottom: 16%; left: 7%; } .star-d { bottom: 13%; right: 18%; }
.footer { padding: 29px clamp(28px, 6.2vw, 110px) 33px; border-top: 1px solid rgba(220,224,255,.07); position: relative; z-index: 4;
  color: #737790; font-size: 10px; letter-spacing: .18em; font-weight: 590; }
.footer-right { display: flex; align-items: center; gap: 12px; }
.footer-line { width: 31px; height: 1px; background: #525673; }
@keyframes glow { 50% { box-shadow: 0 0 0 6px rgba(110,235,203,.12), 0 0 24px rgba(118,255,205,.6); } }
@keyframes rise { to { transform: translateY(-14px); } }
@keyframes orbit { to { transform: rotate(-20deg) scale(1.01); } }
@media (max-width: 950px) {
  .cosmos { width: 82vw; right: -29%; opacity: .5; }
  .main { padding-left: 7vw; }
  .hero { max-width: 650px; }
}
@media (max-width: 600px) {
  .topbar { padding: 25px 23px; }
  .identity { gap: 10px; }
  .identity-name { font-size: 9px; letter-spacing: .2em; }
  .top-status { font-size: 0; gap: 0; }
  .pulse-dot { width: 8px; height: 8px; }
  .main { padding: 60px 25px 100px; min-height: 630px; align-items: center; }
  .hero { margin-top: 80px; }
  .eyebrow { font-size: 9px; gap: 11px; }
  h1 { font-size: clamp(53px, 13vw, 78px); margin: 22px 0 24px; }
  .intro { max-width: 350px; font-size: 15px; line-height: 1.8; }
  .desktop-break { display: none; }
  .domain-card { margin-top: 30px; }
  .translation { font-size: 11px; letter-spacing: .09em; }
  .cosmos { width: min(115vw, 600px); right: -47%; top: 27%; opacity: .54; }
  .footer { padding: 23px 25px 28px; line-height: 1.8; }
  .footer-right { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}