/* ==========================================================================
   Webino Front — Design System
   Glassmorphism · light theme · Swiss accent
   --------------------------------------------------------------------------
   Layers:
     1. Tokens          (CSS variables: colors, type, space, radius, shadow)
     2. Reset & base    (typography, links, images)
     3. Layout          (containers, grids, sections)
     4. Decor           (blobs, swiss cross, grid background, badges)
     5. Components      (buttons, cards, pills, nav, footer, forms, accordion)
     6. Page sections   (hero, features, pricing, steps, faq, cta, etc.)
     7. Animations      (keyframes, helpers for GSAP)
     8. Responsive
   ========================================================================== */

/* ----- 1. TOKENS --------------------------------------------------------- */
.webino-front {
  /* Neutrals — cooler, slightly more blue-leaning */
  --wb-black: #0A1224;
  --wb-ink: #111827;
  --wb-graphite: #1F2937;
  --wb-grey-700: #475569;
  --wb-grey-500: #64748B;
  --wb-grey-400: #94A3B8;
  --wb-grey-300: #CBD5E1;
  --wb-grey-200: #E2E8F0;
  --wb-grey-100: #F1F5F9;
  --wb-grey-50:  #F8FAFC;
  --wb-white: #ffffff;

  /* Swiss red — réservé à la croix suisse & badges "Swiss" */
  --wb-red: #DA291C;
  --wb-red-soft: #FF5A4F;
  --wb-red-tint: rgba(218, 41, 28, 0.08);

  /* PRIMARY — bleu #3b82f6 */
  --wb-blue-50:  #EFF6FF;
  --wb-blue-100: #DBEAFE;
  --wb-blue-200: #BFDBFE;
  --wb-blue-400: #60A5FA;
  --wb-blue:     #3B82F6;
  --wb-blue-600: #2563EB;
  --wb-blue-700: #1D4ED8;
  --wb-blue-tint: rgba(59, 130, 246, 0.10);
  --wb-blue-soft: #93C5FD;
  --wb-indigo:   #6366F1;

  /* Support accents */
  --wb-mint:   #10B981;
  --wb-amber:  #F59E0B;
  --wb-violet: #8B5CF6;

  /* Glass — plus translucide, plus crystallin */
  --wb-glass-bg: rgba(255, 255, 255, 0.50);
  --wb-glass-bg-strong: rgba(255, 255, 255, 0.68);
  --wb-glass-bg-soft: rgba(255, 255, 255, 0.32);
  --wb-glass-stroke: rgba(255, 255, 255, 0.70);
  --wb-glass-stroke-dark: rgba(15, 23, 42, 0.06);
  --wb-glass-blur: 24px;

  /* Page background — quasi blanc avec halos bleus tres soft */
  --wb-bg-page: radial-gradient(900px 600px at 8% -10%, rgba(219, 234, 254, 0.45) 0%, transparent 55%),
                radial-gradient(800px 600px at 110% 0%, rgba(224, 231, 255, 0.40) 0%, transparent 60%),
                radial-gradient(700px 500px at 50% 110%, rgba(240, 249, 255, 0.55) 0%, transparent 60%),
                linear-gradient(180deg, #FCFCFD 0%, #F5F7FB 100%);
  --wb-bg-section-alt: linear-gradient(180deg, #F6F8FC 0%, #EAEEF6 100%);

  /* Brand gradients — bleu dominant */
  --wb-grad-primary: linear-gradient(135deg, #0A1224 0%, #1F2937 100%);
  --wb-grad-accent:  linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
  --wb-grad-accent-deep: linear-gradient(135deg, #2563EB 0%, #6366F1 100%);
  --wb-grad-blue:    linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
  --wb-grad-sky:     linear-gradient(135deg, #38BDF8 0%, #3B82F6 100%);
  --wb-grad-mesh:    conic-gradient(from 210deg at 50% 50%, #3B82F6, #38BDF8, #6366F1, #8B5CF6, #3B82F6);

  /* Typography */
  --wb-font-display: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wb-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wb-fs-eyebrow: 0.74rem;
  --wb-fs-body: 1rem;
  --wb-fs-lead:  1.125rem;
  --wb-fs-h6: 1.0625rem;
  --wb-fs-h5: 1.1875rem;
  --wb-fs-h4: 1.4375rem;
  --wb-fs-h3: 1.75rem;
  --wb-fs-h2: clamp(1.85rem, 3vw, 2.5rem);
  --wb-fs-h1: clamp(2.25rem, 4.4vw, 3.75rem);
  --wb-fs-display: clamp(2.5rem, 5.4vw, 4.75rem);

  /* Spacing scale */
  --wb-s-1: 4px;
  --wb-s-2: 8px;
  --wb-s-3: 12px;
  --wb-s-4: 16px;
  --wb-s-5: 24px;
  --wb-s-6: 32px;
  --wb-s-7: 48px;
  --wb-s-8: 72px;
  --wb-s-9: 104px;
  --wb-s-10: 140px;

  /* Radius — plus serré, plus précis */
  --wb-r-xs: 6px;
  --wb-r-sm: 10px;
  --wb-r-md: 14px;
  --wb-r-lg: 20px;
  --wb-r-xl: 28px;
  --wb-r-pill: 999px;

  /* Shadows — plus diffuses, plus discrètes */
  --wb-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --wb-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
  --wb-shadow-md: 0 12px 32px -10px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.04);
  --wb-shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, 0.18), 0 6px 18px rgba(15, 23, 42, 0.05);
  --wb-shadow-glow-blue: 0 18px 44px -14px rgba(59, 130, 246, 0.42);
  --wb-shadow-glow-indigo: 0 18px 44px -14px rgba(99, 102, 241, 0.35);

  /* Transitions */
  --wb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wb-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wb-t-fast: 180ms var(--wb-ease);
  --wb-t-med: 320ms var(--wb-ease);
  --wb-t-slow: 600ms var(--wb-ease);

  /* Container */
  --wb-container: 1200px;
  --wb-container-narrow: 880px;

  /* Fixed-header height token (used to offset first-section padding) */
  --wb-header-h: 80px;
}

/* ----- 2. RESET & BASE --------------------------------------------------- */
body.webino-front {
  margin: 0;
  font-family: var(--wb-font-body);
  font-size: var(--wb-fs-body);
  line-height: 1.6;
  color: var(--wb-ink);
  background: var(--wb-bg-page);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}
body.webino-front * { box-sizing: border-box; }
body.webino-front img { max-width: 100%; display: block; }
body.webino-front svg { max-width: 100%; }

/* Default icon size (overridden by context-specific rules below) */
.webino-front .wb-icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: middle; stroke-width: 1.5; }
.webino-front .wb-icon--mint { color: var(--wb-mint); }
.webino-front .wb-icon--red { color: var(--wb-red); }
.webino-front .wb-icon--blue { color: var(--wb-blue); }
body.webino-front a { color: inherit; text-decoration: none; }
body.webino-front h1, body.webino-front h2, body.webino-front h3, body.webino-front h4, body.webino-front h5, body.webino-front h6 {
  font-family: var(--wb-font-display);
  color: var(--wb-black);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: var(--wb-s-4);
  font-weight: 700;
}
body.webino-front h1 { letter-spacing: -0.032em; font-weight: 750; }
body.webino-front h2 { letter-spacing: -0.028em; }
body.webino-front p { margin-top: 0; margin-bottom: var(--wb-s-4); }
body.webino-front ::selection { background: var(--wb-blue); color: #fff; }

/* WordPress core wraps shortcode HTML — make sure entry-content doesn't constrain */
.webino-front .entry-content,
.webino-front .page-content,
.webino-front main,
.webino-front .site-main,
.webino-front article {
  max-width: none !important;
}

/* Some themes inject padding around the content area, neutralize where reasonable */
.webino-front .wb-page { display: block; }

/* ----- 3. LAYOUT --------------------------------------------------------- */
.wb-container {
  max-width: var(--wb-container);
  margin: 0 auto;
  padding: 0 24px;
}
.wb-container--narrow { max-width: var(--wb-container-narrow); }

.wb-section {
  position: relative;
  padding: var(--wb-s-9) 0;
}
.wb-section--sm { padding: var(--wb-s-7) 0; }
.wb-section--alt {
  background: var(--wb-bg-section-alt);
  /* Subtle but explicit hairlines top + bottom so the alt sections
     read as distinct slabs rather than feeling like a bg glitch. */
  position: relative;
}
.wb-section--alt::before,
.wb-section--alt::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(15, 23, 42, 0.08) 22%,
    rgba(15, 23, 42, 0.08) 78%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}
.wb-section--alt::before { top: 0; }
.wb-section--alt::after  { bottom: 0; }

.wb-grid {
  display: grid;
  gap: var(--wb-s-6);
}
.wb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wb-grid--4 { grid-template-columns: repeat(4, 1fr); }
.wb-grid--6 { grid-template-columns: repeat(6, 1fr); }

.wb-flex { display: flex; gap: var(--wb-s-3); align-items: center; }
.wb-flex--col { flex-direction: column; align-items: stretch; }
.wb-flex--wrap { flex-wrap: wrap; }
.wb-flex--between { justify-content: space-between; }
.wb-flex--center { justify-content: center; align-items: center; }

.wb-stack > * + * { margin-top: var(--wb-s-4); }
.wb-stack--lg > * + * { margin-top: var(--wb-s-6); }

.wb-text-center { text-align: center; }
.wb-mx-auto { margin-left: auto; margin-right: auto; }

/* ----- 4. DECOR ---------------------------------------------------------- */
.wb-blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.wb-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.22;
  will-change: transform;
  animation: wb-blob-drift 22s ease-in-out infinite alternate;
}
.wb-blob--red,
.wb-blob--a      { width: 520px; height: 520px; background: radial-gradient(circle, #93C5FD 0%, transparent 70%); top: -140px; left: -140px; animation-duration: 24s; }
.wb-blob--blue,
.wb-blob--b      { width: 580px; height: 580px; background: radial-gradient(circle, #A5B4FC 0%, transparent 70%); top: 6%; right: -180px; opacity: 0.24; animation-duration: 28s; animation-direction: alternate-reverse; }
.wb-blob--mint,
.wb-blob--c      { width: 400px; height: 400px; background: radial-gradient(circle, #BAE6FD 0%, transparent 70%); bottom: -120px; left: 22%; opacity: 0.20; animation-duration: 32s; }
.wb-blob--amber,
.wb-blob--d      { width: 340px; height: 340px; background: radial-gradient(circle, #C7D2FE 0%, transparent 70%); bottom: 8%; right: 8%; opacity: 0.18; animation-duration: 26s; animation-direction: alternate-reverse; }
@keyframes wb-blob-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -20px) scale(1.05); }
}

.wb-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,23,42,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, #000 30%, transparent 85%);
  opacity: 0.85;
}

/* Swiss cross (logo accent) */
.wb-swiss { display: inline-flex; }
.wb-swiss svg { width: 1em; height: 1em; }

/* Section heading helper — soft blue glass pill, brand-coherent and
   visible against the light page bg (the previous near-white pill was
   washing out on the body gradient). */
.wb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-s-2);
  font-family: var(--wb-font-body);
  font-size: var(--wb-fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--wb-blue-700);
  padding: 7px 14px;
  background: linear-gradient(135deg, rgba(219, 234, 254, 0.85), rgba(191, 219, 254, 0.65));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: var(--wb-r-pill);
  box-shadow:
    0 2px 10px -3px rgba(59, 130, 246, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  margin-bottom: 15px;
}
.wb-eyebrow .wb-icon { color: var(--wb-blue-700); }
.wb-eyebrow .wb-swiss { font-size: 1.1em; }

.wb-section-title {
  font-size: var(--wb-fs-h2);
  max-width: 26ch;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.wb-section-title--center { margin-left: auto; margin-right: auto; }
.wb-section-lead {
  font-size: var(--wb-fs-lead);
  color: var(--wb-grey-700);
  max-width: 60ch;
  line-height: 1.55;
}
.wb-section-lead--center { margin-left: auto; margin-right: auto; }

.wb-section-head {
  text-align: center;
  margin-bottom: var(--wb-s-7);
  position: relative;
  z-index: 1;
}
.wb-section-head .wb-eyebrow { margin-bottom: var(--wb-s-4); }

/* Gradient text */
.wb-grad-text {
  background: var(--wb-grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.wb-grad-text--blue { background-image: var(--wb-grad-blue); }
.wb-grad-text--dark { background-image: linear-gradient(135deg, #0B0B12 0%, #4B4B58 100%); }

/* ----- 5. COMPONENTS ----------------------------------------------------- */

/* --- Glass card --- */
.wb-glass {
  background: var(--wb-glass-bg);
  -webkit-backdrop-filter: blur(var(--wb-glass-blur));
  backdrop-filter: blur(var(--wb-glass-blur));
  border: 1px solid var(--wb-glass-stroke);
  border-radius: var(--wb-r-lg);
  box-shadow: var(--wb-shadow-md);
  position: relative;
  overflow: hidden;
}
.wb-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.wb-glass--strong { background: var(--wb-glass-bg-strong); }
.wb-glass--soft { background: var(--wb-glass-bg-soft); }
.wb-glass--dark {
  background: linear-gradient(180deg, rgba(11,11,18,0.92) 0%, rgba(11,11,18,0.78) 100%);
  color: #fff;
  border-color: rgba(255,255,255,0.10);
}
.wb-glass--dark h1, .wb-glass--dark h2, .wb-glass--dark h3, .wb-glass--dark h4 { color: #fff; }

/* --- Buttons --- */
.wb-btn {
  --bg: var(--wb-black);
  --color: #fff;
  --shadow: var(--wb-shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: var(--wb-font-body);
  font-size: 0.95rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  border: none;
  border-radius: var(--wb-r-pill);
  background: var(--bg);
  color: var(--color);
  box-shadow: var(--shadow);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden; /* clip the ::after shine sweep inside the pill */
  transition: transform var(--wb-t-fast), box-shadow var(--wb-t-fast), background var(--wb-t-fast);
  text-decoration: none;
  white-space: nowrap;
}
/* Boost specificity so `body.webino-front a { color: inherit }` doesn't
   override the button's --color (otherwise primary buttons inherit body
   ink color and look black on the blue gradient). */
body.webino-front .wb-btn { color: var(--color); }
body.webino-front .wb-btn .wb-icon { color: var(--color); }
.wb-btn:hover { transform: translateY(-1px); box-shadow: var(--wb-shadow-md); }
.wb-btn:active { transform: translateY(0); }
.wb-btn .wb-icon { width: 16px; height: 16px; }

.wb-btn--primary {
  --bg: var(--wb-grad-accent);
  background-image: var(--wb-grad-accent);
  --shadow: var(--wb-shadow-glow-blue);
}
.wb-btn--primary:hover { box-shadow: 0 22px 50px -16px rgba(59, 130, 246, 0.55); }
.wb-btn--dark { --bg: var(--wb-ink); }
.wb-btn--blue {
  background-image: var(--wb-grad-blue);
  --shadow: var(--wb-shadow-glow-blue);
}
.wb-btn--ghost {
  --bg: transparent;
  --color: var(--wb-ink);
  --shadow: none;
  border: 1px solid var(--wb-glass-stroke-dark);
  background: var(--wb-glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.wb-btn--ghost:hover { background: var(--wb-glass-bg-strong); border-color: rgba(59,130,246,0.25); color: var(--wb-blue-700); }
.wb-btn--sm { padding: 8px 14px; font-size: 0.88rem; }
.wb-btn--lg { padding: 14px 26px; font-size: 1rem; }

/* Magnetic shine on primary */
.wb-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--wb-ease);
  pointer-events: none;
}
.wb-btn--primary:hover::after { transform: translateX(120%); }

/* --- Pills / chips / badges --- */
.wb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-glass-bg);
  border: 1px solid var(--wb-glass-stroke);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--wb-grey-700);
  backdrop-filter: blur(10px);
}
.wb-pill--red { background: var(--wb-red-tint); color: var(--wb-red); border-color: rgba(218,41,28,0.16); }
.wb-pill--blue { background: var(--wb-blue-tint); color: var(--wb-blue-700); border-color: rgba(59,130,246,0.20); }
.wb-pill--mint { background: rgba(16,185,129,0.10); color: #047857; border-color: rgba(16,185,129,0.20); }

.wb-badge-swiss {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--wb-r-pill);
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
  border: 1px solid rgba(255,255,255,0.75);
  font-weight: 550;
  font-size: 0.83rem;
  color: var(--wb-ink);
  backdrop-filter: blur(14px);
  box-shadow: var(--wb-shadow-xs);
}
.wb-badge-swiss .wb-icon { width: 14px; height: 14px; color: var(--wb-blue); }

/* --- Cards generic --- */
.wb-card {
  padding: var(--wb-s-6);
  border-radius: var(--wb-r-lg);
  background: var(--wb-glass-bg-strong);
  border: 1px solid var(--wb-glass-stroke);
  backdrop-filter: blur(var(--wb-glass-blur));
  -webkit-backdrop-filter: blur(var(--wb-glass-blur));
  box-shadow: var(--wb-shadow-sm);
  transition: transform var(--wb-t-med), box-shadow var(--wb-t-med), border-color var(--wb-t-med);
  position: relative;
  overflow: hidden;
}
.wb-card:hover { transform: translateY(-3px); box-shadow: var(--wb-shadow-md); border-color: rgba(59,130,246,0.18); }
.wb-card__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--wb-grad-accent);
  color: #fff;
  margin-bottom: var(--wb-s-4);
  box-shadow: var(--wb-shadow-glow-blue);
}
.wb-card__icon .wb-icon { width: 20px; height: 20px; }
.wb-card__icon--blue { background: var(--wb-grad-blue); box-shadow: var(--wb-shadow-glow-blue); }
.wb-card__icon--dark { background: var(--wb-grad-primary); box-shadow: var(--wb-shadow-sm); }
.wb-card__icon--mint { background: linear-gradient(135deg, #10B981, #34D399); box-shadow: 0 14px 32px -12px rgba(16,185,129,0.35); }
.wb-card__title { font-size: var(--wb-fs-h5); margin-bottom: 8px; letter-spacing: -0.018em; }
.wb-card__text { color: var(--wb-grey-700); margin: 0; font-size: 0.96rem; line-height: 1.55; }

/* --- Header / Nav --- */
.wb-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px 0;
  transition: padding var(--wb-t-med);
  background: transparent;
}
/* When WordPress admin bar is visible, push the fixed header below it */
body.admin-bar .wb-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .wb-header { top: 46px; }
}
.wb-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-s-5);
  padding: 8px 10px 8px 18px;
  border-radius: var(--wb-r-pill);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px -8px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255,255,255,0.7) inset;
}
.wb-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wb-font-display);
  font-weight: 700;
  font-size: 1.1rem;
}
.wb-header__brand img { height: 22px; width: auto; }
.wb-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.wb-nav a {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--wb-grey-700);
  border-radius: var(--wb-r-pill);
  transition: color var(--wb-t-fast), background var(--wb-t-fast);
}
.wb-nav a:hover { color: var(--wb-blue-700); background: var(--wb-blue-tint); }
.wb-nav a.is-active { color: var(--wb-blue-700); background: var(--wb-blue-tint); }
.wb-header__cta { display: flex; gap: 6px; align-items: center; }
.wb-header__burger { display: none; }

/* --- Footer --- */
.wb-footer {
  position: relative;
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(59,130,246,0.20) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10,18,36,0.96) 0%, rgba(10,18,36,1) 100%);
  color: #C8CAD3;
  padding: var(--wb-s-8) 0 var(--wb-s-6);
  margin-top: 0;
}
/* When the section immediately above is the dark CTA, tighten the gap */
.wb-section:has(> .wb-container > .wb-cta) + .wb-footer,
.wb-section + .wb-footer { margin-top: 0; }
.webino-front .wb-footer h4 { color: #fff; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: var(--wb-s-4); }
.wb-footer a { color: #C8CAD3; transition: color var(--wb-t-fast); }
.wb-footer a:hover { color: #fff; }
.wb-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: var(--wb-s-6);
  margin-bottom: var(--wb-s-7);
}
.wb-footer__brand p { color: #9A9CA8; max-width: 28ch; font-size: 0.95rem; }
.wb-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--wb-s-5);
  color: #7A7C88;
  font-size: 0.88rem;
}
.wb-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 0.95rem; }

