:root {
  /* Dark brand palette (per README brand direction). */
  /* Declare the UI as dark so browsers (esp. iOS Safari) render the default
     canvas, overscroll area, form controls and scrollbars dark instead of the
     white default that otherwise shows through on mobile/tablet. */
  color-scheme: dark;
  --bg: #0f0f10;
  --bg-alt: #141416;
  --surface: #1a1a1d;
  --surface-soft: #1f1f24;
  --surface-2: #151519;
  --text: #ffffff;
  --text-soft: #d1d1d6;
  --text-faint: #9a96a8;
  --primary: #fa434b;
  --secondary: #7b61ff;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.45);
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --shell-width: min(1240px, calc(100% - 28px));
  --nav-width: min(1360px, calc(100% - 42px));
  --footer-bg: #141416;
}

* {
  box-sizing: border-box;
  min-width: 0;
}

html {
  scroll-behavior: smooth;
  /* Solid dark backdrop so iOS Safari rubber-band overscroll never exposes the
     white default page background. */
  background-color: #0b0b0d;
}

body {
  position: relative;
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  /* Gradient layered over a solid dark colour: the solid colour guarantees a
     dark base under semi-transparent elements (chips, marquee) so they can't
     composite against white on mobile. */
  background: linear-gradient(180deg, #0d0d0f 0%, #0f0f12 45%, #0a0a0c 100%) #0b0b0d;
}

/* Animated, gently drifting colour blobs behind all page content. */
body::before {
  content: '';
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 18% 12%, rgba(250, 67, 75, 0.16), transparent 60%),
    radial-gradient(34vmax 34vmax at 82% 18%, rgba(123, 97, 255, 0.16), transparent 60%),
    radial-gradient(40vmax 40vmax at 70% 88%, rgba(245, 174, 27, 0.12), transparent 62%),
    radial-gradient(34vmax 34vmax at 22% 82%, rgba(123, 97, 255, 0.12), transparent 60%);
  background-repeat: no-repeat;
  animation: bg-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes bg-drift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  50% { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .marquee-track { animation: none; }
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

.site-shell {
  width: var(--shell-width);
  margin: 0 auto;
  padding: 128px 0 72px;
}

/* Uniform vertical rhythm so adjacent colour panels never touch. */
.site-shell main {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.topbar-shell {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  width: var(--nav-width);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 15px 0px 15px 0px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(86, 58, 160, 0.1);
  border-radius: 999px;
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-soft);
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand-wordmark {
  width: 176px;
  height: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link,
.nav-link-button,
.nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.nav-link:hover,
.nav-link-button:hover,
.nav-item.is-open > .nav-link-button,
.nav a:hover {
  color: var(--secondary);
  background: rgba(123, 97, 255, 0.08);
}

.nav-link.is-active,
.nav-link-button.is-active {
  background: linear-gradient(90deg, rgba(250, 67, 75, 0.14), rgba(123, 97, 255, 0.16));
  color: var(--text);
}

.nav-caret {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-left: 2px;
  opacity: 0.8;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-link-button:hover .nav-caret,
.lang-current:hover .nav-caret {
  opacity: 1;
}

.nav-cta {
  padding: 10px 18px;
  background: linear-gradient(90deg, var(--primary), var(--secondary)) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(123, 97, 255, 0.18);
}

.nav-cta:hover {
  color: #fff;
  transform: translateY(-1px);
}

.lang-switcher {
  position: relative;
  display: inline-flex;
  /* Invisible hover bridge across the gap to the menu so hover-open stays open. */
  padding-bottom: 12px;
  margin-bottom: -12px;
}

.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid rgba(86, 58, 160, 0.16);
  border-radius: 999px;
  background: rgba(123, 97, 255, 0.08);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.lang-current:hover {
  color: var(--secondary);
  background: rgba(123, 97, 255, 0.14);
}

.lang-globe {
  font-size: 0.95rem;
  line-height: 1;
}

.lang-switcher.is-open .nav-caret {
  transform: rotate(180deg);
}

/* Open the language menu on hover for pointer devices (click still works too). */
@media (hover: hover) {
  .lang-switcher:hover .nav-caret {
    transform: rotate(180deg);
  }

  .lang-switcher:hover .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 168px;
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(86, 58, 160, 0.12);
  box-shadow: 0 24px 50px rgba(56, 29, 116, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 5;
}

.lang-switcher.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.lang-option {
  display: flex;
  width: 100%;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease;
}

.lang-option.is-active {
  background: linear-gradient(90deg, rgba(250, 67, 75, 0.14), rgba(123, 97, 255, 0.16));
  color: var(--text);
}

.lang-option:hover {
  color: var(--secondary);
  background: rgba(123, 97, 255, 0.08);
}

.nav-item {
  position: relative;
}

.nav-item.has-panel {
  padding-bottom: 14px;
  margin-bottom: -14px;
}

.nav-item.has-panel:hover > .mega-panel,
.nav-item.is-open > .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.mega-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  width: min(1240px, calc(100vw - 34px));
  padding: 18px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(86, 58, 160, 0.12);
  border-radius: 32px;
  box-shadow: 0 28px 60px rgba(56, 29, 116, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(250px, 0.95fr);
  gap: 16px;
}

.mega-col,
.mega-highlight {
  padding: 20px;
  background: linear-gradient(180deg, #ffffff, #faf7ff);
  border: 1px solid rgba(86, 58, 160, 0.1);
  border-radius: 24px;
  text-align: left;
}

.mega-title {
  margin-bottom: 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
}

.mega-links {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.mega-links a {
  display: block;
  width: 100%;
  padding: 4px 0;
  color: var(--text-soft);
  line-height: 1.4;
  text-align: left;
}

.mega-links a:hover {
  color: var(--secondary);
}

.mega-highlight {
  display: grid;
  align-content: start;
  gap: 14px;
  background: linear-gradient(160deg, rgba(250, 67, 75, 0.08), rgba(123, 97, 255, 0.12));
}

.mega-highlight h4,
.mega-highlight p {
  margin: 0;
}

.mega-highlight h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.55rem;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(86, 58, 160, 0.12);
  border-radius: 50%;
  background: #fff;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 5px auto;
  background: var(--text);
}

.hero-section,
.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.94fr);
  gap: 36px;
  align-items: center;
  padding: 18px 0 30px;
}

.hero-section {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  max-width: 1080px;
  margin: 0 auto;
}

.hero-copy {
  display: grid;
  justify-items: center;
  max-width: 980px;
}

.page-hero {
  grid-template-columns: 1fr;
  max-width: 960px;
  margin: 0 auto;
  justify-items: center;
  text-align: center;
}

.page-hero-tight {
  padding-top: 8px;
}

.hero-badge,
.rating-strip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px dashed rgba(123, 97, 255, 0.26);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
}

.hero-badge {
  margin-bottom: 14px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #29c259;
  box-shadow: 0 0 0 6px rgba(41, 194, 89, 0.12);
}

.rating-stars {
  color: #f5ae1b;
  letter-spacing: 0.15em;
  /* Never let the star glyphs be squeezed by flex-shrink; when the pill hits
     its max-width the stars must keep their intrinsic width instead of
     collapsing and overflowing into the adjacent caption text. */
  flex: none;
  white-space: nowrap;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
  font-weight: 800;
}

.eyebrow::before {
  content: '';
  width: 38px;
  height: 1px;
  background: currentColor;
}

h1,
h2,
h3,
h4,
.nav-link,
.nav-link-button,
.nav a {
  font-family: 'Space Grotesk', sans-serif;
}

h1 {
  margin: 5px;
  font-size: 60px;
  line-height: 1.02;
  letter-spacing: -0.05em;
}

h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

h3 {
  margin: 0;
  font-size: 1.24rem;
}

p {
  margin: 0;
}

.hero-text,
.section-copy,
.pillar-card p,
.service-card p,
.service-card li,
.case-card p,
.review-card p,
.faq-answer,
.detail-copy,
.detail-card p,
.detail-card li,
.package-card li,
.about-card p,
.pricing-card p,
.pricing-row p,
.industry-card p,
.mega-highlight p,
.footer p,
.footer a,
.call-panel p {
  color: var(--text-soft);
  line-height: 1.72;
}

.highlight-word {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.highlight-word::after {
  content: '';
  position: absolute;
  left: -0.08em;
  right: -0.08em;
  bottom: 0.08em;
  height: 0.32em;
  border-radius: 999px;
  z-index: -1;
  background: linear-gradient(90deg, rgba(250, 67, 75, 0.34), rgba(123, 97, 255, 0.28));
}

.hero-actions,
.centered-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0 22px;
}

.centered-actions {
  justify-content: center;
}

.hero-actions {
  justify-content: center;
}

.button,
.text-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 0.98rem;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.button:hover,
.text-link-button:hover {
  transform: translateY(-1px);
}

.button-primary,
.text-link-button {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: #fff;
  box-shadow: 0 16px 30px rgba(123, 97, 255, 0.16);
}

.button-primary:hover,
.button-accent:hover,
.text-link-button:hover {
  color: #fff;
}

.button-secondary {
  background: #fff;
  border-color: rgba(86, 58, 160, 0.16);
  color: var(--text);
}

.button-secondary:hover {
  color: var(--text);
  background: #fff;
}

.button-accent {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: #fff;
}

.benefit-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.benefit-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(86, 58, 160, 0.1);
  box-shadow: var(--shadow-soft);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.06rem;
  font-weight: 600;
}

.check-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 2px solid rgba(86, 58, 160, 0.4);
  color: var(--text);
  flex: none;
}

.hero-visual,
.pillar-card,
.service-card,
.case-card,
.review-card,
.detail-card,
.package-card,
.about-card,
.about-stats,
.pricing-card,
.pricing-row,
.industry-card,
.faq-item,
.cta-panel,
.team-card,
.founder-card,
.detail-hero-card,
.detail-showcase,
.result-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(86, 58, 160, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.hero-visual {
  min-height: 500px;
  padding: 24px;
  overflow: hidden;
}

.signal-window {
  display: grid;
  gap: 18px;
  height: 100%;
}

.signal-header {
  display: flex;
  gap: 8px;
}

.signal-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(86, 58, 160, 0.22);
}

.signal-metric {
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(250, 67, 75, 0.1), rgba(123, 97, 255, 0.1), #fff);
  border: 1px solid rgba(86, 58, 160, 0.08);
}

.signal-metric strong {
  display: block;
  font-size: clamp(2.8rem, 5vw, 4.4rem);
}

.signal-grid {
  display: grid;
  gap: 14px;
}

.signal-grid div {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(86, 58, 160, 0.1);
}

.signal-grid span {
  color: var(--primary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.signal-grid strong {
  display: block;
  margin-top: 8px;
}

.marquee-wrap {
  margin: 18px 0 24px;
}

.marquee-section {
  overflow: hidden;
  padding: 14px 0;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(86, 58, 160, 0.1);
  box-shadow: var(--shadow-soft);
}

.marquee-track {
  display: flex;
  gap: 0px;
  width: max-content;
  animation: marquee 28s linear infinite;
}

.logo-marquee-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 50px;
  padding: 3px 3px;
}

.logo-marquee-item img {
  width: 148px;
  height: 40px;
  object-fit: contain;
  filter: none;
}

.service-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 8px;
  padding: 11px 22px;
  border-radius: 999px;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff, #faf7ff);
  border: 1px solid rgba(123, 97, 255, 0.16);
  box-shadow: 0 8px 20px rgba(97, 78, 164, 0.06);
}

.service-marquee-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 0 0 4px rgba(123, 97, 255, 0.1);
}

.service-marquee-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.section {
  padding: 0;
}

/* Spacing between panels is now handled by the main flex gap. */
.section-spacer {
  display: none;
}

.section-soft {
  padding: 34px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #fbf9ff, #ffffff);
  border: 1px solid rgba(86, 58, 160, 0.12);
  box-shadow: var(--shadow);
}

.section-heading {
  max-width: 820px;
  margin-bottom: 24px;
}

.section-heading.centered {
  margin-inline: auto;
  text-align: center;
}

.home-wide-heading {
  max-width: 960px;
}

.section-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  max-width: none;
}

