: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) ---- */
    --mongo-green: #0e9f4c;
    --express-ink: #14202b;
    --react-blue:  #22b8e0;
    --node-green:  #1c9a45;
  }

  *{ 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);
    text-align: center;
  }

  .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:40px; height:40px; }
  .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: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;
  }
}