/* =========================================
   Design Tokens & Reset
   ========================================= */
:root {
    /* Colors */
    --primary-blue: #0066FF;
    --primary-blue-hover: #0052cc;
    --primary-blue-light: #E8F0FE;
    --primary-blue-10: rgba(0, 102, 255, 0.1);
    --text-dark: #0F172A;
    --text-body: #334155;
    --text-muted: #64748B;
    --text-faint: #94A3B8;
    --bg-white: #FFFFFF;
    --bg-light: #F8FAFC;
    --bg-warm: #FAFAF8;
    --bg-footer: #0F172A;
    --border-light: #E2E8F0;

    /* Typography */
    --font-main: 'Plus Jakarta Sans', sans-serif;
    --text-xs: 0.8rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: clamp(3rem, 5.5vw, 4.5rem);
    --text-6xl: clamp(3.5rem, 6.5vw, 5.5rem);

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    --space-5xl: 128px;
    --section-pad: clamp(80px, 10vw, 140px);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-2xl: 48px;
    --radius-pill: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 32px 64px -16px rgba(0, 0, 0, 0.16);
    --shadow-blue: 0 8px 32px rgba(0, 102, 255, 0.25);

    /* Transitions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-reveal: 800ms;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
}

/* Scroll-snap: only active on home page.
   `proximity` = browser snaps only when close to a snap point (not mandatory).
   Only the intro-section is a snap target — user scrolls from hero, gets
   pulled to intro, then can scroll past freely with no more traps.
   Disabled on mobile — native scroll inertia handles momentum perfectly,
   and snap-type y can cause iOS to freeze mid-scroll. */
html:has(body.home) {
    scroll-snap-type: y proximity;
}

@media (max-width: 767px) {
    html:has(body.home) {
        scroll-snap-type: none;
    }
}

body {
    font-family: var(--font-main);
    color: var(--text-body);
    background-color: var(--bg-white);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all var(--duration-normal) ease;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.text-center {
    text-align: center;
}

/* =========================================
   Scroll Reveal System
   ========================================= */
[data-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity var(--duration-reveal) var(--ease-out-expo),
        transform var(--duration-reveal) var(--ease-out-expo);
}

[data-reveal="scale"] {
    transform: scale(0.95);
}

[data-reveal="left"] {
    transform: translateX(-40px);
}

[data-reveal="right"] {
    transform: translateX(40px);
}

[data-reveal].revealed,
[data-reveal="scale"].revealed,
[data-reveal="left"].revealed,
[data-reveal="right"].revealed {
    opacity: 1;
    transform: none;
}

/* =========================================
   Section Headers
   ========================================= */
.section-label {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: var(--space-md);
}

.section-label-light {
    color: rgba(255, 255, 255, 0.7);
}

.section-header h2 {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-dark);
    letter-spacing: -0.02em;
}

.section-desc {
    font-size: var(--text-lg);
    color: var(--text-muted);
    max-width: 600px;
    margin: 16px auto 0;
    line-height: 1.6;
}

.section-footer {
    text-align: center;
    margin-top: var(--space-2xl);
}

/* =========================================
   Buttons
   ========================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--text-base);
    cursor: pointer;
    transition: background-color var(--duration-normal) ease,
        box-shadow var(--duration-normal) ease,
        border-color var(--duration-normal) ease,
        transform var(--duration-fast) ease;
    border: none;
    font-family: var(--font-main);
}

.btn:hover {
    transform: none;
}

.btn:active {
    transform: scale(0.96);
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1.05rem;
}

.btn-primary {
    background-color: var(--primary-blue);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-blue-hover);
}

.btn-solid-white {
    background-color: white;
    color: var(--text-dark);
}

.btn-solid-white:hover {
    background-color: var(--bg-light);
    box-shadow: var(--shadow-md);
}

.btn-ghost-white {
    background-color: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-ghost-white:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
}

.btn-ghost {
    background: var(--bg-light);
    color: var(--text-dark);
    border: 1px solid var(--border-light);
}

.btn-ghost:hover {
    background: white;
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.link-arrow {
    font-weight: 600;
    color: var(--primary-blue);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-lg);
}

.link-arrow i,
.link-arrow svg {
    transition: transform var(--duration-normal) var(--ease-out-expo);
}

.link-arrow:hover i,
.link-arrow:hover svg {
    transform: translateX(4px);
}

/* =========================================
   Navbar
   ========================================= */
.navbar {
    position: fixed;
    top: 24px;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    padding: 0 24px;
    transition: transform var(--duration-normal) var(--ease-out-expo),
        top var(--duration-normal) var(--ease-out-expo);
}


.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Use the "scrolled" look as the single permanent style — keeps the
       bar visually identical at the top of the page and after scrolling. */
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(255, 255, 255, 0.6);
    width: 100%;
    max-width: 1200px;
}

/* Scrolled state is now visually identical to the base. Kept as a
   no-op selector so JS toggling .scrolled doesn't cause any layout
   shift, transition, or repaint. */
.navbar.scrolled .nav-container {
    background-color: rgba(255, 255, 255, 0.98);
    padding: 14px 28px;
    box-shadow: var(--shadow-md);
}

.logo {
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--text-dark);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
}

.logo-img {
    height: 32px;
    width: auto;
    display: block;
}

.nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

.nav-links a {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    border-radius: 50%;
    background: var(--primary-blue);
    transition: width var(--duration-normal) var(--ease-out-expo);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--text-dark);
}

.nav-links a.active::after {
    width: 4px;
    height: 4px;
}

.nav-cta {
    padding: 10px 20px;
    font-size: var(--text-sm);
}

/* Cart + profile cluster (injected by initAuthUI) */
.nav-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.nav-cart-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
    flex-shrink: 0;
}

.nav-cart-btn:hover {
    background: var(--primary-blue-10);
    color: var(--primary-blue);
    transform: translateY(-1px);
}

.nav-cart-btn i,
.nav-cart-btn svg {
    width: 20px;
    height: 20px;
}

.nav-cart-btn .cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--primary-blue);
    color: white;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    line-height: 1;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dark);
}

/* =========================================
   Mobile navbar cart — sits next to the burger icon.
   Hidden on desktop (the .nav-cart-btn handles that). Shown only on
   the mobile breakpoint where .menu-toggle becomes visible.
   ========================================= */
.nav-cart-mobile {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--text-dark);
    text-decoration: none;
}

.nav-cart-mobile i,
.nav-cart-mobile svg {
    width: 24px;
    height: 24px;
}

.nav-cart-mobile .cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--primary-blue);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

/* =========================================
   Nav Dropdown (Store categories)
   Shared across all pages
   ========================================= */
.nav-dropdown {
    position: relative;
    /* Extend hover zone downward to bridge the gap to the dropdown menu */
    padding-bottom: 14px;
    margin-bottom: -14px;
}

/* Hover bridge — extra transparent zone in case of diagonal mouse movement */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -16px;
    right: -16px;
    height: 14px;
    display: block;
}

.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.nav-dropdown-chevron {
    width: 14px !important;
    height: 14px !important;
    transition: transform var(--duration-normal) var(--ease-out-expo);
    flex-shrink: 0;
}

.nav-dropdown:hover .nav-dropdown-chevron,
.nav-dropdown.open .nav-dropdown-chevron {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-xl);
    padding: 8px;
    min-width: 260px;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 220ms var(--ease-out-expo),
        transform 220ms var(--ease-out-expo);
    z-index: 200;
    /* Use margin instead of top-offset so mouse stays inside .nav-dropdown */
    margin-top: 12px;
}

/* Default: centered single-column */
.nav-dropdown-menu:not(.nav-dropdown-menu--wide) {
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
}

.nav-dropdown:hover .nav-dropdown-menu:not(.nav-dropdown-menu--wide),
.nav-dropdown.open .nav-dropdown-menu:not(.nav-dropdown-menu--wide) {
    transform: translateX(-50%) translateY(0);
}

/* Wide: multi-column, left-aligned */
.nav-dropdown-menu--wide {
    left: 0;
    transform: translateY(-8px);
    display: grid;
    min-width: 480px;
    padding: 16px;
    gap: 0;
}

.nav-dropdown:hover .nav-dropdown-menu--wide,
.nav-dropdown.open .nav-dropdown-menu--wide {
    transform: translateY(0);
}

/* Show both variants */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    pointer-events: all;
}

/* Multi-column internals — shared with cat-sub-panel style */
.nav-dd-col {
    padding: 4px 14px;
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-dd-col:first-child {
    padding-left: 4px;
}

.nav-dd-col:last-child {
    padding-right: 4px;
    border-right: none;
}

.nav-dd-heading {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--primary-blue);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-light);
}

/* Standalone top link — spans all columns */
.nav-dd-all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-dark);
    padding: 8px 6px;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.nav-dd-all:hover {
    color: var(--primary-blue);
    transform: translateX(3px);
}

.nav-dd-all svg,
.nav-dd-all i {
    width: 14px;
    height: 14px;
    opacity: 0.5;
}

/* ── Custom SVG icon in nav dropdown items ── */
.nav-dd-icon {
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.85;
    position: relative;
    top: -1px;
}

/* Custom icon in drawer cart button */
.nav-custom-icon {
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Make nav-dd-item flex so icon + text align nicely */
.nav-dd-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-body);
    padding: 5px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
    white-space: nowrap;
}

.nav-dd-item:hover {
    background: var(--bg-light);
    color: var(--primary-blue);
    transform: translateX(3px);
}

.nav-dd-item--red {
    color: #DC2626;
    font-weight: 600;
}

.nav-dd-item--red:hover {
    background: #FEF2F2;
    color: #DC2626;
}

.nav-dd-item--green {
    color: #16A34A;
    font-weight: 600;
}

.nav-dd-item--green:hover {
    background: #F0FDF4;
    color: #16A34A;
}

.nav-dd-item--rent {
    color: var(--primary-blue);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-dd-item--rent i {
    width: 14px;
    height: 14px;
}

.nav-dd-item--rent:hover {
    background: var(--primary-blue-light);
    color: var(--primary-blue);
}

.nav-dd-divider {
    height: 1px;
    background: var(--border-light);
    margin: 6px 0;
}


.nav-dropdown-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-faint);
    padding: 6px 10px 8px;
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast), color var(--duration-fast);
    color: var(--text-body);
}

.nav-dropdown-item:hover {
    background: var(--bg-light);
    color: var(--primary-blue);
}

.nav-dropdown-item:hover .nav-dropdown-icon {
    background: var(--primary-blue);
    color: white;
}

.nav-dropdown-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-blue-light);
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--duration-fast), color var(--duration-fast);
}

.nav-dropdown-icon i,
.nav-dropdown-icon svg {
    width: 16px;
    height: 16px;
}

.nav-dropdown-label {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nav-dropdown-label strong {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.3;
}

.nav-dropdown-item:hover .nav-dropdown-label strong {
    color: var(--primary-blue);
}

.nav-dropdown-label small {
    font-size: 0.72rem;
    color: var(--text-faint);
    font-weight: 400;
}

.nav-dropdown-divider {
    height: 1px;
    background: var(--border-light);
    margin: 6px 10px;
}

.nav-dropdown-item--highlight .nav-dropdown-icon {
    background: #FEE2E2;
    color: #DC2626;
}

.nav-dropdown-item--highlight:hover .nav-dropdown-icon {
    background: #DC2626;
    color: white;
}

.nav-dropdown-item--highlight .nav-dropdown-label strong {
    color: #DC2626;
}

.nav-dropdown-item--highlight:hover {
    background: #FEF2F2;
}

/* The desktop navbar (links, dropdowns, CTA and cart button) stays visible
   all the way down to the mobile breakpoint (768px). This keeps laptop and
   desktop views identical — including the cart icon that the fly-to-cart
   animation needs as its landing target. Below 768px the burger takes over
   (handled in the 768px block below). */
@media (max-width: 768px) {
    .nav-dropdown-menu {
        display: none;
    }

    .nav-links,
    .nav-cta,
    .nav-cart-btn,
    .nav-actions {
        display: none !important;
    }

    /* Cart sits to the left of the burger on mobile. */
    .nav-cart-mobile {
        display: inline-flex !important;
    }

    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }
}

/* =========================================
   Mobile Drawer — Dropdown Accordion
   Inside the drawer, .nav-dropdown items work as
   tap-to-expand accordions instead of hover menus.
   ========================================= */
.drawer-links .nav-dropdown {
    position: static;
    padding-bottom: 0;
    margin-bottom: 0;
    width: 100%;
}

.drawer-links .nav-dropdown::after {
    display: none;
}

.drawer-links .nav-dropdown-trigger {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text-dark);
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    transition: opacity 0.4s ease, transform 0.4s var(--ease-out-expo), color var(--duration-normal);
}

.drawer-links .nav-dropdown-trigger:hover {
    color: var(--primary-blue);
}

.drawer-links .nav-dropdown-chevron {
    width: 20px !important;
    height: 20px !important;
    transition: transform 0.3s var(--ease-out-expo);
}

.drawer-links .nav-dropdown.open .nav-dropdown-chevron {
    transform: rotate(180deg);
}

.drawer-links .nav-dropdown-menu {
    position: static !important;
    display: none;
    opacity: 1 !important;
    pointer-events: all !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    background: var(--bg-light);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: none;
    padding: 8px 0 !important;
    margin: 8px 0;
    width: 100% !important;
    /* Cancel desktop wide-dropdown sizing so it doesn't overflow the drawer
       on phones (was causing the "huge square" overflow on Store). */
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
    grid-template-columns: none !important;
}

