:root{
  /* brändipaletti */
  --night:#171129;
  --navy:#242948;
  --mist:#ECEBEA;
  --blue:#72AFC2;
  --flash:#FFE897;

  /* semanttiset tokenit — tumma kohtaus (oletus) */
  --ground:var(--night);
  --ink:var(--mist);
  --ink-78:rgba(236,235,234,.78);
  --ink-58:rgba(236,235,234,.58);
  --ink-40:rgba(236,235,234,.40);
  --ink-22:rgba(236,235,234,.22);
  --ink-12:rgba(236,235,234,.12);
  --ink-07:rgba(236,235,234,.07);
  --accent:var(--blue);
  --card:rgba(236,235,234,.05);

  --pad:132px;
  --display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased}

/* ROPINA — landing ja kielivalinta. Sama maailma kuin deckissä, ei kromia. */

body.site{
  min-height:100dvh;
  background:var(--night);
  color:var(--mist);
  font-family:var(--body);
  overflow-x:hidden;
  display:flex;flex-direction:column;
}

.site-rain{position:fixed;inset:0;pointer-events:none;z-index:0}
.site-rain svg{width:100%;height:100%;display:block}
.site-grain{position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:url("/assets/img/grain.png?v=6d6654f1");
  background-repeat:repeat;background-size:160px 160px;
  mix-blend-mode:overlay;opacity:.34}

.wrap{position:relative;z-index:2;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(38px,6vh,72px);padding:clamp(40px,7vh,90px) clamp(20px,5vw,72px)}

.brand{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.brand img{width:clamp(150px,17vw,214px);height:auto;display:block;opacity:.92}
.brand .eyebrow{font-family:var(--body);font-weight:500;font-size:13px;
  letter-spacing:.30em;text-transform:uppercase;color:var(--blue)}

/* ── versiokortit ───────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.4vw,30px);width:100%;max-width:1000px}

.card{position:relative;display:flex;flex-direction:column;gap:14px;
  min-height:clamp(230px,34vh,320px);
  padding:clamp(28px,3vw,42px);
  background:rgba(236,235,234,.038);
  border:1px solid rgba(236,235,234,.13);
  transition:border-color .28s ease, background-color .28s ease, transform .28s ease}
.card:hover{border-color:rgba(114,175,194,.62);background:rgba(236,235,234,.062);
  transform:translateY(-2px)}
.card.is-soon{opacity:.46}
.card.is-soon:hover{border-color:rgba(236,235,234,.13);
  background:rgba(236,235,234,.038);transform:none}

.card-hit{position:absolute;inset:0;z-index:1;border-radius:inherit}
.card-hit:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.card h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,46px);
  letter-spacing:-.033em;line-height:1.0;color:var(--mist)}
.card .sub{font-size:clamp(15px,1.3vw,18px);line-height:1.5;
  color:rgba(236,235,234,.5)}

.card .foot{margin-top:auto;position:relative;z-index:2;
  display:flex;align-items:center;gap:10px;padding-top:22px}
.card .soon{font-family:var(--body);font-weight:500;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(236,235,234,.42)}

/* liput */
.pick{display:flex;align-items:center;gap:10px}
.pick a,.pick span{display:flex;align-items:center;justify-content:center;
  width:60px;height:44px;border:1px solid rgba(236,235,234,.16);
  transition:border-color .22s ease, background-color .22s ease}
.pick a:hover{border-color:var(--blue);background:rgba(114,175,194,.12)}
.pick a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.pick svg{width:30px;height:auto;display:block;border-radius:1.5px;opacity:.9}
.pick [aria-disabled="true"]{opacity:.3}
.pick [aria-disabled="true"] svg{opacity:.5}

/* ── kielivalintasivu (/a, /b) ──────────────────────────────────────────── */
.choose{display:flex;flex-direction:column;align-items:center;gap:clamp(30px,5vh,54px);
  text-align:center}
.choose h1{font-family:var(--display);font-weight:700;
  font-size:clamp(38px,6vw,86px);letter-spacing:-.035em;line-height:1;color:var(--mist)}
.choose .sub{font-size:clamp(16px,1.5vw,21px);color:rgba(236,235,234,.5)}
.choose .pick a,.choose .pick span{width:92px;height:66px}
.choose .pick svg{width:44px}
.choose .pick{gap:18px}

.back{position:fixed;left:20px;top:18px;z-index:5;
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(236,235,234,.34);text-decoration:none;transition:color .2s ease}
.back:hover{color:var(--mist)}
.back:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

a{color:inherit;text-decoration:none}

@media (max-width:720px){
  .cards{grid-template-columns:1fr}
  .card{min-height:0}
  .choose .pick a,.choose .pick span{width:78px;height:58px}
  .choose .pick svg{width:38px}
}

/* matala ruutu (puhelin vaakatasossa) — mahdutaan yhteen näkymään */
@media (max-height:560px) and (min-width:721px){
  .wrap{gap:26px;padding:22px 40px}
  .brand{gap:12px}
  .brand img{width:clamp(120px,13vw,160px)}
  .card{min-height:0;padding:22px 26px;gap:8px}
  .card .foot{padding-top:16px}
  .choose{gap:24px}
  .choose .pick a,.choose .pick span{width:76px;height:56px}
  .choose .pick svg{width:36px}
}


/* ── kielivalinta (/) ───────────────────────────────────────────────────── */
.gate{gap:clamp(34px,6vh,58px)}
.gate .pick a{width:104px;height:74px}
.gate .pick svg{width:52px}
.gate .pick{gap:22px}
@media (max-width:700px){
  .gate .pick a{width:86px;height:62px}
  .gate .pick svg{width:42px}
}

/* kortti jonka kieliversio puuttuu: tarjotaan se kieli joka on olemassa */
.card .only{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  color:rgba(236,235,234,.5);font-size:14px;letter-spacing:.02em;
  border-bottom:1px solid transparent;padding-bottom:3px;transition:color .2s ease}
.card .only:hover,.card .only:focus-visible{color:var(--mist);border-bottom-color:var(--blue)}
.card .only:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.card .only svg{width:26px;height:auto;display:block;border-radius:1.5px;opacity:.85}
.card.is-soon{opacity:.62}
.card.is-soon h2,.card.is-soon .sub{opacity:.62}

/* takaisin-lippu vasemmassa ylänurkassa */
.back{display:flex;align-items:center;gap:9px}
.back svg{width:26px;height:auto;display:block;border-radius:1.5px;opacity:.75}
.back:hover svg{opacity:1}