/* ============================================================
   UMS LANDING — cinematic photo hero
   Golden badge intro + institution name + rotating education
   words, over a Ken-Burns crossfade of real graduation photos.
   Brand-themeable via --brand, --brand-dark, --accent
   ============================================================ */

:root {
  --ink: #16233a;
  --muted: #5c6b86;
  --line: #e4eaf3;
  --card: #ffffff;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: #0a1020;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* ---------- Cinematic photo backdrop ---------- */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0a1020; }
.slide {
  position: absolute; inset: 0; background-size: cover; background-position: center 34%;
  opacity: 0; transition: opacity 2.4s ease;
  transform: scale(1.06); will-change: transform, opacity;
}
.slide.is-active { opacity: 1; animation: kenburns 14s ease-out forwards; }

/* THE FIRST PHOTO DOES NOT FADE IN. The 2.4s crossfade is what makes the
   rotation cinematic, and it is exactly wrong on arrival: the visitor has
   already waited for the download and then waits another two and a half
   seconds watching the picture creep up out of the dark. A crossfade needs
   something to fade FROM, and on the first paint there is nothing there.

   landing.js drops the class at the first rotation, so two and three
   cross-fade normally ever after. */
.slide.is-first { transition: none; }

@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0,0,0); }
  to   { transform: scale(1.11) translate3d(-1.2%, -1.6%, 0); }
}

/* Lighter, brand-tinted scrim: the campus photos stay clearly visible while
   the headline text keeps its contrast (darker at the very top and bottom). */
.scrim {
  position: absolute; inset: 0;
  /* LIGHTER AGAIN, 25 Sep 2026: the director's note was that the page reads
     dark. Three things were stacking — this scrim, the grain overlay in
     `overlay` blend (which deepens everything already dark), and the navy
     gradient painted on the body beneath. The graduands were coming out
     muddy, which wastes the one photograph the page has. Held only where the
     words actually sit: a band at the top behind the navigation, and a foot
     that carries the buttons. The middle of the picture is left alone. */
  background:
    radial-gradient(78% 68% at 50% 42%, transparent 0%, rgba(6,10,22,.06) 70%, rgba(5,8,18,.20) 100%),
    linear-gradient(180deg,
      rgba(8,14,30,.40) 0%,
      rgba(8,14,30,.06) 26%,
      rgba(8,14,30,.10) 58%,
      color-mix(in srgb, var(--brand-dark) 38%, rgba(6,10,22,.38)) 100%);
}
/* Subtle film grain / sheen. */
/* `overlay` deepens whatever is already dark, so at .5 this was doing a
   second scrim's worth of work nobody asked it for. */
.grain { position: absolute; inset: 0; opacity: .26; mix-blend-mode: soft-light;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(100% 60% at 50% 100%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%); }

.wrap { position: relative; z-index: 2; }

/* ---------- Nav (floating dark bar, light text) ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(20px, 5vw, 64px);
  background: linear-gradient(180deg, rgba(6,10,22,.55), rgba(6,10,22,0));
  transition: background .3s, backdrop-filter .3s, box-shadow .3s;
}
.nav.scrolled { background: rgba(9,14,28,.85); backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(0,0,0,.28); }
.nav__brand { display: flex; align-items: center; gap: 12px; font-weight: 800;
  letter-spacing: .3px; font-size: 16px; color: #fff; }
.nav__brand img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 6px 18px rgba(0,0,0,.4); }
.nav__links { display: flex; align-items: center; gap: 28px; font-size: 14.5px; font-weight: 500; }
.nav__links a { color: rgba(255,255,255,.82); transition: color .2s; }
.nav__links a:hover { color: #fff; }
.btn { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 999px;
  font-weight: 700; font-size: 14px; color: #1a1200;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 74%, #6e5000));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform .15s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 55%, transparent); }

/* ---------- Hero ---------- */
/* NOT A WHOLE SCREEN. At 100vh the first thing a visitor gets is a full
   screen of photograph and no sign that anything is under it — and this page
   is a doorway: its job is to get a student to the portal and a lecturer to
   the console. At 82vh the top of the platform section shows, which is what
   tells somebody there is more and makes them scroll. */
