.hero{
    position:relative;
    width:100%;
    overflow:hidden;
    background:var(--primary-blue);
  }

  /* Ambient animated glow — subtle depth/motion behind the hero content,
     kept slow and low-opacity so it reads as premium, not distracting. */
  .hero::before{
    content:'';
    position:absolute; inset:-20%;
    background:radial-gradient(circle at 30% 20%, rgba(254,218,37,.10), transparent 45%),
               radial-gradient(circle at 80% 70%, rgba(255,255,255,.08), transparent 40%);
    animation:heroGlowDrift 14s ease-in-out infinite alternate;
    pointer-events:none;
    z-index:0;
  }
  @keyframes heroGlowDrift{
    0%{ transform:translate(0,0) scale(1); }
    100%{ transform:translate(2%,-2%) scale(1.06); }
  }
  @media (prefers-reduced-motion: reduce){ .hero::before{ animation:none; } }

  .hero__viewport{
    position:relative;
    width:100%;
    height:100vh;
    min-height:640px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding-top:var(--topbar-h, 76px); /* clears the fixed .topbar — reads
      the JS-measured real topbar height (set in Header.tsx) instead of a
      hardcoded guess, so it can't drift out of sync with the navbar's
      actual rendered height (e.g. if the logo, nav padding, or login
      button ever change size). */
  }
  /* Desktop only (≥901px, where .info-bar is visible — it hides at 900px,
     see globals.css): .info-bar sits between the fixed .topbar and Hero
     now, and its own margin-top already clears the topbar. Hero's 96px
     above was ALSO clearing the topbar directly (from when it was the
     first element after it), so the two were stacking into a large empty
     gap before the headline, and — since height stays a fixed 100vh —
     squeezing the actual content into less room, which crowded the
     bottom controls row (course-number dots / scroll arrow) up against
     whatever follows. Mobile is untouched: .info-bar hides there, so
     Hero goes back to being the first element after the fixed topbar and
     still needs the full 96/84px clearance from the breakpoints below.

     height is also reduced from a flat 100vh: .info-bar occupies real
     document space above Hero now (its margin-top clears the topbar, plus
     its own padding/content/border), so a Hero that's STILL a full 100vh
     tall pushes its own bottom edge below the fold — the whole point of
     the "everything fits in one screen, no scroll" hero is defeated
     unless Hero shrinks by exactly that amount. Driven by the same
     JS-measured --topbar-h / --infobar-h variables as .info-bar's
     margin-top above, instead of a separately-hardcoded 117px guess that
     could silently fall out of sync with them. */
  @media (min-width:901px){
    .hero__viewport{ height:auto; min-height:calc(100vh - var(--topbar-h, 76px) - var(--infobar-h, 41px)); padding-top:16px; }
  }
  /* Shorter laptop screens (~700-800px tall browser viewport, common on
     13" laptops) — the copy column grew taller with the feature-pills row
     and the bordered stats box added, right as Hero's own height shrank
     to make room for .info-bar above it. Compress the vertical rhythm
     between elements (not font sizes) so everything still fits without
     the hero__viewport's overflow:hidden silently clipping the CTA row. */
  @media (min-width:901px) and (max-height:800px){
    .description{ margin:8px 0 10px; }
    .feature-pills{ margin-bottom:10px; gap:8px; }
    .feature-pill{ padding:7px 13px; }
    .hero-stats-box{ padding:10px 16px; margin-bottom:12px; }
    .subhead{ padding-bottom:8px; margin-top:2px; margin-bottom:12px; }
  }
  @media (min-width:901px) and (max-height:700px){
    .headline{ font-size:clamp(34px,5vw,56px) !important; }
    /* Was display:none — hiding the value-proposition paragraph entirely
       on short-viewport laptop windows loses real conversion copy just to
       save vertical space. Shrinking it instead keeps the message intact
       while still freeing up enough room for the "fits in one screen"
       layout to work. */
    .description{ font-size:12.5px; line-height:1.45; margin:6px 0 8px; max-width:420px; }
  }

  /* diagonal split — right panel darker, matches reference's two-tone cut */
  .hero__right-panel{
    position:absolute;
    inset:0;
    background:linear-gradient(155deg, var(--indigo-700) 0%, var(--navy-anchor) 100%);
    clip-path:polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
  }
  @media (max-width:860px){
    .hero__right-panel{ clip-path:polygon(0 62%, 100% 42%, 100% 100%, 0 100%); }
  }

  /* ---------- decorative background topic icons ("the forest") ---------- */
  .icon-field{ position:absolute; inset:0; right:100px; pointer-events:none; transition:transform .3s ease-out; }
  .bg-icon{
    position:absolute; stroke:var(--white); fill:none; stroke-width:1.8; opacity:.10;
    animation:drift 9s ease-in-out infinite;
    transition:opacity .6s var(--ease), stroke .6s var(--ease);
  }
  .bg-icon.on-dark{ opacity:.14; }
  .bg-icon.is-active{ opacity:.4; stroke:var(--yellow); }
  .bg-icon.on-dark.is-active{ opacity:.5; }
  @keyframes drift{ 0%,100%{ transform:translate(0,0) rotate(var(--r,0deg)); } 50%{ transform:translate(0,-14px) rotate(var(--r,0deg)); } }

  /* ---------- main content grid ---------- */
  .hero__body{
    position:relative; z-index:5;
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:1fr minmax(320px,380px);
    align-items:center;
    padding:0 5vw;
    gap:24px;
  }
  @media (min-width:861px){
    .hero__body{ padding-right:calc(5vw + 90px); }
  }
  @media (max-width:860px){
    .hero__body{ grid-template-columns:1fr; padding-top:40px; }
    /* Below 860px, .hero__body drops from a 2-column grid (copy | stage
       side by side) to a single stacked column — copy block, then the
       illustration card, then the affiliations strip all stacked on top
       of each other. But .hero__viewport kept a hard height:100vh with
       overflow:hidden (fine for the 2-column desktop layout, where
       everything fits side-by-side in one screen height). Stacked, that
       same content routinely needs more than 100vh, so the illustration
       card / stats / CTA row were silently clipped off the bottom on
       phones. Letting the hero grow to fit its content on mobile — same
       fix used on tablets/large phones as well, not just small ones. */
    .hero__viewport{ height:auto; min-height:100vh; padding-bottom:32px; }
  }
  /* Small phones — the desktop hero-stats row (3 stats, gap:24px, no wrap)
     and the description block were sized for a ≥560px column and started
     crowding/overflowing their own text on narrow phones. Tightened font
     sizes and let the stats row wrap instead of forcing 3-across into ~340px. */
  @media (max-width:480px){
    /* padding-top intentionally NOT overridden here anymore — it stays on
       var(--topbar-h) from the base rule above. The topbar's own height
       doesn't actually shrink on small phones (burger button is still
       44px + the topbar's own padding), so a smaller hardcoded value here
       was under-clearing it and letting the fixed topbar sit on top of
       the hero's first ~12px of content on narrow screens. */
    .slide-copy{ max-width:100%; }
    .description{ max-width:100%; font-size:13.5px; }
    .hero-stats{ max-width:100%; flex-wrap:wrap; row-gap:14px; gap:14px; }
    .hero-stat{ padding-right:14px; }
    .hero-stat i{ font-size:19px; }
    .stage{ height:auto; }
    .illustration-card{ width:76px; min-height:76px; }
    .illustration-card__icon-wrap{ width:48px; height:48px; }
    .arrow-pair{ margin-left:0; width:100%; justify-content:flex-end; margin-top:4px; }
  }

  .eyebrow{
    font-family:'Roboto Mono',monospace;
    font-size:13px; letter-spacing:.14em;
    color:var(--yellow);
    display:flex; align-items:center; gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--yellow); display:inline-block; }

  .slide-copy{ max-width:560px; }
  .headline{
    font-family:'Poppins',sans-serif;
    font-weight:800;
    /* Capped at 80px (was 96px) — at the old size, two-word headlines
       like "WEB DESIGN" / "MS OFFICE" wrapped onto a second line inside
       .slide-copy's 560px width while single-word ones ("PYTHON",
       "DATABASE") didn't, making that slide's copy block ~90-100px
       taller and pushing its CTA/dots down into the badges and
       background icons below. Capping the size keeps every slide's
       headline on one line, so every slide's copy block is the same
       height and nothing shifts/overlaps between slides. */
    font-size:clamp(40px,6vw,80px);
    line-height:1.02;
    color:var(--white);
    letter-spacing:-1px;
  }
  .subhead{
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:clamp(18px,2.2vw,26px);
    color:var(--white);
    opacity:.92;
    margin-top:6px;
    margin-bottom:14px;
    padding-bottom:14px;
    border-bottom:3px solid var(--yellow);
    display:inline-block;
  }
  .description{
    font-size:15px; line-height:1.7;
    color:var(--on-dark-300);
    margin:14px 0 16px;
    max-width:460px;
  }

  /* ---------- feature pills (Beginner to Advanced / Live Doubt Support / Real-World Projects) ---------- */
  .feature-pills{ display:flex; flex-wrap:nowrap; gap:8px; margin-bottom:16px; overflow-x:auto; scrollbar-width:none; }
  .feature-pills::-webkit-scrollbar{ display:none; }
  /* Re-declared here (after the base nowrap-rule above) so it correctly
     wins the cascade at equal specificity — an earlier copy of this same
     override, positioned BEFORE the base rule in the file, was being
     silently cancelled out by it regardless of viewport width. */
  @media (max-width:480px){ .feature-pills{ flex-wrap:wrap; } }
  .feature-pill{
    display:flex; align-items:center; gap:6px;
    padding:8px 12px;
    border:1.3px solid rgba(255,255,255,.3);
    border-radius:999px;
    font-family:'Inter',sans-serif; font-weight:600; font-size:11px; color:var(--white);
    white-space:nowrap;
    flex-shrink:0;
  }
  .feature-pill i{ color:var(--yellow); font-size:12px; }
  .feature-pill__live{
    background:var(--yellow); color:var(--navy-anchor);
    font-family:'Roboto Mono',monospace; font-weight:700; font-size:8.5px; letter-spacing:.04em;
    padding:2px 5px; border-radius:4px;
  }

  /* ---------- stats, framed in a bordered box like the reference ---------- */
  .hero-stats-box{
    border:1.3px solid rgba(255,255,255,.22);
    border-radius:var(--radius-def);
    padding:14px 18px;
    margin-bottom:18px;
    display:inline-block;
  }
  .hero-stats{ display:flex; align-items:center; gap:20px; max-width:480px; }
  .hero-stat{ display:flex; align-items:center; gap:10px; position:relative; padding-right:20px; }
  .hero-stat:not(:last-child)::after{
    content:""; position:absolute; top:2px; right:0; bottom:2px;
    width:1px; background:rgba(255,255,255,.2);
  }
  .hero-stat i{ font-size:24px; color:var(--white); opacity:.9; flex-shrink:0; }
  .hero-stat strong{ display:block; font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(18px,2vw,22px); color:var(--yellow); line-height:1.15; }
  .hero-stat span{ display:block; font-family:'Inter',sans-serif; font-size:10.5px; color:var(--on-dark-300); margin-top:2px; white-space:nowrap; }

  .cta-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .arrow-pair{ display:flex; gap:8px; margin-left:6px; }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Inter',sans-serif;
    font-weight:700; font-size:14px;
    padding:14px 28px;
    border-radius:999px;
    cursor:pointer;
    border:1.5px solid transparent;
    position:relative; overflow:hidden;
    transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
  }
  /* Shine sweep on hover — a light diagonal highlight passes across the
     button, a subtle premium touch used sparingly (primary CTA only). */
  .btn-primary::after{
    content:'';
    position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform:skewX(-20deg);
    transition:left .55s var(--ease);
  }
  .btn-primary:hover::after{ left:130%; }
  .btn-primary{ background:var(--yellow); color:var(--navy-anchor); }

  /* ============================================================
     REUSABLE PATTERN — Highlight Strip
     A short yellow callout bar for a single emphasis line — a
     pull-quote-style statement, a key instruction, or a "did you
     know" aside. Use sparingly (one per section, max) since yellow
     is an accent color, not a background workhorse.
     ============================================================ */
  .highlight-strip{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--yellow); color:var(--navy-anchor);
    font-family:'Inter',sans-serif; font-weight:700; font-size:15px;
    padding:14px 22px; border-radius:12px;
    line-height:1.4;
  }
  .highlight-strip i{ font-size:14px; flex-shrink:0; }
  @media (max-width:640px){ .highlight-strip{ font-size:13.5px; padding:12px 16px; } }

  /* ============================================================
     REUSABLE PATTERN — Checklist Box
     A solid Primary Blue card holding a short benefit/feature list,
     each line with its own small yellow checkmark badge (not one
     big icon for the whole box). Built for 2-5 short benefit lines
     — for longer lists, use a plain white card + bullet instead.
     ============================================================ */
  .checklist-box{
    background:var(--primary-blue); border-radius:var(--radius-lg);
    padding:32px 36px; box-shadow:var(--shadow-lg);
  }
  .checklist-box ul{ list-style:none; display:flex; flex-direction:column; gap:18px; }
  .checklist-box li{
    display:flex; align-items:center; gap:14px;
    color:var(--white); font-family:'Inter',sans-serif; font-weight:700; font-size:18px;
    line-height:1.35;
  }
  .checklist-box li .check-badge{
    width:26px; height:26px; border-radius:7px; flex-shrink:0;
    background:var(--yellow); color:var(--navy-anchor);
    display:flex; align-items:center; justify-content:center; font-size:13px;
  }
  @media (max-width:640px){
    .checklist-box{ padding:24px 22px; }
    .checklist-box li{ font-size:15px; gap:11px; }
    .checklist-box li .check-badge{ width:22px; height:22px; font-size:11px; }
  }
  .btn-primary:hover{ background:var(--yellow); transform:translateY(-2px); box-shadow:var(--shadow-md); }
  .btn-primary i{ font-size:12px; }
  .btn-ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.55); }
  .btn-ghost:hover{ border-color:var(--white); background:rgba(255,255,255,.08); transform:translateY(-2px); }
  .btn-ghost i{ font-size:13px; color:var(--yellow); }
  .btn:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }

  /* ---------- signature element: floating illustration card ---------- */
  .stage{ position:relative; height:clamp(320px,42vh,420px); display:flex; align-items:center; justify-content:center; gap:18px; transition:transform .3s ease-out; }

  /* Hero photo — the dominant visual (student + laptop), yellow ring behind
     it, two small floating "tech" cubes (a generic code cube + one that
     swaps per slide to match that course's language/tool). Until a real
     photo is uploaded per slide, each shows its own AI-image-generation
     prompt via ImagePlaceholder — same pattern as the course gain-images. */
  .stage__photo-wrap{
    position:relative;
    width:clamp(220px, 30vw, 320px);
    flex-shrink:0;
  }
  .stage__ring{
    position:absolute; top:8%; left:-10%; width:120%; height:84%;
    border-radius:50%;
    border:2px solid rgba(254,218,37,.55);
    pointer-events:none;
  }
  .stage__photo{
    position:relative; width:100%; aspect-ratio:3/4;
    border-radius:var(--radius-lg);
    overflow:hidden;
  }
  .stage__photo-slot{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .3s var(--ease); }
  .stage__photo-slot.is-active{ opacity:1; visibility:visible; }
  /* ImagePlaceholder's own colors (globals.css .img-ph*) assume a light
     background — dashed navy-tinted border/text, near-invisible on this
     section's dark .hero gradient. Scoped override, here only, so the
     placeholder still reads correctly on About/Course pages. */
  .stage__photo-slot .img-ph{ height:100%; border-radius:var(--radius-lg); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.25); }
  .stage__photo-slot .img-ph__icon{ background:rgba(255,255,255,.95); }
  .stage__photo-slot .img-ph__label{ color:var(--yellow); }
  .stage__photo-slot .img-ph__prompt{ color:rgba(255,255,255,.72); }
  .stage__photo-img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-lg); display:block; }
  .stage__cube{
    position:absolute; z-index:2;
    width:56px; height:56px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; color:var(--white);
    box-shadow:0 12px 26px rgba(0,0,0,.28);
    animation:float-card 5s ease-in-out infinite;
  }
  .stage__cube--a{
    top:26%; left:-10%;
    background:linear-gradient(155deg, var(--accent-blue) 0%, var(--primary-blue) 100%);
    animation-delay:.4s;
  }
  .stage__cube--b{
    top:54%; left:-18%;
    background:var(--yellow); color:var(--navy-anchor);
    animation-delay:1.1s;
  }
  @media (max-width:700px){
    .stage__cube{ width:44px; height:44px; font-size:17px; border-radius:13px; }
    .stage__cube--a{ left:-6%; }
    .stage__cube--b{ left:-10%; }
    .badge--slot-a{ left:-14%; }
    .badge--slot-b{ left:-12%; }
  }
  @media (max-width:520px){
    .stage{ flex-direction:column; height:auto; gap:36px; padding:12px 0 8px; }
    .stage__photo-wrap{ width:clamp(180px,52vw,240px); }
    /* .badge-layer now lives INSIDE .stage__photo-wrap (moved in page.tsx)
       instead of being a sibling positioned against the much wider
       .stage row/column — that was the actual bug: on mobile .stage
       stretches to the full grid-column width (~90vw) while the photo
       itself stays a small centered box, so badges anchored to .stage's
       edges floated far from the photo and could run past the screen
       edge. Anchored to the photo's own box now, so these are just a
       modest extra pull-in for small phones — not a screen-edge fix. */
    .stage__cube--a{ left:-4%; }
    .stage__cube--b{ left:-6%; }
    .badge--slot-a{ left:-10%; }
    .badge--slot-b{ left:-10%; }
    .badge--slot-c{ right:-4%; }
    .badge{ padding:6px 11px 6px 8px; min-width:0; }
    .badge svg{ width:18px; height:18px; }
    .badge__label{ font-size:10.5px; }
    /* Admin-uploaded hero photos aren't always a clean 3:4 portrait crop
       (e.g. a wider illustration graphic with UI mockups/text inside it,
       not just a face) — object-fit:cover was cropping into that content
       on every screen size, but it's most noticeable on the narrow mobile
       photo slot where less of the image is visible to begin with.
       object-fit:contain here shows the full uploaded image on mobile
       (letterboxed on a soft tint instead of cut), without changing the
       desktop crop behaviour above this breakpoint. */
    .stage__photo{ background:rgba(255,255,255,.06); }
    .stage__photo-img{ object-fit:contain; }
  }

  .illustration-card{
    position:relative;
    width:110px; min-height:110px;
    background:var(--indigo-700);
    border-radius:50%;
    box-shadow:var(--shadow-lg);
    padding:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    animation:float-card 5s ease-in-out infinite;
  }
  .illustration-card.pulse{ animation:float-card 5s ease-in-out infinite, code-pulse .45s var(--ease); }
  @keyframes code-pulse{ from{ opacity:.3; } to{ opacity:1; } }

  .illustration-card__icon-wrap{ position:relative; width:70px; height:70px; margin-bottom:0; display:flex; align-items:center; justify-content:center; }
  .illustration-card__glow{
    position:absolute; width:190px; height:190px; border-radius:50%;
    background:radial-gradient(circle, rgba(254,218,37,.32) 0%, transparent 70%);
    filter:blur(14px);
    animation:glowPulse 3s ease-in-out infinite;
  }
  @keyframes glowPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
  .illustration-card__ring{
    position:absolute; width:148px; height:148px; border-radius:50%;
    border:1px dashed rgba(254,218,37,.4);
    animation:ringSpin 22s linear infinite;
  }
  @keyframes ringSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
  .illustration-card__icon{
    position:relative; z-index:1;
    width:110px; height:110px; border-radius:50%;
    background:rgba(30,49,143,.85); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.25);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 20px 40px rgba(0,0,0,.3);
  }
  .illustration-card__icon svg{ width:50px; height:50px; color:var(--yellow); }
  .illustration-card__caption{
    font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; color:var(--white); text-align:center;
  }
  .headline-row{ display:flex; align-items:center; flex-wrap:wrap; gap:2px; }
  #headlineCursor{ width:8px; height:clamp(38px,5.6vw,76px); background:var(--yellow); animation:blink .9s step-end infinite; }

  .badge{
    position:absolute;
    min-width:64px; padding:8px 14px 8px 10px;
    border-radius:999px;
    background:var(--white);
    display:flex; align-items:center; gap:7px;
    box-shadow:var(--shadow-md);
    font-family:'Poppins',sans-serif; font-weight:700; font-size:12px;
    color:var(--navy-anchor);
    animation:float-badge 4.5s ease-in-out infinite, badge-in .5s var(--ease) both;
    transition:background .3s var(--ease);
    white-space:nowrap;
  }
  .badge svg{ width:22px; height:22px; stroke:var(--primary-blue); fill:none; stroke-width:1.8; flex-shrink:0; transition:stroke .3s var(--ease); }
  .badge__label{ font-size:11.5px; }
  .badge--slot-a{ top:-2%; left:-24%; animation-delay:.2s,0s; }
  .badge--slot-b{ bottom:4%; left:-22%; animation-delay:1s,.08s; }
  .badge--slot-c{ bottom:6%; right:-6%; animation-delay:1.8s,.16s; }
  .badge--slot-d{ top:-4%; right:-14%; animation-delay:1.4s,.12s; }
  .badge-duration{ background:#FFFFFF; }
  .badge-duration svg{ stroke:var(--primary-blue); }

  /* ---------- realistic per-technology badge coloring ---------- */
  .badge-py{ background:linear-gradient(135deg,#FEDA25 0%,#FFFFFF 58%); }
  .badge-py svg{ stroke:var(--navy-anchor); }
  .badge-html{ background:linear-gradient(135deg,#0052CC 0%,#FFFFFF 58%); }
  .badge-html svg{ stroke:var(--navy-anchor); }
  .badge-node{ background:linear-gradient(135deg,#1E318F 0%,#FFFFFF 58%); }
  .badge-node svg{ stroke:var(--navy-anchor); }
  .badge-office{ background:#FFFFFF; }
  .badge-office svg{ stroke:var(--primary-blue); }
  .badge-db{ background:#FFFFFF; }
  .badge-db svg{ stroke:var(--indigo-700); }
  .badge-chip{ background:#FFFFFF; }
  .badge-chip svg{ stroke:var(--indigo-700); }
  .badge-terminal{ background:var(--navy-anchor); }
  .badge-terminal svg{ stroke:var(--yellow); }
  .badge-terminal .badge__label{ color:var(--white); }
  .badge-marketing{ background:#FFFFFF; }
  .badge-marketing svg{ stroke:var(--primary-blue); }
  .badge-chart{ background:#FFFFFF; }
  .badge-chart svg{ stroke:var(--indigo-700); }

  .badge.badge--out{ animation:badge-out .28s var(--ease) both; }

  @keyframes float-card{ 0%,100%{ transform:rotate(-4deg) translateY(0);} 50%{ transform:rotate(-4deg) translateY(-10px);} }
  @keyframes float-badge{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
  @keyframes badge-in{ from{ opacity:0; transform:scale(.55) rotate(-12deg);} to{ opacity:1; transform:scale(1) rotate(0);} }
  @keyframes badge-out{ from{ opacity:1; transform:scale(1);} to{ opacity:0; transform:scale(.55);} }
  @keyframes blink{ 50%{ opacity:0; } }

  @media (prefers-reduced-motion:reduce){
    .illustration-card,.badge,.cursor,.bg-icon,.illustration-card__glow,.illustration-card__ring{ animation:none !important; }
  }

  /* ---------- bottom slider controls ---------- */
  .controls{
    position:relative; z-index:5;
    flex-shrink:0;
    display:flex; align-items:center;
    padding:0;
  }
  .slide-index{
    display:flex; align-items:center; gap:14px;
    font-family:'Roboto Mono',monospace; color:var(--white);
  }
  /* The "COURSE X / 06" eyebrow above the headline already tells you which
     slide you're on, so the numbered dots + progress rule down here were
     pure duplication — just the prev/next arrows stay as the actual
     control. Hidden (not removed) so HomeInteractions.tsx's slide-render
     code, which still writes into #numList/#rule every transition, has
     nothing that breaks. */
  .num-list{ display:none; }
  .slide-index .num{ font-size:15px; opacity:.4; transition:opacity .2s, color .2s; cursor:pointer; }
  .slide-index .num.active{ opacity:1; font-weight:600; color:var(--yellow); }
  .slide-index .rule{ display:none; width:60px; height:1px; background:rgba(255,255,255,.2); position:relative; overflow:hidden; }
  .slide-index .rule::after{
    content:""; position:absolute; left:0; top:0; height:100%; width:0%;
    background:var(--yellow);
  }
  .slide-index .rule.running::after{
    animation:fillRule var(--dur,5000ms) linear forwards;
  }
  @keyframes fillRule{ from{ width:0%; } to{ width:100%; } }
  .arrow-pair button{
    width:40px; height:40px; border-radius:50%;
    border:1.3px solid rgba(255,255,255,.4);
    background:transparent; color:var(--white);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .18s var(--ease), transform .18s var(--ease);
  }
  .arrow-pair button:hover{ background:rgba(255,255,255,.12); }
  .arrow-pair svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }

  /* ---------- right-edge social rail ---------- */
  .social-rail{
    position:absolute; right:26px; top:50%; transform:translateY(-50%);
    z-index:5; display:flex; flex-direction:column; align-items:center; gap:14px;
  }
  .social-rail::before{
    content:""; width:1px; height:30px; background:rgba(255,255,255,.3); margin-bottom:2px;
  }
  .social-rail::after{
    content:""; width:1px; height:30px; background:rgba(255,255,255,.3); margin-top:2px;
  }
  .social-rail a{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:50%;
    color:var(--white); background:rgba(255,255,255,.08);
    border:1.3px solid rgba(255,255,255,.28);
    font-size:17px;
    transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .social-rail a:hover{
    transform:translateY(-3px) scale(1.06);
    border-color:transparent;
    background:var(--yellow); color:var(--navy-anchor);
    box-shadow:var(--shadow-md);
  }
  @media (max-width:640px){ .social-rail{ display:none; } }

  .fade-in{ animation:fadeIn .7s var(--ease) both; }
  @keyframes fadeIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

  /* ---------- affiliations & partners strip (sits inside hero, below the fold) ---------- */
  .affiliations{
    position:relative; z-index:5;
    padding:0 5vw;
    margin-top:20px; margin-bottom:24px;
    flex-shrink:0;
    display:flex; justify-content:center;
  }
  /* One white card holds BOTH the heading and the badge row — previously
     the heading sat outside/above this box (a sibling with no background
     of its own), so it rendered directly on the navy hero and looked
     completely disconnected from the "card" below it.
     width:fit-content — the panel is only as wide as its cards actually
     need, so 2 registrations gives a compact card and 5 gives a wide one,
     instead of always stretching edge-to-edge regardless of content. */
  .affiliations__panel{
    width:fit-content;
    max-width:100%;
    background:var(--white);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    padding:14px 18px;
  }
  .affiliations__label{
    display:flex; align-items:center; justify-content:center; gap:14px;
    font-family:'Inter',sans-serif; font-weight:700;
    font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--navy-anchor);
    margin-bottom:10px;
  }
  .affiliations__label span{ width:22px; height:1.5px; background:var(--yellow); display:inline-block; }
  .affiliations__grid{
    display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;
    gap:8px;
  }
  /* Each badge is its own separate bordered card now, not just divided by
     a hairline — matches "unke saperate card ho" (each one its own card).
     Width is intentionally NOT set anywhere here — flex items already
     size to their own content (icon + text), so a longer name naturally
     gets a wider card instead of every card being forced to one fixed
     width. */
  .affil-card{
    display:flex; align-items:center; gap:9px;
    padding:8px 14px;
    border:1px solid var(--gray150);
    border-radius:var(--radius-def);
    background:var(--surface-bg);
    transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .affil-card:hover{ border-color:var(--gray300); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
  .affil-card__icon{
    width:30px; height:30px; border-radius:50%;
    background:var(--yellow);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .affil-card__icon i{ color:var(--navy-anchor); font-size:12.5px; }
  .affil-card__text{ text-align:left; line-height:1.2; }
  .affil-card__text strong{
    display:block; font-family:'Poppins',sans-serif; font-weight:700; font-size:12px; color:var(--navy-anchor);
    white-space:nowrap;
  }
  .affil-card__text span{ font-family:'Inter',sans-serif; font-size:10px; color:var(--gray500); white-space:nowrap; }
  @media (max-width:900px){
    .affiliations__grid{ gap:8px; }
    .affil-card{ padding:7px 12px; }
  }
  @media (max-width:640px){
    .affiliations{ padding:0 5vw; }
    .affiliations__panel{ padding:14px; }
    .affiliations__grid{ flex-direction:column; align-items:stretch; gap:8px; }
    .affil-card{ padding:8px 12px; justify-content:flex-start; }
  }
  @media (max-height:760px){
    .affiliations__panel{ padding:10px 18px; }
    .affiliations__label{ margin-bottom:6px; }
  }

  /* ---------- instant certificate verification modal ---------- */
  .verify-modal{
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    opacity:0; visibility:hidden;
    transition:opacity .2s var(--ease), visibility 0s linear .2s;
  }
  .verify-modal.is-open{ opacity:1; visibility:visible; transition:opacity .2s var(--ease); }
  .verify-modal__backdrop{
    position:absolute; inset:0;
    background:rgba(1,17,50,.55);
    backdrop-filter:blur(3px);
  }
  .verify-modal__card{
    position:relative;
    width:100%; max-width:400px;
    background:var(--white);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    padding:34px 30px 28px;
    text-align:center;
    transform:scale(.92) translateY(10px);
    transition:transform .22s var(--ease), max-width .25s var(--ease);
  }
  .verify-modal__card.has-result{ max-width:600px; }
  .verify-modal.is-open .verify-modal__card{ transform:scale(1) translateY(0); }
  .verify-modal__close{
    position:absolute; top:12px; right:12px;
    width:36px; height:36px; border-radius:50%;
    border:none; background:var(--surface-bg); color:var(--gray500);
    font-size:18px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .18s var(--ease);
  }
  .verify-modal__close:hover{ background:var(--gray150); }
  .verify-modal__icon{
    width:56px; height:56px; margin:0 auto 16px;
    border-radius:50%; background:rgba(3,69,217,0.10);
    display:flex; align-items:center; justify-content:center;
    font-size:22px; color:var(--primary-blue);
  }
  .verify-modal__card h3{
    font-family:'Poppins',sans-serif; font-weight:700; font-size:19px;
    color:var(--primary-blue); margin-bottom:8px;
  }
  .verify-modal__card p{
    font-size:13px; color:var(--gray500); line-height:1.55; margin-bottom:20px;
  }
  .verify-modal__form{ display:flex; gap:8px; }
  .verify-modal__form input{
    flex:1; min-width:0;
    border:1.3px solid var(--gray300); border-radius:11px;
    padding:12px 14px; font:600 13px 'Inter',sans-serif; color:var(--navy-anchor);
    outline:none; transition:border-color .18s var(--ease);
  }
  .verify-modal__form input:focus{ border-color:var(--primary-blue); }
  .verify-modal__submit{
    border:none; border-radius:11px; padding:0 20px;
    background:var(--primary-blue); color:var(--white);
    font-family:'Inter',sans-serif; font-weight:700; font-size:13px;
    cursor:pointer; transition:background .18s var(--ease);
  }
  .verify-modal__submit:hover{ background:var(--navy-anchor); }
  .verify-modal__result{
    margin-top:16px; font-size:12.5px; line-height:1.6; color:var(--gray500);
    text-align:left; padding:12px 14px; border-radius:11px;
    background:var(--surface-bg); display:none;
  }
  .verify-modal__result.show{ display:block; }
  .verify-modal__result.tce-rich{ background:none; padding:0; border-radius:0; }

  /* ---------- Certificate verification result card ---------- */
  @keyframes tce-fade-up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
  @keyframes tce-pop{ 0%{ opacity:0; transform:scale(.4); } 60%{ transform:scale(1.12); } 100%{ opacity:1; transform:scale(1); } }
  @keyframes tce-watermark-in{ from{ opacity:0; transform:scale(.85) rotate(-6deg); } to{ opacity:.14; transform:scale(1) rotate(0); } }

  .tce-card{ background:#fff; border-radius:16px; border:1px solid rgba(1,53,154,0.12); overflow:hidden; animation:tce-fade-up .4s ease both; }
  .tce-head{ position:relative; overflow:hidden; background:linear-gradient(135deg,var(--navy-anchor),var(--primary-blue)); padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#fff; }
  .tce-watermark{ position:absolute; right:-14px; top:-18px; opacity:0; animation:tce-watermark-in .6s ease .15s both; pointer-events:none; }
  .tce-brand{ display:flex; align-items:center; gap:10px; }
  .tce-brand img{ width:34px; height:34px; border-radius:50%; flex-shrink:0; }
  .tce-brand-text{ display:flex; flex-direction:column; }
  .tce-legal-name{ font-family:'Poppins',sans-serif; font-weight:700; font-size:12.5px; line-height:1.25; }
  .tce-tagline{ font-size:9.5px; color:var(--yellow); font-weight:600; margin-top:1px; }
  .tce-badge-group{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
  .tce-badge{ display:inline-flex; align-items:center; gap:5px; background:var(--yellow); color:var(--navy-anchor); font-weight:700; font-size:11px; padding:5px 12px; border-radius:20px; white-space:nowrap; flex-shrink:0; opacity:0; animation:tce-pop .45s cubic-bezier(.34,1.56,.64,1) .2s both; }
  .tce-reg-badges{ display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
  .tce-reg-badge{ font-size:9px; font-weight:700; color:#fff; background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.35); padding:3px 8px; border-radius:10px; white-space:nowrap; }
  .tce-body{ padding:18px; display:grid; grid-template-columns:1fr 1.25fr; gap:18px; }
  .tce-student-name{ font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; color:var(--navy-anchor); margin:0 0 2px; }
  .tce-course-row{ display:flex; align-items:center; gap:6px; margin:0 0 12px; color:var(--primary-blue); }
  .tce-course-row svg{ width:13px; height:13px; flex-shrink:0; }
  .tce-course{ font-size:12px; color:var(--gray500); margin:0; }
  .tce-stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .tce-stat{ background:rgba(3,69,217,0.06); border-radius:9px; padding:8px 10px; display:flex; align-items:center; gap:8px; opacity:0; animation:tce-fade-up .4s ease both; }
  .tce-stat:nth-child(1){ animation-delay:.25s; }
  .tce-stat:nth-child(2){ animation-delay:.32s; }
  .tce-stat-icon{ width:26px; height:26px; border-radius:7px; background:rgba(3,69,217,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .tce-stat-icon svg{ width:14px; height:14px; }
  .tce-stat-label{ font-size:9.5px; color:var(--primary-blue); text-transform:uppercase; letter-spacing:.03em; font-weight:600; margin:0 0 2px; }
  .tce-stat-value{ font-size:15px; font-weight:700; color:var(--navy-anchor); margin:0; font-family:'Poppins',sans-serif; }
  .tce-meta{ border-left:1px solid rgba(1,53,154,0.10); padding-left:18px; display:flex; flex-direction:column; justify-content:center; gap:7px; }
  .tce-meta-row{ display:flex; justify-content:space-between; align-items:center; font-size:11px; gap:10px; }
  .tce-meta-icon{ display:inline-flex; align-items:center; gap:6px; color:var(--gray500); white-space:nowrap; }
  .tce-meta-icon svg{ width:12px; height:12px; opacity:.55; flex-shrink:0; }
  .tce-meta-value{ color:var(--navy-anchor); font-weight:600; font-family:'Roboto Mono',monospace; font-size:10.5px; text-align:right; }
  .tce-actions{ margin-top:10px; display:flex; gap:6px; }
  .tce-btn{ flex:1; border:1px solid rgba(1,53,154,0.18); background:#F7F9FF; color:var(--navy-anchor); font-weight:600; font-size:11px; padding:6px 8px; border-radius:7px; cursor:pointer; transition:background .15s; font-family:'Inter',sans-serif; }
  .tce-btn:hover{ background:#E6EEFF; }
  .tce-btn.tce-btn--copied{ background:#0F6E56; color:#fff; border-color:#0F6E56; }
  .tce-footer{ border-top:1px solid rgba(1,53,154,0.08); padding:10px 18px; text-align:center; }
  .tce-footer p{ font-size:9.5px; color:var(--gray500); margin:1px 0; }
  .tce-revoked{ display:flex; align-items:flex-start; gap:10px; padding:14px; border-radius:11px; background:#FDECEC; animation:tce-fade-up .35s ease both; }
  .tce-revoked p{ font-size:12.5px; color:#D64545; margin:0; font-weight:600; }
  @media (max-width:600px){
    .tce-body{ grid-template-columns:1fr; }
    .tce-meta{ border-left:none; border-top:1px solid rgba(1,53,154,0.10); padding-left:0; padding-top:12px; }
    .tce-head{ flex-wrap:wrap; }
  }
  @media (prefers-reduced-motion: reduce){
    .tce-card, .tce-watermark, .tce-badge, .tce-stat, .tce-revoked{ animation:none !important; opacity:1 !important; }
  }

  /* ---------- "Choose Your Goal" section ---------- */
  .goals{
    position:relative;
    padding:96px 5vw 104px;
    max-width:1360px;
    margin:0 auto;
  }
  /* Full-bleed blue backdrop — .goals itself is width-capped at 1360px
     (so its content column stays readable on wide screens), but the
     section previously had no background at all, so it just sat on the
     page's white body colour. That left this whole section reading as
     white-dominant (page bg + white cards), which fights the brand's
     60% blue / 30% white / 10% yellow ratio. This pseudo-element bleeds
     the primary-blue background out to the full viewport width behind
     the capped content, without needing to restructure the JSX wrapper. */
  .goals::before{
    content:"";
    position:absolute;
    top:0; bottom:0; left:50%;
    width:100vw;
    transform:translateX(-50%);
    background:var(--navy-anchor);
    z-index:-1;
  }
  .goals__head{
    text-align:center;
    max-width:640px;
    margin:0 auto 52px;
  }
  .goals__eyebrow{
    font-family:'Roboto Mono',monospace;
    font-size:13px; letter-spacing:.14em;
    color:var(--yellow);
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-bottom:16px;
  }
  .goals__eyebrow::before, .goals__eyebrow::after{ content:""; width:26px; height:1.5px; background:var(--yellow); display:inline-block; }
  .goals__head h2{
    font-family:'Poppins',sans-serif; font-weight:800;
    font-size:clamp(28px,3.6vw,42px);
    color:var(--white);
    letter-spacing:-.5px;
    margin-bottom:12px;
  }
  .goals__head p{
    font-family:'Poppins',sans-serif; font-weight:600;
    font-size:clamp(15px,1.6vw,18px);
    color:rgba(255,255,255,.78);
  }
  .goals__layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    align-items:stretch;
  }
  .goal-card--featured{
    display:flex; flex-direction:column;
    padding:36px 32px 32px;
    background:var(--navy-anchor);
    border-color:transparent;
    height:100%;
  }
  .goal-card--featured .goal-card__eyebrow{
    display:inline-flex; align-items:center; gap:8px; width:fit-content;
    background:var(--yellow); color:var(--navy-anchor);
    font-family:'Inter',sans-serif; font-weight:700; font-size:11px; letter-spacing:.04em;
    padding:8px 16px; border-radius:999px; margin-bottom:22px;
  }
  .goal-card--featured h3{
    font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(24px,2.4vw,30px);
    color:var(--white); line-height:1.15; margin-bottom:14px;
  }
  .goal-card--featured .goal-card__accent{ color:var(--yellow); }
  .goal-card--featured .goal-card__underline{
    display:block; width:56px; height:4px; border-radius:2px;
    background:var(--yellow); margin-bottom:20px;
  }
  .goal-card--featured p{
    font-size:14px; line-height:1.7; color:rgba(255,255,255,.72); margin-bottom:24px;
  }
  .goal-card--featured .goal-card__pills{
    display:flex; flex-wrap:wrap; gap:10px; margin-bottom:auto; padding-bottom:24px;
  }
  .goal-card--featured .goal-card__pills span{
    display:flex; align-items:center; gap:8px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
    color:var(--white); font-family:'Inter',sans-serif; font-weight:600; font-size:12px;
    padding:9px 14px; border-radius:999px;
  }
  .goal-card--featured .goal-card__pills i{ color:var(--yellow); font-size:11px; }
  .goal-card--featured .goal-card__footer{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:22px; border-top:1px solid rgba(255,255,255,.12);
  }
  .goal-card--featured .goal-card__by{
    font-family:'Inter',sans-serif; font-size:12.5px; color:rgba(255,255,255,.6);
  }
  .goal-card--featured .goal-card__by b{ color:var(--white); }
  .goal-card--featured .goal-card__by i{ color:var(--yellow); margin-left:4px; font-size:11px; }
  .goal-card--featured .goal-card__arrow-btn{
    width:44px; height:44px; border-radius:50%; flex-shrink:0;
    background:var(--yellow); color:var(--navy-anchor);
    display:flex; align-items:center; justify-content:center; font-size:15px;
    transition:transform .25s var(--ease);
  }
  .goal-card--featured:hover .goal-card__arrow-btn{ transform:translateX(4px); }

  /* Right side: a fixed-height window showing exactly 2 cards, auto-scrolling
     through the remaining paths in pairs. Starts scrolling immediately on
     load — no hover/click needed. A clone of the first card is appended in
     the JSX so the loop always lands on a full pair, never a single
     orphaned card. */
  .goals__carousel{
    height:100%;
    overflow:hidden;
    border-radius:var(--radius-lg);
  }
  .goals__carousel-track{
    display:flex; flex-direction:column; gap:16px;
  }
  .goals__carousel-track .goal-card{ flex-shrink:0; }

  @media (max-width:1024px){
    .goals__layout{ grid-template-columns:1fr; }
    .goals__carousel{ height:auto; overflow:visible; }
    .goals__carousel-track{
      animation:none !important; transform:none !important;
      display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
    }
    .goals__carousel-track a[aria-hidden="true"]{ display:none; } /* the loop clone is only needed for the desktop auto-scroll */
  }
  @media (max-width:640px){
    .goals__carousel-track{ grid-template-columns:1fr; }
  }

  .goal-card{
    position:relative;
    display:flex; flex-direction:column;
    background:var(--white);
    border:1px solid var(--gray150);
    border-radius:var(--radius-lg);
    padding:20px 18px 18px;
    text-decoration:none;
    overflow:hidden;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  }
  .goal-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
    border-color:transparent;
  }
  .goal-card__icon{
    width:42px; height:42px; border-radius:12px;
    background:var(--primary-blue);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
    transition:background .25s var(--ease), transform .25s var(--ease);
  }
  .goal-card__icon i{ color:var(--yellow); font-size:17px; transition:color .25s var(--ease); }
  .goal-card:hover .goal-card__icon{ background:var(--yellow); transform:rotate(-6deg) scale(1.05); }
  .goal-card:hover .goal-card__icon i{ color:var(--navy-anchor); }
  .goal-card h3{
    font-family:'Poppins',sans-serif; font-weight:700; font-size:14.5px;
    color:var(--primary-blue); margin-bottom:5px;
  }
  .goal-card p{
    font-family:'Inter',sans-serif; font-size:11.5px; line-height:1.5;
    color:var(--gray500); margin-bottom:12px; flex:1;
  }
  .goal-card__cta{
    display:flex; align-items:center; gap:7px;
    font-family:'Inter',sans-serif; font-weight:700; font-size:11.5px;
    color:var(--primary-blue);
  }
  .goal-card__cta i{ font-size:10px; transition:transform .25s var(--ease); }
  .goal-card:hover .goal-card__cta i{ transform:translateX(5px); }
  .goal-card__num{
    position:absolute; top:20px; right:22px;
    font-family:'Roboto Mono',monospace; font-size:11px; color:rgba(1,53,154,0.18);
  }

  /* ---------- "Explore Your Direction" identity-card section ---------- */
  .direction{
    background:linear-gradient(155deg, var(--primary-blue) 0%, var(--navy-anchor) 65%);
    padding:40px 4vw 48px;
    position:relative;
    overflow:hidden;
  }
  .direction::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(155deg, var(--indigo-700) 0%, var(--navy-anchor) 60%);
    opacity:.6;
    pointer-events:none;
  }
  .direction__inner{
    position:relative; z-index:2;
    max-width:1000px; margin:0 auto;
  }
  .direction__head{
    text-align:center;
    max-width:640px;
    margin:0 auto 24px;
  }
  .direction__eyebrow{
    font-family:'Roboto Mono',monospace;
    font-size:12px; letter-spacing:.14em;
    color:var(--yellow);
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-bottom:10px;
  }
  .direction__eyebrow::before, .direction__eyebrow::after{ content:""; width:26px; height:1.5px; background:var(--yellow); display:inline-block; }
  .direction__head h2{
    font-family:'Poppins',sans-serif; font-weight:800;
    font-size:clamp(24px,3vw,34px);
    color:var(--white);
    letter-spacing:-.5px;
    margin-bottom:8px;
  }
  .direction__head p{
    font-family:'Poppins',sans-serif; font-weight:600;
    font-size:clamp(13px,1.4vw,15.5px);
    color:var(--on-dark-300);
  }

  /* ---------- flush full-width tab bar (5 career paths) ---------- */
  .direction__tabs{
    display:flex; border-radius:14px 14px 0 0; overflow:hidden;
  }
  .direction__tab{
    flex:1; background:var(--white); border:none; border-bottom:1px solid var(--gray300);
    padding:15px 8px;
    font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px;
    color:var(--navy-anchor); cursor:pointer; text-align:center;
    transition:background .18s var(--ease), color .18s var(--ease);
  }
  .direction__tab:hover{ background:var(--surface-bg); }
  .direction__tab.is-active{ background:var(--primary-blue); color:var(--white); border-bottom-color:var(--primary-blue); }

  /* ---------- content card: white, bulleted, highlighted terms ---------- */
  .direction__card{
    background:var(--white);
    border-radius:0 0 var(--radius-lg) var(--radius-lg);
    padding:32px;
    display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:stretch;
    min-height:400px;
  }
  @media (max-width:860px){ .direction__card{ grid-template-columns:1fr; min-height:0; } }

  .direction__card-title{
    font-family:'Poppins',sans-serif; font-weight:700; font-size:19px;
    color:var(--navy-anchor); text-transform:uppercase; letter-spacing:.02em;
    margin:0 0 18px; line-height:1.3;
  }
  .direction__bullet{
    border-top:1px solid var(--gray300); padding-top:13px; margin-bottom:13px;
  }
  .direction__bullet p{
    font-family:'Inter',sans-serif; font-size:13px; line-height:1.65; color:var(--gray700); margin:0;
  }
  .direction__highlight{
    background:var(--yellow); font-weight:700; color:var(--navy-anchor); padding:1px 4px; border-radius:3px;
  }
  .direction__stats{ display:flex; gap:24px; margin:18px 0 20px; }
  .direction__stat span{ display:block; font-family:'Poppins',sans-serif; font-weight:800; font-size:24px; color:var(--navy-anchor); }
  .direction__stat small{ display:block; font-family:'Inter',sans-serif; font-size:10px; color:var(--gray500); text-transform:uppercase; letter-spacing:.03em; margin-top:2px; }
  .direction__cta{
    margin-top:8px;
    display:flex; align-items:center; gap:9px; width:fit-content;
    background:var(--primary-blue); color:var(--white); border:none;
    font-family:'Inter',sans-serif; font-weight:700; font-size:13px;
    padding:12px 22px; border-radius:999px; cursor:pointer;
    transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .direction__cta:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(1,53,154,.28); }
  .direction__cta i{ font-size:12px; }

  /* ---------- right side: illustration slot ----------
     Stretches to match the left column's actual height (grid
     align-items:stretch) instead of a fixed square aspect-ratio, so it
     never overflows the card and stays visually consistent across tabs
     regardless of how much text a given tab's content has. */
  .direction__card-right{ display:flex; min-height:0; }
  .direction__card-right .img-ph{ height:100%; aspect-ratio:unset !important; min-height:0; }

  /* Only one of the 5 tab illustrations (real image or its own AI-prompt
     placeholder) is shown at a time — toggled by HomeInteractions via the
     same is-active pattern used for the tab buttons themselves. Hidden ones
     stay unmounted from layout (display:none) rather than just invisible,
     so they never affect the card's height. */
  .direction__illustration-img,
  .direction__illustration-placeholder{ display:none; width:100%; }
  .direction__illustration-img.is-active{
    display:block; flex:1; min-height:0;
    object-fit:cover; border-radius:var(--radius-lg);
  }
  .direction__illustration-placeholder.is-active{ display:flex; flex:1; min-height:0; }
  .direction__illustration-placeholder.is-active .img-ph{ width:100%; }

  .idcard-enter{ animation:idcardIn .45s var(--ease) both; }
  @keyframes idcardIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

  /* Mobile — 5 tabs in one flush row get cramped below ~560px (labels like
     "Real Projects"/"Start Path" wrapping awkwardly against the narrow
     flex:1 columns), and the illustration column (stacked below the text
     on mobile per the 860px breakpoint above) needs its own height since
     it no longer inherits one from a taller sibling column. */
  @media (max-width:560px){
    .direction{ padding:32px 5vw 40px; }
    .direction__tab{ font-size:10.5px; padding:12px 4px; letter-spacing:-.01em; }
    .direction__card{ padding:22px 18px; }
    .direction__card-right{ min-height:220px; margin-top:20px; }
    .direction__illustration-img.is-active,
    .direction__illustration-placeholder.is-active{ min-height:220px; }
    .direction__stats{ gap:16px; }
    .direction__stat span{ font-size:20px; }
  }

  /* ---------- "Technology Explorer" section ----------
     Brand-strict palette: every element here — background, text, icons,
     borders, badges, big or small — uses ONLY the three pure brand colors
     (--primary-blue, --white, --yellow) at full opacity. No gradients, no
     rgba tints, no navy-anchor/indigo-700/accent-blue "sister" blues, and
     no neutral grays (this section's --gray150/300/500 tokens are
     themselves navy-blue at reduced opacity, i.e. tints — so they're
     avoided here too, unlike the rest of the site). Hierarchy/contrast is
     done with flat color swaps between the three (blue section → white
     cards → blue/yellow accents) and with weight/size, not with
     shades or transparency. */
  .tech-explorer{
    background:var(--primary-blue);
    padding:96px 5vw 104px;
  }
  .tech-explorer__inner{ max-width:1200px; margin:0 auto; min-width:0; width:100%; }
  .tech-explorer__head{
    text-align:center;
    max-width:640px;
    margin:0 auto 40px;
  }
  .tech-explorer__eyebrow{
    font-family:'Roboto Mono',monospace;
    font-size:13px; letter-spacing:.14em;
    color:var(--yellow);
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-bottom:16px;
  }
  .tech-explorer__eyebrow::before, .tech-explorer__eyebrow::after{ content:""; width:26px; height:1.5px; background:var(--yellow); display:inline-block; }
  .tech-explorer__head h2{
    font-family:'Poppins',sans-serif; font-weight:800;
    font-size:clamp(28px,3.6vw,42px);
    color:var(--white);
    letter-spacing:-.5px;
    margin-bottom:12px;
  }
  .tech-explorer__head p{
    font-family:'Poppins',sans-serif; font-weight:600;
    font-size:clamp(15px,1.6vw,18px);
    color:var(--white);
  }

  .tech-filters{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap:8px; margin-bottom:36px;
    min-width:0;
  }
  .tech-filter{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Inter',sans-serif; font-weight:600; font-size:13px;
    color:var(--primary-blue); background:var(--white);
    border:1.3px solid var(--white);
    padding:10px 20px; border-radius:999px; cursor:pointer;
    transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  }
  .tech-filter i{ font-size:12px; color:var(--primary-blue); transition:color .18s var(--ease); }
  .tech-filter:hover{ border-color:var(--yellow); }
  .tech-filter.is-active{ background:var(--yellow); color:var(--primary-blue); border-color:var(--yellow); }
  .tech-filter.is-active i{ color:var(--primary-blue); }

  .tech-slider{
    position:relative;
    padding:0 60px;
    min-width:0;
  }
  .tech-grid{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:8px 6px 24px;
    margin:0 -6px;
    min-width:0;
    -ms-overflow-style:none;
    scrollbar-width:none;
  }
  .tech-grid::-webkit-scrollbar{ display:none; }

  /* Arrows sit outside the card row, vertically centered — matches the
     approved reference layout (circular buttons at the far left/right). */
  .tech-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%; z-index:2;
    border:1.3px solid var(--white); background:var(--white); color:var(--primary-blue);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  }
  .tech-nav--prev{ left:0; }
  .tech-nav--next{ right:0; }
  .tech-nav:hover{ background:var(--yellow); color:var(--primary-blue); border-color:var(--yellow); }
  .tech-nav:hover.tech-nav--prev{ transform:translateY(-50%) translateX(-2px); }
  .tech-nav:hover.tech-nav--next{ transform:translateY(-50%) translateX(2px); }
  .tech-nav svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; }

  /* Dot pagination — mirrors the approved reference (row of dots under the
     cards). Built/synced from JS based on real scroll position, not a
     second carousel system. Inactive = pure white dot, active = pure
     yellow pill — distinguished by size/shape, not by opacity, so both
     stay full-strength brand colors. */
  .tech-dots{
    display:flex; gap:7px; justify-content:center; margin-top:8px;
  }
  .tech-dots .tech-dot{
    width:8px; height:8px; border-radius:50%; background:var(--white);
    border:none; padding:0; cursor:pointer;
    transition:background .18s var(--ease), transform .18s var(--ease), width .18s var(--ease);
  }
  .tech-dots .tech-dot.is-active{ background:var(--yellow); width:22px; border-radius:999px; }

  /* Tech Explorer highlights strip — sits on the blue section as a white
     panel (so it reads as a distinct card, not the same blue merging into
     the section behind it), with blue/yellow icon accents inside. */
  .tech-highlights{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
    margin-top:44px; padding:26px 28px;
    background:var(--white);
    border-radius:var(--radius-lg);
  }
  .tech-highlights__item{ display:flex; align-items:flex-start; gap:14px; }
  .tech-highlights__icon{
    width:46px; height:46px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:17px;
  }
  .tech-highlights__icon--blue{ background:var(--primary-blue); color:var(--white); }
  .tech-highlights__icon--yellow{ background:var(--yellow); color:var(--primary-blue); }
  .tech-highlights__item strong{
    display:block; font-family:'Poppins',sans-serif; font-weight:700; font-size:14.5px; color:var(--primary-blue);
  }
  .tech-highlights__item p{
    margin:4px 0 0; font-family:'Inter',sans-serif; font-size:12.5px; line-height:1.5; color:var(--primary-blue);
  }
  @media (max-width:860px){
    .tech-highlights{ grid-template-columns:repeat(2, 1fr); gap:22px 16px; margin-top:32px; padding:22px; }
  }
  @media (max-width:480px){
    .tech-highlights{ grid-template-columns:1fr; padding:20px; gap:18px; }
  }

  /* Cards — flat white on every category (no per-category gradient
     variety anymore, since that meant 4 different blue hexes). Sized as a
     percentage of the visible track (not a fixed px), so exactly 5 whole
     cards fit edge-to-edge with zero partial card peeking at the end —
     240px fixed width only happened to fit ~4.25 cards depending on
     viewport, which is what was cutting the 5th one in half. */
  .tech-tile{
    position:relative;
    flex:0 0 calc((100% - 4 * 20px) / 5);
    scroll-snap-align:start;
    display:flex; flex-direction:column;
    background:var(--white);
    border:1.5px solid var(--primary-blue);
    border-radius:var(--radius-def);
    padding:24px 20px;
    min-height:250px;
    overflow:hidden;
    text-decoration:none; color:inherit;
    transition:transform .25s var(--ease), border-color .25s var(--ease);
  }
  .tech-tile:hover{ transform:translateY(-5px); border-color:var(--yellow); }
  .tech-tile.is-hidden{ display:none; }

  .tech-tile__icon{
    width:52px; height:52px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:20px;
    margin-bottom:20px;
    background:var(--primary-blue);
    color:var(--white);
  }
  .tech-tile__text strong{
    display:block; font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; color:var(--primary-blue);
  }
  .tech-tile__text span{
    display:inline-block; font-family:'Inter',sans-serif; font-weight:700; font-size:11px;
    color:var(--primary-blue); background:var(--yellow);
    padding:2px 9px; border-radius:999px; margin-top:7px;
  }
  .tech-tile__desc{
    margin:12px 0 0; font-family:'Inter',sans-serif; font-size:12.5px; line-height:1.55;
    color:var(--primary-blue);
  }
  .tech-tile__explore{
    display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:16px;
    font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; color:var(--primary-blue);
  }
  .tech-tile__explore i{ font-size:10px; transition:transform .18s var(--ease); }
  .tech-tile:hover .tech-tile__explore i{ transform:translateX(3px); }

  /* Per-tile icon accent — the only intentional "variety" left, and it
     stays within the same 3 colors: most tiles get a blue icon (set
     above), tiles flagged accent="yellow" in the data get a yellow one
     instead. No other category-color mapping anymore. */
  .tech-tile--yellow .tech-tile__icon{ background:var(--yellow); color:var(--primary-blue); }

  /* Featured tile — driven by a real "Website Highlight" course match only
     (see featuredTechId in page.tsx). Same flat white card, just a
     heavier yellow border + badge to lift it above the rest — no gradient
     background swap. */
  .tech-tile--featured{
    border:2px solid var(--yellow);
  }
  .tech-tile__badge{
    position:absolute; top:14px; left:14px;
    display:inline-flex; align-items:center; gap:5px;
    background:var(--yellow); color:var(--primary-blue);
    font-family:'Inter',sans-serif; font-weight:700; font-size:10px; letter-spacing:.02em;
    padding:4px 10px; border-radius:999px;
    z-index:1;
  }
  .tech-tile__badge i{ font-size:9px; }

  /* Mobile — this section had zero breakpoints before, so on phones it
     kept the full desktop vertical padding (96px/104px) and the filter
     pills wrapped into a tall, cramped block. Tightened padding, smaller
     filter pills that scroll on one line instead of wrapping messily, and
     slightly smaller tiles so ~1.7 tiles peek at the edge (a scroll
     affordance) instead of exactly 2 full tiles with nothing hinting the
     row is swipeable. */
  @media (max-width:860px){
    .tech-explorer{ padding:56px 5vw 64px; }
    .tech-explorer__head{ margin:0 auto 28px; }
    .tech-filters{
      flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
      gap:8px; margin:0 -5vw 28px; padding:0 5vw 6px;
      min-width:0;
      -ms-overflow-style:none; scrollbar-width:none;
    }
    .tech-filters::-webkit-scrollbar{ display:none; }
    .tech-filter{ flex-shrink:0; padding:10px 16px; font-size:12.5px; min-height:44px; }
    .tech-slider{ padding:0 44px; }
    .tech-nav{ width:38px; height:38px; }
    .tech-tile{ flex:0 0 200px; min-height:225px; padding:20px 16px; }
    .tech-tile__icon{ width:44px; height:44px; margin-bottom:16px; font-size:17px; }
    .tech-tile__text strong{ font-size:14.5px; }
    .tech-tile__desc{ font-size:11.5px; }
    .tech-tile__badge{ font-size:9px; padding:3px 8px; top:12px; left:12px; }
  }
  @media (max-width:480px){
    .tech-explorer{ padding:48px 5vw 56px; }
    .tech-slider{ padding:0 4px; }
    /* On very small screens the round arrow buttons would overlap the
       cards if kept absolutely positioned inside a tight gutter — drop
       them and let the dots + native swipe carry navigation instead
       (still the same scroll container, no new carousel). */
    .tech-nav{ display:none; }
    .tech-grid{ padding:8px 4px 20px; margin:0; }
    /* Was flex:0 0 178px (an intentional "peek the next card" affordance
       for tablet-ish widths) — but on real phones that meant TWO tiles
       both showed cut off with neither fully readable, which is what the
       "cards look cut off" feedback was about. Full container width here
       means exactly one complete card per screen; swiping still works
       the same way, it just lands on a whole card instead of a sliver
       of two. */
    .tech-tile{ flex:0 0 100%; min-height:210px; padding:18px 14px; }
    .tech-tile__icon{ width:40px; height:40px; margin-bottom:14px; font-size:16px; }
    .tech-tile__text strong{ font-size:13.5px; }
    .tech-tile__text span{ font-size:10.5px; }
    .tech-tile__desc{ font-size:11px; margin-top:8px; }
    .tech-tile__explore{ font-size:11.5px; padding-top:12px; }
  }
  /* ---------- "Technicia Course Finder" section ---------- */
  .finder{
    position:relative;
    padding:96px 5vw 104px;
  }
  /* Was surface-bg (near-white) — inconsistent with the rest of the page's
     blue-section rhythm. Full-bleed primary-blue backdrop, same pattern
     used on .goals (see that section's comment for why a pseudo-element
     bleed is used instead of changing this element's own background
     directly — .finder__inner is width-capped, this isn't). */
  .finder::before{
    content:""; position:absolute; top:0; bottom:0; left:50%;
    width:100vw; transform:translateX(-50%);
    background:var(--navy-anchor); z-index:-1;
  }
  .finder__inner{ max-width:1160px; margin:0 auto; }
  .finder__head{
    text-align:center;
    max-width:640px;
    margin:0 auto 48px;
  }
  .finder__eyebrow{
    font-family:'Roboto Mono',monospace;
    font-size:13px; letter-spacing:.14em;
    color:var(--yellow);
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-bottom:16px;
  }
  .finder__eyebrow::before, .finder__eyebrow::after{ content:""; width:26px; height:1.5px; background:var(--yellow); display:inline-block; }
  .finder__head h2{
    font-family:'Poppins',sans-serif; font-weight:800;
    font-size:clamp(28px,3.6vw,42px);
    color:var(--white);
    letter-spacing:-.5px;
    margin-bottom:12px;
  }
  .finder__head p{
    font-family:'Poppins',sans-serif; font-weight:600;
    font-size:clamp(15px,1.6vw,18px);
    color:rgba(255,255,255,.78);
  }

  .finder__panel{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:0;
    background:var(--white);
    border:1px solid var(--gray150);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
  }
  @media (max-width:900px){ .finder__panel{ grid-template-columns:1fr; } }

  .finder__questions{ padding:36px 34px; }
  .finder__group{ margin-bottom:26px; }
  .finder__group:last-child{ margin-bottom:0; }
  .finder__group label{
    display:block;
    font-family:'Roboto Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--gray500); margin-bottom:12px;
  }
  .finder__options{ display:flex; flex-wrap:wrap; gap:8px; }
  .finder__options button{
    font-family:'Inter',sans-serif; font-weight:600; font-size:13px;
    color:var(--navy-anchor); background:var(--surface-bg);
    border:1.3px solid transparent;
    padding:11px 18px; border-radius:999px; cursor:pointer;
    transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  }
  .finder__options button:hover{ border-color:var(--gray300); }
  .finder__options button.is-active{ background:var(--primary-blue); color:var(--white); }

  .finder__result{
    background:var(--navy-anchor);
    padding:34px;
    display:flex; flex-direction:column;
  }
  .finder-card{
    background:var(--navy-anchor);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    flex:1;
    display:flex; flex-direction:column;
  }
  .finder-card__bar{
    display:flex; align-items:center; gap:6px;
    padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08);
  }
  .finder-card__bar span{ width:9px; height:9px; border-radius:50%; }
  .finder-card__bar span:nth-child(1){ background:var(--yellow); }
  .finder-card__bar span:nth-child(2){ background:var(--accent-blue); }
  .finder-card__bar span:nth-child(3){ background:var(--primary-blue); }
  .finder-card__bar small{
    margin-left:auto;
    font-family:'Roboto Mono',monospace; font-size:10.5px; letter-spacing:.1em;
    color:var(--on-dark-300); text-transform:uppercase;
  }
  .finder-card__body{ padding:26px 26px 28px; flex:1; display:flex; flex-direction:column; }
  .finder-card__label{
    font-family:'Roboto Mono',monospace; font-size:11.5px; letter-spacing:.12em;
    color:var(--yellow); text-transform:uppercase; margin-bottom:10px;
  }
  .finder-card__name{
    font-family:'Poppins',sans-serif; font-weight:800;
    font-size:clamp(19px,2.2vw,24px);
    color:var(--white); letter-spacing:-.3px; margin-bottom:12px;
  }
  .finder-card__desc{
    font-family:'Inter',sans-serif; font-size:13px; line-height:1.65;
    color:var(--on-dark-300); margin-bottom:18px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .finder-card__meta{ display:flex; gap:18px; margin-bottom:22px; flex-wrap:wrap; }
  .finder-card__meta span{
    display:flex; align-items:center; gap:7px;
    font-family:'Inter',sans-serif; font-weight:600; font-size:11.5px;
    color:var(--on-dark-300);
  }
  .finder-card__meta i{ font-size:11px; }
  .finder-card__cta{
    display:inline-block; text-decoration:none;
    margin-top:auto;
    align-self:flex-start;
    font-family:'Inter',sans-serif; font-weight:700; font-size:13.5px;
    color:var(--navy-anchor); background:var(--yellow);
    padding:13px 26px; border-radius:999px; border:none; cursor:pointer;
    transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .finder-card__cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.28); }
  .finder-card-enter{ animation:idcardIn .35s var(--ease) both; }

  /* ---------- "Popular Programs" section ---------- */
  /* ---------- "Popular Programs" section ----------
     Same brand-strict palette as Tech Explorer: only --primary-blue,
     --white, --yellow, full opacity, no gradients/tints/grays, on every
     element down to badges and pill text. */
  .programs{
    background:var(--primary-blue);
    padding:96px 5vw 104px;
  }
  .programs__inner{ max-width:1280px; width:100%; margin:0 auto; }
  .programs__head{
    text-align:center;
    max-width:640px;
    margin:0 auto 52px;
  }
  .programs__eyebrow{
    font-family:'Roboto Mono',monospace;
    font-size:13px; letter-spacing:.14em;
    color:var(--yellow);
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-bottom:16px;
  }
  .programs__eyebrow::before, .programs__eyebrow::after{ content:""; width:26px; height:1.5px; background:var(--yellow); display:inline-block; }
  .programs__head h2{
    font-family:'Poppins',sans-serif; font-weight:800;
    font-size:clamp(28px,3.6vw,42px);
    color:var(--white);
    letter-spacing:-.5px;
    margin-bottom:12px;
    line-height:1.1;
  }
  .programs__head p{
    font-family:'Poppins',sans-serif; font-weight:600;
    font-size:clamp(15px,1.6vw,18px);
    color:var(--white);
  }


  /* ---------- "The Technicia Method" section ---------- */
  .method{
    background:linear-gradient(155deg, var(--primary-blue) 0%, var(--navy-anchor) 65%);
    padding:96px 5vw 104px;
    position:relative;
    overflow:hidden;
  }
  .method::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(155deg, var(--indigo-700) 0%, var(--navy-anchor) 60%);
    opacity:.6;
    pointer-events:none;
  }
  .method__inner{ position:relative; z-index:2; max-width:1200px; margin:0 auto; }
  .method__head{ text-align:center; max-width:640px; margin:0 auto 60px; }
  .method__eyebrow{
    font-family:'Roboto Mono',monospace; font-size:13px; letter-spacing:.14em; color:var(--yellow);
    display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px;
  }
  .method__eyebrow::before, .method__eyebrow::after{ content:""; width:26px; height:1.5px; background:var(--yellow); display:inline-block; }
  .method__head h2{
    font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(28px,3.6vw,42px);
    color:var(--white); letter-spacing:-.5px; margin-bottom:12px;
  }
  .method__head p{
    font-family:'Poppins',sans-serif; font-weight:600; font-size:clamp(15px,1.6vw,18px); color:var(--on-dark-300);
  }

  .method__steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    position:relative;
  }
  .method__steps::before{
    content:"";
    position:absolute; top:26px; left:12.5%; right:12.5%; height:1.5px;
    background:rgba(255,255,255,.18);
  }
  @media (max-width:860px){
    .method__steps{ grid-template-columns:1fr; gap:36px; }
    .method__steps::before{ display:none; }
  }
  .method__step{ position:relative; text-align:center; padding:0 18px; }
  @media (max-width:860px){ .method__step{ text-align:left; padding-left:70px; } }
  .method__step-num{
    position:relative; z-index:2;
    width:52px; height:52px; margin:0 auto 22px;
    border-radius:50%; background:var(--yellow);
    display:flex; align-items:center; justify-content:center;
    font-family:'Poppins',sans-serif; font-weight:800; font-size:16px; color:var(--navy-anchor);
  }
  @media (max-width:860px){ .method__step-num{ position:absolute; left:0; top:0; margin:0; } }
  .method__step h3{
    font-family:'Poppins',sans-serif; font-weight:700; font-size:16.5px; color:var(--white); margin-bottom:10px;
  }
  .method__step p{
    font-family:'Inter',sans-serif; font-size:12.5px; line-height:1.6; color:var(--on-dark-300);
  }

  /* ---------- "Learning System" section ---------- */
  .learning-sys{
    position:relative;
    padding:96px 5vw 104px;
  }
  .learning-sys::before{
    content:""; position:absolute; top:0; bottom:0; left:50%;
    width:100vw; transform:translateX(-50%);
    background:var(--primary-blue); z-index:-1;
  }
  .learning-sys__inner{ max-width:1160px; margin:0 auto; }
  .learning-sys__head{ text-align:center; max-width:640px; margin:0 auto 56px; }
  .learning-sys__eyebrow{
    font-family:'Roboto Mono',monospace; font-size:13px; letter-spacing:.14em; color:var(--yellow);
    display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px;
  }
  .learning-sys__eyebrow::before, .learning-sys__eyebrow::after{ content:""; width:26px; height:1.5px; background:var(--yellow); display:inline-block; }
  .learning-sys__head h2{
    font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(28px,3.6vw,42px);
    color:var(--white); letter-spacing:-.5px; margin-bottom:12px;
  }
  .learning-sys__head p{
    font-family:'Poppins',sans-serif; font-weight:600; font-size:clamp(15px,1.6vw,18px); color:rgba(255,255,255,.78);
  }

  .ls2-list{ position:relative; display:flex; flex-direction:column; }
  .ls2-row{
    display:grid; grid-template-columns:1fr 56px 1fr; align-items:center; gap:0;
    padding:22px 0;
  }

  .ls2-icon{
    justify-self:end; width:78px; height:78px;
    display:flex; align-items:center; justify-content:center;
    border:2px dashed var(--gray200); border-radius:22px;
    transform:rotate(45deg);
    background:var(--white);
  }
  .ls2-row--reverse .ls2-icon{ justify-self:start; }
  .ls2-icon i{ transform:rotate(-45deg); font-size:24px; }
  .ls2-icon--navy{ border-color:var(--navy-anchor); color:var(--navy-anchor); }
  .ls2-icon--primary{ border-color:var(--primary-blue); color:var(--primary-blue); }
  .ls2-icon--indigo{ border-color:var(--indigo-700); color:var(--indigo-700); }
  .ls2-icon--accent{ border-color:var(--accent-blue); color:var(--accent-blue); }
  .ls2-icon--yellow{ border-color:var(--yellow); color:var(--navy-anchor); background:var(--yellow); }

  .ls2-spine{
    position:relative; height:100%; min-height:78px;
    display:flex; align-items:center; justify-content:center;
  }
  .ls2-spine::before{
    content:""; position:absolute; top:-22px; bottom:-22px; left:50%;
    width:0; border-left:2px dotted rgba(255,255,255,.35); transform:translateX(-50%);
  }
  .ls2-row:first-child .ls2-spine::before{ top:50%; }
  .ls2-spine--last::before{ bottom:50%; }
  .ls2-spine::after{
    content:""; width:9px; height:9px; border-radius:50%;
    background:var(--yellow); border:2px solid var(--white); position:relative; z-index:2;
  }

  .ls2-content{ padding:0 28px; }
  .ls2-content--right{ text-align:right; }
  .ls2-num{
    font-family:'Roboto Mono',monospace; font-weight:700; font-size:12px; letter-spacing:.08em;
    color:var(--yellow); opacity:.9;
  }
  .ls2-content h3{
    font-family:'Poppins',sans-serif; font-weight:800; font-size:18px; margin:4px 0 8px;
    color:var(--white);
  }
  .ls2-content p{
    font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.65; color:rgba(255,255,255,.72); max-width:400px;
  }
  .ls2-content--right p{ margin-left:auto; }

  @media (max-width:760px){
    .learning-sys{ padding:56px 5vw 64px; }
    .learning-sys__head{ margin:0 auto 36px; }
    .ls2-row, .ls2-row--reverse{ grid-template-columns:56px 1fr; direction:ltr; }
    .ls2-icon, .ls2-row--reverse .ls2-icon{ justify-self:start; width:56px; height:56px; }
    .ls2-icon i{ font-size:18px; }
    .ls2-spine{ display:none; }
    .ls2-content, .ls2-content--right{ text-align:left; padding:0 0 0 18px; }
    .ls2-content--right p{ margin-left:0; }
    .ls2-row{ padding:16px 0; }
    /* .ls2-row--reverse's DOM order is [content, spine, icon] (opposite of
       .ls2-row's [icon, spine, content]) — that's what makes the desktop
       zigzag layout work. With the spine hidden above and both row types
       sharing one 56px-first grid template, the reverse rows' content (not
       the icon) was landing in that narrow first column and the icon was
       being stretched into the wide second column — squeezed, overlapping
       text. Forcing the icon to always occupy the first column regardless
       of source order fixes it without touching the desktop markup/CSS. */
    .ls2-row--reverse .ls2-icon{ order:-1; }
    .ls2-row--reverse .ls2-content--right{ order:1; }
  }
  @media (max-width:420px){
    .ls2-row, .ls2-row--reverse{ grid-template-columns:44px 1fr; }
    .ls2-icon, .ls2-row--reverse .ls2-icon{ width:44px; height:44px; border-radius:14px; }
    .ls2-icon i{ font-size:15px; }
    .ls2-content h3{ font-size:16px; }
    .ls2-content p{ font-size:13px; }
  }

  /* ---------- "How Your Learning Turns Into a Career" journey strip ---------- */
  .placement-journey{
    padding:48px 5vw 56px; background:linear-gradient(180deg, #FAFBFF 0%, #fff 100%);
    border-bottom:1px solid var(--gray150); position:relative; overflow:hidden;
  }
  .pj-bg-glow{
    position:absolute; width:480px; height:480px; border-radius:50%;
    background:radial-gradient(circle, rgba(3,69,217,.06) 0%, rgba(3,69,217,0) 70%);
    top:-220px; right:-140px; pointer-events:none;
  }
  .pj-head{ max-width:640px; margin:0 auto 44px; text-align:center; position:relative; }
  .pj-eyebrow{
    font-family:'Roboto Mono',monospace; font-size:11px; letter-spacing:.12em;
    color:var(--primary-blue); font-weight:700; margin-bottom:12px;
    display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .pj-eyebrow::before, .pj-eyebrow::after{ content:""; width:22px; height:1.5px; background:var(--yellow); }
  .pj-head h3{
    font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(22px,2.8vw,28px);
    color:var(--navy-anchor); margin:0 0 10px; line-height:1.3;
  }
  .pj-head p{ font-family:'Inter',sans-serif; font-size:14px; color:var(--gray500); margin:0; line-height:1.6; }
  .pj-track{
    max-width:1360px; margin:0 auto; position:relative;
    display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
  }
  .pj-connector{
    position:absolute; top:44px; left:calc(10% + 6px); right:calc(10% + 6px);
    height:2px; z-index:0; overflow:hidden;
  }
  .pj-connector::before{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(90deg, var(--accent-blue) 0 10px, transparent 10px 20px);
    opacity:.35;
  }
  .pj-step{
    position:relative; z-index:1; background:var(--white); border-radius:16px;
    padding:30px 18px 24px; text-align:center; border:1px solid #EEF1F8;
    box-shadow:0 2px 10px rgba(16,54,125,.05);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .pj-step:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 32px rgba(16,54,125,.13);
    border-color:#DCE6FA;
  }
  .pj-step__badge{
    position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    width:26px; height:26px; border-radius:50%; background:var(--navy-anchor); color:#fff;
    font-family:'Roboto Mono',monospace; font-weight:700; font-size:12px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 10px rgba(1,53,154,.35);
  }
  .pj-step:nth-child(5) .pj-step__badge{ background:var(--yellow); color:var(--navy-anchor); }
  .pj-step__icon{
    width:60px; height:60px; border-radius:16px; margin:10px auto 18px;
    display:flex; align-items:center; justify-content:center; font-size:24px;
    background:linear-gradient(155deg, #E6F0FF 0%, #F3F7FF 100%); color:var(--primary-blue);
    transition:transform .25s ease;
  }
  .pj-step:hover .pj-step__icon{ transform:scale(1.08) rotate(-4deg); }
  .pj-step:nth-child(5) .pj-step__icon{
    background:linear-gradient(155deg, #FFF6D2 0%, #FFFBEC 100%); color:#B9860B;
  }
  .pj-step__title{
    font-family:'Poppins',sans-serif; font-weight:700; font-size:15px;
    color:var(--navy-anchor); margin:0 0 8px;
  }
  .pj-step__desc{ font-family:'Inter',sans-serif; font-size:12px; color:var(--gray500); line-height:1.6; margin:0; }
  .pj-step__arrow{
    position:absolute; top:50%; right:-22px; transform:translateY(-50%);
    color:#B8C6E8; font-size:14px; z-index:2;
  }
  .pj-step:last-child .pj-step__arrow{ display:none; }
  @media (max-width:860px){
    .pj-track{ grid-template-columns:1fr; gap:22px; }
    .pj-connector{ display:none; }
    .pj-step__arrow{ display:none; }
  }

  /* ---------- "Placement & Industry Exposure" section ---------- */
  .placement{
    position:relative;
    padding:48px 5vw 56px;
  }
  .placement::before{
    content:""; position:absolute; top:0; bottom:0; left:50%;
    width:100vw; transform:translateX(-50%);
    background:var(--navy-anchor); z-index:-1;
  }
  .placement__inner{ max-width:1160px; margin:0 auto; }
  .placement__head{ text-align:center; max-width:660px; margin:0 auto 28px; }
  .placement__eyebrow{
    font-family:'Roboto Mono',monospace; font-size:13px; letter-spacing:.14em; color:var(--yellow);
    display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:12px;
  }
  .placement__eyebrow::before, .placement__eyebrow::after{ content:""; width:26px; height:1.5px; background:var(--yellow); display:inline-block; }
  .placement__head h2{
    font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(24px,3vw,34px);
    color:var(--white); letter-spacing:-.5px; margin-bottom:8px;
  }
  .placement__head p{
    font-family:'Poppins',sans-serif; font-weight:600; font-size:clamp(13px,1.4vw,16px); color:rgba(255,255,255,.78);
  }

  /* ---------- single merged 2x2 grid: stats|features on top, cta|marquee below — no gap between rows, one seamless card ---------- */
  .placement__grid{
    display:grid; grid-template-columns:1fr 1.3fr;
    border-radius:var(--radius-lg); overflow:hidden;
  }
  @media (max-width:780px){ .placement__grid{ grid-template-columns:1fr; } }

  .placement__stats-panel{
    background:var(--navy-anchor);
    display:grid; grid-template-columns:1fr 1fr; gap:16px;
    padding:24px 24px; align-content:center;
  }
  .placement__stat strong{
    display:block; font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(20px,2.2vw,26px); color:var(--yellow);
  }
  .placement__stat span{
    display:block; font-family:'Inter',sans-serif; font-size:10.5px; color:var(--on-dark-300); margin-top:3px;
  }

  .placement__features-panel{
    background:var(--white);
    display:grid; grid-template-columns:1fr 1fr; gap:16px;
    padding:22px 24px; align-content:center;
  }
  .placement__feature{ display:flex; align-items:flex-start; gap:10px; }
  .placement__feature-icon{
    width:34px; height:34px; border-radius:9px; flex-shrink:0;
    background:rgba(3,69,217,0.10); display:flex; align-items:center; justify-content:center;
  }
  .placement__feature-icon i{ color:var(--primary-blue); font-size:14px; }
  .placement__feature strong{
    display:block; font-family:'Poppins',sans-serif; font-weight:700; font-size:12.5px; color:var(--navy-anchor);
  }
  .placement__feature span{
    display:block; font-family:'Inter',sans-serif; font-size:10.5px; color:var(--gray500); margin-top:2px;
  }

  .placement__cta-panel{
    background:var(--indigo-700);
    display:flex; flex-direction:column; justify-content:center;
    padding:26px 24px;
  }
  .placement__cta-badge{
    display:inline-block; width:fit-content;
    background:var(--yellow); color:var(--navy-anchor);
    font-family:'Inter',sans-serif; font-weight:700; font-size:10px; letter-spacing:.02em;
    padding:4px 11px; border-radius:7px; margin-bottom:10px;
  }
  .placement__cta-panel h3{
    font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(17px,1.9vw,21px); color:var(--white);
    line-height:1.25; margin-bottom:8px;
  }
  .placement__cta-panel p{
    font-family:'Inter',sans-serif; font-size:11.5px; line-height:1.55; color:var(--on-dark-300); margin-bottom:16px;
  }
  .placement__cta-btn{
    display:inline-flex; align-items:center; gap:8px; width:fit-content;
    background:var(--yellow); color:var(--navy-anchor);
    font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px;
    padding:10px 20px; border-radius:9px;
    transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .placement__cta-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(1,53,154,.2); }
  .placement__cta-btn i{ font-size:11px; }

  .placement__marquee-panel{
    background:var(--surface-bg);
    display:flex; align-items:center; overflow:hidden;
    padding:18px 22px;
    -webkit-mask-image:linear-gradient(90deg, transparent, var(--navy-anchor) 6%, var(--navy-anchor) 94%, transparent);
    mask-image:linear-gradient(90deg, transparent, var(--navy-anchor) 6%, var(--navy-anchor) 94%, transparent);
  }
  .partner-marquee__track{
    display:flex; gap:16px; width:max-content;
    animation:marqueeScroll 26s linear infinite;
  }
  .placement__marquee-panel:hover .partner-marquee__track{ animation-play-state:paused; }
  @keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .partner-logo-card{
    width:160px; height:160px; flex-shrink:0;
    background:var(--white); border:1px solid var(--gray300); border-radius:14px;
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding:16px;
    transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  }
  .partner-logo-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--primary-blue); }
  .partner-logo-card img{ max-width:100%; max-height:100%; object-fit:contain; }
  .partner-logo-card span{
    font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; color:var(--navy-anchor); line-height:1.4;
  }

  /* ---------- shared section head (reused by all sections below) ---------- */
  .sec-head{ text-align:center; max-width:660px; margin:0 auto 48px; }
  .sec-eyebrow{
    font-family:'Roboto Mono',monospace; font-size:13px; letter-spacing:.14em;
    display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px;
  }
  .sec-eyebrow::before, .sec-eyebrow::after{ content:""; width:26px; height:1.5px; display:inline-block; }
  .sec-head h2{
    font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(28px,3.6vw,42px);
    letter-spacing:-.5px; margin-bottom:12px; line-height:1.15;
  }
  .sec-head p{
    font-family:'Poppins',sans-serif; font-weight:600; font-size:clamp(15px,1.6vw,18px);
  }
  .sec-head--light .sec-eyebrow{ color:var(--yellow); }
  .sec-head--light .sec-eyebrow::before, .sec-head--light .sec-eyebrow::after{ background:var(--yellow); }
  .sec-head--light h2{ color:var(--white); }
  .sec-head--light p{ color:var(--on-dark-300); }
  .sec-head--dark .sec-eyebrow{ color:var(--primary-blue); }
  .sec-head--dark .sec-eyebrow::before, .sec-head--dark .sec-eyebrow::after{ background:var(--primary-blue); }
  .sec-head--dark h2{ color:var(--primary-blue); }
  .sec-head--dark p{ color:var(--gray500); }

  .placement__note{
    text-align:center; margin-top:14px;
    font-family:'Inter',sans-serif; font-size:11px; color:var(--gray500);
  }

  /* ---------- "Student Voices" ---------- */
  .student-voices{ position:relative; padding:96px 5vw 104px; }
  .student-voices::before{
    content:""; position:absolute; top:0; bottom:0; left:50%;
    width:100vw; transform:translateX(-50%);
    background:var(--primary-blue); z-index:-1;
  }
  .student-voices__inner{ max-width:1160px; margin:0 auto; }
  .testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:900px){ .testimonial-grid{ grid-template-columns:1fr; } }
  .testimonial-card{
    background:var(--white); border:1px solid transparent; border-radius:var(--radius-lg);
    padding:26px 24px; display:flex; flex-direction:column;
    transition:transform .22s var(--ease), box-shadow .22s var(--ease);
  }
  .testimonial-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
  .testimonial-card__icon{ color:var(--primary-blue); font-size:22px; margin-bottom:14px; opacity:.8; }
  .testimonial-card__stars{ color:var(--yellow); font-size:12px; margin-bottom:12px; }
  .testimonial-card p{
    font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.65; color:var(--navy-anchor);
    margin-bottom:20px; flex:1;
  }
  .testimonial-card__author{ display:flex; align-items:center; gap:12px; }
  .testimonial-card__avatar{
    width:40px; height:40px; border-radius:50%;
    background:var(--primary-blue); color:var(--white);
    display:flex; align-items:center; justify-content:center;
    font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; flex-shrink:0;
  }
  .testimonial-card__author strong{ display:block; font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; color:var(--navy-anchor); }
  .testimonial-card__author span{ display:block; font-family:'Inter',sans-serif; font-size:11px; color:var(--gray500); margin-top:2px; }
  .student-voices__note{ text-align:center; margin-top:24px; font-family:'Inter',sans-serif; font-size:11px; color:rgba(255,255,255,.7); }

  /* ---------- "For Enrolled Students" gateway ---------- */
  .student-gateway{ background:var(--navy-anchor); padding:72px 5vw 80px; position:relative; overflow:hidden; }
  .student-gateway::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(155deg, var(--indigo-700) 0%, var(--navy-anchor) 60%); opacity:.6; pointer-events:none;
  }
  .student-gateway__inner{ position:relative; z-index:2; max-width:1160px; margin:0 auto; }
  .gateway-panel{ display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:start; }
  @media (max-width:900px){ .gateway-panel{ grid-template-columns:1fr; } }
  .gateway-panel__copy p{
    font-family:'Inter',sans-serif; font-size:14px; line-height:1.75; color:var(--on-dark-300); margin-bottom:26px; max-width:440px;
  }
  .gateway-panel__eyebrow{ justify-content:flex-start; color:var(--yellow); }
  .gateway-panel__eyebrow::before, .gateway-panel__eyebrow::after{ background:var(--yellow); }
  .gateway-panel__heading{
    font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(26px,3.2vw,36px);
    color:var(--white); letter-spacing:-.4px; margin-bottom:16px; line-height:1.2;
  }
  .gateway-cta{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Inter',sans-serif; font-weight:700; font-size:14px;
    color:var(--navy-anchor); background:var(--yellow);
    padding:14px 28px; border-radius:999px; text-decoration:none;
    transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .gateway-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.28); }

  .gateway-highlights{ display:flex; flex-direction:column; gap:14px; margin-top:36px; padding-top:28px; border-top:1px solid rgba(255,255,255,.14); }
  .gateway-highlight{ display:flex; align-items:center; gap:12px; }
  .gateway-highlight i{
    width:32px; height:32px; border-radius:9px; flex-shrink:0;
    background:rgba(255,255,255,.08); color:var(--yellow); font-size:13px;
    display:flex; align-items:center; justify-content:center;
  }
  .gateway-highlight span{ font-family:'Inter',sans-serif; font-weight:600; font-size:13px; color:var(--on-dark-300); }

  .gateway-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width:640px){ .gateway-grid{ grid-template-columns:1fr; } }
  .gateway-tile{
    display:flex; align-items:flex-start; gap:14px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-def);
    padding:18px; text-decoration:none;
    transition:background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
  }
  .gateway-tile:hover{ background:rgba(255,255,255,.12); transform:translateY(-3px); border-color:rgba(254,218,37,.4); }
  .gateway-tile__icon{
    width:40px; height:40px; border-radius:11px; flex-shrink:0;
    background:rgba(254,218,37,.14); color:var(--yellow); font-size:16px;
    display:flex; align-items:center; justify-content:center;
  }
  .gateway-tile strong{ display:block; font-family:'Poppins',sans-serif; font-weight:700; font-size:13.5px; color:var(--white); margin-bottom:4px; }
  .gateway-tile small{ display:block; font-family:'Inter',sans-serif; font-size:11px; color:var(--on-dark-300); line-height:1.5; }

  /* ---------- "Technicia Skill Hunt" ---------- */
  .skill-hunt{ position:relative; padding:96px 5vw 104px; }
  .skill-hunt::before{
    content:""; position:absolute; top:0; bottom:0; left:50%;
    width:100vw; transform:translateX(-50%);
    background:var(--primary-blue); z-index:-1;
  }
  .skill-hunt__inner{ max-width:1160px; margin:0 auto; }
  .skill-hunt__panel{
    display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;
    background:var(--white); border:1px solid transparent; border-radius:var(--radius-lg);
    padding:44px; box-shadow:var(--shadow-lg);
  }
  @media (max-width:860px){ .skill-hunt__panel{ grid-template-columns:1fr; padding:32px 26px; } }
  .skill-hunt__badge{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Roboto Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--navy-anchor); background:rgba(1,53,154,.08);
    padding:8px 14px; border-radius:999px; margin-bottom:16px;
  }
  .skill-hunt__badge i{ color:var(--primary-blue); }
  .skill-hunt__copy h3{
    font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(22px,2.6vw,28px); color:var(--navy-anchor);
    letter-spacing:-.4px; margin-bottom:14px; line-height:1.2;
  }
  .skill-hunt__copy p{ font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.7; color:var(--gray500); margin-bottom:22px; }
  .skill-hunt__cta{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Inter',sans-serif; font-weight:700; font-size:13.5px;
    color:var(--navy-anchor); background:var(--yellow);
    padding:13px 26px; border-radius:999px; text-decoration:none;
    transition:background .18s var(--ease), transform .18s var(--ease);
  }
  .skill-hunt__cta:hover{ background:var(--yellow); transform:translateY(-2px); }
  .skill-hunt__highlights{ display:flex; flex-direction:column; gap:16px; }
  .skill-hunt__highlight{ display:flex; align-items:flex-start; gap:14px; }
  .skill-hunt__highlight-icon{
    width:38px; height:38px; border-radius:11px; flex-shrink:0;
    background:var(--primary-blue); display:flex; align-items:center; justify-content:center;
  }
  .skill-hunt__highlight-icon i{ color:var(--white); font-size:15px; }
  .skill-hunt__highlight strong{ display:block; font-family:'Poppins',sans-serif; font-weight:700; font-size:13.5px; color:var(--navy-anchor); }
  .skill-hunt__highlight span{ display:block; font-family:'Inter',sans-serif; font-size:12px; color:var(--gray500); margin-top:3px; }

  /* ---------- "Recognition & Verification" ---------- */
  .recognition{ position:relative; padding:96px 5vw 104px; }
  .recognition::before{
    content:""; position:absolute; top:0; bottom:0; left:50%;
    width:100vw; transform:translateX(-50%);
    background:linear-gradient(155deg, var(--primary-blue) 0%, var(--navy-anchor) 65%); z-index:-1;
  }
  .recognition__inner{ max-width:1160px; margin:0 auto; }
  .recognition-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:30px; }
  @media (max-width:900px){ .recognition-grid{ grid-template-columns:1fr; } }
  .recognition-card{
    background:var(--white); border-radius:var(--radius-lg);
    padding:24px 22px;
    transition:transform .22s var(--ease), box-shadow .22s var(--ease);
  }
  .recognition-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
  .recognition-card__icon{
    width:44px; height:44px; border-radius:12px; background:var(--yellow);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .recognition-card__icon i{ color:var(--navy-anchor); font-size:18px; }
  .recognition-card h3{ font-family:'Poppins',sans-serif; font-weight:700; font-size:14.5px; color:var(--navy-anchor); margin-bottom:8px; }
  .recognition-card p{ font-family:'Inter',sans-serif; font-size:12px; line-height:1.6; color:var(--gray500); }
  .recognition__verify{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
    background:var(--white); border-radius:var(--radius-lg); padding:26px 30px;
  }
  .recognition__verify p{ font-family:'Inter',sans-serif; font-size:13px; color:var(--gray500); }
  .recognition__verify strong{ display:block; font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; color:var(--navy-anchor); margin-bottom:4px; }
  .recognition__verify-btn{
    font-family:'Inter',sans-serif; font-weight:700; font-size:13.5px;
    color:var(--navy-anchor); background:var(--yellow);
    padding:13px 26px; border-radius:999px; border:none; cursor:pointer; white-space:nowrap;
    transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .recognition__verify-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.28); }

  /* ---------- "Technicia Partner Network" ---------- */
  .partner-network{ background:var(--navy-anchor); padding:96px 5vw 104px; position:relative; overflow:hidden; }
  .partner-network::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(155deg, var(--indigo-700) 0%, var(--navy-anchor) 60%); opacity:.6; pointer-events:none;
  }
  .partner-network__inner{ position:relative; z-index:2; max-width:1160px; margin:0 auto; }
  .partner-network__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:36px; }
  @media (max-width:900px){ .partner-network__grid{ grid-template-columns:repeat(2,1fr); } }
  .partner-network__card{
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-def);
    padding:22px 18px; text-align:center;
    transition:background .2s var(--ease), transform .2s var(--ease);
  }
  .partner-network__card:hover{ background:rgba(255,255,255,.12); transform:translateY(-4px); }
  .partner-network__card i{ color:var(--yellow); font-size:22px; margin-bottom:14px; display:block; }
  .partner-network__card strong{ display:block; font-family:'Poppins',sans-serif; font-weight:700; font-size:13.5px; color:var(--white); margin-bottom:5px; }
  .partner-network__card span{ display:block; font-family:'Inter',sans-serif; font-size:11px; color:var(--on-dark-300); }
  .partner-network__cta-row{ text-align:center; }
  .partner-network__cta{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Inter',sans-serif; font-weight:700; font-size:14px;
    color:var(--navy-anchor); background:var(--yellow);
    padding:14px 30px; border-radius:999px; text-decoration:none;
    transition:transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .partner-network__cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.28); }

  /* ---------- "Why Technicia" ---------- */
  .why-tech{ position:relative; padding:96px 5vw 104px; }
  .why-tech::before{
    content:""; position:absolute; top:0; bottom:0; left:50%;
    width:100vw; transform:translateX(-50%);
    background:var(--primary-blue); z-index:-1;
  }
  .why-tech__inner{ max-width:1100px; margin:0 auto; }
  .why-tech__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  @media (max-width:780px){ .why-tech__grid{ grid-template-columns:1fr; } }
  .why-tech__col{
    background:var(--white); border-radius:var(--radius-lg); border:1px solid var(--gray150);
    padding:32px 28px;
  }
  .why-tech__col--accent{ background:var(--navy-anchor); border-color:transparent; }
  .why-tech__col h3{
    font-family:'Poppins',sans-serif; font-weight:700; font-size:18px; color:var(--primary-blue); margin-bottom:20px;
  }
  .why-tech__col--accent h3{ color:var(--white); }
  .why-tech__col ul{ list-style:none; }
  .why-tech__col li{
    display:flex; align-items:flex-start; gap:10px;
    font-family:'Inter',sans-serif; font-size:13px; line-height:1.6; color:var(--navy-anchor);
    padding:9px 0; border-bottom:1px solid var(--gray150);
  }
  .why-tech__col li:last-child{ border-bottom:none; }
  .why-tech__col--accent li{ color:var(--on-dark-300); border-color:rgba(255,255,255,.12); }
  .why-tech__col li i{ color:var(--primary-blue); font-size:12px; margin-top:3px; flex-shrink:0; }
  .why-tech__col--accent li i{ color:var(--yellow); }

  /* ---------- "Your Next Move" final CTA ---------- */
  .next-move{ background:linear-gradient(155deg, var(--primary-blue) 0%, var(--navy-anchor) 65%); padding:96px 5vw 110px; }
  .next-move__inner{ max-width:1100px; margin:0 auto; }
  .next-move__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  @media (max-width:860px){ .next-move__grid{ grid-template-columns:1fr; } }
  .next-move__card{
    display:flex; flex-direction:column; align-items:flex-start;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-lg);
    padding:28px 24px; text-decoration:none;
    transition:background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
  }
  .next-move__card:hover{ background:rgba(255,255,255,.1); transform:translateY(-5px); border-color:var(--yellow); }
  .next-move__card-icon{
    width:46px; height:46px; border-radius:13px; background:var(--yellow);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  }
  .next-move__card-icon i{ color:var(--navy-anchor); font-size:19px; }
  .next-move__card h3{ font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; color:var(--white); margin-bottom:8px; }
  .next-move__card p{ font-family:'Inter',sans-serif; font-size:12.5px; line-height:1.6; color:var(--on-dark-300); margin-bottom:18px; }
  .next-move__card-link{
    margin-top:auto; display:flex; align-items:center; gap:8px;
    font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px; color:var(--yellow);
  }
  .next-move__card-link i{ font-size:11px; transition:transform .22s var(--ease); }
  .next-move__card:hover .next-move__card-link i{ transform:translateX(5px); }

/* ---------- premium scroll-reveal for sections below the hero ---------- */
.reveal-on-scroll{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
.reveal-on-scroll.is-revealed{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal-on-scroll{ opacity:1; transform:none; transition:none; }
}

/* ═══════════════════ FEES & PAYMENT (new section) ═══════════════════ */
.fees-section__grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:8px;
}
.programs__fees{ margin-top:72px; }
.fees-card{
  background:var(--white); border-radius:var(--radius-lg);
  padding:32px 26px; text-align:center;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.fees-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.fees-card__icon{
  width:56px; height:56px; border-radius:16px; margin:0 auto 18px;
  background:var(--yellow);
  display:flex; align-items:center; justify-content:center;
}
.fees-card__icon i{ color:var(--navy-anchor); font-size:22px; }
.fees-card h3{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:16.5px;
  color:var(--navy-anchor); margin-bottom:10px;
}
.fees-card__value{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:16px;
  color:var(--primary-blue); margin-bottom:12px;
}
.fees-card p{
  font-family:'Inter',sans-serif; font-size:12.5px; line-height:1.65; color:var(--gray500);
}
@media (max-width:900px){
  .fees-section__grid{ grid-template-columns:1fr; }
}






/* ═══════════════════ COURSE CARD (Popular Programs) ═══════════════════
   Card width tuned to 260px specifically so that a WHOLE number of cards
   (4, at every common desktop width from ~1280px up — the .programs__inner
   cap) fits the track with near-zero leftover space — 290px only ever fit
   3 with ~250px of dead space beside them. fitWholeProgramCards() in
   HomeInteractions.tsx (unchanged) measures this width live and clamps
   the grid so a trailing card is never shown half-cut, same mechanism as
   before — this is purely a sizing tune, not a new mechanism. */
.programs__slider{
  position:relative;
  padding:0 60px;
  min-width:0;
}
.programs__grid{
  display:flex; gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:8px 6px 24px;
  margin:0 -6px;
  width:100%; min-width:0;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.programs__grid::-webkit-scrollbar{ display:none; }
.programs__grid .course-card{ scroll-snap-align:start; flex-shrink:0; }

.programs__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; z-index:2;
  border:1.3px solid var(--white); background:var(--white); color:var(--primary-blue);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.programs__nav--prev{ left:0; }
.programs__nav--next{ right:0; }
.programs__nav:hover{ background:var(--yellow); color:var(--primary-blue); border-color:var(--yellow); }
.programs__nav svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; }

.programs__dots{ display:flex; gap:7px; justify-content:center; margin-top:8px; }
.programs__dots .programs__dot{
  width:8px; height:8px; border-radius:50%; background:var(--white);
  border:none; padding:0; cursor:pointer;
  transition:background .18s var(--ease), width .18s var(--ease);
}
.programs__dots .programs__dot.is-active{ background:var(--yellow); width:22px; border-radius:999px; }

@media (max-width:700px){
  .programs__slider{ padding:0 4px; }
  .programs__nav{ display:none; }
}

.course-card{
  width:260px; flex-shrink:0; scroll-snap-align:start;
  background:var(--white); border-radius:20px; overflow:hidden;
  border:1.5px solid var(--white);
  position:relative;
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.course-card:hover{ transform:translateY(-4px); border-color:var(--yellow); }
@media (max-width:600px){ .course-card{ width:240px; } }

/* ---- hero: proper rounded rectangle, inset from the card edges (like a
   photo floating in padding) instead of bleeding flush to the top
   corners only — matches the reference design. All 4 corners round now,
   so the margin (14px each side) is what creates the "rectangle sitting
   inside the card" look. ---- */
.course-card__hero{
  height:140px; width:calc(100% - 28px); margin:14px 14px 0;
  border-radius:16px;
  background:var(--primary-blue);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.course-card__hero::before{
  content:""; position:absolute; inset:0; opacity:.12; pointer-events:none;
  background-image:repeating-linear-gradient(45deg, var(--white) 0, var(--white) 1px, transparent 1px, transparent 14px);
}
.course-card__hero-icon{ font-size:48px; color:var(--white); }
.course-card__banner-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Level + Featured badges now live in the content section (moved out of
   the banner on request — banner stays a clean rounded image/icon area
   with just the skill-icon cluster). Since they're on the white body now
   instead of the blue hero, the fills are flipped so they still read
   clearly: Beginner is the lightest/outlined treatment, Advanced fills
   yellow, Professional fills blue — a visual progression that matches
   the actual skill progression. Featured uses blue+yellow together
   (distinct from any level combo) so the two badges never look alike
   even when both appear side by side.

   Level, Duration and Featured now share ONE plain inline row (moved out
   from being two separate lines) — deliberately not a bordered grid box
   like the Fee/Off/Pay strip below it, so the card doesn't stack two
   boxed-grid elements back to back, and so a non-featured course (most
   of them) just shows a shorter 2-pill row with no empty third slot to
   fill. Featured only renders when the course actually has it. */
.course-card__meta-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.course-card__level-badge{
  font-family:'Inter',sans-serif; font-size:10px; font-weight:700; padding:4px 9px; border-radius:999px;
  letter-spacing:.02em; text-transform:uppercase;
  background:var(--white); color:var(--primary-blue); border:1.5px solid var(--primary-blue); /* beginner default */
}
.course-card__level-badge--advanced{ background:var(--yellow); color:var(--primary-blue); border-color:var(--yellow); }
.course-card__level-badge--professional{ background:var(--primary-blue); color:var(--white); border-color:var(--primary-blue); }
/* Featured is a pin on the card corner (over the banner), NOT part of the
   meta-row — on request, so the row is ALWAYS just Level + Duration and
   never changes width/wraps depending on whether a course is featured.
   Icon-only (no text) circle badge, same white-ring treatment as
   .course-card__badge-icon so it reads as a matching "badge" language. */
.course-card__featured-pin{
  position:absolute; top:10px; right:10px; z-index:4;
  width:28px; height:28px; border-radius:50%;
  background:var(--yellow); color:var(--primary-blue); font-size:12px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--white);
}

.course-card__skill-icons{ position:absolute; bottom:8px; right:8px; display:flex; gap:5px; z-index:2; }
.course-card__skill-chip{
  width:26px; height:26px; border-radius:8px; background:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--primary-blue);
}

.course-card__badge-icon{
  width:44px; height:44px; border-radius:13px; background:var(--primary-blue);
  display:flex; align-items:center; justify-content:center; color:var(--white); font-size:19px;
  position:absolute; left:40px; top:131px; /* re-anchored to the hero's new
    bottom-left corner now that the hero itself sits inset by margin:14px
    (was left:26/top:117 when the hero was flush with the card edges) */
  border:3px solid var(--white); z-index:3;
}

.course-card__body{ padding:28px 18px 18px; }
.course-card__title{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:15.5px; color:var(--primary-blue);
  margin-bottom:8px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Duration is now just one pill inside .course-card__meta-row, alongside
   Level/Featured — no longer its own standalone line with its own
   margin-bottom (the row carries that spacing now). */
.course-card__duration{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--primary-blue); color:var(--white);
  font-family:'Inter',sans-serif; font-size:11px; font-weight:600; padding:4px 10px; border-radius:999px;
}

/* ---- 3-column Fee / Off / Pay ----
   Explicit fee/off/pay classes (replacing the old nth-child selectors)
   so the hover "calculating" animation below can target each cell
   directly. Hovering the whole pricing block replays a short calculator
   flourish: the Fee number gets struck through with a line that draws in
   (rather than an instant static strikethrough), the Off% pill pulses,
   and the Pay number counts down from the original Fee to the final
   price (handled in JS — CoursePricing component — since CSS can't
   animate arbitrary digits). All three are timed to roughly the same
   ~600ms window so they read as one "calculation completing" moment. */
.course-card__pricing{
  display:flex; align-items:center; justify-content:space-between; gap:0;
  background:var(--surface-bg); border-radius:12px; padding:10px 14px; margin-bottom:12px;
  cursor:default;
}
.course-card__pricing > div{ display:flex; flex-direction:column; }
.course-card__pricing > div:first-child{ padding-right:12px; border-right:1px solid var(--gray150); }
.course-card__pricing span{ font-family:'Inter',sans-serif; font-size:9.5px; color:var(--gray500); margin-bottom:2px; }
.course-card__pricing b{ font-family:'Roboto Mono',monospace; font-weight:700; font-size:14px; }
.course-card__price-original{
  position:relative; display:inline-block; color:var(--gray500); font-size:12.5px; text-decoration:line-through;
}
.course-card__pricing-off{ align-items:center; }
.course-card__discount-pct{
  background:var(--yellow); color:var(--navy-anchor); font-weight:800; font-size:11.5px;
  padding:3px 9px; border-radius:6px; transition:transform .18s var(--ease);
}
.course-card__pricing:hover .course-card__discount-pct{ animation:coursePriceOffPulse .6s var(--ease); }
@keyframes coursePriceOffPulse{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.14); }
  100%{ transform:scale(1); }
}
.course-card__pricing-pay{ align-items:flex-end; padding-left:12px; border-left:1px solid var(--gray150); }
.course-card__final-fee{ color:var(--navy-anchor); font-size:15px; font-weight:800; }
.course-card__pricing--single{ justify-content:flex-start; }
.course-card__pricing--single .course-card__final-fee{ color:var(--primary-blue); font-size:16px; }

.course-card__actions{ display:flex; flex-direction:column; gap:8px; }
.course-card__btn{
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:13.5px;
  padding:11px; border-radius:11px; border:none; cursor:pointer; text-decoration:none;
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.course-card__btn--fill{ background:var(--primary-blue); color:var(--white); }
.course-card__btn--fill:hover{ background:var(--yellow); color:var(--primary-blue); transform:translateY(-1px); }
.course-card__btn--outline{ background:var(--white); color:var(--primary-blue); border:1.5px solid var(--primary-blue); }
.course-card__btn--outline:hover{ background:var(--primary-blue); color:var(--white); }


/* ═══════════════════ Career Paths — animated grid (replaces old carousel) ═══════════════════ */
.goals__grid-new{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  max-width:1360px; margin:0 auto;
}
.goal-tile{ position:relative; }
/* Cards are white again (not blue) now that .goals itself has a full
   primary-blue backdrop (see .goals::before above) — white cards on a
   blue section is the correct 60% blue / 30% white / 10% yellow reading;
   blue-on-blue (blue cards on a blue section) would have erased the
   cards' own contrast/hierarchy against their background. */
.goal-tile a{
  display:flex; flex-direction:column; height:100%;
  background:var(--white); border:1px solid transparent; border-radius:var(--radius-lg);
  padding:22px 20px; text-decoration:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.goal-tile a:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.25); }
.goal-tile__icon{
  width:46px; height:46px; border-radius:13px; background:var(--primary-blue);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.goal-tile__icon i{ color:var(--yellow); font-size:19px; transition:color .25s var(--ease); }
.goal-tile a:hover .goal-tile__icon{ background:var(--yellow); transform:rotate(-6deg) scale(1.06); }
.goal-tile a:hover .goal-tile__icon i{ color:var(--navy-anchor); }
.goal-tile h3{ font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; color:var(--navy-anchor); margin-bottom:8px; line-height:1.3; }
.goal-tile p{ font-family:'Inter',sans-serif; font-size:12px; line-height:1.55; color:var(--gray500); margin-bottom:16px; flex:1; }
.goal-tile__cta{ display:flex; align-items:center; gap:7px; font-family:'Inter',sans-serif; font-weight:700; font-size:12px; color:var(--primary-blue); }
.goal-tile__cta i{ font-size:10px; transition:transform .25s var(--ease); }
.goal-tile a:hover .goal-tile__cta i{ transform:translateX(3px); }
.goal-tile__tag{
  position:absolute; top:-11px; left:20px; z-index:2;
  background:var(--yellow); color:var(--navy-anchor);
  font-family:'Inter',sans-serif; font-weight:700; font-size:9.5px; letter-spacing:.03em;
  padding:5px 12px; border-radius:999px; box-shadow:0 4px 10px rgba(254,218,37,.35);
}
/* Featured ("Most in-demand") card keeps a navy fill so it visually leads
   the grid, matching how it looked before — every other card stays
   white per the ratio above. */
.goal-tile--featured a{ background:var(--navy-anchor); }
.goal-tile--featured .goal-tile__icon{ background:var(--yellow); }
.goal-tile--featured .goal-tile__icon i{ color:var(--navy-anchor); }
.goal-tile--featured h3{ color:var(--white); }
.goal-tile--featured p{ color:rgba(255,255,255,.72); }
.goal-tile--featured .goal-tile__cta{ color:var(--yellow); }

/* Per-card accent — each non-featured card's icon-chip (not the whole
   card) picks a different brand-blue shade, so the row of white cards
   still reads as varied rather than 7 identical tiles. */
.goal-tile--navy .goal-tile__icon{ background:var(--navy-anchor); }
.goal-tile--navy .goal-tile__cta{ color:var(--navy-anchor); }
.goal-tile--indigo .goal-tile__icon{ background:var(--indigo-700); }
.goal-tile--indigo .goal-tile__cta{ color:var(--indigo-700); }
.goal-tile--accentBlue .goal-tile__icon{ background:var(--accent-blue); }
.goal-tile--accentBlue .goal-tile__cta{ color:var(--accent-blue); }

@media (max-width:1100px){ .goals__grid-new{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .goals__grid-new{ grid-template-columns:1fr; } }

/* ---------- "Explore Your Career Fit" widget ---------- */
.career-explorer__tabs{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  max-width:1360px; margin:0 auto 28px;
}
.career-explorer__tab{
  font-family:'Inter',sans-serif; font-weight:600; font-size:13px;
  color:var(--white); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  padding:10px 18px; border-radius:999px; cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.career-explorer__tab:hover{ border-color:rgba(255,255,255,.4); }
.career-explorer__tab.is-active{ background:var(--yellow); border-color:var(--yellow); color:var(--navy-anchor); }

.career-explorer__panel{
  max-width:1360px; margin:0 auto;
  background:var(--white); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:36px; display:grid; grid-template-columns:1.05fr 1fr; gap:36px;
  min-height:460px; align-items:start;
}
@media (max-width:860px){ .career-explorer__panel{ grid-template-columns:1fr; padding:24px; min-height:0; } }

.career-explorer__left{ min-height:100%; padding-right:24px; border-right:1px solid var(--gray150); }
@media (max-width:860px){ .career-explorer__left{ padding-right:0; border-right:none; padding-bottom:24px; border-bottom:1px solid var(--gray150); } }

.career-explorer__title{ font-family:'Poppins',sans-serif; font-weight:700; font-size:19px; color:var(--navy-anchor); margin-bottom:4px; }
.career-explorer__desc{ font-family:'Inter',sans-serif; font-size:12.5px; color:var(--gray500); line-height:1.6; margin-bottom:18px; }

.career-explorer__label{
  font-family:'Roboto Mono',monospace; font-size:10.5px; letter-spacing:.08em; font-weight:700;
  color:var(--primary-blue); margin-bottom:10px;
}
.career-explorer__roles{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.career-explorer__role{
  display:flex; align-items:center; gap:10px;
  font-family:'Inter',sans-serif; font-size:12.5px; color:#374151; font-weight:600;
}
.career-explorer__role-pill{
  font-weight:700; font-size:11.5px; padding:5px 11px; border-radius:999px; white-space:nowrap;
}

.career-explorer__stats{ display:flex; gap:26px; padding-top:16px; border-top:1px solid var(--gray150); margin-bottom:18px; }
.career-explorer__stat-value{ font-family:'Poppins',sans-serif; font-weight:800; font-size:22px; color:var(--navy-anchor); }
.career-explorer__stat-value--growth::before{ content:"↑ "; color:var(--success); }
.career-explorer__stat-value--growth{ color:var(--success); }
.career-explorer__stat-label{ font-family:'Inter',sans-serif; font-size:10.5px; color:#9ca3af; margin-top:2px; }

.career-explorer__testimonial{
  background:var(--surface-bg); border-radius:var(--radius-def); padding:14px 16px;
}
.career-explorer__testimonial-label{
  font-family:'Roboto Mono',monospace; font-size:9.5px; letter-spacing:.08em; font-weight:700;
  color:var(--primary-blue); margin-bottom:8px; display:flex; align-items:center; gap:6px;
}
.career-explorer__testimonial-text{
  font-family:'Inter',sans-serif; font-size:12px; color:#374151; line-height:1.6; font-style:italic; margin-bottom:8px;
}
.career-explorer__testimonial-author{ display:flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-size:11px; color:var(--gray500); font-weight:600; }
.career-explorer__stars i{ color:var(--yellow); font-size:11px; margin-right:1px; }

.career-explorer__right{ min-height:280px; }
.career-explorer__hiring{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:22px; }
.career-explorer__hiring-logo{ height:26px; max-width:90px; object-fit:contain; opacity:.85; }
.career-explorer__hiring-name{
  font-family:'Inter',sans-serif; font-weight:700; font-size:12px; color:var(--gray500);
  background:var(--surface-bg); padding:6px 12px; border-radius:999px;
}

.career-explorer__courses{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
@media (max-width:540px){ .career-explorer__courses{ grid-template-columns:1fr; } }
.career-explorer__course{
  display:block; text-decoration:none;
  border:1px solid var(--gray150); border-radius:var(--radius-def);
  padding:18px; transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.career-explorer__course:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--primary-blue); }
.career-explorer__course-icon{
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary-blue); color:var(--white); font-size:16px;
  margin-bottom:14px;
}
.career-explorer__course-name{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; color:var(--primary-blue); margin-bottom:8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.career-explorer__course-badge{
  display:inline-block; font-family:'Inter',sans-serif; font-weight:700; font-size:10.5px;
  color:var(--navy-anchor); background:var(--yellow);
  padding:4px 11px; border-radius:999px; margin-bottom:10px;
}
.career-explorer__course-desc{
  font-family:'Inter',sans-serif; font-size:11.5px; color:var(--gray500); line-height:1.55; margin-bottom:12px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.career-explorer__course-explore{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:12px; color:var(--primary-blue);
}
.career-explorer__course-explore i{ font-size:10px; }

.career-explorer__explore-all{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:12px;
  color:var(--primary-blue); text-decoration:none;
}
.career-explorer__explore-all:hover{ text-decoration:underline; }

/* ---------- bottom features strip ---------- */
.goals__features{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  max-width:1360px; margin:36px auto 0;
  background:var(--white); border:1px solid var(--gray150); border-radius:var(--radius-lg);
  padding:28px 32px;
}
.goals__feature{ display:flex; align-items:flex-start; gap:14px; min-width:0; }
.goals__feature > div{ min-width:0; }
.goals__feature-icon{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.goals__feature-icon--blue{ background:rgba(3,69,217,0.10); color:var(--primary-blue); }
.goals__feature-icon--yellow{ background:#FFF7DA; color:var(--navy-anchor); }
.goals__feature-icon--accentBlue{ background:rgba(0,82,204,.10); color:var(--accent-blue); }
.goals__feature-icon--indigo{ background:rgba(30,49,143,.10); color:var(--indigo-700); }
.goals__feature strong{ display:block; font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; color:var(--navy-anchor); margin-bottom:4px; }
.goals__feature p{ font-family:'Inter',sans-serif; font-size:12px; line-height:1.5; color:var(--gray500); margin:0; }

@media (max-width:900px){
  .goals__features{ grid-template-columns:repeat(2,1fr); padding:24px; gap:22px; }
}
@media (max-width:560px){
  .goals__features{ grid-template-columns:1fr; padding:20px; gap:18px; margin-top:28px; }
}

/* ═══════════════════ Why Technicia — premium icon-cards (replaces bullet columns) ═══════════════════ */
.why-tech__grid-new{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:900px; margin:0 auto;
}
.why-tech__tile{
  background:var(--white); border:1px solid transparent; border-radius:var(--radius-lg);
  padding:32px 28px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.why-tech__tile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.why-tech__tile--accent{ border-color:var(--yellow); border-width:2px; }
.why-tech__tile-icon{
  width:52px; height:52px; border-radius:14px; background:var(--primary-blue);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.why-tech__tile-icon i{ color:var(--white); font-size:21px; }
.why-tech__tile--accent .why-tech__tile-icon{ background:var(--yellow); }
.why-tech__tile--accent .why-tech__tile-icon i{ color:var(--navy-anchor); }
.why-tech__tile h3{ font-family:'Poppins',sans-serif; font-weight:700; font-size:18px; color:var(--navy-anchor); margin-bottom:18px; }
.why-tech__tile--accent h3{ color:var(--navy-anchor); }
.why-tech__tile ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.why-tech__tile li{ display:flex; align-items:flex-start; gap:10px; font-family:'Inter',sans-serif; font-size:13px; line-height:1.5; color:var(--gray500); }
.why-tech__tile--accent li{ color:var(--gray500); }
.why-tech__tile li i{ color:var(--success); font-size:11px; margin-top:3px; flex-shrink:0; }
.why-tech__tile--accent li i{ color:var(--primary-blue); }
@media (max-width:700px){ .why-tech__grid-new{ grid-template-columns:1fr; } }

/* ═══════════════════ Career Paths (Career Metro) ═══════════════════ */
.home-page section.cm-sec{ position:relative; padding:34px 4vw 0; max-width:1560px; margin:0 auto; min-height:0; display:block; } /* beats the global `.home-page section` min-height/padding */
.cm-sec::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:linear-gradient(180deg,var(--white) 0%,rgba(230,240,255,.35) 100%); z-index:-1; }
.cm{ color:var(--navy-anchor); font-family:'Inter',sans-serif; }
.cm__head{ margin-bottom:15px; padding-left:14px; }
.cm__eyebrow{ display:flex; align-items:center; gap:10px; font:600 12px 'Inter',sans-serif; letter-spacing:.12em; color:var(--primary-blue); margin-bottom:6px; }
.cm__eyebrow::after{ content:""; width:81px; height:2px; background:var(--yellow); }
.cm__head h2{ font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(26px,2.33vw,36px); line-height:1.15; letter-spacing:-.01em; margin:0; }
.cm__head p{ font:400 17px/1.5 'Inter',sans-serif; color:rgba(0,63,158,.85); margin:6px 0 0; }
.cm__sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* category tiles */
.cm__cats{ display:grid; grid-template-columns:repeat(var(--k,6),minmax(0,1fr)); gap:11px; margin-bottom:24px; }
.cm__cat{ position:relative; display:flex; align-items:center; gap:18px; text-align:left; min-height:108px; background:var(--white); border:0; border-radius:12px; padding:0 10px 0 24px; cursor:pointer; color:var(--navy-anchor); box-shadow:0 2px 14px rgba(0,63,158,.07); transition:transform .2s, box-shadow .2s, background .2s; }
.cm__cat:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,63,158,.12); }
.cm__cat:focus-visible, .cm__btn:focus-visible, .cm__item:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.cm__ico{ flex:0 0 52px; width:52px; height:52px; border-radius:10px; background:rgba(3,69,217,.10); color:var(--primary-blue); display:grid; place-items:center; font-size:24px; }
.cm__cat--warm .cm__ico{ background:rgba(254,218,37,.35); color:var(--gold); }
.cm__ctxt{ min-width:0; display:grid; gap:4px; }
.cm__cat b{ font:600 14px/1.35 'Inter',sans-serif; overflow-wrap:anywhere; }
.cm__cat small{ font:500 13px 'Inter',sans-serif; color:var(--gray700); }
.cm__cat[aria-pressed="true"]{ background:var(--navy-anchor); color:var(--white); }
.cm__cat[aria-pressed="true"] small{ color:rgba(255,255,255,.85); }
.cm__cat[aria-pressed="true"] .cm__ico{ background:var(--primary-blue); color:var(--white); }
.cm__cat[aria-pressed="true"]::before, .cm__cat[aria-pressed="true"]::after{ content:""; position:absolute; bottom:0; height:7px; background:var(--yellow); border-radius:4px 4px 0 0; }
.cm__cat[aria-pressed="true"]::before{ left:34%; width:38%; }
.cm__cat[aria-pressed="true"]::after{ left:78%; width:22%; }
/* panel */
.cm__panel{ display:grid; grid-template-columns:416px minmax(0,1fr); gap:14px; align-items:stretch; }
.cm__list{ background:var(--white); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:3px; box-shadow:0 2px 14px rgba(0,63,158,.07); }
.cm__listhead{ display:flex; align-items:center; gap:26px; padding:4px 16px 10px 9px; font:600 17px 'Inter',sans-serif; }
.cm__item{ flex:1 1 auto; max-height:92px; display:flex; align-items:center; gap:28px; text-align:left; min-height:76px; background:var(--white); border:1px solid var(--gray150); border-radius:9px; padding:0 18px 0 17px; cursor:pointer; color:var(--navy-anchor); transition:background .2s; }
.cm__item:hover{ background:rgba(230,240,255,.5); }
.cm__thumb{ flex:0 0 54px; width:54px; height:54px; border-radius:10px; background:rgba(230,240,255,.8); display:grid; place-items:center; font-size:34px; color:var(--accent-blue); }
.cm__itxt{ flex:1; min-width:0; display:grid; gap:5px; }
.cm__itxt b{ font:600 16px/1.3 'Inter',sans-serif; }
.cm__itxt small{ font:400 14px 'Inter',sans-serif; color:var(--gray700); }
.cm__itxt em{ font-style:normal; margin:0 6px; }
.cm__chev{ flex:0 0 auto; color:var(--gray500); }
.cm__item[aria-pressed="true"]{ background:var(--navy-anchor); border-color:var(--navy-anchor); color:var(--white); }
.cm__item[aria-pressed="true"] .cm__itxt small{ color:rgba(255,255,255,.88); }
.cm__item[aria-pressed="true"] .cm__chev{ color:var(--white); }
.cm__item[aria-pressed="true"] .cm__thumb{ background:var(--ice); }
.cm__help{ margin-top:auto; background:rgba(230,240,255,.75); border-radius:10px; padding:16px 16px; display:flex; gap:16px; align-items:center; }
.cm__item + .cm__help, .cm__help{ margin-top:auto; }
.cm__helpico{ flex:0 0 54px; width:54px; height:54px; border-radius:10px; background:var(--white); color:var(--accent-blue); display:grid; place-items:center; }
.cm__help > div{ display:grid; gap:5px; min-width:0; }
.cm__help b{ font:600 16px 'Inter',sans-serif; }
.cm__help span{ font:400 14.5px/1.5 'Inter',sans-serif; color:var(--gray700); }
.cm__help a{ display:inline-flex; align-items:center; gap:6px; margin-top:4px; font:600 16px 'Inter',sans-serif; color:var(--accent-blue); text-decoration:none; }
.cm__help a:hover{ text-decoration:underline; }
/* detail */
.cm__detail{ background:var(--white); border-radius:16px; display:grid; grid-template-columns:minmax(0,1fr) clamp(262px,20.7vw,318px); box-shadow:0 2px 14px rgba(0,63,158,.07); min-width:0; scroll-margin-top:88px; }
.cm__main{ padding:20px 16px 29px 29px; min-width:0; display:flex; flex-direction:column; }
.cm__lvl{ align-self:flex-start; background:var(--yellow); color:var(--navy-anchor); font:600 13px 'Inter',sans-serif; border-radius:6px; padding:5px 12px; }
.cm__dtop{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:12px; }
.cm__dtop h3{ margin:0; font:700 29px/1.2 'Inter',sans-serif; letter-spacing:-.01em; }
.cm__price{ display:flex; align-items:center; gap:8px; margin-right:-54px; position:relative; z-index:2; } /* mockup: the OFF badge overlaps the photo edge */
.cm__price b{ font:700 26px 'Inter',sans-serif; color:var(--accent-blue); }
.cm__price s{ color:var(--gray500); font:400 14px 'Inter',sans-serif; }
.cm__price em{ font:700 13.5px 'Inter',sans-serif; font-style:normal; background:var(--yellow); color:var(--navy-anchor); border-radius:6px; padding:6px 9px; white-space:nowrap; }
.cm__nofee{ font:600 13px 'Inter',sans-serif; background:var(--ice); border-radius:8px; padding:6px 12px; }
.cm__meta{ display:flex; flex-wrap:wrap; margin-top:14px; font:400 15.5px 'Inter',sans-serif; color:var(--gray700); }
.cm__meta span{ display:inline-flex; align-items:center; gap:8px; padding:0 18px; border-left:1px solid var(--gray300); }
.cm__meta span:first-child{ padding-left:0; border-left:0; }
.cm__meta svg{ color:var(--navy-anchor); }
.cm__about{ max-width:602px; margin:14px 0 0; font:400 15.5px/21px 'Inter',sans-serif; color:rgba(0,63,158,.85); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.cm__steps{ margin-top:17px; background:rgba(230,240,255,.4); border-radius:10px; padding:13px 14px 12px; }
.cm__steps h4, .cm__rolebox h4{ margin:0 0 10px; font:700 16px/20px 'Inter',sans-serif; }
.cm__track{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); position:relative; }
.cm__track::before{ content:""; position:absolute; left:calc(50%/var(--n)); right:calc(50%/var(--n)); top:11px; height:2px; background:var(--accent-blue); }
.cm__stn{ position:relative; text-align:center; padding:0 2px; animation:cm-pop .4s both; }
@keyframes cm-pop{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.cm__c{ display:grid; place-items:center; width:24px; height:24px; margin:0 auto 8px; border-radius:50%; background:var(--accent-blue); color:var(--white); font:700 13px 'Inter',sans-serif; position:relative; z-index:1; }
.cm__stn h5{ margin:0; font:600 12px/1.3 'Inter',sans-serif; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cm__tag{ display:inline-block; margin-top:7px; font:500 11px 'Inter',sans-serif; background:var(--ice); color:var(--accent-blue); border-radius:6px; padding:2px 10px; }
.cm__rolebox{ margin-top:9px; }
.cm__roles{ display:flex; flex-wrap:wrap; gap:8px 9px; }
.cm__roles span{ background:rgba(230,240,255,.45); border:1px solid var(--gray150); border-radius:8px; padding:5px 14px; font:500 14px/20px 'Inter',sans-serif; }
.cm__acts{ display:flex; gap:16px; flex-wrap:wrap; margin-top:auto; padding-top:21px; }
.cm__btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:50px; border-radius:8px; padding:0 24px; font:700 16px 'Inter',sans-serif; text-decoration:none; border:1.5px solid transparent; transition:background .2s; }
.cm__btn--y{ background:var(--yellow); color:var(--navy-anchor); } .cm__btn--y:hover{ background:var(--gold); }
.cm__btn--o{ background:var(--white); color:var(--navy-anchor); border-color:var(--accent-blue); } .cm__btn--o:hover{ background:var(--ice); }
/* right column: banner + tools */
.cm__aside{ padding:11px 10px 11px 0; display:flex; flex-direction:column; gap:8px; min-width:0; }
.cm__photo{ position:relative; flex:1 1 auto; min-height:220px; border-radius:14px; overflow:hidden; background:linear-gradient(135deg,var(--navy-anchor),var(--primary-blue)); color:var(--white); display:grid; place-items:center; font-size:56px; }
.cm__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cm__tools{ background:var(--white); border-radius:12px; padding:12px 6px 18px 12px; box-shadow:0 1px 12px rgba(0,63,158,.08); }
.cm__tools h4{ margin:0 0 10px; font:700 16px/20px 'Inter',sans-serif; }
.cm__tools > div{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; }
.cm__tools span{ display:grid; justify-items:center; gap:6px; min-width:0; }
.cm__tools .cm__tile{ width:55px; height:55px; border-radius:10px; background:rgba(230,240,255,.8); display:grid; place-items:center; font-size:34px; color:var(--accent-blue); }
.cm__tools small{ font:400 13px/18px 'Inter',sans-serif; color:var(--gray700); text-align:center; max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.cm__empty{ background:var(--white); border-radius:16px; padding:26px; display:flex; flex-direction:column; gap:8px; }
.cm__empty h4{ margin:0; font:600 18px 'Inter',sans-serif; }
.cm__empty p{ margin:0 0 6px; font:400 14px/1.5 'Inter',sans-serif; color:var(--gray700); }
.cm__skel{ display:grid; gap:14px; }
.cm__skel i{ display:block; height:140px; border-radius:18px; background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.95),rgba(255,255,255,.55)); background-size:200% 100%; animation:cm-sk 1.4s linear infinite; }
.cm__skel i:last-child{ height:420px; }
@keyframes cm-sk{ to{ background-position:-200% 0; } }
/* bottom features band */
.cm-sec .goals__features{ max-width:none; margin:22px 0 0; padding:32px 0; background:var(--ice); border:0; border-radius:0; box-shadow:0 0 0 100vmax var(--ice); clip-path:inset(0 -100vmax); gap:0; }
.cm-sec .goals__feature{ align-items:center; gap:18px; padding:0 14px; border-left:1px solid var(--gray300); }
.cm-sec .goals__feature:first-child{ border-left:0; padding-left:8px; }
.cm-sec .goals__feature-icon{ width:80px; height:80px; background:var(--white); color:var(--primary-blue); font-size:30px; box-shadow:0 2px 12px rgba(0,63,158,.08); }
.cm-sec .goals__feature strong{ font:700 18px/1.25 'Inter',sans-serif; color:var(--primary-blue); margin-bottom:6px; }
.cm-sec .goals__feature p{ font:400 14.8px/1.5 'Inter',sans-serif; color:rgba(0,63,158,.85); max-width:211px; }
@media (prefers-reduced-motion: reduce){ .cm__stn{ animation:none; } .cm__cat{ transition:none; } }
@media (max-width:1100px){
  .cm__cats{ display:flex; flex-wrap:wrap; }
  .cm__cat{ flex:1 1 calc(33.333% - 8px); }
  .cm__panel{ grid-template-columns:1fr; }
  .cm__list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
  .cm__listhead, .cm__help{ grid-column:1/-1; }
  .cm__detail{ grid-template-columns:1fr; }
  .cm__aside{ padding:0 22px 22px; flex-direction:row; align-items:stretch; }
  .cm__photo{ flex:1 1 50%; min-height:200px; }
  .cm__tools{ flex:1 1 50%; }
  .cm-sec .goals__features{ grid-template-columns:repeat(2,1fr); row-gap:24px; }
  .cm-sec .goals__feature:nth-child(3){ border-left:0; padding-left:8px; }
}
@media (max-width:760px){
  .cm-sec{ padding:36px 5vw 0; }
  .cm__cats{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-right:-5vw; padding:2px 5vw 8px 0; }
  .cm__cats::-webkit-scrollbar{ display:none; }
  .cm__cat{ flex:0 0 240px; scroll-snap-align:start; }
  .cm__main{ padding:18px 16px 20px; }
  .cm__dtop h3{ font-size:24px; }
  .cm__meta span{ padding:0 12px; font-size:14px; }
  .cm__track{ grid-template-columns:1fr; }
  .cm__track::before{ left:12px; right:auto; top:12px; bottom:12px; width:2px; height:auto; }
  .cm__stn{ text-align:left; padding:0 0 14px; display:grid; grid-template-columns:40px 1fr; column-gap:8px; align-content:start; }
  .cm__c{ margin:0; grid-row:1/3; }
  .cm__tag{ justify-self:start; margin-top:4px; }
  .cm__btn{ flex:1 1 100%; }
  .cm__aside{ flex-direction:column; padding:0 16px 18px; }
  .cm-sec .goals__features{ grid-template-columns:1fr; }
  .cm-sec .goals__feature, .cm-sec .goals__feature:nth-child(3){ border-left:0; padding:0 8px; }
}
.cm__brand{ width:1em; height:1em; display:block; }
.cm__cat b{ text-wrap:wrap; font-weight:700; }
.cm__cat{ gap:20px; }
.cm__meta{ font-weight:500; color:var(--navy-anchor); }
.cm__itxt small{ font-weight:500; }
.cm-sec .goals__feature strong{ font-size:17.5px; }
.cm-sec .goals__feature p{ font-size:15px; }
.cm-sec .goals__feature:nth-child(1) p{ max-width:200px; }
.cm-sec .goals__feature:nth-child(2) p{ max-width:190px; }
.cm-sec .goals__feature:nth-child(3) p{ max-width:190px; }
.cm-sec .goals__feature:nth-child(4) p{ max-width:216px; }
@media (max-width:1440px){
  .cm__price{ margin-right:0; }
  .cm__cat{ gap:12px; padding:0 8px 0 14px; }
  .cm__ico{ flex-basis:44px; width:44px; height:44px; font-size:20px; }
  .cm-sec .goals__feature-icon{ width:64px; height:64px; font-size:24px; }
  .cm-sec .goals__feature{ gap:14px; padding:0 10px; }
  .cm-sec .goals__feature strong{ font-size:16px; }
  .cm-sec .goals__feature p{ font-size:14px; }
}
@media (max-width:1100px){ .cm__item{ flex:0 0 auto; max-height:none; } }
@media (max-width:760px){ .cm__dtop{ flex-wrap:wrap; } }
@media (min-width:1101px){
  .cm__cats{ display:flex; gap:10px; }
  .cm__cat{ flex:1 1 auto; padding:0 18px 0 24px; }
  .cm__cat[aria-pressed="true"]{ flex-grow:1.12; }
  .cm__cat b{ font-size:13.5px; }
}
.cm__cat .cm__ico{ color:var(--navy-anchor); font-weight:900; }
.cm__cat--warm .cm__ico{ color:var(--gold); }
.cm__cat[aria-pressed="true"] .cm__ico{ color:var(--white); }

/* ---------- Why Technicia trust section (replaces "Explore What You'll Gain") ---------- */
.home-page section.wt{ min-height:0; display:block; padding:72px 60px 80px; background:var(--white); }
.wt__inner{ max-width:1260px; margin:0 auto; display:flex; flex-direction:column; gap:36px; font-family:'Inter',sans-serif; color:var(--navy-anchor); }
.wt__head{ display:flex; flex-direction:column; gap:14px; max-width:760px; }
.wt__eyebrow{ display:flex; align-items:center; gap:14px; font:600 12px 'Inter',sans-serif; letter-spacing:1.4px; color:var(--accent-blue); }
.wt__eyebrow::after{ content:""; width:76px; height:3px; background:var(--yellow); border-radius:2px; }
.wt__head h2{ margin:0; font:700 44px/1.1 'Poppins',sans-serif; letter-spacing:-.03em; color:var(--navy-anchor); }
.wt__head p{ margin:0; font:400 18px/1.55 "Inter",sans-serif; color:rgba(0,63,158,.85); }
.wt__stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.wt__stat{ background:var(--white); border:1px solid var(--ice); border-radius:16px; padding:28px; box-shadow:0 10px 30px rgba(0,63,158,.10); display:flex; flex-direction:column; gap:10px; }
.wt__stat-ico{ width:48px; height:48px; border-radius:12px; background:var(--ice); color:var(--accent-blue); display:grid; place-items:center; }
.wt__stat strong{ margin-top:6px; font:800 52px/1 'Poppins',sans-serif; letter-spacing:-.04em; color:var(--accent-blue); }
.wt__stat b{ font:600 16px 'Inter',sans-serif; color:var(--navy-anchor); }
.wt__stat p{ margin:0; font:400 14px/1.5 'Inter',sans-serif; color:rgba(0,63,158,.8); }
.wt__panel{ background:var(--ice); border-radius:24px; padding:40px 44px 36px; display:flex; flex-direction:column; gap:32px; }
.wt__panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.wt__panel-head h3{ margin:0; font:700 26px 'Poppins',sans-serif; letter-spacing:-.02em; color:var(--navy-anchor); }
.wt__panel-head span{ font:600 14px 'Inter',sans-serif; color:var(--accent-blue); }
.wt__pts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.wt__pt{ display:flex; gap:18px; padding:0 32px; }
.wt__pt:first-child{ padding-left:0; }
.wt__pt:last-child{ padding-right:0; }
.wt__pt + .wt__pt{ border-left:1px solid rgba(0,63,158,.18); }
.wt__pt-ico{ flex:0 0 56px; width:56px; height:56px; border-radius:50%; background:var(--white); color:var(--accent-blue); display:grid; place-items:center; }
.wt__pt-t{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; font:700 20px 'Poppins',sans-serif; color:var(--navy-anchor); }
.wt__pt-t em{ font:700 12px 'Inter',sans-serif; font-style:normal; background:#07BD80; color:var(--white); padding:3px 10px; border-radius:999px; }
.wt__pt p{ margin:0; font:400 15px/1.55 'Inter',sans-serif; color:rgba(0,63,158,.85); }
.wt__m{ display:none; }
.wt__acts{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.wt__btn{ display:inline-flex; align-items:center; gap:8px; min-height:44px; box-sizing:border-box; padding:13px 24px; border-radius:8px; font:700 15px 'Inter',sans-serif; cursor:pointer; text-decoration:none; transition:background .2s, transform .2s; }
.wt__btn--yellow{ background:var(--yellow); color:var(--navy-anchor); border:1px solid var(--yellow); }
.wt__btn--yellow:hover{ background:var(--gold); border-color:var(--gold); transform:translateY(-1px); }
.wt__btn--ghost{ background:var(--white); color:var(--accent-blue); border:1px solid var(--accent-blue); }
.wt__btn--ghost:hover{ background:var(--ice); }
.wt__btn:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }
@media (max-width:1100px){
  .wt__stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wt__pts{ grid-template-columns:1fr; gap:22px; }
  .wt__pt, .wt__pt:first-child, .wt__pt:last-child{ padding:0; }
  .wt__pt + .wt__pt{ border-left:0; border-top:1px solid rgba(0,63,158,.18); padding-top:22px; }
}
@media (max-width:760px){
  .wt__d{ display:none; }
  .wt__m{ display:inline; }
  .home-page section.wt{ padding:48px 20px; }
  .wt__inner{ gap:26px; }
  .wt__head h2{ font-size:30px; line-height:1.12; }
  .wt__head p{ font-size:16px; }
  .wt__stats{ gap:12px; }
  .wt__stat{ padding:18px 16px; border-radius:14px; gap:6px; }
  .wt__stat-ico, .wt__stat p{ display:none; }
  .wt__stat strong{ font-size:36px; margin-top:0; }
  .wt__stat b{ font-size:14px; }
  .wt__panel{ border-radius:20px; padding:26px 20px; gap:22px; }
  .wt__panel-head h3{ font-size:22px; line-height:1.2; }
  .wt__panel-head span{ display:none; }
  .wt__pt{ gap:14px; }
  .wt__pt-ico{ flex-basis:48px; width:48px; height:48px; }
  .wt__pt-t{ font-size:17px; gap:8px; margin-bottom:4px; }
  .wt__pt p{ font-size:14px; line-height:1.5; }
  .wt__acts{ flex-direction:column; align-items:stretch; gap:10px; }
  .wt__btn{ justify-content:center; min-height:48px; }
}

.partner-network .why-tech{ padding:80px 0 0; scroll-margin-top:90px; }
.partner-network .why-tech::before{ display:none; }

/* =====================================================================
   Home page unification — one section rhythm, one heading system, one width.
   Dark sections: hero, Placement, Partner. Everything else alternates white / Ice Blue.
   ===================================================================== */
.home-page section:not(.hero):not(.cm-sec):not(.wt){ min-height:0; display:block; padding:80px 4vw; }
.home-page section.wt{ padding-inline:4vw; }
.programs__inner, .learning-sys__inner, .placement__inner, .student-voices__inner, .skill-hunt__inner,
.partner-network__inner, .why-tech__inner, .next-move__inner, .wt__inner{ width:100%; max-width:calc(1560px - 8vw); margin-inline:auto; }

/* section backgrounds */
.home-page section.programs{ background:var(--ice); }
.home-page section.learning-sys{ background:var(--white); }
.home-page section.learning-sys::before{ display:none; }
.home-page section.student-voices{ background:var(--ice); }
.home-page section.student-voices::before{ display:none; }
.home-page section.skill-hunt{ background:var(--white); }
.home-page section.skill-hunt::before{ display:none; }
.home-page section.next-move{ background:var(--ice); }

/* heading system (left aligned, Inter eyebrow + yellow rule, Poppins 700 title) */
.programs__head, .learning-sys__head, .placement__head, .sec-head{ text-align:left; max-width:760px; margin:0 0 40px; }
.programs__eyebrow, .learning-sys__eyebrow, .placement__eyebrow, .sec-eyebrow{
  font:600 12px 'Inter',sans-serif; letter-spacing:1.4px; justify-content:flex-start; gap:14px; margin-bottom:14px; color:var(--accent-blue);
}
.sec-head .sec-eyebrow{ color:var(--accent-blue); }
.programs__eyebrow::before, .learning-sys__eyebrow::before, .placement__eyebrow::before, .sec-eyebrow::before{ display:none; }
.programs__eyebrow::after, .learning-sys__eyebrow::after, .placement__eyebrow::after, .sec-eyebrow::after{
  content:""; width:76px; height:3px; border-radius:2px; background:var(--yellow); display:inline-block;
}
.programs__head h2, .learning-sys__head h2, .placement__head h2, .sec-head h2{
  font:700 clamp(28px,2.8vw,40px)/1.12 'Poppins',sans-serif; letter-spacing:-.03em; margin:0 0 12px; color:var(--navy-anchor);
}
.programs__head p, .learning-sys__head p, .placement__head p, .sec-head p{
  font:400 clamp(15px,1.2vw,17px)/1.55 'Inter',sans-serif; color:rgba(0,63,158,.85); margin:0;
}
.cm__head h2, .wt__head h2{ font-size:clamp(28px,2.8vw,40px); line-height:1.12; letter-spacing:-.03em; }
.cm__head p, .wt__head p{ font-size:clamp(15px,1.2vw,17px); line-height:1.55; }
.cm__eyebrow::after, .wt__eyebrow::after{ width:76px; height:3px; border-radius:2px; }
.cm__eyebrow, .wt__eyebrow{ gap:14px; }
.cm__head{ padding-left:0; }
/* dark sections keep light text */
.placement__head h2, .partner-network .sec-head h2, .why-tech .sec-head h2{ color:var(--white); }
.placement__head p, .partner-network .sec-head p, .why-tech .sec-head p{ color:rgba(255,255,255,.85); }
.placement__eyebrow, .partner-network .sec-head .sec-eyebrow, .why-tech .sec-head .sec-eyebrow{ color:var(--yellow); }

/* Programs (Ice): cards/controls stay white, add depth */
.course-card{ box-shadow:0 10px 30px rgba(0,63,158,.10); border-color:var(--white); }
.programs__nav{ border-color:var(--ice); box-shadow:0 4px 14px rgba(0,63,158,.15); }
.programs__dots .programs__dot{ background:var(--gray300); }
.programs__dots .programs__dot.is-active{ background:var(--accent-blue); }
.programs__fees .sec-head{ margin-bottom:28px; }

/* Learning System (white) */
.ls2-spine::before{ border-left-color:rgba(0,63,158,.3); }
.ls2-spine::after{ border-color:var(--white); box-shadow:0 0 0 1px rgba(0,63,158,.18); }
.ls2-num{ color:var(--accent-blue); }
.ls2-content h3{ color:var(--navy-anchor); font-weight:700; }
.ls2-content p{ color:rgba(0,63,158,.85); }

/* Student Voices (Ice) */
.student-voices__note{ color:rgba(0,63,158,.7); }
.testimonial-card{ box-shadow:0 10px 30px rgba(0,63,158,.10); }

/* Skill Hunt (white) */
.skill-hunt__panel{ border-color:var(--ice); }

/* Next Move (Ice): white cards */
.next-move__card{ background:var(--white); border-color:var(--ice); box-shadow:0 10px 30px rgba(0,63,158,.10); }
.next-move__card:hover{ background:var(--white); border-color:var(--accent-blue); }
.next-move__card h3{ color:var(--navy-anchor); }
.next-move__card p{ color:rgba(0,63,158,.85); }
.next-move__card-link{ color:var(--accent-blue); }

@media (max-width:760px){
  .home-page section:not(.hero):not(.cm-sec):not(.wt){ padding:56px 4vw; }
  .home-page section.wt{ padding-inline:4vw; }
  .programs__head, .learning-sys__head, .placement__head, .sec-head{ margin-bottom:28px; }
}

.why-tech__grid-new{ max-width:none; }
.partner-network__cta-row{ text-align:left; margin-top:20px; }
.testimonial-card__stars{ display:flex; gap:3px; }
.testimonial-card__stars svg{ fill:currentColor; }

.home-page .hero-seo-h1{display:inline-flex;align-items:center;margin:0 0 18px;padding:8px 16px;border-radius:999px;border:1px solid rgba(254,218,37,.55);background:rgba(254,218,37,.12);font-family:var(--font-body,Inter,sans-serif);font-size:13px;font-weight:700;letter-spacing:.03em;color:#FEDA25}