/* =========================================================================
   XONWARE — PREMIUM POLISH LAYER (Stripe-class component upgrade)
   ----------------------------------------------------------------------
   Loaded LAST in the cascade so every rule here wins over the original
   component CSS. Purely additive — no existing file is modified.

   Targets the visual surfaces a visitor sees within 3 seconds:
     · Cards (56 instances site-wide)
     · KPI tiles + gradient numerals
     · Buttons (premium + secondary)
     · Section headers (animated gradient underline)
     · Hero ambient gradient mesh
     · Icon containers
     · Card cursor-glow follow

   Respects prefers-reduced-motion.
   ========================================================================= */

/* =========================================================================
   1. UNIVERSAL CARD SYSTEM — gradient border, deep shadow, hover lift
   ========================================================================= */
.card,
.feature-card,
.xa-pillar,
.xa-feature,
.blog-card,
.xa-modgrid__c,
.contact-info-card,
.tabshow__panel,
.xa-mini__tile {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border: 1px solid transparent;
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 1px 2px rgba(15, 20, 50, .04),
    0 8px 16px -4px rgba(15, 20, 50, .06),
    0 24px 48px -20px rgba(15, 20, 50, .09);
  transition:
    transform .4s cubic-bezier(.22, .7, .2, 1),
    box-shadow .4s cubic-bezier(.22, .7, .2, 1),
    border-color .3s ease;
  isolation: isolate;
  overflow: hidden;
}

/* Gradient hairline border — appears via ::before mask trick */
.card::before,
.feature-card::before,
.xa-pillar::before,
.xa-feature::before,
.blog-card::before,
.xa-modgrid__c::before,
.contact-info-card::before,
.xa-mini__tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(26, 35, 126, .22) 0%,
    rgba(139, 197, 63, .35) 40%,
    rgba(34, 211, 238, .28) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 0;
}

/* Cursor-tracked radial glow inside each card — set via JS custom props */
.card::after,
.feature-card::after,
.xa-pillar::after,
.xa-feature::after,
.blog-card::after,
.xa-modgrid__c::after,
.contact-info-card::after,
.xa-mini__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(139, 197, 63, .10),
    transparent 45%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 0;
}

/* Move children above the pseudo-elements */
.card > *,
.feature-card > *,
.xa-pillar > *,
.xa-feature > *,
.blog-card > *,
.xa-modgrid__c > *,
.contact-info-card > *,
.xa-mini__tile > * {
  position: relative;
  z-index: 1;
}

/* Hover state: lift + show gradient border + show glow */
.card:hover,
.feature-card:hover,
.xa-pillar:hover,
.xa-feature:hover,
.blog-card:hover,
.xa-modgrid__c:hover,
.contact-info-card:hover,
.xa-mini__tile:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 2px 4px rgba(15, 20, 50, .05),
    0 16px 32px -8px rgba(15, 20, 50, .10),
    0 48px 80px -22px rgba(15, 20, 50, .16);
}
.card:hover::before,
.feature-card:hover::before,
.xa-pillar:hover::before,
.xa-feature:hover::before,
.blog-card:hover::before,
.xa-modgrid__c:hover::before,
.contact-info-card:hover::before,
.xa-mini__tile:hover::before {
  opacity: 1;
}
.card:hover::after,
.feature-card:hover::after,
.xa-pillar:hover::after,
.xa-feature:hover::after,
.blog-card:hover::after,
.xa-modgrid__c:hover::after,
.contact-info-card:hover::after,
.xa-mini__tile:hover::after {
  opacity: 1;
}

/* =========================================================================
   2. KPI TILES — gradient numerals + lift + leaf-glow border on hover
   ========================================================================= */
.xa-kpi {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border: 1px solid rgba(26, 35, 126, .06);
  border-radius: 18px;
  padding: 36px 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 4px 8px -2px rgba(15, 20, 50, .04),
    0 16px 32px -12px rgba(15, 20, 50, .08);
  transition:
    transform .4s cubic-bezier(.22, .7, .2, 1),
    box-shadow .4s cubic-bezier(.22, .7, .2, 1),
    border-color .3s ease;
  overflow: hidden;
}
.xa-kpi::before {
  /* Subtle leaf-cyan accent strip at the top edge */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ink-700) 0%, var(--leaf-500) 50%, var(--cyan-500) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s cubic-bezier(.22, .7, .2, 1) .15s;
}
.xa-kpi.is-in::before,
[data-anim].is-in .xa-kpi::before,
.xa-kpis.is-in .xa-kpi::before {
  transform: scaleX(1);
}
.xa-kpi:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 197, 63, .25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 8px 16px -4px rgba(15, 20, 50, .06),
    0 32px 64px -18px rgba(15, 20, 50, .14),
    0 0 0 1px rgba(139, 197, 63, .12);
}

