/* ============================================================
   SocialBar Redesign Layer
   Brand-derived design tokens + sidebar + bento + theming.
   Loaded after style.css so it intentionally overrides legacy
   layout chrome while reusing the site's own brand identity.
   ============================================================ */

/* ---------- 1. DESIGN TOKENS (bold brand-deck identity) ---------- */
:root {
    /* Brand palette — deep purple dominant, electric lime accent */
    --sb-purple: #5127AF;       /* primary deep purple */
    --sb-purple-700: #431F93;
    --sb-purple-800: #36187A;
    --sb-purple-900: #271158;
    --sb-lime: #BCED08;         /* electric lime / chartreuse accent */
    --sb-lime-600: #A6D406;

    --sb-brand: #5127AF;        /* legacy alias → purple */
    --sb-brand-600: #431F93;
    --sb-brand-700: #36187A;
    --sb-secondary: #BCED08;    /* legacy alias → lime */
    --sb-accent: #BCED08;
    --sb-accent-pink: #BCED08;

    /* Light theme (default) — light pages: black on white, gray body */
    --sb-ink: #000000;          /* primary text on light */
    --sb-ink-soft: #1a1a1a;
    --sb-muted: #7F7F7F;        /* secondary / body text */
    --sb-surface: #ffffff;      /* cards on light areas */
    --sb-surface-2: #f4f2fa;    /* light page bg */
    --sb-surface-3: #ece7f8;
    --sb-border: #e3def2;

    /* Sidebar + topbar are DEEP PURPLE (dominant brand surface) */
    --sb-sidebar-bg: #5127AF;
    --sb-sidebar-ink: #ffffff;
    --sb-sidebar-muted: rgba(255,255,255,.62);
    --sb-sidebar-active-bg: rgba(188,237,8,.16);
    --sb-topbar-bg: rgba(81,39,175,.95);

    /* Purple-tinted shadows */
    --sb-shadow-sm: 0 1px 2px rgba(39,17,88,.10), 0 1px 3px rgba(81,39,175,.10);
    --sb-shadow-md: 0 6px 18px rgba(81,39,175,.16), 0 2px 6px rgba(39,17,88,.10);
    --sb-shadow-lg: 0 22px 48px rgba(81,39,175,.28), 0 6px 16px rgba(39,17,88,.14);
    --sb-glow: 0 0 0 3px rgba(188,237,8,.55);

    /* Geometry / motion — squarer, deck-like rectangles */
    --sb-radius: 6px;
    --sb-radius-sm: 4px;
    --sb-sidebar-w: 280px;
    --sb-sidebar-w-collapsed: 76px;
    --sb-topbar-h: 60px;
    --sb-ease: cubic-bezier(.4,0,.2,1);
    --sb-dur: .28s;

    --sb-font-head: 'Space Grotesk', 'DM Sans', sans-serif;
    --sb-font-body: 'DM Sans', sans-serif;
    color-scheme: light;
}

/* Dark theme: deep-purple world, lime accents pop harder. */
html[data-theme="dark"] {
    --sb-ink: #ffffff;
    --sb-ink-soft: #ECEAFB;
    --sb-muted: #b9b2d6;
    --sb-surface: #2a1769;          /* purple-tinted cards */
    --sb-surface-2: #271158;        /* deep purple page bg */
    --sb-surface-3: #36187A;
    --sb-border: rgba(188,237,8,.18);
    --sb-sidebar-bg: #1d0f47;
    --sb-sidebar-ink: #ffffff;
    --sb-sidebar-muted: rgba(255,255,255,.6);
    --sb-sidebar-active-bg: rgba(188,237,8,.20);
    --sb-topbar-bg: rgba(29,15,71,.95);
    --sb-shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --sb-shadow-md: 0 6px 18px rgba(0,0,0,.5);
    --sb-shadow-lg: 0 22px 48px rgba(0,0,0,.6);
    color-scheme: dark;
}

/* Smooth theme transition (suppressed before first paint by JS) */
html.sb-theme-ready,
html.sb-theme-ready body,
html.sb-theme-ready .sb-sidebar,
html.sb-theme-ready .sb-topbar,
html.sb-theme-ready .sb-bento,
html.sb-theme-ready .feature-box,
html.sb-theme-ready .mfeature-box {
    transition: background-color var(--sb-dur) var(--sb-ease),
                color var(--sb-dur) var(--sb-ease),
                border-color var(--sb-dur) var(--sb-ease),
                box-shadow var(--sb-dur) var(--sb-ease);
}

/* ---------- 2. GLOBAL SHELL ---------- */
html, body { background: var(--sb-surface-2); }

body.sb-shell {
    margin: 0;
    color: var(--sb-ink);
    font-family: var(--sb-font-body);
    padding-left: var(--sb-sidebar-w);
    transition: padding-left var(--sb-dur) var(--sb-ease);
    min-height: 100vh;
    overflow-x: hidden;
}
body.sb-shell.sb-collapsed { padding-left: var(--sb-sidebar-w-collapsed); }

/* Dark surfaces for legacy section blocks */
html[data-theme="dark"] body,
html[data-theme="dark"] #info,
html[data-theme="dark"] #services,
html[data-theme="dark"] #ifeatures,
html[data-theme="dark"] #page-head { background: var(--sb-surface-2); color: var(--sb-ink); }

/* Visible focus rings everywhere (accessibility) */
.sb-sidebar a:focus-visible,
.sb-sidebar button:focus-visible,
.sb-topbar button:focus-visible,
.sb-bento:focus-visible,
a.sb-bento:focus-visible {
    outline: none;
    box-shadow: var(--sb-glow);
    border-radius: var(--sb-radius-sm);
}

/* ---------- 3. FIXED LEFT SIDEBAR ---------- */
.sb-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sb-sidebar-w);
    background: var(--sb-sidebar-bg);
    border-right: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow-sm);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: width var(--sb-dur) var(--sb-ease), transform var(--sb-dur) var(--sb-ease);
    font-family: var(--sb-font-body);
}
body.sb-collapsed .sb-sidebar { width: var(--sb-sidebar-w-collapsed); }

.sb-sidebar__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    min-height: var(--sb-topbar-h);
    border-bottom: 1px solid var(--sb-border);
}
.sb-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 1 1 auto; min-width: 0; }
.sb-logo img { height: 34px; width: auto; display: block; }
html[data-theme="dark"] .sb-logo img { filter: brightness(0) invert(1); }
.sb-logo__text {
    font-family: var(--sb-font-head);
    font-weight: 500;
    font-size: 18px;
    color: var(--sb-ink);
    white-space: nowrap;
}
body.sb-collapsed .sb-logo__text { display: none; }

/* Theme toggle button (sun/moon swap) */
.sb-theme-toggle {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--sb-border);
    background: var(--sb-surface-2);
    color: var(--sb-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.sb-theme-toggle:hover { border-color: var(--sb-brand); color: var(--sb-brand); }
.sb-theme-toggle .fa { position: absolute; transition: opacity var(--sb-dur) var(--sb-ease), transform var(--sb-dur) var(--sb-ease); }
.sb-theme-toggle .sb-sun { opacity: 1; transform: rotate(0) scale(1); }
.sb-theme-toggle .sb-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
html[data-theme="dark"] .sb-theme-toggle .sb-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
html[data-theme="dark"] .sb-theme-toggle .sb-moon { opacity: 1; transform: rotate(0) scale(1); }
body.sb-collapsed .sb-sidebar__header .sb-theme-toggle { display: none; }

/* Collapse / expand rail toggle */
.sb-rail-toggle {
    margin: 10px 16px 4px;
    width: calc(100% - 32px);
    height: 38px;
    border: 1px solid var(--sb-border);
    background: var(--sb-surface-2);
    color: var(--sb-muted);
    border-radius: var(--sb-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
}
.sb-rail-toggle:hover { color: var(--sb-brand); border-color: var(--sb-brand); }
.sb-rail-toggle .fa { transition: transform var(--sb-dur) var(--sb-ease); }
body.sb-collapsed .sb-rail-toggle .sb-rail-label { display: none; }
body.sb-collapsed .sb-rail-toggle .fa { transform: rotate(180deg); }

/* Scrollable nav body */
.sb-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px 24px;
    scrollbar-width: thin;
}
.sb-nav::-webkit-scrollbar { width: 8px; }
.sb-nav::-webkit-scrollbar-thumb { background: var(--sb-border); border-radius: 8px; }

.sb-group { margin-bottom: 4px; }
.sb-group__label {
    display: block;
    padding: 6px 12px 4px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sb-muted);
    font-weight: 600;
}
body.sb-collapsed .sb-group__label { display: none; }

