/* ===== section: bg ===== */
/* ============ BACKGROUND (Figma node 1:1090) ============ */
/* Full-viewport fixed backdrop layer. Sits BEHIND everything:
   .bg (z-index 0, fixed) < page content (z-index 1) < .nav (z-index 100, fixed).
   Page/body background should be #eef4ff so overscroll matches. */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-image: linear-gradient(180deg, #eef4ff 0%, #f6f9ff 40%, #eaf1ff 100%);
}

/* --- Gradient orbs --- */

.bg-orb {
  position: absolute;
  border-radius: 9999px;
}

/* Cyan orb, upper right (Figma: left 995px, top 121px, 672px, page width 1539px) */
.bg-orb-cyan {
  width: 672px;
  height: 672px;
  right: -128px;
  top: 121px;
  background-image: radial-gradient(
    475.18px circle at 50% 50%,
    rgba(127, 230, 245, 0.45) 0%,
    rgba(95, 173, 184, 0.3375) 15.5%,
    rgba(64, 115, 123, 0.225) 31%,
    rgba(32, 58, 61, 0.1125) 46.5%,
    rgba(0, 0, 0, 0) 62%
  );
}

/* Blue orb, left edge (Figma: left -160px, top 288px, 608px) */
.bg-orb-blue {
  width: 608px;
  height: 608px;
  left: -160px;
  top: 288px;
  background-image: radial-gradient(
    429.92px circle at 50% 50%,
    rgba(31, 107, 255, 0.2) 0%,
    rgba(16, 54, 128, 0.1) 30%,
    rgba(0, 0, 0, 0) 60%
  );
}

/* --- Faint blueprint grid --- */

.bg-grid {
  position: absolute;
  left: 0;
  top: 95px;
  width: 100%;
  height: 1383px;
  opacity: 0.7;
  background-image:
    linear-gradient(180deg, rgba(31, 107, 255, 0.06) 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(90deg, rgba(31, 107, 255, 0.06) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 56px 56px;
}

/* --- Circuit-trace wave vectors --- */

.bg-waves {
  position: absolute;
  left: 0;
  top: -229px;
  width: 100%;
  height: 1276.8px;
}

.bg-waves-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Mobile --- */

@media (max-width: 768px) {
  .bg-orb-cyan {
    width: 420px;
    height: 420px;
    right: -180px;
    top: 60px;
    background-image: radial-gradient(
      297px circle at 50% 50%,
      rgba(127, 230, 245, 0.45) 0%,
      rgba(95, 173, 184, 0.3375) 15.5%,
      rgba(64, 115, 123, 0.225) 31%,
      rgba(32, 58, 61, 0.1125) 46.5%,
      rgba(0, 0, 0, 0) 62%
    );
  }

  .bg-orb-blue {
    width: 380px;
    height: 380px;
    left: -190px;
    top: 240px;
    background-image: radial-gradient(
      269px circle at 50% 50%,
      rgba(31, 107, 255, 0.2) 0%,
      rgba(16, 54, 128, 0.1) 30%,
      rgba(0, 0, 0, 0) 60%
    );
  }

  .bg-waves {
    top: -100px;
    height: 800px;
  }
}

/* ===== section: doodles ===== */
/* Hand-drawn STEM doodle layer — full-page scrolling backdrop.
   Sits above the fixed color washes (.bg, z-index 0) and behind content (z-index 1).
   Stretched to full document height via top:0/bottom:0 against body{position:relative}. */
.doodles {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.doodle {
  position: absolute;
  display: block;
  color: #2f6fe0;
  opacity: 0.5;
}

.doodle svg {
  width: 100%;
  height: auto;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* Uniform hairline weight regardless of doodle size */
.doodle svg * { vector-effect: non-scaling-stroke; }

.doodle--soft  { opacity: 0.42; }
.doodle--faint { opacity: 0.3; }
.doodle--path svg path { stroke-dasharray: 5 9; }

@media (max-width: 768px) {
  .doodle { opacity: 0.3; }
  .doodle--soft { opacity: 0.26; }
  .doodle--m-hide { display: none; }
}

/* ===== section: nav ===== */
/* ============ NAV (Figma node 1:1101) ============ */
/* Fixed glass navigation bar pinned to the top of the viewport,
   floating 16px from the top edge, above all content (z-index 100).
   Sits above the fixed .bg layer (z-index 0) and page content. */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: block;
  padding: 0;
}

.nav-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px max(20px, calc((100% - 1152px) / 2));
  border-bottom: 1px solid rgba(31, 107, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0px 6px 24px -12px rgba(10, 28, 70, 0.22);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.nav.is-scrolled .nav-bar {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 10px 30px -14px rgba(10, 28, 70, 0.32);
}

/* --- Brand --- */

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav-logo {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-image: linear-gradient(135deg, #1f6bff 0%, #0ca2f9 50%, #22d3ee 100%);
  filter: drop-shadow(0px 8px 9px rgba(31, 107, 255, 0.7));
}

.nav-logo-icon {
  display: block;
  width: 18px;
  height: 18px;
}

.nav-brand-text {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 17.6px;
  line-height: 26.4px;
  letter-spacing: -0.352px;
  color: #0a1c46;
  white-space: nowrap;
}

.nav-brand-accent {
  color: #1f6bff;
}

/* --- Center links --- */

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  display: block;
  padding: 8px 16px;
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 14.4px;
  line-height: 21.6px;
  color: #5b6b90;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-link:hover { color: #1f6bff; }

.nav-link.is-active {
  color: #1f6bff;
  font-weight: 600;
  background-color: rgba(31, 107, 255, 0.1);
}

/* --- Action buttons --- */

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 15.2px;
  line-height: 22.8px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.nav-btn-explore {
  padding: 12px 24px;
  border: 1px solid rgba(31, 107, 255, 0.25);
  color: #0a1c46;
}

.nav-btn-demo {
  padding: 12px 22px;
  background-color: #ff7a1a;
  color: #ffffff;
  gap: 6px;
  cursor: pointer;
  filter: drop-shadow(0px 14px 15px rgba(255, 122, 26, 0.7));
}

.nav-btn-caret {
  display: block;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.nav-contact[data-open="true"] .nav-btn-caret { transform: rotate(180deg); }

/* --- Contact dropdown --- */

.nav-contact {
  position: relative;
}

.nav-contact-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 260px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(31, 107, 255, 0.14);
  background-color: #ffffff;
  box-shadow: 0px 24px 50px -18px rgba(10, 28, 70, 0.35);
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 20;
}

.nav-contact[data-open="true"] .nav-contact-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.18s ease;
}

.nav-contact-item:hover { background-color: rgba(31, 107, 255, 0.08); }

.nav-contact-ic {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(31, 107, 255, 0.1);
}

.nav-contact-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.nav-contact-txt strong {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #0a1c46;
}

.nav-contact-txt span {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  color: #5b6b90;
}

/* --- Mobile --- */

@media (max-width: 768px) {
  .nav {
    padding: 0;
  }

  .nav-bar {
    padding: 6px 16px;
    gap: 8px;
  }

  .nav-links {
    display: none; /* no hamburger in the design; hide primary links on small screens */
  }

  .nav-btn-explore {
    display: none;
  }

  .nav-btn-demo {
    padding: 10px 18px;
    font-size: 14px;
  }
}

/* ===== section: hero ===== */
/* ============ HERO (Figma node 1:6) ============ */
/* Sits above the fixed .bg layer; below the fixed .nav. */

.hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 160px 16px 96px;
}

.hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(46%, 760px);
  background-image: url('../assets/background hero page.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 78% center;
  -webkit-mask-image: linear-gradient(to right, transparent, black 22%);
  mask-image: linear-gradient(to right, transparent, black 22%);
  pointer-events: none;
}

.hero-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1152px;
  min-height: 0;
}

/* --- Left column --- */

.hero-left {
  width: 566px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  border: 1px solid rgba(31, 107, 255, 0.22);
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.6);
}

.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: #22d3ee;
  flex-shrink: 0;
}

.hero-eyebrow-text {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 11.52px;
  line-height: 17.28px;
  letter-spacing: 2.0736px;
  text-transform: uppercase;
  color: #1f6bff;
  white-space: nowrap;
}

.hero-title {
  margin: 24px 0 0;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 70.4px;
  line-height: 68.992px;
  letter-spacing: -1.408px;
  color: #0a1c46;
}

.hero-title-line {
  display: block;
  white-space: nowrap;
}

/* In the design an empty line separates the two phrases:
   gradient line starts one full line-height below line 1. */
