:root {
    /* Primary accent - Teal */
    --teal-50: #E8F4F7;
    --teal-500: #178FAE;
    --teal-300: #ABD4DC;
    --teal-700: #106176;
    /* Secondary accent - Aqua */
    --aqua-50: #EBF5F5;
    --aqua-400: #61C5E5;
    --aqua-200: #C4E7EF;

    /* Accent - Gold */
    --gold-50: #FAF3E5;
    --gold-200: #F8E2B6;
    --gold-500: #F4B642;
    --gold-600: #EC9C13;

    /* Neutrals */
    --cream: #FAF9F5;
    --cream-dark: #EBF3F4;
    --warm-gray: #707F96;
    --text-primary: #102A50;
    --text-secondary: #4E617E;
    --white: #FFFFFF;
    --ink: #0A1B34;

    /* Typography scale — shared across every page so H1/H2/H3 stay consistent. */
    --h1-size: clamp(2.25rem, 4vw, 3.5rem);
    --h1-line-height: 1.15;
    --h2-size: clamp(1.75rem, 3vw, 2.5rem);
    --h2-line-height: 1.3;
    --h2-compact-size: clamp(1.5rem, 3vw, 2rem);
    --h2-compact-line-height: 1.3;
    --h3-size: 1.25rem;
    --h3-lg-size: 1.35rem;
    --h3-line-height: 1.35;
}

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

html {
    scroll-behavior: smooth;
    text-wrap: balance;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--cream);
    color: var(--text-primary);
    line-height: 1.45;
    overflow-x: hidden;
}

/* Slight negative tracking on every heading for a tighter, more refined look.
   em-based so it scales with each heading's own font-size instead of a fixed
   px value — bigger headings get pulled in more, small ones barely move. */
h1, h2, h3, h4 {
    letter-spacing: -0.02em;
}

/* Exception: the only heading on the site set in the sans-serif body font
   rather than the serif display face — tightening it isn't part of "make
   the serif headings feel more designed" and can nick legibility at this size. */
.contact-method-content h3 {
    letter-spacing: normal;
}

/* ============ INTRO ANIMATION ============ */
body.intro-active {
    overflow: hidden;
}

.intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--cream);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.intro-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

.intro-logo-container {
    width: 123px;
    height: 107px;
}

.intro-logo-container svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

#mainSiteWrapper {
    opacity: 0;
    transition: opacity 0.7s ease-in;
}

#mainSiteWrapper.visible {
    opacity: 1;
}

/* ============ HEADER ============ */
/* Placeholder has no height — the injected header is position:fixed and needs no flow space */
#header-placeholder {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.75rem 2rem;
    background: var(--cream);
    transition: box-shadow 0.3s ease, opacity 0.6s ease, transform 0.6s ease;
    opacity: 0;
    transform: translateY(-20px);
}

.header.visible {
    opacity: 1;
    transform: translateY(0);
}

.header.scrolled {
    box-shadow: 0 2px 20px rgba(16, 42, 80, 0.08);
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    margin: 0.4rem 0;
}

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

