/* ═══════════════════════════════════════════════════════════════════════
   SKILLPARKHO — STYLESHEET
   ═══════════════════════════════════════════════════════════════════════

   CONTENTS                                                    line
   ---------------------------------------------------------  ----
   0. Design tokens + base (colours, fonts, .wrap)            41
   1. HERO                                                    62
   2. TRUSTED BY                                              95
   2. AT A GLANCE                                            445
   3. YOUR PHONE IN 3 MONTHS                                 149
   4. THE RISE                                               320
   5. STUDENT STORIES                                        521
   6. ECOSYSTEM                                              670
   7. FAQs                                                   787

   HOW THIS FILE IS ORDERED
   ------------------------
   Section numbers match the order the sections appear in index.html.
   Inside each section: desktop rules first, then a RESPONSIVE block
   with the mobile overrides for that section only.

   THREE RULES THAT KEEP THIS FILE SAFE TO EDIT
   --------------------------------------------
   1. One selector, one home. Before adding a rule, search the file for
      the class first — if it already exists, edit it there. Scattered
      duplicates are how rules start silently overriding each other.

   2. Watch specificity in media queries. A media query does NOT
      automatically win. `.eco .ec-sub` (2 classes) beats `.ec-sub`
      (1 class) even inside `@media`. If a mobile override "does
      nothing", this is almost always why — match the specificity.

   3. Class names are global. `.chip` was used by two different
      sections and their styles leaked into each other. Prefix new
      classes with the section (`.fq-`, `.rise `, `.eco `).

   RUN `python3 audit.py` AFTER EDITING — it catches all three.
   ═══════════════════════════════════════════════════════════════════════ */

