/* ========================================



   CCTV Barrackpore — Design System



   Theme: Industrial Security / Urban Edge



   ======================================== */







@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Saira:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');







:root {



  /* Core Palette */



  --ink: #0a0c0f;



  --carbon: #141820;



  --steel: #1e2430;



  --slate: #2c3445;



  --smoke: #8a95a8;



  --ghost: #c8d0dc;



  --white: #f0f4fa;







  /* Accent — Electric Orange (security/alarm feel) */



  --fire: #ff4d00;



  --fire-soft: #ff6b2b;



  --fire-glow: rgba(255, 77, 0, 0.15);







  /* Secondary accent — Cyan (tech/camera feel) */



  --cyan: #00c8e8;



  --cyan-dim: rgba(0, 200, 232, 0.1);







  /* Green — live/operational */



  --live: #22c55e;







  /* Typography */



  --font-display: 'Rajdhani', sans-serif;



  --font-body: 'Saira', sans-serif;



  --font-mono: 'JetBrains Mono', monospace;







  /* Spacing */



  --gap: 1.5rem;



  --section: 5rem;



  --max: 1400px;







  /* Effects */



  --shadow-hot: 0 0 30px rgba(255, 77, 0, 0.25), 0 4px 20px rgba(0, 0, 0, 0.4);



  --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.4);



  --border: 1px solid rgba(200, 208, 220, 0.08);



}







/* ============================



   RESET & BASE



   ============================ */







*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}







html {

  scroll-behavior: smooth;

  font-size: 16px;

}







body {



  background: var(--ink);



  color: var(--ghost);



  font-family: var(--font-body);



  font-weight: 400;



  line-height: 1.7;



  overflow-x: hidden;



}







img {

  max-width: 100%;

  display: block;

}



a {

  color: inherit;

  text-decoration: none;

}



ul {

  list-style: none;

}







/* ============================



   TYPOGRAPHY



   ============================ */







h1,

h2,

h3,

h4 {



  font-family: var(--font-display);



  font-weight: 700;



  line-height: 1.15;



  color: var(--white);



  letter-spacing: 0.02em;



}







h1 {

  font-size: clamp(2.2rem, 5vw, 3.8rem);

}



h2 {

  font-size: clamp(1.8rem, 3.5vw, 2.6rem);

}



h3 {

  font-size: clamp(1.2rem, 2.5vw, 1.6rem);

}



h4 {

  font-size: 1.1rem;

}







p {

  font-size: 1rem;

  color: var(--smoke);

  line-height: 1.8;

}







.section-label {



  font-family: var(--font-mono);



  font-size: 0.7rem;



  letter-spacing: 0.2em;



  text-transform: uppercase;



  color: var(--fire);



  margin-bottom: 0.6rem;



  display: flex;



  align-items: center;



  gap: 0.5rem;



}



.section-label::before {



  content: '';



  display: inline-block;



  width: 24px;

  height: 2px;



  background: var(--fire);



}







/* ============================



   LAYOUT UTILITIES



   ============================ */







.container {



  max-width: var(--max);



  margin: 0 auto;



  padding: 0 1.5rem;



}







.section {

  padding: var(--section) 0;

}



.section-sm {

  padding: 3rem 0;

}







.grid-2 {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: var(--gap);

}



.grid-3 {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

  gap: var(--gap);

}



.grid-4 {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: var(--gap);

}







.text-center {

  text-align: center;

}



.text-fire {

  color: var(--fire);

}



.text-cyan {

  color: var(--cyan);

}









.hero {



  min-height: 100vh;



  display: grid;



  grid-template-columns: 1fr 1fr;



  align-items: center;



  gap: 3rem;



  padding-top: 80px;



  position: relative;



  overflow: hidden;



}







.hero::before {



  content: '';



  position: absolute;



  inset: 0;



  background:



    radial-gradient(ellipse 60% 60% at 70% 50%, rgba(255, 77, 0, 0.06) 0%, transparent 70%),



    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(0, 200, 232, 0.04) 0%, transparent 60%);



  pointer-events: none;



}







/* Grid overlay */



.hero::after {



  content: '';



  position: absolute;



  inset: 0;



  background-image:



    linear-gradient(rgba(255, 77, 0, 0.03) 1px, transparent 1px),



    linear-gradient(90deg, rgba(255, 77, 0, 0.03) 1px, transparent 1px);



  background-size: 60px 60px;



  pointer-events: none;



}







.hero-content {



  position: relative;



  z-index: 2;



  padding: 3rem 0;



}







.hero-badge {



  display: inline-flex;



  align-items: center;



  gap: 0.5rem;



  background: var(--fire-glow);



  border: 1px solid rgba(255, 77, 0, 0.3);



  border-radius: 20px;



  padding: 0.3rem 0.9rem;



  font-family: var(--font-mono);



  font-size: 0.7rem;



  letter-spacing: 0.15em;



  color: var(--fire);



  text-transform: uppercase;



  margin-bottom: 1.5rem;



}



.hero-badge .dot {



  width: 6px;

  height: 6px;



  border-radius: 50%;



  background: var(--live);



  animation: pulse-dot 1.5s ease-in-out infinite;



}