.drawer-links .nav-dropdown.open .nav-dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
}

.drawer-links .nav-dd-col {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    padding: 0 16px;
    gap: 0;
    align-items: stretch;
    /* Reset the desktop column rules so stacked drawer columns don't get
       a stray right-border or column padding. */
    border-right: none !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
}

/* Separate category columns with a subtle top border instead of big gaps */
.drawer-links .nav-dd-col + .nav-dd-col {
    border-top: 1px solid var(--border-light);
    margin-top: 4px;
    padding-top: 4px;
}

.drawer-links .nav-dd-item {
    display: block !important;
    width: 100% !important;
    padding: 8px 0 !important;
    font-size: var(--text-base) !important;
    color: var(--text-body) !important;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: normal !important;
}

/* Variant overrides — preserve the colored hint of these special items
   (Sewa Padel = blue, Promo = red, Baru = green) on mobile drawer too. */
.drawer-links .nav-dd-item--rent {
    color: var(--primary-blue) !important;
    font-weight: 600 !important;
}
.drawer-links .nav-dd-item--red {
    color: #DC2626 !important;
    font-weight: 600 !important;
}
.drawer-links .nav-dd-item--green {
    color: #16A34A !important;
    font-weight: 600 !important;
}

.drawer-links .nav-dd-heading {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--primary-blue);
    margin: 8px 16px 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.drawer-links .nav-dd-all {
    font-size: var(--text-base);
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 4px;
}

/* Animation: treat nav-dropdown children like drawer link children */
.mobile-drawer .drawer-links .nav-dropdown {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s var(--ease-out-expo);
}

.mobile-drawer.open .drawer-links .nav-dropdown {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger nth-child — accounts for <a> and .nav-dropdown children */
.mobile-drawer.open .drawer-links> :nth-child(5) {
    transition-delay: 0.25s;
}

.mobile-drawer.open .drawer-links> :nth-child(6) {
    transition-delay: 0.3s;
}

/* =========================================
   Mobile Drawer
   ========================================= */
.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 200;
    padding: 24px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) ease;
    overflow-y: auto;
}

.mobile-drawer.open {
    opacity: 1;
    pointer-events: all;
}

.drawer-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: var(--space-xl);
}

.drawer-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dark);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cart + Login/Profile row at top of drawer */
.drawer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-cart-icon {
    /* Cart now lives in the navbar next to the burger icon, so the drawer copy
       is hidden. Kept in the DOM (display:none) so the existing badge-sync JS
       doesn't break on the elements it expects to find. */
    display: none !important;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-light);
    color: var(--text-dark);
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    flex-shrink: 0;
    transition: background var(--duration-fast), color var(--duration-fast);
}

.drawer-cart-icon:hover {
    background: var(--primary-blue-10);
    color: var(--primary-blue);
}

.drawer-cart-icon i,
.drawer-cart-icon svg,
.drawer-cart-icon img {
    width: 20px;
    height: 20px;
}

.drawer-cart-icon .cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--primary-blue);
    color: white;
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    line-height: 1;
}

.drawer-cta {
    flex: 1;
    padding: 12px 18px;
    font-size: var(--text-base);
    text-align: center;
}

/* Logged-in profile chip in drawer */
.drawer-profile-chip {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--primary-blue);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background var(--duration-fast), filter var(--duration-fast);
}

.drawer-profile-chip:hover {
    filter: brightness(1.1);
}

.drawer-profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
}

.drawer-profile-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: white;
}

.drawer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.drawer-links>a {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text-dark);
    padding: 12px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s var(--ease-out-expo), color var(--duration-normal);
}

.mobile-drawer.open .drawer-links>a {
    opacity: 1;
    transform: translateY(0);
}

.mobile-drawer.open .drawer-links>a:nth-child(1) {
    transition-delay: 0.05s;
}

.mobile-drawer.open .drawer-links>a:nth-child(2) {
    transition-delay: 0.1s;
}

.mobile-drawer.open .drawer-links>a:nth-child(3) {
    transition-delay: 0.15s;
}

.mobile-drawer.open .drawer-links>a:nth-child(4) {
    transition-delay: 0.2s;
}

.drawer-links>a:hover {
    color: var(--primary-blue);
}

/* =========================================
   Hero Section (Homepage) — Fixed behind content
   ========================================= */
.hero {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: 720px;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    text-align: left;
    color: white;
    padding: 0;
    z-index: 0;
}

/* Inner container — aligns with navbar (max-width 1200 + 24px padding) */
.hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 230px;
}

/* Bottom bar — holds actions (left) + proof (right) on same horizontal line */
.hero-bottom {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 160px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    flex-wrap: wrap;
    z-index: 2;
}

/* =========================================
   Main Content — Scrolls over the fixed hero
   ========================================= */
.main-content {
    position: relative;
    z-index: 2;
    margin-top: 100vh;
    background: var(--bg-white);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.15);
}

/* Home-only ambient canvas: a cool wash at the hero seam fading into white,
   plus two very faint brand-tinted glows fixed to the viewport. Keeps cards
   reading as elevated paper without making the page feel tinted. */
body.home .main-content {
    background-color: var(--bg-white);
    background-image:
        radial-gradient(900px 700px at 12% 8%, rgba(0, 102, 255, 0.045), transparent 60%),
        radial-gradient(900px 700px at 88% 92%, rgba(255, 190, 140, 0.035), transparent 60%),
        linear-gradient(to bottom, var(--bg-light) 0, var(--bg-white) 600px);
    background-attachment: fixed, fixed, scroll;
    background-repeat: no-repeat;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 120%;
    object-fit: cover;
    will-change: transform;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 30, 100, 0.6) 40%,
            rgba(0, 51, 153, 0.85) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin-top: 0;
    margin-bottom: 20px;
}

.hero h1 {
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 32px;
    letter-spacing: -0.03em;
    overflow: visible;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-actions .btn {
    padding: 12px 32px;
    min-width: 120px;
}

/* Proof card — sits on right side of .hero-bottom */
.hero-proof {
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
}

.proof-text {
    text-align: right;
    line-height: 1.1;
}

.proof-number {
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.proof-label {
    font-size: var(--text-base);
    opacity: 0.95;
    font-weight: 500;
    margin-top: 6px;
}

.avatar-group {
    display: flex;
}

.avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid white;
    object-fit: cover;
    margin-left: -12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.avatar:first-child {
    margin-left: 0;
}

/* Partner strip at bottom of hero */
.partner-strip {
    position: absolute;
    bottom: 28px;
    left: 0;
    width: 100%;
    padding: 22px clamp(32px, 6vw, 80px);
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.partner-label {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.75);
    text-transform: none;
}

.partner-logos {
    overflow: hidden;
    width: 100%;
    opacity: 0.9;
    -webkit-mask-image: linear-gradient(90deg, transparent, white 8%, white 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, white 8%, white 92%, transparent);
}

.partner-logos-track {
    display: flex;
    align-items: center;
    gap: 48px;
    width: max-content;
    animation: scroll-x 40s linear infinite;
}

.partner-logos-track img {
    height: 24px;
    width: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* =========================================
   Home Feature Strip (3D icons)
   ========================================= */
.home-features {
    position: relative;
    z-index: 5;
    background: transparent;
    padding: clamp(64px, 9vw, 128px) 0 clamp(64px, 9vw, 128px);
}

.home-features-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 32px);
    background: white;
    border-radius: clamp(20px, 2.5vw, 32px);
    padding: clamp(20px, 2.5vw, 32px) clamp(24px, 3vw, 40px);
    margin: 40px 0 60px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    position: relative;
    overflow: visible;
    isolation: isolate;
    /* Outer lift to ground the card on the page */
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.04),
        0 12px 32px -18px rgba(15, 23, 42, 0.18);
}

/* ── Car-style rotating LED underglow (soft feathered) ── */
.home-features-strip::before {
    content: '';
    position: absolute;
    /* Push far out so the heavy blur has room to breathe */
    inset: -18px;
    border-radius: calc(clamp(20px, 2.5vw, 32px) + 14px);
    background: conic-gradient(
        from var(--underglow-angle, 0deg) at 50% 50%,
        hsl(220, 60%, 22%) 0deg,
        hsl(220, 60%, 22%) 20deg,
        hsl(220, 70%, 28%) 60deg,
        hsl(215, 80%, 38%) 100deg,
        hsl(212, 90%, 50%) 130deg,
        hsl(210, 100%, 62%) 160deg,
        hsl(212, 90%, 50%) 190deg,
        hsl(215, 80%, 38%) 220deg,
        hsl(220, 70%, 28%) 260deg,
        hsl(220, 60%, 22%) 300deg,
        hsl(220, 60%, 22%) 360deg
    );
    z-index: -2;
    animation: underglow-spin 8s linear infinite;
    opacity: 0.12;
    filter: blur(18px);
    transition: opacity 0.6s ease, filter 0.6s ease;
}

/* Inner white fill so only the border edges show the glow color.
   Doubles as the thin bevel surface — light top edge, faint shadow bottom edge. */
.home-features-strip::after {
    content: '';
    position: absolute;
    inset: 0px;
    border-radius: calc(clamp(20px, 2.5vw, 32px) - 1px);
    background: white;
    z-index: -1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(15, 23, 42, 0.06),
        inset 1px 0 0 rgba(255, 255, 255, 0.6),
        inset -1px 0 0 rgba(15, 23, 42, 0.03);
}

.home-features-strip:hover::before {
    opacity: 0.2;
    filter: blur(28px);
}

@keyframes underglow-spin {
    to { --underglow-angle: 360deg; }
}

/* Register the custom property for smooth interpolation */
@property --underglow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}


.home-feature-item {
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: center;
    gap: clamp(12px, 1.4vw, 18px);
    position: relative;
}

/* Vertical divider between items (desktop only) */
.home-feature-item+.home-feature-item::before {
    content: '';
    position: absolute;
    left: calc(clamp(16px, 2vw, 32px) * -0.5);
    top: 8%;
    bottom: 8%;
    width: 1px;
    background: var(--border-light);
    opacity: 1;
}

.home-feature-icon {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-feature-icon model-viewer {
    width: 100%;
    height: 100%;
    background: transparent;
    --poster-color: transparent;
    --progress-bar-color: transparent;
    --progress-mask: transparent;
}

.home-feature-text h3 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.home-feature-text p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.45;
}

/* ---- Tablet: 2x2 grid ---- */
@media (max-width: 1024px) {
    .home-features-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 32px);
    }

    /* Hide the desktop divider; redraw between columns/rows if desired */
    .home-feature-item+.home-feature-item::before {
        display: none;
    }
}

/* ---- Phone: 1 column stack ---- */
@media (max-width: 600px) {
    .home-features {
        padding: clamp(40px, 10vw, 72px) 0 clamp(40px, 10vw, 72px);
    }

    .home-features-strip {
        grid-template-columns: 1fr;
        padding: 20px;
        border-radius: 20px;
        gap: 16px;
    }

    /* Kill the heavy underglow spin on mobile — big GPU drain */
    .home-features-strip::before {
        animation: none;
        opacity: 0.06;
    }

    .home-feature-item {
        grid-template-columns: 52px 1fr;
        gap: 14px;
    }

    .home-feature-icon {
        width: 52px;
        height: 52px;
    }
}

/* =========================================
   Intro Section — Scroll-Driven Photo Explosion
   ========================================= */

/* Scroll runway — creates the height that drives the animation.
   The user scrolls through this spacer; the sticky child stays
   pinned while JS reads the scroll progress (0 → 1).            */
.intro-scroll-spacer {
    position: relative;
    /* Was 220vh — bumped so the whole zoom timeline takes more scroll
       distance, making transitions feel calm/cinematic instead of snappy.
       Bumped again from 340vh → 400vh after adding Round 4. */
    height: 400vh;
    /* Remove any old scroll-snap so the sticky section scrolls freely */
    scroll-snap-align: none;
}

/* The visual content that stays pinned while user scrolls the spacer */
.intro-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
    perspective: 900px;
    perspective-origin: 50% 50%;
}

/* Dark overlay — removed per design. Kept in DOM but hidden. */
.intro-dark-overlay {
    display: none !important;
}

/* Text container — floats above collage, dissolves with blur on scroll */
.intro-text-wrap {
    position: relative;
    z-index: 10;
    opacity: var(--heading-opacity, 1);
    filter: blur(var(--heading-blur, 0px));
    transform: scale(var(--heading-scale, 1));
    will-change: opacity, filter, transform;
    transition: none;
    /* driven by JS */
}

.intro-heading {
    font-size: clamp(1.5rem, 2.8vw, 2.25rem);
    font-weight: 700;
    line-height: 1.4;
    max-width: 920px;
    margin: 0 auto;
    color: var(--text-dark);
    text-align: center;
    letter-spacing: -0.01em;
}

.intro-heading .lead-setup {
    display: block;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    font-weight: 500;
    color: color-mix(in srgb, var(--text-dark) 60%, transparent);
    letter-spacing: 0;
    line-height: 1.45;
    margin-bottom: 0.35em;
}

