/* =========================================================
   Boost Hotels - Design System & Global Styles
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Color - Boost Hotels brand system: blue (trust/tech), orange (energy/CTA),
     purple (premium/marketing), white (clarity). */
  --color-bg: #120b2e;
  --color-bg-alt: #1b1145;
  --color-bg-alt-2: #170f3d;
  --color-surface: #ffffff;
  --color-surface-muted: #f7f7fc;
  --color-border: #e4e1f5;
  --color-border-dark: #2f2566;

  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-light: #60a5fa;

  --color-secondary: #7c3aed;
  --color-secondary-dark: #6d28d9;
  --color-secondary-light: #a78bfa;

  --color-accent: #f97316;
  --color-accent-dark: #c2410c;
  --color-accent-light: #fdba74;

  --color-text: #17102e;
  --color-text-muted: #5b5678;
  --color-text-inverse: #f7f5ff;
  --color-text-inverse-muted: #b8aedd;

  --color-success: #17b26a;
  --color-warning: #f59e0b;
  --color-danger: #e5484d;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #f97316 0%, #7c3aed 100%);
  --grad-cool: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --grad-warm: linear-gradient(135deg, #f97316 0%, #2563eb 100%);
  --grad-dark-mesh: radial-gradient(60% 60% at 15% 20%, rgba(37,99,235,0.35) 0%, rgba(37,99,235,0) 60%),
                     radial-gradient(50% 50% at 85% 10%, rgba(249,115,22,0.28) 0%, rgba(249,115,22,0) 60%),
                     radial-gradient(70% 70% at 50% 100%, rgba(124,58,237,0.28) 0%, rgba(124,58,237,0) 60%);

  /* Typography */
  --font-heading: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-header-footer: "Roboto", "Inter", system-ui, sans-serif;

  --fs-h1: clamp(2.35rem, 1.5rem + 3.6vw, 3.9rem);
  --fs-h2: clamp(1.8rem, 1.3rem + 2.1vw, 2.85rem);
  --fs-h3: clamp(1.35rem, 1.15rem + 0.9vw, 1.8rem);
  --fs-h4: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout */
  --container-max: 1200px;
  /* Header height as a global token so elements OUTSIDE the header (e.g. the
     full-screen mobile menu, which is a sibling of <header>) can reference it. */
  --nav-h: clamp(64px, 8vw, 84px);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(16, 19, 35, 0.06);
  --shadow-md: 0 12px 28px rgba(16, 19, 35, 0.10);
  --shadow-lg: 0 24px 48px rgba(16, 19, 35, 0.16);
  --shadow-glow: 0 0 0 1px rgba(249,115,22,0.18), 0 20px 40px rgba(124,58,237,0.24);

  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img, picture, svg { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

html { overflow-x: hidden; }

body {
  max-width: 100%;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.15; font-weight: 700; color: var(--color-text); text-wrap: balance; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.018em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }
h4 { font-size: var(--fs-h4); }
p { color: var(--color-text-muted); text-wrap: pretty; }
p.lead { font-size: var(--fs-lead); color: var(--color-text-muted); }

/* Gradient headline text - for hero H1s / stat emphasis */
.text-gradient {
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute; left: 0; top: 0; transform: translateY(-120%);
  background: var(--color-primary); color: #fff; padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0; z-index: 1000; transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-md); }
.section { padding-block: var(--space-2xl); }
.section-sm { padding-block: var(--space-xl); }
@media (max-width: 480px) {
  .container { padding-inline: 1rem; }
  .section { padding-block: 3rem; }
  .section-sm { padding-block: 2.5rem; }
}
.section-dark { background: var(--color-bg); color: var(--color-text-inverse); }
.section-dark p, .section-dark .text-muted { color: var(--color-text-inverse-muted); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--color-text-inverse); }
.section-muted { background: var(--color-surface-muted); }
.section-mesh { position: relative; overflow: hidden; }
.section-mesh::before {
  content: ""; position: absolute; inset: -10%; background: var(--grad-dark-mesh); pointer-events: none;
  background-size: 130% 130%; animation: meshDrift 22s ease-in-out infinite alternate;
}
.section-mesh > * { position: relative; z-index: 1; }

@keyframes meshDrift {
  0% { background-position: 0% 0%; transform: translate3d(0,0,0) scale(1); }
  100% { background-position: 8% 6%; transform: translate3d(-1%, 1%, 0) scale(1.04); }
}

/* ---------- Product page banner + showcase image ---------- */
.section-banner { background-size: cover; background-position: center; }
.section-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,11,46,0.86) 0%, rgba(18,11,46,0.94) 100%);
}
.product-showcase { padding-block: var(--space-2xl); }
.product-showcase-visual { position: relative; max-width: 640px; margin-inline: auto; }
.product-showcase-visual::before {
  content: ""; position: absolute; inset: 6%; z-index: 0; border-radius: 50%;
  background: radial-gradient(55% 55% at 50% 50%, rgba(37,99,235,0.2) 0%, rgba(124,58,237,0.14) 55%, transparent 78%);
  filter: blur(28px); pointer-events: none;
}
.product-showcase-visual img {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  filter: drop-shadow(0 24px 34px rgba(23,16,46,0.16));
  transition: transform var(--transition);
}
.product-showcase-visual:hover img { transform: translateY(-4px); }

/* Animated underline links */
.card-link, .footer-grid a, .nav-submenu-col a {
  position: relative;
}
.card .card-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: currentColor;
  transition: width var(--transition);
}
.card:hover .card-link::after { width: 100%; }

.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: var(--space-sm);
}
.section-dark .eyebrow { color: var(--color-accent); }

.section-head { max-width: 720px; margin-bottom: var(--space-lg); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--space-sm); }

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.75rem; border-radius: var(--radius-pill);
  font-size: var(--fs-small); font-weight: 600; background: rgba(37,99,235,0.1); color: var(--color-primary-dark);
}
.badge.accent { background: rgba(249,115,22,0.12); color: var(--color-accent-dark); }
.badge.secondary { background: rgba(124,58,237,0.12); color: var(--color-secondary-dark); }
.badge.on-dark { background: rgba(255,255,255,0.1); color: var(--color-text-inverse); }

.hero-tab-row { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }
.badge-tab {
  appearance: none; -webkit-appearance: none; border: none; cursor: pointer; font-family: inherit;
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.badge-tab:hover { transform: translateY(-1px); }
.badge-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.badge-tab.is-active {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.hero-product-grid .card { animation: heroTabFade 320ms ease; }
@keyframes heroTabFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.6rem; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.95rem;
  border: 1px solid transparent; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-glow); position: relative; overflow: hidden; }
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(249,115,22,0.28), 0 26px 50px rgba(124,58,237,0.34); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-15deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transition: transform 650ms ease;
}
.btn-primary:hover::after { transform: translateX(120%) skewX(-15deg); }
.btn-outline { background: transparent; border-color: var(--color-border-dark); color: inherit; }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.section-dark .btn-outline { border-color: rgba(255,255,255,0.25); }
.btn-white { background: #fff; color: var(--color-bg); }
.btn-white:hover { background: var(--color-surface-muted); }
.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.875rem; }
.btn-block { width: 100%; }

/* ==========================================================
   Header / Navigation - fluid, glassmorphism, drill-down mobile
   ========================================================== */
.site-header {
  --nav-pad-inline: clamp(1rem, 4vw, 2.5rem);
  --nav-gap: clamp(0.6rem, 1.4vw, 1.75rem);
  --nav-font: clamp(0.82rem, 0.5vw + 0.72rem, 0.94rem);
  --nav-logo-size: clamp(32px, 4vw, 40px);

  position: sticky; top: 0; z-index: 130;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(23,16,46,0.08);
  transition: background var(--transition), box-shadow var(--transition);
  font-family: var(--font-header-footer);
}
.site-header.scrolled { background: rgba(255,255,255,0.92); box-shadow: 0 8px 30px rgba(23,16,46,0.08); }

/* Scroll progress bar (injected by main.js) */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--grad-primary); z-index: 200; transition: width 80ms linear; }

.nav-bar {
  width: 100%; max-width: var(--container-max); margin-inline: auto;
  padding-inline: var(--nav-pad-inline);
  display: flex; align-items: center; justify-content: space-between; gap: var(--nav-gap);
}

