/* ============================================================
   MBC INSIDE — Modern Layer 2026 (3D · Depth · Motion)
   Loaded AFTER styles.css. Strictly additive — does not
   redefine existing classes; only extends with new ones and
   tightly scoped enhancements via :where() / new modifier
   classes so the original cascade remains intact.
   ============================================================ */

/* @property gives us animatable conic-gradient angle. */
@property --mod-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ============================================================
   1. AURORA — fixed, site-wide animated gradient backdrop
   Sits BEHIND everything (z-index: -2 on body via grain),
   visible through transparent section backgrounds.
   ============================================================ */
.mod-aurora {
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  filter: blur(90px) saturate(140%);
  opacity: .55;
  background:
    radial-gradient(900px 520px at 18% 22%, var(--accent)    0%, transparent 55%),
    radial-gradient(780px 600px at 82% 78%, var(--cyan)      0%, transparent 55%),
    radial-gradient(620px 380px at 55% 12%, var(--accent-hi) 0%, transparent 50%),
    radial-gradient(560px 340px at 40% 92%, var(--ok)        0%, transparent 50%);
  animation: modAuroraDrift 26s ease-in-out infinite alternate;
  transform: translateZ(0);
}
[data-theme="light"] .mod-aurora { opacity: .22; filter: blur(110px) saturate(170%); }
@keyframes modAuroraDrift {
  0%   { transform: translate3d(0, 0, 0)     scale(1)    rotate(0deg); }
  50%  { transform: translate3d(-4%, 3%, 0)  scale(1.06) rotate(2deg); }
  100% { transform: translate3d(5%, -2%, 0)  scale(1.10) rotate(-2deg); }
}

/* Vignette mask so aurora doesn't bleed into screen edges harshly */
.mod-aurora::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, var(--bg-0) 100%);
  opacity: .65;
}

/* ============================================================
   2. GRAIN — subtle SVG noise overlay
   ============================================================ */
.mod-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-theme="light"] .mod-grain { opacity: .03; mix-blend-mode: multiply; }

/* ============================================================
   3. GLOW CARD — cursor-following soft border glow
   Apply to any card by adding class="... mod-glow"
   ============================================================ */
.mod-glow {
  position: relative;
  isolation: isolate;
}
.mod-glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(96, 165, 250, .55) 0%,
    rgba(6, 182, 212, .25) 35%,
    transparent 65%
  );
  padding: 1px;
  -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 .35s var(--ease);
  pointer-events: none;
  z-index: 3;
}
.mod-glow:hover::before { opacity: 1; }

/* ============================================================
   4. MAGNETIC — JS sets translate; we only ease it back
   ============================================================ */
.mod-magnetic {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  will-change: transform;
}
.mod-magnetic > * { pointer-events: none; }

/* ============================================================
   5. HERO WIDGETS — deeper Z layered parallax inside tilt +
   subtle bento-card border that brightens on hover.
   Existing JS applies rotateX/Y on .hw → with preserve-3d
   our translateZ children pop out of the card plane.
   ============================================================ */
.hw {
  isolation: isolate;
}
/* Inner top-edge highlight — gives the glass card an "etched" look */
.hw::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,0)  18%,
    transparent 100%);
  mix-blend-mode: screen;
  opacity: .8;
  z-index: 0;
}
[data-theme="light"] .hw::after {
  background: linear-gradient(180deg,
    rgba(255,255,255,.7) 0%,
    rgba(255,255,255,0)  20%,
    transparent 100%);
  opacity: .9;
}
.hw > * { position: relative; z-index: 1; }
.hw:hover {
  border-color: var(--accent);
}
.hw {
  transform-style: preserve-3d;
}
.hw .hw-dot   { transform: translateZ(24px); }
.hw .hw-label { transform: translateZ(34px); }
.hw .hw-value { transform: translateZ(52px); text-shadow: 0 8px 18px rgba(0,0,0,.35); }
[data-theme="light"] .hw .hw-value { text-shadow: 0 6px 14px rgba(15,23,42,.18); }

/* ============================================================
   6. SERVICE / WHY / CONTACT CARDS — inner pop on hover
   Inner elements lift on Z when the card is tilted by JS.
   ============================================================ */
.service-card,
.why-card,
.contact-card {
  transform-style: preserve-3d;
}
.service-card .service-icon,
.why-card .num,
.contact-card .cc-icon {
  transition: transform .45s var(--ease);
}
.service-card h3,
.why-card h3,
.contact-card .cc-value {
  transition: transform .45s var(--ease);
}
.service-card .service-tags,
.contact-card .cc-label {
  transition: transform .45s var(--ease);
}

.service-card:hover .service-icon { transform: translateZ(46px) scale(1.08); }
.service-card:hover h3            { transform: translateZ(32px); }
.service-card:hover .service-tags { transform: translateZ(18px); }

.why-card:hover .num              { transform: translateZ(48px) scale(1.06); }
.why-card:hover h3                { transform: translateZ(28px); }

.contact-card:hover .cc-icon      { transform: translateZ(40px) scale(1.08); }
.contact-card:hover .cc-value     { transform: translateZ(24px); }
.contact-card:hover .cc-label     { transform: translateZ(14px); }

/* ============================================================
   7. PROCESS STEPS — scroll-driven 3D flip in
   Default: tilted away. .mod-in: lands flat.
   ============================================================ */
.process-step.mod-3d {
  perspective: 1200px;
  transform-style: preserve-3d;
}
.process-step.mod-3d > * {
  opacity: 0;
  transform: translateZ(-120px) rotateY(-28deg) translateY(20px);
  transition:
    transform .9s cubic-bezier(.22,.68,.18,1),
    opacity   .7s ease-out;
}
.process-step.mod-3d.mod-in > * { opacity: 1; transform: none; }
.process-step.mod-3d.mod-in > *:nth-child(2) { transition-delay: .08s; }
.process-step.mod-3d.mod-in > *:nth-child(3) { transition-delay: .16s; }
.process-step.mod-3d.mod-in > *:nth-child(4) { transition-delay: .24s; }

/* ============================================================
   8. GRADIENT BORDER — animated conic ring for primary CTA
   ============================================================ */
.mod-ring {
  position: relative;
  isolation: isolate;
}
.mod-ring::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--mod-angle, 0deg),
    var(--accent) 0%,
    var(--cyan) 25%,
    var(--accent-hi) 50%,
    var(--ok-hi) 75%,
    var(--accent) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
  opacity: .9;
  animation: modSpin 5s linear infinite;
  filter: drop-shadow(0 0 8px rgba(59,130,246,.45));
}
@keyframes modSpin { to { --mod-angle: 360deg; } }

/* ============================================================
   9. HERO TITLE — 3D entrance (per-span stagger)
   Each <span> in the h1 floats up + rotates in.
   ============================================================ */
.hero-title.mod-entry { perspective: 1200px; }
.hero-title.mod-entry > span {
  display: inline-block;
  transform-origin: 50% 100%;
  opacity: 0;
  transform: translateY(56px) rotateX(-65deg);
  animation: modSpanIn 1.05s cubic-bezier(.22,.68,.18,1) forwards;
}
.hero-title.mod-entry > br { display: inline; }
.hero-title.mod-entry > span:nth-of-type(1) { animation-delay: .10s; }
.hero-title.mod-entry > span:nth-of-type(2) { animation-delay: .28s; }
.hero-title.mod-entry > span:nth-of-type(3) { animation-delay: .48s; }
@keyframes modSpanIn {
  to { opacity: 1; transform: none; }
}

/* ============================================================
   10. DASHBOARD WIDGETS — subtle floating lift on hover
   No peer-dim (avoids feeling laggy on grid hover).
   ============================================================ */
.dash-w {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  transform-style: preserve-3d;
}
.dash-w:hover {
  transform: translateY(-6px) translateZ(20px);
  z-index: 4;
}
.dash-w:hover .dash-kpi-val,
.dash-w:hover .dash-big-num,
.dash-w:hover .dash-gauge-val {
  transform: translateZ(18px);
  transition: transform .5s var(--ease);
}

/* ============================================================
   11. SECTION SPOTLIGHT — single moving radial highlight
   that follows the page through scroll (set by JS).
   ============================================================ */
.mod-spotlight {
  position: fixed;
  pointer-events: none;
  width: 800px; height: 800px;
  left: var(--sx, 50%); top: var(--sy, 30%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(96,165,250,.10) 0%, transparent 60%);
  z-index: -1;
  filter: blur(20px);
  transition: opacity .6s ease;
}
[data-theme="light"] .mod-spotlight { background: radial-gradient(circle, rgba(37,99,235,.07) 0%, transparent 60%); }

/* ============================================================
   12. TECH BAND — depth + glow on pills
   ============================================================ */
.tech-band-track span {
  transition: transform .3s var(--ease), color .3s, text-shadow .3s;
}
.tech-band-track span:hover {
  transform: translateY(-3px) scale(1.08);
  color: var(--accent-hi);
  text-shadow: 0 0 18px rgba(96,165,250,.55);
}

/* ============================================================
   13. REDUCED MOTION — disable animated/heavy effects
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .mod-aurora,
  .mod-ring::before,
  .hero-title.mod-entry > span { animation: none !important; }
  .hero-title.mod-entry > span { opacity: 1; transform: none; }
  .process-step.mod-3d > * { opacity: 1; transform: none; transition: none; }
  .mod-glow::before { display: none; }
  .dash-w:hover { transform: none; }
}

/* ============================================================
   15. CHAT WIDGET — close button + dim backdrop
   ============================================================ */
.chat-widget { z-index: 1299; }
.chat-close {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: #fff;
  cursor: pointer;
  transition: transform .25s var(--spring), background .2s, border-color .2s;
}
.chat-close:hover { background: rgba(255,255,255,.20); transform: rotate(90deg) scale(1.05); border-color: rgba(255,255,255,.38); }
.chat-close svg { width: 18px; height: 18px; }
.chat-close:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

.mod-chat-scrim {
  position: fixed; inset: 0;
  background: rgba(2, 6, 12, .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1280;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.mod-chat-scrim.show { opacity: 1; pointer-events: auto; }
[data-theme="light"] .mod-chat-scrim { background: rgba(15,23,42,.22); }

/* ============================================================
   16. CTA BANNER v2 — modern 3D split card
   ============================================================ */
.cta-banner.cta-v2 {
  /* Was 110px — felt oversized vs the rest of the page. */
  padding: 70px 0;
  background: transparent;
  text-align: left;
}
.cta-banner.cta-v2::before,
.cta-banner.cta-v2::after { display: none !important; }

.cta-card {
  position: relative;
  isolation: isolate;
  border-radius: 28px;
  padding: 42px 44px;
  background:
    linear-gradient(140deg, rgba(59,130,246,.10) 0%, rgba(6,182,212,.06) 50%, rgba(16,185,129,.05) 100%),
    rgba(10,16,30,.92);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 30px 80px -30px rgba(2,6,23,.65),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}
[data-theme="light"] .cta-card {
  background:
    linear-gradient(140deg, rgba(37,99,235,.08) 0%, rgba(6,182,212,.05) 50%, rgba(16,185,129,.04) 100%),
    rgba(255,255,255,.94);
  box-shadow:
    0 30px 80px -30px rgba(15,23,42,.18),
    inset 0 1px 0 rgba(255,255,255,.7);
}
.cta-card::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(96,165,250,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 65% at 80% 50%, black 5%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 80% 50%, black 5%, transparent 75%);
  z-index: 0;
  pointer-events: none;
}
.cta-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 45deg,
    rgba(59,130,246,.45), rgba(6,182,212,.30), rgba(96,165,250,.55),
    rgba(16,185,129,.30), rgba(59,130,246,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .9;
  z-index: -1;
}

.cta-card-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: center;
}

