/* =============================================================
   ZANKETH — "Start Your Business" section
   Every class is prefixed with "syb-" so it will never clash
   with the CSS already on your site.
   Light + dark themes, fully responsive (mobile / tablet / pc).
   ============================================================= */

/* ---------- 1. THEME TOKENS ---------------------------------- */

.syb {
  /* fixed brand accents (same in both themes) */
  --syb-cyan:    #22d3ee;
  --syb-blue:    #3b82f6;
  --syb-indigo:  #6366f1;
  --syb-purple:  #a855f7;
  --syb-fuchsia: #d946ef;
  --syb-green:   #22c55e;
  --syb-amber:   #f59e0b;

  /* DARK (default) */
  --syb-bg: transparent;
  --syb-text:          #ffffff;
  --syb-muted:         #a3b2d1;
  --syb-faint:         #7c8cae;
  --syb-surface:       rgba(13, 24, 54, 0.72);
  --syb-surface-2:     rgba(8, 16, 40, 0.9);
  --syb-border:        rgba(99, 132, 190, 0.28);
  --syb-border-strong: rgba(99, 132, 190, 0.45);
  --syb-chip-bg:       rgba(13, 24, 54, 0.8);

  --syb-api-bg:     linear-gradient(135deg, rgba(14, 32, 78, 0.95) 0%, rgba(7, 15, 42, 0.95) 55%, rgba(10, 22, 58, 0.95) 100%);
  --syb-api-border: rgba(56, 189, 248, 0.3);
  --syb-res-bg:     linear-gradient(135deg, rgba(56, 26, 104, 0.85) 0%, rgba(24, 16, 62, 0.92) 55%, rgba(40, 20, 88, 0.85) 100%);
  --syb-res-border: rgba(168, 85, 247, 0.34);

  --syb-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
  --syb-glow-a: 0 0 44px rgba(34, 211, 238, 0.16);
  --syb-glow-r: 0 0 44px rgba(168, 85, 247, 0.18);

  --syb-dash-bg:     #0a1230;
  --syb-dash-panel:  rgba(255, 255, 255, 0.05);
  --syb-dash-border: rgba(148, 163, 184, 0.18);
  --syb-dash-text:   #eef2ff;
  --syb-dash-muted:  #93a3c4;
}

/* LIGHT — applied by attribute, or automatically when the OS /
   your site is in light mode and the section is set to "auto". */
