/* ============================================ DALA HOMEPAGE PREMIUM — Balanced Dark/Light/Red Load LAST in for highest precedence ============================================ */ /* ============================================ CSS VARIABLES ============================================ */ :root { --hp-void: #050302; --hp-deep: #0a0806; --hp-elevated: #11100e; --hp-card: #1a1815; --hp-paper: #ffffff; --hp-cream: #faf9f7; --hp-warm: #f5f0e8; --hp-muted: rgba(255, 255, 255, 0.55); --hp-muted-dark: rgba(0, 0, 0, 0.55); --hp-accent: #e53935; --hp-accent-dark: #c62828; --hp-glass: rgba(255, 255, 255, 0.04); --hp-glass-border: rgba(255, 255, 255, 0.08); --hp-glass-highlight: rgba(255, 255, 255, 0.12); --hp-glass-dark: rgba(0, 0, 0, 0.04); --hp-glass-border-dark: rgba(0, 0, 0, 0.08); } /* ============================================ NAVBAR — Over dark hero ============================================ */ body.homepage .navbar { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid transparent !important; transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } body.homepage .navbar.scrolled { background: rgba(5, 3, 2, 0.9) !important; backdrop-filter: blur(24px) saturate(140%) !important; -webkit-backdrop-filter: blur(24px) saturate(140%) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: 0 4px 30px rgba(0,0,0,0.3); } body.homepage .navbar .nav-link { color: rgba(255, 255, 255, 0.75) !important; } body.homepage .navbar .nav-link:hover { color: #ffffff !important; } body.homepage .navbar .nav-dropdown-trigger { color: rgba(255, 255, 255, 0.75) !important; } body.homepage .navbar .nav-dropdown-menu { background: rgba(15, 13, 10, 0.96) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } body.homepage .navbar .nav-dropdown-item { color: rgba(255, 255, 255, 0.75) !important; } body.homepage .navbar .nav-dropdown-item:hover { background: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; } body.homepage .navbar .nav-dropdown-item strong { color: #ffffff !important; } body.homepage .navbar .nav-dropdown-item span { color: rgba(255, 255, 255, 0.5) !important; } body.homepage .mobile-menu-btn span { background: #ffffff !important; } /* ============================================ MOBILE MENU — Dark text on white background ============================================ */ @media (max-width: 768px) { body.homepage .navbar .nav-links .nav-link, body.homepage .navbar .nav-links .nav-dropdown-trigger { color: var(--dark) !important; } body.homepage .navbar .nav-links .nav-link:hover, body.homepage .navbar .nav-links .nav-dropdown-trigger:hover { color: var(--primary) !important; } body.homepage .navbar .nav-links .nav-dropdown-menu { background: rgba(0, 0, 0, 0.02) !important; border: none !important; } body.homepage .navbar .nav-links .nav-dropdown-item { color: var(--gray-600) !important; } body.homepage .navbar .nav-links .nav-dropdown-item:hover { background: rgba(229, 57, 53, 0.06) !important; color: var(--primary) !important; } body.homepage .navbar .nav-links .nav-dropdown-item strong { color: var(--dark) !important; } body.homepage .navbar .nav-links .nav-dropdown-item span { color: var(--gray-500) !important; } } /* ============================================ HERO — Cinematic Video (matches preview exactly) ============================================ */ body.homepage .hero.homepage-hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: var(--hp-void) !important; padding: 0 !important; } /* Hide old hero decorative elements */ body.homepage .hero.homepage-hero .hero-particles, body.homepage .hero.homepage-hero .hero-atmosphere, body.homepage .hero.homepage-hero .hero-orb, body.homepage .hero.homepage-hero .hero-grid-lines, body.homepage .hero.homepage-hero .hero-badge, body.homepage .hero.homepage-hero .hero-video-container, body.homepage .hero.homepage-hero .hero-scroll { display: none !important; } /* Video background */ body.homepage .hero-video-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; } /* Cinematic overlay — balanced for centered text, video breathes on edges */ body.homepage .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5,3,2,0.92) 0%, rgba(5,3,2,0.78) 25%, rgba(5,3,2,0.60) 50%, rgba(5,3,2,0.35) 75%, rgba(5,3,2,0.12) 100% ), linear-gradient(180deg, rgba(5,3,2,0.40) 0%, transparent 25%, transparent 75%, rgba(5,3,2,0.30) 100% ); pointer-events: none; } /* Ambient red glow */ body.homepage .hero-ambient-glow { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 60% 50% at 50% 55%, rgba(229, 57, 53, 0.08) 0%, transparent 70%); pointer-events: none; animation: hp-ambientPulse 8s ease-in-out infinite; } @keyframes hp-ambientPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Vignette — much lighter so video breathes */ body.homepage .hero-vignette { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0,0,0,0.25) 100%); pointer-events: none; } /* Film grain */ body.homepage .hero-grain { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; } /* Top edge fade for nav */ body.homepage .hero-top-fade { position: absolute; top: 0; left: 0; right: 0; height: 120px; z-index: 4; background: linear-gradient(180deg, rgba(5,3,2,0.55) 0%, transparent 100%); pointer-events: none; } /* Hero inner — centered premium layout */ body.homepage .hero-inner { position: relative; z-index: 5; width: min(100%, 1440px); margin: 0 auto; padding: clamp(140px, 18vh, 220px) clamp(32px, 6vw, 80px) clamp(80px, 12vh, 140px); display: flex; flex-direction: column; justify-content: center; align-items: center !important; min-height: 100svh; text-align: center !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headline — DALA white + gradient tagline */ body.homepage .hero-headline { max-width: 100%; font-size: clamp(3rem, 6.5vw, 7.5rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.05em; color: var(--hp-paper); text-shadow: 0 2px 40px rgba(0,0,0,0.4); opacity: 0; transform: translateY(30px); animation: hp-fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards; text-align: center; } body.homepage .hero-brand { display: block; color: #ffffff; font-size: clamp(3.2rem, 7vw, 8rem); letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.1em; } body.homepage .hero-gradient { display: block; font-style: normal; background: linear-gradient(135deg, #e8d5c4 0%, #f0bfa3 22%, #ff7b6b 50%, #e53935 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: clamp(2rem, 4.2vw, 4.8rem); letter-spacing: -0.03em; line-height: 1.05; } /* Subtitle — centered, premium width */ body.homepage .hero-subtitle { max-width: 560px; margin-top: 28px; margin-left: auto !important; margin-right: auto !important; color: rgba(255, 255, 255, 0.72); font-size: clamp(0.95rem, 1.15vw, 1.2rem); line-height: 1.65; font-weight: 400; text-shadow: 0 1px 20px rgba(0,0,0,0.35); opacity: 0; transform: translateY(20px); animation: hp-fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards; text-align: center !important; } /* CTAs — centered */ body.homepage .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; justify-content: center !important; opacity: 0; transform: translateY(16px); animation: hp-fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards; } body.homepage .cta-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 30px; border-radius: 12px; text-decoration: none; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; border: none; font-family: inherit; position: relative; overflow: hidden; } body.homepage .cta-btn:hover { transform: translateY(-2px); } body.homepage .cta-primary { background: linear-gradient(135deg, #e53935, #c62828); color: white; box-shadow: 0 8px 32px rgba(229, 57, 53, 0.35), 0 0 0 1px rgba(255,255,255,0.08) inset; } body.homepage .cta-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%); transform: translateX(-100%); transition: transform 0.7s ease; } body.homepage .cta-primary:hover::after { transform: translateX(100%); } body.homepage .cta-primary:hover { box-shadow: 0 12px 48px rgba(229, 57, 53, 0.5), 0 0 0 1px rgba(255,255,255,0.12) inset; filter: brightness(1.08); } body.homepage .cta-secondary { background: var(--hp-glass); color: white; border: 1px solid var(--hp-glass-border); backdrop-filter: blur(20px); box-shadow: 0 4px 24px rgba(0,0,0,0.15); } body.homepage .cta-secondary:hover { background: var(--hp-glass-highlight); border-color: rgba(255,255,255,0.2); box-shadow: 0 6px 32px rgba(0,0,0,0.25); } /* Stats — override homepage-refined.css opacity + hero-premium.css background */ body.homepage .hero-stats { display: flex; gap: clamp(16px, 2vw, 24px); margin-top: auto; padding-top: clamp(60px, 10vh, 120px); opacity: 0; animation: hp-fadeIn 1.2s ease-out 1s forwards; background: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; padding: clamp(60px, 10vh, 120px) 0 0 !important; width: auto !important; height: auto !important; justify-content: flex-start !important; align-items: flex-start !important; } body.homepage .stat-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 28px; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); min-width: 120px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; } body.homepage .stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); } body.homepage .stat-card:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255,255,255,0.14) !important; transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); } body.homepage .stat-number { font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 900; color: #ffffff !important; letter-spacing: -0.03em; line-height: 1; text-shadow: 0 2px 12px rgba(0,0,0,0.5); } body.homepage .stat-number .accent { background: linear-gradient(135deg, #ffffff, #ff9e80); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; } body.homepage .stat-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55) !important; } /* Scroll hint */ position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.4); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; opacity: 0; animation: hp-fadeIn 1.5s ease-out 1.6s forwards; transition: color 0.3s ease; } color: rgba(255, 255, 255, 0.6); } width: 1px; height: 40px; background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent); position: relative; overflow: hidden; } content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.8), transparent); animation: hp-scrollPulse 2.5s ease-in-out infinite; } @keyframes hp-fadeIn { to { opacity: 1; } } @keyframes hp-fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes hp-scrollPulse { 0% { top: -100%; } 100% { top: 100%; } } /* ============================================ SECTION: TRUSTED RETAILERS — Light ============================================ */ body.homepage .retailer-proof-section { background: var(--hp-paper) !important; padding: 80px 0; } body.homepage .retailer-proof-section .logo-section-header { text-align: center; margin-bottom: 48px; } body.homepage .retailer-proof-section .logo-section-title { display: inline-flex; align-items: center; gap: 14px; color: var(--hp-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 16px; } body.homepage .retailer-proof-section .logo-section-title::before, body.homepage .retailer-proof-section .logo-section-title::after { content: ""; width: 32px; height: 1px; background: linear-gradient(90deg, transparent, var(--hp-accent)); } body.homepage .retailer-proof-section .logo-section-title::after { background: linear-gradient(90deg, var(--hp-accent), transparent); } body.homepage .retailer-proof-section .logo-section-subtitle { color: var(--hp-void) !important; font-size: clamp(1.5rem, 3vw, 2.25rem) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.2 !important; -webkit-mask-image: none !important; mask-image: none !important; opacity: 1 !important; } body.homepage .retailer-proof-section .brand-marquee { mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent) !important; -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent) !important; } body.homepage .retailer-proof-section .brand-logo-card { background: var(--hp-cream) !important; border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 16px !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } body.homepage .retailer-proof-section .brand-logo-card:hover { background: var(--hp-paper) !important; border-color: rgba(229, 57, 53, 0.2) !important; transform: translateY(-4px) scale(1.02); box-shadow: 0 16px 48px rgba(0,0,0,0.1); } /* ============================================ SECTION: BUILT FOR TWO SIDES — Warm Light ============================================ */ body.homepage .homepage-bifurcation-section { background: var(--hp-cream) !important; padding: 100px 0; } body.homepage .homepage-bifurcation-section .section-header { text-align: center; margin-bottom: 64px; } body.homepage .homepage-bifurcation-section .section-label { display: inline-flex; align-items: center; gap: 14px; color: var(--hp-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 16px; } body.homepage .homepage-bifurcation-section .section-label::before, body.homepage .homepage-bifurcation-section .section-label::after { content: ""; width: 32px; height: 1px; background: linear-gradient(90deg, transparent, var(--hp-accent)); } body.homepage .homepage-bifurcation-section .section-label::after { background: linear-gradient(90deg, var(--hp-accent), transparent); } body.homepage .homepage-bifurcation-section .section-title { color: var(--hp-void) !important; font-size: clamp(1.75rem, 3.5vw, 2.75rem) !important; font-weight: 800 !important; letter-spacing: -0.035em !important; line-height: 1.1 !important; } body.homepage .homepage-bifurcation-section .section-subtitle { color: var(--hp-muted-dark) !important; font-size: clamp(1rem, 1.2vw, 1.15rem) !important; line-height: 1.7 !important; max-width: 600px; margin: 16px auto 0; } /* Static cards */ body.homepage .static-card { background: var(--hp-paper) !important; border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 24px !important; padding: 40px !important; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.04); } body.homepage .static-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(229,57,53,0.2), transparent); } body.homepage .static-card:hover { transform: translateY(-6px); box-shadow: 0 24px 64px rgba(0,0,0,0.08); border-color: rgba(229, 57, 53, 0.15) !important; } body.homepage .static-card-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--hp-cream); border: 1px solid rgba(0,0,0,0.06); border-radius: 100px; font-size: 0.78rem; font-weight: 700; color: var(--hp-accent); margin-bottom: 20px; width: fit-content; } body.homepage .static-card-title { color: var(--hp-void) !important; font-size: 1.5rem !important; font-weight: 800 !important; letter-spacing: -0.02em !important; margin-bottom: 12px !important; } body.homepage .static-card-text { color: var(--hp-muted-dark) !important; font-size: 0.95rem !important; line-height: 1.7 !important; margin-bottom: 24px !important; } body.homepage .static-feature-item { display: flex; align-items: center; gap: 10px; color: var(--hp-void) !important; font-size: 0.88rem !important; font-weight: 500; padding: 8px 0; } body.homepage .static-feature-item i { color: var(--hp-accent) !important; font-size: 0.85rem; } body.homepage .static-card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding: 12px 24px; background: linear-gradient(135deg, #e53935, #c62828) !important; color: #ffffff !important; font-size: 0.85rem; font-weight: 700; text-decoration: none; border-radius: 12px; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 16px rgba(229, 57, 53, 0.25); width: fit-content; } body.homepage .static-card-link:hover { background: linear-gradient(135deg, #ff5252, #e53935) !important; gap: 12px; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(229, 57, 53, 0.35); } body.homepage .static-card-link i { font-size: 0.8rem; transition: transform 0.3s ease; } body.homepage .static-card-link:hover i { transform: translateX(4px); } /* Floating cards (mobile) */ body.homepage .floating-card { background: var(--hp-paper) !important; border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 24px !important; padding: 32px !important; box-shadow: 0 4px 24px rgba(0,0,0,0.04); } body.homepage .floating-card-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--hp-cream); border: 1px solid rgba(0,0,0,0.06); border-radius: 100px; font-size: 0.78rem; font-weight: 700; color: var(--hp-accent); margin-bottom: 16px; width: fit-content; } body.homepage .floating-card-title { color: var(--hp-void) !important; font-size: 1.35rem !important; font-weight: 800 !important; } body.homepage .floating-card-text { color: var(--hp-muted-dark) !important; font-size: 0.9rem !important; line-height: 1.65 !important; } body.homepage .floating-feature-item { display: flex; align-items: center; gap: 10px; color: var(--hp-void) !important; font-size: 0.85rem !important; padding: 6px 0; } body.homepage .floating-feature-item i { color: var(--hp-accent) !important; } body.homepage .floating-card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 10px 20px; background: linear-gradient(135deg, #e53935, #c62828) !important; color: #ffffff !important; font-size: 0.82rem; font-weight: 700; text-decoration: none; border-radius: 10px; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 16px rgba(229, 57, 53, 0.25); width: fit-content; } body.homepage .floating-card-link:hover { background: linear-gradient(135deg, #ff5252, #e53935) !important; gap: 12px; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(229, 57, 53, 0.35); } body.homepage .floating-card-link.secondary { background: linear-gradient(135deg, #e53935, #c62828) !important; color: #ffffff !important; } body.homepage .floating-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.1); border: none; transition: all 0.3s ease; } body.homepage .floating-dot.active { background: var(--hp-accent); box-shadow: 0 0 12px rgba(229, 57, 53, 0.35); } /* ============================================ SECTION: BRAND PARTNERS — Dark ============================================ */ body.homepage .brand-proof-section { background: var(--hp-void) !important; padding: 80px 0; } body.homepage .brand-proof-section .logo-section-header { text-align: center; margin-bottom: 48px; } body.homepage .brand-proof-section .logo-section-title { display: inline-flex; align-items: center; gap: 14px; color: var(--hp-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 16px; } body.homepage .brand-proof-section .logo-section-title::before, body.homepage .brand-proof-section .logo-section-title::after { content: ""; width: 32px; height: 1px; background: linear-gradient(90deg, transparent, var(--hp-accent)); } body.homepage .brand-proof-section .logo-section-title::after { background: linear-gradient(90deg, var(--hp-accent), transparent); } body.homepage .brand-proof-section .logo-section-subtitle { color: var(--hp-paper) !important; font-size: clamp(1.5rem, 3vw, 2.25rem) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.2 !important; -webkit-mask-image: none !important; mask-image: none !important; opacity: 1 !important; } body.homepage .brand-proof-section .brand-marquee { mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent) !important; -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent) !important; } body.homepage .brand-proof-section .brand-logo-card { background: var(--hp-glass) !important; border: 1px solid var(--hp-glass-border) !important; border-radius: 16px !important; backdrop-filter: blur(12px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } body.homepage .brand-proof-section .brand-logo-card:hover { background: var(--hp-glass-highlight) !important; border-color: rgba(255,255,255,0.15) !important; transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 40px rgba(0,0,0,0.3); } body.homepage .brand-proof-section .brand-logo-card img { filter: brightness(0.95) saturate(0.9); transition: filter 0.4s ease; } body.homepage .brand-proof-section .brand-logo-card:hover img { filter: brightness(1.05) saturate(1); } /* ============================================ SECTION: TESTIMONIALS — Light ============================================ */ body.homepage .testimonials-slider-section { background: var(--hp-paper) !important; padding: 100px 0; } body.homepage .testimonials-header { text-align: center; margin-bottom: 56px; } body.homepage .testimonials-label { display: inline-flex; align-items: center; gap: 14px; color: var(--hp-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 16px; } body.homepage .testimonials-label::before, body.homepage .testimonials-label::after { content: ""; width: 32px; height: 1px; background: linear-gradient(90deg, transparent, var(--hp-accent)); } body.homepage .testimonials-label::after { background: linear-gradient(90deg, var(--hp-accent), transparent); } body.homepage .testimonials-title { color: var(--hp-void) !important; font-size: clamp(1.75rem, 3.5vw, 2.75rem) !important; font-weight: 800 !important; letter-spacing: -0.035em !important; line-height: 1.1 !important; } body.homepage .testimonials-subtitle { color: var(--hp-muted-dark) !important; font-size: clamp(1rem, 1.2vw, 1.15rem) !important; line-height: 1.7 !important; max-width: 600px; margin: 16px auto 0; } body.homepage .testimonial-slide-card { background: var(--hp-cream) !important; border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 24px !important; overflow: hidden; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 24px rgba(0,0,0,0.04); } body.homepage .testimonial-slide-card:hover { border-color: rgba(229, 57, 53, 0.15) !important; box-shadow: 0 24px 64px rgba(0,0,0,0.08); } body.homepage .testimonial-slide-content { padding: 40px !important; } body.homepage .testimonial-slide-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(229, 57, 53, 0.08); border: 1px solid rgba(229, 57, 53, 0.15); border-radius: 100px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hp-accent); margin-bottom: 16px; } body.homepage .testimonial-slide-stars { color: #ffb300 !important; font-size: 0.85rem; margin-bottom: 20px; } body.homepage .testimonial-slide-text { color: var(--hp-void) !important; font-size: 1.05rem !important; line-height: 1.75 !important; font-style: italic; margin-bottom: 28px !important; opacity: 0.85; } body.homepage .testimonial-slide-text::before { content: '"'; font-size: 2.5rem; line-height: 1; color: rgba(229, 57, 53, 0.15); font-family: Georgia, serif; display: block; margin-bottom: 4px; } body.homepage .author-slide-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(0,0,0,0.08); background: var(--hp-cream); } body.homepage .author-slide-info h4 { color: var(--hp-void) !important; font-size: 0.95rem !important; font-weight: 700 !important; } body.homepage .author-slide-info p { color: var(--hp-muted-dark) !important; font-size: 0.82rem !important; } body.homepage .testimonial-slide-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--hp-accent) !important; font-size: 0.88rem; font-weight: 700; text-decoration: none; transition: all 0.3s ease; } body.homepage .testimonial-slide-link:hover { color: var(--hp-accent-dark) !important; gap: 12px; } body.homepage .testimonials-cta { text-align: center; margin-top: 48px; } body.homepage .testimonials-cta-btn { background: linear-gradient(135deg, #e53935, #c62828) !important; box-shadow: 0 8px 32px rgba(229, 57, 53, 0.35) !important; color: white !important; } body.homepage .testimonials-cta-btn:hover { background: linear-gradient(135deg, #ff5252, #e53935) !important; box-shadow: 0 12px 48px rgba(229, 57, 53, 0.5) !important; transform: translateY(-2px); color: white !important; } /* ============================================ SECTION: FINAL CTA — Red Gradient ============================================ */ body.homepage .cta-section { background: linear-gradient(135deg, #e53935 0%, #c62828 50%, #8e0000 100%) !important; position: relative; overflow: hidden; padding: 100px 0; } body.homepage .cta-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.08) 0%, transparent 60%); pointer-events: none; } body.homepage .cta-section .cta-container { position: relative; z-index: 1; } body.homepage .cta-section h2 { color: #ffffff !important; font-size: clamp(2rem, 4vw, 3rem) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; text-shadow: 0 2px 20px rgba(0,0,0,0.2); } body.homepage .cta-section p { color: rgba(255, 255, 255, 0.8) !important; font-size: clamp(1rem, 1.3vw, 1.2rem) !important; } body.homepage .cta-section .btn-primary { background: #ffffff !important; color: var(--hp-accent-dark) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.2) !important; } body.homepage .cta-section .btn-primary:hover { background: #f5f5f5 !important; transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.3) !important; } body.homepage .cta-section .btn-secondary { background: rgba(255,255,255,0.1) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.2) !important; } body.homepage .cta-section .btn-secondary:hover { background: rgba(255,255,255,0.18) !important; border-color: rgba(255,255,255,0.3) !important; } /* ============================================ FOOTER — Horizontal Premium Dark ============================================ */ body.homepage .footer { background: var(--hp-void) !important; padding: 80px 0 40px; position: relative; } body.homepage .footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 2px; background: linear-gradient(90deg, transparent, var(--hp-accent), transparent); } body.homepage .footer .container { max-width: 1200px; margin: 0 auto; padding: 0 40px; } /* Footer grid — horizontal layout */ body.homepage .footer-brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.06); } body.homepage .footer-logo img { filter: brightness(0) invert(1); opacity: 0.9; height: 40px; width: auto; } body.homepage .footer-tagline { color: rgba(255,255,255,0.5) !important; font-size: 0.9rem; max-width: 400px; text-align: right; margin: 0 !important; } /* Main footer grid */ body.homepage .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 48px; margin-bottom: 48px; } body.homepage .footer-column-title { color: rgba(255,255,255,0.9); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 20px; } body.homepage .footer-column-links { display: flex; flex-direction: column; gap: 12px; } body.homepage .footer-column-links a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 0.88rem; font-weight: 500; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; } body.homepage .footer-column-links a:hover { color: var(--hp-accent); transform: translateX(4px); } body.homepage .footer-column-links a i { font-size: 0.75rem; color: rgba(255,255,255,0.3); transition: color 0.3s ease; } body.homepage .footer-column-links a:hover i { color: var(--hp-accent); } /* Contact column */ body.homepage .footer-contact-list { display: flex; flex-direction: column; gap: 14px; } body.homepage .footer-contact-item { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.55); text-decoration: none; font-size: 0.85rem; transition: all 0.3s ease; } body.homepage .footer-contact-item:hover { color: var(--hp-accent); } body.homepage .footer-contact-item i { color: var(--hp-accent); font-size: 0.85rem; width: 20px; text-align: center; } /* Social */ body.homepage .footer-social { display: flex; align-items: center; gap: 12px; margin-top: 20px; } body.homepage .footer-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--hp-glass); border: 1px solid var(--hp-glass-border); color: rgba(255,255,255,0.6); text-decoration: none; transition: all 0.3s ease; font-size: 0.9rem; } body.homepage .footer-social a:hover { background: var(--hp-accent); border-color: var(--hp-accent); color: #ffffff; transform: translateY(-3px); box-shadow: 0 8px 24px rgba(229, 57, 53, 0.3); } /* Bottom bar */ body.homepage .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.06); } body.homepage .footer-copyright { color: rgba(255,255,255,0.4) !important; font-size: 0.8rem; margin: 0; } body.homepage .footer-legal { display: flex; gap: 24px; } body.homepage .footer-legal a { color: rgba(255,255,255,0.5) !important; text-decoration: none; font-size: 0.8rem; transition: color 0.3s ease; } body.homepage .footer-legal a:hover { color: var(--hp-accent) !important; } /* Hide old footer accordion styles */ body.homepage .footer-accordion, body.homepage .footer-accordion-item, body.homepage .footer-accordion-header, body.homepage .footer-accordion-content, body.homepage .footer-accordion-icon, body.homepage .footer-contact-card, body.homepage .footer-social-section, body.homepage .footer-social-grid, body.homepage .footer-social-title { display: none !important; } /* ============================================ WHATSAPP FLOAT ============================================ */ body.homepage .whatsapp-button { background: linear-gradient(135deg, #25d366, #128c7e) !important; box-shadow: 0 8px 32px rgba(37, 211, 102, 0.35) !important; } body.homepage .whatsapp-chat { background: var(--hp-card) !important; border: 1px solid var(--hp-glass-border) !important; backdrop-filter: blur(24px); } /* ============================================ SECTION REVEAL ANIMATIONS ============================================ */ body.homepage [data-home-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } body.homepage [data-home-reveal].is-visible { opacity: 1; transform: translateY(0); } body.homepage [data-home-reveal] .static-card:nth-child(1) { transition-delay: 0.1s; } body.homepage [data-home-reveal] .static-card:nth-child(2) { transition-delay: 0.2s; } /* ============================================ RESPONSIVE — Tablet ============================================ */ @media (max-width: 1024px) { body.homepage .hero-inner { padding: 140px 40px 80px; } body.homepage .static-cards-container.desktop-cards { gap: 24px; } body.homepage .static-card { padding: 32px !important; } body.homepage .testimonial-slide-card { flex-direction: column; } body.homepage .testimonial-slide-image { height: 280px; } body.homepage .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } } /* ============================================ RESPONSIVE — Mobile ============================================ */ @media (max-width: 768px) { body.homepage .hero.homepage-hero { min-height: 100svh; } body.homepage .hero-inner { text-align: center; align-items: center; padding: 140px 24px 90px; } body.homepage .hero-headline { max-width: 100%; font-size: clamp(2.4rem, 10vw, 3.8rem); line-height: 1; letter-spacing: -0.04em; text-shadow: 0 4px 30px rgba(0,0,0,0.5); } body.homepage .hero-brand { font-size: clamp(2.6rem, 11vw, 4.2rem); margin-bottom: 0.05em; } body.homepage .hero-gradient { font-size: clamp(1.5rem, 6.5vw, 2.4rem); line-height: 1.1; } body.homepage .hero-subtitle { margin-left: auto !important; margin-right: auto !important; max-width: 340px; font-size: 0.95rem; line-height: 1.6; color: rgba(255,255,255,0.75); text-align: center !important; text-shadow: 0 2px 24px rgba(0,0,0,0.5); } body.homepage .hero-ctas { justify-content: center !important; width: 100%; } body.homepage .cta-btn { flex: 1; justify-content: center; min-height: 52px; width: auto !important; height: auto !important; text-transform: none !important; font-size: 0.8rem !important; padding: 0 24px !important; } /* Mobile overlay — darker at top for text, lighter where video shows */ body.homepage .hero-overlay { background: linear-gradient(180deg, rgba(5,3,2,0.92) 0%, rgba(5,3,2,0.78) 20%, rgba(5,3,2,0.58) 50%, rgba(5,3,2,0.68) 100% ); } /* Mobile video — oversized element shows MORE of original video while still filling viewport */ body.homepage .hero-video-bg { width: 155%; height: 155%; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); object-fit: cover; object-position: center center; opacity: 0.95; filter: brightness(1.75) contrast(1.12) saturate(1.15); } body.homepage .hero-stats { justify-content: center !important; align-items: center !important; width: 100%; flex-wrap: wrap; padding-top: 48px; } body.homepage .stat-card { flex: 1; min-width: 100px; max-width: 140px; padding: 18px 16px; } body.homepage .stat-number { font-size: 1.5rem; } body.homepage .stat-label { font-size: 0.6rem; } body.homepage .logo-section-subtitle { font-size: 1.5rem !important; } body.homepage .section-title, body.homepage .testimonials-title { font-size: 1.75rem !important; } body.homepage .static-card { padding: 28px !important; } body.homepage .testimonial-slide-content { padding: 28px !important; } body.homepage .testimonial-slide-image { display: none !important; } body.homepage .cta-section h2 { font-size: 1.75rem !important; } body.homepage .cta-buttons { flex-direction: column; width: 100%; } body.homepage .cta-buttons .btn { width: 100%; justify-content: center; } /* Footer mobile */ body.homepage .footer-brand { flex-direction: column; text-align: center; gap: 16px; } body.homepage .footer-tagline { text-align: center; } body.homepage .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } body.homepage .footer-bottom { flex-direction: column; gap: 16px; text-align: center; } } /* ============================================ RESPONSIVE — Small Mobile ============================================ */ @media (max-width: 480px) { body.homepage .hero-inner { padding: 130px 20px 80px; } body.homepage .hero-headline { font-size: clamp(2.2rem, 11.5vw, 3.2rem); letter-spacing: -0.03em; line-height: 1; text-shadow: 0 4px 30px rgba(0,0,0,0.5); } body.homepage .hero-brand { font-size: clamp(2.4rem, 12vw, 3.6rem); margin-bottom: 0.05em; } body.homepage .hero-gradient { font-size: clamp(1.35rem, 7vw, 2rem); line-height: 1.1; } body.homepage .hero-subtitle { font-size: 0.9rem; margin-top: 18px; line-height: 1.6; } body.homepage .hero-ctas { flex-direction: column; width: 100%; margin-top: 28px; gap: 10px; } body.homepage .cta-btn { width: 100%; flex: none !important; justify-content: center; min-height: 50px; height: auto !important; font-size: 0.78rem !important; text-transform: none !important; white-space: nowrap; padding: 0 24px !important; } body.homepage .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 40px; } body.homepage .stat-card { min-width: unset; max-width: unset; padding: 14px 6px; border-radius: 12px; } body.homepage .stat-number { font-size: 1.25rem; } body.homepage .stat-label { font-size: 0.52rem; letter-spacing: 0.08em; } bottom: 20px; } body.homepage .logo-section-subtitle { font-size: 1.35rem !important; } body.homepage .section-title, body.homepage .testimonials-title { font-size: 1.6rem !important; } body.homepage .testimonial-slide-text { font-size: 0.95rem !important; } /* Footer small mobile — keep 2 columns for horizontal feel */ body.homepage .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; } body.homepage .footer-column-title { font-size: 0.7rem; margin-bottom: 16px; } body.homepage .footer-column-links a, body.homepage .footer-contact-item { font-size: 0.82rem; } body.homepage .footer .container { padding: 0 24px; } } /* ============================================ REDUCED MOTION ============================================ */ @media (prefers-reduced-motion: reduce) { body.homepage .hero-headline, body.homepage .hero-subtitle, body.homepage .hero-ctas, body.homepage .hero-stats { animation: none; opacity: 1; transform: none; } body.homepage .hero-ambient-glow { animation: none; } body.homepage [data-home-reveal] { opacity: 1; transform: none; transition: none; } }