/* ==========================================================================
   MCUBE DIGITAL MEDIA — PREMIUM ANIMATED SITE
   Design tokens
   ========================================================================== */
:root {
  --bg: #06040c;
  --bg-alt: #0b0815;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(18, 12, 34, 0.7);
  --border: rgba(255, 255, 255, 0.09);
  --border-hover: rgba(217, 70, 239, 0.45);

  --violet: #7c3aed;
  --violet-deep: #4c1d95;
  --fuchsia: #d946ef;
  --magenta: #c026d3;

  /* Brand dark-purple anchor tones — theme-independent, used for every
     "dark banner" section (Features, Benefits, Final CTA) so they all read
     as one consistent identity, and as the light theme's ink color. */
  --dark-purple: #11001C;
  --dark-purple-deep: #1A0129;

  --text: #f5f3fb;
  --text-dim: rgba(245, 243, 251, 0.62);
  --text-dimmer: rgba(245, 243, 251, 0.4);

  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1200px;
}

/* Light theme — brand palette locked to exactly two accent colors
   (#2A0134 deep / #5A189A vivid). Every component already reads the
   shared --violet/--fuchsia/--magenta custom properties, so overriding
   them here re-themes buttons, icons, links, borders, and gradients
   consistently without touching any component CSS or the dark theme
   (which keeps its own separate, untouched values at :root above). */
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-alt: #f7f5fb;
  --surface: rgba(42, 1, 52, 0.035);
  --surface-strong: rgba(255, 255, 255, 0.75);
  --border: rgba(42, 1, 52, 0.1);
  --border-hover: rgba(90, 24, 154, 0.45);

  --violet: #200028;
  --violet-deep: #200028;
  --fuchsia: #5A189A;
  --magenta: #5A189A;

  --text: #2A0134;
  --text-dim: rgba(42, 1, 52, 0.66);
  --text-dimmer: rgba(42, 1, 52, 0.56);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}
body.pre-loading { overflow: hidden; height: 100vh; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 92px 0; position: relative; }
.grad-text {
  background: linear-gradient(92deg, #a78bfa 0%, #d946ef 55%, #f472b6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: normal;
}
:root[data-theme="light"] .grad-text {
  background: linear-gradient(92deg, #2A0134 0%, #5A189A 100%);
  -webkit-background-clip: text; background-clip: text;
}
.type-cursor {
  display: inline-block; width: 3px; height: .85em; margin-left: 3px; vertical-align: -0.1em;
  background: var(--fuchsia); animation: typeCursorBlink 1s step-end infinite;
}
@keyframes typeCursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* The CTA/footer band stays a fixed dark purple regardless of site theme, so
   its grad-text must always use the bright (dark-theme) gradient — the
   light-theme override above is tuned for light backgrounds and would
   otherwise render near-invisible dark-on-dark text here. */
:root[data-theme="light"] .cta-dark .grad-text {
  background: linear-gradient(92deg, #a78bfa 0%, #d946ef 55%, #f472b6 100%);
  -webkit-background-clip: text; background-clip: text;
}
::selection { background: var(--magenta); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--violet), var(--magenta)); border-radius: 999px; }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
#preloader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
#preloader.pre-exit { animation: preExit .8s var(--ease) forwards; }
@keyframes preExit { to { transform: translateY(-100%); opacity: 0.4; } }
.pre-inner { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.pre-ring { position: absolute; inset: 0; width: 120px; height: 120px; transform: rotate(-90deg); }
.pre-ring-track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 3; }
.pre-ring-fill {
  fill: none; stroke: var(--fuchsia); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 327;
}
.pre-logo { width: 52px; height: 52px; border-radius: 12px; object-fit: contain; animation: preLogoPulse 1.6s ease-in-out infinite; }
@keyframes preLogoPulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }

/* ==========================================================================
   CUSTOM CURSOR
   ========================================================================== */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998;
  border-radius: 50%; transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .3s;
}
.cursor-dot { width: 6px; height: 6px; background: var(--fuchsia); }
.cursor-ring { width: 34px; height: 34px; border: 1.5px solid rgba(217,70,239,.5); transition: opacity .3s, width .25s, height .25s, background .25s; }
.cursor-ring.hover { width: 56px; height: 56px; background: rgba(217,70,239,.1); }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ==========================================================================
   SCROLL PROGRESS BAR
   ========================================================================== */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--violet), var(--fuchsia));
  box-shadow: 0 0 8px 1px rgba(217,70,239,.55);
  z-index: 1100; /* above the fixed header */
  transition: width .08s linear;
  pointer-events: none;
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
  position: fixed; top: 0; inset-inline: 0; z-index: 1000;
  padding: 20px 0; transition: padding .4s var(--ease), background .4s;
}
.site-header.scrolled { padding: 12px 0; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 16px; border-radius: 20px;
  transition: background .4s var(--ease), border-color .4s, box-shadow .4s;
  border: 1px solid transparent;
}
.site-header.scrolled .header-inner {
  background: var(--surface-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-color: var(--border); box-shadow: 0 12px 40px -12px rgba(124,58,237,.4);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { height: 36px; width: 36px; border-radius: 9px; object-fit: contain; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: .01em; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.nav-link { position: relative; padding: 8px 16px; font-size: .875rem; font-weight: 500; color: var(--text-dim); border-radius: 999px; transition: color .2s; }
.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--text); }
.nav-link.active::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 3px; height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--fuchsia)); border-radius: 2px;
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 999px; font-size: .875rem; font-weight: 600; border: none; position: relative; overflow: hidden; white-space: nowrap; transition: transform .3s var(--ease); }
.btn-grad { background: linear-gradient(92deg, var(--violet), var(--magenta)); color: #fff; box-shadow: 0 8px 30px -8px rgba(192,38,211,.55); }
.btn-grad:hover { box-shadow: 0 14px 40px -6px rgba(192,38,211,.8); }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-outline { background: transparent; color: var(--text); border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--border-hover); color: var(--fuchsia); }
.btn-white { background: #fff; color: var(--violet-deep); }
.btn-whatsapp { background: #25D366; color: #fff; }
.btn:active { transform: scale(.96); }
.arrow { display: inline-block; transition: transform .25s; }
.btn:hover .arrow { transform: translateX(4px); }

.header-actions { position: relative; display: flex; align-items: center; gap: 10px; }
.nav-cta { display: none; }
@media (min-width: 1024px) { .nav-cta { display: inline-flex; } }

/* ==========================================================================
   VOICE NAVIGATION MIC BUTTON
   ========================================================================== */
.mic-btn {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  flex-shrink: 0; transition: transform .25s, border-color .25s, background .35s, color .35s;
}
.mic-btn:hover { transform: scale(1.07); border-color: rgba(217,70,239,.55); }
.mic-glow {
  position: absolute; inset: -5px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--fuchsia));
  opacity: .2; filter: blur(8px); z-index: -1; animation: micIdlePulse 3.4s ease-in-out infinite;
}
@keyframes micIdlePulse { 0%,100% { opacity: .15; } 50% { opacity: .35; } }
.mic-btn-active { border-color: var(--fuchsia); background: rgba(217,70,239,.16); color: #f472b6; }
.mic-btn-active .mic-glow { opacity: .6; animation: micActivePulse 1.1s ease-in-out infinite; }
@keyframes micActivePulse { 0%,100% { opacity: .45; transform: scale(1); } 50% { opacity: .9; transform: scale(1.22); } }
.mic-bars { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 2px; height: 10px; }
.mic-bars i { display: block; width: 2px; height: 4px; background: #f472b6; border-radius: 1px; animation: micBar .8s ease-in-out infinite; }
.mic-bars i:nth-child(2) { animation-delay: .15s; }
.mic-bars i:nth-child(3) { animation-delay: .3s; }
@keyframes micBar { 0%,100% { height: 4px; } 50% { height: 10px; } }

.mic-toast {
  position: absolute; top: calc(100% + 12px); right: 16px; min-width: 230px; max-width: 280px;
  background: var(--surface-strong); backdrop-filter: blur(20px); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 16px; font-size: .78rem; z-index: 1001;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.4); animation: toastIn .25s var(--ease);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mic-toast-heard { display: block; color: var(--text-dim); font-style: italic; }
.mic-toast-action { display: block; margin-top: 5px; font-weight: 700; color: #f472b6; }
.mic-toast-miss { color: #fb7185; }

/* ==========================================================================
   FLOATING THEME TOGGLE (bottom-left)
   ========================================================================== */
.theme-fab {
  position: fixed; left: 24px; bottom: 24px; z-index: 900;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-strong); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; box-shadow: 0 10px 30px -10px rgba(124,58,237,.55);
  transition: transform .3s var(--ease), box-shadow .3s, background .35s, border-color .35s, color .35s;
}
.theme-fab:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 16px 40px -8px rgba(192,38,211,.7); }
.theme-fab-glow {
  position: absolute; inset: -6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--fuchsia));
  opacity: .3; filter: blur(10px); z-index: -1; animation: themeFabPulse 3s ease-in-out infinite;
}
@keyframes themeFabPulse { 0%,100% { opacity: .22; transform: scale(1); } 50% { opacity: .45; transform: scale(1.08); } }
@media (max-width: 640px) { .theme-fab { left: 16px; bottom: 16px; width: 46px; height: 46px; } }

.menu-toggle {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 42px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
}
.menu-toggle span { width: 18px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s, background .35s; }
.menu-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .main-nav {
    position: fixed; top: 78px; left: 16px; right: 16px;
    background: var(--surface-strong); backdrop-filter: blur(24px);
    border: 1px solid var(--border); border-radius: 20px;
    flex-direction: column; align-items: stretch; padding: 10px;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .main-nav.active { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-link { padding: 14px 16px; text-align: left; }
  .menu-toggle { display: flex; }
}
@media (min-width: 901px) { .menu-toggle { display: none; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 110px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-blob { position: absolute; top: -10%; right: -15%; width: 70%; height: 130%; opacity: .55; filter: blur(10px); transition: opacity .35s ease; }
:root[data-theme="light"] .hero-blob { opacity: .16; filter: blur(24px); }
:root[data-theme="light"] .blob-stop-1 { stop-color: #5A189A; }
:root[data-theme="light"] .blob-stop-2 { stop-color: #5A189A; }
:root[data-theme="light"] .blob-stop-3 { stop-color: #2A0134; }
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 70% 60% at 20% 30%, #000 30%, transparent 100%);
}
.hero-watermark {
  position: absolute; right: -3%; top: 2%; font-size: 26vw; font-weight: 900; line-height: 1;
  color: rgba(255,255,255,.025); font-family: var(--font-display); letter-spacing: -.05em; user-select: none;
}
/* White-on-white is invisible in light theme — use dark ink instead, still
   subtle, but enough to actually register against the white background. */
:root[data-theme="light"] .hero-watermark { color: rgba(42,1,52,.06); }
.hero-particles { position: absolute; inset: 0; pointer-events: none; }
.hero-particles span {
  position: absolute; bottom: -20px; display: block; border-radius: 50%;
  background: rgba(217,70,239,.35); animation: particleUp linear infinite;
}
@keyframes particleUp {
  0% { transform: translateY(0) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: .6; }
  100% { transform: translateY(-105vh) scale(1); opacity: 0; }
}

.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; padding-bottom: 70px; }

.badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-size: .78rem; font-weight: 600; color: var(--text-dim);
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fuchsia); box-shadow: 0 0 10px 2px rgba(217,70,239,.7); animation: dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.6); } }

.hero-title { margin-top: 22px; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.06; letter-spacing: -.03em; }
.hero-title .line { display: block; overflow: hidden; }
.hero-headline { margin-top: 6px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--text); }
.hero-sub { margin-top: 20px; max-width: 480px; color: var(--text-dim); font-size: 1rem; line-height: 1.75; }
.hero-ctas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero-trust { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 22px; }
.trust-item { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--text-dimmer); }
.trust-item svg { width: 13px; height: 13px; color: var(--fuchsia); flex-shrink: 0; }

