:root {
  --home-bg: #01040b;
  --home-panel: rgba(5, 15, 31, .9);
  --home-line: rgba(102, 153, 226, .3);
  --home-blue: #267cff;
  --home-blue-soft: #80aeff;
  --home-muted: #abb9cd;
}

.home-page {
  background: radial-gradient(circle at 50% -10%, rgba(40, 124, 255, .15), transparent 28%), var(--home-bg);
}

.home-page::before {
  opacity: .018;
}

.home-shell {
  width: min(92vw, 1480px);
  margin-inline: auto;
}

.home-header {
  padding-inline: max(4vw, calc((100vw - 1480px) / 2));
}

.home-header .site-nav {
  gap: clamp(14px, 1.8vw, 30px);
}

.home-header .brand {
  letter-spacing: -.055em;
}

.home-hero {
  position: relative;
  min-height: 780px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.07);
  isolation: isolate;
}

.home-hero::after {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 210px;
  content: "";
  background: linear-gradient(180deg, transparent, var(--home-bg));
}

.home-hero-earth {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(1,4,11,.97) 0%, rgba(1,4,11,.88) 30%, rgba(1,4,11,.22) 68%, rgba(1,4,11,.08) 100%),
    linear-gradient(180deg, rgba(1,4,11,.38), rgba(1,4,11,.08) 55%, rgba(1,4,11,.62)),
    url("/assets/hero-earth-v2.webp") center right / cover no-repeat;
  filter: saturate(.82) contrast(1.06);
}

.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(480px, 1.06fr);
  align-items: end;
  min-height: 780px;
  padding-top: 112px;
}

.home-hero-copy {
  z-index: 3;
  align-self: center;
  max-width: 760px;
  padding: 40px 0 66px;
}

.home-eyebrow {
  margin: 0 0 14px;
  color: var(--home-blue-soft);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.home-hero h1 {
  margin: 0;
  font-size: clamp(76px, 8.2vw, 134px);
  line-height: .84;
  letter-spacing: -.075em;
}

.home-lead {
  max-width: 600px;
  margin: 32px 0 0;
  color: #d6dfec;
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.52;
}

.home-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 760px;
  margin-top: 48px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.home-principles div {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 22px 18px 0 0;
}

.home-principles div + div {
  padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,.12);
}

.home-principles span,
.panel-icon,
.join-symbol {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(83, 145, 255, .75);
  border-radius: 50%;
  color: #8eb8ff;
  font-weight: 800;
  box-shadow: 0 0 24px rgba(40, 120, 255, .15);
}

.home-principles p {
  margin: 0;
  color: #d2dceb;
  font-size: 13px;
  line-height: 1.4;
}

.home-portrait {
  position: relative;
  min-height: 680px;
}

.home-portrait::before {
  position: absolute;
  inset: 10% 2% 5% 8%;
  z-index: -1;
  content: "";
  background: radial-gradient(circle at 58% 42%, rgba(48, 114, 222, .2), transparent 52%);
  filter: blur(22px);
}

.home-portrait > img {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(100%, 650px);
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  mix-blend-mode: multiply;
  filter: brightness(1.28) contrast(1.08) saturate(.9);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 95%), linear-gradient(180deg, #000 0, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 95%), linear-gradient(180deg, #000 0, #000 82%, transparent 100%);
  mask-composite: intersect;
}

.home-signature {
  font-family: var(--script);
  color: #9abfff;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
  text-shadow: 0 0 22px rgba(55, 132, 255, .56);
  transform: rotate(-4deg);
}

.home-portrait .home-signature {
  position: absolute;
  right: 4%;
  bottom: 18%;
  z-index: 3;
}

.home-portrait > p {
  position: absolute;
  right: 3%;
  bottom: 9%;
  z-index: 3;
  margin: 0;
  color: #dce5f2;
  font-size: 14px;
  text-align: right;
}

.home-portrait > p span {
  color: var(--home-muted);
}

