:root {
  --ink: #13231c;
  --muted: #627068;
  --brand: #195c46;
  --brand-2: #2f7b60;
  --accent: #d9ef8b;
  --cream: #f7f8f3;
  --sand: #edf1e8;
  --white: #ffffff;
  --line: #dfe6dd;
  --shadow: 0 18px 50px rgba(19, 35, 28, .10);
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6
}

a {
  text-decoration: none
}

.navbar {
  transition: .25s ease
}

.navbar-brand {
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--ink) !important
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  margin-right: .55rem;
  box-shadow: 0 8px 18px rgba(25, 92, 70, .23)
}

.nav-link {
  font-weight: 600;
  color: #314139 !important
}

.nav-link:hover,
.nav-link.active {
  color: var(--brand) !important
}

.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
  font-weight: 700;
  border-radius: 14px;
  padding: .8rem 1.2rem
}

.btn-brand:hover {
  background: #124a38;
  border-color: #124a38;
  color: #fff
}

.btn-soft {
  background: #edf4ef;
  color: var(--brand);
  font-weight: 700;
  border-radius: 14px;
  padding: .8rem 1.2rem
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .75rem;
  font-weight: 800;
  color: var(--brand)
}

/* ============================================
   BANNER CAROUSEL (Hero-க்கு முன்னாடி)
   ============================================ */
.banner-carousel .banner-slide {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
}
.banner-carousel .banner-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.15) 100%);
}
.banner-carousel .banner-slide > .container {
    position: relative;
    z-index: 2;
}
.banner-carousel .banner-content {
    max-width: 640px;
    color: #fff;
}
.banner-carousel .banner-content .lead {
    color: rgba(255,255,255,.85);
}
.banner-carousel .banner-title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
}
.banner-carousel .carousel-indicators [data-bs-target] {
    width: 28px;
    height: 4px;
    border-radius: 999px;
}
@media (max-width: 767.98px) {
    .banner-carousel .banner-slide {
        min-height: 420px;
    }
}

.hero {
  padding: 5.5rem 0 4.5rem;
  background: radial-gradient(circle at 85% 15%, rgba(217, 239, 139, .7), transparent 22%), linear-gradient(140deg, #f9fbf6 0%, #eef5ef 100%);
  overflow: hidden
}

.hero h1 {
  font-size: clamp(2.6rem, 6vw, 5.8rem);
  line-height: .95;
  letter-spacing: -.065em;
  font-weight: 850;
  max-width: 900px
}

.hero .lead {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 680px
}

.hero-card {
  border-radius: 28px;
  background: linear-gradient(150deg, #163c31, #1f654e);
  color: #fff;
  padding: 1.5rem;
  box-shadow: var(--shadow);
  min-height: 430px;
  position: relative;
  overflow: hidden
}

.hero-card:before {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: rgba(217, 239, 139, .16);
  right: -80px;
  top: -70px
}

.hero-card:after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  left: -60px;
  bottom: -40px
}

.hero-card .big-icon {
  font-size: 6rem;
  color: var(--accent)
}

.mini-card {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  padding: 1rem;
  backdrop-filter: blur(10px)
}

.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff
}

.trust-item {
  padding: 1rem 0;
  display: flex;
  align-items: center;
  gap: .65rem;
  font-weight: 700;
  color: #425048
}

.section {
  padding: 5rem 0
}

.section-soft {
  background: var(--cream)
}

.section-title {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.045em;
  font-weight: 820
}

.section-copy {
  color: var(--muted);
  font-size: 1.04rem
}

.service-card,
.feature-card,
.review-card,
.area-card,
.form-card {
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  padding: 1.5rem;
  transition: .25s ease
}

.service-card:hover,
.area-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: #c9d8ce
}

.icon-tile {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #e9f2ed;
  color: var(--brand);
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  margin-bottom: 1rem
}

.badge-soft {
  background: #edf4ef;
  color: var(--brand);
  border-radius: 999px;
  padding: .45rem .7rem;
  font-weight: 700;
  font-size: .78rem
}

.process-step {
  padding: 1.4rem;
  border-left: 2px solid #d6e1d9;
  position: relative
}

.process-step:before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand);
  position: absolute;
  left: -8px;
  top: 1.8rem;
  box-shadow: 0 0 0 5px #eef5f0
}

.cta-panel {
  background: linear-gradient(135deg, #173f33, #276f56);
  color: #fff;
  border-radius: 30px;
  padding: clamp(2rem, 5vw, 4rem);
  position: relative;
  overflow: hidden
}

.cta-panel:after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .14;
  right: -90px;
  bottom: -120px
}

.pest-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .7rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #34453c;
  font-weight: 700;
  background: #fff;
  transition: .2s
}

.pest-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px)
}

.stats-number {
  font-size: 2.4rem;
  font-weight: 850;
  letter-spacing: -.05em
}

.page-hero {
  padding: 4rem 0 3rem;
  background: linear-gradient(135deg, #f8faf5, #eef4ef)
}

.breadcrumb-item a {
  color: var(--brand)
}

.content-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 1.6rem;
  background: #fff
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0
}

.check-list li {
  margin: .7rem 0;
  padding-left: 1.8rem;
  position: relative
}

.check-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 900
}

.faq .accordion-item {
  border: 1px solid var(--line);
  border-radius: 16px !important;
  overflow: hidden;
  margin-bottom: .75rem
}

.faq .accordion-button {
  font-weight: 700;
  box-shadow: none !important
}

.form-control,
.form-select {
  border-radius: 13px;
  border-color: #d8e1da;
  padding: .8rem .9rem
}

.form-control:focus,
.form-select:focus {
  border-color: #7ba58f;
  box-shadow: 0 0 0 .2rem rgba(25, 92, 70, .1)
}

footer {
  background: #112a22;
  color: #dce6e0;
  padding: 4rem 0 2rem
}

footer a {
  color: #dce6e0
}

footer a:hover {
  color: var(--accent)
}

.footer-title {
  color: #fff;
  font-weight: 800;
  margin-bottom: 1rem
}

.floating-actions {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  gap: .6rem
}

.float-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  font-size: 1.2rem
}

.float-call {
  background: var(--brand)
}

.float-wa {
  background: #1fa855
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: .65s ease
}

.reveal.show {
  opacity: 1;
  transform: none
}

@media(max-width:991px) {
  .hero {
    padding-top: 3.5rem
  }

  .hero-card {
    min-height: auto
  }

  .section {
    padding: 3.7rem 0
  }
}

@media(max-width:576px) {
  .hero h1 {
    font-size: 2.7rem
  }

  .navbar .btn-brand {
    width: 100%;
    margin-top: .6rem
  }

  .floating-actions {
    right: 12px;
    bottom: 12px
  }

  .float-btn {
    width: 48px;
    height: 48px
  }

  .section {
    padding: 3rem 0
  }
}