@keyframes pulse-dot {



  0%,

  100% {

    opacity: 1;

    transform: scale(1);

  }



  50% {

    opacity: 0.5;

    transform: scale(1.4);

  }



}







.hero h1 {

  margin-bottom: 1.5rem;

}



.hero h1 em {



  font-style: normal;



  color: var(--fire);



  position: relative;



}







.hero-desc {



  font-size: 1.1rem;



  margin-bottom: 2rem;



  max-width: 480px;



}







.hero-actions {



  display: flex;



  gap: 1rem;



  flex-wrap: wrap;



  margin-bottom: 2.5rem;



}







.btn-primary {



  display: inline-flex;



  align-items: center;



  gap: 0.5rem;



  background: var(--fire);



  color: white;



  font-family: var(--font-display);



  font-weight: 700;



  font-size: 1.05rem;



  letter-spacing: 0.05em;



  padding: 0.85rem 2rem;



  border-radius: 6px;



  transition: all 0.25s;



  box-shadow: 0 0 20px rgba(255, 77, 0, 0.35);



  border: none;



  cursor: pointer;



  text-transform: uppercase;



}



.btn-primary:hover {

  background: var(--fire-soft);

  box-shadow: var(--shadow-hot);

  transform: translateY(-2px);

}







.btn-secondary {



  display: inline-flex;



  align-items: center;



  gap: 0.5rem;



  background: transparent;



  color: var(--white);



  font-family: var(--font-display);



  font-weight: 600;



  font-size: 1.05rem;



  letter-spacing: 0.05em;



  padding: 0.85rem 2rem;



  border-radius: 6px;



  border: 1px solid rgba(200, 208, 220, 0.2);



  transition: all 0.25s;



  cursor: pointer;



  text-transform: uppercase;



}



.btn-secondary:hover {

  border-color: var(--cyan);

  color: var(--cyan);

  background: var(--cyan-dim);

}







.hero-trust {



  display: flex;



  gap: 2rem;



  flex-wrap: wrap;



}



.trust-item {



  font-family: var(--font-display);



  font-size: 0.85rem;



  letter-spacing: 0.05em;



  color: var(--smoke);



  display: flex;



  align-items: center;



  gap: 0.4rem;



}



.trust-item .icon {

  color: var(--fire);

  font-size: 1rem;

}







/* Hero right — CCTV visual panel */



.hero-visual {



  position: relative;



  z-index: 2;



  display: flex;



  align-items: center;



  justify-content: center;



}







.camera-display {



  position: relative;



  width: 100%;



  max-width: 500px;



  aspect-ratio: 4/3;



  background: var(--carbon);



  border: 1px solid rgba(255, 77, 0, 0.2);



  border-radius: 12px;



  overflow: hidden;



  box-shadow: var(--shadow-hot);



}







.cam-grid {



  display: grid;



  grid-template-columns: 1fr 1fr;



  grid-template-rows: 1fr 1fr;



  gap: 2px;



  width: 100%;

  height: 100%;



  padding: 2px;



}







.cam-feed {



  position: relative;



  background: var(--steel);



  border-radius: 4px;



  overflow: hidden;



  display: flex;



  align-items: center;



  justify-content: center;



}







.cam-feed svg {

  opacity: 0.2;

}







.cam-label {



  position: absolute;



  bottom: 4px;

  left: 6px;



  font-family: var(--font-mono);



  font-size: 0.6rem;



  color: var(--live);



  letter-spacing: 0.1em;



}







.cam-rec {



  position: absolute;



  top: 6px;

  right: 6px;



  width: 7px;

  height: 7px;



  border-radius: 50%;



  background: var(--fire);



  animation: pulse-dot 2s ease-in-out infinite;



}







.cam-overlay {



  position: absolute;



  inset: 0;



  background: repeating-linear-gradient(0deg,



      transparent,



      transparent 3px,



      rgba(0, 0, 0, 0.03) 3px,



      rgba(0, 0, 0, 0.03) 4px);



  pointer-events: none;



}







.dvr-strip {



  position: absolute;



  bottom: 0;

  left: 0;

  right: 0;



  background: rgba(0, 0, 0, 0.85);



  padding: 0.4rem 0.8rem;



  display: flex;



  align-items: center;



  justify-content: space-between;



  font-family: var(--font-mono);



  font-size: 0.65rem;



  color: var(--live);



  letter-spacing: 0.1em;



}







.hero-image img {



  width: 100%;



  max-width: 520px;



  height: auto;



  border-radius: 12px;



  box-shadow: var(--shadow-hot);



}



/* Hero Responsive Fix */

.hero {

  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);

}



.hero-content,

.hero-image {

  position: relative;

  z-index: 2;

  min-width: 0;

}



.hero-image {

  display: flex;

  align-items: center;

  justify-content: center;

}



.hero-image img {

  width: 100%;

  max-width: 520px;

  height: auto;

  display: block;

  border-radius: 12px;

  box-shadow: var(--shadow-hot);

}



.hero-trust-oneline {

  align-items: center;

  gap: 0.65rem;

  flex-wrap: wrap;

}



.trust-sep {

  color: var(--slate);

}



/* Tablet */

