/* ═══════════════════════════════════════════
   ABOUT PAGE — CS2 Skin Store  (v5.0)
   Scoped to body.sf-about-page — no bleed.
   Matches the new home-page design system:
     Accent : #cde738  (var --ab-accent)
     BG     : #0c1202   radial green glow
     Title  : Bebas Neue, gradient fill
     Button : pill (radius 999px) + glossy inset glow
     Cards  : strong rounding (24–40px) + inset card shadow
   Layout intentionally lighter / more content-driven
   than the home page (no full-bleed giant card stack).
═══════════════════════════════════════════ */

/* ── Design tokens (mirror of .mush-page home system) ── */
.sf-about-page {
    --ab-accent:   #cde738;
    --ab-accent-2: #9edb1a;
    --ab-rgb:      205, 231, 54;
    --ab-bg:       #0c1202;
    --ab-radius-card: 36px;
    --ab-radius-lg:   56px;
    --ab-radius-icon: 18px;
    --ab-title-gradient: radial-gradient(ellipse at 50% 50%, #fff152 0%, #cfe636 50%, #9edb1a 100%);
    --ab-card-shadow:
        inset 0px 0.361px 0.65px -1px rgba(255,255,255,0.19),
        inset 0px 1.373px 2.472px -2px rgba(255,255,255,0.18),
        inset 0px 6px 10.8px -3px rgba(255,255,255,0.13);
    --ab-btn-shadow:
        inset 0px 0.723px 1.879px -0.333px rgba(255,255,255,0.24),
        inset 0px 2.746px 7.14px -0.667px rgba(255,255,255,0.34),
        inset 0px 12px 31.2px -1px rgba(255,255,255,0.8);
}

/* ── Page background — EXACT home-page recipe (#0c1202 + green
   radial glow). Uses background-image layers so it wins over the
   global `body { background-color:#111111 !important }` override
   in custom.css. ── */
body.sf-about-page {
    background-color: #0c1202 !important;
    background-image:
        radial-gradient(ellipse 130% 70% at 50% 36%, rgba(25, 62, 4, 0.82) 0%, transparent 68%),
        linear-gradient(#0c1202, #0c1202) !important;
    background-repeat: no-repeat !important;
}

/* Let the dark body show through the theme wrappers */
.sf-about-page .site-content,
.sf-about-page .entry-content,
.sf-about-page #page,
.sf-about-page .page-wrapper { background: transparent !important; }

.sf-about-page .site-content,
.sf-about-page .page-wrapper {
    padding-top: var(--header-h, 80px);
}

.sf-about-page .elementor,
.sf-about-page .elementor-section,
.sf-about-page .elementor-container { background: transparent; }

/* ══════════════════════════════════════
   HERO — compact secondary-page style
   No min-height / no full-viewport stretch.
   Centered, text-led (distinct from home's
   two-column weapons hero).
══════════════════════════════════════ */
.sf-about-page .sf-about-hero-section {
    position: relative;
    text-align: center;
    overflow: hidden;
}

/* Soft accent glow behind the title */
.sf-about-page .sf-about-hero-section::after {
    content: '';
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 680px;
    height: 320px;
    max-width: 90%;
    background: radial-gradient(ellipse, rgba(var(--ab-rgb), .10) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Rounded, contained hero panel (not full-width) */
.sf-about-page .sf-about-hero-section .elementor-container {
    position: relative;
    z-index: 1;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(var(--ab-rgb), .07) 0%, transparent 55%),
        linear-gradient(180deg, rgba(20, 42, 12, .55), rgba(7, 14, 3, .92));
    border: 1px solid rgba(var(--ab-rgb), .12);
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-card-shadow);
    padding: 64px 40px !important;
    overflow: hidden;
}

.sf-about-page .sf-about-hero-section .elementor-widget-wrap {
    position: relative;
    z-index: 1;
}

/* No label / eyebrow above the heading on secondary pages */
.sf-about-page .sf-about-hero-label,
.sf-about-page .sf-about-eyebrow,
.sf-about-page .about-hero__label { display: none !important; }

.sf-about-page .sf-about-hero-title .elementor-heading-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(48px, 8vw, 104px) !important;
    font-weight: 400 !important;
    letter-spacing: -1px;
    line-height: 0.9;
    text-transform: uppercase;
    margin: 0 auto 20px !important;
    max-width: 14ch;            /* keep the heading to ~2 lines */
    background: var(--ab-title-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sf-about-page .sf-about-hero-desc .elementor-widget-container,
.sf-about-page .sf-about-hero-desc p {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    color: rgba(255, 255, 255, .62);
    line-height: 1.65;
    max-width: 560px;
    margin: 0 auto;
}

.sf-about-page .sf-about-hero-cta { margin-top: 32px; }

/* ══════════════════════════════════════
   BUTTONS — shared pill component
   (transferred 1:1 from home .mush-btn-shop)
══════════════════════════════════════ */
.sf-about-page .sf-about-hero-cta .elementor-button-wrapper,
.sf-about-page .sf-about-cta-btn .elementor-button-wrapper {
    display: flex;
    justify-content: center;
}

.sf-about-page .sf-about-hero-cta .elementor-button,
.sf-about-page .sf-about-cta-btn .elementor-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    min-width: 240px;
    height: 64px;
    padding: 0 40px !important;
    background: var(--ab-accent) !important;
    color: #000 !important;
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    letter-spacing: .02em;
    line-height: 1 !important;
    text-transform: uppercase;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: var(--ab-btn-shadow);
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease !important;
}

.sf-about-page .sf-about-hero-cta .elementor-button:hover,
.sf-about-page .sf-about-cta-btn .elementor-button:hover {
    transform: scale(1.02);
    filter: brightness(1.04) drop-shadow(0 0 28px rgba(var(--ab-rgb), .45));
    color: #000 !important;
}

.sf-about-page .sf-about-hero-cta .elementor-button:active,
.sf-about-page .sf-about-cta-btn .elementor-button:active {
    transform: scale(0.97);
}

.sf-about-page .sf-about-hero-cta .elementor-button:focus-visible,
.sf-about-page .sf-about-cta-btn .elementor-button:focus-visible {
    outline: 2px solid var(--ab-accent);
    outline-offset: 4px;
}

/* ══════════════════════════════════════
   REUSABLE: section heading
══════════════════════════════════════ */
.sf-about-page .sf-about-section-heading .elementor-heading-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(34px, 5vw, 64px) !important;
    font-weight: 400 !important;
    color: #fff !important;
    letter-spacing: -.5px;
    line-height: 0.95;
    text-transform: uppercase;
    text-align: center;
    max-width: 16ch;
    margin: 0 auto !important;
}

.sf-about-page .sf-about-section-header { background: transparent !important; }

/* ══════════════════════════════════════
   GROUP PANELS — rounded, contained (not full-width)
   Heading section = rounded top, its card grid below
   = rounded bottom; the two meet seamlessly to read as
   one titled panel.
══════════════════════════════════════ */

/* Collapse the gap between heading section and its grid */
.sf-about-page .sf-about-why-header,
.sf-about-page .sf-about-how-header { padding-bottom: 0 !important; }
.sf-about-page .sf-about-why-grid,
.sf-about-page .sf-about-steps-grid { padding-top: 0 !important; }

/* Top half of the panel (the heading) */
.sf-about-page .sf-about-why-header .elementor-container,
.sf-about-page .sf-about-how-header .elementor-container {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(var(--ab-rgb), .06) 0%, transparent 60%),
        linear-gradient(180deg, rgba(18, 38, 11, .5), rgba(8, 16, 4, .55));
    border: 1px solid rgba(var(--ab-rgb), .1);
    border-bottom: none;
    border-radius: var(--ab-radius-lg) var(--ab-radius-lg) 0 0;
    box-shadow: var(--ab-card-shadow);
    padding: 48px 40px 0 !important;
    overflow: hidden;
}

