* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #ffffff;
    background-color: #0b1220;
    background-image: none;
    background-size: auto;
    background-position: initial;
    background-repeat: initial;
    background-attachment: scroll;
    animation: pageTransition 0.6s ease-out;
}

html, body {
    min-height: 100%;
}

html::before {
    content: none;
}

/* Subtle geometric background */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1100px 800px at 10% 10%, rgba(245, 158, 11, 0.18), transparent 62%),
        radial-gradient(1000px 700px at 90% 20%, rgba(192, 122, 58, 0.14), transparent 62%),
        radial-gradient(900px 600px at 20% 90%, rgba(234, 179, 8, 0.12), transparent 62%),
        linear-gradient(180deg, rgba(11,18,32,1), rgba(13,15,18,1));
    z-index: -1;
}

/* Blueprint grid overlay */
body::after {
    content: none;
}

@keyframes pageTransition {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    padding: 1rem 5%;
    background-color: #0f172a;
    color: #e5ecf4;
    position: sticky;
    top: 0;
    z-index: 1000;
    animation: slideInFromTop 0.5s ease-out;
    border-radius: 28px;
    background: rgba(0, 0, 20, 0.281);
}

/* Theme toggle */
.theme-toggle { 
    margin-left: 128px;
    margin-right: 0;
    background: rgba(255,255,255,0.08); 
    color: #e5ecf4; 
    border: 1px solid rgba(226,232,240,0.16); 
    border-radius: 12px; 
    padding: 8px 10px; 
    cursor: pointer; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    transition: background .2s ease, transform .2s ease; 
}
.theme-toggle:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }
.theme-toggle .theme-icon { font-size: 1rem; line-height: 1; }

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    order: 1;
}
.logo a {
    color: white;
    text-decoration: none;
}

.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    order: 2;
    margin-left: auto;
}

.theme-toggle { order: 3; }
.menu-btn { order: 4; }

.nav-links li {
    margin-left: 2rem;
    animation: slideInFromRight 0.5s ease-out;
    animation-fill-mode: both;
}

.nav-links li:nth-child(1) { animation-delay: 0.1s; }
.nav-links li:nth-child(2) { animation-delay: 0.2s; }
.nav-links li:nth-child(3) { animation-delay: 0.3s; }

.nav-links a {
    color: #e5ecf4;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #3498db;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a:hover { color: #60a5fa; text-shadow: 0 0 10px rgba(96,165,250,0.35); }

.menu-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 1000;
}

.menu-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #e5ecf4;
    transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    transform-origin: center;
}

.menu-btn:hover span {
    background-color: #3498db;
}

.menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Logo images */
.logo-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.logo-img img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
}

.hero-logo {
    width: min(280px, 72vw);
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto 1rem;
    filter: drop-shadow(0 18px 34px rgba(0,0,0,0.28));
    border-radius: 20%;
}

.hero {
    position: relative;
    isolation: isolate;
    min-height: 78vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4rem 1rem;
    animation: fadeIn 1s ease-out;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: -20% -10% -10% -10%;
    display: none;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(closest-side, rgba(0,0,0,0.25), transparent 85%);
    z-index: -1;
}

.main-content {
    box-sizing: border-box;
    background: rgba(17, 24, 39, 0.55);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 28px;
    padding: 3rem 2rem;
    margin: 1.5rem;
    max-width: 1500px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}


.hero h1 {
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    margin-bottom: 0.75rem;
    opacity: 0;
    color: #ffffff;
    animation: fadeIn 1s ease-out 0.4s forwards;
}

.hero p {
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    margin: 0 auto 1.25rem;
    opacity: 0;
    color: rgba(255, 255, 255, 0.86);
    max-width: 820px;
    animation: fadeIn 1s ease-out 0.6s forwards;
}

.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0 auto 0.75rem;
    max-width: 980px;
}

.hero-facts .fact {
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(226,232,240,0.16);
    color: rgba(255,255,255,0.92);
    font-weight: 700;
    font-size: 0.95rem;
}

