/* Target Tech Presentation Page - V8.5 (Polish & Accessibility) */

@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* --- SEMANTIC COLOR SYSTEM --- */
:root {
    /* DEFAULT DARK MODE TOKENS */
    --tt-bg: #000000;
    --tt-surface: #121212;
    /* Slightly lighter black for cards */
    --tt-surface-2: #1c1c1e;
    /* Secondary surface */
    --tt-text: #f5f5f7;
    /* Primary text (Off-white) */
    --tt-text-secondary: #86868b;
    /* Secondary text (Grey) */

    /* Accents (Constant across modes usually, or slightly tweaked) */
    --tt-accent: #2997ff;
    --tt-accent-purple: #bf5af2;
    --tt-accent-red: #ff453a;
    --tt-accent-green: #30d158;

    /* UI Elements */
    --tt-border: rgba(255, 255, 255, 0.1);
    --tt-card-border: rgba(255, 255, 255, 0.08);
    --tt-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
    --tt-overlay: rgba(0, 0, 0, 0.6);

    --tt-overlay: rgba(0, 0, 0, 0.6);

    /* --- MOTION CANON V2 --- */
    --tt-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --tt-ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
    --tt-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
    --tt-ease-precision: cubic-bezier(0.33, 1, 0.68, 1);

    --tt-dur-micro: 480ms;
    --tt-dur-reveal: 720ms;
    --tt-dur-handoff: 900ms;

    --tt-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* LIGHT MODE OVERRIDES */
[data-theme="light"] {
    --tt-bg: #FFFFFF;
    --tt-surface: #F5F5F7;
    /* Apple Light Grey Background */
    --tt-surface-2: #FFFFFF;
    /* White Cards on Grey BG */
    --tt-text: #1d1d1f;
    /* Deep Black for contrast */
    --tt-text-secondary: #6e6e73;
    /* Darker Grey for legibility */

    --tt-border: rgba(0, 0, 0, 0.1);
    --tt-card-border: rgba(0, 0, 0, 0.05);
    --tt-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    /* Softer shadow, no glow */
    --tt-overlay: rgba(255, 255, 255, 0.8);
}

body.page-template-page-target-tech {
    background-color: var(--tt-bg);
    color: var(--tt-text);
    font-family: var(--font-main);
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--tt-text);
}

/* --- HERO SECTION --- */
.tt-hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding-top: 60px;
    overflow: hidden;
}

.tt-hero-title {
    font-size: 5rem;
    line-height: 1.05;
    /* Gradient text needs fallback for light mode readability or specific light gradient */
    background: linear-gradient(180deg, var(--tt-text) 0%, var(--tt-text-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}

.tt-hero-subtitle {
    font-size: 1.5rem;
    color: var(--tt-text-secondary);
    margin-bottom: 40px;
}

.tt-cta-group {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 60px;
}

.tt-btn {
    padding: 12px 24px;
    border-radius: 980px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.2s;
    border: 1px solid transparent;
}

.tt-btn:hover {
    transform: scale(1.05);
}

.tt-btn-primary {
    background: var(--tt-accent);
    color: white;
}

.tt-btn-glass {
    background: rgba(128, 128, 128, 0.1);
    color: var(--tt-text);
    border: 1px solid var(--tt-border);
    backdrop-filter: blur(10px);
}

.tt-hero-visual-container {
    width: 60%;
    margin: 0 auto;
    perspective: 1000px;
}

.tt-hero-image {
    width: 100%;
    border-radius: 12px;
    box-shadow: var(--tt-shadow);
}

/* --- HORIZONTAL SCROLL TECH SECTION (Refined V9.6) --- */
/* --- HORIZONTAL SCROLL TECH SECTION (Refined V9.6) --- */
.tt-tech-scroll-container {
    /* Height is now set dynamically by JS for 1:1 Apple Scroll feel */
    min-height: 100vh;
    position: relative;
    background: var(--tt-bg);
    overflow: visible;
    /* Prevent clipping from parent */
}

.tt-tech-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    /* Flex Column Layout to separate Title (Top) and Cards (Bottom) */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 5vh;
    /* Reduced from 8vh to save space */
    z-index: 10;
}

.tt-sticky-header {
    position: relative;
    /* Changed from absolute to relative */
    top: auto;
    left: auto;
    width: 100%;
    text-align: center;
    z-index: 20;
    padding: 0 40px;
    /* Match .tt-container padding for alignment */
    margin-bottom: 3vh;
    /* Reduced from 5vh */
    flex-shrink: 0;
    /* Prevent title from squishing */
}

.tt-sticky-title {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 10px;
    /* Reduced from 20px */
    /* Clean Apple look: No heavy shadow, just crisp text */
    text-shadow: none;
    white-space: normal;
    overflow: visible;
}

.tt-horizontal-track {
    display: flex;
    gap: 20px;
    /* Apple Standard */
    padding-left: 5vw;
    padding-right: 5vw;
    /* Added Balance */
    /* Align first card with left margin */
    padding-bottom: 8vh;
    /* Add bottom spacing like Apple */
    will-change: transform;
    /* Optimize for animation */
    height: 100%;
    /* Take full available height of the flex column (minus header) */
    flex-grow: 1;
    align-items: center;
    /* Actually, we want them centered vertically, but if heights differ, it looks messy. */
    /* User wants EQUAL height. */
    align-items: stretch;

    /* Reduce padding to prevent cut-off */
    padding-bottom: 2vh;
    padding-top: 2vh;
}

.tt-tech-card {
    /* Apple Standard: reduced to match Apple's actual size */
    min-width: 52vw;
    width: 52vw;
    flex-shrink: 0;

    /* Force panoramic aspect ratio */
    aspect-ratio: 1.88 / 1;

    /* RESET: No padding/border/bg needed for full bleed visuals */
    display: flex;
    /* Just to hold img */
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    /* Shadow is now baked into the image design or applied to img */

    transition: opacity 0.5s var(--tt-ease-soft);
}

.tt-static-visual {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Training Video Styling */
.tt-training-video {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: block;
    object-fit: cover;
    /* Fill container, crop if needed */
    background: #000;
    /* Prevent white flash during load */
}

.tt-marketing-visual {
    width: 100%;
    height: 100%;
    border-radius: 28px;
    /* Apple standard */
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
    display: block;
    object-fit: cover;
    /* Fill container, crop to fit panoramic */
}


.tt-mobile-visual-container {
    max-height: 35vh;
    /* Match image cap */
    overflow: hidden;
}

/* --- APPLE-STYLE SLIDERS (Refined V9.6) --- */
.tt-ui-slider-group {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 30px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 18px;
    backdrop-filter: blur(10px);
    width: 80%;
    margin: 40px auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tt-ui-slider-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.tt-ui-slider-row .label {
    width: 80px;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-align: right;
}

.tt-ui-track {
    flex-grow: 1;
    height: 4px;
    /* More refined height */
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    position: relative;
    overflow: visible;
}

.tt-ui-fill {
    height: 100%;
    /* Apple-style gradient for active portion */
    background: linear-gradient(90deg, #FFFFFF, #E5E5E5);
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    /* Subtle glow */
}

.tt-ui-thumb {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.05);
    /* Pro shadow + borders */
    cursor: default;
}

/* --- PREMIUM SCROLL CONTAINER (Refined V9.6) --- */
/* [REMOVED] Legacy Premium Intro - see V9.6 block at bottom */
/*
.tt-premium-intro {
    height: 150vh;
    background: #000;
    position: relative;
    z-index: 5;
}

.tt-premium-content.sticky-reveal {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tt-premium-title {
    font-size: 5rem;
    font-weight: 700;
    color: white;
    position: absolute;
    text-align: center;
    width: 100%;
    padding: 0 20px;
}

.tt-premium-subtitle {
    font-size: 2rem;
    font-weight: 600;
    color: #86868b;
    text-align: center;
    line-height: 1.3;
    position: absolute;
    width: 100%;
    padding: 0 20px;
}

.tt-gold {
    color: #FFD700;
    background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tt-white {
    color: #fff;
}
*/

.tt-tech-visual {
    height: 350px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background: #000;
    /* Visuals often look best on dark even in light mode, or use var(--tt-surface-2) */
    border: 1px solid var(--tt-border);
}

.tt-tech-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tt-tech-info h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: var(--tt-text);
}

.tt-tech-info p {
    color: var(--tt-text-secondary);
    font-size: 1.1rem;
}

/* Grid Overlay visual */
.tt-tech-overlay-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--tt-accent-green) 1px, transparent 1px),
        linear-gradient(90deg, var(--tt-accent-green) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.3;
    z-index: 2;
}

