@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');

:root {
  --bg: #07080b;
  --text: #f4f6fb;
  --muted: #9ca4b4;
  --line: rgba(255,255,255,.13);
  --glow-a: rgba(111,164,255,.35);
  --glow-b: rgba(170,105,255,.28);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.035), transparent 34%), var(--bg);
  font-family: "Inter", system-ui, sans-serif;
}

.background, .grid, .noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.background { overflow: hidden; }

.orb {
  position: absolute;
  width: 42vw;
  height: 42vw;
  min-width: 420px;
  min-height: 420px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .32;
  animation: drift 16s ease-in-out infinite alternate;
}

.orb-one { top: -20%; left: -12%; background: var(--glow-a); }
.orb-two { right: -18%; bottom: -28%; background: var(--glow-b); animation-delay: -7s; }

.grid {
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}

.noise {
  opacity: .035;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 72px 24px 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.crystal-mark {
  position: relative;
  width: 46px;
  height: 52px;
  margin-bottom: 28px;
  filter: drop-shadow(0 0 26px rgba(137,180,255,.35));
  animation: reveal .9s ease-out both, float 5s ease-in-out 1s infinite;
}

.facet {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0, 100% 28%, 78% 100%, 22% 100%, 0 28%);
  border: 1px solid rgba(255,255,255,.65);
}

.facet-one { background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(111,164,255,.02)); }
.facet-two {
  clip-path: polygon(50% 0, 50% 100%, 22% 100%, 0 28%);
  background: linear-gradient(180deg, rgba(147,108,255,.28), rgba(255,255,255,.02));
}
.facet-three {
  clip-path: polygon(50% 0, 100% 28%, 50% 48%);
  background: linear-gradient(90deg, rgba(74,229,203,.3), rgba(255,255,255,.1));
}

.eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .42em;
  color: #a9b2c4;
  animation: rise .8s .2s ease-out both;
}

.brand {
  margin: 0;
  display: flex;
  gap: clamp(6px, 1.15vw, 20px);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(54px, 9.4vw, 146px);
  line-height: .92;
  font-weight: 600;
  letter-spacing: .02em;
  text-shadow: 0 0 36px rgba(132,169,255,.1), 0 0 90px rgba(132,169,255,.08);
}

.brand span {
  opacity: 0;
  transform: translateY(24px);
  animation: letterIn .65s cubic-bezier(.2,.75,.2,1) forwards;
}

.brand span:nth-child(1){animation-delay:.32s}.brand span:nth-child(2){animation-delay:.38s}
.brand span:nth-child(3){animation-delay:.44s}.brand span:nth-child(4){animation-delay:.50s}
.brand span:nth-child(5){animation-delay:.56s}.brand span:nth-child(6){animation-delay:.62s}
.brand span:nth-child(7){animation-delay:.68s}.brand span:nth-child(8){animation-delay:.74s}

.divider {
  width: min(720px, 78vw);
  margin: 34px auto 30px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  opacity: 0;
  animation: fade .9s 1.02s ease-out forwards;
}

.divider span { height: 1px; background: linear-gradient(90deg, transparent, var(--line)); }
.divider span:last-child { background: linear-gradient(90deg, var(--line), transparent); }
.divider i {
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 0 18px rgba(116,169,255,.35);
}

h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 400;
  letter-spacing: -.02em;
  opacity: 0;
  animation: rise .85s 1.15s ease-out forwards;
}

.statement {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.65;
  font-weight: 300;
  opacity: 0;
  animation: rise .85s 1.32s ease-out forwards;
}

.statement strong { color: var(--text); font-weight: 600; }

.signature {
  margin: 42px 0 0;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(220,225,237,.48);
  opacity: 0;
  animation: fade .9s 1.55s ease-out forwards;
}

footer {
  position: fixed;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: rgba(210,216,228,.34);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .25em;
}

.footer-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

@keyframes letterIn { to { opacity: 1; transform: translateY(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal { from { opacity: 0; transform: scale(.8) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes fade { to { opacity: 1; } }
@keyframes float { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-7px) rotate(2deg)} }
@keyframes drift { from{transform:translate3d(-3%,-2%,0) scale(1)} to{transform:translate3d(6%,5%,0) scale(1.12)} }

@media (max-width:700px) {
  .hero { padding-inline: 18px; }
  .brand { gap: 4px; font-size: clamp(43px, 13vw, 76px); }
  .eyebrow { letter-spacing: .27em; }
  .divider { width: 88vw; }
  .statement { font-size: 17px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}