.pillar-grid,
.service-list,
.case-grid,
.pricing-grid,
.industry-grid,
.detail-grid,
.result-grid,
.packages-grid,
.review-grid,
.about-layout,
.team-grid {
  display: grid;
  gap: 18px;
}

.pillar-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pillar-card,
.service-card,
.case-card,
.industry-card,
.review-card,
.team-card {
  padding: 24px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.pillar-card:hover,
.service-card:hover,
.case-card:hover,
.industry-card:hover,
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px rgba(123, 97, 255, 0.12);
}

.pillar-card h3,
.service-card h3,
.case-card h3,
.industry-card h3,
.review-card h3,
.pricing-card h3 {
  margin-bottom: 10px;
}

.service-chip-row,
.tags-row,
.package-deliverables,
.founder-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 10px;
}

.service-chip,
.pill,
.tag,
.stat-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(123, 97, 255, 0.06);
  border: 1px solid rgba(123, 97, 255, 0.16);
  color: var(--text);
}

.service-card {
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 18px;
}

.service-card ul,
.detail-card ul,
.package-card ul {
  margin: 14px 0 0;
  padding-left: 18px;
}

.service-card li,
.detail-card li,
.package-card li {
  margin-bottom: 8px;
}

.showcase-shell {
  display: grid;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}

