/* ============================================================
   colors_and_type.css
   ============================================================ */

/* ============================================================
   KWELITY — Design System
   ------------------------------------------------------------
   Brand: KWELITY (kwelity.io)
   Source of truth for color, type, spacing, radius, shadow.
   Reference: assets/reference-palette.png, reference-typeface.png
   ============================================================ */

/* -- Webfonts ------------------------------------------------ */
/* H1 / display: Astro Space (the licensed brand face — file in
   fonts/AstroSpace.otf). H2 / H3 / body / UI: Plus Jakarta Sans —
   the typeface the live kwelity.io site already uses across the
   whole surface. Modern, humanist, sets cleanly at every size,
   and the wider strokes complement Astro Space's geometric H1
   moment without competing with it. */
@font-face {
  font-family: "Astro Space" !important;
  src: url("fonts/AstroSpace.ttf") format("truetype"),
       url("fonts/AstroSpace.otf") format("opentype") !important;
  font-weight: 100 900 !important;
  font-style: normal !important;
  font-display: swap !important;
}
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");

/* ============================================================
   WordPress theme overrides — make the theme's wrapper divs
   transparent so our section backgrounds show through cleanly.
   We deliberately DO NOT touch their widths / margins / padding
   so the theme's own layout (centering, max-width, etc.) is
   preserved. Add more selectors here if a specific wrapper in
   your theme is painting a colour over our sections.
   ============================================================ */
.site,
.site-inner,
.site-content,
.site-main,
.content-area,
.entry,
.entry-content,
.entry-header,
.entry-footer,
.page-content,
.page,
.post,
.hentry,
.wp-site-blocks,
main.site-main,
main#main,
#content,
#page,
#primary,
#main,
.main-content,
.elementor,
.elementor-section,
.elementor-section-wrap,
.elementor-container,
.elementor-row,
.elementor-widget-wrap,
.elementor-widget-container,
.wpb_wrapper,
.vc_row,
.vc_column,
.vc_column-inner,
.vc_row-fluid,
.wpb_row,
.wpb_column {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

:root {
  /* ---------- BRAND COLORS (from brand sheet) ------------- */
  --k-purple-900:   #1F0044 !important;  
  --k-navy-800:     #0B1A4D !important;  
  --k-purple-800:   var(--k-navy-800) !important; 
  --k-violet-400:   #766BA5 !important;  
  --k-pink-400:     #FA65BF !important;  
  --k-cyan-400:     #4DDDFF !important;  
  --k-amber-300:    #EFBA6C !important;  

  /* Gradient stops pulled from the brand mark (sampled from
     the chevron icon: blue → pink → amber). */
  --k-grad-blue:    #6CC8F0 !important;
  --k-grad-pink:    #F265B0 !important;
  --k-grad-amber:   #F3B26A !important;

  /* Signature brand gradient (use sparingly: mark, accents,
     hero overlays — never as body bg). */
  --k-gradient: linear-gradient(140deg, var(--k-navy-800) 0%, var(--k-grad-blue) 22%, var(--k-grad-pink) 60%, var(--k-grad-amber) 100%) !important;
  --k-gradient-soft: linear-gradient(140deg, rgba(11,26,77,.18), rgba(108,200,240,.18) 22%, rgba(242,101,176,.18) 60%, rgba(243,178,106,.18)) !important;

  /* ---------- NEUTRALS (dark-first system) ---------------- */
  --k-black:        #050308 !important;
  --k-ink-1000:     #0A0612 !important;   
  --k-ink-900:      #110A1F !important;   
  --k-ink-800:      #1C1330 !important;   
  --k-ink-700:      #2A1E45 !important;
  --k-ink-600:      #3D2F5E !important;
  --k-ink-500:      #5A4B7A !important;
  --k-ink-400:      #8A7DA8 !important;
  --k-ink-300:      #B5AAC9 !important;
  --k-ink-200:      #DAD4E6 !important;
  --k-ink-100:      #EEEBF3 !important;
  --k-ink-50:       #F7F5FA !important;
  --k-white:        #FFFFFF !important;

  /* ---------- SEMANTIC — FOREGROUND ----------------------- */
  --fg-1: var(--k-white) !important;                
  --fg-2: rgba(255,255,255,.72) !important;          
  --fg-3: rgba(255,255,255,.48) !important;          
  --fg-4: rgba(255,255,255,.24) !important;          
  --fg-on-light-1: var(--k-ink-1000) !important;
  --fg-on-light-2: rgba(10,6,18,.66) !important;
  --fg-on-light-3: rgba(10,6,18,.44) !important;

  /* ---------- SEMANTIC — BACKGROUNDS ---------------------- */
  --bg-canvas:   var(--k-black) !important;          
  --bg-surface:  var(--k-ink-900) !important;        
  --bg-raised:   var(--k-ink-800) !important;        
  --bg-overlay:  rgba(10,6,18,.72) !important;       
  --bg-light:    var(--k-white) !important;          
  --bg-light-2:  var(--k-ink-50) !important;         

  /* ---------- SEMANTIC — STATES --------------------------- */
  --accent:        var(--k-cyan-400) !important;     
  --accent-warm:   var(--k-amber-300) !important;
  --accent-hot:    var(--k-pink-400) !important;
  --success:       #57E2A4 !important;
  --warning:       var(--k-amber-300) !important;
  --danger:        #FF6B7A !important;
  --info:          var(--k-cyan-400) !important;

  /* ---------- BORDERS ------------------------------------- */
  --border-1: rgba(255,255,255,.10) !important;
  --border-2: rgba(255,255,255,.18) !important;
  --border-strong: rgba(255,255,255,.32) !important;
  --border-on-light: rgba(10,6,18,.10) !important;

  /* ---------- TYPE — FAMILIES ----------------------------- */
  --font-display:  "Astro Space", "Plus Jakarta Sans", system-ui, sans-serif !important;
  --font-headline: "Plus Jakarta Sans", "Inter", system-ui, sans-serif !important;
  --font-body:     "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif !important;
  --font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;

  /* ---------- TYPE — SIZE SCALE (modular, 1.250) ---------- */
  --t-12: 0.75rem !important;
  --t-14: 0.875rem !important;
  --t-16: 1rem !important;
  --t-18: 1.125rem !important;
  --t-20: 1.25rem !important;
  --t-24: 1.5rem !important;
  --t-32: 2rem !important;
  --t-40: 2.5rem !important;
  --t-56: 3.5rem !important;
  --t-72: 4.5rem !important;
  --t-96: 6rem !important;

  /* ---------- TYPE — WEIGHTS & TRACKING ------------------- */
  --w-regular: 400 !important;
  --w-medium:  500 !important;
  --w-semi:    600 !important;
  --w-bold:    700 !important;
  --w-black:   900 !important;

  --track-display: 0.16em !important;   
  --track-eyebrow: 0.32em !important;   
  --track-button:  0.18em !important;   
  --track-body:    0.005em !important;

  /* ---------- SPACING (4pt grid) -------------------------- */
  --s-0:  0 !important;
  --s-1:  4px !important;
  --s-2:  8px !important;
  --s-3:  12px !important;
  --s-4:  16px !important;
  --s-5:  20px !important;
  --s-6:  24px !important;
  --s-8:  32px !important;
  --s-10: 40px !important;
  --s-12: 48px !important;
  --s-16: 64px !important;
  --s-20: 80px !important;
  --s-24: 96px !important;
  --s-32: 128px !important;

  /* ---------- RADIUS -------------------------------------- */
  --r-xs:    4px !important;
  --r-sm:    8px !important;
  --r-md:    12px !important;
  --r-lg:    20px !important;
  --r-xl:    28px !important;
  --r-2xl:   40px !important;
  --r-pill:  999px !important;     

  /* ---------- SHADOWS ------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.30) !important;
  --shadow-2: 0 4px 16px rgba(0,0,0,.32) !important;
  --shadow-3: 0 16px 40px rgba(0,0,0,.42) !important;
  --shadow-glow-pink: 0 0 0 1px rgba(250,101,191,.30), 0 12px 48px rgba(250,101,191,.28) !important;
  --shadow-glow-cyan: 0 0 0 1px rgba(77,221,255,.30), 0 12px 48px rgba(77,221,255,.24) !important;
  --inset-hairline: inset 0 0 0 1px rgba(255,255,255,.06) !important;

  /* ---------- MOTION -------------------------------------- */
  --ease-out:    cubic-bezier(.22, 1, .36, 1) !important;     
  --ease-in-out: cubic-bezier(.65, 0, .35, 1) !important;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1) !important;  
  --dur-fast:    140ms !important;
  --dur-base:    240ms !important;
  --dur-slow:    420ms !important;
  --dur-marquee: 32s !important;   
}

