/* ==========================================================================
   UpPromote Design System — Design Tokens
   See: design-rule.md v1.2
   ========================================================================== */
@font-face {
    font-family: 'Konstant Grotesk';
    src: url('../../../../assets/Round11/homepage/fonts/neuekonstantgrotesk-book.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* Colors */
    --color-1st-bg: #F6F5F4;
    --color-2nd-bg: #FFFFFF;
    --color-1st-fg: #050505;
    --color-stroke: #D3D3D3;
    --color-1st-brand: #FF4E41;
    --color-2nd-brand: #CC6AF9;

    /* Derived / Semantic */
    --color-heading: var(--color-1st-fg);
    /* #050505 */
    --color-body: rgba(5, 5, 5, 0.8);
    /* 80% opacity */
    --color-hover-accent: var(--color-1st-brand);

    /* Typography */
    --font-body: 'DM Sans', sans-serif;
    /* Body, Nav, Buttons, UI */
    --font-heading: 'Konstant Grotesk', sans-serif;
    /* Headings & Hero */
    --font-display: 'Konstant Grotesk', sans-serif;
    /* Display & Large Numbers */

    /* Spacing */
    --space-page: 16px;
    /* horizontal page padding */
    --space-section-sm: 80px;
    /* vertical section padding – small */
    --space-section-lg: 140px;
    /* vertical section padding – large */

    /* Layout */
    --container-max: 1400px;

    /* Radius */
    --radius-default: 0;
    /* all elements by default */
    --radius-pill: 999px;
    /* buttons only */

}

/* ==========================================================================
   Base
   ========================================================================== */
body {
    font-family: var(--font-body);
    color: var(--color-body);
    background: var(--color-1st-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 16px;
}

h2 {
    font-size: 1.75rem;
    margin-bottom: 24px;
}

h3 {
    font-size: 1.125rem;
    margin-bottom: 8px;
}

/* ==========================================================================
   Layout – Container
   ========================================================================== */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
}

/* ==========================================================================
   Header (Exact Implementation — design-rule.md §6)
   ========================================================================== */

/* Outer container */
.site-header {
    padding: var(--space-page);
    background: transparent;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Inner container — Figma uses py-12px with no horizontal padding/gap; each
   child wrapper (logo / nav / cta) carries its own px instead. */
.site-header .header-inner {
    background: var(--color-2nd-bg);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: var(--radius-default);
    box-shadow: none;
}

/* Logo wrapper — px-24 both sides + border-right divider; stretches to fill inner height */
.site-header .logo {
    display: flex;
    align-items: center;
    width: 168px;
    padding: 0 24px;
    border-right: 1px solid var(--color-stroke);
    flex-shrink: 0;
    align-self: stretch;
}

.site-header .logo img,
.site-header .logo svg {
    width: 100%;
    height: auto;
}

/* Navigation group — px-36 both sides per Figma */
.site-nav {
    display: flex;
    flex: 1;
    padding: 0 36px;
}

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

.site-nav a {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-1st-fg);
    height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease;
}

.site-nav a:hover {
    color: var(--color-hover-accent);
}

/* Chevron icon inside nav items */
.site-nav .nav-chevron {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.site-nav a:hover .nav-chevron svg path {
    fill: var(--color-hover-accent);
}

/* Header CTA area (right side) — px-12 per Figma */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
    padding: 0 12px;
}

/* Header CTA button — Figma has red accent border + glow shadow.
   Padding reduced 2px each side to compensate for the 2px border so the
   button keeps Figma's 42px outer height. */
.site-header .header-cta-btn {
    border: 2px solid #ff4e41;
    box-shadow: 0 4px 2px rgba(255, 78, 65, 0.27);
    padding: 12px 26px;
    gap: 8px;
}

/* ==========================================================================
   Header — Scrolled / Sticky state (.is-scrolled)
   Outer: no padding, full-width.
   ========================================================================== */
.site-header {
    transition: padding 0.25s ease;
}

.site-header .header-inner {
    transition: max-width 0.25s ease;
}

.site-header.is-scrolled {
    padding: 0;
}

.site-header.is-scrolled .header-inner {
    max-width: 100%;
}


/* ==========================================================================
   Buttons (design-rule.md §4)
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 28px;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    text-transform: uppercase;
    transition: background 0.15s ease, transform 0.05s ease;
}

.btn:active {
    transform: translateY(1px);
}

/* Primary */
.btn-primary {
    background: var(--color-1st-fg);
    color: var(--color-2nd-bg);
}

.btn-primary:hover {
    opacity: 0.9;
}

/* Secondary */
.btn-secondary {
    background: var(--color-2nd-bg);
    color: var(--color-1st-fg);
    border: 1px solid var(--color-stroke);
}

.btn-secondary:hover {
    border-color: var(--color-1st-fg);
}

/* ==========================================================================
   Sections
   ========================================================================== */
section {
    padding: var(--space-section-sm) var(--space-page);
}

section .container {
    max-width: var(--container-max);
    margin: 0 auto;
}

/* ==========================================================================
   Hero Section (hero-rule.md v1.0)
   ========================================================================== */

/* Section — uses page background, overrides generic section padding */
.hero {
    padding: 80px var(--space-page);
    /* Figma py-80 */
    background: none;
    /* inherits #F6F5F4 page bg */
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* contain backdrop-filter blur to hero contents only */
}

/* ---- Animated gradient (Figma 4019:1088 "bridge" — 25 bars 80×505) ---- */

/* Bridge container — Figma w-1920 h-706 at top:464 of hero */
.hero-gradient {
    position: absolute;
    top: 460px;
    /* Figma top:464 (aligned w/ hero image top) */
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    height: 706px;
    pointer-events: none;
    z-index: 0;
}

/* Progressive layer blur — Figma 4019:1088 effect "Layer blur (progressive)"
   Y 0%→17.12%, Start blur 100 → End blur 0, radiating outward from the apex.

   Container extends 80px ABOVE the bars top so backdrop-filter blur kernels
   sample BOTH bar tops AND white bg above — bars bleed upward into white
   creating a smooth, soft halo with no hard edges.

   2 stacked layers with radial-gradient masks centered at the bars apex
   (= 80px from container top, i.e. where bars actually begin). */
.hero-gradient-blur {
    position: absolute;
    top: 380px;
    /* 80px above bars top (which is at 460px) */
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    height: 300px;
    /* 80px above + 220px around apex */
    z-index: 1;
    /* paint above bars to blur them */
    pointer-events: none;
    backdrop-filter: blur(50px);
    mask-image: radial-gradient(ellipse 380px 130px at center 80px, black 0%, black 12%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 380px 130px at center 80px, black 0%, black 12%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
}

.hero-gradient-blur::before,
.hero-gradient-blur::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Wide-light halo — large ellipse centered at the apex (80px down), bleeds upward into white */
.hero-gradient-blur::before {
    /* backdrop-filter: blur(45px); */
    /* -webkit-backdrop-filter: blur(45px); */
    mask-image: radial-gradient(ellipse 1000px 220px at center 80px,
            black 0%,
            black 18%,
            rgba(0, 0, 0, 0.6) 55%,
            rgba(0, 0, 0, 0.2) 80%,
            transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 1000px 220px at center 80px,
            black 0%,
            black 18%,
            rgba(0, 0, 0, 0.6) 55%,
            rgba(0, 0, 0, 0.2) 80%,
            transparent 100%);
}

/* Narrow-strong core — small ellipse at apex, stacks with ::before for ~blur(100) at center */
.hero-gradient-blur::after {
    /* backdrop-filter: blur(85px); */
    /* -webkit-backdrop-filter: blur(85px); */
    mask-image: radial-gradient(ellipse 380px 130px at center 80px,
            black 0%,
            black 12%,
            rgba(0, 0, 0, 0.5) 60%,
            transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 380px 130px at center 80px,
            black 0%,
            black 12%,
            rgba(0, 0, 0, 0.5) 60%,
            transparent 100%);
}

.hero-gradient-bar {
    position: absolute;
    width: 80px;
    height: 505px;
    top: var(--bar-top, 0);
    left: 50%;
    margin-left: var(--bar-left, -40px);
    /* center 80px bar; offset by --bar-left from container center */
    will-change: transform, opacity;
    opacity: 0;
    animation: gradientRise 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    /* Figma: from #FF4E41 via #CC6AF9 (50%) to rgba(255,255,255,0) — fades to transparent */
    background: linear-gradient(to bottom, var(--color-1st-brand) 0%, var(--color-2nd-brand) 50%, rgba(255, 255, 255, 0) 100%);
}

@keyframes gradientRise {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: var(--bar-opacity, 1);
    }
}



/* Container — flex column, Figma gap-80 between hero-block / image / stat-row */
.hero-container {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* ---- 1. Title Group ---- */
.hero-title-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    text-align: center;
}

/* 1.1 Subheading Row — Figma badge container gap-6 */
.hero-subheading-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 10px;
}

/* Vertical divider between Shopify badge and rating (Figma 1×26 stroke) */
.hero-badge-divider {
    display: inline-block;
    width: 1px;
    height: 26px;
    background: var(--color-stroke);
    flex-shrink: 0;
}

/* Badge shared */
.hero-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
}

/* A. Built for Shopify */
.hero-badge--shopify {
    background: #DDEDFC;
    padding: 4px;
    gap: 4px;
    color: #092C4C;
}

/* B. Rating */
.hero-badge--rating {
    background: none;
    padding: 4px 0;
    gap: 4px;
    color: var(--color-1st-fg);
}

/* 1.2 Main Heading — Figma color #303030 (slightly lighter than 1st-fg #050505) */
.hero-heading {
    font-family: var(--font-body);
    /* DM Sans, not Konstant Grotesk */
    font-weight: 600;
    /* SemiBold */
    font-size: 58px;
    line-height: 1.15;
    /* 115% */
    color: #303030;
    text-align: center;
    margin-bottom: 16px;
}

/* 1.3 Description — Figma 600px wide, Regular 400, color #050505 */
.hero-description {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    /* 140% */
    color: var(--color-1st-fg);
    max-width: 600px;
    text-align: center;
    margin-bottom: 28px;
}

/* 1.4 Main CTA */
.hero-cta {
    margin-top: 0;
    /* spacing via title-group gap */
}

/* ---- 2. Image Group ---- */
.hero-image-group {
    width: 100%;
}

.hero-image-wrapper {
    position: relative;
    width: 100%;
}

.hero-slideshow {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-default);
    overflow: hidden;
}

