/* =============================================================================
   thebusimatchers.com

   DE KLEUREN KOMEN UIT DIDIERS EIGEN SLEUTELBEELD: het diepe koningsblauw van
   de ruimte erachter, het oranje van het logo, en het neonblauw van de stad
   onderaan. Daardoor hoort de pagina bij het beeld in plaats van eromheen te
   staan.

   DE LETTERS zijn dezelfde drie als op busiverse.network (Baloo 2, Nunito,
   Space Mono). Didier vroeg "een beetje zoals busiverse.network"; dan moet het
   ook echt dezelfde familie zijn en geen gelijkende keuze.

   DE TEAMKLEUR is geen opsmuk. Elk van de twaalf teams heeft in de canon van
   busimatch.club een eigen kleur; die staat hier als --team per teamsectie en
   stuurt de streep, de naam en de rand bij het aanwijzen. De kaarten zelf
   blijven neutraal: twaalf gekleurde vlakken onder elkaar zou een kermis zijn.

   EEN WERELD, GEEN TWEE. Deze pagina kiest bewust voor donker, net als de rest
   van het Busiverse en net als het sleutelbeeld. Daarom geen lichte variant,
   maar wel overal een uitgeschreven achtergrond en kleur, zodat hij nergens de
   ondergrond van iemand anders leent.
   ========================================================================== */

:root{
  --ruimte:#071231;
  --ruimte-2:#0c1c4a;
  --inkt:#eaf0ff;
  --inkt-2:#b7c5ea;
  --gedempt:#7f8ec4;
  --oranje:#f97316;
  --oranje-2:#ffb020;
  --neon:#2bd4ff;
  --paars:#7c5cff;
  --kaart:rgba(14,28,74,.72);
  --kaart-2:rgba(20,38,96,.86);
  --lijn:rgba(120,150,255,.20);
  --display:'Baloo 2','Nunito',system-ui,sans-serif;
  --body:'Nunito','Segoe UI',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --r:20px; --r-s:12px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1100px 700px at 12% 0%,rgba(124,92,255,.22),transparent 62%),
    radial-gradient(900px 620px at 88% 18%,rgba(43,212,255,.14),transparent 60%),
    radial-gradient(800px 560px at 70% 92%,rgba(249,115,22,.16),transparent 62%),
    var(--ruimte);
  background-attachment:fixed;
  color:var(--inkt);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  overflow-x:hidden;
}
a{color:var(--neon)}
h1,h2,h3,h4{font-family:var(--display);line-height:1.1;margin:0 0 .4em;text-wrap:balance}
h1{font-size:clamp(38px,6.6vw,72px);font-weight:800;letter-spacing:-.015em}
h2{font-size:clamp(26px,3.6vw,38px);font-weight:800}
h3{font-size:22px;font-weight:700}
h4{font-size:17px;font-weight:700;margin:0}
p{margin:0 0 14px}
.mono{font-family:var(--mono)}
.grad{
  background:linear-gradient(92deg,var(--oranje),var(--oranje-2) 70%,#ffe08a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:8px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--oranje-2);outline-offset:2px;border-radius:6px}

/* ------------------------------------------------------------------ kop */
.top{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:16px;
  padding:12px clamp(14px,3vw,36px);
  background:rgba(7,18,49,.72);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--lijn);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--inkt)}
.brand-txt{font-family:var(--display);font-weight:800;font-size:21px;line-height:1}
.brand-txt b{color:var(--oranje)}
.brand-txt small{
  display:block;font:700 9.5px/1 var(--mono);letter-spacing:.2em;
  color:var(--gedempt);margin-top:4px;text-transform:uppercase;
}
.nav{display:flex;gap:4px;margin-inline-start:auto}
.nav a{
  color:var(--inkt-2);text-decoration:none;padding:8px 13px;
  border-radius:999px;font-weight:700;font-size:15px;
}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}

