/* ====================
   HERO SECTION - INTEGRATED MOCKUP DESIGN
   ==================== */
.hero {
    --bg: #f7faf8;
    --surface: #ffffff;
    --border: #e3e8e5;
    --ink: #16232b;
    --ink-muted: #667085;
    --teal: var(--brand-teal);
    --teal-hover: var(--brand-teal-hover);
    --teal-bright: #0f9d72;
    --mint-100: #e1f5ee;
    --mint-50: #eef8f4;

    background: var(--bg);
    color: var(--ink);
    padding: 48px 4vw 56px;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    scroll-margin-top: 80px;
    position: relative;
    overflow: hidden;
}
.hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
    gap: 56px;
    align-items: center;
}
/* ---------- Mobile Image ---------- */
.hero-mobile-image {
    display: none;
}
/* ---------- LEFT: Content ---------- */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--teal);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 22px;
    text-decoration: none;
}
.hero-badge__dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 4px rgba(14, 148, 136, 0.16);
    animation: heroBadgeDotPulse 2s ease-in-out infinite;
}
@keyframes heroBadgeDotPulse{

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(14, 148, 136, 0.16);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(14, 148, 136, 0.08);
    }
}

.hero-title {
    font-size: clamp(2.1rem, 3.6vw, 3.3rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    color: var(--ink);
}
.hero-title .highlight {
    color: var(--teal-bright);
}
.hero-description {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-muted);
    max-width: 480px;
    margin: 0 0 32px;
    opacity: 1;
}
.hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 58px;
    padding: 0 26px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid var(--teal);
    background: var(--teal);
    color: #fff;
    box-shadow: 0 10px 24px -14px rgba(14, 148, 136, 0.9);
    transition: transform 0.18s ease, background 0.18s ease;
}
.btn-primary:hover {
    background: var(--teal-hover);
}
.btn-primary svg {
    width: 17px;
    height: 17px;
    transition: transform 0.18s ease;
}
.btn-primary:hover svg {
    transform: translate(3px, -3px);
}
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.98rem;
    padding: 14px 26px;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    border: 1.5px solid var(--teal);
    background: transparent;
    color: var(--teal);
}
.btn-secondary:hover {
    background: var(--mint-50);
    border-color: var(--teal-hover);
    transform: translateY(-2px);
}
/* ---------- Social proof + trust row ---------- */
.hero-social {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
}
.hero-avatars {
    display: flex;
}
.hero-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2.5px solid var(--bg);
    margin-left: -11px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.hero-avatar:first-child {
    margin-left: 0;
}
/* Rotates a random avatar's letter/color every few seconds (see main.js).
   The circle itself (background/border) stays put; only the letter slides
   through, like a flip-counter digit change. */
.hero-avatar__letter {
    display: block;
}
/* Real client logos (see main.js POOL) are transparent PNGs on a white
   fill with a colored ring border (see .hero-avatar borderColor in
   main.js) — sized down so there's visible white space between the
   logo and the ring, instead of the logo crowding right up to it. */
