/* ═══════════════════════════════════════
   HELIA AOS — Dedicated Page (dark world)
═══════════════════════════════════════ */

/* Dark body — overrides base.css cream */
.AOS-BODY {
  background: #06050A;
  color: var(--c);
}
.AOS-BODY::after {
  background: radial-gradient(circle, rgba(139,92,246,.28) 0%, transparent 55%);
}


/* Dark nav override — smooth scroll state */
.NAV-DARK {
  background: rgba(8,7,12,.55) !important;
  border-bottom: 1px solid transparent !important;
  transition: background .5s cubic-bezier(.22,1,.36,1), border-color .5s cubic-bezier(.22,1,.36,1), backdrop-filter .5s !important;
}
.NAV-DARK.scrolled {
  background: rgba(8,7,12,.88) !important;
  border-bottom-color: rgba(167,139,250,.18) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.NAV-DARK .NLOGO { color: #fff }
.NAV-DARK .NLOGO span {
  color: var(--p2);
}
.NAV-DARK .NDOT {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}
.NAV-DARK .NLINK { color: rgba(244,242,236,.6) }
.NAV-DARK .NLINK:hover { color: #fff }
.NAV-DARK .NLINK.active { color: #fff }
.NAV-DARK .NLINK-AOS { color: var(--p2) }
.NAV-DARK .NLINK-AOS:hover { color: #fff }
.NAV-DARK .NDOT { background: #22c55e }

/* Dark-Page Nav-CTA — matched zum Hero (AOSP-BF): solides Purple, weisser Text */
.NCTA.NCTA-AOS {
  background: var(--p1);
  color: #fff;
  border: 1px solid var(--p1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 22px -8px rgba(139,92,246,.55);
}
.NCTA.NCTA-AOS:hover {
  background: var(--p3);
  border-color: var(--p3);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(109,40,217,.7);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ════════════ HERO ════════════ */
#AOSP-HERO {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 140px 44px 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  background: transparent;
}

.AOSP-GLOW {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  filter: blur(10px);
}
.AOSP-GLOW-1 {
  top: 20px; right: -120px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(139,92,246,.34) 0%, transparent 60%);
  animation: aospGlow1 9s ease-in-out infinite;
}
.AOSP-GLOW-2 {
  bottom: -100px; left: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(167,139,250,.26) 0%, transparent 60%);
  animation: aospGlow2 11s ease-in-out -3s infinite;
}
@keyframes aospGlow1 {
  0%,100% { opacity: .65; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.06); }
}
@keyframes aospGlow2 {
  0%,100% { opacity: .55; transform: scale(1); }
  50%     { opacity: .9;  transform: scale(1.08); }
}

.AOSP-HERO-IN {
  position: relative;
  z-index: 5;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
}

/* ── UNIFIED HERO ENTRY — mirrors home (hpFadeUp / hpWordUp) ── */
@keyframes hpFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hpWordUp { to { opacity: 1; transform: translateY(0); } }

/* Status bar (dark) */
.AOSP-STATUS {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(167,139,250,.08);
  border: 1px solid rgba(167,139,250,.28);
  border-radius: 100px;
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .15em;
  color: rgba(244,242,236,.7);
  margin-bottom: 32px;
  opacity: 0;
  animation: hpFadeUp .8s .1s forwards cubic-bezier(.22,1,.36,1);
}
.AOSP-STATUS strong {
  color: var(--p2);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.AOSP-SEP {
  width: 3px; height: 3px;
  background: rgba(244,242,236,.35);
  border-radius: 50%;
}
.AOSP-LIVE {
  width: 7px; height: 7px;
  background: var(--p2);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--p2);
  animation: aospLivePulse 1.6s ease-in-out infinite;
}
@keyframes aospLivePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .5; transform: scale(1.3); }
}

/* Title */
.AOSP-TI {
  font-family: var(--S);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 92px);
  line-height: .96;
  letter-spacing: -.03em;
  margin-bottom: 32px;
  color: #fff;
  max-width: 1200px;
}
.AOSP-L {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  animation: hpWordUp .9s forwards cubic-bezier(.22,1,.36,1);
}
.AOSP-L1 { animation-delay: .3s; }
.AOSP-L2 {
  animation-delay: .55s;
  margin-top: 14px;
  font-family: var(--R);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.012em;
  font-size: .82em;
  color: rgba(244,242,236,.85);
}

.AOSP-TYPED {
  color: var(--p2);
  font-weight: 600;
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.AOSP-TYPED::after {
  content: "|";
  color: var(--p2);
  font-family: var(--S);
  font-weight: 300;
  font-style: normal;
  margin-left: 4px;
  animation: aospCaret 1s steps(2) infinite;
}
@keyframes aospCaret { 50% { opacity: 0; } }
.AOSP-TW {
  position: relative;
  display: inline-block;
}
.AOSP-TW::before {
  content: "";
  position: absolute;
  inset: -20% -8%;
  background: radial-gradient(ellipse, rgba(139,92,246,.32) 0%, transparent 70%);
  z-index: -1;
  filter: blur(24px);
  animation: aospGlowPulse 3s ease-in-out infinite;
}
@keyframes aospGlowPulse {
  0%,100% { opacity: .6; }
  50%     { opacity: 1; }
}

.AOSP-LEAD {
  font-size: 16px;
  color: rgba(244,242,236,.7);
  line-height: 1.65;
  max-width: 680px;
  margin: 0 auto 36px;
  opacity: 0;
  animation: hpFadeUp .8s 1.2s forwards cubic-bezier(.22,1,.36,1);
}
.AOSP-LEAD strong { color: var(--p2); font-weight: 600 }

.AOSP-CTAS {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 44px;
  opacity: 0;
  animation: hpFadeUp .8s 1.35s forwards cubic-bezier(.22,1,.36,1);
}
.AOSP-BF {
  padding: 15px 28px;
  background: var(--p1);
  color: #fff;
  border: 2px solid var(--p1);
  border-radius: 100px;
  font-family: var(--S);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: all .3s;
  position: relative;
  box-shadow: 0 10px 30px -10px rgba(139,92,246,.55);
}
.AOSP-BF:hover {
  background: var(--p3);
  border-color: var(--p3);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -10px rgba(109,40,217,.75);
}
.AOSP-BF::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid var(--p1);
  border-radius: 100px;
  opacity: 0;
  animation: aospRingPulse 2.5s ease-out infinite;
}
@keyframes aospRingPulse {
  0%   { opacity: .6; transform: scale(.93); }
  70%  { opacity: 0;  transform: scale(1.15); }
  100% { opacity: 0;  transform: scale(1.2); }
}
.AOSP-BG {
  padding: 15px 26px;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(244,242,236,.25);
  border-radius: 100px;
  font-family: var(--S);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: all .3s;
}
.AOSP-BG:hover {
  border-color: var(--p2);
  background: rgba(167,139,250,.08);
}

.AOSP-TRUST {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 14px 26px;
  background: rgba(167,139,250,.06);
  border: 1px solid rgba(167,139,250,.15);
  border-radius: 100px;
  opacity: 0;
  animation: hpFadeUp .8s 1.5s forwards cubic-bezier(.22,1,.36,1);
}
.AOSP-TI-I {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--M);
  font-size: 10px;
  color: rgba(244,242,236,.55);
  letter-spacing: .08em;
}
.AOSP-TI-I strong {
  font-family: var(--S);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}
.AOSP-TI-I::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--p2);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--p2);
}

