/* ============================================
   ISKEL WEBSITE — MAIN STYLESHEET
   ============================================

   All colour comes from iskel-themes.css (7 palettes × light/dark).
   This file must never name a colour directly — always a token.

   Loaded AFTER iskel-themes.css. See templates/layouts/base.html.
   ============================================ */

/* ── Alias layer ─────────────────────────────────────────────────
   Maps this stylesheet's original variable names onto the shared
   theme tokens, so the ~700 existing var(--old-name) call sites
   keep working and every one of them is now theme-driven.
   New rules should use the --ax-* tokens directly.
   ───────────────────────────────────────────────────────────── */
:root {
  --primary:        var(--ax-primary);
  --primary-dark:   var(--ax-primary-hover);
  --primary-light:  var(--ax-accent-3);
  --accent:         var(--ax-accent-2);

  --bg:             var(--ax-bg);
  --surface:        var(--ax-surface);
  --surface-2:      var(--ax-surface-2);
  --text-dark:      var(--ax-text);
  --text-secondary: var(--ax-text-muted);
  --bg-light:       var(--ax-bg-alt);
  --bg-dark:        var(--ax-hero-bg);
  --white:          var(--ax-surface);
  --border:         var(--ax-border);
  --nav-bg:         color-mix(in srgb, var(--ax-bg) 88%, transparent);
  --nav-border:     var(--ax-border);

  --shadow:         var(--ax-shadow);
  --shadow-hover:   var(--ax-shadow-lg);
  --texture:        var(--ax-texture);
  --texture-2:      var(--ax-texture);

  --radius:         var(--r-lg);
  --radius-sm:      var(--r-sm);
  --transition:     all var(--ax-t-base);

  /* ── Card system ────────────────────────────────────────────────────
     Every card on the site now resolves its resting depth, hover depth
     and lift distance from these three values.

     Before this, eight card types each made their own choice: lifts of
     4px, 5px and 6px; four different hover shadows; and three different
     ideas about what the border should do on hover. At any one moment
     you only see one card, so none of it looked broken — but moving
     between sections, nothing quite agreed with anything else.

     Resting elevation is deliberately non-zero. A card defined only by a
     1px border sits flat on the page; a whisper of shadow is most of the
     difference between "a div with a border" and "an object". */
  --card-rest:  var(--ax-elev-1);
  --card-hover: var(--ax-elev-3);
  --card-lift:  -6px;

  /* ── Buttons ────────────────────────────────────────────────────────
     Four button styles had four different paddings (13/30, 14/30, 14/30,
     12/28) and two different weights. Placed side by side in a hero they
     did not line up, and nobody could have said why.

     Weight is 600 rather than 700: at button size, semibold reads as
     considered where bold reads as shouting. */
  --btn-pad-y:  13px;
  --btn-pad-x:  30px;
  --btn-weight: var(--fw-semi);
  --btn-radius: var(--r-md);
  --btn-lift:   -2px;

  /* ── Section rhythm ─────────────────────────────────────────────────
     Sections were a flat 100px top and bottom, with 90px, 96px and 30px
     appearing ad hoc in individual pages. A fixed 100px is too much on a
     phone, where it pushes content below the fold for no benefit, and a
     touch tight on a large display.

     Fluid, so the page breathes in proportion to the viewport. */
  --section-y:    clamp(64px, 7vw, 104px);
  --section-y-sm: clamp(40px, 4.5vw, 64px);
  --section-gap:  clamp(40px, 4.5vw, 64px);
}

/* ============================================
   CARD FOUNDATION
   ============================================
   Applied to every card variant so surface, depth and hover agree. Each
   variant keeps its own padding, layout and internal treatment — only the
   shared physics are unified here.
   ============================================ */

.sp-card, .ind-card, .mission-card, .value-item, .case-study-card,
.team-card, .testimonial-card, .service-card, .product-card,
.portfolio-card, .blog-card, .service-detail-card {
  background: var(--surface);
  border: var(--bw-1) solid var(--border);
  box-shadow: var(--card-rest);
  /* Transitioning `all` makes every hover animate the shadow, the border
     and the transform on the same curve as unrelated properties, which is
     what made these feel sluggish. Name what actually moves. */
  transition:
    transform var(--ax-t-base),
    box-shadow var(--ax-t-base),
    border-color var(--ax-t-base),
    background-color 0.45s ease;
}

.sp-card:hover, .ind-card:hover, .mission-card:hover, .value-item:hover,
.case-study-card:hover, .team-card:hover, .testimonial-card:hover,
.service-card:hover, .product-card:hover, .portfolio-card:hover,
.blog-card:hover, .service-detail-card:hover {
  transform: translateY(var(--card-lift));
  box-shadow: var(--card-hover);
  border-color: color-mix(in srgb, var(--ax-primary) 34%, var(--border));
}

/* Cards that sit on a dark band are glass rather than surface, so they
   take the same physics but keep their own fill. */
.ai-card, .h-card {
  transition:
    transform var(--ax-t-base),
    box-shadow var(--ax-t-base),
    border-color var(--ax-t-base),
    background-color var(--ax-t-base);
}
.ai-card:hover {
  transform: translateY(var(--card-lift));
  box-shadow: var(--ax-elev-4);
  border-color: color-mix(in srgb, var(--ax-primary) 50%, transparent);
}

/* A card whose whole surface is a link should say so on keyboard focus,
   not only on hover. */
.sp-card:focus-within, .case-study-card:focus-within {
  border-color: var(--ax-primary);
  box-shadow: var(--card-hover);
}

@media (prefers-reduced-motion: reduce) {
  .sp-card, .ind-card, .mission-card, .value-item, .case-study-card,
  .team-card, .testimonial-card, .service-card, .product-card,
  .portfolio-card, .blog-card, .service-detail-card,
  .ai-card, .h-card { transition: none; }
  .sp-card:hover, .ind-card:hover, .mission-card:hover, .value-item:hover,
  .case-study-card:hover, .team-card:hover, .testimonial-card:hover,
  .service-card:hover, .product-card:hover, .portfolio-card:hover,
  .blog-card:hover, .service-detail-card:hover,
  .ai-card:hover, .h-card:hover { transform: none; }
}

/* Smooth theme cross-fade */
body, .iskel-nav, .footer, .section-alt,
[class*="card"], [class*="-mod"], [class*="feat"], .info-block, .form-panel {
  transition: background-color 0.45s ease, border-color 0.45s ease, color 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-dark);
  line-height: 1.65;
  overflow-x: hidden;
  background-color: var(--bg);
  background-image:
    radial-gradient(var(--texture) 1px, transparent 1.4px),
    radial-gradient(circle at 15% -10%, var(--texture-2), transparent 42%),
    radial-gradient(circle at 100% 0%, var(--texture), transparent 38%);
  background-size: 24px 24px, 100% 900px, 100% 700px;
  background-attachment: fixed, scroll, scroll;
  transition: background-color 0.45s ease, color 0.3s ease;
}
a { color: var(--ax-link); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--ax-link-hover); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; padding: 0; margin: 0; }

/* ============================================
   NAVIGATION
   ============================================ */

.iskel-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--nav-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: var(--bw-1) solid transparent;
  transition: background-color 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.iskel-nav.scrolled {
  border-bottom-color: var(--nav-border);
  box-shadow: var(--ax-shadow);
}
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1;
  text-decoration: none;
}
.nav-logo:hover { opacity: 0.82; }

/* Logo icon box */
.logo-icon {
  display: inline-block;
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  border-radius: var(--r-md);
  background: var(--ax-brand-grad);
  color: var(--ax-on-primary);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
  user-select: none;
  vertical-align: middle;
}