.hero-title-gradient {
  display: block;
  margin-top: 69px;
  max-width: 520px;
  background-image: linear-gradient(125.39deg, #0a1c46 6.17%, #1f6bff 54.38%, #22d3ee 93.83%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero-lead {
  margin: 24px 0 0;
  max-width: 576px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 18.4px;
  line-height: 29.9px;
  color: rgba(10, 28, 70, 0.8);
}

.hero-sub {
  margin: 16px 0 0;
  max-width: 576px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #5b6b90;
}

/* --- CTA buttons --- */

.hero-cta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 32px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 15.2px;
  line-height: 22.8px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.hero-btn-primary {
  padding: 12px 24px;
  background-color: #ff7a1a;
  color: #ffffff;
  filter: drop-shadow(0px 14px 15px rgba(255, 122, 26, 0.7));
}

.hero-btn-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.hero-btn-glass {
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.55);
  background-clip: padding-box;
  color: #0a1c46;
  box-shadow:
    0px 20px 45px 0px rgba(10, 28, 70, 0.28),
    inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* --- Certified-by logos --- */

.hero-certified {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

.hero-certified-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #8290b3;
  white-space: nowrap;
}

.hero-certified-logos {
  display: flex;
  align-items: center;
  gap: 18px;
}

.hero-certified-logo {
  height: 18px;
  width: auto;
  object-fit: contain;
  opacity: 0.7;
  filter: grayscale(0.15);
  transition: opacity 0.2s ease;
}

.hero-certified-logo:hover { opacity: 1; }

/* --- Stats row --- */

.hero-stats {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 40px;
}

.hero-stat-num {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.48px;
  color: #0a1c46;
  white-space: nowrap;
}

.hero-stat-label {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 13.6px;
  line-height: 20.4px;
  color: #5b6b90;
  white-space: nowrap;
}

/* --- Right glass card --- */

.hero-card {
  position: absolute;
  left: 623px;
  top: 82px;
  width: 520px;
  height: 520px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 35.2px;
  background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.6) 3.67%, rgba(228, 236, 255, 0.4) 96.33%);
  box-shadow:
    0px 20px 45px -22px rgba(10, 28, 70, 0.3),
    inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.hero-card-tag {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-card-tag-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.hero-card-tag-text {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 11.52px;
  line-height: 17.28px;
  letter-spacing: 1.152px;
  text-transform: uppercase;
  color: #1f6bff;
  white-space: nowrap;
}

.hero-card-dots {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
}

.hero-dot-orange { background-color: #ff7a1a; }
.hero-dot-cyan   { background-color: #22d3ee; }
.hero-dot-green  { background-color: #17c07b; }

/* --- Swiftee chat row --- */

.hero-chat {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 24px;
  padding: 12px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow:
    0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}

.hero-chat-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-image: linear-gradient(135deg, #1f6bff 0%, #0ca2f9 50%, #22d3ee 100%);
}

.hero-chat-avatar-icon {
  display: block;
  width: 24px;
  height: 24px;
}

.hero-chat-name {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 15.2px;
  line-height: 22.8px;
  letter-spacing: -0.304px;
  color: #0a1c46;
  white-space: nowrap;
}

.hero-chat-msg {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 12.48px;
  line-height: 18.72px;
  color: #5b6b90;
  white-space: nowrap;
}

/* --- Skill bars --- */

.hero-skills {
  width: 100%;
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow:
    0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}

.hero-skill + .hero-skill {
  margin-top: 12px;
}

.hero-skill-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.hero-skill-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 12.48px;
  line-height: 18.72px;
  color: rgba(10, 28, 70, 0.8);
  white-space: nowrap;
}

.hero-skill-val {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 12.48px;
  line-height: 18.72px;
  color: rgba(10, 28, 70, 0.8);
  white-space: nowrap;
}

.hero-skill-track {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 4px;
  border-radius: 9999px;
  background-color: #e7eefb;
  overflow: hidden;
}

.hero-skill-fill {
  display: block;
  height: 8px;
  border-radius: 9999px;
}

.hero-skill-fill-blue  { background-color: #1f6bff; }
.hero-skill-fill-cyan  { background-color: #22d3ee; }
.hero-skill-fill-green { background-color: #17c07b; }

/* --- Component chips (pinned to card bottom) --- */

.hero-chips {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding-top: 16px;
}

.hero-chip {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid rgba(31, 107, 255, 0.2);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 11.52px;
  line-height: 17.28px;
  color: #0a1c46;
  white-space: nowrap;
}

/* --- Tablet: narrow the photo strip so it can't crowd the copy --- */

@media (max-width: 1024px) and (min-width: 769px) {
  .hero-photo {
    width: min(38%, 420px);
    background-position: 85% center;
  }
}

/* --- Mobile --- */

@media (max-width: 768px) {
  .hero {
    padding: 108px 0 40px;
  }

  .hero-photo {
    position: static;
    display: block;
    width: 100%;
    height: 220px;
    margin-bottom: 32px;
    background-position: center 30%;
    -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent);
    mask-image: linear-gradient(to bottom, black 78%, transparent);
  }

  .hero-container {
    min-height: 0;
    padding: 0 16px;
  }

  .hero-left {
    width: 100%;
  }

  .hero-title {
    font-size: 44px;
    line-height: 46px;
    letter-spacing: -0.9px;
  }

  .hero-title-line {
    white-space: normal;
  }

  .hero-title-gradient {
    margin-top: 46px;
  }

  .hero-cta {
    flex-wrap: wrap;
  }

  .hero-stats {
    flex-wrap: wrap;
    gap: 20px 28px;
  }
}

/* ===== section: notlab ===== */
/* Section: This Is Not Another Robotics Lab. / This Is a Future-Skills Ecosystem. (Figma node 1:114) */
/* Page background behind this section is a light periwinkle (~#e9eefb) set at page level, not here. */

.notlab {
  width: 100%;
  padding: 112px 16px;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  box-sizing: border-box;
}

.notlab *,
.notlab *::before,
.notlab *::after {
  box-sizing: border-box;
}

.notlab-inner {
  max-width: 1152px;
  margin: 0 auto;
}

/* ---------- Heading block ---------- */

.notlab-heading {
  max-width: 672px;
  margin: 0 auto;
  text-align: center;
}

.notlab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 27px;
  padding: 5px 13px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(31, 107, 255, 0.22);
  border-radius: 9999px;
}

.notlab-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22d3ee;
  flex-shrink: 0;
}

.notlab-eyebrow-text {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 400;
  font-size: 11.52px;
  line-height: 17.28px;
  letter-spacing: 2.0736px;
  text-transform: uppercase;
  color: #1f6bff;
  white-space: nowrap;
}

.notlab-title {
  margin: 20px 0 0;
  font-family: 'Sora', 'Segoe UI', Arial, sans-serif;
  font-weight: 500;
  font-size: 46.4px;
  line-height: 51.04px;
  letter-spacing: -0.928px;
  text-align: center;
  color: #0a1c46;
}

.notlab-title-line1 {
  display: block;
}

/* Gradient line sits one blank line (51px) below line 1; 476px width forces the
   two-line wrap "This Is a Future- / Skills Ecosystem." as in the design. */
.notlab-title-line2 {
  display: block;
  max-width: 476px;
  margin: 10px auto 0;
  background-image: linear-gradient(129.18deg, #0a1c46 6.17%, #1f6bff 54.38%, #22d3ee 93.83%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- Comparison cards ---------- */

.notlab-cards {
  display: flex;
  gap: 24px;
  margin-top: 56px;
}

.notlab-card {
  position: relative;
  flex: 1 1 0;
  min-height: 321px;
  padding: 33px;
  border-radius: 24px;
}

.notlab-card-light {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0px 20px 45px 0px rgba(10, 28, 70, 0.28),
              inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
}

.notlab-card-dark {
  background: linear-gradient(161.81deg, rgba(10, 28, 70, 0.72) 7.74%, rgba(6, 18, 47, 0.62) 92.27%);
  border: 1px solid rgba(127, 230, 245, 0.22);
  box-shadow: 0px 24px 55px 0px rgba(6, 18, 47, 0.7),
              inset 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
}

.notlab-tag {
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  font-weight: 500;
  font-size: 12.8px;
  line-height: 19.2px;
  white-space: nowrap;
}

.notlab-tag-not {
  background: rgba(229, 72, 77, 0.1);
  color: #e5484d;
}

.notlab-tag-is {
  background: rgba(23, 192, 123, 0.2);
  color: #7fe6f5;
}

.notlab-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.notlab-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notlab-item + .notlab-item {
  margin-top: 16px;
}

.notlab-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}

.notlab-item-icon svg {
  display: block;
  width: 15px;
  height: 15px;
}

.notlab-item-icon-x {
  background: rgba(229, 72, 77, 0.12);
}

.notlab-item-icon-check {
  background: linear-gradient(135deg, #17c07b 0%, #22d3ee 100%);
}

.notlab-item-text {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(10, 28, 70, 0.7);
  text-decoration: line-through;
}

.notlab-item-text-dark {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  .notlab {
    padding: 72px 16px;
  }

  .notlab-title {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.64px;
  }

  .notlab-title-line2 {
    margin-top: 6px;
    max-width: 100%;
  }

  .notlab-cards {
    flex-direction: column;
    margin-top: 40px;
  }

  .notlab-card {
    min-height: 0;
    padding: 24px;
  }

  .notlab-item-text {
    font-size: 15px;
    line-height: 22px;
  }
}

/* ===== section: journey ===== */
/* Section: From Curiosity to Creation (Figma node 1:205) */
/* Page background behind this section is a light periwinkle (~#e9eefb) set at page level, not here. */

.journey {
  width: 100%;
  padding: 112px 16px;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  box-sizing: border-box;
}

.journey *,
.journey *::before,
.journey *::after {
  box-sizing: border-box;
}

.journey-inner {
  max-width: 1152px;
  margin: 0 auto;
}

/* ---------- Heading block ---------- */

.journey-heading {
  max-width: 672px;
  margin: 0 auto;
  text-align: center;
}

.journey-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 27px;
  padding: 5px 13px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(31, 107, 255, 0.22);
  border-radius: 9999px;
}

.journey-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22d3ee;
  flex-shrink: 0;
}

.journey-eyebrow-text {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 400;
  font-size: 11.52px;
  line-height: 17.28px;
  letter-spacing: 2.0736px;
  text-transform: uppercase;
  color: #1f6bff;
  white-space: nowrap;
}

.journey-title {
  margin: 20px 0 0;
  font-family: 'Sora', 'Segoe UI', Arial, sans-serif;
  font-weight: 500;
  font-size: 46.4px;
  line-height: 51.04px;
  letter-spacing: -0.928px;
  text-align: center;
  color: #0a1c46;
}

.journey-subtitle {
  margin: 16px auto 0;
  max-width: 672px;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: 16.8px;
  line-height: 27.3px;
  text-align: center;
  color: #5b6b90;
}

/* ---------- Step cards ---------- */

.journey-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 64px;
}

.journey-step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.journey-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  filter: drop-shadow(0px 16px 15px rgba(10, 28, 70, 0.5));
}

.journey-step-icon svg {
  display: block;
  width: 26px;
  height: 26px;
}

.journey-step-icon-blue   { background: #1f6bff; }
.journey-step-icon-cyan   { background: #22d3ee; }
.journey-step-icon-orange { background: #ff7a1a; }
.journey-step-icon-green  { background: #17c07b; }

.journey-card {
  position: relative;
  width: 100%;
  margin-top: 20px;
  padding: 25px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0px 20px 45px 0px rgba(10, 28, 70, 0.28),
              inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
  text-align: center;
}

.journey-card-number {
  margin: 0;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 400;
  font-size: 12.48px;
  line-height: 18.72px;
  letter-spacing: 1.248px;
  color: #5b6b90;
}

.journey-card-title {
  margin: 9px 0 0;
  font-family: 'Sora', 'Segoe UI', Arial, sans-serif;
  font-weight: 500;
  font-size: 18.4px;
  line-height: 27.6px;
  letter-spacing: -0.368px;
  color: #0a1c46;
}

.journey-card-text {
  margin: 8px 0 0;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: 14.4px;
  line-height: 23.4px;
  color: #5b6b90;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  .journey {
    padding: 72px 16px;
  }

  .journey-title {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.64px;
  }

  .journey-subtitle {
    font-size: 15.5px;
    line-height: 25px;
  }

  .journey-steps {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 48px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== section: os ===== */
/* ============================================================
   Section: os — "A Complete Operating System for Future Skills"
   Page width 1539px, content container 1152px, bg #eef4ff
   ============================================================ */

.os {
  padding: 112px 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.os-container {
  max-width: 1152px;
  margin: 0 auto;
}

/* ---------- Section heading ---------- */

.os-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 672px;
  margin: 0 auto;
  text-align: center;
}

.os-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(31, 107, 255, 0.22);
  border-radius: 9999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.52px;
  font-weight: 400;
  line-height: 17.28px;
  letter-spacing: 2.0736px;
  text-transform: uppercase;
  color: #1f6bff;
  white-space: nowrap;
}

.os-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: #22d3ee;
  flex-shrink: 0;
}

.os-title {
  margin: 20px 0 0;
  font-family: 'Sora', sans-serif;
  font-size: 46.4px;
  font-weight: 600;
  line-height: 51.04px;
  letter-spacing: -0.928px;
  color: #0a1c46;
}

.os-subtitle {
  margin: 16px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16.8px;
  font-weight: 400;
  line-height: 27.3px;
  color: #5b6b90;
}

/* ---------- Bento grid ----------
   4 columns x 276px, 3 rows x 245px, 16px gaps (total 1152 x 767).
   Row 2 columns 2 and 4 are intentionally empty. */

.os-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 245px 245px 245px;
  gap: 16px;
  margin-top: 56px;
}

.os-card-platform     { grid-column: 1 / span 2; grid-row: 1; }
.os-card-swiftee      { grid-column: 3;          grid-row: 1 / span 2; }
.os-card-cards        { grid-column: 4;          grid-row: 1; }
.os-card-kits         { grid-column: 1;          grid-row: 2; }
.os-card-signals      { grid-column: 1 / span 2; grid-row: 3; }
.os-card-passport     { grid-column: 3;          grid-row: 3; }
.os-card-certificates { grid-column: 4;          grid-row: 3; }

/* ---------- Cards (light glass) ---------- */

.os-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  background-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0px 20px 45px -20px rgba(10, 28, 70, 0.28),
              inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.os-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  box-shadow: 0px 1px 1.5px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.os-card-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.os-icon-blue   { background-color: #1f6bff; }
.os-icon-cyan   { background-color: #22d3ee; }
.os-icon-orange { background-color: #ff7a1a; }
.os-icon-green  { background-color: #17c07b; }

.os-card-title {
  margin: 16px 0 0;
  font-family: 'Sora', sans-serif;
  font-size: 17.6px;
  font-weight: 600;
  line-height: 26.4px;
  letter-spacing: -0.352px;
  color: #0a1c46;
}

.os-card-text {
  margin: 8px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14.4px;
  font-weight: 400;
  line-height: 23.4px;
  color: #5b6b90;
}

/* ---------- Dark card (Swiftee AI Companion) ---------- */

.os-card-dark {
  border: 1px solid rgba(127, 230, 245, 0.22);
  background-color: transparent;
  background-image: linear-gradient(133.37deg, rgba(10, 28, 70, 0.72) 7.74%, rgba(6, 18, 47, 0.62) 92.27%);
  box-shadow: 0px 24px 55px -24px rgba(6, 18, 47, 0.7),
              inset 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
}

.os-card-dark .os-card-title {
  color: #ffffff;
}

.os-card-dark .os-card-text {
  color: rgba(255, 255, 255, 0.8);
}

.os-chip-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.os-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 8px 12px;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.1);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.12px;
  font-weight: 400;
  line-height: 19.68px;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

.os-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: #22d3ee;
  flex-shrink: 0;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  .os {
    padding: 64px 16px;
  }

  .os-heading {
    max-width: 100%;
  }

  .os-title {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.64px;
  }

  .os-subtitle {
    font-size: 15px;
    line-height: 24px;
  }

  .os-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 16px;
    margin-top: 40px;
  }

  .os-card-platform,
  .os-card-swiftee,
  .os-card-cards,
  .os-card-kits,
  .os-card-signals,
  .os-card-passport,
  .os-card-certificates {
    grid-column: auto;
    grid-row: auto;
  }

  .os-card {
    min-height: 0;
  }
}

/* ===== section: skills ===== */
/* ============================================================
   Section: skills — "Skills Students Carry Beyond the Room"
   Page width 1539px, content container 1152px, bg #eef4ff
   ============================================================ */

.skills {
  padding: 112px 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.skills-container {
  max-width: 1152px;
  margin: 0 auto;
}

/* ---------- Section heading ---------- */

.skills-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 672px;
  margin: 0 auto;
  text-align: center;
}

.skills-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(31, 107, 255, 0.22);
  border-radius: 9999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.52px;
  font-weight: 400;
  line-height: 17.28px;
  letter-spacing: 2.0736px;
  text-transform: uppercase;
  color: #1f6bff;
  white-space: nowrap;
}

.skills-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: #22d3ee;
  flex-shrink: 0;
}

.skills-title {
  margin: 20px 0 0;
  font-family: 'Sora', sans-serif;
  font-size: 46.4px;
  font-weight: 600;
  line-height: 51.04px;
  letter-spacing: -0.928px;
  color: #0a1c46;
}

.skills-subtitle {
  margin: 16px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16.8px;
  font-weight: 400;
  line-height: 27.3px;
  color: #5b6b90;
}

/* ---------- Skills grid ----------
   4 columns x 276px, rows 163 / 163 / 140, 16px gaps.
   Row 1: Critical Thinking spans 2 cols; row 3 col 4 is empty. */

.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 163px 163px 140px;
  gap: 16px;
  margin-top: 56px;
}

.skills-card-critical      { grid-column: 1 / span 2; grid-row: 1; }
.skills-card-ailiteracy    { grid-column: 3;          grid-row: 1; }
.skills-card-robotics      { grid-column: 4;          grid-row: 1; }
.skills-card-electronics   { grid-column: 1;          grid-row: 2; }
.skills-card-communication { grid-column: 2;          grid-row: 2; }
.skills-card-collaboration { grid-column: 3;          grid-row: 2; }
.skills-card-creativity    { grid-column: 4;          grid-row: 2; }
.skills-card-judgment      { grid-column: 1;          grid-row: 3; }
.skills-card-problem       { grid-column: 2;          grid-row: 3; }
.skills-card-selfdirection { grid-column: 3;          grid-row: 3; }

/* ---------- Cards (light glass) ---------- */

.skills-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  background-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0px 20px 45px 0px rgba(10, 28, 70, 0.28),
              inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
}

