/* Cloudastick branded public website — public Visualforce pages
   Colors match the cloudastick.org design tokens (HSL brand primary/cyan/dark).
   No remote fonts or third-party CSS. */
:root {
  --wn-primary: #0066ff;
  --wn-primary-soft: rgba(0, 102, 255, 0.12);
  --wn-cyan: #06b6d4;
  --wn-cyan-soft: rgba(6, 182, 212, 0.16);
  --wn-bg: #070b14;
  --wn-bg-elev: #0f1624;
  --wn-bg-card: rgba(17, 24, 39, 0.82);
  --wn-border: #374151;
  --wn-text: #f8fafc;
  --wn-muted: #9ca3af;
  --wn-white: #ffffff;
  --wn-danger: #f87171;
  --wn-ok: #34d399;
  --wn-radius: 12px;
  --wn-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  --wn-max: 80rem;
  --wn-nav-h: 4rem;
  --wn-font: Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.wn-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--wn-bg);
  color: var(--wn-text);
  font-family: var(--wn-font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  overflow-x: clip;
}
a, button, [role="button"], input, select, textarea, label { touch-action: manipulation; }
img { max-width: 100%; height: auto; border: 0; }
a { color: var(--wn-cyan); text-decoration: none; }
a:hover { color: var(--wn-white); }
:focus-visible {
  outline: 2px solid var(--wn-cyan);
  outline-offset: 3px;
}
.wn-skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--wn-primary);
  color: var(--wn-white);
  padding: 0.5rem 1rem;
  z-index: 100;
}
.wn-skip:focus { left: 0.5rem; top: 0.5rem; }

.wn-wrap {
  width: 100%;
  max-width: calc(var(--wn-max) + 2rem);
  margin-inline: auto;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

/* Header */
.wn-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 11, 20, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wn-border);
}
.wn-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--wn-nav-h);
  gap: 1rem;
}
.wn-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--wn-white);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.04em;
  font-size: 1.25rem;
}
.wn-logo:hover { color: var(--wn-white); }
/* Viewport that crops the Cloudastick2025Logo asset down to just the cloud
   mark. That asset is a 1080x1080 canvas holding the mark at x 169-928 /
   y 240-762 with the wordmark stacked underneath; at nav size the bundled
   wordmark would render about 6px tall, so it is drawn as text instead and
   only the mark is shown here. Ratios below are derived from those bounds. */
.wn-logo-mark {
  --wn-mark-h: 2.1rem;
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--wn-mark-h) * 1.4531);
  height: var(--wn-mark-h);
  overflow: hidden;
  font-style: normal;
}
.wn-menu {
  display: none;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wn-menu a, .wn-menu button.wn-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--wn-muted);
  font-size: 0.875rem;
  font-weight: 600;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.wn-menu a:hover, .wn-menu button.wn-more-btn:hover,
.wn-menu a.is-active, .wn-more-btn.is-active {
  color: var(--wn-primary);
  background: var(--wn-primary-soft);
}
.wn-more { position: relative; }
.wn-more-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  min-width: 12rem;
  background: rgba(17, 24, 39, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid var(--wn-border);
  border-radius: 0.75rem;
  padding: 0.4rem;
  box-shadow: var(--wn-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s;
}
.wn-more.is-open .wn-more-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.wn-more-panel a {
  display: block;
  width: 100%;
  color: var(--wn-muted);
  transform: translateX(0);
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.wn-more-panel a:hover { transform: translateX(3px); }
.wn-nav-actions { display: flex; align-items: center; gap: 0.5rem; }
.wn-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  background: transparent;
  border: 1px solid var(--wn-border);
  color: var(--wn-text);
  border-radius: 0.65rem;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.wn-nav-actions .wn-hide-sm { display: none; }
/* Collapsed to zero height rather than display:none so opening can animate.
   --wn-menu-h is measured by WebsiteNewJs; the fallback only applies before the
   first measurement and must clear all 16 links. */
.wn-mobile {
  display: block;
  max-height: 0;
  padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
  opacity: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  background: var(--wn-bg-elev);
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease,
              padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-top-color 0.45s ease;
}
.wn-nav.is-open .wn-mobile {
  max-height: var(--wn-menu-h, 60rem);
  max-height: min(var(--wn-menu-h, 60rem), calc(100dvh - var(--wn-nav-h)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 0.75rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  opacity: 1;
  border-top-color: var(--wn-border);
}
.wn-nav.is-open .wn-mobile a {
  animation: wn-slide-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--wn-i, 0) * 35ms);
}
.wn-mobile a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  color: var(--wn-muted);
  border-radius: 0.5rem;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.wn-mobile a.is-active, .wn-mobile a:hover {
  color: var(--wn-primary);
  background: var(--wn-primary-soft);
  transform: translateX(4px);
}

/* Buttons */
.wn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  gap: 0.5rem;
  border-radius: 0.65rem;
  padding: 0.8rem 1.25rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  text-decoration: none;
}
.wn-btn-primary {
  background: linear-gradient(135deg, var(--wn-primary), #2563eb);
  color: var(--wn-white);
}
.wn-btn-primary:hover { color: var(--wn-white); filter: brightness(1.08); }
.wn-btn-outline {
  background: transparent;
  border-color: var(--wn-border);
  color: var(--wn-text);
}
.wn-btn-outline:hover { border-color: var(--wn-cyan); color: var(--wn-white); }
.wn-btn-lg { padding: 0.95rem 1.5rem; }
.wn-btn-block { width: 100%; }
.wn-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Hero / sections */
.wn-hero {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 0 2.25rem;
  background: radial-gradient(circle at 20% 20%, rgba(0, 102, 255, 0.16), transparent 45%),
              radial-gradient(circle at 80% 0%, rgba(6, 182, 212, 0.12), transparent 40%),
              linear-gradient(180deg, #0b1220, var(--wn-bg));
}
.wn-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  text-align: center;
}
.wn-hero-grid .wn-lead { margin-inline: auto; }
.wn-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--wn-cyan-soft);
  color: var(--wn-cyan);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wn-h1 {
  font-size: clamp(2rem, 7.5vw, 3.6rem);
  overflow-wrap: anywhere;
  line-height: 1.1;
  margin: 0.75rem 0 0.75rem;
  background: linear-gradient(90deg, #fff, #bae6fd, var(--wn-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wn-h1-solid { color: var(--wn-white); background: none; -webkit-background-clip: unset; }
.wn-lead { font-size: clamp(1rem, 3.6vw, 1.15rem); color: var(--wn-muted); max-width: 42rem; }
.wn-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; }
.wn-actions .wn-btn { flex: 1 1 12rem; }
.wn-section { padding: 3rem 0; }
.wn-section-muted { background: rgba(17, 24, 39, 0.45); }
.wn-center { text-align: center; }
.wn-h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 0.75rem; color: var(--wn-white); }
.wn-h3 { font-size: 1.2rem; margin: 0 0 0.5rem; color: var(--wn-white); }
.wn-sub { color: var(--wn-muted); max-width: 44rem; margin: 0 auto 2.5rem; }

/* Cards / grids */
.wn-grid-3, .wn-grid-2, .wn-grid-4 {
  display: grid;
  gap: 1.25rem;
}
.wn-grid-2, .wn-grid-3, .wn-grid-4 { grid-template-columns: minmax(0, 1fr); }
/* Glassmorphic card: blurred translucent surface with a sheen that sweeps on hover. */
.wn-card {
  position: relative;
  overflow: hidden;
  background: var(--wn-bg-card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--wn-border);
  border-radius: var(--wn-radius);
  padding: 1.5rem;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              background 0.35s ease;
}
.wn-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  transition: left 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.wn-card:hover {
  transform: translateY(-6px);
  border-color: rgba(6, 182, 212, 0.5);
  background: rgba(17, 24, 39, 0.92);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 22px rgba(6, 182, 212, 0.16);
}
.wn-card:hover::after { left: 115%; }
.wn-icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--wn-cyan), var(--wn-primary));
  background-size: 150% 150%;
  color: var(--wn-white);
  font-weight: 800;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease,
              background-position 0.5s ease;
}
.wn-card:hover .wn-icon {
  transform: scale(1.12) rotate(-3deg);
  background-position: 100% 100%;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.55);
}
.wn-list { margin: 0; padding: 0; list-style: none; }
.wn-list li { position: relative; padding-left: 1rem; color: #d1d5db; margin: 0.35rem 0; }
.wn-list li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--wn-cyan);
  position: absolute;
  left: 0;
  top: 0.55rem;
}