/* ---- Logo ---- */
.nav-logo { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; flex-shrink: 0; }
.nav-logo-mark { width: var(--nav-logo-size); height: var(--nav-logo-size); display: block; object-fit: contain; transition: transform var(--transition); }
.nav-logo-text { font-weight: 800; font-size: clamp(1rem, 0.4vw + 0.95rem, 1.2rem); color: var(--color-text); letter-spacing: -0.01em; white-space: nowrap; }
.nav-logo:hover .nav-logo-mark { transform: scale(1.08) rotate(-4deg); }
/* Drop the wordmark on very small phones so the logo mark + hamburger always fit */
@media (max-width: 360px) { .nav-logo-text { display: none; } }

/* ---- Primary nav (desktop) ---- */
.nav-primary { display: flex; min-width: 0; }
.nav-list { display: flex; align-items: center; gap: var(--nav-gap); list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }

.nav-link {
  appearance: none; background: none; border: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
  color: var(--color-text-muted); font-weight: 600; font-size: var(--nav-font);
  padding: 0.5rem 0.05rem; position: relative;
  transition: color var(--transition);
}
.nav-link:hover, .nav-link[aria-current="page"], .nav-trigger[aria-expanded="true"] { color: var(--color-text); }

.nav-link::after {
  content: ""; position: absolute; left: 0.05rem; right: 0.05rem; bottom: -2px; height: 2px;
  background: var(--grad-primary); border-radius: 2px; transform-origin: left;
  transform: scaleX(0); transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-link:hover::after, .nav-link:focus-visible::after, .nav-link[aria-current="page"]::after, .nav-trigger[aria-expanded="true"]::after { transform: scaleX(1); }

.nav-chevron { width: 10px; height: 10px; transition: transform var(--transition); }
.nav-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* ---- Desktop dropdown / mega-menu ---- */
.nav-submenu {
  position: absolute; top: calc(100% + 12px); left: 0; transform: translateY(8px);
  min-width: 244px; max-width: calc(100vw - 2rem);
  background: rgba(255,255,255,0.98); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: 0 30px 60px -12px rgba(23,16,46,0.22), 0 0 0 1px rgba(23,16,46,0.03);
  padding: 1.25rem; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2,0.8,0.2,1), visibility 220ms;
  z-index: 50;
}
/* Invisible bridge that fills the gap between the trigger and the panel, so the
   pointer never leaves the hoverable area while travelling into the menu. */
.nav-submenu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-has-menu:hover .nav-submenu,
.nav-has-menu:focus-within .nav-submenu,
.nav-has-menu.is-open .nav-submenu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}

/* Mega panel: pinned to the viewport and centred, so it can never overflow the
   left/right edge no matter which trigger opens it or how wide the screen is.
   (position:fixed is viewport-relative here since the header sets up no
   containing block.) A full-width top bridge keeps it hover-connected. */
.nav-submenu-mega {
  position: fixed; top: var(--nav-h); left: 50%; right: auto;
  transform: translate(-50%, 8px);
  width: min(1180px, calc(100vw - 2rem));
  display: grid; grid-template-columns: repeat(5, 1fr) 220px; gap: 1.25rem;
}
.nav-submenu-mega::before { top: -16px; left: 0; right: 0; height: 16px; }
.nav-has-menu:hover .nav-submenu-mega,
.nav-has-menu:focus-within .nav-submenu-mega,
.nav-has-menu.is-open .nav-submenu-mega { transform: translate(-50%, 0); }
@media (max-width: 1080px) {
  .nav-submenu-mega { grid-template-columns: repeat(2, 1fr); width: min(640px, calc(100vw - 2rem)); }
  .nav-submenu-mega .nav-submenu-promo { display: none; }
}

.nav-submenu-col { display: flex; flex-direction: column; }
.nav-submenu-heading { position: relative; color: var(--color-text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin: 0 0 0.75rem; padding-top: 0.7rem; }
.nav-submenu-heading::before { content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 3px; border-radius: 2px; background: var(--grad-primary); }
.nav-submenu-col:nth-child(2) .nav-submenu-heading::before { background: var(--grad-cool); }
.nav-submenu-col:nth-child(3) .nav-submenu-heading::before { background: var(--grad-warm); }
.nav-submenu-col:nth-child(4) .nav-submenu-heading::before { background: var(--grad-primary); }
.nav-submenu-col:nth-child(5) .nav-submenu-heading::before { background: var(--grad-cool); }
.nav-submenu-col a {
  display: flex; align-items: center; gap: 0.6rem; color: var(--color-text); font-size: 0.87rem; font-weight: 600;
  padding: 0.45rem 0.3rem; border-radius: 8px; transition: color var(--transition), background var(--transition), transform var(--transition);
}
.nav-submenu-col a:hover { color: var(--color-accent-dark); background: var(--color-surface-muted); transform: translateX(3px); }
.nav-submenu-col a[aria-current="page"] { color: var(--color-accent-dark); font-weight: 800; }
.nav-submenu-col a svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--color-primary); opacity: 0.75; }
.nav-submenu-col:nth-child(2) a svg { color: var(--color-secondary); }
.nav-submenu-col:nth-child(3) a svg { color: var(--color-accent-dark); }
.nav-submenu-col:nth-child(4) a svg { color: var(--color-primary); }
.nav-submenu-col:nth-child(5) a svg { color: var(--color-secondary); }

.nav-submenu-promo { border-radius: var(--radius-md); padding: 1.35rem; background: var(--grad-primary); color: #fff; display: flex; flex-direction: column; gap: 0.2rem; }
.nav-submenu-promo h4 { color: #fff; font-size: 1rem; margin: 0.2rem 0 0.4rem; }
.nav-submenu-promo p { color: rgba(255,255,255,0.85); font-size: 0.85rem; margin: 0 0 1rem; }
.nav-submenu-promo .btn { align-self: flex-start; }

/* ---- Actions: CTA + hamburger ---- */
.nav-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap;
  background: var(--grad-primary); color: #fff; font-weight: 700; font-size: var(--nav-font);
  padding: 0.65rem 1.3rem; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-glow); transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow var(--transition);
}
.nav-cta:hover { transform: scale(1.055); box-shadow: 0 0 0 1px rgba(249,115,22,0.3), 0 24px 46px rgba(124,58,237,0.32); }
.nav-cta:active { transform: scale(0.98); }

.nav-toggle {
  display: none; background: none; border: none; padding: 0; width: 40px; height: 40px;
  align-items: center; justify-content: center; cursor: pointer; position: relative; flex-shrink: 0;
}
.nav-toggle-box { width: 22px; height: 16px; position: relative; display: block; pointer-events: none; }
.nav-toggle-bar {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--color-text);
  transition: transform 320ms cubic-bezier(0.65,0,0.35,1), opacity 200ms ease, top 320ms cubic-bezier(0.65,0,0.35,1);
}
.nav-toggle-bar:nth-child(1) { top: 0; }
.nav-toggle-bar:nth-child(2) { top: 7px; }
.nav-toggle-bar:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ---- Keyboard focus ---- */
.nav-link:focus-visible, .nav-cta:focus-visible, .nav-toggle:focus-visible, .nav-logo:focus-visible,
.nav-submenu-col a:focus-visible, .nav-mobile-list a:focus-visible, .nav-mobile-list button:focus-visible, .nav-mobile-back:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 6px;
}

/* ---- Full-screen mobile menu (drill-down) ----
   Starts BELOW the header (top: var(--nav-h)) so the header bar - logo + the
   hamburger/X - stays visible and the X remains tappable to close. The header
   (z-index 130) sits above this overlay (z-index 120). */
.nav-mobile {
  position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 120;
  background: rgba(255,255,255,0.99); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.2,0.8,0.2,1), visibility 300ms;
}
.nav-mobile.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

.nav-mobile-inner { position: relative; flex: 1; overflow: hidden; }
.nav-mobile-panel {
  position: absolute; inset: 0; padding: 1.5rem clamp(1.25rem, 5vw, 2rem) 1.5rem;
  overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(28px);
  transition: opacity 280ms ease, transform 280ms cubic-bezier(0.2,0.8,0.2,1), visibility 280ms;
}
.nav-mobile-panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); }
/* While the menu is CLOSED, force every panel fully inert. Without this, the
   always-present ".is-active" root panel keeps visibility:visible +
   pointer-events:auto and - because .nav-mobile is a position:fixed overlay
   sitting right below the header - silently captures clicks over the hero/banner
   on every page, navigating to whichever menu link is under the cursor. */
.nav-mobile:not(.is-open) .nav-mobile-panel { visibility: hidden; pointer-events: none; }

