@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   GLOBAL THEME — TEAL & MINT  (poori website ke colors yahan se)
   Color change karna ho to sirf is :root ke variables badlein.
   ============================================================ */
:root {
  /* Brand Teal */
  --teal-deep:   #007A78;   /* main brand / headings accent / buttons */
  --teal-main:   #00A896;   /* sea green accent */
  --teal-darker: #005F5D;   /* hover / dark text on mint */
  --teal-night:  #02201F;   /* dark card start */
  --teal-night-2:#004543;   /* dark card end */

  /* Mint Tints */
  --mint-50:  #E6F9F6;      /* pill / badge background */
  --mint-100: #CCFBF1;      /* soft border */
  --mint-200: #A7F3D0;      /* pill border */
  --mint-400: #5EEAD4;      /* light accent on dark */

  /* Backgrounds */
  --bg-white:  #FFFFFF;
  --bg-subtle: #F4FBFA;     /* alternate section background (halka mint) */

  /* Text */
  --text-dark:  #111827;
  --text-body:  #4B5563;
  --text-muted: #6B7280;
  --text-faint: #9CA3AF;

  /* Borders */
  --border-light: #E5E7EB;
  --border-mint:  #CCFBF1;

  /* Shadows (soft teal tint) */
  --shadow-soft: 0 4px 18px rgba(0, 122, 120, 0.06);
  --shadow-lift: 0 12px 28px rgba(0, 122, 120, 0.12);

  /* Typography */
  --font-main: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --fs-xs: 0.72rem;
  --fs-sm: 0.82rem;
  --fs-md: 0.92rem;
  --fs-lg: 1.05rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-white) !important;
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

/* ============================================================
   GLOBAL BUTTON — Teal Gradient Pill (header + hero + sections)
   ============================================================ */
.btn-tech-primary,
.capsule-btn-talk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--teal-main) 0%, var(--teal-deep) 100%) !important;
  color: #FFFFFF !important;
  font-size: var(--fs-sm);
  font-weight: 700 !important;
  padding: 11px 24px;
  border-radius: 50px;
  border: 1px solid rgba(0, 168, 150, 0.4) !important;
  transition: all 0.25s ease;
}

.btn-tech-primary:hover,
.capsule-btn-talk:hover {
  transform: translateY(-2px);
  color: #FFFFFF !important;
  background: linear-gradient(135deg, var(--teal-deep) 0%, var(--teal-darker) 100%) !important;
}

.btn-tech-primary svg,
.capsule-btn-talk svg {
  stroke: #FFFFFF !important;
}

/* ============================================================
   GLOBAL SHARED PIECES (kai sections mein use hotay hain)
   ============================================================ */

/* Eyebrow Pill (chhota badge heading ke upar) */
.tech-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mint-50);
  border: 1px solid var(--mint-200);
  color: var(--teal-deep);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 5px 14px;
  border-radius: 50px;
  width: fit-content;
}

.pulsing-blue-dot {
  width: 6px;
  height: 6px;
  background: var(--teal-main);
  border-radius: 50%;
}

/* Section Heading */
.tech-heading {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--text-dark) !important;
  max-width: 540px;
}

/* Heading ka teal gradient wala hissa */
.gradient-glow-text {
  background: linear-gradient(135deg, var(--teal-deep) 0%, var(--teal-main) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
  filter: none !important;
}

/* Section Description */
.tech-description {
  font-size: var(--fs-md);
  color: var(--text-body) !important;
  line-height: 1.65;
  max-width: 510px;
}

.tech-description strong {
  color: var(--text-dark) !important;
  font-weight: 600;
}

/* Purane neon glow divs (HTML mein hain) — band */
.ambient-glow {
  display: none !important;
}

/* ============================================================
   RESPONSIVE PATCH (CSS-only, mobile text-first) — appended, no
   desktop rule above was changed. Desktop layout untouched.
   ============================================================ */
/* Global media safety: an image can never exceed its container. */
img { max-width: 100%; height: auto; }

/* Compact pill buttons on small phones only. */
@media (max-width: 575px) {
  .btn-tech-primary,
  .capsule-btn-talk { padding: 10px 20px; font-size: 0.82rem; }
}