@media (max-width: 991px) {

  .hero {

    min-height: auto;

    grid-template-columns: 1fr;

    gap: 2.5rem;

    padding-top: 120px;

    padding-bottom: 4rem;

  }



  .hero-content {

    padding: 2rem 0 0;

  }



  .hero-desc {

    max-width: 100%;

  }



  .hero-image {

    justify-content: flex-start;

  }



  .hero-image img {

    max-width: 620px;

  }

}



/* Mobile */

@media (max-width: 575px) {

  .hero {

    padding-top: 105px;

    padding-bottom: 3rem;

    gap: 2rem;

  }



  .hero-badge {

    font-size: 0.62rem;

    letter-spacing: 0.08em;

    padding: 0.3rem 0.75rem;

    line-height: 1.4;

  }



  .hero h1 {

    font-size: 2.35rem;

    line-height: 1.08;

    margin-bottom: 1.25rem;

  }



  .hero-desc {

    font-size: 0.98rem;

    line-height: 1.65;

    margin-bottom: 1.5rem;

  }



  .hero-actions {

    flex-direction: column;

    gap: 0.85rem;

    margin-bottom: 1.75rem;

  }



  .hero-actions a {

    width: 100%;

    justify-content: center;

    text-align: center;

  }



  .hero-trust-oneline {

    gap: 0.6rem;

  }



  .trust-item {

    font-size: 0.78rem;

  }



  .trust-sep {

    display: none;

  }



  .hero-image img {

    border-radius: 10px;

  }

}



/* Very Small Mobile */

@media (max-width: 380px) {

  .hero h1 {

    font-size: 2rem;

  }



  .btn-primary,

  .btn-secondary {

    font-size: 0.9rem;

    padding: 0.8rem 1.2rem;

  }

}







/* ============================



   FLOATING CTA BAR



   ============================ */







.float-cta {
  background: linear-gradient(135deg, var(--fire) 0%, #cc3d00 100%);
  padding: 1.25rem 0;
  position: relative;
  overflow: hidden;
}
.float-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -10%;
  width: 30%;
  height: 200%;
  background: rgba(255, 255, 255, 0.07);
  transform: skewX(-20deg);
}

.float-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.float-cta-text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: white;
  letter-spacing: 0.03em;
}

.float-cta-sub {
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.85;

}

.float-cta-phone {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 500;
  color: white;
  letter-spacing: 0.05em;
}

.btn-white {
  background: white;
  color: var(--fire);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.75rem;
  border-radius: 5px;
  transition: all 0.2s;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-white:hover {
  background: #fff5f0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}


/* ============================



   LEAD FORM



   ============================ */







.lead-form-section {



  background: var(--carbon);



  border-top: 1px solid var(--border);



  border-bottom: 1px solid var(--border);



}







.form-card {



  background: var(--steel);



  border: 1px solid rgba(255, 77, 0, 0.15);



  border-radius: 16px;



  padding: 2.5rem;



  position: relative;



  overflow: hidden;



}



.form-card::before {



  content: '';



  position: absolute;



  top: 0;

  left: 0;

  right: 0;



  height: 3px;



  background: linear-gradient(90deg, var(--fire), var(--cyan));



}







.form-title {



  font-size: 1.6rem;



  margin-bottom: 0.3rem;



}



.form-subtitle {

  font-size: 0.9rem;

  margin-bottom: 1.5rem;

}







.form-grid {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 1rem;



  margin-bottom: 1rem;



}







.form-field {



  display: flex;



  flex-direction: column;



  gap: 0.4rem;



}



.form-field.full {

  grid-column: 1 / -1;

}







.form-field label {



  font-family: var(--font-mono);



  font-size: 0.7rem;



  letter-spacing: 0.12em;



  text-transform: uppercase;



  color: var(--smoke);



}







.form-field input,



.form-field select,



.form-field textarea {



  background: var(--slate);



  border: 1px solid rgba(200, 208, 220, 0.1);



  border-radius: 6px;



  padding: 0.7rem 1rem;



  color: var(--white);



  font-family: var(--font-body);



  font-size: 0.95rem;



  transition: border-color 0.2s;



  outline: none;



  width: 100%;



}



.form-field input::placeholder {

  color: var(--smoke);

}



.form-field input:focus,



.form-field select:focus {

  border-color: var(--fire);

  box-shadow: 0 0 0 3px rgba(255, 77, 0, 0.1);

}







.form-field select {



  cursor: pointer;



  appearance: none;



  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a95a8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");



  background-repeat: no-repeat;



  background-position: right 1rem center;



  padding-right: 2.5rem;



}



.form-field select option {

  background: var(--slate);

}







.form-submit {



  width: 100%;



  background: var(--fire);



  color: white;



  border: none;



  font-family: var(--font-display);



  font-weight: 700;



  font-size: 1.1rem;



  letter-spacing: 0.08em;



  text-transform: uppercase;



  padding: 1rem;



  border-radius: 6px;



  cursor: pointer;



  transition: all 0.25s;



  box-shadow: 0 0 20px rgba(255, 77, 0, 0.3);



}



.form-submit:hover {

  background: var(--fire-soft);

  box-shadow: var(--shadow-hot);

  transform: translateY(-2px);

}







.form-note {



  font-size: 0.78rem;



  color: var(--smoke);



  text-align: center;



  margin-top: 0.75rem;



}







/* ============================



   SERVICES



   ============================ */







.service-card {



  background: var(--carbon);



  border: 1px solid var(--border);



  border-radius: 12px;



  padding: 1.75rem;



  transition: all 0.3s;



  position: relative;



  overflow: hidden;



}



.service-card::before {



  content: '';



  position: absolute;



  bottom: 0;

  left: 0;

  right: 0;



  height: 2px;



  background: var(--fire);



  transform: scaleX(0);



  transition: transform 0.3s;



  transform-origin: left;



}



.service-card:hover {

  border-color: rgba(255, 77, 0, 0.25);

  transform: translateY(-4px);

  box-shadow: var(--shadow-card);

}



.service-card:hover::before {

  transform: scaleX(1);

}







.service-icon {



  width: 52px;

  height: 52px;



  background: var(--fire-glow);



  border: 1px solid rgba(255, 77, 0, 0.25);



  border-radius: 10px;



  display: flex;

  align-items: center;

  justify-content: center;



  font-size: 1.4rem;



  margin-bottom: 1.25rem;



}







.service-card h3 {

  font-size: 1.2rem;

  margin-bottom: 0.5rem;

}



.service-card p {

  font-size: 0.9rem;

}







.service-card .price-hint {



  font-family: var(--font-mono);



  font-size: 0.8rem;



  color: var(--fire);



  margin-top: 1rem;



  padding-top: 1rem;



  border-top: 1px solid var(--border);



}







/* ============================



   PACKAGES



   ============================ */







.packages-section {



  background: var(--carbon);



}







.package-grid {



  display: grid;



  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));



  gap: 1.25rem;



  margin-top: 2.5rem;



}







