body.intro{overflow:hidden}
.hub{max-width:var(--maxw);margin:0 auto;padding:0 24px 60px}
.hubhero{position:relative;overflow:hidden;margin:26px 0 24px;border-radius:var(--r-lg);color:#fff;padding:clamp(30px,6vw,64px);text-align:center;
  background:linear-gradient(150deg,#12346F 0%,#0E2A5C 55%,#0A1F46 100%);box-shadow:var(--shadow)}
.hubhero .stripes-bg{position:absolute;right:-40px;top:-40px;width:360px;opacity:.1;color:var(--brass-hi);pointer-events:none}
.hubhero .eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--brass-hi);margin-bottom:16px}
.hubhero h1{margin:0 0 14px;font:800 clamp(40px,7vw,76px)/1 var(--sans);font-variation-settings:"wdth" 78;letter-spacing:-.01em}
.hubhero h1 span{background:linear-gradient(100deg,var(--brass-hi),var(--brass) 55%,#E9A94A);-webkit-background-clip:text;background-clip:text;color:transparent}
.hubhero p{margin:0 auto;max-width:560px;color:#C9D6EE;font:18px/1.5 var(--serif)}
.count{display:inline-flex;align-items:baseline;gap:10px;margin-top:22px;padding:10px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08)}
.count b{font:800 28px/1 var(--sans);font-variation-settings:"wdth" 75;color:var(--brass-hi)}.count span{font-size:13px;color:#C9D6EE;letter-spacing:.06em}
.hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:18px;margin:-18px}
.hcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px 24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .55s var(--spring),box-shadow .45s ease,border-color .35s ease}
.hcard::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--brass-lo),var(--brass-hi));opacity:.7}
.hcard:hover,.hcard:focus-visible{transform:translateY(-6px) scale(1.04);z-index:5;border-color:var(--brass);box-shadow:0 22px 50px rgba(16,26,44,.22),0 0 0 2px var(--brass),0 0 36px color-mix(in srgb,var(--brass) 55%,transparent),0 0 80px color-mix(in srgb,var(--brass) 25%,transparent)}
.hcard:active{transform:scale(1.01);transition-duration:.15s}
.hcard .tile{--s:64px;margin-bottom:6px}
.hcard h2{margin:0;font:800 28px/1.1 var(--sans);font-variation-settings:"wdth" 82}
.hcard p{margin:0;color:var(--muted);font:16px/1.5 var(--serif);flex:1}
.hcard .meta{font:800 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lo)}
:root[data-theme="dark"] .hcard .meta{color:var(--brass-hi)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hcard .meta{color:var(--brass-hi)}}
.hcard .go{margin-top:6px;align-self:flex-start}
@media(max-width:980px){.hubgrid{gap:14px}.hcard{padding:22px 18px}.hcard h2{font-size:24px}.hcard p{font-size:15px}.hcard .go{padding:0 14px}}
@media(max-width:699px){.hubgrid{grid-template-columns:1fr}}
@media(max-width:860px){.hub{padding:0 16px 50px}}

