/* 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; }
.wn-apply { max-width: 52rem; margin: 2rem auto 0; }
.wn-apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 1rem;
}
.wn-span-2 { grid-column: 1 / -1; }
.wn-form-title {
  margin: 0.35rem 0 0.85rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--wn-border);
  font-size: 1rem;
  color: var(--wn-white);
}
.wn-hint { color: var(--wn-muted); font-size: 0.8rem; margin: -0.45rem 0 0.9rem; line-height: 1.45; }
.wn-note { color: #fca5a5; font-size: 0.9rem; margin: 0 0 0.9rem; }
.wn-req { color: var(--wn-cyan); }
.wn-file {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  color: #d1d5db;
  font: inherit;
  font-size: max(1rem, 16px);
}
.wn-file::file-selector-button,
.wn-file::-webkit-file-upload-button {
  margin-right: 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--wn-primary);
  color: #fff;
  padding: 0.45rem 0.8rem;
  font: inherit;
  cursor: pointer;
}
@media (min-width: 48rem) {
  .wn-apply-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 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 stage ---------------------------------------------------------
   Everyone stands in a crowd of dots behind one person. Changing focus sends
   the current person back into that crowd as dots, and brings a dotted person
   forward until the dots close into a photograph. */
.wn-people { position: relative; min-width: 0; margin-top: 0.5rem; }
.wn-people-track {
  position: relative;
  display: block;
  height: 32rem;
  overflow: hidden;
  padding: 0;
  margin: 0;
  scrollbar-width: none;
  touch-action: pan-y;
}
.wn-people-track::-webkit-scrollbar { display: none; }
.wn-people-track:focus-visible { outline-offset: 6px; border-radius: var(--wn-radius); }
.wn-person {
  --wn-dot: 7px;
  position: absolute;
  left: 50%;
  top: 4%;
  width: min(12.5rem, 42vw);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0;
  margin: 0;
  padding: 0;
  text-align: center;
  border: 0;
  background: none;
  box-shadow: none;
  opacity: var(--wn-o, 0);
  z-index: var(--wn-z, 1);
  transform: translate(calc(-50% + var(--wn-x, 0px)), var(--wn-y, 0px)) scale(var(--wn-s, 0.32));
  transform-origin: center bottom;
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.wn-person.is-crowd { pointer-events: auto; cursor: pointer; }
.wn-person.is-active { pointer-events: auto; cursor: default; }
/* Without the stage script, show only the selected person in normal flow. */
.wn-people:not(.is-stage) .wn-people-track { height: auto; }
.wn-people:not(.is-stage) .wn-person.is-active {
  position: relative;
  left: auto;
  top: auto;
  opacity: 1;
  transform: none;
  margin: 0 auto;
}
.wn-people:not(.is-stage) .wn-person:not(.is-active) { display: none; }
.wn-person-photo { position: relative; width: 100%; display: grid; place-items: center; }
/* Standing figures. The face stays a photograph. From the chest down the
   same portrait dissolves into blue dots, with no frame around it. */
.wn-person .wn-portrait,
.wn-roster .wn-portrait,
.wn-standing .wn-portrait {
  width: 100%;
  aspect-ratio: 3 / 4.1;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
.wn-person .wn-portrait-cutout,
.wn-roster .wn-portrait-cutout,
.wn-standing .wn-portrait-cutout {
  background: none;
  isolation: auto;
}
.wn-person .wn-portrait-cutout::before,
.wn-roster .wn-portrait-cutout::before,
.wn-standing .wn-portrait-cutout::before { display: none; }
.wn-person .wn-portrait img,
.wn-roster .wn-portrait img,
.wn-standing .wn-portrait img,
.wn-person .wn-avatar-fallback,
.wn-roster .wn-avatar-fallback,
.wn-standing .wn-avatar-fallback {
  border-radius: 0;
  object-fit: contain;
  object-position: center top;
  filter: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, 0.55) 64%, transparent 84%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, 0.55) 64%, transparent 84%);
}
.wn-person .wn-portrait::after,
.wn-roster .wn-portrait::after,
.wn-standing .wn-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--wn-photo);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  filter: grayscale(1) sepia(1) hue-rotate(168deg) saturate(5.5) brightness(1.35) contrast(1.05);
  pointer-events: none;
  -webkit-mask-image:
    radial-gradient(circle at center, #000 42%, transparent 70%),
    linear-gradient(to bottom, transparent 16%, #000 40%, #000 58%, transparent 90%);
  mask-image:
    radial-gradient(circle at center, #000 42%, transparent 70%),
    linear-gradient(to bottom, transparent 16%, #000 40%, #000 58%, transparent 90%);
  -webkit-mask-size: var(--wn-dot, 7px) var(--wn-dot, 7px), 100% 100%;
  mask-size: var(--wn-dot, 7px) var(--wn-dot, 7px), 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.wn-person .wn-avatar-fallback,
.wn-roster .wn-avatar-fallback { background: transparent; font-size: 4rem; }
.wn-person .wn-portrait:hover,
.wn-roster .wn-portrait:hover,
.wn-standing .wn-portrait:hover { transform: none; box-shadow: none; }
.wn-person.is-active { --wn-dot: 4px; }
.wn-person img { pointer-events: none; -webkit-user-drag: none; }
.wn-person-body {
  position: absolute;
  left: 50%;
  top: calc(100% - 0.2rem);
  display: grid;
  gap: 0.25rem;
  width: 14rem;
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.wn-person.is-active .wn-person-body {
  opacity: 1;
  transform: translateX(-50%);
  pointer-events: auto;
  transition: opacity 0.45s ease 0.55s, transform 0.45s ease 0.55s;
}
.wn-person-name { margin: 0; font-size: 1.35rem; 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: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wn-people-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.25rem 0 1.25rem;
}
.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 { height: 40rem; }
  .wn-person { width: min(13.5rem, 28vw); }
}

/* The orbit caption belonged to the particle ring. The crowd is the portrait now. */
.wn-team-caption { display: none; }

/* Full team roster: the same standing figures, side by side, with no cards. */
.wn-roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 0.75rem;
  align-items: end;
}
.wn-roster-link {
  display: grid;
  justify-items: center;
  text-align: center;
  color: inherit;
  text-decoration: none;
}
.wn-roster .wn-portrait {
  width: min(100%, 10.5rem);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.wn-roster-link:hover .wn-portrait,
.wn-roster-link:focus-visible .wn-portrait { transform: translateY(-10px) scale(1.04); }
.wn-roster-name { margin: 0.6rem 0 0; font-size: 1.05rem; color: var(--wn-white); }
.wn-roster-link:hover .wn-roster-name { color: var(--wn-cyan); }
.wn-roster-title {
  margin: 0.25rem 0 0;
  min-height: 1.1em;
  color: var(--wn-gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.wn-standing .wn-portrait { width: min(16rem, 72vw); margin: 0 auto 1rem; }
@media (min-width: 760px) {
  .wn-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1rem; }
}
@media (min-width: 1100px) {
  .wn-roster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.75rem 1.25rem; }
  .wn-roster .wn-portrait { width: min(100%, 12rem); }
}

/* ==========================================================================
   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; }
@media (prefers-reduced-motion: no-preference) {
  .wn-stage-on .wn-hero-copy,
  .wn-stage-on .wn-chapter-copy {
    opacity: clamp(0.55, 1.15 - abs(var(--wn-pass, 0)) * 0.45, 1);
    transform: translate3d(calc(var(--wn-mx, 0) * 1px), calc(var(--wn-my, 0) * 1px), 0);
    perspective: 1000px;
  }
  /* Whole cards drift. Chips stay inside their box, so labels and pills never cross. */
  .wn-stage-on :is(.wn-points li, .wn-logo-card, .wn-stack-group, .wn-hero-stats li) {
    --slot: calc((var(--wn-i, 0) - 1) * 0.45);
    opacity: clamp(0.9, 1.04 - abs(var(--wn-pass, 0)) * 0.1, 1);
    transform:
      translate3d(
        calc(var(--slot) * -6px),
        calc(var(--wn-pass, 0) * 12px + var(--slot) * 8px + sin(calc(var(--wn-t, 0) * 1rad + var(--wn-i, 0) * 0.85rad)) * var(--wn-hang, 0) * 0.35px),
        calc(var(--slot) * -10px)
      )
      rotate(calc(var(--wn-pass, 0) * -0.3deg + var(--slot) * -0.7deg + sin(calc(var(--wn-t, 0) * 0.7rad + var(--wn-i, 0) * 1rad)) * var(--wn-hang, 0) * 0.025deg));
    transform-origin: 50% 40%;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
  }
}
html.wn-cursor-on,
html.wn-cursor-on * { cursor: none; }
html.wn-cursor-on input,
html.wn-cursor-on textarea,
html.wn-cursor-on select,
html.wn-cursor-hide,
html.wn-cursor-hide * { cursor: auto; }
.wn-cursor,
.wn-cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 220;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
}
html.wn-cursor-hot .wn-cursor,
html.wn-cursor-hot .wn-cursor-ring { opacity: 1; }
html.wn-cursor-hide .wn-cursor,
html.wn-cursor-hide .wn-cursor-ring { opacity: 0; }
.wn-cursor {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: #fff;
  mix-blend-mode: difference;
}
.wn-cursor-ring {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid rgba(6, 182, 212, 0.9);
  box-shadow: 0 0 18px rgba(6, 182, 212, 0.28);
}
.wn-cursor-ring.is-lock {
  border-color: rgba(250, 214, 90, 0.95);
  background: rgba(6, 182, 212, 0.08);
  box-shadow: 0 0 22px rgba(250, 214, 90, 0.28);
}
.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: transparent; box-shadow: none; }
.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)); }
}