.nav-mobile-back {
  display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: none; cursor: pointer;
  color: var(--color-primary); font-weight: 700; font-size: 0.9rem; padding: 0.5rem 0.1rem; margin-bottom: 0.25rem;
}
.nav-mobile-back svg { width: 16px; height: 16px; }
.nav-mobile-panel-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; margin: 0.25rem 0 1rem; }

.nav-mobile-list { list-style: none; margin: 0; padding: 0; }
.nav-mobile-list > li { border-bottom: 1px solid var(--color-border); }
.nav-mobile-list a, .nav-mobile-list button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: none; border: none; text-align: left; cursor: pointer; font-family: inherit; text-decoration: none;
  color: var(--color-text); font-weight: 700; font-size: 1.05rem; padding: 1rem 0.1rem;
  transition: color var(--transition), transform 150ms ease;
}
.nav-mobile-list a[aria-current="page"] { color: var(--color-accent-dark); }
.nav-mobile-list a:active, .nav-mobile-list button:active { transform: scale(0.98); }
.nav-mobile-list button svg { width: 18px; height: 18px; color: var(--color-text-muted); flex-shrink: 0; }
.nav-mobile-list-leaf a { font-size: 0.98rem; font-weight: 600; }

.nav-mobile-promo { margin-top: 1.25rem; padding: 1.25rem; border-radius: var(--radius-md); background: var(--color-surface-muted); }
.nav-mobile-promo h4 { font-size: 1rem; margin: 0.4rem 0 0.8rem; }

.nav-mobile-cta { padding: 1.1rem clamp(1.25rem, 5vw, 2rem); border-top: 1px solid var(--color-border); flex-shrink: 0; }

@media (max-width: 900px) {
  .nav-primary { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: var(--space-2xl) var(--space-xl); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 0.95fr 1.15fr; gap: var(--space-xl); align-items: center; }
.hero-visual { position: relative; }
.hero-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: var(--space-lg); backdrop-filter: blur(6px); }
.hero-stats { display: flex; gap: var(--space-lg); margin-top: var(--space-lg); flex-wrap: wrap; }
.hero-stat .num { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: #fff; }
.hero-stat .label { font-size: var(--fs-small); color: var(--color-text-inverse-muted); }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .hero-stats { gap: 1.5rem; }
  .hero-stat .num { font-size: 1.6rem; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: var(--fs-small); color: var(--color-text-inverse-muted); }
.breadcrumb a { color: var(--color-text-inverse-muted); transition: color var(--transition); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb .current { color: #fff; font-weight: 600; }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: var(--space-md); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(180px, auto); gap: var(--space-md); }
.bento .span-2 { grid-column: span 2; }
.bento .row-span-2 { grid-row: span 2; }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .span-2 { grid-column: span 2; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .bento .span-2 { grid-column: span 1; } }

/* Client logo marquee - dual-row, opposite-direction, seamless infinite scroll */
.logo-marquee-section { overflow: hidden; padding-block: 2.5rem; background: var(--color-surface-muted); }
.logo-marquee { overflow: hidden; margin-bottom: 1.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logo-marquee:last-child { margin-bottom: 0; }
.logo-marquee-track { display: flex; align-items: center; gap: 2.5rem; width: max-content; animation: logoMarquee 42s linear infinite; }
.logo-marquee-track-reverse { animation-name: logoMarqueeReverse; animation-duration: 36s; }
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
.logo-marquee-item { flex: 0 0 auto; height: 46px; display: flex; align-items: center; justify-content: center; }
.logo-marquee-item img { max-height: 100%; width: auto; max-width: 120px; object-fit: contain; transition: transform var(--transition); }
.logo-marquee-item:hover img { transform: scale(1.08); }
@keyframes logoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes logoMarqueeReverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Hardware photo marquee - scrolling rows of real product photography */
.hardware-marquee-item { flex: 0 0 auto; width: 210px; }
.hardware-photo-link { display: block; text-decoration: none; color: inherit; }
.hardware-photo-frame {
  width: 210px; height: 160px; border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.hardware-photo-frame img { max-width: 82%; max-height: 78%; object-fit: contain; transition: transform 450ms ease; }
.hardware-marquee-item:hover .hardware-photo-frame { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(37,99,235,0.3); }
.hardware-marquee-item:hover .hardware-photo-frame img { transform: scale(1.08); }
.hardware-marquee-caption { margin-top: 0.7rem; font-weight: 700; font-size: 0.9rem; text-align: center; transition: color var(--transition); }
.hardware-marquee-item:hover .hardware-marquee-caption { color: var(--color-primary); }

/* Category card photo thumbnail (replaces icon-tile where a real product photo exists) */
.category-photo {
  width: 100%; height: 160px; border-radius: var(--radius-md); background: var(--color-surface-muted);
  display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: var(--space-sm);
}
.category-photo img { max-width: 78%; max-height: 80%; object-fit: contain; transition: transform 450ms ease; }
.card:hover .category-photo img { transform: scale(1.08); }

/* Hero product photo - glass card, floating badges, hover tilt */
.hero-photo-wrap { position: relative; perspective: 1200px; }
.hero-photo-wrap img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; transition: transform 500ms ease; }
.hero-photo-wrap:hover img { transform: rotateY(-4deg) rotateX(2deg) scale(1.02); }
.floating-badge {
  position: absolute; display: flex; align-items: center; gap: 0.5rem; background: #ffffff; color: var(--color-text);
  padding: 0.65rem 1.05rem; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-weight: 700; font-size: 0.82rem;
  animation: floatChip 4s ease-in-out infinite;
}
.floating-badge svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }
.floating-badge.badge-top { top: -16px; left: -16px; }
.floating-badge.badge-bottom { bottom: -16px; right: -16px; animation-delay: -2s; }
@media (max-width: 640px) { .floating-badge { position: static; margin-top: 0.75rem; animation: none; } }
@keyframes floatChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Alternating product spotlight (image + text feature section) */
.spotlight-visual { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-muted); display: flex; align-items: center; justify-content: center; padding: var(--space-lg); min-height: 380px; }
.spotlight-visual img { max-width: 100%; max-height: 460px; width: auto; height: auto; object-fit: contain; display: block; transition: transform 600ms ease; }
.spotlight-visual:hover img { transform: scale(1.05); }

/* Award card - compact spotlight variant for side-by-side award images */
.award-card .spotlight-visual { min-height: 260px; padding: var(--space-md); background: var(--color-surface); }
.award-card .spotlight-visual img { max-height: 240px; }

.anchor-card { scroll-margin-top: 110px; }

/* Client logo wall */
.logo-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem; }
@media (max-width: 980px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .logo-wall { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } }
.logo-tile {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  height: 130px; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.logo-tile:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 14px 26px -10px rgba(37,99,235,0.3), var(--shadow-md); border-color: var(--color-primary); }
.logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform var(--transition); }
.logo-tile:hover img { transform: scale(1.05); }
.logo-tile-hidden { display: none; }
.logo-wall > [data-reveal]:nth-child(6n+1) { transition-delay: 0ms; }
.logo-wall > [data-reveal]:nth-child(6n+2) { transition-delay: 40ms; }
.logo-wall > [data-reveal]:nth-child(6n+3) { transition-delay: 80ms; }
.logo-wall > [data-reveal]:nth-child(6n+4) { transition-delay: 120ms; }
.logo-wall > [data-reveal]:nth-child(6n+5) { transition-delay: 160ms; }
.logo-wall > [data-reveal]:nth-child(6n+6) { transition-delay: 200ms; }

.card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-md); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-primary);
  transform: scaleX(0); transform-origin: left; transition: transform 400ms ease;
}
.card:hover::before { transform: scaleX(1); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(37,99,235,0.28); }
.card-dark { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--color-text-inverse); }
.card-dark p { color: var(--color-text-inverse-muted); }
.card-dark:hover { border-color: rgba(124,58,237,0.4); }

.icon-tile {
  width: 52px; height: 52px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  background: var(--grad-primary); color: #fff; margin-bottom: var(--space-sm); transition: transform var(--transition);
}
.icon-tile svg { width: 26px; height: 26px; }
.card:hover .icon-tile { transform: translateY(-3px) rotate(-4deg); }
.card h3, .card h4 { margin-bottom: 0.5rem; }

/* Alternate icon-tile gradients across grids for visual rhythm (orange/purple, blue/purple, orange/blue) */
.grid .card:nth-of-type(3n+2) .icon-tile { background: var(--grad-cool); }
.grid .card:nth-of-type(3n+3) .icon-tile { background: var(--grad-warm); }