/* Logo wordmark */
.logo-word {
  font-family: 'Times New Roman';
  font-size: var(--fs-2xl);
  font-weight: 700;
  background: var(--ax-brand-grad-ink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  display: inline-block;
  letter-spacing: -0.02em;
}

/* ── ISKEL brand wordmark ────────────────── */
.iskel-wordmark {
  font-family: 'Times New Roman';
  font-size: var(--fs-2xl);
  font-weight: 700;
  background: var(--ax-brand-grad-ink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  display: inline-block;
  letter-spacing: -0.01em;
}
.iskel-wordmark-white {
  font-family: 'Times New Roman';
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: white;
  line-height: 1;
  display: inline-block;
  letter-spacing: -0.01em;
}
.iskel-wordmark-sm {
  font-family: 'Times New Roman';
  font-size: var(--fs-xl);
  font-weight: 700;
  background: var(--ax-brand-grad-ink);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  display: inline-block;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  color: var(--text-dark);
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  transition: var(--transition);
  font-size: var(--fs-base);
}
.nav-links a:hover { color: var(--ax-link); background: color-mix(in srgb, var(--ax-primary) 5%, transparent); }
.nav-links a.active { color: var(--ax-link); background: color-mix(in srgb, var(--ax-primary) 6%, transparent); font-weight: 600; }
.nav-links .nav-cta {
  background: var(--primary) !important;
  color: var(--ax-on-primary) !important;
  padding: 10px 22px !important;
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
  margin-left: 8px;
}
.nav-links .nav-cta:hover {
  background: var(--primary-dark) !important;
  color: var(--ax-on-primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--ax-primary) 30%, transparent);
}
.nav-links .nav-cta.active { background: var(--primary) !important; }
.nav-links .nav-login {
  border: var(--bw-2) solid color-mix(in srgb, var(--ax-primary) 35%, transparent) !important;
  color: var(--ax-link) !important;
  padding: 8px 18px !important;
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
  margin-left: 4px;
  background: transparent !important;
}
.nav-links .nav-login:hover {
  background: var(--primary) !important;
  color: var(--ax-on-primary) !important;
  border-color: var(--ax-link) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--ax-primary) 20%, transparent);
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-dark);
  border-radius: var(--r-xs);
  transition: var(--transition);
}
.nav-mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--surface);
  border-top: var(--bw-1) solid var(--border);
  padding: 12px 20px 20px;
  box-shadow: var(--ax-elev-4);
}
.nav-mobile.open { display: block; }
.nav-mobile li a {
  display: block;
  padding: 11px 12px;
  color: var(--text-dark);
  font-weight: 500;
  font-size: var(--fs-base);
  border-radius: var(--r-sm);
  transition: var(--transition);
}
.nav-mobile li a:hover { color: var(--ax-link); background: var(--bg-light); }

/* ============================================
   NAV DROPDOWN
   ============================================ */

.nav-dropdown-wrap {
  position: relative;
}

/* Trigger — matches .nav-links a exactly */
.nav-dropdown-trigger {
  color: var(--text-dark);
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  transition: var(--transition);
  font-size: var(--fs-base);
  line-height: 1.65;
  letter-spacing: normal;
  background: none;
  border: none;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-dropdown-trigger:hover {
  color: var(--ax-link);
  background: color-mix(in srgb, var(--ax-primary) 5%, transparent);
}
.nav-dropdown-wrap.open .nav-dropdown-trigger,
.nav-dropdown-trigger.active {
  color: var(--ax-link);
  background: color-mix(in srgb, var(--ax-primary) 6%, transparent);
  font-weight: 600;
}

.nav-dropdown-arrow {
  font-size: 0.6rem;
  opacity: 0.55;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.nav-dropdown-wrap.open .nav-dropdown-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

/* ── Panel — click-driven, shown only via .open class ── */
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 8px;
  padding: 5px;
  transform: translateX(-50%) translateY(-6px) scale(0.97);
  transform-origin: top center;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--ax-elev-4);
  border: var(--bw-1) solid color-mix(in srgb, var(--ax-primary) 9%, transparent);
  min-width: 290px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 200;
}
.nav-dropdown-wrap.open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ── Dropdown items ── */
.nd-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 10px;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background 0.15s ease;
  color: var(--text-dark);
}
.nd-item:hover {
  background: var(--bg-light);
  color: var(--text-dark);
}
.nd-item:hover .nd-icon {
  transform: scale(1.08);
}
.nd-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--p, var(--ax-primary)) 15%, transparent);
  color: var(--p, var(--ax-primary));
  font-size: 1rem;
  transition: transform 0.18s ease;
}
/* Product hue slots — shared with the product-page accents further down */
.nd-icon--p1, .nd-i--p1 { --p: var(--ax-p1); }
.nd-icon--p2, .nd-i--p2 { --p: var(--ax-p2); }
.nd-icon--p3, .nd-i--p3 { --p: var(--ax-p3); }
.nd-icon--p4, .nd-i--p4 { --p: var(--ax-p4); }
.nd-icon--p5, .nd-i--p5 { --p: var(--ax-p5); }
.nd-icon--p6, .nd-i--p6 { --p: var(--ax-p6); }
.nd-icon--p7, .nd-i--p7 { --p: var(--ax-p7); }
.nav-mobile-submenu li a i[class*="nd-i--p"] { color: var(--p); }
/* "View all products" closes the dropdown: separated, because it is a
   different kind of destination from the product rows above it. */
.nd-all {
  margin-top: 6px;
  padding-top: 14px;
  border-top: var(--bw-1) solid var(--border);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.nd-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nd-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.25;
  display: block;
}
.nd-desc {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.2;
  display: block;
}

/* Mobile dropdown group */
.nav-mobile-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 12px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-dark);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: var(--transition);
}
.nav-mobile-group-toggle:hover { color: var(--ax-link); background: var(--bg-light); }
.nav-mobile-group-toggle i { font-size: 0.65rem; opacity: 0.7; transition: transform 0.25s ease; }
.nav-mobile-group.open .nav-mobile-group-toggle i { transform: rotate(180deg); }
.nav-mobile-submenu {
  display: none;
  padding: 4px 0 4px 16px;
}
.nav-mobile-group.open .nav-mobile-submenu { display: block; }
.nav-mobile-submenu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: var(--fs-sm) !important;
  border-radius: var(--r-sm);
}

/* ============================================
   HERO — HOME PAGE
   ============================================ */

.hero {
  min-height: 100vh;
  background: var(--ax-hero-bg);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 110px 0 70px;
}
.hero-bg-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-bg-shapes::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 70%;
  height: 120%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.05) 0%, transparent 65%);
}
.hero-bg-shapes::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: -5%;
  width: 50%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(0,151,214,0.12) 0%, transparent 65%);
}
.hero-bottom-wave {
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  line-height: 0;
}
.hero-content {
  position: relative;
  z-index: 1;
  color: white;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: var(--bw-1) solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.9);
  padding: 8px 18px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: 28px;
  letter-spacing: 0.02em;
}
.hero-badge .dot {
  width: 7px; height: 7px;
  background: var(--ax-accent-1);
  border-radius: 50%;
  animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.hero h1 {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  margin-bottom: 24px;
  letter-spacing: var(--ls-tighter);
  /* Even out the line lengths instead of leaving a long first line and an
     orphan. Ignored by browsers that do not support it, which simply get
     the old ragged wrap. */
  text-wrap: balance;
  /* Never hyphenate a headline — the browser's automatic breaks land in
     places no one would choose. */
  hyphens: none;
}
.hero h1 .highlight { color: var(--ax-hero-text); }
.hero p.lead {
  font-size: var(--fs-md);
  color: var(--ax-hero-muted);
  max-width: 540px;
  margin-bottom: 40px;
  line-height: 1.75;
  font-weight: 400;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
/* Full-width band beneath both hero columns. Distributed rather than
   packed left, so three figures span the measure instead of huddling
   under the copy and leaving the right half empty. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 28px 40px;
}
.hero-stat-item { color: white; }
.hero-stat-item .num {
  /* Larger than before — they now have the width to carry it, and these
     are the only hard numbers in the hero. */
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
}
.hero-stat-item .lbl {
  font-size: var(--fs-xs);
  color: var(--ax-hero-muted);
  margin-top: 4px;
  font-weight: 500;
}

/* Hero visual cards */
.hero-visual { position: relative; z-index: 1; }
.hero-card-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.h-card {
  background: rgba(255, 255, 255, 0.1);
  border: var(--bw-1) solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
  border-radius: var(--radius);
  padding: 24px 28px;
  color: white;
  transition: var(--transition);
}
/* Deliberately horizontal: these are a vertical stack, and sliding
   right reads better than three cards lifting at once. */
.h-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(6px);
  box-shadow: var(--ax-elev-4);
}
.h-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.h-card-icon {
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.h-card-title { font-size: var(--fs-base); font-weight: 700; }
.h-card-sub { font-size: var(--fs-xs); opacity: 0.86; }
.h-card-value { font-size: var(--fs-2xl); font-weight: 800; line-height: 1; }
.h-card-desc { font-size: var(--fs-xs); opacity: 0.86; margin-top: 4px; }

/* ============================================
   PAGE HERO (inner pages)
   ============================================ */

.page-hero {
  background: var(--ax-hero-bg);
  padding: 150px 0 90px;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 70%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.04) 0%, transparent 60%);
}
.page-hero .page-hero-inner { position: relative; z-index: 1; }
.page-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.025em;
}
.page-hero p {
  font-size: var(--fs-md);
  color: var(--ax-hero-muted);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.72;
}
.breadcrumb-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: var(--fs-sm);
}
.breadcrumb-wrap a { color: rgba(255,255,255,0.6); }
.breadcrumb-wrap a:hover { color: white; }
.breadcrumb-wrap span { color: rgba(255,255,255,0.4); }

/* ============================================
   BUTTONS
   ============================================ */