/* Gradient on the actual numeral — premium feel */
.xa-kpi__v {
  background: linear-gradient(135deg,
    var(--ink-900) 0%,
    var(--ink-700) 50%,
    var(--leaf-700) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.xa-kpi__v sup {
  /* sup is inline inside a gradient-clipped parent — re-derive its own */
  background: linear-gradient(135deg, var(--leaf-600), var(--leaf-700));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* =========================================================================
   3. BUTTONS — shine sweep on hover for premium, arrow nudge for secondary
   ========================================================================= */
.btn--premium {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 255, 255, .42) 50%,
    transparent 100%);
  transform: skewX(-18deg);
  transition: left .85s cubic-bezier(.22, .7, .2, 1);
  pointer-events: none;
  z-index: 1;
}
.btn--premium > * { position: relative; z-index: 2; }
.btn--premium:hover::before {
  left: 160%;
}

/* Secondary buttons get a sliding arrow */
.btn--secondary svg,
.btn svg {
  transition: transform .3s cubic-bezier(.22, .7, .2, 1);
}
.btn--secondary:hover svg,
.btn--premium:hover svg {
  transform: translateX(4px);
}

/* All buttons: subtle scale-down on press */
.btn:active {
  transform: translateY(0) scale(.985);
}

/* =========================================================================
   4. SECTION HEADERS — animated gradient underline draws in on reveal
   ========================================================================= */
/* The h2 inside a section header gets an after-pseudo gradient underline.
   It draws in (width: 0 → 80px) when the section's data-anim/data-reveal
   parent enters viewport (already toggled by existing IO handlers). */
.xa-sec h2.xa-h2,
.xa-sec h2.sec-head__title,
.sec-head h2,
[data-reveal] > h2.xa-h2,
[data-anim] > h2.xa-h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 18px;
}
.xa-sec h2.xa-h2::after,
.xa-sec h2.sec-head__title::after,
.sec-head h2::after,
[data-reveal] > h2.xa-h2::after,
[data-anim] > h2.xa-h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--leaf-500), var(--cyan-500));
  border-radius: 999px;
  transition: width 1s cubic-bezier(.22, .7, .2, 1) .25s;
}
/* Centered section heads anchor the underline at centre */
.sec-head--center h2::after,
[style*="text-align:center"] > h2.xa-h2::after,
.xa-sec [data-anim][style*="text-align:center"] h2.xa-h2::after {
  left: 50%;
  transform: translateX(-50%);
}
/* Trigger: any reveal/anim parent that's .is-in fires the underline */
[data-reveal].is-in h2.xa-h2::after,
[data-anim].is-in h2.xa-h2::after,
.is-in.sec-head h2::after,
.sec-head h2.is-in::after {
  width: 72px;
}
/* As a fallback, give every h2.xa-h2 a default underline after 800ms even
   if no reveal trigger fires — ensures the design feature is visible. */
@keyframes xa-underline-bloom {
  to { width: 72px; }
}
.xa-h2::after {
  animation: xa-underline-bloom 1s cubic-bezier(.22, .7, .2, 1) .4s both;
}

/* =========================================================================
   5. HERO AMBIENT GRADIENT MESH — slow breathing colour wash
   ========================================================================= */
/* Adds a continuous slow-cycling gradient mesh behind hero sections.
   Subtle: the saturation is low. Effect is "the page feels alive". */
.xa-multihero,
.page-hero {
  position: relative;
}
.xa-multihero::before,
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(26, 35, 126, .07) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 85% 25%, rgba(139, 197, 63, .06) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 50% 95%, rgba(34, 211, 238, .07) 0%, transparent 70%);
  background-size: 180% 180%, 180% 180%, 180% 180%;
  animation: xa-mesh-drift 24s ease-in-out infinite alternate;
}
@keyframes xa-mesh-drift {
  0%   { background-position:   0% 0%,  100% 0%,    50% 100%; }
  50%  { background-position:  20% 30%,  80% 20%,   60%  80%; }
  100% { background-position:  40% 10%, 100% 40%,   40%  90%; }
}

/* For .page-hero--photo (inner hero), the mesh sits ABOVE the photo
   but BELOW the overlay scrim, so it's almost invisible — kill it there. */
.page-hero--photo::before {
  display: none;
}

/* =========================================================================
   6. ICON CONTAINERS — gradient backdrop + inner glow
   ========================================================================= */