/* Footer brand block + Made in Switzerland badge */
.wb-footer__brand .wb-footer__logo { height: 30px; width: auto; filter: invert(1) brightness(1.4); margin-bottom: var(--wb-s-4); display: block; }
.wb-footer__swiss {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--wb-r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  margin-top: var(--wb-s-4);
}
.wb-footer__swiss .wb-swiss svg { width: 18px; height: 18px; }

/* Footer newsletter form — dark mode, no backdrop-filter artifacts */
.wb-footer__news { color: #9A9CA8; font-size: 0.95rem; margin: 0 0 var(--wb-s-3); }
.wb-footer__form {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: var(--wb-s-3);
  padding: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--wb-r-pill);
  max-width: 320px;
}
.wb-footer__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font: inherit;
  font-size: 0.93rem;
  padding: 8px 12px;
  border-radius: var(--wb-r-pill);
}
.wb-footer__input::placeholder { color: rgba(255, 255, 255, 0.45); }
.wb-footer__input:focus { background: rgba(255, 255, 255, 0.04); }
.wb-footer__submit {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--wb-grad-accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(59,130,246,0.55);
  transition: transform var(--wb-t-fast), box-shadow var(--wb-t-fast);
}
.wb-footer__submit:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(59,130,246,0.65); }
.wb-footer__submit .wb-icon { width: 16px; height: 16px; }