/* Bottom half of the panel (the cards) — colour continues from above */
.sf-about-page .sf-about-why-grid .elementor-container,
.sf-about-page .sf-about-steps-grid .elementor-container {
    background: linear-gradient(180deg, rgba(8, 16, 4, .55), rgba(6, 12, 3, .82));
    border: 1px solid rgba(var(--ab-rgb), .1);
    border-top: none;
    border-radius: 0 0 var(--ab-radius-lg) var(--ab-radius-lg);
    padding: 28px 40px 48px !important;
}

/* ══════════════════════════════════════
   "A STORE, NOT A MARKETPLACE" BLOCK
   text + rounded accent icon — wrapped in a
   rounded glossy card (distinct from home).
══════════════════════════════════════ */
.sf-about-page .sf-about-block-section .elementor-container {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(var(--ab-rgb), .06) 0%, transparent 55%),
        linear-gradient(180deg, rgba(20, 40, 12, .55), rgba(8, 16, 4, .9));
    border: 1px solid rgba(var(--ab-rgb), .12);
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-card-shadow);
    padding: 56px 56px !important;
    overflow: hidden;
    align-items: center;
}

.sf-about-page .sf-about-block-title .elementor-heading-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(30px, 4vw, 50px) !important;
    color: #fff !important;
    letter-spacing: -.5px;
    line-height: 1;
    text-transform: uppercase;
    max-width: 16ch;
    margin-bottom: 22px !important;
}