.syb[data-syb-theme="light"],
html[data-theme="light"]  .syb[data-syb-theme="auto"],
body.light-mode           .syb[data-syb-theme="auto"],
body.light                .syb[data-syb-theme="auto"] {
  --syb-bg: transparent;
  --syb-text:          #0d1730;
  --syb-muted:         #4f5d78;
  --syb-faint:         #6b7a96;
  --syb-surface:       #ffffff;
  --syb-surface-2:     #f2f6fd;
  --syb-border:        rgba(15, 32, 70, 0.12);
  --syb-border-strong: rgba(15, 32, 70, 0.2);
  --syb-chip-bg:       #ffffff;

  --syb-api-bg:     linear-gradient(135deg, #eaf2ff 0%, #f8fbff 55%, #e9f4ff 100%);
  --syb-api-border: rgba(37, 99, 235, 0.2);
  --syb-res-bg:     linear-gradient(135deg, #f6edff 0%, #fdfaff 55%, #f4ecff 100%);
  --syb-res-border: rgba(147, 51, 234, 0.2);

  --syb-shadow: 0 20px 50px rgba(20, 40, 90, 0.12);
  --syb-glow-a: 0 0 0 rgba(0, 0, 0, 0);
  --syb-glow-r: 0 0 0 rgba(0, 0, 0, 0);

  --syb-dash-bg:     #ffffff;
  --syb-dash-panel:  #f5f8fe;
  --syb-dash-border: rgba(15, 32, 70, 0.1);
  --syb-dash-text:   #0d1730;
  --syb-dash-muted:  #66748f;
}

@media (prefers-color-scheme: light) {
  .syb[data-syb-theme="auto"] {
    --syb-bg: transparent;
    --syb-text:          #0d1730;
    --syb-muted:         #4f5d78;
    --syb-faint:         #6b7a96;
    --syb-surface:       #ffffff;
    --syb-surface-2:     #f2f6fd;
    --syb-border:        rgba(15, 32, 70, 0.12);
    --syb-border-strong: rgba(15, 32, 70, 0.2);
    --syb-chip-bg:       #ffffff;
    --syb-api-bg:        linear-gradient(135deg, #eaf2ff 0%, #f8fbff 55%, #e9f4ff 100%);
    --syb-api-border:    rgba(37, 99, 235, 0.2);
    --syb-res-bg:        linear-gradient(135deg, #f6edff 0%, #fdfaff 55%, #f4ecff 100%);
    --syb-res-border:    rgba(147, 51, 234, 0.2);
    --syb-shadow:        0 20px 50px rgba(20, 40, 90, 0.12);
    --syb-glow-a:        0 0 0 rgba(0, 0, 0, 0);
    --syb-glow-r:        0 0 0 rgba(0, 0, 0, 0);
    --syb-dash-bg:       #ffffff;
    --syb-dash-panel:    #f5f8fe;
    --syb-dash-border:   rgba(15, 32, 70, 0.1);
    --syb-dash-text:     #0d1730;
    --syb-dash-muted:    #66748f;
  }
}
/* keep dark when the site is explicitly dark, even if the OS is light */
@media (prefers-color-scheme: light) {
  html[data-theme="dark"] .syb[data-syb-theme="auto"],
  body.dark-mode          .syb[data-syb-theme="auto"],
  body.dark               .syb[data-syb-theme="auto"] {
    --syb-bg: transparent;
    --syb-text:          #ffffff;
    --syb-muted:         #a3b2d1;
    --syb-faint:         #7c8cae;
    --syb-surface:       rgba(13, 24, 54, 0.72);
    --syb-surface-2:     rgba(8, 16, 40, 0.9);
    --syb-border:        rgba(99, 132, 190, 0.28);
    --syb-border-strong: rgba(99, 132, 190, 0.45);
    --syb-chip-bg:       rgba(13, 24, 54, 0.8);
    --syb-api-bg:        linear-gradient(135deg, rgba(14, 32, 78, 0.95) 0%, rgba(7, 15, 42, 0.95) 55%, rgba(10, 22, 58, 0.95) 100%);
    --syb-api-border:    rgba(56, 189, 248, 0.3);
    --syb-res-bg:        linear-gradient(135deg, rgba(56, 26, 104, 0.85) 0%, rgba(24, 16, 62, 0.92) 55%, rgba(40, 20, 88, 0.85) 100%);
    --syb-res-border:    rgba(168, 85, 247, 0.34);
    --syb-shadow:        0 26px 70px rgba(0, 0, 0, 0.55);
    --syb-glow-a:        0 0 44px rgba(34, 211, 238, 0.16);
    --syb-glow-r:        0 0 44px rgba(168, 85, 247, 0.18);
    --syb-dash-bg:       #0a1230;
    --syb-dash-panel:    rgba(255, 255, 255, 0.05);
    --syb-dash-border:   rgba(148, 163, 184, 0.18);
    --syb-dash-text:     #eef2ff;
    --syb-dash-muted:    #93a3c4;
  }
}

/* ---------- 2. SHELL ----------------------------------------- */

.syb {
  position: relative;
  overflow: hidden;
  padding: 72px 20px 60px;
  background: var(--syb-bg);
  color: var(--syb-text);
  
  -webkit-font-smoothing: antialiased;
}
.syb *,
.syb *::before,
.syb *::after { box-sizing: border-box; }

.syb::before,
.syb::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.55;
  pointer-events: none;
}
.syb::before { top: -220px; left: -160px;  background: rgba(37, 99, 235, 0.35); }
.syb::after  { bottom: -260px; right: -160px; background: rgba(147, 51, 234, 0.3); }
.syb[data-syb-theme="light"]::before,
.syb[data-syb-theme="light"]::after,
html[data-theme="light"] .syb[data-syb-theme="auto"]::before,
html[data-theme="light"] .syb[data-syb-theme="auto"]::after,
body.light-mode .syb[data-syb-theme="auto"]::before,
body.light-mode .syb[data-syb-theme="auto"]::after,
body.light .syb[data-syb-theme="auto"]::before,
body.light .syb[data-syb-theme="auto"]::after { opacity: 0.18; }

.syb__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

/* ---------- 3. SECTION HEADING -------------------------------- */

.syb__head { text-align: center; }

.syb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--syb-cyan);
}
.syb-eyebrow::before,
.syb-eyebrow::after {
  content: "";
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--syb-cyan));
}
.syb-eyebrow::after { background: linear-gradient(270deg, transparent, var(--syb-cyan)); }