/* --- Forms --- */
.wb-input, .wb-textarea, .wb-select {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--wb-ink);
  padding: 11px 14px;
  border-radius: var(--wb-r-md);
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  outline: none;
  transition: border-color var(--wb-t-fast), box-shadow var(--wb-t-fast);
}
.wb-input:focus, .wb-textarea:focus, .wb-select:focus {
  border-color: var(--wb-blue);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.14);
}
.wb-label { font-size: 0.85rem; font-weight: 550; color: var(--wb-ink); margin-bottom: 6px; display: block; letter-spacing: -0.005em; }
.wb-field { margin-bottom: var(--wb-s-4); }

/* --- Accordion --- */
.wb-acc { display: flex; flex-direction: column; gap: var(--wb-s-4); }
.wb-acc__item {
  border-radius: var(--wb-r-md);
  background: var(--wb-glass-bg-strong);
  border: 1px solid var(--wb-glass-stroke);
  overflow: hidden;
  transition: background var(--wb-t-fast);
}
.wb-acc__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wb-s-4);
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-family: var(--wb-font-display);
  color: var(--wb-ink);
  font-size: 0.98rem;
  letter-spacing: -0.015em;
}
.wb-acc__head .wb-icon { width: 22px; height: 22px; color: var(--wb-grey-700); transition: transform var(--wb-t-med); }
.wb-acc__item[open] .wb-acc__head .wb-icon { transform: rotate(45deg); }
.wb-acc__body { padding: 0 22px 22px; color: var(--wb-grey-700); }