.sf-about-page .sf-about-block-text .elementor-widget-container,
.sf-about-page .sf-about-block-text p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: rgba(255, 255, 255, .62);
    line-height: 1.7;
    max-width: 520px;
}
.sf-about-page .sf-about-block-text p + p { margin-top: 14px; }

/* Deco icon column */
.sf-about-page .sf-about-block-deco > .elementor-widget-wrap,
.sf-about-page .sf-about-block-deco .elementor-widget-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100%;
}

.sf-about-page .sf-about-block-icon .elementor-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--ab-accent) !important;
    background: rgba(var(--ab-rgb), .10) !important;
    border: 1px solid rgba(var(--ab-rgb), .26) !important;
    border-radius: 28px !important;
    width: 132px !important;
    height: 132px !important;
    font-size: 56px !important;
    box-shadow: 0 0 40px rgba(var(--ab-rgb), .18);
    transition: transform .3s, box-shadow .3s, background .3s;
}
.sf-about-page .sf-about-block-icon:hover .elementor-icon {
    transform: translateY(-4px);
    background: rgba(var(--ab-rgb), .16) !important;
    box-shadow: 0 0 56px rgba(var(--ab-rgb), .3);
}

/* ══════════════════════════════════════
   WHY US — feature cards (rounded 32px)
══════════════════════════════════════ */
.sf-about-page .sf-about-why-grid { background: transparent !important; }

.sf-about-page .sf-about-why-card { transition: transform .25s ease !important; }
.sf-about-page .sf-about-why-card:hover { transform: translateY(-6px); }