@keyframes aospFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════ TECH SECTION ════════════ */
#AOSP-TECH {
  position: relative;
  z-index: 2;
  padding: 120px 44px 140px;
  background: transparent;
}
#AOSP-TECH::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(167,139,250,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,.03) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
}
.AOSP-IN {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

.AOSP-HEAD {
  text-align: center;
  margin-bottom: 60px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.AOSP-HEAD-SMALL {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  max-width: 100%;
  margin-bottom: 28px;
  text-align: left;
  flex-wrap: wrap;
  gap: 12px;
}

.AOSP-PILL {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--M);
  font-size: 10px;
  color: var(--p2);
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid rgba(167,139,250,.3);
  border-radius: 100px;
  background: rgba(167,139,250,.06);
  font-weight: 500;
  margin-bottom: 22px;
}
.AOSP-PILL-DOT {
  width: 6px; height: 6px;
  background: var(--p2);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--p2);
  animation: aospLivePulse 2s ease-in-out infinite;
}

.AOSP-H2 {
  font-family: var(--S);
  font-weight: 900;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #fff;
  margin-bottom: 16px;
}
.AOSP-H3 {
  font-family: var(--S);
  font-weight: 900;
  font-size: clamp(26px, 2.8vw, 40px);
  letter-spacing: -.025em;
  line-height: 1;
  color: #fff;
}
.AOSP-SUB {
  font-size: 15px;
  color: rgba(244,242,236,.6);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
}

/* Tech Cards */
.AOSP-CARDS {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 80px;
}
.AOSP-C {
  background: rgba(20,15,40,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(167,139,250,.18);
  border-radius: 16px;
  padding: 28px 28px 26px;
  position: relative;
  overflow: hidden;
  transition: all .4s cubic-bezier(.22,1,.36,1);
}
.AOSP-C::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, rgba(139,92,246,.22) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.AOSP-C:hover {
  border-color: rgba(167,139,250,.4);
  transform: translateY(-4px);
  box-shadow: 0 25px 60px -25px rgba(139,92,246,.5);
}
.AOSP-C:hover::before { opacity: 1 }
.AOSP-C > * { position: relative; z-index: 1 }

.AOSP-C-NUM {
  font-family: var(--M);
  font-size: 10px;
  color: rgba(244,242,236,.45);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.AOSP-C-ICO {
  height: 80px;
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}
.AOSP-C-ICO svg { width: 80px; height: auto; }
.AOSP-C-TI {
  font-family: var(--S);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  letter-spacing: -.015em;
  margin: 0 0 12px;
}
.AOSP-C-D {
  font-size: 13.5px;
  color: rgba(244,242,236,.62);
  line-height: 1.6;
  margin-bottom: 22px;
}
.AOSP-C-CHG {
  padding-top: 18px;
  border-top: 1px solid rgba(167,139,250,.12);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all .5s cubic-bezier(.22,1,.36,1);
}
.AOSP-C:hover .AOSP-C-CHG {
  opacity: 1;
  max-height: 180px;
}
.AOSP-C-CHG-LBL {
  font-family: var(--M);
  font-size: 9px;
  color: var(--p2);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 600;
}
.AOSP-C-CHG-TXT {
  font-size: 12.5px;
  color: rgba(244,242,236,.78);
  line-height: 1.55;
  font-style: italic;
}

/* Next-gen block */
.AOSP-NEXTGEN {
  background: linear-gradient(135deg, rgba(139,92,246,.12) 0%, rgba(30,21,64,.25) 60%, rgba(12,11,18,.2) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(167,139,250,.25);
  border-radius: 20px;
  padding: 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  max-width: 920px;
  margin: 0 auto;
}
.AOSP-NEXTGEN::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(139,92,246,.28) 0%, transparent 65%);
  pointer-events: none;
}
.AOSP-NG-PILL {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--M);
  font-size: 10px;
  color: var(--p2);
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid rgba(167,139,250,.35);
  border-radius: 100px;
  background: rgba(167,139,250,.1);
  font-weight: 500;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.AOSP-NG-TI {
  position: relative;
  z-index: 1;
  font-family: var(--S);
  font-weight: 900;
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 18px;
}
.AOSP-NG-LEAD {
  position: relative;
  z-index: 1;
  font-size: 15.5px;
  color: rgba(244,242,236,.72);
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 28px;
}
.AOSP-NG-CTAS {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ════════════ COHORT ════════════ */
#AOSP-COHORT {
  padding: 80px 44px;
  background: transparent;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(167,139,250,.08);
}
.AOSP-COH-STATUS {
  font-family: var(--M);
  font-size: 10px;
  color: rgba(244,242,236,.45);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.AOSP-COH-STATUS strong {
  color: var(--p2);
  font-weight: 600;
}
.AOSP-COH-GRID {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(167,139,250,.12);
  border: 1px solid rgba(167,139,250,.12);
  border-radius: 12px;
  overflow: hidden;
}
.AOSP-PT {
  background: rgba(10,9,16,.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 18px 20px;
  transition: background .3s;
  display: block;
  text-decoration: none;
  color: inherit;
}
.AOSP-PT:hover { background: rgba(167,139,250,.14) }
.AOSP-PT-BR {
  font-family: var(--M);
  font-size: 8px;
  color: var(--p2);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.AOSP-PT-NM {
  font-family: var(--S);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 3px;
}
.AOSP-PT-LOC {
  font-family: var(--M);
  font-size: 10px;
  color: rgba(244,242,236,.4);
}
.AOSP-PT-OPEN {
  background: transparent;
  border: 1px dashed rgba(167,139,250,.35);
  cursor: pointer;
}
.AOSP-PT-OPEN .AOSP-PT-NM { color: rgba(244,242,236,.6) }
.AOSP-PT-OPEN .AOSP-PT-LOC { color: var(--p2) }
.AOSP-PT-OPEN:hover {
  background: rgba(167,139,250,.1);
  border-color: var(--p2);
}

/* ════════════ APPLY BANNER ════════════ */
#AOSP-APPLY {
  position: relative;
  z-index: 2;
  padding: 40px 44px 100px;
  background: transparent;
}
.AOSP-APL {
  background: linear-gradient(135deg, rgba(139,92,246,.14) 0%, rgba(30,21,64,.3) 55%, rgba(12,11,18,.25) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(167,139,250,.22);
  border-radius: 20px;
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
  max-width: 1280px;
  margin: 0 auto;
}
.AOSP-APL::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(167,139,250,.3) 0%, transparent 65%);
  pointer-events: none;
}
.AOSP-APL-L { position: relative; z-index: 1 }
.AOSP-APL-R {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.AOSP-APL-KICKER {
  font-family: var(--M);
  font-size: 10px;
  color: var(--p2);
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 500;
}
.AOSP-APL-TI {
  font-family: var(--S);
  font-weight: 900;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: #fff;
  margin-bottom: 12px;
}
.AOSP-APL-LEAD {
  font-size: 14.5px;
  color: rgba(244,242,236,.7);
  line-height: 1.6;
  max-width: 560px;
}
.AOSP-APL-CTA {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  background: var(--p2);
  color: #fff;
  font-family: var(--S);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: 100px;
  transition: all .3s;
  box-shadow: 0 12px 36px -10px rgba(167,139,250,.55);
}
.AOSP-APL-CTA:hover {
  background: var(--p1);
  transform: translateY(-2px);
  box-shadow: 0 16px 44px -10px rgba(139,92,246,.75);
}
.AOSP-APL-NOTE {
  font-family: var(--M);
  font-size: 9px;
  color: rgba(244,242,236,.38);
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* ════════════ FOOTER ════════════ */
.FOOTER-DARK {
  position: relative;
  z-index: 2;
  background: transparent;
  color: rgba(244,242,236,.5);
  padding: 28px 44px;
  border-top: 1px solid rgba(167,139,250,.1);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--M);
  font-size: 10px;
  letter-spacing: .12em;
}
.FOOTER-DARK .FC { line-height: 1.6 }

/* ════════════ 3-SECTION LAYOUT: Desktop / Phone / Server ════════════ */
.AOSP-SPLIT-SEC {
  position: relative;
  z-index: 3;
  padding: 100px 44px;
  background: transparent;
}
.AOSP-SPLIT {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 60px;
  align-items: center;
}
.AOSP-SPLIT-L {
  position: relative;
  color: #fff;
}
.AOSP-SPLIT-L .AOSP-PILL { margin-bottom: 22px }
.AOSP-SPLIT-L .AOSP-H2 {
  font-family: var(--S);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 62px);
  line-height: .98;
  letter-spacing: -.028em;
  color: #fff;
  margin-bottom: 20px;
}
.AOSP-SPLIT-L .AOSP-H2 .F-ACC {
  font-family: var(--R);
  font-style: italic;
  font-weight: 500;
  color: var(--p2);
  letter-spacing: -.012em;
}
.AOSP-SPLIT-L .AOSP-SUB {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(244,242,236,.7);
  margin-bottom: 24px;
  max-width: 500px;
}
.AOSP-POINTS {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.AOSP-POINTS li {
  font-family: var(--M);
  font-size: 12px;
  color: rgba(244,242,236,.78);
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}
.AOSP-POINTS li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--p2);
  font-weight: 600;
}
.AOSP-SPLIT-R {
  position: relative;
}
@media (max-width: 900px) {
  .AOSP-SPLIT { grid-template-columns: 1fr; gap: 40px }
  .AOSP-SPLIT-SEC { padding: 60px 24px }
}

/* ════════════ DESKTOP (centered) SECTION ════════════ */
.AOSP-CENTER-SEC {
  position: relative;
  z-index: 3;
  padding: 40px 44px 40px;
  background: transparent;
}
.AOSP-CENTER-HEAD {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 32px;
  color: #fff;
}
.AOSP-CENTER-HEAD .AOSP-PILL { margin-bottom: 20px }
.AOSP-CENTER-HEAD .AOSP-H2 {
  font-family: var(--S);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: .98;
  letter-spacing: -.028em;
  color: #fff;
  margin: 0 auto 20px;
}
.AOSP-CENTER-HEAD .F-ACC {
  font-family: var(--R);
  font-style: italic;
  font-weight: 500;
  color: var(--p2);
  letter-spacing: -.012em;
}
.AOSP-CENTER-HEAD .AOSP-SUB {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(244,242,236,.7);
  max-width: 640px;
  margin: 0 auto;
}
.AOSP-CENTER-STAGE {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.AOSP-CENTER-STAGE-PHONE {
  max-width: 460px;
}

/* ── HOS-MORPH inside AOSP-CENTER-HEAD: morphing title between desktop/phone ── */
#AOSP-MORPH-SEC .HOS-MORPH {
  position: relative;
  perspective: 1000px;
  min-height: 280px;
  max-width: 860px;
  margin: 0 auto;
}
#AOSP-MORPH-SEC .HM-STATE {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  will-change: transform, opacity;
  transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .55s cubic-bezier(.22,1,.36,1);
  transform-origin: center center;
  backface-visibility: hidden;
}
#AOSP-MORPH-SEC .HM-STATE.hm-hidden {
  opacity: 0;
  transform: rotateX(-8deg) translateY(-20px) scale(.96);
  pointer-events: none;
}
#AOSP-MORPH-SEC .HM-STATE.hm-exit {
  opacity: 0;
  transform: rotateX(8deg) translateY(20px) scale(.96);
  pointer-events: none;
}
#AOSP-MORPH-SEC .HM-STATE .AOSP-PILL { margin-bottom: 22px }
#AOSP-MORPH-SEC .HM-STATE .AOSP-SUB { max-width: 640px; margin-left: auto; margin-right: auto }