/* ----- 6. PAGE SECTIONS -------------------------------------------------- */

/* --- HERO --- */
.wb-hero {
  padding: calc(var(--wb-header-h) + var(--wb-s-7)) 0 var(--wb-s-5);
  min-height: 92vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sits above the gallery so the centered content (badges, form, title)
     remains in front while the gallery emerges from underneath. The hero
     bg is transparent so the gallery shows through the overlap area. */
  z-index: 2;
}
.wb-hero__inner { position: relative; z-index: 2; text-align: center; width: 100%; }
.wb-hero__title {
  font-size: var(--wb-fs-display);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--wb-s-5);
  font-weight: 700;
}
.wb-hero__title .wb-line { display: inline-block; overflow: unset; vertical-align: top; line-height: 1; }
.wb-hero__title .wb-word { display: inline-block; will-change: transform; line-height: 0.98; }
/* Generic word-split wrappers used outside of the hero (page headers, h2, etc.) */
[data-wb-words] .wb-line { display: inline-block; overflow: unset; vertical-align: top; line-height: 1; }
[data-wb-words] .wb-word { display: inline-block; will-change: transform; line-height: 1.05; }
.wb-hero__lead {
  max-width: 62ch;
  font-size: var(--wb-fs-lead);
  color: var(--wb-grey-700);
  margin: 0 auto var(--wb-s-6);
}
.wb-hero__badges {
  display: inline-flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  margin-top: var(--wb-s-6);
}

/* AI generation bar */
.wb-gen {
  margin: var(--wb-s-7) auto 0;
  max-width: 720px;
  position: relative;
  z-index: 2;
}
.wb-gen__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 18px;
  border-radius: var(--wb-r-pill);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 14px 40px -12px rgba(59,130,246,0.25), 0 1px 0 rgba(255,255,255,0.8) inset;
  position: relative;
}
.wb-gen__bar::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background-color: white;
  filter: blur(22px);
  opacity: 0.30;
  z-index: -1;
}
.wb-gen__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--wb-blue);
}
.wb-gen__input {
  flex: 1;
  border: none; outline: none; background: transparent;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--wb-ink);
  padding: 10px 4px;
  min-width: 0;
}
.wb-gen__input::placeholder { color: var(--wb-grey-500); }
.wb-gen__btn { padding: 10px 18px; }
.wb-gen__hint {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-top: var(--wb-s-4);
  font-size: 0.83rem;
  color: var(--wb-grey-500);
}
.wb-gen__chip {
  padding: 5px 12px;
  border-radius: var(--wb-r-pill);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  color: var(--wb-grey-700);
  cursor: pointer;
  transition: background var(--wb-t-fast), color var(--wb-t-fast), border-color var(--wb-t-fast);
  font-size: 0.83rem;
}
.wb-gen__chip:hover { background: #fff; color: var(--wb-blue-700); border-color: rgba(59,130,246,0.25); }

/* Live preview mockup */
.wb-mock {
  margin: var(--wb-s-9) auto 0;
  max-width: 1080px;
  border-radius: var(--wb-r-xl);
  background: var(--wb-glass-bg-strong);
  border: 1px solid var(--wb-glass-stroke);
  box-shadow: var(--wb-shadow-lg);
  padding: 14px;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
}
.wb-mock__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
}
.wb-mock__dots { display: inline-flex; gap: 6px; }
.wb-mock__dots span { width: 11px; height: 11px; border-radius: 50%; background: #E0E2EB; }
.wb-mock__dots span:nth-child(1) { background: #FF6058; }
.wb-mock__dots span:nth-child(2) { background: #FFBD2D; }
.wb-mock__dots span:nth-child(3) { background: #27C93F; }
.wb-mock__url {
  flex: 1;
  background: rgba(255,255,255,0.6);
  border-radius: var(--wb-r-pill);
  padding: 6px 14px;
  font-family: var(--wb-font-mono);
  font-size: 0.82rem;
  color: var(--wb-grey-700);
  border: 1px solid var(--wb-glass-stroke-dark);
}
.wb-mock__screen {
  border-radius: calc(var(--wb-r-xl) - 14px);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #FFF 0%, #F4F6FB 100%);
  border: 1px solid var(--wb-glass-stroke-dark);
}
.wb-mock__hero {
  padding: 8% 8% 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 6%;
  align-items: center;
  height: 100%;
}
.wb-mock h3 {
  font-size: clamp(1.4rem, 2.6vw, 2.3rem);
  line-height: 1.05;
  margin: 0 0 12px;
  letter-spacing: -0.028em;
}
.wb-mock p { font-size: 0.9rem; color: var(--wb-grey-700); margin-bottom: 16px; }
.wb-mock__btnrow { display: flex; gap: 8px; }
.wb-mock__pill {
  height: 10px; width: 72px; border-radius: 99px; background: var(--wb-grad-accent);
}
.wb-mock__pill--alt { background: rgba(15,23,42,0.10); }
.wb-mock__art {
  border-radius: 18px;
  height: 70%;
  align-self: center;
  background: var(--wb-grad-mesh);
  filter: blur(0.5px) saturate(1.05);
  position: relative;
  overflow: hidden;
}
.wb-mock__art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 60%);
}

/* --- GALLERY — 3D scroll showcase ----------------------------------------
   Replicates the React/Motion `ContainerScroll + Sticky + GalleryContainer`
   pattern using GSAP+ScrollTrigger (scrubbed) and a sticky child. The grid
   starts tilted back (rotateX 75deg, scale 1.2) and flattens as the user
   scrolls, while the 3 columns drift at different speeds for parallax.
   Sits flush against the hero — no intro block, no top padding. */
.wb-gallery {
  position: relative;
  /* No bg of its own — let the body gradient flow through both the section
     and whatever comes after it, so there's no visible seam. */
  background: transparent;
  z-index: 1;
  /* Pull the gallery up so the first frames emerge BEHIND the swiss
     pills ("Heberge en Suisse" etc.) — hero z-index keeps pills in front. */
  margin-top: -560px;
}
@media (max-width: 720px) {
  .wb-gallery { margin-top: -260px; }
}
.wb-gallery__halo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60vh;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(90deg, #60A5FA 0%, #6366F1 35%, #8B5CF6 65%, #3B82F6 100%);
  filter: blur(96px);
  opacity: 0.28;
  mix-blend-mode: screen;
}
.wb-gallery__scroll {
  position: relative;
  min-height: 260vh; /* total scroll distance through which animation plays */
  z-index: 2;
  perspective: 1000px;
  perspective-origin: center top;
  transform-style: preserve-3d;
}
.wb-gallery__sticky {
  position: sticky;
  top: 0;
  height: 140vh;
  min-height: 30rem;
  width: 100%;
  overflow: hidden;
  perspective: 1000px;
  perspective-origin: center top;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--wb-s-5);
}
.wb-gallery__grid {
  position: relative;
  width: 100%;
  max-width: 1280px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border-radius: var(--wb-r-xl);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
}
.wb-gallery__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  will-change: transform;
}
.wb-gallery__col--mid { margin-top: -50%; }
.wb-gallery__col img {
  aspect-ratio: 16 / 10;
  width: 100%;
  height: auto;
  border-radius: var(--wb-r-md);
  object-fit: cover;
  box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.28), 0 2px 8px rgba(15, 23, 42, 0.05);
  display: block;
  background: var(--wb-grey-100);
}
/* No fade mask at the bottom — images render in full and body bg
   (fixed-attachment, same gradient on both sides of the section
   boundary) handles the transition with no visible seam. */

/* CTA at the end of the gallery animation — sits in document flow right
   after the sticky scroll container, so it appears as the sticky releases. */
