@charset "UTF-8";
:root {
  color-scheme: dark;
  --background: #0d0920;
  --foreground: #f9f5ff;
  --muted: #b5aac7;
  --violet: #ba87f7;
  --violet-light: #e4c9ff;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: var(--foreground);
  background: var(--background);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 47% 65% at 98% 12%, rgba(77, 30, 118, .26), transparent 72%),
    radial-gradient(ellipse 70% 72% at -8% 106%, rgba(48, 20, 88, .40), transparent 68%),
    linear-gradient(130deg, #110b23 0%, #0a0718 62%, #12091e 100%);
}
.ambient { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ambient span { position: absolute; display: block; border-radius: 50%; filter: blur(80px); }
.ambient__a { width: 28rem; height: 28rem; left: -15rem; top: -14rem; background: rgba(107, 49, 153, .15); }
.ambient__b { width: 25rem; height: 25rem; right: 2%; bottom: -18rem; background: rgba(125, 64, 200, .10); }
.ambient__c { width: 14rem; height: 14rem; top: 23%; left: 42%; background: rgba(86, 43, 155, .07); }
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.layout {
  min-height: 100svh;
  width: min(100% - 96px, 1250px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}
.topbar { min-height: 118px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand__mark { display: grid; place-items: center; width: 43px; height: 43px; color: #d6b2ff;
  border: 1px solid rgba(206, 161, 255, .23); border-radius: 14px; background: rgba(150, 90, 235, .075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.brand__name { font-size: 11px; letter-spacing: .22em; font-weight: 750; white-space: nowrap; color: #eee4fa; }
.brand__separator { padding-inline: 9px; font-weight: 400; color: #785a9f; }
.topbar__label { display: flex; align-items: center; gap: 10px; color: #9f8caf; letter-spacing: .17em; font-size: 10px; font-weight: 650; white-space: nowrap; }
.topbar__light { width: 7px; height: 7px; border-radius: 50%; background: #ba83ff; box-shadow: 0 0 17px rgba(196, 130, 255, .6); }
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(350px, .95fr); gap: 3%; align-items: center; flex: 1; padding-block: 34px 95px; }
.hero__copy { position: relative; z-index: 2; padding-bottom: 7px; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: #c39ce9; letter-spacing: .27em; font-size: 10px; font-weight: 750; margin-bottom: 29px; }
.eyebrow__line { display: block; width: 27px; height: 1px; background: linear-gradient(90deg, #d7a4ff, rgba(215,164,255,.2)); }
h1 { margin: 0 0 26px; font-size: clamp(3.35rem, 5.5vw, 6.15rem); letter-spacing: -.075em; line-height: 1.09; font-weight: 760; }
h1 span { display: block; }
.heading__intro { max-width: 11ch; }
.heading__accent { color: #dbb1ff; background: linear-gradient(110deg, #f1d6ff 9%, #bc87f9 65%, #9354d9 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__description { margin: 0; max-width: 475px; color: #bdb1cc; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.8; font-weight: 380; }
.domain-panel { display: flex; align-items: center; gap: 17px; width: min(100%, 510px); min-height: 100px; margin-top: 53px; padding: 20px 24px; background: linear-gradient(125deg, rgba(191,151,233,.105), rgba(95,52,146,.045)); border: 1px solid rgba(199, 161, 244, .23); border-radius: 19px; box-shadow: 0 14px 44px rgba(5, 2, 15, .14), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(14px); }
.domain-panel__icon { flex: 0 0 auto; width: 51px; height: 51px; display: grid; place-items: center; border-radius: 15px; background: rgba(180, 125, 248, .125); color: #ca9afa; }
.domain-panel__content { min-width: 0; flex: 1; }
.domain-panel__caption { display: block; color: #a797bc; letter-spacing: .18em; font-size: 10px; font-weight: 720; margin-bottom: 6px; }
.domain-panel__name { display: block; color: #f4e9ff; letter-spacing: -.025em; font-size: clamp(16px, 1.58vw, 22px); line-height: 1.35; font-weight: 630; overflow-wrap: anywhere; }
.domain-panel__check { flex: 0 0 auto; display: grid; place-items: center; color: #cda1fa; }
.hero__visual { position: relative; width: 100%; aspect-ratio: 1; min-width: 0; max-width: 590px; margin-inline: auto; isolation: isolate; }
.visual__halo { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(181,99,255,.18), rgba(101,55,150,.055) 50%, transparent 74%); filter: blur(23px); }
.visual__grid { position: absolute; inset: 1%; border-radius: 50%; opacity: .3; background-image: radial-gradient(circle, rgba(179, 136, 217, .47) .65px, transparent .9px); background-size: 22px 22px; mask-image: radial-gradient(circle, transparent 30%, #000 84%, transparent 89%); }
.visual__orbit { position: absolute; border: 1px solid rgba(173, 115, 247, .18); border-radius: 50%; transform: rotate(-28deg); }
.visual__orbit--one { inset: 12%; }
.visual__orbit--two { inset: 1%; border-color: rgba(159, 101, 208, .13); transform: rotate(27deg) scaleY(.78); }
.visual__orbit--three { inset: 20%; border-color: rgba(192, 151, 244, .24); transform: rotate(34deg) scaleY(.83); }
.visual__orbit--one::before { content: ""; width: 9px; height: 9px; display: block; position: absolute; top: 13%; left: 13%; border-radius: 50%; background: #c691ff; box-shadow: 0 0 20px rgba(205,147,255,.7); }
.visual__satellite { position: absolute; z-index: 2; border-radius: 50%; border: 1px solid rgba(224,189,255,.58); background: rgba(197, 144, 250, .36); box-shadow: 0 0 30px rgba(175,90,247,.4); }
.visual__satellite--one { width: 10px; height: 10px; top: 14%; right: 27%; }
.visual__satellite--two { width: 5px; height: 5px; bottom: 15%; left: 21%; }
.visual__planet { position: absolute; inset: 26%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 32% 20%, rgba(244, 200, 255, .84) 0, rgba(214, 153, 255, .59) 10%, transparent 29%), radial-gradient(circle at 25% 23%, #bd84f1 0%, #7439b8 38%, #361758 73%, #160c2a 100%);
  box-shadow: inset -27px -22px 47px rgba(6,2,18,.64), inset 9px 11px 33px rgba(250,215,255,.16), 0 0 30px rgba(178,95,248,.27), 0 0 110px rgba(127,64,210,.19), 0 36px 65px rgba(0,0,0,.33);
  animation: float 9s ease-in-out infinite;
}
.visual__planet-light { position: absolute; inset: -12%; background: linear-gradient(145deg, rgba(255,255,255,.17) 1%, transparent 45%, rgba(255,255,255,.03) 100%); border-radius: 50%; }
.visual__planet-shadow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse 48% 60% at 79% 70%, rgba(8,3,22,.36), transparent); }
.visual__planet-trace { position: absolute; border-radius: 50%; width: 135%; height: 47%; transform: rotate(-26deg); left: -18%; border: 14px solid rgba(240, 191, 255, .105); filter: blur(2px); }
.visual__planet-trace--one { top: 21%; }
.visual__planet-trace--two { top: 48%; border-width: 8px; border-color: rgba(244,203,255,.1); transform: rotate(-26deg); }
.visual__sparkle { position: absolute; color: #d9abff; text-shadow: 0 0 28px rgba(209,154,255,.9); }
.visual__sparkle--one { top: 21%; left: 13%; font-size: 26px; }
.visual__sparkle--two { bottom: 14%; right: 18%; font-size: 19px; opacity: .75; }
.footer { min-height: 101px; display: flex; gap: 16px; align-items: center; border-top: 1px solid rgba(199,163,235,.105); color: #867895; font-size: 11px; letter-spacing: .025em; }
.footer__line { width: 22px; height: 1px; background: #8e69b7; }
.footer__dot { border-radius: 50%; width: 3px; height: 3px; background: #665474; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@media (max-width: 1100px) {
 .hero { grid-template-columns: minmax(0,1.1fr) minmax(300px,.9fr); gap: 0; }
 h1 { font-size: clamp(3rem,5.7vw,5rem); }
 .hero__visual { transform: translateX(4%); }
}
@media (max-width: 800px) {
 .layout { width: min(100% - 48px, 620px); }
 .topbar { min-height: 95px; }
 .topbar__label { display: none; }
 .hero { display: flex; flex-direction: column; align-items: stretch; padding-block: 58px 32px; gap: 22px; }
 .hero__copy { order: 1; }
 .hero__visual { order: 0; width: min(100%, 360px); max-height: 315px; margin-block: -38px -29px; }
 .hero__visual { transform: scale(.78); }
 .eyebrow { margin-bottom: 18px; }
 h1 { font-size: clamp(3rem, 10vw, 5rem); }
 .domain-panel { margin-top: 34px; }
 .footer { min-height: 83px; flex-wrap: wrap; gap: 9px; padding-block: 22px; }
}
@media (max-width: 450px) {
 .layout { width: min(100% - 36px, 620px); }
 .brand__name { letter-spacing: .15em; font-size: 10px; }
 .topbar { min-height: 76px; }
 .hero { padding-block: 26px 30px; gap: 10px; }
 .hero__visual { margin-block: -58px -50px; }
 .eyebrow { font-size: 9px; }
 h1 { font-size: clamp(2.75rem, 12vw, 3.8rem); margin-bottom: 19px; }
 .hero__description { font-size: 15px; line-height: 1.7; }
 .domain-panel { min-height: 88px; padding: 15px 17px; gap: 12px; margin-top: 27px; }
 .domain-panel__icon { width: 43px; height: 43px; }
 .domain-panel__name { font-size: 16px; }
 .footer { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }