* { box-sizing: border-box; }

:root {
  --bg: #020208;
  --ink: #fbf8ff;
  --muted: rgba(255,255,255,.72);
  --faint: rgba(255,255,255,.48);
  --panel: rgba(7, 9, 21, .86);
  --panel-2: rgba(10, 12, 27, .92);
  --line: rgba(206, 171, 255, .18);
  --line-strong: rgba(211, 175, 255, .34);
  --purple: #a95dff;
  --purple-2: #c987ff;
  --purple-3: #e1b4ff;
  --blue: #3545db;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 81% 1%, rgba(105, 49, 238, .24), transparent 32%),
    radial-gradient(circle at 12% 9%, rgba(177, 75, 255, .105), transparent 25%),
    linear-gradient(180deg, #04040b 0%, #020208 55%, #010106 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.ambient {
  position: fixed;
  pointer-events: none;
  z-index: -3;
}

.ambient-one {
  width: 62vw;
  height: 62vw;
  right: -22vw;
  top: -34vw;
  background: radial-gradient(circle, rgba(147,76,255,.22), transparent 65%);
  filter: blur(22px);
}

.ambient-two {
  width: 50vw;
  height: 34vw;
  right: 7vw;
  top: 20vw;
  background: radial-gradient(ellipse, rgba(122,69,255,.08), transparent 68%);
  filter: blur(38px);
}

.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .20;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(circle at 56% 21%, black, transparent 74%);
}

a { color: inherit; text-decoration: none; }

.site-header,
.page,
.site-footer {
  width: min(1510px, calc(100% - 104px));
  margin: 0 auto;
}

.site-header {
  height: 92px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: relative;
  z-index: 10;
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-weight: 800;
  letter-spacing: .31em;
}

.brand-name {
  font-size: 17px;
  text-shadow: 0 0 20px rgba(255,255,255,.13);
}

.brand-logo {
  position: relative;
  display: inline-block;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 18px rgba(176,105,255,.66));
}

.q-ring {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 7px solid transparent;
  background:
    linear-gradient(#05050c, #05050c) padding-box,
    conic-gradient(from 208deg, #2638ba 0deg, #6a40ff 70deg, #d788ff 145deg, #eea4ff 204deg, transparent 205deg, transparent 286deg, #7a54ff 332deg, #2638ba 360deg) border-box;
  transform: rotate(-8deg);
}

.q-dot {
  position: absolute;
  width: 13px;
  height: 13px;
  right: 7px;
  top: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, white, #e0ceff 35%, #7656ff 72%);
  box-shadow: 0 0 18px rgba(224,206,255,.96);
}

.q-slash {
  position: absolute;
  width: 10px;
  height: 35px;
  left: 34px;
  top: 30px;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #b879ff 34%, #4645c8 100%);
  transform: rotate(-45deg);
  box-shadow: 0 0 18px rgba(184,121,255,.46);
}

.brand-logo.small { width: 29px; height: 29px; }
.brand-logo.small .q-ring { border-width: 4px; inset: 3px; }
.brand-logo.small .q-dot { width: 7px; height: 7px; right: 4px; top: 5px; }
.brand-logo.small .q-slash { width: 6px; height: 19px; left: 17px; top: 16px; }

.nav-links {
  display: flex;
  gap: 58px;
  font-size: 15px;
  color: rgba(255,255,255,.84);
}

.nav-links a,
.site-footer nav a {
  transition: color .2s ease, text-shadow .2s ease;
}

.nav-links a:hover,
.site-footer nav a:hover {
  color: white;
  text-shadow: 0 0 16px rgba(176,105,255,.65);
}

.status-pill {
  justify-self: end;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding: 14px 26px;
  border: 1px solid rgba(220,183,255,.36);
  border-radius: 999px;
  background: rgba(255,255,255,.042);
  box-shadow: inset 0 0 22px rgba(176,105,255,.10), 0 0 26px rgba(176,105,255,.15);
  font-weight: 800;
}

.status-pill span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 14px var(--purple);
}

.hero {
  min-height: 610px;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  align-items: center;
  gap: 50px;
  padding: 16px 0 20px;
}

.eyebrow,
.section-label {
  display: inline-flex;
  color: #d7a7ff;
  border: 1px solid rgba(206,139,255,.45);
  background: rgba(134,61,255,.12);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.section-label {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 20px;
}

h1, h2, h3, p { margin: 0; }

h1,
.vision-title h2,
.contact-panel h2,
.feature-card h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  letter-spacing: -.055em;
}

h1 {
  margin: 24px 0 24px;
  max-width: 660px;
  font-size: clamp(78px, 7.6vw, 126px);
  line-height: .91;
}

h1 span,
.vision-title h2 span {
  color: #b56dff;
  text-shadow: 0 0 26px rgba(181,109,255,.36);
}

.lead {
  max-width: 575px;
  color: rgba(255,255,255,.86);
  font-size: 18.5px;
  line-height: 1.55;
  font-weight: 500;
}

.kicker {
  margin-top: 24px;
  max-width: 620px;
  color: rgba(255,255,255,.72);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.hero-actions {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 34px;
}

.launch-button {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 18px 30px;
  border: 1px solid rgba(221,181,255,.62);
  border-radius: 10px;
  background: rgba(8,8,19,.76);
  box-shadow: 0 0 32px rgba(176,105,255,.16), inset 0 0 18px rgba(176,105,255,.10);
  font-weight: 800;
}

.domain-text {
  color: rgba(255,255,255,.74);
  font-size: 16px;
}

.hero-visual {
  min-height: 560px;
  position: relative;
  display: grid;
  place-items: center;
  transform: translateY(-4px);
}

.visual-grid {
  position: absolute;
  inset: 15px -5px 26px;
  background:
    linear-gradient(rgba(176,105,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(176,105,255,.10) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .27;
  mask-image: radial-gradient(circle, black, transparent 71%);
}

.orb {
  width: min(440px, 48vw);
  height: min(440px, 48vw);
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.95), rgba(218,194,255,.64) 9%, transparent 21%),
    radial-gradient(circle at 53% 56%, rgba(126,52,245,.88), rgba(42,23,100,.79) 41%, rgba(5,6,15,.99) 74%);
  box-shadow:
    inset 0 0 58px rgba(255,255,255,.15),
    inset 0 -56px 88px rgba(0,0,0,.84),
    0 0 0 1px rgba(216,182,255,.50),
    0 0 98px rgba(147,72,255,.48);
}

.orb-map {
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  opacity: .30;
  background:
    radial-gradient(circle at 43% 24%, transparent 8%, rgba(255,255,255,.20) 9%, transparent 11%),
    radial-gradient(circle at 56% 48%, transparent 10%, rgba(255,255,255,.16) 11%, transparent 13%),
    radial-gradient(rgba(255,255,255,.36) 1px, transparent 1.55px);
  background-size: 94px 88px, 120px 110px, 16px 16px;
  mask-image: radial-gradient(circle, black, transparent 82%);
}

.orb-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(132deg, transparent 20%, rgba(255,255,255,.10) 42%, transparent 57%),
    radial-gradient(circle at 63% 19%, rgba(255,255,255,.18), transparent 21%);
}

.orb::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: -63px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(176,105,255,.78), transparent 70%);
  filter: blur(10px);
}

.pedestal {
  position: absolute;
  width: 520px;
  height: 120px;
  bottom: 58px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(181, 105, 255, .42), rgba(58, 28, 116, .11) 34%, transparent 67%);
  border-bottom: 1px solid rgba(197, 141, 255, .32);
  opacity: .84;
}

.orbit {
  position: absolute;
  width: 680px;
  height: 185px;
  border: 1px solid rgba(212,171,255,.46);
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(176,105,255,.13);
  transform: rotate(-8deg);
}

.orbit::before,
.orbit::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d7afff;
  box-shadow: 0 0 16px #b36dff;
}