@media (max-width: 768px) {
  #AOSP-MORPH-SEC .HOS-MORPH { min-height: 320px }
}
@media (max-width: 900px) {
  .AOSP-CENTER-SEC { padding: 60px 24px }
}

/* ── AOS Toggle: segmented pill in hero-CTA style with sliding indicator ── */
.AOS-BODY .HOS-TOGGLE-AOS {
  display: inline-flex;
  position: relative;
  margin: 24px auto 0;
  padding: 4px;
  gap: 0;
  border: 2px solid rgba(244,242,236,.22);
  border-radius: 100px;
  background: rgba(244,242,236,.02);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  isolation: isolate;
}
/* Sliding purple indicator — matches AOSP-BF look */
.AOS-BODY .HOS-TOGGLE-AOS .HOS-TOGGLE-IND {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  background: var(--p1);
  border-radius: 100px;
  box-shadow: 0 10px 30px -10px rgba(139,92,246,.55);
  transition: transform .5s cubic-bezier(.22,1,.36,1), background .35s;
  pointer-events: none;
  z-index: 0;
}
.AOS-BODY .HOS-TOGGLE-AOS[data-active="phone"] .HOS-TOGGLE-IND {
  transform: translateX(100%);
}
/* Buttons sit on top of the indicator */
.AOS-BODY .HOS-TOGGLE-AOS .HOS-TOGGLE-BTN {
  position: relative;
  z-index: 1;
  padding: 11px 18px;
  min-width: 110px;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 100px;
  color: rgba(244,242,236,.65);
  font-family: var(--S);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color .35s cubic-bezier(.22,1,.36,1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.AOS-BODY .HOS-TOGGLE-AOS .HOS-TOGGLE-BTN svg {
  stroke: currentColor;
  transition: stroke .35s;
}
.AOS-BODY .HOS-TOGGLE-AOS .HOS-TOGGLE-BTN:hover {
  color: #fff;
  background: transparent;
  border-color: transparent;
}
.AOS-BODY .HOS-TOGGLE-AOS .HOS-TOGGLE-BTN.on {
  color: #fff;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
@media (max-width: 480px) {
  .AOS-BODY .HOS-TOGGLE-AOS .HOS-TOGGLE-BTN { min-width: 110px; padding: 11px 18px; font-size: 13px }
}

/* Desktop stage matches the hero 3-card grid width (1200px) — see !important rule below at #S-HOS .HOS-DESK */
.AOS-BODY #AOSP-MORPH-SEC .AOSP-CENTER-STAGE { max-width: 1200px }

/* ════════════ PHONE MOCKUP (static) ════════════ */
.AOSP-PHONE-MOCK {
  position: relative;
  width: 320px;
  height: 640px;
  margin: 0 auto;
  border-radius: 44px;
  background: linear-gradient(160deg, #fefefe 0%, #e8e5dd 100%);
  border: 1px solid rgba(167,139,250,.2);
  box-shadow:
    0 40px 100px -20px rgba(0,0,0,.55),
    0 20px 50px -10px rgba(139,92,246,.25),
    inset 0 1px 0 rgba(255,255,255,.7);
  padding: 14px;
}
.AOSP-PHONE-NOTCH {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 22px;
  background: #0C0B08;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.AOSP-PHONE-SCR {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(240,237,230,.4) 0%, rgba(232,228,219,.55) 100%),
    url('../assets/xztm2wi709se1 (1).jpeg') center/cover no-repeat;
  border: 1px solid rgba(13,12,10,.08);
  padding: 40px 14px 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.AOSP-PHONE-STATUS {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--M);
  font-size: 9px;
  color: rgba(12,11,8,.65);
  letter-spacing: .12em;
  padding: 0 8px 2px;
}
.AOSP-PHONE-STATUS-R {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--p3);
  font-weight: 600;
}
.AOSP-PHONE-DOT {
  width: 5px; height: 5px;
  background: var(--p1);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--p1);
  animation: aospLivePulse 1.6s ease-in-out infinite;
}
.AOSP-PHONE-APPS {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 4px 0 8px;
}
.AOSP-PHONE-APP {
  aspect-ratio: 1;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(13,12,10,.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s;
}
.AOSP-PHONE-APP img { width: 20px; height: 20px; display: block }
.AOSP-PHONE-APP:hover { transform: translateY(-2px) }
.AOSP-PHONE-CARD {
  background: linear-gradient(135deg, rgba(139,92,246,.1) 0%, rgba(255,255,255,.8) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(167,139,250,.22);
  border-radius: 14px;
  padding: 10px 12px;
}
.AOSP-PHONE-CARD-HEAD {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.AOSP-PHONE-CARD-LBL {
  font-family: var(--M);
  font-size: 8.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--p3);
  font-weight: 700;
}
.AOSP-PHONE-CARD-TS {
  font-family: var(--M);
  font-size: 8px;
  color: rgba(12,11,8,.45);
}
.AOSP-PHONE-CARD-TXT {
  font-family: var(--S);
  font-size: 12px;
  color: var(--k);
  font-weight: 500;
  line-height: 1.35;
}
.AOSP-PHONE-CARD-PROG {
  height: 3px;
  border-radius: 2px;
  background: rgba(167,139,250,.15);
  overflow: hidden;
  margin-top: 4px;
}
.AOSP-PHONE-CARD-PROG span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--p1), var(--p2));
  width: 65%;
  animation: aospPhonePulse 3s ease-in-out infinite;
}
@keyframes aospPhonePulse {
  0%,100% { width: 58%; opacity: .85 }
  50%     { width: 72%; opacity: 1 }
}
.AOSP-PHONE-CMD {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(167,139,250,.22);
  border-radius: 100px;
  padding: 10px 14px;
}
.AOSP-PHONE-CMD-DOT {
  width: 6px; height: 6px;
  background: var(--p1);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--p1);
  animation: aospLivePulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.AOSP-PHONE-CMD-TXT {
  font-family: var(--R);
  font-style: italic;
  font-size: 12px;
  color: rgba(12,11,8,.7);
}
/* Dock — 1:1 matching the desktop HOS-DOCK pill */
.AOSP-PHONE-DOCK {
  align-self: center;
  display: inline-flex;
  gap: 3px;
  padding: 5px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(13,12,10,.06);
  box-shadow:
    0 8px 24px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.6);
  margin-top: auto;
}
.AOSP-PHONE-DI {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--k);
  background: transparent;
  transition: all .25s cubic-bezier(.16,1,.3,1);
}
.AOSP-PHONE-DI:hover {
  background: rgba(0,0,0,.05);
  transform: translateY(-2px);
}
.AOSP-PHONE-DI.on {
  background: rgba(13,12,10,.08);
}
.AOSP-PHONE-DI svg {
  stroke: var(--k);
  stroke-width: 1.8;
}