.cta-card-copy .eyebrow { margin-bottom: 18px; }
.cta-banner.cta-v2 .cta-card-h {
  font-size: clamp(28px, 3.4vw, 44px);
  margin: 0 0 22px;
  color: var(--text);
  line-height: 1.05;
}
.cta-banner.cta-v2 .cta-card-sub {
  color: var(--text-dim);
}
.cta-card-h .cta-line-1 { display: block; }
.cta-card-h .cta-line-2 { display: block; }
.cta-shimmer {
  background: linear-gradient(95deg,
    var(--accent) 0%, var(--cyan-hi) 30%, var(--accent-hi) 55%,
    var(--ok-hi) 75%, var(--accent) 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ctaShimmer 6s linear infinite;
  display: inline-block;
}
@keyframes ctaShimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 280% 50%; }
}

.cta-card-sub {
  font-size: 17px;
  color: var(--text-dim);
  max-width: 520px;
  margin-bottom: 32px;
  line-height: 1.65;
}

.cta-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-bottom: 28px;
}
.cta-card-btn {
  font-size: 16px;
  padding: 16px 30px;
}
.cta-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 600;
  font-size: 14.5px;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  transition: color .25s, border-color .25s, transform .25s;
}
.cta-card-link svg { width: 16px; height: 16px; transition: transform .3s var(--spring); }
.cta-card-link:hover { color: var(--accent-hi); border-color: var(--accent-hi); }
.cta-card-link:hover svg { transform: translateX(4px); }

.cta-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 13.5px;
  color: var(--text-mute);
  align-items: center;
}
.cta-card-meta strong { color: var(--text); font-weight: 600; }
.cta-card-meta .dot { opacity: .5; }

/* Visual side (right) */
.cta-card-visual {
  position: relative;
  perspective: 1100px;
}
.cta-visual-stack {
  position: relative;
  width: 100%;
  height: 340px;
  transform-style: preserve-3d;
}
.cta-vc {
  position: absolute;
  border-radius: 18px;
  padding: 16px 18px;
  background: rgba(14,20,36,.92);
  border: 1px solid var(--glass-border);
  box-shadow: 0 22px 50px -20px rgba(2,6,23,.55);
  will-change: transform;
  animation: ctaFloat 7s ease-in-out infinite alternate;
}
[data-theme="light"] .cta-vc {
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 50px -22px rgba(15,23,42,.22);
}
.cta-vc-1 {
  top: 0; left: 8%; width: 78%;
  transform: rotateX(6deg) rotateY(-10deg) translateZ(40px);
  animation-delay: 0s;
}
.cta-vc-2 {
  top: 38%; right: 0; width: 70%;
  transform: rotateX(-4deg) rotateY(8deg) translateZ(70px);
  animation-delay: -2.3s;
}
.cta-vc-3 {
  bottom: 0; left: 22%; width: 60px; height: 60px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-hi));
  color: #fff;
  border: none;
  transform: rotateX(8deg) rotateY(-14deg) translateZ(90px);
  box-shadow: 0 18px 40px rgba(59,130,246,.55);
  animation-delay: -4.6s;
}
.cta-vc-3 svg { width: 24px; height: 24px; }
.cta-vc-3 svg path {
  transform-origin: center;
  animation: ctaArrow 2.2s ease-in-out infinite;
}
@keyframes ctaArrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
@keyframes ctaFloat {
  0%   { transform: var(--cta-base) translateY(0px); }
  100% { transform: var(--cta-base) translateY(-12px); }
}
/* Re-apply base + float via overrides since transform doesn't accept vars cleanly */
.cta-vc-1 { animation-name: ctaFloat1; }
.cta-vc-2 { animation-name: ctaFloat2; }
.cta-vc-3 { animation-name: ctaFloat3; }
@keyframes ctaFloat1 {
  0%   { transform: rotateX(6deg) rotateY(-10deg) translateZ(40px) translateY(0); }
  100% { transform: rotateX(6deg) rotateY(-10deg) translateZ(40px) translateY(-10px); }
}
@keyframes ctaFloat2 {
  0%   { transform: rotateX(-4deg) rotateY(8deg) translateZ(70px) translateY(0); }
  100% { transform: rotateX(-4deg) rotateY(8deg) translateZ(70px) translateY(-14px); }
}
@keyframes ctaFloat3 {
  0%, 100% { transform: rotateX(8deg) rotateY(-14deg) translateZ(90px) translateY(0)   rotate(0deg); }
  50%      { transform: rotateX(8deg) rotateY(-14deg) translateZ(90px) translateY(-6px) rotate(6deg); }
}

.cta-vc-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-dim); margin-bottom: 10px;
}
.cta-vc-head .dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.cta-vc-head .dot.ok   { background: var(--ok);     box-shadow: 0 0 10px var(--ok); }
.cta-vc-head .dot.blue { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.cta-vc-body { color: var(--text); }
.cta-vc-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13.5px; font-weight: 600; margin-bottom: 8px;
}
.cta-vc-row .badge {
  font-size: 10px; padding: 3px 8px; border-radius: 999px;
  background: rgba(16,185,129,.15); color: var(--ok-hi);
  border: 1px solid rgba(16,185,129,.3);
}
.cta-vc-bar {
  height: 5px; border-radius: 999px;
  background: rgba(255,255,255,.06); overflow: hidden;
}
[data-theme="light"] .cta-vc-bar { background: rgba(15,23,42,.08); }
.cta-vc-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--cyan-hi));
  border-radius: 999px;
  animation: ctaBarPulse 2.6s ease-in-out infinite;
}
@keyframes ctaBarPulse {
  0%, 100% { opacity: 1;  }
  50%      { opacity: .55; }
}
.cta-vc-kpi {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-top: 4px;
}
.cta-vc-kpi > div {
  text-align: center;
  padding: 8px 4px;
  border-radius: 10px;
  background: rgba(96,165,250,.06);
  border: 1px solid rgba(96,165,250,.12);
}
.cta-vc-kpi b {
  display: block;
  font-family: var(--font-heading);
  font-size: 20px; color: var(--text); font-weight: 700;
}
.cta-vc-kpi em {
  font-style: normal; font-size: 10px;
  color: var(--text-mute); letter-spacing: .1em;
  text-transform: uppercase;
}

/* Orbit decor */
.cta-card-orbit {
  position: absolute;
  top: 50%; left: 65%;
  width: 520px; height: 520px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.orbit-ring {
  position: absolute; inset: 0;
  border: 1px dashed rgba(96,165,250,.16);
  border-radius: 50%;
  animation: orbitSpin 60s linear infinite;
}
.orbit-ring.r2 { inset: 18%; animation-duration: 40s; animation-direction: reverse; border-color: rgba(6,182,212,.14); }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.orbit-dot {
  position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-hi);
  box-shadow: 0 0 12px var(--accent-hi);
}
.orbit-dot.d1 { top: 5%;  left: 50%; }
.orbit-dot.d2 { top: 50%; right: 6%; background: var(--cyan-hi); box-shadow: 0 0 12px var(--cyan-hi); }
.orbit-dot.d3 { bottom: 8%; left: 30%; background: var(--ok-hi); box-shadow: 0 0 12px var(--ok-hi); }

/* CTA banner responsive */
@media (max-width: 960px) {
  .cta-banner.cta-v2 { padding: 70px 0; }
  .cta-card { padding: 40px 26px; border-radius: 24px; }
  .cta-card-grid { grid-template-columns: 1fr; gap: 36px; }
  .cta-card-visual { min-height: 260px; max-width: 420px; margin: 0 auto; }
  .cta-card-orbit { display: none; }
}
@media (max-width: 520px) {
  .cta-card { padding: 32px 20px; }
  .cta-card-h { font-size: clamp(28px, 8vw, 38px); }
  .cta-vc-1 { width: 84%; }
  .cta-vc-2 { width: 78%; }
  .cta-card-meta { font-size: 12.5px; }
}

/* CTA pill button: static box-shadow instead of animated halo (avoids per-frame repaint) */
.cta-card .mb-pill {
  animation: none !important;
  box-shadow: 0 0 12px rgba(56,189,248,.26), 0 0 18px rgba(96,165,250,.16);
}

/* Pause ALL CTA animations when section is offscreen (added by IntersectionObserver) */
.cta-banner.cta-offscreen .cta-shimmer,
.cta-banner.cta-offscreen .cta-vc,
.cta-banner.cta-offscreen .cta-vc-3 svg path,
.cta-banner.cta-offscreen .cta-vc-bar i,
.cta-banner.cta-offscreen .orbit-ring,
.cta-banner.cta-offscreen .mod-sparkle,
.cta-banner.cta-offscreen .mb-pill::before {
  animation-play-state: paused !important;
}

/* ============================================================
   17. AMBIENT 3D — visible without hover
   ============================================================ */
/* Hero widgets — continuous slow 3D float (overrides any tilt hover handled by JS) */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hw { animation: hwFloat 9s ease-in-out infinite alternate; }
  .hw-1 { animation-delay: 0s; }
  .hw-2 { animation-delay: -2.5s; }
  .hw-3 { animation-delay: -4.5s; }
  .hw-4 { animation-delay: -6.5s; }
  @keyframes hwFloat {
    0%   { transform: perspective(900px) rotateX(2deg)  rotateY(-3deg) translateY(0)   translateZ(0); }
    50%  { transform: perspective(900px) rotateX(-2deg) rotateY(4deg)  translateY(-12px) translateZ(20px); }
    100% { transform: perspective(900px) rotateX(3deg)  rotateY(-2deg) translateY(0)   translateZ(0); }
  }
}

/* Animated gradient on hero accent text — always visible */
.hero-title .accent {
  background: linear-gradient(95deg,
    var(--accent-hi) 0%, var(--cyan-hi) 30%, var(--accent-hi) 60%, var(--ok-hi) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: heroAccentShimmer 8s linear infinite;
}
@keyframes heroAccentShimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 240% 50%; }
}

/* Service / Why / Contact cards — scroll-driven 3D entrance */
@media (prefers-reduced-motion: no-preference) {
  .service-card,
  .why-card,
  .contact-card {
    opacity: 0;
    transform: perspective(1200px) rotateX(-12deg) translateY(40px) translateZ(-60px);
    transition: opacity .9s var(--ease), transform 1s cubic-bezier(.22,.68,.18,1);
  }
  .reveal-stagger.in .service-card,
  .reveal-stagger.in .why-card,
  .reveal-stagger.in .contact-card {
    opacity: 1;
    transform: none;
  }
  /* Honor the existing stagger delays via :nth-child */
  .reveal-stagger.in .service-card:nth-child(2) { transition-delay: .08s; }
  .reveal-stagger.in .service-card:nth-child(3) { transition-delay: .16s; }
  .reveal-stagger.in .service-card:nth-child(4) { transition-delay: .24s; }
  .reveal-stagger.in .why-card:nth-child(2)     { transition-delay: .08s; }
  .reveal-stagger.in .why-card:nth-child(3)     { transition-delay: .16s; }
  .reveal-stagger.in .why-card:nth-child(4)     { transition-delay: .24s; }
}