.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-image.is-active {
    opacity: 1;
}

/* ==========================================================================
   Floating Stat Cards — absolute positioned per Figma exact coords (relative
   to hero image 1400×780). Percentages keep cards proportional when wrapper
   scales. Mobile fallback hides them (decorative).
   ========================================================================== */
.stat-card {
    position: absolute;
    width: 300px;
    z-index: 10;
    padding: 24px;
    background: var(--color-2nd-bg);
    /* #FFF */
    border-radius: 24px;
    /* Figma rounded-24 */
    display: flex;
    flex-direction: column;
    gap: 6px;

    /* Animation initial state */
    opacity: 0;
    will-change: transform, opacity;
    animation: statRise 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Per-card positions: Figma left=X / top=Y converted to % of 1400×780 image */
.stat-card--commissions {
    right: 4.65%;
    top: 25.6%;
}

/* Figma 1035, 200 */
.stat-card--customers {
    left: 4.6%;
    top: 30.4%;
}

/* Figma   64, 237 */
.stat-card--revenue {
    left: 9.7%;
    top: 53.1%;
    /* Figma  136, 414 */
    box-shadow: 4px 4px 20px 6px rgba(5, 5, 5, 0.16);
}

/* Clicks card — Figma 300×91, text LEFT + chart absolute RIGHT (overflow clipped) */
.stat-card--clicks {
    right: 9.15%;
    top: 49.5%;
    /* Figma 972, 386 */
    overflow: hidden;
}

.stat-card--clicks .stat-card-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

/* Figma image 321: 151×103 absolute at left=150, top=0 inside card */
.stat-sparkline {
    position: absolute;
    top: 0;
    right: 0;
    width: 151px;
    height: 103px;
    object-fit: cover;
    pointer-events: none;
}

/* Card 2 (NEW CUSTOMERS): horizontal layout — label+avatars LEFT, value RIGHT */
.stat-card--horizontal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.stat-card--horizontal .stat-card-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    min-width: 0;
}


@keyframes statRise {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-delay-1 {
    animation-delay: 0.6s;
}

.stat-delay-2 {
    animation-delay: 0.8s;
}

.stat-delay-3 {
    animation-delay: 1.0s;
}

.stat-delay-4 {
    animation-delay: 1.2s;
}

.stat-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: rgba(5, 5, 5, 0.6);
    text-transform: uppercase;
}

.stat-content {
    display: flex;
    align-items: center;
    gap: 2px;
}

.stat-value {
    font-family: 'Konstant Grotesk', sans-serif;
    font-size: 24px;
    line-height: 1;
    color: var(--color-1st-fg);
}

.stat-percent {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0;
}

.stat-percent--red {
    color: #FF4E41;
}

.stat-percent--green {
    color: #84CC16;
}

.stat-icon {
    width: 14px;
    /* Figma "Arrow - Up 3" size-[14px] */
    height: 14px;
    flex-shrink: 0;
    display: block;
}

.stat-avatars {
    display: flex;
    align-items: center;
}

.stat-avatars img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-2nd-bg);
    margin-left: -6px;
}

.stat-avatars img:first-child {
    margin-left: 0;
}

/* ==========================================================================
   Trust Banner — sits inside .hero-container (Figma stat row 1368×80)
   ========================================================================== */
.trust-banner-container {
    display: flex;
    width: 100%;
    height: 80px;
    align-items: center;
}

.trust-item {
    flex: 1 1 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-right: 1px solid var(--color-stroke);
    height: 80px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: var(--color-1st-fg);
}

.trust-item:last-child {
    border-right: none;
}

.trust-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.trust-item span {
    font-family: var(--font-body);
    font-weight: 500;
    /* Medium */
    font-size: 16px;
    line-height: 1;
    /* 100% */
    color: var(--color-1st-fg);
}

/* ==========================================================================
   Features grid
   ========================================================================== */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.card {
    padding: 24px;
    background: var(--color-2nd-bg);
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-default);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.card p {
    color: var(--color-body);
}

/* ==========================================================================
   Footer (Figma 4019:1766)
   ========================================================================== */
