/* ============================================================
   SMOKE TEST LANDING PAGE - Scrollytelling Styles
   Palette Temposy:
     Primary Dark Blue: #2E4A5C
     Primary Teal:      #76C9B2
     Teal Gradient:     #8AD4C0 → #5BB89E
     Text Secondary:    #8E9AA3
     Background:        #F5F5F5
     Border:            #E5E5E5
   ============================================================ */

/* --- Full-Screen Takeover --- */
body.landing-active {
    overflow: hidden !important;
}
body.landing-active .sidebar,
body.landing-active .mobile-header,
body.landing-active .sidebar-overlay { display: none !important; }
body.landing-active .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    min-height: 0 !important;
}
body.landing-active #pageTitle,
body.landing-active .main-content > .flex:first-child { display: none !important; }

/* The landing section = fixed fullscreen overlay */
#section-landing.active {
    position: fixed !important;
    inset: 0;
    z-index: 9999;
    display: block !important;
    overflow-y: auto;
    overflow-x: hidden;
    background: #2E4A5C;
}

/* --- Back Button --- */
.landing-back-btn {
    position: fixed; top: 24px; left: 24px; z-index: 10000;
    background: rgba(255,255,255,0.15); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff; padding: 10px 20px; border-radius: 100px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: all 0.3s ease; letter-spacing: 0.3px;
}
.landing-back-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-1px);
}
.landing-back-btn.dark {
    background: rgba(46,74,92,0.08); border-color: rgba(46,74,92,0.12); color: #2E4A5C;
}
.landing-back-btn.dark:hover { background: rgba(46,74,92,0.15); }

/* --- Landing Container --- */
.landing-page {
    width: 100%; overflow-x: clip; overflow-y: visible;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   S1: HERO
   ============================================================ */
.landing-hero {
    height: 100vh; min-height: 600px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: #2E4A5C; color: #fff;
    position: relative; z-index: 10;
    text-align: center; padding: 0 24px;
}
.hero-content { max-width: 900px; position: relative; z-index: 2; }
.hero-logo {
    width: clamp(180px, 22vw, 320px); margin: 0 auto 32px;
}
.hero-logo svg { width: 100%; height: auto; }
.hero-title {
    font-size: clamp(38px, 7vw, 76px); font-weight: 700;
    line-height: 1.05; letter-spacing: -0.03em;
    margin-bottom: 28px;
}
.hero-subtitle {
    font-size: clamp(16px, 2.2vw, 22px); line-height: 1.6;
    opacity: 0.55; max-width: 600px; margin: 0 auto;
    font-weight: 300;
}
.hero-scroll-indicator {
    position: absolute; bottom: 40px; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
    gap: 12px; font-size: 12px; opacity: 0.35;
    letter-spacing: 2px; text-transform: uppercase;
}
.scroll-arrow {
    width: 20px; height: 20px;
    border-right: 1.5px solid #76C9B2; border-bottom: 1.5px solid #76C9B2;
    transform: rotate(45deg); animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
    0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.4; }
    50% { transform: rotate(45deg) translateY(6px); opacity: 0.9; }
}

/* ============================================================
   S1B: IL MANIFESTO - Scrollytelling puro
   Sfondo scuro, testo centrato, una frase alla volta
   Container = 4 steps × 100vh = 400vh
   ============================================================ */