.syb__title {
  font-family: 'TitleFont', 'Cal Sans', sans-serif;
  margin: 16px 0 0;
  font-size: clamp(30px, 4.4vw, 47px);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.syb__title em {
  font-style: normal;
  background: linear-gradient(to right, #3B82F6, #8B5CF6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* the heading reads "Start Your Top-up Business" on wide screens
   and "Start Your Business" on phones, exactly like the mockups */
.syb__title .syb-only-desktop { display: inline; }

.syb__lead {
  margin: 14px auto 0;
  max-width: 660px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--syb-muted);
}

/* trust strip under the heading */
.syb-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 46px;
  margin-top: 30px;
}
.syb-trust__item {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
}
.syb-trust__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  border: 1px solid var(--syb-border);
  background: var(--syb-surface);
  color: var(--syb-cyan);
}
.syb-trust__icon svg { width: 21px; height: 21px; }
.syb-trust__item:nth-child(2) .syb-trust__icon { color: var(--syb-blue); }
.syb-trust__item:nth-child(3) .syb-trust__icon { color: var(--syb-indigo); }
.syb-trust__t { font-size: 14.5px; font-weight: 600; }
.syb-trust__s { font-size: 12.5px; color: var(--syb-faint); margin-top: 1px; }

/* ---------- 4. PANELS ----------------------------------------- */

.syb-panel {
  position: relative;
  margin-top: 34px;
  padding: 38px;
  border-radius: 30px;
  border: 1px solid var(--syb-api-border);
  background: var(--syb-api-bg);
  box-shadow: var(--syb-shadow), var(--syb-glow-a);
  overflow: hidden;
}
.syb-panel--reseller {
  border-color: var(--syb-res-border);
  background: var(--syb-res-bg);
  box-shadow: var(--syb-shadow), var(--syb-glow-r);
}

.syb-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
  gap: 34px;
  align-items: center;
}