.nav {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

@media (min-width: 1001px) and (max-width:1100px) {
    .nav {
        gap: 1.5rem;
    }
}

.nav-link {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s ease;
    position: relative;
}

.nav-link:hover {
    color: var(--teal-500);
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.nav-dropdown-trigger svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-trigger svg {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: -1rem;
    padding-top: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-content {
    background: var(--white);
    border-radius: 16px;
    padding: 0.75rem;
    min-width: max-content;
    box-shadow: 0 10px 40px rgba(16, 42, 80, 0.12);
}

.nav-dropdown-content a {
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    border-radius: 10px;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.nav-dropdown-content a:hover {
    background: var(--cream);
}

.nav-dropdown-content a.product-menu-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.product-menu-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-demo {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1rem;
    background: var(--teal-500);
    color: var(--white);
    text-decoration: none;
    border-radius: 100px;
    font-weight: 500;
    font-size: 0.9rem;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-demo:hover {
    box-shadow: 0 8px 25px rgba(23, 143, 174, 0.3);
}

/* Background layer */
.btn-demo-bg {
    position: absolute;
    inset: 0;
    background: var(--teal-500);
    border-radius: 100px;
    z-index: 0;
    transition: background 0.3s ease;
}

.btn-demo:hover .btn-demo-bg {
    background: var(--teal-700);
}

/* Spotlight effect - radial gradient that appears on hover */
.btn-demo-spotlight {
    position: absolute;
    inset: 0;
    border-radius: 100px;
    opacity: 0;
    background: radial-gradient(circle at 30% 50%,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.05) 40%,
            transparent 70%);
    transition: opacity 0.4s ease;
    z-index: 1;
}

.btn-demo:hover .btn-demo-spotlight {
    opacity: 1;
    animation: spotlight-move 0.5s ease forwards;
}

@keyframes spotlight-move {
    0% {
        background: radial-gradient(circle at 20% 50%,
                rgba(255, 255, 255, 0.2) 0%,
                rgba(255, 255, 255, 0.08) 35%,
                transparent 60%);
    }

    100% {
        background: radial-gradient(circle at 80% 50%,
                rgba(255, 255, 255, 0.2) 0%,
                rgba(255, 255, 255, 0.08) 35%,
                transparent 60%);
    }
}

/* Content wrapper */
.btn-demo-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    z-index: 2;
}

/* Icon container with sliding animation */
.btn-demo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.btn-demo-icon svg {
    width: 20px;
    height: 20px;
    color: var(--white);
    transition: color 0.3s ease;
}

/* Text */
.btn-demo-text {
    white-space: nowrap;
}

/* Hover state - swap icon and text positions */
.btn-demo:hover .btn-demo-icon {
    order: 2;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.12) 100%);
    animation: slide-icon-right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.btn-demo:hover .btn-demo-text {
    order: 1;
    animation: slide-text-left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes slide-icon-right {
    0% {
        transform: translateX(calc(-100% - 0.625rem));
        opacity: 0;
    }

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

@keyframes slide-text-left {
    0% {
        transform: translateX(calc(28px + 0.625rem));
    }

    100% {
        transform: translateX(0);
    }
}

/* ============ HERO ============ */
.hero {
    padding: 7rem 2rem 3rem;
    text-align: center;
    max-width: 1200px;
    margin: 1rem auto;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.home-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    background: var(--gold-50);
    color: var(--gold-500);
    opacity: 0;
    transform: translateY(-14px);
    will-change: transform, opacity;
}

.home-hero-badge.visible {
    animation: short-slide-down 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.home-hero-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-500);
    flex-shrink: 0;
    animation: badge-pulse 2s ease-in-out infinite;
}

.hero-title {
    font-family: 'IBM Plex Serif', serif;
    font-size: var(--h1-size);
    font-weight: 600;
    line-height: var(--h1-line-height);
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    overflow: visible;
}

.hero-title-accent {
    color: var(--teal-500);
}

.hero-line {
    display: block;
    opacity: 0;
    transform: translateY(-14px);
    will-change: transform, opacity;
}

.hero-title.visible .hero-line {
    animation: short-slide-down 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title.visible .hero-line:nth-child(1) {
    animation-delay: 0s;
}

.hero-title.visible .hero-line:nth-child(2) {
    animation-delay: 0.15s;
}

.hero-title.visible .hero-line:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes short-slide-down {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }

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

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    max-width: 780px;
    margin: 0 auto 1rem;
    line-height: 1.7;
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
}

.hero-subtitle.visible {
    opacity: 1;
    transform: translateY(0);
    transition: none;
}

.hero-subtitle em {
    font-style: italic;
    font-weight: 600;
    color: var(--teal-500);
}

/* ============ PARTNERS SECTION ============ */
.partners-section {
    background: var(--cream);
    padding: 1rem 1rem;
    overflow: hidden;
}

.partners-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

.partners-heading {
    text-align: center;
    font-family: 'IBM Plex Serif', serif;
    font-size: var(--h3-size);
    font-weight: 600;
    line-height: var(--h3-line-height);
    color: var(--text-primary);
    padding-bottom: 2rem;
}

/* Carousel Wrapper */
.partners-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%);
    padding: 0 6rem;
    padding-bottom: 2rem;
}

/* Carousel Animation */
.partners-carousel {
    display: flex;
    width: fit-content;
    animation: scroll-partners 20s linear infinite;
}

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

@keyframes scroll-partners {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-70%);
    }
}