.skills-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.skills-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background-image: linear-gradient(135deg, #1f6bff 0%, #0ca2f9 50%, #22d3ee 100%);
  flex-shrink: 0;
}

.skills-card-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.skills-card-title {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-size: 16.32px;
  font-weight: 600;
  line-height: 24.48px;
  letter-spacing: -0.3264px;
  color: #0a1c46;
}

.skills-card-text {
  margin: 12px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14.08px;
  font-weight: 400;
  line-height: 22.88px;
  color: #5b6b90;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  .skills {
    padding: 64px 16px;
  }

  .skills-heading {
    max-width: 100%;
  }

  .skills-title {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.64px;
  }

  .skills-subtitle {
    font-size: 15px;
    line-height: 24px;
  }

  .skills-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 16px;
    margin-top: 40px;
  }

  .skills-card-critical,
  .skills-card-ailiteracy,
  .skills-card-robotics,
  .skills-card-electronics,
  .skills-card-communication,
  .skills-card-collaboration,
  .skills-card-creativity,
  .skills-card-judgment,
  .skills-card-problem,
  .skills-card-selfdirection {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ===== section: progress ===== */
/* ============================================================
   Section: Measurable Progress, Not Just Activity  (slug: progress)
   Desktop content container: 1152px (page 1539px)
   ============================================================ */

.progress {
  padding: 112px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-container {
  width: 1152px;
  max-width: 100%;
}

/* ---------- Section heading ---------- */

.progress-heading {
  max-width: 672px;
  margin: 0 auto;
  text-align: center;
}

.progress-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 27px;
  padding: 5px 13px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(31, 107, 255, 0.22);
  border-radius: 9999px;
}

.progress-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #22d3ee;
  flex-shrink: 0;
}