.syb-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: rgba(34, 211, 238, 0.12);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #67e8f9;
}
.syb-tag svg { width: 13px; height: 13px; }
.syb-panel--reseller .syb-tag {
  border-color: rgba(192, 132, 252, 0.45);
  background: rgba(168, 85, 247, 0.14);
  color: #e9d5ff;
}
.syb[data-syb-theme="light"] .syb-tag,
html[data-theme="light"] .syb[data-syb-theme="auto"] .syb-tag,
body.light-mode .syb[data-syb-theme="auto"] .syb-tag,
body.light .syb[data-syb-theme="auto"] .syb-tag { color: #0369a1; }
.syb[data-syb-theme="light"] .syb-panel--reseller .syb-tag,
html[data-theme="light"] .syb[data-syb-theme="auto"] .syb-panel--reseller .syb-tag,
body.light-mode .syb[data-syb-theme="auto"] .syb-panel--reseller .syb-tag,
body.light .syb[data-syb-theme="auto"] .syb-panel--reseller .syb-tag { color: #7e22ce; }

.syb-panel__title {
  margin: 18px 0 0;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.syb-panel__title em {
  font-style: normal;
  background: linear-gradient(92deg, #38bdf8, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.syb-panel--reseller .syb-panel__title em {
  background: linear-gradient(92deg, #c084fc, #e879f9);
  -webkit-background-clip: text;
  background-clip: text;
}

.syb-panel__text {
  margin: 16px 0 0;
  max-width: 460px;
  font-size: 15px;
  line-height: 1.68;
  color: var(--syb-muted);
}
.syb-panel__text strong { color: var(--syb-text); font-weight: 600; }

/* feature pills */
.syb-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.syb-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--syb-border);
  background: var(--syb-chip-bg);
  font-size: 13px;
  font-weight: 500;
  color: var(--syb-text);
  white-space: nowrap;
}
.syb-pill svg { width: 16px; height: 16px; flex: none; }
.syb-pill:nth-child(1) svg { color: var(--syb-cyan); }
.syb-pill:nth-child(2) svg { color: var(--syb-blue); }
.syb-pill:nth-child(3) svg { color: var(--syb-indigo); }
.syb-pill:nth-child(4) svg { color: var(--syb-purple); }

/* buttons */
.syb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}
.syb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.syb-btn svg { width: 16px; height: 16px; }
.syb-btn:active { transform: translateY(1px); }
.syb-btn:focus-visible { outline: 2px solid var(--syb-cyan); outline-offset: 3px; }

.syb-btn--primary {
  min-width: 226px;
  background: linear-gradient(92deg, #22d3ee 0%, #3b82f6 100%);
  color: #fff;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.4);
}
.syb-btn--primary:hover { filter: brightness(1.08); }
.syb-panel--reseller .syb-btn--primary {
  background: linear-gradient(92deg, #a855f7 0%, #d946ef 100%);
  box-shadow: 0 12px 30px rgba(168, 85, 247, 0.4);
}
.syb-btn--ghost {
  border-color: var(--syb-border-strong);
  background: var(--syb-chip-bg);
  color: var(--syb-text);
}
.syb-btn--ghost:hover { border-color: var(--syb-cyan); }
.syb-panel--reseller .syb-btn--ghost:hover { border-color: var(--syb-purple); }

/* proof line under the buttons */
.syb-proof {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 26px;
}
.syb-avatars { display: flex; }
.syb-avatars span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 2px solid var(--syb-surface-2);
  background-size: cover;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.syb-avatars span + span { margin-left: -12px; }
.syb-avatars .syb-avatars__more {
  background: rgba(59, 130, 246, 0.9);
}
.syb-proof__t { font-size: 14px; font-weight: 600; }
.syb-proof__s { font-size: 12.5px; color: var(--syb-faint); margin-top: 1px; }

/* stats row (reseller panel) */
.syb-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 34px;
  margin-top: 28px;
}
.syb-stat { display: flex; align-items: center; gap: 12px; }
.syb-stat__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--syb-border);
  background: var(--syb-chip-bg);
  color: var(--syb-purple);
}
.syb-stat__icon svg { width: 18px; height: 18px; }
.syb-stat:nth-child(2) .syb-stat__icon { color: var(--syb-cyan); }
.syb-stat:nth-child(3) .syb-stat__icon { color: var(--syb-blue); }
.syb-stat__v { font-size: 17px; font-weight: 700; line-height: 1.1; }
.syb-stat__l { font-size: 12.5px; color: var(--syb-faint); margin-top: 2px; }

/* ---------- 5. CODE WINDOW ------------------------------------ */

.syb-visual { position: relative; }

.syb-code {
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(56, 189, 248, 0.26);
  background: linear-gradient(160deg, #0a1636 0%, #060d26 100%);
  box-shadow: 0 20px 50px rgba(2, 8, 28, 0.55);
  overflow: hidden;
}
.syb-code__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.syb-code__tab {
  padding: 9px 16px 11px;
  border: 0;
  background: none;
  border-radius: 10px 10px 0 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: #8ba0c8;
  cursor: pointer;
}
.syb-code__tab.is-active {
  color: #67e8f9;
  background: rgba(34, 211, 238, 0.1);
  box-shadow: inset 0 -2px 0 #22d3ee;
}
.syb-code__copy {
  margin-left: auto;
  margin-bottom: 6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  cursor: pointer;
}
.syb-code__copy svg { width: 14px; height: 14px; }

.syb-code__body {
  margin: 0;
  padding: 16px 18px 20px;
  overflow-x: auto;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.85;
  color: #dbeafe;
  counter-reset: syb-line;
}
.syb-code__body code { display: block; white-space: pre; }
.syb-code__body .l { display: block; }
.syb-code__body .l::before {
  counter-increment: syb-line;
  content: counter(syb-line);
  display: inline-block;
  width: 22px;
  margin-right: 14px;
  text-align: right;
  color: #4a5d85;
}
.syb-code .v { color: #93c5fd; }  /* variables   */
.syb-code .f { color: #c4b5fd; }  /* functions   */
.syb-code .s { color: #6ee7b7; }  /* strings     */
.syb-code .k { color: #f0abfc; }  /* keywords    */
.syb-code .n { color: #fcd34d; }  /* numbers     */
.syb-code .p { color: #94a3b8; }  /* punctuation */

/* floating status chip on the code window */
.syb-float {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 12px 18px;
  border-radius: 16px;
  border: 1px solid var(--syb-border);
  background: var(--syb-surface-2);
  box-shadow: 0 14px 34px rgba(2, 8, 28, 0.45);
  backdrop-filter: blur(8px);
}
.syb-float__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.16);
  color: var(--syb-green);
}
.syb-float__icon svg { width: 15px; height: 15px; }
.syb-float__t { font-size: 13.5px; font-weight: 600; }
.syb-float__s { font-size: 11.5px; color: var(--syb-faint); margin-top: 1px; }

.syb-float--status {
  position: absolute;
  right: 8px;
  bottom: -22px;
  border-color: rgba(34, 197, 94, 0.4);
}
.syb-float--status .syb-float__t { color: var(--syb-green); }

/* the glowing "API" cube */
.syb-cube {
  position: absolute;
  left: -26px;
  bottom: -30px;
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
  border-radius: 22px;
  background: linear-gradient(145deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.35);
  transform: rotate(-9deg);
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* right rail of feature cards */
.syb-visual__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 22px;
  align-items: center;
}
.syb-rail { display: grid; gap: 14px; }
.syb-rail__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  border-radius: 16px;
  border: 1px solid var(--syb-border);
  background: var(--syb-surface);
}
.syb-rail__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 11px;
  background: rgba(56, 189, 248, 0.14);
  color: var(--syb-cyan);
}
.syb-rail__icon svg { width: 17px; height: 17px; }
.syb-rail__card:nth-child(2) .syb-rail__icon { background: rgba(99, 102, 241, 0.16); color: var(--syb-indigo); }
.syb-rail__card:nth-child(3) .syb-rail__icon { background: rgba(168, 85, 247, 0.16); color: var(--syb-purple); }
.syb-rail__t { font-size: 13.5px; font-weight: 600; }
.syb-rail__s { font-size: 12px; line-height: 1.5; color: var(--syb-faint); margin-top: 3px; }

/* ---------- 6. RESELLER DASHBOARD MOCKUP ---------------------- */

.syb-portal { position: relative; padding-right: 128px; }

.syb-dash {
  display: grid;
  grid-template-columns: 166px minmax(0, 1fr);
  border-radius: 20px;
  border: 1px solid var(--syb-dash-border);
  background: var(--syb-dash-bg);
  color: var(--syb-dash-text);
  box-shadow: 0 22px 54px rgba(2, 8, 28, 0.5);
  overflow: hidden;
}

.syb-dash__side {
  padding: 16px 12px;
  border-right: 1px solid var(--syb-dash-border);
  background: var(--syb-dash-panel);
}
.syb-dash__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.syb-dash__brand svg { width: 17px; height: 17px; color: var(--syb-purple); }

.syb-nav { display: grid; gap: 2px; }
.syb-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 12px;
  color: var(--syb-dash-muted);
  text-decoration: none;
}
.syb-nav a svg { width: 14px; height: 14px; flex: none; }
.syb-nav a .syb-nav__chev { margin-left: auto; opacity: 0.6; }
.syb-nav a:hover { color: var(--syb-dash-text); }
.syb-nav a.is-active {
  background: linear-gradient(92deg, #7c3aed, #a855f7);
  color: #fff;
  font-weight: 600;
}

.syb-dash__main { padding: 16px 18px 18px; }
.syb-dash__hi { font-size: 15px; font-weight: 700; }
.syb-dash__sub { font-size: 11.5px; color: var(--syb-dash-muted); margin-top: 1px; }

.syb-wallet {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(34, 211, 238, 0.3);
  background: linear-gradient(92deg, rgba(34, 211, 238, 0.14), rgba(59, 130, 246, 0.14));
}
.syb-wallet__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: rgba(34, 211, 238, 0.2);
  color: var(--syb-cyan);
}
.syb-wallet__icon svg { width: 16px; height: 16px; }
.syb-wallet__l { font-size: 10.5px; color: var(--syb-dash-muted); }
.syb-wallet__v { font-size: 16px; font-weight: 700; margin-top: 1px; }
.syb-wallet__btn {
  margin-left: auto;
  padding: 8px 15px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(92deg, #22d3ee, #3b82f6);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

.syb-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 11px;
}
.syb-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--syb-dash-border);
  background: var(--syb-dash-panel);
}
.syb-tile svg { width: 15px; height: 15px; flex: none; }
.syb-tile:nth-child(1) svg { color: var(--syb-blue); }
.syb-tile:nth-child(2) svg { color: var(--syb-green); }
.syb-tile:nth-child(3) svg { color: var(--syb-amber); }
.syb-tile__v { font-size: 13px; font-weight: 700; line-height: 1.15; }
.syb-tile__l { font-size: 10px; color: var(--syb-dash-muted); }

.syb-recent { margin-top: 14px; }
.syb-recent__h { font-size: 12px; font-weight: 600; margin-bottom: 7px; }
.syb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--syb-dash-border);
  background: var(--syb-dash-panel);
  font-size: 11.5px;
}
.syb-row + .syb-row { margin-top: 6px; }
.syb-row__id { color: var(--syb-dash-muted); width: 44px; flex: none; }
.syb-row__st {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--syb-green);
  font-weight: 500;
}
.syb-row__st::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* floating pieces around the dashboard */
.syb-crown {
  position: absolute;
  top: -18px;
  right: 0;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 26px;
  background: linear-gradient(150deg, rgba(192, 132, 252, 0.4), rgba(109, 40, 217, 0.5));
  border: 1px solid rgba(216, 180, 254, 0.45);
  box-shadow: 0 18px 44px rgba(126, 34, 206, 0.45);
  transform: rotate(8deg);
  color: #e9d5ff;
}
.syb-crown svg { width: 46px; height: 46px; filter: drop-shadow(0 4px 10px rgba(168, 85, 247, 0.7)); }

