/* ==========================================================================
   ByteNana Design System — COMPONENTS & PATTERNS
   Load AFTER tokens.css + base.css.

   Sections:
     1.  Buttons
     2.  Floating navbar (pill + collapse-to-tab) + mobile menu
     3.  Light-section modifier (.section--light / .section--brand)
     4.  Cards (base + variants) + invert-on-hover + flip card
     5.  Animated mesh background
     6.  Trust bar + redacted marquee
     7.  Tabbed orbit (rotating tech labels)
     8.  Step carousel (slide + 3D-flip variants) + dots
     9.  Vertical/horizontal dial
     10. Pricing cards
     11. Numbered steps (static list)
     12. Forms
     13. Molecular globe hub (canvas constellation)
     14. Hero globe container
     15. Booking modal
     16. Footer
     17. Component breakpoints
   ========================================================================== */


/* ==========================================================================
   1. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease,
              border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-primary);
}
.btn-secondary {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn-primary:focus-visible,
.btn-secondary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.btn-primary:active,
.btn-secondary:active { transform: translateY(1px); }

.btn-sm   { padding: 0.5rem 1rem; font-size: var(--text-sm); }
.btn-full { width: 100%; }


/* ==========================================================================
   2. FLOATING NAVBAR — centered pill that collapses to an edge tab on scroll
   ========================================================================== */
#navbar {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--space-8));
  max-width: var(--container-max);
  z-index: 100;
  background-color: rgba(15, 17, 18, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  transition: max-width var(--t-slow) var(--ease-out),
              left var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out),
              border-radius 0.5s ease, opacity 0.4s ease,
              background-color var(--t-base) ease, box-shadow 0.4s ease;
}
#navbar.scrolled { background-color: rgba(15, 17, 18, 0.97); }

/* collapsed: whole bar slides off-screen left, leaving ~56px tab (the toggle) */
#navbar.collapsed { left: var(--space-4); transform: translateX(0); }
#navbar.collapsed:not(.expanded) .nav-links { display: none !important; }
#navbar.collapsed:not(.expanded) {
  left: 0;
  max-width: var(--container-max);
  transform: translateX(calc(-100% + 56px));
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  opacity: 0.85;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
#navbar.collapsed:not(.expanded) .navbar-inner { justify-content: flex-end; padding-right: var(--space-3); }
#navbar.collapsed:not(.expanded) .logo { display: none; }
#navbar.collapsed.expanded { left: 50%; transform: translateX(-50%); max-width: var(--container-max); }

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: none; border: 0;
  color: var(--color-text); font-size: 22px; cursor: pointer;
  flex: 0 0 auto; transition: color var(--t-fast) ease;
}
.nav-toggle:hover { color: var(--color-primary); }
.nav-toggle iconify-icon { display: none; line-height: 1; }
#navbar.collapsed:not(.expanded) .nav-toggle__open { display: inline-block; }
#navbar.collapsed.expanded .nav-toggle__close { display: inline-block; }
@media (min-width: 768px) {
  #navbar.collapsed .nav-toggle { display: inline-flex; }
  #navbar.collapsed.expanded .nav-links { display: flex !important; }
}

.navbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--navbar-height);
}
.logo {
  display: inline-flex; align-items: center;
  font-family: var(--font-heading); font-size: var(--text-xl);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1;
}
.logo-mark { height: 1.6em; width: auto; display: block; margin-right: 0.5em; }
.logo-byte { color: var(--color-text); }
.logo-nana { color: var(--color-primary); }   /* second half of the wordmark in brand color */

.nav-links { display: none; align-items: center; gap: var(--space-8); }
.nav-links li a {
  color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500;
  transition: color var(--t-fast) ease;
}
.nav-links li a:hover { color: var(--color-text); }
.nav-links li:last-child a,
.nav-links li:last-child a:hover { color: var(--color-bg); }  /* last item is a btn-primary */

/* Hamburger (mobile) */
.menu-toggle {
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px; padding: var(--space-2); width: 36px; height: 36px;
}
.menu-toggle span {
  display: block; width: 22px; height: 2px;
  background-color: var(--color-text); border-radius: 2px;
  transition: all var(--t-fast) ease;
}
.mobile-menu {
  display: none; position: absolute; top: calc(100% + var(--space-2));
  left: 0; right: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  padding: var(--space-4) var(--space-6) var(--space-6);
}
.mobile-menu.open { display: block; }
.mobile-menu ul { display: flex; flex-direction: column; gap: var(--space-1); }
.mobile-menu a {
  display: block; padding: var(--space-3) 0;
  color: var(--color-text-muted); font-size: var(--text-base); font-weight: 500;
  border-bottom: 1px solid var(--color-border); transition: color var(--t-fast) ease;
}
.mobile-menu li:last-child a {
  border-bottom: none; margin-top: var(--space-4);
  color: var(--color-primary); font-weight: 600;
}
.mobile-menu a:hover { color: var(--color-text); }