/* Row (link or group header button) */
.sb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--sb-radius-sm);
    color: var(--sb-sidebar-ink);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 14.5px;
    line-height: 1.2;
    text-align: left;
    position: relative;
    transition: background-color .18s var(--sb-ease), color .18s var(--sb-ease);
}
.sb-item:hover { background: var(--sb-surface-2); color: var(--sb-brand); text-decoration: none; }
.sb-item__icon { flex: 0 0 22px; width: 22px; text-align: center; font-size: 16px; color: var(--sb-muted); }
.sb-item:hover .sb-item__icon,
.sb-item.is-open .sb-item__icon { color: var(--sb-brand); }
.sb-item__text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-item__caret { flex: 0 0 auto; font-size: 12px; color: var(--sb-muted); transition: transform var(--sb-dur) var(--sb-ease); }
.sb-item.is-open .sb-item__caret { transform: rotate(180deg); }

/* Active state */
.sb-item[aria-current="page"] {
    background: var(--sb-sidebar-active-bg);
    color: var(--sb-brand);
    font-weight: 600;
}
.sb-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sb-brand);
}
.sb-item[aria-current="page"] .sb-item__icon { color: var(--sb-brand); }

/* Collapsed rail: icon-only with tooltip */
body.sb-collapsed .sb-item__text,
body.sb-collapsed .sb-item__caret { display: none; }
body.sb-collapsed .sb-item { justify-content: center; padding: 11px 0; }
body.sb-collapsed .sb-submenu { display: none !important; }
body.sb-collapsed .sb-item[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--sb-ink);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1200;
    box-shadow: var(--sb-shadow-md);
}

/* Submenu with smooth flow-in (height animated by JS via max-height) */
.sb-submenu {
    list-style: none;
    margin: 2px 0 2px;
    padding: 0 0 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--sb-dur) var(--sb-ease), opacity var(--sb-dur) var(--sb-ease);
    opacity: .4;
}
.sb-item.is-open + .sb-submenu { opacity: 1; }
.sb-submenu .sb-item { padding-left: 30px; font-size: 13.5px; }
.sb-submenu .sb-item__icon { font-size: 13px; }
.sb-submenu .sb-submenu .sb-item { padding-left: 46px; }

/* Sidebar footer (account / language) */
.sb-sidebar__footer {
    border-top: 1px solid var(--sb-border);
    padding: 10px;
}
body.sb-collapsed .sb-sidebar__footer .sb-lang,
body.sb-collapsed .sb-sidebar__footer .sb-cartcount { display: none; }
.sb-lang select {
    width: 100%;
    margin-top: 8px;
    background: var(--sb-surface-2);
    color: var(--sb-ink);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
    padding: 8px 10px;
    font-size: 13px;
}
.sb-cartcount {
    margin-left: auto;
    background: var(--sb-brand);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- 4. MOBILE TOP BAR + DRAWER ---------- */
.sb-topbar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--sb-topbar-h);
    background: var(--sb-topbar-bg);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--sb-border);
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    z-index: 1100;
}
.sb-topbar__btn {
    width: 44px; height: 44px;
    border: 0; background: none; cursor: pointer;
    color: var(--sb-ink);
    font-size: 20px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
}
.sb-topbar__btn:hover { background: var(--sb-surface-2); color: var(--sb-brand); }
.sb-topbar .sb-logo { justify-content: center; }
.sb-topbar .sb-logo img { height: 30px; }
.sb-overlay {
    position: fixed; inset: 0;
    background: rgba(20,18,30,.5);
    opacity: 0; visibility: hidden;
    transition: opacity var(--sb-dur) var(--sb-ease), visibility var(--sb-dur) var(--sb-ease);
    z-index: 1050;
}
body.sb-drawer-open .sb-overlay { opacity: 1; visibility: visible; }

/* ---------- 5. BENTO LAYOUT ---------- */
.sb-bento-wrap { padding: 28px clamp(16px, 4vw, 40px); max-width: 1320px; margin: 0 auto; }
.sb-bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

/* Generic bento card */
.sb-bento {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 24px;
    box-shadow: var(--sb-shadow-sm);
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--sb-ink);
    transition: transform .22s var(--sb-ease), box-shadow .22s var(--sb-ease), border-color .22s var(--sb-ease);
    position: relative;
    overflow: hidden;
}
a.sb-bento:hover, .sb-bento.is-link:hover {
    transform: translateY(-4px);
    box-shadow: var(--sb-shadow-lg);
    border-color: var(--sb-brand);
}
.sb-bento--lg { grid-column: span 8; }
.sb-bento--full { grid-column: span 12; }
.sb-bento--half { grid-column: span 6; }
.sb-bento__icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    background: var(--sb-sidebar-active-bg);
    color: var(--sb-brand);
    margin-bottom: 14px;
}
.sb-bento__title { font-family: var(--sb-font-head); font-size: 19px; font-weight: 500; margin: 0 0 6px; color: var(--sb-ink); }
.sb-bento__desc { color: var(--sb-muted); font-size: 14px; line-height: 1.5; margin: 0; }
.sb-bento__stat { font-family: var(--sb-font-head); font-size: 34px; font-weight: 500; color: var(--sb-brand); line-height: 1; }

/* Hero / CTA bento */
.sb-bento--hero {
    grid-column: span 12;
    background: linear-gradient(135deg, var(--sb-brand) 0%, var(--sb-secondary) 100%);
    color: #fff;
    border: 0;
    padding: 40px clamp(24px,4vw,48px);
}
.sb-bento--hero .sb-bento__title { color: #fff; font-size: clamp(26px,3vw,38px); }
.sb-bento--hero .sb-bento__desc { color: rgba(255,255,255,.9); font-size: 16px; max-width: 60ch; }
.sb-cta-btn {
    align-self: flex-start;
    margin-top: 18px;
    background: #fff;
    color: var(--sb-brand);
    border-radius: 999px;
    padding: 12px 26px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--sb-shadow-md);
    transition: transform .2s var(--sb-ease);
}
.sb-cta-btn:hover { transform: translateY(-2px); color: var(--sb-brand-700); }

/* Reskin legacy service / feature boxes as bento cards in place */
.feature-box, .mfeature-box {
    background: var(--sb-surface) !important;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow-sm);
    transition: transform .22s var(--sb-ease), box-shadow .22s var(--sb-ease), border-color .22s var(--sb-ease);
}
.feature-box:hover, .mfeature-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--sb-shadow-md);
    border-color: var(--sb-brand);
}
html[data-theme="dark"] .feature-title,
html[data-theme="dark"] .mfeature-title,
html[data-theme="dark"] .feature-details,
html[data-theme="dark"] .row-title,
html[data-theme="dark"] .info-text { color: var(--sb-ink) !important; }

/* Legacy section spacing tune so content breathes next to sidebar */
#info, #services, #ifeatures, #page-head { background: transparent; }