.hero-avatar__letter img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}
.hero-avatar__letter.is-swapping {
    animation: heroAvatarSlide 0.5s cubic-bezier(0.6, 0, 0.4, 1);
}
@keyframes heroAvatarSlide{
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    40% {
        transform: translateY(-140%);
        opacity: 0;
    }

    41% {
        transform: translateY(140%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.hero-avatar--a {
    background: linear-gradient(135deg, var(--teal), var(--teal-hover));
}
.hero-avatar--s {
    background: linear-gradient(135deg, #7a2f4d, #4a1e30);
}
.hero-avatar--m {
    background: linear-gradient(135deg, #b6802f, #7a5620);
}
.hero-avatar--r {
    background: linear-gradient(135deg, #33507a, #22344f);
}
.hero-social-txt {
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.4;
}
.hero-social-txt strong {
    display: block;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 700;
}
.hero-stars {
    color: #f0a92b;
    letter-spacing: 1px;
}
.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.hero-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-muted);
}
.hero-trust-item svg {
    width: 17px;
    height: 17px;
    color: var(--teal);
    flex-shrink: 0;
}
/* ---------- RIGHT: The Latest Arrivals carousel ---------- */
.hero-latest {
    position: relative;
}
.hero-latest__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.hero-latest__label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--teal-hover);
}
.hero-latest__label span {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--ink-muted);
    margin-left: 8px;
}
.hero-latest__seeall {
    font-size: 13px;
    font-weight: 600;
    color: var(--teal-hover);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}
.hero-latest__seeall svg {
    width: 14px;
    height: 14px;
    transition: transform 0.15s ease;
}
.hero-latest__seeall:hover svg {
    transform: translateX(3px);
}
.hero-stage {
    position: relative;
    height: 420px;
    perspective: 1600px;
    perspective-origin: 50% 42%;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}
.hero-stage.drag {
    cursor: grabbing;
}
.hero-spotlight {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 148, 136, 0.3), transparent 68%);
    filter: blur(14px);
    z-index: 0;
    transition: background 0.5s ease;
    pointer-events: none;
}
.hero-card {
    position: absolute;
    width: 210px;
    height: 300px;
    border-radius: 22px;
    overflow: hidden;
    color: #fff;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, filter 0.5s ease;
    box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.55);
    cursor: pointer;
}
.hero-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Keeps the heading overlay/progress bar/category pill legible over
   photos of varying brightness */
.hero-card__scrim-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
    pointer-events: none;
}
/* Tap-to-advance zones (mobile only — see mobile breakpoint for sizing) */
.hero-card__zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32%;
    background: transparent;
    border: none;
    padding: 0;
    pointer-events: none;
}
.hero-card__zone--l {
    left: 0;
}
.hero-card__zone--r {
    right: 0;
}
.hero-card__top {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hero-card__cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 5px 9px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.hero-card__cat svg {
    width: 12px;
    height: 12px;
}
.hero-card__badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    background: #fff;
    color: var(--ink);
    padding: 4px 8px;
    border-radius: 8px;
}
.hero-card__info {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
}
.hero-card__name {
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1.2;
    margin-bottom: 6px;
}
.hero-card__price {
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: baseline;
    gap: 7px;
}
.hero-card__price .was {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: line-through;
    font-weight: 500;
    font-size: 11.5px;
}
.hero-card__view {
    margin-top: 12px;
    display: none;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    font-size: 12px;
    padding: 9px 12px;
    border-radius: 11px;
    text-decoration: none;
}
.hero-card__view svg {
    width: 14px;
    height: 14px;
    color: var(--teal-hover);
}
.hero-card.active .hero-card__view {
    display: flex;
}
.hero-card.active {
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6), 0 0 0 1.5px rgba(14, 148, 136, 0.6), 0 0 0 7px rgba(14, 148, 136, 0.12);
}
.hero-card.side {
    filter: brightness(0.62) saturate(0.9);
}
.hero-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    justify-content: center;
}
.hero-nav-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--teal);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
    transition: 0.18s;
    box-shadow: 0 4px 14px rgba(13, 20, 23, 0.06);
}
.hero-nav-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}
.hero-nav-btn:hover {
    background: var(--teal);
    color: #fff;
    border-color: var(--teal);
    transform: scale(1.06);
}
.hero-dots {
    display: flex;
    gap: 8px;
}
.hero-dots button {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--border);
    cursor: pointer;
    padding: 0;
    transition: 0.25s;
}
.hero-dots button.on {
    width: 26px;
    border-radius: 999px;
    background: var(--teal);
}
@media (max-width: 980px) {
.hero {
        padding: 56px 5vw 64px;
    }
.hero-inner {
        grid-template-columns: 1fr;
        gap: 44px;
    }
.hero-description {
        max-width: none;
    }
.hero-stage {
        height: 380px;
    }
.hero-card {
        width: 194px;
        height: 278px;
    }
}