/* --- TRAINING SECTION (Long Form) --- */
.tt-section {
    padding: 150px 0;
    border-bottom: 1px solid var(--tt-border);
}

.tt-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
}

.tt-section-title {
    font-size: 3.5rem;
    margin-bottom: 20px;
    color: var(--tt-text);
}

.tt-section-desc {
    font-size: 1.5rem;
    color: var(--tt-text-secondary);
    max-width: 700px;
    margin: 0 auto 60px;
    /* Centered Block */
    text-align: center;
    /* Centered Text */
    line-height: 1.5;
    /* Better readability */
}

.tt-large-visual-card {
    width: 100%;
    height: auto;
    /* Let video determine height */
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin-bottom: 60px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    background: #000;
    /* Black background to hide any letterboxing */
}

.tt-large-visual-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.tt-floating-ui-badge {
    position: absolute;
    bottom: 40px;
    left: 40px;
    background: rgba(0, 0, 0, 0.6);
    /* Always dark bg for white text readability on image */
    color: white;
    backdrop-filter: blur(20px);
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 500;
}

.tt-feature-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.tt-feature-item h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: var(--tt-text);
}

.tt-feature-item p {
    color: var(--tt-text-secondary);
    font-size: 0.95rem;
}

/* --- DATA SECTION (Parallax) --- */
.tt-split-layout {
    display: flex;
    align-items: center;
    gap: 80px;
}

.tt-split-layout.reverse {
    flex-direction: row-reverse;
}

.tt-split-content {
    flex: 1;
}

.tt-split-visual {
    flex: 1.2;
    border-radius: 20px;
    overflow: hidden;
}

/* --- MASTER ANALYSIS (Fusion) --- */
.tt-master-analysis {
    background: var(--tt-bg);
    border-bottom: none !important;
    /* Remove grey separator line */
}

.tt-master-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Logique Top-down */
    align-items: center;
    overflow: visible;
    /* Allow zoomed laptop base to show */
    padding-top: 5vh;
    /* Espace respirant haut */
}

.tt-text-layer {
    position: absolute;
    top: 3vh;
    /* Higher to avoid overlap */
    width: 100%;
    text-align: center;
    z-index: 10;
    transition: all 0.8s ease;
    padding: 0 20px;
    height: 18vh;
    /* More space for text */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tt-master-visual-container {
    position: relative;
    margin-top: 22vh;
    height: auto;
    width: 85vw;
    max-width: 1400px;
    aspect-ratio: 2.07;
    /* Match image ratio (3826/1844) */
    overflow: visible;
    /* Allow shadow to show */
    z-index: 1;

    /* Container doesn't need transform hints - only the image animates */
}

.tt-master-img {
    width: 100%;
    height: 100%;
    /* Removed object-fit/position since it's now a container */

    /* Removed Ghost Border/Shadow - The Mockup has its own */
    background: transparent;
    border-radius: 0;
    box-shadow: none;

    /* Center the Laptop Mockup */
    display: flex;
    justify-content: center;
    align-items: center;

    transform-origin: center center;
    will-change: transform;
}

/* Specific Override for Master Analysis Image to prevent cropping */
.tt-master-img .device-screen img {
    object-fit: contain !important;
    background: #000;
    /* Merge letterboxing with device screen */
}

/* Annotations: Position in empty viewport space, NOT over image */

.tt-annot-1,
.tt-annot-2,
.tt-annot-3 {
    /* Reset layout for all annotations to be uniform on the right side */
    flex-direction: row !important;
    /* Dot on left, text on right */
    text-align: left !important;
}

.tt-master-analysis .tt-annot-1 {
    /* Position 1: Focal Point */
    top: 45%;
    left: 87%;
    right: auto;
    max-width: 320px;
    /* Increased for balance */
    /* Unified width */
}

/* .tt-master-analysis .tt-annot-2 {
    top: 45%;
    left: 87%;
    right: auto;
    max-width: 320px;
}

.tt-master-analysis .tt-annot-3 {
    top: 45%;
    left: 87%;
    right: auto;
    max-width: 320px;
} */

@media (max-width: 1200px) {
    .tt-master-visual-container {
        width: 70vw;
    }
}

@media (max-width: 768px) {

    /* Mobile: Reset to simple stacking or smaller scale */
    .tt-master-visual-container {
        width: 95vw;
        height: auto;
        margin-top: 15vh;
        aspect-ratio: 16/9;
    }

    .tt-annot-1,
    .tt-annot-2,
    .tt-annot-3 {
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        text-align: center;
        flex-direction: column;
    }
}

/* --- COACH IA STICKY SECTION --- */
.tt-coach-section {
    background: var(--tt-bg);
}

.tt-coach-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.tt-coach-header-abs {
    position: absolute;
    top: 10vh;
    width: 100%;
    text-align: center;
    z-index: 2;
    transition: opacity 0.5s ease;
}

.tt-coach-visual-container {
    position: relative;
    width: 80vw;
    max-width: 400px;
    /* iPhone size approx */
    height: auto;
    z-index: 1;
}

.tt-coach-img-hero {
    width: 100%;
    height: auto;
    border-radius: 40px;
    /* Matching iPhone bezel */
    box-shadow: 0 0 0 8px #1c1c1e, 0 30px 80px rgba(0, 0, 0, 0.5);
    /* Bezel + Shadow */
    display: block;
}

/* Apple-style Annotations */
.tt-annotation {
    position: absolute;
    display: flex;
    /* align-items: center; <-- OLD: Centered verticaly */
    align-items: flex-start;
    /* NEW: Aligned to top (Title) */
    gap: 15px;
    opacity: 0;
    /* Hidden initially, managed by JS */
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    /* Apple ease */
    pointer-events: none;
    width: 250px;
}

/* The Dot/Line Indicator */
.tt-annot-line {
    /* Existing style for the dot/line */
    /* Add top margin to align with H3 text */
    margin-top: 6px;
}

.tt-annot-content {
    text-align: left;
    max-width: 280px;
    /* Constrain width for cleaner wrap */
}

/* ANNOTATIONS (Apple Style) */
.tt-annot-content h3 {
    font-family: var(--font-main);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tt-text);
    margin: 0 0 12px 0;
}

.tt-annot-content p {
    font-family: var(--font-main);
    font-size: 1.3rem;
    font-weight: 400;
    color: #f5f5f7;
    margin: 0;
    line-height: 1.4;
    max-width: 550px;
    text-align: left;
}

/* Connector Line (Pulse Effect) */
.tt-annot-line {
    width: 18px;
    height: 18px;
    background: #A16EFF;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(161, 110, 255, 0.2);
    flex-shrink: 0;
    position: relative;
    margin-top: 10px;
    /* Vertically center with 2.5rem H3 */
}

/* Light Mode Support */
[data-theme="light"] .tt-annot-content h3 {
    color: #000;
}

[data-theme="light"] .tt-annot-content p {
    color: #444;
}

/* Apple-like Pulse */
.tt-annot-line::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(161, 110, 255, 0.6);
    animation: tt-pulse 2s infinite;
}

@keyframes tt-pulse {
    0% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }

    100% {
        width: 300%;
        height: 300%;
        opacity: 0;
    }
}

/* UNIFIED POSITIONING (RIGHT SIDE OF SLID LAPTOP) */
.tt-annot-1,
.tt-annot-2,
.tt-annot-3 {
    top: 50% !important;
    left: 68% !important;
    /* Adjusted to 68% (Safe Clear) */
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Strict Reset */
    transform: translateY(-50%) !important;
    flex-direction: row !important;
    /* Standard: Dot Left, Text Right */
    text-align: left !important;
    gap: 20px;
    width: auto;
    /* Let flow naturally */
}

/* Ensure content aligns left */
.tt-annot-1 .tt-annot-content,
.tt-annot-2 .tt-annot-content,
.tt-annot-3 .tt-annot-content {
    text-align: left !important;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .tt-coach-visual-container {
        width: 60vw;
    }

    .tt-annotation {
        width: 160px;
    }

    .tt-annot-content h3 {
        font-size: 0.9rem;
    }

    .tt-annot-content p {
        display: none;
        /* Simplify for mobile */
    }

    .tt-annot-1 {
        right: 95%;
    }

    .tt-annot-2,
    .tt-annot-3 {
        left: 95%;
    }
}

.tt-shadow-card {
    border-radius: 20px;
    box-shadow: var(--tt-shadow);
    width: 100%;
    border: 1px solid var(--tt-card-border);
}

/* --- COACH & PREMIUM STACK --- */
.tt-premium-stack {
    background: var(--tt-bg);
    padding-top: 0;
}