/* Staggered reveal across grids/bento - pure CSS, no JS changes needed */
.grid > [data-reveal]:nth-child(1), .bento > [data-reveal]:nth-child(1) { transition-delay: 0ms; }
.grid > [data-reveal]:nth-child(2), .bento > [data-reveal]:nth-child(2) { transition-delay: 80ms; }
.grid > [data-reveal]:nth-child(3), .bento > [data-reveal]:nth-child(3) { transition-delay: 160ms; }
.grid > [data-reveal]:nth-child(4), .bento > [data-reveal]:nth-child(4) { transition-delay: 240ms; }
.grid > [data-reveal]:nth-child(5), .bento > [data-reveal]:nth-child(5) { transition-delay: 320ms; }
.grid > [data-reveal]:nth-child(n+6) { transition-delay: 380ms; }
.card .card-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: var(--space-sm); font-weight: 700; color: var(--color-primary); }
.card-dark .card-link { color: var(--color-accent); }

/* Product/category cards */
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-card .badge-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: var(--space-sm); }
.product-card ul.feature-list { margin-top: var(--space-sm); }
.feature-list li { display: flex; gap: 0.5rem; padding: 0.3rem 0; color: var(--color-text-muted); font-size: 0.9rem; }
.feature-list li svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--color-accent-dark); margin-top: 2px; }
.section-dark .feature-list li { color: var(--color-text-inverse-muted); }

/* ---------- Product showcase (circular module badges) ---------- */
.showcase-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2.25rem 1rem; }
@media (max-width: 980px) { .showcase-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px) { .showcase-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem 0.75rem; } }
@media (max-width: 420px) { .showcase-grid { grid-template-columns: repeat(2, 1fr); } }

.showcase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
}
.showcase-icon {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--color-surface);
  /* REMOVE THIS LINE: border: 2px solid var(--color-border); */
  border: none; /* Add this instead */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 480ms cubic-bezier(0.16, 1, 0.3, 1), background 480ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  padding: 0; /* Change from 14px to 0 */
}
.showcase-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.showcase-icon svg { width: 38px; height: 38px; }
/* Diagonal shine sweep - swept across the badge on hover for a polished, modern feel */
.showcase-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.showcase-item span {
  font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted);
  transition: color 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1.3;
  display: inline-block;
}
.showcase-item:hover .showcase-icon,
.showcase-item:focus-visible .showcase-icon { transform: translateY(-8px) scale(1.08) rotate(-3deg); box-shadow: var(--shadow-md); }
.showcase-item:hover .showcase-icon img,
.showcase-item:focus-visible .showcase-icon img { transform: scale(1.06) rotate(3deg); }
.showcase-item:hover .showcase-icon::after,
.showcase-item:focus-visible .showcase-icon::after { transform: translateX(120%); }
.showcase-item:hover span,
.showcase-item:focus-visible span { color: var(--color-text); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .showcase-icon, .showcase-icon img, .showcase-icon::after, .showcase-item span { transition: none !important; }
}

.showcase-grid .showcase-item:nth-child(3n+1) .showcase-icon { border-color: rgba(37,99,235,0.35); color: var(--color-primary); }
.showcase-grid .showcase-item:nth-child(3n+1):hover .showcase-icon { border-color: var(--color-primary); background: rgba(37,99,235,0.06); }
.showcase-grid .showcase-item:nth-child(3n+2) .showcase-icon { border-color: rgba(124,58,237,0.35); color: var(--color-secondary); }
.showcase-grid .showcase-item:nth-child(3n+2):hover .showcase-icon { border-color: var(--color-secondary); background: rgba(124,58,237,0.06); }
.showcase-grid .showcase-item:nth-child(3n+3) .showcase-icon { border-color: rgba(249,115,22,0.35); color: var(--color-accent-dark); }
.showcase-grid .showcase-item:nth-child(3n+3):hover .showcase-icon { border-color: var(--color-accent-dark); background: rgba(249,115,22,0.06); }

/* ---------- Stats ---------- */
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); text-align: center; }
@media (max-width: 780px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .stats-strip { grid-template-columns: 1fr; gap: 1.25rem; } }
.stat .num { font-family: var(--font-heading); font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); font-weight: 800; }
.stat .num .suffix { color: var(--color-accent); }
.stat .label { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 0.3rem; }
.section-dark .stat .label { color: var(--color-text-inverse-muted); }

/* ---------- Testimonials ---------- */
.testimonial-track { position: relative; overflow: hidden; }
.testimonial-slides { display: flex; transition: transform 500ms cubic-bezier(0.4,0,0.2,1); }
.testimonial-slide { flex: 0 0 100%; padding: 0.5rem; }
.testimonial-slide .grid { align-items: stretch; }
.testimonial-card { height: 100%; }
.testimonial-card .quote-mark { font-family: var(--font-heading); font-size: 2.5rem; color: var(--color-primary); opacity: 0.35; line-height: 1; }
.testimonial-card .quote-text { font-style: italic; margin-block: 0.75rem 1rem; }
.testimonial-card .person { display: flex; align-items: center; gap: 0.75rem; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-primary); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; }
.avatar-photo { border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--color-surface-muted); }
.avatar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person .name { font-weight: 700; }
.person .role { font-size: var(--fs-small); color: var(--color-text-muted); }
.section-dark .person .role { color: var(--color-text-inverse-muted); }

.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: var(--space-lg); }
.carousel-dots { display: flex; gap: 0.5rem; }
.carousel-dots button { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border-dark); border: none; padding: 0; transition: background var(--transition), transform var(--transition); }
.carousel-dots button.active { background: var(--grad-primary); transform: scale(1.3); }
.carousel-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); color: #fff; display: flex; align-items: center; justify-content: center; transition: background var(--transition); }
.carousel-arrow:hover { background: rgba(255,255,255,0.12); }
.carousel-arrow svg { width: 18px; height: 18px; }

/* ---------- FAQ accordion ---------- */
.accordion-item {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 0.75rem;
  background: var(--color-surface); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.accordion-item:hover { border-color: rgba(37,99,235,0.3); box-shadow: var(--shadow-sm); }
.accordion-item.open { border-color: var(--color-primary); box-shadow: 0 10px 24px -12px rgba(37,99,235,0.28); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem; background: none; border: none; text-align: left;
  font-weight: 700; font-family: var(--font-heading); font-size: 1rem; line-height: 1.4; color: var(--color-text);
  border-radius: var(--radius-md); transition: color var(--transition);
}
.accordion-trigger:hover { color: var(--color-primary); }
.accordion-item.open .accordion-trigger { color: var(--color-primary-dark); }
.accordion-trigger .plus {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; padding: 3px; box-sizing: content-box;
  background: rgba(37,99,235,0.08); transition: transform 320ms cubic-bezier(0.4,0,0.2,1), background var(--transition), color var(--transition);
  color: var(--color-primary);
}
.accordion-item.open .accordion-trigger .plus { transform: rotate(135deg); background: var(--grad-primary); color: #fff; }

/* Grid-rows trick: animates smoothly to the answer's real height, no clipping on long text */
.accordion-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 340ms cubic-bezier(0.4,0,0.2,1);
}
.accordion-item.open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel-inner {
  overflow: hidden; min-height: 0; padding: 0 1.4rem; color: var(--color-text-muted); line-height: 1.65;
  transition: padding-bottom var(--transition);
}
.accordion-item.open .accordion-panel-inner { padding-bottom: 1.3rem; }

/* ---------- Forms ---------- */
.form-field { margin-bottom: var(--space-md); }
.form-field label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.4rem; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface-muted); transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(37,99,235,0.14); background: #fff;
}
.form-field .error-msg { display: none; color: var(--color-danger); font-size: var(--fs-small); margin-top: 0.35rem; }
.form-field.invalid input, .form-field.invalid textarea, .form-field.invalid select { border-color: var(--color-danger); }
.form-field.invalid .error-msg { display: block; }
.form-status { padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); margin-top: var(--space-sm); display: none; font-weight: 600; }
.form-status.show { display: block; }

/* reCAPTCHA renders a fixed-size (304x78px) iframe. As a grid-item descendant
   it can force #contact-form wider than its column, pushing the checkbox flush
   against the screen edge on mobile where it becomes hard/impossible to tap. */