.intro-heading .lead-payoff {
    display: block;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.intro-heading .highlight {
    color: var(--primary-blue);
}

.intro-tagline {
    margin: 1.4em auto 0;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-align: center;
    color: color-mix(in srgb, var(--text-dark) 55%, transparent);
}

/* Word-by-word reveal (initHeadingWordReveal wraps each word in .word).
   Each unit gets --unit-index in source order; delay = index * stagger.
   .model-inline is EXCLUDED from this fade-up — it has its own scale(0)
   -> scale(1) + spin entrance driven by play3DEntrance, which fires at
   the same stagger tick as its word-position neighbours. */
.intro-heading .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.45em);
    filter: blur(6px);
    transition:
        opacity 0.55s cubic-bezier(0.22, 0.8, 0.28, 1),
        transform 0.55s cubic-bezier(0.22, 0.8, 0.28, 1),
        filter 0.55s cubic-bezier(0.22, 0.8, 0.28, 1);
    transition-delay: calc(var(--unit-index, 0) * 65ms);
    will-change: transform, opacity, filter;
}

.intro-heading.words-revealed .word {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.intro-heading .emoji {
    display: inline-block;
    font-style: normal;
}

/* ---- Collage item (legacy intro photo grid — markup removed) ---- */
.collage-item {
    position: absolute;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.08);
    border: 3px solid rgba(255, 255, 255, 0.95);
    /* All positioning/sizing/opacity driven by JS via inline style.
       Only base look defined here. */
    will-change: transform, opacity, filter;
    pointer-events: none;
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    /* Default hidden — JS shows them when appropriate */
    opacity: 0;
}

.collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Originals sit in a centered horizontal row while at rest (progress 0).
   JS handles the exact left position; CSS sets visible size + vertical position. */
.collage-item[data-collage-original] {
    opacity: 1;
    width: 224px;
    height: 153px;
    top: 60%;
    /* transform + left set by JS */
}

/* Per-photo tag pill — fades in when the photo is at peak hold (JS adds
   .tag-on during the active zoom hold phase, removes during fade in/out). */
.collage-tag {
    position: absolute;
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    padding: 5px 11px;
    background: var(--primary-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.28);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
}

.collage-item.tag-on .collage-tag {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   Intro Payoff — proof + invitation block
   Sits right after the zoom timeline, gives the spectacle a hard landing.
   ========================================= */
.intro-payoff {
    padding: clamp(60px, 8vw, 100px) 0 var(--section-pad);
    background: var(--bg-white);
}

.intro-payoff-card {
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px);
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.intro-payoff-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 50% -10%, var(--primary-blue-10) 0%, transparent 60%);
    pointer-events: none;
}

.intro-payoff-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-bottom: clamp(28px, 4vw, 40px);
    margin-bottom: clamp(28px, 4vw, 40px);
    border-bottom: 1px solid var(--border-light);
}

.payoff-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.payoff-num {
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.02em;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
}

.payoff-plus {
    color: var(--primary-blue);
}

.payoff-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.intro-payoff-text {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}

.intro-payoff-text h3 {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 10px;
}

.intro-payoff-text p {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-muted);
    margin: 0;
}

/* Inline 3D model slot (replaces emojis in intro heading).
   Wrapper handles entrance animation (scale 0 -> 1 + Z rotate -> tilt).
   Inner <model-viewer> handles mouse-reactive 3D camera orbit.

   NOTE: <model-viewer> defaults to 300x150px and its shadow-DOM :host rule
   is tough to beat. We use !important on width/height to guarantee sizing. */
.model-inline {
    display: inline-block !important;
    width: 1.2em !important;
    height: 1.2em !important;
    vertical-align: middle;
    transform: perspective(600px) scale(0) rotateY(0deg);
    transform-origin: center center;
    transform-style: preserve-3d;
    will-change: transform;
    overflow: visible;
    /* Entrance animation is applied by JS via Web Animations API */
}

.model-inline model-viewer {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    --poster-color: transparent;
    --progress-bar-color: transparent;
    --progress-mask: transparent;
    outline: none;
}


/* =========================================
   Events Section — Horizontal Carousel
   ========================================= */
.events-section {
    padding: 200px 0 var(--section-pad);
    position: relative;
    overflow: hidden;
}

/* Tinted background band removed — kept clean white to match brand.
   The .events-section-bg element is no longer rendered, but in case
   a stray instance remains we hide it. */
.events-section-bg {
    display: none;
}

.events-section .container {
    position: relative;
    z-index: 1;
}

.events-header {
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(40px, 6vw, 96px);
}

.events-heading-wrap {
    max-width: 720px;
}

.events-header .events-heading-sub {
    margin: 0 0 8px;
    max-width: 460px;
}

/* Meta row sits below the headline block, full width */
.events-meta-row {
    margin-bottom: var(--space-2xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.events-meta-row .events-stats {
    margin: 0;
}

/* Inline arrows */
.events-header-nav {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.events-heading {
    max-width: 620px;
}

.events-heading h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-dark);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.events-heading p {
    color: var(--text-muted);
    font-size: var(--text-base);
    line-height: 1.5;
    max-width: 520px;
}

/* Headline + gradient accent + supporting paragraph */
.events-heading-blend {
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-dark);
    letter-spacing: -0.02em;
    margin: 0;
    max-width: 720px;
}

.events-heading-blend .muted {
    color: var(--text-faint);
    font-weight: 600;
}

.events-heading-sub {
    color: var(--text-muted);
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    line-height: 1.4;
    font-weight: 500;
    max-width: 560px;
    margin: 0 0 20px;
}

/* Stat chips strip — mirrors events-hero-stats on events.html */
.events-stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.events-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-light);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-body);
}

.events-stat strong {
    color: var(--text-dark);
    font-weight: 800;
}

/* Accent variant for the lead "events this week" pill */
.events-stat--accent {
    background: var(--primary-blue-light);
    border-color: color-mix(in srgb, var(--primary-blue) 18%, transparent);
    color: var(--primary-blue-hover);
}

.events-stat--accent strong {
    color: var(--primary-blue-hover);
}

.events-stat-ico {
    width: 14px;
    height: 14px;
    color: var(--primary-blue);
    flex-shrink: 0;
}

.events-stat-ico svg {
    width: 100%;
    height: 100%;
    stroke-width: 2.25;
}

/* Legacy green dot — kept hidden in case it shows up elsewhere */
.events-stat-dot {
    display: none;
}

@keyframes events-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.16); }
    50%      { box-shadow: 0 0 0 7px rgba(0, 102, 255, 0.04); }
}

/* "Lihat Semua Event" CTA below the carousel */
.events-view-more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-2xl);
}

.events-view-more .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.events-view-more .btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s var(--ease-out-expo);
}

.events-view-more .btn:hover svg {
    transform: translateX(4px);
}

/* Carousel wrap holds the rail + the floating nav */
.events-carousel-wrap {
    position: relative;
}

.carousel-nav {
    display: none;
}

.carousel-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--border-light);
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-normal) var(--ease-out-expo);
}

.carousel-btn:hover {
    background: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-blue);
}

.carousel-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.carousel-btn:disabled:hover {
    background: white;
    color: var(--text-dark);
    border-color: var(--border-light);
    box-shadow: none;
}

.events-carousel {
    display: flex;
    gap: var(--space-lg);
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 8px 4px 24px;
    margin: -8px -4px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.events-carousel::-webkit-scrollbar {
    display: none;
}

.event-card {
    background: white;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    transition: transform var(--duration-normal) var(--ease-out-expo),
                box-shadow var(--duration-normal) var(--ease-out-expo),
                border-color var(--duration-normal) var(--ease-out-expo);
    position: relative;
    flex-shrink: 0;
    width: clamp(260px, 23.5vw, 290px);
    scroll-snap-align: start;
    /* Clip children to the rounded shape. overflow:hidden does NOT clip the
       box-shadow (it lives outside the border-box), so the lifted shadow on
       :hover stays intact. isolation creates a stacking context so the
       scaling image keeps its corner clip on hover (WebKit repaint fix). */
    overflow: hidden;
    isolation: isolate;
}

.event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    border-color: rgba(0, 102, 255, 0.3);
}

.event-card-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    /* Own compositing layer keeps the rounded top corners clipped while the
       inner <img> scales on hover (fixes corners snapping square in Safari). */
    transform: translateZ(0);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.event-card-image::after {
    /* subtle bottom gradient so date chip + bookmark stay legible on bright photos */
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
    pointer-events: none;
    z-index: 1;
}

.event-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out-expo);
}

.event-card:hover .event-card-image img {
    transform: scale(1.06);
}

.event-card-date {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 50px;
    height: 56px;
    background: white;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    line-height: 1;
    padding: 5px 0;
    z-index: 2;
}

.event-card-date .dmonth {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--primary-blue);
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.event-card-date .dday {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-dark);
}

.event-card-bookmark {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out-expo);
    z-index: 2;
}

.event-card-bookmark:hover {
    background: white;
    color: var(--primary-blue);
    transform: scale(1.1);
}

.event-card-bookmark.active {
    background: white;
    color: var(--primary-blue);
}

.event-card-bookmark.active i {
    fill: currentColor;
}

.event-card-content {
    padding: 18px 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.event-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.event-card h3 {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.event-card-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ec-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
}

.ec-detail i {
    width: 14px;
    height: 14px;
    color: var(--primary-blue);
    flex-shrink: 0;
}

.event-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--border-light);
    background: white;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.event-card-attendees {
    display: flex;
    align-items: center;
    gap: 12px;
}

.event-card-attendees .mini-avatars {
    display: flex;
    align-items: center;
}

.event-card-attendees .mini-avatars img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid white;
    margin-left: -6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.event-card-attendees .mini-avatars img:first-child {
    margin-left: 0;
}

.ec-attendee-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}

.ec-attendee-info .ec-going {
    color: var(--text-muted);
}

.ec-attendee-info .ec-going strong {
    font-weight: 700;
    color: var(--text-dark);
}

.ec-attendee-info span {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-body);
}

.ec-price {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--primary-blue);
}

.ec-price-free {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #16A34A;
}

.ec-price-free::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16A34A;
    flex-shrink: 0;
}

.event-card-rsvp {
    padding: 8px 16px;
    font-size: var(--text-sm);
    font-weight: 700;
    background: var(--text-dark);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-main);
    transition: all var(--duration-normal);
}

.event-card-rsvp:hover {
    background: var(--primary-blue);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 102, 255, 0.28);
}

/* Homepage carousel footer: stack the social proof on top of a full-width
   Join button. Scoped to .events-carousel so events.html grid cards keep
   their compact side-by-side layout. */
.events-carousel .event-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

.events-carousel .event-card-rsvp {
    width: 100%;
    justify-content: center;
    padding: 11px 16px;
}

.event-day {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: capitalize;
}


/* =========================================
   Articles Section
   ========================================= */
.articles-section {
    padding: 40px 0 var(--section-pad);
}

.articles-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-2xl);
}

.articles-header h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.02em;
}

.articles-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.article-row {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: var(--space-2xl);
    align-items: center;
    padding: var(--space-xl) 0;
    border-top: 1px dashed var(--border-light);
    transition: background var(--duration-normal);
}

.article-row:last-child {
    border-bottom: 1px dashed var(--border-light);
}

.article-row:hover {
    background: var(--bg-light);
    margin: 0 calc(-1 * var(--space-lg));
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    border-radius: var(--radius-md);
}

.article-body h3 {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.3;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.article-body h3 a {
    color: inherit;
    transition: color var(--duration-normal);
}

.article-body h3 a:hover {
    color: var(--primary-blue);
}

.article-date {
    font-size: var(--text-sm);
    color: var(--primary-blue);
    font-weight: 500;
    margin-bottom: 10px;
    display: block;
}

.article-read-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--primary-blue);
    margin-top: 12px;
    transition: gap 0.2s ease;
}

.article-read-more:hover {
    gap: 8px;
}

.article-read-more i {
    width: 14px;
    height: 14px;
}

.article-excerpt {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 680px;
}

.article-category {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    background: var(--primary-blue-10);
    color: var(--primary-blue);
    margin-bottom: 8px;
}

.article-thumb {
    width: 100%;
    height: 160px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out-expo);
}

.article-row:hover .article-thumb img {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .articles-header {
        flex-direction: row;
    }

    .article-row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .article-thumb {
        height: 180px;
        order: -1;
    }

    .article-row:hover {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        background: transparent;
    }
}

/* =========================================
   Store CTA — 3D Exploding Zero-Gravity
   Scroll-driven: expand → explode → collapse
   ========================================= */
.store-explode-section {
    position: relative;
    /* Scroll room for the animation — reduce this to shorten the static tail */
    height: 200vh;
    padding: 0;
    margin: 0;
}

.store-explode-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    z-index: 5;
    /* overflow visible so exploding models can escape outside the viewport column */
    overflow: visible;
}

/* Animated custom properties (enable smooth keyframe interpolation of angles/positions) */
@property --glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@property --bg-x1 {
    syntax: '<percentage>';
    initial-value: 20%;
    inherits: false;
}

@property --bg-y1 {
    syntax: '<percentage>';
    initial-value: 20%;
    inherits: false;
}

@property --bg-x2 {
    syntax: '<percentage>';
    initial-value: 80%;
    inherits: false;
}

@property --bg-y2 {
    syntax: '<percentage>';
    initial-value: 80%;
    inherits: false;
}

