/* ============================================================
   USTEM Academy — Practical Humanoid Robotics
   Light "institute" theme: white canvas, navy slabs, cyan accent.
   Shared by course1.html and curriculum.html.
   ============================================================ */

:root {
  /* surfaces */
  --white:#ffffff;
  --soft:#f3f8fd;
  --soft2:#e9f2fc;
  --navy:#0e2260;
  --navy2:#16307f;
  --navy3:#1b3fa0;

  /* brand */
  --blue:#1f4fd8;
  --blue-lt:#3b7bf0;
  --cyan:#00b2e3;
  --cyan-lt:#57d3f5;
  --violet:#6d5ce8;

  /* ink */
  --ink:#16225c;
  --body:#55617f;
  --muted:#8a94ad;
  --line:#e2eaf6;
  --line-dk:rgba(255,255,255,.16);

  --r-xl:24px;
  --r-lg:18px;
  --r-md:12px;
  --r-pill:100px;

  --shadow-sm:0 2px 10px rgba(22,34,92,.06);
  --shadow:0 16px 44px rgba(22,34,92,.10);
  --shadow-lg:0 26px 70px rgba(10,26,80,.18);

  /* ── fluid type scale ──────────────────────────────────
     Every step is clamp(floor, linear ramp, ceiling). The ramp is tuned so
     each step lands on its old fixed size at a 1440px-wide window, keeps
     growing to a ceiling on 2K/4K monitors, and bottoms out at a
     phone-legible floor — so nothing on the page is stuck at one size.
     The bases are 11.5 / 12.5 / 13.5 / 14 / 15 / 16 / 18 / 20px. */
  --fs-3xs: clamp(11px,   calc(8.5px  + .21vw),  14px);
  --fs-2xs: clamp(11.5px, calc(9.2px  + .23vw),  15px);
  --fs-xs:  clamp(12.5px, calc(9.9px  + .25vw),  16px);
  --fs-sm:  clamp(13px,   calc(10.2px + .264vw), 17px);
  --fs-base:clamp(14px,   calc(10.9px + .285vw), 18px);
  --fs-md:  clamp(14.5px, calc(11.6px + .305vw), 19.5px);
  --fs-lg:  clamp(16px,   calc(13px   + .35vw),  22px);
  --fs-xl:  clamp(17px,   calc(14.4px + .39vw),  24px);

  /* Gutter and content width both track the window: at 1440px they land on
     the 1180px column the design was drawn at, then keep opening up so a
     2560px monitor isn't a narrow strip of content in a sea of margin. */
  --pad:clamp(20px,5vw,140px);
  --maxw:clamp(1180px,82vw,1520px);
  /* a readable measure for centred copy — never wider than its parent */
  --measure:min(100%,clamp(560px,46vw,780px));
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--white); color:var(--body);
  font-family:'Inter',system-ui,sans-serif;
  font-size:var(--fs-base); line-height:1.65; overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; }