.hero-right { display: flex; flex-direction: column; gap: 18px; }

/* Avatar cluster + play button — social proof strip above the stats grid */
.hero-social-proof { display: flex; align-items: center; }
.hero-avatars { display: flex; align-items: center; }
.hero-avatar {
  width: 44px; height: 44px; border-radius: 50%; margin-left: -14px; overflow: hidden;
  border: 3px solid var(--bg); display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0; transition: transform .25s var(--ease), z-index 0s;
}
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-avatar:first-child { margin-left: 0; }
.hero-avatar:nth-child(1) { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.hero-avatar:nth-child(2) { background: linear-gradient(135deg, #c026d3, #f0abfc); }
.hero-avatar:nth-child(3) { background: linear-gradient(135deg, #4c1d95, #7c3aed); }
.hero-avatar:nth-child(4) { background: linear-gradient(135deg, #d946ef, #f472b6); }
.hero-avatar:nth-child(5) { background: linear-gradient(135deg, #9333ea, #e879f9); }
.hero-avatar:nth-child(6) { background: linear-gradient(135deg, #6d28d9, #c026d3); }
.hero-avatar svg { width: 18px; height: 18px; }
.hero-avatar:hover { transform: translateY(-4px); z-index: 2; }
.hero-play-btn {
  width: 52px; height: 52px; border-radius: 50%; margin-left: -14px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--violet), var(--fuchsia)); border: 3px solid var(--bg);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 10px 26px -8px rgba(124,58,237,.6); transition: transform .3s var(--ease);
  position: relative;
}
.hero-play-btn::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--fuchsia);
  opacity: .5; animation: playPulse 2.4s ease-out infinite;
}
.hero-play-btn:hover { transform: scale(1.08); }
.hero-play-btn svg { width: 16px; height: 16px; fill: #fff; margin-left: 2px; }
@keyframes playPulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.35); opacity: 0; } }
.hero-social-caption { margin-left: 14px; font-size: .78rem; color: var(--text-dimmer); font-weight: 600; line-height: 1.3; }

.hero-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px 22px;
  backdrop-filter: blur(14px); transition: border-color .3s, transform .3s;
}
.stat-card:hover { border-color: var(--border-hover); transform: translateY(-3px); }
.float-1 { animation: floaty 6s ease-in-out infinite; }
.float-2 { animation: floaty 6s ease-in-out infinite .4s; }
.float-3 { animation: floaty 6s ease-in-out infinite .8s; }
.float-4 { animation: floaty 6s ease-in-out infinite 1.2s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.stat-num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; background: linear-gradient(92deg, #a78bfa, #d946ef); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .stat-num { background: linear-gradient(92deg, #2A0134, #5A189A); -webkit-background-clip: text; background-clip: text; }
.stat-label { margin-top: 2px; font-size: .78rem; color: var(--text-dimmer); }
.hero-desc { font-size: .85rem; color: var(--text-dimmer); line-height: 1.6; padding: 0 4px; }

.hero-chart { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px 20px 14px; backdrop-filter: blur(14px); }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-line { stroke-dasharray: 600; stroke-dashoffset: 600; }
.chart-area { opacity: 0; transition: opacity 1s ease .9s; }
.chart-area.drawn { opacity: 1; }
.chart-point {
  fill: #fff; stroke: var(--fuchsia); stroke-width: 2; opacity: 0; cursor: pointer;
  transition: opacity .3s, r .18s var(--ease), stroke-width .18s;
}
.chart-point.drawn { opacity: 1; }
.chart-point:hover, .chart-point:focus-visible { r: 7; stroke-width: 3; outline: none; }
.chart-point-last.drawn { filter: drop-shadow(0 0 8px #d946ef); animation: dotBeat 1.8s ease-in-out infinite 1.1s; }
@keyframes dotBeat { 0%,100% { r: 5; } 50% { r: 6.5; } }
.chart-label { display: block; margin-top: 6px; font-size: .72rem; color: var(--text-dimmer); text-align: right; }

.chart-tooltip {
  position: absolute; z-index: 20; min-width: 130px; transform: translate(-50%, -100%);
  background: var(--surface-strong); backdrop-filter: blur(20px); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 14px; font-size: .78rem; pointer-events: none;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.5);
  transition: opacity .15s, transform .15s;
}
.chart-tooltip[hidden] { display: none; }
.chart-tooltip .ct-year { display: block; font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: .88rem; }
.chart-tooltip .ct-clients { display: block; color: var(--text-dim); margin-top: 2px; }
.chart-tooltip .ct-growth { display: inline-block; margin-top: 4px; font-weight: 700; color: #4ade80; }

.brands-strip { position: relative; z-index: 1; padding: 52px 0 56px; border-top: 1px solid var(--border); }
.brands-label { text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 32px; }
.brands-track-wrap { position: relative; overflow: hidden; }
.brands-track-wrap::before, .brands-track-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none; }
.brands-track-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.brands-track-wrap::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.brands-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: marquee 32s linear infinite; }
.brands-track:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Each logo sits on its own card — logo artwork is designed assuming a
   specific background, so a raw/transparent PNG against the page's own
   background (which flips dark/light with the theme) reads great in one
   theme and unreadable in the other. A consistent card behind every logo
   fixes that; the color is per-brand (default white), set in the admin
   Brands manager, so a light/reversed logo can get a dark card instead. */
.brand-chip {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  height: 84px; min-width: 168px; padding: 0 30px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.3);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.brand-chip:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -8px rgba(124,58,237,.4); }
.brand-chip-logo {
  height: 52px; max-height: 52px; width: auto; max-width: 148px; object-fit: contain;
  transition: transform .3s var(--ease);
}
.brand-chip:hover .brand-chip-logo { transform: scale(1.06); }
.brand-chip-text {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--dark-purple);
  white-space: nowrap;
}

/* ==========================================================================
   SECTION DIVIDERS
   ========================================================================== */
.divider { line-height: 0; margin-top: -1px; }
.divider svg { width: 100%; height: 70px; display: block; }
.divider path { fill: var(--bg-alt); }
.divider-flip { transform: scaleY(-1); }

/* ==========================================================================
   SHARED SECTION HEADERS
   ========================================================================== */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--fuchsia); margin-bottom: 16px;
}
.eyebrow::before { content: ''; width: 20px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow-light { color: rgba(255,255,255,.85); }
.sec-header { text-align: center; max-width: 680px; margin: 0 auto 64px; }
.sec-title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.15; }

/* "Your Simple 4-Step Guide to Success" — kept on one line at every width by
   shrinking with the viewport instead of wrapping. */
.how-title { white-space: nowrap; font-size: clamp(1.1rem, 4.4vw, 2.8rem); }
@media (min-width: 900px) { .how-title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); } }
.sec-sub { margin-top: 16px; color: var(--text-dim); font-size: 1rem; line-height: 1.7; }

/* ==========================================================================
   BREADCRUMB + BLOG POST (dedicated pages)
   ========================================================================== */
.blog-post-section { max-width: 800px; margin: 0 auto 32px; text-align: left; }
.blog-post-section h2 { font-size: 1.4rem; margin-bottom: 14px; }
.blog-post-section p { color: var(--text-dim); line-height: 1.85; margin-bottom: 14px; font-size: 1rem; }
.blog-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 18px 0 28px; font-size: .84rem; color: var(--text-dim); }
.blog-post-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-tag { padding: 4px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: .74rem; color: var(--fuchsia); font-weight: 600; }
.blog-post-featured-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 20px; margin-bottom: 36px; }
.service-detail .sec-header { margin-bottom: 48px; }

/* ==========================================================================
   REVEAL ANIMATION BASE (GSAP toggles .in)
   ========================================================================== */
.reveal-up { opacity: 0; transform: translateY(32px); }
.reveal-up.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-zoom { opacity: 0; transform: scale(.86); }
.reveal-zoom.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about { position: relative; overflow: hidden; background: var(--bg-alt); }
.about::before {
  content: ''; position: absolute; top: -20%; right: -10%; width: 50%; height: 70%;
  background: radial-gradient(ellipse, rgba(124,58,237,.16), transparent 65%); pointer-events: none;
}
.about-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.about-left p { color: var(--text-dim); margin-top: 16px; line-height: 1.8; max-width: 460px; }
.secret-box { margin-top: 28px; padding: 22px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.secret-box h4 { font-size: 1rem; margin-bottom: 8px; }
.secret-box p { color: var(--text-dim); font-size: .88rem; line-height: 1.65; }

.about-right { display: flex; flex-direction: column; gap: 18px; }
.feat-row {
  position: relative; display: flex; align-items: flex-start; gap: 18px;
  padding: 20px 22px; border-radius: 18px; background: var(--surface);
  transition: transform .3s var(--ease), background .3s;
  overflow: hidden;
}
.feat-row:hover { transform: translateX(6px); background: var(--surface-strong); }
/* Animated gradient border — a masked pseudo-element whose background
   position slides continuously, so each card reads as a distinct,
   "compact" unit rather than a plain unbordered row. */
.feat-row::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(120deg, var(--violet), var(--fuchsia), var(--magenta), var(--violet));
  background-size: 250% 250%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .6; animation: featBorderFlow 6s linear infinite; pointer-events: none;
}
@keyframes featBorderFlow { 0% { background-position: 0% 50%; } 100% { background-position: 250% 50%; } }
.feat-icon {
  width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--violet), var(--magenta));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -8px rgba(192,38,211,.5); transition: transform .35s var(--ease);
}
.feat-icon svg { width: 24px; height: 24px; flex-shrink: 0; }
.feat-row:hover .feat-icon { transform: scale(1.1) rotate(-6deg); }
.feat-row h4 { font-size: 1.35rem; font-family: var(--font-display); }
.feat-row h4 span { display: block; font-weight: 400; color: var(--text-dimmer); font-size: .8rem; margin-top: 2px; }
.feat-row p { margin-top: 8px; color: var(--text-dim); font-size: .88rem; line-height: 1.65; }

/* ==========================================================================
   STATS BAR
   ========================================================================== */