.store-explode-stage {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 480px;
    border-radius: var(--radius-2xl);
    /* Comum brand-colored gradient — fully offline, no shaders, no iframe.
       Two radial blobs drift around using @property-animated coordinates
       (--bg-x1/y1 + --bg-x2/y2 below). Sits on the Comum primary blue so
       the surface reads on-brand while still giving depth + light play
       behind the white CTA text. */
    background:
        radial-gradient(circle at var(--bg-x1) var(--bg-y1),
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.08) 28%,
            transparent 58%),
        radial-gradient(circle at var(--bg-x2) var(--bg-y2),
            rgba(150, 195, 255, 0.45) 0%,
            rgba(100, 165, 255, 0.18) 32%,
            transparent 62%),
        radial-gradient(ellipse at 50% 50%,
            #1f7bff 0%,
            #0066FF 55%,
            #0052cc 100%);
    background-color: #0066FF;
    /* Outer halo + static bevel (inset highlights top/left, shadows bottom/right) */
    box-shadow:
        0 32px 80px -20px rgba(0, 50, 160, 0.45),
        0 0 0 1px rgba(120, 190, 255, 0.35),
        0 0 24px 2px rgba(0, 170, 255, 0.70),
        0 0 60px 6px rgba(30, 120, 255, 0.55),
        0 0 120px 20px rgba(30, 110, 255, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.40),
        inset 1px 0 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 20, 80, 0.35),
        inset -1px 0 0 rgba(0, 20, 80, 0.18);
    animation:
        storeBgFlow 16s ease-in-out infinite,
        storeUnderglowPulse 3.2s ease-in-out infinite alternate;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;

    /* ───────────────────────────────────────────
       WebP Sequence Controls — edit these freely
       ─────────────────────────────────────────── */
    --seq-x: 0px;
    /* horizontal offset from center  (+ = right, − = left)          */
    --seq-y: 0px;
    /* vertical offset from center    (+ = down,  − = up)             */
    --seq-scale: 1.0;
    /* scale: 1.0 = natural, 1.5 = 50% bigger                        */
    --seq-frame-skip: 1;
    /* 1 = full speed · 2 = 2× faster · 0.5 = 2× slower              */
    --seq-scroll-start: 0.5;
    /* 0 = start when sticky kicks in · 1 = start 1 viewport earlier
       0.5 = begin exploding when card is ~halfway up from the bottom  */
}

/* --- Moving light on the bevel ---
   Thin 1px ring hugging the rounded edge, carrying a bright arc that
   travels around the perimeter. Uses the padding + mask-composite trick
   to render only at the border — no corner artifacts, no rotation.
   z-index: 1 keeps the ring BELOW the scroll-sequenced WebP (z-index 2)
   so the exploding 3D parts can overlap and break out across it. */
.store-explode-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--glow-angle),
            transparent 0deg,
            rgba(255, 255, 255, 0.15) 40deg,
            rgba(255, 255, 255, 0.95) 80deg,
            rgba(180, 220, 255, 1) 90deg,
            rgba(255, 255, 255, 0.95) 100deg,
            rgba(255, 255, 255, 0.15) 140deg,
            transparent 180deg,
            transparent 360deg);
    -webkit-mask:
        linear-gradient(#000, #000) content-box,
        linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
    animation: storeGlowOrbit 6s linear infinite;
    will-change: --glow-angle;
}

/* --- Traveling perimeter hotspot ---
   Narrow bright arc on a conic-gradient. The `from` angle is animated via
   @property (no element rotation), so the arc sweeps around the card while
   the element stays still — border-radius clips perfectly, no corner artifacts.
   The blur bleeds the color outward past the edge; the card's own background
   covers the inside half. Net result: a bright blue light travels around the rim. */
.store-explode-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(from var(--glow-angle),
            transparent 0deg,
            rgba(190, 225, 255, 0.02) 50deg,
            rgba(220, 240, 255, 0.09) 90deg,
            rgba(190, 225, 255, 0.02) 130deg,
            transparent 180deg,
            transparent 360deg);
    filter: blur(140px);
    opacity: 0.35;
    z-index: -1;
    pointer-events: none;
    animation: storeGlowOrbit 14s linear infinite;
    will-change: --glow-angle;
}

/* --- Grander reveal: intensify both glows when text reveal fires --- */
.store-explode-stage:has(.store-explode-text.cta-visible) {
    box-shadow:
        0 32px 80px -20px rgba(0, 50, 160, 0.45),
        0 0 0 1px rgba(150, 210, 255, 0.5),
        0 0 32px 3px rgba(0, 200, 255, 0.85),
        0 0 80px 10px rgba(40, 140, 255, 0.65),
        0 0 160px 30px rgba(40, 130, 255, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 1px 0 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 20, 80, 0.35),
        inset -1px 0 0 rgba(0, 20, 80, 0.18);
}

.store-explode-stage:has(.store-explode-text.cta-visible)::after {
    filter: blur(160px) brightness(1.05);
    opacity: 0.5;
}

@keyframes storeBgFlow {
    0%, 100% {
        --bg-x1: 15%;
        --bg-y1: 20%;
        --bg-x2: 85%;
        --bg-y2: 80%;
    }

    33% {
        --bg-x1: 80%;
        --bg-y1: 25%;
        --bg-x2: 20%;
        --bg-y2: 75%;
    }

    66% {
        --bg-x1: 55%;
        --bg-y1: 85%;
        --bg-x2: 40%;
        --bg-y2: 15%;
    }
}

@keyframes storeGlowOrbit {
    to {
        --glow-angle: 360deg;
    }
}

@keyframes storeUnderglowPulse {
    0% {
        box-shadow:
            0 32px 80px -20px rgba(0, 50, 160, 0.45),
            0 0 0 1px rgba(120, 190, 255, 0.35),
            0 0 24px 2px rgba(0, 170, 255, 0.70),
            0 0 60px 6px rgba(30, 120, 255, 0.55),
            0 0 120px 20px rgba(30, 110, 255, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.40),
            inset 1px 0 0 rgba(255, 255, 255, 0.22),
            inset 0 -1px 0 rgba(0, 20, 80, 0.35),
            inset -1px 0 0 rgba(0, 20, 80, 0.18);
    }

    100% {
        box-shadow:
            0 32px 80px -20px rgba(0, 50, 160, 0.45),
            0 0 0 1px rgba(140, 200, 255, 0.45),
            0 0 28px 3px rgba(0, 200, 255, 0.80),
            0 0 72px 8px rgba(60, 140, 255, 0.60),
            0 0 140px 24px rgba(60, 130, 255, 0.40),
            inset 0 1px 0 rgba(255, 255, 255, 0.40),
            inset 1px 0 0 rgba(255, 255, 255, 0.22),
            inset 0 -1px 0 rgba(0, 20, 80, 0.35),
            inset -1px 0 0 rgba(0, 20, 80, 0.18);
    }
}

/* Disabled: laptops/desktops should run the full animation set even when
   the OS has Reduce Motion enabled. Mobile is excluded elsewhere via width. */
@media not all {

    .store-explode-stage,
    .store-explode-stage::before,
    .store-explode-stage::after {
        animation: none !important;
    }
}

/* --- Centered text --- */
.store-explode-text {
    position: relative;
    z-index: 10;
    text-align: center;
    color: white;
    max-width: 600px;
    padding: 0 32px;
}

/* Eyebrow label */
.store-cta-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 14px;
}

.store-explode-text h2 {
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--space-md);
    line-height: 1.1;
    color: white;
    letter-spacing: -0.03em;
}

/* Italic accent word */
.store-explode-text h2 em {
    font-style: italic;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
}

.store-explode-text p {
    font-size: var(--text-base);
    opacity: 0.75;
    margin-bottom: var(--space-xl);
    line-height: 1.65;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
}

/* --- Explore Store button with underglow --- */
.btn-store-glow {
    padding: 13px 44px;
    font-weight: 700;
    position: relative;
}

.btn-store-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 10px 40px 4px rgba(255, 255, 255, 0.30);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.btn-store-glow:hover::after,
.store-explode-text.cta-visible .btn-store-glow::after {
    opacity: 0;
}

/* --- Word-by-word reveal animation ---
   JS splits h2 + p into .cta-word spans and sets inline transition-delay.
   Eyebrow and button animate as single-unit .cta-word blocks.        */
.cta-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.store-explode-text.cta-visible .cta-word {
    opacity: 1;
    transform: none;
}



/* --- Fluid metaball canvas — must be absolute so it doesn't affect flex centering --- */
.store-fluid-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* --- Scroll-driven WebP sequence image --- */
.store-seq-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + var(--seq-x, 0px)),
            calc(-50% + var(--seq-y, 0px))) scale(var(--seq-scale, 1));
    transform-origin: center center;
    width: auto;
    height: auto;
    max-width: none;
    /* allow it to overflow the card */
    pointer-events: none;
    user-select: none;
    z-index: 2;
    display: block;
}


/* =========================================
   Brands Section
   ========================================= */
.brands-section {
    padding: 40px 0 80px;
}

.brands-heading {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 32px;
}

.brands-marquee {
    overflow: hidden;
    padding: 16px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.brands-track {
    display: flex;
    gap: 56px;
    animation: scroll-x 35s linear infinite;
    width: max-content;
    align-items: center;
}

.brand-item {
    flex-shrink: 0;
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--text-faint);
    letter-spacing: 2px;
    white-space: nowrap;
    transition: color var(--duration-normal) ease;
}

.brand-item:hover {
    color: var(--primary-blue);
}

@keyframes scroll-x {
    from {
        transform: translateX(0);
    }

    /* Compensate for half the 48px gap so the duplicated logos align
       seamlessly when the loop restarts. */
    to {
        transform: translateX(calc(-50% - 24px));
    }
}

/* =========================================
   FAQ Section — Simplified Card
   ========================================= */
.faq-section {
    padding: 60px 0 80px;
}

.faq-simple {
    background: var(--bg-light);
    border-radius: var(--radius-2xl);
    padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 56px);
    max-width: 860px;
    margin: 0 auto;
    /* shiny bevel effect */
    border: 1px solid transparent;
    background-clip: padding-box;
    box-shadow:
        /* outer glow / depth */
        0 4px 24px rgba(0, 0, 0, 0.07),
        /* bottom-right dark edge */
        inset -1px -1px 0 rgba(0, 0, 0, 0.08),
        /* top-left bright highlight */
        inset 1px 1px 0 rgba(255, 255, 255, 0.85),
        /* second inner highlight — slightly wider, softer */
        inset 2px 2px 6px rgba(255, 255, 255, 0.55);
    outline: 1px solid rgba(255, 255, 255, 0.6);
    outline-offset: -1px;
}

.faq-title {
    text-align: center;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--duration-normal);
}

.faq-item:hover {
    box-shadow: var(--shadow-sm);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-dark);
    text-align: left;
    font-family: var(--font-main);
    gap: 16px;
}

.faq-item.active .faq-question {
    color: var(--primary-blue);
}

.faq-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--duration-normal) var(--ease-out-expo),
        background-color var(--duration-normal);
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
    background-color: var(--primary-blue-light);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s var(--ease-out-expo),
        padding 0.4s var(--ease-out-expo);
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}

@supports not (interpolate-size: allow-keywords) {
    .faq-answer {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s var(--ease-out-expo),
            padding 0.4s var(--ease-out-expo);
    }

    .faq-item.active .faq-answer {
        max-height: 300px;
    }
}

.faq-answer>div {
    overflow: hidden;
}

/* --- Per-item scroll-in reveal --- */
.faq-title,
.faq-item {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.55s var(--ease-out-expo),
        transform 0.55s var(--ease-out-expo),
        box-shadow var(--duration-normal);
}

.faq-title.faq-revealed,
.faq-item.faq-revealed {
    opacity: 1;
    transform: translateY(0);
}

.faq-answer p {
    padding: 0 28px 22px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* =========================================
   Instagram Showcase Section
   ========================================= */
.ig-showcase {
    background: transparent;
    /* sits on the page's white bg */
    padding: 72px 0 80px;
    overflow: hidden;
}

/* --- Header --- */
.ig-showcase-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    margin-bottom: 48px;
}

.ig-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-blue);
    margin-bottom: 12px;
}

.ig-left h2 {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: #111;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 12px;
}

.ig-left p {
    color: rgba(0, 0, 0, 0.45);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 480px;
    margin: 0 auto;
}

.ig-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-shrink: 0;
}

.ig-handle-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    color: var(--text-dark);
    font-family: var(--font-main);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform var(--duration-normal) var(--ease-out-expo),
        background-color var(--duration-normal) ease,
        border-color var(--duration-normal) ease,
        color var(--duration-normal) ease,
        box-shadow var(--duration-normal) ease;
}

.ig-handle-pill svg {
    width: 16px;
    height: 16px;
    color: currentColor;
    flex-shrink: 0;
    transition: color var(--duration-normal) ease;
}

.ig-handle-pill:hover {
    background: #fff;
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.ig-handle-pill:active {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .ig-handle-pill,
    .ig-handle-pill svg {
        transition: none;
    }

    .ig-handle-pill:hover {
        transform: none;
    }
}

/* --- Strip wrapper: both-edge gradient fades via mask --- */
.ig-strip-wrap {
    position: relative;
    /* Fade left 10%, solid middle 80%, fade right 10% */
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%);
    mask-image: linear-gradient(to right,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%);
}

/* Strip is now just an overflow:hidden clip */
.ig-video-strip {
    overflow: hidden;
    padding: 4px 0;
    /* tiny vertical room so card shadows aren't clipped */
}

/* Track is the flex row that animates */
.ig-video-track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: ig-marquee 40s linear infinite;
}

.ig-video-track:hover {
    animation-play-state: paused;
}

@keyframes ig-marquee {
    from {
        transform: translateX(0);
    }

    /* -50% lands half a gap short of seamless because translateX is on
       the whole 16-card track but we want the 9th card to align with
       where the 1st card started. Compensate by half the 12px gap. */
    to {
        transform: translateX(calc(-50% - 6px));
    }
}