.tt-stack-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--tt-surface);
    border-radius: 30px;
    padding: 80px;
    margin-bottom: 40px;
    border: 1px solid var(--tt-card-border);
    box-shadow: var(--tt-shadow);
}

.tt-gradient-text-purple {
    font-size: 3rem;
    background: linear-gradient(90deg, #bf5af2, #ff2d55);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tt-ai-waveform span {
    display: inline-block;
    width: 8px;
    height: 40px;
    background: var(--tt-accent-purple);
    border-radius: 4px;
    margin: 0 4px;
    animation: wave 1s ease-in-out infinite;
}

@keyframes wave {

    0%,
    100% {
        height: 40px;
        opacity: 0.5;
    }

    50% {
        height: 80px;
        opacity: 1;
    }
}

.tt-stack-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.tt-stack-card {
    background: var(--tt-surface-2);
    padding: 48px;
    /* Canon: multiple of 8 (was 50px) */
    border-radius: 30px;
    min-height: 300px;
    position: relative;
    border: 1px solid var(--tt-border);
    overflow: hidden;
    box-shadow: var(--tt-shadow);
}

.tt-stack-card h3 {
    color: var(--tt-text);
    margin-bottom: 10px;
}

.tt-stack-card p {
    color: var(--tt-text-secondary);
}

/* CSS Icons Restored tailored to V8 */
.tt-css-visual-timer {
    font-family: 'Share Tech Mono', monospace;
    font-size: 4rem;
    color: var(--tt-accent-purple);
    margin-top: 40px;
    text-shadow: 0 0 20px rgba(191, 90, 242, 0.4);
}

.tt-css-visual-crosshair {
    width: 100px;
    height: 100px;
    border: 2px solid var(--tt-accent-green);
    border-radius: 50%;
    position: absolute;
    bottom: 40px;
    right: 40px;
}

.tt-css-visual-crosshair::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: white;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px white;
}

/* --- FULL BLEED MULTIPLAYER --- */
.tt-full-bleed-section {
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tt-full-bleed-section::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Gradient always dark to ensure text readability on image */
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent 40%, rgba(0, 0, 0, 0.4));
}

.tt-overlay-content {
    position: relative;
    z-index: 2;
    color: white;
    /* Always white on full bleed images */
}

.tt-huge-title {
    font-size: 6rem;
    line-height: 0.9;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    color: white;
}

.tt-white-desc {
    font-size: 1.5rem;
    opacity: 0.9;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.9);
}

.tt-raid-boss-hud-mockup {
    margin-top: 60px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 600px;
    max-width: 90%;
    /* Safety for mobile */
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .tt-huge-title {
        font-size: 3rem;
        /* Mobile Safety: Reduce from 6rem */
    }

    .tt-raid-boss-hud-mockup {
        width: 100%;
        margin-top: 30px;
    }
}

.boss-bar-container {
    height: 10px;
    background: #333;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
}

.boss-health {
    height: 100%;
    width: 60%;
    background: linear-gradient(90deg, #ff3b30, #ff9500);
}

.boss-name {
    font-weight: 700;
    color: #ff3b30;
    letter-spacing: 2px;
    font-size: 0.9rem;
}

/* DUEL SECTION */
.tt-rank-badge {
    display: inline-block;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: black;
    font-weight: 800;
    padding: 10px 20px;
    border-radius: 8px;
    margin-top: 30px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* PRICING */
.tt-pricing-section {
    background: var(--tt-bg);
}

.tt-pricing-card {
    background: #000;
    /* Always premium black for pricing even in light mode? Or switch? */
    /* Let's make pricing card adaptable */
    background: var(--tt-surface);
    border: 1px solid var(--tt-accent);
    box-shadow: var(--tt-shadow);
    border-radius: 30px;
    padding: 60px;
    max-width: 500px;
    margin: 60px auto 0;
    text-align: center;
}

.tt-price {
    font-size: 4rem;
    font-weight: 700;
    color: var(--tt-text);
    margin: 20px 0;
}

.tt-feature-list {
    list-style: none;
    padding: 0;
    margin: 40px 0;
    color: var(--tt-text-secondary);
    line-height: 2;
}

.tt-btn-buy {
    background: var(--tt-text);
    color: var(--tt-bg);
    padding: 15px 40px;
    border-radius: 100px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    /* Keep text on one line */
}

/* Reduce button padding on small screens */
@media (max-width: 400px) {
    .tt-btn-buy {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
}

/* --- RESPONSIVE UNIFICATION (Mobile Stack) --- */
@media (max-width: 768px) {

    /* 1. Disable Sticky Scroll & Auto Height */
    .tt-tech-scroll-container {
        height: auto !important;
        padding: 20px 0 0 0 !important;
        /* Reduced from 40px, removed bottom pad to close gap to Training */
    }

    .tt-tech-sticky {
        position: relative;
        top: auto;
        height: auto;
        width: 100%;
        display: block;
        padding-top: 0;
    }

    /* 2. Adjust Header for Mobile */
    .tt-sticky-header {
        position: relative;
        text-align: center;
        margin-bottom: 40px;
        padding: 0 20px;
    }

    .tt-sticky-title {
        font-size: 2.5rem;
        /* Smaller than 4rem */
        line-height: 1.1;
    }

    /* 3. Transform Horizontal Track to Vertical Stack */
    .tt-horizontal-track {
        display: flex;
        flex-direction: column;
        /* VERTICAL STACK */
        padding-left: 20px;
        /* Remove the 50vw offset */
        padding-right: 20px;
        gap: 40px;
        /* Consistent spacing */
        height: auto;
        width: 100%;
        transform: none !important;
        /* Disable JS transform if any remains */
    }

    /* 4. Resize Cards for Mobile */
    .tt-tech-card {
        width: 100%;
        min-width: 0;
        /* Override 400px */
        margin: 0;
        padding: 24px;
    }

    /* Adjust Card Content */
    .tt-tech-card h3 {
        font-size: 1.5rem;
    }

    .tt-tech-card p {
        font-size: 1rem;
    }

    .tt-tech-visual {
        height: auto;
        max-height: 250px;
        margin-bottom: 20px;
    }

    /* Reset Premium Height for mobile */
    .tt-premium-intro {
        height: auto !important;
        padding: 100px 0;
        display: block !important;
    }

    .tt-premium-content.sticky-reveal {
        position: relative !important;
        height: auto !important;
        top: auto !important;
        display: block !important;
    }

    .tt-premium-title,
    .tt-premium-subtitle {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        margin-bottom: 30px;
        display: block;
        animation: none !important;
    }

    /* 5. Mobile Grid Stacks (Critical Fix) */
    .tt-feature-grid-3,
    .tt-multi-modes-grid,
    .tt-pricing-grid-2 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .tt-hardware-display-3 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
        margin-bottom: 60px;
    }

    .tt-large-visual-card {
        height: auto !important;
        /* Let video define height */
        background: transparent !important;
        /* Remove black BG */
        border: none !important;
        box-shadow: none !important;
        padding: 0;
        margin-top: 20px;
        display: flex;
        justify-content: center;

        /* Force Full Width (Break out of container padding) */
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box;
    }

    .tt-training-video {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 0 !important;
        /* Full bleed looks better without radius usually, or keep small */
        object-fit: cover;
    }

    /* Mobile Video Badge (Smaller & Better Positioned) */
    .tt-floating-ui-badge {
        bottom: 15px !important;
        left: 15px !important;
        padding: 6px 14px !important;
        font-size: 0.8rem !important;
        border-radius: 8px !important;
        backdrop-filter: blur(12px) !important;
        background: rgba(0, 0, 0, 0.5) !important;
        /* Slightly more transparent */
        width: auto !important;
        max-width: 80% !important;
        /* Prevent text overflow */
    }
}

/* Fixed Slider Styles for Light Mode Visibility */
.tt-ui-slider-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tt-ui-slider-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--tt-text);
    align-items: center;
    font-weight: 500;
}

.tt-ui-track {
    width: 60%;
    height: 6px;
    background: var(--tt-surface-2);
    /* Use surface-2 for track BG */
    border-radius: 3px;
    position: relative;
    border: 1px solid var(--tt-border);
}