/* ============================================================
   18a. MOVING BORDER for PILL CTAs — .mb-pill
   Tech: `::before` is an oversized conic-gradient rotated via
   transform:rotate (NO @property — proven to be flaky here when
   mixed with the existing cascade). `::after` overlays the button's
   own background to mask the interior, leaving only a glowing ring
   around the perimeter. Content sits on top via z-index.
   Works identically on pills, rectangles, and any border-radius.
   ============================================================ */
.mb-pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mb-pill > * {
  position: relative;
  z-index: 2;
  /* Force pointer cursor everywhere on the pill — otherwise text inside
     <span> can flip to cursor: text, which the eye reads as motion. */
  cursor: pointer;
  pointer-events: none; /* clicks bubble to the <a>/button itself */
}

/* The rotating conic — bright comet sweeping around the perimeter */
.mb-pill::before {
  content: "";
  position: absolute;
  /* Square so rotation stays centered no matter the pill width */
  width: max(220%, 220px);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 250deg,
    rgba(56,189,248,0)   265deg,
    var(--cyan-hi)       295deg,
    #ffffff              322deg,
    var(--cyan-hi)       345deg,
    transparent          360deg
  );
  animation: mbPillSpin 2.4s linear infinite;
  z-index: 0;
  pointer-events: none;
}

/* The mask layer — sits on top of conic, leaving only a ring visible.
   `background: inherit` reuses the button's own gradient/colour so
   there is no visible seam between mask and button perimeter. */
.mb-pill::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: inherit;
  background: inherit;
  z-index: 1;
  pointer-events: none;
}

@keyframes mbPillSpin { to { transform: rotate(360deg); } }

/* Outer halo — kept subtle so it never bleeds into a neighbouring
   button's click area (hero-ctas has only 14px gap). */
.mb-pill {
  box-shadow: 0 0 10px rgba(56,189,248,.22), 0 0 18px rgba(96,165,250,.14);
  animation: mbPillHalo 3.2s ease-in-out infinite;
}
@keyframes mbPillHalo {
  0%, 100% { box-shadow: 0 0  8px rgba(56,189,248,.20), 0 0 14px rgba(96,165,250,.12); }
  50%      { box-shadow: 0 0 14px rgba(56,189,248,.36), 0 0 22px rgba(96,165,250,.20); }
}

/* Light mode — keep the comet bright, soften the outer halo on white */
[data-theme="light"] .mb-pill::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 250deg,
    rgba(255,255,255,0)  265deg,
    #ffffff              290deg,
    var(--cyan-hi)       320deg,
    var(--accent-hi)     345deg,
    transparent          360deg
  );
}
[data-theme="light"] .mb-pill {
  animation: mbPillHaloLight 3.2s ease-in-out infinite;
}
@keyframes mbPillHaloLight {
  0%, 100% { box-shadow: 0 0  8px rgba(37,99,235,.22), 0 0 14px rgba(8,145,178,.14); }
  50%      { box-shadow: 0 0 14px rgba(37,99,235,.38), 0 0 22px rgba(8,145,178,.24); }
}

/* Hover: ZERO change. No transform, no box-shadow override, no animation
   duration change. Anything that switches on :hover can re-trigger when
   the cursor moves between characters and reads as flicker on the text. */
.mb-pill:hover { transform: none !important; }
.mb-pill.btn-primary:hover { transform: none !important; }
/* Removed the previous .mb-pill:hover::before animation-duration speed-up
   for this reason — the comet now runs at a single steady pace. */

/* btn-glow had its own ::after gradient — neutralise on .mb-pill
   so our mask-::after is the only one running. */
.btn-glow.mb-pill::after {
  /* defaults above still apply; we just make sure no leftover anim */
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .mb-pill, .mb-pill::before { animation: none !important; }
}

/* ============================================================
   18b. MOVING BORDER (Aceternity-style)
   • An animated bright "comet" + glow tracing the border
   • Visible always (not just on hover)
   • Light/dark mode tuned
   Applied to nav-cta etc. via JS (.mod-beam class).
   The element stays clickable; comet lives behind content.
   ============================================================ */
.mod-beam {
  position: relative;
  isolation: isolate;
}
/* CRITICAL: keep chat-bubble's fixed positioning. .mod-beam {position:relative}
   would otherwise un-fix it and the floating button would disappear. */
.chat-bubble.mod-beam { position: fixed !important; }
.mod-beam > * { position: relative; z-index: 2; }

/* (1) Primary comet — long bright arc spinning around perimeter */
.mod-beam::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--mod-angle, 0deg),
    transparent 0deg,
    transparent 180deg,
    rgba(96,165,250,0)     200deg,
    var(--cyan-hi)         260deg,
    var(--accent-hi)       300deg,
    #ffffff                335deg,
    var(--accent-hi)       350deg,
    transparent            360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: modSpin 2s linear infinite;
  pointer-events: none;
  z-index: 1;
  filter:
    drop-shadow(0 0 8px var(--accent-hi))
    drop-shadow(0 0 16px rgba(96,165,250,.65));
}

/* (2) Soft ambient halo around the whole element — pulses gently */
.mod-beam {
  box-shadow:
    0 0 0   0  rgba(96,165,250,0),
    0 0 18px 0 rgba(96,165,250,.35);
  animation: modBeamHalo 3.4s ease-in-out infinite;
}
@keyframes modBeamHalo {
  0%, 100% { box-shadow: 0 0 14px rgba(96,165,250,.28); }
  50%      { box-shadow: 0 0 28px rgba(96,165,250,.55); }
}

/* (3) Second comet — opposite direction, different colour */
.mod-beam.mod-beam-2::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from calc(var(--mod-angle, 0deg) * -1 + 180deg),
    transparent 0deg,
    transparent 260deg,
    var(--ok-hi)           300deg,
    var(--cyan-hi)         330deg,
    transparent            360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: modSpin 4.2s linear infinite reverse;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 6px rgba(110,231,183,.6));
}

/* ---- LIGHT MODE TUNING ----
   Note: .nav-cta has a blue gradient bg in both themes, so a
   white+cyan beam is what contrasts in BOTH themes. We boost the
   outer halo intensity in light mode so the surrounding white
   nav background still shows the glow. */
[data-theme="light"] .mod-beam::before {
  background: conic-gradient(
    from var(--mod-angle, 0deg),
    transparent 0deg,
    transparent 240deg,
    rgba(255,255,255,0)   250deg,
    var(--cyan-hi)        285deg,
    #ffffff               320deg,
    var(--cyan-hi)        345deg,
    transparent           360deg
  );
  filter:
    drop-shadow(0 0 7px var(--cyan-hi))
    drop-shadow(0 0 14px rgba(8,145,178,.55));
}
[data-theme="light"] .mod-beam {
  animation: modBeamHaloLight 3.4s ease-in-out infinite;
}
@keyframes modBeamHaloLight {
  0%, 100% { box-shadow: 0 0 14px rgba(37,99,235,.30); }
  50%      { box-shadow: 0 0 26px rgba(37,99,235,.50); }
}
[data-theme="light"] .mod-beam.mod-beam-2::after {
  background: conic-gradient(
    from calc(var(--mod-angle, 0deg) * -1 + 180deg),
    transparent 0deg,
    transparent 270deg,
    var(--ok-hi)          305deg,
    #ffffff               335deg,
    transparent           360deg
  );
  filter: drop-shadow(0 0 6px rgba(110,231,183,.7));
}

/* Reduce motion: keep static glow only */
@media (prefers-reduced-motion: reduce) {
  .mod-beam, .mod-beam::before, .mod-beam.mod-beam-2::after { animation: none !important; }
  .mod-beam::before {
    background: linear-gradient(135deg, var(--accent-hi), var(--cyan-hi));
    opacity: .6;
  }
}


/* ============================================================
   18c. METEORS — slanted bright streaks across hero
   ============================================================ */
.mod-meteors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.mod-meteor {
  position: absolute;
  top: -10%;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--accent-hi);
  box-shadow: 0 0 8px var(--accent-hi);
  transform: rotate(215deg);
  animation: meteorFall linear infinite;
}
.mod-meteor::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 120px; height: 1px;
  background: linear-gradient(90deg, var(--accent-hi), transparent);
}
@keyframes meteorFall {
  0%   { transform: translate3d(0, -20vh, 0) rotate(215deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate3d(-100vw, 120vh, 0) rotate(215deg); opacity: 0; }
}
[data-theme="light"] .mod-meteor { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
[data-theme="light"] .mod-meteor::before { background: linear-gradient(90deg, var(--accent), transparent); }

/* ============================================================
   18d. SPARKLES — twinkling dots scattered behind CTA card
   ============================================================ */
.mod-sparkle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  animation: sparkleTwinkle 3s ease-in-out infinite;
  box-shadow: 0 0 6px #fff;
}
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(.4); }
  50%      { opacity: .9; transform: scale(1); }
}
[data-theme="light"] .mod-sparkle { background: var(--accent); box-shadow: 0 0 6px var(--accent-hi); }

/* ============================================================
   18e. ANIMATED UNDERLINE — nav links elegant hover
   ============================================================ */
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--cyan-hi));
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform .35s var(--ease);
  border-radius: 2px;
}
.nav-links a:hover::after { transform-origin: left center; transform: scaleX(1); }

/* ============================================================
   18. ARROW micro-motion inside all primary CTAs
   ============================================================ */
.btn-primary svg path { transform-origin: center; }
.btn-primary:hover svg path { animation: btnArrow .6s var(--spring); }
/* .mb-pill buttons already have the moving comet — kill the arrow
   bounce so the eye has one focal motion, not two competing ones. */
.btn-primary.mb-pill:hover svg path { animation: none !important; }
@keyframes btnArrow {
  0%   { transform: translateX(-4px); opacity: .7; }
  60%  { transform: translateX(3px);  opacity: 1;  }
  100% { transform: translateX(0);    opacity: 1;  }
}

/* ============================================================
   19. NAV — responsive cleanup + compact "Discută cu noi"
   ============================================================ */
.nav-cta {
  white-space: nowrap;
  padding: 9px 18px !important;
  font-size: 13px !important;
  gap: 7px;
  /* Pill shape — conic comet flows smoothly around the rounded ends */
  border-radius: 999px !important;
  transform-origin: center center;
}
.nav-cta svg { width: 14px !important; height: 14px !important; }

@media (max-width: 1280px) {
  .nav-cta { padding: 8px 14px !important; }
  .nav-links { gap: 22px; font-size: 14.5px; }
}

/* ============================================================
   21. CHAT BUBBLE — proper icon centering inside circle
   Original CSS sets .chat-ico-x to position:absolute (out of flow),
   which broke place-items:center on the grid parent. We stack both
   icons on the same grid cell so the message + X icons remain
   perfectly centered while their transitions still swap.
   ============================================================ */
.chat-bubble {
  display: grid !important;
  place-items: center !important;
}
.chat-bubble .chat-ico-msg,
.chat-bubble .chat-ico-x {
  position: static !important;
  grid-area: 1 / 1;
  width: 24px !important;
  height: 24px !important;
}
/* Around 1024-1100px collapse CTA to icon-only (arrow) — text moved to mobile menu */
@media (max-width: 1100px) {
  .nav-cta { padding: 10px; gap: 0; width: 40px; height: 40px; justify-content: center; }
  .nav-cta span { display: none; }
  .nav-cta svg { width: 16px; height: 16px; }
}

