/*
Theme Name: LVI-Huolto Saarinen Korjattu
Theme URI: https://www.saarisella.fi
Author: LVI-Huolto Saarinen Oy
Description: Korjattu oranssi-harmaa WordPress-teema Google-arvosteluosiolla.
Version: 1.0
*/

:root{
  --orange:#f28c00;
  --gray:#4b4f54;
  --dark:#111;
  --light:#f4f4f4;
  --text:#222;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  line-height:1.7;
  background:
    linear-gradient(135deg,rgba(17,17,17,.88),rgba(75,79,84,.78)),
    url('assets/logo.png') center center/520px auto no-repeat fixed,
    #111;
}
a{color:inherit}
.container{max-width:1180px;margin:auto;padding:0 22px}
.site-header{color:#fff;min-height:90vh}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:20px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:900;color:#fff}
.brand img{height:70px;width:auto}
.nav a{color:#fff;text-decoration:none;margin-left:20px;font-weight:800}
.nav a:hover{color:var(--orange)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center;padding:80px 0}
.hero h1{font-size:clamp(36px,5vw,64px);line-height:1.05;margin:0 0 20px;color:#fff}
.hero p{font-size:21px;color:#f2f2f2;margin:0 0 28px}
.hero-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:28px;padding:34px;text-align:center;backdrop-filter:blur(8px)}
.hero-card img{max-width:100%;height:auto}
.btn{display:inline-block;text-decoration:none;font-weight:900;border-radius:999px;padding:15px 24px;margin:6px}
.btn.primary{background:var(--orange);color:#fff}
.btn.secondary{background:var(--gray);color:#fff}
main{background:#fff;border-radius:34px 34px 0 0;box-shadow:0 -18px 70px rgba(0,0,0,.25)}
section{padding:72px 0}
.section-title{text-align:center;margin-bottom:42px}
.section-title h2{font-size:40px;color:var(--orange);margin:0 0 8px}
.section-title p{color:#666;margin:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.card{background:var(--light);border:1px solid rgba(242,140,0,.18);border-radius:24px;padding:28px}
.card h3{margin-top:0;color:var(--orange)}
.icon{font-size:36px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.panel{background:#f7f7f7;border-radius:28px;padding:34px}
.dark-panel{background:linear-gradient(135deg,#242629,#4b4f54);color:#fff;border-radius:28px;padding:34px}
.dark-panel h3{color:#fff}
.dark-panel strong{color:var(--orange)}
.areas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.areas span{background:#fff;border:1px solid #ddd;border-radius:999px;padding:12px 18px;font-weight:800}
.reviews{background:#f6f6f6}
.review-box{background:#fff;border:1px solid rgba(242,140,0,.18);border-radius:24px;padding:32px;text-align:center;box-shadow:0 14px 45px rgba(0,0,0,.08)}
.review-placeholder{border:2px dashed #ccc;border-radius:18px;padding:28px;margin:20px 0;color:#555}
.cta{background:linear-gradient(135deg,var(--orange),#ffae35);color:#fff;text-align:center;padding:76px 20px}
.contact{background:#111;color:#fff}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.contact-box{background:#1d1d1d;border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:25px}
.contact-box h3{color:var(--orange);margin-top:0}
.site-footer{background:#050505;color:#bbb;text-align:center;padding:24px;font-size:14px}
@media(max-width:850px){
  body{background:linear-gradient(135deg,rgba(17,17,17,.9),rgba(75,79,84,.8)),url('assets/logo.png') center 150px/360px auto no-repeat fixed,#111}
  .topbar{align-items:flex-start;flex-direction:column}
  .nav a{margin:0 14px 0 0;display:inline-block;padding:4px 0}
  .hero{grid-template-columns:1fr;text-align:center;padding:45px 0 80px}
  .split{grid-template-columns:1fr}
  main{border-radius:24px 24px 0 0}
}