.site-footer {
    background: #ffffff;
    color: var(--color-1st-fg);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Top: GET STARTED CTA block */
.footer-cta {
    width: 100%;
    border-bottom: 1px solid var(--color-stroke, #d3d3d3);
    padding: 140px var(--space-page);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.footer-cta-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
    background: linear-gradient(90deg, #ff4e41 0%, #e85b95 43%, #cc6af9 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.footer-cta-heading {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 48px;
    line-height: 1.4;
    color: var(--color-1st-fg);
    max-width: 884px;
    margin: 0;
}

.footer-cta-desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: rgba(5, 5, 5, 0.8);
    max-width: 884px;
    margin: 0;
}

.footer-cta-btn {
    margin-top: 8px;
}

/* Bottom: 2-column row */
.footer-bottom {
    width: 100%;
    max-width: 1512px;
    display: flex;
    align-items: stretch;
    padding: 0 var(--space-page);
}

.footer-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-right: 1px solid var(--color-stroke, #d3d3d3);
}

.footer-info {
    padding: 100px 40px 40px;
    border-bottom: 1px solid var(--color-stroke, #d3d3d3);
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}

.footer-logo {
    width: 180px;
    height: 48px;
    object-fit: contain;
}

.footer-disclaimer {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(5, 5, 5, 0.5);
    max-width: 400px;
    margin: 0;
}

.footer-email {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(5, 5, 5, 0.8);
}

.footer-email-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.footer-social {
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-social+.footer-social {
    border-top: 1px solid var(--color-stroke, #d3d3d3);
}

.footer-social-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.15;
    text-transform: uppercase;
    color: rgba(5, 5, 5, 0.5);
}

.footer-bullet {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: linear-gradient(-90deg, #ff4e41 0%, #cc6af9 100%);
    flex-shrink: 0;
}

.footer-social-icons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: 1px solid var(--color-stroke, #d3d3d3);
    transition: opacity 0.2s ease;
}

.footer-icon-btn:hover {
    opacity: 0.7;
}

.footer-icon-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Right: 3 columns × 2 link groups */
.footer-right {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
}

.footer-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.footer-col .footer-link-group:first-child {
    padding: 100px 40px 40px;
}

.footer-col .footer-link-group:last-child {
    padding: 40px 40px 100px;
}

.footer-link-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-link-heading {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: var(--color-1st-fg);
    margin: 0 0 14px;
}

.footer-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: rgba(5, 5, 5, 0.8);
    text-decoration: none;
    height: 42px;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--color-1st-fg);
}

/* Footer responsive */
@media (max-width: 1024px) {
    .footer-cta {
        padding: 100px 32px;
    }

    .footer-cta-heading {
        font-size: 36px;
    }

    .footer-cta-desc {
        font-size: 16px;
    }

    .footer-bottom {
        flex-direction: column;
        padding: 0;
    }

    .footer-left {
        border-right: none;
        border-bottom: 1px solid var(--color-stroke, #d3d3d3);
    }

    .footer-info {
        padding: 60px 32px 32px;
    }

    .footer-social {
        padding: 24px 32px;
    }

    .footer-right {
        flex-wrap: wrap;
    }

    .footer-col {
        flex: 1 1 50%;
    }

    .footer-col .footer-link-group:first-child {
        padding: 60px 32px 32px;
    }

    .footer-col .footer-link-group:last-child {
        padding: 32px 32px 60px;
    }
}

@media (max-width: 640px) {
    .footer-cta {
        padding: 60px 24px;
    }

    .footer-cta-heading {
        font-size: 28px;
    }

    .footer-col {
        flex: 1 1 100%;
    }

    .footer-social {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   Testimonials Section
   ========================================================================== */
.testimonials {
    padding: 140px 16px;
    background: var(--color-1st-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.testimonials-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 72px;
}

.testimonials-title-line {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 40px;
    line-height: 1;
    color: var(--color-1st-fg);
}

.text-gradient {
    font-family: var(--font-display);
    background: linear-gradient(to right, var(--color-1st-brand), var(--color-2nd-brand), var(--color-1st-fg));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.carousel-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    padding-bottom: 24px;
}

.carousel-track {
    --carousel-item-w: 300px;
    --carousel-item-gap: 24px;
    --carousel-set-count: 5;
    /* số item trong 1 set gốc, phải khớp số HTML duplicate */
    --carousel-set-shift: calc(var(--carousel-set-count) * (var(--carousel-item-w) + var(--carousel-item-gap)));

    display: flex;
    gap: var(--carousel-item-gap);
    width: max-content;
    align-items: flex-start;
    will-change: transform;
    animation: scrollTrack 25s linear infinite;
}

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

@keyframes scrollTrack {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(-1 * var(--carousel-set-shift)), 0, 0);
    }
}

.carousel-item {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    cursor: pointer;
}

/* Varying heights for the organic look */
.carousel-item:nth-child(5n+1) .carousel-item-image {
    height: 420px;
}

.carousel-item:nth-child(5n+2) .carousel-item-image {
    height: 360px;
}

.carousel-item:nth-child(5n+3) .carousel-item-image {
    height: 450px;
}

.carousel-item:nth-child(5n+4) .carousel-item-image {
    height: 380px;
}

.carousel-item:nth-child(5n+5) .carousel-item-image {
    height: 400px;
}

.carousel-item-image {
    width: 100%;
    position: relative;
    overflow: hidden;
}

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

.carousel-item-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.carousel-item-logo img {
    height: 36px;
    width: auto;
    object-fit: contain;
}

/* Hover Overlay Styles */
.carousel-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-1st-brand);
    color: #FFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 32px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.carousel-item:hover .carousel-hover-overlay,
.carousel-item.is-in-view .carousel-hover-overlay {
    opacity: 1;
}

.overlay-category {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 4px 8px;
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
}

.category-indicator {
    width: 4px;
    height: 12px;
    background: #FFF;
}

.overlay-stat {
    font-family: var(--font-display);
    font-size: 48px;
    line-height: 1;
    font-weight: 500;
    margin-bottom: 12px;
}

.overlay-desc {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.overlay-desc::before {
    content: "•";
    color: #FFF;
}

.btn-view-story {
    background: #FFF;
    color: var(--color-1st-fg);
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    margin-top: auto;
}

.btn-view-story:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* ==========================================================================
   Spotlight Section
   ========================================================================== */
.testimonials {
    position: relative;
    z-index: 1;
}

.spotlight-section {
    --spotlight-clip-top: 100vh;
    height: 350vh;
    margin-top: -100vh;
    background: var(--color-1st-bg);
    position: relative;
    z-index: 2;
    clip-path: inset(var(--spotlight-clip-top) 0 0 0);
}

.spotlight-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-page);
    overflow: hidden;
}

.spotlight-sticky::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1391px, calc(100% - 80px));
    height: 826px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='27' height='28'><rect width='14' height='14' fill='%23050505' fill-opacity='0.12'/></svg>");
    background-size: 27px 28px;
    background-repeat: repeat;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.spotlight-sticky>.container {
    position: relative;
    z-index: 1;
}

/* Figma scrollquote (4019:1229): 54px SemiBold, line-height 1.8, max-width 1086px,
   main text LEFT-aligned (natural flow), byline RIGHT-aligned within the same column */
.spotlight-text {
    font-family: var(--font-body);
    font-size: 54px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-1st-fg);
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    text-align: left;
}

/* Base style for words, handled by JS */
.spotlight-word {
    opacity: 0.2;
    transition: opacity 0.2s ease-out;
}

.spotlight-word.is-revealed {
    opacity: 1;
}

/* Highlights: inherit normal text color until revealed (so dimmed words look gray
   like the rest). Gradient red→purple applies ONLY when .spotlight-word.is-revealed. */
.spotlight-highlight .spotlight-word.is-revealed {
    background: linear-gradient(to right, #FF4E41 0%, #E85B95 43.269%, #CC6AF9 94.712%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Author byline — separate paragraph, RIGHT-aligned within column, gap-24 from main text.
   Inherits color & reveal animation from .spotlight-text → reveals to full black like the rest. */
.spotlight-author {
    display: block;
    text-align: right;
    line-height: 1.5;
    margin-top: 12px;
    white-space: nowrap;
}

/* ==========================================================================
   Launch Section
   ========================================================================== */
.launch-section {
    padding: 140px var(--space-page);
    background: var(--color-1st-bg);
    position: sticky;
    top: 0;
    z-index: 5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.launch-title-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 80px;
    /* Figma gap-80 between title group and content */
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
}

/* Figma 4028:1655: 20px SemiBold, gradient text (red→pink→purple) */
.launch-subheading {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
    background: linear-gradient(to right, #FF4E41 0%, #E85B95 43.269%, #CC6AF9 94.712%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    white-space: nowrap;
    width: max-content;
}

.launch-heading {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 40px;
    line-height: 1.15;
    /* Figma leading-[1.15] */
    color: var(--color-1st-fg);
    margin: 0;
}

.launch-content {
    display: flex;
    gap: 48px;
    /* Figma gap-48 */
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
}

.launch-image-col {
    width: calc(50% - 20px);
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.launch-image {
    width: 100%;
    aspect-ratio: 5 / 3;
    height: auto;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
}

.launch-image>svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.launch-image.is-active {
    position: relative;
    top: 0;
    transform: translateY(0);
    opacity: 1;
    z-index: 2;
}

.launch-tab-col {
    width: calc(50% - 20px);
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.launch-tab {
    cursor: pointer;
}

.tab-progress-track {
    width: 100%;
    height: 1px;
    background: var(--color-stroke);
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}

.tab-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(to right, #FF4E41, #CC6AF9);
    /* Figma active line gradient */
    width: 0%;
}

.launch-tab.is-active .tab-progress-fill {
    animation: progressFill 8s linear forwards;
}

/* Override mode: progress bar = static gradient, no fill animation */
.launch-section.is-override .launch-tab .tab-progress-fill {
    animation: none;
    width: 0%;
}

.launch-section.is-override .launch-tab.is-active .tab-progress-fill {
    width: 100%;
}

@keyframes progressFill {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.tab-title {
    font-family: var(--font-body);
    font-weight: 500;
    /* Figma DM_Sans Medium */
    font-size: 24px;
    line-height: 1.15;
    /* Figma leading-[1.15] */
    color: var(--color-1st-fg);
    margin: 0;
    transition: color 0.3s ease;
}

.tab-desc-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease, margin-top 0.4s ease;
    margin-top: 0;
    overflow: hidden;
}

.launch-tab.is-active .tab-desc-wrapper {
    grid-template-rows: 1fr;
    margin-top: 32px;
}

.tab-desc {
    min-height: 0;
    font-family: var(--font-body);
    font-weight: 400;
    /* Figma DM_Sans Regular */
    font-size: 16px;
    /* Figma 16px */
    line-height: 1.4;
    color: rgba(5, 5, 5, 0.8);
    max-width: 400px;
    width: 100%;
    margin: 0;
}

/* Inline image inside tab — only displayed on tablet/mobile when tab is active */
.launch-tab-image {
    display: none;
}

/* ==========================================================================
   Sell Section
   ========================================================================== */
/* Sell scrolls in normal flow with z-index:10 so it paints OVER the sticky
   launch (z:5) on the way up; track (z:15) then paints over sell. The JS
   `initStickyStack` (section-sell/scripts.js) pushes sell up via translateY
   when track approaches so the transition stays in lockstep with scroll.
   NOT sticky: with content-visibility shrinking track, the parent's height
   drifts mid-scroll and sticky unsticks early — that broke the visual. */
.sell-section {
    padding: 140px var(--space-page);
    background: var(--color-1st-bg);
    position: relative;
    z-index: 10;
}

/* Figma 4159:13901: title-text LEFT (flex-1) + desc RIGHT (w-600), gap-24, items-center */
.sell-title-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    margin-bottom: 80px;
    /* Figma gap-80 */
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
}

.sell-title-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Figma gap-16 between subheading & heading */
    flex: 1 0 0;
    min-width: 0;
}

/* Figma 4159:13903: 20px SemiBold, gradient text red→pink→purple */
.sell-subheading {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
    background: linear-gradient(to right, #FF4E41 0%, #E85B95 43.269%, #CC6AF9 94.712%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    white-space: nowrap;
    width: max-content;
}

.sell-heading {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 40px;
    line-height: 1.15;
    /* Figma leading-[1.15] */
    color: var(--color-1st-fg);
    margin: 0;
}

.sell-desc {
    font-family: var(--font-body);
    font-weight: 400;
    /* Figma DM_Sans Regular */
    font-size: 16px;
    /* Figma 16px */
    line-height: 1.4;
    color: rgba(5, 5, 5, 0.8);
    margin: 0;
    width: 600px;
    flex-shrink: 0;
}

.sell-cards-group {
    display: flex;
    flex-direction: column;
    gap: 80px;
    /* Figma gap-80 between cards */
    max-width: var(--container-max);
    margin: 0 auto;
}

.sell-card {
    display: flex;
    gap: 8px;
    width: 100%;
}

.sell-card-text {
    width: calc(50% - 4px);
    flex: none;
    padding: 80px 40px;
    /* Figma px-40 py-80 */
    background: var(--color-2nd-bg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sell-card-header {
    margin-bottom: 0;
    /* spacing handled by .sell-card-text justify-between */
}

.sell-card-title {
    font-family: var(--font-body);
    font-weight: 600;
    /* Figma SemiBold */
    font-size: 24px;
    line-height: 1.15;
    /* Figma leading-[1.15] */
    color: var(--color-1st-fg);
    margin: 0 0 12px 0;
    /* Figma gap-12 between title & desc */
}

.sell-card-desc {
    font-family: var(--font-body);
    font-weight: 400;
    /* Figma Regular */
    font-size: 16px;
    /* Figma 16px */
    line-height: 1.4;
    color: rgba(5, 5, 5, 0.8);
    margin: 0;
}

/* Highlight features group — label + tab buttons (Figma 4019:2817 / 4028:1113) */
.sell-card-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Figma gap-16 between label & tabs */
}

.sell-card-features-label {
    font-family: var(--font-body);
    font-weight: 500;
    /* Figma DM_Sans Medium */
    font-size: 18px;
    line-height: 1.15;
    color: var(--color-1st-fg);
    margin: 0;
}

.sell-card-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    /* Figma gap-16 between buttons */
}

.sell-tab {
    padding: 12px;
    /* Figma p-12 */
    font-family: var(--font-body);
    font-weight: 500;
    /* Figma DM_Sans Medium */
    font-size: 18px;
    /* Figma 18px */
    line-height: 1.15;
    text-transform: none;
    /* Figma normal case */
    letter-spacing: normal;
    color: var(--color-1st-fg);
    background: var(--color-2nd-bg);
    border: 1px solid #FF4E41;
    /* Figma border-[#ff4e41] */
    border-radius: 999px;
    /* Figma rounded-999 pill */
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sell-tab:hover {
    background: rgba(255, 78, 65, 0.05);
}

.sell-tab.is-active {
    background: var(--color-1st-fg);
    /* black bg per Figma */
    color: var(--color-1st-bg);
    /* light text #f6f5f4 */
    border-color: var(--color-1st-fg);
}

.sell-card-image-col {
    width: calc(50% - 4px);
    flex: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FCF9F9;
    /* Figma image col bg (cream-pink) */
    min-height: 450px;
    /* Figma h-[450px] */
    overflow: hidden;
}

.sell-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
}

.sell-image.is-active {
    opacity: 1;
    z-index: 2;
}

/* ==========================================================================
   Sell Mockup 1: iPhone with reels + Shipping card + Order timeline (Figma 4028:1124)
   ========================================================================== */
.sell-mockup-phone {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
}

.mockup-phone {
    position: absolute;
    left: 9.3%;
    /* Figma left:65 / 696 ≈ 9.3% */
    top: 24%;
    /* Figma top:109 / 450 ≈ 24% */
    width: 36%;
    /* Figma 252px / 696 ≈ 36% */
    aspect-ratio: 252 / 547;
}

.mockup-phone-screen {
    position: absolute;
    top: 1.5%;
    left: 4%;
    width: 92%;
    height: 64%;
    object-fit: cover;
    border-radius: 28px 28px 0 0;
    z-index: 1;
}

.mockup-phone-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    z-index: 2;
    pointer-events: none;
}

/* Shipping card (top floating) */
.mockup-shipping-card {
    position: absolute;
    left: 55.3%;
    /* Figma left:385 / 696 */
    top: 26.2%;
    /* Figma top:118 / 450 */
    width: 51.7%;
    /* Figma 360px / 696 */
    height: 56px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.04);
    z-index: 3;
}

.mockup-shipping-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f4c4a1, #e89272);
    flex-shrink: 0;
}

.mockup-shipping-text {
    flex: 1;
}

.mockup-shipping-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: #050505;
    margin: 0;
    line-height: 1;
}

.mockup-shipping-loc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    color: rgba(5, 5, 5, 0.6);
    margin: 6px 0 0 0;
    line-height: 1;
}