/* ============================================================
   SEMANTIC TYPE — apply as utility classes or as base styles.
   H1 uses Astro Space (caps, wide tracking) for the brand
   moment. H2/H3, eyebrows and buttons use Plus Jakarta Sans in
   uppercase with moderate tracking. Body uses Plus Jakarta Sans
   in sentence case.
   ============================================================ */

html, body {
  font-family: var(--font-body) !important;
  font-size: var(--t-16) !important;
  line-height: 1.55 !important;
  color: var(--fg-1) !important;
  background: var(--bg-canvas) !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

.h-display, h1.display {
  font-family: var(--font-display) !important;
  font-weight: var(--w-medium) !important;
  font-size: clamp(var(--t-56), 6vw, var(--t-96)) !important;
  line-height: 1.05 !important;
  letter-spacing: var(--track-display) !important;
  text-transform: uppercase !important;
}

h1, .h1 {
  font-family: var(--font-display) !important;
  font-weight: var(--w-medium) !important;
  font-size: clamp(var(--t-40), 4.2vw, var(--t-72)) !important;
  line-height: 1.08 !important;
  letter-spacing: var(--track-display) !important;
  text-transform: uppercase !important;
}

h2, .h2 {
  font-family: var(--font-headline) !important;
  font-weight: var(--w-bold) !important;
  font-size: clamp(var(--t-32), 3.2vw, var(--t-56)) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

h3, .h3 {
  font-family: var(--font-headline) !important;
  font-weight: var(--w-regular) !important;
  font-size: var(--t-24) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--fg-2) !important;
}

h4, .h4 {
  font-family: var(--font-headline) !important;
  font-weight: var(--w-semi) !important;
  font-size: var(--t-20) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.02em !important;
}

.eyebrow {
  font-family: var(--font-headline) !important;
  font-weight: var(--w-semi) !important;
  font-size: var(--t-12) !important;
  letter-spacing: var(--track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--fg-2) !important;
}

p, .body {
  font-family: var(--font-body) !important;
  font-size: var(--t-16) !important;
  line-height: 1.6 !important;
  color: var(--fg-2) !important;
  text-wrap: pretty !important;
}

.lede {
  font-family: var(--font-body) !important;
  font-weight: var(--w-regular) !important;
  font-size: var(--t-20) !important;
  line-height: 1.55 !important;
  color: var(--fg-2) !important;
}

.caption {
  font-family: var(--font-body) !important;
  font-size: var(--t-12) !important;
  letter-spacing: 0.04em !important;
  color: var(--fg-3) !important;
}

code, .code {
  font-family: var(--font-mono) !important;
  font-size: 0.9em !important;
  background: var(--k-ink-800) !important;
  border: 1px solid var(--border-1) !important;
  padding: 0.12em 0.42em !important;
  border-radius: var(--r-xs) !important;
  color: var(--fg-1) !important;
}

/* Helpers --------------------------------------------------- */
.text-gradient {
  background: var(--k-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.surface-dark   { background: var(--bg-canvas); color: var(--fg-1); }
.surface-light  { background: var(--bg-light);  color: var(--fg-on-light-1); }
.surface-raised { background: var(--bg-raised); color: var(--fg-1); border: 1px solid var(--border-1); }

/* ============================================================
   css/base.css
   ============================================================ */

/* ===========================================================
   tokens & base — shared utilities for the webinar page.
   Layered on top of colors_and_type.css.
   =========================================================== */

html, body {
  margin: 0 !important;
  background: var(--bg-light) !important;
  color: var(--fg-on-light-1) !important;
  scroll-behavior: smooth !important;
}

[data-screen-label] { scroll-margin-top: 96px; }

a { color: inherit; }

*:focus-visible {
  outline: 2px solid var(--k-cyan-400) !important;
  outline-offset: 2px !important;
}

::selection {
  background: var(--k-pink-400) !important;
  color: var(--k-ink-1000) !important;
}

/* Reusable section eyebrow ---------------------------------- */
.wb-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}
.wb-eyebrow__no {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  letter-spacing: 0.32em !important;
  color: var(--fg-on-light-3) !important;
}
.wb-eyebrow__rule {
  width: 24px !important;
  height: 1px !important;
  background: var(--fg-on-light-3) !important;
}
.wb-eyebrow__label {
  font-family: var(--font-headline) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--fg-on-light-2) !important;
}
.wb-eyebrow--dark .wb-eyebrow__no { color: var(--fg-3); }
.wb-eyebrow--dark .wb-eyebrow__rule { background: var(--fg-3); }
.wb-eyebrow--dark .wb-eyebrow__label { color: var(--fg-2); }

/* Reusable inline CTA --------------------------------------- */
.wb-cta {
  margin-top: 40px !important;
  padding: 18px 28px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: all 200ms var(--ease-out) !important;
  border: 1.5px solid var(--k-ink-1000) !important;
  background: var(--k-ink-1000) !important;
  color: var(--k-white) !important;
}
.wb-cta:hover {
  background: transparent !important;
  color: var(--k-ink-1000) !important;
}
.wb-cta--gradient {
  border: 0 !important;
  background: var(--k-gradient) !important;
  color: var(--k-ink-1000) !important;
  font-weight: 700 !important;
  box-shadow: 0 12px 32px rgba(242, 101, 176, 0.32) !important;
}
.wb-cta--gradient:hover {
  background: var(--k-gradient) !important;
  color: var(--k-ink-1000) !important;
  transform: translateY(-1px) !important;
}

/* Common section padding ------------------------------------ */
.wb-section { padding: 120px 40px; position: relative; }
.wb-section__inner { max-width: 1480px; margin: 0 auto; position: relative; }

/* Larger screens — sections breathe, content keeps growing ---- */
@media (min-width: 1600px) { .wb-section { padding: 140px 56px; } }
@media (min-width: 1900px) { .wb-section { padding: 160px 72px; } }
@media (min-width: 2200px) { .wb-section { padding: 180px 96px; } }
@media (min-width: 2500px) { .wb-section { padding: 200px 120px; } }
@media (min-width: 2700px) { .wb-section { padding: 220px 140px; } }
.wb-section--light   { background: var(--bg-light);   color: var(--fg-on-light-1); }
.wb-section--light-2 { background: var(--bg-light-2); color: var(--fg-on-light-1); }
.wb-section--dark    { background: var(--k-ink-1000); color: var(--fg-1); overflow: hidden; }

.wb-section__bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

/* Generic section title ------------------------------------- */
.wb-h2 {
  margin: 0 0 12px !important;
  font-family: var(--font-headline) !important;
  font-weight: 700 !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  line-height: 1.15 !important;
}
.wb-h2--lg { font-size: clamp(32px, 3.4vw, 88px); line-height: 1.05; max-width: 1280px; }
.wb-h2--md { font-size: clamp(28px, 2.8vw, 72px); line-height: 1.15; }
.wb-h2 .muted { color: var(--fg-on-light-3); }
.wb-h2--dark .muted { color: var(--fg-3); }

.wb-lede {
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: clamp(17px, 1.05vw, 26px) !important;
  line-height: 1.6 !important;
  color: var(--fg-on-light-2) !important;
  max-width: 880px !important;
}

/* ============================================================
   css/chrome.css
   ============================================================ */

/* ===========================================================
   Chrome — top header, sticky CTA pill, footer.
   =========================================================== */

/* Header --------------------------------------------------- */
.wb-header {
  position: fixed; top: 0; left: 0; right: 0 !important;
  z-index: 50 !important;
  padding: 20px 40px !important;
  display: flex; align-items: center; justify-content: space-between !important;
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  transition: all 240ms cubic-bezier(.22, 1, .36, 1) !important;
}
@media (min-width: 1600px) {
  .wb-header         { padding: 24px 56px; }
  .wb-header.is-scrolled { padding: 16px 56px; }
}
@media (min-width: 1900px) {
  .wb-header         { padding: 28px 72px; }
  .wb-header.is-scrolled { padding: 18px 72px; }
}
@media (min-width: 2200px) {
  .wb-header         { padding: 32px 96px; }
  .wb-header.is-scrolled { padding: 20px 96px; }
}
@media (min-width: 2500px) {
  .wb-header         { padding: 36px 120px; }
  .wb-header.is-scrolled { padding: 22px 120px; }
}
@media (min-width: 2700px) {
  .wb-header         { padding: 40px 140px; }
  .wb-header.is-scrolled { padding: 24px 140px; }
}
.wb-header.is-scrolled {
  padding: 12px 40px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--border-on-light) !important;
}
.wb-header__brand {
  display: flex; align-items: center; gap: 12px !important;
  text-decoration: none !important;
}
.wb-header__brand img {
  width: 44px; height: 44px; object-fit: contain !important;
}
.wb-header__wordmark {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  letter-spacing: 0.22em !important;
  color: var(--fg-on-light-1) !important;
}
.wb-header__nav {
  display: flex; align-items: center; gap: 28px !important;
}
.wb-header__link {
  font-family: var(--font-headline) !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  color: var(--fg-on-light-2) !important;
  text-decoration: none !important;
  transition: color 200ms var(--ease-out) !important;
}
.wb-header__link:hover { color: var(--fg-on-light-1); }
@media (max-width: 760px) {
  .wb-header__link { display: none; }
}
.wb-header__cta {
  font-family: var(--font-display) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: 1px solid var(--fg-on-light-1) !important;
  background: var(--fg-on-light-1) !important;
  color: var(--k-white) !important;
  cursor: pointer !important;
  transition: all 200ms var(--ease-out) !important;
}
.wb-header__cta:hover {
  background: transparent !important;
  color: var(--fg-on-light-1) !important;
}