.landing-section-manifesto {
    position: relative; z-index: 5;
    height: 400vh;
    background: #1a2f3a;
}
.manifesto-sticky {
    position: sticky; top: 0;
    height: 100vh; width: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 0 24px;
}
.manifesto-text-area {
    position: relative;
    max-width: 800px; width: 100%;
    text-align: center;
    min-height: 120px;
}
.manifesto-line {
    position: absolute; top: 0; left: 0; right: 0;
    font-size: clamp(28px, 4.5vw, 52px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: rgba(255,255,255,0.85);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
}
.manifesto-line.active {
    opacity: 1;
    position: relative;
    transform: translateY(0);
    pointer-events: auto;
}
.manifesto-line em {
    font-style: normal;
    color: #76C9B2;
}
.manifesto-accent {
    color: #76C9B2 !important;
}

/* ============================================================
   S2: TEMPO INDIVIDUALE (Sticky Phone + Text)
   Container height = steps × 100vh
   ============================================================ */
.landing-section-individuale {
    position: relative; z-index: 1;
    height: 300vh;
    background: #fff;
}
.individuale-sticky {
    position: sticky; top: 0;
    display: flex; align-items: center; justify-content: center;
    gap: 80px; height: 100vh; width: 100%;
    padding: 0 8%; background: #fff;
    z-index: 2;
}

/* Text area: stacked panels, only one visible at a time */
.individuale-text-area {
    max-width: 420px; position: relative;
    min-height: 160px;
}
.text-panel {
    opacity: 0; position: absolute; top: 0; left: 0; right: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}
.text-panel.active {
    opacity: 1; position: relative;
    transform: translateY(0);
    pointer-events: auto;
}
.text-panel h2 {
    font-size: clamp(28px, 3vw, 40px); font-weight: 700;
    line-height: 1.15; letter-spacing: -0.02em;
    margin-bottom: 16px; color: #2E4A5C;
}
.text-panel p {
    font-size: clamp(15px, 1.4vw, 18px); line-height: 1.7;
    color: #8E9AA3; font-weight: 400;
}

/* Phone mockup */
.phone-mockup-wrapper {
    position: relative; flex-shrink: 0;
    width: 280px;
}
.phone-mockup {
    position: relative; width: 100%;
    background: #2E4A5C; border-radius: 40px;
    padding: 12px; box-shadow: 0 40px 80px rgba(46,74,92,0.2);
}
.phone-screen {
    position: relative; width: 100%;
    aspect-ratio: 9/19.5;
    border-radius: 30px; overflow: hidden;
    background: #2E4A5C;
}
.screen-content {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.6s ease;
}
.screen-content.active { opacity: 1; }
.screen-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 24px; text-align: center; color: #fff;
}
.screen-placeholder .screen-icon {
    font-size: 48px; margin-bottom: 16px; opacity: 0.8;
}
.screen-placeholder .screen-label {
    font-size: 14px; font-weight: 500; opacity: 0.7;
    letter-spacing: 1px; text-transform: uppercase;
}

/* ============================================================
   S3: TEMPO COLLETTIVO (Background Transition)
   ============================================================ */
.landing-section-collettivo {
    min-height: 100vh; position: relative;
    overflow: hidden; padding: 140px 8%;
}
.collettivo-bg {
    position: absolute; inset: 0; z-index: 0;
    background: #F5F5F5;
}
.collettivo-content {
    position: relative; z-index: 1;
    text-align: center; color: #fff;
}
.collettivo-title {
    font-size: clamp(32px, 5vw, 60px); font-weight: 700;
    line-height: 1.1; letter-spacing: -0.03em;
    margin-bottom: 20px;
}
.collettivo-body {
    font-size: clamp(16px, 1.8vw, 20px); line-height: 1.7;
    opacity: 0.7; max-width: 560px; margin: 0 auto;
    font-weight: 300;
}

/* Floating UI Cards */
.floating-ui-elements {
    display: flex; justify-content: center;
    gap: 28px; margin-top: 72px; flex-wrap: wrap;
}
.float-card {
    background: #fff; border-radius: 20px;
    box-shadow: 0 24px 64px rgba(46,74,92,0.2);
    overflow: hidden; width: 200px;
    padding: 24px; text-align: center;
    color: #2E4A5C;
}
.float-card-icon { font-size: 36px; margin-bottom: 12px; }
.float-card-label {
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase;
    color: #76C9B2;
}

/* ============================================================
   S4: TEMPO SOCIALE (Parallax Photo Cascade)
   ============================================================ */