@media (max-width: 600px) {
.hero {
        padding: 40px 5vw 0;
        /* position:sticky on .hero-mobile-image requires every ancestor
           up to the scrolling viewport to have overflow:visible — the
           desktop overflow:hidden (for the 3D card stack/glow) would
           otherwise silently break the sticky pinning on mobile. */
        overflow: visible;
        /* .hero-inner comes before .hero-mobile-image in the HTML (so a
           crawler/screen reader reaches the H1 before the promotional
           product hotspots) - flex + order:-1 below puts the image back
           on top visually, same technique as .cat-hero__visual on
           category pages. Desktop is untouched: .hero-inner already
           lays out via its own display:grid regardless of the parent's
           display mode, and .hero-mobile-image stays display:none there
           either way. */
        display: flex;
        flex-direction: column;
    }
.hero-inner {
        gap: 0;
    }
/* ---------- Mobile: "story" style single-image slider ---------- */
/* Slider comes after the content/trust row, same order as the DOM */
.hero-latest {
        display: flex;
        flex-direction: column;
        position: relative;
        width: calc(100% + 10vw);
        margin: 28px -5vw 0;
    }
/* "THE LATEST / See all" overlays the top of the slider image,
       above the progress bar. */
.hero-latest__head {
        position: absolute;
        left: 16px;
        right: 16px;
        top: 14px;
        z-index: 20;
        margin: 0;
        padding: 0;
    }
.hero-latest__label {
        color: rgba(255, 255, 255, 0.6);
    }
.hero-latest__label span {
        color: rgba(255, 255, 255, 0.45);
    }
.hero-latest__seeall {
        color: #fff;
        background: rgba(255, 255, 255, 0.16);
        padding: 6px 11px;
        border-radius: 999px;
        backdrop-filter: blur(4px);
    }
.hero-stage {
        height: 488px;
        perspective: none;
    }
/* Full-bleed: no side inset, no rounded corners, no card shadow.
       Plain crossfade instead of the desktop slide/scale/rotate transition. */
.hero-card {
        width: 100%;
        height: 488px;
        border-radius: 0;
        box-shadow: none;
        transition: opacity 0.35s ease;
    }
.hero-card.active {
        box-shadow: none;
    }
/* Below the progress bar, which is itself below the heading overlay */
.hero-card__top {
        top: 90px;
    }
.hero-card__name {
        font-size: 21px;
    }
.hero-card__price {
        font-size: 15px;
    }
/* Tap-to-advance zones become live only on mobile; on desktop the
       side cards themselves remain the click target. */
.hero-card__zone {
        pointer-events: auto;
        cursor: pointer;
    }
.hero-spotlight {
        display: none;
    }
/* Below the "THE LATEST / See all" heading overlay */
.hero-controls {
        position: absolute;
        top: 64px;
        left: 12px;
        right: 12px;
        margin: 0;
        gap: 6px;
        z-index: 20;
    }
.hero-nav-btn {
        display: none;
    }
.hero-dots {
        flex: 1 1 auto;
        gap: 5px;
    }
.hero-dots button {
        flex: 1 1 0;
        width: auto;
        height: 3px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.35);
        overflow: hidden;
    }
.hero-dots button.on {
        width: auto;
        background: rgba(255, 255, 255, 0.35);
    }
/* WhatsApp/Instagram-status style fill: instant for watched segments;
       the current segment's width is driven per-frame by JS (rAF loop in
       main.js), which also handles pause/resume with true elapsed-time
       tracking rather than a CSS animation. */
.hero-dot__fill {
        position: absolute;
        inset: 0;
        width: 0%;
        background: #fff;
        border-radius: 999px;
    }
.hero-dots button.passed .hero-dot__fill {
        width: 100%;
    }
/* Sticky (not fixed): stays pinned at the top while .hero-inner
       (opaque, stacked above it) scrolls up and over it, but — unlike
       position:fixed — it un-sticks and scrolls away naturally once its
       containing block (.hero) has scrolled past, instead of floating
       over every section below. Stays in normal flow, so .hero-inner
       needs no extra spacer — same layout as before, just pinned. */
.hero-mobile-image {
        display: block;
        order: -1;
        position: sticky;
        top: 0;
        width: calc(100% + 10vw);
        height: 240px;
        margin: -40px -5vw 0;
        max-width: none;
        z-index: 0;
    }
.hero-inner {
        position: relative;
        z-index: 1;
    }