/* Tracks and Logos */
.partners-track {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 clamp(20px, 3vw, 40px);
}

.partner-logo {
    box-sizing: border-box;
    /* padding stays inside clamp() size */
    overflow: hidden;
    /* safety */
    flex: 0 0 auto;
    width: clamp(120px, 15vw, 180px);
    height: clamp(60px, 8vw, 90px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--white);
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.partner-logo>a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
}

.partner-logo:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(16, 42, 80, 0.12);
}

.partner-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    min-width: 0;
    min-height: 0;
}

.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    padding: 0 2rem 2rem;
}

/* Temporarily hidden logos — kept in the DOM, not rendered for now. */
.partner-logo--hidden {
    display: none;
}

/* Partners Responsive */
@media (max-width: 900px) {
    .partners-carousel-wrapper {
        padding-bottom: 4rem;
    }
    .partners-carousel {
        animation: scroll-partners 35s linear infinite;
    }
    .partner-logo {
        padding: 10px;
    }
}

@media (max-width: 600px) {
    .partners-carousel-wrapper {
        padding-bottom: 4rem;
    }
    .partners-carousel {
        animation: scroll-partners 30s linear infinite;
    }

    .partner-logo {
        padding: 10px;
    }
}

/* ============ PRODUCTS SECTION ============ */
.products {
    padding: 5rem 2rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.products-header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 4rem);
}

.products-label {
    display: inline-block;
    background: var(--aqua-200);
    color: var(--teal-700);
    padding: 0.45rem 1.2rem;
    border-radius: 100px;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1.25rem;
}

.products-header h2 {
    font-family: 'IBM Plex Serif', serif;
    font-size: var(--h2-size);
    font-weight: 600;
    color: var(--text-primary);
    line-height: var(--h2-line-height);
}