.stats-bar { position: relative; padding: 60px 0; overflow: hidden; background: linear-gradient(120deg, var(--violet-deep), #2d0a4e); }
.stats-bar-bg {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px; animation: gridMove 22s linear infinite;
}
@keyframes gridMove { to { background-position: 46px 46px; } }
.stats-bar-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat-item { position: relative; }
.stat-item:not(:last-child)::after { content: ''; position: absolute; top: 50%; right: -10px; width: 1px; height: 40px; transform: translateY(-50%); background: linear-gradient(to bottom, transparent, rgba(255,255,255,.25), transparent); }
.stat-num-lg { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 700; color: #fff; }
.stat-lbl { margin-top: 6px; font-size: .74rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.65); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services { position: relative; overflow: hidden; }
.services::before {
  content: ''; position: absolute; top: -10%; left: -10%; width: 55%; height: 60%;
  background: radial-gradient(ellipse, rgba(124,58,237,.16), transparent 65%); pointer-events: none;
}
.services::after {
  content: ''; position: absolute; bottom: -15%; right: -10%; width: 50%; height: 55%;
  background: radial-gradient(ellipse, rgba(217,70,239,.13), transparent 65%); pointer-events: none;
}
.services > .container { position: relative; z-index: 1; }
.svc-decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.svc-decor::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(124,58,237,.3) 1.6px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 48% 100% at 50% 50%, transparent 0%, black 62%);
  mask-image: radial-gradient(ellipse 48% 100% at 50% 50%, transparent 0%, black 62%);
}
:root[data-theme="light"] .svc-decor::before { background-image: radial-gradient(rgba(90,24,154,.22) 1.6px, transparent 1.6px); }
.svc-decor::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(560px 640px at -6% 8%, rgba(124,58,237,.4), transparent 68%),
    radial-gradient(560px 640px at 106% 4%, rgba(217,70,239,.36), transparent 68%),
    radial-gradient(560px 720px at -8% 48%, rgba(217,70,239,.34), transparent 68%),
    radial-gradient(560px 720px at 108% 46%, rgba(124,58,237,.38), transparent 68%),
    radial-gradient(560px 640px at -6% 92%, rgba(124,58,237,.36), transparent 68%),
    radial-gradient(560px 640px at 106% 96%, rgba(217,70,239,.34), transparent 68%);
}
.svc-blob { position: absolute; border-radius: 50%; filter: blur(50px); }
.svc-blob-1 { top: 4%; left: -6%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(124,58,237,.5), transparent 70%); }
.svc-blob-2 { top: 30%; right: -8%; width: 340px; height: 340px; background: radial-gradient(circle, rgba(217,70,239,.44), transparent 70%); }
.svc-blob-3 { top: 58%; left: -8%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(217,70,239,.42), transparent 70%); }
.svc-blob-4 { bottom: 2%; right: -6%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(124,58,237,.46), transparent 70%); }
.svc-ring { position: absolute; border-radius: 50%; border: 2px solid rgba(217,70,239,.4); }
.svc-ring-1 { top: 16%; right: 5%; width: 70px; height: 70px; }
.svc-ring-2 { bottom: 20%; left: 6%; width: 52px; height: 52px; border-color: rgba(124,58,237,.42); }
.svc-square { position: absolute; width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, var(--violet), var(--fuchsia)); opacity: .5; transform: rotate(20deg); box-shadow: 0 8px 24px -8px rgba(124,58,237,.5); }
.svc-square-1 { top: 45%; right: 9%; }
.svc-square-2 { bottom: 8%; left: 10%; }
@media (max-width: 1100px) { .svc-decor { display: none; } }

.services-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: 22px; overflow: hidden; transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.svc-card:hover { transform: translateY(-8px); border-color: var(--border-hover); box-shadow: 0 30px 70px -20px rgba(124,58,237,.45); }
.svc-top { display: flex; align-items: flex-start; justify-content: space-between; }
.svc-icon {
  width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--violet), var(--magenta)); box-shadow: 0 10px 28px -8px rgba(192,38,211,.55);
  transition: transform .4s var(--ease);
}
.svc-icon svg { width: 21px; height: 21px; flex-shrink: 0; }
.svc-icon-dark { background: linear-gradient(135deg, #241543, #4c1d95); }
.svc-card:hover .svc-icon { transform: scale(1.1) rotate(-8deg); }
.svc-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: rgba(255,255,255,.08); }
.svc-card h3 { margin-top: 14px; font-size: 1.08rem; }
.svc-card > p {
  margin-top: 8px; color: var(--text-dim); font-size: .87rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.svc-more { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s var(--ease), opacity .35s, margin-top .45s var(--ease); }
.svc-card:hover .svc-more { max-height: 140px; opacity: 1; margin-top: 14px; }
.svc-more li { position: relative; padding-left: 18px; font-size: .84rem; color: var(--text-dim); margin-top: 8px; }
.svc-more li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--fuchsia); }
.svc-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: .86rem; font-weight: 700; color: var(--fuchsia); }
.svc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--fuchsia), var(--violet));
  background-size: 200% auto; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.svc-card:hover::before { transform: scaleX(1); animation: barFlow 2.4s linear infinite; }
@keyframes barFlow { to { background-position: 200% 0; } }

/* ==========================================================================
   SERVICES HUB — homepage bento showcase (deliberately distinct from the
   uniform card grid used on /services and the related-services block on
   individual service pages, per client request for 3 visually different
   treatments of "services" across the site)
   ========================================================================== */
.services-hub { position: relative; overflow: hidden; }
.hub-bg {
  position: absolute; inset: -10%; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(120deg, transparent 48%, rgba(217,70,239,.06) 49%, rgba(217,70,239,.06) 51%, transparent 52%),
    linear-gradient(rgba(124,58,237,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,.05) 1px, transparent 1px);
  background-size: 120px 120px, 46px 46px, 46px 46px;
  animation: hubBgPan 24s linear infinite;
}
@keyframes hubBgPan { to { background-position: 240px 240px, 46px 46px, 46px 46px; } }
.hub-grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: auto auto; gap: 22px;
}
.hub-tile-0 { grid-column: 1; grid-row: 1 / 3; }
.hub-tile-1 { grid-column: 2; grid-row: 1; }
.hub-tile-2 { grid-column: 3; grid-row: 1; }
.hub-tile-3 { grid-column: 2 / 4; grid-row: 2; display: flex; flex-direction: column; }
.hub-tile {
  position: relative; display: block; overflow: hidden; border-radius: 22px; padding: 30px 28px;
  background: var(--surface-strong); border: 1px solid var(--border);
  transition: transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
.hub-tile:hover { transform: translateY(-6px); border-color: var(--border-hover); box-shadow: 0 30px 80px -24px rgba(124,58,237,.5); }
.hub-tile::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(120deg, var(--violet), var(--fuchsia), var(--magenta), var(--violet));
  background-size: 260% 260%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s; animation: featBorderFlow 7s linear infinite;
}
.hub-tile:hover::after { opacity: .8; }
.hub-tile-num {
  position: absolute; right: 18px; top: 6px; font-family: var(--font-display); font-weight: 800;
  font-size: 5.2rem; line-height: 1; color: var(--text); opacity: .05; pointer-events: none;
}
.hub-tile-icon {
  width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--violet), var(--magenta)); box-shadow: 0 10px 26px -8px rgba(192,38,211,.5);
  transition: transform .4s var(--ease);
}
.hub-tile-0 .hub-tile-icon { width: 68px; height: 68px; }
.hub-tile-icon svg { width: 24px; height: 24px; }
.hub-tile-0 .hub-tile-icon svg { width: 30px; height: 30px; }
.hub-tile:hover .hub-tile-icon { transform: scale(1.1) rotate(-6deg); }
.hub-tile h3 { margin-top: 20px; font-size: 1.3rem; position: relative; z-index: 1; }
.hub-tile-0 h3 { font-size: 1.6rem; margin-top: 26px; }
.hub-tile p {
  margin-top: 10px; color: var(--text-dim); font-size: .9rem; line-height: 1.7; position: relative; z-index: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hub-tile-3 p { -webkit-line-clamp: 2; max-width: 60ch; }
.hub-tile-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: .86rem; font-weight: 700;
  color: var(--fuchsia); position: relative; z-index: 1;
}
.hub-tile-cta .arrow { transition: transform .3s var(--ease); }
.hub-tile:hover .hub-tile-cta .arrow { transform: translateX(4px); }
@media (max-width: 900px) {
  .hub-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .hub-tile-0, .hub-tile-1, .hub-tile-2, .hub-tile-3 { grid-column: 1; grid-row: auto; }
  .hub-tile-num { font-size: 3.6rem; }
}

/* ==========================================================================
   SERVICE PANELS — the /services overview page's own layout: alternating
   full-width showcase rows, deliberately different again from both the
   homepage bento hub and the plain card grid used elsewhere.
   ========================================================================== */
.svc-panels { display: flex; flex-direction: column; gap: 22px; }
.svc-panel {
  position: relative; display: flex; align-items: center; gap: 48px; padding: 40px 44px;
  border-radius: 32px; border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  overflow: hidden; isolation: isolate;
  transition: transform .5s var(--ease), border-color .45s, box-shadow .5s var(--ease);
}
:root[data-theme="light"] .svc-panel { background: linear-gradient(160deg, rgba(255,255,255,.75), rgba(255,255,255,.4)); }
.svc-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
  background: radial-gradient(480px circle at 15% 20%, rgba(217,70,239,.16), transparent 60%);
  transition: opacity .5s var(--ease);
}
.svc-panel::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: -1;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-20deg); transition: left .9s var(--ease);
}
.svc-panel:hover { transform: translateY(-6px); border-color: var(--border-hover); box-shadow: 0 30px 70px -32px rgba(124,58,237,.5); }
.svc-panel:hover::before { opacity: 1; }
.svc-panel:hover::after { left: 130%; }
.svc-panel-reverse { flex-direction: row-reverse; }
.svc-panel-visual { position: relative; flex-shrink: 0; width: 196px; height: 196px; display: flex; align-items: center; justify-content: center; }
.svc-panel-glow {
  position: absolute; inset: 22%; border-radius: 50%; filter: blur(18px); opacity: .4;
  background: linear-gradient(135deg, #b794f6, #f4a8e0); transition: opacity .4s;
}
.svc-panel:hover .svc-panel-glow { opacity: .65; }
.svc-panel-icon {
  position: relative; width: 88px; height: 88px; border-radius: 24px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--violet), var(--magenta)); box-shadow: 0 20px 50px -14px rgba(124,58,237,.55);
  transition: transform .45s var(--ease);
}
.svc-panel:hover .svc-panel-icon { transform: scale(1.08) rotate(-4deg); }
.svc-panel-icon svg { width: 40px; height: 40px; }
.svc-panel-num {
  position: absolute; bottom: -4px; right: 6px; font-family: var(--font-display); font-weight: 800;
  font-size: 1.75rem; color: #fff; background: rgba(10,6,20,.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.3);
}
:root[data-theme="light"] .svc-panel-num { color: var(--violet-deep); background: rgba(255,255,255,.75); border-color: rgba(42,1,52,.14); }
.svc-panel-content { flex: 1; min-width: 0; position: relative; z-index: 1; }
.svc-panel-tag { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fuchsia); margin-bottom: 8px; }
.svc-panel-content h3 { font-size: 1.6rem; }
.svc-panel-content > p { margin-top: 10px; color: var(--text-dim); font-size: .96rem; line-height: 1.7; max-width: 62ch; }
.svc-panel-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 22px; }
.svc-panel-list li {
  font-size: .8rem; color: var(--text-dim); padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); transition: border-color .3s, color .3s;
}
.svc-panel:hover .svc-panel-list li { border-color: var(--border-hover); color: var(--text); }
@media (max-width: 900px) {
  .svc-panel, .svc-panel-reverse { flex-direction: column; gap: 26px; text-align: center; padding: 36px 28px; }
  .svc-panel-list { justify-content: center; }
  .svc-panel-content > p { max-width: none; }
}

/* ==========================================================================
   WHY US
   ========================================================================== */