/* Sticky bottom CTA bar ------------------------------------ */
.wb-sticky {
  position: fixed; left: 50%; bottom: 24px !important;
  transform: translate(-50%, 40px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all 320ms var(--ease-out) !important;
  z-index: 40 !important;
  display: flex; align-items: center; gap: 16px !important;
  padding: 12px 16px 12px 24px !important;
  background: var(--k-ink-1000) !important;
  border-radius: 999px !important;
  box-shadow:
    0 18px 40px rgba(10, 6, 18, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
.wb-sticky.is-visible {
  transform: translate(-50%, 0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.wb-sticky__when {
  display: flex; align-items: center; gap: 10px !important;
}
.wb-sticky__dot {
  width: 8px; height: 8px; border-radius: 999px !important;
  background: var(--k-cyan-400) !important;
  box-shadow: 0 0 0 4px rgba(77, 221, 255, 0.18) !important;
}
.wb-sticky__label {
  display: flex; flex-direction: column !important;
}
.wb-sticky__date {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--k-white) !important;
}
.wb-sticky__sub {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}
.wb-sticky__cta {
  font-family: var(--font-display) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  border: 0 !important;
  cursor: pointer !important;
  background: var(--k-gradient) !important;
  color: var(--k-ink-1000) !important;
  font-weight: 700 !important;
}

/* Footer --------------------------------------------------- */
.wb-footer {
  background: var(--k-ink-50) !important;
  color: var(--fg-on-light-1) !important;
  padding: 80px 40px 40px !important;
  position: relative !important;
  overflow: hidden !important;
  border-top: 1px solid var(--border-on-light) !important;
}
.wb-footer__bg {
  position: absolute; inset: 0 !important;
  width: 100%; height: 100% !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}
.wb-footer__inner {
  position: relative !important;
  max-width: 1480px; margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 64px !important;
  align-items: start !important;
}
@media (min-width: 1900px) { .wb-footer__inner { max-width: 1840px; } }
@media (min-width: 2200px) { .wb-footer__inner { max-width: 2080px; } }
@media (min-width: 2500px) { .wb-footer__inner { max-width: none; } }
@media (min-width: 2700px) { .wb-footer__inner { max-width: none; } }
.wb-footer__logo {
  width: 72px; height: 72px !important;
  object-fit: contain !important;
  border-radius: 18px !important;
}
.wb-footer__col {
  display: flex; flex-direction: column; gap: 12px !important;
}
.wb-footer__address {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--fg-on-light-2) !important;
  line-height: 1.6 !important;
}
.wb-footer__contact {
  display: flex; gap: 24px !important;
  margin-top: 4px !important;
  flex-wrap: wrap !important;
}
.wb-footer__contact a {
  color: var(--fg-on-light-1) !important;
  text-decoration: none !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}
.wb-footer__contact span {
  color: var(--fg-on-light-2) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}
.wb-footer__socials {
  display: flex; gap: 12px !important;
}
.wb-footer__social {
  width: 36px; height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border-on-light) !important;
  display: flex; align-items: center; justify-content: center !important;
  color: var(--fg-on-light-1) !important;
}
.wb-footer__legal {
  position: relative !important;
  max-width: 1480px !important;
  margin: 56px auto 0 !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--border-on-light) !important;
  display: flex; flex-wrap: wrap; gap: 16px !important;
  justify-content: space-between !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--fg-on-light-3) !important;
}
@media (min-width: 1900px) { .wb-footer__legal { max-width: 1840px; } }
@media (min-width: 2200px) { .wb-footer__legal { max-width: 2080px; } }
@media (min-width: 2500px) { .wb-footer__legal { max-width: none; } }
@media (min-width: 2700px) { .wb-footer__legal { max-width: none; } }
.wb-footer__legal-links {
  display: flex; gap: 18px !important;
}
.wb-footer__legal a {
  color: inherit !important;
  text-decoration: none !important;
}