/* ==========================================================================
   3. LIGHT / BRAND SECTION MODIFIERS
   The page alternates dark ↔ off-white ↔ one full-yellow band.
   Add .section--light or .section--brand to ANY <section> to flip its palette.
   (Generalized from the original per-section overrides.)
   ========================================================================== */
.section--light { background-color: var(--color-light); }
.section--light .section-label { color: var(--on-light-dim); }
.section--light h2, .section--light h3, .section--light h4 { color: var(--on-light-text); }
.section--light .section-intro, .section--light p { color: var(--on-light-muted); }
.section--light .card {
  background-color: rgba(15, 17, 18, 0.05);
  border-color: var(--on-light-border);
}
.section--light .card h3, .section--light .card h4 { color: var(--on-light-text); }
.section--light .card p { color: var(--on-light-muted); }
.section--light .btn-secondary { color: var(--on-light-text); border-color: rgba(15, 17, 18, 0.2); }

/* full-yellow interrupt band */
.section--brand { background-color: var(--color-primary); }
.section--brand .section-label { color: rgba(15, 17, 18, 0.45); }
.section--brand h2 { color: var(--color-bg); }
.section--brand p  { color: rgba(15, 17, 18, 0.72); }


/* ==========================================================================
   4. CARDS — one base, several variants
   ========================================================================== */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  transition: border-color var(--t-fast) ease;
}
.card:hover { border-color: var(--color-border-hover); }
.card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.card p  { font-size: var(--text-sm); }

/* Card grid helper */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

/* Icon used inside cards (Unicode glyph or iconify) */
.card-icon {
  display: block;
  font-size: var(--text-2xl);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  line-height: 1;
  transition: color var(--t-base) ease;
}

/* Variant: INVERT-ON-HOVER — card flips to solid brand fill with dark content.
   Apply .card--invert on a .card with a .card-icon, h3, p inside. */
.card--invert {
  background-color: var(--color-surface);
  padding: var(--space-8);
  transition: background-color var(--t-base) ease, border-color var(--t-base) ease,
              box-shadow var(--t-base) ease, transform var(--t-base) ease;
}
.card--invert:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.card--invert:hover .card-icon,
.card--invert:hover h3,
.card--invert:hover p { color: var(--color-bg); }
.card--invert h3 { margin-bottom: var(--space-3); transition: color var(--t-base) ease; }
.card--invert p  { font-size: var(--text-base); transition: color var(--t-base) ease; }

/* Variant: lift on hover (pricing, etc.) */
.card--lift { transition: border-color var(--t-fast) ease, transform var(--t-fast) ease; }
.card--lift:hover { border-color: var(--color-border-hover); transform: translateY(-4px); }