.why-us { position: relative; overflow: hidden; }
.why-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background-color: #4B0150;
  background-image: radial-gradient(ellipse 70% 60% at 15% 15%, rgba(157,23,178,.4), transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 85%, rgba(124,58,237,.35), transparent 60%);
}
:root[data-theme="light"] .why-bg {
  background-color: #4B0150;
  background-image: radial-gradient(ellipse 70% 60% at 15% 15%, rgba(157,23,178,.45), transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 85%, rgba(124,58,237,.4), transparent 60%);
}
.why-dot { position: absolute; border-radius: 50%; background: #fff; filter: blur(1px); box-shadow: 0 0 14px 2px rgba(255,255,255,.6); }
:root[data-theme="light"] .why-dot { background: #fff; box-shadow: 0 0 14px 2px rgba(255,255,255,.85); }
.why-dot-1 { top: 10%; left: 6%; width: 8px; height: 8px; }
.why-dot-2 { top: 22%; right: 9%; width: 6px; height: 6px; }
.why-dot-3 { top: 46%; left: 4%; width: 5px; height: 5px; }
.why-dot-4 { bottom: 16%; right: 6%; width: 9px; height: 9px; }
.why-dot-5 { bottom: 8%; left: 12%; width: 6px; height: 6px; }
.why-dot-6 { top: 68%; right: 16%; width: 7px; height: 7px; }
.why-us .container {
  position: relative; z-index: 1; overflow: hidden;
  padding: 60px 52px; border-radius: 40px; border: 1px solid rgba(255,255,255,.5);
  background: #ffffff;
  box-shadow: 0 50px 120px -50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.9);
  /* Force the light-theme palette inside this box so text/cards stay readable
     on the solid white background even while the site is in dark mode. */
  --bg: #ffffff; --bg-alt: #f7f5fb;
  --surface: rgba(42, 1, 52, 0.035); --surface-strong: rgba(255, 255, 255, 0.75);
  --border: rgba(42, 1, 52, 0.1); --border-hover: rgba(90, 24, 154, 0.45);
  --violet: #2A0134; --violet-deep: #2A0134; --fuchsia: #5A189A; --magenta: #5A189A;
  --text: #2A0134; --text-dim: rgba(42, 1, 52, 0.66); --text-dimmer: rgba(42, 1, 52, 0.56);
  /* `color` is inherited as an already-resolved value, not the live variable —
     descendants like .sec-title with no color of their own would otherwise
     keep inheriting dark theme's near-white text instead of picking up the
     local override above. Setting color here explicitly re-anchors it. */
  color: var(--text);
}
.why-us .container::before {
  content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,70,239,.6), transparent);
}
.why-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.why-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 30px 24px; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.why-card:hover { transform: translateY(-6px); border-color: var(--border-hover); box-shadow: 0 24px 60px -18px rgba(192,38,211,.4); }
.why-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--fuchsia), var(--violet));
  background-size: 200% auto; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.why-card:hover::before { transform: scaleX(1); animation: barFlow 2.4s linear infinite; }
.why-icon { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, var(--violet), var(--magenta)); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: transform .4s var(--ease); }
.why-icon svg { width: 24px; height: 24px; flex-shrink: 0; }
.why-card:hover .why-icon { transform: scale(1.1) rotate(6deg); }
.why-card h4 { font-size: 1rem; }
.why-card p { margin-top: 8px; font-size: .87rem; color: var(--text-dim); line-height: 1.65; }

/* ==========================================================================
   HOW IT WORKS — TIMELINE
   ========================================================================== */
