/* Viyuha Infrabuild — layout & polish (load after page <style> blocks) */
/* Single source of truth: navy + accent + neutrals only */
:root {
  --primary: #0f2744;
  --accent: #2d89c1;
  --primary-navy: #0f2744;
  --accent-teal: #2d89c1;
  --hover-teal: #1a6c9b;
  --bg-light: #f4f7f9;
  --text-dark: #1a1a1a;
  --text-gray: #6b7280;
  --white: #ffffff;
  --border-gray: #e5e7eb;
}

html {
  scroll-padding-top: 88px;
}

@media (max-width: 991px) {
  html {
    scroll-padding-top: 72px;
  }
}

.page-wrapper {
  overflow-x: hidden;
}

/* Alternate section background (home projects band) */
.bg-light {
  background-color: var(--bg-light, #f4f7f9) !important;
}

/* ----- Hero (home) ----- */
.static-hero {
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.38);
}
.static-hero h1 {
  letter-spacing: 0.035em;
  line-height: 1.12;
}
.static-hero p {
  line-height: 1.65;
}

/* ----- Inner page banners ----- */
.vi-page-banner {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.vi-page-banner h1,
.vi-page-banner h2 {
  letter-spacing: 0.03em;
  line-height: 1.15;
}

/* ----- Trust strip ----- */
.trust-strip {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.trust-item {
  border-radius: 10px;
  transition: background 0.2s ease, transform 0.2s ease;
  padding: 14px 12px;
}
@media (hover: hover) {
  .trust-item:hover {
    background: rgba(45, 137, 193, 0.07);
    transform: translateY(-2px);
  }
}

/* ----- Cards ----- */
.service-card,
.project-card {
  border-radius: 10px;
  border-color: rgba(15, 39, 68, 0.09);
  box-shadow: 0 2px 10px rgba(15, 39, 68, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.service-card:hover,
.project-card:hover {
  box-shadow: 0 16px 40px rgba(15, 39, 68, 0.11);
  transform: translateY(-4px);
  border-color: rgba(45, 137, 193, 0.2);
}
.project-card img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.project-card:hover img {
  transform: scale(1.04);
}

.inquiry-form {
  border-radius: 10px;
  box-shadow: 0 4px 28px rgba(15, 39, 68, 0.09) !important;
}

.section-title-clean h2 {
  letter-spacing: 0.045em;
  line-height: 1.22;
}

/* ----- Buttons ----- */
.btn-primary-custom,
.btn-secondary-custom {
  border-radius: 8px;
  letter-spacing: 0.055em;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}
.btn-primary-custom:hover,
.btn-secondary-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}
.btn-primary-custom:active,
.btn-secondary-custom:active {
  transform: translateY(0);
}

/* ----- Header strip ----- */
.main-menu-area {
  transition: box-shadow 0.2s ease;
}

/* ----- Desktop navigation ----- */
@media (min-width: 992px) {
  .main-menu .navigation > li > a {
    border-radius: 6px;
  }
  .main-menu-area {
    box-shadow: 0 1px 0 rgba(15, 39, 68, 0.08);
  }
  .main-menu .navigation > li.dropdown > ul {
    border-radius: 0 0 10px 10px;
    overflow: hidden;
  }
  .main-menu .navigation li.phone-link-li a {
    border-radius: 8px !important;
  }
}

/* ----- Tablet & mobile ----- */
@media (max-width: 991px) {
  .navbar-toggle {
    animation: none !important;
    box-shadow: 0 2px 12px rgba(45, 137, 193, 0.2);
  }
  .main-menu .navbar-collapse > .navigation > li > a,
  .main-menu .navbar-collapse > .navigation > li > ul > li > a {
    min-height: 48px;
    display: flex !important;
    align-items: center;
  }
  .navbar-collapse.collapse.in {
    padding-bottom: 16px !important;
    border-radius: 0 0 12px 12px;
  }
  .section-padding {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .section-title-clean {
    margin-bottom: 40px !important;
  }
  .static-hero {
    padding-top: 72px !important;
    padding-bottom: 64px !important;
  }
  .static-hero h1 {
    font-size: clamp(1.45rem, 5.5vw, 2rem) !important;
  }
  .vi-page-banner {
    padding-top: 56px !important;
    padding-bottom: 48px !important;
  }
}

@media (max-width: 575px) {
  .trust-item {
    background: rgba(248, 250, 252, 0.98);
    margin-bottom: 10px;
    border: 1px solid rgba(15, 39, 68, 0.06);
  }
  .btn-group-hero {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    gap: 14px !important;
  }
  .btn-primary-custom,
  .btn-secondary-custom {
    width: 100%;
    justify-content: center;
  }
  .feature-box {
    padding-left: 8px;
    padding-right: 8px;
  }
  .why-us-section .section-title-clean h2 {
    font-size: clamp(1.25rem, 5vw, 1.65rem) !important;
  }
}

/* ----- Forms ----- */
.form-control:focus {
  border-color: var(--accent-teal, #2d89c1) !important;
  box-shadow: 0 0 0 3px rgba(45, 137, 193, 0.2) !important;
  outline: none !important;
}

/* ----- Bottom sticky bar (notched phones) ----- */
.mobile-sticky-nav {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/*
  Color system (max 3 hues + neutrals):
  - Brand navy: var(--primary-navy) #0f2744 — header bar text, mobile drawer, footer bg, primary text on light
  - Brand accent: var(--accent-teal) #2d89c1 — buttons, links, hovers, focus rings
  - Neutrals: var(--bg-light), var(--text-gray), var(--border-gray), #fff
  Primary button: .btn-primary-custom (accent fill). Secondary: .btn-secondary-custom (outline on dark).
*/