.sf-about-page .sf-about-why-card .elementor-widget-container {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
    border: 1px solid rgba(var(--ab-rgb), .12);
    border-radius: var(--ab-radius-card);
    padding: 36px 30px !important;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.sf-about-page .sf-about-why-card:hover .elementor-widget-container {
    border-color: rgba(var(--ab-rgb), .34);
    background: linear-gradient(180deg, rgba(var(--ab-rgb), .07), rgba(255,255,255,.01));
    box-shadow: 0 18px 48px rgba(0,0,0,.4), 0 0 28px rgba(var(--ab-rgb), .10);
}

/* Icon-box internal layout — centered column (consistent across all cards) */
.sf-about-page .elementor-icon-box-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
.sf-about-page .elementor-icon-box-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
.sf-about-page .elementor-icon-box-content { width: 100%; }

.sf-about-page .sf-about-why-card .elementor-icon-box-icon .elementor-icon {
    color: var(--ab-accent) !important;
    background: rgba(var(--ab-rgb), .10) !important;
    border: 1px solid rgba(var(--ab-rgb), .24) !important;
    border-radius: var(--ab-radius-icon) !important;
    width: 58px !important;
    height: 58px !important;
    font-size: 24px !important;
    margin-bottom: 22px !important;
    transition: background .25s, box-shadow .25s, transform .25s;
}
.sf-about-page .sf-about-why-card:hover .elementor-icon-box-icon .elementor-icon {
    background: rgba(var(--ab-rgb), .18) !important;
    box-shadow: 0 0 22px rgba(var(--ab-rgb), .26);
}

.sf-about-page .sf-about-why-card .elementor-icon-box-title span {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 25px !important;
    letter-spacing: .02em;
    color: #fff !important;
    text-transform: uppercase;
    line-height: 1;
    display: block;
    margin-bottom: 10px !important;
}
.sf-about-page .sf-about-why-card .elementor-icon-box-description {
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, .5) !important;
    margin: 0 !important;
}

/* ══════════════════════════════════════
   HOW TO BUY — steps (rounded 32px)
══════════════════════════════════════ */
.sf-about-page .sf-about-steps-grid { background: transparent !important; }

.sf-about-page .sf-about-step-card { transition: transform .25s ease !important; }
.sf-about-page .sf-about-step-card:hover { transform: translateY(-5px); }

.sf-about-page .sf-about-step-card .elementor-widget-container {
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
    border: 1px solid rgba(var(--ab-rgb), .1);
    border-radius: var(--ab-radius-card);
    padding: 38px 30px !important;
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.sf-about-page .sf-about-step-card:hover .elementor-widget-container {
    border-color: rgba(var(--ab-rgb), .3);
    background: linear-gradient(180deg, rgba(var(--ab-rgb), .05), rgba(255,255,255,.008));
    box-shadow: 0 16px 44px rgba(0,0,0,.38), 0 0 24px rgba(var(--ab-rgb), .08);
}

.sf-about-page .sf-about-step-card .elementor-icon-box-icon .elementor-icon {
    color: var(--ab-accent) !important;
    background: rgba(var(--ab-rgb), .09) !important;
    border: 1px solid rgba(var(--ab-rgb), .2) !important;
    border-radius: var(--ab-radius-icon) !important;
    width: 58px !important;
    height: 58px !important;
    font-size: 23px !important;
    margin-bottom: 22px !important;
    transition: background .25s, box-shadow .25s;
}
.sf-about-page .sf-about-step-card:hover .elementor-icon-box-icon .elementor-icon {
    background: rgba(var(--ab-rgb), .16) !important;
    box-shadow: 0 0 22px rgba(var(--ab-rgb), .24);
}

.sf-about-page .sf-about-step-card .elementor-icon-box-title span {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 23px !important;
    letter-spacing: .02em;
    color: #fff !important;
    text-transform: uppercase;
    line-height: 1;
    display: block;
    margin-bottom: 10px !important;
}
.sf-about-page .sf-about-step-card .elementor-icon-box-description {
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, .5) !important;
    margin: 0 !important;
}

/* Centered icon glyphs (desktop / tablet / mobile) */
.sf-about-page .elementor-icon-box-icon .elementor-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
.sf-about-page .elementor-icon-box-icon .elementor-icon i,
.sf-about-page .elementor-icon-box-icon .elementor-icon svg {
    display: block !important;
    line-height: 1 !important;
    margin: auto !important;
}

/* ══════════════════════════════════════
   STATS / TRUST BLOCK — rounded glossy card
   big gradient numbers (Bebas Neue)
══════════════════════════════════════ */
.sf-about-page .sf-about-stats-section .elementor-container {
    background:
        radial-gradient(ellipse at 50% 120%, rgba(var(--ab-rgb), .08) 0%, transparent 60%),
        linear-gradient(180deg, rgba(17, 38, 9, .6), rgba(7, 14, 3, .92));
    border: 1px solid rgba(var(--ab-rgb), .14);
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-card-shadow);
    padding: 56px 40px !important;
    overflow: hidden;
}

