/* =====================================================
   MautonMansikka.fi — Global design tokens
===================================================== */
:root{
  --bg:#0b0f12;
  --panel:#10161c;
  --text:#e7f0ff;
  --muted:#a7b4c2;
  --accent:#06d6a0;        /* vihreä */
  --red:#e63946;           /* punainen */
  --gold:#ffd60a;          /* kulta */
  --stroke:#1c252d;
  --shadow:0 10px 30px rgba(0,0,0,.35);

  /* Header-korkeus (säädä tästä) */
  --header-h:160px;
}

/* =====================================================
   Base / Reset
===================================================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
img{max-width:100%;display:block}
.container{width:min(1200px,100% - 2rem);margin-inline:auto}

/* =====================================================
   HEADER — koko, logo ja navigaatio
===================================================== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(11,15,18,.85);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--stroke);
  box-shadow:var(--shadow);
  padding-block:1.2rem;          /* pystysuuntaista tilaa */
}

.header-inner{
  display:flex; align-items:center; gap:1rem;
  min-height:var(--header-h);    /* → tuplaa headerin korkeuden */
}

/* Brändi */
.brand{display:flex; align-items:center; gap:.8rem; color:inherit; text-decoration:none}
.brand__logo{
  height:100px;                  /* logon koko (desktop) */
  max-height:120px;
  width:auto; object-fit:contain;
}
.brand__text{display:flex; flex-direction:column; line-height:1.2}
.brand__name{font-weight:700; font-size:1.4rem; letter-spacing:.2px}
.brand__tagline{font-size:1rem; color:var(--gold); font-style:italic}

/* Navigaatio */
.nav{ margin-left:auto }
.nav__list{list-style:none; margin:0; padding:0; display:flex; gap:1.4rem; align-items:center}
.nav__link{
  position:relative; text-decoration:none; color:var(--text);
  font-weight:600; letter-spacing:.3px; text-transform:uppercase; font-size:.95rem; padding:.3rem 0;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width:0; height:2px; background:var(--gold); transition:width .25s ease;
}
.nav__link:hover::after{ width:100% }

/* Kielinappulat */
.lang{ margin-left:1rem; display:flex; align-items:center; gap:.35rem }
.lang__btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid var(--stroke); border-radius:8px;
  text-decoration:none; color:var(--text); transition:.2s ease; font-size:.95rem;
}
.lang__btn:hover{ border-color:var(--gold); color:var(--gold) }
.lang__btn--active{ border-color:var(--gold); box-shadow:0 0 0 2px rgba(255,214,10,.15) inset }
.lang__sep{ color:var(--muted) }

/* Mobiilinappi (hamburger) */
.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--stroke); border-radius:8px;
  background:transparent; cursor:pointer; margin-left:auto;
}
.nav-toggle__bar{ display:block; width:22px; height:2px; background:var(--text); margin:5px auto; transition:.2s }

/* ------------------ Responsive header ------------------ */
@media (max-width:980px){
  .brand__logo{ height:72px; max-height:90px }          /* pienempi logo mobiilissa */
  .nav-toggle{ display:block }

  /* Mobiilin avautuva valikko: sijoitetaan headerin alle */
  .site-header{ position:sticky }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--panel); border-bottom:1px solid var(--stroke);
    transform:translateY(-120%); transition:transform .25s ease;
  }
  .nav--open{ transform:translateY(0) }
  .nav__list{ flex-direction:column; align-items:flex-start; padding:1rem; gap:.8rem }
  .lang{ display:none } /* halutessa siirrä kieli navin sisään mobiilissa */
}

/* =====================================================
   HERO
===================================================== */
.hero{
  padding:5rem 0 3rem;
  border-bottom:1px solid var(--stroke);
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(230,57,70,.25), transparent),
    radial-gradient(1200px 500px at 80% -10%, rgba(6,214,160,.18), transparent);
}
.hero__inner{ display:flex; justify-content:space-between; align-items:center; gap:2rem }
.hero__text{ max-width:760px }
.hero h1{ font-size:2.2rem; margin:.2rem 0 1rem }
.hero__cta{ display:flex; gap:.8rem; margin-top:1rem }
.badge{ border:1px solid var(--stroke); padding:.5rem .8rem; border-radius:999px; color:var(--gold) }

@media (max-width:980px){
  .hero__inner{ flex-direction:column; align-items:flex-start }
}