/* de vlaggenkiezer, gelijk aan die van busiverse.network */
.langpick{position:relative;margin-inline-start:4px}
.langpick summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border:1px solid var(--lijn);border-radius:999px;
  background:rgba(255,255,255,.06);font:700 12px var(--mono);color:var(--inkt);
}
.langpick summary::-webkit-details-marker{display:none}
.langpick summary img,.langpick-menu img{
  width:22px;height:16px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px #0006;
}
.langpick-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:30;
  display:grid;grid-template-columns:1fr 1fr;gap:2px;min-width:302px;
  background:rgba(9,20,56,.98);border:1px solid var(--lijn);
  border-radius:14px;padding:8px;box-shadow:0 20px 50px #0009;
}
.langpick-menu a{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;
  color:var(--inkt);text-decoration:none;font-size:14px;font-weight:600;text-align:start;
}
.langpick-menu a:hover,.langpick-menu a.on{background:rgba(255,255,255,.09)}
.langpick-menu a.on{outline:1px solid var(--oranje)}

/* --------------------------------------------------------------- knoppen */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 22px;
  border-radius:999px;font-weight:800;text-decoration:none;
  border:1px solid transparent;font-family:var(--body);font-size:16px;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(92deg,var(--oranje),var(--oranje-2));color:#1a1000;box-shadow:0 10px 30px rgba(249,115,22,.35)}
.btn-moon{background:linear-gradient(92deg,var(--paars),var(--neon));color:#05091f;box-shadow:0 10px 30px rgba(124,92,255,.35)}
.btn-ghost{background:rgba(255,255,255,.07);color:var(--inkt);border-color:var(--lijn)}

/* ----------------------------------------------------------------- kader */
.page{max-width:1180px;margin:0 auto;padding:0 clamp(14px,3vw,36px) 70px}
/* De kop blijft staan bij het scrollen. Zonder deze regel landt een sprong
   naar #teams of #vr met de titel ONDER die kop en lijkt de sectie te
   beginnen bij de tweede regel. */
[id]{scroll-margin-top:84px}
.section{padding:58px 0 10px}
.lede{font-size:clamp(17px,1.9vw,20px);color:var(--inkt-2);max-width:62ch}

/* ------------------------------------------------------------------ hero */
.hero{
  display:grid;grid-template-columns:1.02fr .98fr;gap:34px;align-items:center;
  padding:44px 0 18px;
}
.kicker{
  font:700 12px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;
  color:var(--neon);margin:0 0 14px;
}
.hero h1{margin-bottom:14px}
.telling{color:var(--gedempt);font-size:13px;letter-spacing:.08em;margin:18px 0 0}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero-beeld{text-align:center}
.hero-beeld img{
  width:100%;max-width:520px;height:auto;border-radius:26px;
  box-shadow:0 30px 70px rgba(4,10,32,.66),0 0 0 1px var(--lijn);
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:26px}
  .hero-beeld{order:-1}
  .hero-beeld img{max-width:360px}
}

/* ------------------------------------------------------------------ team
   De naam van het team staat in een eigen kolom LINKS van de kaarten. Dat is
   geen smaakkwestie: Operations heeft een agent, Creativiteit heeft er acht.
   Zet je de naam als balk boven een rooster van vijf, dan ziet een team van
   een eruit alsof er vier kaarten ontbreken. Naast een naamkolom ziet het
   eruit zoals het is. */
.team{
  display:grid;grid-template-columns:196px 1fr;gap:8px 26px;
  align-items:start;margin:32px 0 0;
  padding-block-start:24px;border-block-start:1px solid var(--lijn);
}
.team-kop{
  display:flex;flex-direction:column;gap:4px;
  padding-inline-start:14px;
  border-inline-start:4px solid var(--team);
  position:sticky;top:74px;
}
.team-kop h3{margin:0;color:var(--team);font-size:20px}
.team-tel{font-size:11.5px;color:var(--gedempt);letter-spacing:.06em}
.team-leider{font-size:13px;color:var(--inkt-2);font-weight:600;margin-top:2px}

/* Vijf op een rij, uitgeschreven en niet aan auto-fill overgelaten. Met
   auto-fill kwam een team van vijf op vier plus een, en dan hangt de vijfde
   er in zijn eentje onder. Vijf is ook het aantal dat Didier op de hub van
   busimatch.club wilde, dus het blijft door het hele Busiverse hetzelfde. */