/* --- Individual video card --- */
.ig-card {
    flex-shrink: 0;
    width: 273px;
    /* 210px × 1.3 */
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: #e8e8e8;
    text-decoration: none;
    display: block;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.ig-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ig-card:hover video {
    transform: scale(1.04);
}

.ig-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            transparent 45%,
            rgba(0, 0, 0, 0.72) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px 12px;
    gap: 2px;
}

.ig-card-handle {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
}

.ig-card-cta {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.ig-card:hover .ig-card-handle {
    color: #fff;
}

.ig-card:hover .ig-card-cta {
    opacity: 1;
    transform: none;
}

/* =========================================
   Membership Closing Section
   ========================================= */
.member-section {
    background: transparent;
    padding: 96px 0 104px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.member-header {
    margin-bottom: 56px;
}

.member-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-blue);
    margin-bottom: 16px;
}

.member-header h2 {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 16px;

    /* Gradient-wipe text effect.
       Two halves baked into one wide background:
         left half  → solid dark (final state),
         right half → brand-colored gradient (initial state).
       We animate background-position from right → left so the
       brand gradient appears first, then a dark sweep wipes across,
       leaving the heading in --text-dark. */
    background-image: linear-gradient(
        100deg,
        var(--text-dark) 0%,
        var(--text-dark) 48%,
        #1E293B 50%,
        #2563EB 58%,
        #6366F1 66%,
        #8B5CF6 74%,
        #2563EB 84%,
        var(--primary-blue) 100%
    );
    background-size: 220% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Prevent descender clipping (e.g. the "p" in "passion") when the
       text fill is transparent. */
    padding-bottom: 0.12em;
    transition: background-position 1.8s cubic-bezier(0.65, 0, 0.25, 1) 0.25s;
    will-change: background-position;
}

.member-header.revealed h2 {
    background-position: 0% 0;
}

@media (prefers-reduced-motion: reduce) {
    .member-header h2 {
        transition: none;
        background-position: 0% 0;
    }
}

.member-header p {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- Tier cards row --- */
.member-tiers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 56px;
    flex-wrap: wrap;
}

.member-tier-arrow {
    font-size: 1.4rem;
    color: rgba(0, 0, 0, 0.18);
    padding: 0 8px;
    flex-shrink: 0;
    margin-bottom: 24px;
}

.member-tier-card {
    flex: 0 0 220px;
    background: #f7f7f7;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    padding: 28px 24px 30px;
    text-align: left;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.member-tier-card:hover {
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
}

/* Captain — featured highlight */
.member-tier-card.mtc-featured {
    background: #eef3ff;
    border-color: rgba(0, 102, 255, 0.25);
    box-shadow: 0 4px 32px rgba(0, 102, 255, 0.1);
}

.member-tier-card.mtc-featured:hover {
    border-color: rgba(0, 102, 255, 0.4);
    box-shadow: 0 8px 40px rgba(0, 102, 255, 0.15);
}

.mtc-crown-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #0066FF;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 100px;
    white-space: nowrap;
}

.mtc-icon {
    font-size: 1.8rem;
    margin-bottom: 10px;
    line-height: 1;
}

.mtc-name {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: #111;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.mtc-threshold {
    display: block;
    font-size: 0.78rem;
    color: rgba(0, 0, 0, 0.38);
    font-weight: 500;
    margin-bottom: 18px;
}

.mtc-featured .mtc-threshold {
    color: rgba(0, 80, 200, 0.6);
}

.mtc-perks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mtc-perks li {
    font-size: 0.82rem;
    color: rgba(0, 0, 0, 0.55);
    padding-left: 16px;
    position: relative;
    line-height: 1.4;
}

.mtc-perks li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #0066FF;
    font-weight: 700;
    font-size: 0.75rem;
}

.mtc-featured .mtc-perks li {
    color: rgba(0, 0, 0, 0.7);
}

/* --- CTA button --- */
.member-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.member-join-btn {
    background: var(--primary-blue);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 48px;
    border-radius: 100px;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.member-join-btn:hover {
    background: var(--primary-blue-hover);
}


.member-footnote {
    font-size: 0.8rem;
    color: var(--text-faint);
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .member-tiers {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .member-tier-arrow {
        display: none;
    }

    .member-tier-card {
        flex: none;
    }
}

/* =========================================
   Home Footer — Blue Newsletter (Homepage only)
   ========================================= */

.home-footer {
    background: linear-gradient(135deg, #0066FF 0%, #0052cc 100%);
    color: white;
    padding: 72px 0 32px;
    position: relative;
}

.home-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 0.7fr;
    gap: 64px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.home-footer-logo {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    color: white;
}

.newsletter-heading {
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    color: white;
}

.footer-col-brand p {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--text-sm);
    margin-bottom: 20px;
    line-height: 1.5;
    max-width: 400px;
}

.newsletter-form {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-pill);
    padding: 4px 4px 4px 20px;
    max-width: 420px;
    gap: 8px;
    transition: background var(--duration-normal), border-color var(--duration-normal);
}

.newsletter-form:focus-within {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
}

.newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    font-family: var(--font-main);
    font-size: var(--text-sm);
    outline: none;
    padding: 10px 0;
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

.newsletter-form button {
    background: white;
    color: var(--primary-blue);
    border: none;
    border-radius: var(--radius-pill);
    padding: 10px 20px;
    font-weight: 700;
    font-size: var(--text-sm);
    cursor: pointer;
    font-family: var(--font-main);
    white-space: nowrap;
    transition: background var(--duration-normal);
}

.newsletter-form button:hover {
    background: var(--bg-light);
}

.footer-col-contact h4,
.footer-col-social h4 {
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: 16px;
    color: white;
}

.contact-block {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: 16px;
}

.contact-block strong {
    color: white;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

.footer-col-social {
    display: flex;
    flex-direction: column;
}

.footer-col-social a {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-sm);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    transition: color var(--duration-normal);
}

.footer-col-social a i,
.footer-col-social a svg {
    width: 18px;
    height: 18px;
}

.footer-col-social a:hover {
    color: white;
    opacity: 0.85;
}

.home-footer-bottom {
    text-align: right;
    padding-top: 24px;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
}

/* =========================================
   Footer (shared across other pages)
   ========================================= */
.footer {
    background-color: var(--bg-white);
    padding: 0 24px 24px;
}

.footer-container {
    background-color: var(--bg-footer);
    border-radius: 80px 80px var(--radius-2xl) var(--radius-2xl);
    padding: 0 64px 40px;
    color: white;
}

.footer-cta {
    text-align: center;
    padding: 80px 24px 64px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 64px;
}

.footer-cta h3 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.footer-cta p {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-lg);
    margin-bottom: var(--space-xl);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 64px;
    margin-bottom: 64px;
}

.brand-info {
    max-width: 300px;
}

.footer-logo {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    color: white;
}

.brand-info p {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--text-base);
    line-height: 1.6;
}