/* landing sections */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.sechead{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:56px 0 24px;flex-wrap:wrap}
.sechead .k{font:800 12px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--brass-lo);margin-bottom:10px}
:root[data-theme="dark"] .sechead .k{color:var(--brass-hi)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sechead .k{color:var(--brass-hi)}}
.sechead h2{margin:0;font:800 clamp(30px,4.4vw,48px)/1.05 var(--sans);font-variation-settings:"wdth" 80;letter-spacing:-.01em}
.sechead h2 span{background:linear-gradient(100deg,var(--brass-lo),var(--brass) 60%,#E9A94A);-webkit-background-clip:text;background-clip:text;color:transparent}
.sechead p{margin:0;max-width:380px;color:var(--muted);font:17px/1.5 var(--serif)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{position:relative;padding:26px 24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .55s var(--spring),box-shadow .45s,border-color .35s}
.step:hover{transform:translateY(-6px) scale(1.03);border-color:var(--brass);box-shadow:0 22px 50px rgba(16,26,44,.2),0 0 0 2px var(--brass),0 0 36px color-mix(in srgb,var(--brass) 45%,transparent)}
.step .n{font:800 46px/1 var(--sans);font-variation-settings:"wdth" 75;background:linear-gradient(180deg,var(--brass-hi),var(--brass) 60%,var(--brass-lo));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px}
.step h3{margin:0 0 8px;font:800 22px var(--sans);font-variation-settings:"wdth" 85}
.step p{margin:0 0 14px;color:var(--muted);font:16px/1.5 var(--serif)}
.step a{font-weight:800;font-size:14px;color:var(--brass-lo);text-decoration:none}.step a:hover{text-decoration:underline}
:root[data-theme="dark"] .step a{color:var(--brass-hi)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .step a{color:var(--brass-hi)}}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:44px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.fact{padding:26px 20px;text-align:center}.fact+.fact{border-left:1px solid var(--line)}
.fact b{display:block;font:800 clamp(30px,4vw,46px)/1 var(--sans);font-variation-settings:"wdth" 75;color:var(--navy);font-variant-numeric:tabular-nums}
.fact span{display:block;margin-top:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cta{position:relative;overflow:hidden;margin:56px 0 10px;padding:clamp(30px,5vw,56px);border-radius:var(--r-lg);color:#fff;display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(150deg,#12346F 0%,#0E2A5C 55%,#0A1F46 100%);box-shadow:var(--shadow)}
.cta .stripes-bg{position:absolute;right:-30px;top:-40px;width:300px;opacity:.1;color:var(--brass-hi);pointer-events:none}
.cta h2{margin:0 0 10px;font:800 clamp(30px,4.4vw,48px)/1.05 var(--sans);font-variation-settings:"wdth" 78}
.cta h2 span{background:linear-gradient(100deg,var(--brass-hi),var(--brass) 55%,#E9A94A);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta p{margin:0;max-width:480px;color:#C9D6EE;font:17px/1.5 var(--serif)}
.cta .btn{min-height:52px;padding:0 28px;font-size:16px;position:relative;z-index:1}
@media(max-width:980px){.steps{gap:14px}.step{padding:22px 18px}}
@media(max-width:699px){.steps{grid-template-columns:1fr}}
@media(max-width:860px){.steps{}.facts{grid-template-columns:repeat(2,1fr)}.fact:nth-child(3){border-left:0}.fact:nth-child(n+3){border-top:1px solid var(--line)}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* intro splash (also unlocks sound) */
#splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;text-align:center;overflow:hidden;color:#fff;background:radial-gradient(120% 90% at 50% 20%,#1B3E7E 0%,#0E2A5C 45%,#071631 100%);transition:opacity .7s ease,transform .7s var(--ease),visibility .7s}
#splash.out{opacity:0;transform:scale(1.08);visibility:hidden;pointer-events:none}
.sp-in{display:flex;flex-direction:column;align-items:center;padding:24px;position:relative;z-index:2}
.sp-stage{position:relative;width:240px;margin-bottom:6px}
.sp-emb{display:block;width:240px;height:240px;overflow:visible;opacity:0;transform-origin:50% 55%;animation:spZoom 1s cubic-bezier(.16,.9,.3,1) .15s forwards,spGlow 2.6s 1.2s ease-in-out infinite}
.sp-emb .shield{fill:rgba(14,42,92,.55);stroke:url(#spg);stroke-width:5;stroke-linejoin:round}
.sp-emb .chev{fill:none;stroke:url(#spg);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;stroke-dashoffset:160;animation:spDraw .6s cubic-bezier(.6,0,.2,1) forwards}
.sp-emb .c1{animation-delay:1.05s}.sp-emb .c2{animation-delay:1.25s}.sp-emb .c3{animation-delay:1.45s}
.sp-gloss{animation:spGloss 1.2s 1.7s ease-in-out both}
.sp-shadow{position:absolute;left:50%;bottom:-18px;width:190px;height:24px;margin-left:-95px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);filter:blur(5px);opacity:0;transform:scale(.3);animation:spShadow .5s 1.05s ease-out forwards}
.sp-ring{position:absolute;left:50%;top:48%;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;border:2px solid var(--brass-hi);opacity:0;animation:spRing .9s 1.1s ease-out forwards;z-index:1}
.sp-title{margin-top:34px;font:800 clamp(38px,7vw,76px)/1.02 var(--sans);font-variation-settings:"wdth" 78;letter-spacing:-.005em;opacity:0;animation:sUp .7s 1.55s var(--ease) forwards}
.sp-sub{margin:8px 0 0;color:var(--brass-hi);font:700 13px var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:0;animation:sUp .7s 1.7s var(--ease) forwards}
.sp-by{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:6px}
.sp-created{color:#9FB2D8;font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:0;animation:sUp .6s 2s var(--ease) forwards}
.sp-name{display:flex;justify-content:center;font:800 clamp(18px,2.8vw,28px)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.sp-name i{font-style:normal;display:inline-block;opacity:0;background:linear-gradient(180deg,var(--brass-hi) 0%,var(--brass) 55%,var(--brass-lo) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:spLetter .7s calc(2.3s + var(--i)*.11s) linear forwards;transform-origin:50% 50%}
.sp-name i.sp{width:.35em}
.sp-btn{margin-top:34px;padding:0 44px;min-height:50px;border-radius:14px;border:0;background:linear-gradient(160deg,var(--brass-hi),var(--brass) 55%,var(--brass-lo));color:#1C1405;font:800 15px var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;opacity:0;animation:sUp .7s 2.6s var(--ease) forwards,btnGlow 2.6s 3.3s ease-in-out infinite;transition:transform .3s var(--spring);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.sp-btn:hover{transform:scale(1.06)}.sp-btn:active{transform:scale(.97)}
.sp-hint{margin:14px 0 0;color:#9FB2D8;font-size:12px;opacity:0;animation:sUp .7s 2.8s var(--ease) forwards}
@keyframes spZoom{0%{opacity:0;transform:scale(9) rotate(-8deg);filter:blur(14px)}45%{opacity:1;filter:blur(0)}72%{transform:scale(.92) rotate(0)}86%{transform:scale(1.04)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes spGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(241,216,140,.3))}50%{filter:drop-shadow(0 0 26px rgba(241,216,140,.85)) drop-shadow(0 0 60px rgba(241,216,140,.3))}}
@keyframes spDraw{to{stroke-dashoffset:0}}
@keyframes spGloss{from{transform:translateX(0)}to{transform:translateX(230px)}}
@keyframes spShadow{to{opacity:1;transform:scale(1)}}
@keyframes spRing{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(4.2)}}
@keyframes spLetter{0%{opacity:0;transform:scale(11);filter:blur(16px);animation-timing-function:cubic-bezier(.7,0,.9,.4)}40%{opacity:1;transform:scale(.97);filter:blur(0) drop-shadow(0 0 26px #fff1b8);animation-timing-function:ease-out}62%{transform:scale(1.025)}80%{transform:scale(.995)}100%{opacity:1;transform:none;filter:drop-shadow(0 0 6px rgba(201,162,74,.45))}}
#splash.shake .sp-in{animation:spShake .22s linear}
@keyframes spShake{20%{transform:translate(-4px,5px)}45%{transform:translate(4px,-3px)}70%{transform:translate(-2px,2px)}}
@keyframes sUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes btnGlow{50%{box-shadow:0 0 34px rgba(241,216,140,.55)}}
body.intro .gbar *{animation-play-state:paused!important}

@media(prefers-reduced-motion:reduce){#splash .sp-emb,.sp-title,.sp-sub,.sp-created,.sp-name i,.sp-btn,.sp-hint,.sp-shadow{opacity:1;transform:none}.sp-emb .chev{stroke-dashoffset:0}.sp-ring{display:none}}

@media(max-width:560px){.hubhero{padding:30px 20px;margin-top:16px}.hubhero p{font-size:16px}.sechead{margin-top:40px}.cta .btn{width:100%}.hcard{padding:22px 20px}.facts{grid-template-columns:repeat(2,1fr)}.fact{padding:20px 12px}}
@media(hover:none){.hcard:hover,.hcard:focus-visible,.step:hover{transform:none;box-shadow:var(--shadow);border-color:var(--line)}.hcard:hover{z-index:auto}}
/* intro on short screens (phones in landscape) */
@media(max-height:620px){.sp-emb{width:130px;height:130px}.sp-stage{width:130px}.sp-ring{width:130px;height:130px;margin:-65px 0 0 -65px}.sp-shadow{width:110px;margin-left:-55px;bottom:-10px}.sp-title{margin-top:16px;font-size:clamp(28px,6vw,44px)}.sp-by{margin-top:10px}.sp-btn{margin-top:14px;min-height:42px}.sp-hint{display:none}.sp-in{padding:10px}}
@media(max-width:420px){.sp-emb{width:190px;height:190px}.sp-stage{width:190px}.sp-ring{width:190px;height:190px;margin:-95px 0 0 -95px}}

/* the intro waits for a first tap (browsers block sound until then); everything is paused and hidden until it starts */
#splash:not(.go) *:not(.sp-begin){animation-play-state:paused!important}
.sp-begin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:inline-flex;align-items:center;gap:12px;padding:16px 30px;border-radius:999px;border:1.5px solid var(--brass-hi);background:rgba(255,255,255,.08);color:#fff;font:800 17px var(--sans);letter-spacing:.04em;cursor:pointer;animation:beginPulse 2.4s ease-in-out infinite;transition:transform .3s var(--spring)}
.sp-begin[hidden]{display:none}
.sp-begin svg{width:22px;height:22px;color:var(--brass-hi)}
.sp-begin small{font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-hi)}
.sp-begin:hover{transform:translate(-50%,-50%) scale(1.05)}
@keyframes beginPulse{50%{box-shadow:0 0 0 10px rgba(241,216,140,.12),0 0 34px rgba(241,216,140,.35)}}