.landing-section-sociale {
    min-height: 100vh; padding: 140px 8%;
    overflow: hidden; background: #F5F5F5;
    text-align: center;
}
.sociale-title {
    font-size: clamp(32px, 5vw, 60px); font-weight: 700;
    line-height: 1.1; letter-spacing: -0.03em;
    margin-bottom: 16px; color: #2E4A5C;
}
.sociale-subtitle {
    font-size: clamp(16px, 1.8vw, 20px); line-height: 1.7;
    color: #8E9AA3; max-width: 560px; margin: 0 auto 100px;
    font-weight: 400;
}
.photo-cascade {
    display: flex; gap: 16px;
    justify-content: center; max-width: 900px;
    margin: 0 auto;
}
.cascade-col {
    display: flex; flex-direction: column;
    gap: 16px; flex: 1;
}
.cascade-card {
    border-radius: 16px; overflow: hidden;
    background: linear-gradient(135deg, #8AD4C0, #76C9B2);
    aspect-ratio: 3/4;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 32px;
    box-shadow: 0 4px 20px rgba(46,74,92,0.08);
}
.cascade-card:nth-child(2) { aspect-ratio: 4/5; }
.cascade-card:nth-child(3) { aspect-ratio: 3/4; }

/* ============================================================
   S5: CTA (Call To Action)
   ============================================================ */
.landing-section-cta {
    min-height: 80vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2E4A5C 0%, #1a2f3a 100%);
    color: #fff; text-align: center;
    padding: 100px 24px;
}
.cta-content { max-width: 600px; }
.cta-content h2 {
    font-size: clamp(30px, 5vw, 52px); font-weight: 700;
    line-height: 1.1; letter-spacing: -0.03em;
    margin-bottom: 16px;
}
.cta-content > p {
    font-size: clamp(16px, 1.8vw, 20px); line-height: 1.6;
    opacity: 0.65; margin-bottom: 40px; font-weight: 300;
}
.cta-form {
    display: flex; gap: 12px;
    justify-content: center; flex-wrap: wrap;
}
.cta-form input[type="email"] {
    padding: 16px 24px; border-radius: 14px;
    border: 2px solid rgba(118,201,178,0.3);
    background: rgba(255,255,255,0.08);
    color: #fff; font-size: 16px; min-width: 300px;
    backdrop-filter: blur(12px);
    font-family: inherit; outline: none;
    transition: border-color 0.3s ease;
}
.cta-form input[type="email"]::placeholder { color: rgba(255,255,255,0.4); }
.cta-form input[type="email"]:focus { border-color: #76C9B2; }
.cta-form button {
    padding: 16px 36px; border-radius: 14px;
    border: none; background: #76C9B2; color: #fff;
    font-size: 16px; font-weight: 600; cursor: pointer;
    font-family: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cta-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(118,201,178,0.3);
    background: #8AD4C0;
}
.cta-form button:active { transform: translateY(0); }
.cta-form button:disabled {
    opacity: 0.6; cursor: not-allowed; transform: none;
}
.cta-feedback {
    margin-top: 20px; font-size: 14px;
    min-height: 24px; font-weight: 400;
}
.cta-feedback.success { color: #8AD4C0; }
.cta-feedback.error { color: #fca5a5; }
.cta-counter {
    margin-top: 16px; font-size: 13px;
    opacity: 0.4; letter-spacing: 0.5px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .individuale-sticky {
        flex-direction: column-reverse; gap: 32px;
        padding: 0 24px;
    }
    .phone-mockup-wrapper { width: 200px; }
    .landing-section-individuale { height: 250vh; }

    .manifesto-line {
        font-size: clamp(22px, 5vw, 32px);
    }
    .landing-section-manifesto { height: 350vh; }

    .floating-ui-elements { gap: 16px; }
    .float-card { width: 140px; padding: 16px; }

    .photo-cascade { gap: 8px; }

    .cta-form { flex-direction: column; align-items: center; }
    .cta-form input[type="email"] { min-width: 0; width: 100%; max-width: 360px; }
    .cta-form button { width: 100%; max-width: 360px; }

    .landing-back-btn { top: 16px; left: 16px; padding: 8px 16px; font-size: 12px; }
}