/* ============================================================
   css/hero.css
   ============================================================ */

/* ===========================================================
   Hero — invitation + registration form
   =========================================================== */

.wb-hero {
  position: relative !important;
  overflow: hidden !important;
  background: var(--bg-light) !important;
  color: var(--fg-on-light-1) !important;
  padding: 140px 40px 96px !important;
}
@media (min-width: 1600px) { .wb-hero { padding: 180px 56px 120px; } }
@media (min-width: 1900px) { .wb-hero { padding: 200px 72px 140px; } }
@media (min-width: 2200px) { .wb-hero { padding: 220px 96px 160px; } }
@media (min-width: 2500px) { .wb-hero { padding: 240px 120px 180px; } }
.wb-hero__bg {
  position: absolute; inset: 0 !important;
  width: 100%; height: 100% !important;
  pointer-events: none !important;
}
.wb-hero__grid {
  position: relative !important;
  max-width: 1480px; margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, 0.85fr) !important;
  gap: 80px !important;
  align-items: center !important;
}
@media (min-width: 1600px) {
  .wb-hero__grid {
    max-width: 1640px !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(440px, 0.8fr) !important;
    gap: 120px !important;
  }
}
@media (min-width: 1900px) {
  .wb-hero__grid { max-width: 1840px; gap: 140px; }
}
@media (min-width: 2200px) {
  .wb-hero__grid { max-width: 2080px; gap: 160px; }
}
@media (min-width: 2500px) {
  .wb-hero__grid { max-width: none; gap: 200px; }
}
@media (min-width: 2700px) {
  .wb-hero__grid { max-width: none; gap: 220px; }
}
@media (max-width: 960px) {
  .wb-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
}

.wb-hero__left {
  display: flex; flex-direction: column; gap: 28px !important;
}
.wb-hero__free-row {
  display: flex; align-items: center; gap: 12px !important;
}
.wb-hero__free-label {
  display: inline-flex; align-items: center; gap: 8px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: var(--k-ink-1000) !important;
  color: var(--k-white) !important;
  font-family: var(--font-headline) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
}
.wb-hero__free-dot {
  width: 6px; height: 6px !important;
  border-radius: 999px !important;
  background: var(--k-cyan-400) !important;
  box-shadow: 0 0 0 3px rgba(77, 221, 255, 0.25) !important;
}