.syb-float--profits {
  position: absolute;
  top: 118px;
  right: -6px;
  max-width: 190px;
  border-color: rgba(192, 132, 252, 0.4);
}
.syb-float--profits .syb-float__icon { background: rgba(34, 197, 94, 0.16); color: var(--syb-green); }

.syb-float--grow {
  position: absolute;
  left: -30px;
  bottom: 14px;
  border-color: rgba(192, 132, 252, 0.4);
}
.syb-float--grow .syb-float__icon { background: rgba(168, 85, 247, 0.18); color: var(--syb-purple); }

.syb-script {
  position: absolute;
  right: -2px;
  bottom: 16px;
  max-width: 150px;
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 25px;
  line-height: 1.12;
  color: var(--syb-fuchsia);
  text-align: center;
  transform: rotate(-5deg);
  text-shadow: 0 0 18px rgba(217, 70, 239, 0.45);
}

/* ---------- 7. BOTTOM BAR ------------------------------------- */

.syb-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 30px;
  padding: 20px 24px;
  border-radius: 22px;
  border: 1px solid var(--syb-border);
  background: var(--syb-surface);
}
.syb-foot__item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 190px;
}
.syb-foot__item + .syb-foot__item {
  border-left: 1px solid var(--syb-border);
  padding-left: 26px;
}
.syb-foot__item svg { width: 21px; height: 21px; flex: none; color: var(--syb-cyan); }
.syb-foot__item:nth-child(2) svg { color: var(--syb-green); }
.syb-foot__item:nth-child(3) svg { color: var(--syb-blue); }
.syb-foot__item:nth-child(4) svg { color: var(--syb-purple); }
.syb-foot__t { font-size: 13.5px; font-weight: 600; }
.syb-foot__s { font-size: 12px; color: var(--syb-faint); margin-top: 1px; }