.products-header h2 em {
    font-style: italic;
    color: var(--teal-700);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

@media (max-width: 900px) {
    .products-grid {
        grid-template-columns: 1fr;
    }
}

.product-card {
    border-radius: 32px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(16, 42, 80, 0.15);
}

.product-card-smartmeals {
    background: linear-gradient(160deg, #FFF9F2 0%, #FFEFD8 50%, #FFE4C2 100%);
    border: 1px solid rgba(23, 143, 174, 0.12);
}

.product-card-aislemate {
    background: linear-gradient(160deg, #FDF6EE 0%, #F5E6D0 50%, #EEDCC3 100%);
    border: 1px solid rgba(180, 140, 70, 0.12);
}

/* Badge */
.product-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.badge-live {
    background: rgba(34, 139, 34, 0.1);
    color: #1a7a1a;
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22a522;
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.badge-soon {
    background: rgba(99, 91, 255, 0.09);
    color: #5a52d5;
}

.product-card-title {
    font-family: 'IBM Plex Serif', serif;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    width: 100%;
    text-align: center;
}

.product-card-title-img,
.product-card-title-ga-img {
    display: block;
    margin: 0 auto 2rem auto;
    width: clamp(200px, 70%, 350px);
    height: clamp(50px, 12vw, 90px);
    object-fit: contain;
}

.product-card-title-ga-img {
    margin-top: -1rem;
    margin-bottom: 3rem;
}

.product-card-desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: center;
    margin-bottom: 1.5rem;
}

.product-card-link {
    position: absolute;
    font-size: 20px;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.product-card-link::after {
    content: "→";
    transition: transform 0.2s ease;
}

.product-card[data-href]:hover .product-card-link {
    transform: translateX(-50%) translateY(-1px);
}

.product-card[data-href]:hover .product-card-link::after {
    transform: translateX(4px);
}

.product-card[data-href] {
    cursor: pointer;
}

/* ============ STATS SECTION ============ */
.stats {
    padding: 6rem 2rem;
    background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-500) 50%, var(--teal-300) 100%);
    color: var(--white);
}

.stats-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.stats-header {
    text-align: center;
    margin-bottom: 4rem;
}

.stats-header h2 {
    font-family: 'IBM Plex Serif', serif;
    font-size: var(--h2-size);
    font-weight: 600;
    line-height: var(--h2-line-height);
    margin-bottom: 1rem;
}

.stats-header p {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

@media (max-width: 900px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

.stat-card {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    transition: background 0.3s ease;
    backdrop-filter: blur(10px);
}

.stat-card:hover {
    background: rgba(255, 255, 255, 0.22);
}

.stat-value {
    font-family: 'IBM Plex Serif', serif;
    font-size: 3.5rem;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0.5rem;
    color: var(--white);
}

.stat-label {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-desc {
    font-size: 0.9rem;
    opacity: 0.85;
    line-height: 1.5;
}

/* ============ SUITE SECTION ============ */
.suite-section {
    padding: clamp(4rem, 8vw, 6rem) 2rem;
    max-width: 1264px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 16px 16px 0 0;
}

.suite-header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.suite-label {
    display: inline-block;
    background: var(--aqua-200);
    color: var(--teal-700);
    padding: 0.5rem 1.25rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.suite-header h2 {
    font-family: 'IBM Plex Serif', serif;
    font-size: var(--h2-size);
    font-weight: 600;
    line-height: var(--h2-line-height);
    color: var(--text-primary);
    margin-bottom: 0.85rem;
}

.suite-header p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Per-product accent color, shared by the puzzle graphic and the card icon/eyebrow below */
.suite-accent--meal { --accent: var(--gold-500); }
.suite-accent--email { --accent: var(--text-primary); }
.suite-accent--chat { --accent: var(--aqua-400); }
.suite-accent--store { --accent: var(--teal-500); }

/* Gentle continuous float, independent of the tilt/hover transform on .suite-visual itself */
.suite-visual-float {
    margin-top: clamp(1rem, 3vw, 2rem);
    animation: suite-visual-float 5s ease-in-out infinite;
}

@keyframes suite-visual-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.suite-visual {
    position: relative;
    width: 416px;
    aspect-ratio: 4 / 3;
    margin: 0 auto clamp(1.5rem, 3vw, 2rem);
    display: flex;
    flex-wrap: wrap;
    border-radius: 16px;
    overflow: clip;
    transform: perspective(900px) rotateX(8deg) rotateY(-6deg) rotate(-10deg);
    transition: transform 0.25s ease-out;
    will-change: transform;
    cursor: pointer;
}

/* Entrance: flies in tilted and oversized in 3D, then springs into its resting tilt */
.suite-visual.reveal {
    opacity: 0;
    transform: perspective(900px) rotateX(35deg) rotateY(28deg) rotate(-16deg) scale(0.7) translateY(50px);
    transition: none;
}

.suite-visual.reveal.visible {
    animation: suite-visual-in 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes suite-visual-in {
    0% {
        opacity: 0;
        transform: perspective(900px) rotateX(35deg) rotateY(28deg) rotate(-16deg) scale(0.7) translateY(50px);
    }
    60% {
        opacity: 1;
        transform: perspective(900px) rotateX(2deg) rotateY(-10deg) rotate(-11deg) scale(1.04) translateY(-8px);
    }
    100% {
        opacity: 1;
        transform: perspective(900px) rotateX(8deg) rotateY(-6deg) rotate(-10deg) scale(1) translateY(0);
    }
}

.suite-visual-piece {
    position: relative;
    width: 50%;
    aspect-ratio: 4 / 3;
    flex-shrink: 0;
    transition: transform 0.35s ease;
}

/* The visible colored surface — separate from .suite-visual-piece so the mask
   (which bounds rendering to its own box) never clips the overflowing tab. */
.suite-visual-piece-body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.05) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 14px 28px rgba(16, 42, 80, 0.22);
    border-radius: 16px;
    transition: border-radius 0.35s ease, box-shadow 0.35s ease;
}

.suite-visual-icon {
    width: 40px;
    height: 40px;
}

.suite-visual-tab {
    width: 57px;
    height: 57px;
    position: absolute;
    overflow: visible;
    z-index: 2;
}

.suite-visual--row {
    height: 156px;
    aspect-ratio: unset;
    flex-wrap: nowrap;
    overflow: visible;
    gap: 24px;
    transition: gap 0.35s ease;
}

.suite-visual--row .suite-visual-piece {
    width: 33.333%;
    aspect-ratio: unset;
    height: 100%;
}

.suite-visual--row .suite-visual-piece-body {
    -webkit-mask-image: radial-gradient(circle 26px at 0% 50%, transparent 0px, transparent 26px, black 26.5px, black 100%);
    mask-image: radial-gradient(circle 26px at 0% 50%, transparent 0px, transparent 26px, black 26.5px, black 100%);
}

/* Each piece sits at its own slight tilt at rest, as if floating independently */
.suite-visual--row .suite-visual-piece:nth-child(1) {
    transform: rotate(-5deg) skewY(-2deg);
}

.suite-visual--row .suite-visual-piece:nth-child(2) {
    transform: rotate(3deg) skewY(1.5deg);
}

.suite-visual--row .suite-visual-piece:nth-child(3) {
    transform: rotate(-3deg) skewY(-1.5deg);
}

/* At rest, the three pieces read as independent cards, notch and all; on hover
   they close the gap and align flush into one interlocking shape. Once merged
   (the .merged class, added on first hover via JS), they stay locked together
   until the page reloads. */
.suite-visual--row:hover,
.suite-visual--row.merged {
    gap: 0;
}

.suite-visual--row:hover .suite-visual-piece,
.suite-visual--row.merged .suite-visual-piece {
    transform: none;
}

.suite-visual--row:hover .suite-visual-piece:first-child .suite-visual-piece-body,
.suite-visual--row.merged .suite-visual-piece:first-child .suite-visual-piece-body {
    border-radius: 16px 0 0 16px;
}

.suite-visual--row:hover .suite-visual-piece:nth-child(2) .suite-visual-piece-body,
.suite-visual--row.merged .suite-visual-piece:nth-child(2) .suite-visual-piece-body {
    border-radius: 0;
}

.suite-visual--row:hover .suite-visual-piece:last-child .suite-visual-piece-body,
.suite-visual--row.merged .suite-visual-piece:last-child .suite-visual-piece-body {
    border-radius: 0 16px 16px 0;
}

.suite-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.suite-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: var(--cream);
    border-radius: 24px;
    padding: 1.5rem;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.suite-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(16, 42, 80, 0.14);
}

.suite-card-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.suite-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.suite-card-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.15rem;
}

.suite-card-title {
    font-family: 'IBM Plex Serif', serif;
    font-size: var(--h3-lg-size);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.suite-card-desc {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.suite-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--teal-500);
    margin-top: auto;
}

.suite-card-link svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.suite-card:hover .suite-card-link svg {
    transform: translateX(4px);
}

@media (max-width: 900px) {
    .suite-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .suite-grid {
        grid-template-columns: 1fr;
    }

    .suite-visual {
        width: 338px;
    }
}

/* ============ BENEFITS SECTION ============ */
.benefits {
    padding: 6rem 2rem;
    background: var(--white);
}

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

.benefits-header {
    text-align: center;
    margin-bottom: 5rem;
}

.benefits-label {
    display: inline-block;
    background: var(--teal-50);
    color: var(--teal-500);
    padding: 0.5rem 1.25rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.benefits-header h2 {
    font-family: 'IBM Plex Serif', serif;
    font-size: var(--h2-size);
    font-weight: 600;
    line-height: var(--h2-line-height);
    color: var(--text-primary);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 6rem;
}

@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.benefit-item {
    display: flex;
    gap: 1.5rem;
}

.benefit-icon {
    width: 56px;
    height: 56px;
    background: var(--teal-50);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--teal-500);
    transition: all 0.3s ease;
}

.benefit-item:hover .benefit-icon {
    background: var(--teal-500);
    color: var(--white);
    transform: scale(1.1);
}

.benefit-content h3 {
    font-family: 'IBM Plex Serif', serif;
    font-size: var(--h3-lg-size);
    font-weight: 600;
    line-height: var(--h3-line-height);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.benefit-content p {
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ============ CTA SECTION ============ */
.cta {
    padding: 6rem 2rem;
    background: linear-gradient(135deg, var(--teal-700) 0%, var(--teal-500) 100%);
    text-align: center;
}

.cta-inner {
    max-width: 700px;
    margin: 0 auto;
}

.cta h2 {
    font-family: 'IBM Plex Serif', serif;
    font-size: var(--h2-size);
    font-weight: 600;
    line-height: var(--h2-line-height);
    color: var(--white);
    margin-bottom: 1rem;
}

.cta p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.875rem 1.25rem;
    background: var(--white);
    color: var(--teal-700);
    text-decoration: none;
    border-radius: 100px;
    font-weight: 600;
    font-size: 1rem;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Background layer for primary button */
.btn-primary-bg {
    position: absolute;
    inset: 0;
    background: var(--white);
    border-radius: 100px;
    z-index: 0;
}

/* Spotlight effect for primary button */
.btn-primary-spotlight {
    position: absolute;
    inset: 0;
    border-radius: 100px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.btn-primary:hover .btn-primary-spotlight {
    opacity: 1;
    animation: spotlight-move-primary 0.5s ease forwards;
}

@keyframes spotlight-move-primary {
    0% {
        background: radial-gradient(circle at 20% 50%,
                rgba(23, 143, 174, 0.15) 0%,
                rgba(23, 143, 174, 0.05) 35%,
                transparent 60%);
    }

    100% {
        background: radial-gradient(circle at 80% 50%,
                rgba(23, 143, 174, 0.15) 0%,
                rgba(23, 143, 174, 0.05) 35%,
                transparent 60%);
    }
}

/* Content wrapper for primary button */
.btn-primary-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 2;
}

/* Icon container for primary button */
.btn-primary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, rgba(23, 143, 174, 0.15) 0%, rgba(16, 97, 118, 0.1) 100%);
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.btn-primary-icon svg {
    width: 20px;
    height: 20px;
    color: var(--teal-700);
    transition: color 0.3s ease;
}

/* Text for primary button */
.btn-primary-text {
    white-space: nowrap;
}

/* Hover state - swap icon and text positions */
.btn-primary-content {
    transition: flex-direction 0s;
}

.btn-primary:hover .btn-primary-icon {
    order: 2;
    background: linear-gradient(135deg, rgba(23, 143, 174, 0.3) 0%, rgba(16, 97, 118, 0.2) 100%);
    animation: slide-icon-right-primary 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.btn-primary:hover .btn-primary-text {
    order: 1;
    animation: slide-text-left-primary 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes slide-icon-right-primary {
    0% {
        transform: translateX(calc(-100% - 0.75rem));
        opacity: 0;
    }

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

@keyframes slide-text-left-primary {
    0% {
        transform: translateX(calc(32px + 0.75rem));
    }

    100% {
        transform: translateX(0);
    }
}

.btn-primary:hover .btn-primary-icon svg {
    color: var(--teal-500);
}



/* ============ FOOTER ============ */
.footer {
    padding: 4rem 2rem 2rem;
    background: var(--cream-dark);
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 4rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(16, 42, 80, 0.1);
}

@media (max-width: 900px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 500px) {
    .footer-top {
        grid-template-columns: 1fr;
    }
}

.footer-brand .logo img {
    height: 40px;
}

.footer-brand .logo {
    margin-bottom: 0;
}

.footer-brand-badge {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 5px;
    margin-top: 16px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
}

.footer-brand-badge img {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: cover;
}

.footer-brand-badge span {
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
    color: #4e617e;
    white-space: nowrap;
}

.footer-brand p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-top: 16px;
    max-width: 300px;
}

.footer-column h4 {
    font-family: 'IBM Plex Serif', serif;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

.footer-column ul {
    list-style: none;
}

.footer-column li {
    margin-bottom: 0.75rem;
}

.footer-column a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.footer-column a:hover {
    color: var(--teal-500);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-legal {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.footer-social {
    display: flex;
    gap: 1rem;
}

.footer-social a {
    width: 40px;
    height: 40px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal-500);
    transition: all 0.3s ease;
}

.footer-social a:hover {
    background: var(--teal-500);
    color: var(--white);
}

/* ============ SCROLL ANIMATIONS ============ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

/* Mobile menu */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

@media (max-width: 1000px) {
    .nav {
        display: none;
    }

    .header-actions {
        gap: 20px;
    }

    .mobile-menu-btn {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .mobile-menu-btn span {
        width: 24px;
        height: 2px;
        background: var(--text-primary);
        transition: all 0.3s ease;
    }
}

@media (max-width: 560px) {
    .header-actions .btn-demo {
        display: none;
    }
}
/* ============ PRODUCT FEATURE SECTION ============ */
.product-feature {
    padding: 5rem 2rem 4rem;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-feature-label-row {
    margin-bottom: 1.5rem;
}

.product-feature-inner {
    width: 100%;
    border: 1px solid rgba(23, 143, 174, 0.15);
    border-radius: 32px;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 4.5rem);
    position: relative;
    overflow: hidden;
}

.product-feature-inner.reveal.visible {
    opacity: 0.1;
}

.product-feature-placeholder {
    position: relative;
    opacity: 1;
    font-family: 'IBM Plex Serif', serif;
    font-weight: 600;
    line-height: var(--h2-line-height);
    font-size: var(--h2-size);
    color: var(--text-primary);
    text-align: center;
    margin: 0 0 1.5rem;
}

/* Layer 1 — grocer logos wallpaper, hidden until hover */
.product-feature-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/content/grocer-logos.png') center center / cover no-repeat;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
}

/* Layer 2 — aqua gradient, transitions to translucent on hover */
.product-feature-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 60%, var(--aqua-200) 100%);
    transition: background 0.5s ease;
    z-index: 1;
}

/* On hover: logos appear, gradient becomes translucent */
.product-feature-inner.logos-visible::before {
    opacity: 1;
}

.product-feature-inner.logos-visible::after {
    background: linear-gradient(135deg, rgba(250, 249, 245, 0.82) 0%, rgba(250, 243, 229, 0.82) 60%, rgba(248, 226, 182, 0.82) 100%);
}

/* Content above both layers */
.product-feature-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
}

.product-feature-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
    border-right: 1px solid rgba(16, 42, 80, 0.1);
    padding-right: clamp(2rem, 4vw, 4rem);
}

.product-feature-desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.75;
}

.product-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 2px solid var(--teal-500);
    padding-bottom: 0.2rem;
    transition: color 0.2s ease, gap 0.2s ease;
}

.product-feature-cta:hover {
    color: var(--teal-700);
    gap: 0.75rem;
}

.product-feature-partners {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.product-feature-partners-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.product-feature-awg {
    height: 32px;
    width: auto;
    object-fit: contain;
    object-position: left center;
    opacity: 0.75;
}

.product-feature-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.product-feature-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(34, 139, 34, 0.08);
    color: #1a7a1a;
    border: 1px solid rgba(34, 139, 34, 0.2);
    padding: 0.4rem 1rem;
    border-radius: 100px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    width: fit-content;
}

.product-feature-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22a522;
    animation: badge-pulse 2s ease-in-out infinite;
}

.product-feature-capabilities {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.product-feature-capabilities li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 500;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.product-feature-capabilities li.visible {
    opacity: 1;
    transform: translateX(0);
}

.product-feature-capabilities li:nth-child(1) { transition-delay: 0.05s; }
.product-feature-capabilities li:nth-child(2) { transition-delay: 0.15s; }
.product-feature-capabilities li:nth-child(3) { transition-delay: 0.25s; }
.product-feature-capabilities li:nth-child(4) { transition-delay: 0.35s; }
.product-feature-capabilities li:nth-child(5) { transition-delay: 0.45s; }

.product-feature-capabilities li svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    stroke: var(--teal-500);
}

@media (max-width: 900px) {
    .product-feature-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .product-feature-left {
        border-right: none;
        border-bottom: 1px solid rgba(16, 42, 80, 0.1);
        padding-right: 0;
        padding-bottom: 2rem;
        align-items: center;
        text-align: center;
    }
    .product-feature-partners { align-items: center; }
    .product-feature-awg { object-position: center; }
    .product-feature-stats { justify-content: center; }
}

@media (max-width: 480px) {
    .product-feature-capabilities li { font-size: 0.9rem; }
}