.wb-gallery__cta {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: var(--wb-s-6) var(--wb-s-5) var(--wb-s-8);
  margin-top: -200px;
}
.wb-gallery__cta .wb-btn { padding: 14px 28px; font-size: 1rem; }

/* --- MODELS PAGE — template gallery (placeholder) ----------------------- */
.wb-models__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: var(--wb-s-6);
}
.wb-models__filter {
  appearance: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  padding: 8px 16px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-glass-bg-strong);
  border: 1px solid var(--wb-glass-stroke);
  color: var(--wb-grey-700);
  cursor: pointer;
  backdrop-filter: blur(14px);
  transition: color var(--wb-t-fast), background var(--wb-t-fast), border-color var(--wb-t-fast);
}
.wb-models__filter:hover { color: var(--wb-blue-700); border-color: rgba(59,130,246,0.25); }
.wb-models__filter.is-active {
  background: var(--wb-grad-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--wb-shadow-glow-blue);
}
.wb-models__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wb-s-5);
}
.wb-model {
  position: relative;
  border-radius: var(--wb-r-lg);
  overflow: hidden;
  background: var(--wb-glass-bg-strong);
  border: 1px solid var(--wb-glass-stroke);
  box-shadow: var(--wb-shadow-sm);
  transition: transform var(--wb-t-med), box-shadow var(--wb-t-med), border-color var(--wb-t-med);
  display: flex;
  flex-direction: column;
}
.wb-model:hover { transform: translateY(-4px); box-shadow: var(--wb-shadow-md); border-color: rgba(59,130,246,0.22); }
.wb-model__preview {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--wb-grey-100);
}
.wb-model__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--wb-ease);
}
.wb-model:hover .wb-model__preview img { transform: scale(1.04); }
.wb-model__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 11px;
  border-radius: var(--wb-r-pill);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wb-grey-700);
}
.wb-model__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px;
  display: flex;
  justify-content: flex-end;
  background: linear-gradient(180deg, transparent 0%, rgba(11, 18, 36, 0.55) 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--wb-t-med), transform var(--wb-t-med);
}
.wb-model:hover .wb-model__overlay { opacity: 1; transform: translateY(0); }
.wb-model__overlay .wb-btn { padding: 8px 14px; font-size: 0.85rem; }
.wb-model__meta {
  padding: var(--wb-s-4) var(--wb-s-5) var(--wb-s-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wb-model__name {
  font-family: var(--wb-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--wb-ink);
  letter-spacing: -0.015em;
  margin: 0;
}
.wb-model__desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--wb-grey-700);
}

@media (max-width: 980px) {
  .wb-models__grid { grid-template-columns: repeat(2, 1fr); gap: var(--wb-s-4); }
}
@media (max-width: 580px) {
  .wb-models__grid { grid-template-columns: 1fr; }
  .wb-models__filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wb-models__filter { flex-shrink: 0; }
}

@media (max-width: 980px) {
  .wb-gallery__scroll { min-height: 220vh; }
}
@media (max-width: 720px) {
  .wb-gallery__scroll { min-height: 180vh; }
  .wb-gallery__sticky { height: 92vh; min-height: 26rem; padding: 0 var(--wb-s-4); }
  .wb-gallery__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wb-gallery__col { gap: 8px; }
  .wb-gallery__col--mid { margin-top: -25%; }
  .wb-gallery__col:nth-child(3) { display: none; }
  .wb-gallery__halo { height: 50vh; filter: blur(64px); }
}

/* --- Logos strip --- */
.wb-logos {
  padding: var(--wb-s-7) 0;
  text-align: center;
  border-top: 1px solid rgba(11,11,18,0.06);
  border-bottom: 1px solid rgba(11,11,18,0.06);
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(10px);
}
.wb-logos__label { color: var(--wb-grey-500); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--wb-s-4); }
.wb-logos__row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--wb-s-6);
  max-width: 1000px; margin: 0 auto;
  flex-wrap: wrap;
  opacity: 0.85;
}
.wb-logos__item {
  font-family: var(--wb-font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--wb-grey-700);
  letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 8px;
  opacity: 0.7;
  filter: grayscale(1);
  transition: opacity var(--wb-t-fast), filter var(--wb-t-fast);
}
.wb-logos__item:hover { opacity: 1; filter: grayscale(0); }

/* --- Features grid --- */
.wb-features { position: relative; }
.wb-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wb-s-4);
}
.wb-feature {
  padding: var(--wb-s-5) var(--wb-s-5) var(--wb-s-6);
  border-radius: var(--wb-r-lg);
  background: var(--wb-glass-bg-strong);
  backdrop-filter: blur(var(--wb-glass-blur));
  -webkit-backdrop-filter: blur(var(--wb-glass-blur));
  border: 1px solid var(--wb-glass-stroke);
  box-shadow: var(--wb-shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--wb-t-med), box-shadow var(--wb-t-med), border-color var(--wb-t-med);
}
.wb-feature:hover { transform: translateY(-3px); box-shadow: var(--wb-shadow-md); border-color: rgba(59,130,246,0.20); }
.wb-feature__glow {
  position: absolute; inset: -40% -40% 40% 40%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.20) 0%, transparent 60%);
  opacity: 0; transition: opacity var(--wb-t-med);
  pointer-events: none;
}
.wb-feature:hover .wb-feature__glow { opacity: 1; }

/* --- Steps (How It Works) --- */
.wb-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wb-s-4);
  position: relative;
}
.wb-step {
  padding: var(--wb-s-6);
  border-radius: var(--wb-r-lg);
  background: var(--wb-glass-bg-strong);
  backdrop-filter: blur(var(--wb-glass-blur));
  -webkit-backdrop-filter: blur(var(--wb-glass-blur));
  border: 1px solid var(--wb-glass-stroke);
  box-shadow: var(--wb-shadow-sm);
  position: relative;
}
.wb-step__num {
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--wb-font-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  background: var(--wb-grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.16;
  letter-spacing: -0.05em;
}
.wb-step__title { font-size: var(--wb-fs-h4); margin: 0 0 8px; letter-spacing: -0.022em; }
.wb-step__text { color: var(--wb-grey-700); margin: 0; font-size: 0.96rem; }
.wb-step__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--wb-grad-primary);
  color: #fff;
  margin-bottom: var(--wb-s-4);
}
.wb-step__icon .wb-icon { width: 22px; height: 22px; stroke-width: 1.8; }

/* --- Stats --- */
.wb-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wb-s-5);
}
.wb-stat {
  padding: var(--wb-s-5);
  border-radius: var(--wb-r-lg);
  background: var(--wb-glass-bg);
  border: 1px solid var(--wb-glass-stroke);
  backdrop-filter: blur(14px);
  text-align: center;
}
.wb-stat__value {
  font-family: var(--wb-font-display);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--wb-ink);
  display: block;
  letter-spacing: -0.035em;
}
.wb-stat__value .wb-grad-text { background-image: var(--wb-grad-accent); }
.wb-stat__label { color: var(--wb-grey-700); font-size: 0.92rem; margin-top: 8px; display: block; }

