/* ============================================================ Landing Page Styles — i18n-aware, colorful quantum design Extends the quantum design system from style.css ============================================================ */ /* Base — direction comes from , font from i18n CSS vars */ .landing-page { font-family: var(--font-secondary, "Exo 2", system-ui, -apple-system, sans-serif); background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; position: relative; padding-top: 0; } /* Floating gradient mesh — slow-moving full-page background */ .landing-page::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 700px 500px at 20% 30%, rgba(0, 255, 136, 0.06) 0%, transparent 70%), radial-gradient(ellipse 600px 600px at 80% 20%, rgba(0, 153, 255, 0.05) 0%, transparent 70%), radial-gradient(ellipse 500px 400px at 60% 70%, rgba(128, 0, 255, 0.04) 0%, transparent 70%), radial-gradient(ellipse 450px 450px at 30% 80%, rgba(255, 100, 200, 0.03) 0%, transparent 70%); animation: meshDrift 20s ease-in-out infinite alternate; } /* ── Scroll Reveal Animation ────────────────────────── */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } .reveal-delay-5 { transition-delay: 0.5s; } .reveal-delay-6 { transition-delay: 0.6s; } /* ── Minimal Header ─────────────────────────────────── */ .landing-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; background: rgba(10, 10, 15, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: background 0.4s ease, box-shadow 0.4s ease; } .landing-header.scrolled { background: rgba(10, 10, 15, 0.95); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4); } .landing-header__logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .landing-header__logo img { height: 36px; width: auto; } .landing-header__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.5rem; background: var(--gradient-primary); color: #0a0a0f; border: none; border-radius: var(--radius-xl); font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; position: relative; overflow: hidden; } .landing-header__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 255, 136, 0.3); } /* ── Hero Section ────────────────────────────────────── */ .landing-hero { position: relative; min-height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6rem 2rem 3rem; overflow: hidden; } .landing-hero__bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 20%, rgba(0, 255, 136, 0.18) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(0, 153, 255, 0.15) 0%, transparent 40%), radial-gradient(ellipse at 80% 60%, rgba(128, 0, 255, 0.10) 0%, transparent 40%), radial-gradient(ellipse at 70% 90%, rgba(255, 100, 200, 0.06) 0%, transparent 35%), radial-gradient(circle at 50% 50%, rgba(0, 255, 136, 0.03) 0%, transparent 70%), var(--bg-primary); z-index: 0; animation: heroBgPulse 10s ease-in-out infinite; } @keyframes heroBgPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } } /* Animated grid lines */ .landing-hero__grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .landing-hero__grid .grid-line { position: absolute; width: 1px; height: 100%; background: linear-gradient(to bottom, transparent 10%, rgba(0, 255, 136, 0.18) 50%, transparent 90%); animation: quantumFlow 4s linear infinite; box-shadow: 0 0 6px rgba(0, 255, 136, 0.05); } .landing-hero__grid .grid-line:nth-child(1) { left: 10%; animation-delay: 0s; } .landing-hero__grid .grid-line:nth-child(2) { left: 25%; animation-delay: 0.7s; background: linear-gradient(to bottom, transparent, rgba(0, 153, 255, 0.12), transparent); } .landing-hero__grid .grid-line:nth-child(3) { left: 50%; animation-delay: 1.4s; } .landing-hero__grid .grid-line:nth-child(4) { left: 75%; animation-delay: 2.1s; background: linear-gradient(to bottom, transparent, rgba(0, 153, 255, 0.10), transparent); } .landing-hero__grid .grid-line:nth-child(5) { left: 90%; animation-delay: 2.8s; } /* Horizontal grid lines */ .landing-hero__grid .grid-line-h { position: absolute; height: 1px; width: 100%; background: linear-gradient(to right, transparent, rgba(0, 255, 136, 0.08), transparent); animation: quantumFlowH 5s linear infinite; } .landing-hero__grid .grid-line-h:nth-child(6) { top: 20%; animation-delay: 0.3s; } .landing-hero__grid .grid-line-h:nth-child(7) { top: 50%; animation-delay: 1.5s; background: linear-gradient(to right, transparent, rgba(0, 153, 255, 0.08), transparent); } .landing-hero__grid .grid-line-h:nth-child(8) { top: 80%; animation-delay: 2.7s; } /* Floating orbs — larger and more colorful */ .landing-hero__orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 1; animation: orbFloat 8s ease-in-out infinite; } .landing-hero__orb--1 { width: 400px; height: 400px; background: rgba(0, 255, 136, 0.18); top: 5%; right: 5%; animation-delay: 0s; } .landing-hero__orb--2 { width: 300px; height: 300px; background: rgba(0, 153, 255, 0.16); bottom: 10%; left: 8%; animation-delay: -3s; } .landing-hero__orb--3 { width: 250px; height: 250px; background: rgba(128, 0, 255, 0.12); top: 35%; left: 15%; animation-delay: -5s; } .landing-hero__orb--4 { width: 220px; height: 220px; background: rgba(255, 100, 200, 0.10); bottom: 20%; right: 12%; animation-delay: -7s; } .landing-hero__content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .landing-hero__badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 153, 255, 0.06)); border: 1px solid rgba(0, 255, 136, 0.25); border-radius: var(--radius-xl); color: var(--quantum-primary); font-size: 0.85rem; font-weight: 500; margin-bottom: 2rem; animation: badgePulse 3s ease-in-out infinite; text-shadow: 0 0 10px rgba(0, 255, 136, 0.3); letter-spacing: 0.05em; } .landing-hero__title { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.2; margin-bottom: 1.5rem; color: var(--text-primary); animation: heroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; text-shadow: 0 0 40px rgba(0, 255, 136, 0.08); } .landing-hero__title .highlight { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .landing-hero__subtitle { font-size: clamp(1rem, 2vw, 1.25rem); color: var(--text-secondary); line-height: 1.7; margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto; animation: heroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; } .landing-hero__price-badge { display: inline-block; padding: 0.5rem 1.5rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-md, 12px); font-family: var(--font-secondary, "Exo 2", sans-serif); font-size: 1.05rem; font-weight: 600; color: var(--quantum-primary, #00ff88); text-align: center; margin-bottom: 1.5rem; animation: heroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .landing-hero__promo { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0.75rem; padding: 0.6rem 1.5rem; background: linear-gradient(135deg, rgba(0, 255, 136, 0.12), rgba(0, 153, 255, 0.08)); border: 1px solid rgba(0, 255, 136, 0.3); border-radius: var(--radius-xl); color: var(--quantum-primary); font-size: 0.95rem; font-weight: 600; margin-bottom: 2rem; animation: heroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; box-shadow: 0 0 20px rgba(0, 255, 136, 0.1); } .landing-hero__promo-zero { font-size: 1.3rem; font-weight: 800; background: linear-gradient(135deg, var(--quantum-primary), var(--quantum-secondary, #0099ff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; } .landing-hero__promo-limit { flex-basis: 100%; text-align: center; font-size: 0.72rem; color: rgba(255, 255, 255, 0.4); margin-top: -0.35rem; font-weight: 400; } .landing-hero__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2.5rem; background: var(--gradient-primary); color: #0a0a0f; border: none; border-radius: var(--radius-xl); font-size: 1.1rem; font-weight: 700; text-decoration: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; position: relative; overflow: hidden; animation: heroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; } .landing-hero__cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transform: translateX(-100%); transition: transform 0.6s ease; } .landing-hero__cta:hover::before { transform: translateX(100%); } .landing-hero__cta:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0, 255, 136, 0.3); } /* ── Stats Counter Section ──────────────────────────── */ .landing-stats { position: relative; padding: 3rem 2rem; background: var(--bg-secondary); } .landing-stats__grid { display: flex; justify-content: center; align-items: flex-end; gap: 4rem; max-width: 900px; margin: 0 auto; flex-wrap: wrap; } .landing-stat { text-align: center; } .landing-stat__number { font-family: "Orbitron", monospace; font-size: 2.5rem; font-weight: 700; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; line-height: 1.2; transition: text-shadow 0.6s ease; } .landing-stat__number.counted { filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.3)); } .landing-stat__number--free { font-family: "Orbitron", "Heebo", "Cairo", sans-serif; font-size: 2.5rem; letter-spacing: 0.05em; } .landing-stat__label { font-size: 0.9rem; color: var(--text-secondary); margin-top: 0.3rem; } /* ── Section Dividers ──────────────────────────────── */ .landing-stats::before, .landing-stats::after, .landing-features::before, .landing-features::after, .landing-pricing::before, .landing-pricing::after, .landing-trust::before, .landing-trust::after, .landing-bottom-cta::before { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--quantum-primary), var(--quantum-secondary), transparent); opacity: 0.25; background-size: 200% 100%; animation: separatorGlow 6s ease-in-out infinite alternate; pointer-events: none; } .landing-stats::before, .landing-features::before, .landing-pricing::before, .landing-trust::before, .landing-bottom-cta::before { top: 0; } .landing-stats::after, .landing-features::after, .landing-pricing::after, .landing-trust::after { bottom: 0; animation-delay: -3s; } @keyframes separatorGlow { 0% { background-position: 0% 0%; opacity: 0.15; } 100% { background-position: 100% 0%; opacity: 0.35; } } /* ── Features Section ────────────────────────────────── */ .landing-features { padding: var(--spacing-2xl) 2rem; position: relative; background: var(--bg-primary); } .landing-section-title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; text-align: center; margin-bottom: var(--spacing-lg); color: var(--text-primary); } .landing-section-subtitle { text-align: center; font-size: 1.05rem; color: var(--text-secondary); max-width: 600px; margin: -1rem auto 2.5rem; line-height: 1.6; } .landing-section-title .highlight { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .landing-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; max-width: 1100px; margin: 0 auto; } .landing-feature-card { background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-md); padding: 2rem; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); text-align: center; position: relative; overflow: hidden; } .landing-feature-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(0, 255, 136, 0.3), transparent 50%, rgba(0, 153, 255, 0.3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; } .landing-feature-card:hover::before { opacity: 1; } /* Inner glow on hover */ .landing-feature-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(0, 255, 136, 0.04) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .landing-feature-card:hover::after { opacity: 1; } .landing-feature-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0, 255, 136, 0.08); background: rgba(20, 25, 30, 0.95); } .landing-feature-card__icon { width: 64px; height: 64px; margin: 0 auto 1.25rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(0, 255, 136, 0.08), rgba(0, 153, 255, 0.05)); border: 1px solid rgba(0, 255, 136, 0.15); border-radius: 16px; color: var(--quantum-primary); transition: all 0.4s ease; position: relative; } .landing-feature-card__icon::after { content: ''; position: absolute; inset: -4px; border-radius: 20px; background: radial-gradient(circle, rgba(0, 255, 136, 0.08) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .landing-feature-card:hover .landing-feature-card__icon::after { opacity: 1; } .landing-feature-card:hover .landing-feature-card__icon { background: linear-gradient(135deg, rgba(0, 255, 136, 0.18), rgba(0, 153, 255, 0.12)); border-color: rgba(0, 255, 136, 0.4); transform: scale(1.1); box-shadow: 0 0 30px rgba(0, 255, 136, 0.2), 0 0 60px rgba(0, 255, 136, 0.05); } .landing-feature-card__icon svg { width: 28px; height: 28px; } .landing-feature-card__title { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary); } .landing-feature-card__desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; } /* ── Pricing Section ─────────────────────────────────── */ .landing-pricing { padding: var(--spacing-2xl) 2rem; position: relative; background: var(--bg-secondary); } .landing-pricing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; max-width: 1200px; margin: 0 auto; position: relative; } .landing-plan { background: var(--bg-card); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-lg); padding: 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; } .landing-plan::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); transform: scaleX(0); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .landing-plan:hover::after { transform: scaleX(1); } .landing-plan:hover { transform: translateY(-8px); border-color: rgba(0, 255, 136, 0.3); box-shadow: 0 25px 60px rgba(0, 255, 136, 0.1); } .landing-plan--featured { border-color: rgba(0, 255, 136, 0.4); background: linear-gradient(135deg, rgba(0, 255, 136, 0.04) 0%, rgba(0, 153, 255, 0.04) 100%); animation: featuredPulse 4s ease-in-out infinite; } .landing-plan--featured::after { transform: scaleX(1); } /* Popular tag — rendered as a for i18n, not CSS content */ .landing-plan__popular-tag { position: absolute; top: 12px; left: -32px; background: var(--gradient-primary); color: #0a0a0f; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 2.5rem; transform: rotate(45deg); z-index: 2; } /* LTR: flip the ribbon to the right side */ [dir="ltr"] .landing-plan__popular-tag { left: auto; right: -32px; transform: rotate(-45deg); } .landing-plan__name { font-size: 1.35rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-primary); } .landing-plan__resources { list-style: none; padding: 0; margin: 0 0 1.5rem; width: 100%; } .landing-plan__resources li { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.4rem 0; font-size: 0.9rem; color: var(--text-secondary); } .landing-plan__resources li svg { width: 16px; height: 16px; color: var(--quantum-primary); flex-shrink: 0; } .landing-plan__price-block { margin-bottom: 1.5rem; } .landing-plan__price-original { font-size: 1.1rem; color: var(--text-muted); text-decoration: line-through; margin-bottom: 0.25rem; } .landing-plan__price-free { font-size: 2rem; font-weight: 800; color: var(--quantum-primary); } .landing-plan__price-free small { font-size: 0.8rem; font-weight: 400; color: var(--text-secondary); } .landing-plan__free-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 1rem; background: rgba(0, 255, 136, 0.08); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: var(--radius-xl); color: var(--quantum-primary); font-size: 0.8rem; font-weight: 600; margin-bottom: 0.5rem; } .landing-plan__free-limit { font-size: 0.65rem; color: rgba(255, 255, 255, 0.35); margin-bottom: 0.3rem; } .landing-plan__no-commitment { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.4); margin-bottom: 1rem; } .landing-plan__cta { width: 100%; padding: 0.85rem 1.5rem; background: var(--gradient-primary); color: #0a0a0f; border: none; border-radius: var(--radius-md); font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); text-decoration: none; display: inline-block; text-align: center; position: relative; overflow: hidden; } .landing-plan__cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transform: translateX(-100%); transition: transform 0.5s ease; } .landing-plan__cta:hover::before { transform: translateX(100%); } .landing-plan__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3); } /* ── Custom Plan Link ────────────────────────────────── */ .landing-pricing__custom { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 2rem; font-size: 0.95rem; color: var(--text-secondary); } .landing-pricing__custom a { color: var(--quantum-primary); text-decoration: none; font-weight: 600; transition: color 0.3s ease; } .landing-pricing__custom a:hover { color: #fff; } /* ── Trust / What's Included Section ────────────────── */ .landing-trust { padding: var(--spacing-2xl) 2rem; position: relative; background: var(--bg-secondary); } .landing-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 1100px; margin: 0 auto; } .landing-trust-item { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.25rem; background: rgba(15, 18, 22, 0.6); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: var(--radius-md); transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .landing-trust-item:hover { border-color: rgba(0, 255, 136, 0.2); background: rgba(0, 255, 136, 0.03); transform: translateY(-2px); } .landing-trust-item__icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: rgba(0, 255, 136, 0.08); border-radius: 10px; color: var(--quantum-primary); flex-shrink: 0; transition: all 0.35s ease; } .landing-trust-item:hover .landing-trust-item__icon { background: rgba(0, 255, 136, 0.15); box-shadow: 0 0 20px rgba(0, 255, 136, 0.1); } .landing-trust-item__icon svg { width: 20px; height: 20px; } .landing-trust-item__text { font-size: 0.88rem; font-weight: 500; color: var(--text-primary); } .landing-trust__more { text-align: center; margin-top: 1.5rem; font-size: 1rem; font-weight: 600; color: var(--quantum-primary); letter-spacing: 0.3px; } /* ── Bottom CTA Section ──────────────────────────────── */ .landing-bottom-cta { padding: var(--spacing-2xl) 2rem; text-align: center; position: relative; overflow: hidden; background: var(--gradient-bg); } .landing-bottom-cta__bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(0, 255, 136, 0.08) 0%, transparent 40%), radial-gradient(ellipse at 50% 50%, rgba(0, 153, 255, 0.04) 0%, transparent 60%); pointer-events: none; } .landing-bottom-cta__content { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; } .landing-bottom-cta__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: 1rem; color: var(--text-primary); } .landing-bottom-cta__desc { font-size: 1rem; color: var(--text-secondary); margin-bottom: 2rem; line-height: 1.6; } .landing-bottom-cta__limit { font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); margin-bottom: 2rem; } .landing-bottom-cta__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2.5rem; background: var(--gradient-primary); color: #0a0a0f; border: none; border-radius: var(--radius-xl); font-size: 1.1rem; font-weight: 700; text-decoration: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; position: relative; overflow: hidden; } .landing-bottom-cta__btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transform: translateX(-100%); transition: transform 0.5s ease; } .landing-bottom-cta__btn:hover::before { transform: translateX(100%); } .landing-bottom-cta__btn:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0, 255, 136, 0.3); } /* ── Enterprise Section ──────────────────────────────── */ .landing-enterprise { padding: var(--spacing-2xl) 2rem; position: relative; background: var(--bg-primary); text-align: center; } .landing-enterprise__content { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .landing-enterprise__icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; color: var(--quantum-primary); background: rgba(0, 255, 136, 0.08); border-radius: 16px; border: 1px solid rgba(0, 255, 136, 0.15); margin-bottom: 1.5rem; } .landing-enterprise__icon svg { width: 30px; height: 30px; } .landing-enterprise__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--text-primary); margin: 0 0 1rem; } .landing-enterprise__desc { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.7; margin: 0 0 2rem; } .landing-enterprise__cta { display: inline-block; padding: 0.85rem 2rem; background: linear-gradient(135deg, #00ff88 0%, #00d4aa 100%); color: #0a0a0f; text-decoration: none; font-weight: 700; font-size: 0.95rem; border-radius: 12px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .landing-enterprise__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 255, 136, 0.3); } /* ── Minimal Footer ──────────────────────────────────── */ .landing-footer { padding: 2rem; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.04); color: var(--text-muted); font-size: 0.85rem; } .landing-footer a { color: var(--text-secondary); text-decoration: none; margin: 0 0.75rem; transition: color 0.3s ease; } .landing-footer a:hover { color: var(--quantum-primary); } /* ── Particle Canvas ─────────────────────────────────── */ .landing-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* ── Responsive ──────────────────────────────────────── */ @media (max-width: 768px) { .landing-header { padding: 0.5rem 0.75rem; } .landing-header__logo img { height: 28px; } .landing-header__cta { padding: 0.45rem 1rem; font-size: 0.8rem; } .landing-hero { padding: 6rem 1rem 3rem; min-height: auto; } .landing-features, .landing-pricing, .landing-trust, .landing-bottom-cta { padding: var(--spacing-lg) 1rem; } .landing-pricing__grid { grid-template-columns: 1fr; max-width: 400px; } .landing-features__grid { grid-template-columns: 1fr; } .landing-trust__grid { grid-template-columns: repeat(2, 1fr); } .landing-plan__popular-tag { top: 8px; left: -36px; font-size: 0.7rem; } [dir="ltr"] .landing-plan__popular-tag { left: auto; right: -36px; } .landing-stats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .landing-stat__number { font-size: 1.8rem; } .landing-bottom-cta__content { padding: 2rem 1.5rem; } .landing-hero__price-badge { font-size: 0.9rem; padding: 0.4rem 1.2rem; } .landing-hero__orb { display: none; } .landing-page::before { display: none; } } @media (max-width: 480px) { .landing-hero__title { font-size: 1.75rem; } .landing-hero__price-badge { font-size: 0.82rem; padding: 0.35rem 1rem; } .landing-plan__price-free { font-size: 1.5rem; } .landing-trust__grid { grid-template-columns: 1fr; } .landing-stats__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } } /* ── Tablet responsive ── */ @media (min-width: 769px) and (max-width: 1024px) { .landing-trust__grid { grid-template-columns: repeat(3, 1fr); } .hv-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Animations ──────────────────────────────────────── */ @keyframes quantumFlow { 0% { opacity: 0.05; transform: scaleY(0.8); } 50% { opacity: 0.7; transform: scaleY(1); } 100% { opacity: 0.05; transform: scaleY(0.8); } } @keyframes quantumFlowH { 0% { opacity: 0.03; transform: scaleX(0.8); } 50% { opacity: 0.5; transform: scaleX(1); } 100% { opacity: 0.03; transform: scaleX(0.8); } } @keyframes orbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(15px, -25px) scale(1.05); } 50% { transform: translate(-10px, 15px) scale(0.95); } 75% { transform: translate(20px, 10px) scale(1.02); } } @keyframes badgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.15); } 50% { box-shadow: 0 0 20px 5px rgba(0, 255, 136, 0.08); } } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes meshDrift { 0% { background-position: 20% 30%, 80% 20%, 60% 70%, 30% 80%; } 50% { background-position: 40% 50%, 60% 40%, 40% 50%, 50% 60%; } 100% { background-position: 25% 35%, 75% 25%, 55% 75%, 35% 75%; } } @keyframes featuredPulse { 0%, 100% { border-color: rgba(0, 255, 136, 0.4); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); } 50% { border-color: rgba(0, 153, 255, 0.4); box-shadow: 0 0 20px 0 rgba(0, 255, 136, 0.06); } } /* ============================================================ Section Navigation Arrows ============================================================ */ .landing-scroll-arrow { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 1.5rem auto 0; border-radius: 50%; background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.12); color: var(--quantum-primary); text-decoration: none; cursor: pointer; position: relative; z-index: 5; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); animation: scrollArrowBounce 2.5s ease-in-out infinite; } .landing-scroll-arrow:hover { background: rgba(0, 255, 136, 0.15); border-color: rgba(0, 255, 136, 0.4); box-shadow: 0 0 20px rgba(0, 255, 136, 0.2); transform: scale(1.1); animation: none; } .landing-scroll-arrow svg { width: 20px; height: 20px; } @keyframes scrollArrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* ============================================================ Hero Visuals — Unique per landing page ============================================================ */ .landing-hero__visual { position: relative; z-index: 1; pointer-events: none; margin-bottom: 1.5rem; opacity: 0; transform: scale(0.75); animation: hvFadeIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; } @keyframes hvFadeIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(0.75); } } /* --- Speed: Gauge --- */ .landing-hero__visual--speed { width: 360px; height: 360px; } .hv-gauge { position: relative; width: 100%; height: 100%; } .hv-gauge__track { position: absolute; inset: 10px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.06); } .hv-gauge__fill { position: absolute; inset: 10px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--quantum-primary); border-right-color: var(--quantum-secondary, #0099ff); animation: gaugeRotate 3s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.4)); } .hv-gauge__needle { position: absolute; top: 50%; left: 50%; width: 3px; height: 80px; background: linear-gradient(to top, var(--quantum-primary), transparent); transform-origin: bottom center; transform: translate(-50%, -100%) rotate(-30deg); animation: needleSweep 3s ease-in-out infinite; border-radius: 3px; } .hv-gauge__center { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--quantum-primary); transform: translate(-50%, -50%); box-shadow: 0 0 20px rgba(0, 255, 136, 0.5); } .hv-gauge__label { position: absolute; bottom: 30%; left: 50%; transform: translateX(-50%); font-family: "Orbitron", monospace; font-size: 0.75rem; font-weight: 700; color: var(--quantum-primary); letter-spacing: 0.15em; opacity: 0.8; } @keyframes gaugeRotate { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } } @keyframes needleSweep { 0%, 100% { transform: translate(-50%, -100%) rotate(-60deg); } 50% { transform: translate(-50%, -100%) rotate(60deg); } } /* --- Shield: Security --- */ .landing-hero__visual--shield { width: 340px; height: 380px; } .hv-shield { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .hv-shield__icon { width: 120px; height: 140px; color: var(--quantum-primary); filter: drop-shadow(0 0 15px rgba(0, 255, 136, 0.3)); animation: shieldPulse 3s ease-in-out infinite; } .hv-shield__check { stroke-dasharray: 20; stroke-dashoffset: 20; animation: shieldCheck 2s ease-out 1s forwards; } .hv-shield__scan { position: absolute; inset: 10%; border-radius: 50%; border: 2px solid transparent; border-top-color: rgba(0, 255, 136, 0.3); animation: shieldScan 2s linear infinite; } .hv-shield__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(0, 255, 136, 0.1); } .hv-shield__ring--1 { inset: -10px; animation: ringPulse 3s ease-in-out infinite; } .hv-shield__ring--2 { inset: -25px; animation: ringPulse 3s ease-in-out infinite 1.5s; } @keyframes shieldPulse { 0%, 100% { filter: drop-shadow(0 0 15px rgba(0, 255, 136, 0.3)); } 50% { filter: drop-shadow(0 0 30px rgba(0, 255, 136, 0.5)); } } @keyframes shieldCheck { to { stroke-dashoffset: 0; } } @keyframes shieldScan { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes ringPulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.1); opacity: 0.1; } } /* --- Terminal: Developers --- */ .landing-hero__visual--terminal { width: 420px; height: 280px; } .hv-terminal { width: 100%; height: 100%; background: rgba(10, 10, 20, 0.8); border: 1px solid rgba(0, 255, 136, 0.15); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 255, 136, 0.05); } .hv-terminal__bar { display: flex; gap: 6px; padding: 10px 14px; background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .hv-dot { width: 10px; height: 10px; border-radius: 50%; } .hv-dot--red { background: #ff5f57; } .hv-dot--yellow { background: #febc2e; } .hv-dot--green { background: #28c840; } .hv-terminal__body { padding: 14px; font-family: "Consolas", "Monaco", monospace; font-size: 0.75rem; line-height: 1.8; } .hv-terminal__line { color: var(--text-secondary); opacity: 0; animation: termTypeLine 0.5s ease forwards; } .hv-terminal__line--1 { animation-delay: 1s; } .hv-terminal__line--2 { animation-delay: 2s; } .hv-terminal__line--3 { animation-delay: 3s; } .hv-terminal__prompt { color: var(--quantum-primary); margin-right: 0.5em; } [dir="rtl"] .hv-terminal__prompt { margin-right: 0; margin-left: 0.5em; } .hv-terminal__success { color: #28c840; margin-right: 0.5em; } [dir="rtl"] .hv-terminal__success { margin-right: 0; margin-left: 0.5em; } .hv-terminal__cursor { display: inline-block; width: 8px; height: 14px; background: var(--quantum-primary); animation: termBlink 1s step-end infinite; vertical-align: text-bottom; } @keyframes termTypeLine { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } [dir="rtl"] .hv-terminal__line { direction: ltr; text-align: left; } @keyframes termBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* --- Palette: Designers --- */ .landing-hero__visual--palette { width: 400px; height: 400px; } .hv-palette { position: relative; width: 100%; height: 100%; } .hv-palette__circle { position: absolute; border-radius: 50%; filter: blur(1px); animation: paletteFloat 6s ease-in-out infinite; } .hv-palette__circle--1 { width: 80px; height: 80px; background: rgba(0, 255, 136, 0.25); top: 10%; left: 20%; animation-delay: 0s; } .hv-palette__circle--2 { width: 60px; height: 60px; background: rgba(0, 153, 255, 0.25); top: 30%; right: 10%; animation-delay: -1s; } .hv-palette__circle--3 { width: 70px; height: 70px; background: rgba(128, 0, 255, 0.2); bottom: 20%; left: 10%; animation-delay: -2s; } .hv-palette__circle--4 { width: 50px; height: 50px; background: rgba(255, 100, 200, 0.2); bottom: 10%; right: 25%; animation-delay: -3s; } .hv-palette__circle--5 { width: 40px; height: 40px; background: rgba(255, 200, 50, 0.2); top: 50%; left: 50%; animation-delay: -4s; } @keyframes paletteFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(15px, -20px) scale(1.1); } 50% { transform: translate(-10px, 10px) scale(0.9); } 75% { transform: translate(20px, 15px) scale(1.05); } } /* --- Dashboard: All-in-One --- */ .landing-hero__visual--dashboard { width: 380px; height: 300px; } .hv-dash { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; height: 100%; } .hv-dash__card { background: rgba(15, 18, 25, 0.8); border: 1px solid rgba(0, 255, 136, 0.1); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; animation: dashCardPulse 4s ease-in-out infinite; } .hv-dash__card--1 { animation-delay: 0s; } .hv-dash__card--2 { animation-delay: 1s; } .hv-dash__card--3 { animation-delay: 2s; } .hv-dash__card--4 { animation-delay: 3s; } .hv-dash__card-bar { width: 100%; height: 6px; background: rgba(0, 255, 136, 0.08); border-radius: 3px; position: relative; overflow: hidden; } .hv-dash__card-bar::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 70%; background: linear-gradient(90deg, var(--quantum-primary), var(--quantum-secondary, #0099ff)); border-radius: 3px; animation: dashBarFill 3s ease-in-out infinite alternate; } .hv-dash__card-bar:nth-child(2)::after { width: 50%; animation-delay: 0.5s; } .hv-dash__card-bar:nth-child(3)::after { width: 85%; animation-delay: 1s; } .hv-dash__card-circle { width: 50px; height: 50px; border-radius: 50%; border: 3px solid rgba(0, 255, 136, 0.15); border-top-color: var(--quantum-primary); animation: dashCircleSpin 2s linear infinite; } .hv-dash__card-line { width: 100%; height: 40px; background: linear-gradient(90deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 255, 136, 0.3) 25%, rgba(0, 153, 255, 0.3) 50%, rgba(0, 153, 255, 0.1) 75%, rgba(128, 0, 255, 0.2) 100%); border-radius: 4px; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath d='M0 35 Q10 30 20 25 T40 20 T60 15 T80 10 T100 5' stroke='black' fill='none' stroke-width='4'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath d='M0 35 Q10 30 20 25 T40 20 T60 15 T80 10 T100 5' stroke='black' fill='none' stroke-width='4'/%3E%3C/svg%3E"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; } .hv-dash__card-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--quantum-primary); animation: dashDotPulse 2s ease-in-out infinite; } .hv-dash__card-dot:nth-child(2) { background: var(--quantum-secondary, #0099ff); animation-delay: 0.6s; } .hv-dash__card-dot:nth-child(3) { background: rgba(128, 0, 255, 0.7); animation-delay: 1.2s; } @keyframes dashCardPulse { 0%, 100% { border-color: rgba(0, 255, 136, 0.1); } 50% { border-color: rgba(0, 255, 136, 0.25); } } @keyframes dashBarFill { from { width: 30%; } to { width: 90%; } } @keyframes dashCircleSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes dashDotPulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.5); opacity: 1; } } /* --- WordPress: WP Logo with Orbit --- */ .landing-hero__visual--wordpress { width: 360px; height: 360px; } .hv-wp { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .hv-wp__logo { font-family: "Georgia", serif; font-size: 3.5rem; font-weight: 700; color: var(--quantum-primary); text-shadow: 0 0 30px rgba(0, 255, 136, 0.4); z-index: 2; animation: wpLogoPulse 3s ease-in-out infinite; } .hv-wp__ring { position: absolute; inset: 20px; border-radius: 50%; border: 2px solid rgba(0, 255, 136, 0.12); animation: wpRingSpin 12s linear infinite; } .hv-wp__ring::before { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--quantum-primary); transform: translateX(-50%); box-shadow: 0 0 10px rgba(0, 255, 136, 0.5); } .hv-wp__dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; animation: wpOrbit 8s linear infinite; } .hv-wp__dot--1 { background: var(--quantum-primary); animation-duration: 6s; box-shadow: 0 0 8px rgba(0, 255, 136, 0.4); } .hv-wp__dot--2 { background: var(--quantum-secondary, #0099ff); animation-duration: 8s; animation-delay: -2s; box-shadow: 0 0 8px rgba(0, 153, 255, 0.4); } .hv-wp__dot--3 { background: rgba(128, 0, 255, 0.7); animation-duration: 10s; animation-delay: -4s; box-shadow: 0 0 8px rgba(128, 0, 255, 0.4); } @keyframes wpLogoPulse { 0%, 100% { text-shadow: 0 0 30px rgba(0, 255, 136, 0.4); } 50% { text-shadow: 0 0 50px rgba(0, 255, 136, 0.6), 0 0 80px rgba(0, 153, 255, 0.2); } } @keyframes wpRingSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes wpOrbit { 0% { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg) translateX(100px) rotate(0deg); } 100% { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(360deg) translateX(100px) rotate(-360deg); } } /* --- Cart: E-Commerce --- */ .landing-hero__visual--cart { width: 300px; height: 300px; } .hv-cart { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .hv-cart__basket { position: relative; z-index: 2; } .hv-cart__basket svg { width: 100px; height: 100px; color: var(--quantum-primary); filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.4)); animation: cartFloat 4s ease-in-out infinite; } @keyframes cartFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .hv-cart__tag { position: absolute; padding: 6px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; border: 1px solid rgba(0, 255, 136, 0.2); backdrop-filter: blur(8px); animation: tagFloat 5s ease-in-out infinite; } .hv-cart__tag--1 { top: 15%; right: 10%; background: rgba(0, 255, 136, 0.1); color: var(--quantum-primary); animation-delay: 0s; } .hv-cart__tag--2 { bottom: 25%; left: 5%; background: rgba(0, 153, 255, 0.1); color: var(--quantum-secondary); border-color: rgba(0, 153, 255, 0.2); animation-delay: -1.5s; } .hv-cart__tag--3 { top: 25%; left: 10%; background: rgba(128, 0, 255, 0.1); color: rgba(180, 130, 255, 0.9); border-color: rgba(128, 0, 255, 0.2); animation-delay: -3s; } @keyframes tagFloat { 0%, 100% { transform: translateY(0); opacity: 0.8; } 50% { transform: translateY(-6px); opacity: 1; } } .hv-cart__pulse { position: absolute; top: 50%; left: 50%; width: 160px; height: 160px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(0, 255, 136, 0.15); animation: cartPulse 3s ease-out infinite; } @keyframes cartPulse { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } } /* --- Grid: Agencies --- */ .landing-hero__visual--grid { width: 320px; height: 260px; } .hv-grid { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 12px; } .hv-grid__cell { border-radius: 12px; border: 1px solid rgba(0, 255, 136, 0.15); background: rgba(0, 255, 136, 0.04); position: relative; overflow: hidden; animation: gridCellPulse 4s ease-in-out infinite; } .hv-grid__cell::after { content: ''; position: absolute; top: 10px; left: 10px; right: 10px; height: 4px; border-radius: 2px; background: rgba(0, 255, 136, 0.2); } .hv-grid__cell--1 { animation-delay: 0s; } .hv-grid__cell--2 { animation-delay: -0.6s; } .hv-grid__cell--2::after { background: rgba(0, 153, 255, 0.25); } .hv-grid__cell--3 { animation-delay: -1.2s; } .hv-grid__cell--3::after { background: rgba(128, 0, 255, 0.25); } .hv-grid__cell--4 { animation-delay: -1.8s; } .hv-grid__cell--4::after { background: rgba(0, 153, 255, 0.25); } .hv-grid__cell--5 { animation-delay: -2.4s; } .hv-grid__cell--5::after { background: rgba(128, 0, 255, 0.25); } .hv-grid__cell--6 { animation-delay: -3s; } @keyframes gridCellPulse { 0%, 100% { border-color: rgba(0, 255, 136, 0.1); box-shadow: none; } 50% { border-color: rgba(0, 255, 136, 0.3); box-shadow: 0 0 15px rgba(0, 255, 136, 0.08); } } .hv-grid__connector { position: absolute; background: linear-gradient(90deg, rgba(0, 255, 136, 0.3), rgba(0, 153, 255, 0.3)); border-radius: 2px; animation: connectorGlow 3s ease-in-out infinite alternate; } .hv-grid__connector--1 { width: 60%; height: 2px; top: 50%; left: 20%; transform: translateY(-50%); } .hv-grid__connector--2 { width: 2px; height: 40%; left: 50%; top: 30%; transform: translateX(-50%); background: linear-gradient(180deg, rgba(0, 153, 255, 0.3), rgba(128, 0, 255, 0.3)); animation-delay: -1.5s; } @keyframes connectorGlow { 0% { opacity: 0.3; } 100% { opacity: 0.8; } } /* Scale down hero visuals on smaller screens */ @media (max-width: 768px) { .landing-hero__visual { transform: scale(0.55); margin-bottom: 0.5rem; } @keyframes hvFadeIn { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(0.55); } } } /* ============================================================ Life Effects — Breathing sections & quantum glow transitions ============================================================ */ /* Sections already have position: relative from their own rules */ /* Feature cards — enhanced hover with quantum ripple */ .landing-feature-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0, 255, 136, 0.08), 0 0 0 1px rgba(0, 255, 136, 0.1); background: rgba(20, 25, 30, 0.95); } /* Stats section — pulsing divider lines */ .landing-stats::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.12), rgba(0, 153, 255, 0.12), transparent); animation: dividerPulse 4s ease-in-out infinite; } .landing-stats::after { content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 153, 255, 0.12), rgba(0, 255, 136, 0.12), transparent); animation: dividerPulse 4s ease-in-out infinite 2s; } .landing-stats { position: relative; } @keyframes dividerPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* Trust items — staggered glow on scroll reveal */ .landing-trust-item.visible { animation: trustItemGlow 0.6s ease-out forwards; } @keyframes trustItemGlow { 0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.15); } 50% { box-shadow: 0 0 15px 0 rgba(0, 255, 136, 0.08); } 100% { box-shadow: none; } } /* Plan cards — shimmer effect on featured */ .landing-plan--featured::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 255, 136, 0.05) 0%, transparent 50%, rgba(0, 153, 255, 0.05) 100%); animation: planShimmer 6s ease-in-out infinite; pointer-events: none; border-radius: inherit; } @keyframes planShimmer { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* Bottom CTA — enhanced glow ring */ .landing-bottom-cta__content::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), transparent 40%, transparent 60%, rgba(0, 153, 255, 0.2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ctaGlowRing 5s ease-in-out infinite; pointer-events: none; } .landing-bottom-cta__content { position: relative; } @keyframes ctaGlowRing { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* ============================================================ Testimonials Section ============================================================ */ .landing-testimonials { padding: var(--spacing-xl) 0; } .landing-testimonials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-lg); } .landing-testimonial-card { background: var(--bg-glass); border: var(--border-glass); border-radius: var(--radius-md); padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-sm); position: relative; } .landing-testimonial-card::before { content: '\201C'; position: absolute; top: var(--spacing-sm); inset-inline-start: var(--spacing-md); font-size: 3rem; color: var(--quantum-primary); opacity: 0.3; line-height: 1; font-family: Georgia, serif; } .landing-testimonial-card__stars { display: flex; gap: 2px; } .landing-star { fill: rgba(255, 255, 255, 0.15); stroke: none; } .landing-star--filled { fill: #fbbf24; } .landing-testimonial-card__quote { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; padding-inline-start: var(--spacing-sm); } .landing-testimonial-card__author { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: var(--spacing-xs); border-top: 1px solid rgba(255, 255, 255, 0.05); } .landing-testimonial-card__name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); } .landing-testimonial-card__company { font-size: 0.8rem; color: var(--text-muted); } /* ============================================================ FAQ Section ============================================================ */ .landing-faq { padding: var(--spacing-xl) 0; } .landing-faq__item { border: var(--border-glass); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm); background: var(--bg-glass); overflow: hidden; transition: border-color var(--transition-fast); } .landing-faq__item.is-open { border-color: rgba(0, 255, 136, 0.2); } .landing-faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-sm) var(--spacing-md); background: none; border: none; color: var(--text-primary); font-family: var(--font-secondary); font-size: 1rem; font-weight: 600; cursor: pointer; text-align: start; gap: var(--spacing-sm); } .landing-faq__question:hover { color: var(--quantum-primary); } .landing-faq__arrow { flex-shrink: 0; transition: transform var(--transition-normal); color: var(--text-muted); } .landing-faq__item.is-open .landing-faq__arrow { transform: rotate(180deg); } .landing-faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0 var(--spacing-md); } .landing-faq__item.is-open .landing-faq__answer { max-height: 300px; padding: 0 var(--spacing-md) var(--spacing-sm); } .landing-faq__answer p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; } /* ============================================================ Panel Screenshots Section ============================================================ */ .landing-screenshots { padding: var(--spacing-xl) 0; } .landing-screenshots__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-lg); } .landing-screenshot-card { border-radius: var(--radius-md); overflow: hidden; border: var(--border-glass); background: var(--bg-glass); } .landing-screenshot-card img { width: 100%; height: auto; display: block; } .landing-screenshot-card__caption { padding: var(--spacing-xs) var(--spacing-sm); font-size: 0.85rem; color: var(--text-muted); text-align: center; } /* Price Badge in Hero — main styles above in hero section */ /* ============================================================ Responsive — New Sections ============================================================ */ @media (max-width: 768px) { .landing-testimonials__grid { grid-template-columns: 1fr; } .landing-screenshots__grid { grid-template-columns: 1fr; } .landing-faq__question { font-size: 0.9rem; padding: var(--spacing-xs) var(--spacing-sm); } .landing-faq__answer p { font-size: 0.85rem; } } @media (max-width: 480px) { .landing-testimonial-card { padding: var(--spacing-sm); } .landing-faq__item.is-open .landing-faq__answer { max-height: 500px; } }