.tt-ui-thumb {
    width: 18px;
    height: 18px;
    background: var(--tt-text);
    /* Thumb visible against track */
    border-radius: 50%;
    position: absolute;
    top: -6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.tt-ui-fill {
    height: 100%;
    background: var(--tt-accent);
    border-radius: 3px;
}

/* HOTFIX: Ensure Tech Visuals (Simulated Screens) always stay Dark Mode */
.tt-tech-visual {
    color: white !important;
    /* Force white text even in Light Mode */
}

.tt-tech-visual .tt-ui-slider-row {
    color: rgba(255, 255, 255, 0.9) !important;
}

.tt-tech-visual .tt-ui-thumb {
    background: white !important;
}

.tt-tech-visual .tt-ui-track {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* [REMOVED] V9 Premium Transition - see V9.6 block at bottom */
/*
.tt-premium-intro {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    color: white;
    text-align: center;
}

.tt-premium-title {
    font-size: 5rem;
    font-weight: 700;
    margin-bottom: 20px;
    animation: fadein 2s ease forwards;
}

.tt-gold {
    color: #FFD700;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    display: inline-block;
}

.tt-premium-subtitle {
    font-size: 2rem;
    color: #888;
    opacity: 0;
    animation: fadein 2s ease 1s forwards;
}
*/

/* --- V9 MULTIPLAYER HUB --- */
.tt-multiplayer-hub {
    background: var(--tt-bg);
}

.tt-lobby-card {
    background: #0d0d0d;
    /* Always Dark UI for GameHub */
    border: 1px solid #333;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

/* --- MULTIPLAYER ARENA (Apple-Style) --- */
.tt-arena-section {
    background: #000 !important;
    /* Forced Black for Contrast */
    position: relative;
    /* Height set inline in HTML */
}

/* DESKTOP: Sticky Split Layout */
.tt-arena-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    overflow: hidden;
}

/* LEFT: The Visual Stage */
.tt-arena-stage {
    width: 50%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000 70%);
}

.tt-stage-content {
    width: 80%;
    aspect-ratio: 16/9;
    position: relative;
}

.tt-stage-visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* JS handles fade-in */
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s ease;
    transform: scale(0.95);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tt-stage-visual.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.tt-stage-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Changed to contain to show full UI */
    background: #0d0d0d;
}

/* Glass HUD Overlay on Visuals */
.tt-glass-hud {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.5s ease 0.2s;
}

.tt-stage-visual.active .tt-glass-hud {
    transform: translateY(0);
    opacity: 1;
}

.tt-hud-badge {
    background: #fff;
    color: #000;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.tt-hud-badge.red {
    background: #ff3b30;
    color: white;
}

/* --- MOBILE OVERRIDES FOR PREMIUM SECTION --- */
@media (max-width: 768px) {

    /* Target ALL potential containers for the premium textual content */
    .tt-premium-section,
    .tt-premium-intro,
    .tt-premium-content,
    .tt-premium-title,
    .tt-premium-subtitle {
        /* padding-left: 20px !important; REMOVED AS REQUESTED */
        /* padding-right: 20px !important; REMOVED AS REQUESTED */
        box-sizing: border-box !important;
        max-width: 100vw !important;
    }

    /* Fix excessive height/spacing on mobile for Reveal Section */
    .tt-premium-intro {
        height: auto !important;
        /* Disable scroll-jacking height on mobile */
        min-height: auto !important;
        /* Let content dictate height */
        padding-bottom: 0px !important;
        /* Zero out */
        margin-bottom: 0 !important;
    }

    .tt-premium-content.sticky-reveal {
        position: relative !important;
        /* Stop sticking on mobile */
        height: auto !important;
        top: auto !important;
        padding: 0 !important;
        /* Zero out */
    }

    .tt-premium-title {
        font-size: 2.8rem !important;
        /* Visual balance for mobile */
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .tt-premium-subtitle {
        font-size: 1.5rem !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}



.tt-hud-badge.blue {
    background: #007aff;
    color: white;
}

.tt-hud-badge.purple {
    background: #bf5af2;
    color: white;
}

.tt-hud-status {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot-online {
    width: 8px;
    height: 8px;
    background: #30d158;
    border-radius: 50%;
    box-shadow: 0 0 10px #30d158;
    animation: blink 2s infinite;
}

/* Static Header (Scrolls away naturally) */
.tt-narrative-header-static {
    padding: 100px 5vw 40px;
    background: #000;
    position: relative;
    z-index: 5;
    text-align: center;
}

.tt-narrative-header-static .tt-section-title {
    margin-bottom: 20px;
    font-size: 4rem;
    color: #fff !important;
    /* Force White for visibility on Black */
}

.tt-narrative-header-static .tt-section-desc {
    color: #aeaeae !important;
    /* Force Silver for visibility on Black */
}

/* RIGHT: The Narrative Track (PINNED STACK) */
.tt-arena-narrative {
    width: 50%;
    height: 100vh;
    padding: 0 5vw;
    position: relative;
    display: flex;
    align-items: center;
    /* Center Vertically */
    justify-content: center;
}

/* Track is now a container for absolute items */
.tt-narrative-track {
    width: 100%;
    position: relative;
    height: 400px;
    /* Estimated height of a text block */
}

/* Stacked Cards for Cross-Fade */
.tt-narrative-card {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(20%) scale(0.95);
    /* Start below */
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tt-narrative-card.active {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    /* Centered */
    border-bottom: 1px solid var(--tt-accent);
    z-index: 2;
}

.tt-narrative-card h3 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: white;
}

.tt-narrative-card p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #aeaeae;
}

/* --- MOBILE: HORIZONTAL SWIPE (Reset to Standard Flow) --- */
@media (max-width: 768px) {
    .tt-arena-section {
        height: auto !important;
        padding: 0 0 60px 0;
        overflow: hidden;
    }

    .tt-narrative-header-static {
        padding: 40px 20px;
        text-align: left;
    }

    .tt-narrative-header-static .tt-section-title {
        font-size: 2.5rem;
    }

    .tt-arena-sticky {
        position: relative;
        height: auto;
        display: block;
        width: 100%;
        overflow: visible;
    }

    .tt-arena-stage {
        display: none;
        /* Hide Desktop Stage */
    }

    .tt-arena-narrative {
        width: 100%;
        height: auto;
        padding: 0;
        display: block;
    }

    /* Reset Pinned Stack to Horizontal Flex */
    .tt-narrative-track {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 20px;
        padding: 0 20px 40px 20px;
        height: auto;
        position: relative;
        -webkit-overflow-scrolling: touch;
    }

    .tt-narrative-card {
        position: relative;
        /* Reset Absolute */
        top: auto;
        left: auto;
        transform: none !important;
        opacity: 1 !important;
        min-width: 85vw;
        scroll-snap-align: center;
        background: #111;
        border: 1px solid #333;
        border-radius: 20px;
        padding: 0;
        overflow: hidden;
        max-width: none;
        display: flex;
        flex-direction: column;
    }

    /* Mobile Card Visual (CSS Content) */
    .tt-narrative-card::before {
        content: '';
        display: block;
        width: 100%;
        height: 200px;
        background-size: cover;
        background-position: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .tt-narrative-card[data-target="lobby"]::before {
        background-image: url('../images/landing-target-tech/v8_analysis_dashboard.png');
    }

    .tt-narrative-card[data-target="multi"]::before {
        background-image: url('../images/landing-target-tech/v8_duel_mode.png');
    }

    .tt-narrative-card[data-target="raid"]::before {
        background-image: url('../images/landing-target-tech/v8_raid_boss_gameplay.png');
    }

    .tt-narrative-card[data-target="precis"]::before {
        background-image: url('../images/landing-target-tech/v8_classique_mode.png');
    }

    .tt-narrative-card h3 {
        font-size: 1.5rem;
        margin: 20px 20px 10px;
        color: white;
    }

    .tt-narrative-card p {
        font-size: 1rem;
        margin: 0 20px 20px;
    }
}

/* --- MOBILE: HORIZONTAL SWIPE (Apple-Like) --- */


/* --- V9 ACHIEVEMENTS --- */
.tt-achievements-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

.tt-achievements-list li {
    font-size: 1.2rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--tt-text-secondary);
}

.icon-check {
    width: 24px;
    height: 24px;
    background: var(--tt-accent-green);
    border-radius: 50%;
    display: flex;
    /* placeholder for icon */
    position: relative;
}

.icon-check::after {
    content: '';
    width: 6px;
    height: 10px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    position: absolute;
    top: 6px;
    left: 9px;
    transform: rotate(45deg);
}

@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* --- V9.5 HARDWARE RESTORATION --- */
.tt-hardware-display-3 {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 30px;
    margin: 60px 0 100px;
}

.tt-dev-laptop {
    width: 300px;
}

.tt-dev-tablet {
    width: 180px;
}

.tt-dev-mobile {
    width: 80px;
}

.dev-screen {
    background: var(--tt-surface-2);
    /* Was #000 */
    border: 2px solid var(--tt-border);
    /* Was #333 */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tt-text-secondary);
    /* Was #444 */
    font-size: 0.8rem;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.tt-dev-laptop .dev-screen {
    height: 180px;
}

.tt-dev-tablet .dev-screen {
    height: 130px;
}

.tt-dev-mobile .dev-screen {
    height: 140px;
    border-radius: 16px;
}

.dev-label {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: var(--tt-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

/* --- V9.5 PRICING SPLIT --- */
.tt-pricing-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.tt-pricing-card {
    margin: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    /* More breathing room */
    text-align: center;
    /* Default center for header */
}

.tt-card-free {
    background: var(--tt-surface-2);
    border: 1px solid var(--tt-border);
    border-radius: 24px;
    order: 1;
    /* Display first visually */
}

.tt-card-premium {
    background: var(--tt-surface-2);
    border: 1px solid var(--tt-accent);
    transform: scale(1.08);
    /* Larger than Free (was 1.02) */
    box-shadow: 0 0 40px rgba(var(--tt-accent-rgb), 0.3);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    order: 2;
    /* Display last visually */
}

/* Header Typography */
.tt-price-header h3 {
    font-size: 1.5rem;
    color: var(--tt-text-secondary);
    margin-bottom: 10px;
    font-weight: 600;
}

.tt-price {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--tt-text);
    line-height: 1;
    margin-bottom: 5px;
}

.tt-period {
    display: block;
    color: var(--tt-text-secondary);
    font-size: 0.9rem;
    margin-bottom: 30px;
}

/* Feature List: Left Aligned + Icons */
.tt-pricing-card .tt-feature-list {
    text-align: left;
    margin: 0 0 30px 0;
    padding: 0 10px;
    /* Slight inset */
}

.tt-pricing-card .tt-feature-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 1rem;
    color: var(--tt-text);
}

/* Check Icons */
.tt-pricing-card .tt-feature-list li::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330d158' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Variant for Free Card icons (maybe grey check?) */
.tt-card-free .tt-feature-list li::before {
    filter: saturate(0);
    /* Grey checks for free */
    opacity: 0.5;
}

/* --- V9.5 COACH IA WAVEFORM --- */
.tt-ai-waveform {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    height: 60px;
}

.tt-ai-waveform span {
    display: block;
    width: 6px;
    background: var(--tt-accent-purple);
    border-radius: 3px;
    animation: organic-wave 1.2s ease-in-out infinite;
}

.tt-ai-waveform span:nth-child(odd) {
    animation-duration: 0.8s;
}

.tt-ai-waveform span:nth-child(2n) {
    animation-duration: 1.1s;
}

.tt-ai-waveform span:nth-child(3n) {
    animation-duration: 1.3s;
}

.tt-ai-waveform span:nth-child(4n) {
    animation-duration: 0.9s;
}

@keyframes organic-wave {

    0%,
    100% {
        height: 10px;
        opacity: 0.5;
    }

    50% {
        height: 50px;
        opacity: 1;
    }
}

/* --- V9.5 PREMIUM SCROLL REVEAL --- */
.tt-premium-intro {
    background: var(--tt-bg);
    /* Was black */
    /* Was black */
    height: 150vh;
    /* Reduced from 350vh for faster scroll (User Request) */
    position: relative;
    overflow: visible;
    /* Changed to visible to ensure sticky works if needed, though usually hidden is fine. usage: relative */
}

.tt-premium-content.sticky-reveal {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.tt-premium-title,
.tt-premium-subtitle {
    transition: all 0.5s ease;
    position: absolute;
    width: 100%;
}

.tt-premium-title {
    opacity: 0;
    /* Hidden initially */
    transform: translateY(-50px);
    font-size: 5rem;
    /* Larger than subtitle (2rem) */
    /* Apple-style Gradient for "Target Tech Premium" */
}

.tt-premium-subtitle {
    opacity: 1;
    /* Visible initially */
    transform: translateY(0);
    font-size: 2rem;
    /* Smaller than title (5rem) */
    font-weight: 700;
    color: var(--tt-text-secondary);
    /* Use variable for Light Mode support */
}

.tt-white {
    color: var(--tt-text);
    /* Adaptive color (Black in Light Mode, White in Dark Mode) */
    display: block;
    margin-top: 10px;
}

/* Gold Gradient Text for "Premium" specifically */
.tt-gold {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.3));
}

/* Classes to toggle via JS */
.scr-state-1 .tt-premium-title {
    opacity: 0;
    transform: translateY(-50px);
}

.scr-state-1 .tt-premium-subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* =================================================================
   ANALYSIS SECTIONS (Apple-Style Data Visualization)
   ================================================================= */

/* --- 1. ANALYSIS HERO (Radar Chart) --- */
.tt-analysis-hero {
    background: var(--tt-bg);
    padding: 120px 0;
}

.tt-radar-container {
    max-width: 60vw;
    margin: 80px auto 0;
    background: var(--tt-surface-2);
    border-radius: 30px;
    padding: 60px;
    box-shadow: var(--tt-shadow);
    transition: transform 0.6s var(--tt-ease-reveal);
}

.tt-radar-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- 2. COACH IA SECTION --- */
.tt-coach-section {
    background: var(--tt-surface);
    padding: 120px 0;
}

.tt-eyebrow {
    display: block;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tt-accent-purple);
    margin-bottom: 12px;
    font-weight: 600;
}

