/* ===========================================================================
   maksimaedu.mk — public site
   ---------------------------------------------------------------------------
   The brand comes from the school's own material, not from a template:
     · the logo is a skyline of world landmarks (Colosseum · Berlin TV tower ·
       Eiffel · Statue of Liberty). That is the site's whole idea — the school
       takes you places — so the page is organised around DESTINATIONS.
     · „МАКСИМАлно добар избор!" is the school's own slogan asset.
     · „LEARN · GROW · SHINE" is the school's own lockup.
   Purple #5B217A / gold #E8A32B are the logo's colours.

   Type: Onest for display, Manrope for text. Both are free, both carry full
   Macedonian Cyrillic (ѓ ќ ј љ њ џ verified rendering). The previous build used
   Roboto 700 with default tracking, which is what made it read as a Bootstrap
   default.
   =========================================================================== */

:root{
  --pur:#5B217A; --pur-d:#3E1454; --pur-l:#7C3AA5; --pur-xl:#A55FD1;
  --gold:#E8A32B; --gold-l:#F7C960;
  /* The same gold, deep enough to be read as text on cream. #E8A32B on the
     hero's #FBEADE measures 1.84:1 where large bold text needs 3:1; this is
     3.21:1. Use it ONLY for gold LETTERS on a light ground — buttons, rules,
     marks and anything on the dark band keep --gold. */
  --gold-ink:#B87500;
  /* And deeper still for gold text below 18px, where AA asks 4.5:1 rather than
     3:1 — the kickers. 4.51:1 on the darkest cream the page uses. */
  --gold-ink-sm:#96600C;
  --cream:#FFFBF4; --paper:#fff;
  --ink:#2A1338; --ink-2:#5C4A6B; --muted:#8B7A9E;
  --line:rgba(91,33,122,.10);
  --ok:#2E9E5B; --no:#D4453C;
  --ease:cubic-bezier(.22,1,.36,1);

  /* Vertical rhythm, as three named values rather than one number with exceptions.
     A third of the old page was section padding (88px twice, ten times over), which is
     where most of the emptiness lived. Standard is the baseline; lift is for the two or
     three moments that earn extra air; tight is for sections that overlap on purpose. */
  --mx-y:50px; --mx-y-lift:66px; --mx-y-tight:0px;
  --sh-sm:0 2px 10px rgba(62,20,84,.06);
  --sh:0 16px 44px -14px rgba(62,20,84,.2);
  --sh-lg:0 44px 96px -34px rgba(62,20,84,.38);

  /* legacy aliases — older partials still reference these */
  --primary-color:#5B217A; --primary-dark:#3E1454; --primary-light:#7C3AA5;
  --accent-color:#E8A32B; --text-color:#2A1338; --bg-color:#FFFBF4; --white:#fff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* The navbar is sticky and 74px tall, so a bare anchor jump parks the section's first line
   underneath it. Every section that can be linked to keeps that much clear. */
section[id]{scroll-margin-top:92px}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:'Manrope','Segoe UI',system-ui,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{
  font-family:'Onest','Manrope',system-ui,sans-serif;
  font-weight:800;letter-spacing:-.035em;line-height:1.05;color:var(--pur-d);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

/* soft ground — no photography needed, so no stock photography possible */
.mx-blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mx-blobs i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
  animation:mx-float 26s var(--ease) infinite alternate}
.mx-blobs i:nth-child(1){width:540px;height:540px;left:-160px;top:-140px;background:#EEDFFB}
.mx-blobs i:nth-child(2){width:420px;height:420px;right:-100px;top:220px;background:#FFE6C4;animation-delay:-9s}
.mx-blobs i:nth-child(3){width:600px;height:600px;left:50%;top:60%;background:#FBE6F2;animation-delay:-16s}
@keyframes mx-float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(60px,-52px,0) scale(1.16)}}
.mx-page{position:relative;z-index:2}

/* ── navbar ───────────────────────────────────────────────────────────── */
.navbar{background:transparent;box-shadow:none;padding:14px 0;transition:.35s var(--ease)}
.navbar.mx-stuck{background:rgba(255,251,244,.88);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 1px 0 var(--line),0 10px 34px -24px rgba(62,20,84,.5);padding:9px 0}
.navbar-brand{display:flex;align-items:flex-end;gap:20px;padding:0}
.navbar-brand img{height:46px;width:auto;display:block;transition:height .35s var(--ease)}
.navbar.mx-stuck .navbar-brand img{height:38px}
.mx-lockup{font-family:'Onest',sans-serif;font-size:8.5px;font-weight:800;letter-spacing:.26em;
  color:var(--gold);padding-bottom:7px;white-space:nowrap}
.navbar-nav{gap:26px}
.nav-link{color:var(--ink-2)!important;font-weight:700;font-size:15.5px;position:relative;padding:4px 0!important}
.nav-link::after{content:'';position:absolute;left:0;right:100%;bottom:-3px;height:2.5px;border-radius:2px;
  background:var(--gold);transition:right .3s var(--ease)}
.nav-link:hover,.nav-link.active{color:var(--pur)!important}
.nav-link:hover::after,.nav-link.active::after{right:0}
.navbar-toggler{border-color:var(--line)}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{border-radius:999px;font-family:inherit;font-weight:800;font-size:15.5px;
  padding:15px 30px;border:0;transition:transform .18s var(--ease),box-shadow .25s}
.btn-primary,.btn-primary:focus{
  background:linear-gradient(135deg,var(--pur-l),var(--pur));border:0;color:#fff;
  box-shadow:0 12px 30px -9px rgba(91,33,122,.6)}
.btn-primary:hover{background:linear-gradient(135deg,var(--pur-l),var(--pur));
  transform:translateY(-2px);box-shadow:0 20px 40px -9px rgba(91,33,122,.7);color:#fff}
.btn-gold,.btn-gold:focus{background:linear-gradient(135deg,var(--gold-l),var(--gold));color:#4A2E00;
  box-shadow:0 12px 30px -9px rgba(232,163,43,.65)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 20px 40px -9px rgba(232,163,43,.75);color:#4A2E00}
.btn-outline-primary,.btn-outline-primary:focus{background:var(--paper);color:var(--pur);border:0;
  box-shadow:inset 0 0 0 2px rgba(91,33,122,.2),var(--sh-sm)}
.btn-outline-primary:hover{background:var(--paper);color:var(--pur);
  transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--pur),var(--sh)}
.btn-outline-light{border:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-outline-light:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-sm{padding:12px 24px;font-size:14.5px}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero-section{padding:52px 0 24px;background:none;color:inherit;position:relative;overflow:visible}
.hero-section::after{display:none}          /* kills the old Unsplash overlay */
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center}
/* No image: one column, held to a readable measure, with the skyline below carrying
   the full width. A two-column grid with an empty cell reads as an unfinished page. */
.hero-grid.mx-solo{grid-template-columns:1fr;gap:0}
.hero-grid.mx-solo > div{max-width:780px}
.hero-grid.mx-solo .hero-subtitle{max-width:46ch}
.mx-eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--paper);
  box-shadow:var(--sh-sm),inset 0 0 0 1.5px rgba(232,163,43,.4);color:#8A6516;
  font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 17px;border-radius:999px;margin-bottom:26px}
.mx-pulse{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(232,163,43,.75);animation:mx-pulse 2.1s infinite}
@keyframes mx-pulse{70%{box-shadow:0 0 0 9px rgba(232,163,43,0)}100%{box-shadow:0 0 0 0 rgba(232,163,43,0)}}

.hero-title{font-size:clamp(40px,5.2vw,74px);margin:0 0 8px;color:var(--pur-d);font-weight:800;letter-spacing:-.035em;line-height:1}
.hero-title .mx-alt{color:var(--pur-l);display:block}

/* the greeting cycles through the languages taught — the product, demonstrated */
.mx-greet{font-family:'Onest',sans-serif;font-size:clamp(22px,2.4vw,30px);font-weight:800;
  letter-spacing:-.03em;color:var(--gold-ink);height:1.3em;margin-bottom:14px;overflow:hidden}
.mx-greet span{display:inline-block;animation:mx-greet-in .5s var(--ease) both}
@keyframes mx-greet-in{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}

.mx-swoosh{width:210px;height:16px;margin:12px 0 22px;overflow:visible;display:block}
.mx-swoosh path{fill:var(--pur);opacity:.9}
.hero-subtitle{font-size:19px;color:var(--ink-2);max-width:35ch;margin-bottom:28px;font-weight:400}
.mx-hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:20px}
.mx-microproof{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--muted);font-weight:600}
.mx-microproof b{color:var(--pur);font-weight:800}
.mx-stars{color:var(--gold);letter-spacing:.06em}

/* ── skyline: the logo, drawn across the page ─────────────────────────── */
.mx-skyline{margin:22px 0 0;padding-bottom:6px}
.mx-skyline svg{width:100%;height:88px;display:block;overflow:visible}
.mx-skyline .mx-mark{fill:var(--pur);opacity:0;transform:translateY(14px);
  animation:mx-rise .8s var(--ease) forwards}
@keyframes mx-rise{to{opacity:.92;transform:none}}
.mx-skyline .mx-wave{fill:none;stroke:var(--pur);stroke-width:3;stroke-linecap:round;opacity:.55;
  stroke-dasharray:900;stroke-dashoffset:900;animation:mx-draw 1.6s var(--ease) .3s forwards}
@keyframes mx-draw{to{stroke-dashoffset:0}}
.mx-skyline .mx-lbl{font-family:'Onest',sans-serif;font-size:10px;font-weight:800;
  letter-spacing:.12em;fill:var(--muted);text-transform:uppercase}

/* ── section furniture ────────────────────────────────────────────────── */
.section-padding{padding:var(--mx-y) 0}
/* Kickers are 11.5px uppercase. On the cream page --gold measures 2.1:1, which
   is not readable text; the dark band keeps the bright gold below. */
.mx-kicker{font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink-sm);margin-bottom:14px}
.section-title{font-size:clamp(30px,3.9vw,50px);color:var(--pur-d);font-weight:800;
  margin-bottom:16px;display:block;position:static}
.section-title::after{display:none}          /* the old underline rule */
.mx-sub{color:var(--ink-2);font-size:18px;max-width:54ch;margin-bottom:44px}

