/* ═══════════════════════════════════════════════════════════════
   INEXUS — PURPLE COW HOMEPAGE ADDITIONS
   File: css/home-purple-cow.css   (linked ONLY in index.html, after style.css)

   Safe by design:
   • Every NEW class starts with  ix-uq-   (not used anywhere in style.css)
   • The only other rule is .ix-stat-note (new small line under a stat)
   • No existing class is renamed or overridden, so other pages and
     other homepage sections are untouched.
   Theme: Navy #0b2c3d | Gold #cfa36a | Font: Poppins
═══════════════════════════════════════════════════════════════ */

/* ── Small sub-line under the "15+ License Categories" stat ── */
.ix-stat-note {
  display: block;
  font-size: 11.5px;
  font-style: italic;
  color: #cfa36a;
  margin-top: 4px;
  letter-spacing: .2px;
}

/* ═════════════ "THE UNUSUAL STUFF" SECTION ═════════════ */
.ix-uq-section {
  position: relative;
  padding: 90px 0 90px;
  background: #0b2c3d;
  /* glows kept away from the top edge so it blends seamlessly with the navy behind the stats card */
  background-image:
    radial-gradient(520px circle at 85% 55%, rgba(207,163,106,.12) 0%, transparent 70%),
    radial-gradient(480px circle at 5% 95%, rgba(207,163,106,.08) 0%, transparent 70%);
  color: #fff;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  scroll-margin-top: 140px; /* hero button scrolls here without hiding under the sticky header */
}

.ix-uq-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Header ── */
.ix-uq-header {
  max-width: 760px;
  margin-bottom: 52px;
}

.ix-uq-pretitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #cfa36a;
  background: rgba(207,163,106,.12);
  border: 1px solid rgba(207,163,106,.35);
  padding: 7px 18px;
  border-radius: 40px;
  margin-bottom: 22px;
}

.ix-uq-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 18px;
}
.ix-uq-title span { color: #cfa36a; }

.ix-uq-desc {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,.75);
  margin: 0;
}

/* ── Card grid: 3 columns → 2 → 1 ── */
.ix-uq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.ix-uq-card {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 32px 28px 30px;
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
  overflow: hidden;
}

.ix-uq-card::before {               /* gold top accent that grows on hover */
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 40px;
  background: #cfa36a;
  transition: width .4s ease;
}

.ix-uq-card:hover {
  transform: translateY(-6px);
  border-color: rgba(207,163,106,.55);
  background: rgba(207,163,106,.07);
}
.ix-uq-card:hover::before { width: 100%; }

.ix-uq-num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255,255,255,.07);
}

.ix-uq-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(207,163,106,.14);
  color: #cfa36a;
  font-size: 22px;
  margin-bottom: 20px;
}

.ix-uq-card-title {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.35;
}

.ix-uq-card-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.72);
  margin: 0;
}

/* ── 6th tile = call to action ── */
.ix-uq-card-cta {
  background: #cfa36a;
  border-color: #cfa36a;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.ix-uq-card-cta::before { display: none; }
.ix-uq-card-cta:hover { background: #d8b27e; border-color: #d8b27e; }

.ix-uq-cta-text {
  font-size: 18px;
  line-height: 1.55;
  color: #0b2c3d;
  margin: 0;
}
.ix-uq-cta-text strong { font-weight: 800; }

.ix-uq-cta-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0b2c3d;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 6px;
  transition: gap .3s ease, background .3s ease;
}
.ix-uq-cta-btn:hover { gap: 16px; background: #133f56; color: #fff; }

/* ── Responsive ── */
@media (max-width: 992px) {
  .ix-uq-grid { grid-template-columns: repeat(2, 1fr); }
  .ix-uq-section { padding: 90px 0 70px; }
}

@media (max-width: 600px) {
  .ix-uq-section { padding: 64px 0 56px; }
  .ix-uq-container { padding: 0 16px; }
  .ix-uq-header { margin-bottom: 34px; text-align: center; }
  .ix-uq-desc { font-size: 15px; }
  .ix-uq-grid { grid-template-columns: 1fr; gap: 16px; }
  .ix-uq-card { padding: 26px 22px; }
  .ix-uq-cta-btn { align-self: stretch; justify-content: center; }
  .ix-stat-note { font-size: 11px; }
}

/* ═════════════ STATIC HERO: grow to fit its text on phones/tablets ═════════════
   The old slider stacked slides on top of each other (position:absolute), so the
   hero could not grow when text got longer. With one slide we can put it back in
   normal flow on small screens, so the text and buttons never spill out.
   Scoped to .ix-hero-static (only on the homepage hero). */
@media (max-width: 768px) {
  .ix-slider-banner.ix-hero-static .ix-slider-wrapper,
  .ix-slider-banner.ix-hero-static .ix-slide {
    position: relative !important;
    height: auto !important;
  }
  .ix-slider-banner.ix-hero-static .ix-slider-wrapper { width: 100% !important; }
  .ix-slider-banner.ix-hero-static .ix-banner-content { padding-bottom: 48px !important; }
}

/* ═════════════ STATS CARD: half on the hero, half on navy (DESKTOP ONLY) ═════════════
   Desktop (1025px and wider): the space behind the lower part of the card is navy
   (#0b2c3d, same as the "Fall Through the Cracks" section below), so the card sits
   half on the hero photo and half on navy, with no white strip.
   Tablets and phones (1024px and below): nothing here applies, so the stats bar keeps
   its original look (starts after a space below the hero).
   To change where "desktop" starts, edit the 1025px below AND in main.js.
   --ix-stats-overlap = how far the card rises into the hero; main.js sets it to half
   the card's height (never covering the hero buttons); 50px is the fallback. */
@media (min-width: 1025px) {
  .ix-stats-section.ix-stats-split {
    margin-top: calc(-1 * var(--ix-stats-overlap, 50px)) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: linear-gradient(to bottom,
                transparent var(--ix-stats-overlap, 50px),
                #0b2c3d var(--ix-stats-overlap, 50px));
  }
  .ix-stats-section.ix-stats-split .ix-stats-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}