.how { position: relative; overflow: hidden; background: var(--bg-alt); }
.how::before {
  content: ''; position: absolute; top: 10%; right: -12%; width: 45%; height: 70%;
  background: radial-gradient(ellipse, rgba(192,38,211,.14), transparent 65%); pointer-events: none;
}
.timeline { position: relative; z-index: 1; margin-top: 20px; }
.timeline-line { position: absolute; top: 27px; left: 6%; right: 6%; width: 88%; height: 4px; z-index: 0; }
.timeline-track { stroke: rgba(255,255,255,.08); stroke-width: 2; }
.timeline-draw { stroke: var(--fuchsia); stroke-width: 2; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.timeline-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { text-align: center; padding: 0 8px; }
.step-circle {
  width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--bg-alt); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--fuchsia); transition: border-color .35s, transform .35s var(--ease), box-shadow .35s;
}
.step-circle svg { width: 22px; height: 22px; flex-shrink: 0; }
.step:hover .step-circle { border-color: var(--fuchsia); transform: scale(1.08); box-shadow: 0 0 0 8px rgba(217,70,239,.08); }
:root[data-theme="light"] .timeline-steps .step:nth-child(1) .step-circle { color: #dc2626; border-color: rgba(220,38,38,.35); }
:root[data-theme="light"] .timeline-steps .step:nth-child(1):hover .step-circle { border-color: #dc2626; box-shadow: 0 0 0 8px rgba(220,38,38,.1); }
:root[data-theme="light"] .timeline-steps .step:nth-child(2) .step-circle { color: #16a34a; border-color: rgba(22,163,74,.35); }
:root[data-theme="light"] .timeline-steps .step:nth-child(2):hover .step-circle { border-color: #16a34a; box-shadow: 0 0 0 8px rgba(22,163,74,.1); }
:root[data-theme="light"] .timeline-steps .step:nth-child(3) .step-circle { color: #2563eb; border-color: rgba(37,99,235,.35); }
:root[data-theme="light"] .timeline-steps .step:nth-child(3):hover .step-circle { border-color: #2563eb; box-shadow: 0 0 0 8px rgba(37,99,235,.1); }
:root[data-theme="light"] .timeline-steps .step:nth-child(4) .step-circle { color: #d97706; border-color: rgba(217,119,6,.35); }
:root[data-theme="light"] .timeline-steps .step:nth-child(4):hover .step-circle { border-color: #d97706; box-shadow: 0 0 0 8px rgba(217,119,6,.1); }
.step-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dimmer); }
.step h3 { margin-top: 8px; font-size: 1.05rem; }
.step p { margin-top: 8px; font-size: .86rem; color: var(--text-dim); line-height: 1.65; }

/* ==========================================================================
   FOUNDER
   ========================================================================== */
.founder { position: relative; overflow: hidden; background: var(--bg-alt); }
.founder::before {
  content: ''; position: absolute; bottom: -25%; left: -10%; width: 55%; height: 75%;
  background: radial-gradient(ellipse, rgba(217,70,239,.14), transparent 65%); pointer-events: none;
}
.founder-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.founder-quote { margin-top: 20px; font-size: 1.05rem; font-style: italic; color: var(--text-dim); line-height: 1.85; }
.founder-sign { margin-top: 22px; font-weight: 700; font-size: .95rem; }
.founder-card {
  position: relative; padding: 40px 30px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px; animation: cardFloat 5s ease-in-out infinite;
}
@keyframes cardFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.big-quote { font-size: 4rem; line-height: 1; font-family: Georgia, serif; color: rgba(217,70,239,.35); margin-bottom: 6px; }
.founder-chip { padding: 13px 16px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border); font-size: .85rem; font-weight: 600; transition: all .3s var(--ease); }
.founder-chip:hover { transform: translateX(6px); background: linear-gradient(92deg, #7c3aed, #c026d3); border-color: transparent; color: #fff; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testi { position: relative; overflow: hidden; }
.testi::before {
  content: ''; position: absolute; top: -20%; left: 30%; width: 50%; height: 70%;
  background: radial-gradient(ellipse, rgba(124,58,237,.15), transparent 65%); pointer-events: none;
}
.testi-scroll { overflow: hidden; margin-top: 10px; }
.testi-track { display: flex; gap: 20px; width: max-content; animation: testiScroll 38s linear infinite; }
.testi-scroll:hover .testi-track { animation-play-state: paused; }
@keyframes testiScroll { to { transform: translateX(-50%); } }
.t-card { width: 340px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px; transition: transform .3s, border-color .3s; }
.t-card:hover { transform: translateY(-5px); border-color: var(--border-hover); }
.t-qt { display: block; font-size: 3rem; line-height: 1; font-family: Georgia, serif; color: rgba(217,70,239,.3); margin-bottom: 8px; }
.t-card p { font-size: .88rem; color: var(--text-dim); line-height: 1.7; font-style: italic; }
.t-stars { margin-top: 16px; color: #f0b100; letter-spacing: 2px; font-size: .82rem; }
.t-name { margin-top: 8px; font-weight: 700; font-size: .9rem; }
.t-role { font-size: .78rem; color: var(--text-dimmer); }

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog { position: relative; overflow: hidden; background: var(--bg-alt); }
.blog::before {
  content: ''; position: absolute; bottom: -10%; left: -10%; width: 50%; height: 60%;
  background: radial-gradient(ellipse, rgba(217,70,239,.13), transparent 65%); pointer-events: none;
}
.blog-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.blog .sec-header, .blog .blog-view-all { position: relative; z-index: 1; }
.blog-card { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; transition: transform .4s var(--ease), border-color .4s; display: block; }
.blog-card:hover { transform: translateY(-6px); border-color: var(--border-hover); }
.blog-img { height: 190px; background-size: cover; background-position: center; transition: transform .5s var(--ease); }
.blog-card:hover .blog-img { transform: scale(1.05); }
.blog-img-a { background: linear-gradient(135deg, #2c1250, #7c3aed 60%, #d946ef); }
.blog-img-b { background: linear-gradient(135deg, #1c0b38, #c026d3 60%, #f472b6); }
:root[data-theme="light"] .blog-img-a,
:root[data-theme="light"] .blog-img-b { background: linear-gradient(135deg, #2A0134, #5A189A); }
.blog-body { padding: 24px; }
.blog-meta { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fuchsia); }
.blog-body h3 { margin-top: 10px; font-size: 1.1rem; line-height: 1.4; }
.blog-body p { margin-top: 10px; font-size: .87rem; color: var(--text-dim); line-height: 1.65; }
.blog-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .85rem; font-weight: 700; color: var(--fuchsia); }
.blog-view-all { text-align: center; margin-top: 44px; }

/* Homepage "Latest from Our Blog" teaser — a compact, auto-scrolling
   marquee (same infinite-track technique as .testi-track) instead of the
   old full-height grid, so it reads as a quick preview rather than a second
   full archive. The full grid (.blog-grid/.blog-card) is untouched and
   still powers the dedicated /Blog listing page. */
.blog-slider-scroll { overflow: hidden; margin-top: 10px; }
.blog-slider-track { display: flex; gap: 20px; width: max-content; animation: blogSliderScroll 46s linear infinite; }
.blog-slider-scroll:hover .blog-slider-track { animation-play-state: paused; }
@keyframes blogSliderScroll { to { transform: translateX(-50%); } }
.blog-slide-card {
  display: block; width: 280px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden; transition: transform .35s var(--ease), border-color .35s;
}
.blog-slide-card:hover { transform: translateY(-6px); border-color: var(--border-hover); }
.blog-slide-img { position: relative; height: 130px; background-size: cover; background-position: center; transition: transform .5s var(--ease); }
.blog-slide-card:hover .blog-slide-img { transform: scale(1.06); }
.blog-slide-featured {
  position: absolute; top: 10px; left: 10px; padding: 4px 11px; border-radius: 999px;
  background: linear-gradient(92deg, var(--violet), var(--magenta)); color: #fff;
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.blog-slide-body { padding: 16px 18px; }
.blog-slide-body .blog-meta { font-size: .68rem; }
.blog-slide-body h3 {
  margin-top: 6px; font-size: .94rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 640px) { .blog-slide-card { width: 240px; } }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { position: relative; overflow: hidden; }
.contact-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 80% 20%, rgba(124,58,237,.16), transparent 60%); }
.contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; }
.contact-info { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 26px; height: fit-content; }
.info-row { display: flex; align-items: flex-start; gap: 16px; }
.info-ico { font-size: 1.3rem; }
.info-row h4 { font-size: .9rem; margin-bottom: 4px; }
.info-row p, .info-row a { font-size: .87rem; color: var(--text-dim); }
.info-row a:hover { color: var(--fuchsia); }
.contact-quick-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.contact-quick-actions .btn { width: 100%; }

.contact-form { background: var(--surface-strong); border: 1px solid var(--border); border-radius: 24px; padding: 36px; backdrop-filter: blur(20px); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.field { position: relative; margin-bottom: 18px; }
.form-row .field { margin-bottom: 0; }
.field input, .field select, .field textarea {
  width: 100%; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 12px;
  padding: 24px 16px 10px; font-size: .92rem; color: var(--text); outline: none; font-family: inherit;
  transition: border-color .25s, background .25s;
}
.field textarea { resize: vertical; min-height: 116px; padding-top: 26px; }
.field select { appearance: none; cursor: pointer; }
/* The dropdown *popup* is a native OS control — most of the parent
   select's CSS doesn't reach it, but background/color set directly on
   each <option> does. Without this, Chrome/Edge renders a plain white
   popup with our light theme text still applied, which is unreadable. */
.field select option { background-color: #14101f; color: #f5f3fb; }
:root[data-theme="light"] .field select option { background-color: #ffffff; color: #2A0134; }
.field-select::after {
  content: '▾'; position: absolute; right: 16px; top: 27px; color: var(--text-dimmer); pointer-events: none;
}
.field-select label { transform: translateY(-11px) scale(.78); color: var(--text-dimmer); }
.field-select select:focus ~ label { color: var(--fuchsia); }
.field label {
  position: absolute; left: 16px; top: 20px; font-size: .92rem; color: var(--text-dimmer);
  pointer-events: none; transition: transform .2s var(--ease), font-size .2s var(--ease), color .2s;
  transform-origin: left top;
}
.field textarea ~ label { top: 26px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--border-hover); background: rgba(255,255,255,.05); }
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field select:focus ~ label,
.field select:valid ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-11px) scale(.78); color: var(--fuchsia);
}
.field select:required:invalid { color: var(--text-dimmer); }
.field-error { display: none; margin-top: 6px; font-size: .76rem; color: #fb7185; padding-left: 4px; }
.field.error input, .field.error textarea { border-color: #fb7185; animation: shake .35s; }
.field.error .field-error { display: block; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.btn-submit { width: 100%; margin-top: 6px; padding: 15px; font-size: .95rem; }
.btn-submit.loading .btn-label { opacity: 0; }
.btn-submit .btn-spinner {
  position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; opacity: 0; transition: opacity .2s;
}
.btn-submit.loading .btn-spinner { opacity: 1; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-status { margin-top: 16px; font-size: .86rem; padding: 12px 16px; border-radius: 12px; display: none; }
.form-status.show { display: block; animation: statusIn .35s var(--ease); }
.form-status.success { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); color: #6ee7b7; }
.form-status.error { background: rgba(251,113,133,.12); border: 1px solid rgba(251,113,133,.3); color: #fb7185; }
@keyframes statusIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.cta-dark {
  position: relative; padding: 100px 0 70px; background: var(--dark-purple-deep); overflow: hidden;
}
.cta-dark::before { content: ''; position: absolute; top: -120px; right: -100px; width: 340px; height: 340px; border-radius: 50%; background: rgba(255,255,255,.06); }
.cta-dark::after { content: ''; position: absolute; bottom: -100px; left: -80px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.04); }
.cta-dark-inner { position: relative; z-index: 1; text-align: center; max-width: 620px; }
.cta-heading { margin-top: 16px; font-size: clamp(2rem, 4vw, 3rem); color: #fff; }
.cta-dark-inner > p { margin-top: 18px; color: rgba(255,255,255,.75); font-size: 1rem; line-height: 1.7; }
.cta-pills { margin-top: 26px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cta-pills span { padding: 8px 18px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: .82rem; font-weight: 600; color: #fff; }
.cta-dark .btn-white { margin-top: 30px; padding: 15px 32px; }

/* ==========================================================================
   FOOTER — visually fused with the Final CTA above it into one continuous
   dark band (same solid color, no border/gap at the seam), regardless of
   the active site theme, with a scattered white "starfield" dot decoration
   running across both.
   ========================================================================== */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--dark-purple-deep); padding: 70px 0 0;
}
.site-footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.9) 1.4px, transparent 1.4px);
  background-size: 90px 90px; background-position: 12px 18px;
  opacity: .18;
}
.site-footer::after {
  content: ''; position: absolute; top: -80px; right: 8%; width: 260px; height: 260px;
  border-radius: 50%; background: rgba(255,255,255,.04); pointer-events: none;
}
.cta-dark { background-image: radial-gradient(rgba(255,255,255,.18) 1.4px, transparent 1.4px); background-size: 90px 90px; background-position: 12px 18px; }
.footer-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 44px; }
.footer-logo { height: 42px; width: 42px; border-radius: 10px; margin-bottom: 16px; }
.footer-brand p { font-size: .9rem; color: rgba(255,255,255,.78); line-height: 1.7; max-width: 280px; }
.footer-socials { display: flex; gap: 10px; margin-top: 18px; }
.footer-socials a { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; transition: background .25s, transform .25s; }
.footer-socials a:hover { background: linear-gradient(135deg, #7c3aed, #c026d3); transform: translateY(-3px); }
.footer-socials svg { width: 16px; height: 16px; fill: rgba(255,255,255,.7); }
.footer-socials a:hover svg { fill: #fff; }
.footer-title { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 18px; }
.footer-col a, .footer-col p { display: block; font-size: .92rem; color: rgba(255,255,255,.82); margin-bottom: 13px; transition: color .2s; }
.footer-col a:hover { color: #e879f9; }
.footer-bottom { position: relative; z-index: 1; text-align: center; padding: 22px 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: .84rem; color: rgba(255,255,255,.6); }

/* ==========================================================================
   FLOATING ELEMENTS
   ========================================================================== */
.fab { position: fixed; z-index: 900; right: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 10px 30px -8px rgba(0,0,0,.5); transition: transform .3s var(--ease), box-shadow .3s; }
.fab:hover { transform: translateY(-4px) scale(1.08); }
.fab-whatsapp { bottom: 96px; width: 52px; height: 52px; background: #25D366; color: #fff; }
.fab-whatsapp svg { width: 26px; height: 26px; }
.fab-whatsapp::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(37,211,102,.5); animation: fabPulse 2.2s ease-out infinite; }
@keyframes fabPulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.fab-call { bottom: 158px; width: 46px; height: 46px; background: var(--surface-strong); border: 1px solid var(--border); color: var(--fuchsia); }
.fab-call svg { width: 19px; height: 19px; }
.fab-call::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 18px 2px rgba(217,70,239,.35); opacity: 0; transition: opacity .3s; }
.fab-call:hover::after { opacity: 1; }
.fab-top { bottom: 26px; width: 46px; height: 46px; background: linear-gradient(135deg, var(--violet), var(--magenta)); color: #fff; border: none; opacity: 0; visibility: hidden; transform: translateY(16px); }
.fab-top svg { width: 18px; height: 18px; }
.fab-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-us .container { padding: 44px 28px; border-radius: 30px; }
  .timeline-steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .timeline-line { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .about-grid, .founder-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .section { padding: 60px 0; }
  .hero { padding-top: 100px; }
  .hero-stats-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .stats-bar-grid { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .stat-item:nth-child(2)::after { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .cta-pills { flex-direction: column; align-items: center; }
  .fab-whatsapp { right: 16px; bottom: 84px; width: 46px; height: 46px; }
  .fab-call { right: 16px; bottom: 140px; width: 42px; height: 42px; }
  .fab-top { right: 16px; bottom: 24px; width: 42px; height: 42px; }
  .brand-chip { height: 62px; min-width: 128px; padding: 0 20px; }
  .brand-chip-logo { height: 36px; max-height: 36px; }
  .brand-chip-text { font-size: .92rem; }
  .brands-track { gap: 20px; }
}

/* ==========================================================================
   ONBOARDING TOUR
   ========================================================================== */
.tour-help-fab {
  /* Sits just below the fixed header (~96px tall at rest) rather than at
     the very top edge, so it never overlaps the navbar's own mic/menu
     controls once the "Get a Proposal" button hides on narrower screens. */
  position: fixed; top: 92px; right: 22px; z-index: 1150;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface-strong); backdrop-filter: blur(20px); color: var(--text);
  cursor: pointer; box-shadow: 0 10px 30px -10px rgba(124,58,237,.55);
  transition: top .3s var(--ease), transform .3s var(--ease), box-shadow .3s, width .3s var(--ease), border-radius .3s var(--ease), background .35s, color .35s;
  font-size: .82rem; font-weight: 700; overflow: hidden; white-space: nowrap;
}
.tour-help-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 40px -8px rgba(192,38,211,.7); }
.tour-help-fab svg { width: 18px; height: 18px; flex-shrink: 0; }
.tour-help-fab[hidden] { display: none; }
@media (max-width: 640px) { .tour-help-fab { top: 78px; right: 14px; width: 40px; height: 40px; } }

/* ==========================================================================
   INTRO VIDEO MODAL (hero play button)
   ========================================================================== */
.video-modal {
  position: fixed; inset: 0; z-index: 4000; background: rgba(4,2,10,.86);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.video-modal[hidden] { display: none; }
.video-modal-inner {
  position: relative; width: min(920px, 100%); aspect-ratio: 16 / 9;
  border-radius: 18px; overflow: hidden; box-shadow: 0 30px 90px -20px rgba(0,0,0,.7);
  background: #000;
}
.video-modal-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal-close {
  position: absolute; top: -46px; right: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-strong); border: 1px solid var(--border); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem;
  transition: background .2s, transform .2s;
}
.video-modal-close:hover { background: var(--fuchsia); transform: rotate(90deg); }

.tour-overlay {
  position: fixed; inset: 0; z-index: 5000; background: transparent; pointer-events: auto;
}
.tour-overlay[hidden] { display: none; }

.tour-spotlight {
  position: fixed; z-index: 5001; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(4, 2, 10, .72);
  border: 2px solid var(--fuchsia);
  transition: top .45s var(--ease), left .45s var(--ease), width .45s var(--ease), height .45s var(--ease), opacity .3s;
}

.tour-tooltip {
  position: fixed; z-index: 5002; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 48px)); overflow-y: auto;
  background: var(--surface-strong); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border); border-radius: 20px; padding: 26px 26px 20px;
  box-shadow: 0 30px 80px -16px rgba(0,0,0,.65);
  animation: tourModalIn .3s var(--ease);
}
@keyframes tourModalIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.tour-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.tour-progress-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fuchsia); }
.tour-progress-controls { display: flex; align-items: center; gap: 6px; }
.tour-mute, .tour-close { background: none; border: none; color: var(--text-dimmer); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; }
.tour-mute { width: 26px; height: 26px; border-radius: 8px; }
.tour-mute:hover, .tour-close:hover { color: var(--text); background: var(--surface); }
.tour-close { font-size: 1rem; line-height: 1; }
.tour-mute svg { width: 16px; height: 16px; }
.tour-tooltip h3 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 8px; color: var(--text); }
.tour-tooltip p { font-size: .87rem; color: var(--text-dim); line-height: 1.65; margin-bottom: 16px; }
.tour-dots { display: flex; gap: 5px; margin-bottom: 16px; }
.tour-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: background .3s, transform .3s; }
.tour-dots span.active { background: var(--fuchsia); transform: scale(1.3); }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-actions-right { display: flex; gap: 8px; }
.tour-btn {
  border: none; border-radius: 999px; padding: 9px 18px; font-size: .8rem; font-weight: 700; cursor: pointer;
  transition: transform .2s, opacity .2s;
}
.tour-btn:hover { transform: translateY(-1px); }
.tour-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.tour-btn-skip { background: transparent; color: var(--text-dimmer); }
.tour-btn-skip:hover { color: var(--text); }
.tour-btn-prev { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.tour-btn-next { background: linear-gradient(92deg, var(--violet), var(--magenta)); color: #fff; }

@media (max-width: 640px) {
  .tour-tooltip { width: calc(100vw - 24px); padding: 18px 18px 14px; }
}

/* ==========================================================================
   SERVICE DETAIL PAGE ("svd-*") — futuristic template for the 4 individual
   service pages (/SEO-Services, /Website-Development-Services, etc.)
   ========================================================================== */

/* --- Hero --- */
.svd-hero { position: relative; padding: 150px 0 70px; overflow: hidden; }
.svd-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 0%, rgba(124,58,237,.16), transparent 65%),
    linear-gradient(rgba(124,58,237,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,.05) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.svd-hero-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; text-align: center; }
.svd-hero-title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.12; margin-top: 20px; }
.svd-hero-sub { margin-top: 18px; color: var(--text-dim); font-size: 1.05rem; line-height: 1.7; }
.svd-platform-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.svd-platform-chip { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: .8rem; font-weight: 600; color: var(--text-dim); }
.svd-hero .hero-ctas { justify-content: center; margin-top: 28px; }
.svd-hero-stats { display: flex; justify-content: center; gap: 14px; margin-top: 44px; flex-wrap: wrap; }
.svd-hero-stat {
  min-width: 140px; padding: 18px 22px; border-radius: 16px; background: var(--surface-strong);
  border: 1px solid var(--border); backdrop-filter: blur(14px);
}
.svd-hero-stat-num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; background: linear-gradient(92deg, #a78bfa, #d946ef); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .svd-hero-stat-num { background: linear-gradient(92deg, #2A0134, #5A189A); -webkit-background-clip: text; background-clip: text; }
.svd-hero-stat-label { margin-top: 4px; font-size: .78rem; color: var(--text-dimmer); }

/* --- About --- */
.svd-about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.svd-about-p { margin-top: 16px; color: var(--text-dim); font-size: .96rem; line-height: 1.75; }
.svd-checklist { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.svd-checklist li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--text); }
.svd-checklist svg { width: 18px; height: 18px; flex-shrink: 0; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--fuchsia)); color: #fff; box-sizing: content-box; }
.svd-tech-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.svd-tech-chip { padding: 8px 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: .82rem; font-weight: 600; font-family: var(--font-display); }
.svd-dashboard { border-radius: 20px; border: 1px solid var(--border); background: var(--surface-strong); padding: 20px 22px; margin-bottom: 20px; backdrop-filter: blur(14px); }
.svd-dashboard-head { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; color: var(--text-dim); margin-bottom: 14px; }
.svd-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px 2px rgba(34,197,94,.6); animation: dotPulse 1.8s ease-in-out infinite; }
.svd-dashboard-row { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: .85rem; }
.svd-dashboard-row:first-of-type { border-top: none; }
.svd-dashboard-platform { color: var(--text-dim); }
.svd-dashboard-value { font-weight: 700; font-family: var(--font-display); }
.svd-dashboard-change { color: #22c55e; font-size: .76rem; font-weight: 600; }
.svd-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.svd-stat-card { padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); text-align: center; }
.svd-stat-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; }
.svd-stat-label { margin-top: 6px; font-size: .76rem; color: var(--text-dimmer); line-height: 1.4; }

/* --- Features (dark banner, matches Benefits/Final CTA identity) --- */
.svd-features {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--dark-purple-deep), var(--dark-purple));
}
.svd-grid-bg {
  position: absolute; inset: 0; z-index: 0; opacity: .6;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.svd-features-title, .svd-features-sub { color: #fff; }
.svd-features-sub { color: rgba(255,255,255,.72); }
.svd-feature-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.svd-feature-card {
  position: relative; padding: 26px 22px; border-radius: 18px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); overflow: hidden; transition: transform .35s var(--ease), background .3s;
}
.svd-feature-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.11); }
.svd-feature-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(120deg, var(--violet), var(--fuchsia), var(--violet)); background-size: 220% 220%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s; animation: featBorderFlow 6s linear infinite;
}
.svd-feature-card:hover::after { opacity: .7; }
.svd-feature-step { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fuchsia); }
.svd-feature-icon { display: block; font-size: 2.2rem; margin: 14px 0 10px; }
.svd-feature-card h4 { font-size: 1.05rem; color: #fff; }
.svd-feature-card p { margin-top: 8px; color: rgba(255,255,255,.72); font-size: .86rem; line-height: 1.65; }

/* --- Process --- */
.svd-process-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.svd-process-track::before {
  content: ''; position: absolute; top: 44px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--fuchsia), var(--violet)); opacity: .3; z-index: 0;
}
.svd-process-step { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.svd-process-num {
  width: 88px; height: 88px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: var(--text-dimmer);
  background: var(--bg); border: 2px solid var(--border);
}
.svd-process-icon {
  position: relative; width: 46px; height: 46px; margin: -23px auto 16px; border-radius: 50%; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--violet), var(--magenta));
  box-shadow: 0 10px 26px -8px rgba(192,38,211,.55); z-index: 2;
}
.svd-process-step h4 { font-size: 1.05rem; margin-top: 6px; }
.svd-process-step p { margin-top: 8px; color: var(--text-dim); font-size: .84rem; line-height: 1.6; }
.svd-process-deliverable { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: .76rem; font-weight: 700; color: var(--fuchsia); }
.svd-process-deliverable svg { width: 14px; height: 14px; }

