/* ===================================
   CLARO AI 2026 - PREMIUM DESIGN
   Designer: 20+ years experience
   Trends: Glassmorphism, 3D, Kinetic
   =================================== */

:root {
    /* 2026 Color Palette */
    --primary: #ff4757;
    --primary-dark: #ee3a44;
    --accent: #a78bfa;
    --success: #4ade80;

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

    /* Typography */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing (8px system) */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-6: 3rem;
    --space-8: 4rem;

    /* Animations */
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    scroll-behavior: auto;
    overflow-x: hidden;
}

body {
    font-family: var(--font);
    background: #0a0a0a;
    color: #ffffff;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

section {
    background: transparent;
}

.scroll-container {
    width: 100%;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* ===================================
   NAVIGATION (Floating Glass)
   =================================== */

.nav {
    position: fixed;
    top: var(--space-3);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: calc(100% - var(--space-6));
    max-width: 1200px;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    font-size: 1.1rem;
}

.logo-pulse {
    animation: pulse 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.nav-cta {
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    text-decoration: none;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s var(--ease-smooth);
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(255, 71, 87, 0.4);
}

/* ===================================
   HERO SECTION (3D + Gradient Mesh)
   =================================== */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 100px;
}

.gradient-mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 71, 87, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(167, 139, 250, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(74, 222, 128, 0.08) 0%, transparent 50%);
    filter: blur(80px);
    animation: mesh-move 20s ease-in-out infinite;
}

@keyframes mesh-move {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.05); }
}

.hero-content {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.hero-title {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: var(--space-3);
    letter-spacing: -0.02em;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-6);
    line-height: 1.6;
}

.hero-cta {
    display: flex;
    gap: var(--space-3);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    text-decoration: none;
    border-radius: 100px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.4s var(--ease-bounce);
    box-shadow: 0 8px 24px rgba(255, 71, 87, 0.3);
}

.btn-primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 16px 40px rgba(255, 71, 87, 0.5);
}

.btn-icon {
    font-size: 1.3rem;
}

/* Phone Mockup with External Annotations */
.hero-visual {
    position: relative;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
}

/* Scan Layout Container */
.scan-layout {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 240px auto 240px;
    align-items: center;
    gap: 3rem;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    justify-items: center;
}

.scan-layout.active {
    opacity: 1;
    pointer-events: auto;
}

/* Phone appears immediately, stats animate in after */
.scan-layout .phone-mockup-simple {
    animation: phone-appear 0.8s ease-out forwards;
}

