/* ===========================================
       RESET
    =========================================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', sans-serif;
      background: #FAFAF8;
      color: #111;
      overflow-x: hidden;
      line-height: 1.6;
    }
    a { text-decoration: none; color: inherit; }
    ul, ol { list-style: none; }
    img { display: block; max-width: 100%; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }

    /* ===========================================
       TOKENS
    =========================================== */
    :root {
      --o:   #FF9900;
      --o2:  #FFA41B;
      --o3:  #FFB74D;
      --opa: #FFF3DC;
      --p:   #7152E9;
      --p2:  #5A3FD0;
      --ink: #0D0D0D;
      --ink2:#1C1C1C;
      --mid: #555;
      --sub: #888;
      --bg:  #FAFAF8;
      --bg2: #F3F2EE;
      --ln:  #E5E4DF;
      --white:#FFFFFF;
      --r:   10px;
      --r2:  20px;
    }

    /* ===========================================
       TYPOGRAPHY
    =========================================== */
    .syne { font-family: 'Syne', sans-serif; }
    h1 { font-family: 'Syne', sans-serif; font-weight: 800; line-height: 1.0; }
    h2 { font-family: 'Syne', sans-serif; font-weight: 700; line-height: 1.15; font-size: 40px;}
    h3 { font-family: 'Syne', sans-serif; font-weight: 600; line-height: 1.25; }
    h4 { font-family: 'Syne', sans-serif; font-weight: 600; }

    /* ===========================================
       LAYOUT
    =========================================== */
    .wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
    .wrap--wide { max-width: 1400px; margin: 0 auto; padding: 0 32px; }

    /* ===========================================
       BUTTONS
    =========================================== */
    .btn {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: 'Syne', sans-serif; font-weight: 600;
       letter-spacing: 0.02em;
      padding: 14px 28px; border-radius: 4px;
      transition: all 0.25s ease; white-space: nowrap; cursor: pointer;
    }
    .btn-fill {
      background: var(--o); color: #fff;
      font-size: 14px;
    }
    .btn-fill:hover { background: #e68800; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,153,0,.35); }
    .btn-ghost {
      background: transparent; color: var(--ink);
      border: 1.5px solid var(--ink);
    }
    .btn-ghost:hover { background: var(--ink); color: #fff; }
    .btn-ghost-white {
      background: transparent; color: #fff;
      border: 1.5px solid rgba(255,255,255,.45);
      font-size: 13px;
    }
    .btn-ghost-white:hover { background: rgba(255,255,255,.12); border-color: #fff; }
    .btn-sm { padding: 10px 20px;  }
    .btn svg { flex-shrink: 0; }

    /* ===========================================
       HERO — Full-bleed dark with big type
    =========================================== */
    #hero {
      background: var(--ink);
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      position: relative;
      overflow: hidden;
    }
    .hero-left {
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 160px 60px 80px 80px;
      position: relative; z-index: 2;
    }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      margin-bottom: 28px;
    }
    .eyebrow-line {
      width: 40px; height: 2px; background: var(--o);
    }
    .eyebrow-text {
      font-family: 'Syne', sans-serif; 
      font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--o);
    }
    .hero-h1 {
      color: #fff; margin-bottom: 0;
      font-size: 72px;
    }
    .hero-h1 em {
      font-style: normal;
      color: var(--o);
      -webkit-text-stroke: 0;
    }
    .hero-h1 .outline {
      font-style: normal;
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(255,255,255,.3);
    }
    .hero-meta {
      margin-top: 40px;
      display: flex; align-items: center; gap: 32px;
      padding-top: 32px;
      border-top: 1px solid rgba(255,255,255,.1);
    }
    .hero-meta-item { }
    .hero-meta-val {
      font-size: 24px;
      font-family: 'Syne', sans-serif; 
      font-weight: 800; color: var(--o); display: block; line-height: 1;
    }
    .hero-meta-lbl {
       color: rgba(255,255,255,.45);
      font-weight: 500; margin-top: 4px; display: block;
    }
    .hero-divider { width: 1px; height: 40px; background: rgba(255,255,255,.12); }
    .hero-actions { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }

    .hero-right {
      position: relative; z-index: 2;
      display: flex; flex-direction: column;
      justify-content: center;
      padding: 120px 80px 80px 40px;
      border-left: 1px solid rgba(255,255,255,.07);
    }
    .hero-desc {
       color: rgba(255,255,255,.6);
      line-height: 1.8; max-width: 420px; margin-bottom: 48px;
    }
    .hero-tags {
      display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px;
    }
    .hero-tag {
      padding: 6px 14px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 4px;
       font-weight: 500;
      color: rgba(255,255,255,.55);
    }
    .hero-tag.hi { background: rgba(255,153,0,.15); border-color: rgba(255,153,0,.25); color: var(--o2); }
    .hero-info-blocks {
      display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    }
    .hib {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      padding: 20px 18px;
    }
    .hib:first-child { border-radius: 10px 0 0 0; }
    .hib:nth-child(2) { border-radius: 0 10px 0 0; }
    .hib:nth-child(3) { border-radius: 0 0 0 10px; }
    .hib:last-child { border-radius: 0 0 10px 0; }
    .hib-label {  text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.3); font-weight: 600; margin-bottom: 6px; }
    .hib-val { font-family: 'Syne', sans-serif; font-weight: 700; color: #fff; }
    .hib-val span { color: var(--o); }

    /* Decorative bg shapes */
    .hero-shape-1 {
      position: absolute; top: 0; right: 0;
      width: 50%; height: 100%;
      background: linear-gradient(135deg, rgba(255,153,0,.04) 0%, transparent 60%);
      pointer-events: none;
    }
    .hero-shape-2 {
      position: absolute; bottom: -200px; left: -200px;
      width: 500px; height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(113,82,233,.07) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-ticker {
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 44px;
      background: var(--o);
      display: flex; align-items: center;
      overflow: hidden; z-index: 3;
    }
    .ticker-track {
      display: flex; align-items: center;
      animation: ticker 30s linear infinite;
      white-space: nowrap;
    }
    .ticker-item {
      display: flex; align-items: center; gap: 12px;
      padding: 0 32px;
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: #fff;
      font-size: 12px;
    }
    .ticker-dot { width: 4px; height: 4px; background: rgba(255,255,255,.5); border-radius: 50%; }
    @keyframes ticker {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    /* ===========================================
       STATS BAR
    =========================================== */
    #stats {
      background: var(--white);
      border-bottom: 1px solid var(--ln);
    }
    .stats-bar {
      display: grid; grid-template-columns: repeat(4, 1fr);
      divide-x: 1px solid var(--ln);
    }
    .stat-box {
      padding: 36px 32px;
      border-right: 1px solid var(--ln);
      position: relative; overflow: hidden;
      transition: background .25s;
    }
    .stat-box:last-child { border-right: none; }
    .stat-box:hover { background: var(--bg2); }
    .stat-box::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0;
      height: 3px; background: var(--o);
      transform: scaleX(0); transform-origin: left;
      transition: transform .3s ease;
    }
    .stat-box:hover::before { transform: scaleX(1); }
    .stat-num {
      font-family: 'Syne', sans-serif;
      font-weight: 800; color: var(--ink); line-height: 1;
      margin-bottom: 6px;
      font-size: 32px;
    }
    .stat-num span { color: var(--o); }
    .stat-desc {color: var(--sub); font-weight: 400; }

    /* ===========================================
       SECTION UTILITY
    =========================================== */
    .section { padding: 100px 0; }
    .section-sm { padding: 72px 0; }
    .s-label {
      display: flex; align-items: center; gap: 10px;
      font-family: 'Syne', sans-serif;
      font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--o); margin-bottom: 16px;
    }
    .s-label::before {
      content: ''; display: block;
      width: 28px; height: 2px; background: var(--o);
    }
    .s-label.light { color: rgba(255,153,0,.8); font-size: 12px;}
    .s-label.light::before { background: rgba(255,153,0,.6); }
    .eyebrow-num {
      font-family: 'Syne', sans-serif;
      font-weight: 700; color: var(--sub); letter-spacing: .12em;
    }

    /* ===========================================
       OVERVIEW — Asymmetric
    =========================================== */
    #overview { background: var(--bg); }
    .overview-grid {
      display: grid; grid-template-columns: 5fr 4fr; gap: 80px; align-items: start;
    }
    .overview-body p {
      color: var(--mid); line-height: 1.85;
      margin-bottom: 22px;
    }
    .overview-body p:last-child { margin-bottom: 0; }
    .overview-body strong { color: var(--ink); font-weight: 600; }
    .overview-aside { }
    .aside-block {
      padding: 28px;
      border: 1px solid var(--ln);
      border-radius: var(--r2);
      margin-bottom: 16px;
      background: var(--white);
      transition: box-shadow .25s, transform .25s;
    }
    .aside-block:hover { box-shadow: 0 8px 32px rgba(0,0,0,.07); transform: translateY(-2px); }
    .aside-block-icon {
      width: 40px; height: 40px; background: var(--opa);
      border-radius: 8px; display: flex; align-items: center; justify-content: center;
      margin-bottom: 14px;
    }
    .aside-block-icon svg { stroke: var(--o); }
    .aside-block h4 {color: var(--ink); margin-bottom: 6px; font-size: 16px;}
    .aside-block p {color: var(--sub); margin: 0; line-height: 1.6; }
    .overview-h2 {margin-bottom: 32px; font-size: 40px;}
    .overview-h2 mark {
      background: none; color: var(--o);
    }

    /* ===========================================
       COMPARE — Horizontal scrollable cards
    =========================================== */
    #compare { background: var(--ink); overflow: hidden; }
    .compare-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; }
    .compare-head h2 {color: #fff; font-size: 40px;}
    .compare-head p {color: rgba(255,255,255,.45); max-width: 340px; text-align: right; }
    .compare-row {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
    }
    .cmp-card {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      padding: 36px 28px 28px;
      position: relative; overflow: hidden;
      transition: background .25s;
    }
    .cmp-card.active {
      background: var(--o);
      border-color: var(--o);
    }
    .cmp-card:not(.active):hover { background: rgba(255,255,255,.07); }
    .cmp-top-label {
      font-weight: 700; letter-spacing: .18em;
      text-transform: uppercase; color: rgba(255,255,255,.35);
      margin-bottom: 24px;
      font-size: 10px;
    }
    .cmp-card.active .cmp-top-label { color: rgba(255,255,255,.7); }
    .cmp-dur {
      font-family: 'Syne', sans-serif;
      font-weight: 800; color: rgba(255,255,255,.12);
      line-height: 1; margin-bottom: 5px;
      font-size: 52px;
    }
    .cmp-card.active .cmp-dur { color: rgba(255,255,255,.25); }
    .cmp-mo {
      font-family: 'Syne', sans-serif;
      font-weight: 700; color: rgba(255,255,255,.3);
      margin-bottom: 20px;
    }
    .cmp-card.active .cmp-mo { color: rgba(255,255,255,.7); }
    .cmp-title {
      font-family: 'Syne', sans-serif;
      font-weight: 700; color: #fff; margin-bottom: 12px;
      line-height: 1.3;
    }
    .cmp-desc {
      color: rgba(255,255,255,.5); line-height: 1.65;
      margin-bottom: 20px;
      font-size: 13px;
    }
    .cmp-card.active .cmp-desc { color: rgba(255,255,255,.8); }
    .cmp-tag {
      display: inline-block; padding: 4px 10px;
      border-radius: 3px;font-weight: 700;
      letter-spacing: .06em; text-transform: uppercase;
      font-size: 12px;
    }
    .cmp-tag-muted { background: rgba(255,255,255,.07); color: rgba(255,255,255,.35); }
    .cmp-tag-active { background: rgba(255,255,255,.25); color: #fff; }
    .cmp-badge {
      position: absolute; top: 10px; right: 16px;
      background: var(--ink); color: var(--o);
      font-weight: 800; letter-spacing: .1em;
      font-size: 10px;
      text-transform: uppercase; padding: 4px 10px; border-radius: 3px;
    }

    /* ===========================================
       WHY — Numbered horizontal strip
    =========================================== */
    #why { background: var(--white); }
    .why-head { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: end; margin-bottom: 60px; }
    .why-head h2 {font-size: 36px;}
    .why-head p {color: var(--sub); line-height: 1.75; }
    .why-list { display: flex; flex-direction: column; }
    .why-item {
      display: grid; grid-template-columns: 72px 1fr auto;
      gap: 0; align-items: stretch;
      border-top: 1px solid var(--ln);
      transition: background .2s;
      cursor: default;
    }
    .why-item:last-child { border-bottom: 1px solid var(--ln); }
    .why-item:hover { background: var(--bg2); }
    .why-item:hover .why-arrow { opacity: 1; transform: translateX(0); }
    .why-num {
      font-family: 'Syne', sans-serif;
      font-weight: 700; color: var(--sub); letter-spacing: .1em;
      display: flex; align-items: center;
      padding: 24px 0; border-right: 1px solid var(--ln);
      padding-right: 20px;
    }
    .why-body { padding: 24px 32px; }
    .why-body h3 {color: var(--ink); margin-bottom: 6px; font-size: 16px;}
    .why-body p {color: var(--sub); margin: 0; line-height: 1.65; }
    .why-arrow {
      display: flex; align-items: center; padding: 0 24px;
      opacity: 0; transform: translateX(-8px); transition: .25s;
    }
    .why-arrow svg { stroke: var(--o); }

    /* ===========================================
       PROFILE — Dark with horizontal cards
    =========================================== */
    #profile { background: #0F0F0F; padding: 100px 0; }
    .profile-head { margin-bottom: 56px; }
    .profile-head h2 { color: #fff; }
    .profile-scroll {
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
    }
    .pc {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 12px; padding: 28px 22px;
      transition: .3s;
    }
    .pc:hover {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,153,0,.3);
      transform: translateY(-4px);
    }
    .pc-icon {
      width: 44px; height: 44px;
      border-radius: 10px; display: flex; align-items: center; justify-content: center;
      margin-bottom: 18px;
      background: rgba(255,153,0,.12);
    }
    .pc-icon svg { stroke: var(--o2); }
    .pc h4 { color: #fff; margin-bottom: 8px; line-height: 1.3; font-size: 14px;}
    .pc p {color: rgba(255,255,255,.45); line-height: 1.6; font-size: 12px; margin-bottom: 0px;}

    /* ===========================================
       OUTCOMES — Split with large numbers
    =========================================== */
    #outcomes { background: var(--bg2); }
    .outcomes-intro { margin-bottom: 64px; }
    .outcomes-intro h2 {font-size:40px; }
    .outcomes-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    }
    .oc {
      background: var(--white); padding: 36px 32px;
      display: flex; gap: 20px; align-items: flex-start;
      border: 1px solid var(--ln);
      transition: .25s;
    }
    .oc:hover { background: var(--bg); box-shadow: inset 4px 0 0 var(--o); }
    .oc-n {
      font-family: 'Syne', sans-serif;
      font-weight: 800; color: var(--o); opacity: .35;
      line-height: 1; min-width: 52px; padding-top: 4px;
    }
    .oc:hover .oc-n { opacity: 1; }
    .oc-text h4 { color: var(--ink); margin-bottom: 8px; font-size: 16px;}
    .oc-text p { color: var(--sub); line-height: 1.65; margin: 0; font-size: 13px;}

    /* ===========================================
       CURRICULUM — Tabbed terms
    =========================================== */
    #curriculum { background: var(--white); }
    .cur-layout { display: grid; grid-template-columns: 280px 1fr; gap: 0; border: 1px solid var(--ln); border-radius: var(--r2); overflow: hidden; }
    .cur-tabs { background: var(--bg2); border-right: 1px solid var(--ln); }
    .cur-tab {
      padding: 28px 28px;
      border-bottom: 1px solid var(--ln);
      cursor: pointer; transition: .2s;
      position: relative;
    }
    .cur-tab:last-child { border-bottom: none; }
    .cur-tab.act { background: var(--white); }
    .cur-tab.act::after {
      content: ''; position: absolute; top: 0; left: 0; bottom: 0;
      width: 4px; background: var(--o);
    }
    .cur-tab-num { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); margin-bottom: 6px; }
    .cur-tab.act .cur-tab-num { color: var(--o); }
    .cur-tab h4 {color: var(--ink); line-height: 1.3; margin-bottom: 0px; font-size: 14px;}
    .cur-tab p { color: var(--sub); margin-top: 4px; line-height: 1.5; display: none; }
    .cur-tab.act p { display: block; }
    .cur-panel { display: none; padding: 40px; }
    .cur-panel.act { display: block; }
    .cur-panel-title {font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--o); margin-bottom: 20px; }
    .cur-panel h3 {color: var(--ink); margin-bottom: 16px; font-size: 22px;}
    .cur-subjects {
      display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;
    }
    .cs {
      padding: 6px 14px; background: var(--bg2);
      border: 1px solid var(--ln); border-radius: 4px;
      font-weight: 500; color: var(--ink);
      transition: .2s;
      font-size: 12px;
    }
    .cs:hover { background: var(--opa); border-color: var(--o); color: var(--o); }
    .cur-outcome {
      display: flex; gap: 12px; align-items: flex-start;
      padding: 18px; background: var(--bg2); border-radius: var(--r);
      border-left: 4px solid var(--o);
    }
    .cur-outcome svg { stroke: var(--o); flex-shrink: 0; margin-top: 1px; }
    .cur-outcome p {color: var(--ink); font-size: 13px; font-weight: 500; margin: 0; line-height: 1.6; }

    /* ===========================================
       MODULES — Clean accordion
    =========================================== */
    #modules { background: var(--bg2); }
    .mod-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 48px; }
    .mod-head h2 {font-size:40px; }
    .mod-head p { color: var(--sub); line-height: 1.75; font-size: 14px;}
    .mod-acc { }
    .mod-item {
      border-bottom: 1px solid var(--ln);
    }
    .mod-trigger {
      width: 100%; display: flex; align-items: center;
      gap: 20px; padding: 22px 0; cursor: pointer;
      background: none; text-align: left;
      transition: .2s;
    }
    .mod-trigger:hover .mod-title { color: var(--o); }
    .mod-idx {
      font-family: 'Syne', sans-serif;
      font-weight: 700; color: var(--sub); letter-spacing: .1em;
      min-width: 40px;
    }
    .mod-icon-wrap {
      width: 36px; height: 36px; border-radius: 8px;
      background: var(--bg2); display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: .25s;
    }
    .mod-item.open .mod-icon-wrap { background: var(--opa); }
    .mod-icon-wrap svg { stroke: var(--sub); transition: .25s; }
    .mod-item.open .mod-icon-wrap svg { stroke: var(--o); }
    .mod-title {
      font-family: 'Syne', sans-serif;
      font-weight: 600; color: var(--ink); flex: 1; transition: .2s;
    }
    .mod-item.open .mod-title { color: var(--o); }
    .mod-plus {
      width: 28px; height: 28px; border-radius: 50%;
      background: var(--bg2); display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: .3s;
    }
    .mod-item.open .mod-plus { background: var(--o); transform: rotate(45deg); }
    .mod-plus svg { stroke: var(--sub); transition: .25s; }
    .mod-item.open .mod-plus svg { stroke: #fff; }
    .mod-body {
      max-height: 0; overflow: hidden;
      transition: max-height .4s cubic-bezier(.4,0,.2,1);
    }
    .mod-body-inner {
      padding: 0 0 24px 60px;
    }
    .mod-body p {
       color: var(--mid); line-height: 1.85;
    }

    /* ===========================================
       DELIVERY — Feature Grid
    =========================================== */
    #delivery { background: var(--white); }
    .delivery-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
    .delivery-left h2 { margin-bottom: 24px; }
    .delivery-left p {color: var(--sub); line-height: 1.8; margin-bottom: 32px; }
    .delivery-right { display: flex; flex-direction: column; gap: 12px; }
    .df {
      display: flex; gap: 16px; align-items: flex-start;
      padding: 20px; border: 1px solid var(--ln); border-radius: var(--r);
      background: var(--bg); transition: .25s;
    }
    .df:hover { background: var(--white); border-color: var(--o); }
    .df-icon { width: 40px; height: 40px; background: var(--opa); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .df-icon svg { stroke: var(--o); }
    .df-text h4 {color: var(--ink); margin-bottom: 4px; font-size:16px; }
    .df-text p { color: var(--sub); margin: 0; line-height: 1.55; font-size: 13px;}
    .delivery-layout .rv-l p{font-size: 14px;}
    /* ===========================================
       CAPSTONE — Full bleed highlight
    =========================================== */
    #capstone {
      background: var(--o);
      padding: 100px 0;
      position: relative; overflow: hidden;
    }
    .capstone-bg-text {
      position: absolute;
    bottom: -30px;
    right: -20px;
    font-family: 'Syne', sans-serif;
    font-size: 18vw;
    font-weight: 800;
    color: rgba(255, 255, 255, .1);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    }
    .capstone-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
    .capstone-left h2 { color: #fff; margin-bottom: 20px; }
    .capstone-left p { color: rgba(255,255,255,.8); line-height: 1.8; }
    .capstone-deliverables { display: flex; flex-direction: column; gap: 14px; }
    .cd {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 18px 20px;
      background: rgba(255,255,255,.15);
      border-radius: var(--r);
      border: 1px solid rgba(255,255,255,.2);
      transition: .2s;
    }
    .capstone-layout .rv-l p{color: #fff; font-size: 14px;}
    .cd:hover { background: rgba(255,255,255,.22); }
    .cd-check {
      width: 26px; height: 26px; background: rgba(255,255,255,.25);
      border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .cd-check svg { stroke: #fff; }
    .cd p {color: #fff; font-weight: 500; margin: 0; line-height: 1.5; }

    /* ===========================================
       ASSESSMENT
    =========================================== */
    #assessment { background: var(--bg2); }
    .assess-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
    .ag {
      background: var(--white); border: 1px solid var(--ln);
      border-radius: var(--r2); padding: 28px 22px;
      transition: .25s;
    }
    .ag:hover { box-shadow: 0 8px 32px rgba(0,0,0,.08); transform: translateY(-4px); }
    .ag-n {
      font-family: 'Syne', sans-serif; font-weight: 800;
      color: var(--o); margin-bottom: 16px; opacity: .4;
    }
    .ag:hover .ag-n { opacity: 1; }
    .ag h4 {color: var(--ink); margin-bottom: 8px; font-size: 16px;}
    .ag p {color: var(--sub); line-height: 1.6; margin: 0; font-size: 13px;}

    /* ===========================================
       CAREERS
    =========================================== */
    #careers { background: var(--ink); padding: 100px 0; }
    .careers-layout { display: grid; grid-template-columns: 360px 1fr; gap: 80px; align-items: start; }
    .careers-left h2 {color: #fff; margin-bottom: 20px; }
    .careers-left p {color: rgba(255,255,255,.5); line-height: 1.75; margin-bottom: 32px; }
    .careers-right { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
    .career-row {
      display: flex; align-items: center; gap: 16px;
      padding: 16px 20px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 6px;
      transition: .25s;
      opacity: 0; transform: translateX(30px);
    }
    .careers-layout .rv-l h2{color: #fff;}
    .career-row.vis { opacity: 1; transform: translateX(0); }
    .career-row:hover {
      background: rgba(255,153,0,.12);
      border-color: rgba(255,153,0,.25);
    }
    .career-row svg { stroke: rgba(255,255,255,.3); flex-shrink: 0; transition: .2s; }
    .career-row:hover svg { stroke: var(--o); }
    .career-row span {
      font-family: 'Syne', sans-serif;
      font-weight: 600; color: rgba(255,255,255,.65); transition: .2s;
    }
    .career-row:hover span { color: #fff; }
    .career-arrow {
      margin-left: auto; opacity: 0; transition: .2s;
    }
    .career-row:hover .career-arrow { opacity: 1; }
    .career-arrow svg { stroke: var(--o) !important; }

    /* ===========================================
       ADMISSIONS
    =========================================== */
    #admissions { background: var(--bg); }
    .adm-layout { display: grid; grid-template-columns: 1fr 400px; gap: 64px; align-items: start; }
    .adm-h2 {margin-bottom: 36px; }
    .adm-items { display: flex; flex-direction: column; gap: 0; }
    .adm-row {
      display: flex; gap: 20px; padding: 24px 0;
      border-bottom: 1px solid var(--ln); align-items: flex-start;
    }
    .adm-row:first-child { padding-top: 0; }
    .adm-num {
      font-family: 'Syne', sans-serif;
      font-weight: 700; letter-spacing: .12em; color: var(--sub);
      min-width: 28px; padding-top: 3px;
    }
    .adm-icon {
      width: 38px; height: 38px; background: var(--opa);
      border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .adm-icon svg { stroke: var(--o); }
    .adm-text h4 { color: var(--ink); margin-bottom: 5px; font-size: 16px;}
    .adm-text p {color: var(--sub); margin: 0; line-height: 1.65; font-size: 13px;}
    .adm-card {
      background: var(--ink); border-radius: var(--r2);
      padding: 36px 28px; position: sticky; top: 90px;
    }
    .adm-card h3 {color: #fff; margin-bottom: 12px; font-size: 24px;}
    .adm-card p {color: rgba(255,255,255,.5); margin-bottom: 28px; line-height: 1.7; }
    .adm-card .btn {font-size: 14px; width: 100%; justify-content: center; margin-bottom: 10px; }

    /* ===========================================
       PRICING
    =========================================== */
    #pricing { background: var(--white); }
    .pricing-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
    .pricing-left h2 {margin-bottom: 16px; }
    .pricing-left p {color: var(--sub); line-height: 1.75; margin-bottom: 36px; }
    .price-feat-list { display: flex; flex-direction: column; gap: 14px; }
    .pf {
      display: flex; gap: 14px; align-items: flex-start;
    }
    .pf-icon { width: 34px; height: 34px; background: var(--opa); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .pf-icon svg { stroke: var(--o); }
    .pf-text h5 {color: var(--ink); margin-bottom: 2px; font-size: 16px;}
    .pf-text p {color: var(--sub); margin: 0; }
    .pricing-card {
      border: 2px solid var(--ln); border-radius: var(--r2);
      overflow: hidden;
    }
    .pc-top {
      background: var(--ink); padding: 36px 32px;
      border-bottom: 3px solid var(--o);
    }
    .pc-top-label {
       font-weight: 700; letter-spacing: .16em;
       font-size: 11px;
      text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 10px;
    }
    .pc-top-name { font-family: 'Syne', sans-serif; font-weight: 700; color: #fff; margin-bottom: 20px; }
    .price-big { display: flex; align-items: flex-start; gap: 4px; }
    .price-sym { font-weight: 700; color: var(--o); margin-top: 6px; }
    .price-val {font-size: 52px; font-family: 'Syne', sans-serif; font-weight: 800; color: #fff; line-height: 1; }
    .price-per { color: rgba(255,255,255,.4); align-self: flex-end; margin-bottom: 8px; }
    .pc-body { padding: 28px 32px; }
    .price-rows { display: flex; flex-direction: column; gap: 0; }
    .price-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 14px 0; border-bottom: 1px solid var(--ln);
    }
    .price-row:last-child { border-bottom: none; }
    .price-row-lbl {color: var(--mid); }
    .price-row-val { font-family: 'Syne', sans-serif; font-weight: 700; color: var(--ink); }
    .scholarship-row {
      display: flex; gap: 10px; align-items: center;
      margin-top: 16px; padding: 14px;
      background: var(--opa); border-radius: var(--r);
    }
    .scholarship-row svg { stroke: var(--o); flex-shrink: 0; }
    .scholarship-row span {color: var(--o); font-weight: 500; }
    .pc-cta { padding: 0 32px 28px; }
    .pc-cta .btn { width: 100%; justify-content: center; padding: 16px; }

    /* ===========================================
       FAQ
    =========================================== */
    #faq { background: var(--bg2); }
    .faq-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; }
    .faq-left h2 { margin-bottom: 16px; }
    .faq-left p {color: var(--sub); line-height: 1.75; margin-bottom: 28px; }
    .faq-items { display: flex; flex-direction: column; }
    .fq {
      border-bottom: 1px solid var(--ln);
    }
    .fq-q {
      display: flex; justify-content: space-between; align-items: center;
      gap: 16px; padding: 20px 0; cursor: pointer;
    }
    .fq-qtext {font-weight: 600; color: var(--ink); line-height: 1.4; }
    .fq.open .fq-qtext { color: var(--o); }
    .fq-icon {
      width: 28px; height: 28px; border-radius: 50%;
      background: var(--bg2); display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: .3s;
    }
    .fq.open .fq-icon { background: var(--o); transform: rotate(45deg); }
    .fq-icon svg { stroke: var(--sub); }
    .fq.open .fq-icon svg { stroke: #fff; }
    .fq-a { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4,0,.2,1); }
    .fq-a-inner { padding: 0 0 20px 0; }
    .fq-a-inner p {color: var(--mid); line-height: 1.8; }

    /* ===========================================
       FINAL CTA
    =========================================== */
    #cta { background: var(--ink); padding: 120px 0; position: relative; overflow: hidden; }
    .cta-bg-circle {
      position: absolute; top: -200px; right: -200px;
      width: 600px; height: 600px; border-radius: 50%;
      background: radial-gradient(circle, rgba(255,153,0,.1) 0%, transparent 70%);
      pointer-events: none;
    }
    .cta-bg-circle2 {
      position: absolute; bottom: -200px; left: -100px;
      width: 500px; height: 500px; border-radius: 50%;
      background: radial-gradient(circle, rgba(113,82,233,.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .cta-inner { text-align: center; position: relative; z-index: 1; }
    .cta-inner h2 {
      color: #fff;
      font-size: 52px;
      margin-bottom: 24px; max-width: 800px; margin-left: auto; margin-right: auto;
    }
    .cta-inner h2 span { color: var(--o); }
    .cta-inner p {
      color: rgba(255,255,255,.55);
      max-width: 560px; margin: 0 auto 48px; line-height: 1.8;
    }
    .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

    /* ===========================================
       FOOTER
    =========================================== */
    #footer { background: #080808; padding: 64px 0 32px; }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
    .ft-brand p {color: rgba(255,255,255,.4); line-height: 1.7; margin-top: 14px; max-width: 300px; }
    .ft-col h5 {
      font-family: 'Syne', sans-serif;
      font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
      color: rgba(255,255,255,.35); margin-bottom: 18px;
    }
    .ft-col ul { display: flex; flex-direction: column; gap: 10px; }
    .ft-col ul a {color: rgba(255,255,255,.45); transition: color .2s; }
    .ft-col ul a:hover { color: var(--o); }
    .footer-line { border: none; border-top: 1px solid rgba(255,255,255,.07); margin-bottom: 28px; }
    .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
    .footer-copy {color: rgba(255,255,255,.3); }
    .ft-socials { display: flex; gap: 10px; }
    .ft-social {
      width: 34px; height: 34px; border-radius: 6px;
      background: rgba(255,255,255,.06);
      display: flex; align-items: center; justify-content: center;
      transition: .2s;
    }
    .ft-social:hover { background: var(--o); }
    .ft-social svg { stroke: rgba(255,255,255,.5); transition: .2s; }
    .ft-social:hover svg { stroke: #fff; }

    /* ===========================================
       SCROLL REVEAL
    =========================================== */
    .rv {
      opacity: 0; transform: translateY(24px);
      transition: opacity .6s ease, transform .6s ease;
    }
    .rv.in { opacity: 1; transform: translateY(0); }
    .rv-l { opacity: 0; transform: translateX(-24px); transition: opacity .6s ease, transform .6s ease; }
    .rv-l.in { opacity: 1; transform: translateX(0); }
    .rv-r { opacity: 0; transform: translateX(24px); transition: opacity .6s ease, transform .6s ease; }
    .rv-r.in { opacity: 1; transform: translateX(0); }
    .d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; }
    .d3 { transition-delay: .3s; } .d4 { transition-delay: .4s; }
    .d5 { transition-delay: .5s; }

    /* ===========================================
       RESPONSIVE
    =========================================== */
    @media(max-width:1100px) {
      #hero { grid-template-columns: 1fr; min-height: auto; }
      .hero-left { padding: 140px 32px 40px; }
      .hero-right { padding: 40px 32px 80px; border-left: none; border-top: 1px solid rgba(255,255,255,.07); }
      .profile-scroll { grid-template-columns: repeat(3, 1fr); }
      .outcomes-grid { grid-template-columns: 1fr; }
      .careers-layout { grid-template-columns: 1fr; gap: 40px; }
      .adm-layout { grid-template-columns: 1fr; }
      .adm-card { position: static; }
      .pricing-layout { grid-template-columns: 1fr; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    }
    @media(max-width:900px) {
      .stats-bar { grid-template-columns: 1fr 1fr; }
      .overview-grid { grid-template-columns: 1fr; }
      .compare-row { grid-template-columns: 1fr 1fr; }
      .why-head { grid-template-columns: 1fr; }
      .profile-scroll { grid-template-columns: 1fr 1fr; }
      .cur-layout { grid-template-columns: 1fr; }
      .cur-tabs { border-right: none; border-bottom: 1px solid var(--ln); display: flex; overflow-x: auto; }
      .cur-tab { border-bottom: none; border-right: 1px solid var(--ln); min-width: 180px; }
      .cur-tab p { display: none !important; }
      .cur-tab.act::after { bottom: 0; top: auto; right: 0; width: auto; height: 4px; }
      .mod-head { grid-template-columns: 1fr; gap: 16px; }
      .delivery-layout { grid-template-columns: 1fr; gap: 40px; }
      .capstone-layout { grid-template-columns: 1fr; gap: 40px; }
      .assess-grid { grid-template-columns: 1fr 1fr; }
    }
    @media(max-width:640px) {
      .wrap { padding: 0 20px; }
      .hero-left { padding: 120px 20px 36px; }
      .hero-right { padding: 36px 20px 60px; }
      .hero-info-blocks { grid-template-columns: 1fr; }
      .stats-bar { grid-template-columns: 1fr; }
      .stat-box { border-right: none; border-bottom: 1px solid var(--ln); }
      .compare-row { grid-template-columns: 1fr; }
      .profile-scroll { grid-template-columns: 1fr; }
      .outcomes-grid { grid-template-columns: 1fr; }
      .assess-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; text-align: center; }
      .nav-links, .nav-actions { display: none; }
      .hbg { display: flex; }
      .hero-h1 {}
    }