.package-card {



  background: var(--steel);



  border: 1px solid var(--border);



  border-radius: 12px;



  padding: 2rem 1.5rem;



  text-align: center;



  transition: all 0.3s;



  position: relative;



}



.package-card.featured {



  border-color: var(--fire);



  box-shadow: 0 0 30px rgba(255, 77, 0, 0.15);



}



.package-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-card);

}







.pkg-badge {



  position: absolute;



  top: -12px;

  left: 50%;

  transform: translateX(-50%);



  background: var(--fire);



  color: white;



  font-family: var(--font-mono);



  font-size: 0.65rem;



  letter-spacing: 0.1em;



  text-transform: uppercase;



  padding: 0.2rem 0.9rem;



  border-radius: 20px;



  white-space: nowrap;



}







.pkg-cams {



  font-family: var(--font-display);



  font-size: 3rem;



  font-weight: 700;



  color: var(--fire);



  line-height: 1;



  margin-bottom: 0.2rem;



}



.pkg-label {



  font-size: 0.8rem;



  color: var(--smoke);



  margin-bottom: 1.25rem;



  font-family: var(--font-mono);



  letter-spacing: 0.1em;



}







.pkg-price {



  font-family: var(--font-display);



  font-size: 1.8rem;



  font-weight: 700;



  color: var(--white);



  margin-bottom: 1.25rem;



}



.pkg-price span {

  font-size: 1rem;

  color: var(--smoke);

  font-weight: 400;

}







.pkg-features {



  text-align: left;



  margin-bottom: 1.5rem;



  display: flex;



  flex-direction: column;



  gap: 0.5rem;



}



.pkg-feat {



  font-size: 0.85rem;



  color: var(--smoke);



  display: flex;



  align-items: flex-start;



  gap: 0.5rem;



}



.pkg-feat::before {



  content: '✓';



  color: var(--live);



  flex-shrink: 0;



  font-weight: 700;



}







.btn-pkg {



  width: 100%;



  background: var(--slate);



  color: var(--white);



  border: 1px solid var(--border);



  font-family: var(--font-display);



  font-weight: 600;



  font-size: 0.95rem;



  letter-spacing: 0.05em;



  padding: 0.75rem;



  border-radius: 6px;



  cursor: pointer;



  transition: all 0.2s;



  text-transform: uppercase;



}



.pkg-featured .btn-pkg {



  background: var(--fire);



  border-color: var(--fire);



  box-shadow: 0 0 15px rgba(255, 77, 0, 0.3);



}



.btn-pkg:hover {

  background: var(--fire);

  border-color: var(--fire);

  color: white;

  transform: translateY(-1px);

}







/* ============================



   AREAS



   ============================ */







.areas-grid {



  display: grid;



  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));



  gap: 1rem;



  margin-top: 2rem;



}







.area-tag {



  background: var(--steel);



  border: 1px solid var(--border);



  border-radius: 8px;



  padding: 1rem;



  text-align: center;



  font-family: var(--font-display);



  font-size: 1rem;



  font-weight: 600;



  color: var(--ghost);



  transition: all 0.2s;



  cursor: pointer;



}



.area-tag:hover {

  border-color: rgba(255, 77, 0, 0.3);

  color: var(--fire);

  background: var(--fire-glow);

}



.area-tag.primary {

  border-color: rgba(255, 77, 0, 0.3);

  color: var(--fire);

}



.area-tag .sub {



  display: block;



  font-size: 0.7rem;



  color: var(--smoke);



  font-weight: 400;



  margin-top: 0.2rem;



  font-family: var(--font-body);



}







