@font-face{font-family:'Montserrat KV';src:url('fonts/Montserrat-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Archivo KV';src:url('fonts/Archivo-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{
  --navy:#0036c7; --deep:#062a9a; --cyan:#7ee6ff; --orange:#ff5a00;
  --display:'Montserrat KV','Montserrat',Impact,sans-serif;
  --body:'Archivo KV','Archivo','Segoe UI',system-ui,sans-serif;
  --mono:'Be Vietnam Pro','BeVietnamPro',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body.coming-soon{margin:0;min-height:100%;background:#0a3ec8;color:#fff;font:400 16px/1.5 var(--body);overflow-x:hidden}
.cs-stage{position:fixed;inset:0;overflow:hidden;background:#0a3ec8}
.cs-photo{position:absolute;inset:-4%;background:center/cover no-repeat #1a6bff;transform-origin:55% 60%;will-change:transform}
.cs-photo-a{animation:csKenA 48s ease-in-out infinite alternate}
.cs-photo-b{opacity:.35;mix-blend-mode:screen;animation:csKenB 56s ease-in-out infinite alternate}
.cs-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,50,170,.12) 0%,transparent 46%)}
.cs-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%);background-size:220% 100%;animation:csSweep 10s ease-in-out infinite}
@keyframes csKenA{from{transform:scale(1)}to{transform:scale(1.04) translate3d(-.8%,-.6%,0)}}
@keyframes csKenB{from{transform:scale(1.02)}to{transform:scale(1.06) translate3d(.6%,-.8%,0)}}
@keyframes csSweep{0%,20%{background-position:120% 0}60%,100%{background-position:-20% 0}}
@keyframes csIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.cs-top,.cs-main,.cs-foot{position:relative;z-index:3}
.cs-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:22px 4.5vw 0;animation:csIn .8s ease both}
.cs-lock-l{justify-self:start}
.cs-lock-c{justify-self:center}
.cs-lock-r{justify-self:end;display:flex;align-items:center;gap:18px}
.cs-wef{height:46px;width:auto;display:block}
.cs-seal{height:72px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.2))}
.cs-logo{height:42px;width:auto}
.cs-lang{display:flex;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.cs-lang a{padding:6px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.8);text-decoration:none}
.cs-lang a[aria-pressed="true"]{background:#fff;color:#0036c7}

.cs-main{padding:7vh 5vw 3vh}
.cs-hero{max-width:720px;margin-bottom:36px}
.cs-col{animation:csIn .9s ease both .1s}
.cs-event{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:-.02em}
.cs-event span{display:block;font-size:clamp(34px,5.4vw,76px)}
.cs-yrow{display:flex;align-items:center;gap:16px;margin:22px 0 28px}
.cs-y{display:flex;flex-direction:column;font-family:var(--display);font-weight:800;color:var(--orange);line-height:.88;letter-spacing:-.03em}
.cs-y b{font-size:clamp(28px,3.8vw,48px)}
.cs-yd span{display:block;font-family:var(--display);font-weight:600;font-size:clamp(16px,1.8vw,22px);letter-spacing:.02em}
.cs-pos{margin:0 0 8px;font-size:clamp(16px,1.7vw,22px);font-weight:500;max-width:22em;line-height:1.35;color:rgba(255,255,255,.95)}
.cs-theme{margin:0;font-size:clamp(15px,1.35vw,19px);color:var(--cyan);font-weight:500;max-width:28em}
.cs-pos,.cs-theme,.cs-hosts b,.cs-meta dd,.cs-yd span,.cs-foot p{
  text-wrap:pretty;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

.cs-count{display:grid;grid-template-columns:repeat(4,minmax(72px,150px));gap:10px;margin:0 0 10px;animation:csIn .9s ease both .28s}
.cs-count div{padding:16px 10px 12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(14px)}
.cs-count b{display:block;font-family:var(--display);font-size:clamp(32px,4.6vw,56px);line-height:.9;font-weight:800;letter-spacing:-.03em}
.cs-count span{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#e8f4ff}
.cs-count-cap{margin:0 0 34px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.8)}

.cs-meta,.cs-hosts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px 24px;
  width:100%;
  max-width:1040px;
  margin:0 0 28px;
  padding:0;
  border:0;
  list-style:none;
  animation:csIn .9s ease both .36s;
}
.cs-hosts{animation-delay:.44s}
.cs-meta > div,.cs-hosts li{
  margin:0;
  padding:12px 0 0;
  border-top:2px solid var(--orange);
  min-width:0;
}
.cs-meta dt,.cs-hosts small{
  display:block;
  margin:0 0 8px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#e8f4ff;
}
.cs-meta dd,.cs-hosts b{
  display:block;
  margin:0;
  font-family:var(--display);
  font-size:16px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.3;
}
.cs-hosts b{font-weight:600;text-transform:none;letter-spacing:0;font-family:var(--body);font-size:15px}

.cs-foot{padding:22px 5vw 30px;max-width:1180px;animation:csIn .9s ease both .5s}
.cs-foot p{margin:0 0 8px;color:rgba(255,255,255,.86);font-size:14px}
.cs-status{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)!important}
.cs-mail a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}

@media(max-width:980px){
  .cs-top{grid-template-columns:auto 1fr auto;gap:10px}
  .cs-wef{height:34px}
  .cs-seal{height:58px}
  .cs-meta,.cs-hosts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .cs-top{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;padding:16px 4vw 0;align-items:center}
  .cs-wef{height:22px;max-width:100%}
  .cs-seal{height:36px;max-width:28vw}
  .cs-logo{height:20px;max-width:100%}
  .cs-lock-r{gap:8px;flex-direction:column;align-items:flex-end}
  .cs-lang a{padding:4px 8px}
  .cs-count{grid-template-columns:repeat(4,1fr);gap:6px}
  .cs-count div{padding:12px 6px 10px}
  .cs-hosts{grid-template-columns:1fr}
  .cs-main{padding-top:4vh}
  .cs-event span{font-size:11vw}
}
@media(prefers-reduced-motion:reduce){
  .cs-photo,.cs-shine,.cs-top,.cs-col,.cs-count,.cs-meta,.cs-hosts,.cs-foot{animation:none}
}