.card__icon,
.xa-pillar__icon,
.tabshow__tab-icon,
.xa-feature__icon {
  background: linear-gradient(135deg,
    rgba(26, 35, 126, .06) 0%,
    rgba(139, 197, 63, .12) 100%);
  border: 1px solid rgba(139, 197, 63, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 4px 8px -2px rgba(26, 35, 126, .08);
  transition: transform .3s ease, border-color .3s ease;
}
.card:hover .card__icon,
.xa-pillar:hover .xa-pillar__icon,
.xa-feature:hover .xa-feature__icon,
.tabshow__tab:hover .tabshow__tab-icon {
  transform: scale(1.06) rotate(-2deg);
  border-color: rgba(139, 197, 63, .35);
}

/* =========================================================================
   7. FEATURE NUMERALS — make .xa-feature__num pop with gradient
   ========================================================================= */
.xa-feature__num,
.xa-pillar__no {
  background: linear-gradient(135deg,
    var(--leaf-600) 0%,
    var(--leaf-700) 50%,
    var(--ink-700) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   8. TABSHOW (tabs) — sliding indicator bar + smoother active transition
   ========================================================================= */
.tabshow__tab {
  position: relative;
  overflow: hidden;
  transition:
    transform .35s cubic-bezier(.22, .7, .2, 1),
    border-color .3s ease,
    background-color .35s ease,
    color .35s ease,
    box-shadow .4s ease;
}
.tabshow__tab::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--leaf-500), var(--cyan-500));
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .4s cubic-bezier(.22, .7, .2, 1);
}
.tabshow__tab.is-active::before,
.tabshow__tab:hover::before {
  transform: scaleY(.7);
}
.tabshow__tab.is-active::before {
  transform: scaleY(1);
}

/* =========================================================================
   9. BLOG CARD POLISH — extra: image hover zoom + gradient overlay on hover
   ========================================================================= */
.blog-card img,
.blog-card .blog-card__img,
.blog-card__cover {
  transition: transform .7s cubic-bezier(.22, .7, .2, 1);
}
.blog-card:hover img,
.blog-card:hover .blog-card__img,
.blog-card:hover .blog-card__cover {
  transform: scale(1.05);
}
.blog-card__title {
  transition: color .3s ease;
}
.blog-card:hover .blog-card__title {
  color: var(--leaf-700);
}

/* =========================================================================
   10. SECTION DIVIDERS — subtle animated accent strips between sections
   ========================================================================= */
.xa-sec + .xa-sec {
  position: relative;
}
.xa-sec + .xa-sec::before {
  /* Faint horizontal gradient line between major sections */
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(160px, 30%, 320px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(26, 35, 126, .15) 20%,
    rgba(139, 197, 63, .25) 50%,
    rgba(26, 35, 126, .15) 80%,
    transparent 100%);
  pointer-events: none;
}

/* =========================================================================
   11. GENERIC LIFT for any .xa-frame, .xa-frame--shot, .xa-illust-frame
        (already has tilt — adds presence)
   ========================================================================= */
.xa-frame,
.xa-illust-frame {
  transition:
    transform .4s cubic-bezier(.22, .7, .2, 1),
    box-shadow .5s cubic-bezier(.22, .7, .2, 1);
}
.xa-frame {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .5) inset,
    0 4px 8px -2px rgba(15, 20, 50, .06),
    0 24px 48px -20px rgba(15, 20, 50, .14),
    0 48px 80px -32px rgba(26, 35, 126, .18);
}

/* =========================================================================
   12. EYEBROW MICRO-POLISH — coloured dot + monospace, premium subtle
   ========================================================================= */
.xa-eyebrow {
  position: relative;
}

/* =========================================================================
   13. PRIMARY CTA SECTION (.xa-cta) — give it gravity
   ========================================================================= */
.xa-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.xa-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(139, 197, 63, .15), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(34, 211, 238, .12), transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: xa-mesh-drift 18s ease-in-out infinite alternate;
}
.xa-cta > * { position: relative; z-index: 1; }

/* =========================================================================
   14. REDUCED-MOTION — disable all continuous animations, keep hover lifts
        (hover lifts are user-initiated, not respected unless explicitly so)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .xa-multihero::before,
  .page-hero::before,
  .xa-cta::before {
    animation: none !important;
  }
  .xa-h2::after {
    animation: none !important;
    width: 72px;
  }
  .card,
  .feature-card,
  .xa-pillar,
  .xa-feature,
  .blog-card,
  .xa-modgrid__c,
  .contact-info-card,
  .xa-mini__tile,
  .xa-kpi {
    transition: none !important;
  }
  .card:hover,
  .feature-card:hover,
  .xa-pillar:hover,
  .xa-feature:hover,
  .blog-card:hover,
  .xa-modgrid__c:hover,
  .contact-info-card:hover,
  .xa-mini__tile:hover,
  .xa-kpi:hover {
    transform: none !important;
  }
}

/* =========================================================================
   PHASE 4 — Module card upgrade (Stripe Enterprise style)
   Each card now has a real icon (per module), better typography hierarchy,
   and a "Learn more →" arrow that slides in on hover. Targets the home
   modules grid specifically via .xa-modgrid__c--styled.
   ========================================================================= */

