/* Shared foundations: tokens, type, buttons, panels. Any page of the site can start from this file.
   Rule of the house: text is never pale. Copy is white, labels are mint, nothing is dimmed with opacity.
   Muted tones exist for lines and borders only. */
:root{
  --bg:#050b08; --line:#2a3d34; --em:#10c98b; --pos:#4fd18b; --mint:#b6dec8; --tx:#f3f7f4; --ink:#04140d;
  --sans:"Geist","Inter","Segoe UI",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1); --pad:clamp(20px,6vw,90px);
  /* metals, for trophies only: gold is a title, silver a runner-up finish. --shine is the light that crosses them. */
  --gold:linear-gradient(150deg,#fff6c4 0%,#ffd75e 28%,#f2b01e 58%,#c58a0e 100%); --silver:linear-gradient(150deg,#fff 0%,#e6ecf0 30%,#bcc7ce 62%,#97a3ab 100%);
  --gold-ink:#2b1e00; --silver-ink:#1a2226; --shine:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%);
}
*{box-sizing:border-box}
html{scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--sans);font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60vw 50vh at 85% 8%,rgba(16,201,139,.13),transparent 70%),radial-gradient(50vw 50vh at 5% 95%,rgba(16,120,95,.12),transparent 70%)}
main,footer{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

h1,h2,h3{font-weight:300;letter-spacing:-.035em;line-height:1.03;margin:0;color:#fff}
h1{font-size:clamp(2.6rem,7vw,6.4rem)}
h2{font-size:clamp(1.9rem,4.2vw,3.6rem)}
h1 em,h2 em{font-style:normal;color:var(--em)}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;color:var(--mint)}

/* icons are masks tinted with the text colour; flags are full-colour vectors (js/flags.js). Both scale with the type. */
.ic{display:inline-block;width:1.25em;height:1.25em;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;flex:none}
.ic.gold{background:var(--gold)}
.ic.silver{background:var(--silver)}
.flag{display:inline-block;width:1.54em;height:1.2em;flex:none;vertical-align:-.25em;overflow:visible}
.flag-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* a real crest keeps its own colours and shape: still, whole, never cropped or tinted, nothing behind it */
.crest{display:block;width:100%;height:100%;object-fit:contain}

.glass{background:rgba(10,21,16,.72);border:1px solid rgba(182,222,200,.2)}
.btn{display:inline-flex;align-items:center;gap:.7em;padding:.72em 1.25em;border-radius:999px;font-size:.94rem;font-weight:500;border:1px solid rgba(243,247,244,.4);background:rgba(255,255,255,.05);transition:background .3s,border-color .3s,transform .4s var(--ease)}
.btn:hover{border-color:var(--mint);background:rgba(182,222,200,.12);transform:translateY(-2px)}
.btn--p{background:var(--mint);color:var(--ink);border-color:transparent;padding-right:.5em}
.btn--p:hover{background:#d2f0df}
.btn--sm{padding:.55em 1.05em;font-size:.84rem;min-height:40px;white-space:nowrap}
.bub{display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:var(--ink);color:var(--mint)}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.cta--mid{justify-content:center}
.badge{display:grid;place-items:center;flex:none;width:clamp(52px,5.2vw,74px);aspect-ratio:1;border-radius:clamp(16px,1.6vw,22px);background:linear-gradient(145deg,rgba(16,201,139,.36),rgba(16,201,139,.07));border:1px solid var(--em);color:#fff;font-size:clamp(1.5rem,2.3vw,2.05rem);box-shadow:0 0 34px rgba(16,201,139,.2),inset 0 1px 0 rgba(255,255,255,.14)}
.now{display:inline-flex;align-items:center;gap:.55em;margin-left:.8em;padding:.25em .6em;border-radius:99px;background:var(--pos);color:#071d12;font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;vertical-align:.3em;white-space:nowrap}
/* the dot in a "current" pill beats, so the eye finds what is happening now */
.now::before{content:"";width:.6em;height:.6em;border-radius:50%;background:#071d12;animation:now 1.8s var(--ease) infinite}
@keyframes now{50%{transform:scale(.45)}}
.tag{display:inline-block;padding:.38em .85em;border-radius:99px;font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}

.sec{padding:clamp(70px,11vh,130px) var(--pad);position:relative}
.head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2.2vw,28px);align-items:start;max-width:62em;margin-bottom:clamp(26px,5vh,50px)}
.head h2{margin:.12em 0 0}
.head.rv .badge{transform:scale(.55) rotate(-14deg);transition:transform .9s cubic-bezier(.3,1.6,.5,1) .15s}
.head.rv.in .badge{transform:none}
.sum{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.1em}
.sum span{display:inline-flex;align-items:center;gap:.55em;padding:.5em .95em;border-radius:99px;border:1px solid rgba(182,222,200,.35);font-size:.92rem}
.sum .ic{color:var(--em);font-size:1.3rem}
.sum b{color:var(--em);font-weight:600}

.bar{position:fixed;z-index:7;left:0;top:0;height:2px;width:100%;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--em),var(--mint))}
.nav{position:fixed;z-index:6;top:14px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:9px 10px 9px 16px;border-radius:999px;background:#08120e;border:1px solid rgba(182,222,200,.2)}
.brand{display:flex;align-items:center;min-height:40px;gap:9px;font-weight:500;letter-spacing:.02em;font-size:.92rem}
.brand b{color:var(--em);font-weight:500}
.brand .ic{color:var(--em);font-size:1.15rem}
footer{border-top:1px solid rgba(182,222,200,.2);padding:30px var(--pad) 40px;display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between;font-size:.88rem}
#dust{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}

/* .rv rises into place the first time it is seen (scroll.js adds .in) */
.rv{opacity:0;--rise:28px;transform:translateY(var(--rise));transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;--rise:0px}
/* [data-tilt] leans toward the pointer (chrome.js feeds --rx --ry --mx --my). Flat at rest, so its text stays sharp. */
[data-tilt]{position:relative;transform:translateY(var(--rise,0px));transition:transform .45s var(--ease),opacity 1s var(--ease),border-color .4s}
[data-tilt]:hover{transform:perspective(900px) translateY(-5px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.glass[data-tilt].hot{transform:translateY(-5px)}
.glass[data-tilt]::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(16,201,139,.26),transparent 65%);opacity:0;transition:opacity .4s}
.glass[data-tilt]:hover,.glass[data-tilt].hot{border-color:var(--em)}
.glass[data-tilt]:hover::before,.glass[data-tilt].hot::before{opacity:1}

@media (max-width:720px){.nav .btn{font-size:.78rem}}
@media (max-width:520px){.nav__long{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;--rise:0px}}