/* .hero-inner itself is only as wide as .hero's padded content box,
       so its background alone leaves the sticky image visible in the
       side gutters as it scrolls under. This backdrop extends the same
       -5vw/+5vw the full-bleed elements already use, covering edge to
       edge without changing .hero-inner's own layout/padding. */
.hero-inner::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -5vw;
        right: -5vw;
        background: var(--bg);
        z-index: -1;
    }
.hero-badge {
        font-size: 12px;
        padding: 5px 12px;
        margin-top: 20px;
        margin-bottom: 16px;
    }
.hero-title {
        font-size: 1.9rem;
        margin-bottom: 14px;
    }
.hero-description {
        font-size: 0.96rem;
        margin-bottom: 26px;
    }
.hero-ctas {
        width: 100%;
        flex-wrap: nowrap;
        gap: 10px;
    }
.hero-ctas .btn-primary,
.hero-ctas .btn-secondary {
        justify-content: center;
        text-align: center;
        font-size: 0.9rem;
    }
.hero-ctas .btn-primary {
        flex: 1 1 auto;
        min-width: 0;
        padding-left: 14px;
        padding-right: 14px;
    }
.hero-ctas .btn-secondary {
        flex: 0 0 auto;
        padding-left: 16px;
        padding-right: 16px;
    }
.hero-ctas .btn-primary svg {
        flex-shrink: 0;
        width: 15px;
        height: 15px;
    }
.hero-social {
        margin-top: 26px;
    }
.hero-trust-row {
        gap: 14px 18px;
        margin-top: 18px;
        padding-top: 16px;
    }
}

@media (max-width: 400px) {
.hero-title {
        font-size: 1.8rem;
    }
.hero-description {
        font-size: 0.95rem;
    }
.hero-ctas .btn-primary,
.hero-ctas .btn-secondary {
        gap: 6px;
        font-size: 0.8rem;
    }
.hero-ctas .btn-primary {
        padding-left: 10px;
        padding-right: 10px;
    }
.hero-ctas .btn-secondary {
        padding-left: 12px;
        padding-right: 12px;
    }
.hero-ctas .btn-primary svg {
        width: 13px;
        height: 13px;
    }
}

/* ====================
   SHOP THE SETUP - Shoppable scene
   (transparent product cutouts over a teal gradient backdrop)
   ==================== */