.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* Every use of this button sits on a band that is dark in BOTH modes
     (the hero, the CTA strips, the services sticky card). --surface and
     --ax-link-hover both invert, so in dark mode it turned into a dark
     panel with pale pink text -- a dark button on a dark band. The hero
     pair does not invert: light ground, dark ink, in either mode. */
  background: var(--ax-hero-text);
  color: var(--ax-hero-solid);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-weight);
  font-size: var(--fs-base);
  transition: var(--transition);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-white:hover {
  background: color-mix(in srgb, var(--ax-primary) 14%, var(--ax-hero-text));
  transform: translateY(var(--btn-lift));
  box-shadow: var(--ax-elev-3);
  color: var(--ax-hero-solid);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  color: white;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-weight);
  font-size: var(--fs-base);
  border: var(--bw-2) solid rgba(255, 255, 255, 0.35);
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255,255,255,0.1);
  color: white;
  transform: translateY(var(--btn-lift));
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--primary);
  color: var(--ax-on-primary);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-weight);
  font-size: var(--fs-base);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--primary-dark);
  color: var(--ax-on-primary);
  transform: translateY(var(--btn-lift));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ax-primary) 35%, transparent);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  color: var(--ax-link);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-weight);
  font-size: var(--fs-base);
  border: var(--bw-2) solid var(--primary);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-outline:hover {
  background: var(--primary);
  color: var(--ax-on-primary);
  transform: translateY(var(--btn-lift));
}
.btn-submit {
  width: 100%;
  background: var(--primary);
  color: var(--ax-on-primary);
  padding: 15px 28px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: var(--fs-base);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-submit:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ax-primary) 35%, transparent);
}
.btn-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* ============================================
   LAYOUT
   ============================================ */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
.section { padding: var(--section-y) 0; }
.section-alt { background: var(--bg-light); }
.section-header {
  text-align: center;
  margin-bottom: var(--section-gap);
  /* Section intros are centred and short — a narrow measure keeps them
     from stretching into a single tiring line on a wide display. */
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.section-label {
  display: inline-block;
  color: var(--ax-link);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--ax-primary) 7%, transparent);
  padding: 6px 14px;
  border-radius: var(--r-pill);
}
.section-header h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 16px;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.section-header p {
  color: var(--text-secondary);
  font-size: var(--fs-md);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.72;
}
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================
   STATS BAND
   ============================================ */

.stats-band { padding: 56px 0; background: var(--bg-light); }
.stat-item { text-align: center; padding: 16px; }
.stat-number {
  font-size: var(--fs-4xl);
  font-weight: 900;
  color: var(--ax-link);
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat-plus { color: var(--primary-light); }
.stat-label {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  margin-top: 8px;
  font-weight: 500;
}

/* ============================================
   SERVICE CARDS
   ============================================ */

.service-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 36px 28px;
  border: var(--bw-1) solid var(--border);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  height: 100%;
}
.service-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition);
}

.service-card:hover::after { transform: scaleX(1); }
.service-icon {
  width: 56px; height: 56px;
  background: color-mix(in srgb, var(--ax-primary) 8%, transparent);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: var(--ax-link);
  margin-bottom: 22px;
  transition: var(--transition);
}
.service-card:hover .service-icon {
  background: var(--primary);
  color: var(--ax-on-primary);
}
.service-card h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-dark);
}
.service-card p {
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: 1.72;
  margin-bottom: 20px;
}
.service-list {
  margin-top: 8px;
}
.service-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  padding: 5px 0;
  border-bottom: var(--bw-1) solid var(--bg-light);
}
.service-list li:last-child { border-bottom: none; }
.service-list li i { color: var(--ax-link); font-size: 0.75rem; flex-shrink: 0; }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ax-link);
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-top: 18px;
}
.card-link:hover { gap: 10px; }

/* ============================================
   PRODUCT CARDS
   ============================================ */

.product-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--bw-1) solid var(--border);
  transition: var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-card-header {
  padding: 32px 28px;
  color: var(--ax-hero-text);
  position: relative;
  overflow: hidden;
}
.product-card-header.gradient-blue {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ax-p1) 26%, var(--ax-hero-solid)), color-mix(in srgb, var(--ax-p4) 52%, var(--ax-hero-solid)));
}
.product-card-header.gradient-teal {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ax-p6) 26%, var(--ax-hero-solid)), color-mix(in srgb, var(--ax-p3) 52%, var(--ax-hero-solid)));
}
.product-card-header.gradient-purple {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ax-p5) 26%, var(--ax-hero-solid)), color-mix(in srgb, var(--ax-p3) 52%, var(--ax-hero-solid)));
}
.product-card-header.gradient-green {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ax-p3) 26%, var(--ax-hero-solid)), color-mix(in srgb, var(--ax-p7) 52%, var(--ax-hero-solid)));
}
.product-header-bg {
  position: absolute;
  top: -30%;
  right: -10%;
  font-size: 8rem;
  opacity: 0.06;
  line-height: 1;
}
.product-icon {
  width: 52px; height: 52px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 18px;
  position: relative;
}
.product-card-header h3 {
  font-size: var(--fs-lg);
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.product-card-header p {
  font-size: var(--fs-sm);
  opacity: 0.78;
  line-height: 1.55;
  margin-bottom: 16px;
}
.product-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
}
.product-card-body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-card-body > p {
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: 1.7;
  margin-bottom: 20px;
}
.feature-list { margin-bottom: 24px; flex: 1; }
.feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--text-dark);
  padding: 7px 0;
  border-bottom: var(--bw-1) solid var(--bg-light);
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li i { color: var(--ax-link); font-size: 0.75rem; flex-shrink: 0; }
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-light);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: var(--bw-1) dashed var(--border);
}

/* ============================================
   PORTFOLIO CARDS
   ============================================ */

.portfolio-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: var(--bw-1) solid var(--border);
  transition: var(--transition);
}

.portfolio-img {
  height: 210px;
  position: relative;
  overflow: hidden;
}
.portfolio-img-bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: color-mix(in srgb, var(--ax-hero-text) 25%, transparent);
  transition: var(--transition);
}
.portfolio-img-bg.blue { background: linear-gradient(135deg, color-mix(in srgb, var(--ax-p4) 26%, var(--ax-hero-solid)), color-mix(in srgb, var(--ax-p2) 52%, var(--ax-hero-solid))); }
.portfolio-img-bg.dark { background: linear-gradient(135deg, color-mix(in srgb, var(--ax-p1) 26%, var(--ax-hero-solid)), color-mix(in srgb, var(--ax-p4) 52%, var(--ax-hero-solid))); }
.portfolio-img-bg.teal { background: linear-gradient(135deg, color-mix(in srgb, var(--ax-p6) 26%, var(--ax-hero-solid)), color-mix(in srgb, var(--ax-p3) 52%, var(--ax-hero-solid))); }
.portfolio-img-bg.green { background: linear-gradient(135deg, color-mix(in srgb, var(--ax-p3) 26%, var(--ax-hero-solid)), color-mix(in srgb, var(--ax-p7) 52%, var(--ax-hero-solid))); }
.portfolio-img-bg.purple { background: linear-gradient(135deg, color-mix(in srgb, var(--ax-p5) 26%, var(--ax-hero-solid)), color-mix(in srgb, var(--ax-p3) 52%, var(--ax-hero-solid))); }
.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: var(--ax-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition);
}
.portfolio-card:hover .portfolio-overlay { opacity: 1; }
.portfolio-card:hover .portfolio-img-bg { transform: scale(1.05); }
.portfolio-overlay-link {
  background: var(--surface);
  color: var(--ax-link-hover);
  padding: 10px 24px;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.portfolio-overlay-link:hover { color: var(--ax-link-hover); background: color-mix(in srgb, var(--ax-primary) 12%, var(--ax-surface)); }
.portfolio-info { padding: 22px; }
.portfolio-tag {
  font-size: var(--fs-xs);
  color: var(--ax-link);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  display: block;
}
.portfolio-info h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.portfolio-info p {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ============================================
   WHY CHOOSE US / FEATURE ITEMS
   ============================================ */

.feature-item {
  display: flex;
  gap: 18px;
  margin-bottom: 32px;
}
.feature-item:last-child { margin-bottom: 0; }
.feature-item-icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  background: color-mix(in srgb, var(--ax-primary) 8%, transparent);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ax-link);
  font-size: 1.15rem;
  margin-top: 2px;
}
.feature-item-text h4 {
  font-size: var(--fs-base);
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-dark);
}
.feature-item-text p {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ============================================
   CTA SECTION
   ============================================ */

.cta-section {
  background: var(--ax-hero-bg);
  color: white;
  text-align: center;
  padding: var(--section-y) 0;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.04) 0%, transparent 60%);
}
.cta-section .inner { position: relative; z-index: 1; }
.cta-section h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 18px;
  letter-spacing: -0.025em;
}
.cta-section p {
  font-size: var(--fs-md);
  opacity: 0.78;
  max-width: 500px;
  margin: 0 auto 36px;
  line-height: 1.72;
}
.cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   ABOUT PAGE
   ============================================ */