.footer-links-grid {
    display: flex;
    gap: 80px;
    flex-wrap: wrap;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-column h4 {
    font-weight: 700;
    font-size: var(--text-base);
    margin-bottom: 8px;
    color: white;
}

.footer-column a {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-column a:hover {
    color: white;
}

.footer-column a i,
.footer-column a svg {
    width: 16px;
    height: 16px;
}

.footer-bottom {
    text-align: center;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
    font-size: var(--text-sm);
}

/* =========================================
   Responsive: 1024px
   ========================================= */
@media (max-width: 1024px) {
    .hero-inner {
        justify-content: flex-end;
        padding-bottom: 170px;
    }

    .hero-content {
        margin-bottom: 28px;
    }

    .hero-bottom {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        gap: 24px;
        align-items: center;
    }

    .hero-proof {
        gap: 18px;
    }

    .proof-number {
        font-size: clamp(2.5rem, 5vw, 3.25rem);
    }

    .avatar {
        width: 52px;
        height: 52px;
        border-width: 2px;
        margin-left: -12px;
    }

    /* Mobile: skip the scroll-driven zoom entirely (way too heavy on
       phones). Show a small static collage of 3 photos instead. JS bails
       out in initIntroPhotoExplosion when window.innerWidth < 768. */
    .intro-scroll-spacer {
        height: auto;
    }

    .intro-sticky {
        position: relative;
        height: auto;
        min-height: auto;
        padding: clamp(48px, 6vw, 80px) 0 40px;
        perspective: none;
        overflow: visible;
    }

    .intro-dark-overlay {
        display: none;
    }

    .intro-text-wrap {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .collage-item,
    .collage-item.c-1,
    .collage-item.c-2,
    .collage-item.c-3,
    .collage-item.c-4,
    .collage-item.c-5,
    .collage-item.c-new {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        height: 140px;
        transform: none;
        opacity: 1;
        margin: 0;
        border-radius: 14px;
        overflow: hidden;
    }

    .collage-item.c-1 {
        grid-column: 1 / -1;
        height: 200px;
    }

    .collage-item.c-4,
    .collage-item.c-5,
    .collage-item.c-new {
        display: none;
    }

    /* On mobile the JS bails so .tag-on never gets toggled — show tags
       inline on the static collage instead. */
    .collage-tag {
        opacity: 1;
        transform: none;
        font-size: 10px;
        padding: 4px 9px;
        left: 8px;
        bottom: 8px;
    }

    /* Payoff stats: stay 3-col on tablet, collapse to 1 on phone below */
    .intro-payoff-stats {
        gap: 16px;
    }

    /* Kill <model-viewer> on mobile — WebGL is the biggest lag offender.
       The .model-inline rule above wins on its own model-viewers, so hide
       the wrapper instead. */
    .model-inline,
    .home-feature-icon model-viewer {
        /* display: none !important; */
    }

    /* Feature strip: icons gone -> collapse to text-only rows */
    .home-feature-item {
        /* grid-template-columns: 1fr !important; */
    }

    .home-feature-icon {
        /* display: none !important; */
    }

    /* Store explode: tablet */
    .store-explode-section {
        height: 180vh;
    }

    .orbit-model {
        --size: 110px !important;
    }

    .home-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }

    .footer-col-brand {
        grid-column: span 2;
    }

    .bento-grid {
        grid-template-rows: 180px 180px;
    }
}

/* =========================================
   Responsive: 768px
   ========================================= */
@media (max-width: 768px) {

    .nav-links,
    .nav-cta,
    .nav-cart-btn {
        display: none;
    }

    .nav-cart-mobile {
        display: inline-flex;
        margin-right: 2px;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -8px;
    }

    .menu-toggle i,
    .menu-toggle svg {
        width: 26px;
        height: 26px;
    }

    /* Tighter navbar pill on mobile — same look regardless of scroll state.
       The desktop .scrolled override would otherwise widen the horizontal
       padding when you scroll, making the bar appear to grow. */
    .navbar {
        top: 12px;
        padding: 0 12px;
    }

    .nav-container,
    .navbar.scrolled .nav-container {
        padding: 10px 16px;
        background-color: rgba(255, 255, 255, 0.96);
        box-shadow: var(--shadow-sm);
    }

    .logo-img {
        height: 22px;
    }

    .hero {
        padding: 0;
        min-height: 640px;
    }

    .hero-inner {
        padding: 100px 24px 60px;
        align-items: center;
        text-align: center;
        justify-content: center;
    }

    .main-content {
        margin-top: 100vh;
        border-radius: 32px 32px 0 0;
    }

    .hero h1 {
        font-size: clamp(2.4rem, 9.5vw, 3.4rem);
    }

    .hero-content {
        text-align: center;
        max-width: 100%;
        margin-top: 0;
        margin-bottom: 20px;
    }

    .hero-actions {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-bottom: 40px;
    }

    .hero-actions .btn {
        padding: 11px 24px;
        font-size: 0.95rem;
        min-width: 0;
    }

    .hero-bottom {
        display: contents;
    }

    .hero-proof {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        width: 100%;
    }

    .proof-text {
        text-align: center;
    }

    .avatar-group {
        justify-content: center;
    }

    .hero-eyebrow {
        font-size: 0.7rem;
        padding: 6px 14px;
        margin-bottom: 18px;
    }

    .proof-number {
        font-size: clamp(2.25rem, 8vw, 3rem);
    }

    .avatar {
        width: 48px;
        height: 48px;
        border-width: 2px;
        margin-left: -10px;
    }

    .partner-logos {
        gap: 16px;
    }

    .events-header {
        margin-bottom: 16px;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 16px;
    }

    .events-meta-row {
        margin-bottom: var(--space-xl);
        gap: 16px;
    }

    .events-header-nav {
        align-self: flex-end;
    }

    .carousel-nav {
        align-self: flex-end;
    }

    .store-explode-section {
        height: auto;
        padding: 40px 0;
    }

    .store-explode-sticky {
        position: relative;
        height: auto;
        padding: 0 16px;
    }

    .store-explode-stage {
        height: auto;
        padding: 56px 24px;
        border-radius: var(--radius-xl);
        max-width: 100%;
        overflow: hidden;
    }

    .orbit-model {
        display: none;
    }

    .orbit-fallback {
        display: block;
    }

    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .bento-a,
    .bento-b,
    .bento-c,
    .bento-d,
    .bento-e,
    .bento-f,
    .bento-g,
    .bento-h {
        grid-column: span 1;
        grid-row: span 1;
        height: 180px;
    }

    .home-footer {
        padding: 56px 0 24px;
    }

    .home-footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-col-brand {
        grid-column: span 1;
    }

    .home-footer-bottom {
        text-align: left;
    }

    .footer-container {
        padding: 0 28px 24px;
        border-radius: 40px 40px var(--radius-xl) var(--radius-xl);
    }

    .footer-cta {
        padding: 48px 16px 40px;
    }

    .footer-top {
        flex-direction: column;
        gap: 40px;
    }

    .footer-links-grid {
        gap: 40px;
    }
}

/* =========================================
   Responsive: 480px
   ========================================= */
@media (max-width: 480px) {
    .hero {
        padding: 0;
    }

    .hero-inner {
        padding: 100px 16px 190px;
    }

    .main-content {
        margin-top: 100vh;
        border-radius: 24px 24px 0 0;
    }

    .hero-actions {
        flex-direction: row;
        justify-content: center;
        width: 100%;
    }

    .hero-actions .btn {
        width: auto;
        padding: 10px 18px;
        font-size: 0.88rem;
    }

    .hero-proof {
        gap: 14px;
    }

    .proof-number {
        font-size: clamp(2rem, 7vw, 2.75rem);
    }

    .avatar {
        width: 42px;
        height: 42px;
        margin-left: -8px;
    }

    .avatar-more {
        font-size: 1.1rem;
    }

    .intro-heading {
        font-size: 1.25rem;
    }

    .event-card {
        width: 260px;
    }

    .newsletter-form {
        flex-direction: column;
        padding: 12px;
        border-radius: var(--radius-md);
    }

    .newsletter-form input {
        padding: 8px 12px;
    }

    .newsletter-form button {
        width: 100%;
        padding: 12px;
    }

    .footer-links-grid {
        flex-direction: column;
        gap: 32px;
    }
}





/* User preferences banner (events + store) */

.prefs-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    background: var(--primary-blue-10);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    color: var(--text-dark);
}

.prefs-banner i,
.prefs-banner svg {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    color: var(--primary-blue);
    margin-right: 4px;
}

.prefs-banner strong {
    color: var(--primary-blue);
    font-weight: 700;
}

.prefs-banner button {
    background: white;
    border: 1px solid var(--border-light);
    color: var(--text-dark);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: border-color var(--duration-fast), color var(--duration-fast);
}

.prefs-banner button:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

/* Hero gradient highlight (padel / cycling) */
.hero-gradient-text {
    background: linear-gradient(135deg, #BFDBFE 0%, #60A5FA 50%, #2563EB 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: italic;
    font-weight: 800;
    display: inline-block;
    padding-right: 0.1em;
    padding-bottom: 0.1em;
    margin-right: -0.1em;
    overflow: visible;
}

/* Hero animated sticker videos (replaces gradient padel/cycling text) */
.hero-sticker {
    display: inline-block;
    /* Keep the layout box close to the cap-height of the headline so the
       sticker doesn't push the line apart. The visual size comes from the
       transform: scale() below. */
    height: 1em;
    width: auto;
    vertical-align: -0.18em;
    margin: 0 -0.1em;
    pointer-events: none;
    background: transparent;
    will-change: transform;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
    transform-origin: center;
}

.hero-sticker--padel {
    transform: scale(1.85) rotate(2deg) translateX(0.35em) translateY(0.05em);
}

.hero-and {
    display: inline-block;
    margin-left: 0.95em;
}

.hero-sticker--cycling {
    transform: scale(1.85) rotate(-2deg) translateX(0.35em);
}

.hero-comma {
    margin-left: 1.2em;
}

/* =========================================
   Hero — Eyebrow pill, CTA glow, gradient proof, +avatar
   ========================================= */
.hero-eyebrow {
    display: inline-block;
    padding: 8px 18px;
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}

/* Primary CTA — white solid + subtle blue underglow (breathing) */
.btn-cta-glow {
    position: relative;
    box-shadow:
        0 0 0 rgba(59, 130, 246, 0.0),
        0 8px 28px rgba(37, 99, 235, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.12);
    animation: cta-breath 3.2s ease-in-out infinite;
    transition: transform var(--duration-normal) var(--ease-out-expo),
        box-shadow var(--duration-normal) var(--ease-out-expo);
}

.btn-cta-glow:hover {
    background: var(--primary-blue-hover);
    animation-play-state: paused;
}

@keyframes cta-breath {

    0%,
    100% {
        box-shadow:
            0 0 18px rgba(96, 165, 250, 0.25),
            0 8px 28px rgba(37, 99, 235, 0.32),
            0 2px 8px rgba(0, 0, 0, 0.12);
    }

    50% {
        box-shadow:
            0 0 28px rgba(96, 165, 250, 0.45),
            0 10px 34px rgba(37, 99, 235, 0.45),
            0 2px 8px rgba(0, 0, 0, 0.12);
    }
}

/* Disabled: laptops/desktops keep the CTA glow animation regardless of
   the OS reduce-motion preference. */
@media not all {
    .btn-cta-glow {
        animation: none;
    }
}

/* Proof number — gradient + slow shimmer */
.proof-number {
    background: linear-gradient(100deg,
            #93C5FD 0%,
            #60A5FA 25%,
            #2563EB 50%,
            #60A5FA 75%,
            #93C5FD 100%);
    background-size: 200% 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: proof-shimmer 6s linear infinite;
}

.proof-plus {
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes proof-shimmer {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 200% 50%;
    }
}

/* Disabled: proof number shimmer keeps animating regardless of OS
   reduce-motion preference. */
@media not all {
    .proof-number {
        animation: none;
    }
}

/* "+" avatar at end of group */
.avatar-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #60A5FA 0%, #2563EB 100%);
    color: transparent;
    font-size: 0;
    line-height: 0;
    user-select: none;
    padding: 0;
    overflow: hidden;
}

.avatar-more::before,
.avatar-more::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: white;
    border-radius: 2px;
}

.avatar-more::before {
    width: 38%;
    height: 2px;
    transform: translate(-50%, -50%);
}

.avatar-more::after {
    width: 2px;
    height: 38%;
    transform: translate(-50%, -50%);
}

/* Avatar group fan-out on hover */
.avatar-group {
    transition: transform var(--duration-normal) var(--ease-out-expo);
}

.avatar-group .avatar {
    transition: transform var(--duration-normal) var(--ease-out-expo),
        box-shadow var(--duration-normal) var(--ease-out-expo);
}

.avatar-group:hover .avatar:nth-child(1) {
    transform: translateX(-10px);
}

.avatar-group:hover .avatar:nth-child(2) {
    transform: translateX(-5px);
}

.avatar-group:hover .avatar:nth-child(3) {
    transform: translateX(0);
}

.avatar-group:hover .avatar:nth-child(4) {
    transform: translateX(5px);
}

.avatar-group:hover .avatar:nth-child(5) {
    transform: translateX(10px) scale(1.06);
}

/* =========================================
   Event Modal
   ========================================= */
.comum-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.comum-modal.active {
    opacity: 1;
    visibility: visible;
}

.comum-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.comum-modal-container {
    position: relative;
    width: 90%;
    max-width: 1200px;
    background: var(--bg-white);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

.comum-modal.active .comum-modal-container {
    transform: translateY(0) scale(1);
}

.comum-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 20;
    color: var(--text-dark);
    transition: transform 0.2s, background 0.2s;
}

.comum-modal-close:hover {
    transform: scale(1.1);
    background: var(--bg-light);
}

.comum-modal-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.modal-image-col {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
}

.modal-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.modal-image-col .badge {
    position: absolute;
    top: 24px;
    left: 24px;
    background: white;
    color: var(--text-dark);
    font-weight: 700;
}

.modal-details-col {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-details-col h3 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 24px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.modal-details-col .event-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}

.modal-details-col .meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 600;
}

.modal-details-col .meta-item i,
.modal-details-col .meta-item svg {
    color: var(--primary-blue);
    width: 20px;
    height: 20px;
}

.modal-event-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 32px;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.modal-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 1rem;
}

.btn-wa {
    border-color: #25D366;
    color: #25D366;
    background: transparent;
}

.btn-wa:hover {
    background: #25D366;
    color: white;
}

@media (max-width: 768px) {
    .comum-modal-content {
        grid-template-columns: 1fr;
    }

    .modal-image-col {
        height: 240px;
        min-height: auto;
    }

    .modal-details-col {
        padding: 24px;
    }

    .modal-details-col h3 {
        font-size: 1.5rem;
        margin-bottom: 16px;
    }
}

/* Event Modal Rich Details */
.event-rich-details {
    background: var(--bg-light);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.detail-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-label {
    color: var(--text-muted);
    font-weight: 500;
}

.detail-val {
    color: var(--text-dark);
    font-weight: 700;
    text-align: right;
}

/* Modal Success State */
.modal-success-state {
    text-align: center;
    align-items: center;
    justify-content: center;
}

.success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.success-icon i,
.success-icon svg {
    width: 40px;
    height: 40px;
    color: #25D366;
}

.modal-success-state h3 {
    margin-bottom: 16px;
}

.modal-success-state p {
    color: var(--text-muted);
    margin-bottom: 32px;
    line-height: 1.6;
}

.success-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-wa-solid {
    background: #25D366;
    border-color: #25D366;
    color: white;
}

.btn-wa-solid:hover {
    background: #1ebd5c;
    border-color: #1ebd5c;
    color: white;
}

/* Mobile Hero Video — play the same looping video as desktop.
   A static image stays behind it as a poster fallback in case the
   browser blocks autoplay or the video is still buffering. */
@media (max-width: 768px) {
    .hero-image {
        display: block !important;
    }

    .hero-bg {
        background-image: url('./Asset/WebP/Padel_Photo1_result.webp');
        background-size: cover;
        background-position: center;
    }
}

/* Pause marquee animations when offscreen or tab hidden — saves
   compositor/GPU work. Class is toggled by initRuntimePerf in script.js. */
.partner-logos-track.marquee-offscreen,
.ig-video-track.marquee-offscreen {
    animation-play-state: paused !important;
}

/* Respect users who opted out of motion: stop decorative marquees and
   slow the IG showcase (it IS the feature, so keep it moving). */
/* Disabled: marquees and IG showcase keep their full animation regardless
   of the OS reduce-motion preference, so laptops behave the same as
   desktops. */
@media not all {

    .partner-logos-track {
        animation: none !important;
    }

    .ig-video-track {
        animation-duration: 120s !important;
    }
}
/* ============================================================
   STORY STAGE — scroll-driven cinematic section.
   Outer wrapper is tall (~500vh). Inner viewport is position:sticky
   so it pins to the screen while the user scrolls past. JS reads
   scroll progress (0..1) and writes per-frame inline styles
   (opacity, transform) to drive a 4-frame zoom-in sequence.
   ============================================================ */
.story-stage {
    position: relative;
    min-height: 400vh;
    background: var(--bg-warm);
}

.story-stage__viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    perspective: 1400px;
    perspective-origin: 50% 50%;
}

/* Each frame is absolutely stacked inside the viewport.
   JS writes inline transform (translateZ + scale) and opacity per frame. */
.story-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    will-change: opacity, transform;
    transform-style: preserve-3d;
    pointer-events: none;
}

.story-frame.is-visible {
    pointer-events: auto;
}

/* ---- Split frames (image + card)
   Both elements start stacked/overlapping in the center.
   JS animates translateX on each child to slide them apart:
   Frame 1: media goes left, card goes right.
   Frame 2: card goes left, media goes right.
   Container max-width mirrors the navbar (1200px inner, 24px min gutter)
   so card+media + gap fill exactly the navbar width. Media and card
   share the same height via --split-h so they align. */
.story-frame--split {
    --split-h: clamp(440px, 68vh, 600px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 4vw, 64px);
    padding-top: clamp(48px, 6vh, 96px);
    padding-bottom: clamp(48px, 6vh, 96px);
    padding-left: max(24px, calc((100% - 1200px) / 2));
    padding-right: max(24px, calc((100% - 1200px) / 2));
    transform-style: flat;
}

.story-frame__media {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: var(--split-h);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin: 0;
    will-change: transform, opacity;
}

.story-frame__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(var(--img-zoom, 1));
    transition: transform 0s linear;
    will-change: transform;
}

/* Padel BG manages its own transform entirely via JS — skip the --img-zoom rule */
.story-frame__media--parallax-padel .padel-bg,
.story-frame__media--parallax-cycling .cycling-bg {
    transform: none; /* overridden by JS inline style */
}

/* Floating pill on the image — adds a concrete "where / when" anchor
   so the image isn't just decorative. Bottom-left, frosted pill. */
.story-frame__badge {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    z-index: 3;
    pointer-events: none;
}

.story-frame__badge i {
    width: 14px;
    height: 14px;
}

.story-frame__media--left  { order: 1; }
.story-frame__media--right { order: 2; }

/* ---- Padel parallax: BG + FG share identical box; FG breaks out ----
   Alignment contract: both layers are absolutely positioned with inset:0,
   same width/height, same object-fit, same object-position. Neither layer
   inherits any transform from parent rules (see --parallax-padel .padel-bg
   override above that resets the .story-frame__media img transform). The
   BG gets JS-driven clip-path + scale; the FG is never transformed.
*/
.story-frame__media--parallax-padel,
.story-frame__media--parallax-cycling {
    /* overflow visible so the FG people can spill past the cropped BG box */
    overflow: visible;
    /* no shadow — the clipped BG provides the frame edge */
    box-shadow: none;
    background: transparent;
    border-radius: 0;
}

