html, body {
  max-width: 100vw;
  overflow-x: hidden;
}






/* =========================================================
   Predictive Maintenance — Page-scoped CSS
   ========================================================= */

/* ---------- Header offset (clears your absolute header) ---------- */
:root {
  --header-h: 96px;   /* adjust to match header height */
  --pm-gap: 72px;     /* default gap between text and image */
}

.page-spacer { height: var(--header-h); }

/* ---------- Desktop header layout ---------- */
@media (min-width: 1200px) {
  .header-area__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
  .header__nav.pos-center,
  .header__nav {
    position: static !important;
    transform: none !important;
    width: 100%;
  }
  .header__nav .main-menu { display: flex; justify-content: center; width: 100%; }
  .header__nav .main-menu > ul { display: flex; justify-content: center; margin: 0 auto; }
}

/* Optional: highlight active item */
.sub-menu .active-btn {
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  padding: .35rem .65rem;
}

/* ---------- Ensure inspiration elements are visible ---------- */
[data-ns-animate] { opacity: 1 !important; filter: none !important; }

/* =========================================================
   HERO
   ========================================================= */

.pm-hero {
  position: relative;
  isolation: isolate;            /* stacking context */
  padding-top: clamp(60px, 2.5vw, 100px);
  padding-bottom: 0;             /* flush with next section */
  overflow: hidden;
}

.pm-hero__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  z-index: 1;                    /* above background */
}

.pm-hero__intro {
  text-align: center;
  margin-bottom: var(--pm-gap);
}

.pm-hero__intro h1 {
  font-size: clamp(36px, 8vw, 72px);
  line-height: 1.1;
  margin: 0 0 12px;
}

.pm-hero__intro p {
  max-width: 650px;
  margin: 0 auto 16px;
  font-size: clamp(16px, 2vw, 20px);
  color: #444;
}

.pm-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.pm-hero__figure {
  position: relative;
  z-index: 2;                    /* above text */
  margin: 0;                     /* no extra space below image */
}

.pm-hero__figure img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  transform: scale(1.15);
}

@media (min-width: 768px) {
  .pm-hero__figure img { transform: none; }
}

/* Hero background at bottom layer */
.pm-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.pm-hero__bg img {
  max-width: 1290px;
  width: 100%;
}

/* Shift hero image down slightly without adding bottom gap */
.pm-hero__figure img { transform: translateY(100px); }

@media (min-width: 768px) {
  .pm-hero__figure img { transform: translateY(40px); }
}

/* space between hero text and image */
:root { --pm-gap: 43px; }  /* try 40–80px to taste */
.pm-hero__intro { margin-bottom: var(--pm-gap) !important; }

.pm-hero + .section.features-section { padding-top: clamp(30px, 4vw, 60px) !important; }

/* Grow hero image without changing layout gaps */
.pm-hero { overflow: visible; } /* let the scaled image extend */
.pm-hero__figure img {
  transform-origin: top center;
  transform: scale(var(--pm-hero-scale, 1)); /* default = 1 (no change) */
}

/* Tweak per breakpoint */
@media (min-width: 576px) { :root { --pm-hero-scale: 1.05; } }
@media (min-width: 768px) { :root { --pm-hero-scale: 1.10; } }
@media (min-width: 1200px) { :root { --pm-hero-scale: 1.15; } }

/* =========================================================
   FEATURES SECTION
   ========================================================= */

.section {
  background-color: #f9f9fb;   /* same bg as hero */
  padding: 80px 20px;
}

.section-header { margin-bottom: 50px; }

.section-header h2 {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 600;
  text-align: center;
}