/* --- Benefits --- */
.svd-benefits {
  position: relative; padding: 90px 0 100px; overflow: hidden;
  background: linear-gradient(135deg, var(--dark-purple-deep), var(--dark-purple));
}
.svd-benefits::before { content: ''; position: absolute; top: -120px; right: -100px; width: 340px; height: 340px; border-radius: 50%; background: rgba(255,255,255,.06); }
.svd-benefits::after { content: ''; position: absolute; bottom: -100px; left: -80px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.04); }
.svd-benefits-title, .svd-benefits-title .grad-text { color: #fff; -webkit-text-fill-color: #fff; background: none; }
.svd-benefit-scroll { position: relative; z-index: 1; overflow: hidden; margin-top: 40px; }
.svd-benefit-track { display: flex; gap: 20px; width: max-content; animation: svdBenefitScroll 32s linear infinite; }
.svd-benefit-scroll:hover .svd-benefit-track { animation-play-state: paused; }
@keyframes svdBenefitScroll { to { transform: translateX(-50%); } }
.svd-benefit-card {
  width: 280px; flex-shrink: 0; padding: 28px 24px; border-radius: 18px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px);
  transition: transform .3s var(--ease), background .3s;
}
.svd-benefit-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.11); }
.svd-benefit-icon { font-size: 2rem; display: block; }
.svd-benefit-card h4 { margin-top: 12px; font-size: 1.02rem; color: #fff; }
.svd-benefit-card p { margin-top: 8px; color: rgba(255,255,255,.72); font-size: .86rem; line-height: 1.65; }

/* --- Gallery (photo slider) --- */
.svd-gallery {
  position: relative; padding: 90px 0 100px; overflow: hidden;
  background: linear-gradient(135deg, var(--dark-purple-deep), var(--dark-purple));
}
.svd-gallery-title, .svd-gallery-title .grad-text { color: #fff; -webkit-text-fill-color: #fff; background: none; }
.svd-gallery-scroll { position: relative; z-index: 1; overflow: hidden; margin-top: 40px; }
.svd-gallery-track { display: flex; gap: 20px; width: max-content; animation: svdGalleryScroll 40s linear infinite; }
.svd-gallery-scroll:hover .svd-gallery-track { animation-play-state: paused; }
@keyframes svdGalleryScroll { to { transform: translateX(-50%); } }
/* Fewer than 4 photos: plain centered row, no loop/animation — avoids an obvious duplicate-photo repeat. */
.svd-gallery-static { position: relative; z-index: 1; margin-top: 40px; }
.svd-gallery-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.svd-gallery-card {
  position: relative; width: 420px; flex-shrink: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 16/9;
  display: block; padding: 0; margin: 0; border: none; background: none; font: inherit; cursor: zoom-in;
}
.svd-gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.svd-gallery-card:hover img { transform: scale(1.05); }
.svd-gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; background: linear-gradient(to top, rgba(0,0,0,.75), transparent); color: #fff; font-size: .85rem; text-align: left; }

.svd-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 40px; background: rgba(6,4,12,.92); backdrop-filter: blur(6px);
}
.svd-lightbox[hidden] { display: none; }
.svd-lightbox-figure { max-width: min(1200px, 92vw); max-height: 88vh; margin: 0; }
.svd-lightbox-figure img { display: block; width: 100%; height: 100%; max-height: 82vh; object-fit: contain; border-radius: 14px; }
.svd-lightbox-figure figcaption { margin-top: 12px; color: rgba(255,255,255,.85); font-size: .9rem; text-align: center; }
.svd-lightbox-close {
  position: absolute; top: 22px; right: 26px; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 1.1rem;
  cursor: pointer; transition: background .2s;
}
.svd-lightbox-close:hover { background: rgba(255,255,255,.2); }

/* --- Portfolio --- */
.svd-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.svd-portfolio-card { padding: 24px 22px; border-radius: 18px; background: var(--surface-strong); border: 1px solid var(--border); }
.svd-portfolio-tag { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: linear-gradient(92deg, var(--violet), var(--magenta)); color: #fff; }
.svd-portfolio-category { display: block; margin-top: 12px; font-size: .74rem; color: var(--text-dimmer); text-transform: uppercase; letter-spacing: .06em; }
.svd-portfolio-card h4 { margin-top: 4px; font-size: 1.1rem; }
.svd-portfolio-result { margin-top: 10px; font-weight: 700; color: var(--fuchsia); font-size: .92rem; }
.svd-portfolio-time { margin-top: 4px; font-size: .78rem; color: var(--text-dimmer); }

/* --- Estimate calculator --- */
.svd-calc {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; border-radius: 24px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-strong);
}
.svd-calc-questions { padding: 36px 34px; display: flex; flex-direction: column; gap: 26px; }
.svd-calc-q-label { display: block; font-size: .86rem; font-weight: 700; margin-bottom: 12px; }
.svd-calc-options { display: flex; flex-wrap: wrap; gap: 10px; }
.svd-calc-opt {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim); font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .25s var(--ease);
}
.svd-calc-opt:hover { border-color: var(--border-hover); }
.svd-calc-opt.active { background: linear-gradient(92deg, var(--violet), var(--magenta)); color: #fff; border-color: transparent; }
.svd-calc-result {
  padding: 36px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(160deg, rgba(124,58,237,.14), rgba(217,70,239,.08));
}
.svd-calc-result-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dimmer); }
.svd-calc-result-num { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; margin-top: 10px; background: linear-gradient(92deg, #a78bfa, #d946ef); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .svd-calc-result-num { background: linear-gradient(92deg, #2A0134, #5A189A); -webkit-background-clip: text; background-clip: text; }
.svd-calc-result-note { margin-top: 4px; font-size: .78rem; color: var(--text-dimmer); }
.svd-calc-result .btn { margin-top: 22px; }
@media (max-width: 800px) { .svd-calc { grid-template-columns: 1fr; } }

/* --- Pricing --- */
.svd-pricing-card {
  position: relative; max-width: 560px; margin: 0 auto; padding: 44px 40px; border-radius: 24px; text-align: center;
  background: var(--surface-strong); border: 1px solid var(--border); overflow: hidden;
}
.svd-pricing-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(120deg, var(--violet), var(--fuchsia), var(--magenta), var(--violet)); background-size: 260% 260%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .7; animation: featBorderFlow 8s linear infinite;
}
.svd-pricing-label { font-size: .86rem; color: var(--text-dim); font-weight: 600; }
.svd-pricing-headline { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; margin-top: 8px; }
.svd-pricing-desc { margin-top: 14px; color: var(--text-dim); font-size: .92rem; line-height: 1.7; }
.svd-pricing-features { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; text-align: left; }
.svd-pricing-features li { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text); }
.svd-pricing-features svg { width: 16px; height: 16px; flex-shrink: 0; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--fuchsia)); color: #fff; box-sizing: content-box; }
.svd-pricing-cta { margin-top: 30px; }
.svd-pricing-note { margin-top: 18px; font-size: .78rem; color: var(--text-dimmer); }
@media (max-width: 640px) { .svd-pricing-features { grid-template-columns: 1fr; } }

/* --- Why (icon override for emoji instead of svg) --- */
.svd-why-icon { display: block; font-size: 1.8rem; margin-bottom: 14px; }