::selection { background:var(--cyan); color:#fff; }

::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--soft); }
::-webkit-scrollbar-thumb { background:#c3d4ea; border-radius:20px; border:3px solid var(--soft); }
::-webkit-scrollbar-thumb:hover { background:#9fb8db; }

/* ── shared typography ─────────────────────────────────── */
h1,h2,h3,h4,h5 { font-family:'Rubik',sans-serif; color:var(--ink); line-height:1.18; letter-spacing:-.018em; }
.hl { color:var(--cyan); }
.accent-cyan { color:var(--cyan-lt); }
.accent-violet { color:#fff; }
/* the same cyan reads dull on navy, so lighten it there */
.panel-sec.alt .hl,
.team-slab .hl,
.cta-band .hl,
.page-head .hl { color:var(--cyan-lt); }

.wrap { max-width:var(--maxw); margin:0 auto; }
section { padding:clamp(52px,5.6vw,120px) var(--pad); position:relative; }
/* Every unit is its own screen: at least a viewport tall, content centred
   vertically. min-height (not height) and svh so it tracks whatever window
   it's opened in — and so anything taller than a screen (a phone, a long
   module list) still just grows instead of being clipped.
   The hero is the one exception: it shares its screen with the university
   strip, so .screen-hero below owns that viewport instead. */
section:not(.hero), .screen-hero {
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
}
/* Hero + universities = one screen. The strip keeps its natural height at
   the bottom and the hero absorbs the rest, so the pair fills the window
   exactly on any monitor without either one being given a fixed height. */
.screen-hero > .hero { flex:1 0 auto; justify-content:center; }
.screen-hero > .hero, .screen-hero > .trust { display:flex; flex-direction:column; }
.screen-hero > .trust { flex:0 0 auto; }
/* Flex/grid items default to min-width:auto, which floors their shrink at
   their content's intrinsic min-content size. The <video> tiles in the
   Learn collage are the deepest offender (a portrait clip's native pixel
   width outsizes its tile on narrow phones), and that refusal-to-shrink
   propagates all the way up through every flex/grid layer back to the
   section itself — widening .panel past the viewport at ~320-360px
   screens even though every explicit width in the chain looks correct.
   Zeroing min-width at each flex/grid layer breaks that propagation. */
section > *, .learn-grid, .learn-copy, .collage, .c-row, .tile,
.team-slab, .team-grid, .otbor-grid, .cta-inner, .modules {
  min-width:0;
}

.eyebrow {
  display:inline-block; font-size:var(--fs-3xs); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:12px;
}
.sec-title { font-size:clamp(24px,calc(21px + 1.18vw),46px); font-weight:700; margin-bottom:14px; }
.sec-desc { font-size:var(--fs-md); max-width:var(--measure); margin-bottom:clamp(28px,3.5vw,52px); }
.center { text-align:center; }
.center .sec-desc { margin-left:auto; margin-right:auto; }

/* ── buttons ───────────────────────────────────────────── */
/* Rounded rectangle, not a pill: at full width a 100px radius turns the
   button into a lozenge. 12px matches the form inputs' corners.
   Outlined variants carry the border and drop 2px of padding so every
   button ends up the same height. */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Rubik',sans-serif; font-size:var(--fs-sm); font-weight:600;
  padding:clamp(13px,1.05vw,19px) clamp(24px,2.1vw,40px); border-radius:12px; border:0;
  cursor:pointer; text-decoration:none; white-space:nowrap; line-height:1.2;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.btn-outline, .btn-ghost { padding:clamp(11px,.9vw,17px) clamp(22px,1.95vw,38px); border:2px solid transparent; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--blue); color:#fff; box-shadow:0 8px 24px rgba(31,79,216,.30); }
.btn-primary:hover { background:#1a45c4; box-shadow:0 14px 34px rgba(31,79,216,.40); }
.btn-ghost { border-color:rgba(255,255,255,.5); color:#fff; background:transparent; }
.btn-ghost:hover { background:#fff; color:var(--navy); border-color:#fff; }
.btn-outline { border-color:var(--cyan); color:var(--blue); background:#fff; }
.btn-outline:hover { background:var(--cyan); color:#fff; border-color:var(--cyan); }
.btn-block { width:100%; }

/* ── nav ─────────────────────────────────────────────────
   Logo only, on a permanently transparent bar so it blends into whatever
   section is behind it. Only the logo colour flips — see course1.js, which
   adds .on-dark while a dark section sits under the bar. */
nav {
  position:fixed; inset:0 0 auto 0; z-index:200;
  display:flex; align-items:center;
  padding:clamp(12px,1vw,22px) var(--pad);
  background:transparent; transition:padding .3s;
}
nav.stuck { padding:clamp(9px,.75vw,17px) var(--pad); }
.nav-logo { flex-shrink:0; display:flex; transition:opacity .2s, transform .2s; }
.nav-logo:hover { opacity:.85; transform:translateY(-1px); }
/* Mobile only (see course1.js): the logo fades out while text, photos or
   video sit directly beneath it, and returns once that patch of the page
   is genuinely empty background again. */
.nav-logo.nav-logo-hidden { opacity:0; pointer-events:none; }
.nav-logo img {
  height:clamp(26px,2.36vw,46px); width:auto;
  transition:filter .35s ease;
  /* navy artwork by default (light sections); inverted to white over dark ones */
  filter:none;
}
nav.on-dark .nav-logo img { filter:brightness(0) invert(1); }

/* ── hero ──────────────────────────────────────────────── */
/* Everything with a vertical cost inside the first screen is measured in
   svh as well as px/vw: the hero and the university strip have to add up to
   one window, so a short window has to be able to take height back out of
   them rather than overflowing. */
.hero {
  padding-top:clamp(76px,11svh,160px); padding-bottom:clamp(20px,4.4svh,80px);
  background:#0d2364;
  color:#fff; overflow:hidden;
}
.hero-inner {
  position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,72px); align-items:center;
}
.hero-title {
  font-size:clamp(30px,calc(24px + 1.95vw),68px); font-weight:300; font-style:italic;
  color:#fff; letter-spacing:-.022em; line-height:1.08; margin-bottom:10px;
  text-shadow:0 0 48px rgba(120,190,255,.32);
}
.hero-title span { display:block; font-style:normal; font-weight:700; }
/* the spans already break the line; the authored <br> would add an empty one */
.hero-title br { display:none; }
.hero-kicker { font-family:'Rubik',sans-serif; font-size:clamp(14px,calc(11.5px + .38vw),21px); font-weight:500; color:#8fb6f0; margin-bottom:14px; }
.hero-sub { font-size:var(--fs-md); color:#c3d5f2; max-width:min(100%,clamp(420px,33vw,620px)); margin-bottom:clamp(16px,3svh,34px); }
.hero-actions { display:flex; gap:11px; flex-wrap:wrap; margin-bottom:clamp(18px,3.4svh,44px); }

.hero-stats { display:flex; gap:clamp(14px,2.4vw,44px); flex-wrap:wrap; }
.hero-stat { display:flex; flex-direction:column; }
.hero-stat b { font-family:'Rubik',sans-serif; font-size:clamp(22px,calc(17px + .9vw),40px); font-weight:700; color:#fff; line-height:1; }
.hero-stat span { font-size:var(--fs-3xs); text-transform:uppercase; letter-spacing:.1em; color:#8fa6cf; margin-top:6px; }
.hero-stat-div { width:1px; background:rgba(255,255,255,.22); }

.hero-visual { position:relative; display:flex; align-items:center; justify-content:center; }
/* width picks the size on a wide window, max-height takes over on a short
   one (the browser rescales the width to match, keeping the aspect ratio) —
   without it the robot alone is taller than a 1366x768 screen */
.hero-visual img {
  position:relative; width:min(100%,clamp(240px,23vw,480px));
  max-height:min(46svh,620px); height:auto;
  filter:drop-shadow(0 30px 56px rgba(0,0,0,.5)); animation:float 7s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

/* ── compact page header (curriculum page) ─────────────── */
.page-head {
  padding:clamp(96px,8.6vw,170px) var(--pad) clamp(44px,4.4vw,90px);
  background:#16307f;
  color:#fff; position:relative; overflow:hidden; text-align:center;
}
.page-head h1 { font-size:clamp(26px,calc(21px + 1.6vw),56px); font-weight:700; color:#fff; margin-bottom:12px; position:relative; z-index:2; }
.page-head p { font-size:var(--fs-md); color:#bacce9; max-width:var(--measure); margin:0 auto; position:relative; z-index:2; }
.page-head .eyebrow { color:var(--cyan-lt); position:relative; z-index:2; }
/* The curriculum page has no enrolment band of its own, so both of its
   actions — back to the course, and apply — live here under the header,
   sharing one pill geometry: the back link outlined, the CTA filled. */
.page-actions {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(9px,.85vw,16px); margin-top:clamp(18px,2.6svh,34px);
  position:relative; z-index:2;
}
/* Reads as a button rather than a faint caption: white text on a bordered
   pill, with an arrow that pulls left on hover. */
.page-back {
  display:inline-flex; align-items:center; gap:10px;
  padding:clamp(10px,.85vw,16px) clamp(18px,1.5vw,30px);
  font-family:'Rubik',sans-serif; font-size:var(--fs-sm); font-weight:600; letter-spacing:.01em;
  color:#fff; text-decoration:none; border-radius:var(--r-pill);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.34);
  position:relative; z-index:2;
  transition:background .25s, border-color .25s, color .25s, transform .2s;
}
.page-back:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.6); transform:translateY(-2px); }
.page-back svg { width:clamp(15px,1.2vw,21px); height:auto; flex-shrink:0; transition:transform .2s; }
.page-back:hover svg { transform:translateX(-4px); }
/* the primary of the pair — solid cyan reads as the action to take, and is
   the one colour on the navy header that carries dark text at full contrast */
.page-cta { background:var(--cyan); color:#0a1c4f; border-color:var(--cyan); }
.page-cta:hover { background:var(--cyan-lt); border-color:var(--cyan-lt); color:#0a1c4f; }
/* its arrow points forward, so it leans the other way */
.page-cta:hover svg { transform:translateX(4px); }

/* ── trust strip ───────────────────────────────────────── */
.trust { padding:clamp(16px,3.6svh,72px) var(--pad); background:var(--white); text-align:center; }
.trust p { font-size:clamp(14px,calc(11px + .42vw),22px); color:var(--ink); margin-bottom:clamp(12px,2.6svh,38px); }
.trust p b { color:var(--blue); font-weight:700; }
.marquee { position:relative; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track { display:flex; align-items:center; gap:clamp(32px,5vw,110px); width:max-content; animation:slide 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
@keyframes slide { to { transform:translateX(-50%); } }
.marquee img { height:min(clamp(28px,2.5vw,48px),4.2svh); width:auto; object-fit:contain; filter:grayscale(1); opacity:.6; transition:filter .3s,opacity .3s; }
.marquee-item:hover img { filter:grayscale(0); opacity:1; }
/* Heights are tuned per logo so every mark occupies a similar optical area.
   Sizing them all to one height makes square marks (Stanford, Twente, HKUST)
   look tiny next to wide wordmarks (Purdue, Arizona). Each ramp is that
   logo's design height expressed in vw, so the whole strip scales together —
   and min(…, svh) lets a short window shrink the strip proportionally so it
   still shares one screen with the hero. */
.m-stanford img { height:min(clamp(88px,7.92vw,152px),13svh); }
.m-twente   img { height:min(clamp(74px,6.67vw,128px),11svh); }
.m-hkust    img { height:min(clamp(52px,4.58vw,88px),7.6svh); }
.m-sapienza img { height:min(clamp(32px,2.78vw,54px),4.6svh); }
.m-arizona  img { height:min(clamp(30px,2.64vw,50px),4.4svh); }
.m-purdue   img { height:min(clamp(26px,2.3vw,44px),3.8svh); }

/* ── panels ────────────────────────────────────────────── */
.panel-sec { background:var(--soft); }
.panel-sec.alt { background:var(--navy2); }
.panel {
  background:#fff; border-radius:var(--r-xl); padding:clamp(26px,3.6vw,78px);
  box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.7);
  max-width:var(--maxw); margin:0 auto; position:relative;
}
.panel-sec.alt .panel { box-shadow:var(--shadow-lg); }
.panel-sec.alt .eyebrow { color:var(--cyan-lt); }
.panel-sec.alt .sec-title { color:#fff; }
.panel-sec.alt .sec-desc { color:#bacce9; }

/* ── LEARN block: copy left, project collage right ─────── */
/* The section keeps the page's normal width; the footage gets bigger by
   taking a larger share of the grid rather than by widening the panel. */
.learn-grid { display:grid; grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr); gap:clamp(24px,3.4vw,64px); align-items:center; }
.learn-copy .sec-title { margin-bottom:0; }
.learn-rule { width:clamp(48px,3.9vw,76px); height:4px; border-radius:4px; background:var(--cyan); margin:16px 0 20px; }
.learn-copy p { font-size:var(--fs-md); margin-bottom:26px; }
.learn-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* the collage — course footage, laid out by orientation.
   Each row is a flex line whose items grow in proportion to their aspect
   ratio, which makes every tile in the row exactly the same height. */
.collage { display:flex; flex-direction:column; gap:clamp(10px,.85vw,18px); }
.c-row { display:flex; gap:clamp(10px,.85vw,18px); align-items:flex-start; }
.tile {
  position:relative; min-width:0; margin:0; overflow:hidden;
  border-radius:10px; background:#0f1c3d;
  box-shadow:0 14px 34px rgba(16,32,86,.26);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
}
.tile:hover { transform:translateY(-5px); box-shadow:0 22px 48px rgba(16,32,86,.34); }
.tile.h { flex:1.778 1 0; aspect-ratio:16/9; }   /* landscape footage */
.tile.v { flex:0.5625 1 0; aspect-ratio:9/16; }  /* portrait footage */
.tile video { width:100%; height:100%; object-fit:cover; display:block; }
.tile-label {
  position:absolute; left:0; right:0; bottom:0; padding:15px 10px 7px;
  font-size:var(--fs-3xs); font-weight:600; letter-spacing:.03em; color:#fff;
  background:rgba(6,16,48,.7);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── feature cards ─────────────────────────────────────── */
.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.8vw,32px); }
.feature {
  background:var(--soft); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,42px); transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s, background .3s;
}
.feature:hover { transform:translateY(-5px); background:#fff; border-color:#cfe0f5; box-shadow:var(--shadow); }
.feature-ico {
  width:clamp(38px,2.9vw,58px); height:clamp(38px,2.9vw,58px); border-radius:13px; display:grid; place-items:center;
  font-size:clamp(17px,1.3vw,26px); margin-bottom:14px; color:#fff;
}
.feature:nth-child(1) .feature-ico { background:var(--blue); }
.feature:nth-child(2) .feature-ico { background:var(--cyan); }
.feature:nth-child(3) .feature-ico { background:var(--violet); }
.feature:nth-child(4) .feature-ico { background:#f0a132; }
.feature h4 { font-size:var(--fs-lg); font-weight:600; margin-bottom:8px; }
.feature p { font-size:var(--fs-sm); }
.pill-ok {
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  background:rgba(58,210,156,.12); color:#128a63; border:1px solid rgba(58,210,156,.35);
  padding:5px 12px; border-radius:var(--r-pill); font-size:var(--fs-2xs); font-weight:600;
}

/* ── curriculum accordion ──────────────────────────────── */
.modules { display:flex; flex-direction:column; gap:clamp(8px,.75vw,14px); max-width:clamp(900px,62vw,1180px); margin:0 auto; }
.module {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; transition:box-shadow .3s, border-color .3s;
}
.module:hover { border-color:#c9dcf5; box-shadow:var(--shadow-sm); }
.module.open { border-color:transparent; box-shadow:var(--shadow); }
.module-head {
  display:flex; align-items:center; gap:clamp(12px,1.6vw,26px);
  padding:clamp(14px,1.8vw,28px) clamp(15px,2vw,34px);
  cursor:pointer; width:100%; background:none; border:none; text-align:left; font:inherit;
}
.module-num {
  flex-shrink:0; width:clamp(34px,2.64vw,50px); height:clamp(34px,2.64vw,50px); border-radius:12px; display:grid; place-items:center;
  font-family:'Rubik',sans-serif; font-weight:700; font-size:var(--fs-base); color:#fff;
  background:var(--navy2); transition:transform .3s;
}
.module.open .module-num { background:var(--cyan); transform:scale(1.06); }
.module-info { flex:1; min-width:0; }
.module-info h4 { font-size:var(--fs-md); font-weight:600; margin-bottom:2px; }
.module-info span { font-size:var(--fs-2xs); color:var(--muted); }
.module-hours {
  flex-shrink:0; padding:5px 12px; border-radius:var(--r-pill); font-size:var(--fs-2xs); font-weight:600;
  background:var(--soft2); color:var(--blue);
}
.module-arrow { flex-shrink:0; color:var(--muted); transition:transform .3s; }
.module.open .module-arrow { transform:rotate(180deg); color:var(--blue); }
/* Height is driven in px by JS (see course1.js) and released to `auto` once
   open, so the panel animates reliably and still reflows after a lang switch. */
.module-body { height:0; overflow:hidden; transition:height .35s cubic-bezier(.2,.8,.3,1); }
/* flow-root keeps the lab line's bottom margin inside the measured wrapper,
   so the animated height matches the natural one */
.module-body > div { display:flow-root; }
.module-body ul { list-style:none; padding:0 clamp(15px,2vw,34px) 0 clamp(64px,7.5vw,110px); display:flex; flex-direction:column; gap:7px; }
/* a module with no lab line ends on the list, which would otherwise sit
   flush against the card's bottom edge */
.module-body ul:last-child { padding-bottom:clamp(16px,2vw,30px); }
.module-body li { font-size:var(--fs-sm); position:relative; }
.module-body li::before { content:''; position:absolute; left:-17px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--cyan); }
.module-lab {
  margin:16px clamp(15px,2vw,34px) clamp(16px,2vw,30px) clamp(64px,7.5vw,110px);
  padding:11px 15px; border-radius:var(--r-md); font-size:var(--fs-xs);
  background:rgba(0,178,227,.08);
  border-left:3px solid var(--cyan); color:var(--ink);
}

/* ── pricing ───────────────────────────────────────────── */
.price-card {
  max-width:clamp(560px,40vw,720px); margin:0 auto; background:#fff; border-radius:var(--r-xl);
  padding:clamp(22px,2.6vw,46px); text-align:center; box-shadow:var(--shadow-lg);
  border:1px solid var(--line); position:relative; overflow:hidden;
}
.price-card::before { content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--cyan); }
.grant-badge {
  display:inline-block; background:rgba(58,210,156,.12); color:#0f8a63;
  border:1px solid rgba(58,210,156,.35); padding:6px 16px; border-radius:var(--r-pill);
  font-size:var(--fs-2xs); font-weight:600; margin-bottom:14px;
}
.price-old { font-size:var(--fs-md); color:var(--muted); text-decoration:line-through; }
.price-main { font-family:'Rubik',sans-serif; font-size:clamp(30px,calc(24px + 1.25vw),56px); font-weight:700; color:var(--ink); line-height:1.1; margin:3px 0 5px; }
.price-main-label { font-size:var(--fs-xs); margin-bottom:18px; }
.price-rows { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:4px 0; margin-bottom:14px; }
.price-row { display:flex; justify-content:space-between; align-items:center; padding:8px 3px; font-size:var(--fs-sm); }
.price-row + .price-row { border-top:1px dashed var(--line); }
.price-row strong { font-family:'Rubik',sans-serif; color:var(--ink); }
.price-row.grant strong { color:#0f8a63; }
.price-note { font-size:var(--fs-2xs); color:var(--muted); margin-bottom:16px; }
.pay-title { font-size:var(--fs-3xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.pay-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
/* small enough that each option stays on a single line */
.pay-opt {
  background:var(--soft); border:1px solid var(--line); border-radius:var(--r-md);
  padding:11px 10px; font-size:var(--fs-2xs); font-weight:500; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pay-opt b { color:var(--blue); }

/* ── admissions ────────────────────────────────────────── */
.otbor-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(14px,2vw,34px); max-width:var(--maxw); margin:0 auto; }
.otbor-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(22px,2.8vw,46px); box-shadow:var(--shadow-sm); }
.otbor-card h4 { font-size:var(--fs-lg); font-weight:600; margin-bottom:10px; }
.otbor-card p { font-size:var(--fs-sm); }
.otbor-ico { width:clamp(38px,2.9vw,58px); height:clamp(38px,2.9vw,58px); border-radius:13px; display:grid; place-items:center; background:var(--soft2); color:var(--blue); margin-bottom:14px; }
.steps { display:flex; flex-direction:column; gap:clamp(9px,.8vw,16px); margin-top:18px; }
.step { display:flex; gap:13px; align-items:flex-start; background:var(--soft); border-radius:var(--r-md); padding:clamp(11px,1vw,18px) clamp(13px,1.1vw,20px); }
.step-num {
  flex-shrink:0; width:clamp(25px,1.9vw,36px); height:clamp(25px,1.9vw,36px); border-radius:50%; display:grid; place-items:center;
  background:var(--blue); color:#fff;
  font-family:'Rubik',sans-serif; font-weight:700; font-size:var(--fs-2xs);
}
.step-text { font-size:var(--fs-xs); }
.step-text strong { color:var(--ink); }

/* ── ENROLL band: contacts + form on navy ──────────────── */
/* Its own screen (the rule at the top of the file), so the padding is
   measured in svh: on a short window it gives height back to the form
   instead of pushing it off the bottom. */
.cta-band {
  padding-top:clamp(40px,5.4svh,120px); padding-bottom:clamp(40px,5.4svh,120px);
  background:#16307f;
  color:#fff; overflow:hidden;
}
.cta-band .eyebrow { color:var(--cyan-lt); }
.cta-head { position:relative; z-index:2; text-align:center; max-width:var(--measure); margin:0 auto clamp(20px,3.4svh,52px); }
.cta-head h2 { font-size:clamp(24px,calc(20px + 1.4vw),50px); font-weight:300; font-style:italic; color:#fff; margin-bottom:10px; }
.cta-head h2 b { display:block; font-style:normal; font-weight:700; }
.cta-head p { font-size:var(--fs-md); color:#bacce9; }

.cta-inner { position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,56px); align-items:start; }

.socials { display:flex; flex-direction:column; gap:clamp(9px,.8vw,16px); }
.social {
  display:flex; align-items:center; gap:12px; padding:clamp(12px,1.05vw,19px) clamp(15px,1.35vw,25px); border-radius:var(--r-md);
  background:rgba(255,255,255,.07); border:1px solid var(--line-dk); text-decoration:none;
  font-weight:500; color:#fff; font-size:var(--fs-sm); backdrop-filter:blur(8px);
  transition:transform .2s, background .25s, border-color .25s;
}
.social:hover { transform:translateX(5px); background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.3); }
.social svg { width:clamp(19px,1.5vw,28px); height:clamp(19px,1.5vw,28px); flex-shrink:0; }
.social small { margin-left:auto; color:#a9c0e4; font-size:var(--fs-2xs); }

.cta-form { background:rgba(255,255,255,.07); border:1px solid var(--line-dk); border-radius:var(--r-xl); padding:min(clamp(20px,2.6vw,44px),3.4svh); backdrop-filter:blur(12px); }
.form-title { font-family:'Rubik',sans-serif; font-size:var(--fs-md); font-weight:600; color:#fff; margin-bottom:5px; }
.form-sub { font-size:var(--fs-2xs); color:#a9c0e4; margin-bottom:clamp(12px,2.2svh,20px); }
.field { margin-bottom:clamp(9px,1.7svh,16px); }
.field label { display:block; font-size:var(--fs-2xs); font-weight:600; color:#c8d8f2; margin-bottom:6px; }
.field input {
  width:100%; padding:clamp(11px,.95vw,17px) clamp(13px,1.1vw,20px); border-radius:var(--r-md); font-family:inherit; font-size:16px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); color:#fff;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
/* iOS Safari auto-zooms the page on focus for any input under 16px — this
   keeps the field's on-screen size the same everywhere else via clamp. */
@media (min-width:561px) { .field input { font-size:var(--fs-sm); } }
.field input::placeholder { color:#7f95bd; }
.field input:focus { outline:none; border-color:var(--cyan-lt); background:rgba(255,255,255,.15); box-shadow:0 0 0 4px rgba(0,178,227,.18); }
.cta-form .btn { margin-top:6px; }
.cta-form .btn-primary:disabled { opacity:.65; cursor:not-allowed; transform:none; }
.contact-text { color:#bacce9; font-size:var(--fs-sm); margin-bottom:clamp(12px,2.4svh,26px); }

/* ── instructors (navy slab, testimonial style) ────────── */
.team { background:var(--white); }
.team-slab {
  background:#22398a;
  border-radius:var(--r-xl); padding:clamp(26px,3.6vw,72px);
  max-width:var(--maxw); margin:0 auto; position:relative; overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(13px,1.8vw,32px); position:relative; z-index:2; }
.tcard {
  background:#fff; border-radius:var(--r-lg); padding:clamp(20px,2.4vw,40px);
  display:flex; flex-direction:column; box-shadow:0 16px 38px rgba(6,18,60,.28);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.tcard:hover { transform:translateY(-7px); }
.tcard-quote { font-size:var(--fs-xs); color:var(--body); margin-bottom:18px; flex:1; }
.tcard-foot { display:flex; align-items:center; gap:15px; border-top:1px solid var(--line); padding-top:18px; }
.tcard-foot img {
  width:clamp(72px,6.1vw,112px); height:clamp(72px,6.1vw,112px); border-radius:50%; object-fit:cover; object-position:center top;
  flex-shrink:0; border:3px solid #fff; box-shadow:0 6px 18px rgba(16,32,86,.22);
}
.tcard-name { font-family:'Rubik',sans-serif; font-size:var(--fs-md); font-weight:600; color:var(--ink); }
.tcard-role { font-size:var(--fs-2xs); color:var(--cyan); font-style:italic; }

/* ── footer ────────────────────────────────────────────── */
footer { background:var(--navy); color:#9db1d6; padding:clamp(30px,4vw,72px) var(--pad); }
.footer-inner { max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-inner img { height:clamp(24px,1.95vw,38px); width:auto; filter:brightness(0) invert(1); opacity:.9; }
.footer-inner p { font-size:var(--fs-2xs); }

/* ── modal ─────────────────────────────────────────────── */
.modal {
  position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px;
  background:rgba(8,20,60,.62); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}
.modal.show { opacity:1; visibility:visible; }
.modal-box {
  background:#fff; border-radius:var(--r-xl); padding:clamp(26px,3.4vw,54px); max-width:clamp(420px,30vw,560px);
  text-align:center; box-shadow:var(--shadow-lg); transform:translateY(18px) scale(.97); transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.modal.show .modal-box { transform:none; }
.modal-ico {
  width:clamp(52px,4vw,76px); height:clamp(52px,4vw,76px); border-radius:50%; margin:0 auto 18px; display:grid; place-items:center;
  background:var(--blue); color:#fff; font-size:clamp(24px,1.85vw,34px);
}
.modal-box h3 { font-size:var(--fs-xl); font-weight:600; margin-bottom:10px; }
.modal-box p { font-size:var(--fs-sm); margin-bottom:22px; }

/* ── reveal ────────────────────────────────────────────── */
/* Content starts visible by default. JS opts elements into the hidden
   pre-reveal state (.reveal-armed) only once it has an IntersectionObserver
   ready to bring them back — so a blocked/failed script, disabled JS, or an
   old browser leaves everything showing instead of permanently invisible. */
.reveal { transition:opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1); }
.reveal.reveal-armed { opacity:0; transform:translateY(24px); }
.reveal.visible { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.09s; }
.reveal.d2 { transition-delay:.18s; }
.reveal.d3 { transition-delay:.27s; }

/* ── responsive ────────────────────────────────────────── */
/* Below the widest breakpoint the fluid ramps above already handle sizing;
   these blocks only change what a ramp can't — how many columns there are,
   and what gets dropped on a phone. */
@media (max-width:1080px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-visual { order:-1; max-width:300px; margin:0 auto 6px; }
  .learn-grid { grid-template-columns:1fr; }
  .cta-inner { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:1fr; }
  .otbor-grid { grid-template-columns:1fr; }
  /* the column caps above are wider than a tablet: fall back to the gutter */
  .modules, .price-card { max-width:100%; }
  .price-card { max-width:min(100%,560px); }
}
@media (max-width:900px) {
  .feature-grid { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  /* The robot render is a nice-to-have on a big screen, but on a phone it's
     400+px of scroll before the pitch even starts — drop it so the hero
     (title, pitch, CTA, stats) plus the university strip right after it
     together read as one screen, the way hero+strip already do on desktop. */
  .hero { padding-top:92px; padding-bottom:32px; }
  .hero-visual { display:none; }
  .trust { padding-top:28px; padding-bottom:28px; }
  .nav-logo img { height:27px; }
  /* on a narrow screen let each row wrap: landscape clips go full width,
     the two portrait ones pair up side by side */
  .c-row { flex-wrap:wrap; }
  .tile.h { flex:1 1 100%; }
  .tile.v { flex:1 1 calc(50% - 6px); }
  /* the three horizontal clips become a swipeable strip instead of stacking
     full-width three times over — same idea as the vertical pair above them,
     just scrolling sideways instead of wrapping */
  .c-row-carousel {
    flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px;
  }
  .c-row-carousel::-webkit-scrollbar { display:none; }
  .c-row-carousel .tile.h { flex:0 0 84%; scroll-snap-align:start; }

  /* Отбор ran noticeably taller than one screen on a phone; the two-step
     card restates itself (intro paragraph, then the same two steps spelled
     out again) so the intro is the one thing that can go without losing
     any actual information. The rest is just tightened spacing. */
  #otbor { padding-top:32px; padding-bottom:32px; }
  #otbor .sec-title { margin-bottom:8px; }
  #otbor .sec-desc { margin-bottom:18px; }
  .otbor-grid { gap:10px; }
  .otbor-card { padding:16px; }
  .otbor-ico { width:32px; height:32px; margin-bottom:8px; }
  .otbor-card h4 { margin-bottom:5px; }
  .otbor-lead { display:none; }
  .steps { margin-top:0; gap:6px; }
  .step { padding:9px 11px; gap:10px; }
  .step-text { font-size:13px; }
}
@media (max-width:560px) {
  /* flex-wrap left an orphaned 4th stat alone on its own row (3 fit, 1
     doesn't); a fixed 2x2 grid keeps the group visually balanced instead */
  .hero-stats { display:grid; grid-template-columns:1fr 1fr; gap:22px 16px; }
  .hero-stat-div { display:none; }
  .hero-actions .btn { width:100%; }
  .pay-row { grid-template-columns:1fr; }
  .module-body ul { padding-left:38px; }
  .module-lab { margin-left:18px; margin-right:18px; }
  .module-hours { display:none; }
  .tcard-foot img { width:72px; height:72px; }
}

/* Landscape phones and short laptop screens: the full-screen units stop
   forcing a viewport of height on content that doesn't need it, so a 1366x600
   window scrolls naturally instead of padding every unit out. */
@media (max-height:620px) and (min-width:701px) {
  section:not(.hero), .screen-hero { min-height:0; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
}