/* Variant: quote card (left brand border) */
.card--quote {
  border-left: 3px solid var(--color-primary);
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
}
.card--quote > p { font-size: var(--text-lg); color: var(--color-text); font-style: italic; line-height: 1.6; }
.card--quote footer { font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- FLIP CARD (logo front → CTA back, rotateY) --- */
.flip-card {
  padding: 0; background: transparent; border: none;
  perspective: 1000px; min-height: 200px; text-decoration: none;
}
.flip-card:hover { background: transparent; border: none; box-shadow: none; transform: none; }
.flip-inner {
  position: relative; display: block; width: 100%; height: 100%;
  min-height: inherit; transition: transform var(--t-slow) cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-8);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flip-front { background-color: var(--color-surface); }
.flip-back  { background-color: var(--color-primary); transform: rotateY(180deg); }
.flip-back img { filter: brightness(0) invert(1); }   /* logo → white on the yellow face */


/* ==========================================================================
   5. ANIMATED MESH BACKGROUND — drifting dot grid behind a section
   Add .section-mesh to a <section>; put content inside a .container.
   ========================================================================== */
.section-mesh { position: relative; overflow: hidden; }
.section-mesh::before {
  content: "";
  position: absolute; inset: -160px;   /* extra bleed so the scroll parallax never exposes an edge */
  background-image:
    radial-gradient(circle, rgba(252, 252, 252, 0.10) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(252, 252, 252, 0.10) 1px, transparent 1.5px);
  background-size: 28px 28px, 28px 28px;
  background-position: 0 0, 14px 14px;
  /* drift via background-position so transform is free for the scroll parallax (JS sets --mesh-y) */
  transform: translate3d(0, var(--mesh-y, 0px), 0);
  animation: mesh-wave 12.6s ease-in-out infinite;
  will-change: transform, background-position; pointer-events: none; z-index: 0;
}
.section-mesh > .container { position: relative; z-index: 1; }
/* when a mesh wraps whole sections (shared mesh), lift them above the dot grid */
.mesh-merge > section { position: relative; z-index: 1; }
@keyframes mesh-wave {
  0%, 100% { background-position: 0 0, 14px 14px; }
  50%      { background-position: 18px -16px, 32px -2px; }
}
@media (prefers-reduced-motion: reduce) { .section-mesh::before { animation: none; transform: none; } }


/* ==========================================================================
   6. TRUST BAR + REDACTED MARQUEE
   ========================================================================== */
.trust-bar {
  width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-5) var(--space-8);
  padding: var(--space-5) var(--space-8);
  background-color: var(--color-primary);
  border-radius: var(--radius-lg);
}
.trust-rating, .trust-stat {
  position: relative; display: flex; align-items: baseline; gap: var(--space-2);
  color: var(--color-bg);
}
/* thin vertical divider between items */
.trust-stat + .trust-stat::before,
.trust-rating + .trust-stat::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-8) / 2); top: 50%;
  transform: translateY(-50%); height: 1.6em; width: 1px;
  background-color: rgba(15, 17, 18, 0.25);
}
.trust-stars { font-size: var(--text-base); letter-spacing: 1px; line-height: 1; }
.trust-score { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-2xl); line-height: 1; letter-spacing: -0.03em; }
.trust-num   { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-xl); line-height: 1; letter-spacing: -0.02em; }
.trust-on, .trust-cap { font-size: var(--text-sm); color: rgba(15, 17, 18, 0.7); }
.trust-link { margin-left: auto; font-weight: 700; font-size: var(--text-sm); color: var(--color-bg); white-space: nowrap; }
.trust-link:hover { text-decoration: underline; }

/* Small screens: stack the yellow bar's items vertically, centered */
@media (max-width: 600px) {
  .trust-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    padding: var(--space-5);
  }
  /* rating item: stars on top, then the rest of the text stacked below */
  .trust-rating { flex-direction: column; align-items: center; gap: var(--space-1); }
  /* each stat centered on its own row */
  .trust-stat { justify-content: center; }
  /* dividers make no sense once items are stacked vertically */
  .trust-stat + .trust-stat::before,
  .trust-rating + .trust-stat::before { display: none; }
  .trust-score { font-size: var(--text-xl); }
  .trust-num   { font-size: var(--text-lg); }
  /* link (reviews card only) drops to the bottom, centered */
  .trust-link  { margin-left: 0; }
}

/* Dark variant of the bar (e.g. "built to slot in" row) */
.trust-bar--dark {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}
.trust-bar--dark .fit-trust-title { color: var(--color-text); }
.trust-bar--dark .fit-trust-item  { color: var(--color-text-muted); }
.fit-trust-title { position: relative; font-family: var(--font-heading); font-size: var(--text-base); font-weight: 800; line-height: 1.2; }
.fit-trust-item  { position: relative; font-family: var(--font-heading); font-weight: 700; font-size: var(--text-base); line-height: 1; }
.fit-trust-title + .fit-trust-item::before,
.fit-trust-item + .fit-trust-item::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-8) / 2); top: 50%;
  transform: translateY(-50%); height: 1.4em; width: 1px;
  background-color: rgba(252, 252, 252, 0.18);
}