.sf-about-page .sf-about-stat-col {
    text-align: center;
    position: relative;
    z-index: 1;
}
.sf-about-page .sf-about-stat-col:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 18%; bottom: 18%;
    width: 1px;
    background: rgba(var(--ab-rgb), .16);
}

.sf-about-page .sf-about-stat-num .elementor-heading-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(56px, 8vw, 96px) !important;
    letter-spacing: -1px;
    line-height: 1;
    margin: 0 0 8px !important;
    background: var(--ab-title-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sf-about-page .sf-about-stat-label .elementor-widget-container,
.sf-about-page .sf-about-stat-label p {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
    margin: 0;
}

/* ══════════════════════════════════════
   CTA BLOCK — rounded glossy card + pill button
══════════════════════════════════════ */
.sf-about-page .sf-about-cta-section {
    position: relative;
    overflow: hidden;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 88px !important;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(var(--ab-rgb), .14) 0%, transparent 55%),
        linear-gradient(180deg, rgba(20, 42, 12, .7), rgba(7, 14, 3, .95));
    border: 1px solid rgba(var(--ab-rgb), .22);
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-card-shadow), 0 24px 64px rgba(0, 0, 0, .4);
}

.sf-about-page .sf-about-cta-section::before {
    content: '';
    position: absolute;
    bottom: -90px; left: 50%;
    transform: translateX(-50%);
    width: 320px; height: 240px;
    background: radial-gradient(ellipse, rgba(var(--ab-rgb), .12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.sf-about-page .sf-about-cta-section .elementor-container,
.sf-about-page .sf-about-cta-section .elementor-widget-wrap {
    position: relative;
    z-index: 1;
}

.sf-about-page .sf-about-cta-title .elementor-heading-title {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: clamp(32px, 4.5vw, 54px) !important;
    color: #fff !important;
    letter-spacing: -.5px;
    line-height: 1;
    max-width: 16ch;
    margin: 0 auto 16px !important;
    text-transform: uppercase;
}

.sf-about-page .sf-about-cta-text .elementor-widget-container,
.sf-about-page .sf-about-cta-text p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: rgba(255, 255, 255, .6);
    line-height: 1.65;
    max-width: 480px;
    margin: 0 auto 28px;
}

/* ══════════════════════════════════════
   Inline links
══════════════════════════════════════ */
.sf-about-page .sf-about-block-text a,
.sf-about-page .sf-about-hero-desc a,
.sf-about-page .sf-about-cta-text a {
    color: var(--ab-accent);
    text-decoration: none;
    transition: opacity .2s ease;
}
.sf-about-page .sf-about-block-text a:hover,
.sf-about-page .sf-about-hero-desc a:hover,
.sf-about-page .sf-about-cta-text a:hover { opacity: .7; }

/* ══════════════════════════════════════
   ACCESSIBILITY
══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .sf-about-page .sf-about-why-card,
    .sf-about-page .sf-about-step-card,
    .sf-about-page .sf-about-block-icon .elementor-icon,
    .sf-about-page .sf-about-hero-cta .elementor-button,
    .sf-about-page .sf-about-cta-btn .elementor-button { transition: none !important; }
}

/* ══════════════════════════════════════
   RESPONSIVE — TABLET
══════════════════════════════════════ */
@media (max-width: 1024px) {
    .sf-about-page .sf-about-hero-section .elementor-container,
    .sf-about-page .sf-about-block-section .elementor-container { padding: 44px 36px !important; }
    .sf-about-page .sf-about-why-header .elementor-container,
    .sf-about-page .sf-about-how-header .elementor-container { padding: 40px 28px 0 !important; }
    .sf-about-page .sf-about-why-grid .elementor-container,
    .sf-about-page .sf-about-steps-grid .elementor-container { padding: 24px 28px 40px !important; }
    .sf-about-page .sf-about-why-card .elementor-widget-container,
    .sf-about-page .sf-about-step-card .elementor-widget-container { padding: 30px 24px !important; }
}

@media (max-width: 900px) {
    .sf-about-page .sf-about-block-section .elementor-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .sf-about-page .sf-about-block-section .elementor-container { text-align: center; }
    .sf-about-page .sf-about-block-text .elementor-widget-container,
    .sf-about-page .sf-about-block-text p,
    .sf-about-page .sf-about-block-title .elementor-heading-title { max-width: 100%; margin-left: auto; margin-right: auto; }
    .sf-about-page .sf-about-block-deco { margin-top: 32px; }
}

@media (max-width: 768px) {
    .sf-about-page .sf-about-why-grid .elementor-column {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    .sf-about-page .sf-about-steps-grid .elementor-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .sf-about-page .sf-about-stats-section .sf-about-stat-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 24px 0;
    }
    .sf-about-page .sf-about-stat-col:not(:last-child)::after {
        right: 15%; left: 15%; top: auto; bottom: 0;
        width: auto; height: 1px;
    }
    .sf-about-page .sf-about-cta-section {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
}

/* ══════════════════════════════════════
   RESPONSIVE — MOBILE
══════════════════════════════════════ */
@media (max-width: 480px) {
    .sf-about-page .sf-about-why-grid .elementor-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .sf-about-page .sf-about-hero-section .elementor-container { padding: 40px 22px !important; border-radius: 24px; }
    .sf-about-page .sf-about-block-section .elementor-container { padding: 32px 22px !important; border-radius: 24px; }
    .sf-about-page .sf-about-stats-section .elementor-container { padding: 36px 22px !important; border-radius: 24px; }
    .sf-about-page .sf-about-why-header .elementor-container,
    .sf-about-page .sf-about-how-header .elementor-container { padding: 32px 18px 0 !important; border-radius: 24px 24px 0 0; }
    .sf-about-page .sf-about-why-grid .elementor-container,
    .sf-about-page .sf-about-steps-grid .elementor-container { padding: 20px 18px 32px !important; border-radius: 0 0 24px 24px; }
    .sf-about-page .sf-about-block-icon .elementor-icon {
        width: 104px !important;
        height: 104px !important;
        font-size: 44px !important;
    }
    .sf-about-page .sf-about-hero-cta .elementor-button,
    .sf-about-page .sf-about-cta-btn .elementor-button {
        width: 100%;
        font-size: 26px !important;
    }
}


/* ════════════════════════════════════════════════════════════
   SECTION-PANEL COMPAT (CSS-only fix for the "styles don't change" bug)
   Elementor does NOT emit the section-level _css_classes
   (sf-about-*-section / -grid / -header) on this page — the sections
   only carry their stable element IDs. So the rounded "sections with
   backgrounds" never rendered. Re-apply those panels via the IDs.
   hero=s-ab-hero · block=s-ab-what · why-head=s-ab-wyh · why-grid=s-ab-wyg
   how-head=s-ab-hwh · steps=s-ab-hws · stats=s-ab-sts · cta=s-ab-cta
════════════════════════════════════════════════════════════ */

/* Hero — rounded glossy panel */
.sf-about-page .elementor-element-s-ab-hero { position: relative; text-align: center; overflow: hidden; }
.sf-about-page .elementor-element-s-ab-hero > .elementor-container {
    position: relative; z-index: 1;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(var(--ab-rgb), .07) 0%, transparent 55%),
        linear-gradient(180deg, rgba(20, 42, 12, .55), rgba(7, 14, 3, .92));
    border: 1px solid rgba(var(--ab-rgb), .12);
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-card-shadow);
    padding: 64px 40px !important;
    overflow: hidden;
}

/* "A store, not a marketplace" block — rounded glossy panel */
.sf-about-page .elementor-element-s-ab-what > .elementor-container {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(var(--ab-rgb), .06) 0%, transparent 55%),
        linear-gradient(180deg, rgba(20, 40, 12, .55), rgba(8, 16, 4, .9));
    border: 1px solid rgba(var(--ab-rgb), .12);
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-card-shadow);
    padding: 56px 56px !important;
    overflow: hidden;
    align-items: center;
}