/* Mobile (≤900px) — clean grouping, no awkward spacing */
@media (max-width: 900px) {
  /* Keep horizontal padding on the nav inner so logo + toggle don't
     glue to the viewport edges. Padding inherited from .container
     (0 28px) was overridden by the previous rule. */
  .nav-inner { padding: 10px 20px !important; gap: 0; }
  .nav-links { display: none; }
  .brand img { height: 32px; }
  /* Tagline visible from 420px-900px (we have room). Hide only sub 420. */
  .brand-tagline { display: inline-flex !important; }
  /* Tight cluster on the right */
  .theme-toggle { margin-left: auto; order: 2; }
  .nav-cta { order: 3; margin-left: 8px; }
  .nav-toggle { order: 4; margin-left: 8px; }
}
@media (max-width: 419px) {
  .brand-tagline { display: none !important; }
}
@media (max-width: 480px) {
  .nav-cta { display: none; }
  .theme-toggle, .nav-toggle {
    width: 40px; height: 40px;
    display: inline-grid !important; place-items: center;
  }
  .nav-toggle svg { width: 22px; height: 22px; }
}

/* Mobile menu — make it modern panel, not a plain list */
.mobile-menu {
  border-radius: 0 0 22px 22px;
}
.mobile-menu .nav-cta {
  width: auto; height: auto;
  padding: 14px 22px; gap: 8px;
  display: inline-flex !important;
  font-size: 15px;
  margin: 8px 0 0;
}
.mobile-menu .nav-cta span { display: inline !important; }
.mobile-menu .nav-cta svg  { width: 16px !important; height: 16px !important; }

/* ============================================================
   ★ FAZA C–F — POLISH LAYER (Redesign 2026)
   Surgical refinements over the existing styles.css. Each block
   keeps the section's structure but tightens motion, hover, and
   border treatment to match the hi-tech vibe.
   ============================================================ */

/* ---- C1. Hero stats: cleaner card + accent ring on icon ---- */
.hero-stat {
  isolation: isolate;
  transition: transform .35s var(--ease), border-color .25s var(--ease), box-shadow .35s var(--ease);
}
.hero-stat:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 14px 36px -16px rgba(59,130,246,.45);
}
.hero-stat .stat-ico {
  position: relative;
}
.hero-stat .stat-ico::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 70%, var(--cyan-hi) 88%, transparent 100%);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
  filter: blur(4px);
  z-index: -1;
}
.hero-stat:hover .stat-ico::after { opacity: .6; }

/* ---- C2. About: stronger visual weight on body + legal card ---- */
.about .about-copy p strong { color: var(--text); }
.legal-card {
  transition: transform .35s var(--ease), border-color .25s var(--ease), box-shadow .35s var(--ease);
}
.legal-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 18px 44px -20px rgba(59,130,246,.40);
}

/* ---- C3. Services: subtle accent border on hover (already has glow) ---- */
.service-card {
  transition: transform .4s var(--ease), border-color .25s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease);
}
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent 60%, var(--accent), var(--cyan-hi));
  -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 .35s var(--ease);
  pointer-events: none;
}
.service-card:hover::before { opacity: .9; }

/* ---- D1. Process steps: stronger numerical typography ---- */
.process-step { isolation: isolate; }
.process-step .step-num {
  background: linear-gradient(135deg, var(--accent), var(--cyan-hi));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- D2. Projects: card hover with accent ring ---- */
.project-card {
  transition: transform .4s var(--ease), border-color .25s var(--ease), box-shadow .4s var(--ease);
}
.project-card:hover {
  border-color: var(--accent);
  box-shadow: 0 22px 60px -28px rgba(59,130,246,.50);
}

/* ---- D3. Tech band: smooth marquee, no stutter ---- */
.tech-band {
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* ---- E1. Reviews/testimonials: quote mark in background ---- */
.review-card {
  position: relative;
  isolation: isolate;
  transition: transform .35s var(--ease), border-color .25s var(--ease), box-shadow .35s var(--ease);
}
.review-card::before {
  content: "“";
  position: absolute;
  top: -8px; right: 12px;
  font-family: Georgia, serif;
  font-size: 96px;
  font-weight: 900;
  color: var(--accent);
  opacity: .08;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}
.review-card > * { position: relative; z-index: 1; }
.review-card:hover { border-color: var(--accent); transform: translateY(-2px); }

/* ---- E2. Dashboard preview: subtle frame glow ---- */
.dashboard-preview { transition: box-shadow .4s var(--ease); }
.dashboard-preview:hover {
  box-shadow: 0 28px 70px -28px rgba(59,130,246,.45);
}

/* ---- E3. Why us: big numerals + accent border ring on hover ---- */
.why-card {
  isolation: isolate;
  transition: transform .4s var(--ease), border-color .25s var(--ease), box-shadow .35s var(--ease);
}
.why-card .num {
  background: linear-gradient(135deg, var(--accent), var(--cyan-hi));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.why-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), var(--cyan-hi), transparent 80%);
  -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 .35s var(--ease);
  pointer-events: none;
}
.why-card:hover::after { opacity: .8; }

/* ---- E4. Founder: spotlight card ---- */
.founder-card {
  transition: transform .4s var(--ease), border-color .25s var(--ease), box-shadow .4s var(--ease);
}
.founder-card:hover {
  border-color: var(--accent);
  box-shadow: 0 30px 70px -30px rgba(59,130,246,.50);
}

/* ---- F1. FAQ: cleaner focus + chevron rotation ---- */
.faq-item {
  isolation: isolate;
  transition: border-color .25s var(--ease), background .3s var(--ease);
}
.faq-item .faq-q {
  transition: color .25s var(--ease);
}
.faq-item.open .faq-q { color: var(--accent-hi); }
.faq-item:hover { border-color: var(--accent); }

/* ---- F2. CTA banner: keep original sparkles (beam sweep removed —
   it crossed in front of the heading and read as text selection). */

/* ---- F3. Contact form fields: floating label + accent focus ---- */
.contact-card {
  transition: transform .4s var(--ease), border-color .25s var(--ease), box-shadow .4s var(--ease);
}
.contact-card:hover {
  border-color: var(--accent);
  box-shadow: 0 22px 56px -24px rgba(59,130,246,.45);
}

/* ---- F4. Footer: cleaner link hover ---- */
.footer a { transition: color .2s var(--ease); }
.footer a:hover { color: var(--accent-hi); }

/* ============================================================
   ★ FAZA H — CLEANUP (dead code overrides)
   The original styles use these classes but they're either
   never applied (orbit blob) or replaced by .mb-pill / mod-beam.
   We zero them out so we keep file diffs small but eliminate
   stale visual weight. Real removal happens in a follow-up.
   ============================================================ */
.mb-orbit, .mb-orbit-2 { display: none !important; }
/* .btn-glow legacy gradient — neutralised in favour of mb-pill comet */
.btn-glow:not(.mb-pill)::after { animation-duration: 8s; opacity: .35; }

/* ============================================================
   ★★★ 21ST-DEV INSPIRED REDESIGN ★★★
   Refines hero · cards · sections with patterns ported from
   shiny-button, hero-1, bento-monochrome, testimonials.
   All vanilla CSS — no React, no Tailwind, no JS deps.
   ============================================================ */

/* ============================================================
   HERO — bigger hi-tech grid + bottom radial accent (hero-1 vibe)
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
}
/* Stronger grid texture under the hero — replaces our soft mask
   with a more architectural reading. */
.hero-bg-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) !important;
  background-size: 96px 96px !important;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 110%) !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 110%) !important;
}

/* Bottom radial accent — adds depth without distracting from the heading */
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -50%;
  width: 140%;
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
    rgba(59,130,246,.18) 0%,
    rgba(6,182,212,.08) 40%,
    transparent 75%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] .hero::after {
  background: radial-gradient(closest-side,
    rgba(37,99,235,.14) 0%,
    rgba(8,145,178,.06) 40%,
    transparent 75%);
}

/* Hero badge — chrome chip with chevron-style polish */
.hero-badge {
  position: relative;
  isolation: isolate;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.hero-badge:hover { border-color: var(--accent); }
.hero-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 60%);
  pointer-events: none;
}
[data-theme="light"] .hero-badge::before {
  background: linear-gradient(135deg, rgba(255,255,255,.6), transparent 60%);
}

/* Hero h1 — softer color contrast on dark, sharper line-height */
.hero-title {
  line-height: 1.02;
  letter-spacing: -0.038em;
}
[data-theme="dark"] .hero-title .hero-text-light {
  color: #E2E8F0;
}
.hero-title .accent {
  position: relative;
  display: inline-block;
}
/* Accent text gets a thin baseline glow (hi-tech touch) */
.hero-title .accent::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan-hi), transparent);
  opacity: .5;
  filter: blur(2px);
}

/* Hero lead — better readability */
.hero-lead {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ============================================================
   SECTIONS — consistent spacing & section heading polish
   ============================================================ */
section[class*="section"], .about, .services, .projects, .testimonials,
.process, .why, .dashboard-preview, .founder, .faq, .contact, .cta-banner {
  position: relative;
}
.eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

/* Display headings get gradient on the right-aligned accent word */
.display .accent, h2.display em, h3.display em {
  background: linear-gradient(135deg, var(--accent-hi), var(--cyan-hi));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   SERVICE CARDS — bento-inspired (one card pops larger)
   ============================================================ */
.service-card {
  isolation: isolate;
  overflow: hidden;
}
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(59,130,246,.12),
    transparent 50%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.service-card:hover::after { opacity: 1; }
.service-card > * { position: relative; z-index: 1; }

/* ============================================================
   TESTIMONIAL CARDS — softer shadow, large quote behind text
   ============================================================ */
.review-card {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-elev-hi) 92%, var(--accent) 8%),
    var(--bg-elev-hi));
}
[data-theme="light"] .review-card {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

/* ============================================================
   PROJECT CARDS — accent corner highlight on hover
   ============================================================ */
.project-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.project-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-hi));
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.project-card:hover::before { opacity: 1; }

/* ============================================================
   PROCESS STEPS — sharper progress connector
   ============================================================ */
.process-step {
  position: relative;
}
.process-step::after {
  content: "";
  position: absolute;
  right: -16px;
  top: 32px;
  width: 32px;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    var(--line) 0, var(--line) 3px,
    transparent 3px, transparent 6px);
}
.process-step:last-child::after { display: none; }
@media (max-width: 900px) {
  .process-step::after { display: none; }
}

/* ============================================================
   WHY US CARDS — large gradient numerals (already styled above
   in FAZA C–F polish; here we sharpen the spacing).
   ============================================================ */
.why-card .num { font-feature-settings: "tnum"; line-height: 1; }

/* ============================================================
   CTA BANNER — kept original (beam sweep removed because it
   visually overlapped the heading and read as a text-selection
   highlight; original sparkles + gradient handle motion fine).
   ============================================================ */

/* ============================================================
   CONTACT CARDS — accent border + dot indicator
   ============================================================ */
.contact-card {
  position: relative;
}
.contact-card .cc-icon {
  position: relative;
}
.contact-card .cc-icon::after {
  content: "";
  position: absolute;
  top: -4px; right: -4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  opacity: .8;
}

/* ============================================================
   FOOTER — separator gradient
   ============================================================ */