.showcase-tabs,
.slider-dots {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.showcase-tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid rgba(86, 58, 160, 0.18);
  border-radius: 18px 18px 0 0;
  border-bottom: 0;
  background: #eee8ff;
  color: var(--text-faint);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  cursor: pointer;
}

.showcase-tab.is-active {
  background: #fff;
  color: var(--text);
}

.slider-frame {
  overflow: hidden;
}

.slider-track {
  display: flex;
  transition: transform 0.35s ease;
  will-change: transform;
}

.slider-slide {
  width: 100%;
  flex: 0 0 100%;
}

.showcase-card {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 24px;
  padding: 24px;
  border-radius: 28px;
  border: 2px solid rgba(86, 58, 160, 0.18);
  background: #fff;
  box-shadow: 10px 10px 0 rgba(86, 58, 160, 0.08);
}

.showcase-copy {
  display: grid;
  gap: 20px;
  align-content: center;
}

.showcase-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

.showcase-brand-badge {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffcc35, #f59e0b);
  color: #472500;
  font-weight: 900;
}

.showcase-brand-badge-logo {
  padding: 4px;
  background: #fff;
  border: 1px solid rgba(86, 58, 160, 0.14);
}

.showcase-brand-badge-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.showcase-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.metric-box {
  min-width: 150px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px dashed rgba(123, 97, 255, 0.28);
  background: linear-gradient(180deg, #fff, #faf7ff);
}

.metric-box span {
  display: block;
  color: var(--text-soft);
  font-size: 0.92rem;
}

.metric-box strong {
  display: block;
  margin-top: 6px;
  font-size: 1.9rem;
  font-family: 'Space Grotesk', sans-serif;
}

.count-up {
  display: block;
}

.showcase-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-height: 420px;
  border-radius: 24px;
  overflow: hidden;
  background: #f7f2ff;
}

.showcase-visual-single {
  grid-template-columns: 1fr;
  place-items: center;
  padding: 18px;
}

.showcase-visual-single img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 18px;
}

.showcase-visual img,
.detail-gallery-stage img,
.detail-side-visual img,
.founder-photo,
.team-photo {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

.slider-controls,
.showcase-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px;
}

.slider-arrow {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(86, 58, 160, 0.22);
  background: #fff;
  color: var(--text);
  cursor: pointer;
}

.slider-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(86, 58, 160, 0.18);
  background: transparent;
  cursor: pointer;
}

.slider-dot.is-active {
  background: var(--primary);
  border-color: var(--primary);
}

.review-shell {
  display: grid;
  gap: 18px;
}

.review-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.review-card {
  position: relative;
  min-height: 250px;
}

.review-card::after {
  content: '';
  position: absolute;
  left: 34px;
  bottom: -12px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-left: 1px solid rgba(86, 58, 160, 0.12);
  border-bottom: 1px solid rgba(86, 58, 160, 0.12);
  transform: rotate(-45deg);
}

.review-source {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--primary);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  overflow: hidden;
}