.wb-hero__h1 {
  margin: 0 !important;
  font-family: var(--font-headline) !important;
  font-weight: 700 !important;
  font-size: clamp(44px, 5vw, 156px) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.02 !important;
  text-transform: none !important;
  text-wrap: balance !important;
  color: var(--fg-on-light-1) !important;
}
.wb-hero__h1-mark {
  position: relative !important;
  white-space: nowrap !important;
}
.wb-hero__h1-grad {
  background: var(--k-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-style: italic !important;
  font-weight: 500 !important;
}
.wb-hero__h1-muted {
  color: var(--fg-on-light-2) !important;
  font-weight: 500 !important;
}

.wb-hero__sub {
  margin: 0 !important;
  max-width: 760px !important;
  font-family: var(--font-body) !important;
  font-size: clamp(18px, 1.15vw, 28px) !important;
  line-height: 1.55 !important;
  color: var(--fg-on-light-2) !important;
}
.wb-hero__sub strong {
  color: var(--fg-on-light-1) !important;
  font-weight: 600 !important;
}

/* Date / time pill ----------------------------------------- */
.wb-hero__seatbar {
  display: inline-flex !important;
  align-self: flex-start !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 22px 14px 16px !important;
  border-radius: 999px !important;
  background: rgba(10, 6, 18, 0.04) !important;
  border: 1px solid var(--border-on-light) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: var(--fg-on-light-2) !important;
}
.wb-hero__seatbar-icon {
  width: 32px; height: 32px !important;
  border-radius: 999px !important;
  background: var(--k-gradient) !important;
  display: inline-flex; align-items: center; justify-content: center !important;
  color: var(--k-ink-1000) !important;
}
.wb-hero__seatbar-date {
  color: var(--fg-on-light-1) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
}
.wb-hero__seatbar-dot {
  width: 4px; height: 4px !important;
  border-radius: 999px !important;
  background: var(--k-pink-400) !important;
}

/* Right column — form ------------------------------------- */
.wb-hero__formwrap {
  position: relative !important;
}
.wb-hero__halo {
  position: absolute; inset: -20px !important;
  border-radius: 36px !important;
  background: var(--k-gradient-soft) !important;
  filter: blur(40px) !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}
.wb-form {
  position: relative !important;
  background: var(--k-white) !important;
  border-radius: 28px !important;
  padding: clamp(32px, 2.4vw, 44px) !important;
  box-shadow:
    0 30px 60px -20px rgba(10, 6, 18, 0.18),
    0 0 0 1px rgba(10, 6, 18, 0.06) !important;
  display: flex; flex-direction: column; gap: 18px !important;
}
.wb-form__head {
  display: flex; align-items: baseline; justify-content: space-between !important;
}
.wb-form__title {
  margin: 0 !important;
  font-family: var(--font-headline) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
.wb-form__time {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--fg-on-light-3) !important;
}

.wb-field {
  display: flex; flex-direction: column; gap: 6px !important;
}
.wb-field__label {
  font-family: var(--font-headline) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--fg-on-light-2) !important;
}
.wb-field--error .wb-field__label { color: var(--danger); }
.wb-field__input {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: var(--fg-on-light-1) !important;
  padding: 14px 16px !important;
  background: var(--k-white) !important;
  border: 1.5px solid rgba(10, 6, 18, 0.12) !important;
  border-radius: 14px !important;
  outline: none !important;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out) !important;
}
.wb-field__input:focus {
  border-color: var(--k-ink-1000) !important;
  box-shadow: 0 0 0 4px rgba(77, 221, 255, 0.18) !important;
}
.wb-field--error .wb-field__input {
  border-color: var(--danger) !important;
}
.wb-field__error {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--danger) !important;
}

.wb-form__submit {
  margin-top: 6px !important;
  padding: 18px 24px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--k-ink-1000) !important;
  color: var(--k-white) !important;
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px !important;
  transition: transform 160ms var(--ease-out), opacity 200ms !important;
}
.wb-form__submit:active { transform: translateY(1px); }
.wb-form__submit[disabled] {
  cursor: wait !important;
  opacity: 0.7 !important;
}

.wb-form__hint {
  display: flex; align-items: center; gap: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--fg-on-light-3) !important;
  padding-top: 4px !important;
}

/* GDPR consent checkbox ------------------------------------ */
.wb-form__consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  margin-top: 4px !important;
  border-radius: 12px !important;
  background: rgba(10, 6, 18, 0.03) !important;
  border: 1px solid rgba(10, 6, 18, 0.08) !important;
  cursor: pointer !important;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out) !important;
}
.wb-form__consent:hover {
  border-color: rgba(10, 6, 18, 0.18) !important;
  background: rgba(10, 6, 18, 0.045) !important;
}
.wb-form__consent--err {
  border-color: var(--danger) !important;
  background: rgba(216, 56, 67, 0.04) !important;
}
.wb-form__consent-box {
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  margin: 1px 0 0 0 !important;
  accent-color: var(--k-ink-1000) !important;
  cursor: pointer !important;
}
.wb-form__consent-text {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--fg-on-light-2) !important;
}
.wb-form__consent-text strong {
  color: var(--fg-on-light-1) !important;
  font-weight: 600 !important;
}
.wb-form__consent-err {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--danger) !important;
  margin-top: -8px !important;
  padding-left: 16px !important;
}

/* Success card --------------------------------------------- */
.wb-success {
  position: relative !important;
  background: var(--k-white) !important;
  border-radius: 28px !important;
  padding: clamp(32px, 2.6vw, 48px) !important;
  box-shadow:
    0 30px 60px -20px rgba(10, 6, 18, 0.18),
    0 0 0 1px rgba(10, 6, 18, 0.06) !important;
  display: flex; flex-direction: column; gap: 18px !important;
}
.wb-success__mark {
  width: 56px; height: 56px !important;
  border-radius: 999px !important;
  background: var(--k-gradient) !important;
  color: var(--k-ink-1000) !important;
  display: inline-flex; align-items: center; justify-content: center !important;
  box-shadow: 0 12px 32px rgba(242, 101, 176, 0.28) !important;
}
.wb-success__title {
  margin: 0 !important;
  font-family: var(--font-headline) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}
.wb-success__body {
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--fg-on-light-2) !important;
  line-height: 1.55 !important;
}
.wb-success__body strong {
  color: var(--fg-on-light-1) !important;
}
.wb-success__actions {
  display: flex; flex-direction: column; gap: 10px !important;
  margin-top: 4px !important;
}
.wb-success__btn {
  font-family: var(--font-headline) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px !important;
  border: 1.5px solid var(--k-ink-1000) !important;
  background: var(--k-ink-1000) !important;
  color: var(--k-white) !important;
  transition: all 200ms var(--ease-out) !important;
}
.wb-success__btn:hover {
  background: transparent !important;
  color: var(--k-ink-1000) !important;
}
.wb-success__btn--ghost {
  background: transparent !important;
  color: var(--k-ink-1000) !important;
  border-color: rgba(10, 6, 18, 0.16) !important;
}
.wb-success__btn--ghost:hover {
  border-color: var(--k-ink-1000) !important;
  background: rgba(10, 6, 18, 0.04) !important;
}

/* ============================================================
   css/learn.css
   ============================================================ */

/* ===========================================================
   Section: What you'll learn
   =========================================================== */

.wb-learn {
  background: var(--bg-light) !important;
  color: var(--fg-on-light-1) !important;
  padding: 120px 40px !important;
}
@media (min-width: 1600px) { .wb-learn { padding: 140px 56px; } }
@media (min-width: 1900px) { .wb-learn { padding: 160px 72px; } }
@media (min-width: 2200px) { .wb-learn { padding: 180px 96px; } }
@media (min-width: 2500px) { .wb-learn { padding: 200px 120px; } }
@media (min-width: 2700px) { .wb-learn { padding: 220px 140px; } }
.wb-learn__inner {
  max-width: 1480px !important;
  margin: 0 auto !important;
}
@media (min-width: 1900px) { .wb-learn__inner { max-width: 1840px; } }
@media (min-width: 2200px) { .wb-learn__inner { max-width: 2080px; } }
@media (min-width: 2500px) { .wb-learn__inner { max-width: 2400px; } }
@media (min-width: 2700px) { .wb-learn__inner { max-width: 2560px; } }
.wb-learn__lede {
  max-width: 620px !important;
  margin: 0 0 56px !important;
}