@keyframes phone-appear {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.scan-layout .stats-column {
    opacity: 0;
}

.scan-layout.active .stats-column {
    animation: stats-column-appear 0.6s ease-out 0.5s forwards;
}

@keyframes stats-column-appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Phone Mockup */
.phone-mockup-simple {
    width: 300px;
    height: 600px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 40px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    position: relative;
    padding: 12px;
    z-index: 2;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0f0f0f 0%, #1a1a1a 100%);
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Scan Image Container */
.scan-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: scan-content-appear 0.6s ease-out 0.3s forwards;
}

@keyframes scan-content-appear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.scan-image {
    width: 240px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scan-pulse 3s ease-in-out infinite 1.2s;
    background: transparent;
}

.scan-image.body-scan {
    background: transparent;
}

.scan-image.food-scan {
    background: transparent;
}

/* Hamburger Visualization */
.food-hamburger {
    position: relative;
    width: 180px;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.burger-layer {
    width: 100%;
    height: 35px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.burger-layer.bun-top {
    height: 40px;
    background: linear-gradient(180deg, #d4a574, #b8885c);
    border-radius: 90px 90px 8px 8px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.burger-layer.bun-bottom {
    height: 35px;
    background: linear-gradient(180deg, #b8885c, #a67850);
    border-radius: 8px 8px 12px 12px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}

.burger-layer.lettuce {
    height: 28px;
    background: linear-gradient(135deg, #7cb342, #558b2f);
    border-radius: 6px;
    clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
}

.burger-layer.tomato {
    height: 20px;
    background: linear-gradient(135deg, #e57373, #ef5350);
    border-radius: 4px;
    opacity: 0.9;
}

.burger-layer.cheese {
    height: 22px;
    background: linear-gradient(135deg, #ffd54f, #ffb300);
    border-radius: 4px;
    clip-path: polygon(0% 0%, 100% 0%, 98% 100%, 2% 100%);
}

.burger-layer.patty {
    height: 38px;
    background: linear-gradient(135deg, #6d4c41, #4e342e);
    border-radius: 6px;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(139, 69, 19, 0.3);
}

/* Body Silhouette Visualization */
.body-silhouette-svg {
    position: relative;
    width: 110px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-20px);
    background: transparent;
}

.body-outline {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
}

.body-part {
    position: absolute;
    background: transparent;
    border: 2.5px solid rgba(167, 139, 250, 1);
    box-shadow:
        0 0 25px rgba(167, 139, 250, 0.9),
        0 0 50px rgba(167, 139, 250, 0.5),
        inset 0 0 15px rgba(167, 139, 250, 0.2);
}

.body-part.head {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.body-part.torso {
    width: 68px;
    height: 100px;
    border-radius: 34px 34px 20px 20px;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
}

.body-part.arm {
    width: 15px;
    height: 95px;
    border-radius: 12px;
    top: 55px;
}

.body-part.arm.left {
    left: 2px;
    transform: rotate(18deg);
    transform-origin: top center;
}

.body-part.arm.right {
    right: 2px;
    transform: rotate(-18deg);
    transform-origin: top center;
}

.body-part.leg {
    width: 26px;
    height: 135px;
    border-radius: 13px;
    top: 155px;
}

.body-part.leg.left {
    left: 50%;
    transform: translateX(-29px);
}

.body-part.leg.right {
    left: 50%;
    transform: translateX(3px);
}

@keyframes scan-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.98;
    }
}

/* Burger layer animations */
.burger-layer {
    animation: layer-float 3s ease-in-out infinite;
}

.burger-layer.bun-top {
    animation-delay: 0s;
}

.burger-layer.lettuce {
    animation-delay: 0.2s;
}

.burger-layer.tomato {
    animation-delay: 0.4s;
}

.burger-layer.cheese {
    animation-delay: 0.6s;
}

.burger-layer.patty {
    animation-delay: 0.8s;
}

.burger-layer.bun-bottom {
    animation-delay: 1s;
}

@keyframes layer-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

/* Body part animations */
.body-part {
    animation: body-scan 4s ease-in-out infinite;
}

.body-part.head {
    animation-delay: 0s;
}

.body-part.torso {
    animation-delay: 0.2s;
}

.body-part.arm {
    animation-delay: 0.4s;
}

.body-part.leg {
    animation-delay: 0.6s;
}

@keyframes body-scan {
    0%, 100% {
        border-color: rgba(167, 139, 250, 0.8);
        box-shadow:
            0 0 15px rgba(167, 139, 250, 0.6),
            inset 0 0 15px rgba(167, 139, 250, 0.3);
    }
    50% {
        border-color: rgba(167, 139, 250, 1);
        box-shadow:
            0 0 30px rgba(167, 139, 250, 1),
            0 0 50px rgba(167, 139, 250, 0.6),
            inset 0 0 25px rgba(167, 139, 250, 0.5);
    }
}


/* Stats Columns */
.stats-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    align-content: stretch;
    width: 240px;
}

.left-stats {
    align-items: flex-end;
    text-align: right;
}

.right-stats {
    align-items: flex-start;
    text-align: left;
}

/* Stat Items */
.stat-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    transform: translateX(-20px);
    animation: stat-fade-in 0.6s ease-out forwards;
    min-height: 80px;
    justify-content: center;
    padding: 1rem 0;
}

.right-stats .stat-item {
    transform: translateX(20px);
}

.stat-item[data-delay="0"] {
    animation-delay: 0.8s;
}

.stat-item[data-delay="0.1"] {
    animation-delay: 1s;
}

.stat-item[data-delay="0.2"] {
    animation-delay: 1.2s;
}

@keyframes stat-fade-in {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 900;
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

/* Stat Connectors - Hidden */
.stat-connector {
    display: none;
}


/* Screen Indicators - Inside Phone Screen */
.screen-indicators {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    padding: 0.4rem 1rem;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.2);
}

.indicator.active {
    background: var(--primary);
    width: 24px;
    border-radius: 4px;
    box-shadow: 0 0 12px var(--primary);
}


/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.mouse {
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    position: relative;
}

.mouse::before {
    content: '';
    width: 4px;
    height: 8px;
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    animation: scroll-down 2s ease-in-out infinite;
}

@keyframes scroll-down {
    0%, 100% { opacity: 0; transform: translateX(-50%) translateY(0); }
    50% { opacity: 1; transform: translateX(-50%) translateY(8px); }
}

/* ===================================
   BENTO GRID (Apple-Style)
   =================================== */

.apps-bento {
    padding: var(--space-8) 0;
    position: relative;
}

.section-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    text-align: center;
    margin-bottom: var(--space-8);
    letter-spacing: -0.02em;
}

/* Apps Row */
.apps-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    max-width: 1200px;
    margin: 0 auto var(--space-4);
}

.app-card-premium {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: var(--space-6);
    position: relative;
    transition: all 0.4s var(--ease-smooth);
    display: flex;
    flex-direction: column;
}

.app-card-premium:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(255, 71, 87, 0.2);
}

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    max-width: 1200px;
    margin: 0 auto;
}

.stat-card-mini {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: var(--space-6);
    text-align: center;
    transition: all 0.4s var(--ease-smooth);
}

.stat-card-mini:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
}

.bento-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: var(--space-4);
    position: relative;
    overflow: visible;
    transition: all 0.4s var(--ease-smooth);
}