/* Interior page titles: plain white with the gold split-word accent. The
   shorthand reset on .wn-h1-solid would otherwise paint the gradient as a box. */
.wn-h1.wn-h1-solid {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--wn-white);
  animation: none;
}
.wn-split .wn-word:first-child:nth-last-child(2) > span {
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* --- Clients directory ---------------------------------------------------- */
.wn-hero-stats-center { justify-content: center; margin-top: 1.75rem; }
.wn-cl-tools { display: flex; justify-content: center; margin-bottom: 1rem; }
.wn-cl-search { max-width: 26rem; border-radius: 999px; padding-left: 1.1rem; }
.wn-cl-filters { justify-content: center; margin-bottom: 1.75rem; }
.wn-cl-filters .wn-chip span { margin-left: 0.3rem; color: var(--wn-gold); font-size: 0.75rem; }
.wn-cl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.wn-cl-card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.35rem;
  height: 100%;
  padding: 1.1rem 0.75rem 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);
  color: var(--wn-white);
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
a.wn-cl-card:hover { color: var(--wn-white); transform: translateY(-4px); border-color: var(--wn-gold); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35), 0 0 22px rgba(233, 185, 73, 0.2); }
.wn-cl-card img { width: 5.5rem; height: 5.5rem; object-fit: contain; opacity: 0.88; transition: opacity 0.3s ease, transform 0.4s ease; }
a.wn-cl-card:hover img { opacity: 1; transform: scale(1.06); }
.wn-cl-mono {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  border: 1px solid var(--wn-gold-line);
  background: radial-gradient(circle at 35% 30%, rgba(233, 185, 73, 0.3), rgba(0, 102, 255, 0.12) 70%);
  color: var(--wn-gold-light);
  font-size: 2.2rem;
  font-weight: 800;
}
.wn-cl-name { font-weight: 700; font-size: 0.95rem; line-height: 1.25; }
.wn-cl-ind { color: var(--wn-gold); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
a.wn-cl-card .wn-cl-name::after { content: " \2197"; color: var(--wn-cyan); font-size: 0.8rem; }
@media (min-width: 600px) { .wn-cl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .wn-cl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .wn-cl-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Portal sign-in and password reset */
.wn-auth { min-height: calc(100vh - var(--wn-nav-h)); display: flex; align-items: center; padding: 3rem 0 4rem; }
.wn-auth-grid { display: grid; gap: 2.5rem; align-items: center; width: 100%; }
.wn-auth-intro .wn-lead { max-width: 30rem; }
.wn-auth-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; max-width: 30rem; }
.wn-auth-perks li { position: relative; padding: 0.9rem 1rem 0.9rem 3rem; border-radius: 0.85rem; background: rgba(7, 11, 20, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--wn-muted); font-size: 0.92rem; line-height: 1.45; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wn-auth-perks li::before { content: ""; position: absolute; left: 1.1rem; top: 1.15rem; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--wn-gold-light), var(--wn-gold)); box-shadow: 0 0 12px rgba(233, 185, 73, 0.55); }
.wn-auth-perks strong { display: block; color: var(--wn-white); font-size: 1rem; margin-bottom: 0.15rem; }
.wn-auth-card { position: relative; width: 100%; max-width: 27rem; justify-self: center; padding: 2.25rem 2rem 2rem; border-radius: 1.25rem; background: linear-gradient(160deg, rgba(20, 28, 46, 0.92), rgba(9, 13, 24, 0.94)); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.wn-auth-card::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--wn-gold), var(--wn-gold-light), var(--wn-gold), transparent); }
.wn-auth-title { margin: 0 0 0.35rem; font-size: 1.6rem; color: var(--wn-white); }
.wn-auth-sub { margin: 0 0 1.5rem; color: var(--wn-muted); font-size: 0.92rem; line-height: 1.5; }
.wn-auth-form .wn-label { color: #e5e7eb; }
.wn-auth-form .wn-input { background: rgba(3, 6, 14, 0.7); border-color: rgba(255, 255, 255, 0.14); transition: border-color 0.2s, box-shadow 0.2s; }
.wn-auth-form .wn-input:focus { outline: none; border-color: var(--wn-gold); box-shadow: 0 0 0 3px var(--wn-gold-soft); }
.wn-auth-form .wn-btn { margin-top: 0.5rem; }
.wn-auth-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.wn-auth-link { font-size: 0.82rem; color: var(--wn-gold); text-decoration: none; }
.wn-auth-link:hover, .wn-auth-foot a:hover { text-decoration: underline; }
.wn-pass { position: relative; }
.wn-pass .wn-input { padding-right: 4.5rem; }
.wn-pass-toggle { position: absolute; right: 0.4rem; top: 0.4rem; height: calc(2.75rem - 0.8rem); padding: 0 0.75rem; border: 0; border-radius: 0.45rem; background: rgba(255, 255, 255, 0.07); color: #e5e7eb; font: inherit; font-size: 0.8rem; cursor: pointer; }
.wn-pass-toggle:hover { background: var(--wn-gold-soft); color: var(--wn-gold-light); }
.wn-auth-foot { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--wn-muted); font-size: 0.88rem; text-align: center; }
.wn-auth-foot a { color: var(--wn-gold); text-decoration: none; }
.wn-auth-form .message { margin: 0 0 1rem; padding: 0.85rem 1rem; border-radius: 0.65rem; background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.3); color: var(--wn-danger); font-size: 0.9rem; }
.wn-auth-form .message img { display: none; }
.wn-auth-form .message table, .wn-auth-form .message td { border: 0; padding: 0; background: none; }
.wn-auth-form .message .messageText, .wn-auth-form .message h4 { color: inherit; font-weight: 600; margin: 0; }
@media (min-width: 900px) {
  .wn-auth-grid { grid-template-columns: 1.1fr 1fr; grid-template-areas: "intro card" "perks card"; column-gap: 4rem; row-gap: 0; }
  .wn-auth-intro { grid-area: intro; align-self: end; }
  .wn-auth-perks { grid-area: perks; align-self: start; }
  .wn-auth-card { grid-area: card; justify-self: end; }
  .wn-auth-grid:not(:has(.wn-auth-perks)) { grid-template-areas: "intro card"; }
  .wn-auth-grid:not(:has(.wn-auth-perks)) .wn-auth-intro { align-self: center; }
}
@media (max-width: 899px) {
  .wn-auth { padding-top: 2rem; align-items: flex-start; }
  .wn-auth-grid { gap: 1.75rem; max-width: 30rem; }
  .wn-auth-card, .wn-auth-perks { max-width: none; }
  .wn-auth-intro .wn-h1 { margin-bottom: 0.5rem; }
  .wn-auth-perks { order: 2; justify-self: center; width: 100%; max-width: 27rem; }
  .wn-auth-card { order: 1; padding: 1.75rem 1.25rem 1.5rem; }
}
.wn-cl-filters .wn-chip.is-active { border-color: var(--wn-gold); background: var(--wn-gold-soft); box-shadow: 0 0 14px rgba(233, 185, 73, 0.25); }