.mockup-shipping-icon {
    font-size: 22px;
    flex-shrink: 0;
}

/* Order card with timeline */
.mockup-order-card {
    position: absolute;
    left: 55.3%;
    /* Figma left:385 / 696 */
    top: 43.3%;
    /* Figma top:195 / 450 */
    width: 45.8%;
    /* Figma 319px / 696 */
    height: 63.1%;
    /* Figma 284px / 450 */
    background: white;
    border-radius: 16px;
    padding: 25px 15px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.06);
    z-index: 3;
    box-sizing: border-box;
}

.mockup-order-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.mockup-order-product {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #faf8f5;
    object-fit: cover;
    flex-shrink: 0;
}

.mockup-order-text {
    flex: 1;
    min-width: 0;
}

.mockup-order-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    color: #050505;
    margin: 0 0 6px 0;
    line-height: 1;
}

.mockup-order-meta {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    color: rgba(5, 5, 5, 0.6);
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mockup-shopify {
    height: 12px;
    width: auto;
}

.mockup-timeline {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

.mockup-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
}

.mockup-step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #84CC16;
    flex-shrink: 0;
    margin-top: 2px;
    z-index: 1;
}

.mockup-step-dot--gray {
    background: #d3d3d3;
}

.mockup-step-title {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    color: #050505;
    margin: 0 0 6px 0;
    line-height: 1;
}

.mockup-step-time {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    color: rgba(5, 5, 5, 0.6);
    margin: 0;
    line-height: 1;
}

.mockup-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 14px;
    width: 2px;
    height: calc(100% + 24px);
    background: #84CC16;
}

.mockup-step:nth-last-child(2)::before {
    background: #84CC16;
    background: linear-gradient(to bottom, #84CC16 0%, #84CC16 50%, #d3d3d3 50%, #d3d3d3 100%);
}

/* ==========================================================================
   Sell Mockup 2: Monthly bonus leaderboard (Figma 4019:2761)
   ========================================================================== */
.sell-mockup-leaderboard {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 100px 40px 40px;
    gap: 12px;
}

.mockup-leaderboard-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: #050505;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    text-align: center;
    letter-spacing: 0.02em;
}

.mockup-leader {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    width: 400px;
    max-width: 100%;
    transition: all 0.3s ease;
}

.mockup-leader-rank {
    font-family: 'Konstant Grotesk', sans-serif;
    font-weight: 700;
    font-size: 20px;
    flex-shrink: 0;
    width: 18px;
}

.mockup-leader-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.mockup-leader-name {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    color: #050505;
    line-height: 1;
}

.mockup-leader-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #050505;
    opacity: 0.4;
    flex-shrink: 0;
}

.mockup-leader-sales {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    color: rgba(5, 5, 5, 0.6);
    flex: 1;
    line-height: 1;
}

.mockup-leader-bonus {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    line-height: 1;
}

.mockup-leader-bonus--top {
    background: #050505;
    color: white;
}

/* Top leader: highlighted with brand-color shadow halo */
.mockup-leader--1 {
    background: white;
    box-shadow: -2px -4px 4px rgba(255, 78, 65, 0.12), 4px 4px 4px rgba(204, 106, 249, 0.12);
}

.mockup-leader--1 .mockup-leader-rank {
    color: #FF4E41;
}

/* 2nd: lighter, slightly smaller */
.mockup-leader--2 {
    transform: scale(0.85);
    margin-top: -4px;
}

.mockup-leader--2 .mockup-leader-rank {
    color: #CC6AF9;
}

/* 3rd: even smaller, blurred (Figma blur-[1.69px]) */
.mockup-leader--3 {
    transform: scale(0.7);
    margin-top: -8px;
    filter: blur(1.7px);
}

.mockup-leader--3 .mockup-leader-rank {
    color: #CC6AF9;
    opacity: 0.6;
}

/* ==========================================================================
   Track Section (Figma 4333:15395)
   ========================================================================== */
.track-section {
    padding: 140px 32px;
    background: var(--color-1st-bg);
    position: relative;
    z-index: 15;
    transition: background-color 0.8s ease;
}

.track-section.is-dark {
    background: var(--color-1st-fg);
}

.track-section.is-dark .track-heading,
.track-section.is-dark .track-feature-title {
    color: var(--color-1st-bg);
}

.track-section.is-dark .track-desc,
.track-section.is-dark .track-feature-desc {
    color: rgba(255, 255, 255, 0.7);
}

.track-section.is-dark .track-feature-icon {
    background: rgba(255, 255, 255, 0.08);
}

.track-container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

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

.track-subheading {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
    background: linear-gradient(to right, var(--color-1st-brand) 0%, var(--color-2nd-brand) 50%, var(--color-1st-fg) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    width: max-content;
    transition: color 0.8s ease;
}

.track-heading-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.track-heading {
    flex: 1 1 0;
    min-width: 0;
    max-width: 800px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 40px;
    line-height: 1.15;
    color: var(--color-1st-fg);
    margin: 0;
    transition: color 0.8s ease;
}

.track-desc {
    flex: 1 1 0;
    min-width: 0;
    max-width: 600px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(5, 5, 5, 0.8);
    margin: 0;
    transition: color 0.8s ease;
}

.track-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.track-media {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    aspect-ratio: 1400 / 835;
    margin: 0 auto;
    background: #fdf9fa;
    overflow: hidden;
    contain: layout paint;
}

/* ----- Shopify preview frame inside MacBook chrome ----- */
.track-shopify-frame {
    position: absolute;
    top: 7.18%;
    left: 4.28%;
    width: 139.3%;
    aspect-ratio: 3901 / 2689;
    /* match macbook.png natural size */
    overflow: hidden;
    background: transparent;
}

/* MacBook chrome overlay — sits ON TOP of .shop-window so the bezel + chin
   visually frame the content. The image's screen region is transparent so
   the shop UI shows through. pointer-events: none lets clicks pass through. */
.track-shopify-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../../../../assets/Round11/homepage/images/macbook.png') no-repeat center / 100% 100%;
    pointer-events: none;
    /* clicks pass through bezel down to .shop-window */
    z-index: 10;
    transform: translateZ(0);
    /* promote to compositor layer — avoid repaint on scroll */
}

.shop-window {
    position: absolute;
    /* Inset into the macbook screen area — extra padding so bezel doesn't crop content */
    inset: 2.8% 2% 7.5% 2%;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #303030;
    /* Round corners to match the MacBook screen viewport in macbook.png — clips
       the dark topbar + sidebar so they follow the screen's rounded edges */
    border-radius: 0.5cqi;
    overflow: hidden;
    contain: layout paint;
    /* All inner sizes scale with the 1920×1080 window */
    container-type: inline-size;

    /* Polaris navigation tokens (Figma 4580:50829) — pixel-perfect at 1920px container.
       1cqi = 1% of container inline size; at 1920px reference, 1cqi = 19.2px. */
    --p-nav-bg: #ebebeb;
    --p-nav-hover: #f1f1f1;
    --p-nav-selected: #fafafa;
    --p-nav-text: #303030;
    --p-nav-text-secondary: #616161;
    --p-nav-icon: #4a4a4a;
    --p-nav-indicator: #b5b5b5;
    --p-nav-radius: 0.4167cqi;
    /* 8px */
    --p-nav-item-h: 1.4583cqi;
    /* 28px */
    --p-nav-pad-x: 0.625cqi;
    /* 12px — group horizontal padding */
    --p-nav-gap: 0.4167cqi;
    /* 8px — gap between icon & label */
    --p-nav-font: 0.6771cqi;
    /* 13px */
    --p-nav-line: 1.0417cqi;
    /* 20px line-height for item labels */
    --p-nav-font-section: 0.625cqi;
    /* 12px section label */
    --p-nav-line-section: 0.8333cqi;
    /* 16px line-height for section label */
    --p-nav-section-gap: 1.25cqi;
    /* 24px gap between nav groups */
}

/* ===== Body region (sidebar + app-struct flex row) ===== */
.shop-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
}

/* ===== App-struct region (variant content area) ===== */
.shop-app-struct {
    position: relative;
    flex: 1;
    min-width: 0;
    background: transparent;
}

/* Canvas inside app-struct holds the cross-fading variant images */
.shop-canvas {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Variant images (cross-fade).
   Source images are 1024×576 with Shopify chrome embedded:
     topbar = 28px tall, sidebar = 125px wide → content = 899×548 at offset (125,28).
   Scale + offset so the content area exactly fills .shop-canvas. */
.shop-variant {
    position: absolute;
    width: 113.9%;
    /* 1024/899 */
    height: 105.11%;
    /* 576/548  */
    object-fit: cover;
    object-position: top left;
    opacity: 0;
    transition: opacity 0.45s ease;
    will-change: opacity;
}

.shop-variant.is-active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .shop-variant {
        transition: none;
    }
}

/* ===== Topbar (header region of .shop-window) ===== */
.shop-topbar {
    position: relative;
    flex-shrink: 0;
    height: 2.73cqi;
    /* matches image topbar 28/576 of window height,
                                            converted to cqi (% of window width) via 1920/1080 aspect */
    background: #1a1a1a;
    display: flex;
    align-items: center;
    padding: 0 1.2cqi;
    gap: 1cqi;
    color: #d9d9d9;
    z-index: 5;
}

.shop-topbar-logo {
    display: flex;
    align-items: center;
    width: 5%;
}

.shop-topbar-logo img {
    width: 1.5cqi;
    height: auto;
}

.shop-topbar-search {
    flex: 1;
    max-width: 38%;
    margin: 0 auto;
    height: 60%;
    display: flex;
    align-items: center;
    gap: 0.6%;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 0.5cqi;
    padding: 0 1cqi;
    font-size: 1.05cqi;
    color: #888;
}

.shop-topbar-search kbd {
    margin-left: auto;
    font: inherit;
    color: #aaa;
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    border-radius: 0.3cqi;
    padding: 0 0.5cqi;
    font-size: 0.9cqi;
}

.shop-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.8cqi;
}

.shop-topbar-btn {
    width: 2.4cqi;
    height: 2.4cqi;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d0d0d0;
    border-radius: 0.3cqi;
    font-size: 1cqi;
    font-weight: 600;
}