/* ============ TOKENS + BASE ============ */
  :root {
    --navy-deep: #0B1026; --navy: #111938; --card: #16203F; --card-line: #263056;
    --indigo: #EF4444; --indigo-soft: #F87171; --teal: #EF4444; --emerald: #EF4444;
    --coral: #EF4444; --coral-soft: #F87171;
    --text: #FFFFFF; --muted: #AAB2C5; --star: #FBBF24; --radius: 20px; --maxw: 1200px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: var(--navy-deep); color: var(--text); line-height: 1.6; overflow-x: hidden; }
  body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(760px 620px at 20% 2%, rgba(239,68,68,0.16), transparent 62%); }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

  /* shared section header (used by Trusted + Journey) */
  .head { text-align: center; container-type: inline-size; max-width: 640px; margin: 0 auto 40px; }
  .eyebrow { display: inline-block; color: var(--teal); font-weight: 600; font-size: 13px; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 14px; }
  .title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.18; letter-spacing: -0.02em; margin-bottom: 14px; text-wrap: balance; }
  .subhead { color: var(--muted); font-size: clamp(15px, 3.6vw, 16.5px); text-wrap: balance; }

  /* =====================================================================
     1. HERO
     ↳ index.html <section class="hero-section">
  ===================================================================== */
  .hero-section { }
  .hero { display: grid; grid-template-columns: 45fr 55fr; gap: 56px; align-items: center; padding: 80px 0 70px; }
  .headline { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: clamp(1.5rem, 5.2vw, 2.4rem); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 20px; text-wrap: balance; }
  .headline span { display: block; }
  .headline .accent-teal { color: var(--text); font-weight: 600; letter-spacing: -0.02em; }
  .headline .accent-grad { white-space: nowrap; color: var(--text); background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; }
  .subtext { color: var(--muted); font-size: clamp(13.5px, 3.2vw, 16px); line-height: 1.5; max-width: 620px; margin-bottom: 26px; text-wrap: balance; }
  .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
  .btn { font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; padding: 15px 26px; border-radius: 13px; border: none; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
  .btn-primary { background: linear-gradient(135deg, var(--coral), var(--coral-soft)); color: #fff; box-shadow: 0 10px 26px rgba(239, 68, 68,0.38); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(239, 68, 68,0.52); }
  .btn-ghost { background: rgba(255,255,255,0.04); color: var(--text); border: 1px solid var(--card-line); }
  .btn-ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,0.08); }
  .play-ico { width: 26px; height: 26px; border-radius: 50%; background: var(--coral); color: #FFFFFF; display: grid; place-items: center; font-size: 11px; }
  .trust { display: flex; align-items: center; gap: 12px; margin-bottom: 0; }
  .stars { color: var(--star); font-size: 18px; letter-spacing: 2px; }
  .trust-text { font-size: 14.5px; color: var(--muted); }
  .trust-text b { color: var(--text); font-weight: 600; }
  .video-wrap { position: relative; }
  .video-card { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--card-line); background: radial-gradient(120% 120% at 30% 0%, #1B2246 0%, #0E1329 60%); box-shadow: 0 30px 70px rgba(0,0,0,0.55); }
  .video-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .play-btn { position: absolute; z-index: 6; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,0.95); color: var(--indigo); display: grid; place-items: center; font-size: 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); transition: transform .2s; }
  .video-card.paused .play-btn::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); animation: pulse 2.2s ease-out infinite; }
  .play-btn:hover { transform: translate(-50%,-50%) scale(1.08); }
  @keyframes pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
  .reveal { opacity: 0; transform: translateY(18px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .d1 { animation-delay: .05s; } .d2 { animation-delay: .15s; } .d3 { animation-delay: .25s; } .d4 { animation-delay: .35s; } .d5 { animation-delay: .45s; }
  @keyframes rise { to { opacity: 1; transform: none; } }

  /* =====================================================================
     2. TRUSTED BY — company marquee + ticker
     ↳ part of <section class="trusted">
  ===================================================================== */
  .trusted { position: relative; padding: 40px 0 88px; overflow-x: clip;}
  .trusted::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(700px 380px at 50% -8%, rgba(239, 68, 68,0.14), transparent 65%); }
  .trusted .wrap { position: relative; z-index: 1; }
  .live { text-align: center; margin: 56px 0 30px; }
  .live-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(239, 68, 68,0.10); border: 1px solid rgba(239, 68, 68,0.28); color: #F87171; padding: 6px 14px; border-radius: 100px; font-size: 12.5px; font-weight: 600; margin-bottom: 16px; }
  .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); position: relative; }
  .live-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(239, 68, 68,0.5); animation: ping 1.8s ease-out infinite; }
  @keyframes ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.4); opacity: 0; } }
  .live-count { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: clamp(1.3rem, 2.8vw, 1.9rem); color: var(--text); }
  .live-count .num { color: var(--teal); }
  .ticker { margin-top: 12px; font-size: 15px; color: var(--muted); transition: opacity .4s ease; min-height: 24px; }
  .ticker b { color: var(--text); font-weight: 600; }
  .ticker .pkg { color: var(--emerald); font-weight: 600; }
  .marquee { overflow: hidden; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee-track { display: flex; width: max-content; animation: scroll 42s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .co-item { flex: 0 0 auto; height: 66px; padding: 0 40px; display: flex; align-items: center; justify-content: center; }
  .co-item img { height: 34px; width: auto; object-fit: contain; filter: grayscale(1) brightness(1.8) opacity(0.55); transition: filter .35s ease; }
  .co-item:hover img { filter: grayscale(0) brightness(1) opacity(1); }
  .co-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 22px; color: #7E88AD; white-space: nowrap; transition: color .35s ease; }
  .co-item:hover .co-name { color: #fff; }

  /* =====================================================================
     RESPONSIVE
  ===================================================================== */
  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; gap: 40px; padding: 28px 0 34px; text-align: center; }
    .cta-row, .trust { justify-content: center; }
    .subtext { margin-left: auto; margin-right: auto; }
    .hero-right { max-width: 460px; width: 100%; margin: 0 auto; }
  }
  @media (max-width: 640px) {
    .trusted { padding: 30px 0 50px; }
    .co-item { padding: 0 26px; }
    .co-name { font-size: 18px; }
  }
  @media (max-width: 480px) {
    .hero { gap: 32px; padding: 18px 0 26px; }
    .cta-row { flex-direction: column; }
    .btn { width: 100%; justify-content: center; }
    .trust-text { font-size: 13px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { animation: none; opacity: 1; transform: none; }
    .play-btn::after, .live-dot::after, .marquee-track { animation: none; }
    .ticker { transition: none; }
  }

  /* =====================================================================
     3. YOUR PHONE IN 3 MONTHS — career selector
     ↳ index.html <section class="future">
  ===================================================================== */
.future { --accent: #EF4444; position: relative; padding: 88px 0; overflow-x: clip; }
  .future::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(760px 440px at 50% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 62%); transition: background .5s ease; }
  .future .wrap { position: relative; z-index: 1; }

  .future .head { text-align: center; max-width: 100%; margin: 0 auto 36px; container-type: inline-size; }
  .future .head .subhead { max-width: 660px; margin-left: auto; margin-right: auto; }
  .future .eyebrow { display: inline-block; color: var(--teal); font-weight: 600; font-size: clamp(10px, 1.7cqi, 13px); letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 12px; }
  .future .title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 5cqi, 2rem); line-height: 1.16; letter-spacing: -0.02em; margin-bottom: 14px; text-wrap: balance; }
  /* ALWAYS one line: sized from the container's own width (cqi), so it can never overflow.
     7cqi comfortably fits this 22-character line; capped at 2rem to match .f-name. */
  .one-line { white-space: nowrap; font-size: clamp(1.5rem, 5cqi, 2rem); overflow: visible; }
  /* subhead scales from the same container, always clearly smaller than the heading */
  .future .subhead { color: var(--muted); font-size: clamp(13px, 2.3cqi, 16px); font-weight: 400; line-height: 1.55; text-wrap: balance; }

  /* ===== CAREER STORY RINGS ===== */
  .chips-shell { position: relative; margin-bottom: 40px; }
  .chips { display: flex; justify-content: center; gap: 26px; }
  .chip { display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; padding: 0; -webkit-tap-highlight-color: transparent; }

  .ring { position: relative; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; transition: transform .25s ease; }
  /* the ring stroke lives on a spinning layer */
  .ring::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg,
      color-mix(in srgb, var(--c) 55%, transparent) 0deg,
      color-mix(in srgb, var(--c) 18%, var(--card-line)) 90deg,
      var(--card-line) 180deg,
      color-mix(in srgb, var(--c) 18%, var(--card-line)) 270deg,
      color-mix(in srgb, var(--c) 55%, transparent) 360deg);
    opacity: .5; transition: opacity .35s ease;
  }
  .ring-core {
    position: relative; z-index: 1; width: calc(100% - 7px); height: calc(100% - 7px);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 14%, #1B2246), #0C1124 72%);
    display: grid; place-items: center; font-size: 30px;
    box-shadow: inset 0 0 18px rgba(0,0,0,0.5);
    transition: background .35s ease;
  }
  .chip:hover .ring { transform: translateY(-4px); }
  .chip.active .ring { transform: scale(1.1); }
  .chip.active .ring::before {
    opacity: 1;
    background: conic-gradient(from 0deg, var(--c) 0deg, color-mix(in srgb, var(--c) 20%, transparent) 130deg, var(--c) 250deg, color-mix(in srgb, var(--c) 20%, transparent) 320deg, var(--c) 360deg);
    animation: ringSpin 2.6s linear infinite;
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c) 60%, transparent));
  }
  @keyframes ringSpin { to { transform: rotate(360deg); } }

  .chip-lbl { font-weight: 600; font-size: 14px; color: var(--muted); transition: color .3s ease, transform .3s ease; white-space: nowrap; }
  .chip:hover .chip-lbl { color: var(--text); }
  .chip.active .chip-lbl { color: var(--c, var(--teal)); transform: translateY(-1px); }

  .chips-caption { text-align: center; font-size: 13px; color: var(--muted); margin-top: 16px; opacity: .8; }
  .chips-caption .tap { color: var(--teal); }

  /* ===== STAGE ===== */
  .future .stage { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center; justify-content: center; overflow-x: clip; }

  /* ---- phone ---- */
  .phone-col { display: flex; justify-content: center; min-width: 0; }
  .phone { position: relative; width: min(300px, 100%); border-radius: 38px; background: #0A0E1F; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--card-line)); box-shadow: 0 40px 90px rgba(0,0,0,0.55), 0 0 60px color-mix(in srgb, var(--accent) 14%, transparent); padding: 14px 12px 20px; transition: border-color .5s ease, box-shadow .5s ease; }
  .notch { width: 96px; height: 22px; background: #05070F; border-radius: 100px; margin: 0 auto 12px; }
  .p-time { text-align: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 38px; letter-spacing: -0.02em; }
  .p-time .ampm { font-size: 17px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
  .p-date { text-align: center; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
  .p-badge { display: block; width: fit-content; margin: 0 auto 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding: 4px 11px; border-radius: 100px; transition: color .4s, background .4s, border-color .4s; }

  .notifs { display: flex; flex-direction: column; gap: 9px; min-height: 320px; }
  .notif { background: rgba(255,255,255,0.055); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.08); border-radius: 15px; padding: 11px 13px; display: flex; gap: 10px; opacity: 0; transform: translateY(-14px) scale(.97); }
  .notif.in { animation: drop .5s cubic-bezier(.2,.8,.25,1) forwards; }
  @keyframes drop { to { opacity: 1; transform: none; } }
  .n-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 16px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
  .n-body { min-width: 0; }
  .n-top { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
  .n-title { font-weight: 600; font-size: 13px; line-height: 1.35; }
  .n-title .hl { color: var(--accent); transition: color .4s; }
  .n-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }

  /* ---- facts ---- */
  /* .facts is the measuring container — 1cqi = 1% of this panel's width.
     min-width:0 stops the nowrap text from stretching the grid column. */
  .facts { container-type: inline-size; min-width: 0; }
  .facts.swap { animation: factsIn .4s cubic-bezier(.2,.7,.2,1); }
  @keyframes factsIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
  .f-kicker { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; transition: color .4s; }
  .f-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: clamp(14px, 4.9cqi, 2rem); letter-spacing: -0.01em; margin-bottom: 8px; min-height: 1.25em; white-space: nowrap; }
  .f-tag { color: var(--muted); font-size: clamp(10px, 3.9cqi, 16.5px); margin-bottom: 24px; white-space: nowrap; }
  .f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
  .f-cell { background: var(--card); border: 1px solid var(--card-line); border-radius: 15px; padding: 15px 17px; }
  .f-cell .lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
  .f-cell .fval { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 19px; min-height: 1.5em; }
  .f-cell .fval em { font-style: normal; color: var(--accent); transition: color .4s; }
  .blk-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
  .skills { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; min-height: 80px; align-content: flex-start; }
  .skill { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: #D5DAEC; background: rgba(255,255,255,0.03); border: 1px solid var(--card-line); padding: 7px 12px; border-radius: 10px; }
  .skill::before { content: "✓"; color: var(--accent); font-weight: 700; font-size: 12px; }
  .cta { display: inline-flex; align-items: center; gap: 9px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 15.5px; cursor: pointer; padding: 14px 26px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #000)); border: none; text-decoration: none; box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 36%, transparent); transition: transform .2s, box-shadow .2s, background .4s; }
  .cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 50%, transparent); }
  .replay { margin-left: 12px; background: none; border: none; color: var(--muted); font-family: inherit; font-size: 13.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
  .replay:hover { color: var(--text); }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 860px) {
    .future { padding: 56px 0; }
    .head { margin-bottom: 26px; }

    /* story rings: all four always fit, equally spaced, fluid size */
    .chips-shell { margin: 0 0 26px; }
    .chips {
      display: grid; grid-template-columns: repeat(4, 1fr);
      justify-items: center; gap: 0; padding: 6px 0 4px;
    }
    .chip { width: 100%; }
    .chip:hover .ring { transform: none; }
    .ring { width: clamp(52px, 17vw, 70px); height: clamp(52px, 17vw, 70px); }
    .ring-core { font-size: clamp(20px, 7vw, 28px); }
    .chip-lbl { font-size: clamp(11.5px, 3.4vw, 13.5px); }
    .chips-caption { margin-top: 10px; font-size: 12.5px; }

    .future .stage { grid-template-columns: 1fr; gap: 30px; }

    /* phone: sized to feel like a phone inside a phone */
    .phone { width: min(310px, 100%); padding: 12px 10px 16px; border-radius: 34px; }
    .p-time { font-size: 32px; }
    .notifs { min-height: 0; }
    .notif { padding: 10px 12px; border-radius: 13px; }
    .n-ico { width: 32px; height: 32px; font-size: 15px; }
    .n-title { font-size: 12.5px; }
    .n-sub { font-size: 11.5px; }

    /* facts: centered, compact */
    .facts { text-align: center; }
    .facts.swap { animation: factsUp .4s cubic-bezier(.2,.7,.2,1); }
    @keyframes factsUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    .f-tag { margin-bottom: 18px; }
    .f-grid { grid-template-columns: 1fr 1fr; gap: 10px; max-width: 420px; margin: 0 auto 18px; }
    .f-cell { padding: 13px 14px; border-radius: 13px; }
    .f-cell .fval { font-size: 17px; }
    /* every career has exactly 4 skills — lock them into a tidy 2x2 block.
       Fractional columns mean a chip can never push past the panel edge. */
    .skills {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
      max-width: 380px; margin: 0 auto 20px; min-height: 0;
    }
    .skill {
      justify-content: center; text-align: center; white-space: nowrap;
      font-size: clamp(10.5px, 3.6cqi, 13px); padding: 8px 6px; gap: 6px;
    }
    .cta { width: 100%; max-width: 420px; justify-content: center; }
    .replay { display: block; margin: 14px auto 0; }
  }

  @media (max-width: 380px) {
    .phone { width: 100%; }
    .p-time { font-size: 28px; }
    .f-grid { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    .notif { opacity: 1; transform: none; }
    .notif.in, .facts.swap { animation: none; }
    .chip.active .ring::before { animation: none; }
    .chip, .phone, .f-kicker, .n-title .hl, .ring, .chip-lbl { transition: none; }
  }


    /* =====================================================================
     4. THE RISE — career growth chart + milestones
     ↳ index.html <section class="rise">
  ===================================================================== */
.rise { --accent: #EF4444; position: relative; padding: 88px 0; overflow-x: clip; }
  .rise::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(760px 440px at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%); transition: background .5s ease; }
  .rise .wrap { position: relative; z-index: 1; }

  /* header */
  .r-head { text-align: center; margin: 0 auto 40px; container-type: inline-size; }
  .r-eyebrow { display: inline-block; color: var(--teal); font-weight: 600; font-size: clamp(10px, 1.7cqi, 13px); letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 12px; }
  .r-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 5cqi, 2rem); line-height: 1.16; letter-spacing: -0.02em; margin-bottom: 12px; }
  .r-sub { color: var(--muted); font-size: clamp(13px, 2.3cqi, 16px); line-height: 1.55; max-width: 620px; margin: 0 auto; text-wrap: balance; }

  /* ===== LAYOUT ===== */
  .rise .stack { display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: stretch; }

  /* ===== CHART ===== */
  .rise .chart-box { position: relative; border-radius: 24px; padding: 26px 26px 18px; overflow: hidden;
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 65%), #0C1124;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--card-line));
    box-shadow: 0 34px 80px rgba(0,0,0,0.45); transition: border-color .5s ease; }
  .rise .chart-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; container-type: inline-size; }
  .rise .chart-lbl { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(9px, 3.7cqi, 12px); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
  .rise .chart-val { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--accent); line-height: 1.1; transition: color .5s ease; white-space: nowrap; }
  .rise .chart-val small { font-size: 13px; color: var(--muted); font-weight: 600; }
  .rise .chart-delta { font-size: clamp(9px, 3.7cqi, 12.5px); color: var(--emerald); font-weight: 600; white-space: nowrap; }

  .rise .chart-area { position: relative; width: 100%; }
  .rise svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
  .rise svg.xaxis { width: 100%; height: auto; display: block; margin-top: 4px; overflow: visible; }
  .rise .area { fill: url(#areaGrad); opacity: 0; transition: opacity .6s ease; }
  .rise .area.on { opacity: 1; }
  .rise .grid-l { stroke: rgba(255,255,255,0.05); stroke-width: 1; }
  .rise .line { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
    transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1), stroke .5s ease; filter: drop-shadow(0 3px 12px color-mix(in srgb, var(--accent) 55%, transparent)); }
  .rise .pt { fill: var(--navy-deep); stroke: var(--card-line); stroke-width: 2.5; transition: fill .4s, stroke .4s, r .3s; cursor: pointer; }
  .rise .pt.done { fill: var(--emerald); stroke: var(--emerald); }
  .rise .pt.active { fill: #fff; stroke: var(--accent); stroke-width: 3.5; }
  .rise .halo { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transition: opacity .4s; }
  .rise .halo.on { opacity: .55; animation: ring 1.9s ease-out infinite; }
  @keyframes ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.4); opacity: 0; } }
  .rise .xlbl { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10.5px; font-weight: 600; fill: #5B6684; text-anchor: middle; transition: fill .35s ease; }
  .rise .xlbl.on { fill: var(--accent); }
  .rise .xlbl.past { fill: #F87171; }
  .rise .rocket { font-size: 26px; opacity: 0; transition: opacity .5s ease, transform .8s cubic-bezier(.3,.9,.3,1); }
  .rise .rocket.on { opacity: 1; }

  /* floating tooltip on the active point */
  .rise .tip { position: absolute; pointer-events: none; transform: translate(-50%, -150%); background: var(--card); border: 1px solid var(--accent);
    border-radius: 10px; padding: 5px 11px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 600; white-space: nowrap;
    box-shadow: 0 10px 24px rgba(0,0,0,0.45); transition: left .8s cubic-bezier(.4,0,.2,1), top .8s cubic-bezier(.4,0,.2,1), border-color .5s ease; z-index: 4; }

  /* ===== SIDE CARD ===== */
  .rise .info { display: flex; flex-direction: column; border-radius: 24px; padding: 30px 30px;
    background: linear-gradient(135deg, #141A33 0%, #10152B 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--card-line));
    box-shadow: 0 30px 70px rgba(0,0,0,0.42); transition: border-color .5s ease; }
  .rise .i-step { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; transition: color .5s ease; }
  .rise .i-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; min-height: 58px; }
  .rise .i-ico { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; flex: 0 0 auto;
    background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); transition: background .5s, border-color .5s; }
  .rise .i-ico.pop { animation: pop .45s ease; }
  @keyframes pop { 0% { transform: rotate(-12deg) scale(.86); } 100% { transform: none; } }
  .rise .i-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: clamp(1.2rem, 2.5vw, 1.6rem); letter-spacing: -0.01em; overflow-wrap: break-word; min-width: 0; flex: 1 1 auto; }
  .rise .i-desc { color: var(--muted); font-size: 15.5px; margin-bottom: 18px; min-height: 3em; }
  .rise .i-pts { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; min-height: 112px; }
  .rise .i-pts li { display: flex; align-items: center; gap: 11px; font-size: 15px; color: #D5DAEC; }
  .rise .i-pts li::before { content: "✓"; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); display: grid; place-items: center; font-size: 11px; font-weight: 700; transition: background .5s, color .5s; }
  .rise .i-fade { animation: fadeUp .4s cubic-bezier(.2,.7,.2,1); }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

  .rise .i-foot { margin-top: auto; display: flex; align-items: center; gap: 12px; }
  .rise .mini-bar { flex: 1; height: 7px; border-radius: 6px; background: var(--card-line); overflow: hidden; }
  .rise .mini-fill { height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--emerald), var(--accent)); transition: width .6s cubic-bezier(.4,0,.2,1); }
  .rise .mini-txt { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 900px) {
    .rise .stack { grid-template-columns: 1fr; gap: 20px; }
    .rise .chart-box { padding: 20px 16px 14px; }
    .rise .info { padding: 26px 22px; }
  }

  @media (max-width: 640px) {
    .rise { padding: 56px 0; }
    .rise .chart-box { padding: 18px 12px 12px; border-radius: 20px; }
    .rise .chart-top { margin-bottom: 10px; }

    .rise .line { stroke-width: 4.5; }
    .rise .pt { stroke-width: 3; }

    /* 7 two-line labels can't fit a phone — the tooltip + card name the milestone instead */
    .rise svg.xaxis { display: none; }

    .rise .tip { font-size: 12px; padding: 5px 11px; transform: translate(-50%, -160%); font-weight: 700; }
    .rise .rocket { font-size: 30px; }

    /* Card was spaced for 15px text; text is 12px now, so the reserved
       heights left a big empty gap. Retuned to the new type sizes.
       The min-heights stay (smaller) so the card doesn't jump in height
       as you move between milestones with 2 vs 3 bullets. */
    .rise .info { padding: 18px 16px; }
    .rise .i-step { font-size: 10.5px; margin-bottom: 10px; }
    .rise .i-top { container-type: inline-size; min-height: 42px; margin-bottom: 10px; }
    .rise .i-ico { width: 40px; height: 40px; font-size: 19px; border-radius: 12px; }
    /* one line, always — sized from the space left beside the icon */
    .rise .i-title { white-space: nowrap; font-size: clamp(11px, 5.4cqi, 1.35rem); }
    .rise .i-desc { min-height: 2.9em; margin-bottom: 12px; }   /* 2 lines */
    .rise .i-pts { min-height: 70px; margin-bottom: 14px; }     /* 3 bullets */
  }

  @media (max-width: 380px) {
    .rise .chart-val { font-size: 1.6rem; }
    .rise .tip { font-size: 11px; }
    .rise .info { padding: 16px 14px; }
    .rise .i-ico { width: 36px; height: 36px; font-size: 17px; }
    .rise .i-top { min-height: 38px; }
    .rise .i-pts { min-height: 62px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rise .line, .area, .pt, .xlbl, .tip, .mini-fill, .i-ico { transition: none; }
    .rise .halo.on, .i-fade, .i-ico.pop { animation: none; }
  }


  /* =====================================================================
     2. AT A GLANCE — stat cards (same <section> as TRUSTED BY)
     ↳ part of <section class="trusted">
  ===================================================================== */

  /* header */
  .g-head { text-align: center; margin: 0 auto 40px; container-type: inline-size; }
  .g-eyebrow { display: inline-block; color: var(--teal); font-weight: 600; font-size: clamp(10px, 1.7cqi, 13px); letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 12px; }
  .g-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 5cqi, 2rem); line-height: 1.16; letter-spacing: -0.02em; margin-bottom: 12px;  text-wrap: balance;}
  .g-sub { color: var(--muted); font-size: clamp(13px, 2.3cqi, 16px); line-height: 1.55; max-width: 600px; margin: 0 auto; text-wrap: balance; }

  /* ===== HERO METRIC CARD ===== */
  .hero-stat { position: relative; overflow: hidden; border-radius: 24px; padding: 30px 36px; margin-bottom: 16px;
    display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center;
    background: linear-gradient(120deg, rgba(239, 68, 68,0.20) 0%, rgba(239, 68, 68,0.09) 50%, #101733 100%);
    border: 1px solid rgba(239, 68, 68,0.34);
    box-shadow: 0 26px 60px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
  .hero-stat::before { content: ""; position: absolute; top: -120%; left: 12%; width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(129,140,248,0.22), transparent 62%); filter: blur(20px); pointer-events: none; }
  .hero-stat:hover { transform: translateY(-4px); box-shadow: 0 34px 74px rgba(0,0,0,0.5), 0 0 0 1px rgba(239, 68, 68,0.35); border-color: rgba(239, 68, 68,0.55); }

  .hs-left { position: relative; z-index: 2; text-align: center; padding-right: 40px; border-right: 1px solid rgba(255,255,255,0.09); }
  .hs-emoji { font-size: 26px; line-height: 1; display: block; margin-bottom: 4px; }
  .hs-num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; line-height: 1;
    font-size: clamp(2.6rem, 6vw, 3.6rem); letter-spacing: -0.03em; white-space: nowrap;
    background: linear-gradient(120deg, #fff 20%, var(--indigo-soft) 65%, var(--teal) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .hs-lbl { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 14.5px; color: var(--text); margin-top: 6px; white-space: nowrap; }

  .hs-right { position: relative; z-index: 2; }
  .hs-desc { color: var(--muted); font-size: 15.5px; margin-bottom: 16px; }
  .hs-cta { display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 15px; cursor: pointer; border: none;
    padding: 12px 24px; border-radius: 12px; color: #fff;
    background: linear-gradient(135deg, var(--coral), var(--coral-soft));
    box-shadow: 0 10px 26px rgba(239, 68, 68,0.38); transition: transform .2s ease, box-shadow .2s ease; }
  .hs-cta:hover { transform: translateY(-2px); box-shadow: 0 15px 34px rgba(239, 68, 68,0.5); }

  /* ===== SUPPORTING CARDS ===== */
  .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .sc { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--card-line); border-radius: 18px;
    padding: 22px 16px; text-align: center;
    box-shadow: 0 20px 44px rgba(0,0,0,0.3); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
  .sc:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 55%, var(--card-line)); box-shadow: 0 28px 58px rgba(0,0,0,0.42); }
  .sc-ico { font-size: 22px; line-height: 1; margin-bottom: 9px; }
  .sc-num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: clamp(1.4rem, 3.2vw, 1.85rem); line-height: 1; color: #fff; }
  .sc-num .suf { color: var(--c); }
  .sc-lbl { color: var(--muted); font-size: 13px; margin-top: 6px; line-height: 1.35; }


  /* reveal one-after-another */
  .rise-in { opacity: 0; transform: translateY(18px); }
  .rise-in.on { animation: riseIn .55s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes riseIn { to { opacity: 1; transform: none; } }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 760px) {
    .hero-stat { grid-template-columns: 1fr; gap: 10px; padding: 22px 20px; border-radius: 20px; text-align: center; }
    .hero-stat:hover { transform: none; }
    .hs-left { padding-right: 0; padding-bottom: 10px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.09); }
    .hs-desc { font-size: 14.5px; margin-bottom: 14px; }
    .hs-cta { width: 100%; justify-content: center; }
    .grid4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .sc { padding: 20px 14px; border-radius: 17px; }
    .sc:hover { transform: none; }
    .sc-lbl { font-size: 13px; }
    .sc-ico { font-size: 23px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rise-in { opacity: 1; transform: none; }
    .rise-in.on { animation: none; }
    .sc, .hero-stat { transition: none; }
  }


  /* =====================================================================
     5. STUDENT STORIES — video testimonials
     ↳ index.html <section class="rev">
  ===================================================================== */