/* ============================



   BRANDS



   ============================ */







.brands-strip {



  background: var(--carbon);



  border-top: var(--border);



  border-bottom: var(--border);



  padding: 2rem 0;



}







.brand-list {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 2.5rem;



  flex-wrap: wrap;



}







.brand-item {



  font-family: var(--font-display);



  font-weight: 700;



  font-size: 1rem;



  letter-spacing: 0.08em;



  color: var(--smoke);



  padding: 0.5rem 1rem;



  border: 1px solid var(--border);



  border-radius: 6px;



  transition: all 0.2s;



}



.brand-item:hover {

  color: var(--white);

  border-color: rgba(200, 208, 220, 0.2);

}







/* ============================



   WHY US / STATS



   ============================ */







.stats-grid {



  display: grid;



  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));



  gap: 1rem;



  margin-top: 2.5rem;



}







.stat-card {



  background: var(--carbon);



  border: 1px solid var(--border);



  border-radius: 12px;



  padding: 2rem 1.5rem;



  text-align: center;



  position: relative;



  overflow: hidden;



}



.stat-card::after {



  content: '';



  position: absolute;



  top: 0;

  left: 0;

  right: 0;



  height: 2px;



  background: linear-gradient(90deg, var(--fire), transparent);



}







.stat-num {



  font-family: var(--font-display);



  font-size: 3rem;



  font-weight: 700;



  color: var(--fire);



  line-height: 1;



  margin-bottom: 0.5rem;



}



.stat-label {



  font-size: 0.9rem;



  color: var(--smoke);



}







/* ============================



   PROBLEMS / REPAIR



   ============================ */







.problem-list {



  display: flex;



  flex-direction: column;



  gap: 1rem;



  margin-top: 2rem;



}







.problem-item {



  background: var(--carbon);



  border: 1px solid var(--border);



  border-radius: 8px;



  padding: 1.25rem 1.5rem;



  display: flex;



  align-items: center;



  gap: 1.25rem;



  transition: all 0.2s;



}



.problem-item:hover {

  border-color: rgba(255, 77, 0, 0.2);

}







.problem-icon {



  width: 44px;

  height: 44px;



  background: var(--fire-glow);



  border-radius: 8px;



  display: flex;

  align-items: center;

  justify-content: center;



  font-size: 1.2rem;



  flex-shrink: 0;



}



.problem-text h4 {

  font-size: 1rem;

  margin-bottom: 0.2rem;

}



.problem-text p {

  font-size: 0.85rem;

}







/* ============================



   FAQ



   ============================ */







.faq-section {

  background: var(--carbon);

}







.faq-list {



  max-width: 760px;



  margin: 2.5rem auto 0;



  display: flex;



  flex-direction: column;



  gap: 0.75rem;



}







.faq-item {



  background: var(--steel);



  border: 1px solid var(--border);



  border-radius: 8px;



  overflow: hidden;



}







.faq-q {



  width: 100%;



  background: none;



  border: none;



  padding: 1.25rem 1.5rem;



  color: var(--white);



  font-family: var(--font-display);



  font-size: 1rem;



  font-weight: 600;



  letter-spacing: 0.02em;



  text-align: left;



  cursor: pointer;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 1rem;



  transition: color 0.2s;



}



.faq-q:hover {

  color: var(--fire);

}



.faq-q.open {

  color: var(--fire);

}







.faq-toggle {



  font-size: 1.2rem;



  color: var(--smoke);



  transition: transform 0.3s;



  flex-shrink: 0;



}



.faq-q.open .faq-toggle {

  transform: rotate(45deg);

  color: var(--fire);

}







.faq-a {



  max-height: 0;



  overflow: hidden;



  transition: max-height 0.3s ease;



}



.faq-a.open {

  max-height: 300px;

}







.faq-a-inner {



  padding: 0 1.5rem 1.25rem;



  font-size: 0.95rem;



  color: var(--smoke);



  line-height: 1.7;



  border-top: 1px solid var(--border);



}



.faq-a-inner a {

  color: #ff6b2b;

  text-decoration: underline;

}

.faq-a-inner a:hover {

  color: #ff4d00;

}







/* ============================



   PAGE BANNER



   ============================ */





.page-banner {

  background: var(--carbon);

  padding: 8rem 0 4rem;

  border-bottom: 1px solid var(--border);

  position: relative;

  overflow: hidden;

}



.page-banner::before {

  content: "";

  position: absolute;

  inset: 0;

  background: radial-gradient(

    ellipse 50% 80% at 80% 50%,

    rgba(255, 77, 0, 0.06) 0%,

    transparent 70%

  );

  pointer-events: none;

}



.page-banner .container {

  position: relative;

  z-index: 1;

}



.page-banner-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: 3rem;

}



.page-banner-content {

  min-width: 0;

}



.breadcrumb {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 0.5rem;

  font-size: 0.8rem;

  color: var(--smoke);

  margin-bottom: 1rem;

}



.breadcrumb a {

  transition: color 0.2s;

}



.breadcrumb a:hover {

  color: var(--fire);

}



.breadcrumb .sep {

  color: var(--slate);

}



.page-banner-content h1 {

  margin-top: 0.75rem;

  max-width: 720px;

}



