#landing-page *{ margin: 0; padding: 0; box-sizing: border-box; } #landing-page{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px !important; background: #000; color: #fff; line-height: 1.6; overflow-x: hidden; } #landing-page span{ font-size: inherit !important; line-height: inherit !important; } #landing-page{ --reveal-distance: 18px; --reveal-duration: 600ms; --reveal-ease: cubic-bezier(0.21, 0.61, 0.35, 1); } #landing-page.js-enabled .scroll-reveal{ opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease); transition-delay: var(--reveal-delay, 0ms); } #landing-page.js-enabled .scroll-reveal.is-visible{ opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { #landing-page.js-enabled .scroll-reveal{ transition: none; transform: none; } } #landing-page main{ display: flex; flex-direction: column; } #landing-page section{ width: 100%; } @media (max-width: 600px) { #landing-page main{ gap: 32px; } #landing-page .v2 .section + .section, #landing-page .v7 .section + .section{ margin-top: 32px; } } #landing-page .trust-indicators{ display: flex; gap: 32px; margin-top: 48px; flex-wrap: wrap; justify-content: center; text-align: center; } #landing-page .indicator{ text-align: center; } #landing-page .indicator-value{ font-size: clamp(20px, 4vw, 30px) !important; font-weight: 300; color: var(--accent); } #landing-page .indicator-label{ font-size: clamp(12px, 2.4vw, 14px) !important; color: var(--text-muted); margin-top: 6px; letter-spacing: 0.02em; } /* v1 ultra minimal */ #landing-page .v1{ --accent: #00bc8c; --accent-dim: rgba(0, 188, 140, 0.2); --bg-dark: #000; --text-primary: #fff; --text-muted: rgba(255,255,255,0.6); --text-hero: clamp(48px, 10vw, 96px); --text-lg: clamp(18px, 3vw, 24px); --text-base: clamp(16px, 2.5vw, 20px); --text-sm: clamp(14px, 2vw, 16px); background: var(--bg-dark); color: var(--text-primary); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px 24px; } #landing-page .v1 .hero-text{ font-size: var(--text-hero) !important; font-weight: 200; line-height: 1.1; margin-bottom: 40px; } #landing-page .v1 .highlight{ color: var(--accent); } #landing-page .v1 .subtitle{ font-size: var(--text-lg) !important; color: var(--text-muted); max-width: 500px; margin-bottom: 60px; } #landing-page .v1 .cta-btn{ background: var(--accent); color: var(--bg-dark); border: none; padding: 18px 48px; font-size: var(--text-base) !important; font-weight: 600; border-radius: 50px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; } #landing-page .v1 .cta-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 40px var(--accent-dim); } /* v2 problem solution */ #landing-page .v2{ --accent: #00bc8c; --accent-dim: rgba(0, 188, 140, 0.15); --danger: #e74c3c; --bg-dark: #000; --bg-elevated: #111; --text-primary: #fff; --text-muted: rgba(255,255,255,0.6); --text-hero: clamp(40px, 8vw, 72px); --text-2xl: clamp(28px, 5vw, 48px); --text-lg: clamp(18px, 3vw, 24px); --text-base: clamp(16px, 2.5vw, 20px); --text-sm: clamp(14px, 2vw, 16px); background: var(--bg-dark); color: var(--text-primary); } #landing-page .v2 .section{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 80px 24px; max-width: 900px; width: 100%; margin: 0 auto; } #landing-page .v2 .hero-text{ font-size: var(--text-hero) !important; font-weight: 200; line-height: 1.15; margin-bottom: 40px; } #landing-page .v2 .highlight{ color: var(--accent); } #landing-page .v2 .problem{ color: var(--danger); text-decoration: line-through; text-decoration-thickness: 2px; } #landing-page .v2 .subtitle{ font-size: var(--text-lg) !important; color: var(--text-muted); max-width: 550px; margin-bottom: 50px; } #landing-page .v2 .cta-btn{ background: var(--accent); color: var(--bg-dark); border: none; padding: 18px 48px; font-size: var(--text-base) !important; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.2s; text-decoration: none; } #landing-page .v2 .cta-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 40px var(--accent-dim); } #landing-page .v2 .problem-list{ display: flex; flex-direction: column; gap: 24px; margin-bottom: 60px; } #landing-page .v2 .problem-item{ font-size: var(--text-lg) !important; color: var(--text-muted); padding-left: 45px; position: relative; text-align: left; } #landing-page .v2 .problem-item::before{ content: "×"; position: absolute; left: 0; color: var(--danger); font-size: 32px !important; line-height: 1; opacity: 0.7; } #landing-page .v2 .solution-list{ display: flex; flex-direction: column; gap: 24px; margin-bottom: 60px; } #landing-page .v2 .solution-item{ font-size: var(--text-lg) !important; color: var(--text-primary); padding-left: 45px; position: relative; text-align: left; } #landing-page .v2 .solution-item::before{ content: "✓"; position: absolute; left: 0; color: var(--accent); font-size: 24px !important; font-weight: bold; } /* v3 animated visual */ #landing-page .v3{ --accent: #00bc8c; --accent-dim: rgba(0, 188, 140, 0.15); --bg-dark: #000; --text-primary: #fff; --text-muted: rgba(255,255,255,0.75); --text-hero: clamp(44px, 9vw, 88px); --text-lg: clamp(18px, 3vw, 24px); --text-base: clamp(16px, 2.5vw, 20px); background: var(--bg-dark); color: var(--text-primary); } #landing-page .v3 .hero{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px 24px; position: relative; overflow: hidden; } #landing-page .v3 .floating-nodes{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; } #landing-page .v3 .node{ position: absolute; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; opacity: 0.3; animation: v3-float 20s infinite ease-in-out; } #landing-page .v3 .node:nth-child(1){ top: 20%; left: 10%; animation-delay: 0s; } #landing-page .v3 .node:nth-child(2){ top: 60%; left: 85%; animation-delay: -5s; } #landing-page .v3 .node:nth-child(3){ top: 80%; left: 20%; animation-delay: -10s; } #landing-page .v3 .node:nth-child(4){ top: 30%; left: 75%; animation-delay: -15s; } #landing-page .v3 .node:nth-child(5){ top: 70%; left: 50%; animation-delay: -7s; } #landing-page .v3 .node::after{ content: ""; position: absolute; width: 100px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); opacity: 0.2; transform-origin: left center; animation: v3-pulse-line 3s infinite ease-in-out; } @keyframes v3-float { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(30px, -30px); } 50% { transform: translate(-20px, 20px); } 75% { transform: translate(40px, 10px); } } @keyframes v3-pulse-line { 0%, 100% { opacity: 0.1; width: 50px; } 50% { opacity: 0.3; width: 150px; } } #landing-page .v3 .hero-content{ position: relative; z-index: 1; } #landing-page .v3 .badge{ display: inline-block; background: var(--accent-dim); color: var(--accent); padding: 8px 20px; border-radius: 50px; font-size: 14px !important; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 40px; } #landing-page .v3 .hero-text{ font-size: var(--text-hero) !important; font-weight: 200; line-height: 1.1; margin-bottom: 30px; } #landing-page .v3 .highlight{ color: var(--accent); } #landing-page .v3 .subtitle{ font-size: var(--text-lg) !important; color: var(--text-muted); max-width: 500px; margin: 0 auto 50px; } #landing-page .v3 .cta-btn{ background: var(--accent); color: var(--bg-dark); border: none; padding: 18px 48px; font-size: var(--text-base) !important; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.3s; text-decoration: none; display: inline-block; } #landing-page .v3 .cta-btn:hover{ transform: scale(1.05); box-shadow: 0 0 60px var(--accent-dim); } #landing-page .v3 .features{ display: flex; gap: 40px; margin-top: 80px; flex-wrap: wrap; justify-content: center; } #landing-page .v3 .feature{ font-size: 14px !important; color: var(--text-muted); display: flex; align-items: center; gap: 8px; } #landing-page .v3 .feature::before{ content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; } /* v4 bold statement */ #landing-page .v4{ --accent: #00bc8c; --accent-dim: rgba(0, 188, 140, 0.2); --bg-dark: #000; --text-primary: #fff; --text-muted: rgba(255,255,255,0.4); --text-giant: clamp(60px, 15vw, 160px); --text-lg: clamp(18px, 3vw, 24px); --text-base: clamp(16px, 2.5vw, 20px); background: var(--bg-dark); color: var(--text-primary); } #landing-page .v4 .section{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 60px 24px; } #landing-page .v4 .giant-text{ font-size: var(--text-giant) !important; font-weight: 100; line-height: 0.95; letter-spacing: -0.03em; } #landing-page .v4 .giant-text-compact{ font-size: clamp(40px, 10vw, 100px) !important; } #landing-page .v4 .highlight{ color: var(--accent); font-weight: 300; } #landing-page .v4 .outline-text{ -webkit-text-stroke: 1px var(--accent); color: transparent; } #landing-page .v4 .subtitle{ font-size: var(--text-lg) !important; color: var(--text-muted); max-width: 400px; margin: 60px auto; line-height: 1.6; } #landing-page .v4 .cta-btn{ background: transparent; color: var(--accent); border: 2px solid var(--accent); padding: 18px 48px; font-size: var(--text-base) !important; font-weight: 500; border-radius: 0; cursor: pointer; transition: all 0.3s; text-decoration: none; text-transform: uppercase; letter-spacing: 3px; } #landing-page .v4 .cta-btn:hover{ background: var(--accent); color: var(--bg-dark); } #landing-page .v4 .manifesto{ font-size: var(--text-lg) !important; color: var(--text-muted); max-width: 600px; line-height: 2; } #landing-page .v4 .manifesto strong{ color: var(--text-primary); font-weight: 400; } /* v5 comparison cards */ #landing-page .v5{ --accent: #00bc8c; --accent-dim: rgba(0, 188, 140, 0.15); --danger: #e74c3c; --bg-dark: #000; --bg-card: #0d0d0d; --bg-elevated: #1a1a1a; --text-primary: #fff; --text-muted: rgba(255,255,255,0.5); --text-hero: clamp(36px, 7vw, 64px); --text-xl: clamp(24px, 4vw, 36px); --text-lg: clamp(18px, 3vw, 22px); --text-base: clamp(16px, 2.5vw, 18px); --text-sm: clamp(14px, 2vw, 16px); background: var(--bg-dark); color: var(--text-primary); } #landing-page .v5 .section{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 80px 24px; } #landing-page .v5 .hero-text{ font-size: var(--text-hero) !important; font-weight: 200; line-height: 1.2; margin-bottom: 60px; } #landing-page .v5 .highlight{ color: var(--accent); } #landing-page .v5 .comparison{ display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; max-width: 900px; margin-bottom: 60px; } #landing-page .v5 .card{ flex: 1; min-width: 280px; max-width: 400px; background: var(--bg-card); border-radius: 20px; padding: 40px 30px; text-align: left; border: 2px solid transparent; transition: all 0.3s; } #landing-page .v5 .card-old{ opacity: 0.85; } #landing-page .v5 .card-new{ border-color: var(--accent); } #landing-page .v5 .card-label{ font-size: var(--text-sm) !important; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; opacity: 0.7; } #landing-page .v5 .card-new .card-label{ color: var(--accent); opacity: 1; } #landing-page .v5 .card-title{ font-size: var(--text-xl) !important; font-weight: 300; margin-bottom: 30px; } #landing-page .v5 .feature{ display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; font-size: var(--text-base) !important; } #landing-page .v5 .feature-icon{ flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 18px !important; } #landing-page .v5 .card-old .feature-icon{ color: var(--danger); opacity: 0.6; } #landing-page .v5 .card-new .feature-icon{ color: var(--accent); } #landing-page .v5 .feature-text{ color: var(--text-muted); } #landing-page .v5 .card-old .feature-text{ color: rgba(255,255,255,0.78); } #landing-page .v5 .card-new .feature-text{ color: var(--text-primary); } #landing-page .v5 .cta-btn{ background: var(--accent); color: var(--bg-dark); border: none; padding: 18px 48px; font-size: var(--text-base) !important; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.2s; text-decoration: none; } #landing-page .v5 .cta-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 40px var(--accent-dim); } #landing-page .v5 .footer-text{ margin-top: 40px; font-size: var(--text-sm) !important; color: var(--text-muted); } /* v6 stats focused */ #landing-page .v6{ --accent: #00bc8c; --accent-dim: rgba(0, 188, 140, 0.15); --bg-dark: #000; --bg-card: #111; --text-primary: #fff; --text-muted: rgba(255,255,255,0.5); --text-hero: clamp(40px, 8vw, 72px); --text-2xl: clamp(36px, 6vw, 56px); --text-lg: clamp(18px, 3vw, 24px); --text-base: clamp(16px, 2.5vw, 18px); --text-sm: clamp(13px, 2vw, 15px); background: var(--bg-dark); color: var(--text-primary); } #landing-page .v6 .section{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 80px 24px; } #landing-page .v6 .hero-text{ font-size: var(--text-hero) !important; font-weight: 200; line-height: 1.15; margin-bottom: 30px; } #landing-page .v6 .highlight{ color: var(--accent); } #landing-page .v6 .subtitle{ font-size: var(--text-lg) !important; color: var(--text-muted); max-width: 500px; margin-bottom: 60px; } #landing-page .v6 .stats-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 30px; max-width: 600px; margin-bottom: 60px; width: 100%; } #landing-page .v6 .stat{ background: var(--bg-card); padding: 30px 20px; border-radius: 16px; min-width: 0; } #landing-page .v6 .stat-number{ font-size: clamp(20px, 3.5vw, 28px) !important; font-weight: 300; color: var(--accent); margin-bottom: 8px; letter-spacing: 0.02em; } #landing-page .v6 .stat-label{ font-size: var(--text-sm) !important; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; } #landing-page .v6 .cta-btn{ background: var(--accent); color: var(--bg-dark); border: none; padding: 18px 48px; font-size: var(--text-base) !important; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.2s; text-decoration: none; } #landing-page .v6 .cta-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 40px var(--accent-dim); } #landing-page .v6 .process-row{ display: flex; align-items: center; gap: 20px; margin-bottom: 80px; flex-wrap: wrap; justify-content: center; } #landing-page .v6 .process-step{ display: flex; align-items: center; gap: 12px; font-size: var(--text-base) !important; color: var(--text-muted); } #landing-page .v6 .process-num{ width: 32px; height: 32px; border: 1px solid var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px !important; color: var(--accent); } #landing-page .v6 .process-arrow{ color: var(--text-muted); opacity: 0.3; } @media (max-width: 600px) { #landing-page .v6 .process-arrow{ display: none; } #landing-page .v6 .process-row{ gap: 15px; } #landing-page .v6 .stats-grid{ grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; } #landing-page .v6 .stat{ padding: 22px 16px; } } /* v7 question hook */ #landing-page .v7{ --accent: #00bc8c; --accent-dim: rgba(0, 188, 140, 0.2); --bg-dark: #000; --text-primary: #fff; --text-muted: rgba(255,255,255,0.4); --text-hero: clamp(32px, 7vw, 60px); --text-xl: clamp(24px, 5vw, 42px); --text-lg: clamp(18px, 3vw, 24px); --text-base: clamp(16px, 2.5vw, 18px); background: var(--bg-dark); color: var(--text-primary); } #landing-page .v7 .section{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 60px 24px; } #landing-page .v7 .v7-hero{ position: relative; } #landing-page .v7 .question{ font-size: var(--text-hero) !important; font-weight: 200; color: var(--text-muted); margin-bottom: 60px; line-height: 1.3; } #landing-page .v7 .answer{ font-size: var(--text-xl) !important; font-weight: 300; margin-bottom: 40px; max-width: 600px; } #landing-page .v7 .answer-tight{ margin-bottom: 20px; } #landing-page .v7 .highlight{ color: var(--accent); } #landing-page .v7 .explanation{ font-size: var(--text-lg) !important; color: var(--text-muted); max-width: 500px; margin-bottom: 60px; } #landing-page .v7 .cta-btn{ background: var(--accent); color: var(--bg-dark); border: none; padding: 20px 56px; font-size: var(--text-base) !important; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.2s; text-decoration: none; } #landing-page .v7 .cta-btn:hover{ transform: scale(1.05); box-shadow: 0 0 50px var(--accent-dim); } #landing-page .v7 .brand{ position: absolute; top: 30px; left: 30px; font-size: 18px !important; font-weight: 600; color: var(--accent); letter-spacing: 1px; } #landing-page .v7 .features-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; max-width: 800px; width: 100%; margin-top: 60px; padding: 0 8px; } #landing-page .v7 .feature-item{ text-align: left; } #landing-page .v7 .feature-title{ font-size: var(--text-lg) !important; font-weight: 500; margin-bottom: 10px; color: var(--accent); overflow-wrap: break-word; } #landing-page .v7 .feature-desc{ font-size: var(--text-base) !important; color: var(--text-muted); overflow-wrap: break-word; } @media (max-width: 600px) { #landing-page .v7 .features-grid{ grid-template-columns: 1fr; gap: 24px; margin-top: 40px; padding: 0; } } /* v8 gradient accent */ #landing-page .v8{ --accent: #00bc8c; --accent-2: #00d9ff; --bg-dark: #050508; --text-primary: #fff; --text-muted: rgba(255,255,255,0.5); --text-hero: clamp(44px, 9vw, 84px); --text-xl: clamp(24px, 4vw, 36px); --text-lg: clamp(18px, 3vw, 22px); --text-base: clamp(16px, 2.5vw, 18px); background: var(--bg-dark); color: var(--text-primary); } #landing-page .v8 .hero{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 60px 24px; position: relative; } #landing-page .v8 .hero::before{ content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 188, 140, 0.15) 0%, transparent 70%); pointer-events: none; } #landing-page .v8 .content{ position: relative; z-index: 1; } #landing-page .v8 .badge{ display: inline-block; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 14px !important; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 30px; } #landing-page .v8 .hero-text{ font-size: var(--text-hero) !important; font-weight: 200; line-height: 1.1; margin-bottom: 30px; } #landing-page .v8 .gradient-text{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } #landing-page .v8 .subtitle{ font-size: var(--text-lg) !important; color: var(--text-muted); max-width: 550px; margin: 0 auto 50px; } #landing-page .v8 .cta-btn{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--bg-dark); border: none; padding: 18px 48px; font-size: var(--text-base) !important; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.3s; text-decoration: none; display: inline-block; } #landing-page .v8 .cta-btn:hover{ transform: scale(1.05); box-shadow: 0 0 40px rgba(0, 188, 140, 0.4); }