/* ============================================================
   AI Diagnostics page — premium redesign (additive, scoped)
   All rules are namespaced under .aid-page / .aid-* so they
   never affect other pages or existing components.
   Uses existing theme vars: --theme-color, --theme-color-1.
   ============================================================ */
.aid-page {
  --aid-blue: var(--theme-color, #f05151);
  --aid-navy: var(--theme-color-1, #1a0a0a);
  --aid-cyan: #fa6f6f;
  --aid-ink: #1c0e0e;
  --aid-muted: #5b6478;
  --aid-soft: #fff2f1;
  --aid-line: #fdecec;
  --aid-grad: linear-gradient(120deg, #f05151 0%, #fa6f6f 100%);
  --aid-grad-navy: linear-gradient(135deg, #3a1616 0%, #1a0a0a 100%);
  overflow: hidden;
}
.aid-page .aid-section { position: relative; padding: 90px 0; }
.aid-page .aid-section.aid-soft-bg { background: var(--aid-soft); }
.aid-page .aid-section.aid-navy-bg { background: var(--aid-grad-navy); }
.aid-page p { color: var(--aid-muted); font-size: 16px; line-height: 1.8; }
.aid-page .aid-navy-bg p { color: rgba(255,255,255,.78); }

/* ---- Section heading / eyebrow ---- */
.aid-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--aid-blue);
  background: var(--primary10, rgba(240,81,81,.1));
  padding: 7px 16px; border-radius: 50px; margin-bottom: 20px;
}
.aid-navy-bg .aid-eyebrow { color: #fff; background: rgba(255,255,255,.12); }
.aid-eyebrow i { font-size: 12px; }
.aid-title {
  font-size: 40px; line-height: 1.2; font-weight: 700;
  color: var(--aid-ink); margin-bottom: 18px; letter-spacing: -.5px;
}
.aid-navy-bg .aid-title, .aid-navy-bg .aid-sub { color: #fff; }
.aid-title .aid-grad-text {
  background: var(--aid-grad); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent;
}
.aid-lead { font-size: 18px; color: var(--aid-muted); line-height: 1.8; }
.aid-center { text-align: center; }
.aid-center .aid-title { margin-left: auto; margin-right: auto; max-width: 760px; }
.aid-center .aid-lead { max-width: 720px; margin: 0 auto; }

/* ---- Alternating image + content rows ---- */
.aid-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.aid-split.aid-reverse .aid-split-media { order: 2; }
.aid-split-content .aid-title { font-size: 34px; }
.aid-feature-list { margin: 26px 0 30px; padding: 0; list-style: none; }
.aid-feature-list li {
  position: relative; padding-left: 38px; margin-bottom: 16px;
  color: var(--aid-ink); font-weight: 500; font-size: 16px;
}
.aid-navy-bg .aid-feature-list li { color: rgba(255,255,255,.9); }
.aid-feature-list li i {
  position: absolute; left: 0; top: 1px; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--aid-grad); color: #fff; font-size: 11px;
}

/* ---- Media frame / illustrations ---- */
.aid-media-frame {
  position: relative; border-radius: 22px; overflow: visible;
}
.aid-media-frame svg { width: 100%; height: auto; display: block; }
.aid-media-card {
  background: #fff; border: 1px solid var(--aid-line);
  border-radius: 22px; padding: 22px; box-shadow: 0 30px 70px -30px rgba(16,23,57,.28);
}
.aid-navy-bg .aid-media-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.aid-blob {
  position: absolute; inset: -8% -6% auto auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle at 30% 30%, rgba(240,81,81,.18), transparent 65%);
  filter: blur(10px); z-index: -1; border-radius: 50%;
}
.aid-float { animation: aidFloat 6s ease-in-out infinite; }
.aid-float-2 { animation: aidFloat 7.5s ease-in-out infinite; }
@keyframes aidFloat { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-14px);} }