/* --- Redacted, infinitely scrolling client marquee (names blurred → "Top Secret") --- */
.trust-marquee {
  margin-top: var(--space-12); overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.trust-track {
  display: flex; align-items: center; gap: var(--space-4); width: max-content;
  animation: trust-scroll 36s linear infinite;
}
.trust-marquee:hover .trust-track { animation-play-state: paused; }
.trust-chip {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); border-radius: 8px;
  background: rgba(15, 17, 18, 0.06); border: 1px solid rgba(15, 17, 18, 0.14);
  white-space: nowrap; transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.trust-chip:hover { background: var(--color-bg); border-color: var(--color-bg); }
.trust-chip:hover .trust-lock { background-color: #FCFCFC; }
.trust-chip:hover .trust-name { color: transparent; filter: none; }
.trust-chip:hover .trust-name::after { opacity: 1; }
.trust-lock {
  flex: 0 0 auto; width: 16px; height: 16px;
  background-color: rgba(15, 17, 18, 0.7);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M12%201a5%205%200%200%200-5%205v3H6a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-9a2%202%200%200%200-2-2h-1V6a5%205%200%200%200-5-5zm3%208H9V6a3%203%200%200%201%206%200v3z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='black'%20d='M12%201a5%205%200%200%200-5%205v3H6a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-9a2%202%200%200%200-2-2h-1V6a5%205%200%200%200-5-5zm3%208H9V6a3%203%200%200%201%206%200v3z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.trust-name {
  position: relative; display: inline-block;
  font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700;
  color: rgba(15, 17, 18, 0.85); letter-spacing: 0.02em;
  filter: blur(5px); user-select: none;
  transition: filter var(--t-fast) ease, color var(--t-fast) ease;
}
.trust-name::after {
  content: "Top Secret"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; filter: none;
  white-space: nowrap; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 800; color: var(--color-primary); opacity: 0;
  transition: opacity var(--t-fast) ease;
}
@keyframes trust-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .trust-track { animation: none; } }

/* --- Client logo belt — infinitely scrolling image logos (two identical copies) --- */
.logo-belt {
  margin: var(--space-8) 0 var(--space-12); overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.logo-belt__track {
  display: flex; align-items: center; width: max-content;
  animation: trust-scroll 45s linear infinite;
}
.logo-belt:hover .logo-belt__track { animation-play-state: paused; }
/* Symmetric per-logo margins (not flex gap) so both copies tile pixel-perfectly
   despite the logos' differing widths — keeps the loop seamless. */
.logo-belt img {
  flex: 0 0 auto; height: 34px; width: auto; margin: 0 var(--space-8);
  object-fit: contain;
  filter: brightness(0) invert(1);          /* unify mixed-color logos to white */
  opacity: 0.55; transition: opacity var(--t-fast) ease;
}
.logo-belt img:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .logo-belt__track { animation: none; } }


/* ==========================================================================
   7. TECH STACK — vertical tabs (left) + 3D tech hub & name list (right)
   ========================================================================== */
.stack-tabs { display: grid; grid-template-columns: 1fr; gap: var(--space-8); margin-top: var(--space-10); }
.stack-tablist { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
.stack-tab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  flex: 1 1 auto; white-space: nowrap;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(15, 17, 18, 0.15); border-radius: var(--radius);
  background: transparent; font-family: var(--font-heading);
  font-weight: 600; font-size: var(--text-base); cursor: pointer;
  color: var(--on-light-muted);
  transition: background-color var(--t-base) ease, color var(--t-base) ease, border-color var(--t-base) ease;
}
.stack-tab:hover { color: var(--color-bg); border-color: var(--color-primary); }
.stack-tab.is-active { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-bg); }
.stack-tab__ic { width: 1.2em; height: 1.2em; fill: currentColor; flex: 0 0 auto; }

.stack-panels { position: relative; }
.stack-panel { display: none; }
.stack-panel.is-active { display: flex; flex-direction: column; align-items: center; }

.tech-hub { width: 100%; max-width: 462px; min-height: 374px; }   /* 10% larger */
.tech-list {
  order: -1;   /* sits above the animation, top-aligned with the tabs */
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2); padding: 0; list-style: none;
}
.tech-list li {
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(15, 17, 18, 0.18); border-radius: 999px;
  background-color: rgba(252, 252, 252, 0.7); color: var(--on-light-text);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--text-sm);
}

/* staggered fade-in when a panel activates */
.stack-panel.is-active > * { animation: stack-fade-in 0.5s ease both; }
.stack-panel.is-active > *:nth-child(2) { animation-delay: 0.12s; }
@keyframes stack-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* fade in AND keep a gentle 5% pulse on the hub (opacity + transform compose) */
.stack-panel.is-active .tech-hub { animation: stack-fade-in 0.5s ease both, tech-pulse 6s ease-in-out infinite; }
@keyframes tech-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .stack-panel.is-active .tech-hub { animation: none; } }

@media (min-width: 768px) {
  .stack-tabs { grid-template-columns: 240px 1fr; align-items: start; }
  .stack-tablist { flex-direction: column; }
  .stack-tab { width: 100%; }
}


/* ==========================================================================
   8. STEP CAROUSEL — one card at a time, dot nav, auto-advance (JS-driven)
   Variants: .steps-carousel--slide (horizontal slide) | default (3D flip)
   ========================================================================== */