.avatar.purple { background: linear-gradient(135deg, #7b61ff, #c06df3); }
.avatar.red { background: linear-gradient(135deg, #fa434b, #fb7185); }
.avatar.orange { background: linear-gradient(135deg, #fb923c, #f59e0b); }

.avatar-image {
  background: #fff;
  border: 1px solid rgba(86, 58, 160, 0.14);
}

.avatar-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.industry-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.industry-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: start;
}

.industry-icon {
  display: inline-grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 24px;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 800;
}

.industry-icon img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  border-radius: 15px;
}


.case-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1180px;
  margin: 0 auto;
}

.case-media {
  min-height: 210px;
  padding: 22px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(160deg, #f7f1ff, #fff7f8);
}

.case-media img {
  max-height: 120px;
  width: auto;
  object-fit: contain;
}

.case-metric {
  display: inline-flex;
  margin: 18px 0 10px;
  color: var(--primary);
  font-weight: 800;
}

.detail-main {
  display: grid;
  gap: 24px;
  padding: 8px 0 26px;
}

.detail-hero-card,
.detail-showcase,
.pricing-row,
.founder-card {
  display: grid;
  gap: 60px;
  padding: 28px;
  border-radius: var(--radius-xl);
  margin-bottom:20px;
}

.detail-hero-card {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.92fr);
}

.detail-hero-card-centered {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.detail-hero-card-centered > div {
  max-width: 920px;
}

.detail-side-visual {
  min-height: 340px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(160deg, #f7f1ff, #fff7f8);
}

.detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-card,
.package-card,
.pricing-card,
.result-card,
.team-card,
.faq-item {
  padding: 24px;
}

.package-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.result-grid,
.packages-grid,
.pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.result-card,
.pricing-card,
.package-card.featured {
  background: linear-gradient(180deg, #ffffff, #faf7ff);
}

.result-card span,
.pricing-card .small-label,
.package-card .small-label {
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.76rem;
  font-weight: 800;
}

.result-card strong,
.pricing-price strong,
.package-price strong {
  display: block;
  margin-top: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.55rem;
}

.detail-showcase {
  grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
}

.detail-hero-card-solo {
  grid-template-columns: 1fr;
}

.detail-gallery-copy {
  display: grid;
  gap: 16px;
}

.detail-gallery-stage {
  min-height: 440px;
  border-radius: 24px;
  overflow: hidden;
  background: #f7f2ff;
  border: 1px solid rgba(86, 58, 160, 0.1);
}

.package-card .button {
  margin-top: auto;
  margin-left: 0;
  margin-bottom: 6px;
}

.package-cta {
  margin-top: 24px;
}

.case-study-media {
  display: grid;
  gap: 22px;
}

.case-study-media .section-heading {
  margin-bottom: 0;
  max-width: 920px;
}

.service-chip-row-centered {
  justify-content: center;
}

.case-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.case-media-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, #faf7ff);
  border: 1px solid rgba(86, 58, 160, 0.12);
}

.case-media-stage {
  min-height: 280px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, #f7f1ff, #fff7f8);
  border: 1px solid rgba(86, 58, 160, 0.1);
  display: grid;
  place-items: center;
}

.case-media-stage img,
.case-media-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #f8f5ff;
}

.case-media-stage-video {
  min-height: 420px;
}

.case-media-stage-document {
  min-height: 420px;
  padding: 24px;
}

.case-document-panel {
  display: grid;
  gap: 16px;
  max-width: 520px;
  text-align: center;
}

.case-document-panel strong {
  color: var(--text);
  font-size: 1.35rem;
  font-family: 'Space Grotesk', sans-serif;
}

.case-document-panel span {
  color: var(--text-soft);
  line-height: 1.7;
}

.case-media-caption {
  display: grid;
  gap: 6px;
  padding: 6px 8px 2px;
}

.case-media-caption strong {
  color: var(--text);
}

.case-media-caption span {
  color: var(--text-soft);
  line-height: 1.6;
}

.case-study-media .slider-frame {
  width: 100%;
}

.case-study-media .slider-slide {
  display: grid;
  gap: 12px;
}

.pricing-row {
  grid-template-columns: 280px 1fr;
}

.pricing-row-compact {
  grid-template-columns: 260px 1fr;
  align-items: start;
}

.pricing-catalog {
  display: grid;
  gap: 16px;
}

.pricing-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.pricing-service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff, #faf7ff);
  border: 1px solid rgba(86, 58, 160, 0.12);
  box-shadow: var(--shadow);
}

.pricing-service-card h3 {
  margin: 0;
}

.pricing-service-card p {
  margin: 0;
}

.pricing-service-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pricing-service-card .button {
  margin-top: auto;
}

.pricing-line {
  display: grid;
  grid-template-columns: minmax(180px, 220px) repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.pricing-line > div,
.pricing-line > article {
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #faf7ff);
  border: 1px solid rgba(86, 58, 160, 0.12);
}

.pricing-line > div strong,
.pricing-line > article strong,
.pricing-line > div p,
.pricing-line > article p,
.pricing-line > article span {
  color: var(--text);
}

.pricing-line > div p,
.pricing-line > article p,
.pricing-line > article span:not(.small-label) {
  color: var(--text-soft);
}

.pricing-head,
.package-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 16px;
}

.call-panel {
  align-items: center;
}

.call-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.currency-switcher {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(86, 58, 160, 0.12);
}

.currency-label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--text);
}

.currency-options {
  display: flex;
  gap: 8px;
}

.currency-option {
  min-width: 62px;
  min-height: 38px;
  border: 1px solid rgba(86, 58, 160, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}

.currency-option.is-active {
  background: linear-gradient(90deg, rgba(250, 67, 75, 0.14), rgba(123, 97, 255, 0.18));
}

.founder-card {
  grid-template-columns: minmax(280px, 340px) 1fr;
}

.founder-photo-wrap,
.team-photo-wrap {
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(160deg, #f7f1ff, #fff7f8);
  border: 1px solid rgba(86, 58, 160, 0.12);
  aspect-ratio: 1 / 1;
}

.team-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.team-statement {
  display: grid;
  gap: 16px;
  padding: 40px;
  text-align: center;
  justify-items: center;
  background: linear-gradient(135deg, rgba(123, 97, 255, 0.08), rgba(250, 67, 75, 0.08), #ffffff);
  border: 1px solid rgba(86, 58, 160, 0.12);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.team-statement h2 {
  max-width: 760px;
}

.team-statement .hero-text {
  max-width: 680px;
}

.careers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.career-card,
.course-card {
  padding: 24px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(86, 58, 160, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.career-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.career-card .button {
  margin-top: auto;
}

.career-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0;
}

.courses-grid {
  display: grid;
  gap: 22px;
}

.course-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
  gap: 24px;
  align-items: center;
}

.course-copy,
.course-visual,
.course-chart {
  display: grid;
  gap: 16px;
}

.course-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.course-actions-stack {
  display: grid;
}

.course-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.course-demo-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, #faf7ff);
  border: 1px solid rgba(86, 58, 160, 0.12);
}

.course-demo-card h3,
.course-demo-card p {
  margin: 0;
}

.course-detail-hero {
  padding: 18px 0 36px;
}

.course-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.72fr);
  gap: 24px;
  align-items: start;
}

.course-detail-main {
  display: grid;
  gap: 22px;
}

.course-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.course-demo-stage {
  display: grid;
  gap: 10px;
  min-height: 220px;
  padding: 22px;
  border-radius: 22px;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at top right, rgba(123, 97, 255, 0.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(250, 67, 75, 0.14), transparent 30%),
    linear-gradient(180deg, #ffffff, #f8f4ff);
  border: 1px solid rgba(86, 58, 160, 0.12);
}

.course-curriculum {
  display: grid;
  gap: 12px;
}

.course-curriculum-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #faf7ff);
  border: 1px solid rgba(86, 58, 160, 0.12);
}

.course-curriculum-item span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(250, 67, 75, 0.14), rgba(123, 97, 255, 0.16));
  color: var(--primary);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

.course-sidebar {
  position: sticky;
  top: 110px;
}

.course-sidebar-card {
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(86, 58, 160, 0.12);
  box-shadow: var(--shadow);
}

.course-price {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--text);
}

