.about-replica {
  --w: 1536;
  --h: 1024;
  --purple: #7b45f2;
  --deep: #09090d;
  --copy: #5a5f6f;
  
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  position: relative;
  /* Reset some basic typographies that might be affected by global styles */
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.about-replica * {
  box-sizing: border-box;
}

.about-replica .stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

.about-replica .canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(150, 95, 255, 0.06), rgba(255, 255, 255, 0) 24%),
    #fff;
  transform: none;
}

.about-replica .wave {
  position: absolute;
  left: 0;
  top: 23vh;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0.98;
  pointer-events: none;
}

.about-replica .hero-copy {
  position: absolute;
  top: clamp(36px, 5.6vh, 58px);
  left: 0;
  z-index: 5;
  width: 100%;
  text-align: center;
}

.about-replica .eyebrow {
  margin: 0 0 13px;
  color: var(--sovi-purple);
  font-size: clamp(13px, 1.55vh, 16px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.about-replica h1 {
  margin: 0;
  color: var(--deep);
  font-size: clamp(40px, 5.8vh, 61px);
  font-weight: 850;
  line-height: 1.04;
  letter-spacing: -0.055em;
  width: 100vw;
  white-space: nowrap;
}

.about-replica h1 .accent {
  color: var(--sovi-purple);
}

.about-replica .subcopy {
  margin: 22px auto 0;
  width: min(820px, 82vw);
  text-align: left;
  color: var(--copy);
  font-size: clamp(15px, 1.85vh, 19px);
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: -0.25px;
}

.about-replica .subcopy p {
  margin: 0;
}

.about-replica .subcopy p + p {
  margin-top: 11px;
}

.about-replica .visual {
  position: absolute;
  inset: 0;
  top: 19.6vh;
  z-index: 3;
  pointer-events: none;
}

.about-replica .center-halo {
  position: absolute;
  left: 50vw;
  top: 48vh;
  width: clamp(240px, 31.4vh, 322px);
  height: clamp(240px, 31.4vh, 322px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.86) 0 18%, rgba(255, 255, 255, 0.42) 33%, rgba(255, 255, 255, 0.12) 57%, rgba(255, 255, 255, 0) 72%);
  box-shadow:
    0 0 72px rgba(255, 255, 255, 0.78),
    inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.about-replica .center-halo::before,
.about-replica .center-halo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 38px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 34px rgba(255, 255, 255, 0.62);
}

.about-replica .center-halo::after {
  inset: 76px;
  border-color: rgba(255, 255, 255, 0.58);
}

.about-replica .logo-mark {
  position: absolute;
  left: 50vw;
  top: 48vh;
  z-index: 5;
  width: clamp(112px, 14.1vh, 144px);
  height: clamp(112px, 14.1vh, 144px);
  display: grid;
  place-items: center;
  border-radius: clamp(29px, 3.7vh, 38px);
  color: #fff;
  font-size: clamp(60px, 7.6vh, 78px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -4px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 36%),
    linear-gradient(139deg, #a55bff 5%, #7c45f2 49%, #6f43e9 100%);
  box-shadow:
    0 22px 58px rgba(126, 70, 237, 0.46),
    0 0 72px rgba(164, 99, 255, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
  text-shadow: 0 1px 2px rgba(56, 18, 122, 0.24);
}

.about-replica .feature-card {
  position: absolute;
  z-index: 6;
  width: clamp(84px, 9.6vh, 98px);
  min-height: clamp(94px, 10.6vh, 109px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(12px, 1.55vh, 16px) 9px 12px;
  border: 1px solid rgba(139, 92, 246, 0.06);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(254, 253, 255, 0.9) 100%);
  box-shadow:
    0 22px 42px rgba(99, 64, 181, 0.08),
    0 7px 18px rgba(53, 38, 91, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.about-replica .feature-card .icon {
  width: clamp(42px, 5vh, 51px);
  height: clamp(42px, 5vh, 51px);
  display: grid;
  place-items: center;
  margin-bottom: clamp(7px, 1vh, 10px);
  border-radius: 50%;
  color: #8450f2;
  background:
    radial-gradient(circle at 48% 45%, rgba(255, 255, 255, 0.9) 0 30%, rgba(234, 221, 255, 0.92) 31% 63%, rgba(247, 241, 255, 0.5) 64% 100%);
  filter: drop-shadow(0 6px 10px rgba(132, 80, 242, 0.12));
}

.about-replica .feature-card svg {
  width: clamp(28px, 3.32vh, 34px);
  height: clamp(28px, 3.32vh, 34px);
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.about-replica .feature-card .solid {
  fill: currentColor;
  stroke: none;
}

.about-replica .feature-card .label {
  color: #17173d;
  font-size: clamp(11px, 1.24vh, 12.7px);
  font-weight: 760;
  line-height: 1.35;
  letter-spacing: -0.23px;
  text-align: center;
  white-space: nowrap;
}

.about-replica .ask { left: 33.1vw; top: 35.2vh; transform: translate(-50%, -50%); }
.about-replica .notes { left: 63.4vw; top: 34.3vh; transform: translate(-50%, -50%); }
.about-replica .assignment { left: 22vw; top: 49.6vh; transform: translate(-50%, -50%); padding-top: clamp(14px, 1.85vh, 19px); min-height: clamp(104px, 11.9vh, 122px); }
.about-replica .recording { left: 79vw; top: 43vh; transform: translate(-50%, -50%); min-height: clamp(94px, 10.6vh, 109px); }
.about-replica .quiz { left: 31.3vw; top: 60vh; transform: translate(-50%, -50%); min-height: clamp(94px, 10.7vh, 110px); }
.about-replica .writing { left: 71.7vw; top: 57.4vh; transform: translate(-50%, -50%); min-height: clamp(94px, 10.7vh, 110px); }
.about-replica .concept { left: 43.7vw; top: 65.3vh; transform: translate(-50%, -50%); min-height: clamp(94px, 10.7vh, 110px); }
.about-replica .video { left: 60.7vw; top: 64.1vh; transform: translate(-50%, -50%); min-height: clamp(104px, 12vh, 123px); padding-top: clamp(13px, 1.75vh, 18px); }

.about-replica .footer-copy {
  position: absolute;
  left: 0;
  top: 79vh;
  z-index: 5;
  width: 100%;
  text-align: center;
}

.about-replica .footer-copy h2 {
  margin: 0;
  color: #050508;
  font-size: clamp(34px, 4.85vh, 50px);
  font-weight: 860;
  line-height: 1.06;
  letter-spacing: -2.8px;
}

.about-replica .footer-copy .gradient {
  display: inline-block;
  margin-top: clamp(5px, 0.95vh, 10px);
  font-size: clamp(34px, 4.95vh, 51px);
  letter-spacing: -3.2px;
  background: linear-gradient(90deg, #6a76d7 1%, #7b67e8 30%, #9058f1 62%, #bd50fb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-replica .divider {
  position: absolute;
  top: 94.1vh;
  left: 50vw;
  z-index: 5;
  width: 254px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: #c5a4ff;
  transform: translateX(-50%);
}

.about-replica .divider::before,
.about-replica .divider::after {
  content: "";
  width: 103px;
  height: 2px;
  background: linear-gradient(90deg, rgba(200, 167, 255, 0), rgba(200, 167, 255, 0.62));
}

.about-replica .divider::after {
  background: linear-gradient(90deg, rgba(200, 167, 255, 0.62), rgba(200, 167, 255, 0));
}

.about-replica .spark {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(143, 82, 255, 0.2));
}

@media (max-width: 900px) {
  .about-replica .ask { left: 31vw; }
  .about-replica .notes { left: 67vw; }
  .about-replica .assignment { left: 18vw; }
  .about-replica .recording { left: 82vw; }
  .about-replica .quiz { left: 27vw; }
  .about-replica .writing { left: 74vw; }
  .about-replica .concept { left: 42vw; }
  .about-replica .video { left: 61vw; }
}