.rev { position: relative; padding: 88px 0; overflow-x: clip; max-width: 100vw; }
  .rev::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(900px 520px at 50% 8%, rgba(239, 68, 68,0.16), transparent 62%); }
  .rev .wrap { position: relative; z-index: 1; }

  /* header */
  .rev .r-head { text-align: center; margin: 0 auto 46px; container-type: inline-size; }
  .rev .r-eyebrow { display: inline-block; color: var(--teal); font-weight: 600; font-size: clamp(10px, 1.7cqi, 13px); letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 12px; }
  .rev .r-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; margin-bottom: 12px; margin-inline: auto;
    font-size: clamp(1.5rem, 5cqi, 2rem); }          /* desktop: always one line */
  @container (max-width: 700px) {
    .rev .r-title { white-space: normal; font-size: clamp(1.5rem, 5cqi, 2rem); text-wrap: balance; max-width: 460px; }   /* phones: wrap */
  }
  .rev .r-sub { color: var(--muted); font-size: clamp(13px, 2.3cqi, 16px); line-height: 1.55; max-width: 620px; margin: 0 auto; text-wrap: balance; }

  /* ===== STAGE ===== */
  .rev .stage { display: flex; justify-content: center; overflow-x: clip; }

  /* --- featured card --- */
  .rev .feature { position: relative; width: 100%; max-width: 900px; min-width: 0; aspect-ratio: 16/9;
    border-radius: 20px; overflow: hidden; border: 1px solid var(--card-line); background: #0C1124;
    box-shadow: 0 40px 100px rgba(0,0,0,0.6); transition: transform .35s ease, box-shadow .35s ease; }
  .rev .feature:hover { transform: scale(1.012); box-shadow: 0 50px 120px rgba(0,0,0,0.7); }
  .rev .fmedia { position: absolute; inset: 0; }
  .rev .fmedia img, .fmedia .ph, .fmedia video, .fmedia iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
  .rev .fmedia img, .fmedia .ph { transition: transform .7s ease; }
  .rev .feature:hover .fmedia img, .feature:hover .fmedia .ph { transform: scale(1.05); }

  .fswap-r { animation: swapR .6s cubic-bezier(.22,.68,.24,1); }
  .fswap-l { animation: swapL .6s cubic-bezier(.22,.68,.24,1); }
  @keyframes swapR { from { opacity: 0; transform: translateX(50px) scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes swapL { from { opacity: 0; transform: translateX(-50px) scale(.96); } to { opacity: 1; transform: none; } }

  /* YouTube-style play button */
  .rev .fplay { position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 88px; height: 62px; padding: 0; border: none; cursor: pointer; background: none;
    filter: drop-shadow(0 10px 28px rgba(0,0,0,0.5)); transition: transform .25s ease; }
  .rev .fplay .yt-bg { fill: #212121; opacity: .82; transition: fill .25s ease, opacity .25s ease; }
  .rev .feature:hover .fplay { transform: translate(-50%,-50%) scale(1.08); }
  .rev .feature:hover .fplay .yt-bg { fill: #FF0000; opacity: 1; }
  @keyframes pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }

  /* nav arrows on the featured card */
  .rev .fnav { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    background: rgba(8,11,24,0.72); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.18);
    color: #fff; display: grid; place-items: center; font-size: 17px;
    opacity: 0; transition: opacity .3s ease, background .25s ease, transform .25s ease; }
  .rev .feature:hover .fnav { opacity: 1; }
  .rev .fnav:hover { background: var(--coral); border-color: var(--coral); }
  .rev .fnav.prev { left: 14px; }
  .rev .fnav.next { right: 14px; }
  .rev .fnav.prev:hover { transform: translateY(-50%) translateX(-3px); }
  .rev .fnav.next:hover { transform: translateY(-50%) translateX(3px); }


  /* ===== FOOTER ===== */
  .rev .foot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 34px; }
  .rev .dots { display: flex; gap: 7px; }
  .rev .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--card-line); border: none; padding: 0; cursor: pointer; transition: all .3s ease; }
  .rev .dot.on { background: var(--coral); width: 24px; border-radius: 100px; }
  .rev .see-all { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 14px; color: var(--text);
    background: rgba(255,255,255,0.05); border: 1px solid var(--card-line); padding: 10px 20px; border-radius: 100px; transition: all .25s ease; }
  .rev .see-all:hover { border-color: var(--coral); background: rgba(239, 68, 68,0.15); transform: translateY(-2px); }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 860px) {
    .rev { padding: 56px 0; }
    .rev .r-head { margin-bottom: 26px; }

    /* featured video */
    .rev .feature { max-width: 100%; aspect-ratio: 16/9; border-radius: 16px; }
    .rev .feature:hover { transform: none; }
    .rev .feature:hover .fmedia img, .feature:hover .fmedia .ph { transform: none; }
    .rev .fplay { width: 72px; height: 51px; }


    /* arrows: always visible, tucked in, thumb-sized */
    .rev .fnav { opacity: 1; width: 36px; height: 36px; font-size: 14px; }
    .rev .fnav.prev { left: 8px; }
    .rev .fnav.next { right: 8px; }
    .rev .fnav:hover { transform: translateY(-50%); }

    /* preview strip: swipeable, cards peek at the edges */
    .rev .strip-shell { gap: 6px; }
    .rev .snav { width: 32px; height: 32px; font-size: 13px; }
    .rev .strip { padding: 4px 2px 8px; gap: 10px; justify-content: flex-start; }
    .rev .scard { width: 132px; border-radius: 12px; }
    .rev .scard:hover { transform: none; box-shadow: none; }
    .rev .scard .smedia img, .scard .smedia .ph { filter: grayscale(.35) brightness(.72); }
    .rev .scard.on .smedia img, .scard.on .smedia .ph { filter: grayscale(0) brightness(.92); }
    .rev .splay { opacity: 1; transform: translate(-50%,-50%) scale(1); width: 36px; height: 26px; }

    .rev .foot { margin-top: 22px; gap: 12px; }
    .rev .see-all { width: 100%; justify-content: center; }
  }

  @media (max-width: 400px) {
    .rev .fplay { width: 62px; height: 44px; }
    .rev .scard { width: 120px; }
  }

  /* ===== PREVIEW STRIP (all screens) ===== */
  .rev .strip-shell { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 18px; }
  .rev .snav { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
    background: var(--card); border: 1px solid var(--card-line); color: var(--text);
    display: grid; place-items: center; font-size: 15px;
    transition: background .25s ease, border-color .25s ease, transform .2s ease, opacity .25s ease; }
  .rev .snav:hover { background: var(--coral); border-color: var(--coral); }
  .rev .snav.prev:hover { transform: translateX(-2px); }
  .rev .snav.next:hover { transform: translateX(2px); }
  .rev .snav:disabled { opacity: .3; cursor: default; }
  .rev .snav:disabled:hover { background: var(--card); border-color: var(--card-line); transform: none; }

  .rev .strip { display: flex; gap: 12px; flex: 1 1 auto; min-width: 0;
    flex-wrap: nowrap;                       /* one row, always */
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    justify-content: safe center;            /* centered when it fits, scrollable when it doesn't */
    padding: 4px 4px 8px;
    scrollbar-width: none; }
  .rev .strip::-webkit-scrollbar { height: 0; }
  .rev .scard { position: relative; width: 158px; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; cursor: pointer;
    border: 1px solid var(--card-line); background: #0F1428; flex: 0 0 auto; scroll-snap-align: center;
    transition: transform .3s cubic-bezier(.2,.8,.25,1), border-color .3s ease, box-shadow .3s ease; }
  .rev .scard .smedia { position: absolute; inset: 0; }
  .rev .scard .smedia img, .scard .smedia .ph { width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(1) brightness(.6); transition: filter .35s ease, transform .5s ease; }
  .rev .scard:hover { transform: translateY(-5px); border-color: rgba(239, 68, 68,0.7); box-shadow: 0 18px 42px rgba(0,0,0,0.5), 0 0 26px rgba(239, 68, 68,0.18); }
  .rev .scard:hover .smedia img, .scard:hover .smedia .ph { filter: grayscale(0) brightness(.85); transform: scale(1.06); }
  .rev .scard.on { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(239, 68, 68,0.35), 0 18px 42px rgba(0,0,0,0.5); }
  .rev .scard.on .smedia img, .scard.on .smedia .ph { filter: grayscale(0) brightness(.9); }
  .rev .splay { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.85);
    width: 42px; height: 30px; opacity: 0; transition: opacity .3s ease, transform .3s ease;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }
  .rev .splay .yt-bg { fill: #212121; opacity: .85; transition: fill .25s ease; }
  .rev .scard:hover .splay { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  .rev .scard:hover .splay .yt-bg { fill: #FF0000; opacity: 1; }
  .rev .scard.on .splay { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  .rev .scard.on .splay .yt-bg { fill: #FF0000; opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .fswap-r, .fswap-l, .fplay::after { animation: none; }
    .rev .scard, .feature, .fmedia img { transition: none; }
  }

  /* ═══════════════════════════════════════════════════════════════════
     6. ECOSYSTEM — orbit of services
     ↳ index.html <section class="eco">
     ═══════════════════════════════════════════════════════════════════ */
.eco { position: relative; padding: 88px 0; overflow-x: clip; }
  .eco::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(820px 500px at 50% 45%, rgba(239, 68, 68,0.12), transparent 64%); }
  .eco .wrap { position: relative; z-index: 1; }

  .eco .ec-head { text-align: center; margin: 0 auto 40px; container-type: inline-size; }
  .eco .ec-eyebrow { display: inline-block; color: var(--teal); font-weight: 600; font-size: clamp(10px, 1.7cqi, 13px); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; }
  .eco .ec-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 5cqi, 2rem); line-height: 1.16; letter-spacing: -0.02em; margin-bottom: 12px;  text-wrap: balance;}
  @container (max-width: 620px) { .ec-title { white-space: normal; font-size: clamp(1.5rem, 5cqi, 2rem); text-wrap: balance; } }
  .eco .ec-sub { color: var(--muted); font-size: clamp(13px, 2.3cqi, 16px); line-height: 1.55; max-width: 620px; margin: 0 auto; text-wrap: balance; }

  /* ===== ORBIT SYSTEM ===== */
  .eco .system { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1; margin: 10px auto 0; }
  .eco .orbit-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.05); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; }
  .eco .orbit-ring.r1 { width: 60%; height: 60%; }
  .eco .orbit-ring.r2 { width: 96%; height: 96%; }

  .eco .lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
  .eco .conn { fill: none; stroke: #232A4A; stroke-width: 1.5; }

  /* ambient energy: every line carries dots drifting toward the hub, always on */
  .eco .conn-flow { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 16; opacity: .5;
    animation: flowIn 2.4s linear infinite; }
  @keyframes flowIn { to { stroke-dashoffset: -18; } }   /* negative = travels toward hub (start of path) */

  /* on hover the whole line lights up and the flow speeds up */
  .eco .conn-glow { fill: none; stroke-width: 2.6; stroke-linecap: round; opacity: 0; stroke-dasharray: 5 9; }
  .eco .conn-glow.live { opacity: 1; animation: dash .9s linear infinite; }
  @keyframes dash { to { stroke-dashoffset: -28; } }
  .eco .conn-flow.boost { opacity: 1; stroke-width: 2.6; animation-duration: .9s; }

  /* center hub */
  .eco .hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 5;
    width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; text-align: center;
    background: radial-gradient(circle, rgba(239, 68, 68,0.18), rgba(239, 68, 68,0.10) 60%, #0C1124 100%);
    border: 1.5px solid rgba(239, 68, 68,0.45); box-shadow: 0 0 50px rgba(239, 68, 68,0.22), inset 0 0 30px rgba(0,0,0,0.4); }
  .eco .hub::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(239, 68, 68,0.25); animation: pulse 3s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.06); opacity: .25; } }
  /* soft halo that breathes inward, as if absorbing the incoming energy */
  .eco .hub::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(239, 68, 68,0.16), transparent 68%); animation: absorb 2.4s ease-in-out infinite; }
  @keyframes absorb { 0%,100% { opacity: .35; transform: scale(1.04); } 50% { opacity: .75; transform: scale(.92); } }
  .eco .hub-inner { position: relative; z-index: 2; text-align: center; }
  .eco .hub .h-emoji { font-size: 34px; line-height: 1; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
  .eco .hub .h-txt { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.2; margin-top: 4px; padding: 0 12px; }
  .eco .hub.glow { border-color: rgba(239, 68, 68,0.8); box-shadow: 0 0 70px rgba(239, 68, 68,0.4), inset 0 0 30px rgba(0,0,0,0.4); }
  @keyframes readyPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
  .eco .pnode-orb { position: relative; }

  /* orbiting nodes */
  .eco .pnode { position: absolute; top: 50%; left: 50%; z-index: 6; width: 78px; margin: -39px 0 0 -39px;
    display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
    opacity: 0; transform: scale(.4); transition: opacity .5s ease, transform .55s cubic-bezier(.3,1.6,.5,1); }
  .eco .pnode.show { opacity: 1; transform: scale(1); }
  .eco .pnode-orb { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 23px;
    background: #0D1226; border: 2px solid var(--c); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 30%, transparent);
    transition: transform .3s ease, box-shadow .3s ease; }
  .eco .pnode-lbl { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 11.5px; text-align: center; line-height: 1.15; white-space: nowrap; color: var(--muted); transition: color .3s ease; }
  .eco .pnode:hover .pnode-orb, .pnode.active .pnode-orb { transform: scale(1.16); box-shadow: 0 0 34px color-mix(in srgb, var(--c) 60%, transparent); }
  .eco .pnode:hover .pnode-lbl, .pnode.active .pnode-lbl { color: var(--text); }

  /* dim siblings when one is active */
  .eco .system.focusing .pnode:not(.active) { opacity: .32; }
  .eco .system.focusing .pnode:not(.active) .pnode-orb { box-shadow: none; }

  /* ===== DETAIL PANEL ===== */
  .eco .panel { max-width: 620px; margin: 26px auto 0; background: var(--card); border: 1px solid var(--card-line); border-radius: 18px;
    padding: 22px 24px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
    border-left: 4px solid var(--pc, var(--teal)); transition: border-color .35s ease; min-height: 118px; }
  .eco .panel-ico { width: 58px; height: 58px; border-radius: 15px; display: grid; place-items: center; font-size: 28px; flex: 0 0 auto;
    background: color-mix(in srgb, var(--pc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--pc) 40%, transparent); transition: all .35s ease; }
  .eco .panel-body { min-width: 0; }
  .eco .panel-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 18px; margin-bottom: 8px; }
  .eco .panel-pts { list-style: none; display: flex; flex-wrap: wrap; gap: 7px 16px; }
  .eco .panel-pts li { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: #C3CAE4; }
  .eco .panel-pts li::before { content: "✓"; color: var(--pc); font-weight: 700; }
  .eco .panel-hint { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 14px; }
  .eco .panel-swap { animation: pswap .35s ease; }
  @keyframes pswap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* ===== MOBILE: keep the orbit, fitted to the screen ===== */
  @media (max-width: 720px) {
    .eco { padding: 56px 0; }
    .eco .ec-head { margin-bottom: 20px; }
    .eco .system { max-width: 380px; }              /* set precisely in JS via node radius */
    .eco .orbit-ring.r1 { width: 54%; height: 54%; }
    .eco .orbit-ring.r2 { width: 92%; height: 92%; }
    .eco .hub { width: 96px; height: 96px; }
    .eco .hub .h-emoji { font-size: 24px; }
    .eco .hub .h-txt { font-size: 10.5px; padding: 0 6px; }
    .eco .pnode { width: 58px; margin: -29px 0 0 -29px; }
    .eco .pnode-orb { width: 44px; height: 44px; font-size: 19px; }
    .eco .pnode-lbl { font-size: 9px; letter-spacing: -0.01em; }
    .eco .panel { grid-template-columns: auto 1fr; padding: 16px 15px; margin-top: 20px; min-height: 0; }
    .eco .panel-ico { width: 46px; height: 46px; font-size: 22px; border-radius: 13px; }
    .eco .panel-title { font-size: 15.5px; margin-bottom: 6px; }
    .eco .panel-pts { gap: 5px 12px; }
    .eco .panel-pts li { font-size: 12px; }
    .eco .panel-hint { font-size: 11.5px; margin-top: 10px; }
  }
  @media (max-width: 400px) {
    .eco .system { max-width: 320px; }
    .eco .pnode-lbl { font-size: 8.5px; }
  }

  @media (max-width: 720px) { .eco .conn-flow { opacity: .4; } }
  @media (prefers-reduced-motion: reduce) {
    .eco .pnode { transition: none; }
    .eco .hub::before, .hub::after, .conn-glow.live, .conn-flow { animation: none; }
    .eco .conn-flow { opacity: .3; }
  }


  /* ═══════════════════════════════════════════════════════════════════
     7. FAQs — category pills + accordion
     ↳ index.html <section class="faq">
     ═══════════════════════════════════════════════════════════════════ */

  /* ---- MOBILE: let all section headings wrap instead of clipping ---- */
  @media (max-width: 700px) {
    .title.one-line, .g-title, .ec-title, .fq-title, .r-title { white-space: normal !important; }
    .headline { font-size: clamp(1.45rem, 6.5vw, 2rem); }
  }

  /* ---- coral as the signal for action, movement and identity ---- */
  .arw { color: var(--coral); display: inline-block; transition: transform .22s ease; }
  a:hover .arw, button:hover .arw { transform: translateX(3px); }
  a { color: inherit; }

  /* ---- repeatable brand surfaces ---- */
  .glow { box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04); }

  /* ---- typing caret on the key headline line ---- */
  .headline .accent-teal { white-space: nowrap; min-height: 1.2em; }
  .headline .accent-teal > span { display: inline; }
  #typeWord { display: inline; white-space: pre; color: var(--coral); font-weight: 700; font-size: 1.06em; letter-spacing: -0.03em; }
  .headline .caret { display: inline-block; }
  .caret { display: inline-block; width: 3px; height: 1em; margin-left: 2px;
    background: var(--coral); vertical-align: -0.14em; animation: caretBlink 1s step-end infinite; }
  @keyframes caretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .caret { animation: none; opacity: 0; } }

  /* ---- hero video: thumbnail pulled from YouTube ---- */
  .yt-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 1; }
  .video-card.playing .yt-thumb { display: none; }
  .video-card.playing .play-btn { opacity: 0; }
  .video-card.playing:hover .play-btn, .video-card.paused .play-btn { opacity: 1; }
  .play-btn { transition: transform .2s, opacity .25s; font-size: 15px; letter-spacing: 1px; }
  .video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 5; }

  @media (max-width: 520px) {
    .headline .accent-grad { font-size: 0.92em; }
    .headline .accent-teal { font-size: 0.96em; }
  }

  
  @media (max-width: 900px) {
    .subtext .brk, .subtext br.brk { display: none; }
    .subtext { max-width: 100%; font-size: 12px; line-height: 1.45; }
  }

  @media (max-width: 400px) { .subtext { font-size: 10.8px; line-height: 1.4; letter-spacing: -0.1px; } }

  /* ===== mobile heading + subtext fitting (requested) ===== */
  @media (max-width: 700px) {
    /* shrink-to-fit descriptions, same idea as the hero subtext */
    .g-sub, .hs-desc, .subhead, .r-sub, .ec-sub, .fq-sub,
    .future .head .subhead, .rev .r-sub, .rise .i-desc, .rise .i-pts li,
    .eco .ec-sub {
      font-size: 12px; line-height: 1.45;
    }
    /* keep the ✓ circles proportional to the smaller text */
    .rise .i-pts { gap: 8px; }
    .rise .i-pts li { gap: 9px; }
    .rise .i-pts li::before { width: 18px; height: 18px; font-size: 9.5px; }
    /* controlled two-line titles: break only at m-brk, shrink each half to fit */
    .g-title, #storiesTitle {
      white-space: nowrap !important;
      font-size: clamp(19px, 7.4vw, 30px);
    }
    .g-title .m-brk, #storiesTitle .m-brk { display: inline; }
    /* single-line headings — shrink instead of wrapping */
    .future .title.one-line,
    #riseTitle,
    .faq .fq-title {
      white-space: nowrap !important;
      font-size: clamp(15px, 5.4vw, 22px);
    }
    /* single-line link */
    .rev .see-all { white-space: nowrap; font-size: 13px; }
  }
  @media (max-width: 400px) {
    .g-sub, .hs-desc, .subhead, .r-sub, .ec-sub, .fq-sub,
    .future .head .subhead, .rev .r-sub, .rise .i-desc, .rise .i-pts li,
    .eco .ec-sub {
      font-size: 10.8px; line-height: 1.4; letter-spacing: -0.1px;
    }
    .rise .i-pts li { gap: 8px; }
    .rise .i-pts li::before { width: 16px; height: 16px; font-size: 8.5px; }
    .future .title.one-line, #riseTitle, .faq .fq-title { font-size: clamp(13.5px, 5.2vw, 19px); }
    .rev .see-all { font-size: 12px; }
  }
  /* break tags off by default (desktop) */
  .m-brk { display: none; }
  @media (max-width: 700px) {
    .trust { flex-wrap: wrap; row-gap: 2px; max-width: 100%; }
    .trust .stars { flex: 0 0 auto; }
    .trust-text { white-space: normal; font-size: 12.5px; line-height: 1.3; }
  }
  @media (max-width: 380px) { .trust-text { font-size: 11.5px; } }

  @media (max-width: 700px) {
    .hero-stat { align-items: start; }
    .hero-stat .hs-num { margin-bottom: 2px; }
    .hero-stat .hs-lbl { line-height: 1.2; }
    .hero-stat .hs-right { padding-top: 0; margin-top: -2px; display: flex; flex-direction: column; }
    .hero-stat .hs-desc { margin: 0 0 16px; }
  }
  .nb { white-space: nowrap; }

  /* ---- hiring company logos: real colour on white tiles ---- */
  .marquee .co-item { display: flex; align-items: center; justify-content: center; }
  .co-item {
    background: #fff; border-radius: 12px; padding: 14px 22px; margin: 0 8px;
    height: 64px; min-width: 150px; box-sizing: border-box;
    box-shadow: 0 6px 18px rgba(0,0,0,0.28);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .co-item:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,0.4); }
  .co-logo { max-height: 34px; max-width: 132px; width: auto; height: auto; object-fit: contain; display: block; }
  /* stacked two-line wordmarks (Tech Mahindra etc): tighter padding + a taller,
     wider box so their lettering matches single-line logos optically */
  .co-item.tall { padding: 8px 18px; }
  .co-logo.tall { max-height: 46px; max-width: 148px; }
  /* very wide single-line wordmarks get more width, or their letters end up
     tiny once the 132px cap kicks in */
  .co-logo.wide { max-width: 168px; }
  /* near-square logos (wordmark + big mark): the 34px height cap makes these
     read tiny next to wordmarks, so give them a taller, tighter box */
  .co-item.sq { padding: 8px 20px; }
  .co-logo.sq { max-height: 48px; max-width: 90px; }
  /* the older rule up top greyed these out — tiles are white now, so show real colour */
  .marquee .co-item img, .marquee .co-item:hover img { filter: none; height: auto; }
  .co-name { color: #1E2140; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 17px; white-space: nowrap; }
  @media (max-width: 700px) {
    .co-item { height: 54px; min-width: 120px; padding: 10px 16px; margin: 0 6px; }
    .co-logo { max-height: 28px; max-width: 104px; }
    .co-item.tall { padding: 6px 14px; }
    .co-logo.tall { max-height: 40px; max-width: 120px; }
    .co-logo.wide { max-width: 132px; }
    .co-item.sq { padding: 5px 16px; }
    .co-logo.sq { max-height: 42px; max-width: 76px; }
    .co-name { font-size: 15px; }
  }


/* === Site typography: small labels use JetBrains Mono; headings and body use Plus Jakarta Sans === */
.n-top,.pnode-lbl,.sc-lbl,.lbl,.r-eyebrow,.g-eyebrow,.eyebrow,.live-pill,.p-badge,.f-kicker,.blk-label,.chart-lbl,.i-step,.ec-eyebrow,.fq-eyebrow,.fq-rail-label{font-family:'JetBrains Mono',ui-monospace,monospace !important}

/* At-a-glance section: line icons instead of emoji */
.sc-ico svg { display:block; width:24px; height:24px; margin-inline:auto; color:#EF4444; }
.hs-emoji svg { display:block; width:34px; height:34px; margin-inline:auto; color:#FCA5A5; }
.hs-cta .arw { color:#fff; }

/* ===== At-a-glance section: solid red main result, four bold supporting stats ===== */
.glance { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:12px; align-items:stretch; }

/* Main result: a solid colour block */
.glance .hero-stat { display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; gap:16px; margin:0; padding:26px; border-radius:18px;
  border:0; background:linear-gradient(140deg,#EF4444 0%,#C81E1E 62%,#991B1B 100%);
  box-shadow:0 22px 50px -18px rgba(239,68,68,.55); text-align:left; }
.glance .hero-stat::before { top:-140px; right:-110px; left:auto; width:340px; height:340px; background:radial-gradient(circle,rgba(255,255,255,.20),transparent 68%); }
.glance .hero-stat:hover { transform:translateY(-3px); box-shadow:0 28px 58px -18px rgba(239,68,68,.7); border:0; }
.glance .hs-left { display:block; padding:0; border:0; text-align:left; }
.glance .hs-emoji { display:none; }
.glance .hs-num { font-size:68px; font-weight:800; line-height:1; letter-spacing:-.03em; margin:0; color:#fff;
  background:none; -webkit-background-clip:border-box; background-clip:border-box; -webkit-text-fill-color:#fff; }
.glance .hs-plus { color:#fff; -webkit-text-fill-color:#fff; }
.glance .hs-lbl { margin-top:6px; font-size:18px; font-weight:700; line-height:1.25; color:#fff; white-space:normal; }
.glance .hs-right { display:block; margin:0; padding:0; }
.glance .hs-desc { margin:0 0 14px; font-size:14px; line-height:1.5; color:#FFE9E9; }
.glance .hs-cta { display:inline-flex; width:auto; justify-content:center; text-align:center; padding:10px 18px; font-size:14px; font-weight:700;
  color:#B91C1C; background:#fff; box-shadow:0 10px 22px -10px rgba(0,0,0,.45); }
.glance .hs-cta:hover { background:#fff; box-shadow:0 14px 28px -10px rgba(0,0,0,.55); }
.glance .hs-cta .arw { color:#B91C1C; }

/* Supporting stats: the number does the talking */
.glance .grid4 { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:12px; }
.glance .sc { position:relative; display:block; padding:18px 56px 16px 20px; border-radius:14px; text-align:left;
  background:#111938; border:1px solid #232C52; }
.glance .sc::before { content:""; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:0 3px 3px 0; background:#EF4444; }
.glance .sc:hover { transform:translateY(-2px); border-color:rgba(239,68,68,.55); box-shadow:0 16px 36px -16px rgba(239,68,68,.4); }
.glance .sc-ico { position:absolute; top:16px; right:16px; display:grid; place-items:center; width:32px; height:32px; margin:0; border-radius:9px;
  background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.25); }
.glance .sc-ico svg { width:16px; height:16px; margin:0; color:#F87171; }
.glance .sc-num { font-size:36px; font-weight:800; line-height:1.05; letter-spacing:-.02em; color:#fff; }
.glance .sc-lbl { margin-top:6px; font-size:12.5px; font-weight:700; letter-spacing:0; color:#fff; }
.glance .sc-note { margin:4px 0 0; font-size:12.5px; line-height:1.45; color:#AAB2C5; }

/* Tablets: main result on top, two columns of stats below */
@media (max-width:1023px) {
  .glance { grid-template-columns:minmax(0,1fr); }
}
/* Phones */
@media (max-width:639px) {
  .glance, .glance .grid4 { gap:10px; }
  .glance .hero-stat { padding:20px; border-radius:16px; }
  .glance .hs-num { font-size:54px; }
  .glance .hs-lbl { font-size:16px; }
  .glance .hs-desc { font-size:13px; margin-bottom:12px; }
  .glance .hs-cta { display:flex; width:100%; }
  .glance .sc { padding:14px 12px 14px 16px; border-radius:12px; }
  .glance .sc::before { top:14px; bottom:14px; }
  .glance .sc-ico { display:none; }
  .glance .sc-num { font-size:28px; }
  .glance .sc-lbl { font-size:11.5px; }
  .glance .sc-note { font-size:11.5px; }
}
@media (prefers-reduced-motion:reduce) {
  .glance .hero-stat:hover, .glance .sc:hover { transform:none; }
}

/* 'Your Only Direction Is Up' intro stays on one line from tablet size up */
@media (min-width:768px){ .rise .r-sub { max-width:none; white-space:nowrap; text-wrap:nowrap; } }

/* ===== Student video stories: homepage colour and spacing ===== */
.rev .ytt { --vs-accent:#EF4444; --vs-accent-lt:#F87171; --vs-rgb:239,68,68; --vs-panel:#16203F; --vs-line:#263056; }
.rev .r-sub { max-width:820px; }
#stories { scroll-margin-top:80px; }

/* ===== Seven milestones: stronger graph, fuller milestone card ===== */
.rise .line { stroke-width:4; transition:none; filter:drop-shadow(0 4px 10px rgba(239,68,68,.45)); }
.rise .area { transition:none; }
.rise .grid-l { stroke-dasharray:3 6; stroke:rgba(255,255,255,.08); }
.rise .pt { stroke:#46517C; fill:#0B1026; }
.rise .pt.done { fill:#EF4444; stroke:#EF4444; }
.rise .chart-lbl { font-size:12px; }
.rise .chart-val { font-size:44px; font-weight:800; letter-spacing:-.02em; margin-top:4px; }
.rise .chart-val small { font-size:18px; margin-left:2px; }
.rise .chart-delta { font-size:13px; padding:5px 11px; border-radius:999px; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); color:#F87171; align-self:flex-start; }
.rise .xlbl { font-size:11.5px; fill:#8A94B0; cursor:pointer; }
.rise .xlbl:hover { fill:#fff; }
.rise .xlbl.on { fill:#fff; font-weight:700; }

.rise .info { padding:26px; }
.rise .i-step { margin-bottom:12px; }
.rise .i-top { min-height:0; margin-bottom:10px; }
.rise .i-ico { width:48px; height:48px; color:#F87171; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); }
.rise .i-ico svg { width:24px; height:24px; display:block; }
.rise .i-title { font-size:24px; line-height:1.2; }
.rise .i-desc { font-size:15px; line-height:1.5; min-height:3em; margin-bottom:14px; }
.rise .i-label { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.rise .i-pts { gap:8px; min-height:0; margin-bottom:18px; }
.rise .i-pts li { padding:9px 12px; border-radius:10px; font-size:14px; font-weight:500; color:#E6E9F5; background:rgba(255,255,255,.03); border:1px solid var(--card-line); }
.rise .i-foot { flex-direction:column; align-items:stretch; gap:12px; }
.rise .i-steps { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.rise .i-seg { height:16px; padding:6px 0; border:0; border-radius:0; background:transparent; cursor:pointer; position:relative; }
.rise .i-seg::after { content:""; position:absolute; left:0; right:0; top:5px; height:6px; border-radius:6px; background:var(--card-line); transition:background .3s ease; }
.rise .i-seg.fill::after { background:#EF4444; }
.rise .i-seg:hover::after { background:#F87171; }
.rise .i-next { align-self:flex-start; padding:0; border:0; background:none; cursor:pointer; font:700 14px/1.4 'Plus Jakarta Sans',sans-serif; color:#F87171; }
.rise .i-next span { display:inline-block; transition:transform .2s ease; }
.rise .i-next:hover { color:#fff; }
.rise .i-next:hover span { transform:translateX(3px); }
@media (max-width:640px) {
  .rise .chart-val { font-size:34px; }
  .rise .chart-val small { font-size:15px; }
  .rise .chart-delta { font-size:11px; padding:4px 9px; }
  .rise .info { padding:18px 16px; }
  .rise .i-ico { width:40px; height:40px; }
  .rise .i-ico svg { width:20px; height:20px; }
  .rise .i-title { font-size:clamp(17px,5.4cqi,21px); }
  .rise .i-desc { font-size:14px; }
  .rise .i-pts { min-height:0; margin-bottom:14px; }
  .rise .i-pts li { padding:8px 10px; font-size:13px; gap:9px; }
  .rise .i-seg { height:22px; }
  .rise .i-seg::after { top:8px; }
}

/* Line icons that replaced the emoji: they follow each box's size */
.ring-core svg, .n-ico svg, .h-emoji svg, .pnode-orb svg, .panel-ico svg, .cat-ico svg, .chip-ico svg { width:1.05em; height:1.05em; display:block; }
.ring-core, .n-ico, .h-emoji, .pnode-orb, .panel-ico, .cat-ico, .chip-ico { color:#F87171; }

/* ===== All homepage section headings: one size, one spacing ===== */
.g-title, .future .title, .rise .r-title, .rev .r-title, .eco .ec-title, .faq .fq-title {
  font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:700 !important; font-size:32px !important; line-height:1.16 !important; letter-spacing:-.02em !important;
  margin:0 auto 12px !important; white-space:normal !important; text-wrap:balance; color:#fff; }
.g-sub, .future .subhead, .rise .r-sub, .rev .r-sub, .eco .ec-sub, .faq .fq-sub {
  font-size:16px !important; font-weight:400 !important; line-height:1.55 !important; color:var(--muted) !important; margin-left:auto; margin-right:auto; }
.g-sub, .future .subhead, .rev .r-sub, .eco .ec-sub, .faq .fq-sub { max-width:760px !important; }
.g-head, .future .head, .rise .r-head, .rev .r-head, .eco .ec-head, .faq .fq-head { margin-bottom:36px !important; }
.g-eyebrow, .future .eyebrow, .r-eyebrow, .ec-eyebrow, .fq-eyebrow { margin-bottom:12px !important; }
.faq { padding-top:88px; }
@media (max-width:767px) {
  .g-title, .future .title, .rise .r-title, .rev .r-title, .eco .ec-title, .faq .fq-title { font-size:24px !important; line-height:1.2 !important; }
  #futureTitle, #riseTitle, #storiesTitle { white-space:normal !important; }
  .g-sub, .future .subhead, .rise .r-sub, .rev .r-sub, .eco .ec-sub, .faq .fq-sub { font-size:14px !important; }
  .g-head, .future .head, .rise .r-head, .rev .r-head, .eco .ec-head, .faq .fq-head { margin-bottom:24px !important; }
  .faq { padding-top:56px; }
}

/* Explore Courses lands here: leave room for the fixed header. Its arrow stays visible on the red button. */
#future { scroll-margin-top:60px; }
.hero-section .btn-primary .arw { color:#fff; }

/* Choose your future: the longer course names can wrap in the big title */
.future .f-name { white-space:normal; }

/* Ecosystem circle: smaller on laptops and larger screens */
.eco .hub .h-emoji svg { margin:0 auto; }
@media (min-width:721px) {
  .eco .ec-head { margin-bottom:20px; }
  .eco .system { max-width:440px; margin-top:0; }
  .eco .hub { width:116px; height:116px; }
  .eco .hub .h-emoji { font-size:24px; }
  .eco .hub .h-txt { font-size:12px; padding:0 8px; }
  .eco .pnode-orb { width:46px; height:46px; font-size:19px; }
  .eco .pnode-lbl { font-size:11px; }
}
/* Ecosystem details: same card style as the milestones, beside the circle */
.eco-stage { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; justify-items:center; }
.eco .eco-stage .system { margin:0 auto; }
.eco .panel { display:flex; flex-direction:column; align-items:stretch; text-align:left; gap:0; width:100%; max-width:560px; min-height:0; margin:0; padding:20px 22px 16px; border-radius:24px;
  background:linear-gradient(135deg,#141A33 0%,#10152B 100%); border:1px solid color-mix(in srgb,#EF4444 26%,var(--card-line)); box-shadow:0 30px 70px rgba(0,0,0,.42); }
.eco .panel-step { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; font-weight:600; letter-spacing:.14em; color:#EF4444; margin-bottom:10px; }
.eco .panel-top { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.eco .panel-ico { width:40px; height:40px; border-radius:12px; font-size:19px; color:#F87171; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); }
.eco .panel-title { font-size:21px; line-height:1.2; margin:0; }
.eco .panel-desc { font-size:14px; line-height:1.45; min-height:2.9em; color:var(--muted); margin:0 0 10px; }
.eco .panel-pts { flex-direction:column; flex-wrap:nowrap; gap:6px; margin:0 0 12px; }
.eco .panel-pts li { gap:9px; padding:5px 10px; border-radius:10px; font-size:13.5px; font-weight:500; color:#E6E9F5; background:rgba(255,255,255,.03); border:1px solid var(--card-line); }
.eco .panel-pts li::before { flex:0 0 auto; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:10px; color:#EF4444; background:rgba(239,68,68,.2); }
.eco .panel-foot { display:flex; align-items:center; gap:14px; margin-top:auto; }
.eco .panel-steps { flex:1; min-width:0; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; }
.eco .panel-seg { position:relative; height:16px; padding:0; border:0; background:transparent; cursor:pointer; }
.eco .panel-seg::after { content:""; position:absolute; left:0; right:0; top:5px; height:6px; border-radius:6px; background:var(--card-line); transition:background .3s ease; }
.eco .panel-seg.fill::after { background:#EF4444; }
.eco .panel-seg:hover::after { background:#F87171; }
.eco .panel-next { flex:none; padding:0; border:0; background:none; cursor:pointer; white-space:nowrap; font:700 13px/1.4 'Plus Jakarta Sans',sans-serif; color:#F87171; }
.eco .panel-next span { display:inline-block; transition:transform .2s ease; }
.eco .panel-next:hover { color:#fff; }
.eco .panel-next:hover span { transform:translateX(3px); }
@media (min-width:960px) {
  .eco-stage { grid-template-columns:440px minmax(0,460px); justify-content:center; align-items:center; gap:48px; justify-items:stretch; }
}
@media (max-width:720px) {
  .eco .panel { padding:16px 14px; border-radius:20px; }
  .eco .panel-title { font-size:18px; }
  .eco .panel-pts li { font-size:13px; }
  .eco .panel-foot { flex-direction:column; align-items:stretch; gap:8px; }
  .eco .panel-next { align-self:flex-start; }
  .eco .panel-seg { height:22px; }
  .eco .panel-seg::after { top:8px; }
}

/* Seven milestones: shorter cards */
.rise .chart-box { padding:20px 22px 14px; }
.rise .chart-top { margin-bottom:0; }
.rise .chart-val { font-size:36px; margin-top:2px; }
.rise .chart-val small { font-size:15px; }
.rise .info { padding:20px 22px 16px; }
.rise .i-step { margin-bottom:10px; }
.rise .i-top { margin-bottom:6px; }
.rise .i-ico { width:40px; height:40px; border-radius:12px; }
.rise .i-ico svg { width:20px; height:20px; }
.rise .i-title { font-size:21px; }
.rise .i-desc { font-size:14px; line-height:1.45; min-height:0; margin-bottom:10px; }
.rise .i-label { display:none; }
.rise .i-pts { gap:6px; margin-bottom:12px; }
.rise .i-pts li { padding:5px 10px; font-size:13.5px; gap:9px; }
.rise .i-pts li::before { width:18px; height:18px; font-size:10px; }
.rise .i-foot { flex-direction:row; align-items:center; gap:14px; }
.rise .i-steps { flex:1; min-width:0; }
.rise .i-next { align-self:center; flex:none; font-size:13px; white-space:nowrap; }
@media (max-width:640px) {
  .rise .chart-box { padding:16px 12px 10px; }
  .rise .chart-val { font-size:30px; }
  .rise .info { padding:16px 14px; }
  .rise .i-title { font-size:clamp(16px,5.4cqi,19px); }
  /* smallest phones: a long card title wraps onto 2 lines instead of being cut off */
  .rise .i-title { white-space:normal; }
  .rise .i-foot { flex-direction:column; align-items:stretch; gap:8px; }
  .rise .i-next { align-self:flex-start; }
}

/* ===== Career paths: narrow salary box, wide box for the list of companies ===== */
.future .f-grid { grid-template-columns:minmax(0,1fr) minmax(0,2.6fr); }
.future #fCos { font-size:15px; font-weight:600; line-height:1.5; }
@media (max-width:720px) {
  .future .f-grid { grid-template-columns:minmax(0,1fr); max-width:none; }
  .future #fCos { font-size:14px; }
}

/* Hero heading on phones and tablets (single-column hero, up to 900px):
   grows with the screen so it fills the width the same way it does at 320px. */
@media (max-width: 900px) {
  .hero-left h1.headline { font-size: 8.1vw !important; }
}

/* ===== Phones and tablets (up to 900px): the whole page grows with the screen =====
   Measured from the 320px phone layout, so 320px looks exactly as before.
   Headings grow at the same rate as the hero heading (they keep the share of the width they have at 320px);
   labels, descriptions, buttons and tabs grow at half that rate so they stay easy to read.
   Laptops (wider than 900px) are not affected. */
@media (max-width: 900px) {
  body .hs-num, body .hs-plus { font-size: calc(54px + (100vw - 320px) * 0.16875) !important; }
  body .sc-num { font-size: calc(25.5px + (100vw - 320px) * 0.07969) !important; }
  html body .g-eyebrow, html body .future .eyebrow, html body .r-eyebrow, html body .ec-eyebrow, html body .fq-eyebrow { font-size: calc(11px + (100vw - 320px) * 0.01719) !important; }
  body .hero-left .subtext { font-size: calc(10.8px + (100vw - 320px) * 0.01688) !important; }
  body .hero-left .btn { font-size: calc(16px + (100vw - 320px) * 0.02500) !important; }
  body .hero-left .trust-text { font-size: calc(12px + (100vw - 320px) * 0.01875) !important; }
  body .g-sub, body .future .head .subhead, body .future .subhead, body .r-sub, body .ec-sub, body .fq-sub { font-size: calc(14px + (100vw - 320px) * 0.02187) !important; }
  body .hs-lbl { font-size: calc(16px + (100vw - 320px) * 0.02500) !important; }
  body .hs-desc { font-size: calc(13px + (100vw - 320px) * 0.02031) !important; }
  body .hs-cta { font-size: calc(14px + (100vw - 320px) * 0.02187) !important; }
  body .sc-lbl, body .sc-note { font-size: calc(11.5px + (100vw - 320px) * 0.01797) !important; }
  body .future .chip { font-size: calc(13.33px + (100vw - 320px) * 0.02083) !important; }
  body .chips-caption { font-size: calc(12.5px + (100vw - 320px) * 0.01953) !important; }
  body .replay, body .i-next, body .panel-next { font-size: calc(13px + (100vw - 320px) * 0.02031) !important; }
  body .rise .i-desc, body .rise .i-pts li, body .panel-desc { font-size: calc(14px + (100vw - 320px) * 0.02187) !important; }
  body .panel-title { font-size: calc(18px + (100vw - 320px) * 0.02813) !important; }
  body .ytt-side-title { font-size: calc(16.3px + (100vw - 320px) * 0.02547) !important; }
  body .ytt-seemore, body .rev .see-all { font-size: calc(14px + (100vw - 320px) * 0.02187) !important; }
  body .fq-chip { font-size: calc(12.5px + (100vw - 320px) * 0.01953) !important; }
  body .qa-q { font-size: calc(13.5px + (100vw - 320px) * 0.02109) !important; }
  body .qa-a, body .qa-a p { font-size: calc(13px + (100vw - 320px) * 0.02031) !important; }
  /* hero buttons: stacked and full width, as on phones */
  .hero-left .cta-row { flex-direction: column; align-items: stretch; }
  .hero-left .cta-row .btn { width: 100%; justify-content: center; }
  /* hero video: full width, as on phones */
  body .hero-right { max-width: none; }
  body .hv.hv--home { max-width: none; width: 100%; }

  /* Section headings look exactly like the hero heading: same size (8.1% of the screen width),
     same weight and spacing, and the same nearly full-width box, so each heading keeps
     the same line breaks from 320px to 900px. */
  html body .trusted .g-title,
  html body #futureTitle,
  html body #riseTitle,
  html body #storiesTitle,
  html body .eco .ec-title,
  html body .faq .fq-title,
  html body .trusted .live-count {
    font-size: 8.1vw !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    white-space: normal !important;
    text-wrap: balance;
    width: calc(100vw - 8px) !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw + 4px) !important;
    margin-right: 0 !important;
    text-align: center;
  }
  html body .trusted .g-title *, html body #futureTitle *, html body #riseTitle *,
  html body #storiesTitle *, html body .eco .ec-title *, html body .faq .fq-title *, html body .trusted .live-count * { font-weight: inherit; letter-spacing: inherit; }
  /* "500+ learners have" on line 1, "started their careers" on line 2, at every size */
  html body .trusted .live-count .nb { display: block; }
}
/* Phones and small tablets (single-column "Choose Your Future", up to 860px):
   course name (IT System & Infrastructure, Digital Marketing...) is extra-bold like the headings and always on ONE line.
   All 4 names share one size, set so the longest ("Graphic Design & Video Editing") just fits the width. */
@media (max-width: 860px) {
  html body #fName { font-size: calc((100vw - 8px) * 0.066) !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important;
    white-space: nowrap !important; width: calc(100vw - 8px) !important; max-width: none !important;
    margin-left: calc(50% - 50vw + 4px) !important; margin-right: 0 !important; text-align: center;
    min-height: 1.15em; display: flex; align-items: center; justify-content: center; }
}
/* Phones and tablets up to 860px: the course panel under the course name keeps the phone layout, scaled up -
   boxes, skills and button use the full width (stacked like on phones) and all text grows at the page's half rate. */
@media (max-width: 860px) {
  html body .future .f-grid { grid-template-columns: minmax(0,1fr) !important; max-width: none !important; width: 100%; margin-left: 0; margin-right: 0; }
  html body .future .skills { max-width: none !important; width: 100%; margin-left: 0; margin-right: 0; }
  html body .future .cta { max-width: none !important; width: 100%; font-size: calc(15.5px + (100vw - 320px) * 0.02422) !important; }
  html body .future .f-kicker { font-size: calc(13px + (100vw - 320px) * 0.02031) !important; }
  html body .future #fTag { font-size: calc((100vw - 48px) * 0.039) !important; }
  html body .future .f-cell .lbl { font-size: calc(11px + (100vw - 320px) * 0.01719) !important; }
  html body .future .f-cell .fval { font-size: calc(17px + (100vw - 320px) * 0.02656) !important; }
  html body .future #fCos { font-size: calc(14px + (100vw - 320px) * 0.02187) !important; }
  html body .future .blk-label { font-size: calc(12px + (100vw - 320px) * 0.01875) !important; }
  html body .future .skill { font-size: calc(10.5px + (100vw - 320px) * 0.01641) !important; }
  html body .future .replay { font-size: calc(13px + (100vw - 320px) * 0.02031) !important; }
}
/* Phones and tablets up to 900px: the ecosystem card grows as one piece and fills the width,
   like the rest of the page (label, icon, checklist grow with the title and description). */
@media (max-width: 900px) {
  html body .eco .panel { max-width: none !important; }
  html body .eco .panel-step { font-size: calc(12px + (100vw - 320px) * 0.01875) !important; }
  html body .eco .panel-ico { width: calc(40px + (100vw - 320px) * 0.06250) !important; height: calc(40px + (100vw - 320px) * 0.06250) !important; font-size: calc(19px + (100vw - 320px) * 0.02969) !important; }
  html body .eco .panel-pts li { font-size: calc(13px + (100vw - 320px) * 0.02031) !important; }
  html body .eco .panel-pts li::before { width: 1.38em !important; height: 1.38em !important; font-size: 0.77em !important; }
}
/* Tablets 431-860px: the 4 course tabs (IT, Digital, Ecommerce, Design) grow smoothly from their 430px size,
   at the page's half rate, so the round icons and labels fill their wider columns. Phones unchanged. */
@media (min-width: 431px) and (max-width: 860px) {
  html body .future .ring { width: calc(70px + (100vw - 430px) * 0.0814) !important; height: calc(70px + (100vw - 430px) * 0.0814) !important; }
  html body .future .ring-core { font-size: calc(28px + (100vw - 430px) * 0.03256) !important; }
  html body .future .chip-lbl { font-size: calc(13.5px + (100vw - 430px) * 0.0157) !important; }
  html body .future .chip { gap: calc(10px + (100vw - 430px) * 0.0116); }
}
/* Phones and tablets up to 900px: section sentences always wrap (never forced onto one line that runs off the screen) */
@media (max-width: 900px) {
  html body .hero-left .subtext, html body .trusted .g-sub, html body .future .subhead, html body .rise .r-sub,
  html body #stories .r-sub, html body .eco .ec-sub, html body .faq .fq-sub { white-space: normal !important; }
}
/* Small laptops and iPad sideways (901-1279px): "Explore Courses" and "Watch Success Stories" sit side by side in one row,
   as on larger laptops, with slightly tighter inside spacing so they fit the narrower column */
@media (min-width: 901px) and (max-width: 1279px) {
  html body .hero-left .cta-row { flex-wrap: nowrap !important; gap: 10px !important; }
  html body .hero-left .cta-row .btn { padding-left: 18px !important; padding-right: 18px !important; font-size: 15px !important; white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1023px) {
  html body .hero-left .cta-row .btn { padding-left: 15px !important; padding-right: 15px !important; font-size: 14px !important; }
}
/* Phones up to 430px: the hero sentence under the heading stays on 2 lines */
@media (max-width: 900px) {
  body .hero-left .subtext { font-size: min(calc(10.8px + (100vw - 320px) * 0.016875), calc((100vw - 4px) * 0.0255)) !important; letter-spacing: -0.1px; line-height: 1.45; }
}
/* Phones up to 430px: "Numbers only matter if they mean something..." stays on 2 lines */
@media (max-width: 900px) {
  html body .trusted .g-sub { width: calc(100vw - 8px) !important; max-width: none !important; margin-left: calc(50% - 50vw + 4px) !important; margin-right: 0 !important; font-size: min(calc(14px + (100vw - 320px) * 0.021875), calc((100vw - 8px) * 0.0300)) !important; letter-spacing: -0.1px; line-height: 1.45; text-align: center; }
}
/* Phones and tablets: "500+ Learners Placed" card and the 4 stat cards are centre-aligned */
@media (max-width: 900px) {
  body .hero-stat, body .hero-stat * { text-align: center !important; }
  body .hero-stat .hs-left, body .hero-stat .hs-right { display: flex; flex-direction: column; align-items: center; }
  body .hero-stat .hs-left > * { justify-content: center; }
  body .trusted .sc, body .trusted .sc * { text-align: center !important; }
  body .trusted .sc-num { justify-content: center; }
  /* equal space on both sides so the centre really is the centre; the small icon sits centred above the number */
  body .glance .sc { padding-left: 20px; padding-right: 20px; }
  body .glance .sc-ico { position: static; margin: 0 auto 10px; }
}
@media (max-width: 639px) {
  body .glance .sc { padding-left: 14px; padding-right: 14px; }
}
/* Phones 320-430px: stat labels ("Career Preparation", "Placement Assurance"...) stay on one line */
@media (max-width: 430px) {
  body .glance .sc { padding-left: 10px; padding-right: 10px; }
  body .glance .sc-lbl { white-space: nowrap; letter-spacing: -0.3px;
    font-size: min(calc(4.26vw - 3.9px), calc(11.5px + (100vw - 320px) * 0.01797)) !important; }
}
/* Stat numbers (90-Day,100%, 1000+, 4.8/5) never break onto 2 lines */
@media (max-width: 900px) {
  body .trusted .sc-num, body .trusted .sc-num * { white-space: nowrap; }
}
/* Small phones (below 375px): "View Learner Success Stories" button stays on one line */
@media (max-width: 374px) {
  body .trusted .hs-cta { white-space: nowrap; font-size: 12.5px !important; padding-left: 12px; padding-right: 12px; }
}
/* Phones up to 430px: "Pick a career path and watch the notifications..." stays on 2 lines */
@media (max-width: 900px) {
  html body .future .head .subhead, html body .future .subhead { width: calc(100vw - 8px) !important; max-width: none !important; margin-left: calc(50% - 50vw + 4px) !important; margin-right: 0 !important; font-size: min(calc(14px + (100vw - 320px) * 0.021875), calc((100vw - 8px) * 0.0300)) !important; letter-spacing: -0.1px; line-height: 1.45; text-align: center; }
}
/* Small phones (below 375px): small red section labels (FROM LEARNING TO LANDING A JOB...) stay on one line */
@media (max-width: 374px) {
  html body .g-eyebrow, html body .future .eyebrow, html body .r-eyebrow, html body .ec-eyebrow, html body .fq-eyebrow { white-space: nowrap !important; letter-spacing: 1.3px !important; }
}
/* Phones up to 430px: "Seven milestones. Watch what happens..." stays on 2 lines */
@media (max-width: 900px) {
  html body .rise .r-sub { width: calc(100vw - 8px) !important; max-width: none !important; margin-left: calc(50% - 50vw + 4px) !important; margin-right: 0 !important; font-size: min(max(14px, calc(14px + (100vw - 430px) * 0.0277)), calc((100vw - 8px) * 0.044)) !important; letter-spacing: -0.1px; line-height: 1.45; text-align: center; }
}
/* Smallest phones (320-339px): milestone card titles ("Learn Through Live Classes"...) stay on one line, all 7 the same size */
@media (max-width: 339px) {
  html body .rise .i-title { white-space: nowrap !important; font-size: 14.4px !important; }
}
/* Phones up to 430px: "Every learner has a unique journey..." stays on 2 lines */
@media (max-width: 900px) {
  html body #stories .r-sub { width: calc(100vw - 8px) !important; max-width: none !important; margin-left: calc(50% - 50vw + 4px) !important; margin-right: 0 !important; font-size: min(calc(14px + (100vw - 320px) * 0.021875), calc((100vw - 8px) * 0.0225)) !important; letter-spacing: -0.1px; line-height: 1.45; text-align: center; }
}
/* Phones up to 430px: "Not a list of features — a system..." stays on 2 lines */
@media (max-width: 900px) {
  html body .eco .ec-sub { width: calc(100vw - 8px) !important; max-width: none !important; margin-left: calc(50% - 50vw + 4px) !important; margin-right: 0 !important; font-size: min(calc(14px + (100vw - 320px) * 0.021875), calc((100vw - 8px) * 0.026)) !important; letter-spacing: -0.1px; line-height: 1.45; text-align: center; }
}
/* Phones up to 430px: "Frequently Asked Questions" stays on one line */
@media (max-width: 900px) {
  html body .faq .fq-title { white-space: nowrap !important; font-size: calc((100vw - 8px) * 0.070) !important; }
}
/* Phones up to 430px: "Answers on our programs, placements..." stays on 2 lines */
@media (max-width: 900px) {
  html body .faq .fq-sub { width: calc(100vw - 8px) !important; max-width: none !important; margin-left: calc(50% - 50vw + 4px) !important; margin-right: 0 !important; font-size: min(max(14px, calc(14px + (100vw - 430px) * 0.0277)), calc((100vw - 8px) * 0.035)) !important; letter-spacing: -0.1px; line-height: 1.45; text-align: center; }
}
/* Small phones (below 375px): stars and "500+ learners placed · 4.8/5 average rating" stay on one row */
@media (max-width: 374px) {
  body .hero-left .trust { flex-wrap: nowrap; gap: 2px 8px; }
  body .hero-left .trust .stars { font-size: 15px !important; flex: none; }
  body .hero-left .trust-text { font-size: 11.2px !important; white-space: nowrap; }
}

/* >>> desktop hero balance */
/* Desktop hero (1024px+): text and video share the width almost evenly (text 1.1 : video 1), the video fills
   its column, and the heading and sentence grow with their column so neither side leaves empty space. */
@media (min-width: 1024px) {
  html body .hero-section .wrap.hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important; }
  html body .hero-section .wrap.hero > * { grid-column: auto !important; }
  html body .hero-section .wrap.hero > :first-child { container-type: inline-size; }
  html body .hero-section .wrap.hero > :first-child h1 { font-size: calc(100cqw / 13.3) !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; }
  html body .hero-section .wrap.hero > :first-child .subtext { font-size: clamp(18px, calc(100cqw / 38), 26px) !important; line-height: 1.6 !important; max-width: none !important; text-wrap: balance; }
  html body .hero-section .wrap.hero .hv { max-width: none !important; width: 100% !important; margin-left: 0 !important; }
}
/* <<< desktop hero balance */

/* >>> desktop career phone section */
/* "Your future" section (#future), desktop 1024px+: the phone and the career details sit together as one
   centred group (details capped at 940px wide, so cards don't stretch across the screen), and the text grows
   moderately with the screen. */
@media (min-width: 1024px) {
  html body #future .stage { grid-template-columns: auto minmax(0, 940px) !important; justify-content: center !important; align-items: center !important; column-gap: clamp(56px, 5vw, 96px) !important; }
  html body #future .phone-col { width: auto !important; }
  html body #future .f-kicker { font-size: clamp(13px, 0.85vw, 15px) !important; }
  html body #future .f-name { font-size: clamp(32px, 2.7vw, 48px) !important; line-height: 1.12 !important; }
  html body #future .f-tag { font-size: clamp(16.5px, 1.15vw, 20px) !important; }
  html body #future .lbl, html body #future .blk-label { font-size: clamp(11px, 0.75vw, 13px) !important; }
  html body #future .f-grid > * > :not(.lbl) { font-size: clamp(19px, 1.5vw, 26px) !important; }
  html body #future .f-grid .fval { font-size: clamp(15px, 1vw, 18px) !important; }
  html body #future .f-grid > * { padding: clamp(18px, 1.3vw, 24px) !important; }
  html body #future .skill { font-size: clamp(13.5px, 0.95vw, 16.5px) !important; padding: .55em .95em !important; }
  html body #future .cta { font-size: clamp(15.5px, 1vw, 17.5px) !important; padding: .9em 1.6em !important; }
  html body #future .replay { font-size: clamp(13.5px, 0.8vw, 14.5px) !important; }
}
@media (min-width: 1280px) { html body #future #phone { zoom: 1.04; } }
@media (min-width: 1440px) { html body #future #phone { zoom: 1.08; } }
@media (min-width: 1680px) { html body #future #phone { zoom: 1.12; } }
@media (min-width: 1880px) { html body #future #phone { zoom: 1.16; } }
/* <<< desktop career phone section */