.tt-feature-list {
    list-style: none;
    padding: 0;
    margin: 30px 0 0 0;
}

.tt-feature-list li {
    padding-left: 30px;
    margin-bottom: 16px;
    position: relative;
    color: var(--tt-text);
    font-size: 1.125rem;
}

.tt-feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--tt-accent-purple);
    font-weight: 700;
    font-size: 1.25rem;
}

/* --- 3. SPEED SECTION (Bar Chart) --- */
.tt-speed-section {
    background: var(--tt-bg);
    padding: 120px 0;
}

.tt-chart-wrapper {
    margin: 60px 0;
}

.tt-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 20px;
    height: 300px;
    margin: 60px 0;
}

.tt-bar {
    width: 60px;
    height: 0;
    background: linear-gradient(180deg, var(--tt-accent), var(--tt-accent-purple));
    border-radius: 8px 8px 0 0;
    transition: height 0.8s var(--tt-ease-reveal);
    will-change: height;
}

.tt-bar.animated {
    height: calc(var(--height) * 1%);
}

.tt-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 600px;
    margin: 0 auto;
}

.tt-metric-card {
    text-align: center;
    padding: 40px;
    background: var(--tt-surface-2);
    border-radius: 20px;
    border: 1px solid var(--tt-border);
    transition: transform 0.3s var(--tt-ease-soft), box-shadow 0.3s var(--tt-ease-soft);
}

.tt-metric-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tt-shadow);
}

.tt-metric-value {
    display: block;
    font-size: 4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--tt-accent), var(--tt-accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    line-height: 1;
}

.tt-metric-label {
    display: block;
    font-size: 1rem;
    color: var(--tt-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}


@media (max-width: 768px) {
    .tt-radar-container {
        max-width: 90vw;
        padding: 30px;
    }

    .tt-bar-chart {
        height: 200px;
        gap: 12px;
    }

    .tt-bar {
        width: 40px;
    }

    .tt-metrics-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tt-metric-value {
        font-size: 3rem;
    }

    /* Reduce excessive vertical spacing on Mobile */
    .tt-analysis-hero {
        padding: 40px 0 !important;
    }

    .tt-coach-section,
    .tt-speed-section {
        padding: 60px 0 !important;
    }
}

/* --- MOCKUP ENGINE (User Code) --- */
/* Base Device Frame */
.device-frame {
    position: relative;
    background: #000;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    transform-style: preserve-3d;
}

.device-screen {
    width: 100%;
    height: 100%;
    background-color: #1c1c1e;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.device-screen img,
.device-screen video,
.device-screen iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    pointer-events: none;
}

/* Mobile (Hyper-Realistic Titanium) - Landscape Mode */
.device-mobile {
    /* Landscape: Swapped dimensions (510x240) */
    width: 510px;
    height: 240px;
    border-radius: 40px;
    background: linear-gradient(120deg, #c7c7c7 0%, #e0e0e0 20%, #a0a0a0 45%, #d4d4d4 50%, #8f8f8f 60%, #e0e0e0 85%, #b0b0b0 100%);
    box-shadow:
        inset 0 0 0 2px #666,
        inset 0 0 0 4px #222,
        inset 0 0 0 8px #000,
        15px 23px 38px -8px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10;
    margin: 0 auto;
    /* Center in container */
}

/* Glass Reflection Overlay */
.device-mobile::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 33px;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 31%, transparent 100%);
    pointer-events: none;
    z-index: 100;
}