.wb-learn__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: 1px !important;
  background: var(--border-on-light) !important;
  border: 1px solid var(--border-on-light) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}
.wb-learn__card {
  background: var(--bg-light) !important;
  padding: clamp(28px, 2.2vw, 40px) clamp(24px, 2vw, 36px) !important;
  display: flex; flex-direction: column; gap: 12px !important;
  transition: background 240ms var(--ease-out) !important;
}
.wb-learn__card:hover {
  background: var(--k-ink-50) !important;
}
.wb-learn__kicker {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  letter-spacing: 0.32em !important;
  color: var(--accent-hot) !important;
}
.wb-learn__title {
  margin: 0 !important;
  font-family: var(--font-headline) !important;
  font-weight: 700 !important;
  font-size: clamp(19px, 1.2vw, 22px) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.005em !important;
  color: var(--fg-on-light-1) !important;
}
.wb-learn__body {
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: clamp(14px, 0.9vw, 16px) !important;
  line-height: 1.6 !important;
  color: var(--fg-on-light-2) !important;
}

/* ============================================================
   css/who.css
   ============================================================ */

/* ===========================================================
   Section: Who this is for
   =========================================================== */

.wb-who {
  background: var(--bg-light-2) !important;
  color: var(--fg-on-light-1) !important;
  padding: 120px 40px !important;
}
@media (min-width: 1600px) { .wb-who { padding: 140px 56px; } }
@media (min-width: 1900px) { .wb-who { padding: 160px 72px; } }
@media (min-width: 2200px) { .wb-who { padding: 180px 96px; } }
@media (min-width: 2500px) { .wb-who { padding: 200px 120px; } }
@media (min-width: 2700px) { .wb-who { padding: 220px 140px; } }
.wb-who__inner {
  max-width: 1480px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
  gap: 64px !important;
  align-items: start !important;
}
@media (min-width: 1900px) { .wb-who__inner { max-width: 1840px; gap: 96px; } }
@media (min-width: 2200px) { .wb-who__inner { max-width: 2080px; gap: 120px; } }
@media (min-width: 2500px) { .wb-who__inner { max-width: 2400px; gap: 160px; } }
@media (min-width: 2700px) { .wb-who__inner { max-width: 2560px; gap: 180px; } }
@media (max-width: 880px) {
  .wb-who__inner { grid-template-columns: 1fr; }
}

.wb-who__lede {
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 17px !important;
  color: var(--fg-on-light-2) !important;
  max-width: 520px !important;
  line-height: 1.6 !important;
}

.wb-who__notpanel {
  margin-top: 36px !important;
  padding: 24px !important;
  background: var(--bg-light) !important;
  border-radius: 20px !important;
  border: 1px solid var(--border-on-light) !important;
}
.wb-who__notpanel h5 {
  margin: 0 0 14px !important;
  font-family: var(--font-headline) !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--fg-on-light-3) !important;
}
.wb-who__notlist {
  list-style: none !important;
  padding: 0; margin: 0 !important;
  display: flex; flex-direction: column; gap: 10px !important;
}
.wb-who__notlist li {
  display: flex; gap: 12px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--fg-on-light-2) !important;
}
.wb-who__notdash {
  flex-shrink: 0 !important;
  margin-top: 7px !important;
  width: 16px; height: 1px !important;
  background: var(--fg-on-light-3) !important;
}

/* You-are column ------------------------------------------- */
.wb-who__right {
  display: flex; flex-direction: column; gap: 14px !important;
}
.wb-who__rightlabel {
  margin: 0 0 4px !important;
  font-family: var(--font-headline) !important;
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--fg-on-light-3) !important;
}
.wb-who__row {
  display: flex; gap: 18px !important;
  padding: 18px 22px !important;
  background: var(--bg-light) !important;
  border-radius: 16px !important;
  border: 1px solid var(--border-on-light) !important;
  align-items: flex-start !important;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out) !important;
}
.wb-who__row:hover {
  transform: translateX(4px) !important;
  box-shadow: 0 8px 24px rgba(10, 6, 18, 0.06) !important;
}
.wb-who__check {
  flex-shrink: 0 !important;
  width: 28px; height: 28px !important;
  border-radius: 999px !important;
  background: var(--k-ink-1000) !important;
  color: var(--k-cyan-400) !important;
  display: inline-flex; align-items: center; justify-content: center !important;
}
.wb-who__text {
  font-family: var(--font-body) !important;
  font-size: clamp(16px, 1vw, 18px) !important;
  color: var(--fg-on-light-1) !important;
  line-height: 1.5 !important;
}

/* ============================================================
   css/bonus.css
   ============================================================ */

/* ===========================================================
   Section: Show-up Bonus (dark)
   =========================================================== */

.wb-bonus {
  position: relative !important;
  overflow: hidden !important;
  background: var(--k-ink-1000) !important;
  color: var(--fg-1) !important;
  padding: 120px 40px !important;
}
@media (min-width: 1600px) { .wb-bonus { padding: 140px 56px; } }
@media (min-width: 1900px) { .wb-bonus { padding: 160px 72px; } }
@media (min-width: 2200px) { .wb-bonus { padding: 180px 96px; } }
@media (min-width: 2500px) { .wb-bonus { padding: 200px 120px; } }
@media (min-width: 2700px) { .wb-bonus { padding: 220px 140px; } }
.wb-bonus__bg {
  position: absolute; inset: 0 !important;
  width: 100%; height: 100% !important;
  pointer-events: none !important;
}
.wb-bonus__inner {
  position: relative !important;
  max-width: 1480px; margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  gap: 64px !important;
  align-items: center !important;
}
@media (min-width: 1600px) { .wb-bonus__inner { max-width: 1640px; gap: 96px; } }
@media (min-width: 1900px) { .wb-bonus__inner { max-width: 1840px; gap: 120px; } }
@media (min-width: 2200px) { .wb-bonus__inner { max-width: 2080px; gap: 140px; } }
@media (min-width: 2500px) { .wb-bonus__inner { max-width: none; gap: 180px; } }
@media (min-width: 2700px) { .wb-bonus__inner { max-width: none; gap: 200px; } }
@media (max-width: 880px) {
  .wb-bonus__inner { grid-template-columns: 1fr; }
}

.wb-bonus__tag {
  display: inline-flex; align-items: center; gap: 10px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(77, 221, 255, 0.10) !important;
  border: 1px solid rgba(77, 221, 255, 0.32) !important;
  margin-bottom: 20px !important;
}
.wb-bonus__tag i {
  color: var(--k-cyan-400) !important;
}
.wb-bonus__tag span {
  font-family: var(--font-headline) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--k-cyan-400) !important;
}