/* ════════════ SERVER SECTION — split: Text links · HELIA Core rechts ════════════ */
#AOSP-SERVER-SEC {
  position: relative;
  z-index: 3;
  padding: 30px 44px 110px;
  background: transparent;
}
.AOSP-SERVER-IN {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 60px;
  align-items: center;
}
.AOSP-SERVER-LEFT { color: #fff; max-width: 560px }
.AOSP-SERVER-LEFT .AOSP-PILL { margin-bottom: 22px }
.AOSP-SERVER-LEFT .AOSP-H2 {
  font-family: var(--S);
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: .98;
  letter-spacing: -.028em;
  color: #fff;
  margin: 0 0 22px;
}
.AOSP-SERVER-LEFT .F-ACC {
  font-family: var(--R);
  font-style: italic;
  font-weight: 500;
  color: var(--p2);
  letter-spacing: -.012em;
}
.AOSP-SERVER-LEFT .AOSP-LEAD {
  font-size: 16px;
  color: rgba(244,242,236,.72);
  line-height: 1.7;
  margin: 0 0 30px;
  max-width: 540px;
  animation: none;
  opacity: 1;
}
.AOSP-SERVER-LEFT .AOSP-LEAD em {
  font-family: var(--R);
  font-style: italic;
  color: rgba(244,242,236,.55);
}
.AOSP-SERVER-LEFT .AOSP-LEAD strong { color: var(--p2); font-weight: 600 }

.AOSP-SERVER-BULLETS {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.AOSP-SERVER-BULLETS li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 15.5px;
  color: rgba(244,242,236,.88);
  line-height: 1.5;
}
.AOSP-CHK {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(139,92,246,.14);
  border: 1px solid rgba(167,139,250,.45);
  color: var(--p2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.AOSP-SERVER-RIGHT {
  position: relative;
  min-height: 540px;
}
#AOSP-SERVER-SEC #S-NET {
  position: relative !important;
  height: 100% !important;
  min-height: 540px !important;
  width: 100%;
  margin: 0;
  inset: auto !important;
}

@media (max-width: 960px) {
  .AOSP-SERVER-IN { grid-template-columns: 1fr; gap: 50px }
  .AOSP-SERVER-LEFT { max-width: 720px; margin: 0 auto; text-align: left }
  .AOSP-SERVER-RIGHT { min-height: 460px }
  #AOSP-SERVER-SEC #S-NET { min-height: 460px !important }
}
@media (max-width: 600px) {
  #AOSP-SERVER-SEC { padding: 60px 24px 80px }
  .AOSP-SERVER-RIGHT { min-height: 380px }
  #AOSP-SERVER-SEC #S-NET { min-height: 380px !important }
}

/* ════════════ S-HOS DARK OVERRIDE (AOS page only) — fits inside the centered stage ════════════ */
body.AOS-BODY #S-HOS {
  background: transparent !important;
  overflow: visible;
  min-height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  display: block !important;
}
body.AOS-BODY #S-HOS::before { display: none; }
body.AOS-BODY #S-HOS .HOS-DESK {
  width: 100% !important;
  max-width: 1200px !important;
  height: min(620px, 66vh) !important;
  margin: 0 auto !important;
}
body.AOS-BODY #S-HOS .HOS-DESK.phone {
  max-width: 320px !important;
}
body.AOS-BODY #S-HOS .HOS-TOP { color: #fff; z-index: 3; position: relative; }
body.AOS-BODY #S-HOS .HM-EY { color: rgba(244,242,236,.55); }
/* match the hero title style — Outfit 500, loose tracking, not bold */
body.AOS-BODY #S-HOS .HM-TI {
  font-family: var(--S);
  font-weight: 500 !important;
  font-size: clamp(36px, 5vw, 84px) !important;
  letter-spacing: -.028em !important;
  line-height: .98 !important;
  color: #fff;
}
body.AOS-BODY #S-HOS .HM-TI-G {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--R) !important;
  font-style: italic;
  font-weight: 500 !important;
  letter-spacing: -.012em !important;
  font-size: .8em !important;
  color: var(--p2) !important;
}
/* Desktop + Phone stay in original LIGHT styling — matches the light cards above.
   Only the section bg and the title area live on the dark hero-grid backdrop. */

/* Hide floating app icons around the phone on AOS — not wanted */
body.AOS-BODY #S-HOS .HOS-FLOAT { display: none !important; }

/* Store badges: keep readable on the dark surrounding */
body.AOS-BODY #S-HOS .HOS-STORE {
  background: rgba(244,242,236,.08);
  color: rgba(244,242,236,.7);
  border-color: rgba(167,139,250,.2);
}

/* Slight extra shadow so the desk pops on dark bg */
body.AOS-BODY #S-HOS .HOS-DESK {
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.65),
    0 10px 30px -8px rgba(139,92,246,.22),
    0 0 0 1px rgba(167,139,250,.15) !important;
}

/* Custom wallpaper image — inside desktop and phone modes */
body.AOS-BODY #S-HOS .HOS-DESK,
body.AOS-BODY #S-HOS .HOS-DESK.phone {
  background:
    linear-gradient(180deg, rgba(240,237,230,.12) 0%, rgba(232,228,219,.18) 100%),
    url('../assets/xztm2wi709se1 (1).jpeg') center/cover no-repeat !important;
}


/* soft hero → dark S-HOS transition — no light fade needed since both are dark */
body.AOS-BODY #AOSP-HERO::after {
  display: none;
}