.about-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-story-img {
  border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ax-p1) 26%, var(--ax-hero-solid)), color-mix(in srgb, var(--ax-p4) 52%, var(--ax-hero-solid)));
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  color: rgba(255,255,255,0.25);
  position: relative;
  overflow: hidden;
}
.about-story-img::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; top: 40%;
  background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
}
.about-story-content .section-label { margin-bottom: 12px; }
.about-story-content h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin-bottom: 20px;
}
.about-story-content p {
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: 1.8;
  margin-bottom: 16px;
}

.mission-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 36px 28px;
  border: var(--bw-1) solid var(--border);
  text-align: center;
  transition: var(--transition);
  height: 100%;
}
.mission-icon {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, var(--ax-hero-solid)), color-mix(in srgb, var(--primary-light) 42%, var(--ax-hero-solid)));
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--ax-hero-text);
  margin: 0 auto 22px;
}
.mission-card h3 {
  font-size: var(--fs-lg);
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.mission-card p {
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: 1.72;
}

.value-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px;
  background: var(--surface);
  border-radius: var(--radius);
  border: var(--bw-1) solid var(--border);
  transition: var(--transition);
}
.value-num {
  flex-shrink: 0;
  width: 42px; height: 42px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, var(--ax-hero-solid)), color-mix(in srgb, var(--primary-light) 42%, var(--ax-hero-solid)));
  color: var(--ax-hero-text);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: var(--fs-base);
}
.value-content h4 {
  font-size: var(--fs-base);
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-dark);
}
.value-content p {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.65;
}

.team-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--bw-1) solid var(--border);
  text-align: center;
  transition: var(--transition);
}
.team-avatar {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: rgba(255,255,255,0.3);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, var(--ax-hero-solid)), color-mix(in srgb, var(--primary-light) 42%, var(--ax-hero-solid)));
}
.team-info { padding: 22px; }
.team-info h4 { font-weight: 800; margin-bottom: 4px; font-size: var(--fs-base); }
.team-info .role { font-size: var(--fs-sm); color: var(--ax-link); font-weight: 600; }
.team-info p { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 10px; line-height: 1.55; }

/* ============================================
   PORTFOLIO FILTER
   ============================================ */

.filter-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}
.filter-btn {
  padding: 9px 22px;
  border-radius: var(--r-pill);
  border: var(--bw-2) solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.filter-btn:hover { border-color: var(--ax-link); color: var(--ax-link); }
.filter-btn.active {
  border-color: var(--ax-link);
  background: var(--primary);
  color: var(--ax-on-primary);
}

/* ============================================
   CONTACT PAGE
   ============================================ */

.contact-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 44px;
  box-shadow: var(--shadow);
  border: var(--bw-1) solid var(--border);
}
.contact-info-item {
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
}
.contact-info-item:last-child { margin-bottom: 0; }
.ci-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  background: color-mix(in srgb, var(--ax-primary) 8%, transparent);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ax-link);
  font-size: 1rem;
}
.ci-text h5 {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.ci-text p, .ci-text a {
  color: var(--text-dark);
  font-size: var(--fs-base);
  font-weight: 500;
}
.ci-text a:hover { color: var(--ax-link); }

/* Form */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.form-group label .req { color: var(--ax-link); }
.form-control {
  width: 100%;
  padding: 12px 16px;
  border: var(--bw-2) solid var(--border);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--text-dark);
  transition: var(--transition);
  outline: none;
  background: var(--surface);
}
.form-control:focus {
  border-color: var(--ax-link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ax-primary) 10%, transparent);
}
.form-control::placeholder { color: var(--ax-text-muted); }
textarea.form-control { resize: vertical; min-height: 130px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.alert {
  border-radius: var(--r-sm);
  padding: 14px 18px;
  font-size: var(--fs-base);
  font-weight: 500;
  margin-top: 16px;
  display: none;
}
.alert-success { background: color-mix(in srgb, var(--ax-success) 14%, var(--ax-surface)); color: var(--ax-success); border: var(--bw-1) solid color-mix(in srgb, var(--ax-success) 34%, transparent); }
.alert-error { background: color-mix(in srgb, var(--ax-danger) 14%, var(--ax-surface)); color: var(--ax-danger); border: var(--bw-1) solid color-mix(in srgb, var(--ax-danger) 34%, transparent); }
.contact-map {
  border-radius: var(--radius);
  background: var(--bg-light);
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: var(--fs-base);
  border: var(--bw-2) dashed var(--border);
  margin-top: 28px;
  gap: 10px;
}

/* Caption under a product hero's mock dashboard. The figures in those
   cards are a picture of the product's screen, not iSKEL's client results —
   unlabelled, a line like "win rate 32%, up 7% since AI scoring went live"
   reads as a case study. */
.pp-sample-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 2px 0;
  font-size: var(--fs-2xs);
  /* Full --ax-hero-text, not a dimmed one: the product heroes paint
     --ax-hero-bg, a gradient whose light stop (aurora's #0e7490) only
     reaches 4.5:1 at full opacity — 0.72 measured 3.30:1 there. */
  color: var(--ax-hero-text);
  opacity: 1;
  letter-spacing: 0.01em;
}
.pp-sample-note i { font-size: 0.78em; flex-shrink: 0; }

/* ============================================
   CATALOGUE CHIPS & COMPACT SUITE
   ============================================
   Rendered by templates/includes/catalogue.html on the About and Services
   pages, where the full card grids the home page uses would cost more
   vertical space than the point is worth. */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-dark);
  background: var(--surface);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  line-height: 1.3;
}
.chip i { font-size: 0.82em; color: var(--ax-link); }

.cat-suite {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 767px) { .cat-suite { grid-template-columns: 1fr; } }
.cat-suite-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: var(--bw-1) solid var(--border);
  background: var(--surface);
  transition: var(--transition);
}
.cat-suite-item:hover {
  border-color: color-mix(in srgb, var(--ax-primary) 35%, transparent);
  transform: translateY(-2px);
  box-shadow: var(--ax-elev-2);
}
.cat-suite-ic {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ax-hero-text);
  font-size: 0.95rem;
}
.cat-suite-text { display: flex; flex-direction: column; min-width: 0; }
.cat-suite-name { font-size: var(--fs-sm); font-weight: 700; color: var(--text-dark); }
.cat-suite-sub { font-size: var(--fs-xs); color: var(--text-secondary); }
.cat-suite-arrow { margin-left: auto; font-size: 0.72rem; color: var(--ax-link); opacity: 0; transition: var(--transition); }
.cat-suite-item:hover .cat-suite-arrow { opacity: 1; }
.cat-suite-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  background: var(--bg-light);
  border-radius: var(--r-pill);
  padding: 4px 10px;
}
/* "Coming soon" on a /products tile head — white on the dark head, like
   the rest of the text there. */
.pl-soon {
  display: inline-block;
  margin-top: 10px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ax-hero-text);
  background: rgba(255, 255, 255, 0.16);
  border: var(--bw-1) solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  padding: 4px 11px;
}

/* ============================================
   FOOTER
   ============================================

   Three bands, in decreasing order of what a visitor who reached the
   bottom of the page actually wants: brand + one call to action, then
   navigation, then the sectors we work in. The band boundaries are
   hairlines rather than a single <hr>, so the structure is visible
   without adding weight to an already dark strip.

   Everything here is white-on-dark in BOTH themes -- .footer paints
   --ax-hero-bg, which is dark in light mode too -- so the colours are
   rgba(255,255,255,a) rather than theme tokens that would invert. */

.footer {
  position: relative;
  /* --ax-hero-bg is a GRADIENT in five of the seven palettes, and its
     light stop (aurora's #0e7490) cannot carry dimmed white text at all:
     measured, white needs alpha 0.88 there to reach 4.5:1, against 0.62
     over --ax-hero-solid. A wall of small links needs a calm, solid
     ground, so the footer takes the solid and every alpha below is set
     against it. */
  background: var(--ax-hero-solid);
  color: rgba(255, 255, 255, 0.72);
  padding: 0;
}
/* A hairline of brand colour where the page meets the footer: the old
   footer began with no boundary at all, so a dark page section ran
   straight into it. */
.footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--ax-primary), var(--ax-p7) 45%, var(--ax-p3));
  opacity: 0.9;
}

/* ── Band 1: brand + call to action ─────────────────────────────── */
.footer-top {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-10);
  align-items: start;
  padding: 64px 0 48px;
}
@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr; gap: var(--sp-8); padding: 52px 0 40px; }
}

