:root {
  --electric: #00e0d0;
  --signal: #ff9f1c;
}

body {
  background:
    linear-gradient(90deg, rgba(9, 34, 58, .035) 1px, transparent 1px) 0 0 / 7vw 100%,
    #fff;
}

.nav-shell {
  height: 84px;
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(9, 34, 58, .1);
}

.nav-shell:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 17%;
  height: 3px;
  background: var(--electric);
}

.nav-cta {
  border-radius: 999px;
  padding-inline: 21px;
}

.hero {
  min-height: 760px;
  grid-template-columns: 1.05fr .95fr;
  position: relative;
  isolation: isolate;
}

.hero:before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  left: -170px;
  bottom: -170px;
  border: 1px solid rgba(0, 224, 208, .35);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(0, 224, 208, .035), 0 0 0 84px rgba(0, 224, 208, .025);
}

.hero-copy {
  padding-top: clamp(95px, 10vw, 150px);
}

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.hero .eyebrow:before {
  content: "";
  width: 38px;
  height: 2px;
  background: var(--signal);
}

.hero h1 {
  font-size: clamp(3.4rem, 6.4vw, 7rem);
  max-width: 920px;
}

.hero h1 em {
  background: linear-gradient(90deg, var(--electric), #82fff5);
  -webkit-background-clip: text;
  color: transparent;
}

.hero-visual {
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 12% 53%);
}

.hero-index {
  position: absolute;
  z-index: 3;
  top: 34px;
  right: 34px;
  color: white;
  font: 700 .72rem var(--display);
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}

.score-card {
  border-left: 4px solid var(--signal);
  border-radius: 2px 12px 12px 2px;
}

.proof {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: 27px;
}

.trust {
  padding-block: 20px;
  background: var(--electric);
  border: 0;
  color: #032823;
  transform: rotate(-.55deg) scale(1.01);
  position: relative;
  z-index: 4;
}

.trust > span,
.trust > div {
  color: #032823;
}

.trust > div b:before {
  content: "✦";
  color: #08746d;
  margin-right: 14px;
}

.intro {
  padding-top: 145px;
}

.section-label {
  position: relative;
  display: inline-block;
}

.section-label:after {
  content: "";
  display: block;
  width: 54px;
  height: 5px;
  margin-top: 12px;
  background: var(--signal);
}

.phases {
  gap: 16px;
  background: transparent;
}

.phases article {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  border-radius: 2px 18px 2px 18px;
  box-shadow: 0 20px 50px rgba(8, 35, 60, .055);
  transition: transform .25s ease, border-color .25s ease;
}

.phases article:nth-child(even) {
  transform: translateY(28px);
}

.phases article:hover {
  transform: translateY(-7px);
  border-color: var(--electric);
}

.phases article:nth-child(even):hover {
  transform: translateY(21px);
}

.phases article > span {
  font-size: 2.7rem;
  letter-spacing: -.07em;
  color: #c9e9e6;
}

.dark-section {
  position: relative;
  overflow: hidden;
}

.dark-section:after {
  content: "PIMG";
  position: absolute;
  right: -25px;
  bottom: -90px;
  color: rgba(255,255,255,.025);
  font: 800 20rem/1 var(--display);
  letter-spacing: -.09em;
  pointer-events: none;
}

.schedule-card {
  position: relative;
  z-index: 1;
  border-radius: 2px 18px 2px 18px;
}

.resources {
  align-items: start;
}

.resource-grid article {
  border-radius: 2px 16px 2px 16px;
}

.resource-grid article:nth-child(3n + 1) {
  border-top: 4px solid var(--signal);
}

.founder-section {
  border-block: 1px solid #bcece7;
}

.founder-copy {
  position: relative;
}

.founder-copy:before {
  content: "FOUNDER";
  position: absolute;
  left: -22px;
  bottom: 10px;
  color: rgba(8, 72, 91, .05);
  font: 800 7rem/1 var(--display);
  letter-spacing: -.07em;
}

.mentors {
  background:
    linear-gradient(135deg, rgba(0, 224, 208, .08), transparent 35%),
    #f7fafc;
}

.mentor-card {
  border-radius: 2px 18px 2px 18px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.mentor-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 55px rgba(10, 32, 56, .13);
}

.mentor-card:nth-child(2),
.mentor-card:nth-child(6) {
  margin-top: 28px;
}

.faq details {
  border: 1px solid var(--line);
  border-width: 0 0 1px 5px;
  border-left-color: #d5efed;
  padding-left: 20px;
}

.faq details[open] {
  border-left-color: var(--electric);
}

.enroll {
  position: relative;
  background:
    radial-gradient(circle at 10% 110%, rgba(0,224,208,.2), transparent 38%),
    #09253c;
}

.enroll form {
  border-radius: 2px 20px 2px 20px;
}

@media (max-width: 900px) {
  .hero-visual { clip-path: none; }
  .trust { transform: none; }
  .phases article:nth-child(even),
  .phases article:nth-child(even):hover { transform: none; }
  .mentor-card:nth-child(2),
  .mentor-card:nth-child(6) { margin-top: 0; }
}

@media (max-width: 570px) {
  .nav-shell { height: 70px; }
  .hero { min-height: auto; }
  .hero h1 { font-size: 3.4rem; }
  .trust { padding-inline: 24px; }
  .trust > div b:before { display: none; }
  .intro { padding-top: 90px; }
}