/* ════════════ NETWORK LAYER — shown only in the dedicated net-scene ════════════ */
body.AOS-BODY #S-HOS .HOS-DESK { position: relative; z-index: 2; }
.HOS-NET-LAYER {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: scale(.96);
  transition: opacity 1.4s cubic-bezier(.22,1,.36,1), transform 1.6s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
body.AOS-BODY #S-HOS.stage-net .HOS-NET-LAYER {
  opacity: 1;
  transform: scale(1);
}
.HOS-NET-LAYER #S-NET {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
}
/* Desk glass container smooth transitions across stages */
body.AOS-BODY #S-HOS .HOS-DESK {
  will-change: opacity, transform;
}
body.AOS-BODY #S-HOS.stage-net .HOS-DESK {
  opacity: 0;
  transform: scale(.94) translateY(12px);
  pointer-events: none;
  transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1.2s cubic-bezier(.22,1,.36,1);
}
body.AOS-BODY #S-HOS.stage-desk .HOS-DESK,
body.AOS-BODY #S-HOS.stage-phone .HOS-DESK {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.3s cubic-bezier(.22,1,.36,1), max-width 1.1s cubic-bezier(.4,0,.1,1), min-height 1.1s cubic-bezier(.4,0,.1,1), border-radius 1s cubic-bezier(.4,0,.1,1);
}

/* Animated mouse cursor — clicks HELIA core to open the desktop */
.HOS-CURSOR {
  position: absolute;
  top: 50%; left: 50%;
  width: 22px; height: 22px;
  z-index: 16;
  opacity: 0;
  transform: translate(-50%,-50%);
  pointer-events: none;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.55));
  transition: opacity .35s cubic-bezier(.22,1,.36,1);
}
.HOS-CURSOR.show { opacity: 1; }
.HOS-CURSOR.approach { transition: transform 1.2s cubic-bezier(.22,1,.36,1), left 1.2s cubic-bezier(.22,1,.36,1), top 1.2s cubic-bezier(.22,1,.36,1); }
.HOS-CURSOR-CLICK {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border: 2px solid var(--p2);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  pointer-events: none;
}
.HOS-CURSOR.click .HOS-CURSOR-CLICK {
  animation: hosCursorRing .65s ease-out forwards;
}
@keyframes hosCursorRing {
  0%   { width: 0; height: 0; opacity: .9; }
  100% { width: 96px; height: 96px; opacity: 0; }
}
/* HELIA box reacts to the click */
.HOS-NET-LAYER.clicked .NV-HELIA-BOX {
  animation: hosCoreClick .5s cubic-bezier(.22,1,.36,1);
}
@keyframes hosCoreClick {
  0%   { transform: scale(1); }
  45%  { transform: scale(.88); }
  100% { transform: scale(1); }
}


/* Hide HOS-STORES (app badges) + HOS-FLOAT — not needed on AOS */
body.AOS-BODY #S-HOS .HOS-STORES,
body.AOS-BODY #S-HOS .HOS-FLOAT {
  display: none !important;
}

/* ════════════ CAPABILITIES — light cards inside the AOS dark hero ════════════ */

/* ── HPCL cards (light) — live inside #AOSP-HERO, below trust bar ── */
.HPCL-WRAP {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 8px auto 0;
  text-align: left;
  opacity: 0;
  animation: hpFadeUp .9s 1.7s forwards cubic-bezier(.22,1,.36,1);
}
/* soft glow halo behind the card grid to blend into dark bg */
.HPCL-WRAP::before {
  content: '';
  position: absolute;
  inset: -40px -80px;
  background: radial-gradient(ellipse at center, rgba(167,139,250,.14) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(30px);
}
.HPCL-GRID, .HPCL-MODAL { position: relative; z-index: 1 }
.HPCL-GRID {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  transition: opacity .3s, filter .3s;
}
.HPCL-WRAP:has(.HPCL-MODAL.open) .HPCL-GRID {
  opacity: .3;
  filter: blur(2px);
  pointer-events: none;
}
.HPCL {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(13,12,10,.08);
  border-radius: 16px;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  text-align: left;
  overflow: hidden;
  outline: none;
}
.HPCL::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(139,92,246,.08) 0%, transparent 55%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.HPCL > * { position: relative; z-index: 1 }

.HPCL-CASE-HEAD {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.HPCL-CASE {
  font-family: var(--M);
  font-size: 9px;
  font-weight: 600;
  color: var(--p3);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.HPCL-TIME {
  font-family: var(--M);
  font-size: 9px;
  color: rgba(12,11,8,.42);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.HPCL-STATUS {
  background: rgba(220,110,90,.08);
  border-left: 2px solid rgba(220,110,90,.5);
  padding: 8px 10px;
  border-radius: 4px;
  font-family: var(--M);
  font-size: 10.5px;
  color: rgba(12,11,8,.72);
  line-height: 1.5;
  margin-bottom: 16px;
}
.HPCL-STATUS b {
  color: rgba(220,110,90,.85);
  font-weight: 600;
}
.HPCL-BODY {
  font-family: var(--S);
  font-size: 12.5px;
  color: rgba(12,11,8,.7);
  line-height: 1.55;
  margin: 0 0 18px;
  flex: 1;
}
.HPCL-BODY b {
  color: var(--k);
  font-weight: 700;
}
.HPCL-METRIC {
  font-family: var(--M);
  font-size: 10px;
  font-weight: 600;
  color: var(--p3);
  letter-spacing: .05em;
}
.HPCL-N {
  font-family: var(--S);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.018em;
  color: var(--k);
  margin: 0 0 10px;
  line-height: 1.2;
}
.HPCL-N em {
  font-family: var(--R);
  font-style: italic;
  font-weight: 600;
  color: var(--p3);
  letter-spacing: -.01em;
}
.HPCL-LIST {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.HPCL-LIST li {
  font-family: var(--M);
  font-size: 11px;
  color: rgba(12,11,8,.62);
  line-height: 1.5;
  letter-spacing: .02em;
  display: flex;
  gap: 8px;
}
.HPCL-LIST li::before {
  content: '→';
  color: var(--p1);
  opacity: .85;
  flex-shrink: 0;
}
.HPCL-FOOT {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(13,12,10,.06);
}
.HPCL-TAG {
  font-family: var(--M);
  font-size: 10px;
  font-weight: 600;
  color: var(--p3);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(139,92,246,.08);
  border-radius: 100px;
}
.HPCL-LINK {
  font-family: var(--M);
  font-size: 10px;
  font-weight: 600;
  color: var(--p3);
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: all .25s;
}

/* ── Modal (light) ── */
.HPCL-MODAL {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  border: 1px solid rgba(139,92,246,.24);
  border-radius: 18px;
  padding: 44px 44px 36px;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: scale(.97);
  transition: opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
  box-shadow: 0 35px 80px -20px rgba(139,92,246,.3), 0 2px 8px rgba(0,0,0,.04);
}
.HPCL-MODAL.open {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.HPCL-MODAL::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(139,92,246,.12) 0%, transparent 65%);
  pointer-events: none;
}
.HPCL-MODAL::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(167,139,250,.1) 0%, transparent 65%);
  pointer-events: none;
}
.HPCL-CLOSE {
  position: absolute;
  top: 18px; right: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(13,12,10,.05);
  color: rgba(12,11,8,.7);
  border: 1px solid rgba(13,12,10,.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: all .25s;
}
.HPCL-CLOSE:hover {
  background: var(--p1);
  color: #fff;
  border-color: var(--p1);
  transform: rotate(90deg);
}
.HPCL-MODAL-BODY {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  color: var(--k);
  text-align: left;
}
.HPCL-M-HEAD { margin-bottom: 14px }
.HPCL-M-TAG {
  display: inline-flex;
  font-family: var(--M);
  font-size: 10px;
  color: var(--p3);
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid rgba(139,92,246,.25);
  border-radius: 100px;
  background: rgba(139,92,246,.06);
  font-weight: 500;
}
.HPCL-M-TI {
  font-family: var(--S);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--k);
  margin: 0 0 14px;
}
.HPCL-M-LEAD {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(12,11,8,.7);
  margin: 0 0 28px;
  max-width: 680px;
}
.HPCL-M-FEAT {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  margin-bottom: 24px;
}
.HPCL-M-F {
  padding: 14px 0;
  border-top: 1px solid rgba(13,12,10,.08);
}
.HPCL-M-F-H {
  font-family: var(--S);
  font-weight: 700;
  font-size: 14px;
  color: var(--k);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.HPCL-M-F-H::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--p1);
  box-shadow: 0 0 8px var(--p1);
}
.HPCL-M-F-D {
  font-size: 12.5px;
  color: rgba(12,11,8,.65);
  line-height: 1.55;
}
.HPCL-M-META {
  padding: 16px 0;
  border-top: 1px solid rgba(13,12,10,.1);
  border-bottom: 1px solid rgba(13,12,10,.1);
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 18px;
}
.HPCL-M-MI { display: flex; flex-direction: column; gap: 5px }
.HPCL-M-MI-L {
  font-family: var(--M);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(12,11,8,.4);
}
.HPCL-M-MI-V {
  font-size: 12.5px;
  color: rgba(12,11,8,.85);
  line-height: 1.4;
}
.HPCL-M-FOOT {
  display: flex;
  justify-content: flex-end;
}
.HPCL-M-CTA {
  padding: 14px 28px;
  background: var(--p1);
  color: #fff;
  font-family: var(--S);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: 100px;
  transition: all .3s;
  box-shadow: 0 10px 30px -10px rgba(139,92,246,.5);
}
.HPCL-M-CTA:hover {
  background: var(--p3);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -10px rgba(109,40,217,.7);
}

/* ════════════ RESPONSIVE ════════════ */
@media (max-width: 1024px) {
  .AOSP-CARDS { grid-template-columns: 1fr; }
  .AOSP-COH-GRID { grid-template-columns: repeat(2, 1fr); }
  .AOSP-APL { grid-template-columns: 1fr; gap: 24px }
  .AOSP-APL-R { align-items: flex-start }
  .AOSP-NEXTGEN { padding: 44px 32px }
  #AOSP-HERO { padding: 180px 24px 80px; }
  #AOSP-TECH { padding: 80px 24px 100px }
  .HPCL-GRID { grid-template-columns: repeat(2, 1fr); }
  .HPCL-WRAP { margin-top: 32px }
  .HPCL-M-FEAT { grid-template-columns: 1fr; }
  .HPCL-M-META { grid-template-columns: 1fr; gap: 12px }
}
@media (max-width: 640px) {
  .AOSP-COH-GRID { grid-template-columns: 1fr; }
  .AOSP-APL { padding: 32px 24px; }
  .FOOTER-DARK { flex-direction: column; gap: 8px }
  .HPCL-GRID { grid-template-columns: 1fr; }
  .HPCL-MODAL { padding: 40px 22px 28px }
  #AOSP-FLOW #S-NET { height: 90vh; min-height: 540px }
}

/* ════════════ TRUST BAR ════════════ */
#AOSP-TRUSTBAR {
  position: relative;
  z-index: 3;
  min-height: 10vh;
  padding: 28px 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}