.wb-bonus__h2 {
  margin: 0 0 20px !important;
  font-family: var(--font-headline) !important;
  font-weight: 700 !important;
  font-size: clamp(32px, 3.4vw, 64px) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  line-height: 1.1 !important;
  color: var(--fg-1) !important;
}
.wb-bonus__h2 .grad {
  color: transparent !important;
  background: var(--k-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.wb-bonus__lede {
  margin: 0 0 28px !important;
  font-family: var(--font-body) !important;
  font-size: clamp(17px, 1.05vw, 20px) !important;
  color: var(--fg-2) !important;
  line-height: 1.6 !important;
  max-width: 540px !important;
}
.wb-bonus__ctarow {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap !important;
}
.wb-bonus__note {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--fg-3) !important;
}

.wb-bonus__kit {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
.wb-bonus__card {
  padding: 22px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border-1) !important;
  display: flex; flex-direction: column; gap: 10px !important;
  transition: background 240ms var(--ease-out), border-color 240ms var(--ease-out) !important;
}
.wb-bonus__card:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
}
.wb-bonus__card--wide { grid-column: span 2; }
.wb-bonus__cardicon {
  width: 36px; height: 36px !important;
  border-radius: 10px !important;
  background: rgba(77, 221, 255, 0.12) !important;
  color: var(--k-cyan-400) !important;
  display: inline-flex; align-items: center; justify-content: center !important;
}
.wb-bonus__cardtitle {
  margin: 0 !important;
  font-family: var(--font-headline) !important;
  font-size: clamp(15px, 1vw, 17px) !important;
  font-weight: 700 !important;
  color: var(--fg-1) !important;
}
.wb-bonus__cardnote {
  font-family: var(--font-body) !important;
  font-size: clamp(13px, 0.85vw, 15px) !important;
  color: var(--fg-2) !important;
}

/* "This is for you if you're…" list on dark bonus bg ------- */
.wb-bonus__forlist {
  display: flex; flex-direction: column; gap: 14px !important;
}
.wb-bonus__forlist-label {
  margin: 0 0 4px !important;
  font-family: var(--font-headline) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--fg-3) !important;
}
.wb-bonus__forrow {
  display: flex; gap: 18px !important;
  padding: 20px 24px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  align-items: flex-start !important;
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out), border-color 200ms var(--ease-out) !important;
}
.wb-bonus__forrow:hover {
  transform: translateX(4px) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
}
.wb-bonus__forcheck {
  flex-shrink: 0 !important;
  width: 28px; height: 28px !important;
  border-radius: 999px !important;
  background: rgba(77, 221, 255, 0.14) !important;
  color: var(--k-cyan-400) !important;
  display: inline-flex; align-items: center; justify-content: center !important;
}
.wb-bonus__fortext {
  font-family: var(--font-body) !important;
  font-size: clamp(16px, 1vw, 18px) !important;
  color: var(--fg-1) !important;
  line-height: 1.5 !important;
}

/* ============================================================
   css/proof.css
   ============================================================ */

/* ===========================================================
   Section: Social proof
   =========================================================== */

.wb-proof {
  background: var(--bg-light) !important;
  color: var(--fg-on-light-1) !important;
  padding: 120px 40px !important;
}
@media (min-width: 1600px) { .wb-proof { padding: 140px 56px; } }
@media (min-width: 1900px) { .wb-proof { padding: 160px 72px; } }
@media (min-width: 2200px) { .wb-proof { padding: 180px 96px; } }
@media (min-width: 2500px) { .wb-proof { padding: 200px 120px; } }
@media (min-width: 2700px) { .wb-proof { padding: 220px 140px; } }
.wb-proof__inner {
  max-width: 1480px; margin: 0 auto !important;
}
@media (min-width: 1900px) { .wb-proof__inner { max-width: 1840px; } }
@media (min-width: 2200px) { .wb-proof__inner { max-width: 2080px; } }
@media (min-width: 2500px) { .wb-proof__inner { max-width: 2400px; } }
@media (min-width: 2700px) { .wb-proof__inner { max-width: 2560px; } }
.wb-proof__head {
  display: flex; align-items: end; justify-content: space-between !important;
  flex-wrap: wrap; gap: 24px !important;
  margin-bottom: 56px !important;
}
.wb-proof__title {
  margin: 0 !important;
  font-family: var(--font-headline) !important;
  font-weight: 700 !important;
  font-size: clamp(30px, 3vw, 56px) !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  line-height: 1.15 !important;
  max-width: 920px !important;
}

.wb-proof__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 20px !important;
}
.wb-proof__card {
  margin: 0 !important;
  padding: 28px !important;
  border-radius: 24px !important;
  background: var(--bg-light) !important;
  border: 1px solid var(--border-on-light) !important;
  display: flex; flex-direction: column; gap: 18px !important;
  position: relative !important;
  overflow: hidden !important;
}
.wb-proof__strip {
  position: absolute; top: 0; left: 0; right: 0 !important;
  height: 3px !important;
}
.wb-proof__quoteicon {
  width: 22px; height: 22px !important;
  transform: scaleX(-1) !important;
}
.wb-proof__quote {
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: clamp(16px, 1.05vw, 19px) !important;
  line-height: 1.55 !important;
  color: var(--fg-on-light-1) !important;
}
.wb-proof__caption {
  display: flex; align-items: center; gap: 12px !important;
  margin-top: auto !important;
}
.wb-proof__avatar {
  width: 40px; height: 40px !important;
  border-radius: 999px !important;
  display: inline-flex; align-items: center; justify-content: center !important;
  font-family: var(--font-headline) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--k-ink-1000) !important;
}
.wb-proof__who {
  font-family: var(--font-headline) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--fg-on-light-1) !important;
}
.wb-proof__role {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--fg-on-light-3) !important;
}

.wb-stats {
  margin-top: 56px !important;
  padding: 32px 40px !important;
  border-radius: 24px !important;
  background: var(--bg-light-2) !important;
  border: 1px solid var(--border-on-light) !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 32px !important;
  align-items: center !important;
}
.wb-stats__n {
  font-family: var(--font-display) !important;
  font-size: clamp(36px, 2.4vw, 52px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--fg-on-light-1) !important;
}
.wb-stats__label {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--fg-on-light-2) !important;
}

/* ============================================================
   css/faq.css
   ============================================================ */

/* ===========================================================
   Section: FAQ
   =========================================================== */