/* Why-us / How-it-works — joined two-part panel (heading top + cards bottom) */
.sf-about-page .elementor-element-s-ab-wyh,
.sf-about-page .elementor-element-s-ab-hwh { padding-bottom: 0 !important; }
.sf-about-page .elementor-element-s-ab-wyg,
.sf-about-page .elementor-element-s-ab-hws { padding-top: 0 !important; }

.sf-about-page .elementor-element-s-ab-wyh > .elementor-container,
.sf-about-page .elementor-element-s-ab-hwh > .elementor-container {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(var(--ab-rgb), .06) 0%, transparent 60%),
        linear-gradient(180deg, rgba(18, 38, 11, .5), rgba(8, 16, 4, .55));
    border: 1px solid rgba(var(--ab-rgb), .1);
    border-bottom: none;
    border-radius: var(--ab-radius-lg) var(--ab-radius-lg) 0 0;
    box-shadow: var(--ab-card-shadow);
    padding: 48px 40px 0 !important;
    overflow: hidden;
}
.sf-about-page .elementor-element-s-ab-wyg > .elementor-container,
.sf-about-page .elementor-element-s-ab-hws > .elementor-container {
    background: linear-gradient(180deg, rgba(8, 16, 4, .55), rgba(6, 12, 3, .82));
    border: 1px solid rgba(var(--ab-rgb), .1);
    border-top: none;
    border-radius: 0 0 var(--ab-radius-lg) var(--ab-radius-lg);
    padding: 28px 40px 48px !important;
}