.bento-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(255, 71, 87, 0.2);
}

.bento-large {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 320px;
    max-height: 400px;
}

.bento-medium {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 320px;
    max-height: 400px;
}

.bento-small {
    grid-column: span 2;
    grid-row: span 1;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bento-badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    padding: var(--space-1) var(--space-3);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bento-badge.live {
    background: linear-gradient(135deg, var(--success), #22c55e);
    color: white;
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.4);
}

.bento-badge.soon {
    background: linear-gradient(135deg, var(--accent), #8b5cf6);
    color: white;
}

.bento-icon {
    font-size: 3rem;
    margin-bottom: var(--space-2);
}

.bento-card h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: var(--space-1);
}

.bento-subtitle {
    color: var(--primary);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.bento-features {
    list-style: none;
    margin: var(--space-2) 0;
    flex: 1;
}

.bento-features li {
    padding: var(--space-1) 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.bento-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    text-decoration: none;
    border-radius: 100px;
    font-weight: 700;
    transition: all 0.3s var(--ease-smooth);
    margin-top: auto;
    border: none;
}

.bento-cta:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 24px rgba(255, 71, 87, 0.4);
}

.bento-cta.disabled {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

.bento-cta.disabled:hover {
    transform: none;
}

.bento-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bento-visual {
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bento-visual .animated-phone {
    display: none;
}

/* Feature Stats in Small Cards */
.feature-stat {
    text-align: center;
}

.stat-number {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-1);
}

.stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    font-weight: 500;
}

/* ===================================
   LIVE DEMO SECTION
   =================================== */

.live-demo {
    padding: var(--space-8) 0;
}

.demo-card {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.demo-subtitle {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-6);
    font-size: 1.1rem;
}

.demo-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--space-4);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

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

.step-number {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin: 0 auto var(--space-3);
}

.demo-visual {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.food-photo-sample {
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

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

.ai-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto var(--space-2);
    animation: subtle-pulse 2s ease-in-out infinite;
}

@keyframes subtle-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px 10px rgba(255, 71, 87, 0);
    }
}

.sparkle {
    animation: pulse-sparkle 1.5s ease-in-out infinite;
}

.sparkle.s1 {
    animation-delay: 0s;
}

.sparkle.s2 {
    animation-delay: 0.5s;
}

.sparkle.s3 {
    animation-delay: 1s;
}

@keyframes pulse-sparkle {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.ai-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

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

.result-big {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.result-unit {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin: var(--space-1) 0 var(--space-2);
}

.result-macros-compact {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

.demo-step h3 {
    font-size: 1.2rem;
    margin-bottom: var(--space-1);
}

.demo-step p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.flow-arrow {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.3);
}

.upload-zone {
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: var(--space-6);
    cursor: pointer;
    transition: all 0.3s;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-zone:hover {
    border-color: var(--primary);
    background: rgba(255, 71, 87, 0.05);
}

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

.upload-icon {
    font-size: 4rem;
    margin-bottom: var(--space-2);
}

.upload-content h3 {
    font-size: 1.3rem;
    margin-bottom: var(--space-1);
}

.upload-content p {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-3);
}

.btn-upload {
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    border-radius: 100px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 71, 87, 0.4);
}

.demo-arrow {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.3);
}

