/* ================================================================
   front-page.css  —  startbuddi homepage
   Fonts  : Bricolage Grotesque (--f-head) + DM Sans (--f-body)
   Palette: #1A56DB blue · #059669 mint · #F59E0B gold · #0F1B33 navy
   Rules  : No fa-regular · No magenta/wine/pink · All arrows navy
================================================================ */

/* ── Variables ── */
:root {
  --blue:    #1A56DB; --blue-mid: #1D4ED8;
  --blue-l:  #EFF6FF; --blue-dim: rgba(26,86,219,.08);
  --mint:    #059669; --mint-l:   #ECFDF5;
  --gold:    #F59E0B; --gold-mid: #D97706; --gold-l: #FFFBEB;
  --amber:   #B45309;
  --navy:    #0F1B33; --navy-2: #111827; --navy-3: #1C2333;
  --purple:  #7C3AED; --purple-l: #F5F3FF;
  --text:    #0F172A; --text-2: #334155; --text-3: #64748B;
  --border:  rgba(15,23,42,.08);
  --cream:   #FAFAF7; --cream-2: #F1F5F9;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:28px; --r-3xl:36px;
  --f-head: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-body: 'DM Sans', system-ui, sans-serif;
  --sh-sm: 0 2px 8px rgba(15,23,42,.06);
  --sh:    0 4px 24px rgba(15,23,42,.08);
  --sh-lg: 0 16px 56px rgba(15,23,42,.12);
}

/* ================================================================
   GLOBAL TYPOGRAPHY — front page scope
   All h1-h6 use Bricolage Grotesque; body copy uses DM Sans.
   Loaded after sb-main.css so these override on the front page.
================================================================ */

body {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-head);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--text);
  margin-top: 0;
  margin-bottom: .6em;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 900; letter-spacing: -.03em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.625rem); font-weight: 800; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; }
h4 { font-size: 1.25rem; font-weight: 700; }
h5 { font-size: 1rem;    font-weight: 700; }
h6 { font-size: .875rem; font-weight: 700; }

p { margin-top:0; margin-bottom:1em; line-height:1.72; }
p:last-child { margin-bottom:0; }

/* Links — brand blue, no red ever */
a { color:var(--blue); text-decoration:none; transition:color .18s; }
a:hover { color:var(--blue-mid); text-decoration:underline; }
a:visited { color:var(--blue); }
a:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:3px; }

strong, b { font-weight:700; color:inherit; }
ul, ol { padding-left:1.4em; margin:0 0 1em; }
li { margin-bottom:.3em; }

/* Smooth scroll */
html { scroll-behavior:smooth; }

/* Global focus ring */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

img { max-width:100%; height:auto; }

/* ================================================================
   LAYOUT & UTILS
================================================================ */
.sb-wrap  { max-width:1200px; margin:0 auto; padding:0 28px; }
.sb-section { padding:96px 0; }
.sb-section-head { text-align:center; max-width:640px; margin:0 auto 52px; }
.sb-section-head h2 { margin-bottom:14px; }
.sb-section-head p  { font-size:1.0625rem; color:var(--text-2); }

/* Reveal animations */
.rev { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s ease; }
.rev.visible { opacity:1; transform:none; }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s}

/* ── Eyebrow ── */
.sb-eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-head); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--blue); background:var(--blue-l);
  border:1px solid rgba(26,86,219,.14); border-radius:99px;
  padding:5px 13px; margin-bottom:18px;
}
.sb-eyebrow--mint  { color:var(--mint);  background:var(--mint-l);  border-color:rgba(5,150,105,.18); }
.sb-eyebrow--gold  { color:var(--amber); background:var(--gold-l);  border-color:rgba(245,158,11,.2); }
.sb-eyebrow--white { color:rgba(255,255,255,.8); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); }

/* ================================================================
   BUTTONS — NEVER red. Full hover/focus/active/visited states.
================================================================ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-head); font-size:.9375rem; font-weight:700;
  padding:13px 24px; border-radius:var(--r-md); cursor:pointer;
  text-decoration:none; transition:all .18s;
  border:1.5px solid transparent; white-space:nowrap; line-height:1.2;
}
.btn:hover { text-decoration:none; }
.btn:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.btn:active { transform:translateY(0) scale(.98); }

.btn-lg   { padding:15px 28px; font-size:1rem; }
.btn-full { width:100%; justify-content:center; }

.btn-primary { background:var(--blue); color:#fff; box-shadow:0 4px 18px rgba(26,86,219,.28); }
.btn-primary:hover   { background:var(--blue-mid); box-shadow:0 8px 32px rgba(26,86,219,.42); transform:translateY(-1px); color:#fff; }
.btn-primary:visited { color:#fff; }

.btn-outline { background:transparent; color:var(--text); border-color:rgba(15,23,42,.14); box-shadow:var(--sh-sm); }
.btn-outline:hover   { border-color:var(--blue); color:var(--blue); background:var(--blue-l); }
.btn-outline:visited { color:var(--text); }

.btn-gold { background:var(--gold); color:var(--navy-2); box-shadow:0 4px 18px rgba(245,158,11,.3); }
.btn-gold:hover   { background:var(--gold-mid); box-shadow:0 8px 32px rgba(245,158,11,.42); transform:translateY(-1px); color:var(--navy-2); }
.btn-gold:visited { color:var(--navy-2); }

.btn-outline-white { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.22); }
.btn-outline-white:hover   { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); color:#fff; }
.btn-outline-white:visited { color:#fff; }

/* ── Badges ── */
.sb-badge { display:inline-flex; align-items:center; gap:4px; font-family:var(--f-head); font-size:.67rem; font-weight:700; padding:3px 9px; border-radius:99px; white-space:nowrap; }
.sb-badge--blue  { background:var(--blue-l);  color:var(--blue); }
.sb-badge--mint  { background:var(--mint-l);  color:var(--mint); }
.sb-badge--gold  { background:var(--gold-l);  color:var(--amber); }
.sb-badge--muted { background:var(--cream-2); color:var(--text-3); }

/* ================================================================
   HERO
================================================================ */
.sb-hero { padding:80px 0 72px; background:linear-gradient(165deg,#F7F9FC,#EEF4FF 55%,#F7F9FC); position:relative; overflow:hidden; }
.sb-hero::before { content:''; position:absolute; top:-140px; right:-100px; width:680px; height:680px; background:radial-gradient(circle,rgba(26,86,219,.08),transparent 65%); pointer-events:none; }
.sb-hero::after  { content:''; position:absolute; bottom:-80px; left:-60px; width:500px; height:500px; background:radial-gradient(circle,rgba(5,150,105,.05),transparent 65%); pointer-events:none; }
.sb-hero__grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:52px; align-items:center; position:relative; z-index:1; }
.sb-hero__copy h1 { margin-bottom:20px; }
.sb-hero__copy h1 .hl { color:var(--blue); position:relative; display:inline; }
.sb-hero__copy h1 .hl::after { content:''; position:absolute; left:0; right:0; bottom:4px; height:5px; background:var(--gold); border-radius:3px; opacity:.7; }
.sb-hero__sub  { font-size:1.0625rem; color:var(--text-2); line-height:1.72; margin-bottom:28px; max-width:36rem; }
.sb-hero__ctas { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px; }
.sb-hero__proof { display:flex; align-items:center; gap:14px; padding-top:24px; border-top:1px solid var(--border); flex-wrap:wrap; }

/* Ticker */
.sb-ticker-wrap { margin-bottom:20px; overflow:hidden; mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent); -webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent); }
.sb-ticker-inner { display:flex; gap:8px; width:max-content; animation:sbTicker 24s linear infinite; }
@keyframes sbTicker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.sb-ticker-chip { display:inline-flex; align-items:center; gap:6px; font-family:var(--f-head); font-size:.78rem; font-weight:700; color:var(--text-2); background:#fff; border:1px solid var(--border); border-radius:99px; padding:6px 14px; white-space:nowrap; box-shadow:var(--sh-sm); }
.sb-ticker-chip::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--blue); flex-shrink:0; }