/* --- Pricing --- */
.wb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--wb-shadow-xs);
}
.wb-toggle button {
  appearance: none;
  border: none;
  cursor: pointer;
  background: transparent;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--wb-grey-700);
  padding: 7px 16px;
  border-radius: 999px;
  transition: background var(--wb-t-fast), color var(--wb-t-fast), box-shadow var(--wb-t-fast);
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: -0.005em;
}
.wb-toggle button:hover { color: var(--wb-ink); }
.wb-toggle button.is-active {
  background: var(--wb-ink);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15,23,42,0.18);
}
.wb-toggle__hint {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--wb-mint);
  padding: 2px 7px;
  background: rgba(16,185,129,0.12);
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
}
.wb-toggle button.is-active .wb-toggle__hint { background: rgba(110,231,183,0.20); color: #6EE7B7; }

/* Price amount — make the value swap smooth (JS sets opacity / y briefly) */
.wb-price__value { display: inline-block; will-change: transform, opacity; }
.wb-price__period { transition: opacity var(--wb-t-fast); }
.wb-price__billing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: -8px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--wb-grey-500);
  letter-spacing: 0;
}
.wb-price__billing::before {
  content: "";
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--wb-mint);
}
.wb-price--featured .wb-price__billing { color: rgba(255,255,255,0.55); }
.wb-price--featured .wb-price__billing::before { background: #6EE7B7; }
.wb-price__billing[hidden] { display: none; }

.wb-pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wb-s-5); align-items: stretch; }
.wb-price {
  padding: var(--wb-s-7);
  border-radius: var(--wb-r-xl);
  background: var(--wb-glass-bg-strong);
  border: 1px solid var(--wb-glass-stroke);
  backdrop-filter: blur(var(--wb-glass-blur));
  box-shadow: var(--wb-shadow-md);
  display: flex; flex-direction: column; gap: var(--wb-s-4);
  position: relative;
  transition: transform var(--wb-t-med);
}
.wb-price:hover { transform: translateY(-6px); }
.wb-price--featured {
  background: linear-gradient(180deg, rgba(10,18,36,0.97) 0%, rgba(17,24,39,1) 100%);
  color: #fff;
  border-color: rgba(255,255,255,0.08);
  box-shadow: var(--wb-shadow-md), var(--wb-shadow-glow-blue);
}
.wb-price--featured h3, .wb-price--featured .wb-price__amount { color: #fff; }
.wb-price__tag {
  position: absolute; top: 14px; right: 14px;
  padding: 5px 11px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-grad-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px -8px rgba(59,130,246,0.5);
}
.wb-price__name { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--wb-blue-700); font-weight: 600; }
.wb-price--featured .wb-price__name { color: var(--wb-blue-400); }
.wb-price__amount {
  font-family: var(--wb-font-display);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.04em;
}
.wb-price__amount sup { font-size: 1.2rem; font-weight: 600; vertical-align: top; margin-right: 6px; opacity: 0.6; }
.wb-price__amount small { font-size: 0.92rem; font-weight: 500; opacity: 0.6; }
.wb-price__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.wb-price__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.96rem; color: inherit; opacity: 0.92; }
.wb-price__list .wb-icon { width: 16px; height: 16px; color: var(--wb-blue); flex-shrink: 0; margin-top: 3px; }
.wb-price--featured .wb-price__list .wb-icon { color: var(--wb-blue-400); }

/* Comparison table */
.wb-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--wb-glass-bg-strong);
  backdrop-filter: blur(var(--wb-glass-blur));
  border-radius: var(--wb-r-lg);
  overflow: hidden;
  border: 1px solid var(--wb-glass-stroke);
}
.wb-compare th, .wb-compare td {
  padding: 18px 22px;
  text-align: left;
  border-bottom: 1px solid rgba(11,11,18,0.06);
  font-size: 0.96rem;
}
.wb-compare thead th {
  background: rgba(11,11,18,0.04);
  font-family: var(--wb-font-display);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wb-grey-700);
}
.wb-compare tbody tr:last-child td { border-bottom: none; }
.wb-compare td.is-yes { color: var(--wb-blue-700); font-weight: 600; }
.wb-compare td.is-no { color: var(--wb-grey-400); }

/* --- Testimonials --- */
.wb-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wb-s-5); }
.wb-testimonial {
  padding: var(--wb-s-6);
  border-radius: var(--wb-r-lg);
  background: var(--wb-glass-bg-strong);
  border: 1px solid var(--wb-glass-stroke);
  backdrop-filter: blur(var(--wb-glass-blur));
  display: flex; flex-direction: column; gap: var(--wb-s-4);
}
.wb-testimonial__stars { color: var(--wb-amber); display: inline-flex; gap: 1px; }
.wb-testimonial__stars .wb-icon { width: 14px; height: 14px; }
.wb-testimonial__stars .wb-icon path { fill: currentColor; }
.wb-testimonial__quote { font-size: 0.98rem; color: var(--wb-ink); line-height: 1.6; margin: 0; letter-spacing: -0.005em; }
.wb-testimonial__author { display: flex; align-items: center; gap: 10px; }
.wb-testimonial__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; color: #fff;
  background: var(--wb-grad-accent);
  font-size: 0.86rem;
}
.wb-testimonial__meta { font-size: 0.92rem; color: var(--wb-grey-700); }
.wb-testimonial__meta strong { color: var(--wb-ink); display: block; font-weight: 600; }

/* --- Big CTA --- */
.wb-cta {
  position: relative;
  padding: clamp(56px, 8vw, 104px) clamp(28px, 5vw, 72px);
  border-radius: 32px;
  text-align: center;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(59, 130, 246, 0.22), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(99, 102, 241, 0.18), transparent 70%),
    linear-gradient(135deg, #0A1224 0%, #131E36 50%, #0E1F3D 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 28px 70px -22px rgba(15, 23, 42, 0.45),
    0 40px 100px -30px rgba(59, 130, 246, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Slowly rotating mesh gradient under everything (deep colour bleed) */
.wb-cta::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: var(--wb-grad-mesh);
  filter: blur(110px);
  opacity: 0.28;
  z-index: -1;
  animation: wb-spin 42s linear infinite;
}
/* Light scan that drifts diagonally for premium feel */
.wb-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 35%, rgba(255, 255, 255, 0.06) 50%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: wb-cta-shine 8s ease-in-out infinite;
}
@keyframes wb-cta-shine {
  0%, 100% { transform: translateX(-30%); opacity: 0; }
  50%      { transform: translateX(30%);  opacity: 1; }
}
.wb-cta > * { position: relative; z-index: 1; }

/* Force white text — beats `body.webino-front h2` specificity (0,1,2) */
body.webino-front .wb-cta h2 {
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 14px 0 18px;
  background: linear-gradient(180deg, #fff 55%, rgba(255, 255, 255, 0.65) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wb-cta p { color: rgba(255, 255, 255, 0.82); font-size: 1.1rem; max-width: 56ch; margin: 0 auto var(--wb-s-5); }
.wb-cta__btns { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* --- FAQ --- */
.wb-faq { max-width: 820px; margin: 0 auto; }

/* --- About / Team --- */
.wb-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wb-s-5); }
.wb-member {
  padding: var(--wb-s-5);
  border-radius: var(--wb-r-lg);
  background: var(--wb-glass-bg-strong);
  border: 1px solid var(--wb-glass-stroke);
  backdrop-filter: blur(var(--wb-glass-blur));
  text-align: center;
}
.wb-member__avatar {
  width: 96px; height: 96px;
  margin: 0 auto var(--wb-s-3);
  border-radius: 50%;
  background: var(--wb-grad-mesh);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--wb-font-display);
  font-weight: 800;
  color: #fff;
  font-size: 1.6rem;
  box-shadow: var(--wb-shadow-md);
}
.wb-member__name { font-weight: 700; color: var(--wb-ink); font-family: var(--wb-font-display); margin-bottom: 4px; }
.wb-member__role { font-size: 0.88rem; color: var(--wb-grey-700); }