.footer {
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--accent) 30%,
    var(--cyan-hi) 50%,
    var(--accent) 70%,
    transparent);
  opacity: .35;
}

/* ============================================================
   GLOBAL — section transition gradients (separator polish)
   ============================================================ */
.about + section,
.services + section,
.process + section,
.projects + section,
.testimonials + section,
.dashboard-preview + section,
.why + section,
.founder + section,
.faq + section {
  position: relative;
}
.about::before,
.services::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  opacity: .5;
}

/* Anchor targets clear the fixed nav at scroll */
section[id] { scroll-margin-top: 96px; }

/* ============================================================
   CTA BANNER "Ai un proiect" — light-mode contrast + mobile fix
   ============================================================ */

/* Light mode: stronger card background so the gradient reads */
[data-theme="light"] .cta-banner.cta-v2 .cta-card {
  background:
    linear-gradient(140deg, rgba(37,99,235,.10) 0%, rgba(6,182,212,.06) 50%, rgba(16,185,129,.04) 100%),
    #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 30px 70px -30px rgba(37,99,235,.20) !important;
}

/* Light mode: keep the floating "arrow" button visible (was white-on-white
   because [data-theme=light] .cta-vc overrode the gradient bg). */
[data-theme="light"] .cta-vc-3 {
  background: linear-gradient(135deg, var(--accent), var(--accent-hi)) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 10px 24px -10px rgba(37,99,235,.5);
}
[data-theme="light"] .cta-vc-3 svg { color: #ffffff; }

/* Tablet + mobile: stack to single column, hide the decorative widgets.
   Breakpoint at 1024px overrides the legacy 960px media query in
   styles.css so there is no in-between state where the visual sits
   awkwardly below the text. */
@media (max-width: 1024px) {
  .cta-banner.cta-v2 { padding: 50px 0 !important; }
  .cta-card {
    padding: 32px 22px !important;
    border-radius: 22px !important;
  }
  .cta-card-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .cta-card-visual {
    display: none !important; /* decorative widgets break the layout on tablet */
  }
  .cta-banner.cta-v2 .cta-card-h {
    font-size: clamp(26px, 6vw, 36px) !important;
    line-height: 1.1;
  }
  .cta-card-sub {
    font-size: 14.5px !important;
    line-height: 1.55;
  }
  .cta-card-actions {
    flex-direction: column;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .cta-card-actions .btn-primary { width: 100%; justify-content: center; }
  .cta-card-link {
    align-self: center;
    font-size: 13.5px !important;
  }
  .cta-card-meta {
    flex-wrap: wrap;
    gap: 6px 10px !important;
    font-size: 12px !important;
    justify-content: flex-start;
  }
  .cta-card-meta .dot { display: none; }
}

/* Very small phones */
@media (max-width: 420px) {
  .cta-card { padding: 26px 18px !important; border-radius: 20px !important; }
  .cta-banner.cta-v2 .cta-card-h { font-size: 26px !important; }
  .cta-card-sub { font-size: 14px !important; }
  .cta-card-meta { font-size: 11.5px !important; }
}

/* ============================================================
   ★★★ TESTIMONIALS — centered hero header + responsive grid
   Layout that works gracefully with 1 card OR many (auto-fit).
   Light + dark, soft elevation, big quote watermark behind text.
   ============================================================ */

/* Section header — LEFT-aligned, same pattern as rest of page
   (eyebrow with left line, heading + lead align left). */
section.testimonials .section-head {
  text-align: left;
  max-width: 760px;
  margin: 0 0 40px;
}
section.testimonials .section-head h2.display {
  line-height: 1.05;
  margin-top: 12px;
}
section.testimonials .section-head p {
  max-width: 64ch;
  margin-top: 14px;
}

/* ============================================================
   Carousel — auto-scroll horizontal track + pause on hover/touch.
   Desktop ≥1200px: 4 cards, large 900-1199: 3, tablet 640-899: 2, mobile <640: 1+peek.
   Track is `#reviewsList.testimonials-grid` (legacy class kept for back-compat);
   wrapper `.reviews-carousel` provides arrows + dots + JS-driven auto-scroll.
   ============================================================ */
section.testimonials .reviews-carousel {
  position: relative;
  margin: 0 -8px;
}
section.testimonials .reviews-viewport {
  overflow: hidden;
  padding: 8px 8px 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
section.testimonials .testimonials-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  grid-template-columns: none !important;
}
section.testimonials .testimonials-grid::-webkit-scrollbar { display: none; }

/* Card sizing — TARGETS up to 4 cards visible. If 4 don't fit cleanly, the min-width
   kicks in and the next card peeks at the edge (natural "there's more" affordance).
   On wide ≥1500px: 4 full. Below that: 3 / 2.5 / 1.5 / 1 cards visible with peek. */
section.testimonials .testimonials-grid > .review-card {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: max(calc((100% - 60px) / 4), 320px);
  scroll-snap-align: start;
  min-width: 0;
  /* Equal-height cards with consistent footer alignment */
  display: flex !important;
  flex-direction: column;
  align-self: stretch;
}
section.testimonials .testimonials-grid > .review-card::before {
  font-size: 120px !important;
  top: -16px !important;
  right: 12px !important;
}
/* Pin the author block to the bottom; the gap above grows on short reviews. */
section.testimonials .testimonials-grid > .review-card .review-author {
  margin-top: auto !important;
}
section.testimonials .testimonials-grid > .review-card .review-read-more {
  margin-bottom: 18px;
}

/* Mobile — single card + peek (clear horizontal scroll cue). */
@media (max-width: 640px) {
  section.testimonials .testimonials-grid > .review-card {
    flex-basis: 85%;
    min-width: 0;
  }
  section.testimonials .reviews-viewport {
    -webkit-mask-image: none;
            mask-image: none;
    padding: 8px 16px 4px;
  }
}
/* Very small mobile — give the peek a bit more room. */
@media (max-width: 380px) {
  section.testimonials .testimonials-grid > .review-card {
    flex-basis: 88%;
  }
}

/* When only 1 card → no carousel needed, anchor left */
section.testimonials .testimonials-grid:has(> .review-card:only-child) {
  overflow: visible;
}
section.testimonials .testimonials-grid:has(> .review-card:only-child) > .review-card {
  flex-basis: min(560px, 100%);
}

/* Arrows — circular, floating outside cards */
section.testimonials .reviews-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), opacity .25s var(--ease), transform .2s var(--ease);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.45);
}
[data-theme="light"] section.testimonials .reviews-arrow {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 10px 24px -14px rgba(15,23,42,.18);
}
section.testimonials .reviews-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
section.testimonials .reviews-arrow.prev { left: -22px; }
section.testimonials .reviews-arrow.next { right: -22px; }
section.testimonials .reviews-arrow svg { width: 20px; height: 20px; }
section.testimonials .reviews-arrow[disabled] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.8);
}
@media (max-width: 700px) {
  section.testimonials .reviews-arrow { display: none; }
}

/* Dots */
section.testimonials .reviews-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
section.testimonials .reviews-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--line-strong);
  cursor: pointer;
  transition: background .25s var(--ease), width .25s var(--ease);
}
section.testimonials .reviews-dot.on {
  width: 24px;
  border-radius: 4px;
  background: var(--accent);
}
section.testimonials .reviews-dots:empty { display: none; }

/* Card — clean elevation, big quote watermark behind */
section.testimonials .review-card {
  position: relative;
  isolation: isolate;
  padding: 26px 24px !important;
  border-radius: 18px !important;
  background: var(--bg-elev) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 14px 36px -22px rgba(0,0,0,.55);
  transition: border-color .25s var(--ease), box-shadow .35s var(--ease);
  overflow: hidden;
}
[data-theme="light"] section.testimonials .review-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 14px 30px -16px rgba(15,23,42,.12);
}
section.testimonials .review-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 20px 50px -22px rgba(59,130,246,.45);
}

/* Big quote watermark behind text */
section.testimonials .review-card::before {
  content: "“";
  position: absolute;
  top: -18px;
  right: 14px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 140px;
  font-weight: 900;
  color: var(--accent);
  opacity: .08;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] section.testimonials .review-card::before { opacity: .10; }
section.testimonials .review-card > * { position: relative; z-index: 1; }

/* Stars — accent-coloured, slightly larger */
section.testimonials .review-card .review-stars {
  display: inline-flex;
  gap: 3px;
  margin-bottom: 14px;
}
section.testimonials .review-card .review-stars svg {
  width: 16px;
  height: 16px;
  fill: #f59e0b;
}

/* Quote text */
section.testimonials .review-card .review-text {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 22px;
  letter-spacing: -0.003em;
  /* Reasonable line length */
  max-width: 60ch;
}

/* Author row */
section.testimonials .review-card .review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
section.testimonials .review-card .review-avatar {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--cyan-hi));
  background-size: cover;
  background-position: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  letter-spacing: -0.01em;
  overflow: hidden;
}
section.testimonials .review-card .review-avatar img { border-radius: inherit; }
section.testimonials .review-card .review-author-name {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
section.testimonials .review-card .review-author-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--text-mute);
  letter-spacing: .02em;
  margin-top: 3px;
}

/* Featured card — visible accent to stand out */
section.testimonials .review-card.featured {
  background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(6,182,212,.03) 100%), var(--bg-elev) !important;
  border-color: rgba(59,130,246,.35) !important;
  box-shadow: 0 0 0 1px rgba(59,130,246,.10), 0 8px 32px -12px rgba(59,130,246,.22) !important;
}
[data-theme="light"] section.testimonials .review-card.featured {
  background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(6,182,212,.02) 100%), #ffffff !important;
  border-color: rgba(37,99,235,.28) !important;
  box-shadow: 0 0 0 1px rgba(37,99,235,.08), 0 8px 32px -12px rgba(37,99,235,.15) !important;
}

/* Mobile */
@media (max-width: 640px) {
  section.testimonials .section-head { margin-bottom: 36px; }
  section.testimonials .review-card { padding: 22px 18px !important; }
  section.testimonials .review-card::before { font-size: 100px; right: 10px; top: -10px; }
  section.testimonials .review-card .review-text { font-size: 14.5px; }
}

/* ============================================================
   FAQ — rounded card per item, generous padding, no flush text
   ============================================================ */
.faq-grid, .faq-list, .faq-items {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  border: 1px solid var(--line-strong) !important;
  border-radius: 14px !important;
  background: var(--bg-elev) !important;
  transition: border-color .25s var(--ease), background .25s var(--ease);
  padding: 0 22px !important;
  overflow: hidden;
}
.faq-item:first-child { border-top: 1px solid var(--line-strong) !important; }
[data-theme="light"] .faq-item {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}
.faq-item:hover {
  border-color: var(--accent) !important;
}
.faq-item.open {
  border-color: var(--accent) !important;
  background: linear-gradient(180deg, rgba(59,130,246,.06), transparent 80%), var(--bg-elev) !important;
}
[data-theme="light"] .faq-item.open {
  background: linear-gradient(180deg, rgba(37,99,235,.04), transparent 80%), #ffffff !important;
}

/* Question button — keep flush internally so 22px padding-x of parent does the work */
.faq-item .faq-q {
  padding: 20px 0 !important;
  font-size: 16px !important;
  letter-spacing: -0.005em;
  line-height: 1.4;
}
.faq-item.open .faq-q { color: var(--accent-hi); }

