:root{
  /* Teema: tumma sininen + hehku + kultainen aksentti */
  --bg0:#040a16;
  --bg1:#071a33;
  --bg2:#0a2a55;

  --card: rgba(11,24,49,.62);
  --stroke: rgba(255,255,255,.12);

  --text:#eef6ff;
  --muted:#b9c9dd;
  --muted2:#93a9c3;

  --ice:#8fd3ff;
  --gold:#f6c453;

  --shadow: 0 14px 40px rgba(0,0,0,.40);
  --radius: 18px;

  --max: 1160px;
  --content: 920px; /* sivun sisällön maksileveys */
}

/* Reset (kevyt) */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1000px 700px at 15% 15%, rgba(143,211,255,.14), transparent 55%),
    radial-gradient(900px 650px at 85% 30%, rgba(246,196,83,.12), transparent 55%),
    radial-gradient(1100px 700px at 50% 120%, rgba(10,42,85,.55), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 35%, var(--bg0));
  overflow-x:hidden;
}

/* Taustalle hehkuva “aura” */
body::before{
  content:"";
  position:fixed; inset:-120px;
  background:
    radial-gradient(600px 600px at 35% 22%, rgba(143,211,255,.10), transparent 60%),
    radial-gradient(650px 650px at 70% 60%, rgba(246,196,83,.08), transparent 62%);
  filter: blur(18px);
  opacity:.95;
  pointer-events:none;
  z-index:-1;
}

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

/* Yhteinen sisällön “kääre” – KAIKKI alueet samalla leveydellä */
.wrap{
  width: min(var(--content), calc(100% - 2rem));
  margin: 0 auto;
}

/* Headerin sisäleveys (voi olla sama kuin wrap tai leveämpi) */
.container{
  width:min(var(--max), calc(100% - 2rem));
  margin:0 auto;
}

/* Skip link (a11y) */
.skip{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:1rem; top:1rem; width:auto; height:auto; padding:.75rem 1rem;
  background: rgba(11,24,49,.92);
  border:1px solid var(--stroke);
  border-radius:12px;
  z-index:9999;
  box-shadow:var(--shadow);
}

/* Header */
header.site-header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(4,10,22,.86), rgba(4,10,22,.55));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--stroke);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0;
  gap:1rem;
}
.brand{
  display:flex; align-items:center; gap:.75rem;
  font-weight:800; letter-spacing:.2px;
}

.logo-img{
  width:48px;
  height:48px;
}

.logo{
  width:38px; height:38px; border-radius:12px;
  background:
    radial-gradient(16px 16px at 30% 30%, rgba(143,211,255,.9), transparent 60%),
    radial-gradient(18px 18px at 70% 70%, rgba(246,196,83,.8), transparent 62%),
    linear-gradient(135deg, rgba(143,211,255,.22), rgba(246,196,83,.12));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

.img{
  width: min(100%, 760px);
  height: auto;
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
  }

.brand span{ display:inline-flex; flex-direction:column; line-height:1.05; }
.brand small{ font-weight:600; color:var(--muted2); letter-spacing:.3px; margin-top:.18rem; }

.actions{ display:flex; gap:.6rem; align-items:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.62rem .9rem;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(11,24,49,.55);
  color:var(--text);
  box-shadow:none;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(143,211,255,.35); background: rgba(11,24,49,.68); }
.btn:focus-visible{ outline:2px solid rgba(143,211,255,.55); outline-offset:2px; }

.btn-primary{
  border-color: rgba(246,196,83,.35);
  background: linear-gradient(135deg, rgba(246,196,83,.14), rgba(143,211,255,.10));
}

.pill{
  display:inline-flex; align-items:center;
  padding:.25rem .6rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color:var(--muted);
  font-size:.82rem;
  background: rgba(11,24,49,.45);
  gap:.45rem;
}

/* Hamburger */
.hamburger{
  width:44px; height:44px;
  border-radius:14px;
  position:relative;
}
.hamburger .lines{
  width:18px; height:12px; position:relative;
}
.hamburger .lines span{
  position:absolute; left:0; right:0;
  height:2px; border-radius:99px;
  background: rgba(238,246,255,.9);
}
.hamburger .lines span:nth-child(1){ top:0; }
.hamburger .lines span:nth-child(2){ top:5px; opacity:.9; }
.hamburger .lines span:nth-child(3){ top:10px; opacity:.85; }

/* Drawer-nav */
.drawer-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
  z-index:60;
}
.drawer{
  position:fixed; top:0; right:0; height:100%;
  width:min(92vw, 380px);
  background: linear-gradient(180deg, rgba(4,10,22,.98), rgba(7,26,51,.96));
  border-left: 1px solid var(--stroke);
  transform: translateX(104%);
  transition: transform .22s ease;
  z-index:70;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column;
}
.drawer-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem;
  border-bottom:1px solid var(--stroke);
}
.drawer .nav{
  padding: .8rem 1rem 1rem;
  overflow:auto;
}
.nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem .85rem;
  border-radius:14px;
  border:1px solid transparent;
  color:var(--text);
}
.nav a:hover{
  border-color: rgba(143,211,255,.25);
  background: rgba(11,24,49,.55);
}
.nav .muted{ color:var(--muted); font-size:.9rem; }

.drawer.open{ transform: translateX(0); }
.drawer-backdrop.open{ opacity:1; pointer-events:auto; }