.page-banner-text {

  max-width: 560px;

  margin-top: 0.75rem;

  font-size: 1.05rem;

  line-height: 1.7;

  color: var(--smoke);

}



.page-banner-actions {

  display: flex;

  gap: 1rem;

  margin-top: 1.5rem;

  flex-wrap: wrap;

}



.hero-image {

  width: 100%;

}



.hero-image img {

  width: 100%;

  height: auto;

  display: block;

  border-radius: 18px;

  object-fit: cover;

}



/* Tablet */

@media (max-width: 991px) {

  .page-banner {

    padding: 7rem 0 3.5rem;

  }



  .page-banner-grid {

    grid-template-columns: 1fr;

    gap: 2.5rem;

  }



  .page-banner-content {

    text-align: left;

  }



  .page-banner-text {

    max-width: 100%;

  }



  .hero-image img {

    max-height: 420px;

    object-fit: cover;

  }

}



/* Mobile */

@media (max-width: 575px) {

  .page-banner {

    padding: 6rem 0 3rem;

  }



  .page-banner-grid {

    gap: 2rem;

  }



  .breadcrumb {

    font-size: 0.75rem;

  }



  .page-banner-content h1 {

    font-size: 2rem;

    line-height: 1.15;

  }



  .page-banner-text {

    font-size: 0.95rem;

    line-height: 1.65;

  }



  .page-banner-actions {

    flex-direction: column;

    gap: 0.75rem;

  }



  .page-banner-actions a {

    width: 100%;

    justify-content: center;

    text-align: center;

  }



  .hero-image img {

    border-radius: 14px;

  }

}




.brand-disclaimer {
    margin-top: 16px;
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}


/* ============================



   AMC PAGE



   ============================ */







.amc-card {



  background: var(--steel);



  border: 1px solid var(--border);



  border-radius: 16px;



  padding: 2.5rem;



  transition: all 0.3s;



}



.amc-card.featured-amc {

  border-color: var(--fire);

  box-shadow: 0 0 30px rgba(255, 77, 0, 0.12);

}



.amc-card:hover {

  transform: translateY(-4px);

}







.amc-tier {



  font-family: var(--font-mono);



  font-size: 0.7rem;



  letter-spacing: 0.15em;



  text-transform: uppercase;



  color: var(--smoke);



  margin-bottom: 0.5rem;



}



.amc-price {



  font-family: var(--font-display);



  font-size: 2.5rem;



  font-weight: 700;



  color: var(--fire);



  margin-bottom: 0.3rem;



}



.amc-per {

  font-size: 0.85rem;

  color: var(--smoke);

  margin-bottom: 1.5rem;

}







.amc-includes {



  display: flex;



  flex-direction: column;



  gap: 0.6rem;



  margin-bottom: 1.5rem;



}



.amc-include {



  display: flex;



  gap: 0.6rem;



  font-size: 0.9rem;



  color: var(--smoke);



}



.amc-include::before {

  content: '✓';

  color: var(--live);

  flex-shrink: 0;

}







/* ============================



   CONTACT



   ============================ */







.contact-info-grid {



  display: grid;



  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));



  gap: 1.25rem;



  margin-top: 2rem;



}







.contact-card {



  background: var(--steel);



  border: 1px solid var(--border);



  border-radius: 12px;



  padding: 1.75rem;



  text-align: center;



  transition: all 0.2s;



}



.contact-card:hover {

  border-color: rgba(255, 77, 0, 0.2);

}







.contact-icon {

  font-size: 2rem;

  margin-bottom: 0.75rem;

}



.contact-card h4 {

  font-size: 1rem;

  margin-bottom: 0.4rem;

}



.contact-val {



  font-family: var(--font-mono);



  font-size: 0.95rem;



  color: var(--cyan);



}







/* ============================



   FOOTER



   ============================ */







.site-footer {



  background: var(--carbon);



  border-top: 1px solid var(--border);



  padding: 3rem 0 2rem;



}







.footer-top-grid {



  display: grid;



  grid-template-columns: 1.5fr repeat(4, 1fr);



}







.footer-grid {



  display: grid;



  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;



  gap: 0.5rem;



  margin-bottom: 3rem;



}







.footer-brand p {

  font-size: 0.9rem;

  margin-top: 1rem;

  max-width: 250px;

}







.footer-col h4 {



  font-family: var(--font-mono);



  font-size: 0.7rem;



  letter-spacing: 0.15em;



  text-transform: uppercase;



  color: var(--smoke);



  margin-bottom: 1rem;



}







.footer-col ul {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}



.footer-col ul li a {



  font-size: 0.9rem;



  color: var(--smoke);



  transition: color 0.2s;



}



.footer-col ul li a:hover {

  color: var(--fire);

}







.footer-phone {



  font-family: var(--font-mono);



  font-size: 1.4rem;



  font-weight: 500;



  color: var(--cyan);



  display: block;



  margin-bottom: 0.5rem;



}







.footer-bottom {



  border-top: 1px solid var(--border);



  padding-top: 2rem;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 1rem;



  flex-wrap: wrap;



}



.footer-bottom p {

  font-size: 0.8rem;

  color: var(--smoke);

}