/* --- FAQ --- */
.svd-faq-grid { display: grid; grid-template-columns: .85fr 1.4fr; gap: 56px; align-items: start; }
.svd-faq-stats { display: flex; gap: 26px; margin-top: 26px; flex-wrap: wrap; }
.svd-faq-stat-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; }
.svd-faq-stat-label { margin-top: 4px; font-size: .76rem; color: var(--text-dimmer); }
.svd-faq-list { display: flex; flex-direction: column; gap: 12px; }
.svd-faq-item { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.svd-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; background: none; border: none; text-align: left; font-size: .92rem; font-weight: 600; color: var(--text);
}
.svd-faq-q svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .3s var(--ease); color: var(--fuchsia); }
.svd-faq-item.open .svd-faq-q svg { transform: rotate(45deg); }
.svd-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.svd-faq-item.open .svd-faq-a { max-height: 240px; }
.svd-faq-a p { padding: 0 20px 18px; color: var(--text-dim); font-size: .88rem; line-height: 1.7; }
@media (max-width: 860px) {
  .svd-about-grid, .svd-faq-grid { grid-template-columns: 1fr; gap: 34px; }
  .svd-process-track { grid-template-columns: 1fr 1fr; }
  .svd-process-track::before { display: none; }
}
@media (max-width: 560px) {
  .svd-process-track { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ABOUT PAGE — Mission/Vision, Timeline, Team, Gallery
   ========================================================================== */
/* Media/Marketing/Management cards — dedicated About page ONLY. Deliberately
   separate class names from .feat-row (the homepage About preview), so the
   homepage's approved design is never touched by this component. The shared
   .about-grid's align-items:center (needed elsewhere) used to vertically
   center this column against the taller left column, throwing the two out
   of sync — stretching them to equal height and letting the mini-stats
   strip anchor to the bottom (margin-top:auto) fixes that without leaving
   dead space under the cards. */
.abpg-grid { align-items: stretch; }
/* Scoped to .abpg-grid (About page hero only) — NOT the bare .about-left /
   .secret-box selectors, which the homepage's About preview also uses.
   Mirrors the mini-stats fix: once the left column is stretched to match
   the right, push the secret box to the bottom of it too so both columns'
   last visible blocks land on the same baseline instead of one trailing
   off into empty space. */
.abpg-grid .about-left { display: flex; flex-direction: column; }
.abpg-grid .secret-box { margin-top: auto; }
.abpg-features { display: flex; flex-direction: column; gap: 10px; }
.abpg-mini-stats {
  margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 48px 16px; border-radius: 16px;
  background: var(--surface-strong); border: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.abpg-mini-stat { text-align: center; }
.abpg-mini-stat strong { display: block; font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--fuchsia); }
.abpg-mini-stat span { display: block; margin-top: 4px; font-size: .78rem; color: var(--text-dimmer); line-height: 1.3; }
@media (max-width: 640px) { .abpg-mini-stats { grid-template-columns: repeat(2, 1fr); row-gap: 16px; } }
.abpg-feat-card {
  position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 18px; border-radius: 16px;
  background: var(--surface-strong); border: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.abpg-feat-card:hover { transform: translateY(-4px); border-color: var(--border-hover); box-shadow: 0 20px 46px -18px rgba(124,58,237,.4); }
.abpg-feat-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(120deg, var(--violet), var(--fuchsia), var(--magenta), var(--violet)); background-size: 260% 260%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .5; transition: opacity .35s; animation: featBorderFlow 5s linear infinite;
}
.abpg-feat-card:hover::after { opacity: 1; }
.abpg-feat-glow {
  position: absolute; top: -20px; left: -20px; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.4), transparent 70%);
  filter: blur(6px); opacity: .5; pointer-events: none; animation: abpgGlowPulse 4.5s ease-in-out infinite;
}
.abpg-feat-card:nth-child(2) .abpg-feat-glow { animation-delay: 1.4s; }
.abpg-feat-card:nth-child(3) .abpg-feat-glow { animation-delay: 2.8s; }
.abpg-feat-card:hover .abpg-feat-glow { opacity: 1; transform: scale(1.2); }
@keyframes abpgGlowPulse { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }
.abpg-feat-badge {
  position: absolute; top: 12px; right: 16px; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  color: var(--text); opacity: .07; line-height: 1; pointer-events: none; transition: opacity .35s;
}
.abpg-feat-card:hover .abpg-feat-badge { opacity: .14; }
.abpg-feat-icon {
  position: relative; z-index: 1; flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--violet), var(--magenta)); box-shadow: 0 10px 22px -8px rgba(124,58,237,.55);
  transition: transform .4s var(--ease), box-shadow .35s;
}
.abpg-feat-icon svg { width: 20px; height: 20px; }
.abpg-feat-card:hover .abpg-feat-icon { transform: scale(1.1) rotate(-6deg); box-shadow: 0 14px 28px -6px rgba(192,38,211,.65); }
.abpg-feat-content { position: relative; z-index: 1; min-width: 0; }
.abpg-feat-title { font-size: 1.28rem; font-weight: 700; }
.abpg-feat-sub { display: inline; margin-left: 4px; font-weight: 500; font-size: .78rem; color: var(--fuchsia); letter-spacing: .02em; }
.abpg-feat-body { margin-top: 4px; color: var(--text-dim); font-size: .85rem; line-height: 1.5; }
@media (max-width: 640px) {
  .abpg-feat-card { padding: 14px 16px; gap: 12px; }
}

.about-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.about-mv-card { padding: 34px 30px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.about-mv-icon { font-size: 2rem; display: block; }
.about-mv-card h3 { margin-top: 14px; font-size: 1.3rem; }
.about-mv-card p { margin-top: 12px; color: var(--text-dim); font-size: .92rem; line-height: 1.75; }

/* Journey (vertical roadmap) + Team (scattered compact grid), side by side. */
.about-journey-team { position: relative; overflow: hidden; }
.ajt-decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ajt-blob { position: absolute; border-radius: 50%; filter: blur(70px); }
.ajt-blob-1 { top: -10%; left: -8%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(124,58,237,.24), transparent 70%); }
.ajt-blob-2 { bottom: -12%; right: -8%; width: 340px; height: 340px; background: radial-gradient(circle, rgba(217,70,239,.2), transparent 70%); }
.ajt-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: stretch; }

.ab-roadmap { position: relative; padding-left: 4px; }
.ab-roadmap::before {
  content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--violet), var(--fuchsia), var(--violet)); opacity: .35;
}
.ab-roadmap-item { position: relative; display: flex; gap: 20px; padding-bottom: 34px; }
.ab-roadmap-item:last-child { padding-bottom: 0; }
.ab-roadmap-marker { position: relative; z-index: 1; flex-shrink: 0; width: 20px; padding-top: 2px; }
.ab-roadmap-dot {
  display: block; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--fuchsia));
  box-shadow: 0 0 0 5px var(--bg), 0 0 16px rgba(217,70,239,.5);
  transition: transform .35s var(--ease), box-shadow .35s;
}
.ab-roadmap-item:hover .ab-roadmap-dot { transform: scale(1.18); box-shadow: 0 0 0 5px var(--bg), 0 0 26px rgba(217,70,239,.8); }
.ab-roadmap-body { padding-top: 1px; }
.ab-roadmap-year { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fuchsia); }
.ab-roadmap-body h4 { margin-top: 5px; font-size: 1.08rem; }
.ab-roadmap-body p { margin-top: 6px; color: var(--text-dim); font-size: .87rem; line-height: 1.65; }

/* Grid stretches to the roadmap's full height (from align-items:stretch on
   .ajt-grid above). grid-auto-rows:1fr divides that height equally across
   however many rows of team members actually exist, and each chip stretches
   (CSS Grid's default align-items) to fill its row — so the *cards* grow to
   cover the space rather than leaving gaps between them, and it keeps
   working automatically as more members are added via the admin panel. */
.ab-team-scatter { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 20px 16px; }
.ab-team-chip {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px;
  padding: 24px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.ab-team-chip:hover { transform: translateY(-6px); border-color: var(--border-hover); box-shadow: 0 22px 46px -18px rgba(124,58,237,.5); z-index: 2; }
/* width scales with however much room the chip has (bigger chips with few
   members => bigger photo; smaller chips as more are added later via admin
   => smaller photo) — but aspect-ratio:1/1 forces height to always match
   width exactly, so it stays a perfect circle regardless of the chip's own
   width/height ratio (which is what a plain height:% could never guarantee,
   since chip width and chip height come from different layout axes). clamp()
   keeps it from ever going absurdly large or small at the extremes. */
.ab-team-photo { width: clamp(102px, 26%, 168px); aspect-ratio: 1 / 1; flex-shrink: 0; border-radius: 50%; object-fit: cover; object-position: center; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px rgba(217,70,239,.35); }
.ab-team-photo-placeholder {
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--fuchsia));
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px rgba(217,70,239,.35);
}
.ab-team-name { font-size: .88rem; font-weight: 700; line-height: 1.3; }
.ab-team-role { font-size: .68rem; color: var(--text-dimmer); letter-spacing: .01em; }
@media (max-width: 1024px) {
  .ajt-grid { grid-template-columns: 1fr; gap: 48px; align-items: start; }
}
@media (max-width: 480px) {
  .ab-team-scatter { grid-template-columns: repeat(2, 1fr); }
}

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; gap: 16px; }
.gallery-item { position: relative; margin: 0; border-radius: 16px; overflow: hidden; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item figcaption {
  position: absolute; inset-inline: 0; bottom: 0; padding: 10px 14px; font-size: .78rem; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
}
.gallery-item-0, .gallery-item-3 { grid-column: span 2; grid-row: span 2; }
.gallery-empty {
  max-width: 480px; margin: 0 auto; text-align: center; padding: 60px 30px; border-radius: 22px;
  background: var(--surface); border: 1px dashed var(--border);
}
.gallery-empty-icon { font-size: 2.6rem; display: block; }
.gallery-empty h3 { margin-top: 14px; font-size: 1.15rem; }
.gallery-empty p { margin-top: 10px; color: var(--text-dim); font-size: .9rem; line-height: 1.7; }
@media (max-width: 860px) {
  .about-mv-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item-0, .gallery-item-3 { grid-column: span 2; grid-row: span 1; }
}

/* ==========================================================================
   BLOG LISTING PAGE (bp-*) — dedicated /Blog page only, homepage preview untouched
   ========================================================================== */
.bp-hero { position: relative; padding: 128px 0 40px; overflow: hidden; }
.bp-hero-glow {
  position: absolute; top: -20%; right: -10%; width: 60%; height: 70%;
  background: radial-gradient(circle, rgba(217,70,239,.16), transparent 70%);
  filter: blur(60px); pointer-events: none;
}
.bp-featured-card {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 26px; overflow: hidden;
  margin-top: 12px; transition: transform .45s var(--ease), border-color .4s, box-shadow .45s var(--ease);
}
.bp-featured-card:hover { transform: translateY(-6px); border-color: var(--border-hover); box-shadow: 0 30px 70px -30px rgba(124,58,237,.4); }
.bp-featured-img {
  position: relative; min-height: 320px; background: linear-gradient(135deg, #2c1250, #7c3aed 60%, #d946ef);
  background-size: cover; background-position: center; overflow: hidden;
}
.bp-featured-card:hover .bp-featured-img { animation: bp-img-zoom .6s var(--ease) forwards; }
@keyframes bp-img-zoom { to { transform: scale(1.06); } }
.bp-featured-tag {
  position: absolute; top: 20px; left: 20px; padding: 6px 14px; border-radius: 999px; font-size: .72rem;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: linear-gradient(92deg, var(--violet), var(--magenta)); box-shadow: 0 8px 24px -8px rgba(192,38,211,.6);
}
.bp-featured-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.bp-featured-body h2 { font-size: 1.6rem; line-height: 1.3; }
.bp-featured-body p { color: var(--text-dim); font-size: .96rem; line-height: 1.7; }
.bp-cat-badge {
  align-self: flex-start; padding: 5px 14px; border-radius: 999px; background: rgba(217,70,239,.14);
  border: 1px solid rgba(217,70,239,.3); color: var(--fuchsia); font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.bp-cat-badge-onimg { position: absolute; top: 14px; left: 14px; background: rgba(10,6,20,.72); backdrop-filter: blur(6px); border-color: rgba(255,255,255,.18); color: #fff; }
:root[data-theme="light"] .bp-cat-badge-onimg { background: rgba(255,255,255,.85); color: var(--violet-deep); border-color: rgba(42,1,52,.12); }
.bp-featured-meta, .bd-hero-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .84rem; color: var(--text-dim); }
.bp-meta-dot { opacity: .5; }
.bp-featured-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700; color: var(--fuchsia); font-size: .9rem; }
.bp-featured-card:hover .bp-featured-cta .arrow, .bp-card:hover .bp-card-cta .arrow, .bd-prevnext-link:hover .bd-prevnext-title { transform: translateX(4px); }
.bp-featured-cta .arrow, .bp-card-cta .arrow { display: inline-block; transition: transform .3s var(--ease); }

.bp-subhead { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.bp-subhead h2 { font-size: 1.3rem; }
.bp-fire { font-size: 1.2rem; }
.bp-trending-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bp-trend-card {
  position: relative; display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border); transition: transform .35s var(--ease), border-color .35s;
}
.bp-trend-card:hover { transform: translateY(-4px); border-color: var(--border-hover); }
.bp-trend-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--text-dimmer); flex-shrink: 0; }
.bp-trend-thumb {
  width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0;
  /* Placeholder fallback as background-image (not the "background" shorthand)
     so it doesn't reset background-size/position below — a shorthand here
     would silently wipe them back to their defaults regardless of source
     order, which was the actual bug: the real featured image (set inline
     by Blog.php, which wins over background-image alone) was rendering at
     the browser's default position/size instead of these. */
  background-image: linear-gradient(135deg, #2c1250, #7c3aed 60%, #d946ef);
  background-size: cover;
  /* Featured images are wide 1200x630 banners, usually with the title/logo
     on the left and looser decorative space toward the middle-right — at
     this tiny 64px size, centering the crop can land squarely in that
     blank space, so it's biased left instead to stay on the meaningful part. */
  background-position: left center;
}
.bp-trend-body h3 { font-size: .92rem; line-height: 1.35; margin-top: 4px; }
.bp-trend-meta { font-size: .74rem; color: var(--text-dimmer); }

.bp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.bp-search { position: relative; flex: 1 1 260px; max-width: 340px; }
.bp-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-dimmer); pointer-events: none; }
.bp-search input {
  width: 100%; padding: 12px 16px 12px 42px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: .88rem; transition: border-color .3s, box-shadow .3s;
}
.bp-search input:focus { outline: none; border-color: var(--border-hover); box-shadow: 0 0 0 4px rgba(217,70,239,.12); }
.bp-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.bp-cat-pill {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .3s var(--ease); white-space: nowrap;
}
.bp-cat-pill:hover { border-color: var(--border-hover); color: var(--fuchsia); }
.bp-cat-pill.active { background: linear-gradient(92deg, var(--violet), var(--magenta)); color: #fff; border-color: transparent; }

.bp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.bp-card {
  display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s var(--ease);
}
.bp-card:hover { transform: translateY(-6px); border-color: var(--border-hover); box-shadow: 0 26px 60px -28px rgba(124,58,237,.38); }
.bp-card-img-wrap { position: relative; overflow: hidden; height: 190px; }
.bp-card-img { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform .55s var(--ease); }
.bp-card:hover .bp-card-img { transform: scale(1.08); }
.bp-card-body { padding: 22px; }
.bp-card-body h3 { font-size: 1.06rem; line-height: 1.4; }
.bp-card-body p { margin-top: 8px; font-size: .86rem; color: var(--text-dim); line-height: 1.6; }
.bp-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; font-size: .76rem; color: var(--text-dimmer); }
.bp-card-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .84rem; font-weight: 700; color: var(--fuchsia); }
.bp-empty { text-align: center; color: var(--text-dim); padding: 40px 0; font-size: .95rem; }