#AOSP-TRUSTBAR .AOSP-TB-GRID { display: none }
.AOSP-TB-IN {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  max-width: 1200px;
  width: 100%;
}
.AOSP-TB-ITEM {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background .35s, box-shadow .35s, transform .35s;
}
.AOSP-TB-ITEM:hover {
  background: rgba(139,92,246,.06);
  box-shadow: 0 0 24px -8px rgba(139,92,246,.55);
  transform: translateY(-1px);
}
.AOSP-TB-N {
  font-family: var(--M);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: .04em;
}
.AOSP-TB-L {
  font-family: var(--S);
  font-size: 13px;
  font-weight: 500;
  color: rgba(244,242,236,.7);
  letter-spacing: .01em;
}
.AOSP-TB-DOT {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--p2);
  box-shadow: 0 0 6px rgba(167,139,250,.6);
  opacity: .55;
}
@media (max-width: 768px) {
  #AOSP-TRUSTBAR { padding: 22px 20px }
  .AOSP-TB-IN { gap: 10px 14px }
  .AOSP-TB-DOT { display: none }
  .AOSP-TB-ITEM { padding: 6px 12px; border: 1px solid rgba(167,139,250,.12); border-radius: 100px }
}

/* ════════════ STEPS / TIMELINE ════════════ */
#AOSP-STEPS {
  position: relative;
  z-index: 3;
  padding: 100px 44px 120px;
  background: transparent;
  overflow: visible;
}
#AOSP-STEPS .AOSP-STEPS-GRIDBG { display: none }
#AOSP-STEPS .AOSP-STEPS-GLOW { display: none }
#AOSP-STEPS .AOSP-IN {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}
#AOSP-STEPS .AOSP-HEAD {
  text-align: center;
  margin: 0 auto 64px;
  max-width: 820px;
}
#AOSP-STEPS .AOSP-PILL { margin-bottom: 22px }
#AOSP-STEPS .AOSP-H2 {
  font-family: var(--S);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1;
  letter-spacing: -.026em;
  color: #fff;
  margin: 0 auto 22px;
}
#AOSP-STEPS .AOSP-SUB {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(244,242,236,.7);
  max-width: 660px;
  margin: 0 auto;
}

/* ── Timeline track with line + nodes ── */
.AOSP-TL {
  position: relative;
}
.AOSP-TL-TRACK {
  position: relative;
  height: 36px;
  margin: 0 0 -18px;
  pointer-events: none;
}
.AOSP-TL-LINE {
  position: absolute;
  top: 50%;
  left: 8%;
  right: 8%;
  height: 1px;
  background:
    linear-gradient(90deg,
      rgba(167,139,250,0) 0%,
      rgba(167,139,250,.18) 8%,
      rgba(167,139,250,.32) 50%,
      rgba(167,139,250,.18) 92%,
      rgba(167,139,250,0) 100%);
  transform: translateY(-50%);
}
.AOSP-TL-PROGRESS {
  position: absolute;
  top: 50%;
  left: 16.66%;
  height: 1.5px;
  width: 0;
  background: linear-gradient(90deg, var(--p1), var(--p2));
  box-shadow: 0 0 14px rgba(167,139,250,.7);
  transform: translateY(-50%);
  border-radius: 2px;
  animation: aospTLProgress 2.4s cubic-bezier(.22,1,.36,1) .2s forwards;
}
@keyframes aospTLProgress {
  to { width: 66.67% }
}
.AOSP-TL-NODE {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.AOSP-TL-NODE-DOT {
  position: relative;
  z-index: 2;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p2), var(--p1));
  box-shadow:
    0 0 0 3px #06050A,
    0 0 0 4px rgba(167,139,250,.45),
    0 0 18px rgba(167,139,250,.65);
}
.AOSP-TL-NODE-RING {
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(167,139,250,.35);
  animation: aospTLPulse 2.6s ease-out infinite;
}
.AOSP-TL-NODE:nth-child(3) .AOSP-TL-NODE-RING { animation-delay: .8s }
.AOSP-TL-NODE:nth-child(4) .AOSP-TL-NODE-RING { animation-delay: 1.6s }
@keyframes aospTLPulse {
  0% { transform: scale(.7); opacity: .8 }
  100% { transform: scale(1.8); opacity: 0 }
}