.wb-timeline { position: relative; padding-left: 20px; border-left: 1px dashed rgba(59,130,246,0.30); }
.wb-timeline__item { padding: 0 0 var(--wb-s-6) var(--wb-s-5); position: relative; }
.wb-timeline__item::before {
  content: "";
  position: absolute;
  left: -26px; top: 6px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--wb-grad-accent);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.16);
}
.wb-timeline__year { font-family: var(--wb-font-display); font-weight: 600; color: var(--wb-blue-700); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.wb-timeline__title { font-size: var(--wb-fs-h5); margin-bottom: 4px; letter-spacing: -0.02em; }
.wb-timeline__text { color: var(--wb-grey-700); margin: 0; font-size: 0.95rem; }

/* --- Security visual — orbital pillars -----------------------------------
   Light-theme port of the radial orbital timeline pattern: pulsing
   blue core surrounded by rotating dashed rings and 6 glass pills
   positioned on an invisible circle. Hover lifts each pill into the
   accent gradient. */
.wb-shield {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--wb-s-7);
  align-items: center;
}
.wb-shield__visual {
  aspect-ratio: 1/1;
  /* CSS variable used by orbital children — clamp keeps the layout
     sensible from 360px viewports up to large desktop screens. */
  --orbital-radius: clamp(120px, 18vw, 210px);
  border-radius: var(--wb-r-xl);
  background:
    radial-gradient(circle at 50% 50%, rgba(59,130,246,0.16) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.30));
  backdrop-filter: blur(var(--wb-glass-blur));
  border: 1px solid var(--wb-glass-stroke);
  box-shadow: var(--wb-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.55);
  position: relative;
  overflow: visible;
  display: flex; align-items: center; justify-content: center;
}

/* Concentric dashed rings rotating at staggered speeds. We use
   inset:0 + margin:auto for centering so the spin animation can
   own `transform` without breaking the layout. */
.wb-orbital__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border: 1px dashed rgba(59, 130, 246, 0.22);
  border-radius: 50%;
  pointer-events: none;
  animation: wb-spin 50s linear infinite;
}
.wb-orbital__ring--1 { width: 48%; height: 48%; animation-duration: 28s; }
.wb-orbital__ring--2 { width: 74%; height: 74%; animation-duration: 46s; animation-direction: reverse; border-color: rgba(99, 102, 241, 0.18); }
.wb-orbital__ring--3 { width: 100%; height: 100%; animation-duration: 70s; border-color: rgba(59, 130, 246, 0.14); }

/* Central pulsing orb */
.wb-orbital__core {
  position: relative;
  width: 108px; height: 108px;
  border-radius: 50%;
  background: var(--wb-grad-accent);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow:
    var(--wb-shadow-glow-blue),
    0 0 60px rgba(59, 130, 246, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  z-index: 3;
}
.wb-orbital__core .wb-icon { width: 44px; height: 44px; }
.wb-orbital__ping {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid rgba(59, 130, 246, 0.55);
  animation: wb-orbital-ping 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  pointer-events: none;
}
@keyframes wb-orbital-ping {
  0%   { transform: scale(0.95); opacity: 0.85; }
  100% { transform: scale(1.9);  opacity: 0;    }
}

/* Orbital nodes: positioned on an invisible circle via --angle.
   `--orbital-radius` is set on .wb-shield__visual in an absolute length
   so `translateY()` interprets it as a real pixel offset (a percentage
   on translateY resolves against the node's own height, not the
   parent — which would collapse all nodes to the centre). */
.wb-orbital__node {
  --angle: 0deg;
  /* Reset native <button> styles so the pill stays glassy */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  position: absolute;
  top: 50%; left: 50%;
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(calc(-1 * var(--orbital-radius)))
    rotate(calc(-1 * var(--angle)));
  z-index: 2;
}
.wb-orbital__node:focus-visible { outline: 2px solid var(--wb-blue-700); outline-offset: 4px; border-radius: var(--wb-r-pill); }
.wb-orbital__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--wb-r-pill);
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.78));
  border: 1px solid rgba(59, 130, 246, 0.22);
  color: var(--wb-ink);
  font-size: 0.80rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 8px 22px -10px rgba(59, 130, 246, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition:
    transform 340ms var(--wb-ease),
    background 340ms,
    color 340ms,
    border-color 340ms,
    box-shadow 340ms,
    opacity 280ms,
    filter 280ms;
}
.wb-orbital__pill .wb-icon {
  width: 14px; height: 14px;
  color: var(--wb-blue);
  transition: color 340ms;
}
.wb-orbital__node:hover .wb-orbital__pill,
.wb-orbital__node:focus-visible .wb-orbital__pill,
.wb-orbital__node.is-active .wb-orbital__pill {
  transform: translateY(-2px) scale(1.08);
  background: var(--wb-grad-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 28px -8px rgba(59, 130, 246, 0.55);
}
.wb-orbital__node:hover .wb-orbital__pill .wb-icon,
.wb-orbital__node:focus-visible .wb-orbital__pill .wb-icon,
.wb-orbital__node.is-active .wb-orbital__pill .wb-icon { color: #fff; }

/* When a node is active, dim the others to focus the eye on the panel */
.wb-shield__visual.has-detail-open .wb-orbital__node:not(.is-active) .wb-orbital__pill {
  opacity: 0.45;
  filter: saturate(0.6);
}

/* Smooth out the central orb so it can fade out when a detail opens */
.wb-orbital__core {
  transition:
    transform 380ms var(--wb-ease),
    opacity 280ms var(--wb-ease);
}
.wb-shield__visual.has-detail-open .wb-orbital__core {
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}

/* Detail panel — replaces the core when a pill is clicked */
.wb-orbital__detail {
  position: absolute;
  top: 50%; left: 50%;
  width: min(260px, 70%);
  padding: 22px 22px 20px;
  border-radius: var(--wb-r-lg);
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,255,255,0.85));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(59, 130, 246, 0.22);
  box-shadow:
    0 28px 60px -24px rgba(59, 130, 246, 0.35),
    0 12px 32px -10px rgba(15, 23, 42, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-align: left;
  z-index: 4;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  pointer-events: none;
  transition:
    opacity 320ms var(--wb-ease),
    transform 420ms var(--wb-ease-bounce);
}
.wb-orbital__detail.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.wb-orbital__detail-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--wb-grad-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 10px 22px -8px rgba(59, 130, 246, 0.45);
}
.wb-orbital__detail-icon .wb-icon { width: 22px; height: 22px; color: #fff; }
.wb-orbital__detail-title {
  font-family: var(--wb-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--wb-ink);
  margin: 0 0 6px;
  letter-spacing: -0.018em;
}
.wb-orbital__detail-text {
  font-size: 0.86rem;
  color: var(--wb-grey-700);
  line-height: 1.5;
  margin: 0;
}
.wb-orbital__detail-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: var(--wb-grey-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background var(--wb-t-fast), color var(--wb-t-fast), transform var(--wb-t-fast);
}
.wb-orbital__detail-close:hover {
  background: rgba(15, 23, 42, 0.12);
  color: var(--wb-ink);
  transform: scale(1.08);
}
.wb-orbital__detail-close .wb-icon { width: 12px; height: 12px; }

/* Mobile: tighten the orbit so labels stay inside */
@media (max-width: 720px) {
  .wb-shield__visual { --orbital-radius: clamp(96px, 28vw, 170px); }
  .wb-orbital__core { width: 86px; height: 86px; }
  .wb-orbital__core .wb-icon { width: 36px; height: 36px; }
  .wb-orbital__pill { padding: 6px 10px; font-size: 0.72rem; }
}

/* --- Split feature row --- */
.wb-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--wb-s-8);
  align-items: center;
}
.wb-split + .wb-split { margin-top: var(--wb-s-9); }
.wb-split--reverse > :first-child { order: 2; }
.wb-split__visual {
  border-radius: var(--wb-r-xl);
  overflow: hidden;
  background: var(--wb-glass-bg-strong);
  border: 1px solid var(--wb-glass-stroke);
  backdrop-filter: blur(var(--wb-glass-blur));
  box-shadow: var(--wb-shadow-md);
  padding: 28px;
  position: relative;
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
}
.wb-split__visual::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(59,130,246,0.14) 0%, transparent 60%);
  pointer-events: none;
}