.theme-light .hero-facts .fact {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(0,0,0,0.08);
    color: #000000;
}

.logo-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(40vw, 220px);
    height: min(40vw, 220px);
    border-radius: 22px;
    background: linear-gradient(145deg, #0ea5e9, #60a5fa);
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: clamp(1.5rem, 4.2vw, 2.2rem);
    margin: 0 auto 1.25rem;
    box-shadow: 0 18px 40px rgba(14,165,233,0.35);
    animation: logoSpin 0.9s ease-out;
}

.hero-cta { display: flex; gap: 12px; justify-content: center; margin-top: 0.5rem; }

.trust-strip {
    padding-top: 1.75rem;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.trust-item {
    background: rgba(17,24,39,0.55);
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 18px;
    padding: 1.1rem 1rem;
    text-align: left;
}

.trust-item h3 {
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
    color: #ffffff;
}

.trust-item p {
    margin: 0;
    color: rgba(255,255,255,0.84);
}

.theme-light .trust-item {
    background: rgba(255,255,255,0.68);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.theme-light .trust-item h3,
.theme-light .trust-item p {
    color: #000000;
}

@media (max-width: 900px) {
    .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .trust-grid { grid-template-columns: 1fr; }
}

/* Breadcrumbs on service detail should be above any overlapping blocks */
.breadcrumbs { position: relative; z-index: 5; }

.btn {
    
    padding: 0.9rem 1.4rem;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 1;
}
.btn.primary { background: linear-gradient(135deg, #2563eb, #0ea5e9); color: #fff; box-shadow: 0 10px 24px rgba(37,99,235,0.35); }
.btn.primary:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(37,99,235,0.45); }
.btn.ghost { background: rgba(255,255,255,0.08); color: #e5ecf4; border: 1px solid rgba(226,232,240,0.16); }
.btn.ghost:hover { background: rgba(255,255,255,0.16); transform: translateY(-3px); }

/* Sections */
.section { padding: 3.5rem 1rem; background-color: rgba(17,24,39,0.6); border-radius: 28px; }
.container { max-width: 1200px; margin: 0 auto; }
.section-title { text-align: center; font-size: clamp(1.4rem, 2.8vw, 2rem); margin-bottom: 0.5rem; color: #eaf2ff; }
.section-subtitle {color: rgba(255,255,255,0.82); margin-bottom: 2rem; text-align: center; }

/* Keep default dark theme text consistent */
body, body p, body li, body h1, body h2, body h3, body h4 { color: #ffffff; }


.cards {
    display: grid;
    grid-template-columns: 0.9fr 1.15fr 1.15fr 1.15fr 0.9fr;
    gap: 18px;
}

@media (max-width: 1100px) {
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .cards { grid-template-columns: 1fr; }
}

.card.service-card {
    background: #ffffffcc;
    border: 1px solid rgba(226,232,240,0.08);
    border-radius: 18px;
    padding: 1.25rem;
    background: rgba(17,24,39,0.6);
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
    transition: transform 0.25s ease, box-shadow 0.35s ease;
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
}
.card.service-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,0.28); }
.card.service-card h3 { margin: 0.6rem 0 0.35rem; color: #eaf2ff; }
.card.service-card p { color: rgba(255,255,255,0.82); }

/* Services: highlight center 3 cards, keep style simple and trustworthy */
.card.service-card.featured {
    border-color: rgba(96,165,250,0.38);
    padding: 1.55rem;
    min-height: 260px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.28);
}

.card.service-card.featured::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(96,165,250,0.10), transparent 58%);
    opacity: 0.85;
}

.card.service-card.placeholder {
    border-style: dashed;
    border-color: rgba(148,163,184,0.24);
    background: rgba(17,24,39,0.46);
    padding: 1.1rem;
}

.card.service-card.placeholder .icon-wrap {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(226,232,240,0.16);
    box-shadow: none;
}

.theme-light .card.service-card.featured {
    border-color: rgba(248, 174, 35, 0.24);
    box-shadow: 0 16px 44px rgba(0,0,0,0.10);
}

.theme-light .card.service-card.featured::before {
    background: linear-gradient(180deg, rgba(245, 171, 34, 0.1), transparent 55%);
}

.theme-light .card.service-card.placeholder {
    border-color: rgba(0,0,0,0.18);
    background: rgba(255,255,255,0.58);
}

.theme-light .card.service-card.placeholder .icon-wrap {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.10);
    color: #000000;
}

.card.service-card:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}