/* Shared base for both layers — identical sizing & positioning */
.story-frame__media--parallax-padel .padel-bg,
.story-frame__media--parallax-padel .padel-fg,
.story-frame__media--parallax-cycling .cycling-bg,
.story-frame__media--parallax-cycling .cycling-fg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain — preserves the full image so the FG cutout never gets edge-cropped.
       BG and FG are a matched pair (same intrinsic aspect ratio) so contain
       renders them at identical scale and position, keeping them pixel-aligned. */
    object-fit: contain;
    object-position: center center;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}

/* BG: JS animates clip-path (shape) and scale (pop). */
.story-frame__media--parallax-padel .padel-bg,
.story-frame__media--parallax-cycling .cycling-bg {
    transform-origin: center center;
    will-change: clip-path, transform, filter;
    /* Default clip matches the original figure radius so the BG looks
       like the normal rounded card before the animation kicks in. */
    clip-path: inset(0% 0% 0% 0% round var(--radius-lg));
    -webkit-clip-path: inset(0% 0% 0% 0% round var(--radius-lg));
    z-index: 1;
    /* Shadow lives on the BG so it follows the clipped shape */
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.22));
}

/* FG: never transformed — people always render in full, at full size */
.story-frame__media--parallax-padel .padel-fg,
.story-frame__media--parallax-cycling .cycling-fg {
    pointer-events: none;
    z-index: 2;
    /* drop-shadow on the FG only where it extends beyond the BG */
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.28));
}

.story-frame__card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: var(--split-h);
    padding: 0 clamp(8px, 1.5vw, 24px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    will-change: transform, opacity;
}

.story-frame__card--left  { order: 1; }
.story-frame__card--right { order: 2; }

/* Keep card content stacked above any decorative children. */
.story-frame__card > * {
    position: relative;
    z-index: 1;
}

.story-frame__eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-blue);
    margin-bottom: 18px;
}

.story-frame__title {
    font-family: var(--font-primary, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(1.85rem, 3.6vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.08;
    color: var(--text-dark);
    margin: 0 0 20px;
    text-wrap: balance;
}

.story-frame__title--center {
    text-align: center;
    color: #fff;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    font-size: clamp(2rem, 5vw, 4rem);
    max-width: 880px;
}

.story-frame__body {
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    color: var(--text-body);
    line-height: 1.6;
    margin: 0;
}

.story-frame__chips {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.story-frame__chips li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.story-frame__chips li i {
    width: 14px;
    height: 14px;
    color: var(--primary-blue);
}

.story-frame__chips li:hover {
    background: #fff;
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

/* Role pills — echo the grid pill styling so the card reads as a
   preview of who you'll meet in the grid frame. Solid-color pills
   for roles with blue accent, outline pill for generic "Member". */
.story-frame__roles {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.story-frame__role-pill {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.story-frame__role-pill--atlet,
.story-frame__role-pill--coach,
.story-frame__role-pill--rc {
    background: var(--primary-blue);
    color: #fff;
}

.story-frame__role-pill--member {
    background: transparent;
    color: var(--text-dark);
    border-color: var(--border-light);
}

/* ---- Solo frame (small centered portrait + caption underneath).
   This is the "portal" image — the 12 grid cards emerge from behind
   it during the next frame, so it stays compact in the middle of the
   viewport rather than going full-bleed. */
.story-frame--solo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 2.5vh, 32px);
    padding: 24px;
    z-index: 2;
}

.story-frame__solo-media {
    position: relative;
    width: clamp(220px, 22vw, 320px);
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    margin: 0;
    will-change: transform;
}

.story-frame__solo-media img,
.story-frame__solo-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

/* Flash-cuts ping-pong: two videos stacked, swap instantly */
.flash-cuts-wrap {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}

.flash-cuts-vid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    opacity: 0;
    /* no transition — swap must be instant */
}

.flash-cuts-vid--active {
    opacity: 1;
}

.story-frame__solo-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 45%,
        rgba(15, 23, 42, 0.78) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
}

.story-frame__solo-caption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.1s;
}

.story-frame__overlay {
    text-align: center;
    max-width: 720px;
}

/* IG section stickers — beside the heading */
.ig-heading-stickers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(80px, 9vw, 140px);
    position: relative;
}

.ig-heading-stickers h2 {
    margin: 0;
    flex-shrink: 0;
}

.ig-sticker {
    width: clamp(108px, 10.8vw, 168px);
    height: auto;
    flex-shrink: 0;
    pointer-events: auto;
    cursor: default;
    /* start hidden — JS adds .ig-sticker--settled after pop-in */
    opacity: 0;
    transform: scale(0.4);
    transform-origin: center center;
    filter: drop-shadow(1px 2px 0px rgba(0, 0, 0, 0.10)) drop-shadow(2px 3px 1px rgba(0, 0, 0, 0.05));
}

/* Once settled, enable the elastic hover transition */
.ig-sticker--settled {
    opacity: 1;
    transition: transform 0.55s cubic-bezier(0.34, 1.8, 0.64, 1),
                filter 0.3s ease;
}

.ig-sticker--settled.ig-sticker--left {
    transform: rotate(-14deg) translateY(10px) scale(1);
}

.ig-sticker--settled.ig-sticker--right {
    transform: rotate(11deg) translateY(20px) scale(1);
}

.ig-sticker--settled.ig-sticker--left:hover {
    transform: rotate(-14deg) translateY(10px) scale(1.07);
    filter: drop-shadow(2px 4px 1px rgba(0, 0, 0, 0.18)) drop-shadow(4px 8px 3px rgba(0, 0, 0, 0.10));
}

.ig-sticker--settled.ig-sticker--right:hover {
    transform: rotate(11deg) translateY(20px) scale(1.07);
    filter: drop-shadow(2px 4px 1px rgba(0, 0, 0, 0.18)) drop-shadow(4px 8px 3px rgba(0, 0, 0, 0.10));
}

/* Pop-in animation — only while entering, before settled */
.ig-sticker--left.ig-sticker--popped:not(.ig-sticker--settled) {
    animation: igStickerPopLeft 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.ig-sticker--right.ig-sticker--popped:not(.ig-sticker--settled) {
    animation: igStickerPopRight 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes igStickerPopLeft {
    0%   { opacity: 0; transform: scale(0.4) rotate(-8deg); }
    60%  { opacity: 1; transform: scale(1.1) rotate(-16deg); }
    100% { opacity: 1; transform: scale(1) rotate(-14deg) translateY(10px); }
}

@keyframes igStickerPopRight {
    0%   { opacity: 0; transform: scale(0.4) rotate(5deg); }
    60%  { opacity: 1; transform: scale(1.1) rotate(13deg); }
    100% { opacity: 1; transform: scale(1) rotate(11deg) translateY(-10px); }
}

/* Sticker overlay: flex row so stickers sit beside the text */
.story-frame__overlay--stickers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2vw, 32px);
    max-width: none;
    position: relative;
}

/* Sticker videos — play once then freeze */
.story-sticker {
    width: clamp(100px, 10vw, 160px);
    height: auto;
    flex-shrink: 0;
    pointer-events: none;
    /* Freeze on last frame is handled by JS pausing at ended */
}

.story-sticker--left {
    transform: rotate(-12deg) translateY(6px);
    transform-origin: center bottom;
}

.story-sticker--right {
    transform: rotate(10deg) translateY(-8px);
    transform-origin: center top;
}

.story-frame__title--center {
    color: var(--text-dark);
    text-shadow: none;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    margin: 0;
}

/* ---- Grid frame (people cards filling the screen) ---- */
.story-frame--grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2vh, 28px);
    padding: clamp(136px, 13vh, 152px) 0 clamp(32px, 4vh, 52px);
    background: var(--bg-warm);
    overflow: hidden; /* clip the grid's horizontal bleed */
}

.story-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    gap: clamp(8px, 0.9vw, 14px);
    /* Extend past the viewport on both sides so edge cards always bleed
       off-screen. During drift (~40px max offset) this guarantees no
       background gap ever opens up at the edges, and the mask fades
       over the bleed + partway into the visible edges for a soft
       vignette effect. */
    width: calc(100% + 160px);
    margin-left: -80px;
    margin-right: -80px;
    max-width: none;
    flex: 1;
    min-height: 0;
    perspective: 1200px;
    transform-style: preserve-3d;
    /* Soft gradient on the left/right edges of the screen. Fade zone
       spans the 80px bleed + ~80px into the visible edge, so the
       outermost cards gently dissolve into the background. */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 160px,
        #000 calc(100% - 160px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 160px,
        #000 calc(100% - 160px),
        transparent 100%
    );
}

/* Brick-style horizontal offset: alternate rows shift slightly so the
   grid doesn't read as a perfect matrix. The offset is layered onto
   the existing morph transform via --row-shift (percentage). */
.story-grid__card { --row-shift: 0%; }
/* 7-column layout: row 2 (cards 8-14) shifts right, row 3 (15-21) shifts left */
.story-grid__card:nth-child(n+8):nth-child(-n+14)  { --row-shift: 2.2%; }
.story-grid__card:nth-child(n+15):nth-child(-n+21) { --row-shift: -1.4%; }

/* JS writes --gx, --gy (px from grid slot toward viewport center) and
   --gs (scale 0.35 → 1.0). At p≈0.65 each card sits stacked behind
   the Frame 3 portrait; as scroll advances they fly out to their
   own grid position. --row-shift is a per-row horizontal nudge so the
   grid has a subtle brick rhythm at rest (cp=1). --mx is a slow
   marquee drift applied only after the grid has fully settled. */
.story-grid__card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-light);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    opacity: 0;
    transform:
        translate(var(--row-shift, 0%), 0)
        translate(var(--mx, 0px), 0)
        translate3d(var(--gx, 0), var(--gy, 0), var(--gz, 0px))
        scale(var(--gs, 0.35));
    will-change: opacity, transform;
}

.story-grid__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.story-grid__card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 45%,
        rgba(15, 23, 42, 0.78) 100%);
    pointer-events: none;
}

.story-grid__caption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fff;
}

.story-grid__pill {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    margin-bottom: 4px;
}

/* Unified pill treatment: same translucent white blur for every role.
   Comum's tone is community-first, so atlet/coach/member sit shoulder
   to shoulder visually — no color hierarchy. The label word still
   identifies the role; variety comes from photos and event copy. */