#contact-form { min-width: 0; }
.recaptcha-field { display: flex; justify-content: center; }
@media (max-width: 420px) {
  .recaptcha-field { width: 100%; height: 60px; overflow: hidden; }
  .recaptcha-field .g-recaptcha { transform: scale(0.78); transform-origin: 0 0; }
}
.form-status.success { background: rgba(23,178,106,0.12); color: var(--color-success); }
.form-status.error { background: rgba(229,72,77,0.12); color: var(--color-danger); }

/* ---------- Pricing calculator ---------- */
.pricing-layout { display: grid; grid-template-columns: 1.65fr 1fr; gap: var(--space-lg); align-items: start; }
@media (max-width: 980px) { .pricing-layout { grid-template-columns: 1fr; } }

.pricing-modules-panel {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-lg); box-shadow: var(--shadow-sm);
}

.billing-toggle {
  display: flex; gap: 0.5rem; background: var(--color-surface-muted); padding: 0.4rem;
  border-radius: var(--radius-pill); margin-bottom: var(--space-lg);
}
.billing-btn {
  flex: 1; border: none; background: transparent; padding: 0.75rem 1rem; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 0.9rem; cursor: pointer; color: var(--color-text-muted); transition: var(--transition);
  font-family: inherit;
}
.billing-btn.active { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-glow); }
.billing-btn .badge { margin-left: 0.4rem; }

@media (max-width: 600px) {
  .billing-toggle { max-width: 320px; padding: 0.3rem; gap: 0.3rem; margin-bottom: var(--space-md); }
  .billing-btn { padding: 0.5rem 0.6rem; font-size: 0.8rem; }
  .billing-btn .badge { padding: 0.15rem 0.5rem; font-size: 0.65rem; margin-left: 0.3rem; }
}

/* Module picker - single-column list view with fluid row interactions */
.modules-grid { display: flex; flex-direction: column; gap: 0.85rem; }