/* Answer body — proper top padding when open, bottom breathing room */
.faq-item .faq-a-inner {
  padding: 4px 0 22px !important;
  font-size: 14.5px !important;
  line-height: 1.7;
  max-width: 70ch;
}
.faq-item.open .faq-a { max-height: 600px !important; }

/* Mobile responsive */
@media (max-width: 640px) {
  .faq-item { padding: 0 16px !important; border-radius: 12px !important; }
  .faq-item .faq-q { font-size: 15px !important; padding: 16px 0 !important; gap: 12px !important; }
  .faq-item .faq-a-inner { font-size: 14px !important; padding: 2px 0 18px !important; }
}

/* ============================================================
   ★★★ BIZ-PANEL — soft client-facing dashboard mockup
   Single compact card, browser-frame chrome, big chart, 3 stats
   + one celebratory chip. Light + dark friendly. Premium feel.
   ============================================================ */
.biz-panel {
  max-width: 920px;
  margin: 0 auto;
  position: relative;
}
.biz-frame {
  border-radius: 22px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 30px 80px -36px rgba(15,23,42,.55),
    0 0 0 1px rgba(59,130,246,.06);
}
[data-theme="light"] .biz-frame {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 24px 60px -28px rgba(15,23,42,.16),
    0 0 0 1px rgba(37,99,235,.05);
}

/* --- chrome --- */
.biz-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
[data-theme="light"] .biz-chrome {
  background: linear-gradient(180deg, rgba(15,23,42,.02), transparent);
}
.biz-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.biz-brand-mark {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--cyan-hi));
  color: #ffffff;
  flex-shrink: 0;
}
.biz-brand-mark svg { width: 18px; height: 18px; }
.biz-brand-name {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.biz-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--text-mute);
  letter-spacing: .02em;
}
.biz-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  animation: bizDotPulse 2s ease-in-out infinite;
}
@keyframes bizDotPulse { 0%,100%{opacity:.6;} 50%{opacity:1;} }

/* --- hero chart area --- */
.biz-hero {
  padding: 26px 28px 0;
}
.biz-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.biz-hero-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 6px;
  font-weight: 600;
}
.biz-hero-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.biz-hero-num {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--text) 60%, var(--accent-hi));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .biz-hero-num {
  background: linear-gradient(135deg, #0f172a 60%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
}
.biz-hero-cur {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--text-mute);
  font-weight: 500;
  letter-spacing: .02em;
}
.biz-hero-delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.25);
  color: var(--ok);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.biz-hero-delta svg { width: 14px; height: 14px; }

.biz-chart {
  width: 100%;
  height: 160px;
  display: block;
}
.biz-chart-axis {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: .04em;
  padding: 6px 2px 18px;
}

/* --- bottom: 3 stats + cheer chip --- */
.biz-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.5fr;
  gap: 14px;
  padding: 16px 22px 22px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(59,130,246,.03));
}
[data-theme="light"] .biz-bottom {
  background: linear-gradient(180deg, transparent, rgba(37,99,235,.025));
}
.biz-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  transition: border-color .25s var(--ease);
}
[data-theme="light"] .biz-stat { background: #f9fafb; border-color: #e5e7eb; }
.biz-stat:hover { border-color: var(--accent); }

.biz-stat-ico {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent);
  color: var(--c, var(--accent));
  flex-shrink: 0;
}
.biz-stat-ico svg { width: 18px; height: 18px; }
.biz-stat-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 2px;
}
.biz-stat-v {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.biz-stat-v small {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-mute);
  margin-left: 1px;
}

/* Cheer chip */
.biz-cheer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(6,182,212,.06));
  border: 1px solid rgba(59,130,246,.22);
}
[data-theme="light"] .biz-cheer {
  background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(8,145,178,.04));
  border-color: rgba(37,99,235,.20);
}
.biz-cheer-emoji {
  font-size: 22px;
  line-height: 1;
}
.biz-cheer-title {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.biz-cheer-sub {
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 2px;
  line-height: 1.35;
}

/* Responsive */
@media (max-width: 900px) {
  .biz-bottom { grid-template-columns: repeat(2, 1fr); }
  .biz-cheer { grid-column: span 2; }
}
@media (max-width: 540px) {
  .biz-chrome { padding: 12px 16px; }
  .biz-hero { padding: 18px 18px 0; }
  .biz-hero-num { font-size: 32px; }
  .biz-bottom { grid-template-columns: 1fr; padding: 14px; }
  .biz-cheer { grid-column: span 1; }
}

/* Hide leftover dp-panel from previous iteration */
.dp-panel { display: none; }

/* ============================================================
   ★★★ DEPLOY PIPELINE PANEL — anti-slop redesign per taste-skill
   Single asymmetric panel with chrome, pipeline stages, log + metrics.
   Responsive: 4-col stages → 2-col → stack. Log + metrics: 2-col → 1-col.
   ============================================================ */
.dp-panel {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.dp-panel-inner {
  position: relative;
  border-radius: 18px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 30px 80px -36px rgba(15,23,42,.55),
    0 0 0 1px rgba(59,130,246,.06);
}
[data-theme="light"] .dp-panel-inner {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 22px 56px -28px rgba(15,23,42,.18),
    0 0 0 1px rgba(37,99,235,.05);
}

/* --- chrome / "window" frame --- */
.dp-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-mute);
}
[data-theme="light"] .dp-chrome {
  background: linear-gradient(180deg, rgba(15,23,42,.03), transparent);
}
.dp-chrome-dots { display: inline-flex; gap: 6px; }
.dp-chrome-dots i {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--line-strong);
}
.dp-chrome-dots i:nth-child(1) { background: #ef4444; }
.dp-chrome-dots i:nth-child(2) { background: #f59e0b; }
.dp-chrome-dots i:nth-child(3) { background: #10b981; }
.dp-chrome-title { color: var(--text); font-weight: 500; letter-spacing: -0.005em; }
.dp-chrome-meta { margin-left: auto; color: var(--text-mute); }
.dp-chrome-meta::before {
  content: "●";
  display: inline-block;
  margin-right: 6px;
  color: var(--ok);
  animation: dpPulse 2s ease-in-out infinite;
}
@keyframes dpPulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }

/* --- body padding --- */
.dp-body { padding: 26px; }
@media (max-width: 700px) { .dp-body { padding: 18px; } }

/* --- pipeline row (4 stages) --- */
.dp-pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 26px;
  position: relative;
}
/* Connecting dotted line under stages — only on desktop */
@media (min-width: 901px) {
  .dp-pipeline::before {
    content: "";
    position: absolute;
    top: 38px;
    left: 12.5%;
    right: 12.5%;
    height: 1px;
    background: repeating-linear-gradient(90deg,
      var(--line-strong) 0, var(--line-strong) 4px,
      transparent 4px, transparent 9px);
    z-index: 0;
  }
}
.dp-stage {
  position: relative;
  z-index: 1;
  padding: 14px;
  border-radius: 12px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  transition: border-color .25s var(--ease);
}
[data-theme="light"] .dp-stage { background: #f8fafc; border-color: #e2e8f0; }
.dp-stage:hover { border-color: var(--accent); }

.dp-stage-num {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mute);
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 8px;
  letter-spacing: .04em;
}
[data-theme="light"] .dp-stage-num { background: #ffffff; border-color: #e2e8f0; }
.dp-stage.done .dp-stage-num,
.dp-stage.live .dp-stage-num {
  color: var(--ok);
  border-color: rgba(16,185,129,.35);
  background: rgba(16,185,129,.08);
}
.dp-stage.live .dp-stage-num::after {
  content: " ●";
  color: var(--ok);
  animation: dpPulse 1.6s ease-in-out infinite;
}

.dp-stage-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.dp-stage-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 4px;
  letter-spacing: .02em;
}
.dp-stage-bar {
  margin-top: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--bg-elev-hi);
  overflow: hidden;
}
[data-theme="light"] .dp-stage-bar { background: #e2e8f0; }
.dp-stage-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-hi), var(--cyan-hi));
  border-radius: 2px;
}
.dp-stage.done .dp-stage-bar i { background: linear-gradient(90deg, var(--ok), #34d399); }
.dp-stage.live .dp-stage-bar i {
  background: linear-gradient(90deg, var(--ok), #34d399);
  animation: dpStageBarPulse 2.4s ease-in-out infinite;
}
@keyframes dpStageBarPulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }

/* Pipeline responsive */
@media (max-width: 900px) {
  .dp-pipeline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .dp-pipeline { grid-template-columns: 1fr; gap: 10px; }
}

/* --- bottom grid: log (wider) + metrics --- */
.dp-bottom {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
}
@media (max-width: 900px) {
  .dp-bottom { grid-template-columns: 1fr; }
}

/* Log */
.dp-log h4,
.dp-metrics h4 {
  margin: 0 0 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
}
.dp-log ul { list-style: none; padding: 0; margin: 0; }
.dp-log li {
  display: grid;
  grid-template-columns: 50px 70px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.dp-log li:last-child { border-bottom: none; }
.dp-log time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--text-mute);
  letter-spacing: .02em;
}
.dp-log-tag {
  display: inline-flex;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
  font-weight: 600;
  text-transform: lowercase;
}
.dp-log-tag.ok   { background: rgba(16,185,129,.12); color: var(--ok);     border: 1px solid rgba(16,185,129,.25); }
.dp-log-tag.info { background: rgba(59,130,246,.12); color: var(--accent-hi); border: 1px solid rgba(59,130,246,.25); }
[data-theme="light"] .dp-log-tag.info { color: var(--accent); }
.dp-log-msg {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Metrics */
.dp-metrics {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dp-metric {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  transition: border-color .25s var(--ease);
}
[data-theme="light"] .dp-metric { background: #f8fafc; border-color: #e2e8f0; }
.dp-metric:hover { border-color: var(--accent); }
.dp-metric-k {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 6px;
  font-weight: 600;
}
.dp-metric-v {
  display: block;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dp-metric-v em {
  font-style: normal;
  font-size: 13px;
  color: var(--text-mute);
  font-weight: 500;
  margin-left: 2px;
}
.dp-metric-v.dp-metric-ok { color: var(--ok); font-size: 28px; }
.dp-metric-meta {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 6px;
  letter-spacing: .02em;
}

/* Log on small mobile — compact */
@media (max-width: 480px) {
  .dp-log li {
    grid-template-columns: 44px 60px 1fr;
    gap: 8px;
    font-size: 12px;
  }
  .dp-log-msg { font-size: 11.5px; }
}

/* Disable old fs-scene if present in cache (defensive) */
.fs-scene { display: none; }

/* ============================================================
   ★★★ FLOATING FILES SCENE — replaces old dashboard widgets
   3D cards (Excel + SQL + Chart + chips) floating in space,
   with subtle mouse parallax. Light + dark friendly.
   NO hover transforms (no click flicker on touch).
   ============================================================ */
.fs-scene {
  position: relative;
  perspective: 1800px;
  perspective-origin: 50% 50%;
  margin: 0 auto;
  max-width: 1100px;
  /* Stage has fixed aspect ratio so parallax math stays sane */
  aspect-ratio: 16 / 9;
  --fs-tx: 0deg;
  --fs-ty: 0deg;
  --fs-px: 0px;
  --fs-py: 0px;
}
.fs-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--fs-ty)) rotateY(var(--fs-tx)) translate3d(var(--fs-px), var(--fs-py), 0);
  transition: transform .4s var(--ease);
}
@media (max-width: 900px) {
  .fs-scene { aspect-ratio: 4 / 5; perspective: 1200px; }
}

/* Ambient blur glows behind cards */
.fs-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}
.fs-glow-1 {
  width: 360px; height: 360px;
  top: 10%; left: -8%;
  background: radial-gradient(circle, rgba(59,130,246,.35), transparent 65%);
}
.fs-glow-2 {
  width: 320px; height: 320px;
  bottom: 8%; right: -6%;
  background: radial-gradient(circle, rgba(6,182,212,.30), transparent 65%);
}
[data-theme="light"] .fs-glow-1 { background: radial-gradient(circle, rgba(37,99,235,.18), transparent 65%); }
[data-theme="light"] .fs-glow-2 { background: radial-gradient(circle, rgba(8,145,178,.16), transparent 65%); }

/* Base card style — used by all 3 cards */
.fs-card {
  position: absolute;
  width: 320px;
  border-radius: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 30px 80px -30px rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz));
  transform-style: preserve-3d;
  overflow: hidden;
  z-index: 1;
}
[data-theme="light"] .fs-card {
  background: #ffffff;
  border-color: #E2E8F0;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 20px 50px -20px rgba(15,23,42,.20);
}