.shoppable-scene {
    position: relative;
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(700px 380px at 78% 15%, rgba(14, 148, 136, 0.24), transparent 62%),
        linear-gradient(135deg, #103d35, #0a1f1c);
}
.shoppable-scene--full {
    height: 460px;
}
.shoppable-scene__inner {
    position: relative;
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
}
/* ---------- Hint pill (compact/mobile scene only) ---------- */
/* Sits bottom-left, clear of the product row above so an opened price
   tag (which pops up from the row) never collides with it. */
.shoppable-hint {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7fe6cf;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 6px 11px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
/* ---------- Eyebrow label (full/desktop scene only) ---------- */
/* Plain uppercase label, no pill/background — sits top-left, clear of
   the product row (which sits lower, vertically centered) below it. */
.shoppable-eyebrow {
    position: absolute;
    left: 4vw;
    top: 28px;
    z-index: 2;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #7fe6cf;
}
/* Giant ghost wordmark — only the top half of the mark's artwork
   (viewBox is pre-cropped to its top half). On the compact (mobile)
   scene it's stretched flush to the left/right/bottom edges; on the
   full (desktop) scene below it's inset instead, with proper left/right
   margin. Purely decorative, sits behind the hotspots. */
.shoppable-scene__mark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    color: #fff;
    opacity: 0.16;
    z-index: 1;
    pointer-events: none;
}
.shoppable-scene--full .shoppable-scene__mark {
    left: 10%;
    right: 10%;
    width: auto;
}
/* ---------- Product hotspots ---------- */
.shop-prod {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 5;
    text-decoration: none;
    cursor: pointer;
    transform: translate(-50%, -50%);
}
.shop-prod__lift {
    position: relative;
    display: block;
    transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.shop-prod:hover .shop-prod__lift,
.shop-prod.is-open .shop-prod__lift {
    transform: translateY(-12px);
}
.shop-prod__img {
    display: block;
    width: 190px;
    height: auto;
    filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.45));
}
.shop-prod__ground {
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    width: 60%;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    filter: blur(7px);
    transition: 0.32s ease;
    z-index: -1;
}
.shop-prod:hover .shop-prod__ground,
.shop-prod.is-open .shop-prod__ground {
    width: 46%;
    opacity: 0.65;
    bottom: -20px;
}
.shop-prod__glow {
    position: absolute;
    inset: -22%;
    border-radius: 50%;
    background: rgba(var(--glow), 0.5);
    opacity: 0;
    filter: blur(24px);
    transition: 0.32s ease;
    z-index: -2;
}
.shop-prod:hover .shop-prod__glow,
.shop-prod.is-open .shop-prod__glow {
    opacity: 0.85;
}
.shop-prod__dot {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-teal);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 4px 12px rgba(0, 0, 0, 0.4);
    display: grid;
    place-items: center;
    z-index: 8;
    transition: transform 0.3s ease;
}
.shop-prod__dot::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(14, 148, 136, 0.65);
    animation: shopDotRing 2.2s ease-out infinite;
}
.shop-prod__dot i {
    color: #fff;
    font-style: normal;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.3s ease;
}
.shop-prod:hover .shop-prod__dot::before,
.shop-prod.is-open .shop-prod__dot::before {
    animation: none;
    opacity: 0;
}
.shop-prod:hover .shop-prod__dot,
.shop-prod.is-open .shop-prod__dot {
    transform: scale(1.08);
}
.shop-prod:hover .shop-prod__dot i,
.shop-prod.is-open .shop-prod__dot i {
    transform: rotate(45deg);
}
@keyframes shopDotRing{
    0% {
        transform: scale(0.7);
        opacity: 0.9;
    }

    100% {
        transform: scale(1.85);
        opacity: 0;
    }
}

.shop-prod__tag {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 16px);
    transform: translate(-50%, 8px);
    background: #fff;
    border-radius: 12px;
    padding: 9px 13px;
    white-space: nowrap;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
    opacity: 0;
    pointer-events: none;
    transition: 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 11px;
}
.shop-prod__tag::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 11px;
    height: 11px;
    background: #fff;
}
.shop-prod:hover .shop-prod__tag,
.shop-prod.is-open .shop-prod__tag {
    opacity: 1;
    transform: translate(-50%, 0);
}
/* Hotspots anchored near the scene's left/right edge would otherwise
   have their centered tag clipped by the scene's overflow:hidden — open
   these away from the edge instead of centering on the dot. */
.shop-prod--align-start .shop-prod__tag {
    left: 0;
    transform: translate(0, 8px);
}
.shop-prod--align-start .shop-prod__tag::after {
    left: 24px;
    transform: rotate(45deg);
}
.shop-prod--align-start:hover .shop-prod__tag,
.shop-prod--align-start.is-open .shop-prod__tag {
    transform: translate(0, 0);
}
.shop-prod--align-end .shop-prod__tag {
    left: auto;
    right: 0;
    transform: translate(0, 8px);
}
.shop-prod--align-end .shop-prod__tag::after {
    left: auto;
    right: 24px;
    transform: rotate(45deg);
}
.shop-prod--align-end:hover .shop-prod__tag,
.shop-prod--align-end.is-open .shop-prod__tag {
    transform: translate(0, 0);
}
.shop-prod__info {
    display: flex;
    flex-direction: column;
}
.shop-prod__name {
    font-weight: 700;
    font-size: 12.5px;
    color: #16232b;
}
.shop-prod__price {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-teal-hover);
    margin-top: 1px;
}
.shop-prod__go {
    color: var(--brand-teal);
    display: flex;
    flex-shrink: 0;
}
.shop-prod__go svg {
    width: 15px;
    height: 15px;
    display: block;
}
/* Larger than the 190px base — desktop has the room now that the copy
   panel is gone and the row spans the full section width. */