.shop-topbar-user {
    display: inline-flex;
    align-items: center;
    gap: 0.5cqi;
    background: #2a2a2a;
    border-radius: 0.4cqi;
    padding: 0.3cqi 0.8cqi;
    font-size: 1cqi;
    color: #e0e0e0;
}

.shop-topbar-avatar {
    width: 1.6cqi;
    height: 1.6cqi;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8a7d, #b07be0);
    color: #fff;
    font-size: 0.9cqi;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===== Sidebar — Polaris navigation (Figma 4580:50829) ===== */
.shop-sidebar {
    position: relative;
    flex-shrink: 0;
    width: 12.5%;
    /* 240/1920 of .shop-window */
    background: var(--p-nav-bg);
    padding: 0.7292cqi 0 0;
    /* 14px top (Figma top-14), no bottom pad */
    overflow: visible;
    z-index: 4;
    font-size: var(--p-nav-font);
    line-height: var(--p-nav-line);
    color: var(--p-nav-text);
}

/* Group of items (Core / Sales channels / Apps each get one .shop-nav) */
.shop-nav {
    display: flex;
    flex-direction: column;
    padding: 0 var(--p-nav-pad-x);
}

.shop-nav-item {
    display: flex;
    align-items: center;
    gap: var(--p-nav-gap);
    height: var(--p-nav-item-h);
    padding: 0.2083cqi 0.2083cqi 0.2083cqi 0.4167cqi;
    /* 4px 4px 4px 8px */
    border-radius: var(--p-nav-radius);
    color: var(--p-nav-text);
    font-size: var(--p-nav-font);
    line-height: var(--p-nav-line);
    font-weight: 550;
    text-decoration: none;
    white-space: nowrap;
}

.shop-nav-item:hover {
    background: var(--p-nav-hover);
}

.shop-nav-ico {
    box-sizing: content-box;
    width: 0.6771cqi;
    /* 13px icon */
    height: 0.6771cqi;
    padding-block: 0.1823cqi;
    /* 3.5px each → total vertical 13 + 7 = 20px */
    flex-shrink: 0;
    object-fit: contain;
}

.shop-nav-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-nav-badge {
    background: rgba(0, 0, 0, 0.06);
    color: var(--p-nav-text-secondary);
    font-size: var(--p-nav-font-section);
    /* 12px */
    font-weight: 550;
    padding: 0.1042cqi 0.4167cqi;
    /* 2px 8px */
    height: 1.0417cqi;
    /* 20px */
    line-height: var(--p-nav-line-section);
    /* 16px */
    border-radius: var(--p-nav-radius);
    /* 8px */
}

/* Section title (Sales channels / Apps) — decorative chevron */
.shop-nav-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2083cqi 0.8333cqi 0.2083cqi 1.0417cqi;
    /* 4px 16px 4px 20px (Figma pl-20 pr-16 py-1) */
    margin-top: var(--p-nav-section-gap);
    /* 24px gap from previous nav group */
    font-size: var(--p-nav-font-section);
    /* 12px */
    line-height: var(--p-nav-line-section);
    /* 16px */
    font-weight: 550;
    color: var(--p-nav-text-secondary);
}

.shop-nav-section-label {
    line-height: var(--p-nav-line-section);
    /* 16px */
}

.shop-nav-section-chev,
.shop-nav-chev {
    width: 0.6cqi;
    height: 0.6cqi;
    transform: rotate(-90deg);
    /* Figma chevron is down-arrow rotated */
    opacity: 0.7;
    flex-shrink: 0;
}

/* App row (UpPromote Affiliate) — Figma shows transparent bg, Medium 550 weight (same as siblings) */
.shop-nav-item--app {
    background: transparent;
    font-weight: 550;
    color: var(--p-nav-text);
    position: relative;
}

.shop-nav-item--app .shop-nav-chev {
    margin-left: auto;
}

/* Bottom-line indicator dropping from app row into Programs (Figma: x=17, y=24, w=1.5, h=4) */
.shop-nav-item--app::after {
    content: "";
    position: absolute;
    left: 0.8854cqi;
    /* 17px */
    top: 1.25cqi;
    /* 24px */
    width: 0.0781cqi;
    /* 1.5px */
    height: 0.2083cqi;
    /* 4px */
    background: var(--p-nav-indicator);
}

/* ===== Sub-nav (interactive tabs) ===== */
.shop-subnav {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.shop-subnav-item {
    position: relative;
    display: block;
    margin: 0 var(--p-nav-pad-x);
    /* mx-12 */
    padding: 0.2083cqi 0.2083cqi 0.2083cqi 1.875cqi;
    /* 4 4 4 36 (Figma pl-9 pr-1 py-1) */
    border-radius: var(--p-nav-radius);
    /* 8px */
    background: transparent;
    border: 0;
    font: inherit;
    font-size: var(--p-nav-font);
    /* 13px */
    line-height: var(--p-nav-line);
    /* 20px */
    font-weight: 450;
    /* Figma rest = font-[450] */
    color: var(--p-nav-text-secondary);
    text-align: left;
    white-space: nowrap;
    cursor: default;
}

.shop-subnav-item[role="tab"] {
    cursor: pointer;
    color: var(--p-nav-text);
}

.shop-subnav-item[role="tab"]:hover:not(.is-active) {
    background: var(--p-nav-hover);
}

.shop-subnav-item.is-active {
    background: var(--p-nav-selected);
    color: var(--p-nav-text);
    font-weight: 650;
    letter-spacing: -0.005em;
}

.shop-subnav-item:focus-visible {
    outline: 2px solid var(--color-1st-brand);
    outline-offset: 1px;
}

/* ----- Dynamic indicator line (drives via .shop-window[data-active]) ----- */
.shop-subnav-item::before {
    content: "";
    position: absolute;
    left: 0.8854cqi;
    /* 17px (Figma indicator x) */
    top: 0;
    bottom: 0;
    width: 0.0781cqi;
    /* 1.5px (Figma indicator width) */
    background: var(--p-nav-indicator);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Active variant determines how far the line extends */
.shop-window[data-active="affiliates"] .shop-subnav-item:nth-child(-n+2)::before,
.shop-window[data-active="referrals"] .shop-subnav-item:nth-child(-n+3)::before,
.shop-window[data-active="payments"] .shop-subnav-item:nth-child(-n+4)::before,
.shop-window[data-active="analytics"] .shop-subnav-item:nth-child(-n+8)::before {
    opacity: 1;
}

/* Active item — corner indicator overlays the top of the line (Figma 11.5×18.5) */
.shop-subnav-item.is-active::after {
    content: "";
    position: absolute;
    left: 0.8854cqi;
    /* 17px */
    top: 0;
    width: 0.5990cqi;
    /* 11.5px */
    height: 0.9635cqi;
    /* 18.5px */
    background: url(../../../../assets/Round11/homepage/images/shopify-icons/subnav-corner-active.svg) no-repeat center/contain;
}

/* Active item — cap the vertical line at the corner indicator's height so it
   doesn't poke out below the cap (non-active items keep full-height line). */
.shop-subnav-item.is-active::before {
    bottom: auto;
    height: 0.635cqi;
    /* 18.5px — matches ::after */
}

/* Hover indicator on next-tab items (only when its line is also visible) */
.shop-window[data-active="affiliates"] .shop-subnav-item:nth-child(3)[role="tab"]:hover:not(.is-active)::after,
.shop-window[data-active="referrals"] .shop-subnav-item:nth-child(4)[role="tab"]:hover:not(.is-active)::after,
.shop-window[data-active="payments"] .shop-subnav-item:nth-child(5)[role="tab"]:hover:not(.is-active)::after {
    content: "";
    position: absolute;
    left: 0.8854cqi;
    /* 17px */
    top: 0.3646cqi;
    /* 7px */
    width: 0.5990cqi;
    /* 11.5px */
    height: 0.5990cqi;
    /* 11.5px */
    background: url(../../../../assets/Round11/homepage/images/shopify-icons/subnav-corner-hover.svg) no-repeat center/contain;
}

/* ===== Click-to-preview cue ===== */
/* Click-to-preview hint sitting adjacent to the NEXT tab in the tour sequence.
   Lives inside the next-tab button so a click bubbles up and activates the tab. */
.shop-preview-cue {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(0%);
    margin-left: -3.5cqi;
    width: 8.5cqi;
    display: none;
    z-index: 6;
}

.shop-preview-cue::before {
    content: "";
    position: absolute;
    left: -0.4cqi;
    top: 50%;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-top: 0.4cqi solid transparent;
    border-bottom: 0.4cqi solid transparent;
    /* border-right: 0.4cqi solid #ff4e41; */
}

.shop-preview-cue img {
    display: block;
    width: 100%;
    height: auto;
}

/* Show cue only on the actual next-in-sequence tab (and never on the active one) */
.shop-window[data-active="affiliates"] .shop-subnav-item[data-variant="referrals"]:not(.is-active) .shop-preview-cue,
.shop-window[data-active="referrals"] .shop-subnav-item[data-variant="payments"]:not(.is-active) .shop-preview-cue,
.shop-window[data-active="payments"] .shop-subnav-item[data-variant="analytics"]:not(.is-active) .shop-preview-cue {
    display: block;
}

/* Force the next tab into a "hover" visual state so it reads as the suggested next step */
.shop-window[data-active="affiliates"] .shop-subnav-item[data-variant="referrals"]:not(.is-active),
.shop-window[data-active="referrals"] .shop-subnav-item[data-variant="payments"]:not(.is-active),
.shop-window[data-active="payments"] .shop-subnav-item[data-variant="analytics"]:not(.is-active) {
    background: var(--p-nav-hover);
}

.shop-window[data-active="affiliates"] .shop-subnav-item[data-variant="referrals"]:not(.is-active)::after,
.shop-window[data-active="referrals"] .shop-subnav-item[data-variant="payments"]:not(.is-active)::after,
.shop-window[data-active="payments"] .shop-subnav-item[data-variant="analytics"]:not(.is-active)::after {
    content: "";
    position: absolute;
    left: 0.8854cqi;
    top: 0.3646cqi;
    width: 0.5990cqi;
    height: 0.5990cqi;
    background: url(../../../../assets/Round11/homepage/images/shopify-icons/subnav-corner-hover.svg) no-repeat center/contain;
}

.track-features {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    width: 100%;
}

.track-feature {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.track-feature-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: var(--color-2nd-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 4px;
}

.track-feature-icon img {
    width: auto;
    height: auto;
    max-width: 32px;
    max-height: 32px;
    display: block;
}

.track-feature-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 25px;
    line-height: 1.15;
    color: var(--color-1st-fg);
    margin: 0;
    transition: color 0.8s ease;
}

.track-feature-desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(5, 5, 5, 0.8);
    margin: 0;
    transition: color 0.8s ease;
}

/* ==========================================================================
   Enterprise Section
   ========================================================================== */
.enterprise-section {
    padding: 140px 32px;
    background: var(--color-1st-bg);
    transition: background-color 0.8s ease;
}

.enterprise-section.is-dark {
    background: var(--color-1st-fg);
}

.enterprise-container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* ── Hero Block ── */
.enterprise-hero-block {
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* Subtle blue/purple glow behind stats */
.enterprise-hero-block::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    /* background: radial-gradient(ellipse 80% 60% at 60% 100%, rgba(100, 60, 180, 0.35) 0%, transparent 70%); */
    pointer-events: none;
}

.enterprise-hero-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}