/* Hero */
.hero{
  padding: 1.35rem 0 1.1rem;
}
.hero-card{
  width:100%;
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(11,24,49,.70), rgba(11,24,49,.40));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  min-height: 280px;
}
.hero-media{
  position:absolute; inset:0;
  background:
    radial-gradient(800px 420px at 25% 25%, rgba(143,211,255,.22), transparent 60%),
    radial-gradient(700px 420px at 70% 70%, rgba(246,196,83,.14), transparent 62%),
    linear-gradient(135deg, rgba(10,42,85,.70), rgba(4,10,22,.85));
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(4,10,22,.72), rgba(4,10,22,.18));
}
.hero-content{
  position:relative;
  padding: 1.35rem 1.2rem 1.2rem;
  max-width: 720px;
}
h1{
  margin:.2rem 0 .55rem;
  font-size: clamp(1.6rem, 2.2vw + 1rem, 2.55rem);
  letter-spacing:-.4px;
}
.lede{
  margin:0 0 .95rem;
  color: var(--muted);
  line-height:1.55;
  font-size: 1.05rem;
}
.hero-cta{
  display:flex; gap:.65rem; flex-wrap:wrap;
  align-items:center;
  margin-top:.85rem;
}

/* “Minusta” laatikko */
.about{
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: rgba(11,24,49,.45);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.about h2{ margin:.1rem 0 .45rem; font-size:1.1rem; letter-spacing:-.2px; }
.about p{ margin:0; color:var(--muted); line-height:1.6; }

/* Pääsisältö */
.section{
  padding: 1.15rem 0 2.2rem;
}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}
.section-head h2{
  margin:0;
  font-size:1.25rem;
  letter-spacing:-.2px;
}
.section-head p{
  margin:.25rem 0 0;
  color:var(--muted2);
  font-size:.95rem;
}

/* Kortit: AINA allekkäin */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:1rem;
}

/* Uutiskortti */
.card{
  width:100%;
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(11,24,49,.66), rgba(11,24,49,.40));
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
  overflow:hidden;
  position:relative;
  transition: transform .12s ease, border-color .12s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(143,211,255,.28);
}
.card:focus-visible{
  outline:2px solid rgba(143,211,255,.55);
  outline-offset:3px;
}

.card-inner{
  display:grid;
  grid-template-columns: 140px 1fr;
}
.thumb{
  min-height: 120px;
  background:
    radial-gradient(260px 200px at 25% 30%, rgba(143,211,255,.20), transparent 60%),
    radial-gradient(280px 220px at 80% 70%, rgba(246,196,83,.12), transparent 62%),
    linear-gradient(135deg, rgba(10,42,85,.62), rgba(4,10,22,.88));
  border-right:1px solid rgba(255,255,255,.10);
}
.card-body{
  padding:1rem 1rem 1rem;
}
.card h3{
  margin:.05rem 0 .35rem;
  letter-spacing:-.2px;
  font-size:1.1rem;
}
.card p{
  margin:0 0 .75rem;
  color:var(--muted);
  line-height:1.55;
  font-size:.95rem;
}
.meta-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; flex-wrap:wrap;
}
.tag{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.82rem;
  color: rgba(238,246,255,.86);
  padding:.22rem .55rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(4,10,22,.25);
}
.arrow{
  opacity:.9;
  color: var(--ice);
  font-weight:700;
  letter-spacing:.1px;
}

/* Footer (yksinkertainen) */
footer{
  border-top:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(4,10,22,.35), rgba(4,10,22,.85));
  padding: 1.4rem 0 1.2rem;
}
.fineprint{
  color: var(--muted2);
  font-size:.9rem;
  display:flex; gap:.75rem; flex-wrap:wrap; justify-content:space-between;
}
.fineprint a{ color: var(--muted2); }
.fineprint a:hover{ color: var(--text); }

/* Responsive */
@media (max-width: 680px){
  .card-inner{ grid-template-columns: 1fr; }
  .thumb{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.10);
    min-height: 140px;
  }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}


/* ====== Punainen huomijo alue ====== */

    .cyber-disclaimer-box {
        width: 700px;
        padding: 24px 28px;
        margin: 20px auto;
        background: rgba(255, 0, 60, 0.14);
        border: 2px solid rgba(255, 0, 60, 0.95);
        border-radius: 12px;
        box-shadow:
        0 0 8px rgba(255, 0, 60, 0.7),
        0 0 18px rgba(255, 0, 60, 0.45),
        inset 0 0 12px rgba(255, 0, 60, 0.18);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        position: relative;
        overflow: hidden;
        }
    
    .cyber-disclaimer-box::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
        135deg,
        rgba(255, 0, 60, 0.10) 0%,
        rgba(255, 0, 60, 0.03) 45%,
        rgba(255, 0, 60, 0.12) 100%
        );
        pointer-events: none;
        }
    
    .cyber-disclaimer-box h4 {
        margin: 0 0 12px 0;
        color: #ff2a4f;
        font-size: 1.4rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-shadow:
        0 0 4px rgba(255, 42, 79, 0.9),
        0 0 10px rgba(255, 42, 79, 0.6);
        position: relative;
        z-index: 1;
        }
    
    .cyber-disclaimer-box p {
        margin: 0;
        color: #ff4d6d;
        font-family: "Courier New", Courier, monospace;
        font-size: 1rem;
        line-height: 1.7;
        text-shadow: 0 0 6px rgba(255, 77, 109, 0.35);
        position: relative;
        z-index: 1;
        }