.module-card {
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon info side";
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 1.05rem 1.35rem;
}
/* Growing left accent bar - replaces the default top bar for a list rhythm */
.module-card::before {
  top: 0; bottom: 0; left: 0; right: auto; width: 3px; height: auto;
  transform: scaleY(0); transform-origin: center;
}
.module-card:hover::before, .module-card.selected::before { transform: scaleY(1); }
.module-card:hover { transform: translateY(-3px); }
.module-card.selected { border-color: var(--color-primary); background: rgba(37,99,235,0.05); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.module-card.selected .icon-tile { background: var(--grad-primary); }

.module-card .icon-tile { grid-area: icon; margin-bottom: 0; }
.module-info { grid-area: info; min-width: 0; }
.module-info h3 { margin-bottom: 0.15rem; font-size: 1.02rem; }
.module-info p { margin: 0; font-size: 0.86rem; line-height: 1.45; }

.module-footer { grid-area: side; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; margin-top: 0; text-align: right; }
.module-price { color: var(--color-primary-dark); font-weight: 800; font-size: 1.1rem; line-height: 1.15; white-space: nowrap; }
.module-price small { display: block; color: var(--color-text-muted); font-size: 0.72rem; font-weight: 600; margin-top: 0.15rem; }
.mp-original { display: none; text-decoration: line-through; color: var(--color-text-muted); font-weight: 700; font-size: 0.8rem; margin-right: 0.4rem; }
.module-card.is-annual .mp-original { display: inline; }
.mp-amount { display: inline-block; transition: color var(--transition); }
.mp-amount.pulse { animation: pricePulse 360ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pricePulse { 0% { transform: scale(1); } 45% { transform: scale(1.16); color: var(--color-accent-dark); } 100% { transform: scale(1); } }

.select-pill {
  border: 1px solid var(--color-border); color: var(--color-text-muted); padding: 0.4rem 0.95rem;
  border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 700; transition: var(--transition); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.module-card:hover .select-pill { border-color: var(--color-primary); color: var(--color-primary); }
.module-card.selected .select-pill { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.module-card.selected:hover .select-pill { color: #fff; }

@media (max-width: 560px) {
  .module-card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon info" "side side"; }
  .module-footer { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; text-align: left; margin-top: 0.3rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
  .module-price small { display: inline; margin: 0 0 0 0.3rem; }
}

.pricing-summary {
  background: var(--color-bg); color: var(--color-text-inverse); border-radius: var(--radius-lg);
  padding: var(--space-lg); box-shadow: var(--shadow-lg); position: sticky; top: 90px;
}
.pricing-summary h2 { color: #fff; }
.pricing-summary .summary-subtitle { color: var(--color-text-inverse-muted); font-size: 0.9rem; margin-bottom: var(--space-md); }
.pricing-summary .form-field label { color: var(--color-text-inverse-muted); }
.pricing-summary .form-field input, .pricing-summary .form-field textarea {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: #fff;
}
.pricing-summary .form-field input::placeholder, .pricing-summary .form-field textarea::placeholder { color: var(--color-text-inverse-muted); }
.pricing-summary .form-field input:focus, .pricing-summary .form-field textarea:focus {
  background: rgba(255,255,255,0.1); box-shadow: 0 0 0 4px rgba(124,58,237,0.22);
}
@media (max-width: 980px) { .pricing-summary { position: static; } }

.selected-list { border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); padding: var(--space-sm) 0; margin: var(--space-md) 0; min-height: 60px; }
.selected-row { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; margin-bottom: 0.6rem; }
.selected-row span:last-child { font-weight: 700; white-space: nowrap; }
.empty-text { color: var(--color-text-inverse-muted); font-size: 0.9rem; line-height: 1.5; }

.price-line { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; color: var(--color-text-inverse-muted); margin: 0.6rem 0; }
.price-line strong { color: #fff; }
.price-line .discount { color: #4ade80 !important; font-weight: 800; }

.total-box { background: var(--grad-primary); border-radius: var(--radius-md); padding: var(--space-md); margin-top: var(--space-md); }
.total-box .label { font-size: 0.85rem; color: rgba(255,255,255,0.85); margin-bottom: 0.3rem; }
.total-box .amount { font-size: 1.9rem; font-weight: 800; font-family: var(--font-heading); }
.total-box .effective-monthly { font-size: 0.8rem; color: rgba(255,255,255,0.85); margin-top: 0.4rem; }

.pricing-note { color: var(--color-text-inverse-muted); font-size: 0.78rem; line-height: 1.6; margin-top: var(--space-sm); }

.pricing-disclaimer {
  display: flex; align-items: flex-start; gap: 0.85rem; background: rgba(249,115,22,0.08);
  border: 1px solid rgba(249,115,22,0.25); border-radius: var(--radius-md); padding: 1rem 1.25rem;
  margin-bottom: var(--space-lg);
}
.pricing-disclaimer svg { width: 22px; height: 22px; color: var(--color-accent-dark); flex-shrink: 0; margin-top: 0.15rem; }
.pricing-disclaimer p { margin: 0; font-size: 0.92rem; color: var(--color-text); line-height: 1.5; }
.pricing-disclaimer strong { color: var(--color-accent-dark); }

/* ---------- Agent / reseller registration ---------- */
.agent-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xl); align-items: start; }
@media (max-width: 980px) { .agent-layout { grid-template-columns: 1fr; } }

.form-panel {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-lg); box-shadow: var(--shadow-lg);
}

.dark-panel { background: var(--color-bg); color: var(--color-text-inverse); border-radius: var(--radius-md); padding: var(--space-md); margin-top: var(--space-lg); }
.dark-panel h3, .dark-panel h4 { color: #fff; margin-bottom: 0.5rem; }
.dark-panel p { color: var(--color-text-inverse-muted); margin: 0; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { max-width: 700px; margin-inline: auto; }
.cta-band p { max-width: 600px; margin: var(--space-sm) auto var(--space-lg); }

/* ---------- Pre-footer banner (shared across every page) ---------- */
.pre-footer-banner { position: relative; overflow: hidden; padding-top: var(--space-2xl); text-align: center; }
.pre-footer-text { max-width: 700px; margin-inline: auto; position: relative; z-index: 2; }
.pre-footer-text .cluster { justify-content: center; margin-top: 1.5rem; }

.pre-footer-stats { display: flex; justify-content: center; gap: 2.5rem; margin-top: 2rem; flex-wrap: wrap; }
.pre-footer-stats div { font-size: 0.82rem; color: var(--color-text-inverse-muted); }
.pre-footer-stats strong { display: block; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; color: #fff; }

/* Full-bleed, fluid image band - aspect-ratio matches the photo's native ratio exactly, so at any
   viewport width the complete image is shown: never cropped, never letterboxed. */
.pre-footer-visual-full { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: var(--space-xl); }
.pre-footer-visual-full-inner { position: relative; overflow: hidden; }
.pre-footer-visual-full-inner::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 90px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--color-bg) 0%, rgba(18,11,46,0) 100%);
}
.pre-footer-visual-full-inner img { width: 100%; height: auto; aspect-ratio: 1600 / 711; object-fit: cover; display: block; transition: transform 700ms ease; }
.pre-footer-visual-full:hover .pre-footer-visual-full-inner img { transform: scale(1.03); }
.pre-footer-visual-full .floating-badge { z-index: 2; }
.pre-footer-visual-full .badge-top { top: 20px; left: 20px; }
.pre-footer-visual-full .badge-bottom { bottom: 20px; right: 20px; }
@media (max-width: 640px) { .pre-footer-visual-full .badge-top, .pre-footer-visual-full .badge-bottom { position: static; display: inline-flex; margin: 0.5rem 0.4rem 0; animation: none; } }

@media (max-width: 640px) {
  .pre-footer-banner { padding-top: 3.5rem; }
  .pre-footer-stats { gap: 1.35rem; margin-top: 1.5rem; }
  .pre-footer-stats strong { font-size: 1.25rem; }
  .pre-footer-visual-full { margin-top: 2rem; }
}

/* Half-moon curve - visually bridges the fluid image band into the white footer below */
.pre-footer-curve { position: absolute; left: 0; right: 0; bottom: -2px; z-index: 3; line-height: 0; pointer-events: none; }
.pre-footer-curve svg { width: 100%; height: 70px; display: block; }
@media (max-width: 640px) { .pre-footer-curve svg { height: 36px; } }

/* ---------- Footer ---------- */
.site-footer { background: #ffffff; color: var(--color-text-muted); font-family: var(--font-header-footer); }

.site-footer > .container { padding-block: var(--space-xl) var(--space-lg); }
.footer-grid { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: var(--space-lg); }
.footer-brand { grid-row: span 2; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } .footer-brand { grid-row: auto; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; row-gap: 0; } .footer-brand { grid-row: auto; } }
.footer-grid h5 { color: var(--color-text); font-family: var(--font-header-footer); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-sm); }
.footer-grid ul li { margin-bottom: 0.55rem; }
.footer-grid a { color: var(--color-text-muted); transition: color var(--transition); font-size: 0.92rem; }
.footer-grid a:hover { color: var(--color-primary); }
.footer-brand p { max-width: 320px; margin-top: var(--space-sm); font-size: 0.92rem; }
.footer-brand .brand { color: var(--color-text); font-family: var(--font-header-footer); }
.footer-brand .brand-large { display: inline-flex; margin-bottom: 0.25rem; }
.footer-brand .brand-logo-img { height: 108px; width: auto; transition: transform var(--transition); }
.footer-brand .brand-large:hover .brand-logo-img { transform: scale(1.04); }

/* Award badge inside the footer brand column */
.footer-award-badge {
  display: flex; align-items: center; gap: 0.85rem; margin-top: var(--space-md); padding: 0.75rem 1.1rem 0.75rem 0.75rem;
  background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  max-width: 320px; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.footer-award-badge:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: rgba(249,115,22,0.35); }
.footer-award-badge img { width: 40px; height: auto; flex-shrink: 0; }
.footer-award-badge strong { display: block; font-size: 0.85rem; color: var(--color-text); line-height: 1.25; }
.footer-award-badge span { display: block; font-size: 0.76rem; color: var(--color-text-muted); margin-top: 0.15rem; }
.social-row { display: flex; gap: 0.6rem; margin-top: var(--space-md); }
.social-row a { width: 38px; height: 38px; border-radius: 50%; background: var(--color-surface-muted); border: 1px solid var(--color-border); color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.social-row a:hover { background: var(--grad-primary); border-color: transparent; color: #fff; }
.social-row svg { width: 17px; height: 17px; }

/* Footer nav columns - become tap-to-expand accordions on small screens */
.footer-col h5 { display: flex; align-items: center; justify-content: space-between; }
.footer-col .footer-col-toggle-icon { display: none; width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-muted); transition: transform var(--transition); }
@media (max-width: 620px) {
  .footer-col { border-top: 1px solid var(--color-border); padding-block: 0.9rem; }
  .footer-col h5 { margin-bottom: 0; cursor: pointer; }
  .footer-col .footer-col-toggle-icon { display: block; }
  .footer-col.open .footer-col-toggle-icon { transform: rotate(180deg); }
  .footer-col ul { max-height: 0; overflow: hidden; transition: max-height 350ms ease; }
  .footer-col.open ul { max-height: 400px; margin-top: 0.85rem; }
}

.footer-powered-by {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap;
  margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border);
}
.footer-powered-by-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.footer-powered-by-logos { display: flex; align-items: center; gap: 1.85rem; flex-wrap: wrap; }
.footer-powered-by-logos img { height: 34px; width: auto; filter: grayscale(1); opacity: 0.65; transition: filter var(--transition), opacity var(--transition), transform var(--transition); }
.footer-powered-by-logos img:hover { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }

.footer-contact-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md);
  margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-border);
}
@media (max-width: 780px) { .footer-contact-strip { grid-template-columns: 1fr; } }
.footer-contact-item { display: flex; align-items: center; gap: 0.85rem; font-size: 0.88rem; color: var(--color-text-muted); transition: transform var(--transition), color var(--transition); }
.footer-contact-item:hover { transform: translateX(3px); color: var(--color-primary); }
.footer-contact-item strong { color: var(--color-text); font-size: 0.95rem; }
.footer-contact-icon {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: rgba(249,115,22,0.1);
  display: flex; align-items: center; justify-content: center; color: var(--color-accent-dark);
}
.footer-contact-icon svg { width: 19px; height: 19px; }

.footer-bottom { border-top: 1px solid var(--color-border); margin-top: var(--space-xl); padding-top: var(--space-md); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; font-size: 0.85rem; color: var(--color-text-muted); }

/* ---------- Back to top ----------
   Stacked ABOVE the floating WhatsApp button so the two never overlap. */
.back-to-top {
  position: fixed; right: 1.5rem; bottom: calc(1.5rem + var(--wa-fab-size) + 0.75rem);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--grad-primary); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 80; border: none;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top svg { width: 20px; height: 20px; }

/* ---------- Floating WhatsApp contact ---------- */
:root { --wa-fab-size: 60px; --wa-green: #25d366; --wa-green-dark: #128c7e; --wa-green-darker: #075e54; }

.wa-float { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 170; font-family: var(--font-body); }

/* Floating action button */
.wa-fab {
  position: relative; width: var(--wa-fab-size); height: var(--wa-fab-size); border: none; cursor: pointer;
  border-radius: 50%; background: linear-gradient(145deg, var(--wa-green) 0%, var(--wa-green-dark) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(18,140,126,0.45); transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow var(--transition);
}
.wa-fab:hover { transform: scale(1.07); box-shadow: 0 14px 32px rgba(18,140,126,0.55); }
.wa-fab:active { transform: scale(0.96); }
.wa-fab:focus-visible { outline: 3px solid rgba(37,211,102,0.55); outline-offset: 3px; }
.wa-fab-icon { position: absolute; inset: 0; margin: auto; width: 32px; height: 32px; transition: opacity 0.25s ease, transform 0.3s ease; }
.wa-fab-icon-close { width: 22px; height: 22px; opacity: 0; transform: rotate(-45deg) scale(0.6); }
.wa-float.is-open .wa-fab-icon-chat { opacity: 0; transform: rotate(45deg) scale(0.6); }
.wa-float.is-open .wa-fab-icon-close { opacity: 1; transform: rotate(0) scale(1); }

/* Pulsing ring (only while closed, and paused for reduced-motion users) */
.wa-fab-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa-green); animation: waPulse 2s ease-out infinite; }
.wa-float.is-open .wa-fab-ring { display: none; }
@keyframes waPulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-fab-ring { animation: none; } }

/* Chat panel */
.wa-panel {
  position: absolute; right: 0; bottom: calc(var(--wa-fab-size) + 16px);
  width: min(340px, calc(100vw - 3rem)); background: var(--color-surface);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(7,94,84,0.28), 0 0 0 1px rgba(23,16,46,0.04);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px) scale(0.96); transform-origin: bottom right;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2,0.8,0.2,1), visibility 0.28s;
}
.wa-float.is-open .wa-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }

.wa-panel-head { position: relative; padding: 1.15rem 1.25rem; color: #fff;
  background: linear-gradient(135deg, var(--wa-green-darker) 0%, var(--wa-green-dark) 55%, var(--wa-green) 130%); }
.wa-panel-head::after { content: ""; position: absolute; inset: 0; opacity: 0.14;
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 14px 14px; }
.wa-panel-close { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 1; width: 30px; height: 30px; border: none; cursor: pointer;
  border-radius: 50%; background: rgba(255,255,255,0.16); color: #fff; display: flex; align-items: center; justify-content: center; transition: background var(--transition); }
.wa-panel-close:hover { background: rgba(255,255,255,0.3); }
.wa-panel-close svg { width: 16px; height: 16px; }
.wa-panel-close:focus-visible, .wa-rep:focus-visible, .wa-panel-foot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wa-panel-head-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.8rem; }
.wa-panel-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; }
.wa-panel-avatar svg { width: 26px; height: 26px; color: #fff; }
.wa-panel-titles strong { display: block; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; }
.wa-panel-status { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: rgba(255,255,255,0.9); margin-top: 2px; }
.wa-panel-status i { width: 8px; height: 8px; border-radius: 50%; background: #6bff9e; box-shadow: 0 0 0 rgba(107,255,158,0.7); animation: waBlink 2s infinite; }
@keyframes waBlink { 0%,100% { box-shadow: 0 0 0 0 rgba(107,255,158,0.6); } 50% { box-shadow: 0 0 0 5px rgba(107,255,158,0); } }
@media (prefers-reduced-motion: reduce) { .wa-panel-status i { animation: none; } }

.wa-panel-body { padding: 1rem 1rem 0.35rem; }
.wa-panel-intro { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.5; margin: 0 0 0.85rem; padding: 0 0.25rem; }

.wa-rep { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; padding: 0.7rem 0.75rem; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); margin-bottom: 0.6rem; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition); }
.wa-rep:hover { transform: translateY(-2px); border-color: rgba(37,211,102,0.5); background: rgba(37,211,102,0.05); box-shadow: 0 10px 22px rgba(18,140,126,0.14); }
.wa-rep-avatar { position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; color: #fff; background: linear-gradient(145deg, var(--wa-green) 0%, var(--wa-green-dark) 100%); }
.wa-rep-avatar-alt { background: linear-gradient(145deg, #34b7f1 0%, #2563eb 100%); }
.wa-rep-online { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #25d366; border: 2px solid var(--color-surface); }
.wa-rep-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.wa-rep-name { font-weight: 700; font-size: 0.92rem; color: var(--color-text); }
.wa-rep-num { font-size: 0.82rem; color: var(--color-text-muted); }
.wa-rep-go { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-muted); transition: transform var(--transition), color var(--transition); }
.wa-rep:hover .wa-rep-go { transform: translateX(3px); color: var(--wa-green-dark); }

.wa-panel-foot { display: flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none;
  padding: 0.85rem 1rem; margin-top: 0.35rem; border-top: 1px solid var(--color-border); font-size: 0.85rem; color: var(--color-text-muted); transition: background var(--transition), color var(--transition); }
.wa-panel-foot:hover { background: var(--color-surface-muted); color: var(--color-text); }
.wa-panel-foot strong { color: var(--color-text); }
.wa-panel-foot svg { width: 16px; height: 16px; color: var(--wa-green-dark); flex-shrink: 0; }

@media (max-width: 640px) {
  :root { --wa-fab-size: 56px; }
  .wa-float, .back-to-top { right: 1rem; }
}

/* ---------- Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Showcase grid gets its own punchier entrance: fade + rise + slight scale on an
   expo-out ease, staggered per tile so the modules animate on in a wave rather
   than all at once (inspired by modern SaaS product grids). */
.showcase-grid [data-reveal] {
  transform: translateY(30px) scale(0.92);
  transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1), transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
.showcase-grid [data-reveal].is-visible { transform: translateY(0) scale(1); }
.showcase-grid .showcase-item:nth-child(6n+1) { transition-delay: 0ms; }
.showcase-grid .showcase-item:nth-child(6n+2) { transition-delay: 60ms; }
.showcase-grid .showcase-item:nth-child(6n+3) { transition-delay: 120ms; }
.showcase-grid .showcase-item:nth-child(6n+4) { transition-delay: 180ms; }
.showcase-grid .showcase-item:nth-child(6n+5) { transition-delay: 240ms; }
.showcase-grid .showcase-item:nth-child(6n+6) { transition-delay: 300ms; }
@media (prefers-reduced-motion: reduce) {
  .showcase-grid [data-reveal] { transition-delay: 0ms !important; }
}

/* ---------- Table (pricing/comparison use) ---------- */
table.compare { width: 100%; border-collapse: collapse; }
table.compare th, table.compare td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--color-border); text-align: left; }
table.compare th { font-family: var(--font-heading); background: var(--color-surface-muted); }

/* ---------- Learning Portal: institute selector ---------- */
.uni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-sm); margin-top: var(--space-lg); }
.uni-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem;
  width: 100%; font-family: inherit; border: 1px solid var(--color-border); background: var(--color-surface);
  cursor: pointer;
}
.uni-card-logo {
  width: 76px; height: 76px; border-radius: 50%; background: var(--color-surface-muted);
  display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px;
  transition: transform var(--transition);
}
.uni-card-logo img { width: 100%; height: 100%; object-fit: contain; }
.uni-card-name { font-size: 0.85rem; font-weight: 700; color: var(--color-text); line-height: 1.3; }
.uni-card:hover .uni-card-logo { transform: scale(1.08); }
.uni-card-check {
  position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--grad-primary); color: #fff; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.5); transition: opacity var(--transition), transform var(--transition);
}
.uni-card-check svg { width: 14px; height: 14px; }
.uni-card.is-selected { border-color: var(--color-primary); background: rgba(37,99,235,0.05); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.uni-card.is-selected::before { transform: scaleX(1); }
.uni-card.is-selected .uni-card-check { opacity: 1; transform: scale(1); }

.uni-selected-panel {
  margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg);
  background: var(--color-surface-muted); border: 1px solid var(--color-border);
  transition: border-color var(--transition), background var(--transition);
}
.uni-selected-panel[data-state="filled"] { border-color: rgba(37,99,235,0.3); background: rgba(37,99,235,0.05); }
.uni-selected-empty { margin: 0; color: var(--color-text-muted); font-weight: 600; text-align: center; }
.uni-selected-confirm { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.uni-selected-confirm[hidden] { display: none; }
.uni-selected-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--grad-primary); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.uni-selected-icon svg { width: 22px; height: 22px; }
.uni-selected-confirm strong { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); font-weight: 700; }
.uni-selected-confirm span#uniSelectedName { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-text); }
.uni-change-btn {
  margin-left: auto; background: none; border: 1px solid var(--color-border-dark); border-radius: var(--radius-pill);
  padding: 0.5rem 1.1rem; font-weight: 700; font-size: 0.85rem; font-family: inherit; transition: var(--transition);
}
.uni-change-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.uni-selected-panel #uniOtherField { margin-top: var(--space-md); margin-bottom: 0; max-width: 460px; }
.uni-select-error { margin: var(--space-sm) 0 0; color: var(--color-danger); font-weight: 700; font-size: 0.9rem; text-align: center; }

@keyframes uniAttentionShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.uni-selected-panel.needs-attention { animation: uniAttentionShake 500ms ease; border-color: var(--color-danger); }

/* ---------- Utility ---------- */
.text-accent { color: var(--color-accent); }
.text-primary { color: var(--color-primary); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.w-full { width: 100%; }
.rounded-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }

/* ---------- 404 ---------- */
.error-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.error-code { font-family: var(--font-heading); font-size: clamp(4rem, 3rem + 6vw, 8rem); font-weight: 800; background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- "Ask Boost" chatbot widget ---------- */
:root { --ab-fab-size: 60px; }

.ab-float {
  position: fixed; right: calc(1.5rem + var(--wa-fab-size) + 0.85rem); bottom: 1.5rem;
  z-index: 170; font-family: var(--font-body);
}

/* Floating action button */
.ab-fab {
  position: relative; width: var(--ab-fab-size); height: var(--ab-fab-size); border: none; cursor: pointer;
  border-radius: 50%; background: var(--grad-primary); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(124,58,237,0.4); transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow var(--transition);
}
.ab-fab:hover { transform: scale(1.07); box-shadow: 0 14px 32px rgba(124,58,237,0.5); }
.ab-fab:active { transform: scale(0.96); }
.ab-fab:focus-visible { outline: 3px solid rgba(124,58,237,0.5); outline-offset: 3px; }
.ab-fab-icon { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; transition: opacity 0.25s ease, transform 0.3s ease; }
.ab-fab-icon-close { width: 22px; height: 22px; opacity: 0; transform: rotate(-45deg) scale(0.6); }
.ab-float.is-open .ab-fab-icon-chat { opacity: 0; transform: rotate(45deg) scale(0.6); }
.ab-float.is-open .ab-fab-icon-close { opacity: 1; transform: rotate(0) scale(1); }

.ab-fab-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-secondary); animation: abPulse 2s ease-out infinite; }
.ab-float.is-open .ab-fab-ring { display: none; }
@keyframes abPulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ab-fab-ring { animation: none; } }