.service-cta { margin-top: 0.75rem; align-self: flex-start; }

.icon-wrap { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-size: 1.1rem; }
.icon-wrap.water { background: linear-gradient(135deg, #0ea5e9, #60a5fa); box-shadow: 0 10px 24px rgba(14,165,233,0.35); }
.icon-wrap.electric { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 10px 24px rgba(249,115,22,0.3); }
.icon-wrap.heating { background: linear-gradient(135deg, #ef4444, #f97316); box-shadow: 0 10px 24px rgba(239,68,68,0.3); }
.icon-wrap.vent { background: linear-gradient(135deg, #22c55e, #10b981); box-shadow: 0 10px 24px rgba(16,185,129,0.3); }

/* Calm icon shadows a bit for a more "engineering-company" feel */
.icon-wrap.water, .icon-wrap.electric, .icon-wrap.heating, .icon-wrap.vent { box-shadow: 0 8px 18px rgba(0,0,0,0.18); }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.gallery-item { display: block; position: relative; overflow: hidden; border-radius: 14px; background: #f5f7fb; border: 1px solid rgba(0,0,0,0.06); }
.gallery-item img { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform 0.35s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-actions { display: flex; justify-content: flex-start; margin-bottom: 0.9rem; }
.service-gallery { display: block; }
.service-gallery[hidden] { display: none !important; }

@media (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-item img { height: 220px; } }

/* Pricing and service detail helpers */
.price-item { display: flex; flex-direction: column; gap: 10px; }
.price-item .price { font-size: 1.35rem; font-weight: 800; color: #eaf2ff; }
.price-item ul { list-style: disc; margin-left: 1.25rem; color: #cbd5e1; }
.price-item ul li { margin: 4px 0; }

.price-tag { display: inline-block; padding: 12px 24px; border-radius: 999px; background: rgba(37,99,235,0.18); color: #eaf2ff; border: 1px solid rgba(96,165,250,0.35); font-weight: 700; }

.service-description h2 { color: #eaf2ff; margin-bottom: 0.5rem; }
.service-item { margin: 0.5rem 0; }
.service-item h3 { color: #eaf2ff; display: flex; align-items: center; gap: 8px; }
.service-item p { color: #cbd5e1; }
.service-item i { color: #60a5fa; }
.service-description-text { color: rgba(255,255,255,0.85); }
.service-feature-list { margin-left: 1rem; color: rgba(255,255,255,0.85); }

.page-navigation .nav-button { display: inline-flex; align-items: center; gap: 8px; padding: 0.6rem 1rem; border-radius: 12px; border: 1px solid rgba(226,232,240,0.16); color: rgba(229,236,244,0.92); text-decoration: none; transition: transform .2s ease, background .2s ease; }
.page-navigation .nav-button:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); }

/* Lightbox */
.lightbox-overlay { position: fixed; inset: 0; background: rgba(10,16,28,0.8); display: none; align-items: center; justify-content: center; z-index: 2000; }
.lightbox-overlay.active { display: flex; }
.lightbox-content { position: relative; max-width: 92vw; max-height: 88vh; overflow: hidden; }
.lightbox-img { max-width: 100%; max-height: 88vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.45); cursor: grab; user-select: none; display: block; touch-action: none; }
.lightbox-caption {
  color: #e5ecf4;
  margin-top: 10px;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.88);
  border: none;
  border-radius: 12px;
  min-width: 42px;
  min-height: 42px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 800;
  color: #0d1b2a;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
  opacity: 0.92;
}
.lightbox-close { top: 8px; right: 8px; transform: none; }
/* Place prev/next over the image edges */
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox-prev:hover, .lightbox-next:hover { background: #ffffff; opacity: 1; transform: translateY(-50%) scale(1.05); }

.lightbox-img.dragging { cursor: grabbing; }

@media (max-width: 640px) {
  .lightbox-overlay {
    align-items: center;
    justify-content: center;
    padding: 10px;
  }

  .lightbox-content {
    width: min(100%, 560px);
    max-width: 100%;
    max-height: calc(100vh - 20px);
    padding: 10px 10px 12px;
    border-radius: 14px;
    background: rgba(7, 12, 22, 0.78);
    border: 1px solid rgba(226, 232, 240, 0.14);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "image image"
      "caption caption"
      "nav";
    gap: 10px 8px;
    overflow: hidden;
  }

  .lightbox-img {
    grid-area: image;
    width: 100%;
    max-height: min(58vh, 440px);
    object-fit: contain;
    border-radius: 12px;
  }

  .lightbox-caption {
    grid-area: caption;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.35;
    color: rgba(229, 236, 244, 0.9);
    max-height: 2.7em;
    overflow: hidden;
  }

  .lightbox-prev,
  .lightbox-next,
  .lightbox-close {
    position: static;
    transform: none;
    min-width: 38px;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  }

  .lightbox-prev,
  .lightbox-next {
    align-self: center;
  }

  .lightbox-prev:hover,
  .lightbox-next:hover {
    transform: none;
  }

  .lightbox-prev {
    grid-area: nav;
    justify-self: start;
  }

  .lightbox-next {
    grid-area: nav;
    justify-self: end;
  }

  .lightbox-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
  }

}

@media (max-width: 420px) {
  .lightbox-content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "caption"
      "nav";
    gap: 8px;
  }

  .lightbox-prev,
  .lightbox-next {
    margin-left: 0;
  }

  .lightbox-prev {
    justify-self: start;
  }

  .lightbox-next {
    justify-self: end;
  }

}

/* Feedback form */
.feedback-form { margin-top: 8px; background: #091a2ebe; border: 1px solid rgba(0,0,0,0.06); border-radius: 24px; padding: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.06); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 0.9rem; color: rgba(245,245,244,0.9); }
.form-field input, .form-field textarea { padding: 0.7rem 0.8rem; border-radius: 12px; border: 1px solid rgba(226,232,240,0.16); background: rgba(255,255,255,0.08); color: #ffffff; border-color: #5a5a5a; outline: none; transition: border 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.form-field input::placeholder, .form-field textarea::placeholder { color: rgba(255, 255, 255, 0.6); }
.form-field input:focus, .form-field textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.form-status { margin-top: 8px; color: #8a9db1; min-height: 1.2em; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* Benefits */
.benefits { position: relative; }
.benefits-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.benefit-item { background: rgba(17,24,39,0.6); border: 1px solid rgba(226,232,240,0.08); border-radius: 18px; padding: 1.25rem; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.25); transition: transform 0.25s ease; }
.benefit-item:hover { transform: translateY(-6px); }
.benefit-item i { font-size: 1.4rem; color: #60a5fa; margin-bottom: 0.35rem; }
.benefit-item h4 { margin-bottom: 0.25rem; color: #eaf2ff; }
.benefit-item p { color: rgba(255,255,255,0.82); }

/* Header logo refinement */
.logo a { display: inline-flex; align-items: center; gap: 10px; color: white; text-decoration: none; }
.logo-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg,#2563eb,#0ea5e9); color: #fff; font-size: 0.8rem; font-weight: 800; letter-spacing: 1px; animation: logoSpin 0.6s ease-out; }
.logo-text { font-weight: 800; }

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

@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr; }
  .main-content { padding: 2rem 1.2rem; }
}

footer {
    background-color: #0f172a;
    color: #e5ecf4;
    padding: 3rem 5%;
    animation: slideInFromBottom 0.8s ease-out;
    background: rgba(0, 0, 20, 0.281); /* полупрозрачный слой на всё */
}


.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.footer-brand,
.footer-card {
    background: rgba(17,24,39,0.62);
    border: 1px solid rgba(148,163,184,0.16);
    border-radius: 20px;
    padding: 1.25rem;
    box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}

.footer-brand h4,
.footer-card h4 {
    margin-bottom: 0.9rem;
    font-size: 1.1rem;
    color: #eaf2ff;
}

.footer-brand p,
.footer-card p {
    margin: 0 0 0.8rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(229,236,244,0.88);
    opacity: 1;
    animation: none;
    text-align: left;
    justify-content: flex-start;
}

.footer-brand p:last-child,
.footer-card p:last-child {
    margin-bottom: 0;
}

.footer-card i,
.footer-brand i {
    color: #60a5fa;
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

.contact-info {
    text-align: center;
}

.contact-info h4 { margin-bottom: 1.5rem; font-size: 1.5rem; color: #60a5fa; animation: slideInFromLeft 0.6s ease-out; }

.contact-info p {
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

.contact-info p:nth-child(2) { animation-delay: 0.2s; }
.contact-info p:nth-child(3) { animation-delay: 0.4s; }
.contact-info p:nth-child(4) { animation-delay: 0.6s; }

.contact-info i { color: #60a5fa; transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6); }

.contact-info p:hover i {
    transform: scale(1.2) rotate(360deg);
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes logoSpin {
    from {
        transform: rotateY(180deg);
        opacity: 0;
    }
    to {
        transform: rotateY(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .menu-btn {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        height: 40vh;
        width: 50%;
        max-width: 360px;
        background-color: #0f172a;
        flex-direction: column;
        justify-content: center;
        transform: translateX(110%);
        transition: transform 0.4s ease;
        border-radius: 20px 0 0 20px;
        box-shadow: -12px 0 40px rgba(0,0,0,0.35);
    }
    
    .nav-links.active {
        top: 0;
        transform: translateX(0);
    }
    
    .nav-links li {
        margin: 1.5rem 0;
        text-align: center;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1rem;
    }
}

/* Prevent background scroll when menu is open */
body.menu-open {
  overflow: hidden;
}

/* Optional subtle dimming using backdrop on small screens */
@media (max-width: 768px) {
  body.menu-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1050;
  }
}
@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }
}

/* Mobile performance: avoid fixed background which lags on some devices */
@media (max-width: 768px) {
  body {
    background-attachment: scroll;
    background-size: cover;
  }
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }
}

/* (removed warm palette overrides) */

/* Global responsive typography */
body { font-size: clamp(14px, 1.6vw, 16px); }
h1 { font-size: clamp(1.6rem, 4.2vw, 2.6rem); line-height: 1.25; }
h2 { font-size: clamp(1.3rem, 3.2vw, 2rem); line-height: 1.3; }
h3 { font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.35; }
h4 { font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.4; }
p, li { font-size: clamp(0.95rem, 1.8vw, 1.05rem); line-height: 1.7; }
.btn { font-size: clamp(0.95rem, 1.8vw, 1rem); }
.nav-links a { font-size: clamp(1rem, 1.9vw, 1.05rem); }
.logo-text { font-size: clamp(1rem, 2.2vw, 1.25rem); }
.price-item .price { font-size: clamp(1.2rem, 2.6vw, 1.5rem); }
.card.service-card h3 { font-size: clamp(1.05rem, 2.2vw, 1.35rem); }

/* Light theme (warm neutral) */
.theme-light body {
  color: #000000;
  background-color: #FAF7F2;
  background-image: none;
}
.theme-light body::before {
  background:
      radial-gradient(1100px 800px at 10% 10%, rgba(245, 158, 11, 0.14), transparent 62%),
      radial-gradient(1000px 700px at 90% 20%, rgba(192, 122, 58, 0.12), transparent 62%),
      radial-gradient(900px 600px at 20% 90%, rgba(234, 179, 8, 0.10), transparent 62%),
      linear-gradient(180deg, rgba(250,247,242,1), rgba(244,236,224,1));
}
.theme-light nav { background-color: rgba(255,255,255,0.6); color: #1F1C19; border: 1px solid rgba(0,0,0,0.06); backdrop-filter: blur(12px); }
.theme-light .logo a { color: #1F1C19; }
.theme-light .nav-links a { color: #1F1C19; }
.theme-light .nav-links a::after { background-color: #C07A3A; }
.theme-light .nav-links a:hover { color: #000000; text-shadow: none; }
.theme-light .theme-toggle { background: rgba(0,0,0,0.06); color: #1F1C19; border-color: rgba(0,0,0,0.08); }

.theme-light .hero-bg { filter: blur(26px) saturate(1.05); opacity: 0.85; }
.theme-light .hero-grid { background-image: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px); }

.theme-light .main-content, 
.theme-light .section, 
.theme-light .card.service-card, 
.theme-light .benefit-item {
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(0,0,0,0.06);
  color: #000000;
}
.theme-light .section-title { color: #000000; }
.theme-light .section-subtitle { color: #000000; }
.theme-light .card.service-card h3, 
.theme-light .benefit-item h4 { color: #000000; }
.theme-light .card.service-card p, 
.theme-light .benefit-item p { color: #000000; }

/* Force all text black in light theme (except controlled components) */
.theme-light body, .theme-light body p, .theme-light body li, .theme-light body h1, .theme-light body h2, .theme-light body h3, .theme-light body h4, .theme-light body a { color: #000000; }

/* Buttons */
.theme-light .btn.primary { background: linear-gradient(135deg, #F59E0B, #C07A3A); box-shadow: 0 10px 24px rgba(192,122,58,0.25); color: #ffffff !important; }
.theme-light .btn.ghost { background: rgba(0,0,0,0.06); color: #000000; border-color: rgba(0,0,0,0.12); }

.theme-light .price-tag { background: rgba(245,158,11,0.16); color: #000000; border-color: rgba(192,122,58,0.25); }
.theme-light .page-navigation .nav-button { color: #000000; border-color: rgba(0,0,0,0.12); }

/* Keep button text readable while enforcing black body text */
.theme-light .btn.primary, .theme-light .btn.primary * { color: #ffffff !important; }
.theme-light .icon-wrap, .theme-light .icon-wrap * { color: #ffffff !important; }
.theme-light .gallery-item, .theme-light .gallery-item * { color: inherit; }

/* Icons accents */
.theme-light .icon-wrap.water { background: linear-gradient(135deg, #F59E0B, #C07A3A); box-shadow: 0 10px 24px rgba(192,122,58,0.25); }
.theme-light .icon-wrap.electric { background: linear-gradient(135deg, #EF4444, #F59E0B); box-shadow: 0 10px 24px rgba(245,158,11,0.2); }
.theme-light .icon-wrap.heating { background: linear-gradient(135deg, #F97316, #C07A3A); box-shadow: 0 10px 24px rgba(249,115,22,0.22); }
.theme-light .icon-wrap.vent { background: linear-gradient(135deg, #22C55E, #84CC16); box-shadow: 0 10px 24px rgba(34,197,94,0.22); }

/* Forms */
.theme-light .feedback-form { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.08); }
.theme-light .form-field label { color: #000000; }
.theme-light .form-field input, .theme-light .form-field textarea { color: #000000; }
.theme-light .form-field input::placeholder,
.theme-light .form-field textarea::placeholder { color: #000000; }
.theme-light footer { background: rgba(255,255,255,0.6); color: #000000; }
.theme-light .contact-info h4, .theme-light .contact-info i { color: #000000; }
.theme-light .footer-brand,
.theme-light .footer-card {
  background: rgba(255,255,255,0.78);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 12px 26px rgba(0,0,0,0.08);
}
.theme-light .footer-brand h4,
.theme-light .footer-card h4,
.theme-light .footer-brand p,
.theme-light .footer-card p,
.theme-light .footer-brand a,
.theme-light .footer-card a {
  color: #000000;
}

/* Engineering-style blocks (reused across pages) */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feature-card { padding: 1.25rem; border-radius: 18px; background: rgba(17,24,39,0.6); border: 1px solid rgba(226,232,240,0.08); box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.feature-card h3 { margin-bottom: 0.35rem; }
.feature-card p { opacity: 0.9; }
.theme-light .feature-card { background: rgba(255,255,255,0.68); border-color: rgba(0,0,0,0.06); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.theme-light .feature-card h3, .theme-light .feature-card p { color: #000000; }
.theme-light .service-description-text,
.theme-light .service-feature-list { color: #000000; }
@media (max-width: 1024px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } }

/* Mobile menu panel */
@media (max-width: 768px) {
  .theme-light .nav-links { background-color: rgba(255,255,255,0.9); }
}

/* Light theme: mobile specifics (make sure it wins over generic @media rules) */
@media (max-width: 768px) {
  .theme-light .nav-links {
    background-color: rgba(255,255,255,0.92);
    border-left: 1px solid rgba(0,0,0,0.08);
    box-shadow: -12px 0 40px rgba(0,0,0,0.12);
  }

  .theme-light .nav-links a {
    color: #000000;
    text-shadow: none;
  }

  .theme-light .nav-links a:hover {
    color: #000000;
    text-shadow: none;
  }

  .theme-light .menu-btn span {
    background-color: #000000;
  }

  .theme-light .menu-btn:hover span {
    background-color: #C07A3A;
  }

  .theme-light body.menu-open::before {
    background: rgba(0,0,0,0.18);
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Header cleanup */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    padding-top: 10px;
}

nav {
    width: min(1220px, calc(100% - 24px));
    margin: 0 auto;
    padding: 0.95rem 1.2rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.theme-toggle {
    margin-left: auto;
}

.nav-links {
    align-items: center;
    gap: 1.35rem;
    margin-left: 0;
}

.nav-links li {
    margin-left: 0;
}

@media (max-width: 768px) {
    nav {
        width: calc(100% - 16px);
        padding: 0.85rem 1rem;
    }

    .theme-toggle {
        margin-left: auto;
    }

    .nav-links {
        top: 76px;
        height: auto;
        width: min(82vw, 340px);
        padding: 1.75rem 1.25rem;
        gap: 1rem;
    }
}

/* Home page redesign */
.page-home .hero-home {
    min-height: auto;
    padding: 2rem 1rem 1.5rem;
}

.page-home .hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
    gap: 24px;
    align-items: stretch;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    max-width: 1240px;
}

.page-home .hero-copy {
    text-align: left;
}

.page-home .hero-copy h1,
.page-home .hero-copy p {
    text-align: left;
    opacity: 1;
    animation: none;
}

.page-home .hero-copy h1 {
    max-width: 880px;
    margin-bottom: 1rem;
}

.page-home .hero-copy p {
    margin-left: 0;
}

.page-home .hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.45rem 0.8rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

.page-home .hero-logo {
    width: min(220px, 45vw);
    margin: 0 0 1rem;
}

.page-home .hero-cta {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.page-home .hero-note {
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.74);
    max-width: 760px;
}

.page-home .hero-panel {
    display: grid;
    gap: 14px;
}

.page-home .hero-panel-card,
.page-home .hero-badge,
.page-home .market-card,
.page-home .scope-item,
.page-home .process-step,
.page-home .project-card,
.page-home .faq-item,
.page-home .contact-card,
.page-home .cta-banner {
    background: rgba(17, 24, 39, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

.page-home .hero-panel-card {
    padding: 1.4rem;
}

.page-home .hero-panel-card h2 {
    font-size: clamp(1.25rem, 2.3vw, 1.7rem);
    margin-bottom: 0.8rem;
}

.page-home .panel-label {
    display: inline-flex;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(96, 165, 250, 0.14);
    border: 1px solid rgba(96, 165, 250, 0.26);
    color: #bfdbfe;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}

.page-home .hero-list {
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.page-home .hero-list li {
    position: relative;
    padding-left: 1.25rem;
    color: rgba(255, 255, 255, 0.86);
}

.page-home .hero-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72rem;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #60a5fa, #38bdf8);
    transform: translateY(-50%);
}

.page-home .hero-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.page-home .hero-badge {
    padding: 1rem;
}

.page-home .hero-badge strong {
    display: block;
    margin-bottom: 0.35rem;
    color: #ffffff;
}

.page-home .hero-badge span {
    color: rgba(255, 255, 255, 0.78);
}

.page-home .service-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-home .service-card {
    min-height: 100%;
}

.page-home .service-meta,
.page-home .project-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1rem;
}

.page-home .service-meta span,
.page-home .project-metrics span,
.page-home .market-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.82rem;
    font-weight: 700;
}

.page-home .market-grid,
.page-home .scope-grid,
.page-home .project-grid,
.page-home .faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.page-home .market-card,
.page-home .scope-item,
.page-home .project-card,
.page-home .faq-item {
    padding: 1.35rem;
}

.page-home .market-card h3,
.page-home .scope-item h4,
.page-home .project-card h3,
.page-home .faq-item h3 {
    margin: 0.8rem 0 0.5rem;
}

.page-home .scope-item i {
    font-size: 1.35rem;
    color: #60a5fa;
}

.page-home .process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.page-home .process-step {
    padding: 1.35rem;
    position: relative;
    overflow: hidden;
}

.page-home .process-step::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.12), transparent 54%);
    pointer-events: none;
}

.page-home .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.page-home .cta-banner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto;
    gap: 18px;
    align-items: center;
    padding: 1.6rem;
}

.page-home .cta-banner h2 {
    margin: 0.85rem 0 0.5rem;
}

.page-home .contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    text-align: left;
}

.page-home .contact-card {
    padding: 1.35rem;
}

.page-home .contact-card h4 {
    margin-bottom: 1rem;
}

.page-home .contact-card p {
    justify-content: flex-start;
    opacity: 1;
    animation: none;
}

.page-home footer {
    margin-top: 0.5rem;
}

.theme-light .page-home .hero-kicker,
.theme-light .page-home .service-meta span,
.theme-light .page-home .project-metrics span,
.theme-light .page-home .market-tag {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: #1f2937;
}

.theme-light .page-home .hero-panel-card,
.theme-light .page-home .hero-badge,
.theme-light .page-home .market-card,
.theme-light .page-home .scope-item,
.theme-light .page-home .process-step,
.theme-light .page-home .project-card,
.theme-light .page-home .faq-item,
.theme-light .page-home .contact-card,
.theme-light .page-home .cta-banner {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

.theme-light .page-home .panel-label {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(192, 122, 58, 0.24);
    color: #8a4b11;
}

.theme-light .page-home .hero-list li,
.theme-light .page-home .hero-badge span,
.theme-light .page-home .hero-note {
    color: rgba(17, 24, 39, 0.8);
}

.theme-light .page-home .step-number {
    background: linear-gradient(135deg, #f59e0b, #c07a3a);
}

@media (max-width: 1100px) {
    .page-home .hero-shell,
    .page-home .cta-banner {
        grid-template-columns: 1fr;
    }

    .page-home .service-cards-grid,
    .page-home .process-grid,
    .page-home .contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .page-home .hero-home {
        padding-top: 1rem;
    }

    .page-home .hero-shell {
        gap: 18px;
        padding: 1.2rem;
    }

    .page-home .hero-panel-grid,
    .page-home .market-grid,
    .page-home .scope-grid,
    .page-home .project-grid,
    .page-home .faq-grid,
    .page-home .service-cards-grid,
    .page-home .process-grid,
    .page-home .contact-grid {
        grid-template-columns: 1fr;
    }

    .page-home .hero-copy,
    .page-home .hero-copy h1,
    .page-home .hero-copy p {
        text-align: left;
    }
}

@media (max-width: 560px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}