:root {
            --smile-purple-start: #667eea;
            --smile-purple-end: #764ba2;
            --feature-pink-start: #f093fb;
            --feature-pink-end: #f5576c;
            --quiz-blue-start: #4facfe;
            --quiz-blue-end: #00f2fe;
            --team-green-start: #43e97b;
            --team-green-end: #38f9d7;
            --photo-pink-start: #fa709a;
            --photo-pink-end: #fee140;
            --specs-teal-start: #a8edea;
            --specs-teal-end: #fed6e3;
            --faq-peach-start: #ffecd2;
            --faq-peach-end: #fcb69f;
        }

        /* Hero scrim for readability */
        .hero-scrim {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                180deg,
                rgba(0,0,0,0.05) 0%,
                rgba(0,0,0,0.15) 40%,
                rgba(0,0,0,0.35) 100%
            );
            pointer-events: none;
        }

        /* Hero Text Overlay */
        .hero-text-overlay {
            position: absolute;
            top: auto;
            bottom: 10%;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            color: white;
            z-index: 10;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 5%;
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.45rem 0.9rem;
            font-size: 0.8rem;
            font-weight: 600;
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 2rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            backdrop-filter: blur(8px);
        }

        .hero-title {
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            font-weight: 800;
            margin-bottom: 0.9rem;
            text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
            letter-spacing: -0.02em;
        }

        .hero-description {
            font-size: clamp(1.05rem, 2vw, 1.5rem);
            font-weight: 450;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
            line-height: 1.4;
            margin-bottom: 1.25rem;
        }

        .hero-cta-row {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 1.25rem;
        }

        /* Swirl texture strength - tune this value (0.0 to 1.0) */
        :root {
            --swirl-strength: 0.85;
        }

        .hero-cta-primary {
            /* background: white; */
            /* color: #1a1a1a; */
            background: #34aeff;
            color: white;
            padding: 0.9rem 1.35rem;
            border-radius: 0.9rem;
            font-size: 1.05rem;
            font-weight: 800;
            text-decoration: none;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
            display: inline-block;
            transition: transform 0.08s ease, opacity 0.08s ease;
            position: relative;
            overflow: hidden;
        }

        .portal-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0.65;
            mix-blend-mode: soft-light;
        }

        .cta-text {
            position: relative;
            z-index: 1;
        }

        /* First CTA (hero) text - mix-blend-mode disabled for now */

        .hero-cta-primary .swirl-texture,
        .preorder-btn .swirl-texture,
        .cta-banner-btn .swirl-texture,
        .quiz-cta-btn .swirl-texture {
            position: absolute;
            inset: -50%;
            width: 200%;
            height: 200%;
            pointer-events: none;
            opacity: var(--swirl-strength);
            mix-blend-mode: soft-light;
            animation: swirl-drift 25s linear infinite;
        }

        @keyframes swirl-drift {
            0% { transform: translate(0, 0) rotate(0deg); }
            100% { transform: translate(-25%, -25%) rotate(360deg); }
        }

        .hero-cta-primary:hover {
            opacity: 0.95;
            /* transform: translateY(-1px); */
        }

        .hero-cta-secondary {
            color: white;
            text-decoration: none;
            font-weight: 700;
            padding: 0.85rem 1.1rem;
            border-radius: 0.9rem;
            border: 1px solid rgba(255, 255, 255, 0.35);
            background: rgba(0, 0, 0, 0.18);
            backdrop-filter: blur(8px);
            transition: opacity 0.08s ease, transform 0.08s ease;
            display: inline-block;
        }

        .hero-cta-secondary:hover {
            opacity: 0.95;
            /* transform: translateY(-1px); */
        }

        .hero-trustline {
            font-size: 0.95rem;
            opacity: 0.95;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
            line-height: 1.4;
        }

        @media (max-width: 768px) {
            .hero-image {
                object-position: center center !important;
            }

            .hero-text-overlay {
                top: auto;
                bottom: 12%;
                transform: translateX(-50%);
                width: 100%;
            }

            .hero-scrim {
                background: linear-gradient(
                    180deg,
                    rgba(0,0,0,0.10) 0%,
                    rgba(0,0,0,0.18) 35%,
                    rgba(0,0,0,0.45) 100%
                );
            }
        }

        /* Section 0: Features Tagline - Overlays 3D model */
        .features-tagline {
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            padding: 2.5rem 3.5rem;
            text-align: center;
            pointer-events: none;
            width: 100%;
            max-width: 1100px;
            background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.6) 35%, rgba(255, 255, 255, 0.2) 60%, transparent 80%);
            border-radius: 2rem;
        }

        .features-tagline-text {
            font-size: 1.35rem;
            line-height: 1.8;
            max-width: 1050px;
            margin: 0 auto;
            display: block;
            color: #1a1a1a;
        }

        .features-tagline .smile-subheading {
            color: #444;
            display: block;
            margin-top: 1rem;
        }

        .feature-word {
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }

        .feature-self-charging { color: #d4a017; }
        .feature-health { color: #e74c3c; }
        .feature-good-looking { font-style: italic; color: #1a1a1a; }

        .feature-icon {
            width: 32px;
            height: 32px;
            display: inline-block;
        }

        /* Animated SVG icons */
        @keyframes shine {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.1); }
        }

        @keyframes heartbeat {
            0%, 100% { transform: scale(1); }
            10%, 30% { transform: scale(1.1); }
            20%, 40% { transform: scale(0.95); }
        }

        @keyframes blink {
            0%, 90%, 100% { transform: scaleY(1); }
            95% { transform: scaleY(0.1); }
        }

        .sun-icon { animation: shine 2s ease-in-out infinite; }
        .heart-icon { animation: heartbeat 1.5s ease-in-out infinite; }
        .eye-icon .eyelid {
            animation: blink 4s ease-in-out infinite;
            transform-origin: center;
        }

        /* Section 1: Product 3D Model */
        .smile-section {
            min-height: 70vh;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0;
            background: linear-gradient(to bottom, #f5f9ff 0%, #daf1ff 50%, #f5f9ff 100%);
            position: relative;
            overflow: hidden;
        }

        .smile-heading {
            font-size: 3.25rem;
            font-weight: 800;
            text-align: center;
            margin-bottom: 0rem;
            color: #1a1a1a;
            letter-spacing: -0.02em;
        }

        .smile-subheading {
            text-align: center;
            margin: 1rem auto 0 auto;
            max-width: 920px;
            color: #444;
            font-size: 1.25rem;
            line-height: 1.6;
        }

        .smile-product {
            width: 100vw;
            height: 35vh;
            min-height: 600px;
            background: transparent;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }

        model-viewer {
            width: 100%;
            height: calc(100% + 40px);
            margin-top: -20px;
            background-color: transparent;
            --poster-color: transparent;
        }

        model-viewer::part(default-progress-bar) {
            background-color: #54bbff;
        }

        /* Features + preorder module */
        .features-cta-section {
            padding: 3rem 2rem 5rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .features-list {
            display: flex;
            justify-content: space-around;
            align-items: center;
            gap: 2rem;
            margin-bottom: 2.5rem;
        }

        .feature-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            font-size: 1.15rem;
            color: #1a1a1a;
            text-align: center;
            flex: 1;
        }

        .feature-checkmark {
            width: 36px;
            height: 36px;
            flex-shrink: 0;
        }

        .feature-checkmark svg {
            width: 100%;
            height: 100%;
            stroke: #2ecc71;
        }

        .preorder-card {
            background: white;
            border-radius: 1.25rem;
            padding: 2rem;
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem;
        }

        .preorder-card h3 {
            font-size: 1.6rem;
            font-weight: 800;
            color: #1a1a1a;
            margin-bottom: 0.5rem;
        }

        .preorder-card p {
            color: #555;
            line-height: 1.55;
            font-size: 1rem;
        }

        .preorder-card-actions {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.5rem;
            flex-shrink: 0;
        }

        .preorder-btn {
            background: #54bbff;
            color: white;
            padding: 0.95rem 1.25rem;
            border-radius: 0.9rem;
            font-size: 1.05rem;
            font-weight: 800;
            text-decoration: none;
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
            transition: opacity 0.1s ease, transform 0.1s ease;
            display: inline-block;
            white-space: nowrap;
            position: relative;
            overflow: hidden;
        }

        /* Swirl texture is added via inline SVG */

        .preorder-btn:hover {
            opacity: 0.92;
            /* transform: translateY(-1px); */
        }

        .preorder-note {
            font-size: 0.9rem;
            color: #666;
            text-align: right;
        }

        /* CTA Banner */
        .cta-banner {
            /* background: #daf1ff; */
            background: linear-gradient(to bottom, #f5f9ff 0%, #daf1ff 25%, #daf1ff 75%, #f5f9ff 100%);
            padding: 6rem 2rem;
            /* margin-top: 3rem; */
            /* margin-bottom: 3rem; */
            text-align: center;
            color: #1a1a1a;
        }

        .cta-banner-title {
            font-size: 2.5rem;
            font-weight: 850;
            margin-bottom: 0.75rem;
            letter-spacing: -0.02em;
            color: #1a1a1a;
        }

        .cta-banner-subtitle {
            max-width: 920px;
            margin: 1rem auto 1rem auto;
            font-size: 1.15rem;
            line-height: 1.6;
            color: #444;
        }

        .cta-banner-btn {
            background: #34aeff;
            color: white;
            padding: 1.15rem 2.6rem;
            border-radius: 0.85rem;
            font-size: 1.35rem;
            font-weight: 850;
            text-decoration: none;
            transition: opacity 0.1s ease, transform 0.1s ease;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
            display: inline-block;
            position: relative;
            overflow: hidden;
        }

        .cta-banner-btn .portal-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0.65;
            mix-blend-mode: soft-light;
        }

        .cta-banner-btn .cta-text {
            position: relative;
            z-index: 1;
        }

        /* Swirl texture is added via inline SVG */

        .cta-banner-btn:hover {
            opacity: 0.92;
            /* transform: translateY(-1px); */
        }

        .cta-banner-fineprint {
            margin-top: 1rem;
            font-size: 0.95rem;
            color: #666;
        }

        /* Section 2: Feature Carousel */
        .feature-section {
            padding: 3rem 2rem;
            display: flex;
            gap: 3rem;
            max-width: 1400px;
            max-height: 90vh;
            margin: 0 auto;
        }

        .feature-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .feature-heading {
            font-size: 2.5rem;
            font-weight: 850;
            margin-bottom: 1rem;
            color: #1a1a1a;
            letter-spacing: -0.02em;
        }

        .feature-description {
            font-size: 1.125rem;
            color: #555;
            line-height: 1.7;
        }

        .feature-right {
            flex: 2;
            overflow: hidden;
            position: relative;
        }

        .feature-carousel {
            display: flex;
            gap: 1.5rem;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding: 1rem 0;
            scrollbar-width: none;
            scroll-behavior: smooth;
        }

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

        .carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 48px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 10;
            transition: background 0.1s ease;
            border: none;
        }

        .carousel-arrow:hover { background: white; }
        .carousel-arrow-left { left: 1rem; }
        .carousel-arrow-right { right: 1rem; }

        .carousel-arrow {
            transition: background 0.1s ease, opacity 0.25s ease;
        }

        /* Carousel dots */
        .carousel-dots {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            padding: 1rem 0;
            position: absolute;
            bottom: -2rem;
            left: 50%;
            transform: translateX(-50%);
        }

        .carousel-dot {
            width: 6px;
            height: 6px;
            border-radius: 3px;
            background: rgba(0, 0, 0, 0.15);
            cursor: pointer;
            transition: all 0.25s ease;
        }

        .carousel-dot:hover {
            background: rgba(0, 0, 0, 0.3);
        }

        .carousel-dot.active {
            width: 20px;
            background: rgba(0, 0, 0, 0.4);
        }

        .carousel-arrow svg {
            width: 24px;
            height: 24px;
            stroke: #1a1a1a;
            stroke-width: 2.5;
        }

        .feature-card {
            min-width: 60%;
            aspect-ratio: 4/5;
            background: linear-gradient(135deg, var(--feature-pink-start), var(--feature-pink-end));
            border-radius: 0.375rem;
            scroll-snap-align: start;
            position: relative;
            display: flex;
            align-items: flex-start;
            padding: 2rem;
            overflow: hidden;
        }

        .feature-card img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: inherit;
        }


        .feature-card-text {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%,  rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
            
            padding: 1rem;
            padding-bottom: 2rem;

            border-radius: 0.75rem;
            color: #1a1a1a;
            width: 100%;
            z-index:1;
        }

        .feature-card-title {
            font-weight: 600;
            font-size: 1.35rem;
            letter-spacing: 0.04em;
            margin-bottom: 0.5rem;
        }

        .feature-card-body {
            display: none; /* Hidden - content shown in modal */
            font-weight: 400;
            font-size: 1.05rem;
            line-height: 1.6;
            color: #1a1a1a;
            opacity: 0.92;
        }

        /* Info button for modal */
        .feature-card-info-btn {
            display: flex;
            position: absolute;
            bottom: 1rem;
            right: 1rem;
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            z-index: 5;
            border: none;
            transition: transform 0.15s ease;
        }

        .feature-card-info-btn:hover {
            transform: scale(1.1);
        }

        .feature-card-info-btn svg {
            width: 24px;
            height: 24px;
            stroke: #1a1a1a;
            stroke-width: 2.5;
        }

        /* Feature modal */
        .feature-modal-overlay {
            display: flex;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.25s ease, visibility 0.25s ease;
        }

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

        .feature-modal {
            background: white;
            border-radius: 1rem;
            padding: 1.5rem;
            max-width: 400px;
            width: 100%;
            max-height: 80vh;
            overflow-y: auto;
            position: relative;
            transform: translateY(20px) scale(0.95);
            transition: transform 0.25s ease;
        }

        .feature-modal-overlay.active .feature-modal {
            transform: translateY(0) scale(1);
        }

        .feature-modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 32px;
            height: 32px;
            background: #f5f5f5;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .feature-modal-close svg {
            width: 18px;
            height: 18px;
            stroke: #666;
            stroke-width: 2.5;
        }

        .feature-modal-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 0.75rem;
            padding-right: 2rem;
        }

        .feature-modal-body {
            font-size: 1rem;
            line-height: 1.6;
            color: #444;
        }

        /* Section 3: Sunlight Quiz */
        .quiz-section {
            padding: 3rem 2rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        .quiz-banner {
            font-size: 3rem;
            font-weight: 900;
            text-align: center;
            margin-bottom: 1rem;
            color: #1a1a1a;
            letter-spacing: -0.02em;
        }

        .quiz-subbanner {
            text-align: center;
            max-width: 950px;
            margin: 0 auto 3rem auto;
            color: #555;
            line-height: 1.7;
            font-size: 1.15rem;
        }

        .quiz-content {
            display: flex;
            gap: 3rem;
            background: white;
            padding: 3rem;
            border-radius: 1.5rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        }

        .quiz-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .quiz-header {
            font-size: 1.35rem;
            font-weight: 700;
            line-height: 1.5;
            color: #1a1a1a;
        }

        .quiz-small {
            color: #666;
            line-height: 1.6;
            font-size: 0.98rem;
            margin-top: -1rem;
        }

        .quiz-slider-container {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .quiz-slider-label {
            font-size: 1rem;
            color: #555;
            font-weight: 650;
        }

        .quiz-slider {
            width: 100%;
            height: 8px;
            border-radius: 4px;
            /* background: linear-gradient(to right, var(--quiz-blue-start), var(--quiz-blue-end)); */
            background: var(--quiz-blue-start);
            outline: none;
            appearance: none;
            -webkit-appearance: none;
        }

        .quiz-slider::-webkit-slider-thumb {
            appearance: none;
            -webkit-appearance: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #54bbff;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .quiz-slider::-moz-range-thumb {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #54bbff;
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .quiz-value {
            font-size: 2rem;
            font-weight: 900;
            color: #54bbff;
            text-align: center;
        }

        .quiz-right {
            flex: 2;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .quiz-title {
            font-size: 1.05rem;
            font-weight: 750;
            color: #1a1a1a;
            text-align: center;
        }

        .quiz-graph-container {
            position: relative;
        }

        .quiz-graph {
            width: 100%;
            height: 400px;
            border: 1px solid #e5e5e5;
            border-radius: 0.5rem;
        }

        .quiz-legend {
            position: absolute;
            bottom: calc(10% + 1rem);
            right: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            background: rgba(255, 255, 255, 0.95);
            padding: 1rem;
            border-radius: 0.5rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            white-space: nowrap;
        }

        .legend-line {
            width: 30px;
            height: 3px;
            border-radius: 2px;
        }

        .legend-eternal .legend-line { background: #54bbff; }
        .legend-apple .legend-line { background: #d0d0d0; }
        .legend-oura .legend-line { background: #b0b0b0; }
        .legend-fitbit .legend-line { background: #909090; }

        .quiz-cta-row {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
        }

        .quiz-cta-btn {
            background: #54bbff;
            color: white;
            padding: 1rem 1.6rem;
            border-radius: 0.9rem;
            font-size: 1.15rem;
            font-weight: 900;
            text-decoration: none;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
            transition: opacity 0.1s ease, transform 0.1s ease;
            position: relative;
            overflow: hidden;
            display: inline-block;
        }

        /* Swirl texture is added via inline SVG */

        .quiz-cta-btn:hover {
            opacity: 0.92;
            /* transform: translateY(-1px); */
        }

        .quiz-fineprint {
            text-align: center;
            margin-top: 0.75rem;
            color: #666;
            font-size: 0.95rem;
            line-height: 1.5;
        }

        /* Section 4: Team Banner */
        .team-section {
            padding: 3rem 2rem;
            overflow: hidden;
            position: relative;
            background: linear-gradient(to bottom, #f5f9ff 0%, #ffffff 50%, #f5f9ff 100%);
        }

        .team-heading {
            font-size: 2rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 0.75rem;
            color: #1a1a1a;
            position: relative;
            z-index: 1;
            letter-spacing: -0.02em;
        }

        .team-subheading {
            text-align: center;
            max-width: 980px;
            margin: 0 auto 1.25rem auto;
            color: #555;
            line-height: 1.7;
            font-size: 1.1rem;
        }

        .team-carousel-container {
            width: 100%;
            position: relative;
            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%);
        }

        .team-carousel {
            display: flex;
            gap: 2rem;
            animation: scroll-team 60s linear infinite;
        }

        .team-logo {
            min-width: 200px;
            height: 100px;
            border-radius: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(255, 255, 255, 0.8);
        }

        .team-logo img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: all 0.3s ease;
        }

        @keyframes scroll-team {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-200px * 5 - 2rem * 5)); }
        }

        /* Section 5: In-Life Photo Showcase */
        .photo-showcase-section { padding: 0; }

        .photo-snippet {
            text-align: center;
            padding: 0.75rem 1.5rem;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: 15;
            white-space: nowrap;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(8px);
            border-radius: 2rem;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }

        .photo-snippet-top {
            top: 1.5rem;
        }

        .photo-snippet-bottom {
            bottom: 1.5rem;
        }

        .photo-snippet h3 {
            font-size: 1rem;
            font-weight: 600;
            color: #1a1a1a;
            display: inline;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            letter-spacing: 0.02em;
        }

        .photo-snippet p {
            font-size: 0.9rem;
            color: #666;
            display: inline;
            margin-left: 0.5rem;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .photo-snippet p::before {
            content: "— ";
            opacity: 0.5;
        }

        .photo-subheader {
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: #666;
            text-align: center;
            padding: 1rem 2rem;
        }

        .photo-row {
            display: flex;
            min-height: 90vh;
            position: relative;
        }

        .photo-floating-container {
            display: flex;
            align-items: center;
            justify-content: center;
            /* padding: 4rem; */
            position: relative;
        }

        .photo-row-1 .photo-floating-container {
            flex: 0 0 40%;
            padding-left: 8rem;
            padding-right: 2rem;
        }

        .photo-row-2 .photo-floating-container {
            flex: 0 0 40%;
            padding-left: 2rem;
            padding-right: 8rem;
        }

        .photo-floating {
            width: 100%;
            aspect-ratio: 3/4;
            background: #1a1a1a;
            border-radius: 0.5%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            transition: opacity 0.5s ease;
            opacity: 1;
            overflow: hidden;
        }

        .photo-floating img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .photo-floating.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .photo-floating-wrapper {
            position: relative;
            width: 100%;
            aspect-ratio: 3/4;
        }

        .photo-slider {
            position: absolute;
            right: 1.5rem;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            z-index: 10;
            padding: 1rem;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            border-radius: 2rem;
        }

        .photo-slider-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.8);
        }

        .photo-slider-dot:hover {
            background: rgba(255, 255, 255, 0.9);
            transform: scale(1.1);
        }

        .photo-slider-dot.active {
            background: white;
            transform: scale(1.4);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

        .photo-fullbleed {
            position: relative;
            max-height: 90vh;
            overflow: hidden;
            margin: 0;
            padding: 0;
            /* background: #1a1a1a; */
        }

        .photo-fullbleed img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .photo-row-1 .photo-fullbleed { flex: 0 0 60%; }
        .photo-row-2 .photo-fullbleed { flex: 0 0 60%; }

        /* Section 6: Tech Specs */
        .specs-section {
            padding: 3rem 2rem;
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            gap: 3rem;
        }

        .specs-left {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .specs-image {
            width: 100%;
            aspect-ratio: 3/4;
            background: linear-gradient(135deg, var(--specs-teal-start), var(--specs-teal-end));
            border-radius: 1rem;
        }

        .specs-right { flex: 2; }

        .specs-heading {
            font-size: 2.25rem;
            font-weight: 900;
            margin-bottom: 2.5rem;
            color: #1a1a1a;
            letter-spacing: -0.02em;
        }

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

        .spec-item {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .spec-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.25rem;
            font-weight: 900;
            color: #1a1a1a;
        }

        .spec-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }

        .spec-icon svg {
            width: 100%;
            height: 100%;
        }

        .spec-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .spec-list li {
            font-size: 0.9rem;
            color: #555;
            line-height: 1.55;
        }

        /* Section 7: FAQ Section */
        .faq-section {
            padding: 6rem 2rem 4rem 2rem;
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            gap: 3rem;
            align-items: flex-start;
        }

        .faq-left { flex: 3; }

        .faq-heading {
            font-size: 2.5rem;
            font-weight: 900;
            margin-bottom: 0.75rem;
            color: #1a1a1a;
            letter-spacing: -0.02em;
        }

        .faq-subheading {
            color: #555;
            line-height: 1.7;
            margin-bottom: 2rem;
            max-width: 950px;
            font-size: 1.1rem;
        }

        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .faq-item {
            background: white;
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem;
            cursor: pointer;
            font-weight: 900;
            color: #1a1a1a;
            transition: background 0.2s linear;
        }

        /* .faq-question:hover { background: #f9f9f9; } */

        .faq-eye {
            width: 24px;
            height: 24px;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            flex-shrink: 0;
            position: relative;
        }

        .faq-eye svg {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .faq-eye svg path,
        .faq-eye svg circle,
        .faq-eye svg line {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .faq-eye .eye-open {
            opacity: 1;
            transform: scale(1);
        }

        .faq-eye .eye-closed {
            opacity: 0;
            transform: scale(0.9);
        }

        .faq-item:not(.open) .faq-eye .eye-open {
            opacity: 0;
            transform: scale(0.9);
        }

        .faq-item:not(.open) .faq-eye .eye-closed {
            opacity: 1;
            transform: scale(1);
        }

        .faq-answer {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.3s ease;
            overflow: hidden;
            opacity: 0;
        }

        .faq-answer > * {
            min-height: 0;
            padding: 0 1.5rem;
            color: #555;
            line-height: 1.65;
            font-size: 0.95rem;
        }

        .faq-item.open .faq-answer {
            grid-template-rows: 1fr;
            padding-bottom: 1.5rem;
            opacity: 1;
        }

        .faq-right {
            flex: 2;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            position: relative;
            height: auto;
            padding-top: 4rem;
        }

        .faq-image {
            width: 100%;
            aspect-ratio: 3/4;
            background: linear-gradient(135deg, var(--faq-peach-start), var(--faq-peach-end));
            border-radius: 1rem;
            overflow: hidden;
            position: sticky;
            top: 6rem;
        }

        .faq-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


        /* Mobile Responsive */
        @media (max-width: 768px) {
            .features-tagline-text {
                font-size: 1.25rem;
                flex-direction: column;
                gap: 0.5rem;
            }

            .feature-icon {
                width: 24px;
                height: 24px;
            }

            .smile-heading { font-size: 2.5rem; }

            .smile-product {
                height: 50vh;
                min-height: 400px;
            }

            .features-list {
                flex-direction: column;
                gap: 1.75rem;
            }

            .feature-item { font-size: 1.15rem; }

            .preorder-card {
                flex-direction: column;
                align-items: flex-start;
            }

            .preorder-card-actions {
                width: 100%;
                align-items: stretch;
            }

            .preorder-note { text-align: left; }

            .cta-banner-title { font-size: 2.05rem; }

            .feature-section {
                flex-direction: column;
                max-height: none;
            }

            .feature-right {
                overflow: visible;
            }

            /* Feature cards bigger on mobile - fixed height for consistency */
            .feature-card {
                min-width: 85%;
                height: 60vh;
                max-height: 60vh;
                min-height: 300px;
                aspect-ratio: auto;
            }

            /* Hide feature body on mobile */
            .feature-card-body {
                display: none;
            }

            .quiz-content { flex-direction: column; }

            .photo-row { flex-direction: column; }

            .photo-row-1 .photo-floating-container,
            .photo-row-2 .photo-floating-container {
                flex: 1;
                padding: 2rem;
            }

            .photo-row-1 .photo-fullbleed,
            .photo-row-2 .photo-fullbleed {
                flex: 1;
                min-height: 50vh;
                max-width: 100vw;
            }

            .photo-fullbleed img {
                width: 100%;
                height: 100%;
                min-height: 50vh;
                object-fit: cover;
            }

            .specs-section { flex-direction: column; }
            .specs-grid { grid-template-columns: 1fr; }

            .faq-section { flex-direction: column; }

            /* FAQ image fix for mobile */
            .faq-right {
                width: 100%;
                order: -1;
                margin-bottom: 1rem;
                padding-top: 0;
            }

            .faq-image {
                position: relative;
                top: 0;
                max-height: 25vh;
                aspect-ratio: 16/9;
            }

            .faq-image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }

            /* Team carousel mobile */
            .team-heading {
                font-size: 1.5rem;
            }

            .team-logo {
                min-width: 140px;
                height: 70px;
                padding: 1rem;
            }

            .team-carousel {
                animation: scroll-team-mobile 40s linear infinite;
            }

            @keyframes scroll-team-mobile {
                0% { transform: translateX(0); }
                100% { transform: translateX(calc(-140px * 5 - 2rem * 5)); }
            }
        }