.demo-result {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: var(--space-6);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-icon {
    font-size: 3rem;
    margin-bottom: var(--space-2);
}

.result-placeholder {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.result-content {
    width: 100%;
}

.result-food-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.result-macros {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.macro-item {
    background: rgba(255, 255, 255, 0.05);
    padding: var(--space-3);
    border-radius: 16px;
}

.macro-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-1);
}

.macro-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
}

.demo-cta-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

/* ===================================
   BODY SCAN DEMO SECTION
   =================================== */

.body-scan-demo {
    padding: var(--space-8) 0;
}

.body-demo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    max-width: 900px;
    margin: 0 auto;
}

.body-demo-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: var(--space-6);
    text-align: center;
}

.body-scan-visual {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.scan-outline {
    width: 100px;
    height: 160px;
    border: 2px solid rgba(255, 71, 87, 0.5);
    border-radius: 50px;
    position: relative;
    background: rgba(255, 71, 87, 0.05);
}

.scan-points {
    position: absolute;
    inset: 0;
}

.point {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--primary);
    animation: point-pulse 2s ease-in-out infinite;
}

.point.p1 {
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0s;
}

.point.p2 {
    top: 50%;
    left: 20%;
    animation-delay: 0.7s;
}

.point.p3 {
    top: 50%;
    right: 20%;
    animation-delay: 1.4s;
}

@keyframes point-pulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

.metrics-display {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.metric-item {
    background: rgba(255, 255, 255, 0.05);
    padding: var(--space-3);
    border-radius: 16px;
    text-align: center;
}

.metric-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-1);
}

.metric-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.body-demo-card h3 {
    font-size: 1.3rem;
    margin-bottom: var(--space-1);
}

.body-demo-card p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* ===================================
   PROGRESS GALLERY SECTION
   =================================== */

.progress-gallery {
    padding: var(--space-8) 0;
}

.section-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-6);
    font-size: 1.1rem;
}

.gallery-slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-4);
    max-width: 1200px;
    margin: 0 auto;
}

.progress-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: var(--space-6);
    transition: all 0.4s;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.progress-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(255, 71, 87, 0.2);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    gap: var(--space-2);
}

.progress-duration {
    background: rgba(255, 255, 255, 0.1);
    padding: var(--space-2) var(--space-3);
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.progress-metric {
    color: var(--success);
    font-weight: 700;
    font-size: 1.2rem;
    white-space: nowrap;
}

.progress-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--space-6) 0;
    flex: 1;
}

.progress-body-outline {
    width: 80px;
    height: 120px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 40px;
    position: relative;
}

.progress-body-outline.before {
    background: rgba(255, 71, 87, 0.1);
}

.progress-body-outline.after {
    background: rgba(74, 222, 128, 0.1);
}

.arrow-transform {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.5);
}

.progress-chart {
    height: 120px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    margin: var(--space-6) 0;
    position: relative;
    overflow: hidden;
    flex: 1;
}

.chart-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: linear-gradient(to top, var(--success), transparent);
    clip-path: polygon(0 100%, 20% 80%, 40% 60%, 60% 40%, 80% 20%, 100% 10%, 100% 100%);
}

.streak-visual {
    text-align: center;
    margin: var(--space-6) 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.streak-count {
    font-size: 4rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.streak-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

.progress-quote {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
    margin-top: auto;
    padding-top: var(--space-4);
}

/* ===================================
   PRICING MATRIX SECTION
   =================================== */

.pricing-matrix {
    padding: var(--space-8) 0;
}

.pricing-table {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    overflow: hidden;
}

.pricing-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-6);
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-column {
    font-weight: 700;
    font-size: 1.1rem;
    padding-left: var(--space-2);
}

.plan-column {
    text-align: center;
    font-weight: 700;
    position: relative;
    padding-top: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.plan-column.popular {
    color: var(--primary);
}

.popular-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    align-items: center;
}

.pricing-row:last-child {
    border-bottom: none;
}

.feature-name {
    color: rgba(255, 255, 255, 0.9);
    padding-left: var(--space-2);
}

.feature-value {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    justify-self: center;
}

.pricing-footer {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.03);
    align-items: center;
}

.price-column {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: var(--space-2);
}

.price-column.empty {
    visibility: hidden;
}

.price-free {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

.btn-plan {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.btn-plan-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.btn-plan:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 71, 87, 0.4);
}

/* ===================================
   FEATURES SECTION (Glass Cards)
   =================================== */