.orbit::before { left: 5%; top: 42%; }
.orbit::after { right: 14%; top: 18%; }

.orbit-b { width: 585px; transform: rotate(22deg); opacity: .72; }
.orbit-c { width: 535px; transform: rotate(-34deg); opacity: .42; }

.float-card {
  position: absolute;
  width: 220px;
  padding: 22px;
  border: 1px solid rgba(218,183,255,.23);
  border-radius: 16px;
  background: rgba(8,10,22,.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 68px rgba(0,0,0,.38);
}

.float-card small {
  display: block;
  margin-bottom: 7px;
  color: #bd8cff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.float-card strong { font-size: 18px; }
.signal { top: 62px; right: 10px; }
.risk { left: 42px; bottom: 114px; }

.wave,
.bars {
  height: 42px;
  margin-top: 19px;
  display: flex;
  align-items: end;
  gap: 7px;
}

.wave i {
  flex: 1;
  height: 17px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #c47cff, #5128bd);
  clip-path: polygon(0 80%, 24% 66%, 45% 68%, 68% 32%, 100% 44%, 100% 100%, 0 100%);
}

.bars i {
  width: 13px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #d29eff, #5028bc);
}
.bars i:nth-child(1) { height: 13px; opacity: .45; }
.bars i:nth-child(2) { height: 23px; opacity: .58; }
.bars i:nth-child(3) { height: 32px; opacity: .75; }
.bars i:nth-child(4) { height: 48px; opacity: .96; }
.bars i:nth-child(5) { height: 35px; opacity: .86; }

.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 6px;
}

.feature-card,
.vision-panel,
.principles-panel,
.contact-panel {
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    var(--panel);
  box-shadow: 0 28px 82px rgba(0,0,0,.24);
  backdrop-filter: blur(18px);
}

.feature-card {
  min-height: 135px;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: start;
  gap: 22px;
  padding: 25px 30px;
  border-radius: 15px;
}

.feature-icon-wrap {
  display: flex;
  flex-direction: column;
  gap: 17px;
  color: #bd7cff;
  font-weight: 800;
}

.feature-icon-wrap span {
  font-size: 16px;
}

.glyph::before {
  color: #bd7cff;
  font-size: 38px;
  line-height: 1;
}
.pulse::before { content: "⌁"; }
.target::before { content: "◎"; }
.cube::before { content: "◇"; }

.feature-card h2 {
  font-size: 27px;
  line-height: 1.03;
  margin-bottom: 10px;
}

.feature-card p,
.vision-copy,
.principles-grid p,
.contact-panel p,
.email-card small {
  color: var(--muted);
  line-height: 1.55;
}

.section-anchor { scroll-margin-top: 110px; }

.vision-panel {
  margin-top: 18px;
  border-radius: 16px;
  padding: 25px 30px 25px;
  overflow: hidden;
}

.vision-layout {
  display: grid;
  grid-template-columns: .86fr 1px .58fr 1.15fr;
  gap: 36px;
  align-items: center;
}

.vision-title h2 {
  font-size: clamp(38px, 3.7vw, 58px);
  line-height: 1.05;
}

.divider {
  height: 136px;
  background: linear-gradient(180deg, transparent, rgba(222,196,255,.30), transparent);
}

.vision-copy {
  font-size: 15px;
}

.vision-copy p + p {
  margin-top: 22px;
}

.data-wave {
  height: 168px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 50%, rgba(161,80,255,.42), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.02), rgba(124,74,255,.09));
}

.data-wave span {
  position: absolute;
  left: -8%;
  right: -8%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(203,161,255,.95), transparent);
  box-shadow: 0 0 13px rgba(188,126,255,.9);
  transform-origin: right center;
}
.data-wave span:nth-child(1) { transform: rotate(-24deg) translateY(-54px); }
.data-wave span:nth-child(2) { transform: rotate(-16deg) translateY(-34px); }
.data-wave span:nth-child(3) { transform: rotate(-8deg) translateY(-12px); }
.data-wave span:nth-child(4) { transform: rotate(2deg) translateY(14px); }
.data-wave span:nth-child(5) { transform: rotate(11deg) translateY(39px); }
.data-wave span:nth-child(6) { transform: rotate(20deg) translateY(66px); }

