/* =========================================================
   Compact Dropper – FIXES ONLY
   1) Hero title one line on desktop
   2) Bigger text in middle sections
   3) No black behind image + white frame
   4) Specs blocks stand out
   5) Footer logo back to original
   ========================================================= */

/* ---------------- 1. HERO TITLE ---------------- */

/* Your hero band directly under the video */
section.bg-gradient-to-b.from-slate-50.to-white h1 {
  font-size: clamp(2.2rem, 3vw, 2.7rem) !important; /* smaller so it fits */
  font-weight: 900 !important;
  letter-spacing: -0.08em !important;
  line-height: 1.05 !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: normal !important;  /* mobile can wrap */
}

/* Force single line on desktop */
@media (min-width: 992px) {
  section.bg-gradient-to-b.from-slate-50.to-white h1 {
    white-space: nowrap !important;
    max-width: none !important;
    word-break: keep-all !important;
  }
}

/* Make sure hero text is bright and readable on your coloured band */
section.bg-gradient-to-b.from-slate-50.to-white p,
section.bg-gradient-to-b.from-slate-50.to-white li {
  color: #f9fafb !important;
}

/* ---------------- 2. BIGGER TEXT IN MIDDLE SECTIONS ---------------- */

/* All main paragraphs in this product page middle area */
section.bg-gradient-to-b.from-slate-50.to-white p,
#features p,
#specs p,
#applications p,
section.border-y.border-slate-200.bg-slate-50 p,
.blog_section p,
#contactForm p {
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
}

/* Lists a touch bigger too */
#features li,
#applications li,
section.border-y.border-slate-200.bg-slate-50 li,
.blog_section li {
  font-size: 1.05rem !important;
}

/* Specs dt/dd text sizes */
#specs dt {
  font-size: 0.9rem !important;
}
#specs dd {
  font-size: 1.06rem !important;
}

/* Ensure standard sections use dark text on light backgrounds */
#features,
#specs,
#applications,
section.border-y.border-slate-200.bg-slate-50,
.blog_section,
#features *,
#specs *,
#applications *,
section.border-y.border-slate-200.bg-slate-50 *,
.blog_section * {
  color: #020617 !important;
}

/* …except the dark applications band IF your CSS made it dark */
#applications {
  position: relative;
}
#applications.dark,        /* if you added a .dark class */
#applications.gradient,    /* or gradient */
#applications.is-dark {
  background-color: transparent; /* just in case */
}
#applications[style*="gradient"],
#applications[style*="background"] {
  /* if you've made it dark, force white text */
}
#applications[style*="gradient"] *,
#applications[style*="background"] * {
  color: #f9fafb !important;
}

/* ---------------- 3. IMAGE – NO BLACK, WHITE BORDER WITH FADE ---------------- */

section.bg-gradient-to-b.from-slate-50.to-white img.img-responsive,
.bg-gradient-to-b img.img-responsive,
img.img-responsive {

  border-radius: 24px !important;
  border: 4px solid #ffffff !important;     /* strong white frame */
  box-shadow:
    0 22px 65px rgba(15, 23, 42, 0.45),
    0 0 0 1px rgba(148, 163, 184, 0.25) !important;
}

/* Soft white ? blue halo behind frame so it blends into band */
section.bg-gradient-to-b.from-slate-50.to-white .relative::before {
  content: "" !important;
  position: absolute !important;
  inset: 4% !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(248, 250, 252, 0.9), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(191, 219, 254, 0.7), transparent 70%) !important;
  z-index: -1 !important;
}

/* ---------------- 4. TECHNICAL SPEC BLOCKS STAND OUT ---------------- */

/* Make the specs section background slightly tinted */
#specs {
  background: #e5edf7 !important;           /* light blue-grey */
}

/* Cards themselves: pure white, bold border, strong shadow */

#specs .rounded-3xl.bg-white {
  background: #ffffff !important;
  border-radius: 22px !important;
  border: 2px solid #1d4ed8 !important;
  box-shadow: 0 26px 80px rgba(15, 23, 42, 0.3) !important;
}

/* Text inside spec cards dark and readable */
#specs h2,
#specs h3,
#specs dt,
#specs dd,
#specs p {
  color: #020617 !important;
}

/* ---------------- 5. FOOTER LOGO BACK TO ORIGINAL ---------------- */

/* Remove any effects we might have added earlier */
footer img,
.footer img,
.footer-logo img {
  filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  opacity: 1 !important;
}