@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* =========================================================
   AXELIVA CLOUD — DESIGN TOKENS (WHITE + GREY ENTERPRISE THEME)
   ========================================================= */

:root {
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Surfaces */
  --color-background:     #FFFFFF;
  --color-off-white:      #FAFAF9;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-subtle: #FAFAF9;
  --color-surface-grey:   #F3F4F2;
  --color-surface-dark:   #202522;

  /* Grey scale */
  --color-grey-50:  #F8F8F7;
  --color-grey-100: #F3F4F2;
  --color-grey-200: #ECEDEA;
  --color-grey-300: #D9DDDA;
  --color-grey-400: #C5CAC7;
  --color-grey-500: #8B9490;
  --color-grey-600: #66706B;
  --color-grey-700: #4A514E;
  --color-grey-800: #2E3330;
  --color-grey-900: #202522;

  /* Text */
  --color-text-primary:   #202522;
  --color-text-secondary: #66706B;
  --color-text-muted:     #8B9490;
  --color-text-inverse:   #FFFFFF;

  /* Brand — Muted Slate Accent */
  --color-brand:        #526A73;
  --color-brand-hover:  #425961;
  --color-brand-light:  #EEF2F3;
  --color-brand-lighter:#F5F7F7;

  /* Charcoal */
  --color-charcoal:        #202522;
  --color-charcoal-dark:   #161A18;
  --color-charcoal-light:  #2D3330;
  --color-charcoal-border: #3B423F;

  /* Borders */
  --color-border:        #E1E4E2;
  --color-border-light:  #ECEDEA;
  --color-border-strong: #D1D5D3;

  /* Status */
  --color-success:       #3F7D68;
  --color-success-light: #EEF6F2;
  --color-warning:       #A67C32;
  --color-warning-light: #FBF5E9;
  --color-error:         #B65A5A;
  --color-error-light:   #FAEEEE;
}

/* =========================================================
   RESET & BASE
   ========================================================= */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

html {
  scroll-behavior: smooth;
  background: var(--color-background);
  overflow-x: hidden;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  letter-spacing: -0.025em;
  font-weight: 700;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; padding: 0; }
img, svg, video, canvas, audio, iframe, embed, object { max-width: 100%; }
img { height: auto; display: block; }
input, textarea, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }

/* =========================================================
   LAYOUT & CONTAINERS
   ========================================================= */