.wb-faq {
  background: var(--bg-light-2) !important;
  color: var(--fg-on-light-1) !important;
  padding: 120px 40px !important;
}
@media (min-width: 1600px) { .wb-faq { padding: 140px 56px; } }
@media (min-width: 1900px) { .wb-faq { padding: 160px 72px; } }
@media (min-width: 2200px) { .wb-faq { padding: 180px 96px; } }
@media (min-width: 2500px) { .wb-faq { padding: 200px 120px; } }
@media (min-width: 2700px) { .wb-faq { padding: 220px 140px; } }
.wb-faq__inner {
  max-width: 1080px; margin: 0 auto !important;
}
@media (min-width: 1900px) { .wb-faq__inner { max-width: 1320px; } }
@media (min-width: 2200px) { .wb-faq__inner { max-width: 1560px; } }
@media (min-width: 2500px) { .wb-faq__inner { max-width: 1840px; } }
@media (min-width: 2700px) { .wb-faq__inner { max-width: 2000px; } }
.wb-faq__list {
  margin-top: 48px !important;
  background: var(--bg-light) !important;
  border-radius: 24px !important;
  border: 1px solid var(--border-on-light) !important;
  overflow: hidden !important;
}
.wb-faq__item + .wb-faq__item {
  border-top: 1px solid var(--border-on-light) !important;
}
.wb-faq__q {
  width: 100% !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  padding: clamp(22px, 1.5vw, 28px) clamp(28px, 2vw, 36px) !important;
  display: flex; align-items: center; justify-content: space-between; gap: 24px !important;
  font-family: var(--font-headline) !important;
  font-size: clamp(17px, 1.1vw, 20px) !important;
  font-weight: 600 !important;
  color: var(--fg-on-light-1) !important;
}
.wb-faq__plus {
  width: 32px; height: 32px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border-on-light) !important;
  background: transparent !important;
  color: var(--fg-on-light-1) !important;
  display: inline-flex; align-items: center; justify-content: center !important;
  transition: transform 240ms var(--ease-out), background 240ms var(--ease-out), color 240ms var(--ease-out) !important;
  flex-shrink: 0 !important;
}
.wb-faq__item.is-open .wb-faq__plus {
  background: var(--k-ink-1000) !important;
  color: var(--k-white) !important;
  transform: rotate(45deg) !important;
}
.wb-faq__a {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 320ms var(--ease-out) !important;
}
.wb-faq__item.is-open .wb-faq__a {
  max-height: 400px !important;
}
.wb-faq__a-inner {
  padding: 0 clamp(56px, 4vw, 80px) clamp(24px, 1.6vw, 32px) clamp(28px, 2vw, 36px) !important;
  font-family: var(--font-body) !important;
  font-size: clamp(15px, 1vw, 17px) !important;
  line-height: 1.6 !important;
  color: var(--fg-on-light-2) !important;
}

/* ============================================================
   css/zahra.css
   ============================================================ */

/* ===========================================================
   Section: Note from Zahra
   =========================================================== */

.wb-zahra {
  position: relative !important;
  overflow: hidden !important;
  background: var(--bg-light) !important;
  color: var(--fg-on-light-1) !important;
  padding: 120px 40px !important;
}
@media (min-width: 1600px) { .wb-zahra { padding: 140px 56px; } }
@media (min-width: 1900px) { .wb-zahra { padding: 160px 72px; } }
@media (min-width: 2200px) { .wb-zahra { padding: 180px 96px; } }
@media (min-width: 2500px) { .wb-zahra { padding: 200px 120px; } }
@media (min-width: 2700px) { .wb-zahra { padding: 220px 140px; } }
.wb-zahra__bg {
  position: absolute; inset: 0 !important;
  width: 100%; height: 100% !important;
  pointer-events: none !important;
}
.wb-zahra__inner {
  position: relative !important;
  max-width: 1280px; margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
  gap: 64px !important;
  align-items: center !important;
}
@media (min-width: 1600px) { .wb-zahra__inner { max-width: 1480px; gap: 96px; } }
@media (min-width: 1900px) { .wb-zahra__inner { max-width: 1680px; gap: 120px; } }
@media (min-width: 2200px) { .wb-zahra__inner { max-width: 1900px; gap: 140px; } }
@media (min-width: 2500px) { .wb-zahra__inner { max-width: 2240px; gap: 180px; } }
@media (min-width: 2700px) { .wb-zahra__inner { max-width: 2400px; gap: 200px; } }
@media (max-width: 880px) {
  .wb-zahra__inner { grid-template-columns: 1fr; }
}

.wb-zahra__portrait {
  position: relative !important;
  aspect-ratio: 4 / 5 !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background: var(--k-ink-100) !important;
}
.wb-zahra__portrait img {
  width: 100%; height: 100% !important;
  object-fit: cover !important;
  filter: saturate(0.88) contrast(1.02) !important;
}
.wb-zahra__chip {
  position: absolute; bottom: 24px; left: 24px !important;
  width: 96px; height: 96px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 4px solid var(--bg-light) !important;
  background: linear-gradient(135deg, #F265B0, #EFBA6C) !important;
  box-shadow: 0 10px 30px rgba(10, 6, 18, 0.18) !important;
}
.wb-zahra__chip img {
  width: 100%; height: 100% !important;
  object-fit: cover !important;
  mix-blend-mode: luminosity !important;
  opacity: 0.85 !important;
}

.wb-zahra__copy {
  display: flex; flex-direction: column; gap: 20px !important;
}
.wb-zahra__h2 {
  margin: 0 !important;
  font-family: var(--font-headline) !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 2.8vw, 52px) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  line-height: 1.2 !important;
}
.wb-zahra__h2 .muted { color: var(--fg-on-light-3); }
.wb-zahra__body {
  display: flex; flex-direction: column; gap: 16px !important;
  font-family: var(--font-body) !important;
  font-size: clamp(16px, 1.05vw, 19px) !important;
  line-height: 1.65 !important;
  color: var(--fg-on-light-2) !important;
  max-width: 640px !important;
}
.wb-zahra__body p { margin: 0; }
.wb-zahra__body .accent {
  color: var(--fg-on-light-1) !important;
  font-weight: 600 !important;
}
.wb-zahra__sig {
  display: flex; align-items: center; gap: 18px !important;
  margin-top: 8px !important;
}
.wb-zahra__signame {
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: var(--fg-on-light-1) !important;
}
.wb-zahra__sigrule {
  width: 1px; height: 24px !important;
  background: var(--border-on-light) !important;
}
.wb-zahra__sigrole {
  font-family: var(--font-headline) !important;
  font-size: 12px !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--fg-on-light-3) !important;
}