.data-wave b {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d7afff;
  box-shadow: 0 0 16px #b36dff;
}
.data-wave b:nth-of-type(1) { left: 42%; top: 44%; }
.data-wave b:nth-of-type(2) { left: 69%; top: 36%; }
.data-wave b:nth-of-type(3) { left: 82%; top: 61%; }

.bottom-grid {
  display: grid;
  grid-template-columns: 2.25fr .9fr;
  gap: 18px;
  margin-top: 18px;
}

.principles-panel,
.contact-panel {
  border-radius: 16px;
  padding: 25px 30px;
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.principles-grid article {
  min-height: 142px;
  padding: 8px 26px 0 0;
  margin-right: 26px;
  border-right: 1px solid rgba(206,166,255,.18);
}

.principles-grid article:last-child {
  border-right: 0;
  margin-right: 0;
}

.principle {
  display: block;
  margin-bottom: 16px;
}

.principle::before {
  color: #bd7cff;
  font-size: 42px;
  line-height: 1;
}

.shield::before { content: "♢"; }
.layers::before { content: "▱"; }
.compass::before { content: "⌖"; }
.eye::before { content: "◉"; }

.principles-grid h3 {
  margin-bottom: 7px;
  font-size: 17px;
}

.principles-grid p {
  font-size: 14px;
}

.contact-panel {
  display: flex;
  flex-direction: column;
}

.contact-panel h2 {
  font-size: 42px;
  line-height: 1.02;
  margin-bottom: 10px;
}

.contact-panel > p {
  margin-bottom: 24px;
}

.email-card {
  margin-top: auto;
  display: flex;
  gap: 18px;
  align-items: center;
  padding-top: 4px;
}

.mail-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #e5c6ff, #9f58ff 45%, #562bc7);
  box-shadow: 0 0 24px rgba(176,105,255,.38);
  font-size: 25px;
}

.email-card strong {
  display: block;
  font-size: 20px;
  margin-bottom: 6px;
}

.email-card small {
  display: block;
  font-size: 13px;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: 24px 0 42px;
  color: rgba(255,255,255,.52);
  font-size: 13px;
}

.footer-brand {
  letter-spacing: .36em;
  color: rgba(255,255,255,.66);
}

.site-footer nav {
  display: flex;
  gap: 46px;
}

@media (max-width: 1100px) {
  .site-header, .page, .site-footer {
    width: min(100% - 36px, 820px);
  }

  .site-header { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }

  .hero,
  .vision-layout,
  .bottom-grid {
    grid-template-columns: 1fr;
  }

  .hero { gap: 10px; }

  .hero-visual {
    min-height: 430px;
    transform: scale(.86);
    transform-origin: top center;
    margin-bottom: -60px;
  }

  .feature-row,
  .principles-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    min-height: auto;
  }

  .divider { display: none; }

  .principles-grid article {
    border-right: 0;
    border-bottom: 1px solid rgba(206,166,255,.18);
    margin-right: 0;
    padding: 20px 0;
  }

  .principles-grid article:last-child { border-bottom: 0; }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 620px) {
  .brand-logo { width: 44px; height: 44px; }
  .brand-name { font-size: 14px; letter-spacing: .18em; }
  .status-pill { padding: 11px 16px; }
  h1 { font-size: 58px; }
  .lead { font-size: 16px; }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-visual {
    width: 138%;
    min-height: 360px;
    transform: scale(.70);
    transform-origin: top left;
    margin-bottom: -95px;
  }

  .signal { right: -28px; }
  .risk { left: -22px; }

  .vision-panel,
  .principles-panel,
  .contact-panel,
  .feature-card {
    padding: 24px;
  }

  .email-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .email-card strong { font-size: 18px; }
}