.xa-modgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 1.4vw, 24px);
}

.xa-modgrid__c--styled {
  /* Build on the universal card system already established in this file.
     Override sizing + structure here. */
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 26px 26px;
  min-height: 220px;
  cursor: default;
}

/* Icon container — gradient circle, larger than original (~52px) */
.xa-modgrid__c--styled .xa-modgrid__c-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(26, 35, 126, .08) 0%,
    rgba(139, 197, 63, .14) 100%);
  border: 1px solid rgba(139, 197, 63, .22);
  color: var(--ink-700);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 4px 12px -4px rgba(26, 35, 126, .12);
  transition:
    transform .35s cubic-bezier(.22, .7, .2, 1),
    border-color .3s ease,
    color .3s ease,
    box-shadow .35s ease;
}
.xa-modgrid__c--styled:hover .xa-modgrid__c-icon {
  transform: scale(1.08) rotate(-3deg);
  border-color: rgba(139, 197, 63, .45);
  color: var(--leaf-700);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 8px 20px -6px rgba(139, 197, 63, .28);
}

/* Body — title + paragraph, better hierarchy */
.xa-modgrid__c--styled .xa-modgrid__c-body {
  flex: 1;
}
.xa-modgrid__c--styled .xa-modgrid__c-body h4 {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.012em;
  color: var(--ink-900);
  margin: 0 0 8px 0;
  line-height: 1.3;
}
.xa-modgrid__c--styled .xa-modgrid__c-body p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-60);
  margin: 0;
}

/* "Learn more →" affordance — hidden at rest, slides in on hover */
.xa-modgrid__c--styled .xa-modgrid__c-arr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leaf-700);
  margin-top: 4px;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity .3s ease,
    transform .35s cubic-bezier(.22, .7, .2, 1);
}
.xa-modgrid__c--styled .xa-modgrid__c-arr::before {
  content: 'Learn more';
}
.xa-modgrid__c--styled .xa-modgrid__c-arr svg {
  transition: transform .35s cubic-bezier(.22, .7, .2, 1);
}
.xa-modgrid__c--styled:hover .xa-modgrid__c-arr {
  opacity: 1;
  transform: translateX(0);
}
.xa-modgrid__c--styled:hover .xa-modgrid__c-arr svg {
  transform: translateX(4px);
}

/* Slightly stronger lift than the universal card hover */
.xa-modgrid__c--styled:hover {
  transform: translateY(-6px);
}

/* Subtle category accent — different icons get different colour weights
   so the grid doesn't feel monotone. Network/billing modules lean cyan,
   compliance/admin lean leaf, customer-facing lean navy. */
.xa-modgrid__c--styled [data-icon="router"],
.xa-modgrid__c--styled [data-icon="olt"],
.xa-modgrid__c--styled [data-icon="tv"] {
  background: linear-gradient(135deg, rgba(34, 211, 238, .10) 0%, rgba(26, 35, 126, .08) 100%);
}
.xa-modgrid__c--styled [data-icon="shield"],
.xa-modgrid__c--styled [data-icon="target"] {
  background: linear-gradient(135deg, rgba(139, 197, 63, .14) 0%, rgba(26, 35, 126, .06) 100%);
}
.xa-modgrid__c--styled [data-icon="bar-chart"],
.xa-modgrid__c--styled [data-icon="dashboard"] {
  background: linear-gradient(135deg, rgba(26, 35, 126, .12) 0%, rgba(139, 197, 63, .08) 100%);
}

/* Reduced-motion: no transforms */
@media (prefers-reduced-motion: reduce) {
  .xa-modgrid__c--styled,
  .xa-modgrid__c--styled .xa-modgrid__c-icon,
  .xa-modgrid__c--styled .xa-modgrid__c-arr,
  .xa-modgrid__c--styled .xa-modgrid__c-arr svg {
    transition: none !important;
    transform: none !important;
  }
  .xa-modgrid__c--styled .xa-modgrid__c-arr {
    opacity: 1;
  }
}