.enterprise-heading {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 48px;
    line-height: 1.15;
    color: var(--color-1st-fg);
    margin: 0;
    max-width: 800px;
    width: 100%;
    text-align: center;
    transition: color 0.8s ease;
}

.enterprise-section.is-dark .enterprise-heading {
    color: #ffffff;
}

/* Top CTA hidden — moved to bottom across all breakpoints (Figma 4333:18857) */
.enterprise-hero-cta {
    display: none;
    background: var(--color-1st-fg);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 700;
    padding: 14px 28px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s ease, transform 0.1s ease, background-color 0.8s ease, color 0.8s ease;
}

.enterprise-section.is-dark .enterprise-hero-cta {
    background: #ffffff;
    color: #000000;
}

.enterprise-hero-cta:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Chart stage — relative wrapper that lets stats overlay the chart */
.enterprise-chart-stage {
    position: relative;
    width: 100%;
}

/* Stats grid overlay (top-left of chart, matches Figma desktop 4333:18857) */
.enterprise-stats-grid {
    position: absolute;
    top: 52px;
    left: 0;
    width: min(680px, 100%);
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    z-index: 2;
}

.enterprise-stat {
    flex: 0 0 calc(50% - 24px);
    min-width: 0;
    padding-left: 16px;
    border-left: 1px solid rgba(5, 5, 5, 0.4);
    transition: border-color 0.8s ease;
}

.enterprise-section.is-dark .enterprise-stat {
    border-left-color: rgba(255, 255, 255, 0.4);
}

.enterprise-stat-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.15;
    color: var(--color-1st-fg);
    letter-spacing: -0.01em;
    transition: color 0.8s ease;
}

.enterprise-section.is-dark .enterprise-stat-value {
    color: #ffffff;
}

.enterprise-stat-label {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: rgba(5, 5, 5, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 16px;
    transition: color 0.8s ease;
}

.enterprise-section.is-dark .enterprise-stat-label {
    color: rgba(255, 255, 255, 0.7);
}

/* Chart wrap — hosts dashed bars + curve, matches Figma ratio 1400/657 */
.enterprise-chart-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1400 / 657;
    min-height: 360px;
    overflow: hidden;
}

/* Single SVG holds dashed grid lines + curve, viewBox 1400×657 matches wrap */
.enterprise-chart-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.enterprise-chart-grid line {
    stroke: url(#gridFade);
    stroke-width: 1;
    stroke-dasharray: 12 8;
}

/* Animated draw-in: stroke first, then area fades in. Triggered by JS adding
   `.is-animated` to the section so the curve and the stat counters start together. */
.enterprise-chart-line {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
}

.enterprise-section.is-animated .enterprise-chart-line {
    animation: chartDraw 2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
}

.enterprise-chart-area {
    opacity: 0;
    animation: chartFade 1.5s ease 1s forwards;
}

@keyframes chartDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes chartFade {
    to {
        opacity: 1;
    }
}

/* ── Scale heading ── */
.enterprise-scale-heading {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 40px;
    line-height: 1.15;
    color: var(--color-1st-fg);
    padding: 0;
    margin: 0;
    transition: color 0.8s ease;
}

.enterprise-section.is-dark .enterprise-scale-heading {
    color: #ffffff;
}

/* ── Cards grid (mirrors track-cards-grid) ── */
.enterprise-cards-grid {
    display: flex;
    gap: 48px;
    width: 100%;
}

.enterprise-card {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
    transition: background-color 0.8s ease;
}

.enterprise-section.is-dark .enterprise-card {
    background: transparent;
}

.enterprise-card-image {
    width: 100%;
    display: flex;
    align-items: stretch;
}

/* Generic placeholder */
.enterprise-img-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d0d1a;
    position: relative;
}

/* ── Logo Ticker Animation ── */
.enterprise-logo-ticker {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 0;
    overflow: hidden;
    background-image: url('../../../../assets/Round11/homepage/images/enterprise-2.png');
    background-size: cover;
    background-position: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    justify-content: center;
}

