:root {
  --bg: #02040a;
  --panel: rgba(7, 12, 25, 0.68);
  --text: #f5f7ff;
  --muted: #aab4cc;
  --cyan: #03c8f4;
  --blue: #1266ff;
  --violet: #a72bff;
  --line: rgba(122, 164, 255, 0.2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

button, a { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.background {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 15%, rgba(15, 50, 100, .22), transparent 35%),
    linear-gradient(180deg, #030712 0%, #010207 55%, #03030a 100%);
}
.grid {
  position: absolute;
  inset: 0;
  opacity: .15;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 75%);
}
.orb {
  position: absolute;
  width: 48rem;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .16;
  animation: drift 12s ease-in-out infinite alternate;
}
.orb-one { left: -24rem; top: 20%; background: #006eff; }
.orb-two { right: -25rem; top: 35%; background: #9b1cff; animation-delay: -5s; }
@keyframes drift { to { transform: translate3d(8rem,-3rem,0) scale(1.08); } }

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  opacity: .5;
  animation: floatParticle linear infinite;
}
@keyframes floatParticle {
  from { transform: translateY(105vh); opacity: 0; }
  10%, 80% { opacity: .55; }
  to { transform: translateY(-10vh); opacity: 0; }
}

.hero {
  min-height: 100svh;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 72px 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.eyebrow {
  color: #79dfff;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .38em;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 1050px;
  margin: 22px auto 16px;
  font-size: clamp(2.4rem, 6vw, 5.7rem);
  line-height: 1.02;
  letter-spacing: -.055em;
}
.gradient-text {
  background: linear-gradient(90deg, var(--cyan), var(--blue) 50%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.intro {
  max-width: 800px;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.logo-stage {
  position: relative;
  width: min(900px, 100%);
  height: clamp(185px, 28vw, 285px);
  margin: 46px auto 18px;
  border: 1px solid rgba(94, 150, 255, .35);
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(9,18,38,.9), rgba(3,6,16,.72));
  box-shadow: 0 0 70px rgba(0, 111, 255, .13), inset 0 0 45px rgba(12, 86, 204, .06);
}
.logo-stage::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent 35%, transparent 65%, var(--violet));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.logo-panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(25px, 5vw, 62px);
  opacity: 0;
  transform: scale(.88) translateY(18px);
  filter: blur(10px);
}
.logo-panel img { max-height: 100%; object-fit: contain; }
.logo-southpoint img { width: min(760px, 92%); }
.logo-stratek img { width: min(720px, 90%); }
.logo-panel.is-active { animation: revealLogo 1.15s ease forwards; }
.logo-panel.is-leaving { animation: leaveLogo .95s ease forwards; }
@keyframes revealLogo {
  0% { opacity: 0; transform: scale(.85) translateY(22px); filter: blur(14px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes leaveLogo {
  0% { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.08); filter: blur(14px); }
}
.transition-mark {
  position: absolute;
  left: 50%; top: 50%;
  width: 170px; height: 170px;
  transform: translate(-50%, -50%) scale(.35);
  opacity: 0;
  z-index: 4;
}
.transition-mark span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(65,195,255,.8);
  border-radius: 50%;
}
.transition-mark span:nth-child(2) { inset: 24px; border-color: rgba(96,79,255,.9); }
.transition-mark span:nth-child(3) { inset: 48px; border-color: rgba(186,48,255,.95); }
.transition-mark.is-active { animation: pulseTransition 1.5s ease forwards; }
@keyframes pulseTransition {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.35) rotate(0); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5) rotate(120deg); }
}

.replay-button {
  border: 1px solid rgba(121,184,255,.35);
  border-radius: 999px;
  padding: 10px 18px;
  color: #c5d6f8;
  background: rgba(7,13,27,.65);
  cursor: pointer;
  transition: .25s ease;
}
.replay-button:hover { color: white; border-color: #62c8ff; transform: translateY(-2px); }
.scroll-cue { margin-top: 38px; color: #79859e; font-size: .78rem; }
.mouse { width: 26px; height: 40px; border: 1px solid #66748f; border-radius: 18px; margin: 10px auto 0; padding-top: 7px; }
.mouse div { width: 3px; height: 7px; border-radius: 3px; background: #68d7ff; margin: auto; animation: scrollDot 1.6s infinite; }
@keyframes scrollDot { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

.content-section {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 120px 0;
}
.section-heading { max-width: 780px; margin: 0 auto 58px; text-align: center; }
.section-heading h2,
.statement h2 {
  margin: 15px 0;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.section-heading p, .statement > p { color: var(--muted); font-size: 1.08rem; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.feature-card {
  position: relative;
  padding: 34px;
  min-height: 300px;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(11,18,37,.78), rgba(4,8,18,.6));
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.feature-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -70px;
  bottom: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(112,41,255,.28), transparent 70%);
}
.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(87,178,255,.62);
  box-shadow: 0 20px 45px rgba(0,0,0,.3);
}
.icon-wrap {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  color: white;
  background: linear-gradient(135deg, #00bfee, #315dff 58%, #a929ff);
  box-shadow: 0 10px 28px rgba(38,105,255,.25);
}
.icon-wrap svg { width: 29px; fill: currentColor; }
.feature-card h3 { margin: 24px 0 10px; font-size: 1.35rem; }
.feature-card p { margin: 0; color: var(--muted); }

.statement-section { padding: 40px 18px 130px; }
.statement {
  width: min(1050px, 100%);
  margin: auto;
  padding: clamp(42px, 7vw, 90px);
  text-align: center;
  border: 1px solid rgba(112,150,255,.22);
  border-radius: 34px;
  background:
    radial-gradient(circle at top, rgba(29,80,160,.18), transparent 45%),
    rgba(5,9,20,.78);
  box-shadow: 0 30px 100px rgba(0,0,0,.35);
}
.statement-small { margin: 0 0 24px !important; color: #7fdfff !important; text-transform: uppercase; letter-spacing: .22em; font-size: .78rem !important; font-weight: 800; }
.statement img { width: min(620px, 92%); margin: 0 auto 36px; }
.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 15px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  background: linear-gradient(90deg, #00bbec, #1760ff 55%, #a72cff);
  box-shadow: 0 14px 38px rgba(52,94,255,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cta:hover { transform: translateY(-3px); box-shadow: 0 18px 48px rgba(87,72,255,.42); }
.cta span { font-size: 1.4rem; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
  padding: 28px 0 38px;
  color: #69738a;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .85rem;
}
footer p { margin: 0; }

.reveal { opacity: 0; transform: translateY(32px); transition: .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 820px) {
  .hero { padding-top: 50px; }
  .gradient-text { white-space: normal; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: auto; }
  footer { flex-direction: column; text-align: center; }
}

@media (max-width: 520px) {
  .hero h1 { font-size: 2.55rem; }
  .logo-stage { border-radius: 20px; }
  .logo-panel { padding: 24px; }
  .content-section { padding: 90px 0; }
  .statement-section { padding-bottom: 90px; }
  .statement { border-radius: 24px; }
}

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