.shoppable-scene--full .shop-prod__img {
    width: 230px;
}
@media (max-width: 980px) {
.shoppable-scene--full {
        height: 420px;
    }
.shoppable-scene--full .shop-prod__img {
        width: 150px;
    }
}

@media (max-width: 600px) {
.shoppable-scene--full {
        display: none;
    }
}

/* ---------- Compact scene embedded in .hero-mobile-image ---------- */
.shoppable-scene--compact {
    width: 100%;
    height: 100%;
}
.shoppable-scene--compact .shop-prod__img {
    width: 104px;
}
.shoppable-scene--compact .shop-prod__dot {
    width: 22px;
    height: 22px;
    top: -4px;
    right: -4px;
}
.shoppable-scene--compact .shop-prod__dot i {
    font-size: 13px;
}
.shoppable-scene--compact .shop-prod__tag {
    padding: 7px 10px;
    bottom: calc(100% + 12px);
}
.shoppable-scene--compact .shop-prod__name {
    font-size: 11px;
}
.shoppable-scene--compact .shop-prod__price {
    font-size: 10.5px;
}
/* ====================
   ABOUT SECTION - NEW DESIGN
   ==================== */
#about {
    scroll-margin-top: 100px;
}
/* -------- TIMELINE SECTION -------- */
#about .ls-tl-section {
    position: relative;
    background: #0e2e28;
    color: #f3f7f5;
    padding: 100px 0 80px;
    overflow: hidden;
}
#about .ls-tl-head {
    max-width: 1240px;
    margin: 0 auto 64px;
    padding: 0 24px;
}
#about .ls-tl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #1bf0c4;
    margin-bottom: 22px;
}
#about .ls-tl-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1bf0c4;
    box-shadow: 0 0 0 4px rgba(27, 240, 196, 0.18);
}
#about .ls-tl-head h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0 0 18px;
    max-width: 680px;
}
#about .ls-tl-head p {
    font-size: 16.5px;
    line-height: 1.65;
    color: #a9c4bc;
    margin: 0;
    max-width: 560px;
}
#about .ls-tl-wrap {
    position: relative;
}
#about .ls-tl-wrap::before,
#about .ls-tl-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 5;
    pointer-events: none;
}
#about .ls-tl-wrap::before {
    left: 0;
    background: linear-gradient(90deg, #0e2e28, transparent);
}
#about .ls-tl-wrap::after {
    right: 0;
    background: linear-gradient(270deg, #0e2e28, transparent);
}
#about .ls-tl-scroll {
    overflow-x: auto;
    overflow-y: visible;
    padding: 10px 60px 30px;
    scrollbar-width: thin;
    scrollbar-color: #0d9e82 transparent;
}
#about .ls-tl-scroll::-webkit-scrollbar {
    height: 6px;
}
#about .ls-tl-scroll::-webkit-scrollbar-thumb {
    background: #0d9e82;
    border-radius: 99px;
}
#about .ls-tl-scroll::-webkit-scrollbar-track {
    background: transparent;
}
#about .ls-timeline {
    display: flex;
    align-items: stretch;
    width: max-content;
    min-width: 100%;
    padding: 0 20px;
}
#about .ls-tl-start {
    flex-shrink: 0;
    width: 190px;
    display: grid;
    grid-template-rows: 1fr 40px 1fr;
    padding-right: 10px;
}
#about .ls-tl-start-label {
    grid-row: 2;
    align-self: center;
    text-align: right;
    padding-right: 22px;
}
#about .ls-tl-start-label .yr {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: #1bf0c4;
    margin-bottom: 4px;
}
#about .ls-tl-start-label .lb {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #f3f7f5;
    line-height: 1.25;
}
#about .ls-tl-point {
    flex-shrink: 0;
    width: 250px;
    display: grid;
    grid-template-rows: 1fr 40px 1fr;
    padding: 0 16px;
    position: relative;
}
#about .ls-tl-dot-row {
    grid-row: 2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