.steps-carousel { display: block; }
.steps-carousel .steps-viewport { position: relative; border-radius: var(--radius-lg); perspective: 1600px; }
.steps-carousel .steps-track { position: relative; transform-style: preserve-3d; }
.steps-carousel .step {
  position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box;
  border: none; border-radius: var(--radius-lg); padding: var(--space-8);
  opacity: 0; transform: rotateY(-90deg); transform-origin: center center;
  backface-visibility: hidden; pointer-events: none;
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: transform 0.5s var(--ease-out), opacity 0.4s ease;
}
.steps-carousel .step.is-active { position: relative; opacity: 1; transform: rotateY(0deg); pointer-events: auto; }
.steps-carousel .step-number { min-width: 0; font-size: clamp(2.75rem, 9vw, calc(var(--text-4xl) * 2)); }
/* alternating brand colors: odd light, even yellow */
.steps-carousel .step:nth-child(odd)  { background-color: var(--color-light); }
.steps-carousel .step:nth-child(even) { background-color: var(--color-primary); }
.steps-carousel .step h3,
.steps-carousel .step .step-content > p,
.steps-carousel .step .step-number { color: var(--color-bg); }
@media (prefers-reduced-motion: reduce) { .steps-carousel .step { transition: opacity 0.25s ease; transform: none; } }