/* Stats — rounded glossy panel */
.sf-about-page .elementor-element-s-ab-sts > .elementor-container {
    background:
        radial-gradient(ellipse at 50% 120%, rgba(var(--ab-rgb), .08) 0%, transparent 60%),
        linear-gradient(180deg, rgba(17, 38, 9, .6), rgba(7, 14, 3, .92));
    border: 1px solid rgba(var(--ab-rgb), .14);
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-card-shadow);
    padding: 56px 40px !important;
    overflow: hidden;
}

/* CTA — rounded glossy ACCENT panel (the prominent "section with background") */
.sf-about-page .elementor-element-s-ab-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 88px !important;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(var(--ab-rgb), .14) 0%, transparent 55%),
        linear-gradient(180deg, rgba(20, 42, 12, .7), rgba(7, 14, 3, .95));
    border: 1px solid rgba(var(--ab-rgb), .22);
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-card-shadow), 0 24px 64px rgba(0, 0, 0, .4);
}

/* ════════════════════════════════════════════════════════════
   FULL-WIDTH BANNER (img/banner-about-us.png, 1916×821)
   Injected CSS-only as the ::before of the "what" section, so it
   sits between the hero and the first content block. No Elementor
   markup is touched. Full-bleed edge-to-edge via the 100vw +
   negative-margin trick, with the requested 64px corner radius.
   (Attached here — not on the hero — because the hero section has
   overflow:hidden, which would clip a full-bleed pseudo-element.)
════════════════════════════════════════════════════════════ */
.sf-about-page .elementor-element-s-ab-what::before {
    content: '';
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 48px;
    aspect-ratio: 1916 / 821;
    background-image: url('../img/banner-about-us.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 64px;
    box-shadow: var(--ab-card-shadow), 0 24px 64px rgba(0, 0, 0, .4);
    pointer-events: none;
}

@media (max-width: 768px) {
    .sf-about-page .elementor-element-s-ab-what::before {
        border-radius: 32px;
        margin-bottom: 32px;
    }
}