.AOSP-TL-CARDS {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px;
  position: relative;
  padding-top: 38px;
}
.AOSP-TL-CARDS .AOSP-STEP {
  display: flex;
  flex-direction: column;
  position: relative;
}
.AOSP-TL-CARDS .AOSP-STEP::before {
  content: "";
  position: absolute;
  top: -38px;
  left: 50%;
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, rgba(167,139,250,.5), rgba(167,139,250,0));
  transform: translateX(-.5px);
}

/* ── HPCL-style timeline cards (white, dark page) ── */
.AOSP-TL-CARD {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(13,12,10,.08);
  border-radius: 16px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  text-align: left;
  overflow: hidden;
  height: 100%;
  transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s;
}
.AOSP-TL-CARD::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(139,92,246,.08) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  z-index: 0;
}
.AOSP-TL-CARD:hover {
  border-color: rgba(139,92,246,.28);
  box-shadow: 0 22px 55px -20px rgba(139,92,246,.32), 0 2px 8px rgba(0,0,0,.04);
  transform: translateY(-4px);
}
.AOSP-TL-CARD:hover::before { opacity: 1 }
.AOSP-TL-CARD > * { position: relative; z-index: 1 }

.AOSP-TL-CARD-HEAD {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.AOSP-TL-CARD-PH {
  font-family: var(--M);
  font-size: 9px;
  font-weight: 600;
  color: var(--p1);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.AOSP-TL-CARD-DUR {
  font-family: var(--M);
  font-size: 9px;
  color: rgba(12,11,8,.42);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.AOSP-TL-CARD-NOTE {
  background: rgba(139,92,246,.06);
  border-left: 2px solid rgba(139,92,246,.5);
  padding: 8px 10px;
  border-radius: 4px;
  font-family: var(--M);
  font-size: 10.5px;
  color: rgba(12,11,8,.72);
  line-height: 1.5;
  margin-bottom: 14px;
}
.AOSP-TL-CARD-NOTE b {
  color: var(--p1);
  font-weight: 600;
}
.AOSP-TL-CARD-TI {
  font-family: var(--S);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.018em;
  color: #0c0b08;
  margin: 0 0 10px;
  line-height: 1.15;
}
.AOSP-TL-CARD-TI em {
  font-family: var(--R);
  font-style: italic;
  font-weight: 600;
  color: var(--p1);
  letter-spacing: -.01em;
}
.AOSP-TL-CARD-BODY {
  font-family: var(--S);
  font-size: 13px;
  color: rgba(12,11,8,.7);
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}
.AOSP-TL-CARD-BODY b {
  color: #0c0b08;
  font-weight: 700;
}
.AOSP-TL-CARD-FOOT {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(13,12,10,.06);
}
.AOSP-TL-CARD-METRIC {
  font-family: var(--M);
  font-size: 10px;
  font-weight: 600;
  color: var(--p1);
  letter-spacing: .05em;
}
.AOSP-TL-CARD-LINK {
  font-family: var(--M);
  font-size: 10px;
  font-weight: 600;
  color: rgba(12,11,8,.6);
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: all .25s;
}
.AOSP-TL-CARD:hover .AOSP-TL-CARD-LINK {
  color: var(--p1);
  transform: translateX(4px);
}

/* ════════════ FINAL CTA · Cohort Q3 ════════════ */
#AOSP-FINAL {
  position: relative;
  z-index: 3;
  padding: 110px 44px 120px;
  background:
    radial-gradient(ellipse at center, rgba(139,92,246,.16) 0%, rgba(76,29,149,.10) 35%, rgba(6,5,10,.85) 75%, rgba(6,5,10,.95) 100%);
  overflow: hidden;
}
.AOSP-FINAL-GRID {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(167,139,250,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.AOSP-FINAL-GLOW {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}
.AOSP-FINAL-GLOW-1 {
  top: -200px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(139,92,246,.5), transparent 70%);
}
.AOSP-FINAL-GLOW-2 {
  bottom: -200px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(167,139,250,.35), transparent 70%);
}
.AOSP-FINAL-IN {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}
.AOSP-FINAL-BADGE {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--M);
  font-size: 10px;
  color: var(--p2);
  letter-spacing: .32em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid rgba(167,139,250,.4);
  border-radius: 100px;
  background: rgba(167,139,250,.06);
  margin-bottom: 28px;
}
.AOSP-FINAL-TI {
  font-family: var(--S);
  font-weight: 500;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -.028em;
  color: #fff;
  margin: 0 0 24px;
}
.AOSP-FINAL-SUB {
  font-family: var(--S);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(244,242,236,.78);
  max-width: 620px;
  margin: 0 auto 40px;
}
.AOSP-FINAL-SUB strong { color: var(--p2); font-weight: 600 }

.AOSP-FINAL-CTAS {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.AOSP-FINAL-CTA {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  font-family: var(--S);
  font-weight: 600;
  font-size: 14.5px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform .35s, box-shadow .35s, background .35s, border-color .35s;
}
.AOSP-FINAL-CTA-PRIMARY {
  background: var(--p1);
  color: #fff;
  box-shadow: 0 16px 40px -12px rgba(139,92,246,.65);
}
.AOSP-FINAL-CTA-PRIMARY:hover {
  transform: translateY(-2px);
  background: #7C3AED;
  box-shadow: 0 22px 50px -14px rgba(139,92,246,.8);
}
.AOSP-FINAL-CTA-SECONDARY {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(167,139,250,.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.AOSP-FINAL-CTA-SECONDARY:hover {
  transform: translateY(-2px);
  background: rgba(167,139,250,.08);
  border-color: rgba(167,139,250,.7);
}
.AOSP-FINAL-CTA-PRICE {
  font-family: var(--M);
  font-size: 11px;
  color: var(--p2);
  letter-spacing: .14em;
  padding-left: 12px;
  border-left: 1px solid rgba(167,139,250,.3);
}

.AOSP-FINAL-DIRECT {
  font-family: var(--M);
  font-size: 12px;
  color: rgba(244,242,236,.55);
  letter-spacing: .04em;
  margin-bottom: 56px;
}
.AOSP-FINAL-DIRECT a {
  color: rgba(244,242,236,.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(167,139,250,.3);
  transition: color .25s, border-color .25s;
}
.AOSP-FINAL-DIRECT a:hover {
  color: var(--p2);
  border-bottom-color: var(--p2);
}

.AOSP-FINAL-QUAL {
  display: inline-block;
  text-align: left;
  padding: 22px 28px;
  background: rgba(244,242,236,.025);
  border: 1px solid rgba(167,139,250,.14);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.AOSP-FINAL-QUAL-TI {
  font-family: var(--M);
  font-size: 10.5px;
  color: var(--p2);
  letter-spacing: .26em;
  text-transform: uppercase;
  margin-bottom: 14px;
  text-align: center;
}
.AOSP-FINAL-QUAL-LIST {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.AOSP-FINAL-QUAL-LIST li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--S);
  font-size: 13.5px;
  color: rgba(244,242,236,.78);
  line-height: 1.4;
}
.AOSP-FINAL-CHK {
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(139,92,246,.18);
  color: var(--p2);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  #AOSP-FINAL { padding: 80px 22px 90px }
  .AOSP-FINAL-CTAS { flex-direction: column; gap: 12px }
  .AOSP-FINAL-CTA { width: 100%; justify-content: center }
  .AOSP-FINAL-DIRECT { font-size: 11.5px }
}

.AOSP-STEPS-GRID {
  display: grid;
  grid-template-columns: 1fr 64px 1fr 64px 1fr;
  align-items: stretch;
  gap: 0;
}
.AOSP-STEP {
  display: flex;
  flex-direction: column;
}
.AOSP-STEP-CARD {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 34px 30px 30px;
  background:
    linear-gradient(180deg, rgba(244,242,236,.045) 0%, rgba(244,242,236,.015) 100%);
  border: 1px solid rgba(167,139,250,.16);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: border-color .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1), background .45s;
  overflow: hidden;
}
.AOSP-STEP-CARD::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167,139,250,.55), transparent);
  opacity: .6;
}
.AOSP-STEP-CARD::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(167,139,250,.0), rgba(167,139,250,.4) 50%, rgba(167,139,250,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.AOSP-STEP-CARD:hover {
  border-color: rgba(167,139,250,.42);
  background:
    linear-gradient(180deg, rgba(244,242,236,.07) 0%, rgba(244,242,236,.025) 100%);
  box-shadow:
    0 24px 70px -22px rgba(139,92,246,.55),
    0 0 0 1px rgba(167,139,250,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(-4px);
}
.AOSP-STEP-CARD:hover::after { opacity: 1 }
.AOSP-STEP-IDX {
  font-family: var(--M);
  font-size: 10.5px;
  color: var(--p2);
  letter-spacing: .32em;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: .85;
}
.AOSP-STEP-TI {
  font-family: var(--S);
  font-weight: 500;
  font-size: 24px;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: -.018em;
  line-height: 1.15;
}
.AOSP-STEP-D {
  font-family: var(--S);
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(244,242,236,.7);
  margin: 0 0 22px;
  flex-grow: 1;
}
.AOSP-STEP-META {
  font-family: var(--M);
  font-size: 11px;
  color: rgba(244,242,236,.45);
  letter-spacing: .22em;
  text-transform: uppercase;
  padding-top: 16px;
  border-top: 1px solid rgba(167,139,250,.1);
}

.AOSP-STEP-ARR {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(167,139,250,.5);
  height: 100%;
  min-height: 60px;
}
.AOSP-STEP-ARR svg {
  width: 100%;
  height: 16px;
  overflow: visible;
}
.AOSP-STEP-ARR-LINE {
  stroke-dasharray: 4 5;
  stroke-dashoffset: 90;
  animation: aospArrFlow 2.4s linear infinite;
}
@keyframes aospArrFlow {
  to { stroke-dashoffset: 0 }
}

@media (max-width: 900px) {
  #AOSP-STEPS { padding: 72px 24px 80px }
  #AOSP-STEPS .AOSP-HEAD { margin-bottom: 44px }
  .AOSP-TL-CARDS {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 0;
  }
  .AOSP-TL-CARDS .AOSP-STEP::before { display: none }
  .AOSP-TL-TRACK { display: none }
  .AOSP-STEPS-GRID {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .AOSP-STEP-ARR {
    height: 36px;
    min-height: 0;
    transform: rotate(90deg);
    width: 36px;
    margin: 4px auto;
  }
  .AOSP-STEP-ARR svg { width: 60px }
}

/* ════════════ FOUNDER · Noah ════════════ */
#AOSP-FOUNDER {
  position: relative;
  z-index: 3;
  padding: 0 44px 30px;
  background: transparent;
  overflow: hidden;
}
.AOSP-FND-IN {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* ── LEFT: Visual ── */
.AOSP-FND-LEFT {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.AOSP-FND-VISUAL {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.AOSP-FND-GLOW {
  position: absolute;
  inset: 12%;
  background: radial-gradient(circle, rgba(139,92,246,.35) 0%, rgba(139,92,246,.12) 40%, transparent 70%);
  filter: blur(40px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: aospFndPulse 6s ease-in-out infinite;
}
@keyframes aospFndPulse {
  0%,100% { opacity: .85; transform: scale(1) }
  50% { opacity: 1; transform: scale(1.05) }
}
.AOSP-FND-LINES {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
}
.AOSP-FND-PORTRAIT {
  position: relative;
  z-index: 3;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, rgba(167,139,250,.6), rgba(139,92,246,.2));
  box-shadow:
    0 30px 80px -20px rgba(139,92,246,.55),
    0 0 0 1px rgba(167,139,250,.18);
}
.AOSP-FND-IMG {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #06050A;
  display: flex;
  align-items: center;
  justify-content: center;
}
.AOSP-FND-PHOTO {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: rotate(-2deg) scale(1.05);
  transform-origin: center center;
}

/* Floating tech icons */
.AOSP-FND-FLOAT {
  position: absolute;
  z-index: 2;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(12,10,22,.85);
  border: 1px solid rgba(167,139,250,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(167,139,250,.08);
  will-change: transform;
}
.AOSP-FND-FLOAT-CODE {
  font-family: var(--M);
  font-size: 14px;
  font-weight: 700;
  color: var(--p2);
  letter-spacing: .05em;
}
.AOSP-FND-FLOAT-1 { top: 10%; left: 6%;  animation: aospFloat 7s ease-in-out infinite }
.AOSP-FND-FLOAT-2 { top: 8%;  right: 4%; animation: aospFloat 8s ease-in-out infinite -1.5s }
.AOSP-FND-FLOAT-3 { bottom: 12%; left: 2%; animation: aospFloat 7.5s ease-in-out infinite -3s }
.AOSP-FND-FLOAT-4 { bottom: 10%; right: 6%; animation: aospFloat 6.5s ease-in-out infinite -.8s }
.AOSP-FND-FLOAT-5 { top: 48%; left: -2%; animation: aospFloat 9s ease-in-out infinite -2s }
.AOSP-FND-FLOAT-6 { top: 50%; right: -3%; animation: aospFloat 8.5s ease-in-out infinite -4s }

@keyframes aospFloat {
  0%,100% { transform: translate(0,0) rotate(0deg) }
  25% { transform: translate(6px,-10px) rotate(-2deg) }
  50% { transform: translate(-4px,-14px) rotate(1.5deg) }
  75% { transform: translate(8px,-6px) rotate(-1deg) }
}

/* ── RIGHT: Text ── */
.AOSP-FND-RIGHT {
  color: #fff;
  max-width: 540px;
}
.AOSP-FND-RIGHT .AOSP-PILL { margin-bottom: 22px }
.AOSP-FND-RIGHT .AOSP-H2 {
  font-family: var(--S);
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.02;
  letter-spacing: -.026em;
  color: #fff;
  margin: 0 0 26px;
}
.AOSP-FND-LEAD {
  font-family: var(--S);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(244,242,236,.92);
  margin: 0 0 18px;
}
.AOSP-FND-LEAD strong { color: var(--p2); font-weight: 600 }
.AOSP-FND-BODY {
  font-family: var(--S);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(244,242,236,.7);
  margin: 0 0 16px;
}
.AOSP-FND-BODY strong { color: #fff; font-weight: 600 }

.AOSP-FND-CTA {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 13px 24px;
  background: var(--p1);
  color: #fff;
  font-family: var(--S);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .005em;
  border: 2px solid var(--p1);
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 10px 30px -10px rgba(139,92,246,.55);
  transition: all .3s;
}
.AOSP-FND-CTA:hover {
  background: var(--p3);
  border-color: var(--p3);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -10px rgba(109,40,217,.75);
}
.AOSP-FND-CTA span:last-child { transition: transform .35s }
.AOSP-FND-CTA:hover span:last-child { transform: translateX(4px) }

.AOSP-FND-SIG {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid rgba(167,139,250,.12);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.AOSP-FND-SIG-NAME {
  font-family: var(--R);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  color: #fff;
  letter-spacing: -.01em;
}
.AOSP-FND-SIG-ROLE {
  font-family: var(--M);
  font-size: 10.5px;
  color: rgba(244,242,236,.5);
  letter-spacing: .26em;
  text-transform: uppercase;
}

@media (max-width: 960px) {
  .AOSP-FND-IN { grid-template-columns: 1fr 1.4fr; gap: 50px }
}
@media (max-width: 768px) {
  #AOSP-FOUNDER { padding: 0 24px 30px }
  .AOSP-FND-IN {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .AOSP-FND-VISUAL { max-width: 320px }
  .AOSP-FND-RIGHT { max-width: 100%; text-align: left }
}