.hero { position: relative; min-height: 82vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 96px clamp(20px, 6vw, 40px) 60px; color: #fff; }
.hero-inner { max-width: 860px; }

/* Badge with golden circular loading motion. */
.badge-stage { position: relative; width: 148px; height: 148px; margin: 0 auto 26px; }
.badge-stage .ring {
  position: absolute; inset: -20px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, var(--accent) 18%, #fff2cf 30%,
              transparent 46%, transparent 70%, var(--accent) 92%, transparent);
  filter: blur(4px); opacity: .95; animation: spin 4.5s linear infinite;
}
.badge-stage .ring2 {
  position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 55%, transparent) inset,
              0 0 22px color-mix(in srgb, var(--accent) 40%, transparent);
  animation: spin 10s linear infinite reverse;
}
.badge-stage .ring-dash {
  position: absolute; inset: -30px; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  opacity: .6; animation: spin 22s linear infinite;
}
.badge-stage img {
  position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
  border-radius: 50%; object-fit: cover; background: #fff;
  box-shadow: 0 22px 60px rgba(0,0,0,.55), 0 0 0 5px rgba(7,11,24,.55),
              0 0 44px color-mix(in srgb, var(--accent) 45%, transparent);
  animation: float 6s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 0 16px; font-weight: 700; font-size: 12.5px; letter-spacing: 3px;
  text-transform: uppercase; color: color-mix(in srgb, var(--accent) 45%, white); }
.eyebrow .line { width: 34px; height: 1px; background: color-mix(in srgb, var(--accent) 60%, transparent); }
.eyebrow--dark { justify-content: flex-start; color: var(--brand-dark); }
.eyebrow--dark .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.hero h1 { font-family: var(--serif); font-weight: 600;
  font-size: clamp(38px, 6.4vw, 88px); line-height: 1.02; letter-spacing: -.5px;
  margin: 0 0 14px; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.5); }

.rotator { font-size: clamp(17px, 2.3vw, 27px); font-weight: 500; margin: 0 0 20px;
  color: #eaf0ff; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.rot { display: inline-grid; vertical-align: bottom; }
.rot .rw { grid-area: 1 / 1; font-family: var(--serif); font-style: italic; font-weight: 700;
  color: color-mix(in srgb, var(--accent) 40%, white);
  opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; }
.rot .rw.is-on { opacity: 1; transform: none; }

.lede { max-width: 620px; margin: 0 auto 30px; font-size: clamp(14px, 1.5vw, 16.5px);
  line-height: 1.62; color: rgba(233,239,255,.9); text-shadow: 0 1px 12px rgba(0,0,0,.5); }

.cta-row { display: flex; gap: 13px; flex-wrap: wrap; justify-content: center; }
.cta { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px;
  border-radius: 12px; font-weight: 700; font-size: 15px;
  transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; }
.cta--primary { color: #1a1200;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 74%, #6e5000));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 40%, transparent); }
.cta--primary b { transition: transform .2s; }
.cta--primary:hover { transform: translateY(-3px); box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 58%, transparent); }
.cta--primary:hover b { transform: translateX(4px); }
.cta--ghost { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.42);
  color: #fff; backdrop-filter: blur(4px); }
.cta--ghost:hover { transform: translateY(-3px); background: rgba(255,255,255,.18);
  border-color: color-mix(in srgb, var(--accent) 70%, white); }

.scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-size: 11.5px; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(255,255,255,.7); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(6px);} }