.section-header .highlight { color: #009EFF; }

.features-row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.feature-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.feature-card h5 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.feature-card p {
  color: #555;
  font-size: 16px;
  margin-bottom: 16px;
}

.feature-card figure img {
  width: 100%;
  border-radius: 12px;
  display: block;
}

.feature-large { flex: 2 1 600px; } /* 2/3 width */
.feature-small { flex: 1 1 300px; } /* 1/3 width */

@media (max-width: 991px) {
  .feature-large,
  .feature-small { flex: 1 1 100%; }
}

/* space between feature rows */
.features-row + .features-row { margin-top: 32px; }

@media (max-width: 767px) {
  .features-row + .features-row { margin-top: 20px; }
}

@media (max-width: 767px) {
  .features-row { gap: 20px; }  /* optional: smaller card-to-card gap on mobile */
}

/* reverse layout on desktop: small card on the left, large on the right */
.features-row.reverse .feature-small { order: 1; }
.features-row.reverse .feature-large { order: 2; }

@media (max-width: 991px) {
  .features-row.reverse .feature-small,
  .features-row.reverse .feature-large { order: 0; }
}

/* =========================================================
   PRICING SECTION
   ========================================================= */

/* Pricing (two-card, modern) */
.pricing-modern { background:#f9f9fb; }

/* Header */
.pricing-modern .pricing-head {
  text-align:center;
  margin-bottom:44px;
}

.pricing-modern .pricing-head .pill {
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:#eaf5ff;
  color:#111;
  font-size:14px;
}

.pricing-modern .pricing-head h2 {
  font-size:clamp(28px,5vw,48px);
  line-height:1.15;
  margin:14px auto 0;
  max-width:900px;
}

/* Grid */
.pricing-cards {
  display:grid;
  grid-template-columns:minmax(260px, 460px);
  gap:40px;                   /* bigger gap between the two cards */
  justify-content:center;
}

@media (min-width: 992px) {
  .pricing-cards {
    grid-template-columns:repeat(2, minmax(320px, 460px));
    gap:40px;                 /* keep the gap on desktop too */
  }
}

/* Card base */
.p-card {
  border-radius:24px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
}

/* Header + price (centered) */
.p-card header {
  padding:28px;
  border-bottom:1px solid rgba(0,0,0,.06);
  text-align:center;          /* center title + price + button */
}

.p-card h3 {
  margin:0 0 8px;
  font-size:20px;
  font-weight:600;
}

.p-card .price { text-align:center; line-height:1.4; } /* tidy line spacing around price */

.p-card .price .amount {
  display:inline-block;
  font-size:clamp(22px,4vw,32px);
  font-weight:700;
  margin:6px 0 2px;
}

.p-card .price .amount .currency { font-size:.8em; margin-right:2px; }
.p-card .price .amount .unit     { font-size:.6em; font-weight:500; color:#555; }
.p-card .price .sub              { color:#666; font-size:14px; display:block; }

.p-card .w-full {
  display:block;
  width:100%;
  text-align:center;
  margin-top:16px;
  border-radius:999px;
}

/* Light card */
.p-card.light { background:#f7f8fb; }
.p-card.light header { border-color:rgba(0,0,0,.07); }

/* Dark/gradient card */
.p-card.dark { color:#fff; background:#0f0f10; position:relative; }

.p-card.dark::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  background:
    radial-gradient(1200px 400px at 90% -20%, rgba(126,87,255,.45), transparent 60%),
    radial-gradient(800px 300px at 10% 0%, rgba(0,200,255,.35), transparent 55%);
  pointer-events:none;
  mix-blend:screen;
}

.p-card.dark header { border-color:rgba(255,255,255,.12); position:relative; z-index:1; }
.p-card.dark .price .sub { color:#d6d6d6; }
.p-card.dark .btn { background:#009EFF; border-color:#009EFF; color:#fff; }

/* Feature list — dash prefix, aligned text, comfy line-height */
.p-card .features {
  list-style:none;
  margin:0;
  padding:20px 28px 28px;
  display:grid;
  gap:12px;
}

.p-card .features li { margin:0; line-height:1.65; }

.p-card .features li::before {
  content:"- ";
  color:currentColor;
  font-weight:600;
}

/* Button fallbacks (use your theme’s if present) */
.btn.btn-white { background:#fff; border:1px solid rgba(0,0,0,.1); color:#111; }
.btn.btn-white:hover { filter:brightness(.98); }
.btn.btn-secondary { background:#111; border:1px solid #111; color:#fff; }
.btn.btn-secondary:hover { filter:brightness(1.05); }

/* =========================================================
   FOOTER — match Home page (left aligned)
   ========================================================= */

.footer-area .section-header { text-align: left; }

.footer-area .section-header h2 {
  text-align: left;
  margin: 0;     /* remove auto-centering margins */
}

@media (min-width: 992px) {
  .footer-area .section-header {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* left column = big title, right = paragraph */
    align-items: end;
    column-gap: 32px;
  }
  .footer-area .section-header .section-title-wrapper,
  .footer-area .section-header .title-wrapper,
  .footer-area .section-header .text-wrapper { text-align: left; }
}

/* Ensure the generic “center section headers” rule doesn’t affect the footer */
.section-header h2 { text-align: center; }          /* your existing rule */
.footer-area .section-header h2 { text-align: left; }  /* footer exception */

/* =========================================================
   HERO: kill transform conflicts, make join flush
   ========================================================= */

/* Stop all previous transforms from fighting */
.pm-hero__figure img {
  transform: none !important;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: bottom;
}

/* Hero itself adds no bottom padding */
.pm-hero { padding-bottom: 0 !important; }

/* The section immediately after hero starts right away (no gap) */
.pm-hero + .section {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* OPTIONAL: control only the space ABOVE the image (text → image) */
:root { --pm-gap: 44px; }      /* phones default */
@media (min-width: 576px) { :root { --pm-gap: 52px; } }
@media (min-width: 768px) { :root { --pm-gap: 60px; } }
@media (min-width: 1200px) { :root { --pm-gap: 64px; } }

.pm-hero__intro { margin-bottom: var(--pm-gap) !important; }

/* =========================================================
   Offcanvas submenu — collapsed by default
   ========================================================= */

.offcanvas-3__menu .menu-item-has-children > a.no-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* optional caret */
.offcanvas-3__menu .menu-item-has-children > a.no-nav::after {
  content:"▾";
  font-size:14px;
  margin-left:8px;
  transition:transform .2s ease;
}

/* hide submenu */
.offcanvas-3__menu .menu-item-has-children .sub-menu {
  display:block;                 /* keep block so transition works via max-height */
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
  padding-left:0;                /* cleaner edge on mobile */
}

/* expanded state */
.offcanvas-3__menu .menu-item-has-children.is-open > a.no-nav::after { transform:rotate(180deg); }
.offcanvas-3__menu .menu-item-has-children.is-open .sub-menu { max-height:600px; }

/* Optional: submenu item style on mobile */
.offcanvas-3__menu .sub-menu li a {
  display:block;
  padding:10px 0 10px 14px;
  font-size:15px;
  opacity:.95;
}


/* Single-card mode for the pricing section (scoped, won’t affect others) */
.pricing-modern.one-card .pricing-cards{
  grid-template-columns: minmax(300px, 560px);
  justify-content: center;
}
@media (min-width: 992px){
  .pricing-modern.one-card .pricing-cards{
    grid-template-columns: minmax(360px, 640px);
  }
}
.pricing-modern.one-card .p-card{
  max-width: 640px;
  justify-self: center;
}