.syb-foot__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  padding: 13px 16px 13px 22px;
  border-radius: 999px;
  background: linear-gradient(92deg, #22d3ee, #3b82f6);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.4);
}
.syb-foot__cta:hover { filter: brightness(1.08); }
.syb-foot__cta span small { display: block; font-size: 12px; font-weight: 400; opacity: 0.9; }
.syb-foot__cta .syb-foot__knob {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}
.syb-foot__cta svg { width: 14px; height: 14px; color: #fff; }

/* ---------- 8. RESPONSIVE ------------------------------------- */

/* tablet / small laptop */
@media (max-width: 1180px) {
  .syb-visual__row { grid-template-columns: minmax(0, 1fr); }
  .syb-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .syb-portal { padding-right: 0; }
  .syb-crown,
  .syb-float--profits,
  .syb-float--grow,
  .syb-script { display: none; }
}

@media (max-width: 1000px) {
  .syb-panel__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .syb-panel__text { max-width: none; }
  .syb-cube { left: auto; right: 14px; bottom: -34px; width: 78px; height: 78px; font-size: 18px; }
}

/* phones — matches the mobile mockup */
@media (max-width: 720px) {
  .syb { padding: 52px 15px 44px; }
  .syb__head { text-align: center; }
  .syb-eyebrow {
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.4);
    background: rgba(34, 211, 238, 0.1);
    letter-spacing: 0.22em;
  }
  .syb-eyebrow::before,
  .syb-eyebrow::after { display: none; }

  .syb__title {
  font-family: 'TitleFont', 'Cal Sans', sans-serif; font-size: 38px; }
  .syb__title .syb-only-desktop { display: none; }
  .syb__title em { display: inline-block; }
  .syb__lead { margin: 14px auto 0; font-size: 14.5px; }

  .syb-trust {
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
    flex-wrap: nowrap;
  }
  .syb-trust__item {
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border-radius: 12px;
    border: 1px solid var(--syb-border);
    background: var(--syb-surface);
  }
  .syb-trust__icon { width: 28px; height: 28px; border-radius: 8px; margin: 0 auto; }
  .syb-trust__icon svg { width: 14px; height: 14px; }
  .syb-trust__t { font-size: 10px; line-height: 1.2; display: block; }
  .syb-trust__s { display: none; }

  .syb-panel { padding: 22px 18px 26px; border-radius: 24px; margin-top: 22px; }
  .syb-panel__title { font-size: 32px; }
  .syb-panel__text { font-size: 14px; }

  .syb-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .syb-pill {
    justify-content: flex-start;
    border-radius: 12px;
    padding: 12px;
    font-size: 12.5px;
    white-space: normal;
  }

  .syb-actions { flex-direction: column; gap: 10px; }
  .syb-btn { width: 100%; }

  .syb-visual { display: none; }          /* code window + dashboard hidden on phones */
  .syb-rail { grid-template-columns: minmax(0, 1fr); }

  .syb-stats {
    gap: 0;
    margin-top: 22px;
    padding: 12px 8px;
    border-radius: 16px;
    border: 1px solid var(--syb-border);
    background: var(--syb-surface);
    display: flex;
    flex-wrap: nowrap;
  }
  .syb-stat { flex: 1 1 0; min-width: 0; flex-direction: column; text-align: center; gap: 6px; justify-content: flex-start; }
  .syb-stat + .syb-stat { border-left: 1px solid var(--syb-border); padding-left: 8px; margin-left: 8px; }
  .syb-stat__icon { width: 28px; height: 28px; border: 0; margin: 0 auto; }
  .syb-stat__icon svg { width: 14px; height: 14px; }
  .syb-stat__v { font-size: 13px; line-height: 1.1; display: block; }
  .syb-stat__l { font-size: 9px; line-height: 1.2; display: block; white-space: normal; }

  .syb-proof { margin-top: 20px; }

  .syb-foot { gap: 10px; padding: 14px; border-radius: 18px; flex-wrap: wrap; }
  .syb-foot__item { flex: 1 1 20%; min-width: 0; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  .syb-foot__item + .syb-foot__item { border-left: 1px solid var(--syb-border); padding-left: 8px; margin-left: 0; }
  .syb-foot__item svg { width: 16px; height: 16px; }
  .syb-foot__t { font-size: 9.5px; line-height: 1.2; }
  .syb-foot__s { display: none; }
  .syb-foot__cta { margin-left: 0; width: 100%; flex: 1 1 100%; justify-content: center; margin-top: 8px; }
}

@media (max-width: 400px) {
  .syb__title {
  font-family: 'TitleFont', 'Cal Sans', sans-serif; font-size: 33px; }
  .syb-trust__s { display: none; }
}

/* ---------- 9. ACCESSIBILITY ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .syb * { transition: none !important; animation: none !important; }
}

/* -------------------------------------------------------------------------
   LIGHT MODE OVERRIDES FOR SYB-CODE
   ------------------------------------------------------------------------- */
html[data-theme="light"] .syb-code,
body.light-mode .syb-code,
body.light .syb-code,
html:not(.dark) .syb-code,
.syb[data-syb-theme="light"] .syb-code {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .syb-code__bar,
body.light-mode .syb-code__bar,
body.light .syb-code__bar,
html:not(.dark) .syb-code__bar,
.syb[data-syb-theme="light"] .syb-code__bar {
  border-color: #e2e8f0;
}
html[data-theme="light"] .syb-code__tab,
body.light-mode .syb-code__tab,
body.light .syb-code__tab,
html:not(.dark) .syb-code__tab,
.syb[data-syb-theme="light"] .syb-code__tab {
  color: #64748b;
}
html[data-theme="light"] .syb-code__tab.is-active,
body.light-mode .syb-code__tab.is-active,
body.light .syb-code__tab.is-active,
html:not(.dark) .syb-code__tab.is-active,
.syb[data-syb-theme="light"] .syb-code__tab.is-active {
  color: #0ea5e9;
  background: rgba(14, 165, 233, 0.1);
  box-shadow: inset 0 -2px 0 #0ea5e9;
}
html[data-theme="light"] .syb-code__copy,
body.light-mode .syb-code__copy,
body.light .syb-code__copy,
html:not(.dark) .syb-code__copy,
.syb[data-syb-theme="light"] .syb-code__copy {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #64748b;
}
html[data-theme="light"] .syb-code__body,
body.light-mode .syb-code__body,
body.light .syb-code__body,
html:not(.dark) .syb-code__body,
.syb[data-syb-theme="light"] .syb-code__body {
  color: #334155;
}
html[data-theme="light"] .syb-code__body .l::before,
body.light-mode .syb-code__body .l::before,
body.light .syb-code__body .l::before,
html:not(.dark) .syb-code__body .l::before,
.syb[data-syb-theme="light"] .syb-code__body .l::before {
  color: #94a3b8;
}
html[data-theme="light"] .syb-code .v,
body.light-mode .syb-code .v,
body.light .syb-code .v,
html:not(.dark) .syb-code .v,
.syb[data-syb-theme="light"] .syb-code .v { color: #0284c7; } /* variables */

html[data-theme="light"] .syb-code .f,
body.light-mode .syb-code .f,
body.light .syb-code .f,
html:not(.dark) .syb-code .f,
.syb[data-syb-theme="light"] .syb-code .f { color: #7c3aed; } /* functions */

html[data-theme="light"] .syb-code .s,
body.light-mode .syb-code .s,
body.light .syb-code .s,
html:not(.dark) .syb-code .s,
.syb[data-syb-theme="light"] .syb-code .s { color: #059669; } /* strings */

html[data-theme="light"] .syb-code .k,
body.light-mode .syb-code .k,
body.light .syb-code .k,
html:not(.dark) .syb-code .k,
.syb[data-syb-theme="light"] .syb-code .k { color: #db2777; } /* keywords */

html[data-theme="light"] .syb-code .n,
body.light-mode .syb-code .n,
body.light .syb-code .n,
html:not(.dark) .syb-code .n,
.syb[data-syb-theme="light"] .syb-code .n { color: #d97706; } /* numbers */

html[data-theme="light"] .syb-code .p,
body.light-mode .syb-code .p,
body.light .syb-code .p,
html:not(.dark) .syb-code .p,
.syb[data-syb-theme="light"] .syb-code .p { color: #64748b; } /* punctuation */