/* Team / avatars */
.wn-portrait-wrap { position: relative; display: grid; place-items: center; justify-content: center; }
.wn-portrait {
  width: min(17rem, 68vw);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(0, 102, 255, 0.35);
  box-shadow: var(--wn-shadow);
  background: #111827;
}
.wn-portrait img, .wn-avatar-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Transparent employee cutouts get their background from the website instead
   of baking one into every image. This keeps the same PNG reusable over future
   campaign colors while preserving the circular hero composition. */
.wn-portrait-cutout {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.18), transparent 24%),
    radial-gradient(circle at 28% 72%, rgba(6, 182, 212, 0.4), transparent 42%),
    linear-gradient(145deg, #0d55d9 0%, #0284c7 52%, #06b6d4 100%);
}
.wn-portrait-cutout::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 60px rgba(186, 230, 253, 0.2);
}
.wn-portrait-cutout img {
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.32));
}
.wn-avatar-fallback {
  display: grid;
  place-items: center;
  font-size: 4rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--wn-primary), var(--wn-cyan));
}
.wn-float {
  position: absolute;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  animation: wn-float 3s ease-in-out infinite, wn-pulse-glow 2.4s ease-in-out infinite;
}
.wn-float-a { width: 3.5rem; height: 3.5rem; top: -0.5rem; right: 8%; background: var(--wn-primary); }
.wn-float-b { width: 2.75rem; height: 2.75rem; bottom: 0.5rem; left: 8%; background: var(--wn-cyan); animation-delay: 1s, 1.2s; }
@keyframes wn-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes wn-pulse-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(0, 102, 255, 0.5); }
  50% { box-shadow: 0 0 22px rgba(0, 102, 255, 0.85); }
}
.wn-float-b { animation-name: wn-float, wn-pulse-glow-cyan; }
@keyframes wn-pulse-glow-cyan {
  0%, 100% { box-shadow: 0 0 6px rgba(6, 182, 212, 0.5); }
  50% { box-shadow: 0 0 22px rgba(6, 182, 212, 0.85); }
}
/* Hero slides stack in one grid cell so switching can crossfade.
   display:none cannot be transitioned, which is why this used to hard-cut. */
.wn-hero-slides { display: grid; }
.wn-hero-slides > [data-hero-copy],
.wn-portrait-wrap > [data-hero-photo] {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.6s;
}
.wn-hero-slides > [data-hero-copy].is-active,
.wn-portrait-wrap > [data-hero-photo].is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.wn-dots { display: flex; gap: 0.4rem; justify-content: center; margin-top: 1.25rem; }
.wn-dot {
  position: relative;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: #4b5563; border: 0; padding: 0; cursor: pointer;
}
.wn-dot::after { content: ""; position: absolute; inset: -0.6rem; }
.wn-dot.is-active { background: var(--wn-cyan); }