/* ============================
   STICKY MOBILE CALL BAR
   ============================ */

.sticky-call {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;

  padding: 0.75rem 1rem;
  background: var(--carbon);
  border-top: 1px solid var(--border);
  gap: 0.75rem;

}







/* ============================



   ANIMATIONS



   ============================ */







@keyframes fadeInUp {



  from {

    opacity: 0;

    transform: translateY(20px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }



}







.fade-in {

  animation: fadeInUp 0.6s ease forwards;

}



.fade-in-1 {

  animation-delay: 0.1s;

  opacity: 0;

}



.fade-in-2 {

  animation-delay: 0.2s;

  opacity: 0;

}



.fade-in-3 {

  animation-delay: 0.3s;

  opacity: 0;

}



.fade-in-4 {

  animation-delay: 0.4s;

  opacity: 0;

}







/* ============================



   RESPONSIVE



   ============================ */







@media (max-width: 900px) {



  .hero {

    grid-template-columns: 1fr;

    padding-top: 90px;

  }



  .hero-visual {

    display: none;

  }



  .footer-grid {

    grid-template-columns: 1fr 1fr;

  }



  .float-cta-inner {

    justify-content: center;

    text-align: center;

  }



  .form-grid {

    grid-template-columns: 1fr;

  }



}







@media (max-width: 640px) {



  :root {

    --section: 3.5rem;

  }



  .nav-links {

    display: none;

  }



  .nav-toggle {

    display: flex;

  }



  .nav-cta .nav-phone {

    display: none;

  }



  .footer-grid {

    grid-template-columns: 1fr;

  }



  .hero-actions {

    flex-direction: column;

  }



  .hero-trust {

    gap: 1rem;

  }



  .sticky-call {

    display: flex;

  }



  body {

    padding-bottom: 70px;

  }



  .float-cta-phone {

    font-size: 1.4rem;

  }



  .stats-grid {

    grid-template-columns: repeat(2, 1fr);

  }



}







/* Nav mobile open state */



.nav-mobile-open .nav-links {



  display: flex;



  flex-direction: column;



  position: fixed;



  top: 72px;

  left: 0;

  right: 0;



  background: var(--ink);



  border-bottom: 1px solid var(--border);



  padding: 1rem 1.5rem;



  gap: 0.5rem;



  align-items: flex-start;



}







.pagination {



  display: flex;



  gap: 8px;



  justify-content: center;



  margin-top: 35px;



  flex-wrap: wrap;



}







.pagination a,



.pagination span {



  padding: 10px 14px;



  border: 1px solid #ddd;



  border-radius: 6px;



  text-decoration: none;



  color: #222;



  background: #fff;



}







.pagination .active {



  background: var(--fire);



  color: #fff;



  border-color: var(--fire);



}







.camera-steps-wrap {



  display: grid;



  grid-template-columns: repeat(4, 1fr);



  gap: 24px;



  margin-top: 70px;



}







.camera-step-card {



  background: #111827;



  border-radius: 18px;



  padding: 40px 25px 30px;



  text-align: center;



  position: relative;



  transition: 0.3s ease;



  border: 1px solid rgba(255, 255, 255, 0.05);



}







.camera-step-card:hover {



  transform: translateY(-6px);



  border-color: rgba(0, 255, 180, 0.25);



}







.step-number {



  position: absolute;



  top: -18px;



  left: 50%;



  transform: translateX(-50%);



  width: 42px;



  height: 42px;



  border-radius: 50%;



  background: #00d084;



  color: #fff;



  font-weight: 700;



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 1rem;



}







.step-icon {



  font-size: 2rem;



  margin-bottom: 18px;



}







.camera-step-card h3 {



  color: #fff;



  margin-bottom: 12px;



  font-size: 1.25rem;



}







.camera-step-card p {



  color: #cbd5e1;



  line-height: 1.6;



  font-size: .95rem;



}







@media(max-width:992px) {



  .camera-steps-wrap {



    grid-template-columns: repeat(2, 1fr);



  }



}







@media(max-width:600px) {



  .camera-steps-wrap {



    grid-template-columns: 1fr;



  }



}







/* ============================================================



       CAMERA TYPE CARDS — NEW SECTION



       ============================================================ */



.cam-types-section {



  background: var(--ink);



  padding: 64px 0;



}



.cam-types-header {



  text-align: center;



  margin-bottom: 48px;



}



.cam-types-intro {



  font-size: 16px;

  color: var(--smoke);



  max-width: 640px;

  margin: 12px auto 0;



  line-height: 1.65;



}







/* Tab navigation for camera types */



.cam-tabs {



  display: flex;

  gap: 8px;

  flex-wrap: wrap;



  justify-content: center;



  margin-bottom: 36px;



}



.cam-tab-btn {



  display: flex;

  align-items: center;

  gap: 8px;



  padding: 10px 20px;

  border-radius: 40px;



  border: 1px solid rgba(200, 208, 220, 0.12);



  background: var(--steel);

  cursor: pointer;



  font-family: var(--font-display);



  font-size: 14px;

  font-weight: 600;



  letter-spacing: 0.04em;



  color: var(--smoke);



  transition: all var(--transition);



}



.cam-tab-btn .tab-icon {

  font-size: 18px;

}



.cam-tab-btn:hover {



  border-color: rgba(255, 77, 0, 0.35);

  color: var(--fire);



  background: var(--fire-glow);



}



.cam-tab-btn.active {



  border-color: var(--fire);



  background: var(--fire);

  color: #fff;



  box-shadow: 0 0 16px rgba(255, 77, 0, 0.35);



}







.problem-form-row {

  display: grid;

  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);

  gap: 2rem;

  align-items: flex-start;

}