.footer-brand { display: flex; align-items: center; margin-bottom: 18px; }
.footer-desc {
  font-size: var(--fs-sm);
  line-height: 1.75;
  max-width: 42ch;
  margin-bottom: 22px;
}
.footer-markets { margin-bottom: 22px; }
.footer-markets-label {
  display: block;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 9px;
}

/* The call to action is a panel, not a link list, so it reads as the
   one thing to do down here. Tinting --ax-primary into the band keeps
   it on-brand in whichever palette is active. */
.footer-cta {
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--ax-primary) 18%, transparent),
      color-mix(in srgb, var(--ax-p7) 10%, transparent) 60%,
      transparent);
  border: var(--bw-1) solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  padding: 30px 30px 26px;
}
.footer-cta-eyebrow {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 12px;
}
.footer-cta-title {
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
.footer-cta-sub {
  font-size: var(--fs-sm);
  line-height: 1.7;
  margin: 0 0 22px;
  max-width: 46ch;
}
.footer-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: var(--transition);
  border: var(--bw-1) solid transparent;
  white-space: nowrap;
}
.footer-btn--solid {
  background: var(--ax-primary);
  color: var(--ax-on-primary);
}
.footer-btn--solid:hover {
  background: var(--ax-primary-hover);
  color: var(--ax-on-primary);
  transform: translateY(-2px);
}
.footer-btn--ghost {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.footer-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  transform: translateY(-2px);
}
.footer-cta-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.72);
  margin: 18px 0 0;
}

/* ── Band 2: navigation ─────────────────────────────────────────── */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-10);
  padding: 40px 0;
  border-top: var(--bw-1) solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 991px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  /* Nine links plus a CTA and two theme controls stop fitting well before
     768px — at tablet widths they were overflowing the bar. Collapse to
     the hamburger here instead. */
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}
/* Four stacked columns made the footer 2,700px tall on a phone. Two
   columns of short labels fit comfortably at 420px; only Contact, whose
   rows are long email addresses, takes the full width. */
@media (max-width: 560px) {
  .footer-grid { gap: var(--sp-6) var(--sp-5); }
  .footer-col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 400px) { .footer-grid { grid-template-columns: 1fr; } }

/* Column headings carry a short accent rule. The old footer set four
   headings in the same weight and colour as everything around them,
   which is why the columns read as one undifferentiated block. */
.footer h5 {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: white;
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: var(--bw-1) solid rgba(255, 255, 255, 0.09);
}
.footer h5::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;   /* sits on the heading's own hairline, not under it */
  width: 26px;
  height: 2px;
  /* Raw --ax-primary measured 1.63:1 against this band in ember light --
     an invisible rule. Lightened, it clears 3:1 in all 14 combinations. */
  background: color-mix(in srgb, var(--ax-primary) 55%, #ffffff);
}

.footer-nav li { margin-bottom: 11px; }
.footer-nav a {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-sm);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* A chevron that fades in, rather than the old 4px padding jump that
   shifted the whole label on hover. */
.footer-nav a::before {
  content: '\f105';  /* fa-angle-right */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.7em;
  opacity: 0;
  margin-right: -7px;
  transition: var(--transition);
  color: var(--ax-primary);
}
.footer-nav a:hover { color: #fff; }
.footer-nav a:hover::before { opacity: 1; margin-right: 0; }

.footer-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  text-transform: none;
  transition: gap var(--transition);
}
.footer-more:hover { gap: 11px; color: #fff; }
.footer-more i { font-size: 0.72em; color: var(--ax-primary); }

.footer-contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-sm);
  margin-bottom: 14px;
  line-height: 1.5;
}
/* Each contact row gets a tile for its icon, so the column has an edge
   to align on instead of four floating glyphs. */
.footer-ic {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.07);
  border: var(--bw-1) solid rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 0.35 measured 3.07:1 on the footer -- below AA. */
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  transition: var(--transition);
}
.footer-contact-list li:hover .footer-ic {
  background: color-mix(in srgb, var(--ax-primary) 28%, transparent);
  color: #fff;
}
.footer-contact-list a { color: rgba(255, 255, 255, 0.68); }
.footer-contact-list a:hover { color: white; }
/* A long email must wrap rather than widen the grid track, but it should
   break where the markup offers a <wbr> (after the "@") -- break-word only
   splits a word that still cannot fit, where `anywhere` split it as soon
   as the line ran out and left a stray "m" on its own row. */
.footer-contact-list li, .footer-contact-list a { overflow-wrap: break-word; hyphens: none; }
.footer-email { line-height: 1.45; }
.footer-contact-tag {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.66);
}

/* ── Band 3: industries ─────────────────────────────────────────── */
.footer-industries {
  padding: 34px 0;
  border-top: var(--bw-1) solid rgba(255, 255, 255, 0.08);
}
.footer-industries h5 {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 16px;
}
.footer-industries h5::after { content: none; }
.footer-industries .footer-more { margin-top: 0; }

.footer-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-pills li {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.05);
  border: var(--bw-1) solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  line-height: 1.3;
}
.footer-pills--sm li { font-size: var(--fs-2xs); padding: 4px 11px; }

.social-links {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.social-links a {
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.07);
  border: var(--bw-1) solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.74);
  font-size: var(--fs-sm);
  transition: var(--transition);
}
.social-links a:hover {
  background: var(--primary);
  border-color: transparent;
  color: var(--ax-on-primary);
  transform: translateY(-2px);
}

/* ── Bottom bar ─────────────────────────────────────────────────── */
.footer-bottom {
  padding: 20px 0 26px;
  border-top: var(--bw-1) solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-bottom p { font-size: var(--fs-xs); margin: 0; }

/* Registration numbers (CIN / GSTIN) sit beside the copyright line —
   legally expected of a registered company, but visually secondary. */
.footer-reg {
  display: inline-block;
  margin-left: 10px;
  padding-left: 10px;
  border-left: var(--bw-1) solid rgba(255, 255, 255, 0.18);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
}
@media (max-width: 640px) {
  .footer-reg { display: block; margin-left: 0; padding-left: 0; border-left: none; margin-top: 4px; }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
.anim-up { animation: fadeInUp 0.65s ease both; }
.anim-up-1 { animation: fadeInUp 0.65s 0.1s ease both; }
.anim-up-2 { animation: fadeInUp 0.65s 0.2s ease both; }
.anim-up-3 { animation: fadeInUp 0.65s 0.3s ease both; }

/* ============================================
   UTILITIES
   ============================================ */

.divider { height: 1px; background: var(--border); margin: 32px 0; }
.text-center { text-align: center; }
.text-primary { color: var(--ax-link) !important; }
.fw-bold { font-weight: 700; }
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.gap-3 { gap: 16px; }

/* ============================================
   LAYOUT HELPERS  (bug fixes)
   ============================================ */

/* Index page why-us 2-col grid */
.why-us-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* About page stats row */
.about-stats-row {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 32px;
  border-top: var(--bw-1) solid var(--border);
}
.about-stat .num { font-size: var(--fs-2xl); font-weight: 900; color: var(--ax-link); line-height: 1; }
.about-stat .lbl { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 5px; font-weight: 500; }

/* ============================================
   BEAUTY IMPROVEMENTS
   ============================================ */

/* Smoother card base transition */
.service-card, .product-card, .portfolio-card, .mission-card,
.value-item, .team-card, .testimonial-card, .case-study-card {
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.28s ease;
}

/* .mission-card previously carried its own resting shadow here, declared
   after the card foundation and therefore overriding it. Every card now
   gets --card-rest from the foundation, so this is no longer needed —
   and unlike the hand-written value it replaced, the ramp carries the
   palette's hue rather than flat black. */

/* Section label pill — slightly more polished */
.section-label {
  border: var(--bw-1) solid color-mix(in srgb, var(--ax-primary) 18%, transparent);
  transition: var(--transition);
}

/* Better focus visible for accessibility */
a:focus-visible, button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ax-primary) 40%, transparent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Portfolio stats num — fluid size */
.sh-item .num {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
}

/* Footer icon+link gap (was zero on some pages) */
.footer-contact-list li { gap: 12px; }

/* Testimonial card quote style */
.testimonial-card p::before {
  content: '\201C';
  font-size: 1.4rem;
  color: var(--ax-link);
  opacity: 0.4;
  margin-right: 2px;
  font-family: Georgia, serif;
  line-height: 0;
  vertical-align: -0.3em;
}

/* Hero stat separator */
.hero-stats {
  margin-top: 64px;
  padding-top: 40px;
  border-top: var(--bw-1) solid rgba(255, 255, 255, 0.15);
}

/* CTA section inner max-width */
.cta-section .inner { max-width: 640px; margin: 0 auto; }

/* Stat band numbers */
.stat-number { font-size: clamp(2.2rem, 4vw, 3rem); }

/* Page hero — bigger title on large screens */
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }

/* Contact form submit full-width button */
.submit-btn { letter-spacing: 0.01em; }

/* Value item hover */
.value-item { transition: border-color 0.25s ease, box-shadow 0.25s ease; }

/* Portfolio overlay link style */
.portfolio-overlay-link:hover { background: color-mix(in srgb, var(--ax-primary) 12%, var(--ax-surface)); }

/* Tech tags slight hover */
.tech-tag { transition: var(--transition); cursor: default; }
.tech-tag:hover { background: color-mix(in srgb, var(--ax-primary) 13%, transparent); }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .about-story { grid-template-columns: 1fr; gap: 40px; }
  .about-story-img { height: 320px; }
  .why-us-grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 767px) {
  .section { padding: 64px 0; }
  .stats-band { padding: 40px 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .nav-toggle { display: flex; }
  .hero { min-height: auto; padding: 110px 0 72px; }
  .hero-visual { display: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions a { width: 100%; justify-content: center; }
  .hero-stats { gap: 24px; padding-top: 36px; }
  .cta-actions { flex-direction: column; align-items: center; }
  .cta-actions a { width: 100%; max-width: 320px; justify-content: center; }
  .form-row { grid-template-columns: 1fr; }
  .contact-card { padding: 28px 22px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .section-header { margin-bottom: 44px; }
  /* Products reverse layout — reset on mobile */
  .product-full-layout.reverse { direction: ltr; }
  .product-full-layout.reverse > * { direction: ltr; }
  /* About stats */
  .about-stats-row { gap: 24px; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .grid-4 { grid-template-columns: 1fr; }
  .hero h1 { font-size: var(--fs-2xl); }
  .stat-number { font-size: var(--fs-3xl); }
  .section { padding: 52px 0; }
  .about-stats-row { flex-direction: column; gap: 18px; }
}

/* ============================================================
   ✦ 2026 VISUAL UPGRADE — logo, dark mode, textures, motion
   ============================================================ */

/* ── Brand logo ──────────────────────────────────────────────────────────────
   The iSKEL logo is the supplied artwork used as a MASK, filled with the
   palette's gradient. The letterforms are therefore the customer's file to the
   pixel, and only the colour follows the theme -- which is what was asked for:
   "the art of writing should be the same ... color you can choose as per the
   theme", and then "logo color should be gradient as per the theme".

   Two fills, because the logo lands on two kinds of ground:
     --ax-logo-grad       page surfaces, which flip with the mode
     --ax-logo-grad-hero  the footer band, dark in BOTH modes, so it needs the
                          bright gradient even while the page is light
   Both are declared in iskel-themes.css.
   --------------------------------------------------------------------------- */
.nav-logo { display: inline-flex; align-items: center; }
.iskel-logo {
  display: block;
  height: 30px;
  aspect-ratio: 1076 / 273;   /* the trimmed ink box of the source artwork */
  background: var(--ax-logo-grad);
  -webkit-mask: url("/assets/iskel_website/images/iskel-logo-mask.png") no-repeat center / contain;
          mask: url("/assets/iskel_website/images/iskel-logo-mask.png") no-repeat center / contain;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
}
.nav-logo:hover .iskel-logo { transform: scale(1.03); }

/* The footer band is dark in both modes. */
.iskel-logo--footer {
  height: 34px;
  margin-bottom: var(--sp-3);
  background: var(--ax-logo-grad-hero);
}

@media (max-width: 640px) {
  .iskel-logo { height: 26px; }
  .iskel-logo--footer { height: 30px; }
}

/* The logo carries the brand on its own -- no tile, no type beside it. The old
   .ax-logo-mark / .ax-logo-word pair is gone from the markup; these resets stop
   any stale cached template from drawing the retired mark. */
.ax-logo-mark, .ax-logo-word { display: none; }

/* ── Right-side nav cluster ──────────────── */
/* The theme picker + light/dark toggle (.ax-theme-ctl / .ax-ctl-btn)
   are styled once in iskel-themes.css and shared with iskel_desk. */
.nav-right { display: flex; align-items: center; gap: var(--sp-2); }

/* ── Modern polish ───────────────────────── */
.nav-links .nav-cta,
.nav-links .nav-cta.active {
  background: var(--ax-primary) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ax-primary) 28%, transparent);
}
.nav-links .nav-cta:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--ax-primary) 45%, transparent); }

.btn-primary {
  background: var(--ax-primary) !important;
  position: relative; overflow: hidden; border: none;
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%);
  transform: translateX(-130%);
}
.btn-primary:hover::after { animation: logoShine 0.8s ease forwards; }

.hero h1 .highlight, .highlight {
  background: var(--ax-brand-grad);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: gradientShift 4s linear infinite;
}

/* Card lift + glow on the common surfaces */
.ind-card, .client-card, .sp-card, .case-study-card, .pl-card, .mission-card, .value-item, .team-card, .blog-card {
  position: relative;
}


/* Textured alt sections */
.section-alt {
  position: relative;
  background-image: radial-gradient(var(--texture) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

/* Animated hero glass cards */
.hero-card-stack .h-card { animation: floaty 7s ease-in-out infinite; }
.hero-card-stack .h-card:nth-child(2) { animation-delay: -2.3s; }
.hero-card-stack .h-card:nth-child(3) { animation-delay: -4.6s; }

/* ── Keyframes ───────────────────────────── */
@keyframes gradientShift { to { background-position: 220% center; } }
@keyframes logoShine     { to { transform: translateX(130%); } }
@keyframes floaty        { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ============================================================
   PRODUCT ACCENTS — re-mapped to the active palette
   ------------------------------------------------------------
   Each product owns one hue slot from the active theme, so the
   seven products stay distinguishable in all 14 variants without
   leaving the palette. This replaces the previous block of
   per-product dark-mode !important overrides.
   ============================================================ */
.hc-feat-icon, .hc-mod-icon, .hc-feat-list li i { --p: var(--ax-p1); }  /* Healthcare    */
.mf-feat-icon, .mf-mod-icon, .mf-feat-list li i { --p: var(--ax-p2); }  /* Manufacturing */
.rp-feat-icon, .rp-mod-icon, .rp-feat-list li i { --p: var(--ax-p3); }  /* Retail & POS  */
.hr-feat-icon, .hr-mod-icon, .hr-comp-icon,
.hr-feat-list li i                              { --p: var(--ax-p4); }  /* HRMS          */
.ag-feat-icon, .ag-mod-icon, .ag-feat-list li i { --p: var(--ax-p5); }  /* Agriculture   */
.sc-feat-icon, .sc-mod-icon, .sc-feat-list li i { --p: var(--ax-p6); }  /* School        */
.cr-feat-icon, .cr-mod-icon, .cr-feat-list li i { --p: var(--ax-p7); }  /* CRM           */

.hc-feat-icon, .hc-mod-icon, .mf-feat-icon, .mf-mod-icon,
.rp-feat-icon, .rp-mod-icon, .hr-feat-icon, .hr-mod-icon, .hr-comp-icon,
.ag-feat-icon, .ag-mod-icon, .sc-feat-icon, .sc-mod-icon,
.cr-feat-icon, .cr-mod-icon {
  background: color-mix(in srgb, var(--p, var(--ax-primary)) 15%, transparent);
  color: var(--p, var(--ax-primary));
}
.hc-feat-list li i, .mf-feat-list li i, .rp-feat-list li i,
.hr-feat-list li i, .ag-feat-list li i, .sc-feat-list li i,
.cr-feat-list li i { color: var(--p, var(--ax-primary)); }

/* Product-page eyebrow labels read as one pill in every variant */
.section-label {
  color: var(--ax-link);
  background: color-mix(in srgb, var(--ax-primary) 13%, transparent);
  border-color: color-mix(in srgb, var(--ax-primary) 26%, transparent);
}

/* Light "process band" sections on product pages follow the alt ground */
[class$="-process-bg"] {
  background: var(--ax-bg-alt);
  background-image: radial-gradient(var(--ax-texture) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

/* Faint tint chips */
.client-modules span, .tech-tag {
  background: color-mix(in srgb, var(--ax-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--ax-primary) 22%, transparent);
}

.nav-toggle span { background: var(--ax-text); }
.success-icon { background: color-mix(in srgb, var(--ax-success) 16%, transparent); }
.form-msg.error {
  background: color-mix(in srgb, var(--ax-danger) 14%, transparent);
  color: var(--ax-danger);
  border-color: color-mix(in srgb, var(--ax-danger) 30%, transparent);
}
.field-input::placeholder { color: var(--ax-text-muted); }
.nav-dropdown-menu, .nav-mobile { box-shadow: var(--ax-shadow-lg); }
.ax-login-card { background: var(--ax-surface); border-color: var(--ax-border); }


/* ============================================================
   ✦ Curved section transitions (theme-aware)
   ============================================================ */

/* Home hero wave — fill follows the section below in both themes */
.hero-bottom-wave svg { display: block; width: 100%; height: 60px; }
.hero-bottom-wave svg path { fill: var(--bg); transition: fill 0.45s ease; }

/* Same curved transition under every secondary-page hero.
   A var(--bg)-coloured wave is masked onto the bottom of .page-hero,
   so it always matches the plain .section that follows — light & dark. */
.page-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 56px;
  background: var(--bg);
  z-index: 2;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 1080,0 1440,40 L1440,60 L0,60 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 1080,0 1440,40 L1440,60 L0,60 Z' fill='%23000'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
  transition: background-color 0.45s ease;
}

/* ============================================
   LEGAL PAGES
   ============================================
   Policy pages are read, not skimmed, so they get a narrower measure, a
   larger base size and more line-height than the marketing pages. Every
   colour is a token so all 14 palette/mode combinations work unchanged.
   ============================================ */

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 22px;
}
.legal-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ax-hero-muted);
}
.legal-meta-item i { font-size: 0.78rem; opacity: 0.85; }

.legal-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* ── Contents sidebar ─────────────────────── */
.legal-toc-wrap { position: sticky; top: calc(var(--ax-navbar-h) + 28px); }
.legal-toc-head {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.legal-toc-list { list-style: none; padding: 0; margin: 0; }
.legal-toc-list li { margin: 0; }
.legal-toc-list a {
  display: block;
  padding: 7px 0 7px 14px;
  border-left: var(--bw-2) solid var(--border);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-secondary);
  transition: var(--transition);
}
.legal-toc-list a:hover {
  color: var(--text-dark);
  border-left-color: var(--border-strong, var(--border));
}
.legal-toc-list a.active {
  color: var(--ax-link);
  border-left-color: var(--ax-primary);
  font-weight: 600;
}

/* ── Policy prose ─────────────────────────── */
.legal-prose { max-width: 720px; font-size: var(--fs-base); line-height: 1.8; color: var(--text-secondary); }
.legal-prose > p:first-child { font-size: var(--fs-md); color: var(--text-dark); }

.legal-prose h2 {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  /* Clears the fixed navbar when a heading is jumped to by anchor. */
  scroll-margin-top: calc(var(--ax-navbar-h) + 24px);
  margin: 52px 0 16px;
  padding-top: 4px;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-dark);
  margin: 32px 0 10px;
  scroll-margin-top: calc(var(--ax-navbar-h) + 24px);
}
.legal-prose p { margin: 0 0 16px; }
.legal-prose a { color: var(--ax-link); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.legal-prose a:hover { color: var(--ax-link-hover); }
.legal-prose strong { color: var(--text-dark); font-weight: 650; }

.legal-prose ul, .legal-prose ol { margin: 0 0 18px; padding-left: 22px; }
.legal-prose li { margin-bottom: 9px; }
.legal-prose li::marker { color: var(--ax-primary); }

/* Definition-style list for "we collect X because Y" passages. */
.legal-dl { margin: 0 0 20px; }
.legal-dl dt { font-weight: 650; color: var(--text-dark); margin-top: 14px; }
.legal-dl dd { margin: 4px 0 0; padding-left: 0; }

/* ── Tables (cookie register, third parties) ── */
.legal-table-wrap {
  overflow-x: auto;
  margin: 0 0 24px;
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-md);
}
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 520px; }
.legal-table th {
  text-align: left;
  font-weight: 700;
  color: var(--text-dark);
  background: var(--bg-light);
  padding: 12px 14px;
  border-bottom: var(--bw-1) solid var(--border);
  white-space: nowrap;
}
.legal-table td {
  padding: 12px 14px;
  border-bottom: var(--bw-1) solid var(--border);
  vertical-align: top;
  line-height: 1.6;
}
.legal-table tr:last-child td { border-bottom: none; }
.legal-table code {
  font-family: var(--ax-font-mono);
  font-size: 0.8em;
  background: var(--bg-light);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--text-dark);
}