/* Forms */
.wn-form {
  background: var(--wn-bg-card);
  border: 1px solid var(--wn-border);
  border-radius: 1rem;
  padding: 1.75rem;
}
.wn-label { display: block; font-size: 0.85rem; color: #d1d5db; margin-bottom: 0.35rem; font-weight: 600; }
.wn-input, .wn-textarea, .wn-select {
  width: 100%;
  min-height: 2.75rem;
  border-radius: 0.65rem;
  border: 1px solid #4b5563;
  background: #1f2937;
  color: var(--wn-white);
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: max(1rem, 16px);
  margin-bottom: 1rem;
}
.wn-textarea { min-height: 8rem; resize: vertical; }
/* Honeypot: display:none keeps it out of the tab order and off assistive tech,
   while still posting its value so Apex can reject bot submissions. */
.wn-hp { display: none; }
.wn-alert {
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  margin-bottom: 1rem;
}
.wn-alert-ok { background: rgba(52, 211, 153, 0.12); color: var(--wn-ok); border: 1px solid rgba(52, 211, 153, 0.3); }
.wn-alert-err { background: rgba(248, 113, 113, 0.12); color: var(--wn-danger); border: 1px solid rgba(248, 113, 113, 0.3); }

/* Footer */
.wn-footer {
  border-top: 1px solid var(--wn-border);
  background: #050814;
  padding: 3rem 0 max(1.5rem, env(safe-area-inset-bottom));
  margin-top: 2rem;
}
.wn-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
.wn-footer h2, .wn-footer h3 { font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: #e5e7eb; }
.wn-footer ul { list-style: none; margin: 0; padding: 0; }
.wn-footer li { margin: 0.4rem 0; }
.wn-footer a { color: var(--wn-muted); }
.wn-copy { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #1f2937; color: #6b7280; font-size: 0.85rem; }

/* CTA band */
.wn-cta {
  padding: 4rem 0;
  background: linear-gradient(90deg, #0891b2, var(--wn-primary));
  text-align: center;
}
.wn-cta h2, .wn-cta p { color: #fff; }
.wn-cta p { opacity: 0.9; }

/* Breadcrumb */
.wn-crumbs { font-size: 0.85rem; color: var(--wn-muted); margin-bottom: 1rem; }
.wn-crumbs a { color: var(--wn-muted); }
.wn-crumbs span { color: var(--wn-white); }

/* FAQ / article */
.wn-prose { color: #d1d5db; max-width: 48rem; }
.wn-prose h2 { color: #fff; margin-top: 2rem; }
.wn-stat { font-size: 2.6rem; font-weight: 800; color: var(--wn-cyan); }
.wn-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--wn-primary-soft);
  color: #93c5fd;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Tabs */
.wn-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-bottom: 2rem; }
.wn-tab {
  border: 1px solid var(--wn-border);
  background: transparent;
  color: var(--wn-muted);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  font: inherit;
}
.wn-tab.is-active { color: var(--wn-cyan); border-color: var(--wn-cyan); background: var(--wn-cyan-soft); }
.wn-tabpanel { display: none; }
.wn-tabpanel.is-active { display: block; }

/* Product / process */
.wn-process { text-align: center; }
.wn-step { font-size: 2rem; font-weight: 800; color: var(--wn-cyan); }

/* Filters */
.wn-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem; }
.wn-chip {
  border: 1px solid var(--wn-border);
  background: #111827;
  color: var(--wn-muted);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  font: inherit;
}
.wn-chip.is-active { color: #fff; border-color: var(--wn-cyan); }

.wn-client {
  display: grid;
  place-items: center;
  min-height: 6rem;
  background: #111827;
  border: 1px solid var(--wn-border);
  border-radius: 0.75rem;
  padding: 1rem;
  color: #e5e7eb;
  font-weight: 700;
  text-align: center;
}
.wn-client[hidden] { display: none; }

.wn-article { color: #d1d5db; }
.wn-article img { border-radius: 0.75rem; margin: 1rem 0; }
.wn-meta { color: var(--wn-muted); font-size: 0.9rem; margin-bottom: 1.25rem; }

.wn-preline { white-space: pre-line; }
.wn-quote {
  font-size: 1.2rem;
  color: #e5e7eb;
  font-style: italic;
}
.wn-quote::before { content: "“"; color: var(--wn-cyan); font-size: 2rem; }

.wn-login-box { max-width: 28rem; margin: 4rem auto; }

.wn-notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 4rem 1rem; }

/* Phone layout is the base above; wider screens build up from here. */
@media (min-width: 761px) {
  .wn-hero { padding: 4rem 0 3.5rem; }
  .wn-section { padding: 4.5rem 0; }
  .wn-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; text-align: left; }
  .wn-hero-grid .wn-lead { margin-inline: 0; }
  .wn-hero-grid .wn-actions { justify-content: flex-start; }
  .wn-actions .wn-btn { flex: 0 0 auto; }
  .wn-grid-2, .wn-grid-3, .wn-grid-4, .wn-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wn-portrait { width: min(20rem, 38vw); }
}
@media (min-width: 1101px) {
  .wn-menu { display: flex; }
  .wn-menu-toggle, .wn-mobile { display: none; }
  .wn-nav-actions .wn-hide-sm { display: inline-flex; }
  .wn-hero { padding: 5rem 0 4rem; }
  .wn-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; }
  .wn-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wn-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wn-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .wn-portrait { width: 22rem; }
}
.wn-portrait.wn-portrait-sm { width: 8rem; margin: 0 auto 1rem; border-width: 3px; }
.wn-portrait-sm .wn-avatar-fallback { font-size: 2.25rem; }

/* --- Team carousel ------------------------------------------------------
   Native scroll-snap does the swiping, so it stays smooth on low-end phones
   and works without JavaScript; WebsiteNewJs adds autoplay, dots, and haptics.
   Each person is a glass card; phones show one card with its neighbours
   peeking, wider screens show three with the active one in the middle. */
.wn-people { position: relative; min-width: 0; margin-top: 2rem; }
.wn-people-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 12%;
  padding: 1rem 12% 1.25rem;
  margin-inline: calc(-1 * max(1rem, env(safe-area-inset-left)));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.wn-people-track::-webkit-scrollbar { display: none; }
.wn-people-track:focus-visible { outline-offset: -2px; border-radius: var(--wn-radius); }
.wn-person {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 1rem;
  padding: 1.75rem 1.25rem 1.5rem;
  text-align: center;
  border-radius: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.5), rgba(7, 11, 20, 0.35));
  opacity: 0.4;
  transform: scale(0.92);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.5s ease, box-shadow 0.5s ease;
  user-select: none;
  -webkit-user-select: none;
}
.wn-person.is-active {
  opacity: 1;
  transform: none;
  border-color: rgba(34, 211, 238, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(0, 102, 255, 0.16);
}
.wn-person-photo { position: relative; width: 100%; display: grid; place-items: center; }
/* Portraits are drawn as a dot matrix. On the active card the dots tighten,
   then swell until they merge into a solid photo; hovering breaks it back
   into dots. The custom properties are registered so they can transition. */
@property --wn-dot { syntax: "<length>"; inherits: true; initial-value: 6px; }
@property --wn-fill { syntax: "<percentage>"; inherits: true; initial-value: 40%; }
@property --wn-vig { syntax: "<percentage>"; inherits: true; initial-value: 60%; }
.wn-person .wn-portrait {
  --wn-dot: 12px;
  --wn-fill: 36%;
  --wn-vig: 60%;
  width: min(100%, 13rem);
  border: 0;
  border-radius: 0;
  padding: 0;
  background: radial-gradient(circle at 50% 42%, #2f7bff 0%, #0e7490 42%, rgba(8, 47, 73, 0.6) 62%, transparent 72%);
  box-shadow: none;
  -webkit-mask-image: radial-gradient(circle, #000 var(--wn-fill), transparent calc(var(--wn-fill) + 7%)), radial-gradient(closest-side, #000 var(--wn-vig), transparent 100%);
  mask-image: radial-gradient(circle, #000 var(--wn-fill), transparent calc(var(--wn-fill) + 7%)), radial-gradient(closest-side, #000 var(--wn-vig), transparent 100%);
  -webkit-mask-size: var(--wn-dot) var(--wn-dot), 100% 100%;
  mask-size: var(--wn-dot) var(--wn-dot), 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  transition:
    --wn-dot 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    --wn-fill 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    --wn-vig 0.6s ease;
}
.wn-person .wn-portrait-cutout::before { display: none; }
.wn-person .wn-portrait img,
.wn-person .wn-avatar-fallback {
  border-radius: 0;
  filter: grayscale(1) brightness(1.3) contrast(1.1);
  transition: filter 0.6s ease;
}
.wn-person .wn-avatar-fallback { background: transparent; }
.wn-person .wn-portrait:hover { transform: none; box-shadow: none; }
.wn-person.is-active .wn-portrait {
  --wn-dot: 4.5px;
  --wn-fill: 100%;
  --wn-vig: 80%;
  transition:
    --wn-dot 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    --wn-fill 1.2s cubic-bezier(0.65, 0, 0.35, 1) 1.1s,
    --wn-vig 1.2s ease 1.1s;
}
.wn-person.is-active .wn-portrait:hover {
  --wn-dot: 3.5px;
  --wn-fill: 38%;
  --wn-vig: 64%;
  transition:
    --wn-dot 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    --wn-fill 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    --wn-vig 0.5s ease;
}
.wn-person.is-active .wn-portrait img,
.wn-person.is-active .wn-avatar-fallback { filter: saturate(1.15) brightness(1.15) contrast(1.08); }
.wn-person .wn-avatar-fallback { font-size: 4rem; }
.wn-person img { pointer-events: none; -webkit-user-drag: none; }
.wn-person-body { display: grid; gap: 0.25rem; }
.wn-person-name { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.wn-person-name a { color: var(--wn-white); }
.wn-person-name a:hover { color: var(--wn-cyan); }
.wn-person-title {
  margin: 0;
  color: var(--wn-cyan);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wn-person-bio {
  margin-top: 0.4rem;
  color: var(--wn-muted);
  font-size: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wn-person.is-active .wn-portrait-cutout img { animation: wn-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes wn-rise {
  from { transform: translateY(8%) scale(0.96); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}
.wn-people-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.75rem 0 2rem;
}
.wn-people-controls .wn-dots { margin-top: 0; flex-wrap: wrap; gap: 0.35rem; }
.wn-people-controls .wn-dot { width: 0.45rem; height: 0.45rem; transition: width 0.35s ease, background 0.35s ease; }
.wn-people-controls .wn-dot.is-active { width: 1.4rem; border-radius: 1rem; transform: none; }
.wn-people-arrow {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(17, 24, 39, 0.6);
  color: var(--wn-white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease;
}
.wn-people-arrow:hover { border-color: var(--wn-cyan); background: var(--wn-cyan-soft); }
.wn-people-arrow:active { transform: scale(0.9); }
@media (min-width: 761px) {
  .wn-people-track { margin-inline: 0; padding-inline: 16%; scroll-padding-inline: 16%; gap: 1.25rem; }
  .wn-people {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
}

/* On phones the role shape is drawn large behind the carousel, so the active
   card is opaque and the dots read as a halo around it. */
@media (max-width: 899px) {
  .wn-person.is-active { background: rgba(9, 14, 26, 0.94); }
}

/* The stage draws each person's role on the right; the caption names it. */
.wn-team-caption { display: grid; gap: 0.3rem; justify-items: center; margin: 0 0 1.25rem; }
.wn-team-caption-label { color: var(--wn-muted); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; }
[data-wn-role-caption] { color: #cffafe; font-weight: 700; font-size: 1.05rem; }
[data-wn-role-caption].is-in { animation: wn-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (min-width: 900px) {
  .wn-team > .wn-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; }
  .wn-team > .wn-wrap > * { grid-column: 1; }
  .wn-team > .wn-wrap > .wn-team-caption { grid-column: 2; grid-row: 1 / span 4; align-self: end; margin: 0; }
  [data-wn-role-caption] { font-size: 1.4rem; }
}

/* ==========================================================================
   Motion layer
   Entrance animations, scroll reveal, and morphing interactive states.
   The .wn-reveal class is applied by WebsiteNewJs at runtime, never in markup,
   so a visitor without JavaScript sees fully visible content instead of
   elements stuck at opacity 0.
   ========================================================================== */

@keyframes wn-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes wn-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes wn-slide-in {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: none; }
}
@keyframes wn-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes wn-shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes wn-blob {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(3%, -4%, 0) scale(1.08); }
  66% { transform: translate3d(-3%, 3%, 0) scale(0.95); }
}

/* --- Scroll reveal ------------------------------------------------------- */
.wn-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--wn-d, 0ms);
  will-change: opacity, transform;
}
.wn-reveal.wn-reveal-scale { transform: scale(0.94); }
.wn-reveal.wn-reveal-left { transform: translateX(-30px); }
.wn-reveal.wn-reveal-right { transform: translateX(30px); }
.wn-reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --- Hero entrance (above the fold, CSS-only so it never waits on JS) ---- */
.wn-hero .wn-kicker,
.wn-hero .wn-lead,
.wn-hero .wn-actions,
.wn-hero .wn-dots {
  animation: wn-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.wn-hero .wn-kicker { animation-delay: 0.05s; }
/* Entrance and shimmer must share one declaration, otherwise the more specific
   hero rule would drop the shimmer defined on .wn-h1 below. */
.wn-hero .wn-h1 {
  animation: wn-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) both,
             wn-shimmer 9s linear 0.9s infinite;
  animation-delay: 0.15s, 0.9s;
}
.wn-hero .wn-h1-solid {
  animation: wn-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.wn-hero .wn-lead { animation-delay: 0.28s; }
.wn-hero .wn-actions { animation-delay: 0.4s; }
.wn-hero .wn-dots { animation-delay: 0.5s; }
.wn-hero .wn-portrait-wrap {
  animation: wn-scale-in 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.2s;
}

/* Slow-drifting gradient blobs behind the hero. */
.wn-hero::before,
.wn-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  z-index: 0;
}
.wn-hero::before {
  width: 30rem;
  height: 30rem;
  top: -8rem;
  left: -6rem;
  background: rgba(0, 102, 255, 0.18);
  animation: wn-blob 18s ease-in-out infinite;
}
.wn-hero::after {
  width: 24rem;
  height: 24rem;
  bottom: -8rem;
  right: -4rem;
  background: rgba(6, 182, 212, 0.14);
  animation: wn-blob 22s ease-in-out infinite reverse;
}
.wn-hero > * { position: relative; z-index: 1; }

/* --- Animated gradient headline -----------------------------------------
   The gradient is palindromic and background-size is 200%, so shifting the
   position by exactly one tile width loops with no visible seam. */
.wn-h1 {
  background: linear-gradient(90deg, #fff, #bae6fd, var(--wn-cyan), #bae6fd, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 200% auto;
  animation: wn-shimmer 9s linear infinite;
}
.wn-h1-solid { animation: none; background: none; }

/* --- Sticky nav condenses on scroll ------------------------------------- */
.wn-nav {
  transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}
.wn-nav-inner {
  transition: min-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.wn-nav.is-scrolled {
  background: rgba(7, 11, 20, 0.82);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.wn-nav.is-scrolled .wn-nav-inner { min-height: 3.25rem; }

/* --- Logo --------------------------------------------------------------- */
.wn-logo-img {
  position: absolute;
  left: -22.24%;
  top: -45.89%;
  width: 142.11%;
  height: auto;
  max-width: none;
  border: 0;
}
.wn-logo-mark {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.4s ease,
              width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.wn-logo:hover .wn-logo-mark {
  transform: scale(1.08) rotate(-2deg);
  filter: drop-shadow(0 0 12px rgba(6, 182, 212, 0.55));
}
.wn-nav.is-scrolled .wn-logo-mark { --wn-mark-h: 1.8rem; }
.wn-footer .wn-logo-mark { --wn-mark-h: 2.6rem; }

/* --- Buttons: shine sweep and press feedback ---------------------------- */
.wn-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              filter 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease;
}
.wn-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.wn-btn:hover::before { left: 125%; }
.wn-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 102, 255, 0.42);
}
.wn-btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(6, 182, 212, 0.28);
}
.wn-btn:active { transform: translateY(0) scale(0.97); }

/* --- Nav links: sliding underline --------------------------------------- */
.wn-menu > li > a,
.wn-menu button.wn-more-btn {
  position: relative;
  transition: color 0.25s ease, background 0.25s ease;
}
.wn-menu > li > a::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.25rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--wn-primary), var(--wn-cyan));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.wn-menu > li > a:hover::after,
.wn-menu > li > a.is-active::after { transform: scaleX(1); }
.wn-menu-toggle { transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; }
.wn-menu-toggle:hover { border-color: var(--wn-cyan); transform: translateY(-1px); }

/* --- Tabs, chips, dots, filters ----------------------------------------- */
.wn-tab, .wn-chip {
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease,
              transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.wn-tab:hover, .wn-chip:hover { transform: translateY(-2px); border-color: var(--wn-cyan); }
.wn-tab.is-active, .wn-chip.is-active { box-shadow: 0 0 14px rgba(6, 182, 212, 0.28); }
.wn-tabpanel.is-active { animation: wn-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.wn-dot {
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}
.wn-dot:hover { transform: scale(1.25); background: var(--wn-muted); }
.wn-dot.is-active { transform: scale(1.35); box-shadow: 0 0 12px rgba(6, 182, 212, 0.7); }

/* Filter and search results fade rather than snapping out. */
[data-industry], [data-search] {
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-industry].wn-filtering, [data-search].wn-filtering {
  opacity: 0;
  transform: scale(0.96);
}

/* --- Surfaces ----------------------------------------------------------- */
.wn-client {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}
.wn-client:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: rgba(6, 182, 212, 0.5);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4), 0 0 18px rgba(6, 182, 212, 0.14);
}
.wn-portrait {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.5s ease, box-shadow 0.5s ease;
}
.wn-portrait:hover {
  transform: scale(1.03);
  border-color: rgba(6, 182, 212, 0.6);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 34px rgba(0, 102, 255, 0.3);
}
.wn-portrait img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.wn-portrait:hover img { transform: scale(1.06); }
.wn-badge { transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease; }
.wn-badge:hover { transform: translateY(-1px); }

/* --- Forms -------------------------------------------------------------- */
.wn-form {
  backdrop-filter: blur(12px);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.wn-form:focus-within {
  border-color: rgba(6, 182, 212, 0.45);
  box-shadow: 0 0 32px rgba(6, 182, 212, 0.12);
}
.wn-input, .wn-textarea, .wn-select {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.wn-input:focus, .wn-textarea:focus, .wn-select:focus {
  border-color: var(--wn-cyan);
  background: #232f3f;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18);
  outline: none;
}
.wn-alert { animation: wn-fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* --- Footer and misc links ---------------------------------------------- */
.wn-footer a, .wn-list li, .wn-crumbs a {
  transition: color 0.25s ease, transform 0.25s ease;
}
.wn-footer li:hover a { transform: translateX(3px); color: var(--wn-cyan); }
.wn-cta { position: relative; overflow: hidden; }
.wn-cta::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.16), transparent 55%);
  animation: wn-blob 16s ease-in-out infinite;
  pointer-events: none;
}
.wn-cta .wn-wrap { position: relative; z-index: 1; }
.wn-stat { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), text-shadow 0.35s ease; }
.wn-stat:hover { transform: scale(1.06); text-shadow: 0 0 22px rgba(6, 182, 212, 0.5); }

@media (hover: none) {
  .wn-card:hover, .wn-client:hover, .wn-portrait:hover, .wn-btn-primary:hover,
  .wn-btn-outline:hover, .wn-tab:hover, .wn-chip:hover, .wn-stat:hover {
    transform: none;
    box-shadow: none;
  }
  .wn-portrait:hover img { transform: none; }
  .wn-card:active, .wn-client:active { transform: scale(0.98); }
  .wn-btn:active, .wn-chip:active, .wn-tab:active, .wn-menu-toggle:active { transform: scale(0.95); }
  .wn-mobile a:active { background: var(--wn-primary-soft); transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wn-people-track { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Reveal targets must not stay hidden once transitions are switched off. */
  .wn-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .wn-hero::before, .wn-hero::after, .wn-cta::before { display: none; }
}

/* ==========================================================================
   Immersive layer (WebsiteNewStage.js)
   ========================================================================== */

/* --- Particle stage ------------------------------------------------------
   The canvas sits behind the page; story sections are transparent so the
   particles show through, while dense content sections stay opaque. */
.wn-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.wn-stage-canvas { position: absolute; inset: 0; display: block; }
.wn-stage-on .wn-stage {
  background:
    radial-gradient(60% 50% at 75% 30%, rgba(0, 102, 255, 0.10), transparent 70%),
    radial-gradient(50% 40% at 15% 80%, rgba(6, 182, 212, 0.08), transparent 70%);
}
.wn-body > main, .wn-body > .wn-cta, .wn-body > .wn-footer { position: relative; z-index: 1; }
.wn-stage-on .wn-hero-stage,
.wn-stage-on .wn-chapter { background: transparent; }
.wn-stage-on .wn-hero-stage::before,
.wn-stage-on .wn-hero-stage::after { display: none; }
.wn-solid { background: var(--wn-bg); }
.wn-solid.wn-section-muted { background: #0c1220; }
.wn-stage-on .wn-hero,
.wn-stage-on .wn-solid { background: transparent; }
.wn-stage-on .wn-section-muted { background: rgba(12, 18, 32, 0.4); }
.wn-stage-on .wn-section > .wn-wrap > :is(h2, h3, p, ul, ol, .wn-sub),
.wn-stage-on .wn-hero :is(.wn-lead, .wn-kicker, p) { text-shadow: 0 2px 18px rgba(7, 11, 20, 0.9); }

/* --- Stage hero ---------------------------------------------------------- */
.wn-hero-stage {
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--wn-nav-h));
  padding: 3rem 0 4.5rem;
}
.wn-hero-stage .wn-hero-copy { max-width: 40rem; margin-inline: auto; text-align: center; }
.wn-hero-stage .wn-lead { margin-inline: auto; }
.wn-display {
  font-size: clamp(2.4rem, 9vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.wn-hero-copy, .wn-chapter-copy { text-shadow: 0 2px 24px rgba(7, 11, 20, 0.85); }
.wn-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2.25rem;
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
}
.wn-hero-stats li { display: grid; gap: 0.15rem; color: var(--wn-muted); font-size: 0.85rem; }
.wn-hero-stats b { color: var(--wn-white); font-size: 1.6rem; line-height: 1; }
.wn-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  color: var(--wn-muted);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.wn-scroll-cue::after {
  content: "";
  width: 1px;
  height: 2.25rem;
  background: linear-gradient(var(--wn-cyan), transparent);
  animation: wn-cue 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  transform-origin: top;
}
@keyframes wn-cue {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* --- Chapters ------------------------------------------------------------ */
.wn-chapter {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 92svh;
  padding: 5rem 0;
}
.wn-chapter-copy { max-width: 34rem; margin-inline: auto; text-align: center; }
.wn-chapter-no {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  color: var(--wn-cyan);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.wn-chapter-no::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
.wn-chapter-title {
  margin: 0 0 1rem;
  color: var(--wn-white);
  font-size: clamp(2rem, 7vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.wn-chapter-lead { color: #cbd5e1; font-size: clamp(1rem, 3.4vw, 1.15rem); margin: 0 0 1.5rem; }
.wn-points { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.7rem; text-align: left; }
.wn-points li {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 2.6rem;
  border: 1px solid rgba(55, 65, 81, 0.7);
  border-radius: var(--wn-radius);
  background: rgba(15, 22, 36, 0.62);
  backdrop-filter: blur(8px);
  color: #e2e8f0;
}
.wn-points li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.25rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wn-primary), var(--wn-cyan));
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.7);
}
.wn-points strong { color: var(--wn-white); }
.wn-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; list-style: none; margin: 0 0 1.75rem; padding: 0; }
.wn-tags li {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(6, 182, 212, 0.35);
  background: rgba(6, 182, 212, 0.08);
  color: #cffafe;
  font-size: 0.85rem;
}
.wn-chapter .wn-actions { justify-content: center; }

/* --- Split headline words ------------------------------------------------ */
.wn-split, .wn-hero .wn-split {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--wn-white);
  animation: none;
}
.wn-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; }
.wn-word > span {
  display: inline-block;
  transform: translateY(105%) rotate(4deg);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
  transition-delay: calc(var(--wn-i) * 70ms);
}
.wn-split.is-in .wn-word > span { transform: none; opacity: 1; }
.wn-split .wn-word:last-child > span,
.wn-split .wn-word:nth-last-child(2) > span {
  background: linear-gradient(90deg, #e0f2fe, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

/* --- Customer cards ------------------------------------------------------ */
.wn-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  text-align: left;
}
.wn-logo-card {
  display: grid;
  gap: 0.2rem;
  height: 100%;
  min-height: 5.25rem;
  padding: 0.95rem 1rem;
  border-radius: var(--wn-radius);
  border: 1px solid rgba(55, 65, 81, 0.8);
  background: rgba(15, 22, 36, 0.7);
  backdrop-filter: blur(8px);
  color: var(--wn-white);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.wn-logo-card:hover {
  color: var(--wn-white);
  transform: translateY(-3px);
  border-color: var(--wn-cyan);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35), 0 0 22px rgba(6, 182, 212, 0.2);
}
.wn-logo-card:active { transform: scale(0.97); }
.wn-logo-name { font-weight: 800; font-size: 1.02rem; line-height: 1.25; }
.wn-logo-site { color: var(--wn-cyan); font-size: 0.8rem; overflow-wrap: anywhere; }
.wn-logo-site::after { content: " \2197"; }
.wn-logo-note { color: var(--wn-muted); font-size: 0.8rem; }
.wn-logo-feature {
  grid-column: 1 / -1;
  border-color: rgba(6, 182, 212, 0.6);
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.22), rgba(6, 182, 212, 0.12));
}
.wn-logo-feature .wn-logo-name { font-size: 1.25rem; }
.wn-logo-card { align-content: start; }
@media (max-width: 899px) {
  .wn-logo-feature ~ li:last-child:nth-child(even) { grid-column: 1 / -1; }
}
.wn-more-line { color: var(--wn-muted); margin: 0 0 1.5rem; }
.wn-more-line b { color: var(--wn-white); }

/* --- Industry capability grid ------------------------------------------- */
.wn-cap { text-align: left; }
.wn-cap .wn-cap-no { color: var(--wn-cyan); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; }
.wn-cap ul { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--wn-muted); }
.wn-cap li { margin: 0.25rem 0; }

@media (min-width: 900px) {
  .wn-hero-stage .wn-hero-copy,
  .wn-chapter-copy { margin-inline: 0; text-align: left; }
  .wn-hero-stage .wn-lead { margin-inline: 0; }
  .wn-hero-stage .wn-actions,
  .wn-chapter .wn-actions { justify-content: flex-start; }
  .wn-hero-stage .wn-actions .wn-btn { flex: 0 0 auto; }
  .wn-hero-stats, .wn-tags { justify-content: flex-start; }
  .wn-chapter[data-wn-side="left"] .wn-chapter-copy { margin-left: auto; }
  .wn-hero-stage[data-wn-side="left"] .wn-hero-copy { margin-left: auto; }
  .wn-chapter-copy { max-width: 36rem; }
  .wn-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wn-logo-feature { grid-column: span 3; }
}

/* --- Entry intro --------------------------------------------------------- */
.wn-intro-on, .wn-intro-on body { overflow: hidden; }
.wn-intro-on .wn-stage { z-index: 95; }
.wn-intro-bg {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: radial-gradient(80% 60% at 50% 45%, #0b1426, var(--wn-bg) 70%);
  transition: opacity 1.1s ease;
}
.wn-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: end center;
  padding: 0 1.25rem max(18vh, calc(env(safe-area-inset-bottom) + 6rem));
  color: var(--wn-white);
  pointer-events: none;
  transition: opacity 0.7s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.wn-intro-bg.is-leaving { opacity: 0; }
.wn-intro.is-leaving { opacity: 0; transform: scale(1.04); }
.wn-intro-word {
  margin: 0;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(0.95rem, 3.6vw, 1.35rem);
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  opacity: 0;
  transform: translateY(10px);
  animation: wn-fade-up 1s 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* --- Sound toggle -------------------------------------------------------- */
.wn-sound {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.65rem;
  border: 1px solid var(--wn-border);
  background: transparent;
  cursor: pointer;
}
.wn-sound span {
  width: 3px;
  height: 4px;
  border-radius: 2px;
  background: var(--wn-muted);
  transition: height 0.3s ease, background 0.3s ease;
}
.wn-sound.is-on span { background: var(--wn-cyan); animation: wn-eq 1.1s ease-in-out infinite; }
.wn-sound.is-on span:nth-child(2) { animation-delay: -0.3s; }
.wn-sound.is-on span:nth-child(3) { animation-delay: -0.6s; }
.wn-sound.is-on span:nth-child(4) { animation-delay: -0.9s; }
@keyframes wn-eq {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}
.wn-sound:hover { border-color: var(--wn-cyan); }

/* --- Install button and iOS sheet --------------------------------------- */
.wn-install {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(6, 182, 212, 0.5);
  background: rgba(6, 182, 212, 0.1);
  color: #cffafe;
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.wn-install[hidden] { display: none; }
.wn-install-label { display: none; }
@media (min-width: 761px) { .wn-install-label { display: inline; } }
.wn-nav-actions { display: flex; align-items: center; gap: 0.5rem; }
/* Logo, install, sound, and Menu must share a 320-480px phone header. */
@media (max-width: 479px) {
  .wn-nav-inner { gap: 0.5rem; }
  .wn-logo { gap: 0.5rem; font-size: 1.05rem; letter-spacing: 0.02em; min-width: 0; }
  .wn-logo-mark { --wn-mark-h: 1.75rem; }
  .wn-nav-actions { gap: 0.35rem; flex: 0 0 auto; }
  .wn-sound, .wn-install { width: 2.5rem; min-width: 2.5rem; height: 2.5rem; padding: 0; justify-content: center; }
  .wn-menu-toggle { min-height: 2.5rem; padding: 0.35rem 0.65rem; }
}
@media (max-width: 359px) {
  .wn-logo { font-size: 0.9rem; }
}
.wn-sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  align-items: end;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
}
.wn-sheet.is-open { background: rgba(0, 0, 0, 0.5); }
.wn-sheet-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  margin: 0 auto max(1rem, env(safe-area-inset-bottom));
  width: min(28rem, calc(100% - 2rem));
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--wn-border);
  background: #0f1624;
  box-shadow: var(--wn-shadow);
  transform: translateY(120%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.wn-sheet.is-open .wn-sheet-card { transform: none; }
.wn-sheet-card img { border-radius: 12px; }
.wn-sheet-card p { margin: 0.15rem 0; color: var(--wn-muted); font-size: 0.9rem; }
.wn-sheet-title { color: var(--wn-white) !important; font-weight: 800; }
.wn-sheet-close { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgba(148, 163, 184, 0.15); color: var(--wn-white); font-size: 1.4rem; cursor: pointer; }

/* Installed app: respect the notch and hide browser-only affordances. */
.wn-standalone .wn-nav { padding-top: env(safe-area-inset-top); }

@media (prefers-reduced-motion: reduce) {
  .wn-word > span { transform: none !important; opacity: 1 !important; }
  .wn-scroll-cue::after { display: none; }
}

/* --- Migration and integration stacks ------------------------------------ */
.wn-stack { display: grid; gap: 0.85rem; margin: 0 0 1.75rem; text-align: left; }
.wn-stack-group {
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1rem;
  background: rgba(15, 23, 42, 0.6);
  text-shadow: none;
}
.wn-stack-label {
  margin: 0 0 0.7rem;
  color: var(--wn-cyan);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.wn-stack .wn-tags { justify-content: flex-start; margin: 0; }
.wn-stack-note { margin: 0.75rem 0 0; color: var(--wn-muted); font-size: 0.9rem; }

/* --- Apps ---------------------------------------------------------------- */
.wn-app { display: grid; gap: 2rem; align-items: center; }
.wn-app-copy { text-align: left; }
.wn-app-tagline { margin: -0.25rem 0 1rem; color: var(--wn-cyan); font-weight: 600; }
.wn-feats { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.6rem; }
.wn-feats li {
  align-content: start;
  display: grid;
  gap: 0.15rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(55, 65, 81, 0.7);
  border-radius: var(--wn-radius);
  background: rgba(15, 22, 36, 0.72);
  backdrop-filter: blur(8px);
  color: var(--wn-muted);
  font-size: 0.9rem;
}
.wn-feats strong { color: var(--wn-white); font-size: 0.98rem; }
.wn-app-media { display: grid; gap: 0.75rem; }
.wn-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(6, 182, 212, 0.45);
  border-radius: 1.25rem;
  background: #0b1222;
  cursor: pointer;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 40px rgba(6, 182, 212, 0.15);
}
.wn-video img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; transform: scale(1.35); transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease; filter: brightness(0.8); }
.wn-video:hover img { transform: scale(1.42); filter: brightness(0.95); }
.wn-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wn-primary), var(--wn-cyan));
  box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.6);
  animation: wn-play-pulse 2.2s ease-out infinite;
}
.wn-video-play::after {
  content: "";
  position: absolute;
  left: 1.8rem;
  top: 1.35rem;
  border-style: solid;
  border-width: 0.9rem 0 0.9rem 1.4rem;
  border-color: transparent transparent transparent #fff;
}
@keyframes wn-play-pulse {
  0% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.55); }
  100% { box-shadow: 0 0 0 1.4rem rgba(6, 182, 212, 0); }
}
.wn-video-label {
  position: absolute;
  left: 1rem;
  bottom: 0.9rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(5, 8, 16, 0.75);
  color: var(--wn-white);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.wn-video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 1.25rem; background: #000; }
.wn-shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.wn-shots a { display: block; overflow: hidden; border-radius: 0.85rem; border: 1px solid rgba(55, 65, 81, 0.8); aspect-ratio: 4 / 3; }
.wn-shots img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; transform: scale(1.35); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.wn-shots a:hover img { transform: scale(1.5); }
.wn-app-card { text-align: left; display: flex; flex-direction: column; }
.wn-app-card .wn-app-tagline { margin: 0 0 0.75rem; font-size: 0.92rem; }
.wn-app-cat { margin: 0 0 0.5rem; color: var(--wn-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.wn-app-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; color: #cbd5e1; font-size: 0.9rem; }
.wn-app-list li { position: relative; padding-left: 1.1rem; }
.wn-app-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--wn-cyan); box-shadow: 0 0 8px rgba(6, 182, 212, 0.7); }
.wn-chapter[data-wn-side="center"] .wn-chapter-copy { margin-inline: auto; text-align: center; }
.wn-chapter[data-wn-side="center"] .wn-actions { justify-content: center; }
@media (min-width: 600px) {
  .wn-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .wn-app { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; }
  .wn-app-flip .wn-app-copy { order: 2; }
}

/* --- Gold accents -------------------------------------------------------
   Blue stays the action colour (buttons, links); gold marks highlights:
   labels, headline accents, numbers, bullets, and active states. */
:root {
  --wn-gold: #e9b949;
  --wn-gold-light: #fbe3a1;
  --wn-gold-soft: rgba(233, 185, 73, 0.14);
  --wn-gold-line: rgba(233, 185, 73, 0.45);
}
::selection { background: rgba(233, 185, 73, 0.35); color: #fff; }

.wn-kicker { background: var(--wn-gold-soft); color: var(--wn-gold); border: 1px solid rgba(233, 185, 73, 0.3); }
.wn-chapter-no, .wn-cap .wn-cap-no, .wn-stack-label, .wn-team-caption-label, .wn-app-cat { color: var(--wn-gold); }
.wn-h1 { background-image: linear-gradient(90deg, #fff, var(--wn-gold-light), var(--wn-gold), var(--wn-gold-light), #fff); }
.wn-split .wn-word:last-child > span,
.wn-split .wn-word:nth-last-child(2) > span { background: linear-gradient(90deg, var(--wn-gold-light), var(--wn-gold)); -webkit-background-clip: text; background-clip: text; }

.wn-stat, .wn-hero-stats b, .wn-more-line b { color: var(--wn-gold); }
.wn-stat:hover { text-shadow: 0 0 22px rgba(233, 185, 73, 0.5); }
.wn-quote::before { color: var(--wn-gold); }

.wn-menu > li > a::after { background: linear-gradient(90deg, var(--wn-gold), var(--wn-gold-light)); }
.wn-menu-toggle:hover { border-color: var(--wn-gold); }
.wn-footer h2, .wn-footer h3 { color: var(--wn-gold); }

.wn-points li::before, .wn-app-list li::before { background: linear-gradient(135deg, var(--wn-gold-light), var(--wn-gold)); box-shadow: 0 0 12px rgba(233, 185, 73, 0.65); }
.wn-tags li { border-color: var(--wn-gold-line); background: var(--wn-gold-soft); color: var(--wn-gold-light); }
.wn-feats strong { color: var(--wn-gold-light); }
.wn-app-tagline, .wn-person-title { color: var(--wn-gold); }

.wn-logo-feature { border-color: var(--wn-gold-line); background: linear-gradient(135deg, rgba(233, 185, 73, 0.16), rgba(0, 102, 255, 0.14)); }
.wn-logo-card:hover { border-color: var(--wn-gold); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35), 0 0 22px rgba(233, 185, 73, 0.22); }
.wn-card:hover { border-color: var(--wn-gold-line); }

.wn-dot.is-active, .wn-people-controls .wn-dot.is-active { background: var(--wn-gold); box-shadow: 0 0 12px rgba(233, 185, 73, 0.6); }
.wn-person.is-active { border-color: var(--wn-gold-line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 34px rgba(233, 185, 73, 0.16); }
.wn-video { border-color: var(--wn-gold-line); }
.wn-video-play { background: linear-gradient(135deg, var(--wn-gold-light), var(--wn-gold)); animation-name: wn-play-pulse-gold; }
.wn-video-play::after { border-color: transparent transparent transparent #1a1305; }
@keyframes wn-play-pulse-gold {
  0% { box-shadow: 0 0 0 0 rgba(233, 185, 73, 0.55); }
  100% { box-shadow: 0 0 0 1.4rem rgba(233, 185, 73, 0); }
}
.wn-btn-outline:hover { border-color: var(--wn-gold); color: var(--wn-gold-light); }

/* Blue surfaces carry gold: the CTA band is deep blue lit by a drifting gold
   glow with gold hairlines, and primary buttons get a gold edge. */
.wn-cta {
  background:
    radial-gradient(70% 140% at 88% 10%, rgba(233, 185, 73, 0.42), transparent 60%),
    radial-gradient(60% 120% at 8% 100%, rgba(233, 185, 73, 0.2), transparent 60%),
    linear-gradient(115deg, #082a6b 0%, #0057e0 48%, #0a3d9e 100%);
  border-top: 1px solid var(--wn-gold-line);
  border-bottom: 1px solid var(--wn-gold-line);
}
.wn-cta::before { background: radial-gradient(circle at 30% 40%, rgba(251, 227, 161, 0.22), transparent 55%); }
.wn-cta h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.wn-gold-text {
  background: linear-gradient(90deg, var(--wn-gold-light), var(--wn-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wn-btn-gold {
  background: linear-gradient(135deg, var(--wn-gold-light), var(--wn-gold) 55%, #c9952e);
  color: #1a1305;
  box-shadow: 0 10px 28px rgba(233, 185, 73, 0.35);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, filter 0.3s ease;
}
.wn-btn-gold:hover { color: #1a1305; transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 34px rgba(233, 185, 73, 0.5); }
.wn-btn-primary { border-color: rgba(251, 227, 161, 0.45); box-shadow: inset 0 1px 0 rgba(251, 227, 161, 0.35); }
.wn-btn-primary:hover { box-shadow: 0 12px 26px rgba(0, 102, 255, 0.38), 0 0 18px rgba(233, 185, 73, 0.3); }

/* --- Salesforce platform page ------------------------------------------- */
.wn-fine { color: #6b7280; font-size: 0.78rem; margin: 1rem auto 0; max-width: 44rem; }
.wn-jump {
  position: sticky;
  top: calc(var(--wn-nav-h) + 0.5rem);
  z-index: 5;
  display: flex;
  gap: 0.4rem;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 0 auto;
  padding: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--wn-gold-line);
  border-radius: 999px;
  background: rgba(7, 11, 20, 0.82);
  backdrop-filter: blur(12px);
}
.wn-jump::-webkit-scrollbar { display: none; }
.wn-jump a { flex: 0 0 auto; padding: 0.4rem 0.85rem; border-radius: 999px; color: #cbd5e1; font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.wn-jump a:hover { background: var(--wn-gold-soft); color: var(--wn-gold-light); }

.wn-cloud-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; text-align: left; }
.wn-cloud, .wn-erp {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 1rem;
  border: 1px solid rgba(55, 65, 81, 0.8);
  border-radius: var(--wn-radius);
  background: rgba(15, 22, 36, 0.78);
  backdrop-filter: blur(8px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease;
}
.wn-cloud:hover, .wn-erp:hover { transform: translateY(-3px); border-color: var(--wn-gold-line); }
.wn-cloud h3, .wn-erp h3 { margin: 0; color: var(--wn-white); font-size: 1.02rem; }
.wn-cloud p, .wn-erp p { margin: 0; color: var(--wn-muted); font-size: 0.85rem; }
.wn-cloud .wn-cloud-rank, .wn-erp .wn-cloud-rank { color: var(--wn-gold); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.wn-cloud .wn-cloud-count { color: var(--wn-cyan); font-size: 0.78rem; font-weight: 600; margin-top: 0.25rem; }
.wn-cloud-hot { border-color: var(--wn-gold-line); background: linear-gradient(135deg, rgba(233, 185, 73, 0.14), rgba(0, 102, 255, 0.14)); }
.wn-erp-grid { display: grid; gap: 0.7rem; margin: 0 0 1.25rem; text-align: left; }

.wn-compare-wrap { overflow-x: auto; border: 1px solid rgba(55, 65, 81, 0.8); border-radius: 1rem; background: rgba(10, 15, 26, 0.82); backdrop-filter: blur(8px); }
.wn-compare { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: 0.85rem; }
.wn-compare th, .wn-compare td { padding: 0.75rem 0.9rem; border-bottom: 1px solid rgba(55, 65, 81, 0.6); text-align: left; vertical-align: top; }
.wn-compare thead th { color: var(--wn-muted); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.wn-compare tbody th { color: var(--wn-white); font-weight: 600; position: sticky; left: 0; background: rgba(10, 15, 26, 0.95); }
.wn-compare td { color: var(--wn-muted); }
.wn-compare td b { display: block; color: #e2e8f0; font-size: 1.05rem; }
.wn-compare .is-sf { background: rgba(233, 185, 73, 0.08); }
.wn-compare thead .is-sf { color: var(--wn-gold); }
.wn-compare td.is-sf b { color: var(--wn-gold); }
.wn-compare tbody tr:last-child th, .wn-compare tbody tr:last-child td { border-bottom: 0; }

.wn-roi-hero { display: grid; justify-items: center; margin: 0.5rem 0 2rem; }
.wn-roi-hero b {
  font-size: clamp(4rem, 16vw, 7rem);
  line-height: 1;
  background: linear-gradient(90deg, var(--wn-gold-light), var(--wn-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wn-roi-hero span { color: #cbd5e1; }
.wn-roi-bars { list-style: none; margin: 0 auto 2.5rem; padding: 0; max-width: 40rem; display: grid; gap: 0.6rem; text-align: left; }
.wn-roi-bars li { display: grid; grid-template-columns: 6.5rem 1fr 3.5rem; align-items: center; gap: 0.75rem; color: var(--wn-muted); font-size: 0.88rem; }
.wn-roi-bars i { height: 0.55rem; border-radius: 999px; background: rgba(148, 163, 184, 0.18); position: relative; overflow: hidden; }
.wn-roi-bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: #64748b; }
.wn-roi-bars .is-sf { color: var(--wn-white); }
.wn-roi-bars .is-sf i::after { background: linear-gradient(90deg, var(--wn-primary), var(--wn-gold)); box-shadow: 0 0 14px rgba(233, 185, 73, 0.5); }
.wn-roi-bars b { text-align: right; color: #e2e8f0; }
.wn-roi-bars .is-sf b { color: var(--wn-gold); }
.wn-roi-cards { text-align: left; margin-bottom: 2rem; }
.wn-roi-val { margin: 0 0 0.35rem; color: var(--wn-gold); font-size: 1.9rem; font-weight: 800; line-height: 1.1; }

@media (min-width: 761px) {
  .wn-cloud-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wn-erp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .wn-cloud-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}