/* =====================================================
   Buttons
===================================================== */
.btn{
  display:inline-block; padding:.7rem 1rem;
  border:1px solid var(--stroke); border-radius:.7rem;
  text-decoration:none; color:var(--text); transition:.2s;
}
.btn:hover{ border-color:var(--gold); color:var(--gold) }
.btn--primary{ background:linear-gradient(90deg,var(--gold),#ffe57a); color:#000; border:none }

/* =====================================================
   Feature Cards
===================================================== */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:2rem auto }
.card{
  display:block; padding:1.2rem; border:1px solid var(--stroke); border-radius:1rem;
  background:linear-gradient(180deg,#0e1419,#0b0f12);
  text-decoration:none; color:var(--text);
  transition:transform .2s, box-shadow .2s;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow) }
.card__link{ display:inline-block; margin-top:.4rem; color:var(--gold) }
@media (max-width:980px){ .cards{ grid-template-columns:1fr } }

/* =====================================================
   Reference highlight & CTA sections
===================================================== */
.ref-highlight{ margin:2.5rem auto }
.ref-card{
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
  border:1px solid var(--stroke); border-radius:1rem; padding:1.2rem; background:#0e1419;
}
.cta{
  padding:2.5rem 0; border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke);
  background:radial-gradient(1200px 500px at 50% -20%, rgba(255,214,10,.12), transparent);
  text-align:center;
}
.cta .btn{ margin-top:.6rem }

/* =====================================================
   Pills & CTA box
===================================================== */
.pillbar{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 }
.pillbar span{ border:1px solid var(--stroke); border-radius:999px; padding:.25rem .6rem; color:var(--muted) }
.cta-box{ border:1px solid var(--stroke); border-radius:1rem; padding:1rem; background:#0e1419; margin:1.2rem 0 }

/* =====================================================
   Case blocks
===================================================== */
.case{ border:1px solid var(--stroke); border-radius:1rem; padding:1.2rem; background:#0e1419; margin:1rem 0 }
.case__head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem }
.case__stack{ color:var(--muted); font-size:.95rem }

/* =====================================================
   Forms
===================================================== */
.form{ max-width:720px }
.form__row{ display:flex; flex-direction:column; margin:.7rem 0 }
.form__row input,
.form__row select,
.form__row textarea{
  background:#0e1419; border:1px solid var(--stroke); border-radius:.6rem; padding:.6rem .8rem; color:var(--text)
}
.form__row input:focus,
.form__row select:focus,
.form__row textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,214,10,.12)
}
.form__actions{ display:flex; align-items:center; gap:1rem; margin-top:.6rem }
.form__note{ color:var(--muted); margin:0 }
.err{ color:#ff8a8a; height:1rem }
.form__status{ margin-top:1rem; padding:.7rem 1rem; border-radius:.6rem; border:1px solid var(--stroke); background:#0e1419 }

/* =====================================================
   FOOTER
===================================================== */
.site-footer{
  margin-top:4rem; background:linear-gradient(180deg,#0e1419 0%,#0b0f12 100%);
  border-top:1px solid var(--stroke); padding:2.2rem 0;
}
.footer-grid{ display:grid; gap:2rem; grid-template-columns:2fr 1fr 1.2fr }
@media (max-width:980px){ .footer-grid{ grid-template-columns:1fr } }
.footer-brand{ display:flex; align-items:center; gap:.8rem; margin-bottom:.6rem }
.footer-brand__icon{ width:40px; height:40px; object-fit:contain }
.footer-brand__name{ font-weight:700 }
.footer-brand__tagline{ color:var(--gold); font-style:italic }
.footer-copy{ color:var(--muted); margin-top:.6rem }
.footer-links, .footer-contacts{ list-style:none; padding:0; margin:.6rem 0 0 0 }
.footer-links li, .footer-contacts li{ margin:.25rem 0 }
.footer-links a, .footer-contacts a{
  color:var(--text); text-decoration:none; border-bottom:1px solid transparent; transition:.2s
}
.footer-links a:hover, .footer-contacts a:hover{ color:var(--gold); border-color:var(--gold) }
.social{ display:flex; gap:.6rem; margin-top:.8rem }
.social__btn{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px;
  border:1px solid var(--stroke); color:var(--text); text-decoration:none; transition:.2s;
}
.social__btn:hover{ border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 3px rgba(255,214,10,.12) inset }