/* Excel-style — top-left position */
.fs-card-excel { top: 12%; left: 4%; }
/* SQL-style — bottom-left, slightly behind */
.fs-card-sql   { bottom: 8%; left: 14%; width: 360px; }
/* Chart — top-right, popped forward */
.fs-card-chart { top: 4%; right: 4%; width: 280px; }

/* Floating chips — smaller info pills */
.fs-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.6);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz));
  z-index: 2;
}
[data-theme="light"] .fs-chip {
  background: #ffffff;
  border-color: #E2E8F0;
  box-shadow: 0 14px 32px -12px rgba(15,23,42,.18);
}
.fs-chip-deploy { top: 58%; left: 38%; }
.fs-chip-ro     { top: 22%; left: 42%; }

.fs-chip-ico {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--ok-soft, rgba(16,185,129,.18));
  color: var(--ok);
  font-weight: 700;
}
.fs-chip-ico.ok { background: transparent; color: var(--ok); font-size: 18px; }
.fs-chip-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.1; }
.fs-chip-sub   { font-size: 11px; color: var(--text-mute); font-family: 'JetBrains Mono', monospace; letter-spacing: .04em; margin-top: 2px; }

/* Card heads */
.fs-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-mute);
  font-family: 'JetBrains Mono', monospace;
}
.fs-card-head.dark {
  background: linear-gradient(180deg, rgba(0,0,0,.25), transparent);
}
[data-theme="light"] .fs-card-head.dark {
  background: linear-gradient(180deg, rgba(15,23,42,.06), transparent);
}
.fs-card-head .fs-name { color: var(--text); font-weight: 500; font-size: 12.5px; letter-spacing: -0.005em; }

.fs-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fs-dot.ok    { background: var(--ok);     box-shadow: 0 0 6px var(--ok); }
.fs-dot.blue  { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.fs-dot.dot-r { background: #ef4444; }
.fs-dot.dot-y { background: #f59e0b; }
.fs-dot.dot-g { background: #10b981; }

.fs-badge {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16,185,129,.15);
  border: 1px solid rgba(16,185,129,.3);
  color: var(--ok);
  letter-spacing: .04em;
}

/* Card bodies */
.fs-card-body { padding: 12px 14px; font-size: 12.5px; color: var(--text); }
.fs-card-body.code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  line-height: 1.7;
  background: #0a0f1c;
  color: #cbd5e1;
}
[data-theme="light"] .fs-card-body.code {
  background: #f1f5f9;
  color: #334155;
}
.fs-card-body.code .kw  { color: #c084fc; }
.fs-card-body.code .fn  { color: var(--cyan-hi); }
.fs-card-body.code .str { color: var(--ok); }
[data-theme="light"] .fs-card-body.code .kw  { color: #7c3aed; }
[data-theme="light"] .fs-card-body.code .fn  { color: #0891b2; }
[data-theme="light"] .fs-card-body.code .str { color: #059669; }

/* Excel row */
.fs-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.fs-row:last-child { border-bottom: none; }
.fs-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); font-weight: 500; }
.fs-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 600;
}
.fs-pill.up   { background: rgba(16,185,129,.15); color: var(--ok);  border: 1px solid rgba(16,185,129,.3); }
.fs-pill.down { background: rgba(239,68,68,.15); color: #ef4444;      border: 1px solid rgba(239,68,68,.3); }

/* Chart card body */
.fs-card-body.chart { padding: 12px; }
.fs-chart-svg { width: 100%; height: 80px; }
.fs-chart-meta {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-top: 10px;
}
.fs-chart-kpi {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-hi);
  letter-spacing: -0.02em;
  display: block;
  line-height: 1;
}
[data-theme="light"] .fs-chart-kpi { color: var(--accent); }
.fs-chart-sub {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-mute);
  letter-spacing: .06em;
}
.fs-chart-bars {
  display: flex;
  align-items: end;
  gap: 3px;
  height: 32px;
}
.fs-chart-bars i {
  width: 7px;
  height: var(--h);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-radius: 2px 2px 0 0;
  opacity: .85;
}

/* Floating particles */
.fs-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent-hi);
  box-shadow: 0 0 8px var(--accent-hi);
  opacity: .6;
  animation: fsParticleFloat var(--d, 7s) ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes fsParticleFloat {
  0%   { transform: translateY(0) scale(1); opacity: .3; }
  50%  { opacity: .85; }
  100% { transform: translateY(-30px) scale(1.4); opacity: .2; }
}
[data-theme="light"] .fs-particle {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  opacity: .4;
}

/* Mobile — drop the 3D, stack the cards vertically */
@media (max-width: 900px) {
  .fs-card { position: relative; width: 100% !important; transform: none !important; margin-bottom: 12px; }
  .fs-chip { position: relative; transform: none !important; display: none; }
  .fs-card-excel, .fs-card-sql, .fs-card-chart {
    top: auto; bottom: auto; left: auto; right: auto;
  }
  .fs-particle, .fs-glow { display: none; }
  .fs-scene { aspect-ratio: auto; padding: 16px; }
  .fs-stage { position: relative; }
}

/* ============================================================
   ★★★ DASHBOARD PREVIEW — COMPLETE REDESIGN (light + dark)
   Replaces the old .dash-* styling from styles.css. Cards have
   subtle elevation, clean borders, hi-tech accent edges.
   ============================================================ */

/* The section gets a soft tinted background that works on both themes */
section.dashboard-preview {
  background:
    radial-gradient(900px 600px at 80% 30%, rgba(59,130,246,.08), transparent 60%),
    radial-gradient(700px 500px at 15% 80%, rgba(6,182,212,.06), transparent 65%),
    var(--bg-1) !important;
  padding: 96px 0;
}
[data-theme="light"] section.dashboard-preview {
  background:
    radial-gradient(900px 600px at 80% 30%, rgba(37,99,235,.07), transparent 60%),
    radial-gradient(700px 500px at 15% 80%, rgba(8,145,178,.05), transparent 65%),
    #f8fafc !important;
}

/* Grid — 4 columns desktop, becomes 2 cols, then 1 */
section.dashboard-preview .dash-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}
@media (max-width: 1100px) {
  section.dashboard-preview .dash-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  section.dashboard-preview .dash-grid { grid-template-columns: 1fr !important; }
}

/* Each card — clean elevation, gradient ring on top edge,
   accent border on hover. Works on both light and dark. */
section.dashboard-preview .dash-w {
  position: relative;
  isolation: isolate;
  padding: 22px 22px 20px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%),
    var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.05) inset,
    0 12px 40px -20px rgba(0,0,0,.5);
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .25s var(--ease), box-shadow .35s var(--ease);
}
[data-theme="light"] section.dashboard-preview .dash-w {
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7) 100%),
    #ffffff !important;
  border-color: #E2E8F0 !important;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,1) inset,
    0 8px 28px -16px rgba(15,23,42,.15);
}
section.dashboard-preview .dash-w:hover {
  transform: translateY(-3px) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 22px 56px -22px rgba(59,130,246,.50);
}
[data-theme="light"] section.dashboard-preview .dash-w:hover {
  box-shadow: 0 22px 50px -20px rgba(37,99,235,.30);
}

/* Wide cards span 2 columns on desktop */
section.dashboard-preview .dash-w-wide { grid-column: span 2 !important; }
@media (max-width: 640px) {
  section.dashboard-preview .dash-w-wide { grid-column: span 1 !important; }
}

/* Top accent strip on each card — subtle hi-tech detail */
section.dashboard-preview .dash-w::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--cyan-hi), transparent);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
section.dashboard-preview .dash-w:hover::before { opacity: .9; }

/* Card head: small caps with proper hierarchy */
section.dashboard-preview .dash-w-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute) !important;
  margin-bottom: 14px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-theme="light"] section.dashboard-preview .dash-w-head { color: #64748B !important; }

/* "live" tag */
section.dashboard-preview .dash-tag {
  margin-left: auto;
  font-size: 10px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: var(--ok-soft, rgba(16,185,129,.12)) !important;
  color: var(--ok) !important;
  border: 1px solid rgba(16,185,129,.25) !important;
  letter-spacing: .04em;
}
[data-theme="light"] section.dashboard-preview .dash-tag {
  background: rgba(16,185,129,.10) !important;
  border-color: rgba(16,185,129,.25) !important;
}

/* Status dots — slightly larger, glowing */
section.dashboard-preview .dash-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50%;
}
section.dashboard-preview .dash-dot.ok   { background: var(--ok) !important;     box-shadow: 0 0 8px var(--ok); }
section.dashboard-preview .dash-dot.blue { background: var(--accent) !important; box-shadow: 0 0 8px var(--accent); }
section.dashboard-preview .dash-dot.cyan { background: var(--cyan) !important;   box-shadow: 0 0 8px var(--cyan); }

/* KPI row — clean stack */
section.dashboard-preview .dash-kpi-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px !important;
  margin-top: 4px;
}
section.dashboard-preview .dash-kpi {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
section.dashboard-preview .dash-kpi-label {
  font-size: 11px !important;
  color: var(--text-mute) !important;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
section.dashboard-preview .dash-kpi-val {
  font-family: 'Sora', system-ui, sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text) 60%, var(--accent-hi));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: 4px;
}
[data-theme="light"] section.dashboard-preview .dash-kpi-val {
  background: linear-gradient(135deg, #0F172A 50%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
}
section.dashboard-preview .dash-kpi-delta {
  font-size: 11px !important;
  color: var(--text-mute) !important;
  font-family: 'JetBrains Mono', monospace;
}
section.dashboard-preview .dash-kpi-delta.up {
  color: var(--ok) !important;
}
section.dashboard-preview .dash-kpi-delta.up::before {
  content: "↗ ";
  font-weight: 700;
}

/* Gauge — recoloured to match accent system */
section.dashboard-preview .dash-gauge {
  width: 110px !important;
  height: 110px !important;
  margin: 0 auto !important;
  position: relative;
}
section.dashboard-preview .dash-gauge-val {
  font-family: 'Sora', system-ui, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ok) !important;
  letter-spacing: -0.02em;
}
section.dashboard-preview .dash-gauge-sub {
  text-align: center;
  font-size: 11px !important;
  color: var(--text-mute) !important;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .06em;
  margin-top: 8px;
}