/* ── Callouts ─────────────────────────────── */
.legal-note {
  display: flex;
  gap: 14px;
  background: var(--bg-light);
  border: var(--bw-1) solid var(--border);
  border-left: 3px solid var(--ax-primary);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin: 0 0 24px;
  font-size: var(--fs-sm);
}
.legal-note i { color: var(--ax-primary); font-size: 0.95rem; margin-top: 3px; flex-shrink: 0; }
.legal-note p:last-child { margin-bottom: 0; }
.legal-note strong { display: block; margin-bottom: 4px; }

.legal-contact-box {
  margin-top: 56px;
  padding: 28px 30px;
  background: var(--bg-light);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-lg);
}
.legal-contact-box h3 { margin-top: 0; font-size: var(--fs-md); }
.legal-contact-box p:last-child { margin-bottom: 0; }
.legal-entity-line {
  margin-top: 14px;
  padding-top: 14px;
  border-top: var(--bw-1) solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Inline button that reopens the cookie preferences panel from prose. */
.legal-prefs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: var(--bw-1) solid var(--border-strong, var(--border));
  border-radius: var(--r-sm);
  padding: 9px 16px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 20px;
}
.legal-prefs-btn:hover { border-color: var(--ax-primary); color: var(--ax-link); transform: translateY(-1px); }

@media (max-width: 980px) {
  /* minmax(0, 1fr), not 1fr: a grid track defaults to min-width:auto, so
     long contents-list entries were forcing the track wider than the
     viewport and giving the page a horizontal scrollbar on phones. */
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .legal-toc-wrap { position: static; min-width: 0; }
  .legal-prose { min-width: 0; }
  .legal-toc {
    background: var(--bg-light);
    border: var(--bw-1) solid var(--border);
    border-radius: var(--r-md);
    padding: 18px 20px;
  }
  .legal-toc-list { columns: 2; column-gap: 24px; }
  .legal-toc-list a { border-left: none; padding-left: 0; }
  .legal-toc-list a.active { border-left: none; }
  .legal-prose { max-width: none; }
}
@media (max-width: 560px) {
  .legal-toc-list { columns: 1; }
}

/* ============================================
   COOKIE CONSENT
   ============================================
   Banner + preferences dialog. Every colour is a token, so this works
   across all seven palettes in both light and dark.

   Note the explicit [hidden] rules: these elements set display via their
   own rules, which would otherwise beat the user-agent [hidden] style and
   leave the banner visible after it is dismissed.
   ============================================ */

.cc-root[hidden] { display: none !important; }

/* ── Banner ───────────────────────────────── */
.cc-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, calc(100% + 32px));
  width: min(920px, calc(100vw - 32px));
  z-index: 9000;
  background: var(--surface);
  border: var(--bw-1) solid var(--border-strong, var(--border));
  border-radius: var(--r-lg);
  box-shadow: var(--ax-elev-5);
  opacity: 0;
  transition: transform var(--ax-t-slow), opacity var(--ax-t-slow);
}
.cc-banner[hidden] { display: none !important; }
.cc-banner.cc-in { transform: translate(-50%, 0); opacity: 1; }

.cc-banner-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px 26px;
}
.cc-banner-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-base);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 6px;
}
.cc-banner-title i { color: var(--ax-primary); font-size: 0.92rem; }
.cc-banner-text p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-secondary);
}
.cc-banner-text a { color: var(--ax-link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cc-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ── Buttons ──────────────────────────────── */
.cc-btn {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 650;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
  border: var(--bw-1) solid transparent;
}
.cc-btn-solid {
  background: var(--ax-primary);
  color: var(--ax-on-primary);
  border-color: var(--ax-primary);
}
.cc-btn-solid:hover {
  background: var(--ax-primary-hover);
  border-color: var(--ax-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--ax-ring);
}
.cc-btn-outline {
  background: transparent;
  color: var(--text-dark);
  border-color: var(--border-strong, var(--border));
}
.cc-btn-outline:hover { border-color: var(--ax-primary); color: var(--ax-link); }
.cc-btn-ghost { background: transparent; color: var(--text-secondary); }
.cc-btn-ghost:hover { color: var(--ax-link); text-decoration: underline; text-underline-offset: 3px; }
.cc-btn:focus-visible { outline: 2px solid var(--ax-primary); outline-offset: 2px; }

/* ── Overlay + panel ──────────────────────── */
.cc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9010;
  background: var(--ax-scrim);
  opacity: 0;
  transition: opacity var(--ax-t-base);
}
.cc-overlay[hidden] { display: none !important; }
.cc-overlay.cc-in { opacity: 1; }

.cc-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  width: min(680px, calc(100vw - 32px));
  max-height: min(84vh, 780px);
  z-index: 9020;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--ax-elev-5);
  opacity: 0;
  transition: transform var(--ax-t-spring), opacity var(--ax-t-base);
}
.cc-panel[hidden] { display: none !important; }
.cc-panel.cc-in { transform: translate(-50%, -50%); opacity: 1; }

