/* Cashido – "Uusittu sivusto rakenteilla" */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}

:root{
  --blue:#2e9cd4;      /* cashido.fi linkkisininen */
  --blue-dark:#1a6f9c;
  --green:#9fd067;     /* logon lehti */
  --green-dark:#4f8a1c;
  --grey:#818286;      /* logon tekstiosa */
  --ink:#24292e;
  --muted:#5a5d63;
  --bg:#ffffff;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  font-family:var(--font);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.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}

/* Taustan pehmeät muodot logon väreistä */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:radial-gradient(1200px 700px at 50% -10%,#f3f9fd 0%,#fff 60%)}
.blob{position:absolute;display:block;filter:blur(60px);opacity:.55;will-change:transform}
.blob--leaf{width:52vmax;height:34vmax;right:-14vmax;top:-10vmax;
  background:linear-gradient(135deg,#d9efbf 0%,var(--green) 100%);
  border-radius:0 100% 0 100%;transform:rotate(-12deg);animation:float1 18s ease-in-out infinite}
.blob--drop{width:30vmax;height:30vmax;left:-10vmax;bottom:-12vmax;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#cfe9f7 0%,var(--blue) 70%);opacity:.35;
  animation:float2 22s ease-in-out infinite}
.blob--sky{width:22vmax;height:22vmax;left:12vw;top:8vh;border-radius:50%;
  background:#e6f3fb;opacity:.7;animation:float2 26s ease-in-out infinite reverse}
@keyframes float1{0%,100%{transform:rotate(-12deg) translate(0,0)}50%{transform:rotate(-6deg) translate(-3vmax,2vmax)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(2vmax,-2vmax)}}

.wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(40px,8vh,96px) 24px 32px;max-width:860px;margin:0 auto;width:100%}
.logo{width:min(300px,68vw);height:auto;margin-bottom:clamp(32px,6vh,56px)}

.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;
  padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.75);
  border:1px solid #dfe9ef;color:var(--blue-dark);
  font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  backdrop-filter:blur(6px)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(159,208,103,.7);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(159,208,103,.7)}70%{box-shadow:0 0 0 10px rgba(159,208,103,0)}100%{box-shadow:0 0 0 0 rgba(159,208,103,0)}}

.title{margin:0;font-weight:800;line-height:1.08;letter-spacing:-.025em;
  font-size:clamp(2.1rem,6.2vw,4.25rem);color:var(--ink);text-wrap:balance}
.grad{background:linear-gradient(90deg,var(--blue-dark) 0%,var(--blue) 45%,var(--green-dark) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin:20px 0 0;font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--muted);font-weight:500;line-height:1.5}

.progress{margin-top:clamp(32px,5vh,48px);width:min(220px,60vw);height:4px;border-radius:4px;background:#e6edf1;overflow:hidden}
.progress span{display:block;height:100%;width:40%;border-radius:4px;
  background:linear-gradient(90deg,var(--blue),var(--green));animation:slide 2.8s cubic-bezier(.6,0,.4,1) infinite}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}

.contact{text-align:center;padding:24px 24px calc(28px + env(safe-area-inset-bottom));color:var(--muted);font-size:.95rem}
.contact p{margin:4px 0}
.contact a{color:var(--blue-dark);text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:border-color .2s}
.contact a:hover,.contact a:focus-visible{border-bottom-color:currentColor}
.contact a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.sep{margin:0 10px;color:#b5bcc2}
.small{font-size:.8rem;color:#6b6f75}

/* Sisääntulo */
.wrap>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.wrap>*:nth-child(3){animation-delay:.15s}
.wrap>*:nth-child(4){animation-delay:.28s}
.wrap>*:nth-child(5){animation-delay:.4s}
.wrap>.progress{animation:rise .9s cubic-bezier(.2,.7,.2,1) .52s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .progress span{width:100%;transform:none}
}