/* Big number — uniform font */
section.dashboard-preview .dash-big-num {
  font-family: 'Sora', system-ui, sans-serif !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  color: var(--text) !important;
  line-height: 1;
}
section.dashboard-preview .dash-big-num em {
  font-style: normal;
  font-size: 14px;
  color: var(--text-mute);
  margin-left: 4px;
  font-weight: 500;
}
section.dashboard-preview .dash-sub {
  font-size: 12px !important;
  color: var(--text-mute) !important;
  margin-top: 6px;
}

/* Status grid — 7x6 dots, smaller, cleaner */
section.dashboard-preview .dash-status-grid {
  display: grid !important;
  grid-template-columns: repeat(10, 1fr) !important;
  gap: 4px !important;
  margin-top: 6px;
}
section.dashboard-preview .dash-status-grid i {
  aspect-ratio: 1;
  border-radius: 4px !important;
  background: linear-gradient(135deg, var(--ok), rgba(16,185,129,.6)) !important;
  box-shadow: 0 0 4px rgba(16,185,129,.4);
}
[data-theme="light"] section.dashboard-preview .dash-status-grid i {
  background: linear-gradient(135deg, #10B981, #34D399) !important;
}

/* Sprint bars — taller, more visual */
section.dashboard-preview .dash-bars {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  height: 80px !important;
  margin-top: 4px;
}
section.dashboard-preview .dash-bars i {
  flex: 1;
  height: var(--h) !important;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent)) !important;
  border-radius: 4px 4px 0 0 !important;
  opacity: .9 !important;
  transition: opacity .25s var(--ease);
}
section.dashboard-preview .dash-w:hover .dash-bars i { opacity: 1 !important; }

/* Toast — clean success indicator */
section.dashboard-preview .dash-toast {
  display: flex;
  align-items: center;
  gap: 12px;
}
section.dashboard-preview .dash-toast-ico {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--ok-soft, rgba(16,185,129,.15)) !important;
  color: var(--ok) !important;
  border: 1px solid rgba(16,185,129,.25) !important;
  font-weight: 700;
  flex-shrink: 0;
}
section.dashboard-preview .dash-toast-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text) !important;
}
section.dashboard-preview .dash-toast-sub {
  font-size: 12px;
  color: var(--text-mute) !important;
}

/* Compliance pills — clean, with check icon */
section.dashboard-preview .dash-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px !important;
}
section.dashboard-preview .dash-pills span {
  font-size: 11px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: var(--ok-soft, rgba(16,185,129,.10)) !important;
  border: 1px solid rgba(16,185,129,.22) !important;
  color: var(--ok) !important;
  font-weight: 600 !important;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .02em;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
[data-theme="light"] section.dashboard-preview .dash-pills span {
  background: rgba(16,185,129,.08) !important;
  border-color: rgba(16,185,129,.22) !important;
  color: #047857 !important;
}
section.dashboard-preview .dash-pills span:hover {
  transform: translateY(-1px);
  background: var(--ok-soft, rgba(16,185,129,.18)) !important;
}

/* ============================================================
   ★★★ DASHBOARD REFRESH — 3D depth + mouse parallax + live pulse
   The dashboard preview is the "show, don't tell" of the page.
   We add depth, motion, and live signals to convey "real product".
   ============================================================ */

.dashboard-preview {
  position: relative;
  overflow: hidden;
}
/* Ambient grid that lights up the stage */
.dashboard-preview::before {
  content: "";
  position: absolute;
  inset: -10% 0 -10% 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 50%, #000 30%, transparent 80%);
  opacity: .6;
  pointer-events: none;
  z-index: 0;
}
.dashboard-preview .container { position: relative; z-index: 1; }

/* The "stage" gets perspective. JS rotates it subtly on mousemove. */
.dash-stage {
  perspective: 1600px;
  perspective-origin: 50% 30%;
  transform-style: preserve-3d;
  --dash-tilt-x: 0deg;
  --dash-tilt-y: 0deg;
  transition: transform .35s var(--ease);
  /* Wrap in a flat layer so the parallax handler can apply transform here */
}
.dash-grid {
  transform: rotateX(var(--dash-tilt-x)) rotateY(var(--dash-tilt-y));
  transform-style: preserve-3d;
  transition: transform .25s ease-out;
}

/* Each card pops out of the plane with a small translateZ that
   varies — gives the "scattered files in 3D space" feel. */
.dash-w {
  position: relative;
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition: transform .35s var(--ease), border-color .25s var(--ease), box-shadow .35s var(--ease);
}
.dash-w:nth-child(1) { transform: translateZ(40px); }
.dash-w:nth-child(2) { transform: translateZ(20px); }
.dash-w:nth-child(3) { transform: translateZ(60px); }
.dash-w:nth-child(4) { transform: translateZ(30px); }
.dash-w:nth-child(5) { transform: translateZ(50px); }
.dash-w:nth-child(6) { transform: translateZ(25px); }
.dash-w:nth-child(7) { transform: translateZ(45px); }

.dash-w:hover {
  transform: translateZ(80px) scale(1.02);
  border-color: var(--accent);
  box-shadow: 0 30px 70px -25px rgba(59,130,246,.55);
  z-index: 10;
}

/* Inner content gets its own subtle depth too (Aceternity-style) */
.dash-w-head, .dash-kpi, .dash-gauge, .dash-big-num,
.dash-status-grid, .dash-bars, .dash-toast, .dash-pills {
  position: relative;
  z-index: 1;
}

/* "Live" tag — pulsing dot effect */
.dash-tag {
  position: relative;
}
.dash-w-head .dash-tag::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  vertical-align: middle;
  animation: dashLivePulse 1.8s ease-in-out infinite;
}
@keyframes dashLivePulse {
  0%, 100% { opacity: .4; transform: scale(.85); }
  50%      { opacity: 1;  transform: scale(1.15); }
}

/* Sprint bars — animate height "loading" on intersection */
.dash-bars i {
  transform-origin: bottom;
  animation: dashBarRise .8s var(--ease) backwards;
}
.dash-bars i:nth-child(1) { animation-delay: 0s; }
.dash-bars i:nth-child(2) { animation-delay: .08s; }
.dash-bars i:nth-child(3) { animation-delay: .16s; }
.dash-bars i:nth-child(4) { animation-delay: .24s; }
.dash-bars i:nth-child(5) { animation-delay: .32s; }
.dash-bars i:nth-child(6) { animation-delay: .40s; }
.dash-bars i:nth-child(7) { animation-delay: .48s; }
.dash-bars i:nth-child(8) { animation-delay: .56s; }
.dash-bars i:nth-child(9) { animation-delay: .64s; }
@keyframes dashBarRise {
  from { transform: scaleY(.1); opacity: 0; }
  to   { transform: scaleY(1);  opacity: 1; }
}

/* Status grid dots — subtle wave so it reads as "live monitoring" */
.dash-status-grid i {
  animation: dashStatusBlink 2.4s ease-in-out infinite;
}
.dash-status-grid i:nth-child(7n+1) { animation-delay: 0s;   }
.dash-status-grid i:nth-child(7n+2) { animation-delay: .3s;  }
.dash-status-grid i:nth-child(7n+3) { animation-delay: .6s;  }
.dash-status-grid i:nth-child(7n+4) { animation-delay: .9s;  }
.dash-status-grid i:nth-child(7n+5) { animation-delay: 1.2s; }
.dash-status-grid i:nth-child(7n+6) { animation-delay: 1.5s; }
.dash-status-grid i:nth-child(7n+0) { animation-delay: 1.8s; }
@keyframes dashStatusBlink {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1;  filter: brightness(1.4); }
}

/* KPI value — subtle highlight pulse */
.dash-kpi-val {
  background: linear-gradient(135deg, var(--text) 50%, var(--accent-hi));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gauge — light shimmer ring */
.dash-gauge {
  position: relative;
}
.dash-gauge::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 75%, rgba(16,185,129,.25) 90%, transparent);
  filter: blur(6px);
  animation: dashGaugeSpin 6s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes dashGaugeSpin { to { transform: rotate(360deg); } }

/* Toast — slide-in on visible */
.dash-toast { transition: transform .35s var(--ease); }
.dash-w:hover .dash-toast { transform: translateX(4px); }

/* Pills — staggered fade */
.dash-pills span {
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.dash-pills span:hover {
  transform: translateY(-2px);
  background: var(--ok-soft, rgba(16,185,129,.15));
}

/* Mobile — disable 3D depth, keep cards flat for readability */
@media (max-width: 900px) {
  .dash-grid { transform: none; }
  .dash-w { transform: none !important; }
  .dashboard-preview::before { opacity: .3; }
}

/* ============================================================
   14. MOBILE — drop the heavy stuff
   ============================================================ */
@media (max-width: 900px) {
  .mod-aurora { filter: blur(60px) saturate(130%); opacity: .35; }
  .mod-spotlight { display: none; }
  .mod-grain { opacity: .025; }
  /* Inner-depth pop only meaningful when JS tilts the card */
  .service-card:hover .service-icon,
  .service-card:hover h3,
  .service-card:hover .service-tags,
  .why-card:hover .num,
  .why-card:hover h3,
  .contact-card:hover .cc-icon,
  .contact-card:hover .cc-value,
  .contact-card:hover .cc-label { transform: none; }
}

/* ============================================================
   SCROLL PARALLAX — cut-out depth layers (additive, 2026, v3)
   "Cut-out" effect: sharp foreground + background shapes that
   slide at clearly different speeds as you scroll, creating real
   depth. NO blur, NO mask-transform (those caused compositor jank
   and were invisible). Layers are injected by modern.js (§12) and
   driven by a single rAF that reads scrollY ONCE per frame from a
   cached section offset → zero forced reflow / no layout thrash.
   ============================================================ */
.plx-scene {
  position: absolute;
  inset: -8% 0;          /* bleed top/bottom so layers have travel room */
  z-index: 0;
  pointer-events: none;
  overflow: hidden;      /* clip the moving layers to the section */
}
.about { position: relative; }
.about > .container { position: relative; z-index: 2; }  /* content stays on top */

.plx-layer {
  position: absolute;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* ---- BACK layer: large sharp tech motif, faint, slow ---- */
.plx-back {
  top: 4%;
  right: -4%;
  width: clamp(280px, 34vw, 460px);
  color: var(--accent);
  opacity: .12;
}
.plx-back svg { width: 100%; height: auto; display: block; }

/* ---- FRONT layer: small sharp UI chips, opaque, fast ---- */
.plx-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.18);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.plx-chip .pd {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok, #22c55e);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok, #22c55e) 22%, transparent);
}
.plx-chip .pd.blue { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.plx-chip .pd.cyan { background: var(--cyan-hi, #22d3ee); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan-hi, #22d3ee) 22%, transparent); }
.plx-chip code { font-family: var(--mono); color: var(--accent); }

.plx-chip-1 { top: 2%;  left: -10px; }
.plx-chip-2 { top: 46%; right: -6px; }
.plx-chip-3 { bottom: 6%; left: 8%; }

@media (max-width: 900px) {
  /* Desktop-only effect (engine guards on `wide`); hide so mobile
     stays light and nothing overlaps the stacked layout. */
  .plx-scene { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .plx-layer { transform: none !important; }
}