/* Dynamic Island (Detailed) - Landscape (Left Side) */
.device-mobile::before {
    content: '';
    position: absolute;
    /* Vertically centered on the LEFT side */
    top: 50%;
    left: 17px;
    transform: translateY(-50%);
    /* Swapped dims for vertical pill */
    width: 20px;
    height: 68px;
    background: #000;
    border-radius: 15px;
    z-index: 20;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.1);
}

.device-mobile .device-screen {
    position: absolute;
    top: 9px;
    left: 9px;
    width: calc(100% - 18px);
    height: calc(100% - 18px);
    border-radius: 32px;
    background: #000;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

/* Tablet (Hyper-Realistic Aluminum) */
.device-tablet {
    width: 600px;
    height: 440px;
    border-radius: 36px;
    background: linear-gradient(135deg, #3d3d3d 0%, #4a4a4a 40%, #2a2a2a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 0 0 1px #222,
        inset 0 0 0 14px #000,
        0 30px 60px -15px rgba(0, 0, 0, 0.6);
    position: relative;
    border: none;
    margin: 0 auto;
}

/* Glass Reflection Overlay (Tablet) */
.device-tablet::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    bottom: 14px;
    border-radius: 20px;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 30%, transparent 35%, transparent 100%);
    pointer-events: none;
    z-index: 50;
}

.device-tablet .device-screen {
    position: absolute;
    top: 14px;
    left: 14px;
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    border-radius: 20px;
}

/* Tablet Camera (Front) - Detailed */
.device-tablet::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #111;
    border-radius: 50%;
    z-index: 60;
    box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2);
}

/* Laptop (MacBook Pro - Silver Aluminum) */
.device-laptop-container {
    perspective: 2000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: center center;
    /* Important for Zoom */
    will-change: transform;
}

.device-laptop {
    width: 760px;
    height: 480px;
    border-radius: 24px 24px 0 0;
    background: #0d0d0d;
    border: none;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 0 0 12px #0d0d0d;
    position: relative;
}

/* MacBook Notch (Detailed) */
.device-laptop::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 26px;
    background: #0d0d0d;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 20;
}

.device-laptop .device-screen {
    position: absolute;
    top: 12px;
    left: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 12px);
    border-radius: 14px 14px 0 0;
}

/* Glass Reflection Laptop */
.device-laptop::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 12px);
    border-radius: 14px 14px 0 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%, transparent 100%);
    pointer-events: none;
    z-index: 100;
}