.course-proof-buttons,
.course-sidebar-list {
  display: grid;
  gap: 12px;
}

.course-sidebar-list ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-soft);
  line-height: 1.7;
}

.course-bar-wrap {
  display: grid;
  gap: 8px;
}

.course-bar-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  font-weight: 700;
}

.course-bar-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(123, 97, 255, 0.1);
  overflow: hidden;
}

.course-bar-fill {
  width: var(--fill);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.team-card strong {
  display: block;
  margin-top: 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.16rem;
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-question {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.08rem;
  margin-bottom: 10px;
  color: var(--text);
}

.cta-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(123, 97, 255, 0.08), rgba(250, 67, 75, 0.08), #ffffff);
}

.footer-shell {
  margin-top: 20px;
  background: linear-gradient(90deg, rgba(250, 67, 75, 0.14), rgba(123, 97, 255, 0.16));
  color: #fff;
}

.footer {
  width: var(--shell-width);
  margin: 0 auto;
  padding: 54px 0 30px;
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) repeat(2, minmax(180px, 0.7fr));
  gap: 36px;
}

.footer-logo {
  width: 200px;
}

.footer-copy {
  margin-bottom: 18px;
  max-width: 420px;
}

.footer h3,
.footer h4 {
  color: black;
}

.footer-newsletter {
  display: grid;
  gap: 14px;
}

.footer-newsletter input {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #24104f;
}