#about .ls-tl-dot-row::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: repeating-linear-gradient(90deg, #0d9e82 0 8px, transparent 8px 14px);
    transform: translateY(-50%);
    z-index: 1;
}
#about .ls-tl-start .ls-tl-dot-row::before {
    left: 50%;
}
#about .ls-tl-point:last-child .ls-tl-dot-row::before {
    right: 50%;
}
#about .ls-tl-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #1bf0c4;
    border: 3px solid #0e2e28;
    box-shadow: 0 0 0 4px rgba(27, 240, 196, 0.16);
    position: relative;
    z-index: 2;
}
#about .ls-tl-card-slot {
    display: flex;
    flex-direction: column;
}
#about .ls-tl-point.ls-tl-top .ls-tl-card-slot {
    grid-row: 1;
    align-self: end;
    justify-content: flex-end;
    padding-bottom: 16px;
}
#about .ls-tl-point.ls-tl-bottom .ls-tl-card-slot {
    grid-row: 3;
    align-self: start;
    justify-content: flex-start;
    padding-top: 16px;
}
#about .ls-tl-point.ls-tl-top .ls-tl-connector,
#about .ls-tl-point.ls-tl-bottom .ls-tl-connector {
    position: absolute;
    left: 50%;
    width: 2px;
    background: #0d9e82;
    transform: translateX(-50%);
}
#about .ls-tl-point.ls-tl-top .ls-tl-connector {
    bottom: 50%;
    top: auto;
    height: 14px;
}
#about .ls-tl-point.ls-tl-bottom .ls-tl-connector {
    top: 50%;
    height: 14px;
}
#about .ls-tl-card {
    background: #163f38;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 20px 20px 22px;
    transition: transform .3s ease, background .3s ease;
}
#about .ls-tl-card:hover {
    transform: translateY(-3px);
    background: #1a4740;
}
#about .ls-tl-card .yr {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    color: #7f9c93;
    margin-bottom: 8px;
}
#about .ls-tl-card h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16.5px;
    font-weight: 600;
    color: #1bf0c4;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
#about .ls-tl-card p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #a9c4bc;
    margin: 0;
}
#about .ls-tl-hint {
    max-width: 1240px;
    margin: 22px auto 0;
    padding: 0 24px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    letter-spacing: .06em;
    color: #7f9c93;
    display: flex;
    align-items: center;
    gap: 8px;
}
#about .ls-tl-hint svg {
    width: 14px;
    height: 14px;
    stroke: #7f9c93;
    flex-shrink: 0;
}
#about .ls-tl-fade {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
#about .ls-tl-fade.ls-visible {
    opacity: 1;
    transform: translateY(0);
}
/* -------- WHY CHOOSE US -------- */
#about .section-padding {
    padding: 80px 0;
}
#about .feature-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-teal);
}
#about .feature-eyebrow::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 2px;
    background: var(--brand-teal);
}
#about .section-title {
    font-size: 2.6rem;
    font-weight: 700;
    color: #0f2e24;
    margin-top: 4px;
}
#about .section-subtitle {
    color: #475569;
    max-width: 600px;
    margin: 8px auto 0;
}
/* Deliberately no scroll-snap-type: "mandatory" snap forces the initial
   scroll position onto the first card's snap point, which hides this
   track's leading edge padding entirely (see the <=1200px bleed rule
   further down) no matter what value it's set to. */
#about .feature-grid {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 14px;
    margin: -4px -4px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-teal) transparent;
}
#about .feature-grid::-webkit-scrollbar {
    height: 6px;
}
@media (max-width: 1200px) {
#about .feature-grid {
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 12px;
        padding-right: 12px;
    }
}