/* =========================================================================
   PHASE 4b — Integrations + Modules card upgrades (Stripe Enterprise style)
   ========================================================================= */

/* ---- Integrations "why" cards (.xa-intcat--styled) -------------------- */
.xa-intcat--styled {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 200px;
}
.xa-intcat--styled .xa-intcat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(26, 35, 126, .08) 0%,
    rgba(139, 197, 63, .14) 100%);
  border: 1px solid rgba(139, 197, 63, .22);
  color: var(--ink-700);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 4px 12px -4px rgba(26, 35, 126, .12);
  transition:
    transform .35s cubic-bezier(.22, .7, .2, 1),
    border-color .3s ease,
    color .3s ease,
    box-shadow .35s ease;
}
.xa-intcat--styled:hover .xa-intcat__icon {
  transform: scale(1.08) rotate(-3deg);
  border-color: rgba(139, 197, 63, .45);
  color: var(--leaf-700);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 8px 20px -6px rgba(139, 197, 63, .28);
}
/* Per-icon category tints */
.xa-intcat--styled [data-icon="zap"] {
  background: linear-gradient(135deg, rgba(255, 200, 50, .15) 0%, rgba(139, 197, 63, .12) 100%);
  color: var(--leaf-700);
}
.xa-intcat--styled [data-icon="eye"] {
  background: linear-gradient(135deg, rgba(34, 211, 238, .14) 0%, rgba(26, 35, 126, .08) 100%);
}
.xa-intcat--styled [data-icon="gauge"] {
  background: linear-gradient(135deg, rgba(139, 197, 63, .14) 0%, rgba(34, 211, 238, .08) 100%);
}

/* Learn-more arrow on hover */
.xa-intcat--styled .xa-intcat__arr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leaf-700);
  margin-top: 16px;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity .3s ease,
    transform .35s cubic-bezier(.22, .7, .2, 1);
}
.xa-intcat--styled .xa-intcat__arr::before { content: 'Learn more'; }
.xa-intcat--styled .xa-intcat__arr svg {
  transition: transform .35s cubic-bezier(.22, .7, .2, 1);
}
.xa-intcat--styled:hover .xa-intcat__arr {
  opacity: 1;
  transform: translateX(0);
}
.xa-intcat--styled:hover .xa-intcat__arr svg {
  transform: translateX(4px);
}
.xa-intcat--styled:hover {
  transform: translateY(-6px);
}

/* ---- /modules tab-catalog card upgrade -------------------------------- */
/* The existing card has rich content already (number badge, title,
   tagline, list). We add the hover affordance + lift. */
.xa-modcard {
  cursor: default;
}
.xa-modcard:hover {
  transform: translateY(-6px);
  /* Boost the existing inline shadow with a sharper hover state */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 4px 8px rgba(15, 20, 50, .06),
    0 24px 48px -12px rgba(15, 20, 50, .14),
    0 48px 96px -32px rgba(26, 35, 126, .22) !important;
  border-color: rgba(139, 197, 63, .35) !important;
}
.xa-modcard--flag:hover {
  /* Flagship dark card — leaf-green halo, no border colour change */
  box-shadow:
    0 24px 48px -16px rgba(15, 20, 50, .35),
    0 60px 100px -32px rgba(139, 197, 63, .25),
    0 0 0 1px rgba(139, 197, 63, .25) !important;
}
/* The module-number badge gets a subtle scale on card hover */
.xa-modcard > div > div:first-child > div:first-child {
  transition: transform .35s cubic-bezier(.22, .7, .2, 1);
}
.xa-modcard:hover > div > div:first-child > div:first-child {
  transform: scale(1.06);
}

/* Learn-more arrow on hover (appears bottom-right of the card) */
.xa-modcard__arr {
  position: absolute;
  right: 28px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leaf-700);
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity .3s ease,
    transform .35s cubic-bezier(.22, .7, .2, 1);
}
.xa-modcard__arr::before { content: 'Details'; }
.xa-modcard--flag .xa-modcard__arr {
  color: var(--leaf-400);
}
.xa-modcard__arr svg {
  transition: transform .35s cubic-bezier(.22, .7, .2, 1);
}
.xa-modcard:hover .xa-modcard__arr {
  opacity: 1;
  transform: translateX(0);
}
.xa-modcard:hover .xa-modcard__arr svg {
  transform: translateX(4px);
}

/* Make room for the absolute arrow by adding extra bottom padding on hover */
.xa-modcard {
  padding-bottom: 50px !important;
}