/* Hero glows as soft gradients: a blur filter is clipped by the hero's overflow and shows hard box edges. */
.wn-hero::before, .wn-hero::after { filter: none; }
.wn-hero::before { width: 40rem; height: auto; top: 0; bottom: 0; left: -14rem; background: radial-gradient(closest-side, rgba(0, 102, 255, 0.2), rgba(0, 102, 255, 0.06) 55%, transparent); }
.wn-hero::after { width: 34rem; height: auto; top: 15%; bottom: 0; right: -12rem; background: radial-gradient(closest-side, rgba(233, 185, 73, 0.14), rgba(233, 185, 73, 0.04) 55%, transparent); }

/* --- Portal: login, learning, cases, sales support, certificates, Salesforce Power extras --- */
.wn-body [hidden] { display: none !important; }
.wn-account { border-color: var(--wn-gold-line); color: var(--wn-gold-light); }
.wn-account::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.45rem; border-radius: 50%; background: var(--wn-ok); box-shadow: 0 0 8px rgba(52, 211, 153, 0.7); vertical-align: middle; }
html.wn-pt-lock { overflow: hidden; }
html.wn-pt-locked main { filter: blur(14px); pointer-events: none; user-select: none; }
.wn-pt-hero { padding: 2rem 0 1.25rem; }
.wn-pt-hero .wn-h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin: 0.6rem 0 0.4rem; }
.wn-pt-hero .wn-lead { margin: 0; }
.wn-pt-main { padding-top: 1.25rem; min-height: 50vh; }
.wn-pt-muted { color: var(--wn-muted); }
.wn-pt-offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
.wn-pt-loading { display: flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 3rem 1rem; color: var(--wn-muted); }
.wn-pt-spinner { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid rgba(233, 185, 73, 0.25); border-top-color: var(--wn-gold); animation: wn-pt-spin 0.8s linear infinite; }
@keyframes wn-pt-spin { to { transform: rotate(360deg); } }
.wn-pt-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.wn-pt-link { border: 0; background: none; padding: 0; font: inherit; color: var(--wn-gold); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.wn-pt-link:hover, .wn-pt-link.is-done { color: var(--wn-gold-light); }
.wn-pt-empty { text-align: center; padding: 2.5rem 1rem; border: 1px dashed rgba(255, 255, 255, 0.14); border-radius: 1rem; color: var(--wn-muted); }
.wn-pt-empty p { margin: 0 0 1rem; }
.wn-pt-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1rem; }
.wn-pt-btn-sm { padding: 0.45rem 0.85rem; font-size: 0.85rem; min-height: 0; }
.wn-pt-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wn-pt-chip { display: inline-flex; align-items: center; padding: 0.22rem 0.65rem; border-radius: 999px; font-size: 0.78rem; border: 1px solid rgba(255, 255, 255, 0.14); color: #d1d5db; background: rgba(255, 255, 255, 0.04); }
a.wn-pt-chip:hover { border-color: var(--wn-gold); color: var(--wn-white); }
.wn-pt-chip.is-gold { border-color: var(--wn-gold-line); background: var(--wn-gold-soft); color: var(--wn-gold-light); }
.wn-pt-pill { flex: none; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.wn-pt-pill::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.wn-pt-pill.is-done { color: var(--wn-ok); background: rgba(52, 211, 153, 0.12); }
.wn-pt-pill.is-active { color: var(--wn-gold-light); background: var(--wn-gold-soft); }
.wn-pt-pill.is-todo { color: #cbd5e1; background: rgba(148, 163, 184, 0.12); }
.wn-pt-progress { position: relative; height: 0.45rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; flex: 1; }
.wn-pt-progress span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--wn-primary), var(--wn-cyan) 60%, var(--wn-gold)); transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.wn-pt-panel { padding: 1.25rem; border-radius: 1rem; background: linear-gradient(160deg, rgba(20, 28, 46, 0.85), rgba(9, 13, 24, 0.9)); border: 1px solid rgba(255, 255, 255, 0.09); }
.wn-pt-h { margin: 1.5rem 0 0.75rem; font-size: 1.05rem; color: var(--wn-white); }
.wn-pt-panel .wn-pt-h:first-child { margin-top: 0; }
.wn-pt-h-lg { font-size: 1.35rem; margin-top: 2.25rem; }
.wn-pt-pre { white-space: pre-wrap; overflow-wrap: anywhere; color: #d1d5db; margin: 0.75rem 0 0; }
.wn-pt-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0.35rem 0 0; }
.wn-pt-back { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 1rem; color: var(--wn-muted); font-size: 0.9rem; }
.wn-pt-back::before { content: "←"; }
.wn-pt-back:hover { color: var(--wn-gold-light); }

/* Portal bar */
.wn-pt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; margin-bottom: 1.75rem; padding: 0.6rem 0.6rem 0.6rem 0.75rem; border-radius: 1rem; background: rgba(15, 22, 36, 0.8); border: 1px solid rgba(255, 255, 255, 0.08); }
.wn-pt-tabs { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.wn-pt-tabs::-webkit-scrollbar { display: none; }
.wn-pt-tab { flex: none; padding: 0.5rem 0.9rem; border-radius: 0.65rem; color: var(--wn-muted); font-size: 0.9rem; font-weight: 600; }
.wn-pt-tab:hover { color: var(--wn-white); background: rgba(255, 255, 255, 0.05); }
.wn-pt-tab.is-active { color: #1a1305; background: linear-gradient(135deg, var(--wn-gold-light), var(--wn-gold)); }
.wn-pt-who { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.wn-pt-avatar { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-weight: 800; font-size: 0.85rem; color: #1a1305; background: linear-gradient(135deg, var(--wn-gold-light), var(--wn-gold)); }
.wn-pt-who-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wn-pt-who-name strong { color: var(--wn-white); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wn-pt-who-name small { color: var(--wn-muted); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wn-pt-signout { padding: 0.45rem 0.85rem; font-size: 0.82rem; min-height: 0; }

/* Gate */
.wn-pt-gate { max-width: 34rem; margin: 1rem auto; text-align: center; padding: 2rem 1.5rem; border-radius: 1.25rem; background: linear-gradient(160deg, rgba(20, 28, 46, 0.92), rgba(9, 13, 24, 0.94)); border: 1px solid rgba(255, 255, 255, 0.1); position: relative; }
.wn-pt-gate::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--wn-gold), transparent); }
.wn-pt-gate p { color: var(--wn-muted); }
.wn-pt-gate .wn-pt-actions { justify-content: center; }

/* Hub */
.wn-pt-welcome { margin-bottom: 1.5rem; }
.wn-pt-welcome .wn-h2 { margin-bottom: 0.25rem; }
.wn-pt-welcome p { margin: 0 0 0.75rem; }
.wn-pt-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.wn-pt-tile { position: relative; display: flex; flex-direction: column; gap: 0.4rem; padding: 1.4rem; min-height: 11rem; border-radius: 1.1rem; color: var(--wn-text); background: linear-gradient(160deg, rgba(20, 28, 46, 0.9), rgba(9, 13, 24, 0.92)); border: 1px solid rgba(255, 255, 255, 0.09); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
a.wn-pt-tile:hover { color: var(--wn-text); transform: translateY(-3px); border-color: var(--wn-gold-line); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), 0 0 24px rgba(233, 185, 73, 0.15); }
.wn-pt-tile.is-locked { opacity: 0.55; }
.wn-pt-tile-icon { width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; background: var(--wn-gold-soft); border: 1px solid var(--wn-gold-line); position: relative; }
.wn-pt-tile-icon::after { content: ""; position: absolute; inset: 0.65rem; border-radius: 0.3rem; background: linear-gradient(135deg, var(--wn-gold-light), var(--wn-gold)); }
.wn-pt-tile-icon.is-learn::after { border-radius: 0.2rem 0.2rem 50% 50%; }
.wn-pt-tile-icon.is-cases::after { border-radius: 50% 50% 50% 0.15rem; }
.wn-pt-tile-icon.is-sales::after { clip-path: polygon(0 100%, 30% 45%, 55% 70%, 100% 0, 100% 100%); border-radius: 0; }
.wn-pt-tile-icon.is-power::after { clip-path: polygon(55% 0, 10% 58%, 45% 58%, 35% 100%, 90% 38%, 55% 38%); border-radius: 0; }
.wn-pt-tile-title { font-size: 1.15rem; font-weight: 700; color: var(--wn-white); margin-top: 0.4rem; }
.wn-pt-tile-text { color: var(--wn-muted); font-size: 0.9rem; flex: 1; }
.wn-pt-tile-go { align-self: flex-start; font-size: 0.8rem; font-weight: 700; color: var(--wn-gold); }
a .wn-pt-tile-go::after, a.wn-pt-cert .wn-pt-tile-go::after { content: " →"; }
.wn-pt-foot { margin-top: 1.75rem; color: var(--wn-muted); font-size: 0.9rem; }

/* Segmented tabs and stats */
.wn-pt-seg { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.25rem; }
.wn-pt-seg-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); color: var(--wn-muted); font: inherit; font-size: 0.88rem; cursor: pointer; }
.wn-pt-seg-btn:hover { color: var(--wn-white); border-color: rgba(255, 255, 255, 0.25); }
.wn-pt-seg-btn.is-active { color: var(--wn-white); border-color: var(--wn-gold); background: var(--wn-gold-soft); }
.wn-pt-count { min-width: 1.4rem; padding: 0 0.35rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 0.72rem; text-align: center; line-height: 1.4rem; }
.wn-pt-seg-btn.is-active .wn-pt-count { background: var(--wn-gold); color: #1a1305; }
.wn-pt-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.wn-pt-stat { padding: 0.9rem 1rem; border-radius: 0.9rem; background: rgba(15, 22, 36, 0.75); border: 1px solid rgba(255, 255, 255, 0.08); }
.wn-pt-stat b { display: block; font-size: 1.6rem; line-height: 1.1; color: var(--wn-white); }
.wn-pt-stat span { color: var(--wn-muted); font-size: 0.82rem; }
.wn-pt-stat.is-gold b { color: var(--wn-gold); }

/* Courses */
.wn-pt-courses { display: grid; gap: 1rem; }
.wn-pt-course { padding: 1.25rem; border-radius: 1rem; background: linear-gradient(160deg, rgba(20, 28, 46, 0.85), rgba(9, 13, 24, 0.9)); border: 1px solid rgba(255, 255, 255, 0.09); transition: border-color 0.25s ease; }
.wn-pt-course.is-open { border-color: var(--wn-gold-line); }
.wn-pt-course-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.wn-pt-course-main { min-width: 0; }
.wn-pt-course-title { margin: 0.3rem 0 0; font-size: 1.15rem; color: var(--wn-white); overflow-wrap: anywhere; }
.wn-pt-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: 0.78rem; color: var(--wn-muted); }
.wn-pt-type { color: var(--wn-gold); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.wn-pt-course-progress { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; font-size: 0.82rem; color: var(--wn-muted); }
.wn-pt-course-progress span:last-child { min-width: 2.6rem; text-align: right; }
.wn-pt-lessons { list-style: none; margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.08); display: grid; gap: 0.5rem; }
.wn-pt-lesson { display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 0.75rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.03); }
.wn-pt-lesson-dot { flex: none; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid #64748b; }
.wn-pt-lesson.is-active .wn-pt-lesson-dot { border-color: var(--wn-gold); background: radial-gradient(circle, var(--wn-gold) 40%, transparent 45%); }
.wn-pt-lesson.is-done .wn-pt-lesson-dot { border-color: var(--wn-ok); background: var(--wn-ok); }
.wn-pt-lesson-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wn-pt-lesson-main strong { color: var(--wn-white); font-size: 0.92rem; font-weight: 600; overflow-wrap: anywhere; }
.wn-pt-lesson-main small { color: var(--wn-muted); font-size: 0.76rem; }
.wn-pt-certs { display: grid; gap: 0.75rem; }
.wn-pt-cert { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-radius: 1rem; color: var(--wn-text); background: linear-gradient(135deg, rgba(233, 185, 73, 0.12), rgba(15, 22, 36, 0.9)); border: 1px solid var(--wn-gold-line); }
.wn-pt-cert:hover { color: var(--wn-text); box-shadow: 0 0 24px rgba(233, 185, 73, 0.18); }
.wn-pt-cert-seal { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--wn-gold-light), var(--wn-gold) 60%, #b8862b); box-shadow: 0 0 16px rgba(233, 185, 73, 0.45); }
.wn-pt-cert-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wn-pt-cert-body strong { color: var(--wn-white); }
.wn-pt-cert-body small { color: var(--wn-muted); }

/* Modal, viewer, quiz */
.wn-pt-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(3, 6, 14, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: wn-fade-up 0.25s ease both; }
.wn-pt-modal { position: relative; width: 100%; max-width: 32rem; max-height: calc(100dvh - 2rem); overflow: auto; border-radius: 1.25rem; background: linear-gradient(160deg, #141c2e, #090d18); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.wn-pt-modal.is-wide { max-width: 56rem; }
.wn-pt-modal::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--wn-gold), var(--wn-gold-light), var(--wn-gold), transparent); }
.wn-pt-modal-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem 0.75rem; background: linear-gradient(180deg, #141c2e 75%, rgba(20, 28, 46, 0)); }
.wn-pt-modal-title { margin: 0; font-size: 1.15rem; color: var(--wn-white); }
.wn-pt-x { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #e5e7eb; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.wn-pt-x:hover { border-color: var(--wn-gold); color: var(--wn-gold-light); }
.wn-pt-modal-body { padding: 0 1.25rem 1.4rem; }
.wn-pt-modal-body > p:first-child { margin-top: 0; }
.wn-pt-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 0.9rem; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.1); margin-top: 0.5rem; }
.wn-pt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wn-pt-external { padding: 1.5rem; border-radius: 0.9rem; text-align: center; background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(255, 255, 255, 0.14); color: var(--wn-muted); }
.wn-pt-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1rem; }
.wn-pt-facts div { padding: 0.8rem 0.9rem; border-radius: 0.8rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.wn-pt-facts dt { color: var(--wn-muted); font-size: 0.78rem; }
.wn-pt-facts dd { margin: 0.15rem 0 0; color: var(--wn-white); font-weight: 700; font-size: 1.1rem; }
.wn-pt-quiz-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; color: var(--wn-muted); font-size: 0.88rem; }
.wn-pt-timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--wn-gold-light); padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--wn-gold-soft); }
.wn-pt-timer.is-low { color: var(--wn-danger); background: rgba(248, 113, 113, 0.14); }
.wn-pt-question { border: 0; margin: 1.25rem 0 0; padding: 0; min-width: 0; }
.wn-pt-question legend { padding: 0; margin-bottom: 1rem; font-size: 1.1rem; font-weight: 600; color: var(--wn-white); line-height: 1.45; }
.wn-pt-options { display: grid; gap: 0.6rem; }
.wn-pt-option { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1rem; border-radius: 0.85rem; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.wn-pt-option:hover { border-color: rgba(233, 185, 73, 0.5); }
.wn-pt-option.is-checked { border-color: var(--wn-gold); background: var(--wn-gold-soft); }
.wn-pt-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wn-pt-option:focus-within { outline: 2px solid var(--wn-cyan); outline-offset: 2px; }
.wn-pt-option-key { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 0.55rem; font-weight: 800; font-size: 0.85rem; background: rgba(255, 255, 255, 0.07); color: #e5e7eb; }
.wn-pt-option.is-checked .wn-pt-option-key { background: var(--wn-gold); color: #1a1305; }
.wn-pt-option-text { color: #e5e7eb; }
.wn-pt-quiz-nav { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.5rem; }
.wn-pt-score { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.2rem; padding: 1.5rem 1rem; border-radius: 1rem; margin-bottom: 1.25rem; }
.wn-pt-score b { font-size: 3rem; line-height: 1; }
.wn-pt-score strong { font-size: 1.15rem; color: var(--wn-white); }
.wn-pt-score span { color: var(--wn-muted); font-size: 0.9rem; }
.wn-pt-score.is-pass { background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.3); }
.wn-pt-score.is-pass b { color: var(--wn-ok); }
.wn-pt-score.is-fail { background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.28); }
.wn-pt-score.is-fail b { color: var(--wn-danger); }
.wn-pt-review { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.9rem; }
.wn-pt-review li { padding: 0.8rem 0.9rem; border-radius: 0.8rem; background: rgba(255, 255, 255, 0.03); border-left: 3px solid var(--wn-ok); }
.wn-pt-review li.is-wrong { border-left-color: var(--wn-danger); }
.wn-pt-review strong { color: var(--wn-white); }
.wn-pt-review p { margin: 0.35rem 0 0; font-size: 0.9rem; color: #d1d5db; }
.wn-pt-explain { color: var(--wn-gold-light) !important; }

/* Forms in the portal */
.wn-pt-form .wn-btn-block { margin-top: 0.25rem; }
.wn-pt-two { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 0.75rem; }
.wn-pt-skip { display: block; margin: 0.9rem auto 0; font-size: 0.85rem; }
.wn-pt-stars { display: flex; gap: 0.25rem; margin-bottom: 1rem; }
.wn-pt-star { border: 0; background: none; padding: 0.1rem; font-size: 1.9rem; line-height: 1; color: #475569; cursor: pointer; transition: transform 0.15s ease, color 0.15s ease; }
.wn-pt-star:hover { transform: scale(1.12); }
.wn-pt-star.is-on { color: var(--wn-gold); text-shadow: 0 0 12px rgba(233, 185, 73, 0.5); }

/* Cases */
.wn-pt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.wn-pt-toolbar .wn-pt-seg { margin: 0; }
.wn-pt-search { flex: 1 1 14rem; margin: 0; border-radius: 999px; padding-left: 1.1rem; }
.wn-pt-cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.wn-pt-case { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border-radius: 0.9rem; color: var(--wn-text); background: rgba(15, 22, 36, 0.8); border: 1px solid rgba(255, 255, 255, 0.08); transition: border-color 0.2s ease, transform 0.2s ease; }
.wn-pt-case:hover { color: var(--wn-text); border-color: var(--wn-gold-line); transform: translateX(2px); }
.wn-pt-case-no { flex: none; font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; color: var(--wn-gold); }
.wn-pt-case-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wn-pt-case-main strong { color: var(--wn-white); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wn-pt-case-main small { color: var(--wn-muted); font-size: 0.78rem; }
.wn-pt-thread { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.75rem; }
.wn-pt-thread li { max-width: 46rem; padding: 0.85rem 1rem; border-radius: 1rem 1rem 1rem 0.25rem; background: rgba(15, 22, 36, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); }
.wn-pt-thread li.is-mine { margin-left: auto; border-radius: 1rem 1rem 0.25rem 1rem; background: var(--wn-gold-soft); border-color: var(--wn-gold-line); }
.wn-pt-thread small { color: var(--wn-muted); font-size: 0.75rem; }
.wn-pt-thread .wn-pt-pre { margin-top: 0.3rem; }
.wn-pt-reply { margin-top: 1rem; }
.wn-pt-reply .wn-textarea { margin-bottom: 0; }
.wn-pt-reply .wn-pt-actions { justify-content: flex-end; margin-top: 0.6rem; }

/* Sales support */
.wn-pt-verticals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.wn-pt-vertical { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.2rem; border-radius: 1rem; color: var(--wn-text); background: linear-gradient(160deg, rgba(20, 28, 46, 0.88), rgba(9, 13, 24, 0.92)); border: 1px solid rgba(255, 255, 255, 0.09); transition: transform 0.25s ease, border-color 0.25s ease; }
.wn-pt-vertical:hover { color: var(--wn-text); transform: translateY(-3px); border-color: var(--wn-gold-line); }
.wn-pt-vertical strong { color: var(--wn-white); font-size: 1.05rem; }
.wn-pt-vertical p { margin: 0; color: var(--wn-muted); font-size: 0.88rem; flex: 1; }
.wn-pt-vhead { margin-bottom: 1.25rem; }
.wn-pt-vhead .wn-h2 { margin: 0.5rem 0 0.6rem; }
.wn-pt-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.wn-pt-side { display: grid; gap: 1rem; }
.wn-pt-rich { color: #d1d5db; overflow-wrap: anywhere; }
.wn-pt-rich h1, .wn-pt-rich h2, .wn-pt-rich h3, .wn-pt-rich h4 { color: var(--wn-white); font-size: 1.05rem; margin: 1.2rem 0 0.4rem; }
.wn-pt-rich ul, .wn-pt-rich ol { padding-left: 1.25rem; }
.wn-pt-rich li { margin: 0.2rem 0; }
.wn-pt-rich a { color: var(--wn-gold); text-decoration: underline; }
.wn-pt-rich table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.wn-pt-rich td, .wn-pt-rich th { border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.4rem 0.55rem; }
.wn-pt-cred { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.wn-pt-cred .wn-pt-muted { width: 5.5rem; font-size: 0.82rem; }
.wn-pt-cred code { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; color: var(--wn-white); overflow-wrap: anywhere; }
.wn-pt-inline { margin: 0; }
.wn-pt-modules { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.wn-pt-module { padding: 1.1rem 1.2rem; border-radius: 1rem; background: rgba(15, 22, 36, 0.85); border: 1px solid rgba(255, 255, 255, 0.09); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.wn-pt-module.is-picked { border-color: var(--wn-gold); box-shadow: 0 0 22px rgba(233, 185, 73, 0.15); }
.wn-pt-module-head { display: flex; align-items: center; gap: 0.65rem; color: var(--wn-white); }
label.wn-pt-module-head { cursor: pointer; }
.wn-pt-module-head strong { flex: 1; min-width: 0; }
.wn-pt-check { flex: none; width: 1.2rem; height: 1.2rem; accent-color: var(--wn-gold); }
.wn-pt-feats { margin: 0.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; }
.wn-pt-feats li { position: relative; padding-left: 1.1rem; color: #d1d5db; font-size: 0.88rem; }
.wn-pt-feats li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--wn-gold); }
.wn-pt-edge { margin: 0.75rem 0 0; padding: 0.7rem 0.8rem; border-radius: 0.7rem; background: var(--wn-gold-soft); color: #e5e7eb; font-size: 0.86rem; }
.wn-pt-edge b { color: var(--wn-gold-light); }
.wn-pt-industry { flex: 1 1 16rem; max-width: 24rem; margin: 0; }

/* Certificate */
.wn-pt-verify { max-width: 36rem; margin: 0 auto 1.75rem; }
.wn-pt-verify-row { display: flex; gap: 0.6rem; }
.wn-pt-verify-row .wn-input { margin: 0; flex: 1; min-width: 0; }
.wn-pt-certificate { max-width: 52rem; margin: 0 auto; padding: 0.6rem; border-radius: 1.25rem; background: linear-gradient(135deg, var(--wn-gold-light), var(--wn-gold) 45%, #b8862b); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.wn-pt-certificate-inner { padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem); border-radius: 0.9rem; text-align: center; color: #1f2937; background: radial-gradient(circle at 50% 0%, #fffdf6, #fbf6e8 70%); border: 1px solid rgba(184, 134, 43, 0.5); }
.wn-pt-certificate-logo { max-height: 3.5rem; width: auto; margin: 0 auto 1rem; display: block; }
.wn-pt-certificate-kicker { margin: 0 0 1rem; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; color: #9a6b12; }
.wn-pt-certificate .wn-pt-muted { color: #6b7280; margin: 0.3rem 0; }
.wn-pt-certificate-name { margin: 0.4rem 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem, 6vw, 3rem); color: #0b1220; overflow-wrap: anywhere; }
.wn-pt-certificate-course { margin: 0.4rem 0 1.5rem; font-size: clamp(1.1rem, 3.5vw, 1.5rem); color: #0b3a8c; }
.wn-pt-certificate-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid rgba(184, 134, 43, 0.4); }
.wn-pt-certificate-foot div:not(.wn-pt-certificate-seal) { display: flex; flex-direction: column; }
.wn-pt-certificate-foot small { color: #6b7280; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.wn-pt-certificate-foot strong { color: #111827; font-size: 0.95rem; overflow-wrap: anywhere; }
.wn-pt-certificate-seal { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fde9b0, #e9b949 55%, #a8761f); box-shadow: 0 0 0 4px rgba(233, 185, 73, 0.3); }
.wn-pt-certificate-seal span { font-size: 0.5rem; font-weight: 800; letter-spacing: 0.12em; color: #3b2a06; }
.wn-pt-verified { margin: 1.25rem 0 0; font-size: 0.8rem; font-weight: 700; color: #047857; }
.wn-pt-verified::before { content: "✓ "; }
.wn-pt-certificate + .wn-pt-actions { justify-content: center; }

/* Salesforce Power extras */
.wn-pt-power-banner { padding: 1rem 0; background: linear-gradient(90deg, rgba(233, 185, 73, 0.12), rgba(0, 102, 255, 0.1)); border-top: 1px solid var(--wn-gold-line); border-bottom: 1px solid var(--wn-gold-line); }
.wn-pt-power-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.25rem; }
.wn-pt-power-inner .wn-pt-actions { margin: 0 0 0 auto; }
.wn-pt-favicon { flex: none; width: 3rem; height: 3rem; border-radius: 0.8rem; background: #fff; padding: 0.35rem; object-fit: contain; }
span.wn-pt-favicon { padding: 0; }
.wn-pt-power-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.wn-pt-power-text small { color: var(--wn-gold); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.wn-pt-power-text strong { color: var(--wn-white); font-size: 1.15rem; }
.wn-pt-power-text a { font-size: 0.85rem; }
.wn-pt-narrow { max-width: 60rem; }

@media (min-width: 640px) {
  .wn-pt-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wn-pt-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wn-pt-tiles, .wn-pt-verticals, .wn-pt-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .wn-pt-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wn-pt-verticals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wn-pt-split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .wn-pt-bar { padding: 0.6rem; }
  .wn-pt-who { width: 100%; }
  .wn-pt-who-name { flex: 1; }
  .wn-pt-course-head { flex-direction: column-reverse; gap: 0.5rem; }
  .wn-pt-lesson { flex-wrap: wrap; }
  .wn-pt-lesson .wn-btn, .wn-pt-lesson > .wn-pt-pill { margin-left: 1.6rem; }
  .wn-pt-actions .wn-btn { flex: 1 1 auto; }
  .wn-pt-overlay { align-items: flex-end; padding: 0; }
  .wn-pt-modal { max-height: 92dvh; border-radius: 1.25rem 1.25rem 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .wn-pt-power-inner .wn-pt-actions { margin: 0; width: 100%; }
  .wn-pt-certificate-foot { grid-template-columns: 1fr 1fr; }
  .wn-pt-certificate-seal { display: none; }
  .wn-pt-case-no { display: none; }
}
@media print {
  .wn-nav, .wn-footer, .wn-cta, .wn-pt-hero, .wn-pt-noprint, .wn-skip { display: none !important; }
  body.wn-body { background: #fff; }
  .wn-pt-main { padding: 0; }
  .wn-pt-certificate { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}