/* SLIDE variant — horizontal slide/fade, dark+yellow cards (no light) */
.steps-carousel--slide { margin-top: var(--space-10); }
.steps-carousel--slide .steps-viewport { perspective: none; }
.steps-carousel--slide .steps-track { transform-style: flat; }
.steps-carousel--slide .step { transform: translateX(28px); box-shadow: var(--shadow-md); }
.steps-carousel--slide .step.is-active { transform: translateX(0); }
.steps-carousel--slide .step:nth-child(odd)  { background-color: var(--color-bg); }
.steps-carousel--slide .step:nth-child(even) { background-color: var(--color-primary); }
.steps-carousel--slide .step:nth-child(odd) h3,
.steps-carousel--slide .step:nth-child(odd) p { color: #FCFCFC; }
.steps-carousel--slide .step:nth-child(odd) .card-icon { color: var(--color-primary); }
.steps-carousel--slide .step:nth-child(even) h3,
.steps-carousel--slide .step:nth-child(even) p,
.steps-carousel--slide .step:nth-child(even) .card-icon { color: var(--color-bg); }
.steps-carousel--slide .steps-dot { background-color: rgba(15, 17, 18, 0.18); }
.steps-carousel--slide .steps-dot.is-active { background-color: var(--color-primary); }

/* How-we-work (section 10): use section 7's horizontal slide/fade transition
   (not the default 3D flip) while keeping its own card colors. */
#how-carousel .steps-viewport { perspective: none; }
#how-carousel .steps-track { transform-style: flat; }
#how-carousel .step { transform: translateX(28px); }
#how-carousel .step.is-active { transform: translateX(0); }

/* Two-column card: content (number + title + text) left, big flat icon right */
#how-carousel .step { flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: var(--space-8); }
#how-carousel .step-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
#how-carousel .step-icon { flex: 0 0 auto; margin-right: auto; display: grid; place-items: center; }
#how-carousel .step-icon iconify-icon { font-size: clamp(4.5rem, 11vw, 9rem); color: var(--color-bg); opacity: 0.9; }
@media (max-width: 640px) {
  #how-carousel .step { gap: var(--space-5); }
  #how-carousel .step-icon iconify-icon { font-size: 4rem; }
}

/* Reviews (section 7): client logo left, testimonial content right */
#reviews-carousel .step { flex-direction: row; align-items: center; gap: var(--space-8); }
#reviews-carousel .step-content { flex: 1 1 auto; min-width: 0; }
#reviews-carousel .review-logo { flex: 0 0 auto; width: clamp(110px, 15vw, 170px); display: grid; place-items: center; }
#reviews-carousel .review-logo img { max-width: 100%; max-height: 84px; object-fit: contain; }
/* mono treatment so any logo reads on the alternating dark / yellow cards */
#reviews-carousel .step:nth-child(odd)  .review-logo img { filter: brightness(0) invert(1); }  /* dark card  → white logo */
#reviews-carousel .step:nth-child(even) .review-logo img { filter: brightness(0); }             /* yellow card → dark logo */
#reviews-carousel .review-logo--icon iconify-icon { font-size: clamp(3.5rem, 8vw, 6rem); }
#reviews-carousel .step:nth-child(odd)  .review-logo--icon iconify-icon { color: #FCFCFC; }
#reviews-carousel .step:nth-child(even) .review-logo--icon iconify-icon { color: var(--color-bg); }
@media (max-width: 640px) {
  /* stack the card: logo on top, testimonial text below (left-aligned) */
  #reviews-carousel .step { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  #reviews-carousel .review-logo { width: auto; max-width: 100%; justify-items: start; }
  #reviews-carousel .review-logo img { max-height: 56px; }
  #reviews-carousel .step-content { width: 100%; text-align: left; }
}

/* STACK variant — every card the same dark surface so the yellow polyhedron
   always reads; card holds a category title, the chips, then the rotating hub. */
.steps-carousel--stack .step,
.steps-carousel--stack .step:nth-child(odd),
.steps-carousel--stack .step:nth-child(even) { background-color: var(--color-surface); }
/* Each card = two containers: text (heading + chips) and the canvas hub. */
.steps-carousel--stack .step { align-items: center; text-align: center; gap: var(--space-6); }
/* title always light so it contrasts the dark card (beats the slide odd/even rules) */
.steps-carousel--stack .step h3,
.steps-carousel--stack .step:nth-child(odd) h3,
.steps-carousel--stack .step:nth-child(even) h3 { color: #F1F1F1; }
.steps-carousel--stack .stack-card__text {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: 100%;
}
.steps-carousel--stack .stack-cat {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-xl);
}
.steps-carousel--stack .stack-cat__ic { width: 1.3em; height: 1.3em; fill: var(--color-primary); flex: 0 0 auto; }
.steps-carousel--stack .stack-desc { margin: 0; font-size: var(--text-sm); line-height: 1.6; max-width: 42ch; }
/* force light desc on every card (beats the slide odd/even <p> colour rules) */
.steps-carousel--stack .step .stack-desc,
.steps-carousel--stack .step:nth-child(odd) .stack-desc,
.steps-carousel--stack .step:nth-child(even) .stack-desc { color: #F1F1F1; }
/* chips flow in a single wrapping row */
.steps-carousel--stack .tech-list { margin: 0; order: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); justify-content: center; }
/* chips share the card's rounded corners + dark-mode styling */
.steps-carousel--stack .tech-list li {
  border-radius: var(--radius-lg);
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #F1F1F1;
}
/* canvas hub — fills its container's full width (no 462px cap); fixed height */
.steps-carousel--stack .tech-hub { width: 100%; max-width: none; min-height: 240px; }
/* the hub sits on a dark card even though the section is light: restore the
   dark-mode bond lines and node chips */
.section--light .steps-carousel--stack .cta-hub { --bond: 242, 183, 5; }
.section--light .steps-carousel--stack .hub-node__dot { color: var(--color-primary); background: var(--color-bg); border-color: rgba(242, 183, 5, 0.45); }
.section--light .steps-carousel--stack .hub-node:hover .hub-node__dot { border-color: var(--color-primary); background: rgba(242, 183, 5, 0.12); }
.steps-carousel--stack .step.is-active .tech-hub { animation: tech-pulse 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .steps-carousel--stack .step.is-active .tech-hub { animation: none; } }

/* Desktop: text container left, canvas container right.
   (Mobile keeps them stacked — text on top, animation below.) */
@media (min-width: 768px) {
  .steps-carousel--stack .step { flex-direction: row; align-items: center; text-align: left; gap: var(--space-10); }
  .steps-carousel--stack .stack-card__text { flex: 0 0 auto; width: auto; align-items: flex-start; align-self: flex-start; }
  .steps-carousel--stack .tech-list { justify-content: start; }
  .steps-carousel--stack .tech-hub { flex: 1 1 auto; min-height: 260px; }
}

/* nav + dots */
.steps-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-5); margin-top: var(--space-6); }
.steps-arrow {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1; color: var(--color-text);
  background: none; border: 1px solid var(--color-border); border-radius: 50%; cursor: pointer;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.steps-arrow:hover { border-color: var(--color-primary); color: var(--color-primary); }
.steps-dots { display: flex; align-items: center; gap: var(--space-2); }
.steps-dot {
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 999px;
  background-color: rgba(252, 252, 252, 0.25); cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.steps-dot.is-active { width: 26px; background-color: var(--color-primary); }


/* ==========================================================================
   9. DIAL — clickable index (vertical or horizontal) reveals one card
   ========================================================================== */
.pain-dial { display: flex; gap: var(--space-12); margin-top: var(--space-10); align-items: stretch; }
.dial-track {
  position: relative; flex: 0 0 300px; max-width: 320px; padding-left: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.dial-track::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: rgba(252, 252, 252, 0.12); border-radius: 2px;
}
.dial-thumb {
  position: absolute; left: -1px; top: 0; width: 4px; height: 0; border-radius: 4px;
  background: var(--color-primary);
  transition: transform 0.35s var(--ease-out), height 0.35s ease;
}
.dial-step {
  appearance: none; background: none; border: 0; text-align: left; cursor: pointer;
  padding: var(--space-3); display: flex; align-items: baseline; gap: var(--space-3);
  color: rgba(252, 252, 252, 0.45); transition: color var(--t-fast) ease; font-family: var(--font-body);
}
.dial-step:hover { color: rgba(252, 252, 252, 0.8); }
.dial-step.is-active { color: var(--color-text); }
.dial-num { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 700; color: var(--color-primary); flex: 0 0 auto; }
.dial-label { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
.dial-cards { position: relative; flex: 1 1 auto; display: grid; }
.dial-card {
  grid-area: 1 / 1; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-10); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}
.dial-card.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
/* horizontal variant: steps across the top, underline thumb slides sideways */
.pain-dial--horizontal { flex-direction: column; gap: var(--space-8); }
.pain-dial--horizontal .dial-track { flex: none; max-width: none; flex-direction: row; padding-left: 0; padding-bottom: var(--space-3); gap: var(--space-2); }
.pain-dial--horizontal .dial-track::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 2px; }
.pain-dial--horizontal .dial-thumb { left: 0; top: auto; bottom: 0; width: 0; height: 4px; transition: transform 0.35s var(--ease-out), width 0.35s ease; }
.pain-dial--horizontal .dial-step { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
@media (max-width: 768px) {
  .pain-dial { flex-direction: column; gap: var(--space-8); }
  .dial-track { flex-basis: auto; max-width: none; }
  .dial-card { padding: var(--space-8); }
}


/* ==========================================================================
   10. PRICING CARDS — featured (yellow) middle card
   ========================================================================== */
.pricing-grid { margin-top: var(--space-10); display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.pricing-card {
  display: flex; flex-direction: column;
  background-color: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-8);
  transition: border-color var(--t-fast) ease, transform var(--t-fast) ease;
}
.pricing-card:hover { border-color: var(--color-border-hover); transform: translateY(-4px); }
.pricing-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-6); }
.pricing-card--featured { background-color: var(--color-primary); border-color: var(--color-primary); }
.pricing-card--featured:hover { border-color: var(--color-primary); }
.pricing-card--featured h3 { color: var(--color-bg); }
.pricing-card--featured .case-label { color: rgba(15, 17, 18, 0.6); }
.pricing-card--featured .case-item p { color: rgba(15, 17, 18, 0.8); }
.case-body  { display: flex; flex-direction: column; gap: var(--space-5); }
.case-item  { display: flex; flex-direction: column; gap: var(--space-1); }
.case-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-dim); }
.case-item p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }
.case-industry { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-3); }
@media (min-width: 900px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }

/* line-icon mask helper (set --icon to an inline SVG data URI) */
.case-icon {
  display: block; width: 40px; height: 40px; margin-bottom: var(--space-4);
  background-color: var(--color-primary);
  -webkit-mask: var(--icon) no-repeat center / contain;
          mask: var(--icon) no-repeat center / contain;
}


/* ==========================================================================
   11. NUMBERED STEPS (static list)
   ========================================================================== */
.steps { margin-top: var(--space-10); display: flex; flex-direction: column; }
.step { display: flex; gap: var(--space-6); padding: var(--space-8) 0; border-bottom: 1px solid var(--color-border); }
.step:last-child { border-bottom: none; }
.step-number {
  font-family: var(--font-heading); font-size: calc(var(--text-4xl) * 3); font-weight: 800;
  color: var(--color-primary); line-height: 1; flex-shrink: 0; min-width: 160px; opacity: 0.9;
}
.step-content h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.step-content > p { font-size: var(--text-base); }


/* ==========================================================================
   12. FORMS
   ========================================================================== */
.contact-form, .booking-form { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-10); }
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-group label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.form-group input, .form-group textarea {
  width: 100%; padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--color-text-dim); }
.form-group input:focus, .form-group textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}
.form-group input.error, .form-group textarea.error { border-color: #e05252; }
.form-microcopy { font-size: var(--text-xs); color: var(--color-text-dim); text-align: center; margin-top: var(--space-1); }
.form-microcopy a { color: var(--color-primary); text-decoration: underline; }


/* ==========================================================================
   13. MOLECULAR GLOBE HUB — icon nodes on an invisible spinning sphere (JS)
   Markup: .cta-hub[data-globe] > canvas.cta-hub__links + .hub-node[data-lon][data-lat]
   ========================================================================== */
.cta-hub {
  position: relative; width: 100%; min-width: 0; min-height: 340px;
  pointer-events: none; animation: hub-pulse 6s ease-in-out infinite;
}
@keyframes hub-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.cta-hub__links { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub-node { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); pointer-events: auto; }
.hub-node__depth { display: block; transform: scale(var(--s, 1)); }
.hub-node__hover { display: block; transition: transform var(--t-base) ease; }
.hub-node:hover .hub-node__hover { transform: scale(1.4); }
.hub-node__dot {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; font-size: 19px;
  color: var(--color-primary); background: var(--color-bg);
  border: 1px solid rgba(242, 183, 5, 0.45); border-radius: 10px;
  transition: border-color var(--t-base) ease, background var(--t-base) ease;
  animation: hub-breathe 4.5s ease-in-out infinite;
}
.hub-node:hover .hub-node__dot { border-color: var(--color-primary); background: rgba(242, 183, 5, 0.12); }
.hub-node--center .hub-node__dot { width: 56px; height: 56px; font-size: 30px; background: rgba(242, 183, 5, 0.12); border-color: rgba(242, 183, 5, 0.6); border-radius: 50%; }
.hub-node--sm .hub-node__dot { width: 32px; height: 32px; font-size: 16px; }
.hub-node:nth-of-type(2n) .hub-node__dot { animation-delay: -1.1s; }
.hub-node:nth-of-type(3n) .hub-node__dot { animation-delay: -2.3s; }
.hub-node:nth-of-type(4n) .hub-node__dot { animation-delay: -3.4s; }
@keyframes hub-breathe { 0%, 100% { transform: scale(0.92); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .hub-node__dot, .cta-hub { animation: none; } }
/* light-section variant: pass --bond:"15,17,18" on the hub for dark bond lines */
.section--light .cta-hub { --bond: 15, 17, 18; }
.section--light .hub-node__dot { color: var(--color-bg); background: #FFFFFF; border-color: rgba(15, 17, 18, 0.22); }
.section--light .hub-node:hover .hub-node__dot { border-color: var(--color-bg); background: rgba(15, 17, 18, 0.06); }


/* ==========================================================================
   14. HERO GLOBE container (Americas canvas — see js/hero-globe.js)
   ========================================================================== */
.hero-globe { position: relative; width: 100%; min-width: 0; max-width: 100%; min-height: 280px; align-self: stretch; }
.hero-map { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* ByteNana logo pinned at the centre of the hero polyhedron */
.hero-hub__logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 40; pointer-events: none; }
.hero-hub__logo img {
  width: 84px; height: auto; display: block; filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.45));
  /* pulse offset from the polyhedron's own pulse so the logo lags a beat behind */
  animation: hero-logo-pulse 6s ease-in-out infinite; animation-delay: 1.1s;
}
@keyframes hero-logo-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .hero-hub__logo img { animation: none; } }
body.globe-grab { cursor: grab; }
body.globe-grabbing { cursor: grabbing; user-select: none; -webkit-user-select: none; }