.features-premium {
    padding: var(--space-8) 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-4);
    max-width: 1200px;
    margin: 0 auto;
}

.feature-glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: var(--space-6);
    transition: all 0.4s var(--ease-smooth);
    position: relative;
    overflow: hidden;
    opacity: 1;
}

.feature-glass:nth-child(1) {
    animation: feature-fade-in 0.6s ease-out 0.1s both;
}

.feature-glass:nth-child(2) {
    animation: feature-fade-in 0.6s ease-out 0.2s both;
}

.feature-glass:nth-child(3) {
    animation: feature-fade-in 0.6s ease-out 0.3s both;
}

@keyframes feature-fade-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feature-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.feature-glass:hover {
    transform: translateY(-12px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 24px 48px rgba(255, 71, 87, 0.2);
}

.feature-lottie {
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-3);
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    transition: all 0.4s var(--ease-bounce);
}

.feature-glass:hover .feature-lottie {
    transform: scale(1.1) rotate(5deg);
}

.feature-glass h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.feature-glass p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

/* ===================================
   SOCIAL PROOF (Testimonial)
   =================================== */

.social-proof {
    padding: var(--space-8) 0;
}

.proof-card {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 32px;
    padding: var(--space-6);
}

.proof-quote {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: var(--space-4);
    color: rgba(255, 255, 255, 0.9);
}

.proof-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.author-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
}

.author-name {
    font-weight: 600;
}

.author-role {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* ===================================
   FINAL CTA (Magnetic Button)
   =================================== */

.cta-final {
    padding: var(--space-8) 0;
}

.cta-card {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: var(--space-8) var(--space-4);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px;
}

.cta-card h2 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: var(--space-2);
}

.cta-card p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-6);
    font-size: 1.1rem;
}

.btn-magnetic {
    display: inline-block;
    padding: var(--space-4) var(--space-8);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    text-decoration: none;
    border-radius: 100px;
    font-weight: 700;
    font-size: 1.2rem;
    transition: all 0.3s var(--ease-bounce);
    box-shadow: 0 12px 32px rgba(255, 71, 87, 0.4);
}

.btn-magnetic:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 20px 48px rgba(255, 71, 87, 0.6);
}

/* ===================================
   FOOTER (Minimal Dark)
   =================================== */

.footer-minimal {
    padding: var(--space-8) 0 var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    margin-top: var(--space-1);
}

.footer-links {
    display: flex;
    gap: var(--space-4);
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s;
}

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

