:root {

    /* ===================================================== */
    /* COLORS */
    /* ===================================================== */
  
    --bg: #f6f2eb;
    --bg-warm: #f1ebe1;
    --bg-dark: #0f1115;
  
    --panel: rgba(255,255,255,0.68);
    --panel-strong: rgba(255,255,255,0.82);
  
    --ink: #121212;
    --muted: #6f6a63;
  
    --line: rgba(25,25,25,0.08);
  
    --blue: #315c72;
    --gold: #c89b3c;
    --red: #a6423a;
    --green: #4f7d5a;
  
    --shadow-soft:
      0 10px 30px rgba(16,16,16,0.05);
  
    --shadow-medium:
      0 25px 60px rgba(16,16,16,0.08);
  
    --shadow-large:
      0 40px 120px rgba(16,16,16,0.14);
  
    --radius-sm: 18px;
    --radius-md: 28px;
    --radius-lg: 42px;
  
    --max-copy: 760px;
  
    --ease:
      cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  /* ===================================================== */
  /* RESET */
  /* ===================================================== */
  
  * {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
  
    margin: 0;
  
    background:
      linear-gradient(
        180deg,
        #faf7f1 0%,
        #f6f2eb 100%
      );
  
    color: var(--ink);
  
    overflow-x: hidden;
  
    font-family:
      Inter,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
  
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  
  /* ===================================================== */
  /* GLOBAL */
  /* ===================================================== */
  
  .progress-bar {
  
    position: fixed;
    top: 0;
    left: 0;
  
    width: 0%;
    height: 4px;
  
    z-index: 9999;
  
    background:
      linear-gradient(
        90deg,
        var(--blue),
        var(--gold),
        var(--green)
      );
  }
  
  .story {
    width: 100%;
  }
  
  section {
    position: relative;
  }
  
  .eyebrow {
  
    display: inline-block;
  
    margin-bottom: 1.2rem;
  
    text-transform: uppercase;
    letter-spacing: 0.16em;
  
    color: var(--blue);
  
    font-size: 0.76rem;
    font-weight: 900;
  }
  
  .kicker {
  
    margin-bottom: 1rem;
  
    text-transform: uppercase;
    letter-spacing: 0.16em;
  
    color: var(--gold);
  
    font-size: 0.78rem;
    font-weight: 900;
  }
  
  .pill {
  
    display: inline-block;
  
    padding:
      0.5rem
      0.9rem;
  
    border-radius: 999px;
  
    background: rgba(49,92,114,0.08);
  
    color: var(--blue);
  
    font-size: 0.72rem;
    font-weight: 800;
  
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  
  h1 {
  
    margin: 0;
  
    font-size: clamp(5rem, 12vw, 11rem);
  
    line-height: 0.84;
    letter-spacing: -0.09em;
  
    max-width: 1050px;
  }
  
  h2 {
  
    margin:
      0
      0
      1.5rem;
  
    font-size: clamp(2.8rem, 5vw, 6rem);
  
    line-height: 0.94;
    letter-spacing: -0.075em;
  
    max-width: 980px;
  }
  
  h3 {
  
    margin:
      0.7rem
      0
      1rem;
  
    font-size: clamp(1.8rem, 3vw, 3rem);
  
    line-height: 1;
    letter-spacing: -0.06em;
  }
  
  p {
  
    margin:
      0
      0
      1.4rem;
  
    font-size: clamp(1.06rem, 1.18vw, 1.28rem);
  
    line-height: 1.8;
  
    color: var(--muted);
  }
  
  strong,
  em {
    color: var(--ink);
  }
  
  /* ===================================================== */
  /* HERO */
  /* ===================================================== */
  
  .hero-scene {
  
    min-height: 100vh;
  
    display: flex;
    align-items: center;
  
    padding:
      10vh
      8vw;
  
    background:
      radial-gradient(circle at 18% 20%, rgba(200,155,60,0.12), transparent 28%),
      radial-gradient(circle at 78% 68%, rgba(49,92,114,0.12), transparent 30%),
      linear-gradient(180deg, #faf7f1 0%, #f6f2eb 100%);
  }
  
  .hero-scene::before {
  
    content: "";
  
    position: absolute;
    inset: 0;
  
    background-image:
      linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  
    background-size: 90px 90px;
  
    mask-image:
      radial-gradient(circle at center, black 30%, transparent 80%);
  
    pointer-events: none;
  }
  
  .hero-inner {
  
    position: relative;
    z-index: 2;
  
    width: 100%;
    max-width: 1200px;
  }
  
  .hero-subtitle {
  
    margin-top: 2rem;
  
    max-width: 920px;
  
    font-size: clamp(1.5rem, 2vw, 2.3rem);
  
    line-height: 1.42;
  
    color: var(--ink);
  }
  
  .hero-subtitle.muted {
    opacity: 0.7;
  }
  
  /* ===================================================== */
  /* STATEMENT SCENES */
  /* ===================================================== */
  
  .statement-scene {
  
    padding:
      18vh
      8vw;
  
    display: flex;
    justify-content: center;
  
    text-align: center;
  }
  
  .statement-inner {
  
    width: 100%;
    max-width: 1100px;
  }
  
  .statement-inner h2 {
  
    margin-left: auto;
    margin-right: auto;
  }
  
  .statement-inner p {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .statement-scene.compact {
    padding-top: 12vh;
    padding-bottom: 12vh;
  }
  
  /* ===================================================== */
  /* DATA SCENES */
  /* ===================================================== */
  
  .data-scene {
  
    padding:
      14vh
      8vw;
  }
  
  .scene-header {
  
    margin-bottom: 5rem;
  
    max-width: 920px;
  }
  
  .scene-note {
  
    margin-top: 3rem;
  
    max-width: 800px;
  
    font-size: 1.2rem;
  }
  
  /* ===================================================== */
  /* SCALE */
  /* ===================================================== */
  
  .scale-grid {
  
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
  
    gap: 1.5rem;
  }
  
  .metric-card {
  
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.78),
        rgba(255,255,255,0.58)
      );
  
    backdrop-filter: blur(18px);
  
    border: 1px solid rgba(255,255,255,0.42);
  
    border-radius: var(--radius-lg);
  
    padding: 2.4rem;
  
    box-shadow: var(--shadow-medium);
  }
  
  .metric-card.giant {
  
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  .metric-label {
  
    display: block;
  
    margin-bottom: 1rem;
  
    text-transform: uppercase;
    letter-spacing: 0.12em;
  
    color: var(--blue);
  
    font-size: 0.75rem;
    font-weight: 900;
  }
  
  .metric-card strong {
  
    display: block;
  
    margin-bottom: 1rem;
  
    font-size: clamp(3rem, 6vw, 6rem);
  
    line-height: 0.9;
    letter-spacing: -0.09em;
  }
  
  /* ===================================================== */
  /* SPLIT SCENES */
  /* ===================================================== */
  
  .split-scene {
  
    display: grid;
    grid-template-columns: 1fr 1fr;
  
    gap: 5vw;
  
    align-items: center;
  
    padding:
      16vh
      8vw;
  }
  
  .split-copy {
    max-width: 700px;
  }
  
  .split-visual {
  
    position: relative;
  }
  
  /* ===================================================== */
  /* PANELS */
  /* ===================================================== */
  
  .restriction-panel,
  .fund-card,
  .process-card,
  .activation-map,
  .scholarship-visual {
  
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.76),
        rgba(255,255,255,0.58)
      );
  
    backdrop-filter: blur(18px);
  
    border: 1px solid rgba(255,255,255,0.45);
  
    border-radius: var(--radius-lg);
  
    padding: 2.5rem;
  
    box-shadow: var(--shadow-large);
  }
  
  /* ===================================================== */
  /* RESTRICTION PANEL */
  /* ===================================================== */
  
  .restriction-number strong {
  
    display: block;
  
    font-size: clamp(4rem, 8vw, 7rem);
  
    line-height: 0.9;
    letter-spacing: -0.09em;
  }
  
  .restriction-bars {
  
    margin-top: 2.5rem;
  
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }
  
  .restriction-bars div {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }
  
  .restriction-bars span {
    font-weight: 700;
  }
  
  .restriction-bars i {
  
    display: block;
  
    height: 16px;
  
    width: var(--w);
  
    border-radius: 999px;
  
    background: var(--c);
  }
  
  /* ===================================================== */
  /* DARK FREEZE SCENE */
  /* ===================================================== */
  
  .dark-scene {
  
    padding:
      20vh
      8vw;
  
    background:
      radial-gradient(circle at top, rgba(49,92,114,0.18), transparent 40%),
      linear-gradient(180deg, #12151a 0%, #0d0f13 100%);
  
    color: white;
  }
  
  .dark-scene h2,
  .dark-scene p,
  .dark-scene .eyebrow {
    color: white;
  }
  
  .dark-inner {
  
    max-width: 1100px;
  }
  
  .freeze-path {
  
    margin:
      4rem
      0;
  
    display: flex;
    align-items: center;
  }
  
  .path-node {
  
    padding:
      1.2rem
      1.8rem;
  
    border-radius: 999px;
  
    font-weight: 800;
  }
  
  .path-node.good {
  
    background: rgba(79,125,90,0.16);
  
    border: 1px solid rgba(79,125,90,0.32);
  }
  
  .path-node.stuck {
  
    background: rgba(166,66,58,0.16);
  
    border: 1px solid rgba(166,66,58,0.32);
  }
  
  .path-line {
  
    height: 3px;
    flex: 1;
  }
  
  .path-line.good {
    background: var(--green);
  }
  
  .path-line.broken {
  
    background:
      repeating-linear-gradient(
        90deg,
        rgba(166,66,58,0.8) 0px,
        rgba(166,66,58,0.8) 18px,
        transparent 18px,
        transparent 32px
      );
  }
  
  /* ===================================================== */
  /* FUND */
  /* ===================================================== */
  
  .fund-grid {
  
    margin-top: 2rem;
  
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  
    gap: 1px;
  
    overflow: hidden;
  
    border-radius: 24px;
  
    background: rgba(20,20,20,0.08);
  }
  
  .fund-grid div {
  
    background: rgba(255,255,255,0.7);
  
    padding: 1.4rem;
  }
  
  .fund-grid span {
  
    display: block;
  
    margin-bottom: 0.45rem;
  
    text-transform: uppercase;
    letter-spacing: 0.06em;
  
    color: var(--muted);
  
    font-size: 0.75rem;
    font-weight: 800;
  }
  
  .fund-grid strong {
    font-size: 1.15rem;
  }
  
  /* ===================================================== */
  /* AGREEMENT */
  /* ===================================================== */
  
  .agreement-scene {
  
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
  
    gap: 6vw;
  
    padding:
      10vh
      8vw
      18vh;
  }
  
  .agreement-sticky {
  
    position: sticky;
    top: 16vh;
  
    align-self: start;
  }
  
  .agreement-page {
  
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.82),
        rgba(255,255,255,0.65)
      );
  
    border: 1px solid rgba(255,255,255,0.5);
  
    border-radius: 40px;
  
    padding: 3rem;
  
    box-shadow: var(--shadow-large);
  }
  
  .agreement-page p {
  
    margin-bottom: 2rem;
  
    font-size: 1.12rem;
  
    line-height: 2;
  }
  
  .give-up-card {
  
    margin:
      4rem
      0;
  
    padding: 2rem;
  
    border-radius: 28px;
  
    background:
      linear-gradient(
        135deg,
        rgba(166,66,58,0.12),
        rgba(200,155,60,0.12)
      );
  
    border: 1px solid rgba(166,66,58,0.18);
  }
  
  /* ===================================================== */
  /* TIMELINE */
  /* ===================================================== */
  
  .timeline-panel {
  
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  
  .timeline-row {
  
    display: grid;
    grid-template-columns: 260px repeat(6, 1fr) 220px;
  
    gap: 0.6rem;
  
    align-items: center;
  
    padding: 1.5rem;
  
    border-radius: 24px;
  
    background: rgba(255,255,255,0.6);
  
    border: 1px solid rgba(255,255,255,0.5);
  
    box-shadow: var(--shadow-soft);
  }
  
  .timeline-row span,
  .timeline-row strong {
  
    font-size: 0.92rem;
    font-weight: 800;
  }
  
  .timeline-row i {
  
    display: block;
  
    height: 14px;
  
    border-radius: 999px;
  
    background: var(--green);
  }
  
  .timeline-row i.gold {
    background: var(--gold);
  }
  
  .timeline-row i.dim {
    opacity: 0.18;
  }
  
  .timeline-row i.empty {
    background: rgba(0,0,0,0.08);
  }
  
  /* ===================================================== */
  /* PROCESS */
  /* ===================================================== */
  
  .process-card {
  
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .process-node {
  
    padding:
      1.1rem
      1.3rem;
  
    border-radius: 20px;
  
    background: rgba(255,255,255,0.72);
  
    border: 1px solid rgba(0,0,0,0.06);
  
    font-weight: 800;
  }
  
  .process-node.danger {
  
    background: rgba(166,66,58,0.12);
  
    color: var(--red);
  }
  
  .process-arrow {
  
    text-align: center;
  
    font-size: 1.4rem;
  
    color: var(--muted);
  }
  
  /* ===================================================== */
  /* ACTIVATION */
  /* ===================================================== */
  
  .activation-map {
  
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  
    gap: 1rem;
  }
  
  .activation-map div {
  
    padding:
      2rem
      1rem;
  
    border-radius: 22px;
  
    background:
      linear-gradient(
        135deg,
        rgba(49,92,114,0.1),
        rgba(200,155,60,0.1)
      );
  
    border: 1px solid rgba(0,0,0,0.06);
  
    text-align: center;
  
    font-weight: 900;
  }
  
  /* ===================================================== */
  /* STUDENT */
  /* ===================================================== */
  
  .student-scene {
  
    display: grid;
    grid-template-columns: 1fr 1fr;
  
    gap: 5vw;
  
    align-items: center;
  
    padding:
      16vh
      8vw;
  }
  
  .student-flow {
  
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .student-row {
  
    padding:
      1.2rem
      1.4rem;
  
    border-radius: 22px;
  
    font-weight: 700;
  }
  
  .student-row.complete {
    background: rgba(49,92,114,0.1);
  }
  
  .student-row.stalled {
  
    background: rgba(166,66,58,0.12);
  
    color: var(--red);
  }
  
  .student-row.active {
  
    background: rgba(79,125,90,0.12);
  
    color: var(--green);
  }
  
  /* ===================================================== */
  /* IMPACT */
  /* ===================================================== */
  
  .impact-scene {
  
    padding:
      18vh
      8vw;
  
    background:
      linear-gradient(
        180deg,
        rgba(49,92,114,0.04),
        rgba(79,125,90,0.04)
      );
  }
  
  .impact-header {
  
    margin-bottom: 4rem;
  
    max-width: 900px;
  }
  
  .impact-grid {
  
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  
    gap: 1.5rem;
  }
  
  .impact-metric {
  
    padding: 2.5rem;
  
    border-radius: 34px;
  
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.76),
        rgba(255,255,255,0.6)
      );
  
    border: 1px solid rgba(255,255,255,0.45);
  
    box-shadow: var(--shadow-medium);
  }
  
  .impact-metric span {
  
    display: block;
  
    margin-bottom: 1rem;
  
    text-transform: uppercase;
    letter-spacing: 0.08em;
  
    color: var(--muted);
  
    font-size: 0.8rem;
    font-weight: 800;
  }
  
  .impact-metric strong {
  
    font-size: clamp(3rem, 6vw, 6rem);
  
    line-height: 0.9;
    letter-spacing: -0.09em;
  }
  
  .hero-metric {
  
    background:
      linear-gradient(
        135deg,
        rgba(79,125,90,0.16),
        rgba(49,92,114,0.12)
      );
  }
  
  /* ===================================================== */
  /* SCHOLARSHIP */
  /* ===================================================== */
  
  .scholarship-comparison {
  
    margin-top: 2rem;
  
    display: grid;
    grid-template-columns: 1fr 1fr;
  
    gap: 1rem;
  }
  
  .scholarship-box {
  
    padding:
      2rem
      1.5rem;
  
    border-radius: 28px;
  
    text-align: center;
  
    color: white;
  }
  
  .scholarship-box.low {
    background: var(--red);
  }
  
  .scholarship-box.high {
    background: var(--green);
  }
  
  .scholarship-box span {
  
    display: block;
  
    margin-bottom: 1rem;
  
    font-size: 0.9rem;
    font-weight: 800;
  }
  
  .scholarship-box strong {
  
    display: block;
  
    font-size: 5rem;
  
    line-height: 1;
    letter-spacing: -0.1em;
  
    color: white;
  }
  
  /* ===================================================== */
  /* CLOSING */
  /* ===================================================== */
  
  .closing-scene {
  
    padding:
      22vh
      8vw;
  }
  
  .closing-inner {
  
    max-width: 1000px;
  }
  
  /* ===================================================== */
  /* FOOTER */
  /* ===================================================== */
  
  .footer {
  
    padding:
      5rem
      8vw;
  
    border-top: 1px solid var(--line);
  
    background: var(--bg-warm);
  }
  
  .footer p {
  
    max-width: 950px;
  
    font-size: 0.95rem;
  
    line-height: 1.8;
  }

 /* ===================================================== */
/* SAFE MOTION FOUNDATION REPLACEMENT */
/* Replace ONLY your current motion/animation section     */
/* ===================================================== */

/* ===================================================== */
/* MOTION FOUNDATION */
/* ===================================================== */

.metric-card,
.impact-metric,
.process-node,
.activation-map div,
.student-row,
.scholarship-box,
.timeline-row,
.restriction-panel,
.fund-card,
.agreement-page {

  transition:
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===================================================== */
/* SAFE INITIAL STATES */
/* ===================================================== */
/* IMPORTANT:
   We DO NOT hide content by default anymore.
   JS enhancements can add motion classes later.
*/

.process-node,
.activation-map div,
.student-row,
.impact-metric,
.metric-card,
.scholarship-box,
.timeline-row {

  opacity: 1;
  transform: translateY(0);
}

/* ===================================================== */
/* OPTIONAL JS-TRIGGERED STATES */
/* ===================================================== */

.animate-rise {

  opacity: 1;
  transform: translateY(0);
}

.animate-prep {

  opacity: 0;
  transform: translateY(32px);
}

.animate-pop {

  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}

/* ===================================================== */
/* TIMELINE BAR BUILDS */
/* ===================================================== */

.timeline-row i {

  transform-origin: left center;

  transition:
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 700ms ease;
}

/* JS can add this class */

.timeline-row i.animate-fill {

  animation:
    fillBar 1100ms cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}

@keyframes fillBar {

  from {

    transform: scaleX(0);
  }

  to {

    transform: scaleX(1);
  }
}

/* ===================================================== */
/* METRIC CARD HOVER */
/* ===================================================== */

.metric-card:hover,
.impact-metric:hover,
.fund-card:hover,
.restriction-panel:hover {

  transform:
    translateY(-6px);

  box-shadow:
    0 30px 80px rgba(16,16,16,0.14);
}

/* ===================================================== */
/* AGREEMENT IMMERSION */
/* ===================================================== */

.agreement-page {

  transform-origin: center top;

  transition:
    transform 1400ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.agreement-page:hover {

  transform:
    translateY(-4px)
    scale(1.005);
}

/* ===================================================== */
/* FREEZE SCENE TENSION */
/* ===================================================== */

.freeze-scene .path-node.stuck {

  animation:
    subtlePulse 3.4s ease-in-out infinite;
}

@keyframes subtlePulse {

  0% {

    transform: scale(1);
    opacity: 0.8;
  }

  50% {

    transform: scale(1.035);
    opacity: 1;
  }

  100% {

    transform: scale(1);
    opacity: 0.8;
  }
}

/* ===================================================== */
/* HERO INTRO */
/* ===================================================== */

.hero-inner {

  opacity: 0;

  transform:
    translateY(24px);

  animation:
    heroReveal 1.4s cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}

@keyframes heroReveal {

  to {

    opacity: 1;

    transform:
      translateY(0);
  }
}

  /* ===================================================== */
  /* MOBILE */
  /* ===================================================== */
  
  @media (max-width: 1000px) {
  
    h1 {
      font-size: clamp(4rem, 16vw, 7rem);
    }
  
    h2 {
      font-size: clamp(2.2rem, 11vw, 4rem);
    }
  
    .split-scene,
    .agreement-scene,
    .student-scene {
  
      grid-template-columns: 1fr;
  
      gap: 3rem;
    }
  
    .scale-grid,
    .impact-grid,
    .activation-map,
    .scholarship-comparison,
    .fund-grid {
  
      grid-template-columns: 1fr;
    }
  
    .agreement-sticky {
      position: relative;
      top: auto;
    }
  
    .timeline-row {
  
      grid-template-columns: 1fr;
  
      gap: 0.8rem;
    }
  
    .freeze-path {
      flex-direction: column;
      gap: 1rem;
    }
  
    .path-line {
  
      width: 3px;
      height: 50px;
    }
  }