*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  min-height:100dvh;
  background:#0b1220;
  color:#e5e7eb;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.55;
}
a{ color:#ffcc00; text-decoration:none; }
a:hover{ text-decoration:underline; }

.site-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px;
  background:rgba(11,18,32,.92);
  border-bottom:1px solid rgba(255,204,0,.25);
  backdrop-filter:blur(8px);
}
.site-brand{
  font-weight:900; letter-spacing:.04em; color:#ffcc00; font-size:1.05rem;
}
.site-nav{ display:flex; flex-wrap:wrap; gap:8px 14px; }
.site-nav a{
  color:#f8fafc; font-weight:700; font-size:.95rem; text-decoration:none;
  padding:6px 10px; border-radius:10px;
}
.site-nav a:hover{ background:rgba(255,204,0,.12); text-decoration:none; }
.site-nav a.is-active{ background:rgba(255,204,0,.2); color:#ffcc00; }

.site-main{ max-width:920px; margin:0 auto; padding:28px 18px 48px; }
.site-main h1{
  font-size:clamp(1.6rem,4vw,2.2rem);
  color:#ffcc00; margin-bottom:14px;
}
.site-main h2{ font-size:1.15rem; color:#f8fafc; margin:22px 0 8px; }
.site-main p,.site-main li{ margin-bottom:10px; color:#cbd5e1; }
.site-main ul{ padding-left:1.2rem; margin-bottom:14px; }

.site-card{
  background:#111827;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:18px 20px;
  margin:18px 0;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.site-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 20px; border-radius:12px;
  font-weight:800; color:#111827; background:linear-gradient(90deg,#ffcc00,#f59e0b);
  text-decoration:none; border:none; cursor:pointer;
}
.site-btn:hover{ filter:brightness(1.05); text-decoration:none; }
.site-btn.secondary{
  color:#f8fafc; background:transparent;
  border:1px solid rgba(255,255,255,.25);
}

.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:20px 18px 28px;
  text-align:center;
  color:#94a3b8;
  font-size:.9rem;
}

/* Etusivu: koko näyttö, ei scrollia (desktop/tablet landscape) */
body.page-home{
  width:100%; height:100%; overflow:hidden;
  --hero-cta-h:clamp(44px,8vw,58px);
  --hero-cta-h-sm:clamp(40px,7vw,52px);
  --hero-cta-fs:clamp(0.82rem,2.8vw,1.22rem);
  --hero-cta-fs-sm:clamp(0.78rem,2.5vw,1.05rem);
  --hero-cta-px:clamp(16px,4vw,34px);
  --hero-cta-px-sm:clamp(14px,3.5vw,28px);
}
.page-home .hero-stage{
  display:flex; align-items:center; justify-content:center;
  width:100vw; height:100dvh; height:100svh;
  overflow:hidden;
  background:#0b1220;
}
/* Sama kuvasuhde kuin rpsportaali-hero.png (1672×941) — napit pysyvät kuvan päällä */
.page-home .hero-frame{
  position:relative;
  width:min(100vw, calc(100svh * 1672 / 941));
  height:min(100svh, calc(100vw * 941 / 1672));
  max-width:100%; max-height:100%;
}
.page-home .hero-img{
  display:block; width:100%; height:100%;
  object-fit:fill;
}
.page-home .hero-actions-layer{
  position:absolute; inset:0; z-index:5;
  pointer-events:none;
}
/* Nappien sijainnit kuvan päällä (1672×941) */
.page-home .hero-actions{
  position:absolute; z-index:5;
  pointer-events:none;
}
.page-home .hero-actions--info{
  top:7%; left:32.5%;
  transform:translateX(-50%);
}
.page-home .hero-actions--login-top{
  top:5.5%; left:83%;
  transform:translateX(-50%);
}
.page-home .hero-actions--keraily{
  top:15%; left:83%;
  transform:translateX(-50%);
}
.page-home .hero-actions--login-yritys{
  top:44%; left:83%;
  transform:translateX(-50%);
}
.page-home .hero-actions--workflow{
  top:35%; left:83%;
  transform:translateX(-50%);
}
.page-home .hero-actions--back{
  top:4.5%; left:8%;
  transform:translateX(0);
}
.page-home .hero-cta{
  pointer-events:auto;
  gap:clamp(6px,1.5vw,10px);
  min-height:var(--hero-cta-h); padding:0 var(--hero-cta-px);
  font-size:var(--hero-cta-fs); font-weight:900; letter-spacing:.04em;
  text-transform:uppercase;
  color:#111827;
  background:linear-gradient(180deg,#ffe066 0%,#ffcc00 45%,#f59e0b 100%);
  border:clamp(2px,0.45vw,3px) solid #fff;
  border-radius:clamp(10px,2vw,14px);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.35),
    0 0 24px rgba(255,204,0,.55),
    0 14px 32px rgba(0,0,0,.55);
  white-space:nowrap;
  cursor:pointer;
  animation:hero-cta-glow 2.2s ease-in-out infinite;
}
.page-home .hero-cta-login{
  min-height:var(--hero-cta-h-sm); padding:0 var(--hero-cta-px-sm);
  font-size:var(--hero-cta-fs-sm);
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(180deg,#3b82f6 0%,#2563eb 45%,#1d4ed8 100%);
  border:clamp(2px,0.45vw,3px) solid #fff;
  animation:hero-cta-glow-blue 2.2s ease-in-out infinite;
}
.page-home .hero-cta-workflow{
  min-height:var(--hero-cta-h-sm); padding:0 var(--hero-cta-px-sm);
  font-size:var(--hero-cta-fs-sm);
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(180deg,#34d399 0%,#059669 45%,#047857 100%);
  border:clamp(2px,0.45vw,3px) solid #fff;
  animation:hero-cta-glow-green 2.2s ease-in-out infinite;
}
.page-home .hero-cta-keraily{
  min-height:var(--hero-cta-h-sm); padding:0 var(--hero-cta-px-sm);
  font-size:var(--hero-cta-fs-sm);
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(180deg,#c084fc 0%,#9333ea 45%,#7e22ce 100%);
  border:clamp(2px,0.45vw,3px) solid #fff;
  animation:hero-cta-glow-purple 2.2s ease-in-out infinite;
}
.page-home .hero-cta-hinnoittelu{
  position:relative;
  flex-wrap:wrap;
  justify-content:center;
}
.page-home .hero-promo-badge{
  position:absolute;
  top:-10px;
  right:-8px;
  z-index:6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 9px;
  border-radius:999px;
  font-size:clamp(0.68rem,2vw,0.82rem);
  font-weight:900;
  letter-spacing:.03em;
  color:#fff;
  background:linear-gradient(180deg,#22c55e 0%,#16a34a 100%);
  border:2px solid #fff;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  pointer-events:none;
  white-space:nowrap;
}
.page-home .hero-promo-badge[hidden]{ display:none !important; }
.page-home .hero-cta-secondary{
  min-height:clamp(40px,7vw,44px); padding:0 clamp(14px,3vw,22px);
  font-size:clamp(0.82rem,2.2vw,0.95rem);
  text-transform:none;
  color:#f8fafc;
  background:rgba(11,18,32,.82);
  border:2px solid rgba(255,255,255,.55);
  animation:none;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.page-home .hero-cta-secondary .hero-cta-arrow{ font-size:1.15rem; }
.page-home .hero-cta-secondary:hover,
.page-home .hero-cta-secondary:focus-visible{
  background:rgba(11,18,32,.92);
  box-shadow:0 10px 28px rgba(0,0,0,.55);
}
.page-home .hero-cta-label{ line-height:1; }
.page-home .hero-cta-arrow{
  font-size:clamp(1.05rem,3vw,1.45rem); line-height:1;
  transition:transform .2s ease;
}
.page-home .hero-cta:hover,
.page-home .hero-cta:focus-visible{
  filter:brightness(1.08);
  transform:translateY(-2px) scale(1.03);
  text-decoration:none;
  animation:none;
}
.page-home .hero-cta-workflow:hover,
.page-home .hero-cta-workflow:focus-visible{
  box-shadow:
    0 0 0 2px rgba(0,0,0,.35),
    0 0 32px rgba(5,150,105,.75),
    0 18px 36px rgba(0,0,0,.6);
}
.page-home .hero-cta-keraily:hover,
.page-home .hero-cta-keraily:focus-visible{
  box-shadow:
    0 0 0 2px rgba(0,0,0,.35),
    0 0 32px rgba(147,51,234,.75),
    0 18px 36px rgba(0,0,0,.6);
}
.page-home .hero-cta:not(.hero-cta-secondary):not(.hero-cta-login):not(.hero-cta-workflow):not(.hero-cta-keraily):hover,
.page-home .hero-cta:not(.hero-cta-secondary):not(.hero-cta-login):not(.hero-cta-workflow):not(.hero-cta-keraily):focus-visible{
  box-shadow:
    0 0 0 2px rgba(0,0,0,.35),
    0 0 32px rgba(255,204,0,.75),
    0 18px 36px rgba(0,0,0,.6);
}
.page-home .hero-cta-login:hover,
.page-home .hero-cta-login:focus-visible{
  box-shadow:
    0 0 0 2px rgba(0,0,0,.35),
    0 0 32px rgba(59,130,246,.75),
    0 18px 36px rgba(0,0,0,.6);
}
.page-home .hero-cta-secondary:hover .hero-cta-arrow,
.page-home .hero-cta-secondary:focus-visible .hero-cta-arrow{
  transform:translateX(-4px);
}
.page-home .hero-cta:hover .hero-cta-arrow,
.page-home .hero-cta:focus-visible .hero-cta-arrow{
  transform:translateX(4px);
}
.page-home .hero-cta:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}
@keyframes hero-cta-glow{
  0%,100%{
    box-shadow:
      0 0 0 2px rgba(0,0,0,.35),
      0 0 18px rgba(255,204,0,.45),
      0 14px 32px rgba(0,0,0,.55);
  }
  50%{
    box-shadow:
      0 0 0 2px rgba(0,0,0,.35),
      0 0 32px rgba(255,204,0,.85),
      0 16px 36px rgba(0,0,0,.6);
  }
}
@keyframes hero-cta-glow-purple{
  0%,100%{
    box-shadow:
      0 0 0 2px rgba(0,0,0,.35),
      0 0 18px rgba(147,51,234,.45),
      0 14px 32px rgba(0,0,0,.55);
  }
  50%{
    box-shadow:
      0 0 0 2px rgba(0,0,0,.35),
      0 0 32px rgba(147,51,234,.85),
      0 16px 36px rgba(0,0,0,.6);
  }
}
@keyframes hero-cta-glow-green{
  0%,100%{
    box-shadow:
      0 0 0 2px rgba(0,0,0,.35),
      0 0 18px rgba(5,150,105,.45),
      0 14px 32px rgba(0,0,0,.55);
  }
  50%{
    box-shadow:
      0 0 0 2px rgba(0,0,0,.35),
      0 0 32px rgba(5,150,105,.85),
      0 16px 36px rgba(0,0,0,.6);
  }
}
@keyframes hero-cta-glow-blue{
  0%,100%{
    box-shadow:
      0 0 0 2px rgba(0,0,0,.35),
      0 0 18px rgba(59,130,246,.45),
      0 14px 32px rgba(0,0,0,.55);
  }
  50%{
    box-shadow:
      0 0 0 2px rgba(0,0,0,.35),
      0 0 32px rgba(59,130,246,.85),
      0 16px 36px rgba(0,0,0,.6);
  }
}
@media (min-width:769px) and (max-width:1100px){
  .page-home .hero-actions--info{ top:6%; left:32.5%; }
  .page-home .hero-actions--login-top{ top:5%; left:82%; }
  .page-home .hero-actions--keraily{ top:14%; left:82%; }
  .page-home .hero-actions--workflow{ top:34%; left:82%; }
  .page-home .hero-actions--login-yritys{ top:43%; left:82%; }
  .page-home .hero-actions--back{ top:4%; left:7%; }
}

@media (max-width:768px){
  body.page-home{
    overflow-x:hidden;
    overflow-y:auto;
    min-height:100dvh;
    height:auto;
  }
  .page-home .hero-stage{
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    width:100%;
    min-height:100dvh;
    height:auto;
    padding:
      max(8px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(14px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }
  .page-home .hero-frame{
    width:100%;
    max-width:720px;
    margin:0 auto;
    height:auto;
    max-height:none;
    aspect-ratio:1672 / 941;
    flex:0 0 auto;
  }
  .page-home .hero-img{
    object-fit:contain;
  }
  .page-home .hero-actions-layer{
    position:relative;
    inset:auto;
    width:100%;
    max-width:520px;
    margin:12px auto 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    flex:1 1 auto;
    align-content:start;
    pointer-events:auto;
  }
  .page-home .hero-actions{
    position:relative;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:100%;
    pointer-events:auto;
  }
  .page-home .hero-actions--info,
  .page-home .hero-actions--back{
    grid-column:1 / -1;
  }
  .page-home .hero-cta{
    width:100%;
    justify-content:center;
    white-space:normal;
    text-align:center;
    line-height:1.15;
  }
}

@media (max-width:420px){
  .page-home .hero-actions-layer{
    grid-template-columns:1fr;
    max-width:360px;
  }
  .page-home .hero-actions--info,
  .page-home .hero-actions--back{
    grid-column:auto;
  }
}

@media (max-width:768px) and (orientation:landscape){
  body.page-home{ overflow:hidden; }
  .page-home .hero-stage{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:100svh;
    padding:max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom));
  }
  .page-home .hero-frame{
    width:min(58vw, calc(100svh * 1672 / 941));
    max-width:none;
    margin:0;
  }
  .page-home .hero-actions-layer{
    width:min(38vw, 320px);
    margin:0;
    grid-template-columns:1fr;
    max-width:none;
  }
}

@media (max-width:720px){
  .page-home .hero-cta-hinnoittelu .hero-promo-badge{
    top:-8px; right:-4px;
    min-height:22px; padding:0 7px;
  }
}

/* WorkFlow / keräily -video: musta täyskuva */
body.media-open{ overflow:hidden; }
.media-overlay{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:#000;
}
.media-overlay[hidden]{ display:none !important; }
body.page-media{
  width:100%; height:100%; overflow:hidden;
  background:#000;
}
.page-media--keraily{
  background:#160630;
}
.media-stage{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:100vw; height:100dvh; height:100svh;
  background:#000;
  overflow:hidden;
}
.page-media--keraily .media-stage{
  background:#160630;
  padding:
    max(56px, calc(12px + env(safe-area-inset-top)))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}
.media-splash-bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}
.media-overlay .media-splash-bg{
  object-fit:cover;
}
.page-media--keraily .media-splash-main{
  position:relative;
  inset:auto;
  z-index:1;
  flex:0 1 auto;
  display:block;
  width:auto;
  height:auto;
  max-width:min(100%, clamp(280px, 92vw, 920px));
  max-height:min(calc(100dvh - 72px), calc(100svh - 72px));
  object-fit:contain;
  pointer-events:none;
}
@media (min-width:769px) and (max-width:1024px){
  .page-media--keraily .media-splash-main{
    max-width:min(88vw, 760px);
  }
}
@media (max-width:768px){
  .page-media--keraily .media-splash-main{
    max-width:100%;
    max-height:min(calc(100dvh - 64px), calc(100svh - 64px));
  }
  .media-back{
    min-height:40px;
    padding:0 14px;
    font-size:0.9rem;
  }
}
@media (max-width:420px){
  .page-media--keraily .media-splash-main{
    max-height:min(calc(100dvh - 56px), calc(100svh - 56px));
  }
}
.media-back{
  position:absolute; z-index:10;
  top:max(12px, env(safe-area-inset-top));
  left:max(12px, env(safe-area-inset-left));
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 18px;
  text-decoration:none;
}
.media-video{
  display:block;
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  background:#000;
}
.media-play-overlay{
  position:absolute; z-index:12;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  min-height:52px; padding:0 28px;
  border:3px solid #fff; border-radius:14px;
  font:inherit; font-size:1.05rem; font-weight:800;
  color:#111827; cursor:pointer;
  background:linear-gradient(180deg,#ffe066 0%,#ffcc00 45%,#f59e0b 100%);
  box-shadow:0 14px 32px rgba(0,0,0,.55);
}
.media-play-overlay:hover{ filter:brightness(1.06); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}