.rooster{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:1080px){.rooster{grid-template-columns:repeat(4,1fr)}}
@media (max-width:820px){.rooster{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.rooster{grid-template-columns:repeat(2,1fr);gap:10px}}
@media (max-width:820px){
  .team{grid-template-columns:1fr;gap:14px}
  .team-kop{position:static;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:6px 14px}
}
.kaart{
  display:flex;flex-direction:column;gap:8px;
  background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);
  padding:12px 12px 14px;
  transition:border-color .15s ease,transform .15s ease,background .15s ease;
}
.kaart:hover{border-color:var(--team);background:var(--kaart-2);transform:translateY(-3px)}
.kaart-beeld{
  position:relative;aspect-ratio:1/1;border-radius:var(--r-s);overflow:hidden;
  background:
    radial-gradient(70% 70% at 50% 30%,color-mix(in srgb,var(--team) 22%,transparent),transparent 70%),
    rgba(4,10,32,.5);
  display:flex;align-items:center;justify-content:center;
}
/* de hele mascotte in beeld, niet bijgesneden: een portret met een afgesneden
   hoofd is erger dan wat witruimte */
.kaart-beeld img{width:100%;height:100%;object-fit:contain;display:block}
/* Didier, 16-09-2026: "Op thebusimatchers.com komt teamleader voor het hoofd
   van de mascottes. Dit mag niet."
   De portretten zijn staande figuren met het hoofd tegen de bovenrand; een
   label linksboven belandt dus altijd op een gezicht of een hoorn. Onderaan is
   het wel veilig: de voeten staan in het midden en de onderhoeken zijn bij alle
   mascottes leeg. Vandaar block-END in plaats van block-start. */
.kaart-leider{
  position:absolute;inset-block-end:6px;inset-inline-start:6px;
  background:var(--team);color:#06102b;
  font:700 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding:4px 7px;border-radius:999px;
}
.kaart h4{color:var(--inkt)}
/* het Busi ID-nummer: klein, in cijfers die uitlijnen, met het label in de
   teamkleur zodat het als een echt kaartje leest en niet als bijschrift */
/* Didier, 13-09-2026: "ik busi ID en dan het nommer er onder."
   Dus het woord boven, het nummer eronder, niet naast elkaar. */
.kaart-id{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  margin:3px 0 0;
  font-size:11px;letter-spacing:.02em;color:var(--inkt-2);
  font-variant-numeric:tabular-nums;
}
.kaart-id span{
  font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#06102b;background:var(--team);border-radius:3px;padding:2px 6px;
}
.kaart-rol{
  margin:0;font-size:12.5px;line-height:1.4;color:var(--gedempt);
  min-height:2.8em;
}
.kaart-knoppen{display:grid;gap:6px;margin-top:2px}
.k{
  display:block;text-align:center;text-decoration:none;
  padding:7px 8px;border-radius:999px;
  font:700 12px/1.25 var(--body);
  border:1px solid var(--lijn);
}
/* de twee links van elk personage: de eigen wereld draagt de teamkleur,
   het profiel blijft rustig. Zo zie je meteen welke van de twee je opent. */
.k-wereld{background:color-mix(in srgb,var(--team) 20%,transparent);color:#fff;border-color:color-mix(in srgb,var(--team) 55%,transparent)}
.k-wereld:hover{background:var(--team);color:#06102b}
.k-profiel{background:rgba(255,255,255,.05);color:var(--inkt-2)}
.k-profiel:hover{background:rgba(255,255,255,.12);color:#fff}
/* Staat de website er nog niet, dan blijft het vak staan maar is het geen knop:
   gestreept, gedempt, geen aanwijzer. Zo blijven alle kaarten even hoog en
   belooft er niets iets wat er niet is. */
.k-later{
  background:repeating-linear-gradient(135deg,
    rgba(255,255,255,.045) 0 6px, transparent 6px 12px);
  color:var(--gedempt);border-color:rgba(120,150,255,.14);
  cursor:default;font-weight:600;
}

/* ------------------------------------------------------- verhaal en VR */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:56px}
.blok{
  border:1px solid var(--lijn);border-radius:var(--r);padding:28px;
  background:var(--kaart);
}
.blok h2{font-size:clamp(22px,2.6vw,30px)}
.blok p{color:var(--inkt-2);max-width:48ch}
.blok-verhaal{background:linear-gradient(160deg,rgba(249,115,22,.14),var(--kaart) 58%)}
.blok-vr{background:linear-gradient(160deg,rgba(124,92,255,.16),var(--kaart) 58%)}
@media (max-width:760px){.duo{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ voet */
.voet{
  border-top:1px solid var(--lijn);
  padding:22px clamp(14px,3vw,36px);
  color:var(--gedempt);font-size:13px;
}
.voet p{margin:0}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto}
  .btn:hover,.kaart:hover{transform:none}
}