@media (prefers-reduced-motion: reduce) {
  .xa-intcat--styled,
  .xa-intcat--styled *,
  .xa-modcard,
  .xa-modcard * {
    transition: none !important;
    transform: none !important;
  }
  .xa-intcat--styled .xa-intcat__arr,
  .xa-modcard .xa-modcard__arr {
    opacity: 1;
  }
}

/* =========================================================================
   INSIDE XIMS — Product walkthrough section
   (Stripe-style browser-frame mockup with floating annotation callouts)
   ========================================================================= */

.xa-inside {
  padding-block: 96px 88px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}

.xa-inside__header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 64px;
}

/* The "stage" holds the browser frame and the absolute-positioned annotations */
.xa-inside__stage {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  /* Provide breathing room for annotations that overhang the frame */
  padding: 20px 60px;
}

/* ---- Browser window frame -------------------------------------------- */
.xa-inside__frame {
  position: relative;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow:
    0 4px 8px rgba(15, 20, 50, .04),
    0 24px 48px -12px rgba(15, 20, 50, .14),
    0 48px 96px -32px rgba(26, 35, 126, .22);
  transition:
    transform .5s cubic-bezier(.22, .7, .2, 1),
    box-shadow .5s ease;
  will-change: transform;
}
.xa-inside__frame:hover {
  box-shadow:
    0 4px 8px rgba(15, 20, 50, .05),
    0 32px 64px -16px rgba(15, 20, 50, .18),
    0 64px 120px -40px rgba(26, 35, 126, .26);
}

/* Browser chrome bar (the top of the window with dots + URL) */
.xa-inside__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #fafbfc 0%, #f3f4f6 100%);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.xa-inside__chrome-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.xa-inside__chrome-dot--r { background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.1); }
.xa-inside__chrome-dot--y { background: #febc2e; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.1); }
.xa-inside__chrome-dot--g { background: #28c840; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.1); }

.xa-inside__chrome-url {
  flex: 1;
  margin: 0 auto;
  max-width: 480px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 14px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-60);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.01em;
}
.xa-inside__chrome-url svg {
  flex-shrink: 0;
  color: var(--leaf-700);
}

/* Subtle "live" pulse indicator on the right of the chrome */
.xa-inside__chrome-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--leaf-500);
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 0 0 0 rgba(139, 197, 63, 0.6);
  animation: xa-inside-livedot 2.2s ease-out infinite;
}
@keyframes xa-inside-livedot {
  0%   { box-shadow: 0 0 0 0   rgba(139, 197, 63, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(139, 197, 63, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(139, 197, 63, 0);   }
}

/* The actual screenshot */
.xa-inside__shot {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Floating annotation callouts ------------------------------------ */
.xa-inside__notes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.xa-inside__note {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 260px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(26, 35, 126, 0.10);
  border-radius: 14px;
  padding: 14px 16px;
  pointer-events: auto;
  box-shadow:
    0 4px 8px rgba(15, 20, 50, .06),
    0 16px 36px -8px rgba(15, 20, 50, .14);
  transition:
    transform .35s cubic-bezier(.22, .7, .2, 1),
    box-shadow .35s ease,
    border-color .3s ease;
  z-index: 3;
}
.xa-inside__note:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 197, 63, 0.40);
  box-shadow:
    0 6px 12px rgba(15, 20, 50, .08),
    0 24px 48px -12px rgba(26, 35, 126, .22);
}

/* Position each annotation around the frame.
   The horizontal overhang (translate -12% / +12%) is set by GSAP via
   xPercent so it can coexist with GSAP's scale tween. Hover-lift uses
   margin-top so it doesn't fight the GSAP transform either. */
.xa-inside__note--tl { top: 6%;    left: 0;  }
.xa-inside__note--tr { top: 14%;   right: 0; }
.xa-inside__note--bl { bottom: 14%; left: 0;  }
.xa-inside__note--br { bottom: 6%;  right: 0; }

.xa-inside__note:hover {
  margin-top: -3px;
}

/* Numeric badge — leaf-green gradient circle */
.xa-inside__note-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--leaf-500) 0%, var(--leaf-700) 100%);
  color: #fff;
  border-radius: 8px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: 0 2px 6px -1px rgba(139, 197, 63, 0.4);
}

.xa-inside__note-body {
  flex: 1;
  min-width: 0;
}
.xa-inside__note-body strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-100);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  line-height: 1.3;
}
.xa-inside__note-body p {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-60);
  margin: 0;
}