.footer-bottom {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 968px) {
    /* Hero Section */
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-visual {
        height: auto;
        min-height: 500px;
        padding: 2rem 1rem;
    }

    /* Phone Mockup - Centered, Stats Below */
    .scan-layout {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }

    .phone-mockup-simple {
        width: 260px;
        height: 520px;
        order: 1;
    }

    /* Stats in Grid Below Phone */
    .left-stats,
    .right-stats {
        order: 2;
        width: 100%;
        max-width: 400px;
    }

    .left-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        align-items: stretch;
    }

    .right-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        align-items: stretch;
    }

    .stats-column {
        width: 100%;
    }

    .stat-item {
        min-height: auto;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
    }

    .stat-connector {
        display: none;
    }

    .stat-value {
        font-size: 1.4rem;
    }

    .stat-label {
        font-size: 0.65rem;
    }

    /* Phone Content */
    .scan-image {
        width: 180px;
        height: 260px;
    }

    .food-hamburger {
        width: 140px;
        height: 180px;
        gap: 2px;
    }

    .burger-layer {
        height: 24px;
    }

    .burger-layer.bun-top {
        height: 28px;
    }

    .burger-layer.patty {
        height: 26px;
    }

    .body-silhouette-svg {
        width: 90px;
        height: 240px;
        transform: translateY(-10px);
    }

    .body-part.head {
        width: 34px;
        height: 34px;
    }

    .body-part.torso {
        width: 52px;
        height: 75px;
    }

    .body-part.arm {
        width: 13px;
        height: 70px;
    }

    .body-part.arm.left {
        left: 2px;
        transform: rotate(18deg);
    }

    .body-part.arm.right {
        right: 2px;
        transform: rotate(-18deg);
    }

    .body-part.leg {
        width: 20px;
        height: 105px;
    }

    /* Navigation */
    .nav {
        width: calc(100% - 2rem);
        top: 1rem;
    }

    .nav-content {
        padding: 0.75rem 1.5rem;
    }

    .logo {
        font-size: 1rem;
    }

    .nav-cta {
        padding: 0.6rem 1.25rem;
        font-size: 0.9rem;
    }

    /* Buttons - FIX #1: Redesign huge download button */
    .hero-cta {
        justify-content: center;
        width: 100%;
    }

    .btn-primary {
        width: auto;
        max-width: none;
        padding: 1rem 2rem;
        font-size: 0.95rem;
        justify-content: center;
    }

    .btn-icon {
        font-size: 1.1rem;
    }

    /* Section Titles */
    .section-title {
        font-size: 2rem;
    }

    .section-subtitle,
    .demo-subtitle {
        font-size: 0.95rem;
    }

    /* Apps Section */
    .apps-row,
    .stats-row {
        grid-template-columns: 1fr;
    }

    .app-card-premium {
        min-height: auto;
    }

    /* Features */
    .features-grid,
    .gallery-slider {
        grid-template-columns: 1fr;
    }

    /* Demo Flow - FIX #2: Vertical stack for mobile */
    .demo-flow {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }

    .flow-arrow {
        transform: rotate(90deg);
        font-size: 2.5rem;
        color: var(--primary);
        margin: 0;
    }

    .demo-step {
        width: 100%;
        max-width: 320px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 2rem 1.5rem;
    }

    .demo-visual {
        margin-bottom: 1.5rem;
    }

    .step-number {
        margin-bottom: 1rem;
    }

    /* Body Demo - FIX #3: Strengthen cards */
    .body-demo-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .body-demo-card {
        padding: 2.5rem 2rem;
        background: rgba(255, 255, 255, 0.08);
        border: 2px solid rgba(255, 255, 255, 0.15);
    }

    .body-scan-visual {
        height: 180px;
    }

    .scan-outline {
        width: 100px;
        height: 140px;
        border: 3px solid rgba(167, 139, 250, 0.8);
    }

    .scan-points .point {
        width: 10px;
        height: 10px;
    }

    .metrics-display {
        padding: 1.5rem;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 12px;
    }

    .metric-item {
        padding: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
    }

    .metric-label {
        font-size: 0.75rem;
        font-weight: 600;
    }

    .metric-value {
        font-size: 1.3rem;
        font-weight: 800;
    }

    /* Pricing - FIX #4: Simple vertical cards */
    .pricing-matrix {
        padding: 3rem 0;
    }

    .pricing-table {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        max-width: 400px;
        margin: 0 auto;
        background: transparent;
        border-radius: 0;
        padding: 0;
    }

    /* Hide table structure, show as cards */
    .pricing-header {
        display: none;
    }

    .pricing-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.75rem;
        padding: 0;
    }

    .feature-name {
        grid-column: 1 / -1;
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 0.5rem;
    }

    .feature-value {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 1rem 0.5rem;
        text-align: center;
        font-size: 0.85rem;
    }

    .pricing-footer {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.75rem;
        padding-top: 1.5rem;
    }

    .price-column.empty {
        display: none;
    }

    .btn-plan {
        padding: 0.75rem 0.5rem;
        font-size: 0.75rem;
    }

    .popular-badge {
        font-size: 0.5rem;
        padding: 0.2rem 0.5rem;
    }

    /* Footer */
    .footer-grid {
        flex-direction: column;
        gap: var(--space-3);
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        gap: 1rem;
    }

    /* Container Padding */
    .container {
        padding: 0 1.5rem;
    }

    /* Sections Padding */
    section {
        padding: 3rem 0;
    }

    /* FIX #3: Body composition card strength */
    .body-demo-card h3 {
        font-size: 1.4rem;
        margin-top: 1rem;
        font-weight: 800;
    }

    .body-demo-card p {
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.8);
        font-weight: 500;
    }

    /* FIX #2: Demo flow - smaller screens */
    .demo-step {
        max-width: 260px;
        padding: 1.5rem 1rem;
    }

    .demo-step h3 {
        font-size: 1.1rem;
    }

    .demo-step p {
        font-size: 0.85rem;
    }

    .demo-visual {
        width: 120px;
        height: 120px;
    }

    .food-photo-sample,
    .ai-processing,
    .result-simple {
        width: 100%;
        height: 100%;
    }

    .photo-placeholder {
        font-size: 3rem;
    }

    .ai-icon {
        font-size: 3rem;
    }

    .result-big {
        font-size: 2.5rem;
    }

    /* Body Scan Demo */
    .body-demo-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .body-demo-card {
        padding: 2rem;
    }

    .scan-outline {
        width: 80px;
        height: 120px;
    }

    .metrics-display {
        gap: 1rem;
    }

    .metric-item {
        flex-direction: column;
        gap: 0.25rem;
    }

    /* Progress Gallery */
    .gallery-slider {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .progress-card {
        max-width: 350px;
        margin: 0 auto;
    }

    /* FIX #2: Demo flow for small phones */
    .demo-step {
        max-width: 280px;
        padding: 1.5rem 1rem;
    }

    .demo-visual {
        width: 100px;
        height: 100px;
        margin-bottom: 1rem;
    }

    .step-number {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }

    .flow-arrow {
        font-size: 2rem;
    }

    /* FIX #4: Pricing even simpler */
    .pricing-row {
        gap: 0.5rem;
    }

    .feature-value {
        padding: 0.75rem 0.5rem;
        font-size: 0.8rem;
    }

    .btn-plan {
        padding: 0.6rem 0.4rem;
        font-size: 0.7rem;
    }

    /* Social Proof */
    .proof-card {
        padding: 2rem 1.5rem;
    }

    .proof-quote {
        font-size: 1rem;
    }

    .author-avatar {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}

/* ===================================
   UTILITY CLASSES
   =================================== */

/* Small Mobile (phones) */
@media (max-width: 480px) {
    /* Hero */
    .hero-title {
        font-size: 2rem;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 0.9rem;
        padding: 0 1rem;
    }

    .phone-mockup-simple {
        width: 220px;
        height: 440px;
    }

    /* FIX #1: Download button smaller on small phones */
    .btn-primary {
        padding: 0.85rem 1.5rem;
        font-size: 0.85rem;
    }

    .scan-image {
        width: 160px;
        height: 240px;
    }

    .food-hamburger {
        width: 120px;
        height: 160px;
    }

    .burger-layer {
        height: 20px;
    }

    .burger-layer.bun-top {
        height: 24px;
    }

    .burger-layer.patty {
        height: 22px;
    }

    .body-silhouette-svg {
        width: 80px;
        height: 220px;
    }

    .left-stats,
    .right-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-value {
        font-size: 1.2rem;
    }

    .stat-item {
        padding: 0.75rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .nav-content {
        padding: 0.6rem 1.25rem;
    }

    .container {
        padding: 0 1rem;
    }
}

/* ===================================
   UTILITY CLASSES
   =================================== */

.text-gradient {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Show content by default (AOS will animate it in) */
[data-aos] {
    opacity: 1;
    pointer-events: auto;
}

/* ===================================
   BEVEL-INSPIRED ENHANCEMENTS (2026)
   =================================== */

/* Scroll Progress Bar */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    width: 0%;
    z-index: 9999;
    transition: width 0.1s ease-out;
}

/* Contextual Insights Section */
.contextual-insights {
    padding: 8rem 0;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a0a0f 100%);
    position: relative;
    overflow: hidden;
}

.insights-grid {
    display: grid;
    gap: 2rem;
    margin-top: 4rem;
}

.insight-card {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.insight-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(8px);
}

.insight-icon {
    font-size: 3rem;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}

.insight-icon.warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.05));
}

