/* WD v3.0 — SaaS-grade light/dark theme, blue accent */
:root {
  --b-500: hsl(221 87% 53%);
  --b-400: hsl(221 90% 62%);
  --b-600: hsl(221 72% 44%);
  --b-050: hsl(221 90% 96%);

  --v3-page: hsl(220 30% 99%);
  --v3-surface: hsl(0 0% 100%);
  --v3-sunken: hsl(220 30% 97%);
  --v3-ink: hsl(226 32% 10%);
  --v3-ink-soft: hsl(222 12% 42%);
  --v3-ink-faint: hsl(222 10% 58%);
  --v3-line: hsl(222 20% 91%);
  --v3-line-soft: hsl(222 22% 94%);
  --v3-tint: hsl(221 90% 97%);
  --v3-onDark: hsl(210 20% 97%);
  --v3-onDark-soft: hsl(215 16% 70%);
  --v3-deep: hsl(228 30% 6%);
  --v3-shadow: 0 1px 2px hsl(226 32% 10% / .04), 0 12px 28px -12px hsl(226 32% 10% / .12);
  --v3-shadow-lift: 0 2px 6px hsl(226 32% 10% / .06), 0 24px 48px -18px hsl(226 40% 12% / .22);
  --v3-glow: radial-gradient(60% 60% at 50% 0%, hsl(221 90% 60% / .16), transparent 70%);
  --v3-r: 20px;
}

html.v3-dark {
  --v3-page: hsl(228 30% 4%);
  --v3-surface: hsl(228 24% 7%);
  --v3-sunken: hsl(228 22% 9%);
  --v3-ink: hsl(210 20% 97%);
  --v3-ink-soft: hsl(215 14% 68%);
  --v3-ink-faint: hsl(215 12% 50%);
  --v3-line: hsl(228 14% 17%);
  --v3-line-soft: hsl(228 14% 13%);
  --v3-tint: hsl(221 50% 13%);
  --v3-deep: hsl(228 28% 6%);
  --v3-shadow: 0 1px 2px hsl(228 40% 1% / .5), 0 14px 32px -14px hsl(228 40% 1% / .7);
  --v3-shadow-lift: 0 2px 8px hsl(228 40% 1% / .6), 0 28px 56px -20px hsl(228 40% 1% / .8);
  --v3-glow: radial-gradient(60% 60% at 50% 0%, hsl(221 90% 55% / .22), transparent 70%);
}

/* design-system tokens mapped to the active v3 theme */
:root {
  --color-canvas: var(--v3-page);
  --color-surface: var(--v3-surface);
  --color-surface-raised: var(--v3-surface);
  --color-surface-sunken: var(--v3-sunken);
  --color-border: var(--v3-line);
  --color-border-strong: var(--v3-ink-faint);
  --color-hairline: var(--v3-line-soft);
  --text-primary: var(--v3-ink);
  --text-secondary: var(--v3-ink-soft);
  --text-tertiary: var(--v3-ink-faint);
  --text-inverse: #fff;
  --action-primary: var(--b-500);
  --action-primary-hover: var(--b-400);
  --action-primary-active: var(--b-600);
  --action-on-primary: #fff;
  --action-secondary-border: var(--v3-line);
  --action-secondary-text: var(--v3-ink);
  --focus-ring: var(--b-500);
  --shadow-focus: 0 0 0 4px hsl(221 87% 53% / .22);
  --gray-0: var(--v3-surface); --gray-25: var(--v3-surface); --gray-50: var(--v3-sunken);
  --gray-100: var(--v3-line-soft); --gray-150: var(--v3-line); --gray-200: var(--v3-line);
  --gray-300: var(--v3-ink-faint); --gray-400: var(--v3-ink-faint); --gray-500: var(--v3-ink-soft);
  --gray-600: var(--v3-ink-soft); --gray-700: var(--v3-ink); --gray-800: var(--v3-ink);
  --gray-900: var(--v3-ink); --gray-950: var(--b-500); --white: var(--v3-surface);
  --radius-xs: 8px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 24px;
}

html.v3-dark {
  --success: hsl(150 45% 62%); --success-bg: hsl(150 30% 12%);
  --warning: hsl(42 70% 65%); --warning-bg: hsl(42 40% 12%);
  --critical: hsl(0 72% 66%); --critical-bg: hsl(0 40% 13%);
  --info: hsl(221 60% 72%); --info-bg: hsl(221 40% 13%);
}

html { scroll-behavior: smooth; }
html, body {
  margin: 0; background: var(--v3-page); color: var(--v3-ink);
  font: var(--text-body-md); -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
}
a { color: var(--v3-ink-soft); text-decoration: none; }
a:hover { color: var(--v3-ink); }
::selection { background: var(--b-500); color: #fff; }

image-slot { background: hsl(220 14% 84%); border-radius: 14px; }
image-slot[data-filled] { background: transparent; }
.v3-on-dark image-slot { background: hsl(220 10% 74%); }
.v3-on-dark image-slot[data-filled] { background: transparent; }

.v3-rise { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); }
.v3-rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .v3-rise { opacity: 1; transform: none; transition: none; }
}


/* Foto ainda não pintada: o elemento está transparente, então o fundo aparece
   através dele — evita o quadro branco enquanto o arquivo baixa. */
.wd-shot {
  background-color: var(--v3-sunken);
  background-image: linear-gradient(100deg, transparent 22%, hsl(0 0% 100% / .55) 42%, transparent 62%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  animation: wd-shot-shimmer 1.3s linear infinite;
}
html.v3-dark .wd-shot {
  background-image: linear-gradient(100deg, transparent 22%, hsl(0 0% 100% / .07) 42%, transparent 62%);
}
.wd-shot.is-loaded {
  background-image: none;
  animation: none;
}
@keyframes wd-shot-shimmer {
  from { background-position: 170% 0; }
  to   { background-position: -70% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wd-shot { animation: none; }
}

/* Loader */
@keyframes wd-load-bar {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}
.wd-load-bar { animation: wd-load-bar 1.1s cubic-bezier(.65,.05,.36,1) infinite; }

/* Barra de rolagem */
html { scrollbar-width: thin; scrollbar-color: var(--v3-ink-faint) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--v3-line-strong, hsl(220 9% 78%));
  border: 3px solid var(--v3-page);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--v3-ink-faint); }
::-webkit-scrollbar-corner { background: transparent; }

/* Hero — imagem sem moldura, esmaecendo nas bordas, com deriva lenta */
.wd-hero-shot {
  -webkit-mask-image: radial-gradient(76% 76% at 50% 50%, #000 42%, transparent 100%);
  mask-image: radial-gradient(76% 76% at 50% 50%, #000 42%, transparent 100%);
}
.wd-hero-drift { animation: wd-hero-drift 26s ease-in-out infinite; will-change: transform; }
@keyframes wd-hero-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(0, -14px, 0) rotate(-.6deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wd-hero-drift { animation: none; }
}

/* Faixa de clientes — marquee contínuo */
@keyframes wd-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.wd-marquee {
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.wd-marquee-track {
  animation: wd-marquee-scroll 42s linear infinite;
}
.wd-marquee:hover .wd-marquee-track { animation-play-state: paused; }
.wd-noscrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.wd-noscrollbar::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .wd-marquee-track { animation: none; }
}

.wd-plate { padding: 0 12px; border-radius: 14px; }
.wd-clients { background: var(--v3-sunken); }
html.v3-dark .wd-clients { background: hsl(230deg 30% 3.2%); }