/* Panel shell */
.ab-panel {
  position: absolute; right: 0; bottom: calc(var(--ab-fab-size) + 16px);
  width: min(380px, calc(100vw - 3rem)); height: auto; max-height: min(600px, calc(100vh - 8rem));
  background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(23,16,46,0.04);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px) scale(0.96); transform-origin: bottom right;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2,0.8,0.2,1), visibility 0.28s;
  display: flex; flex-direction: column;
}
.ab-float.is-open .ab-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }

.ab-panel-close {
  width: 30px; height: 30px; border: none; cursor: pointer; flex-shrink: 0;
  border-radius: 50%; background: rgba(255,255,255,0.16); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.ab-panel-close:hover { background: rgba(255,255,255,0.3); }
.ab-panel-close svg { width: 16px; height: 16px; }
.ab-panel-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Views: home (greeting, sized to its content) and chat (fixed-height, scrollable conversation) */
.ab-view { display: flex; flex-direction: column; }
.ab-view[hidden] { display: none; }
.ab-view-chat { height: min(600px, calc(100vh - 8rem)); }

/* Home view */
.ab-view-home {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 55%, var(--color-surface) 55%, var(--color-surface) 100%);
  padding: 1.25rem 1.25rem 1.5rem;
}
.ab-home-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; }
.ab-home-brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.ab-home-logo { width: 28px; height: 28px; border-radius: 7px; }
.ab-home-brand span { font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 0.95rem; }
.ab-home-avatars { display: flex; align-items: center; margin-left: auto; }
.ab-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem; color: #fff;
  border: 2px solid var(--color-bg); margin-left: -10px; flex-shrink: 0;
}
.ab-home-avatars .ab-avatar:first-child { margin-left: 0; }
.ab-avatar-bot { background: var(--grad-primary); }
.ab-avatar-bot svg { width: 18px; height: 18px; }

.ab-home-title {
  font-family: var(--font-heading); font-size: 1.55rem; line-height: 1.25; font-weight: 700;
  color: #fff; margin: 0 0 1.5rem;
}
.ab-wave { display: inline-block; animation: abWave 2.4s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes abWave { 0%, 100% { transform: rotate(0deg); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } 60%, 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .ab-wave { animation: none; } }

.ab-recent-card {
  width: 100%; text-align: left; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 0.9rem 1rem; margin-bottom: 0.85rem; cursor: pointer;
  box-shadow: var(--shadow-sm); font: inherit; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.ab-recent-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(124,58,237,0.3); }
.ab-recent-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--color-text-muted); margin-bottom: 0.6rem; }
.ab-recent-row { display: flex; align-items: center; gap: 0.7rem; }
.ab-recent-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: var(--grad-primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.ab-recent-avatar svg { width: 20px; height: 20px; }
.ab-recent-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ab-recent-text strong { font-family: var(--font-heading); font-size: 0.92rem; color: var(--color-text); }
.ab-recent-text span { font-size: 0.82rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ab-send-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 0.85rem 1.1rem; margin-bottom: 1.1rem; font: inherit; font-weight: 700; font-size: 0.9rem; color: var(--color-text);
  cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.ab-send-trigger:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(124,58,237,0.3); }
.ab-send-trigger svg { width: 18px; height: 18px; color: var(--color-secondary); flex-shrink: 0; }

/* Chat view */
.ab-chat-head {
  position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.1rem; color: #fff; flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
}
.ab-back {
  width: 30px; height: 30px; border: none; cursor: pointer; flex-shrink: 0; border-radius: 50%;
  background: rgba(255,255,255,0.14); color: #fff; display: flex; align-items: center; justify-content: center; transition: background var(--transition);
}
.ab-back:hover { background: rgba(255,255,255,0.26); }
.ab-back svg { width: 16px; height: 16px; }
.ab-chat-head-inner { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; }
.ab-chat-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: var(--grad-primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.ab-chat-avatar svg { width: 19px; height: 19px; }
.ab-chat-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ab-chat-titles strong { font-family: var(--font-heading); font-size: 0.95rem; }
.ab-chat-titles span { font-size: 0.76rem; color: rgba(255,255,255,0.75); }

.ab-messages {
  flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.7rem;
  background: var(--color-surface-muted); scrollbar-width: thin;
}

/* Persistent reply bar: quick-reply chips live here instead of scrolling away
   with the message history, so the current set of options is always reachable. */
.ab-quick-replies {
  flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding: 0.85rem 1.1rem; border-top: 1px solid var(--color-border); background: var(--color-surface);
}
.ab-quick-replies:empty { display: none; }

/* Message bubbles */
.ab-msg { display: flex; gap: 0.55rem; max-width: 92%; animation: abMsgIn 0.28s ease; }
@keyframes abMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ab-msg { animation: none; } }
.ab-msg-bot { align-self: flex-start; }
.ab-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.ab-msg-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--color-text);
  color: #fff; display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.ab-msg-avatar svg { width: 16px; height: 16px; }
.ab-msg-bubble {
  padding: 0.65rem 0.9rem; border-radius: var(--radius-md); font-size: 0.88rem; line-height: 1.55;
}
.ab-msg-bot .ab-msg-bubble { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.ab-msg-user .ab-msg-bubble { background: var(--color-text); color: #fff; border-bottom-right-radius: 4px; }

/* Typing indicator */
.ab-typing .ab-msg-bubble { display: flex; align-items: center; gap: 4px; padding: 0.8rem 1rem; }
.ab-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted); opacity: 0.5; animation: abTyping 1.1s ease-in-out infinite; }
.ab-typing i:nth-child(2) { animation-delay: 0.15s; }
.ab-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes abTyping { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Quick reply chips: .ab-chips is just a grouping wrapper for disabling a set
   together on click - it renders inside .ab-quick-replies, which owns the
   actual flex/spacing layout, so its own box is collapsed out of the way. */
.ab-chips { display: contents; }
.ab-chip {
  font: inherit; font-weight: 600; font-size: 0.85rem; color: var(--color-text);
  background: #ffffff; border: 1.5px solid rgba(23,16,46,0.18); border-radius: var(--radius-pill);
  padding: 0.55rem 1rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}
.ab-chip:hover { transform: translateY(-1px); background: var(--color-text); color: #fff; border-color: var(--color-text); }
.ab-chip:disabled { opacity: 0.5; cursor: not-allowed; transform: none; background: #ffffff; color: var(--color-text); }
.ab-chip svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Below 640px the panel can no longer float anchored to the fab stack -
   at that width its near-full-viewport size overflows past the left edge
   of the screen (the fab sits inset from the true right edge to clear the
   WhatsApp button, and the panel inherits that same offset). Instead it
   becomes a fixed sheet, decoupled from the fab's own positioning, which
   is the standard pattern for mobile chat widgets: a compact bottom sheet
   for the short greeting screen (sized to its content, not the full
   viewport, so it doesn't leave a wall of dead space below it), expanding
   to a full-screen sheet only once an actual conversation is in view and
   benefits from the extra room. The fab itself is hidden while open since
   the panel already has its own close button in both views. */
@media (max-width: 640px) {
  :root { --ab-fab-size: 56px; }
  .ab-float { right: calc(1rem + var(--wa-fab-size) + 0.6rem); }
  .ab-float.is-open .ab-fab { display: none; }
  .ab-panel {
    position: fixed; inset: auto 0 0 0;
    width: 100%; height: auto; max-height: 85vh;
    border-radius: 20px 20px 0 0; transform: translateY(100%);
  }
  .ab-panel.ab-panel--chat-active {
    inset: 0; height: 100%; max-height: none; border-radius: 0;
  }
  .ab-view-home { overflow-y: auto; }
  .ab-view-chat { height: 100%; }
}