.home-stack {
  display: grid;
  gap: 14px;
  padding: 16px 0 96px;
}

.home-panel {
  border: 1px solid var(--home-line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(7, 21, 42, .97), rgba(3, 10, 22, .96));
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 26px 90px rgba(0,0,0,.26);
}

.problem-panel {
  display: grid;
  grid-template-columns: .75fr 1.8fr;
  gap: 52px;
  align-items: end;
  padding: clamp(32px, 4vw, 58px);
  background:
    radial-gradient(circle at 92% 50%, rgba(37, 103, 219, .17), transparent 34%),
    linear-gradient(145deg, rgba(7, 21, 42, .98), rgba(3, 10, 22, .97));
}

.panel-heading h2,
.mission-panel h2,
.compact-panel h2,
.application-panel h2,
.join-panel h2,
.home-contact h2 {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 56px);
  line-height: 1.03;
  letter-spacing: -.05em;
}

.panel-accent {
  margin: 12px 0 0;
  color: #729cf4;
  font-size: clamp(18px, 1.8vw, 27px);
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.problem-grid article {
  min-height: 190px;
  padding: 4px 30px;
  border-left: 1px solid rgba(255,255,255,.1);
}

.problem-grid h3,
.application-panel h3 {
  margin: 18px 0 8px;
  font-size: 20px;
}

.problem-grid p,
.mission-copy p,
.voxy-home p,
.join-panel > p,
.home-contact > p {
  margin: 0;
  color: var(--home-muted);
  font-size: 16px;
}

.mission-panel {
  display: grid;
  grid-template-columns: 1.15fr 1fr .7fr;
  gap: clamp(30px, 4vw, 72px);
  align-items: center;
  padding: clamp(34px, 4vw, 62px);
}

.mission-copy {
  display: grid;
  gap: 18px;
}

.mission-copy a {
  color: #8fb8ff;
  font-weight: 800;
  text-decoration: none;
}

.voxy-home {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.voxy-home img {
  width: min(180px, 76%);
  filter: drop-shadow(0 18px 44px rgba(48, 121, 255, .25));
}

.voxy-home p {
  font-size: 13px;
}

.home-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.compact-panel {
  min-height: 390px;
  padding: clamp(28px, 3vw, 42px);
}

.compact-panel h2 {
  font-size: clamp(26px, 2.2vw, 36px);
}

.compact-panel ul,
.application-panel ul {
  padding: 0;
  margin: 28px 0 0;
  color: var(--home-muted);
  list-style: none;
}

.compact-panel li,
.application-panel li {
  position: relative;
  margin: 9px 0;
  padding-left: 17px;
}

.compact-panel li::before,
.application-panel li::before {
  position: absolute;
  left: 0;
  top: .65em;
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: var(--home-blue);
  box-shadow: 0 0 10px var(--home-blue);
}

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

.purpose-panel img {
  width: 100%;
  height: 190px;
  margin-top: auto;
  border: 1px solid rgba(124, 167, 234, .25);
  border-radius: 12px;
  object-fit: cover;
  object-position: center 42%;
}

.application-panel {
  display: grid;
  grid-template-columns: 1.35fr .8fr .8fr .72fr;
  gap: 0;
  padding: clamp(34px, 4vw, 58px);
}

.application-panel > div {
  padding: 0 clamp(24px, 2.4vw, 42px);
  border-left: 1px solid rgba(255,255,255,.1);
}

.application-panel > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.application-panel h2 {
  font-size: clamp(27px, 2.5vw, 42px);
}

.application-panel h3 {
  margin-top: 0;
}

.application-ready {
  display: flex;
  flex-direction: column;
}

.application-ready p {
  color: var(--home-muted);
}

.application-ready .home-signature {
  display: block;
  margin-top: auto;
  font-size: 30px;
}

.join-panel {
  display: grid;
  grid-template-columns: .85fr 1.15fr auto;
  gap: 50px;
  align-items: center;
  padding: clamp(28px, 3.4vw, 48px);
}

.join-title {
  display: flex;
  align-items: center;
  gap: 24px;
}

.join-symbol {
  flex-basis: 54px;
  width: 54px;
  height: 54px;
  font-size: 22px;
}

.join-panel h2 {
  font-size: clamp(31px, 2.7vw, 44px);
}

.join-actions {
  display: flex;
  gap: 12px;
}

.home-contact {
  padding: 92px 4px 24px;
  text-align: center;
}

.home-contact > p {
  margin: 18px auto 0;
}

.home-contact > a {
  display: inline-block;
  margin-top: 24px;
  color: #fff;
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 850;
  text-decoration: none;
  border-bottom: 2px solid var(--home-blue);
}

.home-footer .home-shell {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.home-footer .home-shell > div {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

@media (max-width: 1120px) {
  .home-hero-grid { grid-template-columns: 1fr 1fr; }
  .problem-panel { grid-template-columns: 1fr; }
  .mission-panel { grid-template-columns: 1fr 1fr; }
  .voxy-home { grid-column: 1 / -1; grid-template-columns: auto 1fr; text-align: left; }
  .voxy-home img { width: 120px; }
  .application-panel { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .application-panel > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .join-panel { grid-template-columns: 1fr 1fr; }
  .join-actions { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .home-header { padding-inline: 4vw; }
  .home-header .site-nav { gap: 0; }
  .home-hero { min-height: auto; }
  .home-hero-earth {
    background:
      linear-gradient(180deg, rgba(1,4,11,.92) 0%, rgba(1,4,11,.42) 35%, rgba(1,4,11,.5) 72%, rgba(1,4,11,.98) 100%),
      url("/assets/hero-earth-v2.webp") 67% top / auto 58% no-repeat;
  }
  .home-hero-grid { display: flex; flex-direction: column; min-height: auto; padding-top: 96px; }
  .home-hero-copy { width: 100%; padding: 20px 0 26px; }
  .home-hero h1 { font-size: clamp(68px, 19vw, 104px); }
  .home-lead { max-width: 560px; font-size: 18px; }
  .home-portrait { width: 100%; min-height: 170px; }
  .home-portrait > img { display: none; }
  .home-portrait .home-signature { right: 1%; bottom: 86px; }
  .home-portrait > p { right: 1%; bottom: 28px; }
  .home-three { grid-template-columns: 1fr; }
  .compact-panel { min-height: auto; }
  .purpose-panel img { height: 260px; margin-top: 28px; }
  .problem-grid { grid-template-columns: 1fr; }
  .problem-grid article { min-height: auto; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.1); border-left: 0; }
  .problem-grid article:first-child { border-top: 0; }
  .application-panel { grid-template-columns: 1fr; }
  .application-panel > div,
  .application-panel > div:nth-child(3) { padding: 30px 0; border-top: 1px solid rgba(255,255,255,.1); border-left: 0; }
  .application-panel > div:first-child { padding-top: 0; border-top: 0; }
  .application-ready .home-signature { margin-top: 24px; }
  .home-footer .home-shell { flex-direction: column; }
}

@media (max-width: 620px) {
  .home-shell { width: min(92vw, 1480px); }
  .home-principles { grid-template-columns: 1fr; }
  .home-principles div { padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .home-principles div + div { padding-left: 0; border-left: 0; }
  .home-portrait { min-height: 160px; }
  .home-portrait .home-signature { bottom: 82px; }
  .home-portrait > p { bottom: 24px; max-width: 270px; }
  .mission-panel { grid-template-columns: 1fr; }
  .voxy-home { grid-column: auto; grid-template-columns: 1fr; text-align: center; }
  .join-panel { grid-template-columns: 1fr; gap: 26px; }
  .join-actions { grid-column: auto; flex-direction: column; }
  .home-contact > a { font-size: 22px; }
}

/* Campaign content stays readable when JavaScript is unavailable. */
.home-page .reveal {
  opacity: 1;
  transform: none;
}

.js-enabled .home-page .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(22px);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}