.max-w-sm  { max-width: 24rem; }
.max-w-md  { max-width: 28rem; }
.max-w-lg  { max-width: 32rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.min-h-screen { min-height: 100vh; }

.mx-auto { margin-left: auto; margin-right: auto; }
.mx-3    { margin-left: 0.75rem; margin-right: 0.75rem; }

/* Display & Positioning */
.hidden       { display: none !important; }
.block        { display: block; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }

.static   { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

.inset-0   { top: 0; right: 0; bottom: 0; left: 0; }
.inset-x-0 { left: 0; right: 0; }
.top-0     { top: 0; }
.bottom-0  { bottom: 0; }
.left-0    { left: 0; }
.right-0   { right: 0; }
.left-3    { left: 0.75rem; }
.right-3   { right: 0.75rem; }
.left-6    { left: 1.5rem; }
.bottom-6  { bottom: 1.5rem; }
.left-10   { left: 2.5rem; }
.right-10  { right: 2.5rem; }
.bottom-10 { bottom: 2.5rem; }
.top-\[68px\]  { top: 68px; }
.top-\[72px\]  { top: 72px; }
.top-\[100px\] { top: 100px; }
.bottom-\[-23px\] { bottom: -23px; }
.h-\[68px\]    { height: 68px; }
.pt-\[68px\]   { padding-top: 68px; }

.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Flexbox utilities */
.flex-col         { flex-direction: column; }
.flex-1           { flex: 1 1 0%; }
.flex-wrap        { flex-wrap: wrap; }
.shrink-0         { flex-shrink: 0; }
.self-end         { align-self: flex-end; }
.items-center     { align-items: center; }
.items-start      { align-items: flex-start; }
.items-end        { align-items: flex-end; }
.justify-center   { justify-content: center; }
.justify-between  { justify-content: space-between; }
.justify-end      { justify-content: flex-end; }

/* Gap */
.gap-0    { gap: 0; }
.gap-1    { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2    { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3    { gap: 0.75rem; }
.gap-3\.5 { gap: 0.875rem; }
.gap-4    { gap: 1rem; }
.gap-5    { gap: 1.25rem; }
.gap-6    { gap: 1.5rem; }
.gap-8    { gap: 2rem; }
.gap-10   { gap: 2.5rem; }
.gap-12   { gap: 3rem; }
.gap-16   { gap: 4rem; }
.gap-20   { gap: 5rem; }
.gap-px   { gap: 1px; }

.gap-x-1 { column-gap: 0.25rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 0.75rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-3 { row-gap: 0.75rem; }
.gap-y-4 { row-gap: 1rem; }

/* Grid columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.grid-cols-\[1fr_2fr\]       { grid-template-columns: 1fr 2fr; }
.grid-cols-\[2fr_1fr\]       { grid-template-columns: 2fr 1fr; }
.grid-cols-\[200px_1fr\]     { grid-template-columns: 200px 1fr; }
.grid-cols-\[1fr_1\.4fr\]    { grid-template-columns: 1fr 1.4fr; }
.grid-cols-\[1fr_auto_1fr\]  { grid-template-columns: 1fr auto 1fr; }

.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }

/* Spacing — Padding */
.p-1    { padding: 0.25rem; }
.p-2    { padding: 0.5rem; }
.p-2\.5 { padding: 0.625rem; }
.p-3    { padding: 0.75rem; }
.p-3\.5 { padding: 0.875rem; }
.p-4    { padding: 1rem; }
.p-5    { padding: 1.25rem; }
.p-6    { padding: 1.5rem; }
.p-7    { padding: 1.75rem; }
.p-8    { padding: 2rem; }
.p-10   { padding: 2.5rem; }

.px-2    { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3    { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4    { padding-left: 1rem; padding-right: 1rem; }
.px-5    { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6    { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8    { padding-left: 2rem; padding-right: 2rem; }
.px-10   { padding-left: 2.5rem; padding-right: 2.5rem; }

.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1    { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2    { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3    { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4    { padding-top: 1rem; padding-bottom: 1rem; }
.py-5    { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6    { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8    { padding-top: 2rem; padding-bottom: 2rem; }
.py-14   { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-16   { padding-top: 4rem; padding-bottom: 4rem; }
.py-20   { padding-top: 5rem; padding-bottom: 5rem; }
.py-24   { padding-top: 6rem; padding-bottom: 6rem; }

.pt-6    { padding-top: 1.5rem; }
.pt-8    { padding-top: 2rem; }
.pt-16   { padding-top: 4rem; }
.pt-20   { padding-top: 5rem; }
.pt-24   { padding-top: 6rem; }
.pt-28   { padding-top: 7rem; }

.pb-0    { padding-bottom: 0; }
.pb-5    { padding-bottom: 1.25rem; }
.pb-6    { padding-bottom: 1.5rem; }
.pb-16   { padding-bottom: 4rem; }

.pl-6    { padding-left: 1.5rem; }
.pl-10   { padding-left: 2.5rem; }
.pr-10   { padding-right: 2.5rem; }

/* Margins */
.mb-0\.5 { margin-bottom: 0.125rem; }
.mb-1    { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2    { margin-bottom: 0.5rem; }
.mb-3    { margin-bottom: 0.75rem; }
.mb-4    { margin-bottom: 1rem; }
.mb-5    { margin-bottom: 1.25rem; }
.mb-6    { margin-bottom: 1.5rem; }
.mb-8    { margin-bottom: 2rem; }
.mb-9    { margin-bottom: 2.25rem; }
.mb-10   { margin-bottom: 2.5rem; }
.mb-12   { margin-bottom: 3rem; }
.mb-14   { margin-bottom: 3.5rem; }
.mb-16   { margin-bottom: 4rem; }
.mb-20   { margin-bottom: 5rem; }

.mt-0\.5 { margin-top: 0.125rem; }
.mt-1    { margin-top: 0.25rem; }
.mt-2    { margin-top: 0.5rem; }
.mt-3    { margin-top: 0.75rem; }
.mt-4    { margin-top: 1rem; }
.mt-5    { margin-top: 1.25rem; }
.mt-8    { margin-top: 2rem; }
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }

/* Sizing */
.w-full       { width: 100%; }
.w-1          { width: 0.25rem; }
.w-1\.5       { width: 0.375rem; }
.w-2          { width: 0.5rem; }
.w-2\.5       { width: 0.625rem; }
.w-3          { width: 0.75rem; }
.w-3\.5       { width: 0.875rem; }
.w-4          { width: 1rem; }
.w-5          { width: 1.25rem; }
.w-8          { width: 2rem; }
.w-9          { width: 2.25rem; }
.w-10         { width: 2.5rem; }
.w-12         { width: 3rem; }
.w-16         { width: 4rem; }
.w-\[148px\]  { width: 148px; }
.w-\[180px\]  { width: 180px; }
.w-\[220px\]  { width: 220px; }

.h-full       { height: 100%; }
.h-auto       { height: auto; }
.h-1          { height: 0.25rem; }
.h-1\.5       { height: 0.375rem; }
.h-2          { height: 0.5rem; }
.h-2\.5       { height: 0.625rem; }
.h-3          { height: 0.75rem; }
.h-3\.5       { height: 0.875rem; }
.h-4          { height: 1rem; }
.h-5          { height: 1.25rem; }
.h-6          { height: 1.5rem; }
.h-7          { height: 1.75rem; }
.h-8          { height: 2rem; }
.h-9          { height: 2.25rem; }
.h-10         { height: 2.5rem; }
.h-12         { height: 3rem; }
.h-16         { height: 4rem; }
.h-\[60px\]   { height: 60px; }
.h-\[72px\]   { height: 72px; }
.h-\[100px\]  { height: 100px; }
.h-\[140px\]  { height: 140px; }
.h-\[380px\]  { height: 380px; }
.h-\[420px\]  { height: 420px; }
.h-\[500px\]  { height: 500px; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.text-\[9px\]     { font-size: 9px; }
.text-\[10px\]    { font-size: 10px; }
.text-\[11px\]    { font-size: 11px; }
.text-\[12px\]    { font-size: 12px; }
.text-\[13px\]    { font-size: 13px; }
.text-\[13\.5px\] { font-size: 13.5px; }
.text-\[14px\]    { font-size: 14px; }
.text-\[15px\]    { font-size: 15px; }
.text-\[16px\]    { font-size: 16px; }
.text-\[17px\]    { font-size: 17px; }
.text-\[18px\]    { font-size: 18px; }
.text-\[20px\]    { font-size: 20px; }
.text-\[22px\]    { font-size: 22px; }
.text-\[24px\]    { font-size: 24px; }
.text-\[26px\]    { font-size: 26px; }
.text-\[28px\]    { font-size: 28px; }
.text-\[36px\]    { font-size: 36px; }
.text-\[42px\]    { font-size: 42px; }
.text-\[48px\]    { font-size: 48px; }
.text-\[56px\]    { font-size: 56px; }
.text-\[clamp\(36px\,5vw\,58px\)\]  { font-size: clamp(36px, 5vw, 58px); }
.text-\[clamp\(56px\,7vw\,80px\)\]  { font-size: clamp(56px, 7vw, 80px); }

.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg   { font-size: 1.125rem; }
.text-xl   { font-size: 1.25rem; }
.text-2xl  { font-size: 1.5rem; }
.text-3xl  { font-size: 1.875rem; }
.text-4xl  { font-size: 2.25rem; }

.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-black    { font-weight: 900; }
.font-mono     { font-family: var(--font-mono); }

.leading-none    { line-height: 1; }
.leading-snug    { line-height: 1.375; }
.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.leading-\[1\.0\]  { line-height: 1.0; }
.leading-\[1\.05\] { line-height: 1.05; }
.leading-\[1\.1\]  { line-height: 1.1; }

.tracking-wider       { letter-spacing: 0.05em; }
.tracking-widest      { letter-spacing: 0.1em; }
.tracking-\[0\.15em\] { letter-spacing: 0.15em; }

.uppercase         { text-transform: uppercase; }
.text-center       { text-align: center; }
.text-left         { text-align: left; }
.text-right        { text-align: right; }
.whitespace-nowrap { white-space: nowrap; }

.text-white { color: #FFFFFF; }

/* =========================================================
   BACKGROUNDS & COLORS
   ========================================================= */

.bg-white       { background-color: #FFFFFF; }
.bg-black\/40   { background-color: rgba(0, 0, 0, 0.4); }

.border         { border: 1px solid var(--color-border); }
.border-t       { border-top: 1px solid var(--color-border); }
.border-b       { border-bottom: 1px solid var(--color-border); }
.border-l       { border-left: 1px solid var(--color-border); }
.border-r       { border-right: 1px solid var(--color-border); }
.border-y       { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }

.divide-y > * + * { border-top: 1px solid var(--color-border); }

.rounded      { border-radius: 0.25rem; }
.rounded-md   { border-radius: 0.375rem; }
.rounded-lg   { border-radius: 0.5rem; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

.object-cover { object-fit: cover; }
.opacity-0    { opacity: 0; }
.opacity-100  { opacity: 1; }

.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.resize-none    { resize: none; }
.focus\:outline-none:focus { outline: none; }

.space-y-0 > * + *   { margin-top: 0; }
.space-y-1 > * + *   { margin-top: 0.25rem; }
.space-y-1\.5 > * + *{ margin-top: 0.375rem; }
.space-y-2 > * + *   { margin-top: 0.5rem; }
.space-y-2\.5 > * + *{ margin-top: 0.625rem; }
.space-y-3 > * + *   { margin-top: 0.75rem; }
.space-y-4 > * + *   { margin-top: 1rem; }
.space-y-5 > * + *   { margin-top: 1.25rem; }

.transition-all     { transition: all 0.2s ease; }
.transition-colors  { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.transition-opacity { transition: opacity 0.2s ease; }

.group { position: relative; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.hover\:underline:hover { text-decoration: underline; }

/* =========================================================
   COMPONENTS: MARQUEE & TICKER
   ========================================================= */

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: marquee 35s linear infinite;
  will-change: transform;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  white-space: nowrap;
  border-right: 1px solid var(--color-border);
}

/* =========================================================
   COMPONENTS: TABS ROW
   ========================================================= */

.tabs-row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs-row::-webkit-scrollbar {
  display: none;
}

/* =========================================================
   ANIMATIONS & REVEAL
   ========================================================= */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.anim-fade-up { animation: fade-up 0.35s cubic-bezier(.22,1,.36,1) both; }
.anim-fade-in { animation: fade-in 0.25s ease both; }

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(.22,1,.36,1), transform 0.55s cubic-bezier(.22,1,.36,1);
}
.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   HERO FLOATING CARDS
   ========================================================= */

.float-card {
  position: absolute;
  pointer-events: none;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 24px rgba(16, 24, 40, 0.09);
  border-radius: 12px;
  padding: 10px 14px;
  min-width: 195px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 5;
}
.float-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   TOP NAVBAR STYLES
   ========================================================= */

.top-nav-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1 1 0%;
}

.top-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  position: relative;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.top-nav-link:hover {
  color: var(--color-text-primary);
  background-color: var(--color-grey-100);
}

.top-nav-link.active,
.top-nav-link.text-primary-active {
  color: var(--color-text-primary);
  font-weight: 600;
}

.top-nav-link .nav-link-indicator {
  position: absolute;
  bottom: 0px;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 9999px;
  background: var(--color-text-primary);
}

@media (max-width: 1200px) {
  .top-nav-container {
    gap: 2px;
  }
  .top-nav-link {
    padding: 7px 10px;
    font-size: 13px;
    gap: 4px;
  }
}

/* =========================================================
   SIDEBAR STYLES
   ========================================================= */

.side-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: all 0.15s ease;
  text-decoration: none;
}
.side-link:hover {
  background: var(--color-grey-100);
  color: var(--color-text-primary);
}
.side-link.active {
  background: var(--color-grey-200);
  color: var(--color-text-primary);
  font-weight: 600;
}

/* Card hover elevations */
.hover-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.hover-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

/* Buttons */
.btn-charcoal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-charcoal);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  text-decoration: none;
  border: none;
}
.btn-charcoal:hover {
  background: var(--color-charcoal-light);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid var(--color-border-strong);
  transition: background-color 0.2s ease;
  text-decoration: none;
}
.btn-secondary:hover {
  background: var(--color-surface-grey);
}

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

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:flex-row    { flex-direction: row; }
  .sm\:flex        { display: flex; }
  .sm\:hidden      { display: none !important; }
  .hidden.sm\:flex { display: flex !important; }
  .sm\:p-8         { padding: 2rem; }
  .sm\:px-8        { padding-left: 2rem; padding-right: 2rem; }
  .sm\:py-8        { padding-top: 2rem; padding-bottom: 2rem; }
}

@media (min-width: 768px) {
  .md\:flex        { display: flex; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hidden.md\:flex { display: flex !important; }
}

@media (min-width: 1024px) {
  .lg\:flex        { display: flex; }
  .lg\:hidden      { display: none !important; }
  .hidden.lg\:flex { display: flex !important; }

  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .lg\:grid-cols-\[1fr_2fr\]    { grid-template-columns: 1fr 2fr; }
  .lg\:grid-cols-\[2fr_1fr\]    { grid-template-columns: 2fr 1fr; }
  .lg\:grid-cols-\[200px_1fr\]  { grid-template-columns: 200px 1fr; }
  .lg\:grid-cols-\[1fr_1\.4fr\] { grid-template-columns: 1fr 1.4fr; }
  .lg\:grid-cols-\[1fr_auto_1fr\] { grid-template-columns: 1fr auto 1fr; }

  .lg\:pl-\[220px\] { padding-left: 220px; }
  .lg\:pt-16        { padding-top: 4rem; }
  .lg\:pr-10        { padding-right: 2.5rem; }
  .lg\:border-r     { border-right: 1px solid var(--color-border); }
  .lg\:h-auto       { height: auto; }
}

/* ─── Mobile Specific Enhancements (<1024px and <768px) ─── */
@media (max-width: 1023px) {
  #desktop-sidebar,
  #sidebar-hover-zone,
  #sidebar-edge-tab {
    display: none !important;
  }
  #main-layout {
    padding-left: 0 !important;
  }
  header .header-container {
    height: 68px !important;
  }
  .brand-logo-img {
    height: 48px !important;
  }
}

@media (max-width: 767px) {
  .float-card {
    display: none !important;
  }
  .section-pad-y {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

.school-feature-img {
  height: 260px;
  object-fit: cover;
}
@media (min-width: 640px) {
  .school-feature-img {
    height: 380px;
  }
}
@media (min-width: 1024px) {
  .school-feature-img {
    height: 500px;
  }
}

/* ─── Mobile Drawer Overlay & Slide Animation (Right-Side Drawer) ─── */
#mobile-drawer-overlay {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

#mobile-drawer .mobile-drawer-panel,
#mobile-drawer > div:not(#mobile-drawer-overlay) {
  max-width: 82vw;
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.22);
  animation: mobileDrawerSlideRight 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes mobileDrawerSlideRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* =========================================================
   AUTO-HIDING DESKTOP SIDEBAR & TRIGGER ZONE
   ========================================================= */

#desktop-sidebar {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  will-change: transform;
}
#desktop-sidebar.sidebar-collapsed {
  transform: translateX(-100%) !important;
  box-shadow: none !important;
}
#desktop-sidebar.sidebar-expanded {
  transform: translateX(0) !important;
  box-shadow: 6px 0 28px rgba(16, 24, 40, 0.12) !important;
}

#sidebar-hover-zone {
  position: fixed;
  left: 0;
  top: 100px;
  bottom: 0;
  width: 45px;
  z-index: 45;
  cursor: pointer;
}

#sidebar-edge-tab {
  position: fixed;
  left: 0;
  top: 130px;
  z-index: 46;
  background: var(--color-charcoal);
  color: #FFFFFF;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 10px 8px;
  box-shadow: 2px 2px 14px rgba(16, 24, 40, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}
#sidebar-edge-tab.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
#sidebar-edge-tab:hover {
  background: var(--color-brand);
}

#main-layout {
  transition: padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#main-layout.sidebar-collapsed-layout {
  padding-left: 0 !important;
}

/* =========================================================
   INTEGRATIONS PULSE & DASH FLOW ANIMATIONS
   ========================================================= */

@keyframes radar-pulse-scale {
  0% {
    transform: scale(0.95);
    opacity: 0.85;
  }
  50% {
    opacity: 0.35;
  }
  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

.radar-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: radar-pulse-scale 3.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.radar-ring-2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: radar-pulse-scale 3.2s cubic-bezier(0.22, 1, 0.36, 1) 1.6s infinite;
}

@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orbit-spin-rev {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

.orbit-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: orbit-spin 26s linear infinite;
}
.orbit-spin-rev {
  transform-box: fill-box;
  transform-origin: center;
  animation: orbit-spin-rev 34s linear infinite;
}

@keyframes dash-flow {
  from {
    stroke-dashoffset: 24;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.integration-line {
  transition: stroke 0.3s ease, stroke-width 0.3s ease;
}
.integration-line.animated-flow {
  stroke-dasharray: 6 5;
  animation: dash-flow 1.2s linear infinite;
}

@keyframes node-float-1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes node-float-2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.integration-node {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}
.integration-node:hover, .integration-node.active-node {
  filter: drop-shadow(0 6px 18px rgba(82, 106, 115, 0.35));
}
.integration-node:hover circle, .integration-node.active-node circle {
  stroke: var(--color-brand);
  stroke-width: 2.5px;
}
.integration-node:nth-child(even) {
  animation: node-float-1 4.5s ease-in-out infinite;
}
.integration-node:nth-child(odd) {
  animation: node-float-2 5s ease-in-out infinite;
}

/* =========================================================
   TESTIMONIALS SLIDESHOW (HORIZONTAL SLIDING CAROUSEL)
   ========================================================= */

.testimonial-slider-viewport {
  overflow: hidden !important;
  width: 100% !important;
  position: relative !important;
  border-radius: 20px;
}

.testimonial-slider-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform;
}

.testimonial-slide {
  flex: 0 0 100% !important;
  min-width: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.dot-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--color-border-strong);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.dot-indicator.active {
  width: 26px;
  background: var(--color-charcoal);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 18px;
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.testimonial-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0;
}

.testimonial-role {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* =========================================================
   BUSINESS SYSTEM 8-CARD GRID (MATCHING FIGMA SPEC)
   ========================================================= */

.biz-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  padding: 24px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.03);
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
}

.biz-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-brand);
  box-shadow: 0 8px 24px rgba(82, 106, 115, 0.1);
}

.biz-card.highlighted-card {
  border: 2px solid #3B82F6 !important;
  box-shadow: 0 0 0 1px #3B82F6, 0 8px 24px rgba(59, 130, 246, 0.12) !important;
}

.biz-card-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.biz-card-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
  line-height: 1.25;
}

.biz-card-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.biz-grid-scroll-btn {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 28px auto 0;
}
.biz-grid-scroll-btn:hover {
  transform: translateY(3px);
  border-color: var(--color-brand);
  color: var(--color-brand);
}

/* =========================================================
   SIDEBAR BUSINESS SYSTEM BRANCH TREE DROPDOWN
   ========================================================= */

.sidebar-branch-container {
  margin-left: 22px;
  padding-left: 10px;
  border-left: 1.5px dashed var(--color-border-strong);
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  margin-bottom: 8px;
  animation: branchSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes branchSlideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sidebar-branch-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.sidebar-branch-item .branch-icon {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  opacity: 0.7;
}

.sidebar-branch-item:hover {
  background: white;
  color: var(--color-brand);
  padding-left: 12px;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.05);
}

.sidebar-branch-item:hover .branch-icon {
  color: var(--color-brand);
  opacity: 1;
}

#business-system-chevron.rotate-90,
#mobile-bs-chevron.rotate-90 {
  transform: rotate(90deg);
}