/* Proof row */
.sb-proof-avs { display:flex; }
.sb-proof-av { width:36px; height:36px; border-radius:50%; border:2.5px solid #fff; display:flex; align-items:center; justify-content:center; font-family:var(--f-head); font-size:.62rem; font-weight:800; color:#fff; flex-shrink:0; margin-left:-10px; overflow:hidden; position:relative; }
.sb-proof-av:first-child { margin-left:0; }
.sb-proof-av img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.sb-proof-copy { font-size:.875rem; color:var(--text-3); }
.sb-proof-copy strong { color:var(--text); }

/* Hero visual */
.sb-hero__visual { position:relative; padding:32px 0 8px; max-width:560px; margin-left:auto; }
.sb-float-chip { position:absolute; background:#fff; border:1px solid var(--border); border-radius:14px; padding:11px 14px; box-shadow:0 14px 40px rgba(15,23,42,.14); z-index:12; display:flex; align-items:center; gap:10px; animation:sbChipFloat 4.5s ease-in-out infinite; }
.sb-float-chip--1 { top:0; left:-12px; animation-delay:0s; }
.sb-float-chip--2 { bottom:32px; right:-12px; animation-delay:2.2s; }
@keyframes sbChipFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.sb-float-chip__icon { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.75rem; flex-shrink:0; }
.sb-float-chip__val  { font-family:var(--f-head); font-size:.875rem; font-weight:800; color:var(--text); white-space:nowrap; }
.sb-float-chip__sub  { font-size:.7rem; color:var(--text-3); white-space:nowrap; }

.sb-dash-band { background:#fff; border-radius:18px; box-shadow:0 24px 72px rgba(15,23,42,.14),0 4px 16px rgba(15,23,42,.06); border:1px solid var(--border); overflow:hidden; }
.sb-dash-band__bar { display:flex; align-items:center; gap:12px; padding:10px 16px; background:#F4F5F7; border-bottom:1px solid var(--border); }
.sb-dash-band__body { display:flex; min-height:300px; }
.sb-browser-dots { display:flex; gap:5px; }
.sb-browser-dot { width:10px; height:10px; border-radius:50%; }
.sb-browser-dot--r { background:#FF5F57; } .sb-browser-dot--y { background:#FEBC2E; } .sb-browser-dot--g { background:#28C840; }
.sb-browser__url { flex:1; background:#fff; border:1px solid var(--border); border-radius:7px; padding:4px 10px; font-size:.7rem; color:var(--text-3); display:flex; align-items:center; gap:5px; }
.sb-browser__url i { color:var(--mint); font-size:.6rem; }
.sb-dash-sidebar { width:50px; background:var(--navy); display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:6px; flex-shrink:0; }
.sb-dash-logo { width:30px; height:30px; background:var(--blue); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:#fff; margin-bottom:12px; }
.sb-dash-nav { display:flex; flex-direction:column; align-items:center; gap:6px; }
.sb-dash-nav__item { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.32); font-size:.8rem; transition:background .12s,color .12s; }
.sb-dash-nav__item--active { background:rgba(255,255,255,.1); color:#fff; }
.sb-dash-main { flex:1; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--cream-2); overflow:hidden; }
.sb-dash-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.sb-dash-kpi { background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 11px; }
.sb-dash-kpi__lbl { font-size:.6rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; font-weight:600; margin-bottom:3px; }
.sb-dash-kpi__val { font-family:var(--f-head); font-size:1.05rem; font-weight:800; color:var(--text); }
.sb-dash-kpi__delta { font-size:.6rem; font-weight:700; margin-top:3px; }
.sb-dash-kpi__delta.up { color:var(--mint); } .sb-dash-kpi__delta.warn { color:var(--amber); }
.sb-dash-chart { background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.sb-dash-chart__head { margin-bottom:8px; }
.sb-dash-chart__title { font-size:.63rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); }
.sb-dash-bars { display:flex; align-items:flex-end; gap:4px; height:50px; }
.sb-dash-bar { flex:1; background:#e2e8f0; border-radius:3px 3px 0 0; height:var(--h); position:relative; }
.sb-dash-bar--hi { background:var(--blue); }
.sb-dash-bar span { font-size:.5rem; color:var(--text-3); position:absolute; bottom:-13px; left:50%; transform:translateX(-50%); font-weight:600; white-space:nowrap; }
.sb-dash-bookings { background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.sb-dash-booking-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid rgba(0,0,0,.05); }
.sb-dash-booking-row:last-child { border-bottom:none; }
.sb-dash-booking-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.sb-dash-booking-info { flex:1; }
.sb-dash-booking-name { font-size:.72rem; font-weight:600; color:var(--text); }
.sb-dash-booking-time { font-size:.62rem; color:var(--text-3); }
.sb-dash-chip-bar { display:flex; align-items:flex-start; gap:7px; background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.2); border-radius:8px; padding:8px 10px; font-size:.67rem; color:#92400E; line-height:1.45; }
.sb-dash-chip-bar i { color:var(--gold); flex-shrink:0; margin-top:1px; }

/* ================================================================
   TRUSTED BY
================================================================ */
.sb-trusted-bar { background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:32px 0; }
.sb-trusted-bar__label { text-align:center; font-family:var(--f-head); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); margin-bottom:24px; }
.sb-trusted-logos { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:28px 48px; }
.sb-trusted-logo { display:flex; align-items:center; justify-content:center; opacity:.5; transition:opacity .18s; filter:grayscale(1); }
.sb-trusted-logo:hover { opacity:.85; filter:grayscale(0); }
.sb-trusted-logo { width:110px; height:40px; }
.sb-trusted-logo img { width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
.sb-trusted-logo__text { display:none; font-family:var(--f-head); font-size:.875rem; font-weight:800; color:var(--text-3); }

/* ================================================================
   APP SCROLLER
================================================================ */
.sb-app-scroll-section { background:var(--cream); padding:96px 0; overflow:hidden; }
.sb-app-scroll-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.sb-app-scroll-col { height:480px; overflow:hidden; border-radius:var(--r-2xl); border:1px solid var(--border); background:#fff; box-shadow:var(--sh-lg); position:relative; }
.sb-app-scroll-col::before,.sb-app-scroll-col::after { content:''; position:absolute; left:0; right:0; z-index:2; height:80px; pointer-events:none; }
.sb-app-scroll-col::before { top:0;    background:linear-gradient(to bottom,#fff,transparent); }
.sb-app-scroll-col::after  { bottom:0; background:linear-gradient(to top,   #fff,transparent); }
.sb-app-scroll-mask { height:100%; overflow:hidden; }
.sb-app-scroll-track { display:flex; flex-direction:column; animation:sbTaskScroll 30s linear infinite; }
.sb-app-scroll-track:hover { animation-play-state:paused; }
@keyframes sbTaskScroll { 0%{transform:translateY(0)} 100%{transform:translateY(-50%)} }
.sb-app-task-item { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); }
.sb-app-task__av { width:38px; height:38px; border-radius:50%; overflow:hidden; position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--f-head); font-size:.65rem; font-weight:800; color:#fff; }
.sb-app-task__av img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.sb-app-task__body { flex:1; min-width:0; }
.sb-app-task__text { font-size:.82rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-app-task__time { font-size:.68rem; color:var(--text-3); margin-top:2px; }
.sb-app-task__badge { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.72rem; flex-shrink:0; }
.sb-app-scroll-copy { display:flex; flex-direction:column; }
.sb-app-scroll-copy h2 { margin-bottom:14px; }
.sb-app-scroll__sub { font-size:1.0625rem; color:var(--text-2); line-height:1.72; margin-bottom:28px; }
.sb-app-scroll-feats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sb-app-scroll-feat { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; font-size:.875rem; font-weight:600; color:var(--text-2); box-shadow:var(--sh-sm); }
.sb-app-scroll-feat i { color:var(--blue); font-size:.9rem; flex-shrink:0; }

/* ================================================================
   HOW IT WORKS
================================================================ */
.sb-hiw-section { padding:96px 0; background:linear-gradient(145deg,#1A56DB 0%,#0F1B33 58%,#047857 100%); position:relative; overflow:hidden; }
.sb-hiw-bg-glow { position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(255,255,255,.08),transparent 60%); pointer-events:none; }
.sb-hiw-head { text-align:center; max-width:600px; margin:0 auto 56px; position:relative; z-index:1; }
.sb-hiw-head h2 { color:#fff; margin-bottom:12px; }
.sb-hiw-head p  { color:rgba(255,255,255,.65); font-size:1.0625rem; }
.sb-hiw-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; z-index:1; }
.sb-hiw-card { background:rgba(255,255,255,.93); border-radius:var(--r-2xl); padding:32px 26px 28px; display:flex; flex-direction:column; gap:14px; border:1px solid rgba(255,255,255,.6); box-shadow:0 24px 56px rgba(0,0,0,.15); transition:transform .22s,box-shadow .22s; }
.sb-hiw-card:hover { transform:translateY(-6px); box-shadow:0 32px 72px rgba(0,0,0,.22); }
.sb-hiw-card__num { width:36px; height:36px; border-radius:50%; background:var(--blue); color:#fff; font-family:var(--f-head); font-size:.9rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sb-hiw-card__mockup { margin:4px 0 8px; }
.sb-hiw-mock { background:var(--cream); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.sb-hiw-mock__bar { display:flex; gap:4px; padding:8px 12px; background:#EEF0F3; border-bottom:1px solid var(--border); }
.sb-hiw-mock__bar span { width:8px; height:8px; border-radius:50%; background:rgba(15,23,42,.15); }
.sb-hiw-mock__body { padding:14px; }
.sb-hiw-card h3 { font-size:1.0625rem; margin:0; color:var(--text); }
.sb-hiw-card p  { font-size:.9rem; color:var(--text-2); margin:0; }
.sb-hiw-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.sb-hiw-cta { text-align:center; margin-top:48px; position:relative; z-index:1; }

/* ================================================================
   FEATURE SCROLLER
================================================================ */
.sb-fscroll-section { background:var(--cream-2); padding:80px 0 0; overflow:hidden; }
.sb-fscroll-head { text-align:center; max-width:620px; margin:0 auto 36px; }
.sb-fscroll-head h2 { margin-bottom:12px; }
.sb-fscroll-tabs { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin-bottom:28px; }
.sb-fscroll-tab { display:inline-flex; align-items:center; gap:6px; font-family:var(--f-head); font-size:.82rem; font-weight:600; color:var(--text-3); background:transparent; border:1.5px solid var(--border); border-radius:99px; padding:8px 18px; cursor:pointer; transition:all .18s; outline:none; }
.sb-fscroll-tab i { font-size:.75rem; }
.sb-fscroll-tab:hover  { color:var(--blue); border-color:var(--blue); background:var(--blue-l); }
.sb-fscroll-tab.active { background:var(--navy); color:#fff; border-color:var(--navy); box-shadow:0 4px 16px rgba(15,23,42,.2); }
.sb-fscroll-tab:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.sb-fscroll-outer { position:relative; padding-bottom:40px; }

/* Scroller arrows — ALWAYS navy */
.sb-fscroll-arr {
  position:absolute; top:42%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:#fff; border:1.5px solid var(--border); box-shadow:var(--sh);
  z-index:10; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; color:#0F1B33;
  transition:background .18s,border-color .18s,color .18s;
}
.sb-fscroll-arr:hover { background:#0F1B33; border-color:#0F1B33; color:#fff; }
.sb-fscroll-arr:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.sb-fscroll-arr i     { color:inherit; pointer-events:none; }
.sb-fscroll-arr--prev { left:12px; }
.sb-fscroll-arr--next { right:12px; }

.sb-fscroll-track { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:8px 80px 20px; scroll-behavior:smooth; }
.sb-fscroll-track::-webkit-scrollbar { display:none; }
.sb-fscroll-dots { display:flex; justify-content:center; gap:8px; padding:4px 0 24px; }
.sb-fscroll-dot { width:8px; height:8px; border-radius:50%; background:rgba(15,23,42,.15); cursor:pointer; transition:all .18s; }
.sb-fscroll-dot.active { background:var(--blue); width:24px; border-radius:4px; }

/* Feature cards */
.sb-fsc-card { flex-shrink:0; width:740px; min-height:480px; border-radius:28px; scroll-snap-align:center; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; box-shadow:0 8px 32px rgba(15,23,42,.1); transition:transform .2s,box-shadow .2s; }
.sb-fsc-card:hover { transform:translateY(-4px); box-shadow:0 20px 56px rgba(15,23,42,.16); }
.sb-fsc-card--amber  { background:linear-gradient(140deg,#FEF9EC,#FDE68A); }
.sb-fsc-card--blue   { background:linear-gradient(140deg,#EFF6FF,#BFDBFE); }
.sb-fsc-card--orange { background:linear-gradient(140deg,#FFF7ED,#FED7AA); }
.sb-fsc-card--mint   { background:linear-gradient(140deg,#ECFDF5,#A7F3D0); }
.sb-fsc-card--purple { background:linear-gradient(140deg,#F5F3FF,#DDD6FE); }
.sb-fsc-card--dark   { background:linear-gradient(140deg,#0F172A,#1E293B); }
.sb-fsc-card--navy   { background:linear-gradient(140deg,#0a0f1f,#0F172A); }
.sb-fsc-card__copy { padding:44px 36px 44px 44px; display:flex; flex-direction:column; gap:12px; justify-content:center; }
.sb-fsc-card__label { font-family:var(--f-head); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:rgba(0,0,0,.45); display:flex; align-items:center; gap:6px; }
.sb-fsc-card--dark .sb-fsc-card__label,.sb-fsc-card--navy .sb-fsc-card__label { color:rgba(255,255,255,.4); }
.sb-fsc-card h3 { font-size:clamp(1.25rem,2vw,1.625rem); line-height:1.22; color:var(--text); margin:0; }
.sb-fsc-card--dark h3,.sb-fsc-card--navy h3 { color:#fff; }
.sb-fsc-card p { font-size:.9375rem; color:var(--text-2); line-height:1.65; margin:0; }
.sb-fsc-card--dark p,.sb-fsc-card--navy p { color:rgba(255,255,255,.55); }
.sb-fsc-card__perks { display:flex; flex-direction:column; gap:7px; }
.sb-fsc-card__perks span { display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--text-2); }
.sb-fsc-card--dark .sb-fsc-card__perks span,.sb-fsc-card--navy .sb-fsc-card__perks span { color:rgba(255,255,255,.6); }
.sb-fsc-card__perks i { color:var(--mint); font-size:.72rem; flex-shrink:0; }
.sb-fsc-card--dark .sb-fsc-card__perks i,.sb-fsc-card--navy .sb-fsc-card__perks i { color:var(--gold); }
.sb-fsc-card__btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--f-head); font-size:.875rem; font-weight:700; color:var(--text); background:rgba(0,0,0,.08); border:1.5px solid rgba(0,0,0,.1); border-radius:var(--r-md); padding:11px 20px; text-decoration:none; transition:all .18s; width:fit-content; margin-top:8px; }
.sb-fsc-card__btn:hover       { background:var(--navy); color:#fff; border-color:var(--navy); text-decoration:none; }
.sb-fsc-card__btn--light      { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.2); }
.sb-fsc-card__btn--light:hover { background:rgba(255,255,255,.2); color:#fff; }
.sb-fsc-card__btn--gold       { background:var(--gold); color:var(--navy-2); border-color:transparent; }
.sb-fsc-card__btn--gold:hover  { background:var(--gold-mid); color:var(--navy-2); }
.sb-fsc-card__visual { position:relative; display:flex; align-items:flex-end; justify-content:center; padding:24px 24px 0; overflow:hidden; }

/* CRM list inside card */
.sb-fsc-crm-list { background:#fff; border-radius:16px 16px 0 0; box-shadow:0 -8px 32px rgba(26,86,219,.14); overflow:hidden; width:100%; }
.sb-fsc-crm-head { padding:11px 14px; border-bottom:1px solid rgba(0,0,0,.06); display:flex; justify-content:space-between; align-items:center; font-family:var(--f-head); font-size:.78rem; font-weight:700; color:var(--text); }
.sb-fsc-crm-row { display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid rgba(0,0,0,.04); }
.sb-fsc-crm-av { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--f-head); font-size:.6rem; font-weight:800; color:#fff; flex-shrink:0; }
.sb-fsc-crm-info { flex:1; min-width:0; }
.sb-fsc-crm-name { font-size:.75rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-fsc-crm-sub  { font-size:.65rem; color:var(--text-3); }

/* Booking widget */
.sb-fsc-book-mock { background:#fff; border-radius:16px 16px 0 0; box-shadow:0 -8px 32px rgba(180,83,9,.15); overflow:hidden; width:100%; }
.sb-fsc-book-mock__hd { padding:14px 16px; background:#FFFBEB; border-bottom:1px solid rgba(180,83,9,.1); }
.sb-fsc-bm-title { font-family:var(--f-head); font-size:.82rem; font-weight:700; color:var(--amber); }
.sb-fsc-bm-date  { font-size:.72rem; color:var(--text-3); margin-top:2px; }
.sb-fsc-book-mock__slots { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:12px; }
.sb-fsc-slot { background:var(--cream-2); border:1px solid var(--border); border-radius:8px; padding:9px 5px; text-align:center; font-family:var(--f-head); font-size:.72rem; font-weight:700; color:var(--text-2); }
.sb-fsc-slot--sel  { background:var(--amber); border-color:var(--amber); color:#fff; }
.sb-fsc-slot--full { opacity:.4; text-decoration:line-through; border-style:dashed; background:transparent; }
.sb-fsc-book-mock__cta  { padding:12px 16px; background:var(--amber); color:#fff; text-align:center; font-family:var(--f-head); font-size:.8rem; font-weight:700; }
.sb-fsc-book-mock__note { padding:7px 16px; background:rgba(180,83,9,.05); text-align:center; font-size:.67rem; color:rgba(180,83,9,.7); display:flex; align-items:center; justify-content:center; gap:5px; }

/* Invoice widget */
.sb-fsc-inv-mock { background:#fff; border-radius:16px 16px 0 0; box-shadow:0 -8px 32px rgba(234,88,12,.12); padding:16px; width:100%; }
.sb-fsc-inv-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.sb-fsc-inv-brand { font-family:var(--f-head); font-size:.85rem; font-weight:800; color:var(--navy); }
.sb-fsc-inv-label { font-size:.65rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; }
.sb-fsc-inv-client { font-size:.78rem; color:var(--text-3); margin-bottom:10px; }
.sb-fsc-inv-rows { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.sb-fsc-inv-row { display:flex; justify-content:space-between; font-size:.78rem; color:var(--text-2); padding:5px 0; border-bottom:1px solid var(--border); }
.sb-fsc-inv-row:last-child { border-bottom:none; }
.sb-fsc-inv-row--total { font-family:var(--f-head); font-weight:800; color:var(--text); }
.sb-fsc-inv-statuses { display:flex; flex-direction:column; gap:5px; }
.sb-fsc-inv-status { display:flex; align-items:center; gap:7px; font-size:.72rem; padding:6px 10px; border-radius:8px; }
.sb-fsc-inv-status--paid { background:var(--mint-l); color:var(--mint); }
.sb-fsc-inv-status--due  { background:var(--gold-l);  color:var(--amber); }
.sb-fsc-inv-status--over { background:var(--gold-l); color:var(--amber); }

/* Payment widget */
.sb-fsc-pay-mock { background:#fff; border-radius:16px 16px 0 0; box-shadow:0 -8px 32px rgba(5,150,105,.12); padding:16px; width:100%; }
.sb-fsc-pay-providers { display:flex; gap:6px; margin-bottom:12px; }
.sb-fsc-pay-pill { font-family:var(--f-head); font-size:.68rem; font-weight:700; color:var(--mint); background:var(--mint-l); border-radius:99px; padding:3px 10px; }
.sb-fsc-pay-txns { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.sb-fsc-pay-txn { display:flex; align-items:center; gap:10px; padding:9px; background:var(--cream-2); border-radius:9px; }
.sb-fsc-pay-txn__dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sb-fsc-pay-txn__info { flex:1; }
.sb-fsc-pay-txn__name { font-size:.78rem; font-weight:600; color:var(--text); }
.sb-fsc-pay-txn__method { font-size:.65rem; color:var(--text-3); }
.sb-fsc-pay-txn__amount { font-family:var(--f-head); font-size:.82rem; font-weight:800; color:var(--mint); }
.sb-fsc-pay-total { display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid var(--border); font-size:.78rem; color:var(--text-3); font-family:var(--f-head); font-weight:700; }

/* Form widget */
.sb-fsc-form-mock { background:#fff; border-radius:16px 16px 0 0; box-shadow:0 -8px 32px rgba(124,58,237,.14); padding:16px; width:100%; }
.sb-fsc-form-mock__head { font-family:var(--f-head); font-size:.8rem; font-weight:700; color:var(--text); margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; }

/* Marketing widget */
.sb-fsc-mkt-mock { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:16px 16px 0 0; padding:16px; width:100%; }
.sb-fsc-mkt-top { margin-bottom:10px; }
.sb-fsc-mkt-campaign { font-size:.72rem; color:rgba(255,255,255,.45); }
.sb-fsc-mkt-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:12px; }
.sb-fsc-mkt-stat { background:rgba(255,255,255,.06); border-radius:8px; padding:8px 6px; text-align:center; }
.sb-fsc-mkt-stat__val { font-family:var(--f-head); font-size:.95rem; font-weight:800; }
.sb-fsc-mkt-stat__lbl { font-size:.6rem; color:rgba(255,255,255,.35); margin-top:2px; }
.sb-fsc-mkt-bar-wrap { background:rgba(255,255,255,.08); border-radius:99px; height:5px; overflow:hidden; margin-bottom:4px; }
.sb-fsc-mkt-bar { height:100%; background:#818CF8; border-radius:99px; }
.sb-fsc-mkt-bar-lbl { font-size:.68rem; color:rgba(255,255,255,.35); margin-bottom:12px; }
.sb-fsc-mkt-channels { display:flex; flex-direction:column; gap:6px; }
.sb-fsc-mkt-channel { display:flex; align-items:center; gap:8px; font-size:.7rem; color:rgba(255,255,255,.5); }
.sb-fsc-mkt-channel span:first-child { width:60px; flex-shrink:0; }
.sb-fsc-mkt-ch-bar { height:4px; border-radius:2px; flex:1; max-width:80px; }
.sb-fsc-mkt-channel span:last-child { width:32px; text-align:right; }

/* Chip chat widget */
.sb-fsc-chip-chat { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:16px 16px 0 0; overflow:hidden; width:100%; }
.sb-fsc-chip-chat__head { display:flex; align-items:center; gap:9px; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.18); }
.sb-fsc-chip-chat__av { width:28px; height:28px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; font-size:.72rem; color:var(--navy-2); font-weight:800; flex-shrink:0; }
.sb-fsc-chip-chat__body { padding:12px; display:flex; flex-direction:column; gap:8px; }
.sb-fsc-chip-chat__msg { padding:8px 12px; border-radius:10px; font-size:.78rem; line-height:1.5; max-width:90%; }
.sb-fsc-chip-chat__msg--user { background:var(--blue); color:#fff; align-self:flex-end; border-radius:10px 10px 2px 10px; }
.sb-fsc-chip-chat__msg--ai   { background:rgba(255,255,255,.08); color:rgba(255,255,255,.82); align-self:flex-start; border-radius:10px 10px 10px 2px; }

/* ================================================================
   REPLACE STACK
================================================================ */
.sb-replace-section { background:var(--cream); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:96px 0; }
.sb-replace-head { text-align:center; max-width:580px; margin:0 auto 56px; }
.sb-replace-head h2 { margin-bottom:12px; }
.sb-replace-layout { display:grid; grid-template-columns:1fr 64px 1fr; align-items:center; }
.sb-replace-old { background:#fff; border:1px solid var(--border); border-radius:var(--r-2xl); padding:28px; box-shadow:var(--sh-sm); }
.sb-replace-old__label { font-family:var(--f-head); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); margin-bottom:16px; }
.sb-replace-tools { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.sb-replace-tool { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:var(--r-md); background:var(--cream-2); border:1px solid var(--border); }
.sb-replace-tool__icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0; }
.sb-replace-tool__name  { flex:1; font-size:.875rem; font-weight:500; color:var(--text-2); text-decoration:line-through; text-decoration-color:rgba(150,28,28,.4); }
.sb-replace-tool__price { font-family:var(--f-head); font-size:.75rem; font-weight:700; color:var(--text-3); }
.sb-replace-tool__x    { width:18px; height:18px; border-radius:50%; background:rgba(150,28,28,.08); color:#991B1B; display:flex; align-items:center; justify-content:center; font-size:.6rem; flex-shrink:0; }
.sb-replace-total { border-top:1px solid var(--border); padding-top:16px; }
.sb-replace-total__label  { font-size:.8rem; color:var(--text-3); margin-bottom:3px; }
.sb-replace-total__amount { font-family:var(--f-head); font-size:1.375rem; font-weight:900; color:#991B1B; text-decoration:line-through; }
.sb-replace-total__note   { font-size:.75rem; color:var(--text-3); margin-top:2px; }
.sb-replace-arrow { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--blue); }
.sb-replace-arrow__line { width:2px; flex:1; min-height:24px; background:linear-gradient(to bottom,var(--border),rgba(26,86,219,.3)); }
.sb-replace-arrow i { font-size:1.25rem; }
.sb-replace-new__label { font-family:var(--f-head); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--mint); margin-bottom:16px; }
.sb-replace-sb { background:linear-gradient(145deg,#0F172A,#172038); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-2xl); padding:28px; box-shadow:0 16px 48px rgba(15,23,42,.18); }
.sb-replace-sb__logo { margin-bottom:20px; }
.sb-replace-sb__features { display:flex; flex-direction:column; gap:9px; margin-bottom:24px; }
.sb-replace-sb__feat { display:flex; align-items:center; gap:9px; font-size:.875rem; color:rgba(255,255,255,.72); }
.sb-replace-sb__feat i { color:var(--mint); font-size:.75rem; flex-shrink:0; }
.sb-replace-sb__feat--gold   { color:var(--gold); }
.sb-replace-sb__feat--gold i { color:var(--gold); }
.sb-replace-sb__price  { border-top:1px solid rgba(255,255,255,.08); padding-top:20px; }
.sb-replace-sb__from   { font-size:.8rem; color:rgba(255,255,255,.4); margin-bottom:2px; }
.sb-replace-sb__amount { font-family:var(--f-head); font-size:2.5rem; font-weight:900; color:var(--gold); line-height:1; margin-bottom:18px; }
.sb-replace-sb__amount span { font-size:1rem; color:rgba(255,255,255,.4); font-weight:400; }

/* ================================================================
   CHIP PROMPT
================================================================ */
.sb-prompt-section { position:relative; overflow:hidden; background:linear-gradient(170deg,#EEF4FF,#E8F0FE 40%,#EFF6FF); padding:120px 0 100px; min-height:520px; }
.sb-prompt-bg { position:absolute; inset:0; pointer-events:none; }
.sb-prompt-bg__feat { position:absolute; background:#fff; border-radius:14px; box-shadow:0 8px 28px rgba(15,23,42,.1); border:1px solid rgba(255,255,255,.9); padding:12px 16px; display:flex; align-items:center; gap:10px; min-width:190px; white-space:nowrap; }
.sb-prompt-bg__feat--1{top:14%;left:3%;transform:rotate(-3deg);opacity:.7}
.sb-prompt-bg__feat--2{top:44%;left:1%;transform:rotate(2deg);opacity:.65}
.sb-prompt-bg__feat--3{bottom:18%;left:4%;transform:rotate(-2deg);opacity:.6}
.sb-prompt-bg__feat--4{top:14%;right:3%;transform:rotate(3deg);opacity:.7}
.sb-prompt-bg__feat--5{bottom:22%;right:2%;transform:rotate(-2deg);opacity:.65}
.sb-prompt-bg__feat-icon  { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }
.sb-prompt-bg__feat-title { font-family:var(--f-head); font-size:.8rem; font-weight:700; color:var(--text); }
.sb-prompt-bg__feat-sub   { font-size:.68rem; color:var(--text-3); margin-top:1px; }
.sb-prompt-bg__kpi { position:absolute; background:#fff; border-radius:14px; box-shadow:0 8px 28px rgba(15,23,42,.1); border:1px solid rgba(255,255,255,.9); padding:14px 18px; min-width:185px; }
.sb-prompt-bg__kpi--1     { top:40%; right:2%; transform:rotate(-1.5deg); opacity:.72; }
.sb-prompt-bg__kpi-label  { font-size:.62rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-bottom:4px; }
.sb-prompt-bg__kpi-val    { font-family:var(--f-head); font-size:1.625rem; font-weight:900; color:var(--text); line-height:1; }
.sb-prompt-bg__kpi-delta  { font-size:.72rem; color:var(--mint); font-weight:700; margin-top:5px; display:flex; align-items:center; gap:4px; }
.sb-prompt-center { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; max-width:680px; margin:0 auto; }
.sb-prompt-center h2  { margin-bottom:10px; font-size:clamp(1.75rem,4vw,2.75rem); }
.sb-prompt-center > p { font-size:1rem; color:var(--text-2); margin-bottom:28px; max-width:460px; }
.sb-prompt-card { width:100%; background:#fff; border-radius:22px; box-shadow:0 24px 64px rgba(15,23,42,.12); border:1px solid rgba(255,255,255,.9); overflow:hidden; margin-bottom:20px; }
.sb-prompt-input-row { display:flex; align-items:center; gap:10px; padding:18px 18px 12px; }
.sb-prompt-avatar { width:36px; height:36px; border-radius:50%; background:var(--gold); color:var(--navy-2); display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }
.sb-prompt-input { flex:1; border:none; outline:none; font-family:var(--f-body); font-size:1rem; color:var(--text); background:transparent; cursor:pointer; padding:4px 0; min-height:32px; }
.sb-prompt-input::placeholder { color:var(--text-3); }

/* Prompt send button — navy only */
.sb-prompt-send { width:38px; height:38px; border-radius:8px; background:transparent; color:var(--navy); border:1.5px solid var(--navy); display:flex; align-items:center; justify-content:center; font-size:.85rem; cursor:pointer; flex-shrink:0; transition:background .18s,color .18s; }
.sb-prompt-send:hover { background:var(--navy); color:#fff; }
.sb-prompt-send:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.sb-prompt-send i { color:inherit; pointer-events:none; }

.sb-prompt-divider { height:1px; background:var(--border); margin:0 18px; }
.sb-prompt-pills { display:flex; flex-wrap:wrap; gap:7px; padding:14px 18px; }
.sb-prompt-pill { font-family:var(--f-head); font-size:.78rem; font-weight:600; color:var(--text-2); background:var(--cream-2); border:1.5px solid var(--border); border-radius:99px; padding:8px 16px; cursor:pointer; transition:all .18s; white-space:nowrap; }
.sb-prompt-pill:hover { color:var(--blue); border-color:var(--blue); background:var(--blue-l); }
.sb-prompt-pill:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.sb-prompt-cta-note { font-size:.875rem; color:var(--text-3); }
.sb-prompt-signup-link { color:var(--blue); font-weight:600; text-decoration:none; }
.sb-prompt-signup-link:hover { text-decoration:underline; color:var(--blue-mid); }

/* ================================================================
   CHIP AI SECTION
================================================================ */
.sb-chip-section { background:#060D1A; padding:96px 0; overflow:hidden; position:relative; }
.sb-chip-section::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 50% 70% at 15% 40%,rgba(245,158,11,.1),transparent 60%),radial-gradient(ellipse 60% 80% at 85% 20%,rgba(26,86,219,.18),transparent 60%); }
.sb-chip-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; position:relative; z-index:2; }

.sb-chat { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:20px; overflow:hidden; }
.sb-chat__header-band { display:flex; align-items:center; gap:16px; padding:22px 20px 18px; background:linear-gradient(135deg,#0a0f1f,#111827); }
.sb-chat__av-lg { width:52px; height:52px; border-radius:50%; background:var(--gold); color:var(--navy-2); display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; box-shadow:0 4px 20px rgba(245,158,11,.4); }
.sb-chat__av-lg-name { font-family:var(--f-head); font-size:1rem; font-weight:800; color:#fff; }
.sb-chat__av-lg-sub  { font-size:.75rem; color:rgba(255,255,255,.4); margin-top:2px; }
.sb-chat__online { margin-left:auto; display:flex; align-items:center; gap:5px; font-size:.7rem; color:rgba(255,255,255,.4); }
.sb-chat__online-dot { width:7px; height:7px; border-radius:50%; background:#53e3a6; display:inline-block; }
.sb-chat__body { padding:16px; display:flex; flex-direction:column; gap:9px; }
.sb-chat__msg { max-width:82%; padding:9px 13px; border-radius:13px; font-size:.875rem; line-height:1.6; }
.sb-chat__msg--user { background:var(--blue); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.sb-chat__msg--ai   { background:rgba(255,255,255,.08); color:rgba(255,255,255,.82); align-self:flex-start; border-bottom-left-radius:4px; }
.sb-chat__input-row { display:flex; align-items:center; gap:8px; padding:11px 15px; border-top:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.12); }
.sb-chat__input-row input { flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:8px 11px; color:rgba(255,255,255,.7); font-size:.875rem; font-family:var(--f-body); outline:none; }
.sb-chat__input-row input::placeholder { color:rgba(255,255,255,.28); }
.sb-chat__input-row input:focus { border-color:rgba(255,255,255,.3); }

/* Chat send button — no red */
.sb-chat__send-btn { width:34px; height:34px; border-radius:8px; background:transparent; border:1.5px solid rgba(255,255,255,.22); color:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; font-size:.8rem; cursor:pointer; transition:all .18s; flex-shrink:0; }
.sb-chat__send-btn:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); color:#fff; }
.sb-chat__send-btn:focus-visible { outline:2px solid rgba(255,255,255,.5); outline-offset:2px; }
.sb-chat__send-btn i { color:inherit; pointer-events:none; }

.sb-chip-text    { padding-top:4px; }
.sb-chip-text h2 { color:#fff; margin-bottom:16px; }
.sb-chip-text > p { color:rgba(255,255,255,.55); font-size:1rem; margin-bottom:28px; }
.sb-chip-perks { display:flex; flex-direction:column; gap:12px; }
.sb-chip-perk  { display:flex; align-items:flex-start; gap:12px; font-size:.9375rem; color:rgba(255,255,255,.7); line-height:1.6; }
.sb-chip-perk i { color:var(--mint); flex-shrink:0; margin-top:3px; }

/* ================================================================
   CEO SECTION
================================================================ */
.sb-ceo-section { padding:96px 0; background:var(--cream); }
.sb-ceo-card { background:linear-gradient(135deg,#1A56DB 0%,#0F1B33 50%,#047857 100%); border-radius:var(--r-3xl); padding:56px; overflow:hidden; position:relative; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; box-shadow:0 32px 80px rgba(15,23,42,.2); }
.sb-ceo-card::before { content:''; position:absolute; top:-100px; left:-60px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.1),transparent 65%); pointer-events:none; }
.sb-ceo-quote-col { position:relative; z-index:1; }
.sb-ceo-profile { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.sb-ceo-av { width:60px; height:60px; border-radius:50%; overflow:hidden; border:3px solid rgba(255,255,255,.3); flex-shrink:0; }
.sb-ceo-av img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.sb-ceo-name  { font-family:var(--f-head); font-size:1rem; font-weight:700; color:#fff; }
.sb-ceo-title { font-size:.82rem; color:rgba(255,255,255,.55); margin-top:2px; }
.sb-ceo-blockquote { font-family:var(--f-head); font-size:1.125rem; font-weight:500; color:#fff; line-height:1.65; font-style:italic; margin:0 0 32px; border-left:3px solid rgba(255,255,255,.3); padding-left:20px; }
.sb-ceo-logos-bar { border-top:1px solid rgba(255,255,255,.12); padding-top:24px; }
.sb-ceo-logos-label { font-size:.72rem; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.07em; font-weight:700; font-family:var(--f-head); margin-bottom:12px; display:block; }
.sb-ceo-logos { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.sb-ceo-logo-item img { height:22px; width:auto; filter:brightness(0) invert(1); opacity:.45; transition:opacity .18s; display:block; }
.sb-ceo-logo-item span { display:none; font-family:var(--f-head); font-size:.78rem; font-weight:700; color:rgba(255,255,255,.45); }
.sb-ceo-logo-item:hover img { opacity:.75; }
.sb-ceo-stats-col { position:relative; z-index:1; }
.sb-ceo-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sb-ceo-stat { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-xl); padding:24px; text-align:center; }
.sb-ceo-stat__val { font-family:var(--f-head); font-size:2rem; font-weight:900; color:var(--gold); line-height:1; }
.sb-ceo-stat__lbl { font-size:.78rem; color:rgba(255,255,255,.5); margin-top:6px; }

/* ================================================================
   TESTIMONIALS — masonry columns
================================================================ */
.sb-testi-masonry-section { padding:96px 0 0; background:var(--cream-2); overflow:hidden; }
.sb-testi-masonry-outer { position:relative; }
.sb-testi-masonry-outer::after { content:''; position:absolute; bottom:0; left:0; right:0; height:160px; background:linear-gradient(to top,var(--cream-2),transparent); pointer-events:none; z-index:2; }
.sb-testi-masonry-inner { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:0 28px; max-width:1200px; margin:0 auto; align-items:start; }
.sb-testi-masonry-col { display:flex; flex-direction:column; gap:20px; }
.sb-testi-masonry-col:nth-child(2) { margin-top:32px; }
.sb-testi-masonry-col:nth-child(3) { margin-top:64px; }
.sb-testi-masonry-cta { text-align:center; padding:48px 0 96px; position:relative; z-index:3; }

.sb-tcard { background:#fff; border:1px solid var(--border); border-radius:var(--r-xl); padding:24px; display:flex; flex-direction:column; gap:14px; transition:box-shadow .2s; }
.sb-tcard:hover { box-shadow:var(--sh-lg); }
.sb-tcard--dark { background:var(--navy-2); border-color:rgba(255,255,255,.07); }
.sb-tcard__stars { color:var(--gold); font-size:.8rem; letter-spacing:2px; }
.sb-tcard p { font-size:.9375rem; color:var(--text-2); line-height:1.7; flex:1; margin:0; }
.sb-tcard--dark p { color:rgba(255,255,255,.6); }
.sb-tcard__auth { display:flex; align-items:center; gap:11px; padding-top:14px; border-top:1px solid var(--border); }
.sb-tcard--dark .sb-tcard__auth { border-top-color:rgba(255,255,255,.07); }
.sb-tcard__av { width:40px; height:40px; border-radius:50%; flex-shrink:0; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; font-family:var(--f-head); font-size:.7rem; font-weight:800; color:#fff; }
.sb-tcard__av img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.sb-tcard__name { font-family:var(--f-head); font-size:.875rem; font-weight:700; color:var(--text); }
.sb-tcard--dark .sb-tcard__name { color:#fff; }
.sb-tcard__role { font-size:.76rem; color:var(--text-3); }
.sb-tcard--dark .sb-tcard__role { color:rgba(255,255,255,.36); }

/* ================================================================
   USE-CASE TABS
================================================================ */
.sb-usecase-section { background:#fff; padding:96px 0; }
.sb-usecase-tabs { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin:40px 0 48px; }
.sb-usecase-tab { font-family:var(--f-head); font-size:.875rem; font-weight:600; color:var(--text-3); background:transparent; border:1.5px solid var(--border); border-radius:99px; padding:9px 20px; cursor:pointer; transition:all .18s; outline:none; }
.sb-usecase-tab:hover  { border-color:var(--blue); color:var(--blue); background:var(--blue-l); }
.sb-usecase-tab.active { background:var(--navy); color:#fff; border-color:var(--navy); box-shadow:0 4px 16px rgba(15,23,42,.2); }
.sb-usecase-tab:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.sb-usecase-pane        { display:none; }
.sb-usecase-pane.active { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.sb-usecase-copy h3 { font-size:clamp(1.5rem,3vw,2.125rem); margin-bottom:16px; }
.sb-usecase-copy p  { font-size:1rem; color:var(--text-2); margin-bottom:28px; }
.sb-usecase-checklist { display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.sb-usecase-check { display:flex; align-items:flex-start; gap:12px; font-size:.9375rem; color:var(--text-2); line-height:1.6; }
.sb-usecase-check i { width:22px; height:22px; border-radius:6px; background:var(--mint-l); color:var(--mint); display:flex; align-items:center; justify-content:center; font-size:.7rem; flex-shrink:0; margin-top:2px; }
.sb-usecase-visual { background:var(--cream); border:1px solid var(--border); border-radius:var(--r-2xl); overflow:hidden; }
.sb-usecase-mock { padding:22px; display:flex; flex-direction:column; gap:10px; background:#fff; }
.sb-usecase-mock__header { display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid var(--border); }
.sb-usecase-mock__title  { font-family:var(--f-head); font-weight:700; font-size:.875rem; color:var(--text); }
.sb-usecase-agent-row { display:flex; align-items:center; gap:12px; background:var(--cream); border:1px solid var(--border); border-radius:11px; padding:11px 13px; }
.sb-usecase-agent-av  { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.82rem; flex-shrink:0; }
.sb-usecase-agent-name { font-family:var(--f-head); font-size:.78rem; font-weight:700; color:var(--text); }
.sb-usecase-agent-desc { font-size:.7rem; color:var(--text-3); }

/* ================================================================
   FAQ — on-brand accordion
   Icon: fa-plus rotates 45deg to X on open; ring becomes solid blue
================================================================ */
.sb-faq-section { background:var(--cream); padding:96px 0; }
.sb-faq-section .sb-faq-grid {
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:start;
}
.sb-faq-section .sb-faq-intro h2 { margin-bottom:14px; }
.sb-faq-section .sb-faq-intro p  { margin-bottom:0; font-size:1rem; color:var(--text-2); }
.sb-faq-section .sb-faq-list { display:flex; flex-direction:column; gap:8px; }

.sb-faq-section .sb-faq-item {
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
.sb-faq-section .sb-faq-item:hover { border-color:rgba(26,86,219,.22); }
.sb-faq-section .sb-faq-item[open] {
  border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-dim), 0 4px 18px rgba(26,86,219,.08);
}

/* Summary / question row */
.sb-faq-section .sb-faq-q {
  display:flex; align-items:center; justify-content:space-between;
  list-style:none;
  padding:18px 20px;
  cursor:pointer;
  -webkit-user-select:none; user-select:none;
  font-family:var(--f-head); font-size:.9375rem; font-weight:600;
  color:var(--text); gap:14px;
  line-height:1.4;
  transition:color .18s;
}
.sb-faq-section .sb-faq-q::-webkit-details-marker { display:none; }
.sb-faq-section .sb-faq-q::marker { display:none; }
.sb-faq-section .sb-faq-q:hover { color:var(--blue); }
.sb-faq-section .sb-faq-item[open] .sb-faq-q { color:var(--blue); }
.sb-faq-section .sb-faq-q:focus-visible {
  outline:2px solid var(--blue); outline-offset:-3px; border-radius:var(--r-lg);
}
.sb-faq-section .sb-faq-q span { flex:1; }

/* Icon circle */
.sb-faq-section .sb-faq-q i {
  flex-shrink:0;
  width:26px; height:26px; border-radius:50%;
  background:var(--blue-l);
  color:var(--blue);
  font-size:.72rem;
  display:flex; align-items:center; justify-content:center;
  transition:transform .28s cubic-bezier(.4,0,.2,1), background .18s, color .18s;
  pointer-events:none;
}
.sb-faq-section .sb-faq-item[open] .sb-faq-q i {
  transform:rotate(45deg);
  background:var(--blue);
  color:#fff;
}

/* Answer panel — shown natively by <details>, no display:none needed */
.sb-faq-section .sb-faq-a {
  padding:0 20px 20px;
  font-size:.9375rem;
  color:var(--text-2);
  line-height:1.72;
  border-top:1px solid rgba(26,86,219,.1);
}
.sb-faq-section .sb-faq-a p { margin:0; padding-top:16px; }

/* ================================================================
   FINAL CTA
================================================================ */
.sb-final-cta { background:linear-gradient(180deg,var(--cream),#E8EFFF); padding:96px 0; }
.sb-fcta-card { background:linear-gradient(135deg,#0F172A,#1A2640); border-radius:30px; border:1px solid rgba(255,255,255,.07); padding:64px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; position:relative; overflow:hidden; box-shadow:0 32px 80px rgba(15,23,42,.18); }
.sb-fcta-card::before { content:''; position:absolute; top:-120px; right:40px; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle,rgba(26,86,219,.22),transparent 60%); pointer-events:none; }
.sb-fcta-copy h2  { color:#fff; font-size:clamp(2rem,4vw,3rem); margin-bottom:14px; }
.sb-fcta-copy > p { color:rgba(255,255,255,.55); font-size:1.0625rem; margin-bottom:28px; }
.sb-fcta-btns     { display:flex; gap:10px; flex-wrap:wrap; }
.sb-fcta-note     { font-size:.8125rem; color:rgba(255,255,255,.28); margin-top:14px; }
.sb-fcta-visual   { position:relative; z-index:1; }
.sb-fcta-stats    { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.sb-fcta-stat     { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-lg); padding:18px; text-align:center; }
.sb-fcta-stat__val { font-family:var(--f-head); font-size:1.5rem; font-weight:900; color:var(--gold); }
.sb-fcta-stat__lbl { font-size:.75rem; color:rgba(255,255,255,.38); margin-top:4px; }
.sb-fcta-features-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sb-fcta-feature  { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:var(--r-md); padding:10px 12px; }
.sb-fcta-feature i    { color:var(--mint); font-size:.875rem; flex-shrink:0; }
.sb-fcta-feature span { font-size:.875rem; font-weight:500; color:rgba(255,255,255,.65); }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width:1100px) {
  .sb-fsc-card { width:620px; }
  .sb-ceo-card { padding:40px; }
}
@media (max-width:1024px) {
  .sb-hero__grid,.sb-app-scroll-grid,.sb-chip-grid,.sb-fcta-card,.sb-ceo-card { grid-template-columns:1fr; }
  .sb-hero__visual,.sb-app-scroll-col { max-width:540px; margin:0 auto; }
  .sb-hiw-cards { grid-template-columns:1fr 1fr; }
  .sb-usecase-pane.active { grid-template-columns:1fr; gap:36px; }
  .sb-faq-section .sb-faq-grid { grid-template-columns:1fr; gap:40px; }
  .sb-fcta-visual,.sb-ceo-stats-col { display:none; }
  .sb-fsc-card { width:580px; }
  .sb-replace-layout { grid-template-columns:1fr 40px 1fr; }
  .sb-testi-masonry-inner { grid-template-columns:1fr 1fr; }
  .sb-testi-masonry-col:nth-child(3) { display:none; }
  .sb-prompt-bg__feat--1,.sb-prompt-bg__feat--3,.sb-prompt-bg__feat--4 { display:none; }
}
@media (max-width:768px) {
  .sb-section { padding:64px 0; }
  .sb-hero { padding:56px 0 48px; }
  .sb-hero__ctas { flex-direction:column; }
  .sb-hero__ctas .btn { width:100%; justify-content:center; }
  .sb-fcta-card { padding:36px 24px; }
  .sb-fcta-btns { flex-direction:column; }
  .sb-fcta-btns .btn { width:100%; justify-content:center; }
  .sb-fsc-card { width:calc(100vw - 48px); min-height:auto; grid-template-columns:1fr; }
  .sb-fsc-card__copy { padding:28px; }
  .sb-fscroll-track { padding:8px 24px 20px; }
  .sb-fscroll-arr { display:none; }
  .sb-prompt-bg { display:none; }
  .sb-prompt-section { padding:72px 0 64px; }
  .sb-float-chip--1,.sb-float-chip--2 { display:none; }
  .sb-replace-layout { grid-template-columns:1fr; gap:24px; }
  .sb-replace-arrow { flex-direction:row; height:auto; }
  .sb-replace-arrow__line { width:100%; height:2px; min-height:0; }
  .sb-testi-masonry-inner { grid-template-columns:1fr; }
  .sb-testi-masonry-col:nth-child(2) { margin-top:0; }
  .sb-testi-masonry-col:nth-child(3) { display:flex; margin-top:0; }
  .sb-hiw-cards { grid-template-columns:1fr; }
  .sb-app-scroll-col { height:320px; }
  .sb-ceo-card { padding:28px; }
  .sb-faq-section .sb-faq-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .sb-wrap { padding:0 18px; }
  .sb-fcta-stats { grid-template-columns:1fr 1fr; }
  .sb-prompt-pills { gap:5px; }
  .sb-prompt-pill { font-size:.72rem; padding:6px 11px; }
  .sb-testi-masonry-inner { padding:0 18px; }
  h1 { font-size:2rem; }
  h2 { font-size:1.625rem; }
}

/* ──────────────────────────────────────────────
   MOCKUP-ALIGNED ADDITIONS: Announce bar, hero stats,
   Advantage grid, Module grid
   ────────────────────────────────────────────── */

/* Announcement bar */
.hp-announce{background:var(--blue,#1A56DB);color:#fff;text-align:center;padding:10px 16px;font-size:.84rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.hp-announce__star{opacity:.7}
.hp-announce a{color:#fff;text-decoration:underline;margin-left:6px;font-weight:600}
.hp-announce a:hover{opacity:.85}

/* Hero stat strip */
.hp-hero-stats{display:flex;align-items:center;justify-content:center;gap:0;margin-top:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:0;overflow:hidden}
.hp-hero-stat{flex:1;text-align:center;padding:14px 20px;position:relative}
.hp-hero-stat+.hp-hero-stat::before{content:'';position:absolute;left:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.12)}
.hp-hero-stat__lbl{font:700 .65rem/1 var(--f-head,system-ui);text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.45);margin-bottom:5px}
.hp-hero-stat__val{font:800 1.6rem/1 var(--f-head,system-ui);color:#fff;letter-spacing:-.02em}

/* Underline accent */
.hp-txt-underline{position:relative;display:inline-block}
.hp-txt-underline::after{content:'';position:absolute;left:0;bottom:-4px;width:100%;height:3px;background:var(--blue,#1A56DB);border-radius:2px}

/* Advantage grid */
.hp-advantage{background:#fff}
.hp-advantage__head{text-align:center;max-width:680px;margin:0 auto 48px}
.hp-advantage__head h2{margin-bottom:12px}
.hp-advantage__head p{font-size:1rem;color:var(--text-2)}
.hp-advantage__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hp-advantage-card{background:var(--cream,#F7F9FC);border:1.5px solid var(--border);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:0;transition:.2s ease}
.hp-advantage-card:hover{transform:translateY(-4px);border-color:var(--blue,#1A56DB)}
.hp-advantage-card__icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:.95rem;margin-bottom:16px}
.hp-advantage-card h3{font:700 1rem/1.3 var(--f-head,system-ui);color:var(--text);margin:0 0 8px}
.hp-advantage-card p{font-size:.88rem;color:var(--text-2);line-height:1.6;margin:0 0 18px;flex:1}
.hp-advantage-card__cta{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;border:1.5px solid var(--border);font:700 .84rem/1 var(--f-head,system-ui);color:var(--text);text-decoration:none;transition:.15s ease;background:#fff}
.hp-advantage-card__cta:hover{border-color:var(--blue,#1A56DB);color:var(--blue,#1A56DB);text-decoration:none}

/* Module grid */
.hp-module-grid__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;flex-wrap:wrap;gap:16px}
.hp-module-grid__head h2{margin:0}
.hp-module-grid__all{display:inline-flex;align-items:center;gap:8px;font:700 .9rem/1 var(--f-head,system-ui);color:var(--blue,#1A56DB);text-decoration:none;white-space:nowrap}
.hp-module-grid__all:hover{text-decoration:underline}
.hp-module-grid__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hp-module-card{background:#fff;border:1.5px solid var(--border);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;transition:.2s ease}
.hp-module-card:hover{transform:translateY(-4px);border-color:var(--blue,#1A56DB);text-decoration:none}
.hp-module-card__icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.hp-module-card__body{flex:1}
.hp-module-card__body h3{font:700 1.05rem/1.3 var(--f-head,system-ui);color:var(--text);margin:0 0 6px}
.hp-module-card__body p{font-size:.88rem;color:var(--text-2);line-height:1.55;margin:0}
.hp-module-card__foot{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border)}
.hp-module-card__explore{font:700 .84rem/1 var(--f-head,system-ui);display:inline-flex;align-items:center;gap:6px}
.hp-module-card__n{font-size:.78rem;color:var(--text-3)}

/* Responsive */
@media(max-width:1100px){
  .hp-advantage__grid{grid-template-columns:repeat(2,1fr)}
  .hp-module-grid__cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .hp-hero-stats{flex-direction:column;border-radius:14px}
  .hp-hero-stat+.hp-hero-stat::before{left:20%;top:0;height:1px;width:60%}
  .hp-advantage__grid{grid-template-columns:1fr}
  .hp-module-grid__cards{grid-template-columns:1fr}
  .hp-module-grid__head{flex-direction:column;align-items:flex-start}
  .hp-announce{font-size:.78rem}
}

/* ──────────────────────────────────────────────
   BLUE SHOWCASE SECTION — matches JSX home YellowShowcase re-skinned blue
   ────────────────────────────────────────────── */
.hp-showcase {
  padding: 80px 0; position: relative; overflow: hidden;
  background: var(--blue, #1A56DB);
}
.hp-showcase__bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(255,255,255,.1), transparent 50%);
  pointer-events: none;
}
.hp-showcase .sb-wrap { position: relative; }
.hp-showcase__top {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 16px;
}
.hp-showcase__main, .hp-showcase__auto {
  background: white; border-radius: 18px; padding: 28px;
}
.hp-showcase__main h3, .hp-showcase__auto h3 {
  font: 700 1.5rem/1.2 var(--f-head, system-ui); color: var(--text, #0B1020); margin: 0 0 8px;
  letter-spacing: -.02em;
}
.hp-showcase__main > p {
  font-size: .9rem; color: var(--text-2, #6B7180); max-width: 38ch; margin: 0 0 16px; line-height: 1.55;
}
.hp-showcase__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  border-radius: 999px; background: var(--text, #0B1020); color: white;
  font: 700 .84rem/1 var(--f-head, system-ui); text-decoration: none; margin-bottom: 18px;
}
.hp-showcase__btn:hover { text-decoration: none; opacity: .9; }
/* hub grid */
.hp-showcase__hub { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.hp-showcase__hub-center {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--cream, #F4F4EE); border: 1px solid var(--border, #E6E7EC);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hp-showcase__hub-mark {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue, #1A56DB);
  background-image: url('/wp-content/themes/startbuddi/assets/img/logo-collapsed.png');
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.hp-showcase__hub-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hp-showcase__hub-app {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font: 700 .8rem/1 var(--f-head, system-ui);
}
/* automation card */
.hp-showcase__auto-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.hp-showcase__auto-step {
  background: var(--cream, #F4F4EE); border: 1px solid var(--border, #E6E7EC);
  border-radius: 10px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  font: 600 .84rem/1.2 var(--f-head, system-ui); color: var(--text, #0B1020);
}
.hp-showcase__auto-icon {
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(26,83,255,.12); color: var(--blue, #1A56DB);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hp-showcase__auto-bar { background: white; border: 1px solid var(--border, #E6E7EC); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.hp-showcase__auto-line { height: 7px; border-radius: 4px; }
.hp-showcase__auto-line--blue { background: rgba(26,83,255,.25); width: 60%; }
.hp-showcase__auto-line--grey { background: var(--border, #E6E7EC); width: 85%; }
/* bottom 3 cards */
.hp-showcase__bottom {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.hp-showcase__sm-card {
  background: white; border-radius: 18px; padding: 24px;
}
.hp-showcase__sm-card h4 {
  font: 700 1rem/1.2 var(--f-head, system-ui); color: var(--text, #0B1020); margin: 0 0 14px;
}
.hp-showcase__sm-lbl {
  font-family: var(--f-mono, monospace); font-size: .65rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3, #9CA3AF); margin-bottom: 8px;
}
.hp-showcase__task-bars { display: flex; gap: 4px; align-items: flex-end; margin-bottom: 10px; }
.hp-showcase__task-bar { width: 14px; border-radius: 3px; background: var(--border, #E6E7EC); }
.hp-showcase__task-bars .hp-showcase__task-bar:nth-child(3) { background: var(--blue, #1A56DB); }
.hp-showcase__task-track {
  height: 8px; background: var(--border, #E6E7EC); border-radius: 4px;
}
.hp-showcase__task-fill {
  height: 100%; width: 44%; background: var(--blue, #1A56DB); border-radius: 4px;
}
.hp-showcase__insight {
  height: 10px; border-radius: 4px; margin-bottom: 6px;
}
.hp-showcase__insight--pink { background: rgba(255,100,130,.35); width: 70%; }
.hp-showcase__insight--yellow { background: rgba(250,204,21,.5); width: 85%; }
.hp-showcase__insight--grey { background: var(--border, #E6E7EC); width: 55%; }
.hp-showcase__chart-wrap { position: relative; height: 70px; }
.hp-showcase__chart-svg { width: 100%; height: 70px; }
.hp-showcase__chart-wrap span {
  position: absolute; right: 0; top: 0;
  font-size: .78rem; color: var(--text-3, #9CA3AF);
}

@media(max-width: 1100px) {
  .hp-showcase__top { grid-template-columns: 1fr; }
  .hp-showcase__bottom { grid-template-columns: 1fr; }
}
@media(max-width: 768px) {
  .hp-showcase { padding: 48px 0; }
  .hp-showcase__hub-apps { grid-template-columns: repeat(4, 1fr); }
}