:root{
  --primary:#3b82f6;
  --bg:#fafafa;
  --text:#263238;
  --muted:#475569;
  --card:#ffffff;
  --radius:12px;
  --shadow:0 12px 30px rgba(16,24,40,0.06);
  --shadow-sm:0 8px 20px rgba(16,24,40,0.04);
}

/* Section wrapper */
.maintenance-section{
  padding:3.5rem 5%;
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI", Roboto, Arial, sans-serif;
}

/* Centered container */
.maintenance-container{
  max-width:1100px;
  margin:0 auto;
}

/* Hero */
.maintenance-hero{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  padding:1.5rem;
  align-items:center;
  text-align:center;
}

.maintenance-hero .tag{
  font-weight:700;
  color:var(--muted);
  opacity:0.95;
}

.maintenance-hero h1{
  font-size:2rem;
  margin:0.25rem 0;
  color:#071133;
  line-height:1.12;
}

.maintenance-hero p{
  color:var(--muted);
  max-width:760px;
  margin-bottom:1.1rem;
}

/* Hero image */
.maintenance-hero-media{
  width:100%;
  max-width:780px;
  border-radius:10px;
  overflow:hidden;
  margin-top:0.75rem;
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(15,23,42,0.03);
}

.maintenance-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}

.maintenance-hero-media img:hover{
  transform:scale(1.02);
}

/* Features grid */
.maintenance-features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
  margin-top:1.6rem;
}

.maintenance-card{
  background:var(--card);
  padding:1.25rem;
  border-radius:12px;
  text-align:left;
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(15,23,42,0.03);
  transition:transform .18s ease, box-shadow .18s ease;
}

.maintenance-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(15,23,42,0.06);
}

.maintenance-card .icon{
  width:48px;
  height:48px;
  border-radius:10px;
  background:rgba(59,130,246,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:0.75rem;
}

.maintenance-card h3{
  margin:0 0 0.45rem 0;
  font-size:1.05rem;
  color:#0b2540;
}

.maintenance-card p{
  margin:0;
  color:var(--muted);
  font-size:0.95rem;
}

/* Contact / CTA */
.maintenance-cta{
  margin-top:1.4rem;
  display:flex;
  gap:0.75rem;
  justify-content:center;
  flex-wrap:wrap;
}

.maintenance-cta .btn{
  display:inline-block;
  padding:0.65rem 1.25rem;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:var(--shadow-sm);
  border:none;
}

.maintenance-cta .btn.primary{
  background:var(--primary);
  color:#fff;
}

.maintenance-cta .btn.ghost{
  background:rgba(59,130,246,0.06);
  color:var(--primary);
  border:2px solid rgba(37,99,235,0.12);
  box-shadow:none;
}

/* Small visuals */
.maintenance-note{
  margin-top:0.75rem;
  color:var(--muted);
  font-size:0.9rem;
  text-align:center;
}

/* Responsive */
@media(max-width:1000px){
  .maintenance-features{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:640px){
  .maintenance-hero h1{ font-size:1.5rem; }
  .maintenance-features{ grid-template-columns:1fr; }
  .maintenance-hero-media{ max-height:260px; }
  .maintenance-cta .btn{ padding:0.55rem 1rem; font-size:0.95rem; }
}

/* Rohkem vaba ruumi hero-teksti ja CTA vahel */
.maintenance-hero p {
  margin-bottom: 1.1rem;
}

/* Liiguta hero CTA veidi allapoole */
.maintenance-cta {
  margin-top: 1.4rem;
}

/* Täiendav vahe hero ja detailse (Kuidas / Miks / FAQ) sektsiooni vahel */
.maintenance-details {
  margin-top: 3rem; /* tugevam nihutus kui inline-stiilil */
}

/* Rohkem vahet "Miks valida meid" ja FAQ vahel ning veidi allapoole nende sektsiooni */
.maintenance-why {
  margin-top: 1.6rem;
  padding-top: 0.25rem;
}

/* Nupud detailide lõpus (Broneeri / Saada päring) kaugemal tekstist */
.maintenance-contact-cta {
  margin-top: 2rem; /* nihuta nuppe allapoole */
}

/* Veidi vertikaalset ruumi kaardide vahel */
.maintenance-features {
  gap: 1.25rem;
  margin-top: 1.6rem;
}

/* Mobiilile peenemad vahed */
@media (max-width: 900px) {
  .maintenance-details { margin-top: 2.2rem; }
  .maintenance-contact-cta { margin-top: 1.6rem; }
  .maintenance-cta { margin-top: 1rem; }
}

@media (max-width: 640px) {
  .maintenance-hero p { margin-bottom: 0.9rem; }
  .maintenance-contact-cta { margin-top: 1.25rem; }
  .maintenance-features { gap: 1rem; }
}

/* Eristavad ja ruumi lisavad stiilid maintenance-details sektsioonile */
.maintenance-details{
  margin-top: 3rem; /* suurem vahe hero ja detailide vahel */
  padding: 1.25rem;
  border-radius: 12px;
  background: rgba(59,130,246,0.04); /* hele sinine toon taustaks */
  border: 1px solid rgba(59,130,246,0.08);
}

/* "Kuidas" sammude konteineri sees olevatele kaartidele (valged kastid nüüd eraldi) */
.maintenance-how > div > div {
  background: var(--card);
  padding: 1rem;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--primary);
  margin: 0; /* ruumi õigus kõrval juba flex-gap abil */
}

/* Kui soovid eraldi väiksemate kastidevahelist ruumi mobiilil */
.maintenance-how > div {
  gap: 1rem;
}

/* "Miks valida meid" ja FAQ alumised veerud — paigutame need kastid visuaalselt allapoole ja eraldame */
.maintenance-why{
  margin-top: 1.75rem;
  gap: 1rem;
}
.maintenance-why > div {
  background: var(--card);
  padding: 1rem;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid rgba(59,130,246,0.18);
}

/* Sisuteksti parem joondus ja vahed FAQ elementidele */
.maintenance-why dl dt{
  font-weight: 700;
  margin-top: 0.75rem;
}
.maintenance-why dl dd{
  margin: 0.25rem 0 0.8rem 0;
  color: var(--muted);
}

/* Rohkem vertikaalset ruumi CTA nuppude ja tekstide vahel */
.maintenance-cta { margin-top: 1.6rem; }
.maintenance-contact-cta { margin-top: 2rem; }

/* Kartused/ruum kaartide vahel */
.maintenance-features{ margin-top: 1.6rem; gap: 1.25rem; }

/* Mobiil-tuning */
@media (max-width: 900px){
  .maintenance-details{ padding: 1rem; }
  .maintenance-how > div > div{ padding: 0.9rem; }
  .maintenance-why > div{ padding: 0.9rem; margin-top: 0.6rem; }
  .maintenance-cta{ margin-top: 1.1rem; }
  .maintenance-contact-cta{ margin-top: 1.25rem; }
}

@media (max-width: 640px){
  .maintenance-details{ padding: 0.9rem; }
  .maintenance-how > div{ flex-direction: column; }
  .maintenance-features{ gap: 1rem; }
}