/* floating mini-badge over illustrations */
.aid-badge-chip {
  position: absolute; background: #fff; border-radius: 14px; padding: 12px 16px;
  box-shadow: 0 20px 45px -18px rgba(16,23,57,.4); display: flex; align-items: center;
  gap: 12px; font-weight: 600; color: var(--aid-ink); font-size: 14px;
}
.aid-badge-chip .ic {
  width: 38px; height: 38px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; color: #fff; font-size: 16px;
  background: var(--aid-grad);
}
.aid-badge-chip small { display: block; font-weight: 400; color: var(--aid-muted); font-size: 12px; }
.aid-chip-tl { top: 18px; left: -22px; }
.aid-chip-br { bottom: 22px; right: -18px; }

/* ---- Premium cards (solutions) ---- */
.aid-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 16px; }
.aid-card {
  background: #fff; border: 1px solid var(--aid-line); border-radius: 18px;
  padding: 34px 28px; transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
  position: relative; overflow: hidden; height: 100%;
}
.aid-card::after {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%;
  background: var(--aid-grad); transform: scaleX(0); transform-origin: left;
  transition: transform .45s ease;
}
.aid-card:hover { transform: translateY(-10px); box-shadow: 0 35px 60px -30px rgba(16,23,57,.32); border-color: transparent; }
.aid-card:hover::after { transform: scaleX(1); }
.aid-card .aid-ic {
  width: 64px; height: 64px; border-radius: 16px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 26px; color: #fff;
  background: var(--aid-grad); margin-bottom: 22px; transition: transform .45s ease;
}
.aid-card:hover .aid-ic { transform: rotate(-6deg) scale(1.06); }
.aid-card h4 { font-size: 20px; color: var(--aid-ink); margin-bottom: 12px; font-weight: 700; }
.aid-card p { font-size: 15px; margin: 0; }