.footer-newsletter button {
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.footer-links {
  display: grid;
  gap: 12px;
}

.footer-links a {
  color: black;
}

.footer-links a:hover {
  color: var(--secondary);
}

.footer-bottom {
  width: var(--shell-width);
  margin: 0 auto;
  padding: 0 0 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: black;
}

.footer-socials {
  display: flex;
  gap: 14px;
}

.footer-social {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

@media (max-width: 1200px) {
  .pillar-grid,
  .case-grid,
  .pricing-grid,
  .team-grid,
  .careers-grid,
  .result-grid,
  .packages-grid,
  .review-grid,
  .benefit-strip,
  .industry-grid,
  .detail-grid,
  .detail-hero-card,
  .detail-showcase,
  .hero-section,
  .footer,
  .course-card,
  .mega-grid {
    grid-template-columns: 1fr 1fr;
  }

  .showcase-card,
  .pricing-row,
  .pricing-line,
  .pricing-service-grid,
  .course-detail-layout,
  .course-summary-grid,
  .case-media-grid,
  .founder-card {
    grid-template-columns: 1fr;
  }

  .mega-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mega-highlight {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .topbar-shell {
    width: calc(100% - 20px);
  }

  .topbar {
    flex-wrap: wrap;
    border-radius: 28px;
    padding: 10px 14px;
  }

  .nav-toggle {
    display: block;
  }

  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-top: 8px;
  }

  .nav.is-open {
    display: flex;
    /* Keep the open drawer usable on short viewports (e.g. landscape phones)
       by letting it scroll instead of overflowing off-screen. */
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Make the bar opaque while the drawer is open so page content behind the
     fixed header doesn't bleed through the menu items. */
  .topbar:has(.nav.is-open) {
    background: rgba(16, 16, 20, 0.98);
  }

  .nav-item,
  .nav-item > a,
  .nav-item > button,
  .nav > a {
    width: 100%;
  }

  .mega-panel {
    position: static;
    width: 100%;
    margin-top: 10px;
    transform: none;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Cancel the desktop centering transform for BOTH trigger states. iOS Safari
     fires :hover on tap, and `.nav-item.has-panel:hover > .mega-panel` has
     specificity (0,4,0) — higher than a plain `.is-open .mega-panel` (0,3,0) —
     so it re-applied translate(-50%) and pushed the panel off the left edge.
     Overriding the exact same selectors here (later in source) forces it off. */
  .nav-item.has-panel:hover > .mega-panel,
  .nav-item.is-open > .mega-panel {
    transform: none;
  }

  .nav-item.is-open .mega-panel,
  .nav-item.has-panel:hover > .mega-panel {
    display: block;
  }

  .lang-switcher {
    width: 100%;
    /* Stack the trigger above the dropdown instead of sitting in a flex row,
       which previously stretched the button into a tall rounded blob. */
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .lang-current {
    width: 100%;
    justify-content: center;
  }

  .lang-menu {
    /* In the mobile drawer the menu flows inline. Collapse it with display:none
       when closed so a hidden (visibility:hidden) menu can't reserve layout
       space and distort the switcher. */
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .lang-switcher.is-open .lang-menu {
    display: grid;
  }

  .mega-grid,
  .hero-section,
  .pillar-grid,
  .case-grid,
  .pricing-grid,
  .team-grid,
  .careers-grid,
  .packages-grid,
  .review-grid,
  .industry-grid,
  .detail-grid,
  .detail-hero-card,
  .detail-showcase,
  .course-card,
  .benefit-strip,
  .section-heading-row,
  .cta-panel,
  .footer,
  .pricing-line,
  .course-summary-grid,
  .course-detail-layout {
    grid-template-columns: 1fr;
    display: grid;
  }

  .service-card {
    grid-template-columns: 1fr;
  }

  .showcase-visual,
  .detail-gallery-stage,
  .detail-side-visual,
  .hero-visual,
  .course-demo-stage {
    min-height: 300px;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .course-sidebar {
    position: static;
  }
}

@media (max-width: 640px) {
  .site-shell {
    width: calc(100% - 18px);
    padding-top: 112px;
  }

  .section-soft,
  .detail-hero-card,
  .detail-showcase,
  .founder-card,
  .pricing-row,
  .cta-panel {
    padding: 22px;
  }

  h1 {
    font-size: clamp(2.1rem, 12vw, 3.2rem);
  }

  h2 {
    font-size: clamp(1.6rem, 9vw, 2.4rem);
  }

  .brand-wordmark {
    width: 146px;
  }

  /* When the caption wraps to multiple lines, keep the stars aligned to the
     first line and left-align the text so it never centres back into them. */
  .rating-strip {
    align-items: flex-start;
    text-align: left;
  }

  .rating-strip .rating-stars {
    margin-top: 2px;
  }
}

/* ============================================================
   Branded section themes + interactive motion
   Adds per-section background colour rhythm (dark hero, branded
   tints, vivid gradient bands) plus pointer glow, 3D card tilt,
   magnetic buttons, and parallax. Appended last so theme
   backgrounds win over the base .section / .section-soft rules.
   ============================================================ */

/* Themed bands get generous padding + rounded edges so the colour
   change reads as an intentional band rather than a thin stripe. */
.section-theme-dark,
.section-theme-purple,
.section-theme-coral,
.section-theme-gradient,
.section-tint-soft {
  position: relative;
  padding: 56px 40px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
}

/* ---- Light branded tints (keep dark text, brand-coloured bg) ---- */
.section-theme-purple {
  background: linear-gradient(135deg, #efe9ff 0%, #f6f0ff 45%, #efe6ff 100%);
  background-size: 200% 200%;
  border: 1px solid rgba(123, 97, 255, 0.18);
  box-shadow: var(--shadow);
  animation: gradient-pan 18s ease-in-out infinite alternate;
}

.section-theme-coral {
  background: linear-gradient(135deg, #ffe9eb 0%, #fff1f2 45%, #ffe6ea 100%);
  background-size: 200% 200%;
  border: 1px solid rgba(250, 67, 75, 0.18);
  box-shadow: var(--shadow);
  animation: gradient-pan 20s ease-in-out infinite alternate;
}

.section-tint-soft {
  background: linear-gradient(180deg, #ffffff, #fbfaff);
  border: 1px solid rgba(86, 58, 160, 0.1);
  box-shadow: var(--shadow-soft);
}

/* Soft drifting brand blobs inside the tint bands for depth. */
.section-theme-purple::before,
.section-theme-coral::before {
  content: '';
  position: absolute;
  inset: -30% -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(28vmax 28vmax at 16% 12%, rgba(123, 97, 255, 0.16), transparent 60%),
    radial-gradient(26vmax 26vmax at 88% 86%, rgba(250, 67, 75, 0.14), transparent 62%);
  animation: bg-drift 24s ease-in-out infinite alternate;
}

/* ---- Vivid animated gradient band (CTAs, statements) ---- */
.section-theme-gradient {
  background: linear-gradient(120deg, #fa434b 0%, #b14be0 50%, #7b61ff 100%);
  background-size: 220% 220%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 30px 70px rgba(123, 97, 255, 0.32);
  animation: gradient-pan 14s ease-in-out infinite alternate;
}

.section-theme-gradient,
.section-theme-gradient h1,
.section-theme-gradient h2,
.section-theme-gradient h3,
.section-theme-gradient h4,
.section-theme-gradient p,
.section-theme-gradient .hero-text,
.section-theme-gradient .section-copy {
  color: #fff;
}

.section-theme-gradient .eyebrow {
  color: rgba(255, 255, 255, 0.92);
}

.section-theme-gradient .eyebrow::before {
  background: rgba(255, 255, 255, 0.7);
}

/* ---- Dark spotlight bands + dark hero ---- */
.section-theme-dark,
.hero-dark {
  position: relative;
  color: #f4f2fb;
  background:
    radial-gradient(40vmax 40vmax at 78% -10%, rgba(123, 97, 255, 0.28), transparent 60%),
    radial-gradient(36vmax 36vmax at 8% 110%, rgba(250, 67, 75, 0.22), transparent 60%),
    linear-gradient(160deg, #141318 0%, #0f0f10 60%, #131017 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 70px rgba(10, 8, 24, 0.45);
  overflow: hidden;
  isolation: isolate;
}

.hero-dark {
  margin-top: 8px;
  padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 60px);
  border-radius: var(--radius-xl);
}

/* Pointer-tracked spotlight glow (vars set in script.js, fallback centred). */
.section-theme-dark::after,
.hero-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    32vmax 32vmax at var(--mx, 50%) var(--my, 30%),
    rgba(123, 97, 255, 0.3),
    transparent 55%
  );
  opacity: 0.9;
  transition: background 0.15s ease-out;
}

.section-theme-dark > *,
.hero-dark > * {
  position: relative;
  z-index: 1;
}

/* Readable text on dark bands */
.section-theme-dark h1,
.section-theme-dark h2,
.section-theme-dark h3,
.section-theme-dark h4,
.hero-dark h1,
.hero-dark h2,
.hero-dark h3,
.hero-dark h4 {
  color: #ffffff;
}

.section-theme-dark p,
.section-theme-dark .hero-text,
.section-theme-dark .section-copy,
.hero-dark p,
.hero-dark .hero-text,
.hero-dark .section-copy {
  color: #c7c2d8;
}

/* Hero badge + rating chips restyled for dark */
.hero-dark .hero-badge,
.hero-dark .rating-strip,
.section-theme-dark .hero-badge,
.section-theme-dark .rating-strip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(123, 97, 255, 0.45);
  color: #f4f2fb;
}

.hero-dark .button-secondary,
.section-theme-dark .button-secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.hero-dark .button-secondary:hover,
.section-theme-dark .button-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Glowing highlight word underline pops more on dark */
.hero-dark .highlight-word::after {
  background: linear-gradient(90deg, rgba(250, 67, 75, 0.85), rgba(123, 97, 255, 0.85));
  filter: blur(0.4px);
}

/* Cards sitting inside dark bands flip to dark surfaces */
.section-theme-dark .review-card,
.section-theme-dark .faq-item,
.section-theme-dark .pillar-card,
.section-theme-dark .industry-card,
.section-theme-dark .detail-card {
  background: #1a1a1d;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 50px rgba(8, 6, 20, 0.5);
}

.section-theme-dark .review-card h3,
.section-theme-dark .faq-item .faq-question,
.section-theme-dark .review-card strong,
.section-theme-dark .pillar-card h3,
.section-theme-dark .industry-card h3 {
  color: #fff;
}

.section-theme-dark .review-card p,
.section-theme-dark .faq-answer,
.section-theme-dark .pillar-card p,
.section-theme-dark .industry-card p {
  color: #b9b4c9;
}

/* Hide the white speech-bubble tail when review cards go dark */
.section-theme-dark .review-card::after {
  background: #1a1a1d;
  border-color: rgba(255, 255, 255, 0.1);
}

.section-theme-dark .service-chip,
.section-theme-dark .pill,
.section-theme-dark .tag,
.hero-dark .service-chip,
.hero-dark .pill,
.hero-dark .tag {
  background: rgba(123, 97, 255, 0.16);
  border-color: rgba(123, 97, 255, 0.4);
  color: #ece9f7;
}

/* ---- Vivid CTA panel modifier ---- */
.cta-panel.cta-vivid {
  background: linear-gradient(120deg, #fa434b 0%, #b14be0 50%, #7b61ff 100%);
  background-size: 220% 220%;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 30px 70px rgba(123, 97, 255, 0.32);
  animation: gradient-pan 14s ease-in-out infinite alternate;
}

.cta-panel.cta-vivid h2,
.cta-panel.cta-vivid .eyebrow,
.cta-panel.cta-vivid p {
  color: #fff;
}

.cta-panel.cta-vivid .eyebrow::before {
  background: rgba(255, 255, 255, 0.7);
}

.cta-panel.cta-vivid .button-primary {
  background: #fff;
  color: #2a1163;
}

.cta-panel.cta-vivid .button-secondary {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* ---- 3D tilt + colour glow on cards ---- */
.pillar-card,
.service-card,
.case-card,
.review-card,
.industry-card,
.team-card {
  transform-style: preserve-3d;
  will-change: transform;
}

.pillar-card.is-tilting,
.service-card.is-tilting,
.case-card.is-tilting,
.review-card.is-tilting,
.industry-card.is-tilting,
.team-card.is-tilting {
  box-shadow:
    0 30px 60px rgba(123, 97, 255, 0.28),
    0 0 0 1px rgba(123, 97, 255, 0.25);
}

/* ---- Magnetic primary buttons ---- */
.button-primary,
.button-accent {
  will-change: transform;
}

/* ---- Parallax decorations ---- */
[data-parallax] {
  will-change: transform;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.hero-orb-1 {
  width: 120px;
  height: 120px;
  top: 12%;
  left: 6%;
  background: radial-gradient(circle at 30% 30%, rgba(250, 67, 75, 0.6), transparent 70%);
}

.hero-orb-2 {
  width: 160px;
  height: 160px;
  bottom: 10%;
  right: 8%;
  background: radial-gradient(circle at 30% 30%, rgba(123, 97, 255, 0.55), transparent 70%);
}

/* ---- Cuberto-style custom cursor (injected by script.js) ---- */
body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor .button,
body.has-custom-cursor [role='button'] {
  cursor: none;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}

.cursor-dot {
  width: 7px;
  height: 7px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.cursor-ring {
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(123, 97, 255, 0.55);
  background: rgba(123, 97, 255, 0.04);
  transition: width 0.25s ease, height 0.25s ease, background 0.25s ease,
    border-color 0.25s ease, opacity 0.25s ease;
}

.cursor-ring.is-hover {
  width: 62px;
  height: 62px;
  background: rgba(123, 97, 255, 0.14);
  border-color: transparent;
}

.cursor-ring.is-down {
  width: 30px;
  height: 30px;
  background: rgba(250, 67, 75, 0.18);
}

@keyframes gradient-pan {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@media (max-width: 900px) {
  .section-theme-dark,
  .section-theme-purple,
  .section-theme-coral,
  .section-theme-gradient,
  .section-tint-soft {
    padding: 36px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-theme-purple,
  .section-theme-coral,
  .section-theme-gradient,
  .cta-panel.cta-vivid,
  .section-theme-purple::before,
  .section-theme-coral::before {
    animation: none;
  }

  .section-theme-dark::after,
  .hero-dark::after {
    transition: none;
  }
}

/* ============================================================
   DARK THEME SURFACE OVERRIDES
   Re-skins the hardcoded light surfaces (white cards, light
   gradients, purple-on-white borders) to the dark brand palette.
   Appended last so these win over the base rules above.
   ============================================================ */

/* ---- Header, nav, dropdowns ---- */
.topbar {
  background: rgba(18, 18, 22, 0.82);
  border-color: rgba(255, 255, 255, 0.09);
}

.nav-toggle {
  background: #1a1a1d;
  border-color: rgba(255, 255, 255, 0.12);
}

.nav-link.is-active,
.nav-link-button.is-active,
.lang-option.is-active {
  background: linear-gradient(90deg, rgba(250, 67, 75, 0.22), rgba(123, 97, 255, 0.28));
  color: #fff;
}

.mega-panel,
.lang-menu {
  background: rgba(20, 20, 24, 0.98);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.6);
}

.mega-col {
  background: linear-gradient(180deg, #1d1d21, #161619);
  border-color: rgba(255, 255, 255, 0.08);
}

.mega-highlight {
  background: linear-gradient(160deg, rgba(250, 67, 75, 0.16), rgba(123, 97, 255, 0.2));
  border-color: rgba(123, 97, 255, 0.3);
}

.lang-current {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.lang-current:hover {
  background: rgba(123, 97, 255, 0.18);
}

/* ---- Generic cards & panels ---- */
.hero-visual,
.pillar-card,
.service-card,
.case-card,
.review-card,
.detail-card,
.package-card,
.about-card,
.about-stats,
.pricing-card,
.pricing-row,
.industry-card,
.faq-item,
.team-card,
.founder-card,
.detail-hero-card,
.detail-showcase,
.result-card,
.career-card,
.course-card,
.course-sidebar-card {
  background: var(--surface);
  border-color: var(--line);
}

/* ---- Buttons ---- */
.button-secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text);
}

.button-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

/* ---- Chips, badges, benefit strip ---- */
.hero-badge,
.rating-strip,
.benefit-chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(123, 97, 255, 0.4);
  color: var(--text);
}

.check-icon {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text);
}

.service-chip,
.pill,
.tag,
.stat-pill {
  background: rgba(123, 97, 255, 0.16);
  border-color: rgba(123, 97, 255, 0.34);
  color: var(--text);
}

/* ---- Marquee ---- */
.marquee-section {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.service-marquee-item {
  background: linear-gradient(180deg, #1d1d21, #161619);
  border-color: rgba(123, 97, 255, 0.3);
}

/* ---- Soft / tinted section bands ---- */
.section-soft,
.section-tint-soft {
  background: linear-gradient(180deg, #161619, #121215);
  border-color: rgba(255, 255, 255, 0.08);
}

.section-theme-purple {
  background: linear-gradient(135deg, #1b1930 0%, #16142a 45%, #1a1730 100%);
  border-color: rgba(123, 97, 255, 0.25);
}

.section-theme-coral {
  background: linear-gradient(135deg, #2a1620 0%, #241420 45%, #2a1622 100%);
  border-color: rgba(250, 67, 75, 0.25);
}

/* ---- Signal window (hero visual) ---- */
.signal-metric,
.signal-grid div {
  background: linear-gradient(145deg, rgba(250, 67, 75, 0.12), rgba(123, 97, 255, 0.14), #16161a);
  border-color: rgba(255, 255, 255, 0.08);
}

.signal-dot {
  background: rgba(255, 255, 255, 0.22);
}

/* ---- Showcase / sliders ---- */
.showcase-card {
  background: #1a1a1d;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.35);
}

.showcase-tab {
  background: #141416;
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-faint);
}

.showcase-tab.is-active {
  background: #1a1a1d;
  color: var(--text);
}

.slider-arrow {
  background: #1a1a1d;
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text);
}

.slider-dot {
  border-color: rgba(255, 255, 255, 0.24);
}

.metric-box {
  background: linear-gradient(180deg, #1d1d21, #161619);
  border-color: rgba(123, 97, 255, 0.32);
}

/* ---- Image / media stages (hold screenshots) ---- */
.showcase-visual,
.showcase-visual-single,
.detail-gallery-stage,
.detail-side-visual,
.case-media,
.case-media-stage,
.case-media-stage img,
.case-media-stage video,
.founder-photo-wrap,
.team-photo-wrap {
  background: linear-gradient(160deg, #1a1730, #201622);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ---- Review speech-bubble tail ---- */
.review-card::after {
  background: var(--surface);
  border-color: var(--line);
}

/* ---- Pricing / packages / courses tiles ---- */
.result-card,
.pricing-card,
.package-card.featured,
.pricing-service-card,
.pricing-line > div,
.pricing-line > article,
.case-media-card,
.course-demo-card,
.course-curriculum-item,
.course-demo-stage {
  background: linear-gradient(180deg, #1d1d21, #161619);
  border-color: rgba(255, 255, 255, 0.08);
}

.course-bar-track {
  background: rgba(123, 97, 255, 0.16);
}

/* ---- Currency switcher ---- */
.currency-switcher {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.currency-option {
  background: #1a1a1d;
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--text);
}

.currency-option.is-active {
  background: linear-gradient(90deg, rgba(250, 67, 75, 0.22), rgba(123, 97, 255, 0.28));
}

/* ---- CTA panel (non-vivid fallback; .cta-vivid keeps its gradient) ---- */
.cta-panel {
  background: linear-gradient(135deg, rgba(123, 97, 255, 0.14), rgba(250, 67, 75, 0.12), #16161a);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ---- Footer ---- */
.footer-shell {
  background:
    linear-gradient(90deg, rgba(250, 67, 75, 0.1), rgba(123, 97, 255, 0.14)),
    #101012;
  color: var(--text);
}

.footer h3,
.footer h4,
.footer-links a,
.footer-bottom {
  color: var(--text);
}

.footer-links a:hover {
  color: var(--secondary);
}

.footer-newsletter input {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-newsletter input::placeholder {
  color: var(--text-faint);
}

.footer-social {
  border-color: rgba(255, 255, 255, 0.16);
}