/* ---- Caption strip --------------------------------------------------- */
.xa-inside__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  text-align: center;
}
.xa-inside__caption-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.xa-inside__caption-row--more {
  color: var(--ink-40);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12px;
  font-family: inherit;
}
.xa-inside__caption-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--leaf-500);
  display: inline-block;
  box-shadow: 0 0 0 4px rgba(139, 197, 63, 0.15);
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 1080px) {
  .xa-inside__stage { padding: 20px 20px; }
  .xa-inside__note { width: 220px; }
  /* Reduce the horizontal overhang on smaller desktop widths.
     The actual offset is driven by GSAP xPercent — see motion-gsap.js
     where xPercent is set per breakpoint via matchMedia. */
}

@media (max-width: 760px) {
  .xa-inside { padding-block: 56px 48px; }
  .xa-inside__header { margin-bottom: 32px; }
  .xa-inside__stage { padding: 12px; }
  /* Stack annotations below the frame on mobile rather than overlap it */
  .xa-inside__notes {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 24px;
  }
  .xa-inside__note,
  .xa-inside__note--tl,
  .xa-inside__note--tr,
  .xa-inside__note--bl,
  .xa-inside__note--br {
    position: relative;
    width: 100%;
    top: auto; left: auto; right: auto; bottom: auto;
    transform: none;
  }
  .xa-inside__note--tl:hover,
  .xa-inside__note--tr:hover,
  .xa-inside__note--bl:hover,
  .xa-inside__note--br:hover {
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .xa-inside__chrome-pulse { animation: none; }
  .xa-inside__frame,
  .xa-inside__note { transition: none !important; }
}

/* =========================================================================
   PERFORMANCE — Mobile cost reductions
   ========================================================================= */

/* backdrop-filter is GPU-expensive on mobile.
   Drop it on small screens — solid white-translucent looks fine, just less
   "glassy". Applies to Inside XIMS annotations + any other glass cards. */
@media (max-width: 900px) {
  .xa-inside__note,
  .xa-stat-card-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.97);
  }
}

/* Disable hover transitions globally on touch devices — they fire on tap,
   then linger, creating visual jank. Hover effects aren't meaningful on
   touch anyway. */
@media (hover: none) and (pointer: coarse) {
  .xa-modgrid__c--styled,
  .xa-intcat--styled,
  .xa-modcard,
  .xa-inside__note,
  .xa-inside__frame,
  .xa-modcard:hover,
  .xa-modgrid__c--styled:hover,
  .xa-intcat--styled:hover {
    transition: none !important;
  }
  /* Suppress card hover lifts on touch */
  .xa-modgrid__c--styled:hover,
  .xa-intcat--styled:hover,
  .xa-modcard:hover,
  .xa-inside__note:hover,
  .xa-inside__frame:hover {
    transform: none !important;
    margin-top: 0 !important;
  }
}

/* =========================================================================
   INSIDE XIMS v2 — 3D isometric frame + live-data UI accent chips
   ----------------------------------------------------------------------
   Replaces the previous 4 numbered annotation callouts with Stripe-style
   floating UI chips (payment, signups, router, MRR). Frame is set at a
   fixed isometric angle (rotateY -6deg, rotateX 2deg) with a subtle float
   loop, separate ground shadow for depth.
   ========================================================================= */

/* 3D perspective context wrapping the frame */
.xa-inside__perspective {
  position: relative;
  perspective: 2200px;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Frame wrapper carries the isometric tilt + floating animation.
   The inner .xa-inside__frame keeps its own shadow rendering normally. */
.xa-inside__frame-wrap {
  position: relative;
  transform: rotateY(-6deg) rotateX(2deg);
  transform-origin: center center;
  transform-style: preserve-3d;
  animation: xa-inside-float 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes xa-inside-float {
  0%, 100% { transform: rotateY(-6deg) rotateX(2deg) translateY(0); }
  50%      { transform: rotateY(-6deg) rotateX(2deg) translateY(-10px); }
}

/* Override the v1 hover-shadow grow — the iso transform makes that look weird.
   Lock in a single composed shadow stack regardless of hover state. */
.xa-inside__frame,
.xa-inside__frame:hover {
  transition: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 2px 4px rgba(15, 20, 50, .04),
    0 12px 28px -8px rgba(15, 20, 50, .14),
    0 40px 80px -24px rgba(26, 35, 126, .26);
}

/* Ground shadow — soft elliptical blur under the rotated frame */
.xa-inside__ground {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -42px;
  height: 48px;
  background: radial-gradient(ellipse at center,
    rgba(15, 20, 50, 0.22) 0%,
    rgba(15, 20, 50, 0.10) 35%,
    transparent 70%);
  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
  animation: xa-inside-shadow 6s ease-in-out infinite;
}
@keyframes xa-inside-shadow {
  0%, 100% { transform: scaleX(1)   scaleY(1)   translateY(0); opacity: 1; }
  50%      { transform: scaleX(.92) scaleY(.85) translateY(0); opacity: .75; }
}

/* ---- Floating UI accent chips ------------------------------------- */
.xa-inside__chips {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.xa-inside__chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(26, 35, 126, 0.08);
  border-radius: 12px;
  padding: 11px 14px 11px 12px;
  pointer-events: auto;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 4px 8px rgba(15, 20, 50, .06),
    0 12px 28px -6px rgba(15, 20, 50, .18);
  will-change: transform;
  transition: box-shadow .35s ease;
}
.xa-inside__chip:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 6px 12px rgba(15, 20, 50, .08),
    0 20px 40px -10px rgba(26, 35, 126, .26);
}

/* ---- Chip internals ------------------------------------------------ */
.xa-inside__chip-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
}
.xa-inside__chip-icon--check {
  background: linear-gradient(135deg, var(--leaf-500) 0%, var(--leaf-700) 100%);
  box-shadow: 0 2px 6px -1px rgba(139, 197, 63, .50);
}