.device-laptop-base {
    width: 900px;
    height: 38px;
    background: linear-gradient(180deg, #d8d8d8 0%, #b0b0b0 100%);
    border-radius: 0 0 24px 24px;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 20px 50px -10px rgba(0, 0, 0, 0.5);
    margin-top: -1px;
}

/* Thumb groove (Refined) */
.device-laptop-base::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 10px;
    background: #a0a0a0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Responsive Scaling for Mockups */
@media (max-width: 1000px) {

    /* Scale down laptop */
    .device-laptop-container {
        transform: scale(0.8);
    }

    .device-tablet {
        transform: scale(0.8);
    }
}

@media (max-width: 768px) {

    /* Mobile Scaling */
    .device-laptop-container {
        transform: scale(0.45);
        transform-origin: top center;
        margin-bottom: -200px;
        /* Compress space after scaling */
    }

    .device-tablet {
        transform: scale(0.6);
        transform-origin: center;
    }

    .device-mobile {
        transform: scale(0.8);
    }

    /* Adjust container heights if scaled */
}

/* --- MASTER ANALYSIS MOCKUP SCALING (HD ADJUSTED) --- */
/* Base size is now 1368px (HD). We scale DOWN to fit container. */
/* Target visual width: ~1000px. Scale factor: 0.72 */

@media (min-width: 1200px) {
    .tt-master-img .device-laptop-container {
        transform: scale(0.72);
        /* Down-scaling from HD = Sharpness! */
        margin-top: -100px;
        /* Adjust spacing because physical size is huge */
        margin-bottom: -100px;
    }
}

@media (min-width: 769px) and (max-width: 1199px) {

    /* Tablet/Small Laptop: Scale down aggressively */
    .tt-master-img .device-laptop-container {
        transform: scale(0.5);
        margin-top: -150px;
        margin-bottom: -150px;
    }
}

/* Specific Override for Master Analysis Image to prevent cropping */
.tt-master-img .device-screen img {
    object-fit: contain !important;
    background: #000;
    /* Merge letterboxing with device screen */
}

/* --- HD LAPTOP OVERRIDES (High Res for Sharpness) --- */
/* Base size increased by ~1.8x to allow Down-scaling instead of Up-scaling */
/* Original Width: 760px -> New: 1368px */

@media (min-width: 1024px) {

    /* 1. Global / Master Analysis Laptop (Big HD) - RESTORED */
    .device-laptop {
        width: 1368px;
        height: 864px;
        border-radius: 43px 43px 0 0;
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1), inset 0 0 0 22px #0d0d0d;
    }

    /* Notch HD */
    .device-laptop::before {
        width: 252px;
        height: 47px;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
    }

    /* Screen HD */
    .device-laptop .device-screen {
        top: 22px;
        left: 22px;
        width: calc(100% - 44px);
        height: calc(100% - 22px);
        border-radius: 25px 25px 0 0;
    }

    /* Reflection HD */
    .device-laptop::after {
        top: 22px;
        left: 22px;
        width: calc(100% - 44px);
        height: calc(100% - 22px);
        border-radius: 25px 25px 0 0;
    }

    /* Base HD */
    .device-laptop-base {
        width: 1620px;
        height: 68px;
        border-radius: 0 0 43px 43px;
    }

    /* Groove HD */
    .device-laptop-base::after {
        width: 288px;
        height: 18px;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
    }


    /* 2. Ecosystem Specific Laptop (Mini Size) - SCOPED override */
    .tt-eco-laptop .device-laptop {
        width: 820px;
        height: 518px;
        border-radius: 26px 26px 0 0;
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1), inset 0 0 0 13px #0d0d0d;
    }

    .tt-eco-laptop .device-laptop::before {
        width: 151px;
        height: 28px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .tt-eco-laptop .device-laptop .device-screen {
        top: 13px;
        left: 13px;
        width: calc(100% - 26px);
        height: calc(100% - 13px);
        border-radius: 15px 15px 0 0;
    }

    .tt-eco-laptop .device-laptop::after {
        top: 13px;
        left: 13px;
        width: calc(100% - 26px);
        height: calc(100% - 13px);
        border-radius: 15px 15px 0 0;
    }

    .tt-eco-laptop .device-laptop-container .device-laptop-base {
        width: 972px;
        height: 41px;
        border-radius: 0 0 26px 26px;
    }

    .tt-eco-laptop .device-laptop-base::after {
        width: 173px;
        height: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
}

/* =================================================================
   ECOSYSTEM SECTION (3-DEVICE LAYOUT)
   ================================================================= */
@media (min-width: 1024px) {
    .tt-hardware-display-3 .device-laptop-container {
        /* Base is 2500px (UHD). We want visual ~875px (Large) */
        transform: scale(0.35) !important;
        margin: 0 -250px;
        /* Pull siblings in significantly */
        transform-origin: bottom center;
    }

    .tt-hardware-display-3 .device-tablet {
        /* Base 600px. Visual ~510px */
        transform: scale(0.85) !important;
        transform-origin: bottom right;
        margin-right: -50px;
    }

    .tt-hardware-display-3 .device-mobile {
        /* Base 320px. Visual ~208px */
        transform: scale(0.65) !important;
        transform-origin: bottom left;
        margin-left: -50px;
    }

    .tt-hardware-display-3 {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        /* Align on table */
        overflow: hidden;
        /* Prevent horizontal scroll from wide base elements */
        padding-bottom: 50px;
    }
}

/* End of File */
/* =================================================================
   ECOSYSTEM SECTION (SCROLL MOTION LAYOUT)
   ================================================================= */
@media (min-width: 1024px) {
    /*
      NOTE:
      The ecosystem scene is a pinned/sticky "stage" with stacked device mockups.
      The previous CSS applied conflicting transforms (scale + transform:none)
      which caused inconsistent sizing/positioning and bottom cropping.
      We keep a single source of truth for scaling using clamp() so the mockups:
      - sit closer to the title
      - are larger than before
      - never get cut off at the bottom of the viewport
    */

    /* Sticky container adjustments */
    .tt-ecosystem-wrapper {
        position: relative;
        /* Keep track height (300vh) defined in HTML or here */

        /* Break out of parent .tt-container (max-width: 1000px) to allow full-width mockups */
        width: 100vw;
        margin-left: calc(50% - 50vw);
        /* Centers the full-width element within its constrained parent */
    }

    .tt-ecosystem-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        /* Full viewport scene */
        width: 100%;
        max-width: 1800px;
        /* Large enough for HD mockups */
        margin: 0 auto;
        /* Center the sticky container itself */
        overflow: visible;
        /* ALLOW OVERFLOW so CTA isn't cut off */
        /* Prevent overflow crop issues */
        z-index: 10;

        /* Flex Column Layout: Title Top, Visuals Bottom */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        /* Responsive safe areas (prevents title-to-mockup gap + bottom crop) */
        padding-top: clamp(60px, 8vh, 80px);
        /* Increased top padding to push title BELOW navbar */
        padding-bottom: 120px;
        /* Safe space for CTA */
    }

    /* 1. Header Area */
    .tt-ecosystem-header {
        flex: 0 0 auto;
        /* Don't grow, just take needed space */
        width: 100%;
        max-width: 1050px;
        margin-bottom: 1vh;
        /* Tight margin */
        z-index: 20;
        text-align: center;
    }

    /* 2. Visuals Area (The Stack) */
    .tt-devices-layer {
        flex: 1 1 auto;
        /* Take remaining space */
        width: 100%;
        max-width: 1050px;
        /* Match Apple grid */
        position: relative;
        display: grid;
        /* Keep the stack closer to the title (Apple-like) */
        place-items: start center;
        place-content: center;
        /* Center the grid cells themselves horizontally */
        padding-top: 0;
        margin-top: -1vh;
        /* Pull up closer to title */
    }

    /* Stack grid cell */
    .tt-devices-layer .tt-device-wrapper {
        grid-area: 1 / 1;
        width: 100%;
        height: 100%;
        /* Fill the flex area */
        display: flex;
        justify-content: center;
        align-items: center;
        /* Center vertically */
        position: relative !important;
    }

    /* Tripod CTA (Mobile Only) */
    /* Tripod CTA (Mobile Only) */
    .tt-tripod-cta {
        /* Flow layout - No more absolute mess */
        position: relative;
        margin-top: 20px;
        /* Minimal gap to ensure visibility */
        width: 100%;
        text-align: center;

        transition: opacity 0.4s ease, transform 0.4s ease;
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
        z-index: 100;
    }

    .tt-tripod-cta.visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .tt-tripod-link {
        font-family: 'Inter', sans-serif;
        font-size: 0.85rem;
        color: #0071e3;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
        padding: 8px 18px;
        border-radius: 99px;
        background: rgba(0, 113, 227, 0.08);
        border: 1px solid rgba(0, 113, 227, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        transition: all 0.2s ease;
    }

    .tt-tripod-link:hover {
        background: rgba(0, 113, 227, 0.15);
        transform: scale(1.02);
    }

    /* Ensure only the active slide captures interactions */
    .tt-devices-layer .tt-eco-dev {
        pointer-events: none;
    }

    /* Device scaling (single source of truth) */
    .tt-eco-laptop .device-laptop-container {
        /* Laptop design is large (760x480 + 900px base). Scale responsively. */
        /* Reduced from 0.36-0.48 to 0.28-0.38 for better proportion with tablet/mobile */
        transform: scale(clamp(0.28, 0.15 + 0.012vw, 0.38));
        transform-origin: center center;
        /* Scale from center */
    }

    .tt-eco-tablet .device-frame.device-tablet {
        transform: scale(clamp(0.85, 0.65 + 0.008vw, 1));
        transform-origin: center center;
        /* Scale from center */
    }

    .tt-eco-mobile .device-frame.device-mobile {
        transform: scale(clamp(0.8, 0.6 + 0.006vw, 0.95));
        transform-origin: center center;
        /* Scale from center */
    }

    /* Z-Index Stacking */
    .tt-devices-layer .tt-eco-laptop {
        z-index: 3;
    }

    .tt-devices-layer .tt-eco-tablet {
        z-index: 2;
    }

    .tt-devices-layer .tt-eco-mobile {
        z-index: 1;
    }
}

/* =================================================================
   ALIGNMENT & SPACING FIXES (Ecosystem)
   ================================================================= */
.tt-pricing-section .tt-section-title {
    text-align: center;
    /* Force centrage */
    margin-bottom: 60px;
    /* Espace plus respirant sous le titre */
}

.tt-pricing-section {
    padding-top: 60px;
    /* Réduire l'espace "futile" en haut (était ~150px cumulé) */
}

/* 3. Dynamic Labels (Synced Text) */
.tt-device-infos {
    margin-top: 2.5rem;
    position: relative;
    height: 40px;
    /* Fixed container height */
    width: 100%;
    display: flex;
    justify-content: center;
}

.tt-info-label {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    /* Premium "Glass" Badge Design (Dark Pill Style) */
    padding: 8px 20px;
    border-radius: 99px;

    /* High Contrast Dark Glass (Readable on White & Black) */
    background: rgba(20, 20, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Typography */
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: #ffffff;

    letter-spacing: 0.03em;
    white-space: nowrap;

    /* Animation */
    transition: opacity 0.4s ease, transform 0.4s ease;
    will-change: opacity, transform;
}

/* GLOBAL HIDE for injected mobile labels (Hidden on Desktop) */
.tt-mobile-label {
    display: none;
}

/* Hide mobile link on desktop - only show on mobile responsive */
.tt-mobile-link,
.tt-mobile-tripod-link {
    display: none;
}

/* Show mobile links on mobile responsive */
@media (max-width: 768px) {
    .tt-mobile-link {
        display: inline-block !important;
        margin-top: 12px;
        padding: 8px 20px;
        border-radius: 99px;
        background: rgba(0, 113, 227, 0.12);
        border: 1px solid rgba(0, 113, 227, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        font-family: 'Inter', sans-serif;
        font-size: 0.85rem;
        font-weight: 500;
        color: #0071e3;
        text-decoration: none;
        transition: all 0.3s ease;
    }
}



/* --- MOBILE LABEL + CTA INLINE LAYOUT --- */

/* 1. Reset the wrapper (make it a transparent flex container) */
.tt-label-mobile,
.tt-label-tablet {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    display: flex !important;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    /* Enable clicks on CTA */
}

/* 2. Style the text badge inside (restore glass look) */
.tt-label-mobile span,
.tt-label-tablet span {
    background: rgba(20, 20, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 20px;
    border-radius: 99px;
    color: #ffffff;
}

/* 3. Style the Inline CTA Button */
.tt-tripod-link-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 99px;

    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #0071e3;
    /* Apple Blue */
    background: rgba(0, 113, 227, 0.12);
    /* Subtle Blue Tint */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 113, 227, 0.2);

    white-space: nowrap;
    text-decoration: none;
    transition: all 0.3s ease;
}


/* =================================================================
   MOBILE AUDIT FIXES (Strict Isolation < 768px)
   ================================================================= */
@media (max-width: 768px) {

    /* --- 1. GENERAL RESET --- */
    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative;
    }

    .tt-section,
    .tt-hero,
    .tt-master-analysis,
    .tt-ecosystem-wrapper,
    .tt-arena-section {
        height: auto !important;
        /* Kill all VH heights */
        min-height: auto !important;
        overflow: visible !important;
        /* Allow expansion */
        /* Prevent horizontal scroll from scaled elements */
        width: 100% !important;
        max-width: 100vw !important;
        padding-top: 60px !important;
        /* Apple-Standard Mobile Spacing (Reduced from 100px) */
        padding-bottom: 60px !important;
    }

    .tt-premium-intro {
        height: auto !important;
        min-height: auto !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* --- 2. MASTER ANALYSIS (Chaque tir. Analysé) --- */
    .tt-section.tt-master-analysis {
        padding: 0 !important;
        /* Remove global 150px padding from .tt-section */
    }

    .tt-master-sticky,
    .tt-arena-sticky {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 60px !important;
        overflow: visible !important;
        /* Fix for accordion cut-off */
    }

    .tt-master-header {
        position: relative !important;
        margin-bottom: 40px !important;
        padding-top: 40px !important;
        text-align: center !important;
        z-index: 20;
    }

    .tt-master-visual-container {
        position: relative !important;
        /* No absolute centering */
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto 40px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Text Layers (Coach/Title) */
    .tt-text-layer {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }

    /* Annotations (Stack below image) */
    .tt-annotation {
        position: relative !important;
        opacity: 1 !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        padding: 20px !important;
        margin-top: 20px !important;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        text-align: center !important;
    }

    .tt-annot-line {
        display: none !important;
    }

    /* --- 3. ACHIEVEMENTS (Succès débloqués) --- */
    .tt-split-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    .tt-split-visual,
    .tt-split-content {
        width: 100% !important;
    }

    /* --- 4. ECOSYSTEM (Partout. Tout le temps) --- */
    .tt-ecosystem-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 20px !important;
    }

    .tt-ecosystem-sticky {
        position: relative !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        padding-top: 40px !important;
        padding-bottom: 60px !important;
        overflow: visible !important;
    }

    /* Labels Logic */
    .tt-device-infos {
        display: none !important;
    }

    /* Show Mobile Labels */
    .tt-mobile-label {
        display: inline-block !important;
        text-align: center;
        margin-top: 20px;
        padding: 8px 20px;
        border-radius: 99px;
        background: rgba(20, 20, 20, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        font-family: 'Inter', sans-serif;
        font-size: 0.9rem;
        font-weight: 500;
        color: #ffffff;
    }

    .tt-mobile-label .mobile-only {
        display: block !important;
        margin-top: 15px;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    /* --- 6. ANNOTATIONS: ACCORDION STYLE (Mobile Only) --- */
    .tt-annotation {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;

        /* Floating Card Spacing */
        width: calc(100% - 40px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        opacity: 1 !important;

        /* Premium Glass Effect */
        background: rgba(30, 30, 35, 0.7);
        /* Dark Mode Glass */
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        /* Deep shadow */

        border-radius: 16px;
        /* softer corners */
        padding: 18px 22px;
        margin-bottom: 14px;
        cursor: pointer;
        transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        z-index: 100;
        pointer-events: auto;
    }

    /* Light Mode Glass Override */
    [data-theme="light"] .tt-annotation {
        background: rgba(255, 255, 255, 0.75) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    }

    .tt-annotation:active {
        background: rgba(30, 30, 35, 0.9);
        transform: scale(0.99);
        /* Micro-interaction feedback */
    }

    [data-theme="light"] .tt-annotation:active {
        background: rgba(255, 255, 255, 0.9) !important;
    }

    .tt-annot-line {
        display: none !important;
    }

    /* --- MOBILE SCROLL REVEAL ANIMATION --- */
    .tt-reveal-init {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
        will-change: opacity, transform;
    }

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

    /* Accordion Header (Title + Icon) */
    .tt-annot-content h3 {
        font-size: 1.15rem;
        font-weight: 600;
        margin: 0;
        color: var(--tt-text);
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        letter-spacing: -0.01em;
    }

    /* The "+" Icon */
    .tt-annot-content h3::after {
        content: '+';
        font-weight: 400;
        font-size: 1.6rem;
        color: var(--tt-accent);
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        /* Bouncy spring */
        line-height: 1;
        margin-left: 10px;
    }

    /* Active State: Rotate to 'x' */
    .tt-annotation.active .tt-annot-content h3::after {
        transform: rotate(45deg);
        color: var(--tt-text-secondary);
        /* Grey out when open */
    }

    /* The Content (Default Hidden) */
    .tt-annot-content p {
        display: block !important;
        /* CRITICAL: Must be block to animate */
        max-height: 0;
        overflow: hidden;
        margin: 0;
        opacity: 0;
        font-size: 1rem;
        color: var(--tt-text-secondary);
        line-height: 1.6;
        /* Optimized Curve & Duration for Short Text */
        transition:
            max-height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
            opacity 0.4s ease 0.2s,
            margin-top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
            padding-top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        padding-top: 0;
    }

    /* Active State: Reveal */
    .tt-annotation.active .tt-annot-content p {
        display: block !important;
        /* Ensure it stays block */
        max-height: 150px !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-top: 12px;
        padding-top: 4px;
    }

    /* Force Block Layout to prevent Flex/Row issues */
    .tt-annotation,
    .tt-annot-content {
        display: block !important;
    }

    /* Reset Devices to Flex Column */
    .tt-devices-layer {
        display: flex !important;
        flex-direction: column !important;
        gap: 60px !important;
        margin-top: 0 !important;
    }

    .tt-device-wrapper {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Force Images/Mockups Scaling (Fit 390px width) */
    /* Laptop: 760px base. Scale 0.42 => ~320px width */
    .device-laptop-container {
        transform: scale(0.42) !important;
        transform-origin: center top !important;
        margin-bottom: -240px !important;
        width: auto !important;
    }

    /* Tablet: 600px base. Scale 0.55 => ~330px width */
    /* Tablet: 600px base. Scale 0.55 => ~330px width */
    .device-tablet {
        transform: scale(0.55) !important;
        transform-origin: center top !important;
        margin-bottom: -150px !important;
        /* Bulletproof Centering for Scaled Element */
        left: 50% !important;
        margin-left: -300px !important;
        /* Half of 600px */
        margin-right: auto !important;
    }

    /* Mobile: 510px base. Scale 0.65 => ~330px width */
    /* Mobile: 510px base. Scale 0.65 => ~330px width */
    /* Mobile: 510px base. Scale 0.65 => ~331px width */
    .device-mobile {
        transform: scale(0.65) !important;
        transform-origin: center top !important;
        margin-bottom: -60px !important;
        /* Bulletproof Centering for Scaled Element */
        left: 50% !important;
        margin-left: -255px !important;
        /* Half of 510px */
        margin-right: auto !important;
    }

    /* --- 5. TYPOGRAPHY & SPACING (Mobile Refined) --- */
    .tt-hero-title {
        font-size: 2.5rem !important;
        /* Reduced from 3rem */
        padding: 0 10px;
        text-align: center !important;
        /* Apple Center for Hero */
        padding-left: 0 !important;
    }

    .tt-hero-subtitle {
        text-align: left !important;
        padding-left: 5vw !important;
        padding-right: 5vw !important;
        /* Ensure readable width */
        margin-top: 15px;
    }

    .tt-section-title {
        font-size: 2.5rem !important;
        line-height: 1.1;
        overflow-wrap: break-word;
        text-align: left !important;
        /* Apple Left-Align */
        margin-left: 0;
    }

    .tt-eyebrow {
        text-align: left !important;
        display: block !important;
        margin-bottom: 5px;
    }

    .tt-section-desc {
        text-align: left !important;
        margin-left: 0;
        max-width: 100% !important;
        /* Let text fill width naturally */
        font-size: 1.1rem !important;
        /* Readable body size */
    }

    .tt-sticky-title {
        font-size: 2.15rem !important;
        line-height: 1.1;
        text-align: left !important;
    }

    /* Ensure containers don't force centering */
    .tt-header-content,
    .tt-master-sticky,
    .tt-ecosystem-header {
        text-align: left !important;
        align-items: flex-start !important;
        /* Removed padding-left: 0 to allow natural padding */
    }

    /* Center Premium & Precision Intro Sections (User Request) */
    .tt-premium-title,
    .tt-premium-subtitle,
    .tt-gradient-text-purple,
    .tt-eyebrow {
        text-align: center !important;
        width: 100% !important;
        margin-left: 0 !important;
        padding: 0 20px !important;
        /* Consistent mobile padding */
    }

    /* Mobile Link Styling (Button Style) */
    .tt-mobile-link {
        display: inline-block !important;
        margin-top: 15px;

        /* Premium "Glass" Button Design (Similar to Label but clickable look) */
        padding: 10px 24px;
        border-radius: 99px;
        background: rgba(0, 113, 227, 0.1);
        /* Subtle Blue Tint */
        border: 1px solid rgba(0, 113, 227, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        font-family: 'Inter', sans-serif;
        font-size: 0.9rem;
        color: #2997ff;
        /* Apple Blue Text */
        text-decoration: none;
        font-weight: 500;
        transition: transform 0.2s ease, background 0.2s ease;
    }

    .tt-mobile-link:hover {
        background: rgba(0, 113, 227, 0.2);
        transform: scale(1.02);
        text-decoration: none;
    }
}

/* =========================================
   Z FOLD 5 FIXES (344px and below)
   ========================================= */
@media (max-width: 344px) {

    /* Fix 1: "L'entrainement sans limite" - reduce font to prevent awkward wrapping */
    .tt-sticky-title {
        font-size: 1.85rem !important;
        line-height: 1.15 !important;
    }

    /* Fix 2: "Partout. Tout le temps." - reduce font to keep on fewer lines */
    .tt-ecosystem-title,
    .tt-section-title {
        font-size: 2.1rem !important;
        line-height: 1.15 !important;
    }

    /* Fix 3: Fix squashed checkmark icons in badges list */
    .tt-badge-item::before,
    .tt-badge-item svg {
        min-width: 20px !important;
        min-height: 20px !important;
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
    }

    /* Ensure badge items have enough gap */
    .tt-badge-item {
        gap: 12px !important;
    }
}