/* ---------- 6. RESPONSIVE ---------- */
@media (max-width: 992px) {
    body.sb-shell { padding-left: 0; padding-top: var(--sb-topbar-h); }
    body.sb-shell.sb-collapsed { padding-left: 0; }
    .sb-topbar { display: flex; }
    .sb-sidebar {
        transform: translateX(-100%);
        width: var(--sb-sidebar-w) !important;
        box-shadow: var(--sb-shadow-lg);
    }
    body.sb-drawer-open .sb-sidebar { transform: translateX(0); }
    /* On mobile the rail-toggle is irrelevant; groups become accordions */
    .sb-rail-toggle { display: none; }
    body.sb-collapsed .sb-item__text,
    body.sb-collapsed .sb-item__caret { display: inline; }
    body.sb-collapsed .sb-item { justify-content: flex-start; padding: 10px 12px; }
    .sb-bento-grid { gap: 14px; }
    .sb-bento, .sb-bento--lg, .sb-bento--half { grid-column: span 6; }
    .sb-bento--hero, .sb-bento--full { grid-column: span 12; }
}
@media (max-width: 600px) {
    .sb-bento, .sb-bento--lg, .sb-bento--half, .sb-bento--full { grid-column: span 12; }
    .sb-bento-wrap { padding: 18px 14px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Tap targets >= 44px on touch */
@media (pointer: coarse) {
    .sb-item, .sb-topbar__btn, .sb-theme-toggle, .sb-rail-toggle { min-height: 44px; }
}

/* ============================================================
   7. BRAND-DECK IDENTITY LAYER
   Bold deep-purple + electric-lime. All-caps geometric
   headlines, structured body, dark purple sidebar, lime
   accents, pill CTAs, deck-style dividers + logo mark.
   Layers over existing structure — layouts untouched.
   ============================================================ */

/* ---------- 7.1 TYPOGRAPHY ---------- */
body.sb-shell,
body { font-family: var(--sb-font-body); letter-spacing: .005em; }

/* Headlines: all-caps, tight, heavy, geometric. Large display scale. */
h1, h2, h3,
.sb-bento__title,
.page-title, .feature-title, .mfeature-title, .row-title,
.info-title, .section-title {
    font-family: var(--sb-font-head) !important;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.02;
}

/* Display-scale headline ramp (deck energy, ~90–105pt top end) */
h1, .page-title { font-size: clamp(2.6rem, 6vw, 6.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }

/* Body / secondary text: structured, airy, gray */
p, li, .sb-bento__desc, .feature-details, .info-text, .text, td, .form-control {
    font-family: var(--sb-font-body);
    line-height: 1.75;
    color: var(--sb-muted);
    letter-spacing: .01em;
}
.sb-bento__desc { font-size: 14.5px; line-height: 1.7; }

/* Small structured eyebrow labels */
.sb-group__label, .sb-eyebrow {
    font-family: var(--sb-font-head);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 11px;
}

/* ---------- 7.2 DEEP-PURPLE SIDEBAR (dominant brand surface) ---------- */
.sb-sidebar { color: var(--sb-sidebar-ink); border-right: 1px solid rgba(188,237,8,.14); }
.sb-sidebar__header { border-bottom: 1px solid rgba(255,255,255,.12); }
.sb-logo__text {
    color: #fff;
    font-family: var(--sb-font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 17px;
}
.sb-sidebar .sb-logo img { display: none; } /* swap raster logo for custom mark */

/* Custom overlapping abstract logo mark (white + lime shapes) */
.sb-logo::before {
    content: "";
    flex: 0 0 auto;
    width: 30px; height: 30px;
    position: relative;
    background:
        radial-gradient(circle at 30% 35%, #fff 0 42%, transparent 43%),
        radial-gradient(circle at 70% 65%, var(--sb-lime) 0 42%, transparent 43%);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
    mix-blend-mode: normal;
}

/* Nav items on purple */
.sb-item { color: rgba(255,255,255,.86); font-weight: 500; }
.sb-item__icon { color: var(--sb-sidebar-muted); }
.sb-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.sb-item:hover .sb-item__icon { color: var(--sb-lime); }
.sb-group__label { color: var(--sb-sidebar-muted); }
.sb-item__caret { color: var(--sb-sidebar-muted); }

/* Active item: lime marker + lime text — high-energy accent */
.sb-item[aria-current="page"] {
    background: var(--sb-sidebar-active-bg);
    color: var(--sb-lime);
    font-weight: 700;
}
.sb-item[aria-current="page"] .sb-item__icon { color: var(--sb-lime); }
.sb-item[aria-current="page"]::before { background: var(--sb-lime); width: 4px; }
.sb-item.is-open .sb-item__icon,
.sb-item.is-open .sb-item__caret { color: var(--sb-lime); }

/* Rail / theme toggles on purple */
.sb-rail-toggle {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.8);
}
.sb-rail-toggle:hover { color: var(--sb-lime); border-color: var(--sb-lime); }
.sb-theme-toggle {
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
    color: #fff;
}
.sb-theme-toggle:hover { border-color: var(--sb-lime); color: var(--sb-lime); }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }

/* Sidebar footer + language + cart */
.sb-sidebar__footer { border-top: 1px solid rgba(255,255,255,.12); }
.sb-lang select {
    background: rgba(255,255,255,.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
}
.sb-cartcount { background: var(--sb-lime); color: var(--sb-purple-900); font-weight: 700; }

/* Collapsed-rail tooltip uses purple */
body.sb-collapsed .sb-item[data-tip]:hover::after { background: var(--sb-purple-900); }

/* ---------- 7.3 PURPLE TOPBAR (mobile) ---------- */
.sb-topbar { border-bottom: 1px solid rgba(188,237,8,.18); }
.sb-topbar__btn { color: #fff; }
.sb-topbar__btn:hover { background: rgba(255,255,255,.1); color: var(--sb-lime); }
.sb-topbar .sb-logo img { display: none; }
.sb-topbar .sb-logo::before { width: 26px; height: 26px; }

/* ---------- 7.4 HERO BENTO = BRAND-DECK COVER ---------- */
.sb-bento--hero {
    background: var(--sb-purple);
    color: #fff;
    border: 0;
    position: relative;
    overflow: hidden;
    padding: clamp(40px,5vw,72px) clamp(28px,4vw,56px);
    border-radius: var(--sb-radius);
}
/* Off-center lime geometric accent shapes (deck energy) */
.sb-bento--hero::after {
    content: "";
    position: absolute;
    right: -60px; bottom: -60px;
    width: 280px; height: 280px;
    background:
        radial-gradient(circle at 35% 35%, var(--sb-lime) 0 38%, transparent 39%),
        radial-gradient(circle at 70% 70%, rgba(255,255,255,.14) 0 40%, transparent 41%);
    opacity: .9;
    pointer-events: none;
}
.sb-bento--hero .sb-bento__title {
    color: #fff;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    max-width: 16ch;
    position: relative; z-index: 1;
}
/* lime highlight on a key word — set via inline <span class="sb-hl">.
   On dark/purple surfaces the word turns lime. On light surfaces
   (white sections) lime-on-white is too weak, so there it gets a
   thick lime underline accent while the text stays ink/purple —
   keeping the high-energy lime read at full contrast everywhere. */
.sb-hl {
    color: var(--sb-purple);
    background-image: linear-gradient(var(--sb-lime), var(--sb-lime));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% 0.32em;
    padding: 0 .04em;
}
/* On known-dark contexts, drop the underline and go full lime text. */
.sb-bento--hero .sb-hl,
#page-head .sb-hl,
.info-details .sb-hl,
[data-theme="dark"] .sb-hl {
    color: var(--sb-lime);
    background-image: none;
    padding: 0;
}
.sb-bento--hero .sb-bento__desc {
    color: rgba(255,255,255,.82);
    font-size: 16px; line-height: 1.7; max-width: 56ch;
    position: relative; z-index: 1;
}
.sb-bento--hero .sb-bento__icon { background: rgba(188,237,8,.2); color: var(--sb-lime); }

/* Pill CTA — lime fill, purple text (primary deck CTA) */
.sb-cta-btn {
    background: var(--sb-lime);
    color: var(--sb-purple-900);
    border-radius: 999px;
    padding: 13px 30px;
    font-family: var(--sb-font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 13.5px;
    box-shadow: none;
    position: relative; z-index: 1;
}
.sb-cta-btn:hover { transform: translateY(-2px); color: var(--sb-purple-900); background: #cdf72a; }

/* ---------- 7.5 BENTO CARDS — structured, deck-like ---------- */
.sb-bento {
    border-radius: var(--sb-radius);
    border: 1px solid var(--sb-border);
}
a.sb-bento:hover, .sb-bento.is-link:hover {
    border-color: var(--sb-purple);
    box-shadow: var(--sb-shadow-lg);
}
.sb-bento__icon {
    border-radius: var(--sb-radius-sm);
    background: var(--sb-purple);
    color: var(--sb-lime);
}
.sb-bento__title { color: var(--sb-ink); }
.sb-bento__stat { color: var(--sb-purple); font-family: var(--sb-font-head); }
/* lime top-edge accent on hover for card = deck pop */
a.sb-bento::before, .sb-bento.is-link::before {
    content: "";
    position: absolute; left: 0; top: 0; height: 4px; width: 100%;
    background: var(--sb-lime);
    transform: scaleX(0); transform-origin: left;
    transition: transform .25s var(--sb-ease);
}
a.sb-bento:hover::before, .sb-bento.is-link:hover::before { transform: scaleX(1); }

/* ---------- 7.6 THIN HORIZONTAL DIVIDER LINES ---------- */
hr, .sb-divider {
    border: 0;
    height: 1px;
    background: var(--sb-border);
    margin: 28px 0;
}
.sb-divider--lime { background: var(--sb-lime); height: 2px; width: 64px; }

/* ---------- 7.7 SOCIAL ICONS AS SMALL FILLED CIRCLES ---------- */
.social-icons a, .footer-social a, .sb-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--sb-purple);
    color: #fff !important;
    margin: 0 5px 0 0;
    transition: background .2s var(--sb-ease), transform .2s var(--sb-ease);
    font-size: 15px;
}
.social-icons a:hover, .footer-social a:hover, .sb-social a:hover {
    background: var(--sb-lime); color: var(--sb-purple-900) !important; transform: translateY(-2px);
}

/* ---------- 7.8 LEGACY BUTTONS → PILL DECK CTAS ---------- */
.btn, .btn-primary, button[type="submit"], input[type="submit"], .order-btn, .buy-btn {
    border-radius: 999px !important;
    font-family: var(--sb-font-head);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    border: 0;
}
.btn-primary, button[type="submit"], input[type="submit"], .order-btn, .buy-btn {
    background: var(--sb-purple) !important;
    color: #fff !important;
}
.btn-primary:hover, button[type="submit"]:hover, input[type="submit"]:hover,
.order-btn:hover, .buy-btn:hover {
    background: var(--sb-purple-700) !important;
    color: #fff !important;
}
/* Lime secondary / accent button variant */
.btn-accent, .btn-lime {
    background: var(--sb-lime) !important;
    color: var(--sb-purple-900) !important;
}

/* ---------- 7.9 LEGACY HEADER / PAGE-HEAD AS PURPLE DECK BANNER ---------- */
#page-head, #header-holder #page-head {
    background: var(--sb-purple) !important;
    color: #fff !important;
}
#page-head .page-title, #page-head h1, #page-head h2 { color: #fff !important; }
#page-head .text, #page-head p { color: rgba(255,255,255,.82) !important; }

/* Legacy feature / service boxes: white cards, black titles, gray body */
.feature-box, .mfeature-box { border-radius: var(--sb-radius) !important; }
.feature-title, .mfeature-title, .row-title { color: var(--sb-ink) !important; }
.feature-details, .info-text { color: var(--sb-muted) !important; }
.feature-box:hover, .mfeature-box:hover { border-color: var(--sb-purple) !important; }

/* Links pick up lime on hover (high-energy) */
a { transition: color .15s var(--sb-ease); }
a:hover { color: var(--sb-purple); }

/* Rectangular image containers — squared deck frames */
.feature-box img, .mfeature-box img, .service-img img, .rect-frame img {
    border-radius: var(--sb-radius-sm);
}

/* Dark theme: keep legacy text readable on purple surfaces */
html[data-theme="dark"] .feature-box,
html[data-theme="dark"] .mfeature-box { background: var(--sb-surface) !important; }
html[data-theme="dark"] .feature-title,
html[data-theme="dark"] .mfeature-title,
html[data-theme="dark"] .row-title { color: #fff !important; }
html[data-theme="dark"] .feature-details,
html[data-theme="dark"] .info-text,
html[data-theme="dark"] p, html[data-theme="dark"] li { color: var(--sb-muted) !important; }
html[data-theme="dark"] .sb-bento__title { color: #fff; }

/* ============================================================
   8. AUTH PAGES (signin.php / signup.php — fullpage, no sidebar)
   They load redesign-head so tokens apply; here we restyle the
   split-screen auth layout into the deep-purple + lime brand.
   ============================================================ */

/* Left promo panel → deep purple deck */
.info-slider-holder { background: var(--sb-purple) !important; }
.info-slider-holder h6,
.info-slider-holder .bold-title { color: #fff !important; }
.info-slider-holder .bold-title span { color: var(--sb-lime) !important; }
.info-slider-holder h6 { letter-spacing: .14em; text-transform: uppercase; font-family: var(--sb-font-head); }
.info-slider-holder .bold-title {
    font-family: var(--sb-font-head);
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.05;
}

/* Custom overlapping logo mark on the auth screen */
.website-logo .logo {
    background:
        radial-gradient(circle at 30% 35%, var(--sb-purple) 0 42%, transparent 43%),
        radial-gradient(circle at 70% 65%, var(--sb-lime) 0 42%, transparent 43%) !important;
    border-radius: 6px;
    width: 40px !important;
    height: 40px !important;
}

/* Form column */
.form-holder { background: var(--sb-surface) !important; }
.signin-signup-form .form-title { color: var(--sb-ink); font-family: var(--sb-font-head); }
.form-holder .menu-holder ul.main-links li a.normal-link { color: var(--sb-muted); }
.form-holder .menu-holder ul.main-links li a.normal-link:hover { color: var(--sb-purple); }
.form-holder .menu-holder ul.main-links li a.sign-button,
.sign-button {
    background: var(--sb-purple) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-family: var(--sb-font-head);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
}
.form-holder .menu-holder ul.main-links li a.sign-button:hover { background: var(--sb-purple-700) !important; }

/* Inputs */
.form-text input, .signin-signup-form input[type="text"],
.signin-signup-form input[type="password"], .signin-signup-form input[type="email"] {
    border-radius: var(--sb-radius-sm) !important;
    border: 1px solid var(--sb-border) !important;
}
.form-text input:focus { outline: none; border-color: var(--sb-purple) !important; box-shadow: var(--sb-glow); }

/* Primary submit (.ybtn-purple) → lime-on-purple pill, brand-aligned */
.ybtn { border-radius: 999px !important; font-family: var(--sb-font-head); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.ybtn-purple { background-color: var(--sb-purple) !important; color: #fff !important; }
.ybtn-purple:hover, .ybtn-purple:focus { background-color: var(--sb-purple-700) !important; color: #fff !important; }
.ybtn-purple-text { color: var(--sb-purple) !important; }
.ybtn-purple-text:hover, .ybtn-purple-text:focus { color: var(--sb-purple-700) !important; }
.ybtn-pink { background-color: var(--sb-lime) !important; color: var(--sb-purple-900) !important; }
.ybtn-pink:hover, .ybtn-pink:focus { background-color: #cdf72a !important; color: var(--sb-purple-900) !important; }

/* Social login buttons keep their brand colors but get pill geometry */
.social-login li a.btn-social { border-radius: 999px !important; font-family: var(--sb-font-head); letter-spacing: .02em; }

/* Forgot-password link */
.signin-signup-form a { color: var(--sb-purple); }
.signin-signup-form a:hover { color: var(--sb-purple-700); }

/* ============================================================
   9. BLOG — listing (blogs.php) + article template (blog-article.php)
   Deep-purple + lime, all-caps headlines, structured body,
   rectangular off-center image frames. Used by all future posts.
   ============================================================ */

.sb-blog-wrap, .sb-article {
    padding: clamp(24px,4vw,48px) clamp(16px,4vw,40px) 64px;
    max-width: 1180px;
    margin: 0 auto;
}

/* ---- shared bits ---- */
.sb-blog-cat {
    display: inline-block;
    font-family: var(--sb-font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sb-purple);
    background: var(--sb-sidebar-active-bg);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.sb-blog-cat--onpurple { color: var(--sb-purple-900); background: var(--sb-lime); }
.sb-blog-meta { font-size: 13px; color: var(--sb-muted); font-family: var(--sb-font-body); }
.sb-blog-meta .sb-dot { margin: 0 7px; opacity: .6; }
.sb-blog-meta--onpurple { color: rgba(255,255,255,.78); }
.sb-blog-readmore {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px;
    font-family: var(--sb-font-head);
    font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--sb-purple);
}
.sb-blog-readmore .fa { transition: transform .2s var(--sb-ease); }
a:hover .sb-blog-readmore .fa { transform: translateX(4px); }

/* abstract overlapping logo-mark used as image placeholder in frames */
.sb-blog-feature__mark, .sb-blog-card__mark, .sb-article-hero__mark {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 32% 38%, rgba(255,255,255,.9) 0 22%, transparent 23%),
        radial-gradient(circle at 64% 60%, var(--sb-lime) 0 24%, transparent 25%);
    opacity: .92;
}

/* ---- listing header ---- */
.sb-blog-head { margin-bottom: 36px; }
.sb-eyebrow {
    display: inline-block;
    font-family: var(--sb-font-head);
    font-size: 12px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--sb-purple); margin-bottom: 12px;
}
.sb-blog-title {
    font-family: var(--sb-font-head);
    text-transform: uppercase; font-weight: 700;
    letter-spacing: -0.01em; line-height: 1.02;
    font-size: clamp(2.4rem,5vw,4.6rem);
    color: var(--sb-ink); margin: 0 0 14px;
    max-width: 18ch;
}
.sb-blog-sub { font-size: 17px; line-height: 1.7; color: var(--sb-muted); max-width: 60ch; margin: 0 0 18px; }

/* ---- featured post ---- */
.sb-blog-feature {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 40px;
    transition: transform .22s var(--sb-ease), box-shadow .22s var(--sb-ease), border-color .22s var(--sb-ease);
}
.sb-blog-feature:hover { transform: translateY(-4px); box-shadow: var(--sb-shadow-lg); border-color: var(--sb-purple); }
.sb-blog-feature__media { position: relative; background: var(--sb-purple); min-height: 300px; }
.sb-blog-feature__body { padding: clamp(24px,3vw,40px); display: flex; flex-direction: column; justify-content: center; }
.sb-blog-feature__title {
    font-family: var(--sb-font-head);
    text-transform: uppercase; font-weight: 700; letter-spacing: -0.01em; line-height: 1.05;
    font-size: clamp(1.6rem,2.6vw,2.4rem); color: var(--sb-ink); margin: 0 0 12px;
}
.sb-blog-feature__excerpt { font-size: 15.5px; line-height: 1.7; color: var(--sb-muted); margin: 0 0 16px; }

/* ---- post grid ---- */
.sb-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sb-blog-card {
    display: flex; flex-direction: column;
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    overflow: hidden;
    text-decoration: none;
    transition: transform .22s var(--sb-ease), box-shadow .22s var(--sb-ease), border-color .22s var(--sb-ease);
}
.sb-blog-card:hover { transform: translateY(-4px); box-shadow: var(--sb-shadow-lg); border-color: var(--sb-purple); }
.sb-blog-card__media { position: relative; background: var(--sb-purple); aspect-ratio: 16/9; }
.sb-blog-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.sb-blog-card__title {
    font-family: var(--sb-font-head);
    text-transform: uppercase; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1;
    font-size: 18px; color: var(--sb-ink); margin: 0 0 10px;
}
.sb-blog-card__excerpt { font-size: 14px; line-height: 1.65; color: var(--sb-muted); margin: 0 0 12px; flex: 1 1 auto; }

/* ---- newsletter CTA ---- */
.sb-blog-cta {
    margin-top: 48px;
    background: var(--sb-purple);
    border-radius: var(--sb-radius);
    padding: clamp(28px,4vw,44px);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
    position: relative; overflow: hidden;
}
.sb-blog-cta__title { font-family: var(--sb-font-head); text-transform: uppercase; font-weight: 700; color: #fff; margin: 0 0 8px; font-size: clamp(1.4rem,2.4vw,2rem); }
.sb-blog-cta__sub { color: rgba(255,255,255,.82); margin: 0; font-size: 15px; }
.sb-blog-cta__form { display: flex; gap: 10px; flex: 0 1 auto; }
.sb-blog-cta__form input {
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.1);
    color: #fff;
    border-radius: 999px;
    padding: 12px 18px;
    min-width: 200px;
    font-family: var(--sb-font-body);
}
.sb-blog-cta__form input::placeholder { color: rgba(255,255,255,.6); }
.sb-blog-cta__form input:focus { outline: none; border-color: var(--sb-lime); }

/* ============================================================
   ARTICLE TEMPLATE
   ============================================================ */
.sb-article { max-width: 820px; }
.sb-article-head {
    background: var(--sb-purple);
    border-radius: var(--sb-radius);
    padding: clamp(28px,4vw,48px);
    margin-bottom: 0;
}
.sb-article-back {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--sb-lime); font-family: var(--sb-font-head);
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    text-decoration: none; margin-bottom: 18px;
}
.sb-article-back:hover { color: #cdf72a; }
.sb-article-title {
    font-family: var(--sb-font-head);
    text-transform: uppercase; font-weight: 700; letter-spacing: -0.01em; line-height: 1.04;
    font-size: clamp(2rem,4vw,3.4rem); color: #fff; margin: 10px 0 16px;
}
/* off-center rectangular hero frame (bottom-right energy) */
.sb-article-hero {
    position: relative;
    height: clamp(220px,32vw,360px);
    background: var(--sb-purple-700);
    border-radius: var(--sb-radius);
    margin: 18px 0 0 auto;
    width: 92%;
    overflow: hidden;
    box-shadow: var(--sb-shadow-md);
}

.sb-article-body { padding-top: 32px; }
.sb-article-lead {
    font-size: 20px; line-height: 1.6; color: var(--sb-ink-soft);
    font-weight: 500; margin: 0 0 28px;
}
.sb-article-body h2 {
    font-family: var(--sb-font-head);
    text-transform: uppercase; font-weight: 700; letter-spacing: -0.005em;
    font-size: clamp(1.5rem,2.4vw,2rem); color: var(--sb-ink);
    margin: 38px 0 14px; line-height: 1.1;
}
.sb-article-body h3 {
    font-family: var(--sb-font-head);
    text-transform: uppercase; font-weight: 600;
    font-size: 1.15rem; color: var(--sb-ink);
    margin: 26px 0 10px;
}
.sb-article-body p { font-size: 17px; line-height: 1.8; color: var(--sb-muted); margin: 0 0 18px; }
.sb-article-list { margin: 0 0 22px; padding: 0; list-style: none; }
.sb-article-list li {
    position: relative; padding: 6px 0 6px 28px;
    font-size: 16.5px; line-height: 1.7; color: var(--sb-muted);
}
.sb-article-list li::before {
    content: ""; position: absolute; left: 0; top: 15px;
    width: 12px; height: 12px; border-radius: 3px;
    background: var(--sb-lime);
}
.sb-article-quote {
    margin: 28px 0;
    padding: 6px 0 6px 24px;
    border-left: 4px solid var(--sb-lime);
    font-family: var(--sb-font-head);
    text-transform: none;
    font-size: 1.4rem; line-height: 1.4; font-weight: 500;
    color: var(--sb-ink);
}
.sb-article-cta {
    background: var(--sb-sidebar-active-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 28px;
    margin: 30px 0;
    text-align: center;
}
.sb-article-cta p {
    font-family: var(--sb-font-head); text-transform: uppercase;
    font-weight: 700; font-size: 1.2rem; color: var(--sb-ink) !important;
    margin: 0 0 16px !important;
}

/* share + author */
.sb-article-share { display: flex; align-items: center; gap: 16px; margin: 28px 0; flex-wrap: wrap; }
.sb-article-share__label {
    font-family: var(--sb-font-head); text-transform: uppercase;
    font-size: 12px; letter-spacing: .08em; font-weight: 700; color: var(--sb-muted);
}
.sb-article-author {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--sb-surface-2);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 24px; margin: 28px 0;
}
.sb-article-author__avatar {
    flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
    background:
        radial-gradient(circle at 32% 38%, #fff 0 36%, transparent 37%),
        radial-gradient(circle at 66% 62%, var(--sb-lime) 0 38%, transparent 39%),
        var(--sb-purple);
}
.sb-article-author strong { display: block; font-family: var(--sb-font-head); text-transform: uppercase; color: var(--sb-ink); font-size: 15px; }
.sb-article-author__role { display: block; font-size: 13px; color: var(--sb-purple); margin: 2px 0 8px; font-weight: 500; }
.sb-article-author p { font-size: 14.5px; line-height: 1.6; color: var(--sb-muted); margin: 0; }

/* related */
.sb-article-related { margin-top: 44px; }
.sb-article-related__title {
    font-family: var(--sb-font-head); text-transform: uppercase; font-weight: 700;
    font-size: 1.5rem; color: var(--sb-ink); margin: 0 0 20px;
}
.sb-article-related .sb-blog-card__media { aspect-ratio: 16/7; }

/* dark theme blog/article text */
html[data-theme="dark"] .sb-blog-title,
html[data-theme="dark"] .sb-blog-feature__title,
html[data-theme="dark"] .sb-blog-card__title,
html[data-theme="dark"] .sb-article-body h2,
html[data-theme="dark"] .sb-article-body h3,
html[data-theme="dark"] .sb-article-quote,
html[data-theme="dark"] .sb-article-author strong,
html[data-theme="dark"] .sb-article-related__title { color: #fff; }
html[data-theme="dark"] .sb-article-lead { color: var(--sb-ink-soft); }

/* ---- blog responsive ---- */
@media (max-width: 900px) {
    .sb-blog-grid { grid-template-columns: repeat(2, 1fr); }
    .sb-blog-feature { grid-template-columns: 1fr; }
    .sb-blog-feature__media { min-height: 200px; }
}
@media (max-width: 600px) {
    .sb-blog-grid { grid-template-columns: 1fr; }
    .sb-blog-cta { flex-direction: column; align-items: flex-start; }
    .sb-blog-cta__form { width: 100%; }
    .sb-blog-cta__form input { flex: 1 1 auto; min-width: 0; }
    .sb-article-hero { width: 100%; }
}

/* ============================================================
   10. HOMEPAGE — hero, carousel, quick-checkout modal,
   channel grid, USP bento, closing CTA, redesigned footer,
   and stronger sidebar contrast.
   ============================================================ */

/* ---- shared section heads ---- */
.sb-section-head { max-width: 1180px; margin: 0 auto 26px; padding: 0 clamp(16px,4vw,40px); }
.sb-section-title {
    font-family: var(--sb-font-head); text-transform: uppercase; font-weight: 700;
    letter-spacing: -0.01em; line-height: 1.04;
    font-size: clamp(2rem,4vw,3.4rem); color: var(--sb-ink); margin: 8px 0 10px;
}
.sb-section-sub { color: var(--sb-muted); font-size: 16px; line-height: 1.7; max-width: 60ch; margin: 0; }

/* ---- HERO ---- */
.sb-hero {
    position: relative;
    background: var(--sb-purple);
    overflow: hidden;
    padding: clamp(48px,7vw,110px) clamp(20px,5vw,64px) clamp(56px,7vw,100px);
}
.sb-hero__inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }
.sb-hero .sb-eyebrow { color: var(--sb-lime); }
.sb-hero__title {
    font-family: var(--sb-font-head); text-transform: uppercase; font-weight: 700;
    letter-spacing: -0.015em; line-height: 0.98; color: #fff;
    font-size: clamp(2.8rem,8vw,6.5rem); margin: 10px 0 18px; max-width: 16ch;
}
.sb-hero__sub { color: rgba(255,255,255,.85); font-size: clamp(16px,1.6vw,19px); line-height: 1.7; max-width: 56ch; margin: 0 0 28px; }
.sb-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.sb-hero__stats { display: flex; gap: clamp(24px,5vw,64px); flex-wrap: wrap; }
.sb-hero__stats > div { display: flex; flex-direction: column; }
.sb-hero__stat { font-family: var(--sb-font-head); font-weight: 700; font-size: clamp(1.8rem,3vw,2.6rem); color: var(--sb-lime); line-height: 1; }
.sb-hero__statlabel { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 6px; }
.sb-hero__mark {
    position: absolute; right: -120px; bottom: -120px; width: 460px; height: 460px;
    background:
        radial-gradient(circle at 34% 36%, rgba(255,255,255,.14) 0 40%, transparent 41%),
        radial-gradient(circle at 68% 66%, var(--sb-lime) 0 30%, transparent 31%);
    opacity: .85; pointer-events: none;
}

/* ghost CTA variant on purple */
.sb-cta-btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.sb-cta-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 2px var(--sb-lime); }

/* ---- PACKAGES CAROUSEL ---- */
.sb-pkg-wrap { padding: clamp(40px,6vw,72px) 0; }
.sb-carousel { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px,4vw,40px); }
.sb-carousel__track {
    display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 8px 4px 18px; scrollbar-width: thin;
}
.sb-carousel__track::-webkit-scrollbar { height: 8px; }
.sb-carousel__track::-webkit-scrollbar-thumb { background: var(--sb-border); border-radius: 8px; }
.sb-pkg-card {
    scroll-snap-align: start;
    flex: 0 0 clamp(240px, 26vw, 280px);
    background: var(--sb-surface); border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius); padding: 24px; display: flex; flex-direction: column;
    transition: transform .2s var(--sb-ease), box-shadow .2s var(--sb-ease), border-color .2s var(--sb-ease);
}
.sb-pkg-card:hover { transform: translateY(-4px); box-shadow: var(--sb-shadow-lg); border-color: var(--sb-purple); }
.sb-pkg-card__icon {
    width: 46px; height: 46px; border-radius: var(--sb-radius-sm);
    background: var(--sb-purple); color: var(--sb-lime);
    display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px;
}
.sb-pkg-card__title { font-family: var(--sb-font-head); text-transform: uppercase; font-weight: 700; font-size: 17px; color: var(--sb-ink); margin: 6px 0 8px; line-height: 1.15; }
.sb-pkg-card__price { font-family: var(--sb-font-head); font-weight: 700; font-size: 30px; color: var(--sb-purple); line-height: 1; }
.sb-pkg-card__meta { font-size: 13px; color: var(--sb-muted); margin: 8px 0 16px; }
.sb-pkg-card__buy { text-align: center; margin-top: auto; }
.sb-pkg-card__more { display: block; text-align: center; margin-top: 10px; font-size: 12.5px; color: var(--sb-muted); text-transform: uppercase; letter-spacing: .04em; }
.sb-pkg-card__more:hover { color: var(--sb-purple); }
.sb-carousel__nav {
    position: absolute; top: 42%; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--sb-border); background: var(--sb-surface); color: var(--sb-purple);
    cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 20px; box-shadow: var(--sb-shadow-md);
}
.sb-carousel__nav--prev { left: -6px; }
.sb-carousel__nav--next { right: -6px; }
.sb-carousel__nav:hover { background: var(--sb-purple); color: var(--sb-lime); }
@media (min-width: 992px) { .sb-carousel__nav { display: inline-flex; } }

/* ---- QUICK-CHECKOUT MODAL ---- */
.sb-modal { position: fixed; inset: 0; z-index: 2000; display: none; }
.sb-modal[aria-hidden="false"] { display: block; }
.sb-modal__overlay { position: absolute; inset: 0; background: rgba(20,9,52,.6); backdrop-filter: blur(3px); }
.sb-modal__dialog {
    position: relative; z-index: 1; width: min(440px, calc(100% - 32px));
    margin: 6vh auto 0; max-height: 88vh; overflow-y: auto;
    background: var(--sb-surface); border-radius: var(--sb-radius);
    padding: 28px; box-shadow: var(--sb-shadow-lg); border-top: 5px solid var(--sb-lime);
}
.sb-modal__close { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--sb-muted); cursor: pointer; }
.sb-modal__close:hover { color: var(--sb-purple); }
.sb-modal__title { font-family: var(--sb-font-head); text-transform: uppercase; font-weight: 700; font-size: 1.4rem; color: var(--sb-ink); margin: 0 0 6px; }
.sb-modal__sub { color: var(--sb-muted); font-size: 14px; margin: 0 0 18px; line-height: 1.6; }
.sb-modal__label { display: block; font-family: var(--sb-font-head); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; font-weight: 700; color: var(--sb-ink); margin: 14px 0 6px; }
.sb-modal__input { width: 100%; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); padding: 12px 14px; font-family: var(--sb-font-body); font-size: 15px; }
.sb-modal__input:focus { outline: none; border-color: var(--sb-purple); box-shadow: var(--sb-glow); }
.sb-modal__input.is-invalid { border-color: #d8442f; box-shadow: 0 0 0 3px rgba(216,68,47,.18); }
.sb-modal__total { margin: 18px 0; font-size: 15px; color: var(--sb-muted); }
.sb-modal__total strong { font-family: var(--sb-font-head); color: var(--sb-purple); font-size: 22px; }
.sb-modal__next, .sb-modal__dialog .sb-cta-btn { width: 100%; text-align: center; }
.sb-modal__note { font-size: 13px; color: var(--sb-muted); margin: 14px 0 0; text-align: center; }
.sb-modal__note a, .sb-modal__back { color: var(--sb-purple); }
.sb-modal__back { background: none; border: 0; cursor: pointer; font-family: var(--sb-font-head); text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 6px; }

/* UPI pay panel (shared component) */
.sb-upi-pay { text-align: center; }
.sb-upi-pay__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.sb-upi-pay__amount { font-family: var(--sb-font-head); font-weight: 700; font-size: 26px; color: var(--sb-purple); }
.sb-upi-pay__inv { font-size: 12px; color: var(--sb-muted); }
.sb-upi-pay__qr img { width: 180px; height: 180px; border-radius: var(--sb-radius-sm); border: 1px solid var(--sb-border); padding: 6px; background: #fff; }
.sb-upi-pay__handles { display: flex; gap: 10px; margin: 16px 0; }
.sb-upi-pay__handle { flex: 1; background: var(--sb-surface-2); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); padding: 10px; }
.sb-upi-pay__label { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sb-muted); margin-bottom: 4px; }
.sb-upi-pay__handle code { font-size: 13px; color: var(--sb-ink); font-weight: 600; word-break: break-all; }
.sb-upi-pay__form { text-align: left; margin-top: 8px; }
.sb-upi-pay__utrlabel { display: block; font-size: 12px; color: var(--sb-muted); margin-bottom: 6px; }
.sb-upi-pay__utr { width: 100%; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); padding: 12px 14px; font-size: 16px; letter-spacing: .08em; margin-bottom: 14px; }
.sb-upi-pay__utr:focus { outline: none; border-color: var(--sb-purple); box-shadow: var(--sb-glow); }
.sb-upi-pay__submit { width: 100%; text-align: center; }

/* ---- ALL CHANNELS GRID ---- */
.sb-channels-wrap { padding: clamp(36px,5vw,64px) 0; }
.sb-channels-grid {
    max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px,4vw,40px);
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
}
.sb-channel-chip {
    display: flex; align-items: center; gap: 12px;
    background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius);
    padding: 16px 18px; text-decoration: none; color: var(--sb-ink);
    transition: transform .18s var(--sb-ease), border-color .18s var(--sb-ease), box-shadow .18s var(--sb-ease);
}
.sb-channel-chip:hover { transform: translateY(-3px); border-color: var(--sb-purple); box-shadow: var(--sb-shadow-md); color: var(--sb-purple); }
.sb-channel-chip__icon { width: 38px; height: 38px; border-radius: var(--sb-radius-sm); background: var(--sb-sidebar-active-bg); color: var(--sb-purple); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.sb-channel-chip:hover .sb-channel-chip__icon { background: var(--sb-purple); color: var(--sb-lime); }
.sb-channel-chip__name { font-family: var(--sb-font-head); text-transform: uppercase; font-weight: 600; font-size: 14px; }

/* ---- USP BENTO ---- */
.sb-usp-wrap { padding: clamp(36px,5vw,64px) clamp(16px,4vw,40px); max-width: 1180px; margin: 0 auto; }
.sb-usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sb-usp { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius); padding: 26px; grid-column: span 1; }
.sb-usp--lg { grid-column: span 2; background: var(--sb-purple); border: 0; }
.sb-usp--lg .sb-usp__title { color: #fff; }
.sb-usp--lg .sb-usp__desc { color: rgba(255,255,255,.82); }
.sb-usp--lg .sb-usp__icon { background: rgba(188,237,8,.2); color: var(--sb-lime); }
.sb-usp__icon { width: 48px; height: 48px; border-radius: var(--sb-radius-sm); background: var(--sb-sidebar-active-bg); color: var(--sb-purple); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; }
.sb-usp__title { font-family: var(--sb-font-head); text-transform: uppercase; font-weight: 700; font-size: 18px; color: var(--sb-ink); margin: 0 0 8px; }
.sb-usp__desc { font-size: 14.5px; line-height: 1.65; color: var(--sb-muted); margin: 0; }

/* ---- CLOSING CTA ---- */
.sb-closecta-wrap { padding: 0 clamp(16px,4vw,40px) clamp(48px,6vw,72px); max-width: 1180px; margin: 0 auto; }
.sb-closecta {
    background: var(--sb-purple); border-radius: var(--sb-radius); padding: clamp(28px,4vw,48px);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
    position: relative; overflow: hidden;
}
.sb-closecta__title { font-family: var(--sb-font-head); text-transform: uppercase; font-weight: 700; color: #fff; margin: 0 0 8px; font-size: clamp(1.8rem,3vw,2.6rem); }
.sb-closecta__sub { color: rgba(255,255,255,.82); margin: 0; font-size: 15px; }
.sb-closecta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- REDESIGNED FOOTER ---- */
.sb-footer { background: var(--sb-purple-900); color: #fff; margin-top: 0; }
.sb-footer__inner {
    max-width: 1180px; margin: 0 auto; padding: clamp(40px,5vw,64px) clamp(20px,4vw,40px) 32px;
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px;
}
.sb-footer__logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 14px; }
.sb-footer__mark { width: 30px; height: 30px; border-radius: 6px;
    background: radial-gradient(circle at 30% 35%, #fff 0 42%, transparent 43%), radial-gradient(circle at 70% 65%, var(--sb-lime) 0 42%, transparent 43%); }
.sb-footer__name { font-family: var(--sb-font-head); text-transform: uppercase; font-weight: 700; letter-spacing: .04em; color: #fff; font-size: 18px; }
.sb-footer__tag { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.6; max-width: 38ch; margin: 0 0 16px; }
.sb-footer__social a { background: rgba(255,255,255,.1); }
.sb-footer__social a:hover { background: var(--sb-lime); color: var(--sb-purple-900) !important; }
.sb-footer__h { font-family: var(--sb-font-head); text-transform: uppercase; font-weight: 700; font-size: 12px; letter-spacing: .1em; color: var(--sb-lime); margin: 0 0 14px; }
.sb-footer__menu { list-style: none; margin: 0; padding: 0; }
.sb-footer__menu li { margin-bottom: 9px; }
.sb-footer__menu a { color: rgba(255,255,255,.78); font-size: 14px; text-decoration: none; transition: color .15s var(--sb-ease); }
.sb-footer__menu a:hover { color: var(--sb-lime); }
.sb-footer__bar {
    border-top: 1px solid rgba(255,255,255,.12); max-width: 1180px; margin: 0 auto;
    padding: 18px clamp(20px,4vw,40px); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    font-size: 13px; color: rgba(255,255,255,.6);
}
.sb-footer__pay { color: var(--sb-lime); font-weight: 600; }

/* ---- SIDEBAR CONTRAST BOOST (annotation 11) ---- */
.sb-item { color: #fff; font-weight: 500; }
.sb-item__text { color: #fff; }
.sb-item__icon { color: rgba(255,255,255,.78); }
.sb-group__label { color: rgba(255,255,255,.72); font-weight: 700; }
.sb-item:hover { background: rgba(255,255,255,.12); }
.sb-item:hover .sb-item__text { color: #fff; }
.sb-item[aria-current="page"] { background: rgba(188,237,8,.18); }
.sb-item[aria-current="page"] .sb-item__text,
.sb-item[aria-current="page"] { color: var(--sb-lime); }
.sb-logo__text { color: #fff; }

/* ---- HOMEPAGE RESPONSIVE ---- */
@media (max-width: 900px) {
    .sb-usp-grid { grid-template-columns: repeat(2, 1fr); }
    .sb-usp--lg { grid-column: span 2; }
    .sb-footer__inner { grid-template-columns: 1fr 1fr; }
    .sb-footer__brand { grid-column: span 2; }
}
@media (max-width: 600px) {
    .sb-usp-grid { grid-template-columns: 1fr; }
    .sb-usp, .sb-usp--lg { grid-column: span 1; }
    .sb-footer__inner { grid-template-columns: 1fr; }
    .sb-footer__brand { grid-column: span 1; }
    .sb-hero__stats { gap: 22px; }
}

/* ============================================================
   11. CATEGORY PAGES (buy-*.php via common/category-page.php)
   ============================================================ */
.sb-cat-head { background: var(--sb-purple); padding: clamp(36px,5vw,72px) clamp(20px,4vw,40px); }
.sb-cat-head__inner { max-width: 1180px; margin: 0 auto; }
.sb-cat-head__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: var(--sb-radius-sm);
    background: rgba(188,237,8,.18); color: var(--sb-lime); font-size: 26px; margin: 10px 0 14px;
}
.sb-cat-head__title { font-family: var(--sb-font-head); text-transform: uppercase; font-weight: 700; letter-spacing: -0.01em; line-height: 1.02; font-size: clamp(2.2rem,5vw,4rem); color: #fff; margin: 0 0 14px; }
.sb-cat-head__sub { color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.7; max-width: 64ch; margin: 0; }

.sb-cat-body { max-width: 1180px; margin: 0 auto; padding: clamp(32px,4vw,52px) clamp(20px,4vw,40px) 64px; }
.sb-cat-body__grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 28px; align-items: start; }
.sb-cat-buy { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius); padding: clamp(20px,3vw,32px); }
.sb-cat-buy__title { font-family: var(--sb-font-head); text-transform: uppercase; font-weight: 700; font-size: 1.4rem; color: var(--sb-ink); margin: 0 0 18px; }
.sb-buy-label { display: block; font-family: var(--sb-font-head); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; font-weight: 700; color: var(--sb-ink); margin: 0 0 8px; }
.sb-buy-select { width: 100%; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); padding: 12px 14px; font-family: var(--sb-font-body); font-size: 15px; margin-bottom: 18px; background: var(--sb-surface); color: var(--sb-ink); }
.sb-buy-select:focus { outline: none; border-color: var(--sb-purple); box-shadow: var(--sb-glow); }

.sb-cat-aside { display: grid; gap: 12px; }
.sb-cat-usp { display: flex; align-items: center; gap: 12px; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius); padding: 16px 18px; }
.sb-cat-usp .fa { width: 40px; height: 40px; border-radius: var(--sb-radius-sm); background: var(--sb-sidebar-active-bg); color: var(--sb-purple); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
.sb-cat-usp strong { display: block; font-family: var(--sb-font-head); text-transform: uppercase; font-size: 13px; color: var(--sb-ink); }
.sb-cat-usp span { font-size: 13px; color: var(--sb-muted); }

.sb-cat-faq { margin-top: 44px; }
.sb-cat-faq .sb-section-title { font-size: clamp(1.6rem,3vw,2.2rem); margin-bottom: 18px; }
.sb-faq-item { border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); padding: 0; margin-bottom: 12px; background: var(--sb-surface); overflow: hidden; }
.sb-faq-item summary { cursor: pointer; padding: 16px 20px; font-family: var(--sb-font-head); text-transform: uppercase; font-weight: 600; font-size: 14px; color: var(--sb-ink); list-style: none; position: relative; }
.sb-faq-item summary::-webkit-details-marker { display: none; }
.sb-faq-item summary::after { content: "+"; position: absolute; right: 20px; color: var(--sb-purple); font-size: 20px; line-height: 1; }
.sb-faq-item[open] summary::after { content: "\2212"; }
.sb-faq-item[open] summary { color: var(--sb-purple); }
.sb-faq-item p { margin: 0; padding: 0 20px 18px; color: var(--sb-muted); font-size: 14.5px; line-height: 1.7; }

html[data-theme="dark"] .sb-cat-head__title { color: #fff; }
html[data-theme="dark"] .sb-cat-buy__title,
html[data-theme="dark"] .sb-faq-item summary,
html[data-theme="dark"] .sb-cat-usp strong { color: #fff; }

@media (max-width: 880px) {
    .sb-cat-body__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   12. FAST BUY FORM + UPI APP BUTTONS / QR DOWNLOAD
   ============================================================ */
.sb-buy-input { width: 100%; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); padding: 12px 14px; font-family: var(--sb-font-body); font-size: 15px; margin-bottom: 16px; }
.sb-buy-input:focus { outline: none; border-color: var(--sb-purple); box-shadow: var(--sb-glow); }
.sb-buy-input.is-invalid { border-color: #d8442f; box-shadow: 0 0 0 3px rgba(216,68,47,.18); }
.sb-buy-total { margin: 6px 0 16px; font-size: 15px; color: var(--sb-muted); }
.sb-buy-total strong { font-family: var(--sb-font-head); color: var(--sb-purple); font-size: 24px; }
.sb-buy-pay { width: 100%; text-align: center; }
.sb-buy-empty { color: var(--sb-muted); font-size: 15px; line-height: 1.7; }
.sb-buy-empty a { color: var(--sb-purple); }
.sb-buy-paywrap { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--sb-border); }

/* UPI app deep-link buttons (mobile) */
.sb-upi-pay__apps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 16px; }
.sb-upi-pay__app {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 12px; border-radius: 999px; text-decoration: none;
    background: var(--sb-purple); color: #fff !important;
    font-family: var(--sb-font-head); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; font-size: 12.5px;
}
.sb-upi-pay__app:hover { background: var(--sb-purple-700); }
.sb-upi-pay__app--any { grid-column: span 2; background: var(--sb-lime); color: var(--sb-purple-900) !important; }
.sb-upi-pay__app--any:hover { background: #cdf72a; }

/* QR + download */
.sb-upi-pay__qrwrap { text-align: center; margin: 6px 0 14px; }
.sb-upi-pay__qrcanvas { width: 190px; height: 190px; border-radius: var(--sb-radius-sm); border: 1px solid var(--sb-border); padding: 6px; background: #fff; }
.sb-upi-pay__download {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
    background: var(--sb-surface-2); border: 1px solid var(--sb-border); border-radius: 999px;
    padding: 9px 18px; cursor: pointer; color: var(--sb-purple);
    font-family: var(--sb-font-head); text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.sb-upi-pay__download:hover { border-color: var(--sb-purple); background: var(--sb-sidebar-active-bg); }
.sb-upi-pay__scan { font-size: 12.5px; color: var(--sb-muted); margin: 10px 0 0; }
.sb-upi-pay__copy { background: none; border: 0; cursor: pointer; color: var(--sb-purple); margin-left: 6px; }
.sb-upi-pay__hint { font-size: 12px; color: var(--sb-muted); margin: 10px 0 0; text-align: center; line-height: 1.5; }

html[data-theme="dark"] .sb-upi-pay__qrcanvas { background: #fff; }