.insight-icon.success {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(74, 222, 128, 0.05));
}

.insight-icon.caution {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.2), rgba(255, 71, 87, 0.05));
}

.insight-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0.75rem;
}

.insight-primary {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0.5rem 0;
    line-height: 1.6;
}

.insight-suggestion {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--accent);
}

/* Metric Connections */
.connection-showcase {
    margin-top: 6rem;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.connection-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.connection-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.connection-card {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.connection-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent);
    transform: scale(1.02);
}

.metric-pair {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.metric-icon {
    font-size: 2.5rem;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.metric-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

.connection-arrow {
    font-size: 2rem;
    color: var(--accent);
    animation: pulseArrow 2s ease-in-out infinite;
}

@keyframes pulseArrow {
    0%, 100% { opacity: 0.5; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(8px); }
}

.connection-insight {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    padding: 1rem;
    background: rgba(167, 139, 250, 0.1);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    line-height: 1.6;
}

/* Soft Green Success States (Bevel-inspired) */
.success-badge {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #fff;
}

.accuracy-stat {
    color: #4ade80;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .insights-grid {
        gap: 1.5rem;
    }

    .insight-card {
        flex-direction: column;
        text-align: center;
    }

    .insight-card:hover {
        transform: translateY(-4px);
    }

    .insight-icon {
        margin: 0 auto;
    }

    .connection-cards {
        grid-template-columns: 1fr;
    }

    .metric-pair {
        flex-direction: column;
        gap: 1rem;
    }

    .connection-arrow {
        transform: rotate(90deg);
    }
}

/* ============================================
   MEDLY SECTION
   ============================================ */

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

.app-card-live {
    border-color: rgba(74, 222, 128, 0.3) !important;
    box-shadow: 0 0 30px rgba(74, 222, 128, 0.08);
}

.app-card-live:hover {
    border-color: rgba(74, 222, 128, 0.6) !important;
    box-shadow: 0 20px 60px rgba(74, 222, 128, 0.2) !important;
}

.bento-cta-live {
    background: linear-gradient(135deg, #4ade80, #22c55e) !important;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

.bento-cta-live:hover {
    box-shadow: 0 8px 24px rgba(74, 222, 128, 0.5) !important;
    transform: translateX(4px);
}

/* Medly Feature Section */
.medly-section {
    padding: var(--space-20) 0;
    position: relative;
    overflow: hidden;
}

.medly-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.medly-header {
    text-align: center;
    margin-bottom: var(--space-12);
}

.medly-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.4);
    border-radius: 100px;
    color: #4ade80;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;
}

.medly-live-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.4); }
}