/* ---- Benefit cards (icon + text horizontal) ---- */
.aid-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 16px; }
.aid-benefit {
  display: flex; gap: 18px; background: #fff; border: 1px solid var(--aid-line);
  border-radius: 16px; padding: 26px; transition: all .4s ease;
}
.aid-benefit:hover { box-shadow: 0 28px 55px -30px rgba(16,23,57,.3); transform: translateY(-6px); }
.aid-benefit .aid-ic-c {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 12px; color: var(--aid-blue);
  background: var(--primary10, rgba(240,81,81,.1)); display: inline-flex;
  align-items: center; justify-content: center; font-size: 20px; transition: all .4s ease;
}
.aid-benefit:hover .aid-ic-c { background: var(--aid-grad); color: #fff; }
.aid-benefit h5 { font-size: 17px; color: var(--aid-ink); margin-bottom: 8px; font-weight: 700; }
.aid-benefit p { font-size: 14.5px; margin: 0; }

/* ---- Stats counter band ---- */
.aid-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.aid-stat { text-align: center; padding: 10px; position: relative; }
.aid-stat:not(:last-child)::after {
  content: ""; position: absolute; right: -15px; top: 18%; height: 64%; width: 1px;
  background: rgba(255,255,255,.16);
}
.aid-stat .aid-num {
  font-size: 50px; font-weight: 800; line-height: 1; color: #fff;
  display: inline-flex; align-items: baseline;
}
.aid-stat .aid-num .suf { background: var(--aid-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.aid-stat p { margin-top: 12px; color: rgba(255,255,255,.72); font-size: 15px; }

/* ---- Industries pills ---- */
.aid-pills { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.aid-pill {
  display: inline-flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--aid-line); border-radius: 50px; padding: 13px 22px;
  font-weight: 600; color: var(--aid-ink); font-size: 15px; transition: all .35s ease;
}
.aid-pill i { color: var(--aid-blue); transition: all .35s ease; }
.aid-pill:hover { background: var(--aid-grad); color: #fff; border-color: transparent; transform: translateY(-4px); }
.aid-pill:hover i { color: #fff; }

/* ---- CTA ---- */
.aid-cta-wrap {
  position: relative; border-radius: 28px; overflow: hidden;
  background: var(--aid-grad-navy); padding: 70px 60px; text-align: center;
}
.aid-cta-wrap::before, .aid-cta-wrap::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(8px);
}
.aid-cta-wrap::before { width: 320px; height: 320px; top: -120px; right: -80px; background: radial-gradient(circle, rgba(240,81,81,.4), transparent 65%); }
.aid-cta-wrap::after  { width: 280px; height: 280px; bottom: -130px; left: -60px; background: radial-gradient(circle, rgba(250,111,111,.35), transparent 65%); }
.aid-cta-wrap .aid-title { color: #fff; position: relative; }
.aid-cta-wrap p { color: rgba(255,255,255,.8); position: relative; max-width: 640px; margin: 0 auto 30px; }
.aid-btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  background: #fff; color: var(--aid-navy); font-weight: 700; font-size: 15px;
  padding: 17px 34px; border-radius: 50px; transition: all .4s ease; border: none;
}
.aid-btn i { transition: transform .4s ease; }
.aid-btn:hover { background: var(--aid-blue); color: #fff; transform: translateY(-3px); box-shadow: 0 20px 40px -16px rgba(240,81,81,.6); }
.aid-btn:hover i { transform: translate(4px,-4px); }
.aid-btn.aid-btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; margin-left: 14px; }
.aid-btn.aid-btn-ghost:hover { background: #fff; color: var(--aid-navy); }

/* ---- SVG illustration accents ---- */
.aid-page .aid-stroke-anim { stroke-dasharray: 600; stroke-dashoffset: 600; animation: aidDraw 2.4s ease forwards; }
@keyframes aidDraw { to { stroke-dashoffset: 0; } }
.aid-pulse { transform-origin: center; animation: aidPulse 2.6s ease-in-out infinite; }
@keyframes aidPulse { 0%,100% { opacity: .35; transform: scale(.9);} 50% { opacity: 1; transform: scale(1.08);} }
.aid-bar-grow { transform-origin: bottom; animation: aidBar 1.4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes aidBar { from { transform: scaleY(0);} to { transform: scaleY(1);} }

/* ---- Responsive ---- */
@media (max-width: 1199px) {
  .aid-cards { grid-template-columns: repeat(2, 1fr); }
  .aid-title { font-size: 34px; }
}
@media (max-width: 991px) {
  .aid-page .aid-section { padding: 64px 0; }
  .aid-split { grid-template-columns: 1fr; gap: 40px; }
  .aid-split.aid-reverse .aid-split-media { order: 0; }
  .aid-benefits { grid-template-columns: repeat(2, 1fr); }
  .aid-stats { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
  .aid-stat:nth-child(2)::after { display: none; }
  .aid-title { font-size: 30px; }
  .aid-cta-wrap { padding: 54px 30px; }
}
@media (max-width: 575px) {
  .aid-cards, .aid-benefits, .aid-stats { grid-template-columns: 1fr; }
  .aid-stat::after { display: none !important; }
  .aid-title { font-size: 26px; }
  .aid-split-content .aid-title { font-size: 26px; }
  .aid-chip-tl, .aid-chip-br { display: none; }
  .aid-btn.aid-btn-ghost { margin-left: 0; margin-top: 14px; }
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .aid-float, .aid-float-2, .aid-pulse, .aid-stroke-anim, .aid-bar-grow { animation: none !important; }
}

/* ---- Scoped hero treatment (this page only) ----
   Hides the placeholder banner image and applies a premium
   gradient + subtle grid so the hero feels intentional. Remove
   the `aid-hero` class from the breadcrumb to restore default. */
.breadcrumb__area.aid-hero {
  background: linear-gradient(115deg, #1a0a0a 0%, #3a1616 55%, #b3261e 100%);
}
.breadcrumb__area.aid-hero .breadcrumb__thumb,
.breadcrumb__area.aid-hero .breadcrumb__thumb_2 { display: none; }
.breadcrumb__area.aid-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image:
    radial-gradient(circle at 82% 18%, rgba(240,81,81,.45), transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(250,111,111,.30), transparent 45%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 46px 46px, 46px 46px;
}
.breadcrumb__area.aid-hero .small-container { position: relative; z-index: 1; }