.problem-column,

.form-column {

  min-width: 0;

}



.problem-intro {

  max-width: 720px;

  margin-top: 0.5rem;

}



.problem-list {

  display: flex;

  flex-direction: column;

  gap: 1rem;

  margin-top: 2rem;

}



.problem-item {

  background: var(--carbon);

  border: 1px solid var(--border);

  border-radius: 8px;

  padding: 1.25rem 1.5rem;

  display: flex;

  align-items: center;

  gap: 1.25rem;

  transition: all 0.2s;

}



.problem-item:hover {

  border-color: rgba(255, 77, 0, 0.2);

}



.problem-icon {

  width: 44px;

  height: 44px;

  background: var(--fire-glow);

  border-radius: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.2rem;

  flex-shrink: 0;

}



.problem-text h4 {

  font-size: 1rem;

  margin-bottom: 0.2rem;

}



.problem-text p {

  font-size: 0.85rem;

}



.lead-form-section {

  background: var(--carbon);

  border-top: 1px solid var(--border);

  border-bottom: 1px solid var(--border);

}



.form-column {

  position: sticky;

  top: 1.5rem;

}



.form-card {

  background: var(--steel);

  border: 1px solid rgba(255, 77, 0, 0.15);

  border-radius: 16px;

  padding: 2.5rem;

  position: relative;

  overflow: hidden;

}



.form-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--fire), var(--cyan));

}



.form-title {

  font-size: 1.6rem;

  margin-bottom: 0.3rem;

}



.form-subtitle {

  font-size: 0.9rem;

  margin-bottom: 1.5rem;

}



/* every input/select one row */

.form-grid,

.single-form-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 1rem;

  margin-bottom: 1rem;

}



.form-field {

  display: flex;

  flex-direction: column;

  gap: 0.4rem;

}



.form-field.full {

  grid-column: 1 / -1;

}



.form-field label {

  font-family: var(--font-mono);

  font-size: 0.7rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--smoke);

}



.form-field input,

.form-field select,

.form-field textarea {

  background: var(--slate);

  border: 1px solid rgba(200, 208, 220, 0.1);

  border-radius: 6px;

  padding: 0.7rem 1rem;

  color: var(--white);

  font-family: var(--font-body);

  font-size: 0.95rem;

  transition: border-color 0.2s;

  outline: none;

  width: 100%;

}



.form-field input::placeholder {

  color: var(--smoke);

}



.form-field input:focus,

.form-field select:focus,

.form-field textarea:focus {

  border-color: var(--fire);

  box-shadow: 0 0 0 3px rgba(255, 77, 0, 0.1);

}



.form-field select {

  cursor: pointer;

  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a95a8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 1rem center;

  padding-right: 2.5rem;

}



.form-field select option {

  background: var(--slate);

}



.form-submit {

  width: 100%;

  background: var(--fire);

  color: white;

  border: none;

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 1.1rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  padding: 1rem;

  border-radius: 6px;

  cursor: pointer;

  transition: all 0.25s;

  box-shadow: 0 0 20px rgba(255, 77, 0, 0.3);

}



.form-submit:hover {

  background: var(--fire-soft);

  box-shadow: var(--shadow-hot);

  transform: translateY(-2px);

}



.form-note {

  font-size: 0.78rem;

  color: var(--smoke);

  text-align: center;

  margin-top: 0.75rem;

}



/* Responsive */

@media (max-width: 991px) {

  .problem-form-row {

    grid-template-columns: 1fr;

  }



  .form-column {

    position: static;

  }

}



@media (max-width: 575px) {

  .problem-item {

    align-items: flex-start;

    padding: 1rem;

    gap: 0.9rem;

  }



  .problem-icon {

    width: 38px;

    height: 38px;

    font-size: 1rem;

  }



  .form-card {

    padding: 1.5rem;

  }



  .form-title {

    font-size: 1.3rem;

  }

}







.quote-faq-grid {

  display: grid;

  grid-template-columns: 1.05fr 0.95fr;

  gap: 15px;

  align-items: flex-start;

}



.quote-faq-grid .form-card,

.agarpara-faq-box {

  height: 100%;

}



.agarpara-faq-box {

  border-radius: 18px;

  padding: 28px;

  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);

}



.agarpara-faq-box h2 {

  margin-bottom: 22px;

}



/* Mobile responsive */

@media (max-width: 991px) {

  .quote-faq-grid {

    grid-template-columns: 1fr;

  }



  .agarpara-faq-box {

    padding: 22px;

  }

}

/* Hide by default */
.floating-buttons {
    display: none !important;
}

/* Show only on desktop */
@media only screen and (min-width: 992px) {
    #call-button,
    #whatsapp-button {
        display: flex !important; /* or block, depending on your layout */
    }
}