/* =========================================================
   Balaji Enterprise — Mosquito Incense Website
   Rebuilt to match the Adobe XD design (1920 x 6813)
   Reference: 1rem = 16px at 1920px width (fluid scaling)
   ========================================================= */

:root{
  --red:#F70E14;
  --red-dark:#d40a10;
  --yellow:#FDD000;
  --blue:#0D55C3;
  --dark:#0A0A0A;
  --dark-2:#0d0d0d;
  --ink:#111111;
  --muted:#343434;
  --muted-2:#575757;
  --line:#e6e6e6;
  --container:102.5rem;      /* 1640px */
  --pad:8.75rem;             /* 140px side margin */
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* Fluid scaling: 1920px -> 16px root, scales down proportionally (faithful desktop) */
html{ font-size: min(calc(100vw / 120), 16px); }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }

.wrap{ width:100%; max-width:var(--container); margin:0 auto; padding:0 1.25rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:1.25rem; font-weight:500; line-height:1;
  padding:.95rem 1.6rem; border-radius:.5rem; cursor:pointer; border:none;
  transition:transform .15s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn--red{ background:var(--red); color:#fff; }
.btn--red:hover{ background:var(--red-dark); }
.btn--ghost{ background:#0e0e0e; color:#fff; border:1px solid rgba(255,255,255,.25); }
.btn--ghost:hover{ background:#000; }
.btn--ghost-light{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.6); }
.btn--ghost-light:hover{ background:rgba(255,255,255,.12); }
.btn--outline{ background:#fff; color:#111; border:1px solid #cfd4db; }
.btn--outline:hover{ background:#f3f4f6; }
.btn__ico{ width:1.9rem; height:1.9rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.btn__ico img{ width:100%; height:100%; object-fit:contain; }

/* ---------- Pills ---------- */
.pill{
  display:inline-block; font-size:1.125rem; font-weight:500; line-height:1;
  padding:.5rem 1.1rem; border-radius:1.5rem; letter-spacing:.2px;
}
.pill--yellow{ background:var(--yellow); color:#111; }
.pill--light{ background:#fff; color:#111; box-shadow:0 2px 10px rgba(0,0,0,.15); }

/* ---------- Section headings ---------- */
.section-head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.section-title{ font-size:2.5rem; font-weight:600; line-height:1.2; color:#111; }
.section-title.white{ color:#fff; }
.section-sub{ font-size:1.25rem; font-weight:500; color:#333; max-width:44rem; }
.red{ color:var(--red); }

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar{ background:#000; color:#fff; }
.topbar__inner{ position:relative; display:flex; align-items:center; height:3.1rem; }
.topbar__follow{ display:flex; align-items:center; gap:.7rem; font-size:1.25rem; font-weight:400; }
.topbar__follow span{ margin-right:.2rem; }
.topbar__follow a{ width:1.55rem; height:1.55rem; display:inline-flex; }
.topbar__follow img{ width:100%; height:100%; object-fit:contain; filter:brightness(0) invert(1); }
.topbar__tag{
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:1.25rem; font-weight:500; letter-spacing:.5px; white-space:nowrap;
}

/* =========================================================
   HEADER
   ========================================================= */
.header{ background:#fff; position:sticky; top:0; z-index:50; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.header__inner{ display:flex; align-items:center; height:5.5rem; gap:1.5rem; position:relative; }
.brand{ display:flex; align-items:center; }
.brand img{ height:4.2rem; width:auto; }
.nav{ display:flex; align-items:center; gap:2.4rem; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.nav>a,.nav__drop-toggle{ font-size:1.25rem; font-weight:500; color:#000; display:inline-flex; align-items:center; gap:.4rem; }
.nav>a:hover,.nav__drop-toggle:hover{ color:var(--red); }
.nav__caret{ width:.85rem; height:.85rem; object-fit:contain; margin-top:2px; }
.nav__dropdown{ position:relative; }
.nav__menu{
  position:absolute; top:130%; left:0; background:#fff; border-radius:.6rem;
  box-shadow:0 12px 34px rgba(0,0,0,.16); padding:.6rem 0; min-width:15rem;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.2s; z-index:60;
}
.nav__dropdown:hover .nav__menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav__menu a{ display:block; padding:.7rem 1.3rem; font-size:1.05rem; font-weight:500; color:#222; }
.nav__menu a:hover{ background:#f6f6f6; color:var(--red); }
.header__cta{ margin-left:auto; }
.hamburger{ display:none; margin-left:auto; background:none; border:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; }
.hamburger span{ width:26px; height:3px; background:#111; border-radius:2px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; background:#140d0a; min-height:54rem; overflow:hidden; }
.hero__slides{ position:absolute; inset:0; }
.hero__slide{ position:absolute; inset:0; display:flex; align-items:center; opacity:0; visibility:hidden; transition:opacity 1.1s ease; z-index:1; }
.hero__slide.is-active{ opacity:1; visibility:visible; z-index:2; }
.hero__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:3.4rem; height:3.4rem; border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff; border:1px solid rgba(255,255,255,.35); font-size:2rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease; backdrop-filter:blur(2px); }
.hero__nav:hover{ background:var(--red); border-color:var(--red); }
.hero__prev{ left:1.4rem; } .hero__next{ right:1.4rem; }
.hero__art{ position:absolute; inset:0; width:100%; }
.hero__art img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 12% 30%, rgba(255,255,255,.045) 0 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg, #100b09 0%, #100b09 26%, rgba(16,11,9,.85) 40%, rgba(16,11,9,.15) 55%, transparent 68%);
  pointer-events:none;
}
.hero__inner{ position:relative; z-index:2; }
.hero__content{ max-width:38rem; padding:2rem 0; }
.hero__title{ font-size:3.75rem; font-weight:700; line-height:1.12; color:#fff; margin:1.4rem 0 1.2rem; }
.hero__sub{ font-size:1.5rem; font-weight:500; color:#f1eae7; line-height:1.5; margin-bottom:2rem; }
.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero__script{
  position:absolute; right:6%; bottom:14%; z-index:2; text-align:center;
  font-family:'Playfair Display',serif; font-style:italic; font-weight:700;
  font-size:2.25rem; line-height:1.15; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.hero__dots{ position:absolute; left:0; right:0; bottom:1.4rem; display:flex; justify-content:center; gap:.7rem; z-index:5; }
.hero__dots button{ width:.75rem; height:.75rem; border-radius:50%; background:rgba(255,255,255,.45); border:none; padding:0; cursor:pointer; transition:width .2s ease, background .2s ease; }
.hero__dots button.active{ background:#fff; width:2rem; border-radius:.4rem; }

/* =========================================================
   FEATURE MARQUEE
   ========================================================= */
.marquee{ background:var(--red); overflow:hidden; }
.marquee__track{ display:flex; align-items:center; gap:2.4rem; padding:1.15rem 0; width:max-content; animation:marquee 26s linear infinite; }
.marquee__item{ font-size:2.375rem; font-weight:700; color:#fff; white-space:nowrap; letter-spacing:.5px; }
.marquee__star{ width:2rem; height:2rem; object-fit:contain; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* =========================================================
   PRODUCTS
   ========================================================= */
.products{ padding:4.5rem 0 5rem; background:#fff; }
.products__viewport{ overflow:hidden; margin-top:3rem; }
.products__track{ display:flex; gap:1.6rem; transition:transform .45s ease; }
.pcard{
  flex:0 0 calc((100% - 4.8rem)/4); background:#fff; border:1px solid #ececec;
  border-radius:1rem; padding:1.1rem; box-shadow:0 8px 24px rgba(0,0,0,.05);
  display:flex; flex-direction:column;
}
.pcard--featured{ box-shadow:0 14px 34px rgba(247,14,20,.16); border-color:#f7d0d1; }
.pcard__img{ border-radius:.7rem; overflow:hidden; aspect-ratio:1/1; background:#f6f6f6; }
.pcard__img img{ width:100%; height:100%; object-fit:cover; }
.pcard__title{ font-size:1.5rem; font-weight:600; color:#111; text-align:center; line-height:1.3; margin:1.2rem .3rem 1.4rem; min-height:3.9rem; }
.pcard__btn{ align-self:center; margin-top:auto; }

/* dots */
.dots{ display:flex; justify-content:center; gap:.7rem; margin-top:2.6rem; }
.dots button{ width:.85rem; height:.85rem; border-radius:50%; border:none; background:#d3d3d3; cursor:pointer; padding:0; }
.dots button.active{ background:var(--red); }

/* =========================================================
   ABOUT
   ========================================================= */
.about{ position:relative; overflow:hidden; padding:5rem 0; }
.about__bg{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(rgba(20,30,10,.55),rgba(20,30,10,.55)), url('../assets/img/bg-green.webp') center/cover;
}
.about__bg::after{ content:""; position:absolute; inset:0; background:url('../assets/img/mosquito-swarm.webp') left center/cover; opacity:.28; mix-blend-mode:screen; }
.about__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.about__card{ position:relative; border-radius:1.1rem; overflow:hidden; aspect-ratio:1672/941; box-shadow:0 20px 50px rgba(0,0,0,.4); border:3px solid var(--red); }
.about__jet{ width:100%; height:100%; object-fit:cover; }
.about__logo{ position:absolute; top:6%; left:5%; width:9rem; height:auto; }
.about__pot{ position:absolute; left:5%; bottom:4%; width:9rem; }
.about__nomosq{ position:absolute; right:6%; top:22%; width:9.5rem; }
.about__content{ color:#fff; }
.about__content .pill{ margin-bottom:1.2rem; }
.about__content .section-title{ margin-bottom:1.6rem; }
.about__text{ font-size:1.125rem; font-weight:500; line-height:1.6; color:#f2f2f2; margin-bottom:1.2rem; max-width:40rem; }
.about__content .btn{ margin-top:1rem; }

/* =========================================================
   CTA BAR
   ========================================================= */
.ctabar{ position:relative; }
.ctabar__inner{
  position:relative; margin:-3.5rem auto 0; border-radius:1.2rem; overflow:hidden;
  background:linear-gradient(90deg, rgba(8,6,5,.94), rgba(20,10,6,.82)), url('../assets/img/jet-dark.webp') right center/cover;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:2.2rem 3rem; z-index:5; box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.ctabar__title{ font-size:2.5rem; font-weight:600; color:#fff; line-height:1.2; }
.ctabar__actions{ display:flex; align-items:center; gap:1.6rem; }
.ctabar__phone{ display:inline-flex; align-items:center; gap:.7rem; background:#fff; color:#111; font-weight:500; font-size:1.25rem; padding:.85rem 1.4rem; border-radius:.5rem; }

/* =========================================================
   WHY US
   ========================================================= */
.whyus{ background:#fff; padding:5rem 0; }
.whyus__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:stretch; }
.whyus__card{ position:relative; background:#060001; border-radius:1.4rem; padding:3rem 3.2rem; color:#fff; overflow:hidden; }
.whyus__nomosq{ position:absolute; top:1.6rem; right:1.8rem; width:6rem; opacity:.9; }
.whyus__card .pill{ margin-bottom:1.4rem; }
.whyus__card .section-title{ margin-bottom:1.4rem; }
.whyus__text{ font-size:1.25rem; font-weight:500; color:#e9e9e9; line-height:1.6; margin-bottom:1.8rem; max-width:34rem; }
.whyus__list{ display:flex; flex-direction:column; gap:1rem; margin-bottom:2rem; }
.whyus__list li{ display:flex; align-items:center; gap:1rem; font-size:1.5rem; font-weight:600; }
.whyus__list img{ width:1.9rem; height:1.9rem; }
.whyus__actions{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.whyus__phone{ display:inline-flex; align-items:center; gap:.7rem; background:#fff; color:#111; font-weight:500; font-size:1.25rem; padding:.85rem 1.4rem; border-radius:.5rem; }
.whyus__media{ display:flex; align-items:center; justify-content:center; }
.whyus__media img{ width:100%; height:auto; border-radius:1rem; }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testi{ position:relative; overflow:hidden; padding:5rem 0 5.5rem; background:#050507; }
.testi__bg{ position:absolute; inset:0; background:#050507 url('../assets/img/smoke-bg.webp') center/cover; opacity:.9; }
.testi__pot{ position:absolute; right:2%; bottom:12%; width:12rem; z-index:1; opacity:.95; }
.testi__inner{ position:relative; z-index:2; }
.testi__viewport{ overflow:hidden; margin-top:3rem; }
.testi__track{ display:flex; gap:1.8rem; transition:transform .45s ease; }
.tcard{
  flex:0 0 calc((100% - 3.6rem)/3); background:#fff; border:2px solid var(--red);
  border-radius:1rem; padding:1.8rem 1.8rem 2.2rem; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.tcard__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.stars{ display:inline-flex; gap:.25rem; }
.stars i{ width:1.3rem; height:1.3rem; background:url('../assets/img/star.webp') center/contain no-repeat; display:inline-block; }
.tcard__verified{ width:1.7rem; height:1.7rem; }
.tcard__quote{ font-size:1.25rem; font-weight:400; color:#111; line-height:1.5; min-height:5.4rem; }
.tcard__name{ font-size:1.25rem; font-weight:600; color:var(--blue); text-align:right; margin-top:1.6rem; }
.testi .dots{ margin-top:2.4rem; }
.testi__cta{ text-align:center; margin-top:3rem; display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.testi__ctatitle{ font-size:2.5rem; font-weight:600; color:#fff; }
.testi__ctaactions{ display:flex; gap:1rem; }

/* =========================================================
   GET IN TOUCH
   ========================================================= */
.getin{ background:#fff; padding:5rem 0; }
.getin__inner{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.getin__map{ border-radius:1rem; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.12); border:1px solid var(--red); }
.getin__map img{ width:100%; height:100%; object-fit:cover; }
.getin__form{ background:#0b0b0b; border-radius:1.2rem; padding:2.6rem 2.8rem; color:#fff; box-shadow:0 16px 40px rgba(0,0,0,.2); border-top:4px solid transparent; position:relative; }
.getin__form::before{ content:""; position:absolute; left:2.8rem; right:2.8rem; top:5.6rem; height:2px; background:linear-gradient(90deg,var(--red),var(--yellow)); border-radius:2px; }
.getin__title{ font-size:2.25rem; font-weight:800; color:#fff; text-align:center; }
.getin__sub{ font-size:1.25rem; font-weight:400; color:#dcdcdc; text-align:center; margin-top:.4rem; margin-bottom:2.2rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.field{ margin-bottom:1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-size:1.125rem; font-weight:500; color:#fff; }
.field input,.field textarea{
  background:#fff; border:none; border-radius:.5rem; padding:.95rem 1.1rem;
  font-size:1.125rem; font-family:inherit; color:#222; width:100%; resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--muted); }
.getin__submit{ width:100%; justify-content:center; margin-top:.8rem; font-size:1.25rem; padding:1.1rem; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ background:#fff; padding:4.5rem 0 5rem; position:relative; }
.faq__list{ max-width:81rem; margin:3rem auto 0; display:flex; flex-direction:column; gap:1.1rem; }
.faq__item{ background:#0b0b0b; border-radius:.7rem; overflow:hidden; }
.faq__q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:inherit; font-size:1.125rem; font-weight:500; color:#fff; padding:1.25rem 1.6rem;
}
.faq__caret{ width:1.1rem; height:1.1rem; object-fit:contain; transition:transform .25s ease; flex-shrink:0; }
.faq__item.is-open .faq__caret{ transform:rotate(180deg); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq__a p{ padding:0 1.6rem 1.3rem; font-size:1.125rem; font-weight:400; color:#d7d7d7; line-height:1.55; }
.faq__item.is-open .faq__a{ max-height:20rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ position:relative; background:#0a0a0a; color:#fff; overflow:hidden; padding-top:4rem; }
.footer__bg{ position:absolute; inset:0; background:linear-gradient(90deg,#0a0a0a 30%, rgba(10,10,10,.4) 70%), url('../assets/img/jet-dark.webp') right center/cover; opacity:.9; }
.footer__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.6fr 1fr 1.3fr 1fr; gap:2.5rem; padding-bottom:3rem; }
.footer__logo{ height:5rem; width:auto; margin-bottom:1.2rem; }
.footer__about p{ font-size:1.125rem; font-weight:400; line-height:1.6; color:#e6e6e6; max-width:24rem; }
.footer__col h4{ font-size:1.875rem; font-weight:600; margin-bottom:1.2rem; }
.footer__col ul li{ margin-bottom:.7rem; font-size:1.25rem; font-weight:400; color:#eaeaea; }
.footer__col ul li a:hover{ color:var(--red); }
.footer__contact li{ line-height:1.5; }
.footer__bottom{ position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.15); padding:1.5rem 0; }
.footer__bottom-inner{ display:flex; align-items:center; justify-content:space-between; font-size:1.25rem; color:#eee; }

/* =========================================================
   FLOATING WHATSAPP
   ========================================================= */
.wa-float{ position:fixed; right:1.8rem; bottom:1.8rem; width:4rem; height:4rem; z-index:80; filter:drop-shadow(0 6px 16px rgba(0,0,0,.3)); transition:transform .2s; }
.wa-float:hover{ transform:scale(1.08); }
.wa-float img{ width:100%; height:100%; }

/* =========================================================
   SUBPAGE HERO (title band on inner pages)
   ========================================================= */
.subhero{ position:relative; background:#0c0806; overflow:hidden; padding:4.4rem 0 4rem; text-align:center; }
.subhero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.05) 0 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, rgba(247,14,20,.16), rgba(12,8,6,0) 55%);
}
.subhero__inner{ position:relative; z-index:2; }
.subhero__title{ font-size:2.75rem; font-weight:600; color:#fff; }
.subhero__crumb{ margin-top:.8rem; font-size:1.125rem; color:#d9d9d9; }
.subhero__crumb a:hover{ color:var(--red); }
.subhero__crumb .sep{ color:var(--red); margin:0 .5rem; }

/* =========================================================
   ABOUT INTRO
   ========================================================= */
.aintro{ background:#fff; padding:4.6rem 0; }
.aintro__inner{ display:grid; grid-template-columns:1fr 1.15fr; gap:3.4rem; align-items:center; }
.aintro__title{ font-size:2.5rem; font-weight:600; color:#111; line-height:1.2; margin:1rem 0 1.6rem; }
.aintro__lead{ font-size:1.25rem; font-weight:600; color:#111; margin-bottom:1.1rem; }
.aintro__text{ font-size:1.125rem; font-weight:500; color:#444; line-height:1.65; margin-bottom:1rem; }
.aintro__text.strong{ font-weight:700; color:#111; }

/* =========================================================
   OUR VALUES
   ========================================================= */
.values{ background:#f7f8f9; padding:5rem 0; }
.values__inner{ display:grid; grid-template-columns:1fr 1fr; gap:3.4rem; align-items:center; }
.values__content .pill{ margin-bottom:1.1rem; }
.values__content .section-title{ text-align:left; margin-bottom:2rem; }
.values__list{ display:flex; flex-direction:column; gap:1.5rem; }
.vitem{ padding-left:1.4rem; border-left:3px solid var(--red); }
.vitem h4{ font-size:1.25rem; font-weight:600; color:#111; margin-bottom:.3rem; }
.vitem p{ font-size:1.125rem; font-weight:500; color:#555; line-height:1.5; }

/* =========================================================
   WHAT MAKES US DIFFERENT
   ========================================================= */
.different{ background:#0a0a0a; padding:5rem 0; position:relative; overflow:hidden; }
.different .section-head{ margin-bottom:3.4rem; }
.different__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.dcard{ text-align:center; padding:1rem; }
.dcard__ico{ width:5.2rem; height:5.2rem; margin:0 auto 1.4rem; display:flex; align-items:center; justify-content:center;
  background:rgba(247,14,20,.12); border:1px solid rgba(247,14,20,.35); border-radius:1rem; }
.dcard__ico img{ width:2.7rem; height:2.7rem; object-fit:contain; }
.dcard h4{ font-size:1.25rem; font-weight:600; color:#fff; margin-bottom:.7rem; }
.dcard p{ font-size:1.125rem; font-weight:500; color:#bdbdbd; line-height:1.55; }

/* =========================================================
   PRODUCTS GRID (List of Products page)
   ========================================================= */
.pgrid{ background:#fff; padding:4.6rem 0 5rem; }
.pgrid__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3.2rem; }

/* =========================================================
   CONTACT INFO CARDS
   ========================================================= */
.cinfo{ background:#fff; padding:4.4rem 0 2rem; }
.cinfo__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.cicard{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.8rem;
  background:#fafafa; border:1px solid #eee; border-radius:1rem; padding:2.4rem 1.6rem;
  box-shadow:0 8px 24px rgba(0,0,0,.05); transition:transform .2s ease, box-shadow .2s ease; }
.cicard:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.1); }
.cicard__ico{ width:4.6rem; height:4.6rem; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:50%; box-shadow:0 6px 18px rgba(0,0,0,.08); }
.cicard__ico img{ width:2.6rem; height:2.6rem; object-fit:contain; }
.cicard h4{ font-size:1.375rem; font-weight:700; color:#343434; }
.cicard p{ font-size:1.5rem; font-weight:500; color:#343434; word-break:break-word; }
.cmap{ background:#fff; padding:1rem 0 5rem; }

/* =========================================================
   FOOTER CTA BAND (inner pages)
   ========================================================= */
.footer-cta{ position:relative; z-index:2; border-bottom:1px solid rgba(255,255,255,.12);
  padding:2.6rem 0; }
.footer-cta__inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.footer-cta__title{ font-size:2.4rem; font-weight:600; color:#fff; line-height:1.2; max-width:40rem; }
.footer-cta__actions{ display:flex; align-items:center; gap:1.4rem; }
.footer-cta__phone{ display:inline-flex; align-items:center; gap:.7rem; background:#fff; color:#111; font-weight:500; font-size:1.25rem; padding:.85rem 1.4rem; border-radius:.5rem; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .footer__inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  html{ font-size:15px; }
  .wrap{ padding:0 20px; }
  :root{ --pad:20px; }

  .topbar__tag{ display:none; }
  .topbar__inner{ justify-content:center; }

  .nav, .header__cta{ display:none; }
  .hamburger{ display:flex; }
  .header__inner{ height:64px; }
  .brand img{ height:44px; }
  .nav.open{
    display:flex; position:absolute; top:64px; left:0; right:0; flex-direction:column; transform:none;
    background:#fff; padding:14px 20px; gap:14px; box-shadow:0 14px 24px rgba(0,0,0,.12); margin:0;
  }
  .nav.open .nav__menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; padding-left:12px; }
  .nav>a,.nav__drop-toggle{ font-size:17px; }

  .hero{ position:relative; min-height:600px; }
  .hero__slide{ display:flex; align-items:center; padding:34px 0 54px; }
  .hero__nav{ display:none; }
  /* Hero image becomes a full-bleed background on mobile */
  .hero__art{ position:absolute; inset:0; width:100%; height:100%; margin:0; border:none; border-radius:0; box-shadow:none; z-index:0; }
  .hero__art img{ width:100%; height:100%; object-fit:cover; object-position:72% center; }
  .hero__overlay{
    display:block; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(8,5,3,.82) 0%, rgba(8,5,3,.62) 40%, rgba(8,5,3,.42) 62%, rgba(6,4,2,.86) 100%);
  }
  .hero__inner{ position:relative; z-index:2; text-align:center; padding:6px 6px; }
  .hero__content{ max-width:100%; padding:0; }
  .hero__title{ font-size:30px; line-height:1.14; margin:14px 0 12px; text-shadow:0 2px 14px rgba(0,0,0,.55); }
  .hero__sub{ font-size:16px; margin-bottom:24px; text-shadow:0 2px 12px rgba(0,0,0,.5); }
  .hero__actions{ gap:12px; flex-direction:column; align-items:center; justify-content:center; }
  .hero__actions .btn{ min-width:240px; justify-content:center; }
  .hero__script{ display:none; }
  .hero__dots{ display:flex; bottom:16px; }

  .marquee__item{ font-size:24px; }
  .marquee__star{ width:18px; height:18px; }

  .section-title{ font-size:28px; }
  .section-sub, .about__text, .whyus__text{ font-size:16px; }

  .pcard{ flex:0 0 78%; }
  .pcard__title{ font-size:19px; min-height:auto; }

  .about__inner{ grid-template-columns:1fr; gap:26px; }
  .ctabar__inner{ flex-direction:column; text-align:center; padding:26px 22px; margin-top:-20px; }
  .ctabar__title{ font-size:24px; }

  .whyus__inner{ grid-template-columns:1fr; gap:26px; }
  .whyus__card{ padding:28px 24px; }
  .whyus__list li{ font-size:19px; }

  .tcard{ flex:0 0 82%; }
  .testi__ctatitle{ font-size:26px; }
  .testi__pot{ display:none; }

  .getin__inner{ grid-template-columns:1fr; gap:24px; }
  .getin__title{ font-size:26px; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .getin__form::before{ display:none; }

  .footer__inner{ grid-template-columns:1fr 1fr; gap:24px 18px; }
  .footer__col h4{ font-size:22px; }
  .footer__col ul li, .footer__about p{ font-size:16px; }
  .footer__bottom-inner{ flex-direction:column; gap:8px; text-align:center; font-size:14px; }
}
@media (max-width:560px){
  .footer__inner{ grid-template-columns:1fr; }
  .pcard{ flex:0 0 86%; }
  .tcard{ flex:0 0 90%; }
  .hero__actions .btn, .testi__ctaactions .btn, .whyus__actions .btn{ font-size:15px; }
}

/* ---------- Responsive: inner-page sections ---------- */
@media (max-width:1000px){
  .different__grid{ grid-template-columns:repeat(2,1fr); gap:2.4rem; }
  .pgrid__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .subhero{ padding:34px 0 30px; }
  .subhero__title{ font-size:30px; }
  .subhero__crumb{ font-size:14px; }
  .aintro{ padding:36px 0; }
  .aintro__inner{ grid-template-columns:1fr; gap:22px; }
  .aintro__title{ font-size:26px; }
  .aintro__lead{ font-size:17px; }
  .aintro__text{ font-size:15px; }
  .values{ padding:38px 0; }
  .values__inner{ grid-template-columns:1fr; gap:26px; }
  .values__content .section-title{ font-size:26px; }
  .vitem h4{ font-size:18px; }
  .vitem p{ font-size:15px; }
  .different{ padding:40px 0; }
  .different__grid{ grid-template-columns:1fr; gap:22px; }
  .dcard{ display:flex; flex-direction:column; }
  .cinfo{ padding:30px 0 6px; }
  .cinfo__grid{ grid-template-columns:1fr; gap:16px; }
  .cicard h4{ font-size:19px; }
  .cicard p{ font-size:18px; }
  .cmap{ padding:12px 0 36px; }
  .pgrid__grid{ grid-template-columns:1fr; gap:18px; }
  .footer-cta__inner{ flex-direction:column; text-align:center; gap:16px; }
  .footer-cta__title{ font-size:24px; }
}
@media (max-width:560px){
  .pgrid__grid, .different__grid{ grid-template-columns:1fr; }
}

/* active nav state */
.nav>a.active,.nav__drop-toggle.active{ color:var(--red); }
.nav>a.active::after{ content:""; display:block; }
.footer.has-cta{ padding-top:0; }
.footer.has-cta .footer__inner{ padding-top:3rem; }
@media (max-width:900px){ .footer.has-cta .footer__inner{ padding-top:24px; } }

/* =========================================================
   PRODUCT DETAIL PAGE (PDP)
   ========================================================= */
.pdp{ background:#fff; padding:4.4rem 0 4rem; }
.pdp__inner{ display:grid; grid-template-columns:1fr 1.05fr; gap:3.6rem; align-items:start; }
.pdp__media{ position:sticky; top:7rem; }
.pdp__imgwrap{ border-radius:1.2rem; overflow:hidden; border:2px solid #ececec; background:#f7f7f7; box-shadow:0 16px 40px rgba(0,0,0,.08); }
.pdp__imgwrap img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; }
.pdp__badges{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
.pdp__badge{ display:inline-flex; align-items:center; gap:.5rem; font-size:1rem; font-weight:600; color:#111;
  background:#fff; border:1px solid #eee; border-radius:2rem; padding:.5rem 1rem; box-shadow:0 4px 12px rgba(0,0,0,.05); }
.pdp__badge img{ width:1.2rem; height:1.2rem; }
.pdp__cat{ margin-bottom:1rem; }
.pdp__title{ font-size:3rem; font-weight:700; color:#111; line-height:1.15; }
.pdp__tag{ font-size:1.375rem; font-weight:600; color:var(--red); margin:.8rem 0 1.4rem; }
.pdp__desc p{ font-size:1.1875rem; font-weight:400; color:#444; line-height:1.7; margin-bottom:1.1rem; }
.pdp__specs{ margin:1.8rem 0; border:1px solid #eee; border-radius:1rem; overflow:hidden; }
.pdp__specs div{ display:grid; grid-template-columns:1fr 1.4fr; gap:1rem; padding:.95rem 1.4rem; font-size:1.125rem; }
.pdp__specs div:nth-child(odd){ background:#fafafa; }
.pdp__specs .k{ font-weight:600; color:#111; }
.pdp__specs .v{ color:#555; }
.pdp__features{ margin:1.8rem 0; display:flex; flex-direction:column; gap:.9rem; }
.pdp__features h3{ font-size:1.5rem; font-weight:600; color:#111; margin-bottom:.4rem; }
.pdp__features li{ display:flex; align-items:flex-start; gap:.8rem; font-size:1.125rem; color:#444; line-height:1.5; }
.pdp__features li img{ width:1.5rem; height:1.5rem; margin-top:.15rem; flex-shrink:0; }
.pdp__actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.pdp__actions .wa-btn{ display:inline-flex; align-items:center; gap:.6rem; background:#25d366; color:#fff; font-weight:600; font-size:1.25rem; padding:.95rem 1.6rem; border-radius:.5rem; }
.pdp__actions .wa-btn img{ width:1.6rem; height:1.6rem; }
.pdp__actions .wa-btn:hover{ background:#1fb757; }

/* related products */
.related{ background:#f7f8f9; padding:4rem 0 5rem; }
.related__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.8rem; margin-top:2.6rem; }

@media (max-width:1000px){ .related__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .pdp{ padding:30px 0; }
  .pdp__inner{ grid-template-columns:1fr; gap:24px; }
  .pdp__media{ position:static; }
  .pdp__title{ font-size:28px; }
  .pdp__tag{ font-size:18px; }
  .pdp__desc p{ font-size:16px; }
  .pdp__specs div{ font-size:15px; }
  .related__grid{ grid-template-columns:1fr; }
}
.pcard__img{ display:block; }
.pcard__title a:hover{ color:var(--red); }

/* Live map iframe (with static map fallback background) */
.getin__map{ position:relative; min-height:30rem; background:#e9eef2 url('../assets/img/map.webp') center/cover no-repeat; }
.getin__map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
@media (max-width:900px){ .getin__map{ min-height:300px; } }

/* Top-bar social icons as inline SVG (crisp, consistent white) */
.topbar__follow a{ color:#fff; }
.topbar__follow svg{ width:100%; height:100%; display:block; fill:currentColor; }

/* Contact form status message + honeypot */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }
.form-msg{ margin-top:1rem; font-size:1.05rem; font-weight:500; line-height:1.4; min-height:1px; }
.form-msg.ok{ color:#7CF29B; }
.form-msg.err{ color:#FF8A8A; }
@media (max-width:900px){ .form-msg{ font-size:14px; } }

/* SEO content section */
.seo{ background:#fff; padding:4.5rem 0 3.5rem; }
.seo__body{ max-width:62rem; margin:1.8rem auto 0; text-align:center; }
.seo__body p{ font-size:1.25rem; font-weight:400; color:#444; line-height:1.75; margin-bottom:1.2rem; }
.seo__body strong{ color:#111; font-weight:600; }
@media (max-width:900px){ .seo{ padding:34px 0 20px; } .seo__body p{ font-size:16px; } }

/* ===== nav room for extra items ===== */
.nav{ gap:2rem; }

/* ===== split (image + text) section ===== */
.split{ background:#fff; padding:4.6rem 0; }
.split__inner{ display:grid; grid-template-columns:1fr 1fr; gap:3.4rem; align-items:center; }
.split__img img{ width:100%; border-radius:1.1rem; box-shadow:0 16px 40px rgba(0,0,0,.1); }
.split__body .pill{ margin-bottom:1.1rem; }
.split__body .section-title{ text-align:left; margin-bottom:1.6rem; }

/* ===== process steps ===== */
.steps{ background:#f7f8f9; padding:4.6rem 0; }
.steps__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.8rem; margin-top:2.8rem; }
.step{ text-align:center; padding:1rem; }
.step__n{ width:3.6rem; height:3.6rem; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.5rem; margin:0 auto 1.1rem; }
.step h4{ font-size:1.25rem; font-weight:600; color:#111; margin-bottom:.5rem; }
.step p{ font-size:1.1rem; font-weight:400; color:#555; line-height:1.55; }

@media (max-width:1000px){ .steps__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .split{ padding:34px 0; } .split__inner{ grid-template-columns:1fr; gap:24px; }
  .split__body .section-title{ font-size:26px; }
  .steps{ padding:34px 0; }
}
@media (max-width:560px){ .steps__grid{ grid-template-columns:1fr; } }
.cicard__ico--brand{ background:#111; }
.cicard__ico--brand img{ filter:none; }

/* in-content contextual links */
.seo__body a, .aintro__right a{ color:var(--red); font-weight:600; text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:.06em; }
.seo__body a:hover, .aintro__right a:hover{ color:var(--red-dark); }