/* ---------- Staged entrance ("loading" reveal) ---------- */
.reveal-1,.reveal-2,.reveal-3,.reveal-4,.reveal-5,.reveal-6 {
  opacity: 0; transform: translateY(20px); animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal-1 { animation-delay: .15s; }
.reveal-2 { animation-delay: .55s; }
.reveal-3 { animation-delay: .8s; }
.reveal-4 { animation-delay: 1.05s; }
.reveal-5 { animation-delay: 1.3s; }
.reveal-6 { animation-delay: 1.55s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Modules (bright) ---------- */
.section { position: relative; z-index: 2; background: #f7faff; }
.section { max-width: none; padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 64px); }
.section > * { max-width: 1300px; margin-left: auto; margin-right: auto; }
.section h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3.6vw, 44px);
  letter-spacing: -.4px; margin: 8px auto 12px; line-height: 1.08; color: var(--ink); }
.section .sub { color: var(--muted); max-width: 620px; margin: 0 0 44px; line-height: 1.6; font-size: 16px; }
.section .eyebrow--dark { display: inline-flex; gap: 9px; }

.modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.mod { padding: 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 6px 20px -12px rgba(20,35,58,.2); transition: transform .18s, box-shadow .2s, border-color .2s; }
.mod.anim { opacity: 0; transform: translateY(18px); }
.mod.anim.reveal { opacity: 1; transform: none; transition: opacity .6s, transform .6s; }
.mod:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -18px rgba(20,35,58,.34);
  border-color: color-mix(in srgb, var(--brand) 34%, var(--line)); }
.mod .m-ico { font-size: 26px; }
.mod h4 { margin: 12px 0 6px; font-size: 16px; color: var(--ink); }
.mod p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* ============================================================
   THE PLATFORM BAND
   ------------------------------------------------------------
   A desk at night, seen in perspective, with somebody working in
   the system. The scene is built from real 3D layers — the screen,
   the desk top and the figure each sit at their own translateZ
   inside one preserve-3d stage — so the slow drift produces true
   parallax between them rather than a flat picture sliding about.

   Beside it the fourteen modules are set as a registry, grouped
   into the four things a university does. Fourteen equal cards say
   "we have fourteen features"; four named groups say "we run the
   institution", which is the claim this band exists to make.
   ============================================================ */
/* The band is lit, not tinted. One flat navy read as switched off, so the
   light comes from four sources at different temperatures — a warm gold from
   the desk lamp, a cyan wash off the monitor, a violet cast in the far corner
   and a deep teal floor bounce. They meet over near-black, which is what stops
   a dark section reading as a single sheet of blue. */
.band {
  position: relative; z-index: 2; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(58% 62% at 74% 6%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 62%),
    radial-gradient(78% 74% at 88% 30%, rgba(24, 168, 214, .40) 0%, transparent 64%),
    radial-gradient(64% 68% at 4% 84%, rgba(96, 70, 210, .34) 0%, transparent 62%),
    radial-gradient(90% 80% at 42% 108%, rgba(12, 118, 132, .30) 0%, transparent 66%),
    linear-gradient(168deg, #050c1b 0%, #071427 46%, #04101f 100%);
  padding: clamp(64px, 8vw, 108px) clamp(20px, 5vw, 64px) clamp(72px, 9vw, 120px);
  color: #cfdcf1;
}
/* A hairline of the university's gold, where the band meets the hero. */
.band::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; z-index: 4;
  background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--accent) 78%, transparent);
  opacity: .5;
}
.band__inner { position: relative; z-index: 3; max-width: 1300px; margin: 0 auto; }

/* On a wide screen the lede holds the left half open and the desk stands in
   the right half; the registry then runs full width beneath both. Reserving
   the height here is what keeps the scene off the registry text — behind it,
   the desk cost the two right-hand columns their contrast. */
