:root {
      /* ---- Genesis brand colors, sampled from the logo ---- */
      --navy: #121212;
      /* logo black, used as the dark hero background */
      --navy-2: #1a1a1a;
      --teal: #4ab49c;
      /* logo teal */
      --teal-dark: #37907a;
      /* deeper shade of the logo teal */
      --teal-btn-1: #3fa88f;
      --teal-btn-2: #5fc9ae;
      --teal-lighter: #eaf7f5;
      /* light tint of teal used for section backgrounds */
      --mint: #f2faf8;
      /* light tint of the logo teal */
      --mint-card: #e6f4f0;
      --white: #ffffff;
      --text-navy: #141414;
      /* logo black, used for headings/body ink */
      --text-dark: #1c1c1c;
      --text-muted: #6b6b6b;
      --card-border: #dceee9;
      /* soft teal-tinted border for cards */
      --check: var(--teal);
      /* ---- tech-stack icon brand colors (kept as their real-world brand colors) ---- */
      --python-blue: #3776ab;
      --excel-green: #217346;
      --sql-blue: #00758f;
      --powerbi-yellow: #f2c811;
      --python-yellow: #ffd43b;
    }

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

    html {
      overflow-x: hidden;
    }

    body {
      font-family: 'Poppins', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      background: var(--white);
      color: var(--text-navy);
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
    }

    .page {
      max-width: 1320px;
      margin: 0 auto;
    }

    /* ============ HERO ============ */
    .heros {
      position: relative;
      background: var(--navy);
      display: grid;
      grid-template-columns: 38.7% 34.7% 26.6%;
      overflow: hidden;
    }

    /* top-left teal corner triangle */
    .tri-top-left {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 60px 60px 0 0;
      border-color: var(--teal-dark) transparent transparent transparent;
    }

    .hero-left {
      position: relative;
      z-index: 3;
      padding: 26px 30px 24px 42px;
      display: flex;
      flex-direction: column;
    }

    .badge {
      align-self: flex-start;
      background: var(--teal-dark);
      color: var(--white);
      padding: 6px 14px;
      border-radius: 14px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.8px;
      margin-bottom: 16px;
    }

    .hero-left h1 {
      font-size: 34px;
      line-height: 1.08;
      color: var(--white);
      font-weight: 800;
    }

    .hero-left h1 .accent {
      color: var(--teal);
      display: block;
    }

    .hero-left h3 {
      margin-top: 16px;
      font-size: 15px;
      color: var(--white);
      font-weight: 700;
      line-height: 1.35;
    }

    .hero-left p.desc {
      margin-top: 12px;
      color: #b3b3b3;
      font-size: 11.5px;
      line-height: 1.7;
      max-width: 290px;
    }

   

    .tech-badges {
      display: flex;
      gap: 8px;
      margin-top: 18px;
      flex-wrap: wrap;
    }

    .tech-badge {
      background: var(--white);
      border-radius: 9px;
      padding: 9px 6px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 64px;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .tech-badge:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
    }

    .tech-badge svg,
    .tech-badge .glyph {
      width: 40px;
      height: 40px;
    }

    .tech-badge span.label {
      font-size: 8px;
      font-weight: 700;
      color: var(--text-navy);
    }

    .cta-btn {
      margin-top: 18px;
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(90deg, var(--teal-btn-1), var(--teal-btn-2));
      color: var(--white);
      border: none;
      padding: 11px 20px;
      border-radius: 22px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .cta-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 14px rgba(0, 184, 155, 0.35);
    }

    /* diamond accent bottom-left */
    .diamond-accent {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 70px;
      height: 70px;
      background: var(--teal-btn-1);
      clip-path: polygon(0 0, 0% 100%, 100% 100%);
      z-index: 1;
      opacity: 0.95;
    }

    /* ============ HERO CENTER (photo) ============ */
    .hero-center {
      position: relative;
      z-index: 2;
      overflow: hidden;
      padding: 14px 0;
      display: flex;
      align-items: center;
      min-height: 220px;
    }

    .hero-center img {
      width: 100%;
      height: calc(100% - 28px);
      object-fit: cover;
      display: block;
      border-radius: 18px;
      image-rendering: auto;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    }

    /* small teal triangle where photo meets bottom edge */
    .tri-photo-bottom {
      position: absolute;
      right: 12px;
      bottom: 14px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 0 30px 46px;
      border-color: transparent transparent var(--teal-btn-1) transparent;
      z-index: 3;
      border-bottom-right-radius: 18px;
    }

    /* ============ HERO RIGHT ============ */
    .hero-right {
      position: relative;
      z-index: 2;
      background: var(--mint);
      padding: 26px 26px 22px;
      display: flex;
      flex-direction: column;
    }

    .hero-right h2 {
      color: var(--navy);
      font-size: 16.5px;
      line-height: 1.32;
      font-weight: 800;
      margin-bottom: 16px;
      position: relative;
      z-index: 2;
    }

    .feature-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 11px;
      position: relative;
      z-index: 2;
      padding-left: 0px;
    }

    .feature-list li {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 12.8px;
      color: var(--text-navy);
      font-weight: 600;
      transition: transform 0.2s ease, color 0.2s ease;
    }

    .feature-list li:hover {
      transform: translateX(4px);
      color: var(--teal-dark);
    }

    .feature-list .icon {
      width: 20px;
      height: 20px;
      color: var(--teal);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .feature-list .icon svg {
      width: 100%;
      height: 100%;
    }

    .tri-panel-top {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 62px 55px 0;
      border-color: transparent var(--teal-dark) transparent transparent;
    }

    .tri-panel-bottom {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 1;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 52px 62px 0 0;
      border-color: var(--navy) transparent transparent transparent;
      /* triangle pointing: bottom-right corner filled navy */
    }

    .tri-panel-bottom {
      border-width: 0 0 60px 70px;
      border-color: transparent transparent var(--navy) transparent;
    }

    .dot-pattern {
      position: absolute;
      right: 16px;
      bottom: 44px;
      width: 54px;
      height: 40px;
      background-image: radial-gradient(var(--teal) 1.3px, transparent 1.3px);
      background-size: 7px 7px;
      opacity: 0.6;
      z-index: 1;
    }

    /* ============ INFO BAR ============ */
    .info-bar-wrap {
      padding: 0 42px;
      margin-top: 26px;
    }

    .info-bar {
      background: var(--mint-card);
      border-radius: 14px;
      display: flex;
      align-items: center;
      padding: 20px 30px;
    }

    .info-item {
      display: flex;
      align-items: center;
      gap: 14px;
      flex: 1;
      min-width: 0;
    }

    .info-icon {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      color: var(--teal);
    }

    .info-icon svg {
      width: 100%;
      height: 100%;
    }

    .info-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .info-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-navy);
    }

    .info-value {
      font-size: 14px;
      font-weight: 800;
      color: var(--text-navy);
    }

    .info-sub {
      font-size: 10px;
      color: var(--text-muted);
    }

    .info-divider {
      width: 1px;
      align-self: stretch;
      background: rgba(20, 20, 20, 0.12);
      margin: 0 24px;
    }

    /* ============ ABOUT ============ */
    .about {
      padding: 34px 42px 50px;
    }

    .about-eyebrow {
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .about-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
    }

    .about-text h3 {
      font-size: 22px;
      font-weight: 800;
      color: var(--navy);
      margin-bottom: 10px;
    }

    .about-text p {
      font-size: 11.5px;
      line-height: 1.7;
      color: var(--text-muted);
      margin-bottom: 12px;
      max-width: 500px;
    }

    .learn-more {
      color: var(--teal-dark);
      font-weight: 700;
      font-size: 12px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: gap 0.2s ease, color 0.2s ease;
    }

    .learn-more:hover {
      gap: 9px;
      color: var(--teal-btn-1);
    }

    .tech-card {
      background: linear-gradient(135deg, #14202b, #2f7d6c 55%, #4ab49c);
      color: var(--white);
      border-radius: 12px;
      padding: 16px 12px;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 9px;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      box-shadow: 0 4px 10px rgba(18, 32, 43, 0.15);
    }

    .tech-card-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .tech-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 26px rgba(18, 32, 43, 0.28);
    }

    .tech-card .icon-badge {
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.14);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5px;
    }

    .tech-card .icon-badge svg {
      width: 100%;
      height: 100%;
    }

    .tech-card h4 {
      font-size: 12px;
      font-weight: 800;
      color: var(--white);
    }

    .tech-card p {
      font-size: 9.3px;
      color: #e4f3ef;
      line-height: 1.55;
    }

    .together-card {
      background: linear-gradient(135deg, #14202b, #2f7d6c 55%, #4ab49c);
      color: var(--white);
      border-radius: 12px;
      padding: 16px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      text-align: left;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      box-shadow: 0 4px 10px rgba(18, 32, 43, 0.15);
    }

    .together-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 26px rgba(18, 32, 43, 0.28);
    }

    .together-card .glyph {
      width: 34px;
      height: 34px;
    }

    .together-card p {
      font-size: 9.3px;
      color: #e4f3ef;
      line-height: 1.55;
    }

    /* ================= NEW: COURSE CURRICULUM (placed beside "What You'll Learn") ================= */
    .curriculum-side {
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex: 1;
      min-width: 0;
    }

    .curriculum-side-heading {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 2px;
    }

    .curriculum-side-heading h2 {
      font-size: 20px;
      font-weight: 800;
      color: var(--navy);
    }

    .curriculum-side-heading p {
      font-size: 12.5px;
      color: var(--white);
    }

    .curriculum-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .curriculum-card {
      background: var(--white);
      border: 1.5px solid var(--card-border);
      border-radius: 14px;
      padding: 18px 18px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .curriculum-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 26px rgba(55, 144, 122, 0.16);
      border-color: var(--teal);
    }

    .curriculum-card-head {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .curriculum-number {
      width: 32px;
      height: 32px;
      min-width: 32px;
      border-radius: 50%;
      background: var(--teal);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      transition: transform 0.25s ease, background 0.25s ease;
    }

    .curriculum-card:hover .curriculum-number {
      background: var(--teal-dark);
      transform: scale(1.08);
    }

    .curriculum-card h4 {
      font-size: 14px;
      font-weight: 800;
      color: var(--navy);
    }

    .curriculum-card ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .curriculum-card li {
      font-size: 11.5px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 8px;
      transition: transform 0.2s ease, color 0.2s ease;
    }

    .curriculum-card li:hover {
      transform: translateX(3px);
      color: var(--navy);
    }

    .curriculum-card li::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--teal-dark);
      flex-shrink: 0;
    }

    /* ============ SPOTLIGHT SECTION (Side-by-Side Layout) ============ */
    .spotlight {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 24px;
      padding: 0 30px;
      margin-bottom: 30px;
    }

    .spotlight-left {
      flex: 1;
      min-width: 0;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
    }

    .spotlight-right {
      flex: 0 0 400px;
      max-width: 340px;
      display: flex;
      flex-direction: column;
    }

    .mern-wrap {
      max-width: 340px;
      width: 100%;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(20, 40, 40, 0.08);
    }

    .mern-block {
      padding: 34px 26px 38px;
    }

    .mern-block.mint-bg {
      background: var(--teal-lighter);
    }

    .mern-block.white-bg {
      background: var(--white);
    }

    .mern-block h2 {
      font-size: 22px;
      font-weight: 800;
      color: var(--navy);
      line-height: 1.25;
      margin-bottom: 12px;
    }

    .mern-block p {
      font-size: 13.5px;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 16px;
    }

    /* ---- link with arrow ---- */
    .mern-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--teal-dark);
      font-weight: 700;
      font-size: 13.5px;
      text-decoration: none;
      cursor: pointer;
    }

    .mern-link svg {
      width: 15px;
      height: 15px;
      transition: transform 0.25s ease;
    }

    .mern-link:hover {
      color: #0f7c66;
    }

    .mern-link:hover svg {
      transform: translateX(5px);
    }

    /* ---- illustration ---- */
    .mern-illus-wrap {
      display: flex;
      justify-content: center;
      margin: 10px 0 6px;
    }

    .mern-illus {
      position: relative;
      width: 250px;
      height: 190px;
      max-width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .mern-illus .mern-circle-bg {
      position: absolute;
      width: 186px;
      height: 186px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #c9ebe0, #ddf1ea);
      top: 2px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 0;
      animation: mernPulseSoft 4.5s ease-in-out infinite;
    }

    @keyframes mernPulseSoft {

      0%,
      100% {
        transform: translateX(-50%) scale(1);
      }

      50% {
        transform: translateX(-50%) scale(1.035);
      }
    }

    .mern-character {
      position: relative;
      z-index: 1;
      animation: mernFloatChar 3.6s ease-in-out infinite;
      transition: transform 0.3s ease;
    }

    @keyframes mernFloatChar {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-5px);
      }
    }

    .mern-illus-wrap:hover .mern-character {
      transform: translateY(-8px) scale(1.02);
    }

    .mern-code-chip {
      position: absolute;
      background: #d3efe6;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 9px 11px;
      z-index: 2;
      box-shadow: 0 4px 10px rgba(22, 153, 124, 0.18);
      transition: transform 0.35s ease;
    }

    .mern-code-chip.left {
      left: 6px;
      top: 38%;
      animation: mernDriftLeft 3.2s ease-in-out infinite;
    }

    .mern-code-chip.right {
      right: 8px;
      top: 22%;
      animation: mernDriftRight 3.8s ease-in-out infinite;
    }

    @keyframes mernDriftLeft {

      0%,
      100% {
        transform: translateY(0) rotate(-4deg);
      }

      50% {
        transform: translateY(-6px) rotate(-8deg);
      }
    }

    @keyframes mernDriftRight {

      0%,
      100% {
        transform: translateY(0) rotate(4deg);
      }

      50% {
        transform: translateY(-7px) rotate(8deg);
      }
    }

    .mern-illus-wrap:hover .mern-code-chip.left {
      transform: translate(-6px, -10px) rotate(-14deg) scale(1.08);
    }

    .mern-illus-wrap:hover .mern-code-chip.right {
      transform: translate(6px, -10px) rotate(14deg) scale(1.08);
    }

    .mern-code-chip svg {
      width: 20px;
      height: 20px;
    }

    .mern-leaf {
      position: absolute;
      z-index: 2;
      transition: transform 0.35s ease;
      transform-origin: bottom center;
    }

    .mern-leaf.leaf-left {
      left: 10px;
      bottom: 14px;
    }

    .mern-leaf.leaf-right {
      right: 6px;
      bottom: 8px;
    }

    .mern-illus-wrap:hover .mern-leaf.leaf-left {
      transform: rotate(-10deg);
    }

    .mern-illus-wrap:hover .mern-leaf.leaf-right {
      transform: rotate(10deg);
    }

    .mern-sparkle {
      position: absolute;
      z-index: 2;
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.4s ease;
    }

    .mern-sparkle.s1 {
      top: 14px;
      left: 70px;
    }

    .mern-sparkle.s2 {
      top: 34px;
      right: 56px;
    }

    .mern-sparkle.s3 {
      bottom: 40px;
      left: 36px;
    }

    .mern-illus-wrap:hover .mern-sparkle {
      opacity: 1;
    }

    .mern-illus-wrap:hover .mern-sparkle.s1 {
      transform: translateY(-6px);
    }

    .mern-illus-wrap:hover .mern-sparkle.s2 {
      transform: translateY(-4px) rotate(20deg);
    }

    .mern-illus-wrap:hover .mern-sparkle.s3 {
      transform: translateY(-5px) rotate(-20deg);
    }

    /* ---- button ---- */
    .mern-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(90deg, var(--teal-btn-1), var(--teal-btn-2));
      color: var(--white);
      border: none;
      padding: 13px 22px;
      border-radius: 26px;
      font-size: 13.5px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      font-family: inherit;
    }

    .mern-btn svg {
      width: 15px;
      height: 15px;
      transition: transform 0.25s ease;
    }

    .mern-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(23, 201, 138, 0.35);
    }

    .mern-btn:hover svg {
      transform: translateX(4px);
    }

    .mern-btn:active {
      transform: translateY(-1px);
    }

    /* ================= BUILD REAL PROJECTS (left column) ================= */
    .projects-section {
      background: var(--teal);
      padding: 30px 26px;
      border-radius: 16px;
      width: 100%;
      height: 100%;
    }

    .projects-header {
      margin-bottom: 20px;
    }

    .projects-header h2 {
      font-size: 21px;
      font-weight: 800;
      color: black;
      margin-bottom: 9px;
      margin-top: 50px;
    }

    .projects-header p {
      font-size: 12.5px;
      color: var(--white);
      line-height: 1.6;
      max-width: 320px;
      margin-bottom: 13px;
    }

    .projects-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--white);
      font-weight: 700;
      font-size: 12.5px;
      text-decoration: none;
      cursor: pointer;
    }

    .projects-link svg {
      width: 14px;
      height: 14px;
      transition: transform 0.25s ease;
    }

    .projects-link:hover {
      color: var(--teal-btn-1);
    }

    .projects-link:hover svg {
      transform: translateX(5px);
    }

    .projects-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }

    .project-card {
      background: var(--mint-card);
      border: 1.5px solid var(--card-border);
      border-radius: 14px;
      overflow: hidden;
      padding: 9px 9px 14px;
      opacity: 0;
      transform: translateY(18px);
      transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, opacity 0.5s ease;
      cursor: pointer;
    }

    .project-card.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    .project-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 28px rgba(20, 90, 75, 0.16);
      border-color: var(--teal);
    }

    .project-card .thumb {
      position: relative;
      width: 100%;
      height: 88px;
      border-radius: 9px;
      overflow: hidden;
      margin-bottom: 11px;
    }

    .project-card .thumb svg {
      width: 100%;
      height: 100%;
      display: block;
      transition: transform 0.5s ease;
    }

    .project-card:hover .thumb svg {
      transform: scale(1.08);
    }

    .project-card h4 {
      font-size: 11.8px;
      font-weight: 800;
      color: var(--navy);
      padding: 0 3px;
      margin-bottom: 7px;
      transition: color 0.25s ease;
    }

    .project-card:hover h4 {
      color: var(--teal-dark);
    }

    .project-card ul {
      list-style: none;
      padding: 0 3px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .project-card li {
      font-size: 10px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
      transition: transform 0.2s ease, color 0.2s ease;
    }

    .project-card:hover li {
      color: var(--navy);
    }

    .project-card li::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--teal-dark);
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }

    .project-card li:hover {
      transform: translateX(3px);
    }

    .project-card li:hover::before {
      transform: scale(1.4);
    }

    /* ===== TOP SECTION ===== */
    .top-section {
      background: linear-gradient(180deg, var(--teal-lighter) 0%, #ffffff 100%);
      padding: 36px 48px 40px;
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      background: linear-gradient(135deg, #14202b, #2f7d6c 55%, #4ab49c);
    }

    .intro {
      flex: 0 0 300px;
    }

    .intro h1 {
      font-size: 28px;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 10px;
      letter-spacing: -0.3px;
    }

    .intro p {
      font-size: 14px;
      color: var(--white);
      line-height: 1.5;
      max-width: 260px;
    }

    .process-steps {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0;
      flex-wrap: nowrap;
      overflow-x: auto;
    }

    .step-card {
      background: var(--white);
      border-radius: 40px;
      padding: 14px 26px 14px 14px;
      display: flex;
      align-items: center;
      gap: 16px;
      box-shadow: 0 4px 18px rgba(15, 61, 62, 0.08);
      min-width: 100px;
      border: 1.5px solid transparent;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .step-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 28px rgba(15, 97, 84, 0.18);
      border-color: var(--white);
    }

    .step-icon {
      height: 40px;
      width: 40px;
      min-width: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--teal-btn-2), var(--teal-dark));
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      transition: transform 0.25s ease;
    }

    .step-card:hover .step-icon {
      transform: scale(1.08) rotate(-6deg);
    }

    .step-icon svg {
      width: 26px;
      height: 26px;
      fill: var(--white);
    }

    .step-text .step-number {
      font-size: 12px;
      font-weight: 700;
      color: var(--teal-dark);
      margin-bottom: 2px;
    }

    .step-text .step-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 2px;
    }

    .step-text .step-desc {
      font-size: 8px;
      color: var(--text-muted);
      line-height: 1.3;
      white-space: nowrap;
    }

    .step-arrow {
      color: var(--teal);
      font-size: 20px;
      margin: 0 8px;
      flex-shrink: 0;
    }

    /* ===== BOTTOM SECTION ===== */
    .bottom-section {
      display: grid;
      grid-template-columns: 1.6fr 1fr 0.85fr;
      gap: 0;
      padding: 32px 48px 40px;
      background: var(--white);
    }

    .section-heading h2 {
      font-size: 20px;
      font-weight: 800;
      color: var(--navy);
      margin-bottom: 6px;
    }

    .section-heading p {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 20px;
    }

    /* Career cards */
    .career-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .career-card {
      border: 1.5px solid var(--card-border);
      background: var(--white);
      border-radius: 10px;
      padding: 18px 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
      cursor: pointer;
    }

    .career-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 22px rgba(55, 144, 122, 0.18);
      border-color: var(--teal);
      background: var(--teal-lighter);
    }

    .career-icon {
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.25s ease;
    }

    .career-card:hover .career-icon {
      transform: scale(1.12);
    }

    .career-icon svg {
      width: 30px;
      height: 30px;
    }

    .career-card .role {
      font-size: 12px;
      font-weight: 700;
      color: var(--navy);
      line-height: 1.3;
    }

    /* Skills column */
    .skills-column {
      padding-left: 36px;
      border-left: 1px solid #eef2f2;
    }

    .skills-list {
      list-style: none;
      padding-left: 0px;
    }

    .skills-list li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13.5px;
      color: var(--text-dark);
      padding: 6px 0;
      transition: transform 0.2s ease, color 0.2s ease;
    }

    .skills-list li:hover {
      transform: translateX(5px);
      color: var(--teal-dark);
    }

    .check-icon {
      width: 16px;
      height: 16px;
      min-width: 16px;
      border-radius: 50%;
      background: var(--check);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .check-icon svg {
      width: 9px;
      height: 9px;
      fill: none;
      stroke: var(--white);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Certification column */
    .cert-column {
      background: var(--white);
      border-radius: 14px;
      margin-left: 24px;
    }

    .cert-column h2 {
      font-size: 17px;
      font-weight: 800;
      color: var(--navy);
      line-height: 1.3;
      margin-bottom: 18px;
    }

    .cert-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding-left: 0px;
    }

    .cert-list li {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-dark);
      transition: transform 0.2s ease, color 0.2s ease;
      cursor: pointer;
    }

    .cert-list li:hover {
      transform: translateX(5px);
      color: var(--teal-dark);
    }

    .cert-icon {
      width: 26px;
      height: 26px;
      min-width: 26px;
      border-radius: 6px;
      background: var(--teal);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .cert-list li:hover .cert-icon {
      background: var(--teal-dark);
      transform: scale(1.1);
    }

    .cert-icon svg {
      width: 14px;
      height: 14px;
      fill: var(--white);
    }

    /* =========================================================
     RESPONSIVE BREAKPOINTS
     Desktop (default) -> Laptop/Tablet-landscape (<=980px)
     -> Tablet-portrait (<=760px) -> Mobile (<=480px)
  ========================================================= */

    /* ---------- Large tablets / small laptops ---------- */
    @media (max-width: 980px) {
      .heros {
        grid-template-columns: 1fr;
      }

      .hero-center {
        height: 260px;
      }

      .hero-left {
        padding: 24px 28px 20px;
      }

      .hero-right {
        padding: 22px 28px 24px;
      }

      .tri-panel-top,
      .tri-panel-bottom,
      .dot-pattern {
        display: none;
      }

      .info-bar-wrap {
        padding: 0 24px;
      }

      .about {
        padding: 30px 24px 40px;
      }

      .about-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .tech-card-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .spotlight {
        flex-direction: column;
        padding: 0 24px;
      }

      .spotlight-right {
        flex: 1;
        width: 100%;
        max-width: 100%;
      }

      .mern-wrap {
        max-width: 100%;
      }

      .curriculum-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .top-section {
        padding: 30px 24px 34px;
        justify-content: center;
      }

      .intro {
        flex: 1 1 100%;
        text-align: center;
      }

      .intro p {
        max-width: 100%;
        margin: 0 auto;
      }

      .process-steps {
        justify-content: flex-start;
        width: 100%;
        margin-top: 20px;
      }

      .bottom-section {
        grid-template-columns: 1fr;
        padding: 28px 24px 34px;
        gap: 28px;
      }

      .career-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .skills-column {
        padding-left: 0;
        border-left: none;
      }

      .cert-column {
        margin-left: 0;
      }
    }

    /* ---------- Tablets / large phones ---------- */
    @media (max-width: 760px) {
      .info-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 18px 20px;
      }

      .info-divider {
        width: 100%;
        height: 1px;
        margin: 0;
      }

      .hero-left h1 {
        font-size: 28px;
      }

      .hero-right h2 {
        font-size: 15px;
      }

      .curriculum-grid {
        grid-template-columns: 1fr 1fr;
      }

      .projects-grid {
        grid-template-columns: 1fr 1fr;
      }

      .career-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .process-steps {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
      }

      .step-card {
        min-width: 150px;
      }
    }

    /* ---------- Mobile phones ---------- */
    @media (max-width: 560px) {
      .page {
        width: 100%;
      }

      .hero-left {
        padding: 20px 20px 18px;
      }

      .hero-left h1 {
        font-size: 24px;
      }

      .hero-left h3 {
        font-size: 13.5px;
      }

      .hero-left p.desc {
        max-width: 100%;
        font-size: 12px;
      }

      .hero-center {
        height: 100%;
        padding: 10px 12px;
      }

      .hero-right {
        padding: 20px 20px 20px;
      }

      .hero-right h2 {
        font-size: 16px;
      }

      .tech-badges {
        gap: 6px;
      }

      .tech-badge {
        width: 56px;
        padding: 7px 5px 6px;
      }

      .info-bar-wrap {
        padding: 0 16px;
        margin-top: 20px;
      }

      .info-item {
        gap: 12px;
      }

      .about {
        padding: 26px 16px 34px;
      }

      .about-text h3 {
        font-size: 19px;
      }

      .tech-card-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

      .together-card {
        grid-column: span 2;
      }

      .spotlight {
        padding: 0 16px;
        gap: 18px;
      }

      .curriculum-grid {
        grid-template-columns: 1fr;
      }

      .projects-grid {
        grid-template-columns: 1fr;
      }

      .projects-section {
        padding: 22px 18px;
      }

      .projects-header h2 {
        margin-top: 30px;
        font-size: 19px;
      }

      .mern-block {
        padding: 26px 20px 30px;
      }

      .mern-illus {
        width: 100%;
        height: auto;
        min-height: 170px;
      }

      .mern-character {
        width: 130px;
        height: auto;
      }

      .top-section {
        padding: 26px 16px 28px;
      }

      .intro h1 {
        font-size: 23px;
      }

      .step-text .step-desc {
        white-space: normal;
      }

      .bottom-section {
        padding: 24px 16px 28px;
      }

      .career-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }

      .career-card {
        padding: 14px 6px;
      }

      .cert-column {
        padding: 20px 18px;
      }
    }

    /* ---------- Small mobile phones ---------- */
    @media (max-width: 380px) {
      .hero-left h1 {
        font-size: 21px;
      }

      .tech-badges {
        justify-content: center;
      }

      .career-grid {
        grid-template-columns: 1fr 1fr;
      }

      .tech-card-grid {
        grid-template-columns: 1fr;
      }

      .together-card {
        grid-column: auto;
      }

      .step-card {
        min-width: 130px;
        padding: 12px 18px 12px 12px;
      }
    }


    /* =========================================
   SCROLL ANIMATION
========================================= */

/* General Reveal Animation */
[data-reveal] {
  opacity: 0;
  transform: translateY(45px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Visible State */
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide from Left */
[data-reveal="left"] {
  transform: translateX(-60px);
}

[data-reveal="left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from Right */
[data-reveal="right"] {
  transform: translateX(60px);
}

[data-reveal="right"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale Animation */
[data-reveal="scale"] {
  transform: scale(0.85);
}

[data-reveal="scale"].is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Project Cards */
.project-card {
  opacity: 0;
  transform: translateY(35px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease,
    box-shadow 0.3s ease;
}

.project-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Project Card Hover */
.project-card:hover {
  transform: translateY(-8px);
}

/* Curriculum Cards */
.curriculum-card {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.curriculum-card.show {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger Animation */
[data-reveal-delay="100"] {
  transition-delay: 100ms;
}

[data-reveal-delay="200"] {
  transition-delay: 200ms;
}

[data-reveal-delay="300"] {
  transition-delay: 300ms;
}

[data-reveal-delay="400"] {
  transition-delay: 400ms;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .project-card,
  .curriculum-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}