#about .feature-grid::-webkit-scrollbar-thumb {
    background: var(--brand-teal);
    border-radius: 4px;
}
#about .feature-card {
    flex: 0 0 240px;
    background: #ffffff;
    border-radius: 20px;
    padding: 28px 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e9edf0;
    transition: all 0.3s ease;
}
#about .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
#about .feature-card .icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e8f0ed;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: var(--icon-teal);
}
#about .feature-card .icon-circle svg {
    width: 26px;
    height: 26px;
}
#about .feature-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #0f2e24;
    margin-bottom: 4px;
}
#about .feature-card p {
    font-size: 0.85rem;
    color: #475569;
    margin: 0;
}
/* -------- PATENT CARD -------- */
#about .patent-card {
    background: #f1f5f4;
    border-radius: 20px;
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    border-left: 6px solid #0f2e24;
}
#about .patent-card .patent-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-teal);
    opacity: 0.7;
    flex-shrink: 0;
}
#about .patent-card .patent-icon svg {
    width: 42px;
    height: 42px;
}
#about .patent-card .patent-text {
    flex: 1;
    font-size: 0.95rem;
    color: #1e293b;
}
#about .patent-card .patent-badge {
    background: #0f2e24;
    color: white;
    padding: 6px 20px;
    border-radius: 40px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}
/* -------- THERE'S MORE TO THE STORY -------- */
#about .story-section {
    position: relative;
    background: #0e2e28;
    color: #f3f7f5;
    padding: 110px 0 90px;
    overflow: hidden;
}
#about .story-watermark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
#about .story-watermark svg {
    width: 100%;
    max-width: 1200px;
    height: auto;
    fill: #ffffff;
    opacity: 0.08;
    display: block;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}
#about .story-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
#about .story-content h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 700;
    color: #f3f7f5;
    margin-bottom: 18px;
    letter-spacing: -0.02em;
}
#about .story-content p {
    font-size: 1.05rem;
    color: #a9c4bc;
    line-height: 1.75;
    margin: 0 auto 32px;
    max-width: 600px;
}
/* Updated button styles - now works as both link and toggle */
#about .keep-exploring-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #1bf0c4;
    border: none;
    color: #06231d;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 17px 38px;
    border-radius: 999px;
    transition: background 0.25s ease, transform 0.2s ease;
    position: relative;
    z-index: 2;
    text-decoration: none;
}
#about .keep-exploring-btn:hover {
    background: #4bf5d2;
    transform: translateY(-2px);
}
#about .keep-exploring-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}
#about .keep-exploring-btn.active svg {
    transform: rotate(180deg);
}
#about .mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    text-align: left;
}
#about .mv-card {
    background: #163f38;
    border-radius: 18px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform .3s ease, background .3s ease;
}
#about .mv-card:hover {
    transform: translateY(-3px);
    background: #1a4740;
}
#about .mv-card .icon-large {
    color: #1bf0c4;
    margin-bottom: 14px;
}
#about .mv-card .icon-large svg {
    width: 34px;
    height: 34px;
}
#about .mv-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    color: #1bf0c4;
    font-size: 1.3rem;
    font-weight: 600;
}
#about .mv-card p {
    color: #a9c4bc;
    font-size: 14.5px;
    line-height: 1.65;
    margin-top: 8px;
}
@media (max-width: 992px) {
#about .ls-tl-point {
        width: 210px;
    }
#about .ls-tl-start {
        width: 150px;
    }
}

@media (max-width: 768px) {
#about .ls-tl-section {
        padding: 60px 0;
    }
#about .ls-tl-head h2 {
        font-size: 28px;
    }
#about .mv-grid {
        grid-template-columns: 1fr;
    }
#about .section-title {
        font-size: 2.2rem;
    }
#about .section-padding {
        padding: 56px 0;
    }
#about .story-content h2 {
        font-size: 1.8rem;
    }
#about .story-section {
        padding: 80px 0 60px;
    }
#about .patent-card {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 640px) {
#about .ls-tl-point {
        width: 190px;
    }
#about .ls-tl-start {
        width: 130px;
    }
#about .ls-tl-card {
        padding: 16px;
    }
#about .ls-tl-card h4 {
        font-size: 15px;
    }
#about .ls-tl-card p {
        font-size: 12.5px;
    }
}

@media (max-width: 480px) {
#about .feature-card {
        flex-basis: 200px;
    }
#about .keep-exploring-btn {
        padding: 14px 28px;
        font-size: 0.85rem;
    }
#about .mv-card {
        padding: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
#about .ls-tl-card,
#about .ls-tl-fade {
        transition: none;
    }
}

.youtube-lightbox.active {
    display: flex;
}
.lightbox-modal.active {
    display: flex;
}