.bp-newsletter { padding: 80px 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bp-newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.bp-newsletter-text h2 { font-size: 1.5rem; }
.bp-newsletter-text p { margin-top: 8px; color: var(--text-dim); max-width: 480px; font-size: .92rem; }
.bp-newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.bp-newsletter-form input {
  padding: 13px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg);
  color: var(--text); min-width: 240px; font-size: .88rem;
}
.bp-newsletter-form input:focus { outline: none; border-color: var(--border-hover); }

/* ==========================================================================
   BLOG DETAIL PAGE (bd-*)
   ========================================================================== */
/* Text sits plain-and-centered above the fold (not stamped on the photo, per
   explicit direction), with the featured image contained in its own rounded
   card below — so the image is fully visible on its own terms and the title
   is always legible regardless of what the photo looks like. */
.bd-hero-plain { padding: 150px 0 0; text-align: center; }
.bd-hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.bd-crumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: .84rem; color: var(--text-dimmer); margin-bottom: 26px; }
.bd-crumbs a { color: var(--text-dim); }
.bd-crumbs a:hover { color: var(--fuchsia); }
.bd-crumbs span { opacity: .55; }

/* Generic breadcrumb trail (About/Services/Contact/Service-detail pages) —
   same visual language as .bd-crumbs but left-aligned and top-of-page. */
.mcube-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-dimmer); padding: 22px 24px 0; }
.mcube-crumbs a { color: var(--text-dim); }
.mcube-crumbs a:hover { color: var(--fuchsia); }
.mcube-crumbs-sep { opacity: .5; }
.bd-hero-title-plain { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.22; }
.bd-hero-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.bd-hero-badge {
  padding: 9px 22px; border-radius: 999px; font-size: .84rem; font-weight: 700; color: #fff;
  background: linear-gradient(92deg, var(--violet), var(--magenta));
}
.bd-hero-meta-plain { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; color: var(--text-dim); font-size: .92rem; }

.bd-hero-card {
  position: relative; width: 70%; margin: 48px auto 0; border-radius: 36px; overflow: hidden;
  background: linear-gradient(135deg, var(--violet-deep), var(--dark-purple));
  box-shadow: 0 40px 90px -40px rgba(124,58,237,.5);
}
/* width:100%/height:auto (not object-fit:cover with a fixed height) so the
   image renders at its own natural aspect ratio — nothing gets cropped off
   the top/bottom no matter how the card's width changes. Every upload is
   already cropped to a consistent 1200×630 by the admin's crop tool, so this
   still looks uniform across posts without needing to force-crop it again
   here. */
.bd-hero-card-img { display: block; width: 100%; height: auto; }
.bd-hero-card-dots {
  position: absolute; z-index: 1; width: 84px; height: 84px; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.55) 1.8px, transparent 1.8px);
  background-size: 14px 14px; opacity: .55;
}
.bd-hero-card-dots-tl { top: 26px; left: 26px; }
.bd-hero-card-dots-br { bottom: 26px; right: 26px; }
.bd-hero-card-placeholder { display: flex; align-items: center; justify-content: center; min-height: 320px; }
.bd-hero-card-placeholder-badge { padding: 14px 32px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; font-weight: 700; font-size: 1.05rem; }
@media (max-width: 900px) {
  .bd-hero-card { width: 92%; }
}
@media (max-width: 640px) {
  .bd-hero-card { width: 100%; border-radius: 24px; }
  .bd-hero-card-placeholder { min-height: 220px; }
}
.bd-author-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--violet), var(--fuchsia)); color: #fff; font-weight: 700; font-size: .8rem; flex-shrink: 0;
}
.bd-author-avatar-lg { width: 44px; height: 44px; font-size: 1rem; }

.bd-layout { display: grid; grid-template-columns: 1fr 280px; gap: 56px; align-items: start; padding-top: 8px; }
.bd-main { max-width: 760px; }
.bd-excerpt { font-size: 1.08rem; color: var(--text-dim); line-height: 1.7; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.bd-share { display: flex; align-items: center; gap: 10px; margin: 22px 0 30px; }
.bd-share-label { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dimmer); margin-right: 4px; }
.bd-share-btn {
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; transition: all .3s var(--ease);
}
.bd-share-btn svg { width: 16px; height: 16px; }
.bd-share-btn:hover { border-color: var(--border-hover); color: var(--fuchsia); transform: translateY(-3px); }
.bd-content h2 { font-size: 1.4rem; margin: 40px 0 16px; scroll-margin-top: 110px; }
.bd-content p { color: var(--text-dim); line-height: 1.9; margin-bottom: 18px; font-size: 1rem; }
.bd-callout {
  display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; margin: 26px 0; border-radius: 16px;
  background: rgba(217,70,239,.08); border-left: 3px solid var(--fuchsia);
}
.bd-callout-icon { width: 22px; height: 22px; color: var(--fuchsia); flex-shrink: 0; margin-top: 2px; }
.bd-callout p { margin: 0; color: var(--text); font-size: .96rem; line-height: 1.7; }
.bd-code {
  background: #0c0a14; border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; margin: 26px 0;
  overflow-x: auto; font-size: .86rem; line-height: 1.7; color: #e9d8fd;
}
:root[data-theme="light"] .bd-code { background: #1a1330; }
.bd-code code { font-family: "SFMono-Regular", Consolas, Menlo, monospace; white-space: pre-wrap; }
.bd-tags { margin: 30px 0; }
.bd-faq { margin-top: 50px; }
.bd-faq h2 { font-size: 1.4rem; margin-bottom: 20px; }
.bd-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 54px; padding-top: 30px; border-top: 1px solid var(--border); }
.bd-prevnext-link { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); transition: border-color .3s, transform .3s var(--ease); }
.bd-prevnext-link:hover { border-color: var(--border-hover); transform: translateY(-3px); }
.bd-next { text-align: right; align-items: flex-end; grid-column: 2; }
.bd-prevnext-dir { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fuchsia); }
.bd-prevnext-title { font-size: .92rem; font-weight: 600; transition: transform .3s var(--ease); display: inline-block; }

.bd-sidebar { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 20px; }
.bd-toc { padding: 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.bd-toc-label { display: block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dimmer); margin-bottom: 14px; }
.bd-toc ul { display: flex; flex-direction: column; gap: 10px; }
.bd-toc a { font-size: .86rem; color: var(--text-dim); line-height: 1.4; display: block; border-left: 2px solid transparent; padding-left: 12px; transition: color .25s, border-color .25s; }
.bd-toc a:hover { color: var(--fuchsia); }
.bd-toc a.active { color: var(--fuchsia); border-left-color: var(--fuchsia); font-weight: 600; }
.bd-author-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.bd-author-card-head { display: flex; align-items: center; gap: 12px; }
.bd-author-card-label { display: block; font-size: .72rem; color: var(--text-dimmer); margin-bottom: 2px; }
.bd-author-bio { font-size: .84rem; color: var(--text-dim); line-height: 1.65; padding-top: 14px; border-top: 1px solid var(--border); }

@media (max-width: 1024px) {
  .bd-layout { grid-template-columns: 1fr; }
  .bd-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .bd-toc { flex: 1 1 240px; }
  .bp-trending-row { grid-template-columns: 1fr; }
  .bp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .bp-featured-card { grid-template-columns: 1fr; }
  .bp-featured-img { min-height: 220px; }
  .bp-toolbar { flex-direction: column; align-items: stretch; }
  .bp-search { max-width: none; }
}
@media (max-width: 640px) {
  .bp-grid { grid-template-columns: 1fr; }
  .bd-prevnext { grid-template-columns: 1fr; }
  .bd-next { grid-column: 1; text-align: left; align-items: flex-start; }
  .bp-newsletter-inner { flex-direction: column; align-items: flex-start; }
  .bp-newsletter-form { width: 100%; }
  .bp-newsletter-form input { flex: 1; min-width: 0; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}