/* Contact split */
.wb-contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--wb-s-7);
}
.wb-contact-info {
  display: grid; gap: var(--wb-s-4);
  padding: var(--wb-s-6);
  border-radius: var(--wb-r-lg);
  background: var(--wb-glass-bg-strong);
  border: 1px solid var(--wb-glass-stroke);
  backdrop-filter: blur(var(--wb-glass-blur));
}
.wb-contact-info__row {
  display: flex; gap: 14px; align-items: flex-start;
}
.wb-contact-info__icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--wb-grad-accent);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wb-contact-info__icon .wb-icon { width: 20px; height: 20px; }
.wb-contact-info__row strong { display: block; color: var(--wb-ink); font-weight: 600; margin-bottom: 2px; }
.wb-contact-info__row p { margin: 0; color: var(--wb-grey-700); font-size: 0.96rem; }

/* --- Editor visual mockup (How It Works) --- */
.wb-editor {
  border-radius: var(--wb-r-lg);
  background: linear-gradient(180deg, #fff, #F4F6FB);
  border: 1px solid var(--wb-glass-stroke-dark);
  box-shadow: var(--wb-shadow-md);
  overflow: hidden;
  width: 100%;
}
.wb-editor__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(11,11,18,0.04);
  border-bottom: 1px solid rgba(11,11,18,0.06);
}
.wb-editor__body { display: grid; grid-template-columns: 220px 1fr; }
.wb-editor__side {
  background: rgba(11,11,18,0.03);
  padding: 18px 14px;
  display: grid; gap: 10px;
  border-right: 1px solid rgba(11,11,18,0.06);
}
.wb-editor__block {
  height: 12px; border-radius: 6px; background: rgba(11,11,18,0.10);
}
.wb-editor__block--lg { height: 14px; width: 80%; }
.wb-editor__block--sm { width: 60%; }
.wb-editor__main { padding: 22px; display: grid; gap: 14px; }
.wb-editor__hl {
  height: 24px; border-radius: 8px; background: var(--wb-grad-accent); width: 50%;
  box-shadow: var(--wb-shadow-glow-blue);
}
.wb-editor__row { display: flex; gap: 10px; }
.wb-editor__row .wb-editor__block { flex: 1; height: 70px; border-radius: 12px; background: rgba(11,11,18,0.06); }

/* --- Page header (interior pages) --- */
.wb-pagehead {
  padding: calc(var(--wb-header-h) + var(--wb-s-6)) 0 var(--wb-s-7);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.wb-pagehead__inner { position: relative; z-index: 2; }
.wb-pagehead h1 { font-size: var(--wb-fs-h1); margin-bottom: var(--wb-s-4); letter-spacing: -0.035em; }
.wb-pagehead p { font-size: var(--wb-fs-lead); color: var(--wb-grey-700); max-width: 60ch; margin: 0 auto; line-height: 1.55; }

/* --- Image collage (Swiss imagery) --- */
.wb-collage {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 14px;
}
.wb-collage__cell {
  border-radius: var(--wb-r-lg);
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  box-shadow: var(--wb-shadow-md);
}
.wb-collage__cell--big { grid-row: span 2; }
.wb-collage__cell::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,11,18,0.4));
  pointer-events: none;
}
.wb-collage__cell span {
  position: absolute; bottom: 14px; left: 14px;
  color: #fff; font-weight: 600; font-size: 0.92rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  z-index: 1;
}

/* --- Marquee --- */
.wb-marquee {
  overflow: hidden;
  position: relative;
  padding: var(--wb-s-4) 0;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.wb-marquee__track {
  display: inline-flex; gap: var(--wb-s-6);
  animation: wb-marquee 28s linear infinite;
  white-space: nowrap;
}
.wb-marquee__item {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--wb-font-display);
  font-weight: 550;
  font-size: 0.95rem;
  color: var(--wb-grey-700);
  padding: 6px 14px;
  background: var(--wb-glass-bg);
  border-radius: var(--wb-r-pill);
  border: 1px solid var(--wb-glass-stroke);
}
.wb-marquee__item .wb-icon { width: 14px; height: 14px; color: var(--wb-blue); }

/* ----- 7. ANIMATIONS ---------------------------------------------------- */
@keyframes wb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes wb-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes wb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes wb-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.42); }
  50% { box-shadow: 0 0 0 14px rgba(59,130,246,0); }
}
.wb-pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--wb-blue);
  display: inline-block;
  animation: wb-pulse-glow 1.8s infinite;
}

/* Reveal helpers (GSAP applies inline transforms; these are fallbacks) */
.wb-reveal { opacity: 0; transform: translateY(28px); }
.wb-reveal.is-in { opacity: 1; transform: translateY(0); transition: opacity .8s var(--wb-ease), transform .8s var(--wb-ease); }

/* Anim fallback: ensure content is always visible if GSAP fails to load
   or if ScrollTrigger fails to fire. JS adds .wb-js-ready to <html> once
   GSAP-based reveals are active, so the override below only applies when
   the script never ran. */
html:not(.wb-js-ready) .wb-anim,
html:not(.wb-js-ready) .wb-anim-stagger > * { opacity: 1 !important; transform: none !important; }

/* Cursor accent for buttons */
.wb-cursor-blink {
  display: inline-block;
  width: 2px; height: 1em; background: currentColor;
  margin-left: 3px; vertical-align: -2px;
  animation: wb-blink 1s steps(2, start) infinite;
}
@keyframes wb-blink { to { visibility: hidden; } }

/* ----- 8. RESPONSIVE ---------------------------------------------------- */
@media (max-width: 1080px) {
  .wb-features__grid,
  .wb-pricing__grid,
  .wb-testimonials__grid,
  .wb-steps { grid-template-columns: repeat(2, 1fr); }
  .wb-team-grid { grid-template-columns: repeat(2, 1fr); }
  .wb-stats { grid-template-columns: repeat(2, 1fr); }
  .wb-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .wb-split { grid-template-columns: 1fr; }
  .wb-split--reverse > :first-child { order: 0; }
  .wb-shield { grid-template-columns: 1fr; }
  .wb-contact-grid { grid-template-columns: 1fr; }
  .wb-collage { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px; }
  .wb-collage__cell--big { grid-row: auto; }
}
@media (max-width: 720px) {
  .wb-section { padding: var(--wb-s-8) 0; }
  .wb-nav, .wb-header__cta .wb-btn--ghost { display: none; }
  .wb-header__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--wb-glass-bg-strong);
    border: 1px solid var(--wb-glass-stroke);
    color: var(--wb-ink);
  }
  .wb-features__grid,
  .wb-pricing__grid,
  .wb-testimonials__grid,
  .wb-steps,
  .wb-team-grid,
  .wb-stats { grid-template-columns: 1fr; }
  .wb-footer__grid { grid-template-columns: 1fr 1fr; }
  .wb-footer__bottom { flex-direction: column; gap: 10px; }
  .wb-mock__hero { grid-template-columns: 1fr; }
  .wb-mock__art { height: 180px; }
  .wb-editor__body { grid-template-columns: 1fr; }
  .wb-editor__side { display: none; }
  .wb-gen__bar { flex-direction: column; padding: 14px; border-radius: var(--wb-r-lg); }
  .wb-gen__input { width: 100%; }
  .wb-gen__btn { width: 100%; }
  .wb-collage { grid-template-columns: 1fr; grid-template-rows: repeat(4, 180px); }
  .wb-cta { padding: var(--wb-s-7) var(--wb-s-5); }
  .wb-pagehead { padding: calc(var(--wb-header-h) + var(--wb-s-5)) 0 var(--wb-s-6); }
}

/* Mobile nav (open state, toggled via JS) */
.wb-mobile {
  display: none;
  position: fixed; inset: 0;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  z-index: 999;
  padding: 90px 24px 24px;
  flex-direction: column; gap: 8px;
}
.wb-mobile a {
  font-family: var(--wb-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wb-ink);
  padding: 12px 0;
  border-bottom: 1px solid rgba(11,11,18,0.06);
}
.wb-mobile.is-open { display: flex; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}