:root{

  --bg:#F7F8FA;

  --card:#FFFFFF;

  --text:#1A1F2B;

  --muted:#E6E8EC;

  --line:#E5E7EB;

  --accent:#BBD7FF;

  --radius:14px;

  --shadow:0 2px 12px rgba(0,0,0,0.06);

}



@media (prefers-color-scheme: dark){

  :root{

    --bg:#0E1116;

    --card:#151a22;

    --text:#e6e8ec;

    --muted:#9aa3af;

    --line:#243142;

    --accent:#5B8CFF;

    --shadow:0 2px 12px rgba(0,0,0,0.5);

  }

}



*{box-sizing:border-box}

html,body{height:100%}

html{scroll-behavior:smooth}

body{

  margin:0;

  background:var(--bg);

  color:var(--text);

  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  line-height:1.6;

  font-size:clamp(16px, 1.1vw + 12px, 18px);

  -webkit-text-size-adjust:100%;

}

/* --- TAUSTA: CSS-radial + abstract.svg overlay --- */

body{

  background: transparent;

  position: relative;

  isolation: isolate;            /* luo oman pino-kontekstin ::before/::after:lle */

}



/* 1) Radial-gradient "circle" koko näkymään (fixed) */

body::before{

  content:"";

  position: fixed;

  inset: 0;

  z-index: -2;

  /* Pehmeä sininen radial keskeltä vaalenee, reunoilla tummenee */

  background:

    radial-gradient(circle at 50% 50%,

      #0f5f85 0%,

      #0e5476 25%,

      #0c4764 55%,

      #0a3a51 75%,

      #082c3e 100%);

  /* pieni blur ja skaalanosto estää reunaartefaktit */

  filter: blur(2px);

  transform: scale(1.01);

}



/* 2) Abstrakti SVG "liimattuna" päälle, fixed ja koko ruudun */

body::after{

  content:"";

  position: fixed;

  inset: 0;

  z-index: -1;

  background:

    url("../img/abstract.svg") center/cover no-repeat;

  opacity: .75;                  /* säädä 0.6–0.9 maun mukaan */

  pointer-events: none;          /* ettei estä klikkauksia */

}



/* Headerin aiempi liukuväri pois / kevyt lasi */

.site-header{

  border-bottom:1px solid var(--line);

  background: rgba(1, 91, 124, 0.9);

  backdrop-filter: blur(6px) saturate(130%);

}

@media (prefers-color-scheme: dark){

  .site-header{ background: rgba(18,22,28,0.9); }

}



/* Tummat kortit (kuten sovittiin) */

.card{

  background: rgba(17,24,39,0.92);

  border-color: rgba(255,255,255,0.08);

  color:#E5E7EB;

}

.card p{ color:#CBD5E1; }

.tag{

  border-color: rgba(255,255,255,0.18);

  color:#E5E7EB; background: rgba(255,255,255,0.04);

}

.card .cta{ border-color:#93C5FD; color:#93C5FD; }



/* Pieni overlay-säätö dark-modessa (taustaa hieman tummemmaksi) */

@media (prefers-color-scheme: dark){

  body::after{ opacity:.6; }

}



.visually-hidden{

  position:absolute!important;

  width:1px;height:1px;

  padding:0;margin:-1px;

  overflow:hidden;clip:rect(0 0 0 0);

  white-space:nowrap;border:0;

}



/* Skip link */

.skip-link{

  position:absolute;left:-9999px;top:auto;

  background:var(--accent);color:#fff;padding:.625rem 1rem;border-radius:8px;

}

.skip-link:focus{left:1rem;top:1rem;z-index:9999;outline:2px solid #fff}



/* Containers */

.container{width:min(1100px, 94vw);margin-inline:auto}

.header-row{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1.25rem 0}



.site-header{

  border-bottom:1px solid var(--line);

  background:linear-gradient(to bottom, rgba(0, 170, 255, 0.5), rgba(255,255,255,0));

  backdrop-filter:saturate(180%) blur(6px);

}



.brand-kicker{

  display:inline-block;

  font-size:.875rem;

  color:var(--muted);

}

.site-title{

  margin:.125rem 0 0 0;

  font-weight:700;

  letter-spacing:.2px;

  font-size:clamp(24px, 2.2vw + 14px, 36px);

}



.lang-switch{display:flex;gap:.5rem}

.lang-btn{

  appearance:none;

  border:1px solid var(--line);

  background:var(--card);

  color:var(--text);

  border-radius:10px;

  padding:.5rem .75rem;

  cursor:pointer;

  font-size:.95rem;

  line-height:1;

  min-width:44px; 

  min-height:44px; 

}

.lang-btn[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent)}

.lang-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}



/* Intro */

.intro{padding:1.25rem 0 0 0}

.lead{margin:.25rem 0;color:var(--muted);max-width:70ch}

.intro-note{margin:.25rem 0 1.25rem 0;color:var(--muted);font-size:.95rem}



/* Columns */

.demo-columns{padding:1.25rem 0 2.5rem 0}

.demo-columns h2{font-size:1.25rem;margin:0 0 .75rem 0}

.columns{

  display:grid;gap:1rem;

  grid-template-columns:repeat(2, minmax(0,1fr));

}

@media (max-width: 880px){

  .columns{grid-template-columns:1fr}

}



/* Cards */

.card{

  background:var(--card);

  border:1px solid var(--line);

  border-radius:var(--radius);

  padding:1rem;

  box-shadow:var(--shadow);

  display:flex;flex-direction:column;gap:.5rem;

}

.card h3{

  margin:.2rem 0 0 0;font-size:1.05rem;line-height:1.3;

}

.card p{margin:.25rem 0;color:var(--muted)}

.card .tags{display:flex;flex-wrap:wrap;gap:.375rem;margin:.25rem 0}

.tag{

  display:inline-block;border:1px solid var(--line);border-radius:999px;

  padding:.15rem .55rem;font-size:.82rem;color:var(--muted);line-height:1.4;

}

.card .cta{

  margin-top:auto;align-self:flex-start;

  display:inline-flex;gap:.5rem;align-items:center;

  text-decoration:underline;

  font-weight:600;

  text-underline-offset: 3px;

  border:1px solid var(--accent);

  color:var(--accent);background:transparent;

  padding:.45rem .75rem;border-radius:10px;

}

.card .cta:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.card .cta:hover{transform:translateY(-1px)}



.site-footer{

  border-top:1px solid var(--line);

  padding:1.25rem 0;margin-top:1rem;

}

.footer-grid{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between}

.footnote{margin:0;color:var(--muted);font-size:.95rem}

.footer-links{list-style:none;margin:0;padding:0;display:flex;gap:1rem}

.footer-links a{color:var(--accent);  text-decoration: underline;

  text-underline-offset: 3px;}

.footer-links a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.footer-links a:hover{ text-decoration-thickness: 2px; }

/* Reduce motion */

@media (prefers-reduced-motion: no-preference){

  .card{transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}

}