/* ── the enrolment funnel ─────────────────────────────────────────────── */
.mx-step{margin-bottom:14px}
.mx-steplabel{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pur-l);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.mx-steplabel i{width:24px;height:24px;border-radius:50%;background:var(--pur-l);color:#fff;
  display:grid;place-items:center;font-size:12px;font-style:normal;font-weight:900;flex:0 0 24px}

.mx-audience{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:56px}
.mx-aud{background:var(--paper);border:0;border-radius:24px;padding:30px;text-align:left;
  box-shadow:var(--sh-sm);cursor:pointer;transition:.32s var(--ease);position:relative;
  font-family:inherit;color:inherit;width:100%}
.mx-aud:hover{transform:translateY(-7px);box-shadow:var(--sh)}
.mx-aud[aria-pressed="true"]{box-shadow:var(--sh),inset 0 0 0 2.5px var(--pur)}
.mx-aud .mx-icn{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;margin-bottom:18px}
.mx-aud .mx-icn svg{width:40px;height:40px;fill:var(--pur)}
.mx-aud b{display:block;font-family:'Onest',sans-serif;font-size:23px;font-weight:800;
  letter-spacing:-.025em;color:var(--pur-d);margin-bottom:5px}
.mx-aud span{display:block;color:var(--muted);font-size:14.5px;font-weight:700}

.mx-dests{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mx-dest{background:var(--paper);border:0;border-radius:22px;padding:22px;text-align:left;
  box-shadow:var(--sh-sm);cursor:pointer;transition:.32s var(--ease);position:relative;
  overflow:hidden;font-family:inherit;color:inherit;width:100%;display:flex;align-items:center;gap:16px}
.mx-dest::before{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--gold-l),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.mx-dest:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.mx-dest:hover::before,.mx-dest[aria-pressed="true"]::before{transform:scaleX(1)}
.mx-dest[aria-pressed="true"]{box-shadow:var(--sh),inset 0 0 0 2.5px var(--pur)}
.mx-dest .mx-icn{flex:0 0 58px;height:58px;border-radius:18px;display:grid;place-items:center;transition:.32s var(--ease)}
.mx-dest:hover .mx-icn{transform:translateY(-2px) rotate(-4deg)}
.mx-dest .mx-icn svg{width:40px;height:40px;fill:var(--pur)}
.mx-dest b{display:block;font-family:'Onest',sans-serif;font-size:19px;font-weight:800;
  letter-spacing:-.02em;color:var(--pur-d);margin-bottom:2px}
.mx-dest span{display:block;color:var(--muted);font-size:14px;font-weight:700}

/* the funnel's answer */
.mx-result{margin-top:44px;background:linear-gradient(135deg,var(--pur-d),var(--pur) 58%,var(--pur-l));
  border-radius:30px;padding:44px;color:#fff;position:relative;overflow:hidden;
  box-shadow:var(--sh-lg);display:none}
.mx-result.mx-on{display:block;animation:mx-in .45s var(--ease) both}
@keyframes mx-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.mx-result::after{content:'';position:absolute;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(247,201,96,.36),transparent 66%);right:-140px;top:-180px}
.mx-result > *{position:relative;z-index:2}
.mx-result .mx-rk{font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-l);margin-bottom:12px}
.mx-result h3{color:#fff;font-size:clamp(26px,3.2vw,40px);margin-bottom:12px}
.mx-result p{color:rgba(255,255,255,.88);font-size:17px;margin-bottom:26px;max-width:52ch}
.mx-chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.mx-chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  border-radius:999px;padding:7px 15px;font-size:14px;font-weight:700}

/* ── proof row: numbers, not adjectives ───────────────────────────────── */
.mx-statsband{padding:44px 0;border-block:1px solid var(--line);background:rgba(255,255,255,.5)}
.mx-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 56px}
.mx-statitem{flex:0 1 auto}
.mx-statitem{display:flex;align-items:center;gap:13px;justify-content:center;text-align:left}
.mx-staticn{flex:0 0 40px;height:40px;border-radius:13px;background:#F5ECFC;display:grid;place-items:center}
.mx-staticn svg{width:26px;height:26px;fill:var(--pur)}
.mx-staticn i{color:var(--pur);font-size:17px}
.mx-statitem b{display:block;font-family:'Onest',sans-serif;font-size:30px;font-weight:800;
  letter-spacing:-.045em;line-height:1.05;color:var(--pur)}
.mx-statitem > span > span{display:block;font-size:13px;color:var(--muted);font-weight:700}

/* ── outcomes: what you can do afterwards ─────────────────────────────── */
.mx-outcomes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.mx-outcome{background:var(--paper);border-radius:22px;padding:16px;box-shadow:var(--sh-sm);
  transition:.32s var(--ease)}
.mx-outcome:hover{transform:translateY(-7px);box-shadow:var(--sh)}
.mx-outcome-img{border-radius:15px;overflow:hidden;aspect-ratio:4/3;margin-bottom:15px;
  display:grid;place-items:center}
.mx-outcome-img img{width:100%;height:100%;object-fit:cover;display:block}
.mx-outcome-img.mx-noimg svg{width:52px;height:52px;fill:var(--pur);opacity:.75}
.mx-outcome-img.mx-noimg i{font-size:30px;color:var(--pur);opacity:.75}
.mx-outcome b{display:block;font-family:'Onest',sans-serif;font-size:16px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--pur-d);margin-bottom:6px}
.mx-outcome .cms-rt{color:var(--ink-2);font-size:14.5px;line-height:1.5}

/* ── the route ────────────────────────────────────────────────────────── */
.mx-route{position:relative;padding-top:26px}
.mx-routeline{position:absolute;left:0;right:0;top:54px;height:3px;
  background:repeating-linear-gradient(90deg,var(--pur-xl) 0 12px,transparent 12px 22px);opacity:.45}