.medly-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

/* Medly Phone Mockup */
.medly-visual {
    display: flex;
    justify-content: center;
}

.medly-phone {
    width: 280px;
    background: #0d0d0d;
    border-radius: 40px;
    padding: 12px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
    position: relative;
}

.medly-screen {
    background: #111;
    border-radius: 30px;
    overflow: hidden;
    aspect-ratio: 9/18;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
}

.medly-app-ui {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

.medly-ui-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.medly-ui-title {
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
}

.medly-ui-streak {
    font-size: 0.75rem;
    color: #ff9500;
    font-weight: 600;
}

.medly-dose-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}

.medly-dose {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
}

.medly-dose.done {
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.medly-dose.pending {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dose-pill-icon {
    font-size: 1.1rem;
}

.dose-info {
    flex: 1;
}

.dose-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.dose-time {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
}

.dose-check {
    color: #4ade80;
    font-weight: 700;
    font-size: 0.9rem;
}

.dose-pending-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.medly-adherence {
    margin-top: auto;
}

.adherence-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.4rem;
}

.adherence-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    border-radius: 3px;
}

.adherence-label {
    font-size: 0.7rem;
    color: #4ade80;
    font-weight: 600;
    text-align: center;
}

/* Medly Features */
.medly-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.medly-feature-item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.medly-feature-icon {
    font-size: 1.75rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.medly-feature-text h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.35rem;
}

.medly-feature-text p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
}

.medly-cta-group {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.medly-download-btn {
    background: linear-gradient(135deg, #4ade80, #22c55e) !important;
}

.medly-download-btn:hover {
    box-shadow: 0 8px 30px rgba(74, 222, 128, 0.4) !important;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s var(--ease-smooth);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.medly-stats {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.medly-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.medly-stat-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: #4ade80;
}

.medly-stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Responsive */
@media (max-width: 1024px) {
    .apps-row-three {
        grid-template-columns: repeat(2, 1fr);
    }

    .apps-row-three .app-card-live {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .apps-row-three {
        grid-template-columns: 1fr;
    }

    .apps-row-three .app-card-live {
        grid-column: span 1;
    }

    .medly-content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .medly-phone {
        width: 220px;
    }

    .medly-stats {
        gap: 1.25rem;
    }
}

/* ============================================
   HERO ECOSYSTEM UPDATES
   ============================================ */

.hero-ecosystem-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1.25rem;
}

.hero-app-pills {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.hero-app-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s var(--ease-smooth);
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    color: inherit;
}

.hero-app-pill.live {
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.35);
    color: #4ade80;
}

.hero-app-pill.live:hover {
    background: rgba(74, 222, 128, 0.22);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 222, 128, 0.2);
}

.hero-app-pill.soon {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.5);
    cursor: default;
}

.pill-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(74, 222, 128, 0.25);
    color: #4ade80;
}

.pill-badge-soon {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .hero-app-pills {
        gap: 0.5rem;
    }

    .hero-cta {
        flex-direction: column;
        align-items: flex-start;
    }

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