/* ==========================================================================
   15. BOOKING MODAL
   ========================================================================== */
.booking-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.booking-modal[hidden] { display: none; }
.booking-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.booking-modal__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-md);
  animation: booking-pop 0.3s ease both;
}
@keyframes booking-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.booking-modal__close { position: absolute; top: var(--space-4); right: var(--space-4); background: none; border: none; color: var(--color-text-muted); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px; transition: color var(--t-fast) ease; }
.booking-modal__close:hover { color: var(--color-text); }
.booking-modal__dialog h3 { margin-bottom: var(--space-2); font-size: var(--text-2xl); }
.booking-modal__intro { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); }
body.modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .booking-modal__dialog { animation: none; } }


/* ==========================================================================
   16. FOOTER
   ========================================================================== */
#footer { background-color: var(--color-light); border-top: 1px solid var(--on-light-border); padding: var(--space-12) 0; }
.footer-inner { display: flex; flex-direction: column; gap: var(--space-8); }
.footer-brand .logo { font-size: var(--text-lg); }
.footer-brand .logo-byte { color: var(--on-light-text); }
.footer-brand p { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--on-light-muted); max-width: 380px; line-height: 1.6; }


/* ==========================================================================
   17. COMPONENT BREAKPOINTS — grid column counts
   ========================================================================== */
@media (min-width: 768px) {
  .menu-toggle { display: none; }
  .nav-links   { display: flex; }
  .card-grid--2-4 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--3   { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
}
@media (min-width: 1024px) {
  .card-grid--2-4 { grid-template-columns: repeat(4, 1fr); }
  .card-grid--3   { grid-template-columns: repeat(3, 1fr); }
}