.mx-stops{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.mx-stop .mx-pin{width:56px;height:56px;border-radius:50%;background:var(--paper);display:grid;
  place-items:center;box-shadow:var(--sh-sm),inset 0 0 0 3px var(--pur-xl);
  font-family:'Onest',sans-serif;font-weight:900;font-size:19px;color:var(--pur);
  margin-bottom:22px;transition:.35s var(--ease)}
.mx-stop:hover .mx-pin{background:var(--pur);color:#fff;transform:scale(1.1);
  box-shadow:0 14px 30px -8px rgba(91,33,122,.7),inset 0 0 0 3px var(--pur)}
.mx-stop h3{font-size:19px;margin-bottom:7px}
.mx-stop p{color:var(--ink-2);font-size:15px;margin:0}

/* ── the certificate register ─────────────────────────────────────────── */
.mx-reg{background:var(--paper);border-radius:32px;padding:52px;box-shadow:var(--sh);
  display:grid;grid-template-columns:1fr .78fr;gap:52px;align-items:center}
.mx-vform{display:flex;gap:10px;margin-top:24px}
.mx-vform input{flex:1;background:#FCFAFE;border:2px solid #EDE3F6;border-radius:15px;
  padding:15px 18px;color:var(--ink);font-family:inherit;font-size:16px;font-weight:700;
  outline:none;transition:.2s}
.mx-vform input:focus{border-color:var(--pur-l);background:var(--paper)}
.mx-vres{margin-top:18px;padding:18px;border-radius:15px;font-size:15px;display:none}
.mx-vres.mx-on{display:block;animation:mx-in .35s var(--ease) both}
.mx-vres.mx-ok{border:2px solid rgba(46,158,91,.4);background:#EAF7EF;color:#175E34}
.mx-vres.mx-no{border:2px solid rgba(212,69,60,.4);background:#FDEDEC;color:#8E2B24}
.mx-cert{border-radius:20px;padding:30px;background:linear-gradient(150deg,#FFFDF7,#F6EBD6);
  color:var(--pur-d);box-shadow:var(--sh-lg);transform:rotate(-2.6deg);transition:.45s var(--ease);
  border:1.5px solid rgba(232,163,43,.5)}
.mx-cert:hover{transform:rotate(0) scale(1.03)}
.mx-cert .mx-ch{font-family:'Onest',sans-serif;font-size:10px;font-weight:900;letter-spacing:.22em;
  text-transform:uppercase;color:#8A6A1E;margin-bottom:12px}
.mx-cert .mx-cn{font-family:'Onest',sans-serif;font-size:23px;font-weight:800;letter-spacing:-.03em;margin-bottom:4px}
.mx-cert .mx-cm{font-size:14px;color:var(--ink-2);margin-bottom:18px}
.mx-cert .mx-cr{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;
  background:var(--pur-d);color:var(--gold-l);padding:7px 13px;border-radius:999px}

/* ── slogan band ──────────────────────────────────────────────────────── */
.mx-slogan{background:var(--pur-d);border-radius:32px;padding:56px 40px;text-align:center;
  position:relative;overflow:hidden;box-shadow:var(--sh-lg)}
.mx-slogan::after{content:'';position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(247,201,96,.3),transparent 66%);right:-150px;top:-190px;
  animation:mx-float 22s var(--ease) infinite alternate}
.mx-slogan .mx-slogancard{display:inline-block;background:#fff;border-radius:24px;
  padding:26px 34px;position:relative;z-index:2;box-shadow:0 26px 60px -18px rgba(0,0,0,.55);
  transform:rotate(-1.6deg);transition:transform .45s var(--ease)}
.mx-slogan .mx-slogancard:hover{transform:rotate(0) scale(1.02)}
.mx-slogan img{max-width:380px;width:100%;display:block}
.mx-slogan p{position:relative;z-index:2;color:rgba(255,255,255,.82);font-size:17px;margin:22px 0 0}

/* ── generic cards (Курсеви, Што нудиме, Преводи) ─────────────────────── */
.md-card{background:var(--paper);border-radius:24px;border:0;box-shadow:var(--sh-sm);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease);height:100%;overflow:hidden}
.md-card:hover{transform:translateY(-7px);box-shadow:var(--sh)}
.md-card .card-body{padding:2rem}
.md-card .icon-wrapper{width:62px;height:62px;background:#F5ECFC;color:var(--pur);
  border-radius:19px;display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:1.4rem}
.md-card .card-title{font-family:'Onest',sans-serif;font-weight:800;letter-spacing:-.025em;
  color:var(--pur-d);margin-bottom:1rem}

/* ── footer ───────────────────────────────────────────────────────────── */
.footer{background:var(--pur-d);color:#C9B6DA;padding:70px 0 30px;margin-top:0}
.footer img{filter:brightness(0) invert(1);height:44px;opacity:.95;width:auto}
/* h2, not h5: these are the footer's own section headings, and an h5 after the
   page's h3s skips two levels — a screen reader hears the structure break. The
   type is unchanged; only the level is. */
.footer h2{font-family:'Onest',sans-serif;font-size:15px;font-weight:800;color:#fff;margin-bottom:18px}
.footer a{color:#C9B6DA;text-decoration:none;transition:color .2s}
.footer a:hover{color:var(--gold-l)}
.footer .social-icons a{display:inline-block;width:38px;height:38px;background:rgba(255,255,255,.1);
  color:#fff;border-radius:50%;text-align:center;line-height:38px;margin-right:10px;transition:all .25s}
.footer .social-icons a:hover{background:var(--gold);color:var(--pur-d);transform:translateY(-2px)}
/* Previously .text-muted on a dark ground: rgba(33,37,41,.75) on #3A154F — unreadable. */
.footer-bottom{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  text-align:center;font-size:14px;color:#A992BE}
.footer-bottom p{margin:0;color:#A992BE}

/* ── persistent mobile enrolment CTA ──────────────────────────────────── */
.mx-mobilecta{display:none}
@media(max-width:767.98px){
  .mx-mobilecta{display:block;position:fixed;left:14px;right:14px;bottom:14px;z-index:80;
    text-align:center;border-radius:999px;padding:16px;font-family:'Onest',sans-serif;
    font-weight:800;font-size:16px;color:#4A2E00;
    background:linear-gradient(135deg,var(--gold-l),var(--gold));
    box-shadow:0 14px 34px -8px rgba(232,163,43,.8)}
  body{padding-bottom:76px}
}

/* ── scroll reveal ──────────────────────────────────────────────────────
   Content is visible by DEFAULT. The hidden state is gated behind .mx-motion,
   which site.js puts on <html> only after it has initialised and only when the
   visitor has not asked for reduced motion.

   The previous version hid every .mx-rv in the stylesheet itself, so a script
   error, a blocked file or a slow phone left half the page blank — and it did:
   sections were repeatedly caught sitting at 30% opacity during verification.
   Reveal is decoration; it must never decide whether the page can be read. */
.mx-rv{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.mx-motion .mx-rv{opacity:0;transform:translateY(24px)}
.mx-motion .mx-rv.mx-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .mx-skyline .mx-mark{opacity:.92;transform:none}
  .mx-skyline .mx-wave{stroke-dashoffset:0}
}

@media(max-width:991.98px){
  .hero-grid,.mx-reg{grid-template-columns:1fr;gap:40px}
  .mx-audience,.mx-dests{grid-template-columns:1fr}
  .mx-stops{grid-template-columns:repeat(2,1fr);gap:32px}
  .mx-routeline{display:none}
  .mx-lockup{display:none}
  .section-padding{padding:var(--mx-y) 0}
  .mx-reg,.mx-result,.mx-slogan{padding:32px}
}

/* ---------------------------------------------------------------------------
   CMS rich-text blocks.

   Body copy comes from the database as HTML, so it arrives wrapped:
   <div class="hero-subtitle cms-rt"><p>…</p></div> where the page previously
   had <p class="hero-subtitle">…</p>. The wrapper carries the spacing class,
   so the paragraphs inside must not add their own on top of it — otherwise
   every rich-text block gains a stray margin and the page drifts. This caused
   two 16px regressions in deploy 0091; do not remove.
   --------------------------------------------------------------------------- */
.cms-rt > p { margin-bottom: 1.5rem; }
.cms-rt > *:last-child { margin-bottom: 0; }

/* ══ MAXIMA 2.0 ═══════════════════════════════════════════════════════════
   The evolution pass: the hero stops being calm, the rhythm stops being
   „pretty → pretty → pretty", and the certificate register becomes a thing
   you can actually use rather than a claim.
   ════════════════════════════════════════════════════════════════════════ */

/* ── the skyline becomes the hero's interactive strip ─────────────────── */
.mx-skyline{margin:10px 0 0}
.mx-sky-readout{height:2.1em;display:flex;align-items:center;gap:12px;
  font-family:'Onest',sans-serif;font-size:clamp(15px,1.7vw,21px);font-weight:800;
  letter-spacing:-.02em;color:var(--pur-d);margin-bottom:6px}
.mx-sky-readout .mx-lang{color:var(--pur)}
.mx-sky-readout .mx-arrow{color:var(--gold);font-size:1.1em}
.mx-sky-readout .mx-city{color:var(--gold)}
.mx-sky-readout.mx-idle{color:var(--muted);font-weight:700;font-size:14px;letter-spacing:.02em}
.mx-skyline .mx-stop-hit{cursor:pointer}
.mx-skyline .mx-stop-hit path{transition:fill .25s var(--ease)}
.mx-skyline .mx-stop-hit:hover .mx-mark path,
.mx-skyline .mx-stop-hit.mx-active .mx-mark path{fill:var(--gold)}
.mx-skyline .mx-stop-hit:hover .mx-lbl,
.mx-skyline .mx-stop-hit.mx-active .mx-lbl{fill:var(--pur-d)}
.mx-skyline .mx-mark{transform-box:fill-box;transform-origin:50% 100%}
.mx-skyline .mx-stop-hit:hover .mx-mark,
.mx-skyline .mx-stop-hit.mx-active .mx-mark{transform:scale(1.16)}

/* ── a dark band, so the page is not one continuous cream ─────────────── */
.mx-dark{background:linear-gradient(150deg,var(--pur-d) 0%,#2E0F41 55%,var(--pur-d) 100%);
  position:relative;overflow:hidden;margin:0}
.mx-dark::after{content:'';position:absolute;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(247,201,96,.16),transparent 68%);
  right:-160px;top:-200px;pointer-events:none}
.mx-dark > *{position:relative;z-index:2}
.mx-dark .section-title,.mx-dark h2,.mx-dark h3{color:#fff}
.mx-dark .mx-sub{color:#C9B6DA}
.mx-dark .mx-kicker{color:var(--gold-l)}
.mx-dark .mx-steplabel{color:#D9C7E8}
.mx-dark .mx-dest{background:rgba(255,255,255,.055);box-shadow:none;
  outline:1px solid rgba(255,255,255,.1);outline-offset:-1px}
.mx-dark .mx-dest:hover{background:rgba(255,255,255,.1)}
.mx-dark .mx-dest b{color:#fff}
.mx-dark .mx-dest span{color:#B9A6CC}
.mx-dark .mx-dest[aria-pressed="true"]{outline:2.5px solid var(--gold);background:rgba(247,201,96,.1)}
.mx-dark .mx-dest .mx-icn svg{fill:var(--pur-d)}

/* ── step three: how old ──────────────────────────────────────────────── */
.mx-ages{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.mx-age{border:0;border-radius:999px;padding:12px 22px;font-family:inherit;font-size:15px;
  font-weight:800;cursor:pointer;background:rgba(255,255,255,.07);color:#EBDDF5;
  outline:1px solid rgba(255,255,255,.14);outline-offset:-1px;transition:.22s var(--ease)}
.mx-age:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
.mx-age[aria-pressed="true"]{background:linear-gradient(135deg,var(--gold-l),var(--gold));
  color:#4A2E00;outline:0;box-shadow:0 10px 24px -8px rgba(232,163,43,.7)}

/* ── the route: five stops, and a marker that travels ─────────────────── */
.mx-stops{grid-template-columns:repeat(5,1fr)}
.mx-routeprogress{position:absolute;left:0;top:54px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-l),var(--gold));width:0;
  transition:width 1.6s var(--ease)}
.mx-route.mx-in .mx-routeprogress{width:100%}
.mx-stop{transition:transform .3s var(--ease)}
.mx-stop:hover{transform:translateY(-4px)}

/* ── certificate check ────────────────────────────────────────────────── */
.mx-vres.mx-ok b{color:#12502C}
.mx-vres .mx-vrow{display:flex;justify-content:space-between;gap:16px;padding:5px 0;
  border-bottom:1px dashed rgba(46,158,91,.28);font-size:14.5px}
.mx-vres .mx-vrow:last-child{border-bottom:0}
.mx-vres .mx-vrow span:first-child{color:#3C6B4E;font-weight:700}
.mx-vres .mx-vrow span:last-child{font-weight:800}
.mx-vhint{margin-top:10px;font-size:13px;color:var(--muted)}

@media(max-width:991.98px){
  .mx-stops{grid-template-columns:repeat(2,1fr)}
  .mx-routeprogress{display:none}
  .mx-sky-readout{font-size:15px}
}

/* the gold seam in „МАКСИМА*лно*" — the pun only lands if the shared letters show */
.hero-title .mx-gold{color:var(--gold-ink)}
.hero-title .mx-alt{color:var(--pur-l);display:block}

/* ══ TIGHTEN ═════════════════════════════════════════════════════════════
   The hero was left-aligned in a two-column grid with nothing in the right
   column, so half the fold was empty gradient and every element floated with
   too much air around it. With no photograph to put there, the honest fix is
   to stop pretending there are two columns: one centred measure, the skyline
   promoted from a small floating strip to the hero's visual base, and the
   vertical gaps pulled in so the block reads as one thing.
   ═══════════════════════════════════════════════════════════════════════ */
.hero-section{padding:34px 0 0}
.hero-grid.mx-solo{grid-template-columns:1fr;gap:0;justify-items:center;text-align:center}
.hero-grid.mx-solo > div{max-width:880px;width:100%}
.hero-grid.mx-solo .mx-eyebrow{margin-bottom:18px}
.hero-grid.mx-solo .mx-greet{margin-bottom:2px}
.hero-grid.mx-solo .hero-title{margin-bottom:4px}
.hero-grid.mx-solo .mx-swoosh{margin:6px auto 16px}
.hero-grid.mx-solo .hero-subtitle{max-width:56ch;margin:0 auto 24px}
.hero-grid.mx-solo .mx-hero-cta{justify-content:center;margin-bottom:14px}
.hero-grid.mx-solo .mx-microproof{justify-content:center}

/* the pun must read as one word — no space between the runs */
.hero-title{white-space:normal}
.hero-title .mx-gold{color:var(--gold-ink)}
.hero-title .mx-alt{color:var(--pur-l);display:block}

/* the skyline stops being a footnote and becomes the hero's base */
.mx-skyline{margin:26px 0 0}
.mx-skyline svg{height:132px}
.mx-sky-readout{justify-content:center;margin-bottom:2px}
.mx-skyline .mx-lbl{font-size:9.5px}

/* ══ DENSITY ═════════════════════════════════════════════════════════════
   The section headings were left-aligned, oversized and separated by 96px of
   padding, so the page read as a sequence of loose posters. This borrows the
   density from the approved redesign (v2/index.html): a centred rule–TITLE–rule
   divider, one compact measure of supporting text, and 60px of section padding
   instead of 96.
   ═══════════════════════════════════════════════════════════════════════ */
.mx-skyline svg{width:100%;height:auto}

/* Must use the token: an earlier literal here quietly overrode --mx-y, so the whole
   density pass had no effect on any section until this was found. */
.sec,.section-padding{padding:var(--mx-y) 0}
.sec > .container > .mx-rv:first-child,
.section-padding > .container > .mx-rv:first-child{text-align:center;margin-bottom:26px}

.mx-kicker{font-size:11.5px;letter-spacing:.18em;margin-bottom:10px}

.section-title,.sec h2{
  display:flex;align-items:center;justify-content:center;gap:20px;
  font-size:clamp(22px,2.2vw,29px);text-transform:uppercase;letter-spacing:1px;
  margin:0 auto 14px;max-width:none;
}
.section-title::before,.section-title::after,
.sec h2::before,.sec h2::after{
  content:'';height:2px;width:40px;flex:0 0 40px;background:rgba(0,0,0,.1);display:block;
}
.mx-dark .section-title::before,.mx-dark .section-title::after,
.mx-dark h2::before,.mx-dark h2::after{background:rgba(255,255,255,.2)}

.mx-sub{font-size:16px;max-width:58ch;margin:0 auto 0;text-align:center}
.section-padding .mx-sub{margin-bottom:22px}

/* the step labels sit centred under the heading rather than hanging left */
.mx-steplabel{justify-content:center;margin:26px 0 18px}
.mx-ages{justify-content:center}

/* the register keeps its two-column card but loses the extra air */
.mx-reg{padding:40px;gap:40px}
.mx-reg .section-title{justify-content:flex-start}
.mx-reg .section-title::before,.mx-reg .section-title::after{display:none}
.mx-reg .mx-sub{text-align:left;margin-left:0}

/* ── „Каде одиш?" — horizontal cards, from the approved redesign ────── */
.paths-section{padding:60px 0}
.path-card{border-radius:24px;padding:22px;display:flex;align-items:center;gap:18px;
  width:100%;height:100%;border:0;text-align:left;font-family:inherit;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.path-card:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.path-card.mx-t0{background:#FFF9E6}
.path-card.mx-t1{background:#F4F0FA}
.path-card.mx-t2{background:#EEF9F0}
.path-card[aria-pressed="true"]{outline:3px solid var(--pur);outline-offset:-3px}
.path-icon{width:64px;height:64px;flex:0 0 64px;display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:50%;box-shadow:0 5px 15px rgba(0,0,0,.05)}
.path-icon svg{width:36px;height:36px;fill:var(--pur)}
.path-content{flex:1 1 auto;min-width:0}
.path-title{display:block;font-family:'Onest',sans-serif;font-weight:800;font-size:1.25rem;
  color:var(--pur-d);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:3px}
.path-tag{display:block;font-size:.86rem;color:var(--muted);margin-bottom:7px;line-height:1.35}
.path-age{display:inline-block;font-size:.76rem;font-weight:800;color:var(--pur-d);
  background:rgba(255,255,255,.75);border-radius:999px;padding:4px 11px}
.path-arrow{width:38px;height:38px;flex:0 0 38px;background:#fff;border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:var(--pur-d);font-size:1.1rem;font-weight:800;
  box-shadow:0 5px 15px rgba(0,0,0,.05);transition:transform .3s var(--ease)}
.path-card:hover .path-arrow{transform:translateX(4px)}

/* the kicker follows its heading: centred everywhere except the register card */
.mx-kicker{text-align:center}
.mx-reg .mx-kicker{text-align:left}
.paths-section > .container > .mx-rv:first-child{text-align:center;margin-bottom:24px}

/* ═══════════════════════════════════════════════════════════════════════
   „Каде одиш?" — the crossroads scene and the three-step finder
   -----------------------------------------------------------------------
   One dark band carries the whole discovery step: a learner at a junction of
   language signs, and behind „Не знаеш каде?" the three questions. The signs
   carry the logo's landmark silhouettes, never flags — flag emoji also fall
   back to bare letter pairs (GB, DE) on Windows, which is most of our traffic.

   Motion is decorative only; the global prefers-reduced-motion block above
   already stops every animation here, and nothing depends on one having run.
   ═══════════════════════════════════════════════════════════════════════ */
.mx-cross{position:relative;overflow:hidden}
.mx-cross-inner{position:relative;z-index:2}
.mx-cross-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:1}
.mx-cross-glow--a{top:-120px;left:-100px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(232,163,43,.20),transparent 68%)}
.mx-cross-glow--b{right:-140px;bottom:-160px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(165,95,209,.24),transparent 68%)}
.mx-cross .section-title,.mx-cross .mx-q h3{color:#fff}
.mx-cross .mx-sub{color:rgba(255,255,255,.66)}
.mx-sub--center{margin-left:auto;margin-right:auto;text-align:center}

/* ── the junction ───────────────────────────────────────────────────── */
.mx-scene{position:relative;display:grid;max-width:1080px;min-height:440px;
  margin:14px auto 0;grid-template-columns:1fr minmax(260px,340px) 1fr;align-items:center}
/* display:grid would otherwise beat the hidden attribute when the finder opens */
.mx-scene[hidden],.mx-entry-wrap[hidden]{display:none!important}
.mx-scene::before{content:'';position:absolute;right:8%;bottom:38px;left:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(247,201,96,.34),transparent)}
.mx-scene.mx-leaving{animation:mx-cross-out .42s var(--ease) both}

.mx-route{position:relative;z-index:3;display:flex;flex-direction:column;gap:16px}
.mx-route--l{align-items:flex-end}
.mx-route--r{align-items:flex-start}

.mx-sign{position:relative;display:flex;align-items:center;gap:12px;width:252px;min-height:68px;
  padding:11px 42px 11px 15px;color:#fff;text-align:left;font-family:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
  border:1px solid rgba(255,255,255,.16);border-radius:14px 4px 4px 14px;
  box-shadow:0 14px 32px -22px rgba(0,0,0,.7);backdrop-filter:blur(14px);cursor:pointer;
  transform:translateX(var(--off,0)) rotate(var(--rot,0));
  transition:transform .28s var(--ease),background .25s,border-color .25s,box-shadow .25s;
  animation:mx-sign-float 4.8s ease-in-out var(--delay,0s) infinite}
.mx-route--r .mx-sign{padding:11px 15px 11px 42px;border-radius:4px 14px 14px 4px;text-align:right}
.mx-sign::after{content:'';position:absolute;top:-1px;bottom:-1px;width:5px;background:var(--sign,#E8A32B)}
.mx-route--l .mx-sign::after{right:-1px;border-radius:0 4px 4px 0}
.mx-route--r .mx-sign::after{left:-1px;border-radius:4px 0 0 4px}
.mx-sign-mark{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:11px;
  background:rgba(255,255,255,.10);transition:transform .28s var(--ease)}
.mx-sign-mark svg{width:24px;height:24px;fill:var(--sign,#E8A32B)}
.mx-sign-txt{flex:1 1 auto;min-width:0}
.mx-sign-name{display:block;font-family:'Onest',sans-serif;font-size:14px;font-weight:800;
  letter-spacing:.02em;text-transform:uppercase}
.mx-sign small{display:block;margin-top:2px;color:rgba(255,255,255,.52);font-size:10.5px;font-weight:700}
.mx-sign-arrow{position:absolute;top:50%;color:var(--sign,#E8A32B);font-size:16px;
  transform:translateY(-50%);transition:transform .25s}
.mx-route--l .mx-sign-arrow{right:16px}
.mx-route--r .mx-sign-arrow{left:16px}
.mx-sign:hover,.mx-sign:focus-visible,.mx-sign.mx-picked{z-index:5;outline:none;
  background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.09));
  border-color:var(--sign,#E8A32B);box-shadow:0 20px 40px -22px rgba(0,0,0,.8);
  transform:translateX(var(--hov,0)) rotate(0) scale(1.035)}
.mx-sign:hover .mx-sign-mark,.mx-sign:focus-visible .mx-sign-mark{transform:rotate(-6deg) scale(1.06)}
.mx-route--l .mx-sign:hover .mx-sign-arrow,.mx-route--l .mx-sign:focus-visible .mx-sign-arrow{transform:translate(-4px,-50%)}
.mx-route--r .mx-sign:hover .mx-sign-arrow,.mx-route--r .mx-sign:focus-visible .mx-sign-arrow{transform:translate(4px,-50%)}
.mx-route--l .mx-sign{--hov:-8px}
.mx-route--r .mx-sign{--hov:8px}
.mx-route .mx-sign:nth-child(1){--off:-8px;--rot:-.6deg;--delay:-.3s}
.mx-route .mx-sign:nth-child(2){--off:12px;--rot:.5deg;--delay:-1.3s}
.mx-route .mx-sign:nth-child(3){--off:-2px;--rot:-.4deg;--delay:-2.2s}
.mx-route .mx-sign:nth-child(4){--off:18px;--rot:.5deg;--delay:-3.1s}
.mx-route--r .mx-sign:nth-child(1){--off:8px}
.mx-route--r .mx-sign:nth-child(2){--off:-12px}
.mx-route--r .mx-sign:nth-child(3){--off:2px}
.mx-route--r .mx-sign:nth-child(4){--off:-18px}

.mx-figure{position:relative;z-index:2;display:flex;height:466px;align-items:flex-end;justify-content:center}
.mx-figure img{position:relative;z-index:2;width:auto;height:446px;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.22));transform-origin:50% 100%;
  animation:mx-think 5.4s ease-in-out infinite}
.mx-figure-glow{position:absolute;bottom:30px;width:290px;height:320px;border-radius:50%;filter:blur(12px);
  background:radial-gradient(circle,rgba(247,201,96,.22),rgba(124,58,165,.12) 42%,transparent 72%)}
.mx-think{position:absolute;z-index:4;top:30px;right:18px;display:grid;width:62px;height:62px;
  place-items:center;color:#3E1454;background:#fff;border-radius:50%;
  box-shadow:0 14px 30px -15px rgba(0,0,0,.5);animation:mx-think-float 3.2s ease-in-out infinite}
.mx-think b{font-family:'Onest',sans-serif;font-size:26px;font-weight:800;line-height:1}
.mx-think i,.mx-think u{position:absolute;display:block;background:#fff;border-radius:50%}
.mx-think i{right:5px;bottom:-15px;width:17px;height:17px}
.mx-think u{right:1px;bottom:-27px;width:9px;height:9px}
.mx-ground{position:absolute;z-index:1;bottom:20px;width:262px;height:22px;border-radius:50%;
  background:rgba(12,2,18,.28);filter:blur(12px)}
.mx-ground span{position:absolute;top:50%;width:7px;height:7px;background:#E8A32B;border-radius:50%;
  box-shadow:0 0 16px rgba(232,163,43,.7);animation:mx-ground-pulse 2.7s ease-in-out infinite}
.mx-ground span:nth-child(1){left:5%}
.mx-ground span:nth-child(2){right:9%;animation-delay:-.9s}
.mx-ground span:nth-child(3){right:47%;animation-delay:-1.7s}

/* ── the junction arrives, and then holds still ──────────────────────────
   Eight signs floating for ever, the learner swaying, the bubble bobbing and
   three ground lights pulsing is movement without hierarchy: the one thing the
   visitor has to do here — read eight names and choose one — was the only thing
   that would not sit still, and a moving target is harder to read and harder to
   hit. So the scene ASSEMBLES once, in reading order, and then stops.

   Kept moving on purpose: the thought bubble, because that one is character
   rather than noise, and the three lights under her feet, because they are the
   road rather than the choice. Hover, focus and the picked state keep every bit
   of their motion — that motion answers the visitor.

   Gated behind .mx-motion exactly like .mx-rv, so with no JavaScript or with
   reduced motion the scene is simply, immediately, there. And animated through
   `translate`, never `transform`: a filled animation would otherwise outrank the
   hover and .mx-picked transforms and freeze the signs. */
.mx-sign{animation:none}
.mx-figure img{animation:none}

.mx-motion .mx-scene .mx-sign,
.mx-motion .mx-scene .mx-figure img{opacity:0}
.mx-motion .mx-scene .mx-think{opacity:0;transition:opacity .5s var(--ease) .60s}
.mx-motion .mx-scene.mx-in .mx-think{opacity:1}

.mx-motion .mx-scene.mx-in .mx-sign{
  animation:mx-sign-arrive .56s var(--ease) var(--in,0s) both}
.mx-motion .mx-scene.mx-in .mx-figure img{
  animation:mx-figure-arrive .70s var(--ease) .08s both}

/* Both columns land in pairs, top to bottom, so the junction opens outward from
   the learner rather than sweeping across her. */
.mx-route .mx-sign:nth-child(1){--in:.04s}
.mx-route .mx-sign:nth-child(2){--in:.13s}
.mx-route .mx-sign:nth-child(3){--in:.22s}
.mx-route .mx-sign:nth-child(4){--in:.31s}

@keyframes mx-sign-arrive{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes mx-figure-arrive{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}

/* ── the door ───────────────────────────────────────────────────────── */
.mx-entry-wrap{max-width:620px;margin:-6px auto 0;text-align:center}
.mx-entry-hint{display:block;margin-bottom:8px;color:rgba(255,255,255,.5);font-size:11px;
  font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.mx-entry{display:flex;width:100%;min-height:82px;padding:14px 16px 14px 24px;align-items:center;
  justify-content:space-between;gap:16px;color:#2F0D42;text-align:left;font-family:inherit;
  background:linear-gradient(135deg,var(--gold-l),var(--gold));border:0;border-radius:22px;
  cursor:pointer;box-shadow:0 22px 48px -20px rgba(232,163,43,.62);
  transition:transform .22s var(--ease),box-shadow .25s}
.mx-entry:hover,.mx-entry:focus-visible{outline:none;transform:translateY(-3px);
  box-shadow:0 28px 54px -18px rgba(232,163,43,.72)}
.mx-entry-txt{min-width:0}
.mx-entry strong{display:block;font-family:'Onest',sans-serif;font-size:18px;font-weight:800}
.mx-entry small{display:block;margin-top:2px;color:rgba(47,13,66,.7);font-size:13px;font-weight:700}
.mx-entry > i{flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;color:#fff;
  background:var(--pur);border-radius:50%;box-shadow:0 10px 20px -10px rgba(47,13,66,.8);
  animation:mx-entry-arrow 1.8s ease-in-out infinite}
.mx-entry-wrap > p{margin:9px 0 0;color:rgba(255,255,255,.4);font-size:11.5px}

/* ── the finder ─────────────────────────────────────────────────────── */
.mx-progress[hidden],.mx-stage[hidden]{display:none!important}
.mx-progress{display:flex;align-items:center;gap:16px;max-width:720px;margin:36px auto 20px}
.mx-progress-bar{flex:1;height:4px;overflow:hidden;background:rgba(255,255,255,.13);border-radius:99px}
.mx-progress-bar b{display:block;width:33.33%;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--gold-l));transition:width .45s var(--ease)}
.mx-progress-label{color:rgba(255,255,255,.66);font-size:11px;font-weight:800;letter-spacing:.12em}
.mx-stage{max-width:1080px;margin:0 auto;padding:36px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);border-radius:32px;box-shadow:var(--sh-lg);backdrop-filter:blur(16px)}
.mx-progress.mx-shown,.mx-stage.mx-shown{animation:mx-wizard-in .58s var(--ease) both}
.mx-panel[hidden]{display:none!important}
.mx-panel{animation:mx-panel-in .5s var(--ease)}

.mx-q{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.mx-q > span{flex:0 0 52px;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
  background:var(--gold);color:#3E1454;font-family:'Onest',sans-serif;font-weight:800}
.mx-q p{margin:0 0 3px;color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase}
.mx-q h3{margin:0;font-family:'Onest',sans-serif;font-size:clamp(22px,3vw,34px);font-weight:800;
  letter-spacing:-.03em}

.mx-aud{position:relative;width:100%;min-height:240px;padding:24px;overflow:hidden;color:#fff;
  text-align:left;font-family:inherit;cursor:pointer;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);border-radius:26px;
  transition:transform .28s var(--ease),background .25s,border-color .25s}
.mx-aud:hover,.mx-aud:focus-visible{outline:none;background:rgba(255,255,255,.12);
  border-color:rgba(232,163,43,.65);transform:translateY(-7px)}
.mx-aud-icn{display:grid;width:58px;height:58px;margin-bottom:26px;place-items:center;border-radius:18px;
  background:rgba(232,163,43,.12);border:1px solid rgba(232,163,43,.25)}
.mx-aud-icn svg{width:34px;height:34px;fill:#E8A32B}
.mx-aud-age{position:absolute;top:24px;right:24px;color:rgba(255,255,255,.58);font-size:11px;font-weight:800}
.mx-aud strong{display:block;margin-bottom:6px;font-family:'Onest',sans-serif;font-size:19px;font-weight:800}
.mx-aud small{display:block;color:rgba(255,255,255,.58);font-size:13px}
.mx-aud-go{position:absolute;right:22px;bottom:20px;display:grid;width:35px;height:35px;place-items:center;
  color:#3E1454;background:#fff;border-radius:50%;font-size:13px;transition:transform .25s var(--ease)}
.mx-aud:hover .mx-aud-go{transform:translateX(4px)}

/* the signpost: one post, the languages fanning off it left and right */
.mx-post{position:relative;display:flex;max-width:430px;margin:auto;padding-bottom:36px;
  flex-direction:column;align-items:center;gap:5px}
/* the post the signs hang off: centred on the stack, behind it, and left standing
   below the last sign so the group reads as one object rather than a list */
.mx-post-pole{position:absolute;z-index:0;top:14px;bottom:0;left:50%;width:16px;margin-left:-8px;
  border-radius:5px 5px 0 0;background:linear-gradient(90deg,#4B2A63,#7C5A93,#3E1F52);
  box-shadow:8px 8px 20px rgba(0,0,0,.3)}
.mx-post-sign{position:relative;z-index:1;display:flex;width:320px;min-height:54px;padding:8px 30px;
  align-items:center;justify-content:center;gap:10px;color:#fff;font-family:'Onest',sans-serif;
  font-size:13px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;
  background:linear-gradient(135deg,var(--sign,#E8A32B),color-mix(in srgb,var(--sign,#E8A32B) 62%,#2F0D42));
  border:1px solid rgba(255,255,255,.22);
  clip-path:polygon(0 0,91% 0,100% 50%,91% 100%,0 100%,6% 50%);
  text-shadow:0 2px 5px rgba(0,0,0,.28);box-shadow:0 7px 15px rgba(0,0,0,.18);
  transition:filter .25s,transform .28s var(--ease)}
.mx-post-sign:nth-child(even){clip-path:polygon(9% 0,100% 0,94% 50%,100% 100%,9% 100%,0 50%)}
.mx-post-sign small{color:rgba(255,255,255,.78);font-size:10px;font-weight:700;text-transform:none;
  letter-spacing:0}
.mx-post-mark{flex:0 0 22px;height:22px;display:grid;place-items:center}
.mx-post-mark svg{width:22px;height:22px;fill:#fff}
.mx-post-sign:hover,.mx-post-sign:focus-visible,.mx-post-sign.mx-picked{z-index:3;outline:none;
  filter:brightness(1.12);transform:translateX(8px) rotate(1deg) scale(1.025)}
.mx-post-sign:nth-child(even):hover,.mx-post-sign:nth-child(even):focus-visible,
.mx-post-sign:nth-child(even).mx-picked{transform:translateX(-8px) rotate(-1deg) scale(1.025)}

.mx-goals{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.mx-goals button{display:flex;min-height:140px;padding:24px;align-items:center;gap:20px;color:#fff;
  text-align:left;font-family:inherit;cursor:pointer;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);border-radius:22px;
  transition:transform .28s var(--ease),border-color .25s,background .25s}
.mx-goals button:hover,.mx-goals button:focus-visible{outline:none;background:rgba(255,255,255,.12);
  border-color:var(--gold);transform:translateY(-5px)}
.mx-goals i{flex:0 0 58px;width:58px;height:58px;display:grid;place-items:center;color:#3E1454;
  background:var(--gold);border-radius:18px;font-size:20px}
.mx-goals span{display:block;color:rgba(255,255,255,.64);font-size:13px}
.mx-goals strong{display:block;margin-top:3px;color:#fff;font-family:'Onest',sans-serif;font-size:19px}

.mx-back{margin-top:16px;padding:8px 0;color:rgba(255,255,255,.64);background:none;border:0;
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.mx-back:hover,.mx-back:focus-visible{color:#fff;outline:none}

.mx-done{max-width:820px;margin:auto;padding:22px 0;text-align:center}
.mx-done-tick{display:grid;width:72px;height:72px;margin:0 auto 20px;place-items:center;color:#3E1454;
  background:var(--gold);border-radius:50%;font-size:26px;box-shadow:0 0 0 12px rgba(232,163,43,.1)}
.mx-done h3{color:#fff;font-size:clamp(26px,4vw,46px);font-weight:800;letter-spacing:-.035em;margin:0 0 14px}
.mx-done > p{max-width:56ch;margin:0 auto 22px;color:rgba(255,255,255,.7);line-height:1.72}
.mx-done .mx-chips{justify-content:center}
.mx-done-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:26px}

@keyframes mx-sign-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes mx-think{0%,100%{transform:rotate(-.25deg) translateY(0)}50%{transform:rotate(.35deg) translateY(-4px)}}
@keyframes mx-think-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes mx-ground-pulse{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}
@keyframes mx-entry-arrow{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@keyframes mx-wizard-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes mx-panel-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mx-cross-out{to{opacity:0;transform:scale(.97) translateY(-14px)}}

@media(max-width:991.98px){
  .mx-scene{min-height:520px;grid-template-columns:1fr 240px 1fr}
  .mx-figure{height:500px}
  .mx-figure img{height:480px}
  .mx-sign{width:208px;padding-right:38px}
  .mx-route--r .mx-sign{padding-left:38px;padding-right:15px}
  .mx-sign-name{font-size:12px}
  .mx-sign small{font-size:9px}
  .mx-stage{padding:24px 18px;border-radius:26px}
  .mx-aud{min-height:auto;padding:20px}
  .mx-aud-icn{width:48px;height:48px;margin-bottom:16px}
}
@media(max-width:767.98px){
  /* A phone is not a narrow desktop. The junction keeps its shape — two roads and a
     learner between them — but the arrows go (they repeat what the side already says),
     the place names go, and the figure shrinks so the signs get the width. */
  .mx-scene{min-height:0;margin-top:10px;grid-template-columns:1fr 108px 1fr;
    align-items:end;column-gap:4px}
  .mx-scene::before{bottom:14px}
  .mx-figure{height:330px;align-self:end}
  .mx-figure img{width:auto;height:318px}
  .mx-figure-glow{width:180px;height:220px;bottom:18px}
  .mx-think{top:-2px;right:auto;left:50%;margin-left:8px;width:44px;height:44px}
  .mx-think b{font-size:19px}
  .mx-think i{right:auto;left:-2px;bottom:-12px;width:13px;height:13px}
  .mx-think u{right:auto;left:-9px;bottom:-22px;width:7px;height:7px}
  .mx-ground{width:170px;bottom:12px;height:16px}
  .mx-route{gap:10px}
  .mx-sign{width:100%;max-width:150px;min-height:50px;padding:8px 10px;gap:8px;
    border-radius:11px 3px 3px 11px}
  .mx-route--r .mx-sign{padding:8px 10px;border-radius:3px 11px 11px 3px}
  .mx-sign-mark{flex-basis:24px;height:24px;border-radius:7px}
  .mx-sign-mark svg{width:17px;height:17px}
  .mx-sign-name{font-size:10px;letter-spacing:0;line-height:1.15;word-break:break-word}
  .mx-sign small,.mx-sign-arrow{display:none}
  .mx-route .mx-sign:nth-child(n),.mx-route--r .mx-sign:nth-child(n){--off:0;--rot:0}
  .mx-entry-wrap{margin-top:6px}
  .mx-entry{min-height:76px;padding-left:18px}
  .mx-entry strong{font-size:16px}
  .mx-entry small{font-size:11.5px}
  .mx-entry > i{flex-basis:42px;width:42px;height:42px}
  .mx-q{align-items:flex-start}
  .mx-q > span{flex-basis:44px;width:44px;height:44px;font-size:13px}
  .mx-post{min-height:auto;max-width:100%}
  .mx-post-sign{width:min(300px,88vw);font-size:11px}
  .mx-goals{grid-template-columns:1fr}
  .mx-goals button{min-height:96px;padding:18px}
  .mx-goals i{flex-basis:48px;width:48px;height:48px;font-size:17px}
}
@media(max-width:420px){
  .mx-scene{grid-template-columns:1fr 92px 1fr;column-gap:2px}
  .mx-figure{height:296px}
  .mx-figure img{height:286px}
  .mx-figure-glow{width:150px;height:190px}
  .mx-think{width:38px;height:38px;margin-left:4px}
  .mx-think b{font-size:16px}
  .mx-ground{width:140px}
  .mx-sign{max-width:132px;padding:7px 8px;gap:6px}
  .mx-route--r .mx-sign{padding:7px 8px}
  .mx-sign-name{font-size:9px}
  .mx-post-sign{width:min(268px,90vw)}
}

/* ═══════════════════════════════════════════════════════════════════════
   „Ова е MAXIMA." — the photographic break
   -----------------------------------------------------------------------
   The only block on the page made of photographs, and they are the school's
   own: frames from its 2022 film. A deep purple panel holds the words and the
   sign off the building; the room, the town and a lesson sit beside it.

   Photographs are lazy and carry explicit dimensions, so nothing below them
   jumps while they arrive.
   ═══════════════════════════════════════════════════════════════════════ */
.mx-story-grid{display:grid;gap:18px;
  grid-template-columns:minmax(280px,1.02fr) 1fr 1fr;grid-template-rows:auto auto}
/* The first .mx-rv inside a .section-padding container is centred site-wide, and that
   rule carries three classes. This block is editorial rather than a centred heading, so
   it opts out with the same shape plus one — a single .mx-story-grid rule would lose. */
.section-padding.mx-story > .container > .mx-rv:first-child{text-align:left}
.mx-story-panel{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;
  padding:42px 38px;border-radius:32px;color:#fff;box-shadow:var(--sh);
  background:linear-gradient(158deg,var(--pur-d) 0%,var(--pur) 62%,var(--pur-l) 100%)}
.mx-kicker--left{text-align:left;color:var(--gold-l)}
.mx-story-panel h2{margin:0 0 18px;font-family:'Onest',sans-serif;color:#fff;
  font-size:clamp(38px,4.4vw,66px);font-weight:800;line-height:.92;letter-spacing:-.045em;
  text-transform:uppercase}
.mx-story-panel .cms-rt{color:rgba(255,255,255,.82);font-size:16.5px;line-height:1.72}
.mx-story-panel .cms-rt p:last-child{margin-bottom:0}
.mx-story-panel .btn{align-self:flex-start;margin-top:26px}
.mx-story-sign{width:100%;height:auto;margin-top:auto;padding-top:30px;border-radius:0}
.mx-story-sign{border-radius:18px;box-shadow:0 18px 36px -22px rgba(0,0,0,.8)}

.mx-story figure{position:relative;margin:0;overflow:hidden;border-radius:26px;
  box-shadow:var(--sh-sm);background:rgba(91,33,122,.06)}
.mx-story figure img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease)}
.mx-story figure:hover img{transform:scale(1.035)}
.mx-story-lead{grid-column:2 / span 2;grid-row:1;height:392px}
.mx-story-sm{grid-row:2;height:298px}
.mx-story figcaption{position:absolute;right:0;bottom:0;left:0;padding:38px 20px 16px;
  color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(to top,rgba(24,6,36,.82),transparent)}

@media(max-width:991.98px){
  .mx-story-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}
  .mx-story-panel{grid-column:1 / span 2;grid-row:1;padding:34px 28px}
  .mx-story-panel h2{font-size:clamp(34px,7vw,50px)}
  .mx-story-sign{max-width:340px;margin-top:28px;padding-top:0}
  .mx-story-lead{grid-column:1 / span 2;grid-row:2;height:320px}
  .mx-story-sm{grid-row:3;height:230px}
}
@media(max-width:575.98px){
  .mx-story-grid{gap:12px}
  .mx-story-panel{padding:28px 22px;border-radius:26px}
  .mx-story-lead{height:236px;border-radius:20px}
  .mx-story-sm{height:150px;border-radius:20px}
  .mx-story figcaption{padding:26px 13px 11px;font-size:10.5px}
  .mx-story-sign{max-width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════
   ART-DIRECTION PASS — one MAXIMA world instead of ten good boxes
   -----------------------------------------------------------------------
   Four things happen here:
     · sections overlap instead of butting up against each other
     · two blocks break out of the container entirely
     · the feature-card row becomes boarding passes
     · one gold route runs down the page and joins the whole thing up
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the route's coordinate system ──────────────────────────────────── */
.mx-main{position:relative}
.mx-spine{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;
  overflow:visible}
.mx-spine path,.mx-spine circle,.mx-spine g{pointer-events:none}
/* Track and live line share one gradient, so the faint line is also visible where
   the ink turns gold over the dark band. */
.mx-spine-track{fill:none;stroke:url(#mxSpineInk);opacity:.17;stroke-width:2;stroke-linecap:round}
.mx-spine-live{fill:none;stroke:url(#mxSpineInk);stroke-width:2.5;stroke-linecap:round}
.mx-spine-stop{fill:var(--cream);stroke:var(--pur-l);stroke-width:2;transition:.4s var(--ease)}
.mx-spine-stop.mx-on{fill:var(--gold);stroke:var(--gold)}
.mx-spine-dot{fill:rgba(124,58,165,.32);transition:.4s var(--ease)}
.mx-spine-dot.mx-on{fill:var(--gold)}
.mx-spine-label{font-family:'Onest',sans-serif;font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;fill:var(--muted);opacity:0;transition:.45s var(--ease)}
.mx-spine-label.mx-on{opacity:1;fill:var(--pur)}
/* Over the dark band the ink turns gold — see the gradient stops built in site.js. */
.mx-spine-stop.mx-dark-seg{fill:#2E0F41;stroke:var(--gold-l)}
.mx-spine-label.mx-dark-seg.mx-on{fill:var(--gold-l)}
/* The plane. A CSS shadow, never an SVG filter on a page-height element. */
.mx-plane{position:absolute;top:0;left:0;width:30px;height:30px;margin:-15px 0 0 -15px;
  display:grid;place-items:center;color:var(--pur-d);background:var(--gold);border-radius:50%;
  box-shadow:0 8px 20px -6px rgba(232,163,43,.9);font-size:12px;z-index:2;pointer-events:none;
  transition:transform .9s var(--ease);opacity:0}
.mx-plane.mx-on{opacity:1}
.mx-plane.mx-dark-seg{background:var(--gold-l);color:#2E0F41}

/* ── overlap: the proof strip lifts into the bottom of the crossroads ── */
.mx-cross{padding-bottom:calc(var(--mx-y) + 46px)}
.mx-statsband{position:relative;z-index:4;margin-top:-62px;margin-bottom:var(--mx-y-tight);
  background:var(--paper);border-radius:26px;box-shadow:var(--sh);
  padding:22px 18px;max-width:1000px;margin-left:auto;margin-right:auto}
.mx-statsband + *{padding-top:var(--mx-y)}

/* ── translations, as one more destination off the junction ─────────── */
.mx-aside{display:flex;align-items:center;gap:14px;width:fit-content;max-width:100%;
  margin:22px auto 0;padding:12px 20px;color:rgba(255,255,255,.86);text-decoration:none;
  background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.24);border-radius:999px;
  font-size:14px;font-weight:700;transition:.28s var(--ease)}
.mx-aside:hover,.mx-aside:focus-visible{outline:none;color:#fff;border-color:var(--gold);
  background:rgba(255,255,255,.11);transform:translateY(-2px)}
.mx-aside-mark{display:grid;width:30px;height:30px;flex:0 0 30px;place-items:center;
  color:var(--pur-d);background:var(--gold);border-radius:50%;font-size:13px}
.mx-aside > i{color:var(--gold-l);font-size:12px}

/* ── boarding passes ────────────────────────────────────────────────── */
.mx-opps{padding-bottom:var(--mx-y-lift)}
.mx-cert{padding-top:var(--mx-y-tight)}
.mx-tickets{display:flex;gap:16px;justify-content:center;align-items:stretch;
  padding:14px 24px 20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.mx-tickets::-webkit-scrollbar{display:none}
.mx-ticket{position:relative;flex:0 0 216px;scroll-snap-align:center;padding:22px 20px 20px 30px;
  background:var(--paper);border-radius:6px 20px 20px 6px;box-shadow:var(--sh-sm);
  transform:rotate(calc((var(--i) - 2) * .9deg)) translateY(calc(var(--i) * 1px));
  transition:transform .38s var(--ease),box-shadow .38s var(--ease)}
.mx-ticket:hover,.mx-ticket:focus-within{transform:rotate(0) translateY(-8px);box-shadow:var(--sh)}
/* the torn stub */
.mx-ticket-stub{position:absolute;top:12px;bottom:12px;left:14px;width:2px;
  background:repeating-linear-gradient(to bottom,var(--line) 0 5px,transparent 5px 10px)}
.mx-ticket-no{position:absolute;top:16px;right:18px;font-family:'Onest',sans-serif;font-size:11px;
  font-weight:800;letter-spacing:.1em;color:var(--muted)}
.mx-ticket-icn{display:grid;width:44px;height:44px;margin-bottom:16px;place-items:center;
  color:var(--pur);background:linear-gradient(140deg,rgba(232,163,43,.18),rgba(124,58,165,.12));
  border-radius:14px;font-size:17px}
.mx-ticket h3{margin:0 0 6px;font-family:'Onest',sans-serif;font-size:17px;font-weight:800;
  letter-spacing:.01em;text-transform:uppercase;color:var(--pur-d)}
.mx-ticket-txt{color:var(--ink-2);font-size:13.5px;line-height:1.55}
.mx-ticket-txt p{margin:0}

/* ── the human band: full bleed, and it overlaps its own edges ──────── */
.mx-band{position:relative;display:grid;align-items:center;gap:0;
  grid-template-columns:minmax(320px,.92fr) 1.28fr;
  padding:var(--mx-y-lift) 0;background:linear-gradient(180deg,var(--cream),#FBF2E4 62%,var(--cream))}
.mx-band-copy{position:relative;z-index:3;
  padding-left:max(24px,calc((100vw - 1180px) / 2));padding-right:46px}
.mx-kicker--left{text-align:left;color:var(--gold-ink-sm)}
.mx-band-title{margin:0 0 16px;font-family:'Onest',sans-serif;color:var(--pur-d);
  font-size:clamp(40px,5vw,74px);font-weight:800;line-height:.9;letter-spacing:-.05em;
  text-transform:uppercase}
.mx-band-lead{max-width:42ch;color:var(--ink-2);font-size:17px;line-height:1.75}
.mx-band-lead p:last-child{margin-bottom:0}
.mx-band-cta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  color:var(--pur);font-weight:800;font-size:15.5px;text-decoration:none;
  border-bottom:2px solid var(--gold);padding-bottom:5px;transition:.28s var(--ease)}
.mx-band-cta i{transition:transform .28s var(--ease)}
.mx-band-cta:hover{color:var(--pur-d)}
.mx-band-cta:hover i{transform:translateX(5px)}
.mx-band-media{position:relative;z-index:2}
.mx-band-wide{position:relative;z-index:2;margin:0;overflow:hidden;
  border-radius:32px 0 0 32px;box-shadow:var(--sh-lg)}
.mx-band-wide img{display:block;width:100%;height:clamp(360px,42vw,540px);object-fit:cover}
/* Caption sits at the TOP: the detail photograph hangs off the bottom-left corner and
   would otherwise sit on top of it. */
.mx-band-wide figcaption{position:absolute;right:0;top:0;left:0;padding:18px 26px 44px;
  color:#fff;font-size:13px;font-weight:700;
  background:linear-gradient(to bottom,rgba(24,6,36,.78),transparent)}
/* Hangs off the left edge of the big photograph — half on it, half on the cream.
   It used to be anchored to the page and landed on top of the copy. */
.mx-band-detail{position:absolute;z-index:4;bottom:-34px;left:-118px;width:238px;margin:0;
  overflow:hidden;border-radius:20px;border:6px solid var(--cream);box-shadow:var(--sh)}
.mx-band-detail img{display:block;width:100%;height:172px;object-fit:cover}

/* ── 2016 → 2026 ────────────────────────────────────────────────────── */
.mx-hist-grid{display:grid;align-items:center;gap:20px;margin-top:26px;
  grid-template-columns:minmax(0,.78fr) 86px minmax(0,1.22fr)}
.mx-hist figure{position:relative;margin:0}
.mx-hist-year{position:absolute;z-index:3;top:-16px;left:-6px;padding:5px 13px;
  color:var(--pur-d);background:var(--gold);border-radius:999px;
  font-family:'Onest',sans-serif;font-size:13px;font-weight:800;letter-spacing:.04em;
  box-shadow:0 10px 22px -12px rgba(232,163,43,.9)}
.mx-hist-then img{display:block;width:100%;max-width:300px;height:auto;border-radius:16px;
  filter:saturate(.72) contrast(.94);opacity:.86;
  box-shadow:0 12px 30px -20px rgba(62,20,84,.7)}
.mx-hist-then figcaption,.mx-hist-now figcaption{margin-top:12px;color:var(--muted);
  font-size:13px;font-weight:700}
.mx-hist-now img{display:block;width:100%;height:clamp(220px,24vw,300px);object-fit:cover;
  border-radius:24px;box-shadow:var(--sh)}
.mx-hist-arrow{position:relative;display:grid;place-items:center;height:60px}
.mx-hist-line{position:absolute;left:0;right:0;height:2px;
  background:repeating-linear-gradient(to right,var(--gold) 0 7px,transparent 7px 14px)}
.mx-hist-plane{position:relative;z-index:2;display:grid;width:36px;height:36px;place-items:center;
  color:var(--pur-d);background:var(--gold);border-radius:50%;font-size:14px;
  box-shadow:0 10px 22px -10px rgba(232,163,43,.9)}
.mx-hist-note{max-width:56ch;margin:22px auto 0;text-align:center;color:var(--ink-2)}

/* The invitation that sits at the foot of the anniversary — today, the quiz. Dark on
   the cream page so it reads as an offer rather than as more of the story. */
.mx-hist-invite{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:26px;margin-top:34px;padding:clamp(24px,3.4vw,36px);color:#fff;border-radius:26px;
  background:radial-gradient(circle at 86% 18%,rgba(247,201,96,.22),transparent 34%),
             linear-gradient(145deg,var(--pur-d),var(--pur));box-shadow:var(--sh)}
.mx-hist-invite .mx-kicker{color:var(--gold-l);margin-bottom:6px}
.mx-hist-invite strong{display:block;font-family:'Onest',sans-serif;font-size:clamp(24px,2.6vw,34px);
  font-weight:800;line-height:1.04;letter-spacing:-.03em}
.mx-hist-invite small{display:block;max-width:52ch;margin-top:9px;color:rgba(255,255,255,.76);
  font-size:14.5px;line-height:1.6}
.mx-hist-invite .btn-gold{white-space:nowrap}
@media(max-width:767.98px){
  .mx-hist-invite{grid-template-columns:1fr;gap:20px}
  .mx-hist-invite .btn-gold{width:100%;text-align:center}
}

/* ── the anniversary is a chapter, not a label ───────────────────────────
   Measured 2026-08-29: this heading rendered at 29px, uppercase, 1px tracking,
   between two rules — the same signpost treatment as „ПРВ ЧЕКОР" and „ПО КУРСОТ",
   which are utility labels. „10 години MAXIMA" is the sentence the whole page has
   been building towards, and it was the smallest voice on the page. The ending
   („Дојди и види ја училницата.") already speaks at 66px; this now answers it. */
.mx-hist .section-title{
  display:block;max-width:14ch;margin-inline:auto;
  font-size:clamp(38px,5.4vw,70px);line-height:.94;letter-spacing:-.04em;
  text-transform:none}
.mx-hist .section-title::before,.mx-hist .section-title::after{display:none}
@media(max-width:575.98px){
  .mx-hist .section-title{max-width:none;font-size:clamp(34px,11vw,50px)}
}

/* Cyrillic headlines break badly on a hard wrap — a one-word last line reads as
   a mistake. Balance the display sizes, and let body copy avoid orphans. */
.section-title,.mx-end-title,.mx-band-title,.hero-title,.mx-story-panel h2{text-wrap:balance}
.mx-sub,.cms-rt p,.mx-end-lead p,.mx-hist-note{text-wrap:pretty}

/* ── the journey, as a leg of the route ─────────────────────────────── */
.mx-trip-track{position:relative;display:grid;gap:18px;margin:30px 0 0;padding:0;
  list-style:none;grid-template-columns:repeat(5,1fr)}
.mx-trip-rail,.mx-trip-fill{position:absolute;top:21px;left:9%;right:9%;height:3px;border-radius:99px}
.mx-trip-rail{background:repeating-linear-gradient(to right,var(--line) 0 6px,transparent 6px 12px)}
.mx-trip-fill{right:auto;width:82%;background:linear-gradient(90deg,var(--gold),var(--gold-l));
  transition:width .5s var(--ease)}
.mx-trip-plane{position:absolute;top:6px;left:91%;z-index:3;display:grid;width:32px;height:32px;
  margin-left:-16px;place-items:center;color:var(--pur-d);background:var(--gold);border-radius:50%;
  font-size:12px;box-shadow:0 10px 22px -10px rgba(232,163,43,.9);transition:left .5s var(--ease)}
.mx-trip-stop{position:relative;padding-right:12px;text-align:left}
.mx-trip-dot{position:relative;z-index:2;display:grid;width:44px;height:44px;margin-bottom:16px;
  place-items:center;background:var(--cream);border:2.5px solid var(--line);border-radius:50%;
  transition:.45s var(--ease)}
.mx-trip-dot b{font-family:'Onest',sans-serif;font-size:15px;font-weight:800;color:var(--muted);
  transition:.45s var(--ease)}
.mx-trip-stop.mx-passed .mx-trip-dot{background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 0 7px rgba(232,163,43,.14)}
.mx-trip-stop.mx-passed .mx-trip-dot b{color:var(--pur-d)}
.mx-trip-stop h3{margin:0 0 6px;font-family:'Onest',sans-serif;font-size:17px;font-weight:800;
  color:var(--pur-d)}
.mx-trip-stop .cms-rt{color:var(--ink-2);font-size:14px;line-height:1.6}
.mx-trip-stop .cms-rt p{margin:0}

/* ── the ending ─────────────────────────────────────────────────────── */
.mx-end{position:relative;overflow:hidden;padding:var(--mx-y-lift) 0;
  background:linear-gradient(150deg,var(--pur-d) 0%,#33124A 48%,var(--pur) 100%)}
.mx-end-glow{position:absolute;top:-160px;right:-120px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,163,43,.26),transparent 68%);filter:blur(80px)}
.mx-end-inner{position:relative;z-index:2}
.mx-end-grid{display:grid;align-items:center;gap:40px;grid-template-columns:1.15fr .85fr}
.mx-end-deadline{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  padding:8px 16px;color:var(--gold-l);background:rgba(232,163,43,.12);
  border:1px solid rgba(232,163,43,.32);border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.mx-end-deadline .mx-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(232,163,43,.22)}
.mx-end-title{margin:0 0 16px;font-family:'Onest',sans-serif;color:#fff;
  font-size:clamp(36px,4.6vw,68px);font-weight:800;line-height:.94;letter-spacing:-.045em;
  text-transform:uppercase}
.mx-end-lead{max-width:46ch;color:rgba(255,255,255,.8);font-size:17px;line-height:1.7}
.mx-end-lead p:last-child{margin-bottom:0}
.mx-end-cta{margin-top:28px}
.mx-end-ways{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0;padding:0;list-style:none}
.mx-end-ways a,.mx-end-way-static{display:flex;align-items:center;gap:12px;padding:12px 18px;
  color:rgba(255,255,255,.9);text-decoration:none;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);border-radius:16px;transition:.28s var(--ease)}
.mx-end-ways a:hover,.mx-end-ways a:focus-visible{outline:none;color:#fff;
  border-color:var(--gold);background:rgba(255,255,255,.13);transform:translateY(-3px)}
.mx-end-ways i{color:var(--gold-l);font-size:15px}
.mx-end-ways small{display:block;color:rgba(255,255,255,.5);font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase}
.mx-end-ways b{display:block;font-size:15px;font-weight:800}
.mx-end-photo{position:relative;margin:0;overflow:hidden;border-radius:26px;
  box-shadow:var(--sh-lg)}
.mx-end-photo img{display:block;width:100%;height:clamp(230px,22vw,300px);object-fit:cover}

/* ── responsive ─────────────────────────────────────────────────────── */
@media(max-width:991.98px){
  :root{--mx-y:44px;--mx-y-lift:60px}
  .mx-statsband{margin-top:-48px}
  .mx-band{grid-template-columns:1fr;gap:24px;padding-bottom:calc(var(--mx-y-lift) + 48px)}
  .mx-band-copy{padding:0 24px}
  .mx-band-wide{border-radius:26px;margin:0 24px}
  .mx-band-wide img{height:290px}
  .mx-band-detail{left:auto;right:14px;bottom:-40px;width:190px}
  .mx-band-detail img{height:132px}
  .mx-hist-grid{grid-template-columns:1fr;gap:26px}
  .mx-hist-arrow{height:44px;transform:rotate(90deg)}
  .mx-hist-then img{max-width:230px}
  .mx-end-grid{grid-template-columns:1fr;gap:26px}
  .mx-trip-track{grid-template-columns:repeat(2,1fr);gap:24px}
  .mx-trip-rail,.mx-trip-fill,.mx-trip-plane{display:none}
  .mx-spine,.mx-plane{display:none}
}
@media(max-width:575.98px){
  .mx-tickets{justify-content:flex-start;padding-left:20px;padding-right:20px}
  .mx-ticket{flex-basis:176px;padding:18px 16px 18px 26px;transform:none}
  .mx-band-title{font-size:clamp(34px,10vw,48px)}
  .mx-band-detail{width:150px;right:14px;bottom:-30px}
  .mx-band-detail img{height:104px}
  .mx-trip-track{grid-template-columns:1fr;gap:18px}
  .mx-trip-stop{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
  .mx-trip-dot{margin-bottom:0}
  .mx-trip-stop h3{grid-column:2;margin-top:9px}
  .mx-trip-stop .cms-rt{grid-column:2}
  .mx-end-ways a,.mx-end-way-static{width:100%}
  .mx-statsband{margin-left:16px;margin-right:16px}
}

/* ── focus, made visible ───────────────────────────────────────────────────
   Every control in the junction and the finder answered :focus-visible with
   the hover treatment and outline:none — measured 2026-08-28, that is a 3.5%
   scale and a slightly deeper shadow on a dark band, and on a sign it is the
   same treatment as „picked", so a keyboard user could not tell where they
   were from what they had already chosen.

   These rules are LAST in the file deliberately: every hover rule above them
   carries outline:none, and the same trap that let one literal padding rule
   defeat the whole density pass applies here. */
.mx-cross .mx-sign:focus-visible,
.mx-cross .mx-entry:focus-visible,
.mx-cross .mx-aud:focus-visible,
.mx-cross .mx-post-sign:focus-visible,
.mx-cross .mx-goals button:focus-visible,
.mx-cross .mx-back:focus-visible,
.mx-cross .mx-done-actions .btn:focus-visible,
.mx-cross .mx-aside:focus-visible{
  outline:3px solid #fff;outline-offset:3px;
  box-shadow:0 0 0 8px rgba(47,13,66,.78),0 20px 40px -22px rgba(0,0,0,.8)}

/* On a phone the signs stop ~5px from the edge, so a 3+3 ring lands 1.3px off
   screen and loses its right side. Measured at 390px. */
@media(max-width:767.98px){
  .mx-cross .mx-sign:focus-visible,
  .mx-cross .mx-entry:focus-visible,
  .mx-cross .mx-aud:focus-visible,
  .mx-cross .mx-post-sign:focus-visible,
  .mx-cross .mx-goals button:focus-visible,
  .mx-cross .mx-done-actions .btn:focus-visible,
  .mx-cross .mx-aside:focus-visible{outline-width:2px;outline-offset:2px}
}

/* Heard, never seen. Not display:none — a hidden live region is not announced. */
.mx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The gold „изненадување" invitation in the hero, under the two buttons. The solo hero already
   centres its column (.hero-grid.mx-solo has text-align:center), so this only needs the gap. */
.mx-kids-cta{margin:0 0 18px}

/* ── the privacy notice ────────────────────────────────────────────────────
   One narrow column of prose. Measure capped at 68ch: this is the one page on
   the site somebody actually reads top to bottom, and full-width legal text is
   what makes a notice look like something to skip. */
.mx-legal-inner{max-width:68ch;margin:0 auto}
.mx-legal-inner h1{margin:6px 0 18px;font-size:clamp(30px,4vw,42px)}
.mx-legal-inner h2{margin:38px 0 12px;font-size:21px;color:var(--pur-d)}
.mx-legal-lead{font-size:17.5px;line-height:1.65;color:var(--ink-2)}
.mx-legal-date{margin-top:10px;color:var(--muted);font-size:14px}
.mx-legal-inner p{line-height:1.7}
.mx-legal-inner ul{margin:0 0 16px;padding-left:22px;line-height:1.7;color:var(--ink-2)}
.mx-legal-inner li{margin-bottom:6px}
.mx-legal-inner a{color:var(--pur);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.mx-legal-inner a:hover{color:var(--pur-d)}
.mx-legal-back{margin-top:44px;padding-top:22px;border-top:1px solid rgba(91,33,122,.14)}

/* The footer link. --gold-l on the dark purple band, matching the other footer links. */
.footer-bottom .mx-legal-link{margin:8px 0 0}
.footer-bottom .mx-legal-link a{color:#C8B4DA;font-size:14px;text-decoration:underline;
  text-underline-offset:3px}
.footer-bottom .mx-legal-link a:hover{color:var(--gold-l)}