.xa-inside__chip-bignum {
  flex-shrink: 0;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-100);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}
.xa-inside__chip-trend { color: var(--leaf-700); }

.xa-inside__chip-pulse {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--leaf-500);
  box-shadow: 0 0 0 0 rgba(139, 197, 63, 0.55);
  animation: xa-chip-pulse 2.0s ease-out infinite;
}
@keyframes xa-chip-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(139, 197, 63, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(139, 197, 63, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(139, 197, 63, 0);    }
}

.xa-inside__chip-spark {
  flex-shrink: 0;
  width: 60px;
  height: 24px;
  color: var(--leaf-700);
}

.xa-inside__chip-body {
  min-width: 0;
}
.xa-inside__chip-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
  white-space: nowrap;
  margin-bottom: 2px;
}
.xa-inside__chip-sublabel {
  font-size: 11px;
  color: var(--ink-60);
  white-space: nowrap;
}
.xa-inside__chip-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-100);
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.xa-inside__chip-delta {
  color: var(--leaf-700);
  font-weight: 600;
  margin-left: 4px;
  font-size: 11px;
}

/* ---- Chip positions + bobbing animations -------------------------- */
.xa-inside__chip--payment {
  top: 8%;
  right: -2%;
  animation: xa-chip-bob 5.2s ease-in-out infinite;
}
.xa-inside__chip--signups {
  top: 24%;
  left: -3%;
  animation: xa-chip-bob 5.2s ease-in-out infinite 1.0s;
}
.xa-inside__chip--router {
  bottom: 22%;
  left: -1%;
  animation: xa-chip-bob 5.2s ease-in-out infinite 2.2s;
}
.xa-inside__chip--mrr {
  bottom: 8%;
  right: -2%;
  animation: xa-chip-bob 5.2s ease-in-out infinite 3.3s;
}
@keyframes xa-chip-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ---- Responsive — disable 3D on smaller screens ------------------- */
@media (max-width: 1180px) {
  .xa-inside__chip--payment { right: 2%; }
  .xa-inside__chip--signups { left: 2%; }
  .xa-inside__chip--router  { left: 2%; }
  .xa-inside__chip--mrr     { right: 2%; }
}

@media (max-width: 900px) {
  /* Reduce the iso angle on tablet */
  .xa-inside__frame-wrap {
    transform: rotateY(-3deg) rotateX(1deg);
    animation-name: xa-inside-float-sm;
  }
  @keyframes xa-inside-float-sm {
    0%, 100% { transform: rotateY(-3deg) rotateX(1deg) translateY(0); }
    50%      { transform: rotateY(-3deg) rotateX(1deg) translateY(-6px); }
  }
  /* Smaller chips on tablet */
  .xa-inside__chip {
    padding: 9px 12px;
    border-radius: 10px;
  }
  .xa-inside__chip-bignum { font-size: 20px; }
  .xa-inside__chip-spark { width: 48px; height: 20px; }
}

@media (max-width: 760px) {
  /* Flatten the 3D entirely on mobile + hide chips (frame is hero) */
  .xa-inside__frame-wrap {
    transform: none !important;
    animation: none !important;
  }
  .xa-inside__ground {
    bottom: -20px;
    height: 28px;
    filter: blur(10px);
    animation: none;
    opacity: 0.55;
  }
  /* Hide chips on mobile — too cramped to read at small sizes */
  .xa-inside__chips { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .xa-inside__frame-wrap,
  .xa-inside__ground,
  .xa-inside__chip,
  .xa-inside__chip-pulse,
  .xa-inside__chrome-pulse {
    animation: none !important;
  }
}