.progress-eyebrow-text {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 11.52px;
  line-height: 17.28px;
  letter-spacing: 2.0736px;
  text-transform: uppercase;
  color: #1f6bff;
  white-space: nowrap;
}

.progress-title {
  margin: 20px 0 0;
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 46.4px;
  line-height: 51.04px;
  letter-spacing: -0.928px;
  color: #0a1c46;
}

.progress-lede {
  margin: 16px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 16.8px;
  line-height: 27.3px;
  color: #5b6b90;
}

/* ---------- Dashboard grid ---------- */

.progress-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 122px 331px 243px;
  gap: 16px;
}

/* Glass card base */
.progress-card {
  position: relative;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  box-shadow: 0px 20px 45px 0px rgba(10, 28, 70, 0.28),
              inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
}

/* ---------- Stat tiles ---------- */

.progress-stat {
  padding: 21px;
}

.progress-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.progress-stat-label {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 13.6px;
  line-height: 20.4px;
  color: #5b6b90;
  white-space: nowrap;
}

.progress-stat-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  flex-shrink: 0;
}

.progress-tile-green { background: #17c07b; }
.progress-tile-blue  { background: #1f6bff; }
.progress-tile-cyan  { background: #22d3ee; }

.progress-stat-value {
  margin: 8px 0 0;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.6px;
  color: #0a1c46;
  white-space: nowrap;
}

/* ---------- Chart panels ---------- */

.progress-panel {
  padding: 25px;
  overflow: hidden;
}

.progress-chart-card,
.progress-heatmap-card {
  grid-column: 1 / 3;
}

.progress-panel-title {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 16.8px;
  line-height: 25.2px;
  letter-spacing: -0.336px;
  color: #0a1c46;
  white-space: nowrap;
}

.progress-panel-sub {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 13.12px;
  line-height: 19.68px;
  color: #5b6b90;
  white-space: nowrap;
}

.progress-chart-wrap {
  margin-top: 16px;
}

.progress-area-chart {
  display: block;
  width: 100%;
  height: auto;
}

.progress-area-labels text {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

.progress-radar-wrap {
  margin-top: 8px;
}

.progress-radar-chart {
  display: block;
  width: 100%;
  max-width: 323px;
  height: auto;
  margin: 0 auto;
}

.progress-radar-labels text {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

/* ---------- Skill heatmap ---------- */

.progress-heatmap {
  margin-top: 16px;
}

.progress-heatmap-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-heatmap-row + .progress-heatmap-row {
  margin-top: 12px;
}

.progress-heatmap-label {
  width: 64px;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 12.48px;
  line-height: 18.72px;
  color: #0a1c46;
  white-space: nowrap;
}

.progress-heatmap-cells {
  flex: 1;
  display: flex;
  gap: 6px;
}

.progress-cell {
  flex: 1;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  opacity: 0.9;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 11.2px;
  line-height: 16.8px;
  color: #ffffff;
  white-space: nowrap;
}

.progress-cell-green { background: #17c07b; }
.progress-cell-blue  { background: #1f6bff; }
.progress-cell-cyan  { background: #22d3ee; }

/* ---------- Intervention alerts (dark card) ---------- */

.progress-alert-card {
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(159.39deg, rgba(10, 28, 70, 0.72) 7.735%, rgba(6, 18, 47, 0.62) 92.265%);
  border: 1px solid rgba(127, 230, 245, 0.22);
  box-shadow: 0px 24px 55px 0px rgba(6, 18, 47, 0.7),
              inset 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
}

.progress-alert-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: #ff7a1a;
}

.progress-alert-title {
  margin: 16px 0 0;
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 16.8px;
  line-height: 25.2px;
  letter-spacing: -0.336px;
  color: #ffffff;
  white-space: nowrap;
}

.progress-alert-text {
  margin: 8px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 13.6px;
  line-height: 22.1px;
  color: rgba(255, 255, 255, 0.8);
}

.progress-alert-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
}

.progress-alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #ff7a1a;
  flex-shrink: 0;
}

.progress-alert-usage {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 12.48px;
  line-height: 18.72px;
  color: #7fe6f5;
  white-space: nowrap;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  .progress {
    padding: 64px 16px;
  }

  .progress-title {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.64px;
  }

  .progress-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 16px;
  }

  .progress-chart-card,
  .progress-heatmap-card {
    grid-column: auto;
  }

  .progress-card {
    min-height: 0;
  }

  .progress-alert-title,
  .progress-panel-title {
    white-space: normal;
  }

  .progress-heatmap-label {
    width: 56px;
    font-size: 11px;
  }
}

/* ===== section: why ===== */
/* ============================================================
   Section: Why Schools Choose SCAI Space  (slug: why)
   Desktop content container: 1152px (page 1539px)
   ============================================================ */

.why {
  padding: 112px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.why-container {
  width: 1152px;
  max-width: 100%;
}

/* ---------- Section heading ---------- */

.why-heading {
  max-width: 672px;
  margin: 0 auto;
  text-align: center;
}

.why-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 27px;
  padding: 5px 13px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(31, 107, 255, 0.22);
  border-radius: 9999px;
}

.why-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #22d3ee;
  flex-shrink: 0;
}

.why-eyebrow-text {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 11.52px;
  line-height: 17.28px;
  letter-spacing: 2.0736px;
  text-transform: uppercase;
  color: #1f6bff;
  white-space: nowrap;
}

.why-title {
  margin: 20px 0 0;
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 46.4px;
  line-height: 51.04px;
  letter-spacing: -0.928px;
  color: #0a1c46;
}

/* ---------- Cards grid ---------- */

.why-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.why-card {
  position: relative;
  box-sizing: border-box;
  min-height: 244px;
  padding: 25px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  box-shadow: 0px 20px 45px 0px rgba(10, 28, 70, 0.28),
              inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
}

.why-card-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
}

.why-tile-blue   { background: #1f6bff; }
.why-tile-cyan   { background: #22d3ee; }
.why-tile-green  { background: #17c07b; }
.why-tile-orange { background: #ff7a1a; }

.why-card-title {
  margin: 16px 0 0;
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 17.28px;
  line-height: 25.92px;
  letter-spacing: -0.3456px;
  color: #0a1c46;
}

.why-card-text {
  margin: 8px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 14.4px;
  line-height: 23.4px;
  color: #5b6b90;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  .why {
    padding: 64px 16px;
  }

  .why-title {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.64px;
  }

  .why-grid {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .why-card {
    min-height: 0;
  }
}

/* ===== section: missions ===== */
/* ============================================================
   Section: Real Missions. Real Making. Real Skills.  (missions)
   Figma node 1:770 — page width 1539px, content 1152px
   ============================================================ */

.missions {
  padding: 112px 16px;
}

.missions-container {
  max-width: 1152px;
  margin: 0 auto;
}

/* ---------- Section heading ---------- */

.missions-heading {
  max-width: 672px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.missions-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(31, 107, 255, 0.22);
  border-radius: 9999px;
}

.missions-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22d3ee;
  flex-shrink: 0;
}

.missions-eyebrow-text {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 11.52px;
  line-height: 17.28px;
  letter-spacing: 2.0736px;
  text-transform: uppercase;
  color: #1f6bff;
  white-space: nowrap;
}

.missions-title {
  margin: 20px 0 0;
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 46.4px;
  line-height: 51.04px;
  letter-spacing: -0.928px;
  color: #0a1c46;
}

.missions-subtitle {
  margin: 16px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 16.8px;
  line-height: 27.3px;
  color: #5b6b90;
}

/* ---------- Cards row ---------- */

.missions-grid {
  display: flex;
  gap: 15.6px;
  margin-top: 56px;
}

.missions-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 244px;
  padding: 25px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 20px 45px rgba(10, 28, 70, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.missions-card--dark {
  background: linear-gradient(147.129deg, rgba(10, 28, 70, 0.72) 7.735%, rgba(6, 18, 47, 0.62) 92.265%);
  border: 1px solid rgba(127, 230, 245, 0.22);
  box-shadow: 0 24px 55px rgba(6, 18, 47, 0.7),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.missions-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.missions-card-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.missions-card-icon--blue   { background: #1f6bff; }
.missions-card-icon--cyan   { background: #22d3ee; }
.missions-card-icon--orange { background: #ff7a1a; }
.missions-card-icon--green  { background: #17c07b; }

.missions-card-title {
  margin: 16px 0 0;
  max-width: 168px;
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 16.32px;
  line-height: 22.44px;
  letter-spacing: -0.3264px;
  color: #0a1c46;
}

.missions-card--dark .missions-card-title {
  color: #ffffff;
}

.missions-card-tags {
  margin-top: 12px;
  max-width: 168px;
  display: flex;
  flex-wrap: wrap;
  gap: 6.3px 6px;
}

.missions-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  background: #e7eefb;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 10.88px;
  line-height: 16.32px;
  color: #5b6b90;
  white-space: nowrap;
}

.missions-card--dark .missions-tag {
  background: rgba(255, 255, 255, 0.12);
  color: #7fe6f5;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  .missions {
    padding: 64px 16px;
  }

  .missions-title {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.64px;
  }

  .missions-grid {
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
  }

  .missions-card {
    height: auto;
    padding: 24px;
  }

  .missions-card-title,
  .missions-card-tags {
    max-width: none;
  }
}

/* ===== section: setup ===== */
/* ============================================================
   Section: Built for Schools. Ready to Run.  (setup)
   Figma node 1:889 — page width 1539px, content 1152px
   ============================================================ */

.setup {
  padding: 112px 16px;
}

.setup-container {
  max-width: 1152px;
  margin: 0 auto;
}

/* ---------- Section heading ---------- */

.setup-heading {
  max-width: 672px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.setup-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(31, 107, 255, 0.22);
  border-radius: 9999px;
}

.setup-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22d3ee;
  flex-shrink: 0;
}

.setup-eyebrow-text {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 11.52px;
  line-height: 17.28px;
  letter-spacing: 2.0736px;
  text-transform: uppercase;
  color: #1f6bff;
  white-space: nowrap;
}

.setup-title {
  margin: 20px 0 0;
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 46.4px;
  line-height: 51.04px;
  letter-spacing: -0.928px;
  color: #0a1c46;
}

.setup-subtitle {
  margin: 16px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 16.8px;
  line-height: 27.3px;
  color: #5b6b90;
}

/* ---------- Timeline of 5 steps ---------- */

.setup-timeline {
  position: relative;
  margin-top: 64px;
  display: flex;
  gap: 20.4px;
}

/* gradient connector line, centered on the 56px badges */
.setup-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 27.5px;
  height: 1px;
  background: linear-gradient(90deg, #1f6bff 0%, #22d3ee 50%, #17c07b 100%);
}

.setup-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.setup-badge {
  position: relative;
  width: 56px;
  height: 56px;
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0 rgba(31, 107, 255, 0.2),
              0 14px 28px rgba(10, 28, 70, 0.5);
}

.setup-badge svg {
  width: 24px;
  height: 24px;
  display: block;
}

.setup-num {
  position: absolute;
  top: -8px;
  left: 40px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ff7a1a;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 11.2px;
  line-height: 16.8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.setup-card {
  margin-top: 20px;
  width: 100%;
  padding: 21px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 20px 45px rgba(10, 28, 70, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-align: center;
}

.setup-card-title {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: #0a1c46;
}

.setup-card-text {
  margin: 8px auto 0;
  max-width: 172px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 13.6px;
  line-height: 22.1px;
  color: #5b6b90;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  .setup {
    padding: 64px 16px;
  }

  .setup-title {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.64px;
  }

  .setup-timeline {
    flex-direction: column;
    gap: 32px;
    margin-top: 48px;
  }

  .setup-line {
    display: none;
  }

  .setup-step {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  .setup-card-text {
    max-width: 240px;
  }
}

/* ===== section: cta ===== */
/* ============================================================
   CTA section — Figma node 1:994 ("Container:transform")
   Dark glass CTA card on light page background.
   ============================================================ */

.cta,
.cta * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Figma: outer container offset top 24px + padding 112px 16px */
.cta {
  display: block;
  width: 100%;
  padding: 136px 16px 112px;
}

.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Dark translucent gradient card, 1152 x 521 */
.cta-card {
  position: relative;
  width: 1152px;
  max-width: 100%;
  height: 521px;
  border: 1px solid rgba(127, 230, 245, 0.22);
  border-radius: 40px;
  background-image: linear-gradient(165.37deg, rgba(10, 28, 70, 0.72) 7.735%, rgba(6, 18, 47, 0.62) 92.265%);
  box-shadow:
    0px 24px 55px -24px rgba(6, 18, 47, 0.7),
    inset 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

/* Subtle blueprint grid overlay (approximated 48px cell) */
.cta-grid {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image:
    linear-gradient(180deg, rgba(31, 107, 255, 0.06) 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(90deg, rgba(31, 107, 255, 0.06) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Cyan glow orb, top-right, blurred */
.cta-glow {
  position: absolute;
  left: 942px;
  top: -96px;
  width: 288px;
  height: 288px;
  border-radius: 50%;
  filter: blur(64px);
  background: radial-gradient(circle closest-side,
    rgba(34, 211, 238, 0.5) 0%,
    rgba(26, 158, 179, 0.375) 25%,
    rgba(17, 106, 119, 0.25) 50%,
    rgba(9, 53, 60, 0.125) 75%,
    rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* Left text column */
.cta-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100% - 96px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border: 1px solid rgba(127, 230, 245, 0.3);
  border-radius: 9999px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 11.52px;
  line-height: 17.28px;
  letter-spacing: 2.0736px;
  text-transform: uppercase;
  color: #7fe6f5;
  white-space: nowrap;
}

.cta-title {
  margin-top: 20px;
  max-width: 573px;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 51.2px;
  line-height: 53.76px;
  letter-spacing: -1.024px;
  color: #ffffff;
}

.cta-title-gradient {
  background-image: linear-gradient(90deg,
    rgb(34, 211, 238) 0%,
    rgb(77, 210, 231) 7.1429%,
    rgb(102, 208, 223) 14.286%,
    rgb(122, 207, 216) 21.429%,
    rgb(139, 205, 208) 28.571%,
    rgb(154, 203, 200) 35.714%,
    rgb(167, 201, 193) 42.857%,
    rgb(180, 199, 185) 50%,
    rgb(192, 197, 177) 57.143%,
    rgb(204, 194, 168) 64.286%,
    rgb(215, 191, 160) 71.429%,
    rgb(225, 188, 151) 78.571%,
    rgb(235, 185, 142) 85.714%,
    rgb(245, 182, 132) 92.857%,
    rgb(255, 178, 122) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.cta-desc {
  margin-top: 20px;
  max-width: 576px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.8);
}

.cta-actions {
  padding-top: 32px;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: #ff7a1a;
  border: none;
  border-radius: 9999px;
  box-shadow: 0px 14px 15px rgba(255, 122, 26, 0.7);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 15.2px;
  line-height: 22.8px;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.cta-button-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Glass QR card, right side */
.cta-qr-card {
  position: absolute;
  left: 761px;
  top: 127px;
  width: 240px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px;
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  box-shadow:
    0px 20px 45px 0px rgba(10, 28, 70, 0.28),
    inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
}

.cta-qr-tile {
  width: 160px;
  height: 160px;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-qr-icon {
  width: 128px;
  height: 128px;
  display: block;
}

.cta-qr-caption {
  margin-top: 16px;
  width: 190px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 13.12px;
  line-height: 19.68px;
  text-align: center;
  color: rgba(10, 28, 70, 0.8);
}

/* ------------------------------------------------------------ */
@media (max-width: 768px) {
  .cta {
    padding: 64px 16px;
  }

  .cta-card {
    height: auto;
    padding: 48px 24px 56px;
  }

  .cta-content {
    position: static;
    transform: none;
    width: 100%;
  }

  .cta-title {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -0.72px;
  }

  .cta-button {
    white-space: normal;
  }

  .cta-glow {
    left: auto;
    right: -96px;
  }
}

/* ===== section: footer ===== */
/* ============================================================
   Footer — Figma node 1:1032 ("Footer")
   Frosted white card on light page background.
   ============================================================ */

.footer,
.footer * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 32px 16px 40px;
}

/* Glass card, 1152 wide */
.footer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 1152px;
  max-width: 100%;
  padding: 49px;
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  box-shadow:
    0px 20px 45px 0px rgba(10, 28, 70, 0.28),
    inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
}

/* Top area: brand block + 3 link columns
   Figma x-offsets: brand 0 (w 417.5), cols at 457.5 / 667 / 876.5 (w 177.5)
   => 40px gap after brand, 32px between columns */
.footer-top {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 32px;
}

.footer-brand {
  flex: 0 0 auto;
  width: 417.5px;
  margin-right: 8px; /* 32px gap + 8px = 40px total after brand */
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.footer-logo-img {
  display: block;
  height: 84px;
  width: auto;
}

.footer-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  flex-shrink: 0;
  background-image: linear-gradient(135deg,
    rgb(31, 107, 255) 0%,
    rgb(27, 116, 254) 7.1429%,
    rgb(24, 124, 254) 14.286%,
    rgb(20, 132, 253) 21.429%,
    rgb(17, 140, 252) 28.571%,
    rgb(15, 148, 251) 35.714%,
    rgb(13, 155, 250) 42.857%,
    rgb(12, 162, 249) 50%,
    rgb(13, 169, 247) 57.143%,
    rgb(15, 177, 246) 64.286%,
    rgb(17, 184, 245) 71.429%,
    rgb(21, 191, 243) 78.571%,
    rgb(25, 197, 242) 85.714%,
    rgb(29, 204, 240) 92.857%,
    rgb(34, 211, 238) 100%);
}

.footer-logo-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.footer-logo-text {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 17.6px;
  line-height: 26.4px;
  letter-spacing: -0.352px;
  color: #0a1c46;
  white-space: nowrap;
}

.footer-logo-accent {
  color: #1f6bff;
}

.footer-desc {
  margin-top: 16px;
  width: 384px;
  max-width: 100%;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 14.4px;
  line-height: 23.4px;
  color: #5b6b90;
}

.footer-col {
  flex: 0 0 auto;
  width: 177.5px;
}

.footer-heading {
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 15.2px;
  line-height: 22.8px;
  letter-spacing: -0.304px;
  color: #0a1c46;
  white-space: nowrap;
}

.footer-list {
  list-style: none;
  margin-top: 12px;
}

.footer-list li {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 13.76px;
  line-height: 20.64px;
  color: #5b6b90;
  white-space: nowrap;
}

.footer-list li + li {
  margin-top: 8px;
}

/* Bottom copyright row */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-top: 40px;
  border-top: 1px solid rgba(31, 107, 255, 0.14);
  padding-top: 25px;
}

.footer-copyright {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 13.12px;
  line-height: 19.68px;
  color: #5b6b90;
  white-space: nowrap;
}

.footer-tagline {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 13.12px;
  line-height: 19.68px;
  color: #5b6b90;
  white-space: nowrap;
}

/* ------------------------------------------------------------ */
@media (max-width: 768px) {
  .footer-card {
    padding: 32px 24px;
  }

  .footer-top {
    flex-direction: column;
    gap: 32px;
  }

  .footer-brand {
    width: 100%;
    margin-right: 0;
  }

  .footer-col {
    width: 100%;
  }

  .footer-list li {
    white-space: normal;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .footer-copyright,
  .footer-tagline {
    white-space: normal;
  }
}


/* =====================================================================
   SKAI restructure — shared primitives
===================================================================== */

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 96px; }

.sk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.52px;
  line-height: 17.28px;
  letter-spacing: 2.0736px;
  text-transform: uppercase;
  color: #1f6bff;
}

.sk-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: #22d3ee;
  flex-shrink: 0;
}

.sk-title {
  margin: 14px 0 0;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.9px;
  color: #0a1c46;
}

.sk-sub {
  margin: 14px auto 0;
  max-width: 640px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  color: #5b6b90;
}

.nav-logo-img {
  display: block;
  height: 58px;
  width: auto;
}

.swiftee-inline {
  display: inline-block;
  width: 28px;
  height: 28px;
  vertical-align: -7px;
}

.swiftee-mini {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  margin-right: 6px;
}

/* ===== section: footprint ===== */

.footprint {
  position: relative;
  z-index: 1;
  padding: 96px 16px 72px;
}

.footprint-inner {
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.footprint-map-wrap {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
}

.footprint-map { display: block; width: 100%; height: auto; overflow: visible; }

.footprint-india-g path {
  fill: #0a1c46;
  stroke: rgba(120, 165, 255, 0.45);
  stroke-width: 9;
  stroke-linejoin: round;
  transition: fill 0.3s ease;
}

.footprint-map:hover .footprint-india-g path { fill: #12245a; }

.footprint-marker { cursor: pointer; }
.footprint-marker .hit { fill: transparent; }
.footprint-marker .dot { fill: #ff7a1a; transition: r 0.15s, fill 0.15s; }
.footprint-marker:hover .dot { fill: #1f6bff; r: 8; }
.footprint-marker .ring {
  fill: none;
  stroke: #ff7a1a;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: fp-pulse 2.4s ease-out infinite;
}
.footprint-marker:nth-of-type(odd) .ring { animation-delay: 1.2s; }
.footprint-marker:nth-of-type(3n) .ring { animation-delay: 0.6s; }

@keyframes fp-pulse {
  0%   { transform: scale(0.5); opacity: 0.85; }
  100% { transform: scale(2.6); opacity: 0; }
}

.footprint-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 11px;
  border-radius: 8px;
  background-color: #0a1c46;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -135%);
  opacity: 0;
  transition: opacity 0.15s;
}

.footprint-tooltip.is-on { opacity: 1; }

.footprint-badge {
  position: absolute;
  left: -6px;
  bottom: 28px;
  padding: 12px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0px 20px 45px -22px rgba(10, 28, 70, 0.35);
}

.footprint-badge-num {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  color: #1f6bff;
}

.footprint-badge-label {
  margin: 2px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  color: #5b6b90;
}

.footprint-lead {
  margin: 20px 0 0;
  max-width: 480px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(10, 28, 70, 0.8);
}

.footprint-stats {
  display: flex;
  gap: 36px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.footprint-stat-num {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.5px;
  color: #0a1c46;
  white-space: nowrap;
}

.footprint-stat-label {
  margin: 2px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.6px;
  color: #5b6b90;
  white-space: nowrap;
}

.footprint-note {
  margin: 22px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  color: #8b98b8;
}

/* ===== section: svideo ===== */

.svideo {
  position: relative;
  z-index: 1;
  padding: 72px 16px 96px;
}

.svideo-inner {
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.svideo-lead {
  margin: 20px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(10, 28, 70, 0.8);
}

.svideo-note {
  margin: 14px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #1f6bff;
}

.svideo-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: #071230;
  box-shadow: 0px 30px 60px -30px rgba(10, 28, 70, 0.55);
}

.svideo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #071230;
}

.svideo-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  border: none;
  padding: 0;
  background-image: radial-gradient(120% 160% at 80% 15%, #16418f 0%, #0a1c46 55%, #071230 100%);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.svideo-frame.is-playing .svideo-poster {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.svideo-poster-logo {
  position: absolute;
  top: 22%;
  left: 50%;
  width: 30%;
  max-width: 210px;
  transform: translate(-50%, -50%);
  filter: brightness(0) invert(1);
  opacity: 0.94;
}

.svideo-grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 44px);
}

.svideo-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background-color: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.svideo-poster:hover .svideo-play,
.svideo-poster:focus-visible .svideo-play {
  transform: translate(-50%, -50%) scale(1.1);
  background-color: rgba(255, 255, 255, 0.28);
}

.svideo-play-tri {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #ffffff;
  margin-left: 5px;
}

.svideo-cap {
  position: absolute;
  left: 18px;
  bottom: 14px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: #ffffff;
}

.svideo-cap-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: #e5484d;
  flex-shrink: 0;
}

/* ===== section: missionintro ===== */

.missionintro {
  position: relative;
  z-index: 1;
  padding: 96px 16px 48px;
  text-align: center;
}

.missionintro-inner { max-width: 1152px; margin: 0 auto; }

.missionintro-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 960px;
  margin: 44px auto 0;
  text-align: left;
}

.missionintro-card {
  padding: 30px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.75) 0%, rgba(228, 236, 255, 0.5) 100%);
  box-shadow: 0px 20px 45px -22px rgba(10, 28, 70, 0.2);
}

.missionintro-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #1f6bff;
}

.missionintro-card-title {
  margin: 12px 0 0;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  color: #0a1c46;
}

.missionintro-card-text {
  margin: 12px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #5b6b90;
}

/* ===== section: cycle ===== */

.cycle {
  position: relative;
  z-index: 1;
  padding: 96px 16px;
  text-align: center;
}

.cycle-inner { max-width: 1152px; margin: 0 auto; }

.cycle-wrap {
  margin-top: 64px;
  display: flex;
  justify-content: center;
}

.cycle-ring {
  position: relative;
  width: min(540px, 88vw);
  aspect-ratio: 1;
}

.cycle-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cycle-node {
  position: absolute;
  width: 118px;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.cycle-node-1 { left: 50%; top: 9.5%; }
.cycle-node-2 { left: 90.5%; top: 50%; }
.cycle-node-3 { left: 50%; top: 90.5%; }
.cycle-node-4 { left: 9.5%; top: 50%; }

.cycle-node-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 14px 30px -12px rgba(10, 28, 70, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cycle-node-icon svg { width: 26px; height: 26px; }

.cycle-icon-blue   { background-image: linear-gradient(135deg, #1f6bff 0%, #0ca2f9 100%); }
.cycle-icon-cyan   { background-image: linear-gradient(135deg, #0ca2f9 0%, #22d3ee 100%); }
.cycle-icon-orange { background-image: linear-gradient(135deg, #ff7a1a 0%, #ffab3d 100%); }
.cycle-icon-green  { background-image: linear-gradient(135deg, #17c07b 0%, #3fe0a0 100%); }

.cycle-node:hover .cycle-node-icon { transform: scale(1.08); }

.cycle-node.is-active .cycle-node-icon {
  transform: scale(1.16);
  box-shadow: 0px 18px 36px -12px rgba(31, 107, 255, 0.55), 0 0 0 4px rgba(31, 107, 255, 0.18);
}

.cycle-node-label {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #0a1c46;
  white-space: nowrap;
}

.cycle-center {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56%;
  height: 56%;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.88) 0%, rgba(228, 236, 255, 0.62) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0px 20px 45px -22px rgba(10, 28, 70, 0.3),
    inset 0px 1px 0px 0px rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9%;
}

.cycle-center-inner {
  text-align: center;
  transition: opacity 0.18s ease;
}

.cycle-center-step {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: #1f6bff;
}

.cycle-center-title {
  margin: 6px 0 0;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.4px;
  color: #0a1c46;
}

.cycle-center-text {
  margin: 8px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: #5b6b90;
}

/* ===== section: opmodel ===== */

.opmodel {
  position: relative;
  z-index: 1;
  padding: 96px 16px;
  text-align: center;
}

.opmodel-inner { max-width: 1152px; margin: 0 auto; }

.opmodel-flow {
  margin-top: 52px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.opmodel-node {
  flex: 1;
  max-width: 186px;
  padding: 18px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.8) 0%, rgba(228, 236, 255, 0.55) 100%);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.opmodel-node:hover { transform: translateY(-3px); }

.opmodel-node-num {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #1f6bff;
}

.opmodel-node-title {
  display: block;
  margin-top: 6px;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.3;
  color: #0a1c46;
}

.opmodel-node.is-active {
  background-image: linear-gradient(135deg, #1f6bff 0%, #0ca2f9 100%);
  border-color: transparent;
  box-shadow: 0px 18px 40px -14px rgba(31, 107, 255, 0.6);
  transform: translateY(-4px);
}

.opmodel-node.is-active .opmodel-node-num { color: rgba(255, 255, 255, 0.75); }
.opmodel-node.is-active .opmodel-node-title { color: #ffffff; }

.opmodel-connector {
  flex: none;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.opmodel-dash {
  stroke-dashoffset: 0;
  animation: op-flow 1.2s linear infinite;
}

@keyframes op-flow {
  to { stroke-dashoffset: -18; }
}

.opmodel-detail {
  margin: 32px auto 0;
  max-width: 860px;
  padding: 30px 34px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.8) 0%, rgba(228, 236, 255, 0.5) 100%);
  box-shadow: 0px 20px 45px -22px rgba(10, 28, 70, 0.25);
  text-align: left;
}

.opmodel-panel { display: none; }

.opmodel-panel.is-active {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  animation: op-fade 0.3s ease;
}

@keyframes op-fade {
  from { opacity: 0; transform: translateY(6px); }
}

.opmodel-panel-main { flex: 1.4; }
.opmodel-panel-side { flex: 1; }

.opmodel-panel-title {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #0a1c46;
}

.opmodel-panel-text {
  margin: 10px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #5b6b90;
}

.opmodel-panel-label {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #1f6bff;
}

.opmodel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.opmodel-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 9999px;
  border: 1px solid rgba(31, 107, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.7);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #0a1c46;
  white-space: nowrap;
}

.opmodel-chip img { width: 18px; height: 18px; }

.opmodel-swiftee-avatar {
  position: relative;
  width: 88px;
  height: 88px;
  margin-bottom: 18px;
}

.opmodel-swiftee-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.55;
  border: 2px solid rgba(31, 107, 255, 0.25);
  background-color: rgba(228, 236, 255, 0.6);
}

.opmodel-play-btn {
  position: absolute;
  left: -8px;
  bottom: -6px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, #1f6bff 0%, #0ca2f9 100%);
  box-shadow: 0 12px 26px -8px rgba(31, 107, 255, 0.65);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.opmodel-play-btn svg { margin-left: 1px; }

.opmodel-play-btn:hover { transform: scale(1.08); }

.opmodel-chip-logo { padding: 8px 16px; }

.opmodel-chip-logo img {
  width: auto;
  height: 20px;
}

/* ===== section: skillsx ===== */

.skillsx {
  position: relative;
  z-index: 1;
  padding: 96px 16px;
  text-align: center;
}

.skillsx-inner { max-width: 1152px; margin: 0 auto; }

.skillsx-hint {
  margin: 18px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #17c07b;
}

.skillsx-layout {
  margin-top: 40px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  text-align: left;
}

.skillsx-grid {
  flex: 1.7;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.skillsx-passport {
  flex: 1;
  min-width: 220px;
  max-width: 320px;
  position: sticky;
  top: 110px;
  text-align: center;
}

.skillsx-passport-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 20px;
  overflow: hidden;
  transform: rotate(-2deg);
  box-shadow: 0px 24px 50px -20px rgba(10, 28, 70, 0.4);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.skillsx-passport-trigger:hover,
.skillsx-passport-trigger:focus-visible {
  transform: rotate(0deg) translateY(-4px) scale(1.03);
  box-shadow: 0px 30px 60px -18px rgba(31, 107, 255, 0.5);
}

.skillsx-passport-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.skillsx-passport-hint {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  background-image: linear-gradient(to top, rgba(10, 28, 70, 0.85), transparent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.skillsx-passport-trigger:hover .skillsx-passport-hint,
.skillsx-passport-trigger:focus-visible .skillsx-passport-hint {
  opacity: 1;
  transform: translateY(0);
}

.skillsx-passport-caption {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #5b6b90;
}

.skillsx-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.8) 0%, rgba(228, 236, 255, 0.5) 100%);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-align: left;
}

.skillsx-card:hover {
  transform: translateY(-3px);
  box-shadow: 0px 18px 40px -18px rgba(10, 28, 70, 0.35);
}

.skillsx-card:active { transform: scale(0.985); }

.skillsx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.skillsx-name {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: #0a1c46;
}

.skillsx-level {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(31, 107, 255, 0.3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #1f6bff;
  white-space: nowrap;
}

.skillsx-track {
  position: relative;
  height: 8px;
  margin-top: 10px;
  border-radius: 9999px;
  background-color: #e7eefb;
  overflow: hidden;
}

.skillsx-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  border-radius: 9999px;
  background-image: linear-gradient(90deg, #1f6bff, #22d3ee);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.skillsx-desc {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #5b6b90;
}

.skillsx-xp {
  position: absolute;
  top: 44px;
  right: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  color: #17c07b;
  opacity: 0;
  pointer-events: none;
}

.skillsx-card.is-xp .skillsx-xp { animation: xp-float 0.9s ease-out; }

@keyframes xp-float {
  0%   { opacity: 0; transform: translateY(8px); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-20px); }
}

.skillsx-card.is-max {
  border-color: rgba(23, 192, 123, 0.5);
  box-shadow: 0 0 0 2px rgba(23, 192, 123, 0.22), 0px 18px 40px -18px rgba(23, 192, 123, 0.35);
}

.skillsx-card.is-max .skillsx-level {
  color: #17c07b;
  border-color: rgba(23, 192, 123, 0.45);
}

.skillsx-card.is-max .skillsx-fill {
  background-image: linear-gradient(90deg, #17c07b, #22d3ee);
}

@media (max-width: 900px) {
  .skillsx-layout { flex-direction: column; }

  .skillsx-grid { width: 100%; }

  .skillsx-passport {
    position: static;
    max-width: 260px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .skillsx-grid { grid-template-columns: 1fr; }
}

/* ===== lightbox (mission passport + Swiftee video) ===== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 28, 70, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lightbox-sheet {
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow: auto;
  padding: 10px;
  border-radius: 18px;
  background-color: #ffffff;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5);
  transform: scale(0.85) rotateX(10deg);
  transform-origin: top center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox[data-open="true"] .lightbox-sheet {
  transform: scale(1) rotateX(0deg);
}

.lightbox-sheet-video { max-width: 780px; background-color: #0a1c46; }

.lightbox-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.lightbox-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background-color: #000000;
}

.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0a1c46;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}

.lightbox-close:hover { transform: scale(1.08); }

/* ===== why: CBSE banner ===== */

.why-cbse {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 28px 32px;
  border-radius: 24px;
  background-image: linear-gradient(120deg, #0a1c46 0%, #16418f 100%);
  box-shadow: 0px 24px 50px -24px rgba(10, 28, 70, 0.65);
  flex-wrap: wrap;
  text-align: left;
}

.why-cbse-badge {
  flex: none;
  padding: 16px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.12);
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 1.5px;
  color: #ffffff;
}

.why-cbse-body { flex: 1; min-width: 260px; }

.why-cbse-title {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
}

.why-cbse-text {
  margin: 6px 0 0;
  max-width: 560px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
}

.why-cbse-chip {
  margin-left: auto;
  padding: 9px 16px;
  border-radius: 9999px;
  border: 1px solid rgba(34, 211, 238, 0.45);
  background-color: rgba(34, 211, 238, 0.14);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #22d3ee;
  white-space: nowrap;
}

/* ===== section: faq ===== */

.faq {
  position: relative;
  z-index: 1;
  padding: 96px 16px 120px;
}

.faq-inner { max-width: 820px; margin: 0 auto; }

.faq-head { text-align: center; }

.faq-list {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.8) 0%, rgba(228, 236, 255, 0.5) 100%);
  box-shadow: 0px 14px 34px -20px rgba(10, 28, 70, 0.25);
  overflow: hidden;
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  color: #0a1c46;
  text-align: left;
}

.faq-chev {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: #1f6bff;
  transition: transform 0.25s ease;
}

.faq-item.is-open .faq-chev { transform: rotate(180deg); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-a-inner {
  margin: 0;
  padding: 0 22px 20px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.75;
  color: #5b6b90;
}

/* ===== new sections: responsive ===== */

@media (max-width: 900px) {
  .footprint-inner,
  .svideo-inner,
  .missionintro-cols {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footprint-media { order: 1; }
  .footprint-copy { order: 0; }

  .opmodel-flow {
    flex-direction: column;
    align-items: stretch;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .opmodel-node { max-width: none; }

  .opmodel-connector {
    width: auto;
    height: 34px;
  }

  .opmodel-connector svg { transform: rotate(90deg); }

  .opmodel-panel.is-active {
    flex-direction: column;
    gap: 18px;
  }

  .why-cbse-chip { margin-left: 0; }
}

@media (max-width: 768px) {
  .nav-logo-img { height: 46px; }

  .cycle-node { width: 96px; }

  .cycle-node-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  .cycle-node-icon svg { width: 22px; height: 22px; }

  .cycle-node-label { font-size: 11.5px; }

  .cycle-center { width: 60%; height: 60%; }
  .cycle-center-title { font-size: 15.5px; }
  .cycle-center-text { font-size: 11.5px; }

  .svideo-play { width: 60px; height: 60px; }
}

/* --- Hero stat line (replaces sub-copy) --- */
.hero-stat-line {
  color: #5b6b90;
  font-weight: 500;
}

.hero-stat-hl {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1.35em;
  background-image: linear-gradient(120deg, #1f6bff 0%, #22d3ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* =====================================================================
   Card surfaces — light-blue tiles with original dark text for the
   content sections; the learning-cycle centre + footprint badge stay
   dark as deliberate accents.
===================================================================== */
:root {
  --card-lite: linear-gradient(150deg, #eef4ff 0%, #d9e6ff 100%);
  --card-lite-border: 1px solid rgba(31, 107, 255, 0.18);
  --card-lite-shadow: 0 18px 42px -24px rgba(31, 107, 255, 0.28);
  --card-lite-title: #0a1c46;
  --card-lite-text: #5b6b90;
}

/* notlab "This is not" tile */
.notlab-card-light {
  background: var(--card-lite);
  border: var(--card-lite-border);
  box-shadow: var(--card-lite-shadow);
}
.notlab-card-light .notlab-item-text { color: var(--card-lite-title); }

/* Why we exist / How we deliver */
.missionintro-card {
  background-image: var(--card-lite);
  border: var(--card-lite-border);
  box-shadow: var(--card-lite-shadow);
}
.missionintro-card-title { color: var(--card-lite-title); }
.missionintro-card-text { color: var(--card-lite-text); }

/* learning-cycle centre — kept dark as a focal accent */
.cycle-center {
  background-image: linear-gradient(150deg, #14275e 0%, #0a1c46 100%);
  border: 1px solid rgba(120, 160, 255, 0.16);
  box-shadow: 0 24px 50px -26px rgba(10, 28, 70, 0.5);
}
.cycle-center-title { color: #ffffff; }
.cycle-center-text { color: rgba(255, 255, 255, 0.72); }

/* The operating model */
.opmodel-node:not(.is-active) {
  background-image: var(--card-lite);
  border: var(--card-lite-border);
}
.opmodel-node:not(.is-active) .opmodel-node-title { color: var(--card-lite-title); }
.opmodel-detail {
  background-image: var(--card-lite);
  border: var(--card-lite-border);
  box-shadow: var(--card-lite-shadow);
}
.opmodel-panel-title { color: var(--card-lite-title); }
.opmodel-panel-text { color: var(--card-lite-text); }
.opmodel-chip {
  background-color: rgba(255, 255, 255, 0.72);
  border-color: rgba(31, 107, 255, 0.22);
  color: #0a1c46;
}

/* The outcomes that last */
.skillsx-card {
  background-image: var(--card-lite);
  border: var(--card-lite-border);
}
.skillsx-name { color: var(--card-lite-title); }
.skillsx-desc { color: var(--card-lite-text); }
.skillsx-track { background-color: #e7eefb; }

/* Why schools choose us */
.why-card {
  background: var(--card-lite);
  border: var(--card-lite-border);
  box-shadow: var(--card-lite-shadow);
}
.why-card-title { color: var(--card-lite-title); }
.why-card-text { color: var(--card-lite-text); }

/* FAQs */
.faq-item {
  background-image: var(--card-lite);
  border: var(--card-lite-border);
  box-shadow: var(--card-lite-shadow);
}
.faq-q { color: var(--card-lite-title); }
.faq-a-inner { color: var(--card-lite-text); }

/* For principals & school leaders (progress dashboard); alert card stays dark */
.progress-card:not(.progress-alert-card) {
  background: var(--card-lite);
  border: var(--card-lite-border);
  box-shadow: var(--card-lite-shadow);
}
.progress-stat-label { color: var(--card-lite-text); }
.progress-stat-value { color: var(--card-lite-title); }
.progress-panel-title { color: var(--card-lite-title); }
.progress-panel-sub { color: var(--card-lite-text); }
.progress-heatmap-label { color: var(--card-lite-title); }
.progress-area-labels text,
.progress-radar-labels text { fill: #5b6b90; }

/* footprint badge over the dark map — stays dark */
.footprint-badge {
  background-color: rgba(10, 28, 70, 0.92);
  border-color: rgba(120, 160, 255, 0.28);
}
.footprint-badge-num { color: #22d3ee; }
.footprint-badge-label { color: rgba(255, 255, 255, 0.72); }

/* =====================================================================
   Hover-magnify — every interactive tile lifts + scales on hover
===================================================================== */
.missionintro-card,
.notlab-card-light,
.notlab-card-dark,
.opmodel-node,
.skillsx-card,
.why-card,
.faq-item,
.progress-card:not(.progress-alert-card) {
  position: relative;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s ease;
}

.cycle-node {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.missionintro-card:hover,
.notlab-card-light:hover,
.notlab-card-dark:hover,
.opmodel-node:hover,
.skillsx-card:hover,
.why-card:hover,
.faq-item:hover,
.progress-card:not(.progress-alert-card):hover {
  transform: scale(1.035) !important; /* beats GSAP's inline reveal transform */
  box-shadow: 0 30px 60px -26px rgba(10, 28, 70, 0.4);
  z-index: 3;
}

.cycle-node:hover { transform: translate(-50%, -50%) scale(1.08); z-index: 3; }

/* =====================================================================
   Flying Swiftee companion — wanders the screen as the page scrolls
===================================================================== */
.swiftee-fly {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;              /* below the fixed nav (100), above content */
  width: 66px;
  pointer-events: none;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  filter: drop-shadow(0 12px 16px rgba(10, 28, 70, 0.22));
}

.swiftee-fly-face {
  transition: transform 0.3s ease;
}

.swiftee-fly-img {
  display: block;
  width: 100%;
  height: auto;
  animation: swiftee-flap 2.6s ease-in-out infinite;
}

@keyframes swiftee-flap {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-9px) rotate(5deg); }
}

@media (max-width: 768px) {
  .swiftee-fly { width: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .swiftee-fly { display: none; }
}