.cc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: var(--bw-1) solid var(--border);
  flex-shrink: 0;
}
.cc-panel-head h2 {
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-dark);
  margin: 0;
}
.cc-close {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}
.cc-close:hover { border-color: var(--ax-primary); color: var(--ax-link); }
.cc-close:focus-visible { outline: 2px solid var(--ax-primary); outline-offset: 2px; }

.cc-panel-body { padding: 22px 26px; overflow-y: auto; flex: 1; }
.cc-panel-intro {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 22px;
}

/* ── Category rows ────────────────────────── */
.cc-cat {
  padding: 18px 0;
  border-top: var(--bw-1) solid var(--border);
}
.cc-cat:first-of-type { border-top: none; padding-top: 0; }
.cc-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.cc-cat-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-cat-title h3 {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}
.cc-always {
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ax-success);
  background: color-mix(in srgb, var(--ax-success) 12%, transparent);
  border-radius: var(--r-pill);
  padding: 3px 9px;
}
.cc-lock { color: var(--text-secondary); opacity: 0.5; font-size: var(--fs-sm); padding-right: 6px; }
.cc-cat-desc { font-size: var(--fs-sm); line-height: 1.65; color: var(--text-secondary); margin: 0 0 10px; }
.cc-cat-empty {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); color: var(--ax-success); margin: 0;
}

/* ── Toggle switch ────────────────────────── */
.cc-switch { position: relative; display: inline-block; width: 44px; height: 25px; flex-shrink: 0; }
.cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-slider {
  position: absolute; inset: 0;
  background: var(--border-strong, var(--border));
  border-radius: var(--r-pill);
  transition: var(--transition);
  pointer-events: none;
}
.cc-slider::before {
  content: '';
  position: absolute;
  width: 19px; height: 19px;
  left: 3px; top: 3px;
  background: var(--surface);
  border-radius: 50%;
  transition: var(--transition);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}
.cc-switch input:checked + .cc-slider { background: var(--ax-primary); }
.cc-switch input:checked + .cc-slider::before { transform: translateX(19px); }
.cc-switch input:focus-visible + .cc-slider { outline: 2px solid var(--ax-primary); outline-offset: 2px; }

/* ── Per-category detail table ────────────── */
.cc-details { margin-top: 10px; }
.cc-details summary {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ax-link);
  cursor: pointer;
  padding: 5px 0;
  list-style: none;
}
.cc-details summary::-webkit-details-marker { display: none; }
.cc-details summary::before { content: '\25B8'; display: inline-block; margin-right: 7px; transition: transform var(--ax-t-fast); }
.cc-details[open] summary::before { transform: rotate(90deg); }
.cc-table-wrap {
  overflow-x: auto;
  margin-top: 10px;
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-sm);
}
.cc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); min-width: 460px; }
.cc-table th {
  text-align: left;
  background: var(--bg-light);
  color: var(--text-dark);
  font-weight: 700;
  padding: 9px 11px;
  border-bottom: var(--bw-1) solid var(--border);
  white-space: nowrap;
}
.cc-table td {
  padding: 9px 11px;
  border-bottom: var(--bw-1) solid var(--border);
  color: var(--text-secondary);
  line-height: 1.55;
  vertical-align: top;
}
.cc-table tr:last-child td { border-bottom: none; }
.cc-table code {
  font-family: var(--ax-font-mono);
  font-size: 0.94em;
  color: var(--text-dark);
  word-break: break-word;
}

.cc-panel-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 26px;
  border-top: var(--bw-1) solid var(--border);
  background: var(--bg-light);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  flex-shrink: 0;
}

@media (max-width: 780px) {
  .cc-banner { bottom: 12px; width: calc(100vw - 24px); }
  .cc-banner-inner { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px; }
  .cc-banner-actions { flex-wrap: wrap; }
  .cc-banner-actions .cc-btn { flex: 1 1 auto; text-align: center; }
  .cc-panel-foot { flex-direction: column-reverse; }
  .cc-panel-foot .cc-btn { width: 100%; }
}

/* Someone who prefers reduced motion gets the dialog without the slide. */
@media (prefers-reduced-motion: reduce) {
  .cc-banner, .cc-panel, .cc-overlay, .cc-slider, .cc-slider::before { transition: none; }
  .cc-banner { transform: translate(-50%, 0); }
  .cc-panel { transform: translate(-50%, -50%); }
}

/* Legal links in the footer bottom bar. The cookie-preferences control is
   a <button> because it opens a dialog rather than navigating — styled to
   sit flush with the links beside it. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  order: 2;
}
.footer-legal a,
.footer-legal-btn {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.74);
  transition: var(--transition);
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.footer-legal a:hover,
.footer-legal-btn:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:focus-visible,
.footer-legal-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 3px; border-radius: 2px; }

.footer-built { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.7); order: 3; }
.footer-built i { color: var(--ax-danger); }

@media (max-width: 860px) {
  .footer-legal { justify-content: center; }
}

/* Banner steps aside while the preferences dialog is open, so the visitor
   is never shown two competing sets of accept/reject buttons at once. */
.cc-banner.cc-behind { opacity: 0; transform: translate(-50%, calc(100% + 32px)); pointer-events: none; }

/* Cross-links between policy pages — every policy leads to the others, so
   a reader who lands on one is never stuck there. */
.legal-related { margin-top: 52px; padding-top: 26px; border-top: var(--bw-1) solid var(--border); }
.legal-related-head {
  font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.13em; color: var(--text-secondary); margin-bottom: 14px;
}
.legal-related-links { display: flex; flex-wrap: wrap; gap: 10px; }
.legal-related-links a {
  display: inline-flex; align-items: center;
  background: var(--surface);
  border: var(--bw-1) solid var(--border);
  border-radius: var(--r-pill);
  padding: 7px 16px;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition);
}
.legal-related-links a:hover {
  border-color: var(--ax-primary); color: var(--ax-link); transform: translateY(-1px);
}

/* ============================================
   SCROLL REVEAL
   ============================================
   The hidden state is scoped to .has-reveal, which reveal.js adds to
   <html> only once it is running. Without the script nothing is hidden,
   so the page degrades to fully visible rather than to blank.
   ============================================ */

.has-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
}
.has-reveal .reveal.reveal-in {
  opacity: 1;
  transform: none;
  /* Longer than a UI transition, and eased out hard, so it reads as the
     content settling rather than as a control responding. */
  transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Elements already on screen at load are never given .reveal at all, so
   there is no "already shown" state to style here. */

@media (prefers-reduced-motion: reduce) {
  .has-reveal .reveal,
  .has-reveal .reveal.reveal-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Attribution beneath the headline figures. Deliberately quiet — it
   qualifies the numbers without competing with them, and it must never
   be separated from them. */
.hero-stats-note {
  margin: 18px 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--ax-hero-muted);
  max-width: 46ch;
}
.stats-note {
  margin: 16px 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
  max-width: 52ch;
}

/* ============================================
   ABOUT — "AT A GLANCE" PANEL
   ============================================
   Replaces a 480px gradient placeholder that stood in for a photograph.
   A panel of true, checkable facts does more for a young company than a
   stock image would, and costs nothing in credibility.
   ============================================ */

.about-facts {
  border-radius: var(--r-xl);
  padding: 36px 34px;
  color: var(--ax-hero-text);
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--ax-primary) 30%, transparent), transparent 46%),
    linear-gradient(150deg,
      var(--ax-hero-solid) 0%,
      color-mix(in srgb, var(--ax-p1) 30%, var(--ax-hero-solid)) 58%,
      var(--ax-hero-solid) 100%);
  box-shadow: var(--ax-elev-4);
  position: relative;
  overflow: hidden;
}
/* Faint grid, masked to fade at the edges — gives the panel some texture
   without competing with the text sitting on it. */
.about-facts::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 76%);
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 76%);
}
.about-facts > * { position: relative; z-index: 1; }

.about-facts-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: var(--bw-1) solid rgba(255, 255, 255, 0.16);
}
.about-facts-mark {
  font-family: var(--ax-font-brand);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
}
.about-facts-sub {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--ax-hero-muted);
}

.about-facts-list { margin: 0; }
.about-fact { padding: 13px 0; border-bottom: var(--bw-1) solid rgba(255, 255, 255, 0.09); }
.about-fact:last-child { border-bottom: none; }
.about-fact dt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--ax-hero-muted);
  margin-bottom: 5px;
}
.about-fact dt i { font-size: 0.7rem; opacity: 0.85; }
.about-fact dd {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}
.about-facts-foot {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: var(--bw-1) solid rgba(255, 255, 255, 0.16);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--ax-hero-muted);
}

@media (max-width: 860px) {
  .about-facts { padding: 28px 24px; }
}