.story-grid__pill--member,
.story-grid__pill--atlet,
.story-grid__pill--coach,
.story-grid__pill--rc { background: rgba(255, 255, 255, 0.20); color: #fff; }

.story-grid__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.story-grid__role {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.85;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.story-grid__cta {
    margin-top: 4px;
    align-self: center;
    font-size: clamp(0.85rem, 1vw, 1rem);
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 280ms ease, transform 280ms ease;
    pointer-events: none;
    user-select: none;
}

.story-frame--grid.is-cta-visible .story-grid__cta {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Laptop and small desktop keep the full desktop layout ----
   Previously the grid dropped to 6, 5, or 4 columns at common laptop
   widths (1440/1366/1280), which made the section feel significantly
   smaller than on a true desktop. Those tiers are intentionally
   removed so the 7-column, 21-card desktop grid renders everywhere
   above the tablet breakpoint. */

/* ---- Tablet: 3-column grid, slightly tighter split frames ---- */
@media (max-width: 960px) {
    .story-stage { min-height: 380vh; }

    .story-frame--split {
        --split-h: clamp(380px, 62vh, 520px);
        gap: clamp(20px, 3vw, 40px);
        padding-top: clamp(40px, 6vh, 80px);
        padding-bottom: clamp(40px, 6vh, 80px);
        padding-left: max(20px, calc((100% - 1200px) / 2));
        padding-right: max(20px, calc((100% - 1200px) / 2));
    }

    .story-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .story-grid__card:nth-child(n+10) { display: none; } /* trim to 9 */
    .story-grid__card:nth-child(n+5):nth-child(-n+8)   { --row-shift: 0%; }
    .story-grid__card:nth-child(n+9):nth-child(-n+12)  { --row-shift: 0%; }
    .story-grid__card:nth-child(n+4):nth-child(-n+6)   { --row-shift: 2.8%; }
    .story-grid__card:nth-child(n+7):nth-child(-n+9)   { --row-shift: -1.8%; }
}

/* ---- Mobile: drop sticky-stage, render as a normal stack ---- */
@media (max-width: 767px) {
    .story-stage {
        min-height: auto;
        padding: clamp(48px, 8vw, 72px) 0;
    }

    .story-stage__viewport {
        position: static;
        height: auto;
        overflow: visible;
    }

    .story-frame {
        position: relative;
        opacity: 1 !important;
        transform: none !important;
        inset: auto;
        margin: 0 0 clamp(40px, 8vh, 72px);
        pointer-events: auto;
    }

    .story-frame--split {
        flex-direction: column;
        padding: 0 20px;
        gap: 20px;
    }

    /* Scale down stickers on mobile so they don't crowd the text */
    .story-sticker {
        width: clamp(60px, 15vw, 90px);
    }

    .story-frame__overlay--stickers {
        gap: 10px;
    }

    /* IG stickers — hide on mobile to keep heading readable */
    .ig-sticker {
        display: none;
    }

    .story-frame__media,
    .story-frame__card {
        width: 100%;
        max-width: 100%;
        height: auto;
        transform: none !important;
    }

    .story-frame__media {
        aspect-ratio: 4 / 3;
        max-height: none;
    }

    .story-frame--solo {
        padding: 32px 20px;
    }

    .story-frame--grid {
        padding: 0 16px;
        height: auto;
    }

    .story-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .story-grid__card {
        opacity: 1 !important;
        transform: none !important;
        aspect-ratio: 3 / 4;
    }

    .story-grid__card:nth-child(n+9) { display: none; } /* trim to 8 on mobile */

    .story-grid__cta {
        opacity: 1 !important;
        transform: none !important;
        margin-top: 16px;
    }
}

/* ---- Reduced motion: the story stage is the signature section — we
   keep the full animation regardless of OS motion-reduction settings.
   If users truly need a static version they can zoom to mobile width. */
/* (Intentionally empty — reduced-motion override disabled for .story-stage) */

/* 5000 lines of pure pain and suffering */

/* =========================================
   MOBILE OVERHAUL — Phone ≤ 767px
   Fixes: horizontal overflow, lag, layout,
   misaligned sections, heavy animations.
   ========================================= */
@media (max-width: 767px) {

    /* ---- Global overflow containment ---- */
    /* Prevent ANY section from causing horizontal scroll */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Kill all will-change on mobile — wastes GPU layers on phone */
    .collage-item,
    .intro-text-wrap,
    .story-frame__media--parallax-padel,
    .story-frame__media--parallax-cycling,
    .story-frame__media--parallax-padel .padel-bg,
    .story-frame__media--parallax-cycling .cycling-bg {
        will-change: auto;
    }

    /* ---- Events Section — reduce massive top padding ---- */
    .events-section {
        padding: 64px 0 var(--section-pad);
    }

    /* ---- Events carousel — tighter cards ---- */
    .events-carousel {
        padding: 8px 4px 20px;
        margin: -8px -4px 0;
        gap: 12px;
    }

    .event-card {
        width: 80vw;
        min-width: 240px;
        max-width: 310px;
    }

    /* ---- Intro scroll spacer — reduce scroll runway on mobile ----
       JS bails at <768px, so the 400vh spacer becomes pure dead scroll.
       Cut it down so users reach the payoff much faster. */
    .intro-scroll-spacer {
        height: 0;
        min-height: 0;
        overflow: hidden;
    }

    .intro-sticky {
        position: static;
        height: auto;
        overflow: visible;
        perspective: none;
    }

    /* Show the intro text statically on mobile (no scroll animation) */
    .intro-text-wrap {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        padding: 40px 20px 24px;
        text-align: center;
    }

    /* Hide the collage photos entirely — they're positioned by JS on desktop */
    .collage-item {
        display: none !important;
    }

    /* ---- Intro payoff stats — 2-col on phone ---- */
    .intro-payoff-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .intro-payoff-card {
        padding: 28px 20px;
    }

    /* ---- Store explode section — remove sticky/scroll on mobile ----
       JS already skips at <768px. Make section normal height. */
    .store-explode-section {
        height: auto;
    }

    .store-explode-sticky {
        position: relative;
        top: auto;
        height: auto;
        padding: 0 16px;
    }

    .store-explode-stage {
        height: auto;
        min-height: 340px;
        padding: 48px 20px;
        border-radius: var(--radius-xl);
        overflow: hidden;
        /* Stop the animated glow animations — compositing cost on phone */
        animation: none !important;
    }

    .store-explode-stage::before,
    .store-explode-stage::after {
        animation: none !important;
    }

    /* Store CTA — show a single pre-rendered explosion image on mobile.
       JS swaps the src to ./Asset/WebP_Eexplosion_3d_Mobile/WebP_Explosion_Mobile.webp
       on phone (see script.js initStoreSequence). It also adds .is-popped when
       the section scrolls into view to trigger the 3D pop-in below. */
    .store-seq-img {
        display: block;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.6);
        transform-origin: center center;
        transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
                    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .store-seq-img.is-popped {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(1);
    }

    .store-explode-text h2 {
        font-size: clamp(1.6rem, 6.5vw, 2rem);
    }

    /* ---- Brands marquee — slightly tighter on mobile ---- */
    .brands-track {
        gap: 40px;
    }

    .brand-item {
        font-size: var(--text-base);
    }

    /* ---- Story frame parallax — clip overflow so FG images
       don't bleed outside viewport ---- */
    .story-frame__media--parallax-padel,
    .story-frame__media--parallax-cycling {
        overflow: hidden;
    }

    /* ---- Story frame chips — wrap and shrink on narrow screens ---- */
    .story-frame__chips {
        gap: 6px;
    }

    .story-frame__chips li {
        font-size: 0.72rem;
        padding: 5px 10px;
    }

    /* ---- IG showcase — smaller cards + single video at a time ---- */
    .ig-showcase {
        padding: 48px 0 56px;
    }

    .ig-card {
        width: 44vw;
        max-width: 200px;
    }

    /* ---- IG showcase header — stack fully on mobile ---- */
    .ig-showcase-header {
        padding: 0 20px;
        text-align: center;
    }

    .ig-left h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .ig-right {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ---- Locations — tighter gaps and smaller gallery ---- */
    .locations-grid {
        gap: 56px;
    }

    .lp-gallery {
        height: 280px;
    }

    /* Hover effects cause layout jank on touch — disable */
    .lp-card:hover .lp-img-main,
    .lp-card:hover .lp-img-sub-1,
    .lp-card:hover .lp-img-sub-2,
    .lp-card.lp-reversed:hover .lp-img-main,
    .lp-card.lp-reversed:hover .lp-img-sub-1,
    .lp-card.lp-reversed:hover .lp-img-sub-2 {
        transform: none;
    }

    /* ---- Home feature strip — disable model-viewer on mobile ---- */
    .home-feature-icon model-viewer {
        /* model-viewer src cleared by JS on mobile, element is invisible — keep DOM space intact */
    }

    /* Remove emoji fallback — not needed, model-viewer handles its own absence */
    .home-feature-icon::after {
        content: none;
    }

    /* ---- FAQ — reduce padding so text isn't cramped ---- */
    .faq-question {
        padding: 16px 20px;
        font-size: 0.9rem;
    }

    .faq-answer p {
        padding: 0 20px 18px;
    }

    /* ---- Member section — full-width CTA button ---- */
    .member-join-btn {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }

    /* ---- Home footer — tighter ---- */
    .home-footer {
        padding: 48px 0 24px;
    }

    .home-footer-grid {
        gap: 32px;
    }

    /* ---- Proof section — keep row on small phones ---- */
    .hero-proof {
        gap: 10px;
    }

    /* ---- Partner strip — reduce bottom pad ---- */
    .partner-strip {
        padding: 16px 0;
        bottom: 0;
    }

    /* ---- Modal — make it full screen on mobile ---- */
    .comum-modal-content {
        grid-template-columns: 1fr;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-image-col {
        display: none;
    }

    .comum-modal-container {
        max-height: 95vh;
        overflow-y: auto;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    /* ---- Scroll-driven data-reveal — reduce translation so elements
       don't appear to come from far below on small screens ---- */
    [data-reveal] {
        transform: translateY(16px);
    }

    /* ---- Container global — tighter gutter on phone ---- */
    .container {
        padding: 0 16px;
    }

    /* ---- Hero inner — adjust bottom padding so partner strip doesn't overlap ---- */
    .hero-inner {
        padding-bottom: 100px;
    }
}

/* Extra-small phones (≤ 390px) */
@media (max-width: 390px) {
    .hero h1 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
        max-width: 280px;
    }

    .event-card {
        width: 88vw;
        max-width: 280px;
    }

    .ig-card {
        width: 52vw;
        max-width: 180px;
    }

    .lp-gallery {
        height: 240px;
    }

    .story-frame__chips li {
        font-size: 0.68rem;
        padding: 4px 8px;
    }
}

/* =========================================
   Padel Icon — branded SVG via CSS mask
   Uses currentColor so the icon adopts the
   text color of whatever container it sits in
   (event badge blue, court tag dark, etc).
   Default sizing matches a typical inline icon;
   per-context overrides below tune it visually.
   ========================================= */
.icon-padel {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask: url('./Asset/SVG/raket padel.svg') no-repeat center / contain;
            mask: url('./Asset/SVG/raket padel.svg') no-repeat center / contain;
    flex-shrink: 0;
}

/* Custom onboarding sport icons (user-supplied SVGs) rendered via CSS mask so
   they inherit currentColor — blue at rest, white when the chip is selected. */
.icon-padel-custom,
.icon-cycling-custom {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    flex-shrink: 0;
}
.icon-padel-custom {
    -webkit-mask: url('./Asset/SVG/padel-icon.svg') no-repeat center / contain;
            mask: url('./Asset/SVG/padel-icon.svg') no-repeat center / contain;
}
.icon-cycling-custom {
    -webkit-mask: url('./Asset/SVG/sepeda.svg') no-repeat center / contain;
            mask: url('./Asset/SVG/sepeda.svg') no-repeat center / contain;
}
.chip-icon .icon-padel-custom { width: 24px; height: 24px; }
.chip-icon .icon-cycling-custom { width: 26px; height: 26px; }

/* The padel SVG is a detailed filled silhouette — it needs more pixels
   than a Lucide stroke icon to carry the same visual weight.
   Sized up ~1.4-1.5× to visually match sibling icon heights.          */
.ps-court-tag .icon-padel { width: 26px; height: 26px; }
.event-badge  .icon-padel { width: 26px; height: 26px; }
.evt-tab      .icon-padel { width: 29px; height: 29px; }
.store-cat-btn .icon-padel { width: 29px; height: 29px; }
/* Onboarding sport chip: sit inside the 36px tile next to 18px Lucide
   line icons. The filled silhouette needs a touch more weight, so ~22px
   reads at the same visual size as its siblings. */
.chip-icon    .icon-padel { width: 22px; height: 22px; }

@media (max-width: 1024px) {
    .store-cat-btn .icon-padel { width: 26px; height: 26px; }
}
/* Moving blue gradient layer for the Store CTA rectangle only */
.store-cta-gradient-host {
    position: relative !important;
    isolation: isolate;
}

.store-cta-gradient-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 22%, rgba(126, 188, 255, 0.9) 0%, rgba(66, 136, 250, 0.5) 28%, transparent 50%),
        radial-gradient(circle at 82% 18%, rgba(27, 103, 255, 0.9) 0%, rgba(18, 78, 214, 0.56) 32%, transparent 55%),
        radial-gradient(circle at 48% 86%, rgba(86, 159, 255, 0.74) 0%, rgba(16, 92, 231, 0.5) 34%, transparent 60%),
        linear-gradient(135deg, #1552df 0%, #2f7cff 46%, #0f46ca 100%);
    background-size: 170% 170%, 155% 155%, 190% 190%, 240% 240%;
    animation: storeCtaRectangleFlow 18s ease-in-out infinite alternate;
}

@keyframes storeCtaRectangleFlow {
    0% {
        background-position: 0% 18%, 100% 0%, 50% 100%, 0% 50%;
    }
    45% {
        background-position: 56% 12%, 54% 42%, 16% 70%, 68% 32%;
    }
    100% {
        background-position: 100% 78%, 8% 100%, 86% 18%, 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .store-cta-gradient-layer {
        animation: none;
    }
}


/* =========================================
   Fly-to-cart Animation
   Used when user clicks "+ Keranjang" / Add to cart so they
   can clearly see the item flying into the cart icon.
   ========================================= */
.fly-to-cart {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(15, 23, 42, 0.08);
    overflow: hidden;
    transition: transform 700ms cubic-bezier(0.55, -0.05, 0.7, 0.35),
                opacity 700ms ease,
                width 700ms cubic-bezier(0.55, -0.05, 0.7, 0.35),
                height 700ms cubic-bezier(0.55, -0.05, 0.7, 0.35);
    will-change: transform, opacity, width, height;
    opacity: 1;
}

.fly-to-cart img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bump the cart icon when an item lands. */
.cart-bump {
    animation: cart-bump-anim 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cart-bump-anim {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    65%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* Brief flash on the cart count badge when it updates */
.cart-count.cart-count-pulse {
    animation: cart-count-pulse 600ms ease;
}

@keyframes cart-count-pulse {
    0%   { transform: scale(1); background-color: var(--primary-blue); }
    40%  { transform: scale(1.6); background-color: #22C55E; }
    100% { transform: scale(1); background-color: var(--primary-blue); }
}

/* Note: we intentionally do not disable the fly-to-cart / bump animations
   under prefers-reduced-motion. This project runs the full animation set on
   every laptop/desktop so behaviour is identical across machines regardless
   of the OS "Reduce Motion" setting. */


/* Tiny shared spinner utility — used by checkout/profile loading buttons */
.spin {
    animation: comum-icon-spin 0.7s linear infinite;
}
@keyframes comum-icon-spin {
    to { transform: rotate(360deg); }
}


/* =========================================
   Story-stage scroll hint
   A floating "Scroll ↓" pill at the bottom of the pinned story stage,
   visible across all frames so users never wonder if they should keep
   scrolling. Hidden by JS once they reach the final frame.
   ========================================= */
.story-scroll-hint {
    position: fixed;
    left: 50%;
    bottom: 80px;
    z-index: 50;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 9999px;
    background: transparent;
    color: #000;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    pointer-events: none;
    opacity: 0;
    transition: opacity 320ms ease, transform 320ms ease;
}

.story-scroll-hint.is-visible {
    opacity: 1;
}

.story-scroll-hint__label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    color: #000;
}

.story-scroll-hint__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: transparent;
    color: #000;
    animation: story-scroll-bounce 1.4s ease-in-out infinite;
}

.story-scroll-hint__chevron i {
    width: 14px;
    height: 14px;
}

@keyframes story-scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .story-scroll-hint__chevron { animation: none; }
}

@media (max-width: 768px) {
    .story-scroll-hint { display: none; }
}

body .comum-store-gradient-rect > * {
  position: relative;
  z-index: 2;
}