.band__lede { max-width: 38ch; margin-bottom: clamp(40px, 5vw, 64px); }
@media (min-width: 1100px) {
  .band__lede { min-height: clamp(310px, 27vw, 400px); padding-top: clamp(8px, 2vw, 30px); }
}
.band__lede h2 {
  font-family: var(--serif); font-weight: 600; color: #fff;
  font-size: clamp(28px, 3.8vw, 46px); line-height: 1.1; letter-spacing: -.02em;
  text-wrap: balance; margin: 0 0 16px;
}
.band__lede p { margin: 0; color: #9db1d2; line-height: 1.6; font-size: clamp(15px, 1.4vw, 17px); }

/* ---------- The registry ---------- */
.registry {
  display: grid; gap: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
/* Each group carries its own light. The colour is doing work — it is what
   tells you at a glance that Finance and HR belong together and Timetable does
   not — so it is four deliberate hues, not decoration. */
.grp:nth-child(1) { --tone: var(--accent); }
.grp:nth-child(2) { --tone: #3fc9f5; }
.grp:nth-child(3) { --tone: #46dba0; }
.grp:nth-child(4) { --tone: #a98cff; }

.grp > h3 {
  margin: 0 0 14px; padding-bottom: 11px;
  font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: color-mix(in srgb, var(--tone, var(--accent)) 82%, #fff);
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  position: relative;
}
/* A short rule in the group's own colour, sitting on the divider. */
.grp > h3::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 34px; height: 2px;
  border-radius: 2px; background: var(--tone, var(--accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--tone, var(--accent)) 60%, transparent);
}
.grp ul { list-style: none; margin: 0; padding: 0; }
.grp li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.grp li:last-child { border-bottom: 0; }
.ent__ico {
  width: 22px; height: 22px; margin-top: 1px;
  color: color-mix(in srgb, var(--tone, var(--accent)) 58%, #93b6e6);
  transition: color .28s cubic-bezier(.2, .7, .3, 1), transform .28s cubic-bezier(.2, .7, .3, 1);
}
.ent__txt { display: block; font-size: 13.5px; line-height: 1.5; color: #8ea4c6; }
.ent__txt b { display: block; font-size: 15px; font-weight: 600; color: #f0f5ff; margin-bottom: 2px; }
.grp li:hover .ent__ico { color: var(--tone, var(--accent)); transform: translateY(-1px); }
.grp li:hover .ent__txt { color: #adc0de; }

/* ---------- The desk ---------- */
.desk {
  position: absolute; z-index: 1; pointer-events: none;
  right: clamp(8px, 3vw, 54px); top: clamp(46px, 6vw, 92px);
  width: min(560px, 44vw); height: clamp(300px, 26vw, 390px);
  perspective: 1000px; perspective-origin: 58% 42%;
  /* Fades into the band rather than ending on a hard edge. */
  -webkit-mask-image: radial-gradient(94% 104% at 52% 48%, #000 56%, transparent 94%);
  mask-image: radial-gradient(94% 104% at 52% 48%, #000 56%, transparent 94%);
}
.desk__stage {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(12deg) rotateY(-19deg);
  animation: deskDrift 26s ease-in-out infinite;
}
@keyframes deskDrift {
  0%, 100% { transform: rotateX(12deg) rotateY(-19deg) translateZ(0); }
  50%      { transform: rotateX(9.5deg) rotateY(-13.5deg) translateZ(14px); }
}
.desk__stage > * { position: absolute; }

/* Floor: a faint measured grid, receding. It gives the perspective something
   to be measured against — without it the tilt reads as a skewed image. */
.desk__floor {
  left: -26%; right: -26%; bottom: -6%; height: 78%;
  transform: rotateX(75deg) translateZ(-70px);
  background:
    repeating-linear-gradient(90deg, rgba(132, 178, 244, .3) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(132, 178, 244, .3) 0 1px, transparent 1px 64px);
  -webkit-mask-image: linear-gradient(to top, #000 2%, transparent 66%);
  mask-image: linear-gradient(to top, #000 2%, transparent 66%);
}
/* The light the screen throws into the room. */
.desk__glow {
  left: 10%; top: 0; width: 76%; height: 78%; transform: translateZ(-30px);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 58%, #7fb6ff) 0%, transparent 70%);
  filter: blur(34px); opacity: .78;
}

.desk__screen {
  left: 14%; top: 2%; width: 66%; height: 58%;
  transform: translateZ(74px); transform-style: preserve-3d;
}
.scr {
  position: absolute; inset: 0; border-radius: 9px; overflow: hidden;
  background: linear-gradient(168deg, #12253f, #0c1a2e);
  border: 1px solid rgba(146, 184, 240, .34);
  box-shadow: 0 34px 66px -26px rgba(0, 0, 0, .85), 0 0 62px -18px rgba(90, 150, 235, .5);
}
/* The two faces that give the monitor thickness. Each is hinged on its own
   edge and turned a quarter turn, so they are genuinely perpendicular to the
   screen rather than a drawn highlight pretending to be. */
.scr__side-panel {
  position: absolute; right: 0; top: 0; width: 17px; height: 100%;
  transform-origin: right center; transform: rotateY(-90deg);
  background: linear-gradient(to bottom, #16304f, #071427);
  border-radius: 0 4px 4px 0;
}
.scr__top-panel {
  position: absolute; left: 0; top: 0; width: 100%; height: 17px;
  transform-origin: center top; transform: rotateX(90deg);
  background: linear-gradient(to right, #0d1e35, #1b3a5e 55%, #0d1e35);
  border-radius: 4px 4px 0 0;
}
/* Neck and foot, standing behind and below the panel. */
.desk__stand { position: absolute; left: 40%; top: 52%; width: 20%; height: 22%;
  transform: translateZ(52px); transform-style: preserve-3d; }
.desk__stand i {
  position: absolute; left: 42%; top: 0; width: 16%; height: 74%;
  background: linear-gradient(to right, #0a1730, #1d3a5e 50%, #0a1730);
  border-radius: 2px;
}
.desk__stand b {
  position: absolute; left: 6%; bottom: 0; width: 88%; height: 12px;
  transform: rotateX(74deg); transform-origin: center bottom;
  background: linear-gradient(to bottom, rgba(150,190,246,.5), rgba(120,160,214,.12));
  border-radius: 50%; filter: blur(.4px);
}

/* Desk lamp: a warm pool of light with a stem, the second light source in the
   scene. Without it the whole picture is one temperature. */
.desk__lamp {
  left: 3%; top: 20%; width: 16%; height: 46%; transform: translateZ(96px);
}
.desk__lamp i {
  position: absolute; left: 46%; top: 26%; width: 3px; height: 74%;
  background: linear-gradient(to bottom, rgba(190,214,250,.75), rgba(140,175,230,.2));
  border-radius: 2px;
}
.desk__lamp u {
  position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 96%, #fff) 0%,
              color-mix(in srgb, var(--accent) 52%, transparent) 40%, transparent 74%);
  filter: blur(3px);
  animation: lampWarm 8s ease-in-out infinite;
}
@keyframes lampWarm { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }

/* A mug on the desk. Small, but it is the detail that says somebody is here. */
.desk__mug { left: 79%; top: 63%; width: 7%; height: 12%; transform: translateZ(126px); }
.desk__mug i {
  position: absolute; inset: 0; border-radius: 2px 2px 5px 5px;
  background: linear-gradient(to right, #123354, #1e4f7d 55%, #0e2742);
  box-shadow: inset 0 2px 0 rgba(180, 214, 252, .5);
}
.desk__mug s {
  position: absolute; right: -34%; top: 26%; width: 40%; height: 44%;
  border: 2.5px solid #1a4470; border-left: 0; border-radius: 0 60% 60% 0;
}
.scr__bar {
  height: 17px; display: flex; align-items: center; gap: 5px; padding-inline: 9px;
  background: rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(146, 184, 240, .16);
}
.scr__bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(163, 197, 245, .45); }
.scr__body { display: grid; grid-template-columns: 22% 1fr; height: calc(100% - 17px); }
.scr__side {
  padding: 11px 8px; display: flex; flex-direction: column; gap: 8px;
  background: rgba(0, 0, 0, .2); border-right: 1px solid rgba(146, 184, 240, .12);
}
.scr__side u { height: 5px; border-radius: 3px; background: rgba(150, 186, 240, .3); }
.scr__side u:first-child { background: color-mix(in srgb, var(--accent) 66%, transparent); width: 74%; }
.scr__main { padding: 12px 13px; display: flex; flex-direction: column; gap: 9px; }
.scr__head { height: 8px; width: 46%; border-radius: 4px; background: rgba(190, 214, 248, .58); }
.scr__rows { display: flex; flex-direction: column; gap: 6px; }
/* Rows arriving one after another: results being entered, not a loading bar. */
.scr__rows b {
  display: block; height: 5px; border-radius: 3px;
  background: rgba(150, 186, 240, .34); transform-origin: left;
  animation: scrRow 6.2s cubic-bezier(.16, 1, .3, 1) infinite;
  animation-delay: var(--d);
}
.scr__rows b:nth-child(3n) { background: color-mix(in srgb, var(--accent) 46%, transparent); }
@keyframes scrRow {
  0%       { transform: scaleX(.06); opacity: 0; }
  9%, 62%  { transform: scaleX(1); opacity: 1; }
  78%, 100%{ transform: scaleX(1); opacity: .22; }
}
.scr__chart { margin-top: auto; display: flex; align-items: flex-end; gap: 5px; height: 26%; }
.scr__chart s {
  flex: 1; height: var(--h); border-radius: 2px 2px 0 0; transform-origin: bottom;
  background: linear-gradient(to top, color-mix(in srgb, var(--brand) 74%, #79b0ff), transparent);
  animation: scrBar 7s ease-in-out infinite;
}
.scr__chart s:nth-child(2n) { animation-delay: -2.3s; }
.scr__chart s:nth-child(3n) { animation-delay: -4.1s; }
@keyframes scrBar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.62); } }

/* Desk top: a plane lying flat, in front of the screen. */
.desk__top {
  left: 0; right: 0; top: 60%; height: 44%;
  transform: rotateX(78deg) translateZ(30px);
  background: linear-gradient(to bottom, rgba(132, 172, 228, .3), rgba(122, 160, 214, .04));
  border-top: 1px solid rgba(176, 209, 252, .55);
  border-radius: 3px;
}
.desk__keys {
  left: 26%; width: 42%; top: 63%; height: 10%;
  transform: rotateX(78deg) translateZ(38px);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; align-content: start;
}
.desk__keys span {
  height: 5px; border-radius: 1px; background: rgba(178, 210, 252, .5);
  animation: keyTap 5.4s ease-in-out infinite;
}
.desk__keys span:nth-child(2) { animation-delay: -.7s; }
.desk__keys span:nth-child(3) { animation-delay: -1.9s; }
.desk__keys span:nth-child(5) { animation-delay: -2.6s; }
.desk__keys span:nth-child(7) { animation-delay: -3.4s; }
.desk__keys span:nth-child(9) { animation-delay: -4.2s; }
@keyframes keyTap { 0%, 92%, 100% { opacity: .3; } 95% { opacity: .95; } }

/* The person, nearest the viewer, seen from behind at the desk. Filled almost
   black so they read as a silhouette against the screen light, with a thin rim
   in that same light so the shape does not simply vanish into the band. */
/* Head and shoulders overlap the foot of the monitor. Anywhere lower and the
   silhouette is dark-on-dark and simply disappears; against the screen it is
   unmistakably somebody sitting there. */
.desk__person {
  left: 34%; width: 32%; top: 40%; height: 52%;
  transform: translateZ(118px);
  /* One breath of movement, so somebody is sitting there rather than a decal. */
  animation: sitBreathe 7.5s ease-in-out infinite;
}
.desk__person svg { width: 100%; height: 100%; display: block; }
/* Drawn as a single closed path. Head and shoulders as separate shapes leave a
   seam that reads as a circle floating over the monitor — a camera lens. */
.p-figure { fill: #04101f; stroke: rgba(150, 192, 250, .34); stroke-width: 1.5; }
@keyframes sitBreathe {
  0%, 100% { transform: translateZ(118px) translateY(0); }
  50%      { transform: translateZ(118px) translateY(-2px); }
}

/* ---------- The desk, smaller ---------- */
@media (max-width: 1099px) {
  /* Below the two-part composition there is no right half to stand in, so the
     scene drops behind the lede as atmosphere rather than as a subject. */
  .desk {
    right: -14%; top: auto; bottom: auto;
    width: min(620px, 76vw); height: clamp(240px, 38vw, 330px);
    opacity: .3;
  }
}
@media (max-width: 720px) {
  .desk { display: none; }
  .band { padding-bottom: clamp(56px, 9vw, 80px); }
}

@media (prefers-reduced-motion: reduce) {
  .desk__stage, .scr__rows b, .scr__chart s, .desk__keys span, .desk__person {
    animation: none !important;
  }
  .scr__rows b { transform: scaleX(1); opacity: 1; }
}

/* ---------- Footer ---------- */
.footer { position: relative; z-index: 2; padding: 46px 6vw 62px; text-align: center;
  color: #b9c6e0; font-size: 13px; background: var(--brand-dark); border-top: 4px solid var(--accent); }
.footer .fbrand { display: inline-flex; align-items: center; gap: 10px; color: #fff;
  font-weight: 700; margin-bottom: 10px; font-size: 16px; }
.footer img { width: 30px; height: 30px; border-radius: 50%; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .nav__links a:not(.btn) { display: none; }
  .badge-stage { width: 120px; height: 120px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-active, .badge-stage .ring, .badge-stage .ring2, .badge-stage .ring-dash,
  .badge-stage img, .scroll-hint,
  .reveal-1,.reveal-2,.reveal-3,.reveal-4,.reveal-5,.reveal-6 { animation: none !important; }
  .reveal-1,.reveal-2,.reveal-3,.reveal-4,.reveal-5,.reveal-6 { opacity: 1; transform: none; }
}

/* ==========================================================================
   THE DAYLIGHT BAND
   ==========================================================================
   Everything from the hero to the footer was one continuous dark slab — the
   platform section, the four-column registry and the footer, all navy, with a
   dead area at the foot where the short columns ran out. That run is what
   reads as "a bit dark": not any one colour, but its length.

   So one band of daylight near the end, carrying the only photograph of
   actual people below the fold, and closing the page on the three doors
   rather than on a copyright line.

   THE PHOTOGRAPH IS 1328px WIDE AND THAT IS ALL IT IS. It was cropped out of
   a picture of a printed graduation booklet, so it is framed at a size it can
   carry rather than stretched across the viewport, where the print screen
   would show.
   ========================================================================== */
.daylight {
  position: relative; z-index: 2;
  background: #fdfbf7;
  padding: clamp(3rem, 7vw, 5rem) clamp(20px, 6vw, 40px);
  border-top: 3px solid var(--accent);
}
.daylight-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.daylight-photo { margin: 0; }
.daylight-photo img {
  width: 100%; height: auto; display: block;
  border-radius: 14px;
  box-shadow: 0 26px 60px -28px rgba(7, 31, 51, .55);
}
.daylight-eyebrow {
  margin: 0 0 .5rem; font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand);
}
.daylight-words h2 {
  margin: 0 0 .7rem; color: #0b1f33;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); line-height: 1.1;
}
.daylight-lede {
  margin: 0 0 1.4rem; color: #40566b; max-width: 34rem;
  font-size: clamp(1rem, .96rem + .25vw, 1.08rem); line-height: 1.6;
}
.daylight-doors { display: flex; gap: .6rem; flex-wrap: wrap; }
.dbtn {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .6rem 1.15rem; border-radius: 10px;
  border: 1px solid rgba(11, 31, 51, .22); color: #0b1f33;
  font-weight: 700; text-decoration: none; background: transparent;
  transition: background .16s ease, border-color .16s ease;
}
.dbtn:hover { background: rgba(11, 31, 51, .06); border-color: rgba(11, 31, 51, .4); }
.dbtn--gold {
  background: var(--accent); border-color: var(--accent); color: #241a05;
}
.dbtn--gold:hover { filter: brightness(1.06); background: var(--accent); }

@media (max-width: 860px) {
  .daylight-inner { grid-template-columns: 1fr; }
  .daylight-photo { order: 1; }
  .daylight-words { order: 2; }
}