/* ═══════════════════════════════════════════════════════════════════════════ SMAAI Landing — Holographic Marketing Splash (v=20260421-holo) Eye-catching overlay layered on top of the existing landing.html styles. Mounted via , so it never bleeds elsewhere. ═══════════════════════════════════════════════════════════════════════════ */ body.holo-land { --hl-bg-deep: #03060f; --hl-bg: #070b18; --hl-bg-2: #0c1226; --hl-glass: rgba(10, 18, 38, 0.55); --hl-mint: #00ff9d; --hl-cyan: #00c2ff; --hl-magenta: #ff2bd6; --hl-violet: #7a3bff; --hl-amber: #ffd166; --hl-text: #e8f7ff; --hl-text-dim: rgba(232, 247, 255, 0.66); --hl-border: rgba(0, 255, 157, 0.22); background: var(--hl-bg-deep) !important; color: var(--hl-text) !important; position: relative; overflow-x: hidden; } /* ── Animated cosmic backdrop ──────────────────────────────────────────── */ body.holo-land::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 18% 8%, rgba(0, 255, 157, 0.18), transparent 60%), radial-gradient(ellipse 60% 50% at 88% 18%, rgba(255, 43, 214, 0.16), transparent 60%), radial-gradient(ellipse 80% 60% at 50% 110%, rgba(0, 194, 255, 0.14), transparent 60%), linear-gradient(180deg, var(--hl-bg-deep) 0%, var(--hl-bg) 50%, var(--hl-bg-deep) 100%); } body.holo-land::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(0,255,157,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,157,0.045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 35%, transparent 90%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 35%, transparent 90%); animation: hl-grid-drift 40s linear infinite; } @keyframes hl-grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 56px 56px, 56px 56px; } } /* keep page content above backdrop — exclude all fixed/overlay/widget layers */ body.holo-land > *:not(.nav):not(nav):not(header):not(#hero-globe):not(.holo-bg):not(#holo-bg):not(canvas):not(.blue-spread):not(.vignette):not(#matrixCanvas):not(#godCanvas):not(.modal-overlay):not(.anchor-wrap):not(.anchor-panel):not(.anchor-tooltip) { position: relative; z-index: 2; } /* Force the backdrop canvases/overlays to stay fixed behind everything */ body.holo-land > canvas, body.holo-land > #matrixCanvas, body.holo-land > #godCanvas, body.holo-land > .blue-spread, body.holo-land > .vignette { position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0 !important; pointer-events: none; } /* Login / signup modal overlays must stay fixed full-viewport */ body.holo-land > .modal-overlay { position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000 !important; } /* Anchor (Priya) chat widget — pin to bottom-right */ body.holo-land > .anchor-wrap { position: fixed !important; bottom: 24px !important; right: 24px !important; left: auto !important; top: auto !important; z-index: 9990 !important; } body.holo-land > .anchor-panel { position: fixed !important; bottom: 24px !important; right: 24px !important; left: auto !important; top: auto !important; z-index: 9991 !important; } body.holo-land > .anchor-tooltip { position: fixed !important; bottom: 190px !important; right: 32px !important; left: auto !important; top: auto !important; z-index: 9989 !important; } /* ── Top nav glass ─────────────────────────────────────────────────────── */ body.holo-land .nav, body.holo-land > header, body.holo-land > nav { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000 !important; background: rgba(7, 11, 24, 0.72) !important; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--hl-border) !important; } body.holo-land .nav a, body.holo-land nav a { color: var(--hl-text) !important; } body.holo-land .nav a:hover, body.holo-land nav a:hover { color: var(--hl-mint) !important; text-shadow: 0 0 18px rgba(0,255,157,.5); } /* ── Hero ──────────────────────────────────────────────────────────────── */ body.holo-land .hero { background: transparent !important; position: relative; padding-top: 120px !important; /* clear the fixed nav (~64px) + breathing room */ padding-bottom: 80px !important; min-height: auto; /* let content dictate height; no flex centering trap */ } /* Hide the legacy "hero-eye" gradient blob — we have a real globe now */ body.holo-land .hero-eye { display: none !important; } /* 3D wireframe globe container injected by landing-holo.js */ body.holo-land #hero-globe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); width: min(820px, 92vw); height: min(820px, 92vw); max-height: 100vh; z-index: 0; pointer-events: none; opacity: 0.78; filter: drop-shadow(0 0 40px rgba(77, 219, 255, 0.55)) drop-shadow(0 0 90px rgba(0, 194, 255, 0.25)); mix-blend-mode: screen; animation: holoGlobePulse 5.5s ease-in-out infinite; } @keyframes holoGlobePulse { 0%, 100% { filter: drop-shadow(0 0 40px rgba(77, 219, 255, 0.55)) drop-shadow(0 0 90px rgba(0, 194, 255, 0.25)); } 50% { filter: drop-shadow(0 0 70px rgba(77, 219, 255, 0.95)) drop-shadow(0 0 160px rgba(0, 194, 255, 0.55)); } } /* Pulsing holographic aura ring behind the globe — "blinks" rhythmically */ body.holo-land .hero::before { content: ""; position: absolute; top: 50%; left: 50%; width: min(900px, 95vw); height: min(900px, 95vw); max-width: 100vh; max-height: 100vh; transform: translate(-50%, -55%); border-radius: 50%; background: radial-gradient(circle at center, rgba(77, 219, 255, 0.28) 0%, rgba(0, 194, 255, 0.18) 28%, rgba(0, 136, 255, 0.10) 50%, rgba(0, 0, 0, 0) 72%); filter: blur(8px); pointer-events: none; z-index: 0; animation: holoAuraPulse 4s ease-in-out infinite; } @keyframes holoAuraPulse { 0%, 100% { opacity: 0.55; transform: translate(-50%, -55%) scale(0.92); } 45% { opacity: 1.0; transform: translate(-50%, -55%) scale(1.08); } 60% { opacity: 0.35; transform: translate(-50%, -55%) scale(1.02); } 75% { opacity: 0.95; transform: translate(-50%, -55%) scale(1.06); } } body.holo-land #hero-globe.holo-fallback { background: radial-gradient(circle at 35% 35%, rgba(0,255,157,0.4), transparent 55%), radial-gradient(circle at 65% 65%, rgba(255,43,214,0.3), transparent 55%), conic-gradient(from 0deg, rgba(0,255,157,0.18), rgba(0,194,255,0.14), rgba(255,43,214,0.18), rgba(0,255,157,0.18)); border-radius: 50%; width: min(520px, 80vw); height: min(520px, 80vw); animation: hl-spin 60s linear infinite; } @keyframes hl-spin { to { transform: translate(-50%, -55%) rotate(360deg); } } body.holo-land .hero .container { position: relative; z-index: 3; text-align: center; } /* RFA badge — replaces the old "Future of Marketing" pill with a louder, neon one */ body.holo-land .hero-badge { display: inline-flex !important; align-items: center; gap: 10px; padding: 8px 18px !important; background: rgba(0, 255, 157, 0.08) !important; border: 1px solid var(--hl-border) !important; border-radius: 999px !important; color: var(--hl-mint) !important; font-family: "Fira Code", ui-monospace, monospace !important; font-size: 12px !important; letter-spacing: 0.18em !important; text-transform: uppercase; box-shadow: 0 0 24px rgba(0, 255, 157, 0.35), inset 0 0 12px rgba(0, 255, 157, 0.12); animation: hl-pulse 3.2s ease-in-out infinite; } body.holo-land .hero-badge .pulse { width: 8px; height: 8px; background: var(--hl-mint) !important; border-radius: 50%; box-shadow: 0 0 14px var(--hl-mint), 0 0 28px var(--hl-mint); } @keyframes hl-pulse { 0%, 100% { box-shadow: 0 0 24px rgba(0,255,157,0.35), inset 0 0 12px rgba(0,255,157,0.12); } 50% { box-shadow: 0 0 38px rgba(0,255,157,0.65), inset 0 0 18px rgba(0,255,157,0.2); } } /* Logo hover micro-glow */ body.holo-land .hero-logo img { filter: drop-shadow(0 0 28px rgba(0, 255, 157, 0.35)); transition: transform 0.6s ease, filter 0.6s ease; } body.holo-land .hero-logo img:hover { transform: translateY(-4px) scale(1.02); filter: drop-shadow(0 0 48px rgba(0, 255, 157, 0.6)); } /* Hero H1 — massive gradient headline */ body.holo-land .hero h1 { font-size: clamp(40px, 6.4vw, 88px) !important; line-height: 1.05 !important; font-weight: 800 !important; margin: 24px 0 20px !important; color: var(--hl-text) !important; letter-spacing: -0.02em !important; text-shadow: 0 0 40px rgba(0, 255, 157, 0.18); } body.holo-land .hero h1 .gradient { background: linear-gradient(95deg, var(--hl-mint) 0%, var(--hl-cyan) 45%, var(--hl-magenta) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; filter: drop-shadow(0 0 30px rgba(0, 255, 157, 0.35)); background-size: 200% 100%; animation: hl-gradient-shift 8s ease-in-out infinite; } @keyframes hl-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } body.holo-land .hero-sub { font-size: clamp(16px, 1.6vw, 21px) !important; color: var(--hl-text-dim) !important; max-width: 760px; margin: 0 auto 36px !important; line-height: 1.7 !important; } /* Hero CTAs — neon mint primary + ghost cyan */ body.holo-land .hero-cta { gap: 16px !important; } body.holo-land .btn, body.holo-land .btn-lg { border-radius: 12px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; transition: all 0.25s ease !important; } body.holo-land .btn-primary { background: linear-gradient(135deg, var(--hl-mint) 0%, var(--hl-cyan) 100%) !important; color: #001a10 !important; border: none !important; box-shadow: 0 0 0 1px rgba(0, 255, 157, 0.5), 0 8px 32px rgba(0, 255, 157, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; position: relative; overflow: hidden; } body.holo-land .btn-primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.6s ease; } body.holo-land .btn-primary:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 0 0 1px rgba(0, 255, 157, 0.8), 0 14px 48px rgba(0, 255, 157, 0.6), 0 0 80px rgba(0, 255, 157, 0.3) !important; } body.holo-land .btn-primary:hover::before { transform: translateX(100%); } body.holo-land .btn-ghost { background: rgba(0, 194, 255, 0.06) !important; color: var(--hl-cyan) !important; border: 1px solid rgba(0, 194, 255, 0.45) !important; box-shadow: 0 0 24px rgba(0, 194, 255, 0.15) !important; } body.holo-land .btn-ghost:hover { background: rgba(0, 194, 255, 0.12) !important; border-color: var(--hl-cyan) !important; box-shadow: 0 0 36px rgba(0, 194, 255, 0.45) !important; transform: translateY(-2px); } /* Hero stats row — holographic counters */ body.holo-land .hero-stats { margin-top: 60px !important; gap: 28px !important; flex-wrap: wrap; } body.holo-land .hero-stat { background: var(--hl-glass) !important; border: 1px solid var(--hl-border) !important; border-radius: 16px !important; padding: 18px 28px !important; min-width: 140px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(0, 255, 157, 0.12); transition: transform 0.3s ease, box-shadow 0.3s ease; } body.holo-land .hero-stat:hover { transform: translateY(-4px); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 32px rgba(0, 255, 157, 0.25); } body.holo-land .hero-stat .num { font-size: 40px !important; font-weight: 800 !important; background: linear-gradient(135deg, var(--hl-mint), var(--hl-cyan)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0 16px rgba(0, 255, 157, 0.4)); } body.holo-land .hero-stat .label { color: var(--hl-text-dim) !important; font-size: 12px !important; letter-spacing: 0.12em !important; text-transform: uppercase; margin-top: 4px; } /* ── Sections ──────────────────────────────────────────────────────────── */ body.holo-land .section, body.holo-land .roi-section, body.holo-land .cta-section { background: transparent !important; position: relative; padding: 100px 0 !important; } body.holo-land .section h2, body.holo-land .cta-section h2 { font-size: clamp(32px, 4vw, 56px) !important; font-weight: 800 !important; color: var(--hl-text) !important; letter-spacing: -0.01em !important; } body.holo-land .section h2 .gradient, body.holo-land h2 .gradient { background: linear-gradient(95deg, var(--hl-mint), var(--hl-cyan), var(--hl-magenta)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0 20px rgba(0, 255, 157, 0.3)); } body.holo-land .section-label { display: inline-block; padding: 6px 14px; background: rgba(255, 43, 214, 0.1) !important; border: 1px solid rgba(255, 43, 214, 0.3); border-radius: 999px; color: var(--hl-magenta) !important; font-family: "Fira Code", monospace !important; font-size: 11px !important; letter-spacing: 0.18em !important; text-transform: uppercase; margin-bottom: 16px; } body.holo-land p, body.holo-land .section p { color: var(--hl-text-dim) !important; } /* Holographic cards — features, agents, pricing, FAQ */ body.holo-land .feature-card, body.holo-land .agent-card, body.holo-land .pricing-card, body.holo-land .step-card, body.holo-land .testimonial-card, body.holo-land .faq-item, body.holo-land .roi-result, body.holo-land .cta-box { background: var(--hl-glass) !important; border: 1px solid var(--hl-border) !important; border-radius: 18px !important; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(0, 255, 157, 0.1) !important; position: relative; transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease; } body.holo-land .feature-card::before, body.holo-land .agent-card::before, body.holo-land .pricing-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(0,255,157,0.6), transparent 40%, transparent 60%, rgba(255,43,214,0.45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); 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; pointer-events: none; } body.holo-land .feature-card:hover, body.holo-land .agent-card:hover, body.holo-land .pricing-card:hover, body.holo-land .step-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 255, 157, 0.2) !important; } body.holo-land .feature-card:hover::before, body.holo-land .agent-card:hover::before, body.holo-land .pricing-card:hover::before { opacity: 1; } body.holo-land .feature-card h3, body.holo-land .agent-card h3, body.holo-land .pricing-card h3, body.holo-land .step-card h3, body.holo-land .faq-item h3, body.holo-land .faq-question { color: var(--hl-text) !important; } /* Pricing — featured plan glows magenta */ body.holo-land .pricing-card.featured, body.holo-land .pricing-card.popular { background: linear-gradient(180deg, rgba(255,43,214,0.06), var(--hl-glass)) !important; border-color: rgba(255, 43, 214, 0.4) !important; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 50px rgba(255, 43, 214, 0.25), inset 0 1px 0 rgba(255, 43, 214, 0.2) !important; transform: scale(1.04); } body.holo-land .pricing-card .price, body.holo-land .pricing-card .plan-price { background: linear-gradient(135deg, var(--hl-mint), var(--hl-cyan)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ROI calculator — magenta/cyan gradient frame */ body.holo-land .roi-section .roi-result, body.holo-land .roi-result { background: linear-gradient(135deg, rgba(0,255,157,0.08), rgba(255,43,214,0.08)) !important; border: 1px solid rgba(0, 194, 255, 0.4) !important; box-shadow: 0 0 60px rgba(0, 194, 255, 0.2); } body.holo-land input, body.holo-land select, body.holo-land textarea { background: rgba(7, 11, 24, 0.7) !important; border: 1px solid var(--hl-border) !important; color: var(--hl-text) !important; border-radius: 10px !important; } body.holo-land input:focus, body.holo-land select:focus, body.holo-land textarea:focus { border-color: var(--hl-mint) !important; box-shadow: 0 0 0 3px rgba(0, 255, 157, 0.18), 0 0 24px rgba(0, 255, 157, 0.25) !important; outline: none; } /* Final CTA box — full magenta-to-mint sweep */ body.holo-land .cta-section .cta-box, body.holo-land .cta-box { background: linear-gradient(135deg, rgba(255,43,214,0.14), rgba(0,255,157,0.14)) !important; border: 1px solid rgba(255, 43, 214, 0.4) !important; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 80px rgba(255, 43, 214, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; padding: 60px 40px !important; } /* Footer */ body.holo-land .footer { background: rgba(3, 6, 15, 0.85) !important; border-top: 1px solid var(--hl-border) !important; color: var(--hl-text-dim) !important; } body.holo-land .footer a { color: var(--hl-text-dim) !important; } body.holo-land .footer a:hover { color: var(--hl-mint) !important; text-shadow: 0 0 14px rgba(0,255,157,.4); } /* Smooth scroll-reveal for any element marked .reveal in landing.html */ body.holo-land .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; } body.holo-land .reveal.in-view { opacity: 1; transform: translateY(0); } /* Section dividers — thin scan lines */ body.holo-land .section + .section::before, body.holo-land .section + .roi-section::before, body.holo-land .roi-section + .section::before { content: ""; display: block; height: 1px; margin: 0 auto -100px; width: min(80%, 1100px); background: linear-gradient(90deg, transparent, var(--hl-border), transparent); } /* Selection */ body.holo-land ::selection { background: var(--hl-mint); color: #001a10; } /* Reduced motion + mobile guards */ @media (max-width: 768px) { body.holo-land #hero-globe { width: 100vw; height: 100vw; opacity: 0.5; } body.holo-land .hero h1 { font-size: clamp(34px, 9vw, 52px) !important; } body.holo-land .hero { padding-top: 40px !important; padding-bottom: 60px !important; min-height: auto; } body.holo-land .hero-stat { min-width: 130px; padding: 14px 18px !important; } body.holo-land .hero-stat .num { font-size: 30px !important; } } @media (prefers-reduced-motion: reduce) { body.holo-land::after, body.holo-land .hero-badge, body.holo-land .hero h1 .gradient { animation: none !important; } } /* Scrollbar */ body.holo-land::-webkit-scrollbar { width: 12px; } body.holo-land::-webkit-scrollbar-track { background: var(--hl-bg-deep); } body.holo-land::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--hl-mint), var(--hl-cyan)); border-radius: 6px; border: 3px solid var(--hl-bg-deep); }