.ticker-row {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.ticker-track {
    display: flex;
    gap: 48px;
    width: max-content;
    padding-right: 48px;
    /* Extra gap after the last item of the second set */
    will-change: transform;
}

.ticker-track img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 12px;
    opacity: 0.9;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ticker-track img:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Animations */
.ticker-row--rtl .ticker-track {
    animation: ticker-rtl 25s linear infinite;
}

.ticker-row--ltr .ticker-track {
    animation: ticker-ltr 25s linear infinite;
}

@keyframes ticker-rtl {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes ticker-ltr {
    0% {
        transform: translate3d(-50%, 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* Card text area — Figma desktop has no card padding (transparent card) */
.enterprise-card-text {
    padding: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
}

.enterprise-card-desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(5, 5, 5, 0.8);
    margin: 0;
    transition: color 0.8s ease;
}

.enterprise-section.is-dark .enterprise-card-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* Bottom CTA — visible at all breakpoints (Figma desktop 4333:18857) */
.enterprise-bottom-cta-wrap {
    display: flex;
    justify-content: flex-start;
}

.enterprise-bottom-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-2nd-bg, #ffffff);
    border: 1px solid #d3d3d3;
    border-radius: 100px;
    padding: 14px 28px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    color: var(--color-1st-fg, #050505);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.enterprise-bottom-cta:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.enterprise-bottom-cta-icon {
    flex-shrink: 0;
    display: block;
}

.enterprise-section.is-dark .enterprise-bottom-cta {
    background: #ffffff;
    color: #050505;
    border-color: rgba(255, 255, 255, 0.2);
}

.enterprise-card-link {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-2nd-brand);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.2s ease;
    margin-top: auto;
}

.enterprise-card-link:hover {
    opacity: 0.6;
}

.enterprise-card-link--purple {
    color: var(--color-2nd-brand);
}

.enterprise-card-link--purple:hover {
    opacity: 0.7;
}

/* ==========================================================================
   Automate Section
   ========================================================================== */
.automate-section {
    /* Card width is read via this var so .automate-carousel padding-right
       (and JS card-position math) scale per breakpoint. */
    --automate-card-width: 600px;
    background: var(--color-1st-bg);
    transition: background-color 0.8s ease;
    height: 300vh;
    position: relative;
    padding: 0;
}

.automate-section.is-dark {
    background: var(--color-1st-fg);
}

.automate-section.is-dark .automate-heading,
.automate-section.is-dark .automate-number,
.automate-section.is-dark .automate-card-title {
    color: var(--color-1st-bg);
}

.automate-section.is-dark .automate-card-desc {
    color: rgba(255, 255, 255, 0.7);
}

.automate-section.is-dark .automate-divider,
.automate-section.is-dark .automate-connector {
    color: #fff;
    /* Figma stroke white — driven via currentColor */
}

.automate-section.is-dark .automate-image-placeholder,
.automate-section.is-dark .automate-image {
    background: rgba(255, 255, 255, 0.05);
}

.automate-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 0 var(--space-page);
}

.automate-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
}

.automate-heading {
    font-family: var(--font-body);
    font-weight: 600;
    /* SemiBold */
    font-size: 48px;
    /* Figma h1 */
    line-height: 1.15;
    color: var(--color-1st-fg);
    margin: 0 0 72px 0;
    text-align: center;
    /* Figma items-center */
    transition: color 0.8s ease;
}

.automate-carousel {
    display: flex;
    align-items: flex-start;
    /* Figma items-start — connector aligns top */
    gap: 0;
    /* Figma: 0 gap, connector 80px chiếm khoảng giữa */
    padding-bottom: 24px;
    will-change: transform;
}

/* Trailing flex item that reserves room so each card (including the last
   one) can scroll until its left edge meets the carousel viewport's left
   edge. Pseudo-element is used because flex containers ignore `padding-right`
   and trailing-child `margin-right` when computing `scrollWidth`. */
.automate-carousel::after {
    content: '';
    flex: 0 0 calc(100% - var(--automate-card-width));
    align-self: stretch;
}

/* Horizontal connector giữa cards — Figma w-80, dashed 8/8 nối các divider top */
.automate-connector {
    flex-shrink: 0;
    width: 80px;
    height: 1px;
    border: none;
    margin: 0;
    align-self: flex-start;
    /* dính top, cùng Y với .automate-divider của card */
    background-image: linear-gradient(to right, currentColor 50%, transparent 50%);
    background-size: 16px 1px;
    background-repeat: repeat-x;
    color: rgba(5, 5, 5, 0.6);
    transition: color 0.8s ease;
}

.automate-card {
    flex: 0 0 600px;
    width: 600px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Figma automate/item gap-40 */
}

.automate-number {
    font-family: var(--font-display);
    /* Konstant Grotesk */
    font-weight: 400;
    /* Book */
    font-size: 48px;
    /* Figma h2 */
    line-height: 1.15;
    color: var(--color-1st-fg);
    transition: color 0.8s ease;
}

.automate-divider {
    border: none;
    height: 1px;
    width: 100%;
    margin: 0;
    /* Figma stroke-dasharray="8 8" — dash 8px + gap 8px (period 16px). Driven via currentColor */
    background-image: linear-gradient(to right, currentColor 50%, transparent 50%);
    background-size: 16px 1px;
    background-repeat: repeat-x;
    color: rgba(5, 5, 5, 0.6);
    transition: color 0.8s ease;
}

.automate-card-title {
    font-family: var(--font-body);
    font-weight: 600;
    /* SemiBold */
    font-size: 32px;
    /* Figma h1 */
    line-height: 1.15;
    color: var(--color-1st-fg);
    margin: 0;
    transition: color 0.8s ease;
}

.automate-card-desc {
    font-family: var(--font-body);
    font-weight: 400;
    /* Regular */
    font-size: 16px;
    /* Figma description */
    line-height: 1.4;
    color: rgba(5, 5, 5, 0.8);
    margin: 0;
    max-width: 100%;
    transition: color 0.8s ease;
}

.automate-image-placeholder,
.automate-image {
    width: 600px;
    height: 300px;
    max-width: 100%;
    aspect-ratio: 600 / 300;
    background: rgba(5, 5, 5, 0.05);
    border-radius: var(--radius-default);
    margin-top: 0;
    transition: background-color 0.8s ease;
}

@media (max-width: 1024px) {

    .automate-image-placeholder,
    .automate-image {
        width: 100%;
        height: auto;
    }
}

.automate-image {
    object-fit: cover;
    display: block;
}

/* Progress dots indicator — Figma 4473:11577 */
.automate-progress {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
}

.automate-dot {
    width: 12px;
    height: 12px;
    border-radius: 100px;
    background: var(--color-stroke);
    transition: background 0.3s ease, width 0.3s ease;
    cursor: pointer;
}

.automate-dot:focus-visible {
    outline: 2px solid var(--color-1st-fg);
    outline-offset: 4px;
}

.automate-dot.is-active {
    width: 40px;
    background: var(--color-1st-fg);
}

.automate-section.is-dark .automate-dot {
    background: rgba(255, 255, 255, 0.3);
}

.automate-section.is-dark .automate-dot.is-active {
    background: #fff;
}

.automate-section.is-dark .automate-dot:focus-visible {
    outline-color: #fff;
}

/* ==========================================================================
   Switch Section
   ========================================================================== */
/* Stage wraps #switch + the gradient/blur so bars can fly past the section's
   top edge into the space above without being clipped mid-animation. */
.switch-stage {
    position: relative;
    overflow: clip;
    overflow-clip-margin-top: 1300px;
    isolation: isolate;
}

.switch-section {
    padding: 0;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: var(--color-1st-bg);
    transition: background-color 0.8s ease;
}

/* Inner wrapper: stacks CTA group + content row */
.switch-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1560px;
    padding: 200px 80px 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.switch-inner .switch-cta-group {
    margin-top: 0;
}

.switch-section.is-light {
    background: var(--color-1st-bg);
}

/* Gradient container — bars build behind CTA group (same arch effect as hero). */
.switch-gradient {
    position: absolute;
    top: 660px;
    left: calc(-1 * var(--space-page));
    right: calc(-1 * var(--space-page));
    display: flex;
    justify-content: center;
    z-index: 0;
    pointer-events: none;
}

/* Bars — bottom fades to transparent; arch built by per-bar --rise from JS.
   Single continuous animation: rise → through apex → exit past section top.
   linear timing + no plateau at apex => no perceptible "wait point". */
.switch-gradient-bar {
    width: 80px;
    height: 505px;
    flex-shrink: 0;
    will-change: transform, opacity;
    opacity: 0;
    animation: switchGradientFly 2.8s linear forwards;
    background: linear-gradient(to bottom, var(--color-1st-brand), var(--color-2nd-brand), rgba(246, 245, 244, 0));
}

@keyframes switchGradientFly {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    /* Apex pass-through at 43% (≈1.2s into 2.8s) — no hold, motion continues */
    43% {
        transform: translateY(var(--rise));
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(calc(var(--rise) - 1300px));
        opacity: 0;
    }
}

/* Progressive layer blur — same treatment as hero-gradient-blur.
   Bars' final apex (center bar top after rise) is at section y=20px;
   blur element top -60px places mask center (80px down) right on the apex. */
.switch-gradient-blur {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    height: 300px;
    z-index: 1;
    pointer-events: none;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    mask-image: radial-gradient(ellipse 380px 130px at center 80px, black 0%, black 12%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 380px 130px at center 80px, black 0%, black 12%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
    opacity: 0;
}

/* Sync blur fade with bars: 1.2s rise + 1.6s exit = 2.8s, no delay.
   No hold — fades in during rise, peaks at apex, fades out during exit. */
.switch-stage.is-light .switch-gradient-blur {
    animation: switchBlurFade 2.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes switchBlurFade {
    0% {
        opacity: 0;
    }

    43% {
        opacity: 1;
    }

    /* peak at end of rise / start of exit (~1.2s) */
    100% {
        opacity: 0;
    }

    /* fade out during exit */
}

.switch-gradient-blur::before,
.switch-gradient-blur::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Wide-light halo */
.switch-gradient-blur::before {
    mask-image: radial-gradient(ellipse 1000px 220px at center 80px,
            black 0%,
            black 18%,
            rgba(0, 0, 0, 0.6) 55%,
            rgba(0, 0, 0, 0.2) 80%,
            transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 1000px 220px at center 80px,
            black 0%,
            black 18%,
            rgba(0, 0, 0, 0.6) 55%,
            rgba(0, 0, 0, 0.2) 80%,
            transparent 100%);
}

/* Narrow-strong core */
.switch-gradient-blur::after {
    mask-image: radial-gradient(ellipse 380px 130px at center 80px,
            black 0%,
            black 12%,
            rgba(0, 0, 0, 0.5) 60%,
            transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 380px 130px at center 80px,
            black 0%,
            black 12%,
            rgba(0, 0, 0, 0.5) 60%,
            transparent 100%);
}

/* CTA Group — centered, same typography as hero title group */
.switch-cta-group {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 20vh;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.switch-cta-group.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.switch-heading {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 58px;
    line-height: 1.15;
    color: var(--color-1st-fg);
    text-align: center;
    margin-bottom: 16px;
}

.switch-description {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(5, 5, 5, 0.8);
    max-width: 400px;
    text-align: center;
    margin-bottom: 28px;
}

.switch-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.switch-btn {
    font-size: 13px;
}

/* Testimonials carousel — cinema-style: active card centered, peek both sides */
.switch-carousel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.switch-carousel.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.switch-carousel-viewport {
    width: 100%;
    overflow: hidden;
}

.switch-carousel-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.switch-card {
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
    background: #fdf9fa;
    display: grid;
    grid-template-columns: 1fr 500px;
    gap: 40px;
    padding: 80px 40px;
    align-items: stretch;
}

.switch-card-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    min-width: 0;
}

.switch-card-logo {
    width: 190px;
    height: 64px;
    object-fit: contain;
    align-self: flex-start;
}

.switch-card-quote {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.4;
    color: #192d1d;
    margin: 0;
    padding-bottom: 32px;
}

.switch-card-author {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.switch-card-name {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    color: var(--color-1st-fg);
    margin: 0;
}

.switch-card-role {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: rgba(5, 5, 5, 0.8);
    text-transform: uppercase;
    margin: 0;
}

.switch-card-image {
    width: 500px;
    height: 450px;
}

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

.switch-carousel-progress {
    display: flex;
    gap: 8px;
    align-items: center;
}

.switch-dot {
    width: 12px;
    height: 12px;
    border-radius: 100px;
    border: 0;
    padding: 0;
    background: #d3d3d3;
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.switch-dot.is-active {
    width: 40px;
    background: var(--color-1st-fg);
}

@media (max-width: 1024px) {
    .switch-inner {
        padding: 120px 32px 80px;
        max-width: 100%;
    }

    .switch-card {
        grid-template-columns: 1fr;
        padding: 48px 24px;
        gap: 32px;
    }

    .switch-card-image {
        width: 100%;
        height: auto;
        aspect-ratio: 500 / 450;
    }

    .switch-card-quote {
        font-size: 24px;
        padding-bottom: 16px;
    }
}

@media (max-width: 640px) {
    .switch-card {
        padding: 32px 20px;
        gap: 24px;
    }

    .switch-card-quote {
        font-size: 18px;
    }

    .switch-card-logo {
        width: 140px;
        height: 48px;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet (1024px) */
@media (max-width: 1024px) {
    :root {
        --space-page: 32px;
    }

    h1 {
        font-size: 4rem;
    }

    /* Tablet: keep Figma's no-gap / no-h-padding inner; reduce wrapper px so
       logo/nav/cta don't accumulate too much spacing on narrow screens. */
    .site-header .header-inner {
        gap: 0;
        padding: 12px 0;
    }

    .site-header .logo {
        width: 144px;
        padding: 0 16px;
    }

    .site-nav {
        padding: 0 24px;
    }

    .site-nav ul {
        gap: 24px;
    }

    .header-actions {
        padding: 0 8px;
    }

    /* === Hero Section — Tablet ≤1024px (Figma 4333-16206) === */
    .hero {
        padding: 20px 20px 72px;
    }

    .hero-container {
        gap: 40px;
    }

    .hero-heading {
        font-size: 32px;
        color: var(--color-1st-fg);
        margin-bottom: 16px;
    }

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

    .hero-badge {
        font-size: 12px;
    }

    .hero-badge img {
        width: 14px;
        height: 14px;
    }

    .hero-cta {
        padding: 14px 28px;
        font-size: 12px;
        text-transform: uppercase;
        border-radius: 100px;
    }

    .hero-slideshow {
        aspect-ratio: 1400 / 752;
    }

    /* Hide floating stat cards on tablet/mobile — Figma keeps clean hero image */
    .hero-image-wrapper .stat-card {
        display: none;
    }

    /* Trust banner: 2x2 grid, icon stack-on-top, internal dividers (vertical + horizontal) */
    .trust-banner-container {
        flex-wrap: wrap;
        height: auto;
        background: #fff;
    }

    .trust-item {
        flex: 1 1 50%;
        flex-direction: column;
        gap: 6px;
        padding: 16px 0;
        height: auto;
        font-size: 14px;
        border-right: 1px solid var(--color-stroke);
        border-bottom: none;
    }

    .trust-item:nth-child(1),
    .trust-item:nth-child(2) {
        border-bottom: 1px solid var(--color-stroke);
    }

    .trust-item:nth-child(2),
    .trust-item:nth-child(4) {
        border-right: none;
    }

    .trust-item img {
        width: 24px;
        height: 24px;
    }

    .trust-item span {
        font-size: 14px;
    }

    /* === Spotlight Section — Tablet ≤1024px (Figma 4518-15851) === */
    .spotlight-section {
        --spotlight-clip-top: 50vh;
        height: 300vh;
        margin-top: -50vh;
        padding: 0;
    }

    .spotlight-text {
        font-size: 48px;
        line-height: 1.7;
        padding: 0;
    }

    .spotlight-author {
        font-size: 32px;
        line-height: 1.7;
    }

    /* === Launch Section — Tablet ≤1024px (Figma 4333-16394) === */
    .launch-section {
        padding: 72px 20px;
        position: static;
        top: auto;
        min-height: 0;
    }

    .launch-title-group {
        gap: 12px;
        margin-bottom: 40px;
    }

    .launch-subheading {
        font-weight: 500;
        font-size: 14px;
    }

    .launch-heading {
        font-size: 25px;
    }

    .launch-content {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }

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

    .launch-tab-col {
        width: 100%;
        gap: 36px;
    }

    .tab-progress-track {
        height: 2px;
        margin-bottom: 20px;
    }

    .tab-title {
        font-size: 20px;
        font-weight: 600;
    }

    .launch-tab.is-active .tab-desc-wrapper {
        margin-top: 36px;
    }

    .launch-tab.is-active .launch-tab-image {
        display: block;
        width: 100%;
        aspect-ratio: 5 / 3;
        height: auto;
        object-fit: cover;
        margin-top: 36px;
    }

    .launch-tab.is-active .launch-tab-image>svg {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }

    /* === Sell Section — Tablet ≤1024px (Figma 4333-16431) === */
    .sell-section {
        padding: 72px var(--space-page);
        position: static;
        top: auto;
    }

    .sell-title-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        margin-bottom: 40px;
    }

    .sell-title-text {
        gap: 12px;
    }

    .sell-subheading {
        font-weight: 500;
        font-size: 14px;
    }

    .sell-heading {
        font-size: 25px;
    }

    .sell-desc {
        width: auto;
        max-width: 600px;
    }

    .sell-cards-group {
        gap: 32px;
    }

    .sell-card {
        flex-direction: column;
        gap: 0;
    }

    .sell-card-text,
    .sell-card-image-col {
        width: 100%;
    }

    .sell-card-image-col {
        min-height: 0;
        aspect-ratio: 358 / 260;
        order: -1;
    }

    .sell-card-text {
        padding: 40px 24px;
        justify-content: flex-start;
        gap: 48px;
    }

    .sell-card-title {
        font-size: 20px;
    }

    .sell-card-features {
        gap: 28px;
    }

    .sell-card-features-label {
        font-size: 18px;
        font-weight: 600;
    }

    .sell-card-tabs {
        gap: 6px;
    }

    .sell-tab {
        padding: 8px 16px;
        font-size: 12px;
        line-height: 1;
        border-color: #d3d3d3;
    }

    .sell-tab.is-active {
        border-color: var(--color-1st-fg);
    }

    .sell-mockup-leaderboard {
        padding: 32px 16px;
        gap: 8px;
    }

    .mockup-leaderboard-title {
        font-size: 14px;
    }

    .mockup-leader {
        width: 100%;
    }

    .track-section {
        padding: 100px var(--space-page);
    }

    .track-heading-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .track-heading {
        max-width: none;
    }

    .track-desc {
        max-width: none;
    }

    .track-features {
        flex-direction: column;
        gap: 32px;
    }

    .track-feature {
        flex: 0 0 100%;
    }

    .track-feature-title {
        font-size: 20px;
    }

    .automate-section {
        --automate-card-width: 500px;
        height: 350vh;
    }

    .automate-heading {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .automate-card {
        flex: 0 0 500px;
        width: 500px;
        gap: 32px;
    }

    .automate-number {
        font-size: 40px;
    }

    .automate-card-title {
        font-size: 24px;
    }

    .enterprise-section {
        padding: 72px 20px;
    }

    .enterprise-hero-header {
        margin-bottom: 40px;
    }

    /* Stats grid: 48px row + 20px col gap on tablet/mobile (Figma 4580:36003) */
    .enterprise-stats-grid {
        top: 40px;
        left: 12px;
        width: min(620px, 100%);
        gap: 48px 20px;
    }

    /* Re-derive flex calc since col-gap is now 20 (not 48 like desktop) */
    .enterprise-stat {
        flex: 0 0 calc(50% - 10px);
    }

    .enterprise-heading {
        font-size: 28px;
    }

    /* Chart height matches Figma tablet (794×565), capped */
    .enterprise-chart-wrap {
        aspect-ratio: 794 / 565;
        min-height: 440px;
        max-height: 600px;
    }

    .enterprise-stat-value {
        font-size: 22px;
        font-weight: 400;
    }

    .enterprise-stat-label {
        font-size: 12px;
    }

    .enterprise-scale-heading {
        font-size: 25px;
    }

    .enterprise-cards-grid {
        gap: 32px;
    }
}

/* Mobile (768px) */
@media (max-width: 768px) {
    :root {
        --space-page: 20px;
    }

    h1 {
        font-size: 3rem;
    }

    /* Header: simplified for mobile */
    .site-nav {
        display: none;
        /* Hide main nav on mobile, typically replaced with hamburger menu later */
    }

    .site-header .header-inner {
        justify-content: space-between;
    }

    .btn {
        padding: 10px 16px;
        font-size: 13px;
    }

    /* === Hero Section — Mobile ≤768px (Figma 4398-6483) === */
    /* Đa số style kế thừa từ @media ≤1024px. Chỉ override khác biệt. */

    .hero {
        padding: 20px 20px 72px;
    }

    .hero-heading {
        font-size: 32px;
    }

    /* Subheading badges row giữ horizontal (Figma vẫn flex row trên mobile) */
    .hero-subheading-row {
        flex-direction: row;
        gap: 6px;
        align-items: center;
    }

    /* Logo Ticker */
    .logo-ticker-section {
        padding: 40px 0;
    }

    /* === Spotlight Section — Mobile ≤768px (Figma 4518-15842) === */
    /* Đa số kế thừa từ ≤1024px. Chỉ override khác biệt. */
    .spotlight-section {
        --spotlight-clip-top: 50vh;
        height: 300vh;
        margin-top: -50vh;
        padding: 0;
    }

    .spotlight-text {
        font-size: 34px;
        line-height: 1.7;
    }

    .spotlight-author {
        font-size: 24px;
    }

    /* === Launch Section — Mobile ≤768px (Figma 4333-15648) === */
    /* Đa số style kế thừa từ @media ≤1024px. Chỉ override khác biệt. */

    .launch-section {
        padding: 72px 20px;
    }

    .launch-heading {
        font-size: 25px;
    }

    /* === Sell Section — Mobile ≤768px (Figma 4333-15685) === */
    /* Đa số style kế thừa từ @media ≤1024px. Chỉ override khác biệt. */

    .sell-section {
        padding: 72px var(--space-page);
    }

    .sell-heading {
        font-size: 25px;
    }

    /* Mockup 1 (phone): scale internal cards để khớp container ~254px tall */
    .mockup-shipping-card {
        height: 44px;
        padding: 0 12px;
        gap: 8px;
        border-radius: 10px;
    }

    .mockup-shipping-name {
        font-size: 12px;
    }

    .mockup-shipping-loc {
        font-size: 10px;
    }

    .mockup-shipping-icon {
        font-size: 16px;
    }

    .mockup-order-card {
        padding: 12px 10px;
        border-radius: 12px;
    }

    .mockup-order-product {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    .mockup-order-title {
        font-size: 12px;
    }

    .mockup-order-meta {
        font-size: 9px;
    }

    .mockup-order-header {
        gap: 8px;
        margin-bottom: 12px;
    }

    .mockup-timeline {
        gap: 12px;
    }

    .mockup-step:not(:last-child)::before {
        height: calc(100% + 12px);
    }

    .mockup-step-title,
    .mockup-step-time {
        font-size: 8px;
    }

    .mockup-step-dot {
        width: 7px;
        height: 7px;
    }

    /* Mockup 2 (leaderboard): scale row */
    .sell-mockup-leaderboard {
        padding: 24px 12px;
    }

    .mockup-leader {
        padding: 8px 10px;
        gap: 8px;
    }

    .mockup-leader-rank {
        font-size: 16px;
        width: 14px;
    }

    .mockup-leader-avatar {
        width: 24px;
        height: 24px;
    }

    .mockup-leader-name,
    .mockup-leader-sales {
        font-size: 13px;
    }

    .mockup-leader-bonus {
        font-size: 11px;
        padding: 4px 6px;
    }

    /* Track */
    .track-section {
        padding: 60px var(--space-page);
    }

    .track-container {
        gap: 48px;
    }

    .track-heading {
        font-size: 32px;
    }

    .track-features {
        flex-direction: column;
        gap: 32px;
    }

    .track-feature {
        flex: 0 0 100%;
    }

    /* Automate */
    .automate-section {
        --automate-card-width: 85vw;
        height: 400vh;
    }

    .automate-heading {
        font-size: 32px;
    }

    .automate-card {
        flex: 0 0 85vw;
        width: 85vw;
        gap: 24px;
    }

    .automate-number {
        font-size: 32px;
    }

    .automate-card-title {
        font-size: 20px;
    }

    /* Enterprise */
    .enterprise-section {
        padding: 72px var(--space-page);
    }

    .enterprise-heading {
        font-size: 25px;
    }

    /* Keep stats overlaid on chart (Figma mobile) */
    .enterprise-chart-stage {
        display: block;
        position: relative;
    }

    .enterprise-stats-grid {
        position: absolute;
        top: 16px;
        left: 0;
        width: min(300px, 100%);
        gap: 48px;
    }

    /* Single column on mobile per Figma */
    .enterprise-stat {
        flex: 0 0 100%;
        width: 100%;
    }

    /* Taller chart (Figma mobile is portrait 350x565); capped so wide-mobile viewports don't blow up */
    .enterprise-chart-wrap {
        aspect-ratio: 350 / 565;
        min-height: 480px;
        max-height: 620px;
    }

    /* Cards — horizontal scroll on mobile (Figma design) */
    .enterprise-cards-grid {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 32px;
        padding-bottom: 8px;
        margin-left: calc(-1 * var(--space-page));
        margin-right: calc(-1 * var(--space-page));
        padding-left: var(--space-page);
        padding-right: var(--space-page);
        scrollbar-width: none;
    }

    .enterprise-cards-grid::-webkit-scrollbar {
        display: none;
    }

    .enterprise-card {
        flex: 0 0 300px;
        scroll-snap-align: start;
    }

    /* Switch */
    .switch-section {
        min-height: 70vh;
    }

    .switch-heading {
        font-size: 40px;
    }
}

/* Small Mobile (480px) */
@media (max-width: 480px) {
    .hero-heading {
        font-size: 32px;
    }

    .switch-heading {
        font-size: 32px;
    }

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

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}