/* GalaxyWarden Marketing Styles */
/* Google Fonts — loaded via in for better WebView compat.
@import blocked by Reddit in-app browser CORS, so we use preconnect instead.
Kept as fallback for non-Reddit contexts: */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');
/* ── WebView/Reddit in-app browser safety net ──
If gradient-text or backdrop-filter aren't supported, provide safe fallbacks. */
@supports not (-webkit-background-clip: text) {
.gw-nav-logo-text,
.hero-title,
.section-title,
[class*="gradient-text"] {
color: #A8D5E5 !important;
background: none !important;
}
}
@supports not (backdrop-filter: blur(1px)) {
.gw-sticky-nav-topnav,
.gw-nav-mobile-drawer,
[style*="backdrop-filter"] {
background-color: rgba(10,14,23,0.98) !important;
}
}
/* ============================================================
GALAXYWARDEN STICKY NAV - FRONTEND PAGES
============================================================ */
/* CSS Custom Properties */
:root {
--color-void: #030712;
--color-deep-space: #0a0e17;
--color-nebula: #0f172a;
--color-stellar-dust: #1e293b;
--color-ice-glow: #A8D5E5;
--color-cyber-violet: #a78bfa;
--color-plasma-pink: #f472b6;
--color-solar-gold: #fbbf24;
--color-alert-red: #ef4444;
--color-success: #10b981;
--font-display: 'Orbitron', 'Exo 2', sans-serif;
--font-heading: 'Rajdhani', 'Exo 2', sans-serif;
--font-body: 'Montserrat', 'Inter', sans-serif;
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Import Enhanced Fonts */
/* Hide old navigation elements */
.desktop-nav-horizontal,
#desktop-nav-horizontal,
.mobile-logo-nav,
#mobile-logo-nav {
display: none !important;
}
/* Mobile menu - hidden on desktop by default */
.gw-mobile-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 9998;
pointer-events: none;
}
.gw-mobile-drawer {
position: fixed;
top: 0;
right: -100%;
width: 85%;
max-width: 320px;
height: 100vh;
height: 100dvh; /* Dynamic viewport height for mobile */
background: rgba(10, 14, 23, 0.98);
backdrop-filter: blur(20px);
border-left: 1px solid rgba(168, 213, 229, 0.2);
z-index: 9999;
padding: 1.5rem;
transition: right 0.3s ease, visibility 0.3s ease;
overflow-y: auto;
visibility: hidden;
}
.gw-mobile-overlay.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.gw-mobile-drawer.open {
right: 0;
visibility: visible;
}
/* Mobile menu button - hidden on desktop */
.gw-mobile-menu-btn {
display: none;
}
body:has(.gw-sticky-nav) {
padding-top: 0 !important;
}
/* Sticky Navigation */
.gw-sticky-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9990;
background: rgba(10, 14, 23, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(168, 213, 229, 0.1);
transition: all 0.3s var(--ease-smooth);
}
.gw-sticky-nav.scrolled {
background: rgba(10, 14, 23, 0.98);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
border-bottom-color: rgba(168, 213, 229, 0.2);
}
.gw-nav-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 100px;
}
.gw-nav-logo {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
flex-shrink: 0;
position: relative;
}
.gw-nav-logo img {
width: 88px;
height: 88px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
filter: drop-shadow(0 0 8px rgba(168, 213, 229, 0.4))
drop-shadow(0 0 15px rgba(34, 211, 238, 0.2));
}
.gw-nav-logo:hover img {
filter: drop-shadow(0 0 15px rgba(168, 213, 229, 0.8))
drop-shadow(0 0 30px rgba(34, 211, 238, 0.6))
drop-shadow(0 0 45px rgba(139, 92, 246, 0.4));
}
.gw-nav-logo-text {
font-family: var(--font-display), 'Segoe UI', system-ui, -apple-system, sans-serif;
font-size: 1.4rem;
font-weight: 700;
color: #A8D5E5; /* Solid fallback — visible even when gradient-clip fails (Reddit WebView) */
background: linear-gradient(135deg, var(--color-ice-glow) 0%, var(--color-cyber-violet) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 0.05em;
}
.gw-nav-menu {
display: flex;
align-items: center;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.gw-nav-item {
position: relative;
}
.gw-nav-link {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.5rem 1rem;
color: #94a3b8;
text-decoration: none;
font-family: var(--font-heading);
font-weight: 500;
font-size: 0.95rem;
border-radius: 8px;
transition: all 0.2s;
}
.gw-nav-link:hover,
.gw-nav-link.active {
color: var(--color-ice-glow);
background: rgba(168, 213, 229, 0.1);
}
.gw-nav-link svg {
width: 16px;
height: 16px;
transition: transform 0.2s;
}
.gw-nav-item:hover .gw-nav-link svg {
transform: rotate(180deg);
}
/* Dropdown */
.gw-nav-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: rgba(15, 23, 42, 0.98);
border: 1px solid rgba(168, 213, 229, 0.15);
border-radius: 12px;
padding: 0.5rem;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.2s var(--ease-smooth);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(20px);
}
.gw-nav-item:hover .gw-nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(5px);
}
.gw-nav-dropdown a {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
color: #94a3b8;
text-decoration: none;
font-size: 0.9rem;
border-radius: 8px;
transition: all 0.2s;
}
.gw-nav-dropdown a:hover {
color: var(--color-ice-glow);
background: rgba(168, 213, 229, 0.1);
}
.gw-nav-dropdown-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(168, 213, 229, 0.1);
border-radius: 8px;
color: var(--color-ice-glow);
}
.gw-nav-dropdown-icon svg {
width: 18px;
height: 18px;
}
.gw-nav-dropdown-divider {
height: 1px;
background: rgba(100, 116, 139, 0.3);
margin: 0.5rem 0;
}
/* Nav Actions */
.gw-nav-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.gw-nav-login {
color: #94a3b8;
text-decoration: none;
font-family: var(--font-heading);
font-weight: 500;
font-size: 0.9rem;
padding: 0.5rem 0.75rem;
border-radius: 6px;
transition: all 0.2s;
}
.gw-nav-login:hover {
color: var(--color-ice-glow);
background: rgba(168, 213, 229, 0.1);
}
.gw-nav-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 1.35rem;
background: linear-gradient(135deg, var(--color-ice-glow), #0ea5e9);
color: var(--color-deep-space);
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
border-radius: 8px;
letter-spacing: 0.02em;
transition: all 0.3s var(--ease-smooth);
box-shadow: 0 4px 15px rgba(168, 213, 229, 0.25);
animation: navCtaPulse 3s ease-in-out infinite;
}
@keyframes navCtaPulse {
0%, 100% { box-shadow: 0 4px 15px rgba(168, 213, 229, 0.25); }
50% { box-shadow: 0 4px 25px rgba(168, 213, 229, 0.45), 0 0 35px rgba(168, 213, 229, 0.15); }
}
.gw-nav-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(168, 213, 229, 0.45);
animation: none;
}
/* Mobile Navigation */
.gw-mobile-menu-btn {
display: none;
flex-direction: column;
gap: 5px;
padding: 10px;
background: transparent;
border: none;
cursor: pointer;
}
.gw-mobile-menu-btn span {
width: 24px;
height: 2px;
background: var(--color-ice-glow);
transition: all 0.3s;
}
@media (max-width: 1024px) {
.gw-nav-menu {
display: none;
}
.gw-mobile-menu-btn {
display: flex;
}
.gw-nav-container {
padding: 0 1rem;
}
.gw-nav-login {
display: none;
}
}
/* Page content spacing for sticky nav */
.gw-page-content,
main,
.page-content,
.container:first-of-type,
section:first-of-type:not(.hero-banner) {
padding-top: 110px;
}
/* Hero banner padding is handled in the main hero-banner definition below */
.hero-banner + section,
.hero-banner ~ main section:first-of-type {
padding-top: 0;
}
/* ============================================================
GALAXYWARDEN DESIGN SYSTEM - IMMERSIVE SPACE THEME
============================================================ */
/* CSS Custom Properties */
:root {
--color-void: #030712;
--color-deep-space: #0a0e17;
--color-nebula: #0f172a;
--color-stellar-dust: #1e293b;
--color-ice-glow: #A8D5E5;
--color-cyber-violet: #a78bfa;
--color-plasma-pink: #f472b6;
--color-solar-gold: #fbbf24;
--color-alert-red: #ef4444;
--color-success: #10b981;
--font-display: 'Orbitron', 'Exo 2', sans-serif;
--font-heading: 'Rajdhani', 'Exo 2', sans-serif;
--font-body: 'Montserrat', 'Inter', sans-serif;
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* Import Enhanced Fonts */
/* ============================================================
STICKY NAVIGATION
============================================================ */
.gw-sticky-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9990;
background: rgba(10, 14, 23, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(168, 213, 229, 0.1);
transition: all 0.3s var(--ease-smooth);
transform: translateY(0);
}
.gw-sticky-nav.scrolled {
background: rgba(10, 14, 23, 0.98);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
border-bottom-color: rgba(168, 213, 229, 0.2);
}
.gw-nav-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
align-items: center;
justify-content: space-between;
height: 100px;
}
.gw-nav-logo {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
flex-shrink: 0;
position: relative;
}
.gw-nav-logo img {
width: 88px;
height: 88px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
filter: drop-shadow(0 0 8px rgba(168, 213, 229, 0.4))
drop-shadow(0 0 15px rgba(34, 211, 238, 0.2));
}
.gw-nav-logo:hover img {
filter: drop-shadow(0 0 15px rgba(168, 213, 229, 0.8))
drop-shadow(0 0 30px rgba(34, 211, 238, 0.6))
drop-shadow(0 0 45px rgba(139, 92, 246, 0.4));
}
.gw-nav-logo-text {
font-family: var(--font-display), 'Segoe UI', system-ui, -apple-system, sans-serif;
font-size: 1.4rem;
font-weight: 700;
color: #A8D5E5; /* Solid fallback — visible even when gradient-clip fails (Reddit WebView) */
background: linear-gradient(135deg, var(--color-ice-glow) 0%, var(--color-cyber-violet) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 0.05em;
}
.gw-nav-menu {
display: flex;
align-items: center;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.gw-nav-item {
position: relative;
}
.gw-nav-link {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 1rem;
color: #94a3b8;
text-decoration: none;
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.02em;
border-radius: 8px;
transition: all 0.2s var(--ease-smooth);
}
.gw-nav-link:hover,
.gw-nav-link.active {
color: var(--color-ice-glow);
background: rgba(168, 213, 229, 0.08);
}
.gw-nav-link svg {
width: 12px;
height: 12px;
transition: transform 0.2s var(--ease-smooth);
}
.gw-nav-item:hover .gw-nav-link svg {
transform: rotate(180deg);
}
/* Dropdown Menu */
.gw-nav-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
min-width: 220px;
background: rgba(15, 23, 42, 0.98);
border: 1px solid rgba(168, 213, 229, 0.2);
border-radius: 12px;
padding: 0.5rem;
opacity: 0;
visibility: hidden;
transition: all 0.25s var(--ease-smooth);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.gw-nav-item:hover .gw-nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.gw-nav-dropdown a {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
color: #94a3b8;
text-decoration: none;
font-size: 0.9rem;
border-radius: 8px;
transition: all 0.2s;
}
.gw-nav-dropdown a:hover {
color: var(--color-ice-glow);
background: rgba(168, 213, 229, 0.1);
}
.gw-nav-dropdown-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(168, 213, 229, 0.1);
border-radius: 8px;
color: var(--color-ice-glow);
}
.gw-nav-dropdown-icon svg {
width: 18px;
height: 18px;
}
.gw-nav-dropdown-divider {
height: 1px;
background: rgba(100, 116, 139, 0.3);
margin: 0.5rem 0;
}
/* Nav Actions */
.gw-nav-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.gw-nav-login {
color: #94a3b8;
text-decoration: none;
font-family: var(--font-heading);
font-weight: 500;
font-size: 0.9rem;
padding: 0.5rem 0.75rem;
border-radius: 6px;
transition: all 0.2s;
}
.gw-nav-login:hover {
color: var(--color-ice-glow);
background: rgba(168, 213, 229, 0.1);
}
.gw-nav-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 1.35rem;
background: linear-gradient(135deg, var(--color-ice-glow), #0ea5e9);
color: var(--color-deep-space);
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
border-radius: 8px;
letter-spacing: 0.02em;
transition: all 0.3s var(--ease-smooth);
box-shadow: 0 4px 15px rgba(168, 213, 229, 0.25);
animation: navCtaPulse 3s ease-in-out infinite;
}
.gw-nav-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(168, 213, 229, 0.45);
animation: none;
}
/* Mobile Navigation */
.gw-mobile-menu-btn {
display: none;
flex-direction: column;
gap: 5px;
padding: 10px;
background: transparent;
border: none;
cursor: pointer;
}
.gw-mobile-menu-btn span {
width: 24px;
height: 2px;
background: var(--color-ice-glow);
transition: all 0.3s;
}
@media (max-width: 1024px) {
.gw-nav-menu {
display: none;
}
.gw-mobile-menu-btn {
display: flex;
}
.gw-nav-container {
padding: 0 1rem;
}
.gw-nav-login {
display: none;
}
}
/* ============================================================
ENHANCED HERO BACKGROUNDS
============================================================ */
/* Animated Nebula Blobs */
.gw-hero-nebula {
position: fixed;
border-radius: 50%;
filter: blur(100px);
opacity: 0.3;
animation: nebulaFloat 20s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
.gw-hero-nebula-1 {
width: 600px;
height: 600px;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(168, 213, 229, 0.2));
top: -200px;
right: -100px;
animation-delay: 0s;
}
.gw-hero-nebula-2 {
width: 500px;
height: 500px;
background: linear-gradient(135deg, rgba(244, 114, 182, 0.3), rgba(139, 92, 246, 0.2));
bottom: -150px;
left: -100px;
animation-delay: -10s;
}
@keyframes nebulaFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(30px, -20px) scale(1.05); }
50% { transform: translate(-20px, 30px) scale(0.95); }
75% { transform: translate(20px, 20px) scale(1.02); }
}
/* Stars twinkling */
.gw-hero-stars {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.8) 0%, transparent 100%),
radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.6) 0%, transparent 100%),
radial-gradient(2px 2px at 80% 50%, rgba(168, 213, 229, 0.7) 0%, transparent 100%),
radial-gradient(1px 1px at 10% 60%, rgba(255,255,255,0.4) 0%, transparent 100%),
radial-gradient(2px 2px at 90% 80%, rgba(139, 92, 246, 0.6) 0%, transparent 100%),
radial-gradient(1px 1px at 50% 90%, rgba(255,255,255,0.5) 0%, transparent 100%);
animation: starTwinkle 8s ease-in-out infinite;
}
@keyframes starTwinkle {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* ============================================================
MOBILE PERFORMANCE & OVERFLOW FIXES
============================================================ */
@media (max-width: 768px) {
/* Disable heavy animations on mobile for performance */
.gw-hero-nebula {
animation: none !important;
opacity: 0.2;
}
.gw-hero-stars {
animation: none !important;
}
/* Ensure no horizontal overflow from fixed/absolute elements */
.gw-hero-nebula,
.gw-hero-stars,
.cyber-bg,
.cyber-grid,
.particles,
.scanlines {
max-width: 100vw;
overflow: hidden;
}
/* Reduce nebula size on mobile */
.gw-hero-nebula-1 {
width: 300px;
height: 300px;
top: -100px;
right: -50px;
}
.gw-hero-nebula-2 {
width: 250px;
height: 250px;
bottom: -80px;
left: -50px;
}
}
@media (max-width: 480px) {
/* Even more aggressive optimization for small phones */
.gw-hero-nebula {
display: none;
}
.particles {
display: none;
}
}
/* ============================================================
SCROLL-TRIGGERED ANIMATIONS
============================================================ */
.gw-reveal {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s var(--ease-smooth);
}
.gw-reveal.revealed,
.gw-reveal.visible {
opacity: 1;
transform: translateY(0);
}
.gw-reveal-left {
opacity: 0;
transform: translateX(-60px);
transition: all 0.8s var(--ease-smooth);
}
.gw-reveal-left.revealed,
.gw-reveal-left.visible {
opacity: 1;
transform: translateX(0);
}
.gw-reveal-right {
opacity: 0;
transform: translateX(60px);
transition: all 0.8s var(--ease-smooth);
}
.gw-reveal-right.revealed,
.gw-reveal-right.visible {
opacity: 1;
transform: translateX(0);
}
/* Stagger delays */
.gw-delay-1 { transition-delay: 0.1s; }
.gw-delay-2 { transition-delay: 0.2s; }
.gw-delay-3 { transition-delay: 0.3s; }
.gw-delay-4 { transition-delay: 0.4s; }
.gw-delay-5 { transition-delay: 0.5s; }
/* ============================================================
ENHANCED SECTION HEADERS
============================================================ */
.gw-section-label {
display: inline-block;
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-cyber-violet);
margin-bottom: 1rem;
padding: 0.4rem 1rem;
background: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.2);
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.gw-section-label-danger {
color: #f87171;
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.2);
}
/* ============================================================
ENHANCED BUTTONS
============================================================ */
.gw-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.9rem 2rem;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
text-decoration: none;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
transition: all 0.3s var(--ease-smooth);
cursor: pointer;
border: none;
}
.gw-btn-primary {
background: linear-gradient(135deg, var(--color-ice-glow), #0ea5e9);
color: var(--color-deep-space);
box-shadow: 0 4px 20px rgba(168, 213, 229, 0.25);
}
.gw-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(168, 213, 229, 0.4);
}
.gw-btn-secondary {
background: transparent;
border: 2px solid rgba(168, 213, 229, 0.4);
color: var(--color-ice-glow);
}
.gw-btn-secondary:hover {
background: rgba(168, 213, 229, 0.1);
border-color: var(--color-ice-glow);
}
/* Text gradient utility */
.gw-text-gradient {
background: linear-gradient(135deg, var(--color-ice-glow), var(--color-cyber-violet));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Body padding for sticky nav */
body {
/* No default padding-top - pages with sticky nav handle this themselves */
padding-top: 0;
}
/* ===== CINEMATIC FULL-WIDTH HERO BANNER ===== */
/* Hide the floating mobile logo on pages with sticky nav */
.gw-sticky-nav ~ .mobile-logo-nav,
body:has(.gw-sticky-nav) .mobile-logo-nav,
#main-content ~ .mobile-logo-nav {
display: none !important;
}
/* Hide the desktop horizontal nav (large logo) on pages with sticky nav */
.gw-sticky-nav ~ .desktop-nav-horizontal,
body:has(.gw-sticky-nav) .desktop-nav-horizontal,
body:has(.gw-sticky-nav) #desktop-nav-horizontal {
display: none !important;
}
/* Reset body padding when sticky nav is present */
body:has(.gw-sticky-nav) {
padding-top: 0 !important;
}
/* Ensure main content has no margin when hero banner is present */
#main-content:has(.hero-banner) {
margin: 0;
padding: 0;
}
/* Remove body side-padding on pages with hero banner (prevents black bar edges) */
/* Only strip padding when there's no sidebar (logged-out). With sidebar, keep left padding. */
body:has(.hero-banner):not(.has-sidebar) {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.has-sidebar:has(.hero-banner) {
padding-right: 0 !important;
}
/* Also hide via JavaScript fallback class */
.hide-mobile-logo .mobile-logo-nav,
.hide-mobile-logo .desktop-nav-horizontal,
.hide-mobile-logo #desktop-nav-horizontal {
display: none !important;
}
/* Hero Banner - Full Width Cinematic */
.hero-banner {
position: relative;
width: 100%; /* was 100vw — causes horizontal overflow on mobile WebViews */
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
background: var(--color-void);
/* Break out of any parent constraints (including body padding) */
margin-left: calc(-50vw + 50%);
box-sizing: border-box;
/* No padding/margin - hero extends from viewport top */
margin-top: 0;
padding-top: 0;
}
/* Background Image Container */
.hero-banner-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
overflow: hidden;
}
.hero-banner-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 65% center;
}
/* Subtle zoom animation for cinematic feel */
@keyframes heroImageZoom {
0% { transform: scale(1); }
100% { transform: scale(1.05); }
}
.hero-banner-image {
animation: heroImageZoom 30s ease-in-out infinite alternate;
}
/* Hero Video Background Layer */
.hero-banner-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
opacity: 0.25;
pointer-events: none;
}
/* WOAH Factor Animations */
@keyframes criticalPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; text-shadow: 0 0 8px rgba(239,68,68,0.6); }
}
@keyframes gwBorderGlow {
0%, 100% { box-shadow: 0 0 25px rgba(16,185,129,0.12); }
50% { box-shadow: 0 0 40px rgba(16,185,129,0.25), 0 0 60px rgba(16,185,129,0.08); }
}
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
/* Scroll reveal animations */
.gw-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.gw-reveal.revealed {
opacity: 1;
transform: translateY(0);
}
.gw-reveal-left {
opacity: 0;
transform: translateX(-24px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.gw-reveal-left.revealed {
opacity: 1;
transform: translateX(0);
}
.gw-reveal-scale {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.gw-reveal-scale.revealed {
opacity: 1;
transform: scale(1);
}
/* Hover micro-interactions */
.gw-hover-lift {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gw-hover-lift:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
/* Gradient overlay for text readability */
.hero-banner-overlay {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(
90deg,
rgba(3, 7, 18, 0.95) 0%,
rgba(3, 7, 18, 0.85) 25%,
rgba(3, 7, 18, 0.6) 40%,
rgba(3, 7, 18, 0.3) 55%,
transparent 70%
);
}
/* Scanline effect over the whole banner */
.hero-banner-scanlines {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background: repeating-linear-gradient(
0deg,
transparent 0px,
transparent 2px,
rgba(0, 0, 0, 0.08) 2px,
rgba(0, 0, 0, 0.08) 4px
);
}
/* Vignette effect */
.hero-banner-vignette {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
background: radial-gradient(
ellipse 80% 80% at 70% 50%,
transparent 30%,
rgba(3, 7, 18, 0.5) 100%
);
}
/* Ambient Glow Effect (cleaner alternative to scanlines) */
.hero-banner-glow {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background:
radial-gradient(ellipse 50% 30% at 20% 80%, rgba(168, 213, 229, 0.08), transparent),
radial-gradient(ellipse 40% 25% at 75% 20%, rgba(139, 92, 246, 0.06), transparent);
animation: heroGlowPulse 8s ease-in-out infinite;
}
@keyframes heroGlowPulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
/* ===== HERO WAITLIST CARD ===== */
.hero-waitlist-card {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
border: 1px solid rgba(168, 213, 229, 0.2);
border-radius: 16px;
padding: 1.5rem;
margin-top: 1.75rem;
max-width: 440px;
position: relative;
overflow: hidden;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
0 0 60px rgba(168, 213, 229, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hero-waitlist-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(168, 213, 229, 0.6), rgba(139, 92, 246, 0.4), transparent);
}
.hero-waitlist-header {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.25rem;
}
.hero-waitlist-icon {
font-size: 1.75rem;
line-height: 1;
flex-shrink: 0;
}
.hero-waitlist-title {
font-size: 1.1rem;
font-weight: 700;
color: #e2e8f0;
margin: 0 0 0.25rem 0;
letter-spacing: -0.01em;
}
.hero-waitlist-subtitle {
font-size: 0.85rem;
color: #94a3b8;
margin: 0;
line-height: 1.4;
}
/* Waitlist Benefits */
.hero-waitlist-benefits {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-bottom: 1rem;
padding: 0.75rem;
background: rgba(10, 14, 23, 0.5);
border-radius: 10px;
border: 1px solid rgba(168, 213, 229, 0.08);
}
.hero-waitlist-benefit {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.85rem;
color: #94a3b8;
}
.hero-waitlist-benefit .benefit-icon {
font-size: 1rem;
flex-shrink: 0;
}
.hero-waitlist-benefit strong {
color: #e2e8f0;
font-weight: 600;
}
/* Compact pill layout for beta features */
.hero-waitlist-pills {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1rem;
}
.hero-pill {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.78rem;
color: #cbd5e1;
background: rgba(168, 213, 229, 0.08);
border: 1px solid rgba(168, 213, 229, 0.12);
border-radius: 20px;
padding: 0.35rem 0.75rem;
white-space: nowrap;
}
@media (max-width: 768px) {
.hero-pill {
font-size: 0.72rem;
padding: 0.3rem 0.6rem;
}
}
.hero-waitlist-form {
position: relative;
}
.hero-waitlist-input-group {
display: flex;
align-items: stretch;
gap: 0.5rem;
background: rgba(10, 14, 23, 0.8);
border: 1px solid rgba(168, 213, 229, 0.15);
border-radius: 12px;
padding: 0.35rem;
transition: all 0.3s ease;
}
.hero-waitlist-input-group:focus-within {
border-color: rgba(168, 213, 229, 0.4);
box-shadow: 0 0 20px rgba(168, 213, 229, 0.1);
}
#hero-waitlist-email {
flex: 1;
background: transparent;
border: none;
color: #e2e8f0;
font-size: 0.95rem;
padding: 0.75rem 1rem;
outline: none;
min-width: 0;
}
#hero-waitlist-email::placeholder {
color: rgba(148, 163, 184, 0.5);
}
#hero-waitlist-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #10b981, #059669);
color: #fff;
font-weight: 700;
font-size: 0.9rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
min-width: 80px;
white-space: nowrap;
box-shadow: 0 2px 12px rgba(16, 185, 129, 0.3);
}
#hero-waitlist-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(16, 185, 129, 0.5);
background: linear-gradient(135deg, #34d399, #10b981);
}
#hero-waitlist-btn:active {
transform: translateY(0);
}
#hero-waitlist-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
#hero-waitlist-btn .btn-spinner svg {
width: 16px;
height: 16px;
animation: spin 1s linear infinite;
}
.hero-waitlist-success {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 10px;
color: #10b981;
font-size: 0.9rem;
font-weight: 500;
}
.hero-waitlist-success svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
/* Error state for waitlist form */
.hero-waitlist-input-group.error {
border-color: rgba(239, 68, 68, 0.5);
animation: shakeError 0.4s ease;
}
@keyframes shakeError {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
.hero-waitlist-error {
margin-top: 0.5rem;
padding: 0.5rem 0.75rem;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 8px;
color: #ef4444;
font-size: 0.85rem;
font-weight: 500;
}
.hero-waitlist-privacy {
font-size: 0.75rem;
color: #64748b;
margin: 0.75rem 0 0 0;
text-align: center;
}
/* Responsive waitlist card */
@media (max-width: 768px) {
.hero-waitlist-card {
padding: 1.25rem;
margin-top: 1.5rem;
}
.hero-waitlist-header {
gap: 0.75rem;
}
.hero-waitlist-icon {
font-size: 1.5rem;
}
.hero-waitlist-title {
font-size: 1rem;
}
.hero-waitlist-input-group {
flex-direction: column;
padding: 0.5rem;
}
#hero-waitlist-email {
padding: 0.85rem 1rem;
text-align: center;
}
#hero-waitlist-btn {
width: 100%;
padding: 0.85rem 1.5rem;
}
}
/* Content positioned on left 1/3 */
.hero-banner-content {
position: relative;
z-index: 10;
width: 100%;
max-width: 600px;
padding: 2rem 4rem;
padding-top: 120px; /* Clear the sticky nav */
margin-left: 5%;
}
/* Small label above title */
.hero-banner-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-ice-glow);
margin-bottom: 1.25rem;
padding: 0.6rem 1.25rem;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(168, 213, 229, 0.1));
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 50px;
animation: labelPulse 3s ease-in-out infinite;
}
@keyframes labelPulse {
0%, 100% { box-shadow: 0 0 10px rgba(168, 213, 229, 0.2); }
50% { box-shadow: 0 0 20px rgba(168, 213, 229, 0.4); }
}
.hero-banner-label svg {
width: 16px;
height: 16px;
}
/* Main title */
.hero-banner-title {
font-family: var(--font-display);
font-size: clamp(2.25rem, 4.5vw, 3.5rem);
font-weight: 800;
line-height: 1.1;
color: #fff;
margin-bottom: 1.5rem;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.hero-banner-title .highlight {
display: block;
background: linear-gradient(135deg, var(--color-ice-glow) 0%, var(--color-cyber-violet) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 20px rgba(168, 213, 229, 0.5));
}
.hero-banner-title .highlight-threat {
background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.5));
}
/* Description text */
.hero-banner-description {
font-family: var(--font-body);
font-size: 1.15rem;
line-height: 1.7;
color: #cbd5e1;
margin-bottom: 2rem;
max-width: 500px;
}
.hero-banner-description strong {
color: var(--color-success);
font-weight: 600;
}
/* Platform icons row */
.hero-banner-platforms {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.platform-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: rgba(30, 41, 59, 0.8);
border: 1px solid rgba(100, 116, 139, 0.3);
border-radius: 10px;
color: #94a3b8;
transition: all 0.3s;
}
.platform-icon:hover {
background: rgba(168, 213, 229, 0.1);
border-color: rgba(168, 213, 229, 0.4);
color: var(--color-ice-glow);
transform: translateY(-2px);
}
.platform-icon svg {
width: 24px;
height: 24px;
}
.platform-icon img {
width: 24px;
height: 24px;
object-fit: contain;
}
/* CTA Button */
.hero-banner-cta {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.1rem 2.25rem;
background: linear-gradient(135deg, var(--color-ice-glow), #0ea5e9);
color: var(--color-deep-space);
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.1rem;
text-decoration: none;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
letter-spacing: 0.02em;
transition: all 0.3s var(--ease-smooth);
box-shadow:
0 4px 20px rgba(168, 213, 229, 0.3),
0 0 40px rgba(168, 213, 229, 0.15);
text-transform: uppercase;
}
.hero-banner-cta:hover {
transform: translateY(-3px) scale(1.02);
box-shadow:
0 8px 30px rgba(168, 213, 229, 0.5),
0 0 60px rgba(168, 213, 229, 0.25);
}
.hero-banner-cta svg {
width: 22px;
height: 22px;
}
/* Sub-text below CTA */
.hero-banner-subtext {
margin-top: 1.25rem;
font-size: 0.9rem;
color: #64748b;
}
.hero-banner-subtext .price {
color: var(--color-success);
font-weight: 600;
}
/* Scroll indicator */
.hero-banner-scroll {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
color: #64748b;
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
animation: scrollBounce 2s ease-in-out infinite;
}
.hero-banner-scroll svg {
width: 24px;
height: 24px;
}
@keyframes scrollBounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(8px); }
}
/* Mobile Responsive - WoW-style centered content */
@media (max-width: 1024px) {
.hero-banner {
min-height: 100vh;
justify-content: flex-end;
padding-top: 72px;
padding-bottom: 3rem;
/* Reset the translateX that causes overflow */
margin-left: 0;
transform: none;
width: 100%;
}
.hero-banner-content {
margin-left: 0;
padding: 2rem;
max-width: 100%;
text-align: center;
}
/* On tablet/mobile, overlay covers more to ensure readability */
.hero-banner-overlay {
background: linear-gradient(
180deg,
rgba(3, 7, 18, 0.3) 0%,
rgba(3, 7, 18, 0.5) 30%,
rgba(3, 7, 18, 0.85) 60%,
rgba(3, 7, 18, 0.95) 100%
);
}
.hero-banner-title {
font-size: clamp(1.75rem, 6vw, 2.5rem);
}
.hero-banner-description {
font-size: 1rem;
margin-left: auto;
margin-right: auto;
}
.hero-banner-platforms {
justify-content: center;
}
.hero-banner-label {
margin-left: auto;
margin-right: auto;
}
/* Image adjustments for tablet */
.hero-banner-image {
object-position: 60% center;
animation: none;
}
}
@media (max-width: 640px) {
.hero-banner {
min-height: 100svh; /* Use small viewport height for mobile browsers */
padding-top: 80px;
padding-bottom: 2rem;
/* Prevent horizontal overflow on mobile */
margin-left: 0;
transform: none;
width: 100%;
}
.hero-banner-content {
padding: 1.5rem;
text-align: center;
}
.hero-banner-title {
font-size: clamp(1.5rem, 7vw, 2rem);
}
.hero-banner-title .highlight {
display: inline;
}
.hero-banner-description {
font-size: 0.95rem;
line-height: 1.6;
}
.hero-banner-platforms {
justify-content: center;
gap: 0.75rem;
}
.platform-icon {
width: 40px;
height: 40px;
}
.platform-icon svg {
width: 20px;
height: 20px;
}
.hero-banner-cta {
width: 100%;
justify-content: center;
padding: 1rem 1.5rem;
font-size: 1rem;
}
.hero-banner-subtext {
text-align: center;
font-size: 0.8rem;
}
.hero-banner-scroll {
display: none;
}
.hero-banner-label {
font-size: 0.75rem;
padding: 0.4rem 0.8rem;
}
/* Image adjustments for mobile - show the shield */
.hero-banner-image {
object-position: 70% top;
}
/* Stronger gradient on mobile for text contrast */
.hero-banner-overlay {
background: linear-gradient(
180deg,
rgba(3, 7, 18, 0.2) 0%,
rgba(3, 7, 18, 0.4) 20%,
rgba(3, 7, 18, 0.75) 45%,
rgba(3, 7, 18, 0.95) 70%,
rgba(3, 7, 18, 1) 100%
);
}
}
/* Extra small devices */
@media (max-width: 380px) {
.hero-banner-title {
font-size: 1.4rem;
}
.hero-banner-description {
font-size: 0.9rem;
}
.hero-banner-platforms {
gap: 0.5rem;
}
.platform-icon {
width: 36px;
height: 36px;
}
}
/* ===== REMAINING HERO ELEMENTS (kept for compatibility) ===== */
/* Hero Section */
.hero-section {
min-height: 90vh;
display: flex !important;
flex-direction: column !important;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem 1.5rem;
max-width: 800px;
margin: 0 auto;
}
.hero-lottie-wrapper {
position: relative;
width: clamp(336px, 64vw, 544px);
margin-bottom: 1rem;
}
/* No glow effects - using scanline overlay instead */
.hero-lottie-container {
position: relative;
width: 100%;
height: auto;
z-index: 1;
/* Subtle shadow only */
filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
/* Tight circular mask */
-webkit-mask-image: radial-gradient(ellipse 50% 45% at 50% 45%, black 0%, black 30%, rgba(0,0,0,0.5) 60%, transparent 100%);
mask-image: radial-gradient(ellipse 50% 45% at 50% 45%, black 0%, black 30%, rgba(0,0,0,0.5) 60%, transparent 100%);
/* GPU acceleration to prevent flickering */
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Scanline overlay - retro video game CRT effect */
.hero-scanlines {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
pointer-events: none;
/* Horizontal scanlines */
background: repeating-linear-gradient(
0deg,
transparent 0px,
transparent 2px,
rgba(0, 0, 0, 0.15) 2px,
rgba(0, 0, 0, 0.15) 4px
);
/* Subtle RGB shift / chromatic aberration feel */
mix-blend-mode: multiply;
}
/* Additional CRT screen curvature and vignette effect */
.hero-scanlines::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Vignette - darker edges */
background: radial-gradient(
ellipse at center,
transparent 40%,
rgba(0, 0, 0, 0.2) 100%
);
pointer-events: none;
}
/* Subtle animated flicker for authenticity */
.hero-scanlines::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Moving scanline highlight */
background: linear-gradient(
180deg,
transparent 0%,
rgba(168, 213, 229, 0.03) 50%,
transparent 100%
);
background-size: 100% 8px;
animation: scanlineMove 8s linear infinite;
pointer-events: none;
}
@keyframes scanlineMove {
0% { background-position: 0 0; }
100% { background-position: 0 100vh; }
}
.hero-lottie {
width: 100%;
height: auto;
/* GPU acceleration for lottie player */
transform: translateZ(0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: contents;
}
/* Mobile optimizations to prevent flickering */
@media (max-width: 768px) {
.hero-lottie-container {
/* Simplified filter for mobile performance */
filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));
}
.hero-scanlines::after {
/* Disable animated scanline on mobile for performance */
animation: none;
}
.hero-lottie {
/* Ensure stable rendering */
image-rendering: -webkit-optimize-contrast;
}
}
.hero-lottie-overlay {
position: absolute;
bottom: 35%;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 1s ease-in-out, transform 1s ease-out;
transform: translateY(10px);
pointer-events: none;
z-index: 10;
}
.hero-lottie-overlay.visible {
opacity: 1;
transform: translateY(0);
}
.hero-lottie-brand {
font-family: 'Exo 2', sans-serif;
font-size: clamp(1.75rem, 5.6vw, 2.5rem);
font-weight: 800;
letter-spacing: 0.08em;
background: linear-gradient(135deg, #A8D5E5 0%, #ffffff 40%, #a78bfa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 8px rgba(168, 213, 229, 0.8))
drop-shadow(0 0 20px rgba(139, 92, 246, 0.5))
drop-shadow(0 4px 15px rgba(0, 0, 0, 0.5));
animation: brandGlow 3s ease-in-out infinite;
}
@keyframes brandGlow {
0%, 100% {
filter: drop-shadow(0 0 8px rgba(168, 213, 229, 0.8))
drop-shadow(0 0 20px rgba(139, 92, 246, 0.5))
drop-shadow(0 4px 15px rgba(0, 0, 0, 0.5));
}
50% {
filter: drop-shadow(0 0 12px rgba(168, 213, 229, 1))
drop-shadow(0 0 30px rgba(139, 92, 246, 0.7))
drop-shadow(0 4px 15px rgba(0, 0, 0, 0.5));
}
}
/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.hero-scanlines::after {
animation: none;
}
.hero-lottie-brand {
animation: none;
}
.hero-lottie-overlay {
transition: opacity 0.3s ease;
transform: none;
}
}
.hero-logo {
width: 64px;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
margin-bottom: 1.25rem;
filter: drop-shadow(0 4px 15px rgba(139, 92, 246, 0.4));
animation: heroLogoGlow 3s ease-in-out infinite;
}
@keyframes heroLogoGlow {
0%, 100% { filter: drop-shadow(0 4px 15px rgba(139, 92, 246, 0.4)); }
50% { filter: drop-shadow(0 4px 25px rgba(168, 213, 229, 0.5)); }
}
.hero-robot {
width: clamp(280px, 50vw, 480px);
height: auto;
margin: 1.5rem 0 2rem;
filter: drop-shadow(0 10px 40px rgba(168, 213, 229, 0.25));
animation: heroRobotFloat 4s ease-in-out infinite;
}
@keyframes heroRobotFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.hero-title {
font-family: 'Exo 2', sans-serif;
font-size: clamp(1.75rem, 4.5vw, 2.75rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.75rem;
color: var(--text-primary);
}
.hero-title .highlight {
background: linear-gradient(135deg, #A8D5E5, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 1.05rem;
line-height: 1.6;
color: var(--text-secondary);
max-width: 500px;
margin: 0 auto 1.5rem;
}
.hero-description {
font-size: 1.15rem;
line-height: 1.7;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto 2rem;
}
.hero-cta {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2.5rem;
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
color: white;
font-weight: 700;
font-size: 1.1rem;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
text-decoration: none;
transition: all 0.3s;
box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}
.hero-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4);
}
.hero-subtext {
margin-top: 1rem;
font-size: 0.85rem;
color: var(--text-muted);
}
/* ========================================
HERO EMAIL SCANNER - THE MAIN EVENT
======================================== */
.hero-email-check {
width: 100%;
max-width: 580px;
margin: 0 auto 1.5rem;
position: relative;
}
/* Glowing border effect for the scanner */
.hero-email-check::before {
content: '';
position: absolute;
inset: -3px;
clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
background: linear-gradient(135deg, rgba(168, 213, 229, 0.4), rgba(139, 92, 246, 0.4), rgba(168, 213, 229, 0.4));
background-size: 200% 200%;
animation: scannerGlow 3s ease-in-out infinite;
z-index: -1;
opacity: 0.7;
}
@keyframes scannerGlow {
0%, 100% { background-position: 0% 50%; opacity: 0.5; }
50% { background-position: 100% 50%; opacity: 0.8; }
}
.hero-email-form {
width: 100%;
}
.hero-email-input-wrapper {
display: flex;
align-items: center;
background: rgba(10, 15, 30, 0.95);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
box-shadow: inset 0 0 0 2px rgba(168, 213, 229, 0.25);
padding: 0.6rem 0.6rem 0.6rem 1rem;
transition: all 0.3s ease;
}
.hero-email-input-wrapper:focus-within {
border-color: rgba(168, 213, 229, 0.6);
box-shadow:
0 0 30px rgba(168, 213, 229, 0.2),
0 8px 32px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hero-email-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: #A8D5E5;
flex-shrink: 0;
}
.hero-email-icon svg {
width: 26px;
height: 26px;
}
.hero-email-input-wrapper input {
flex: 1;
background: transparent;
border: none;
color: var(--text-primary);
font-size: 1.1rem;
padding: 0.85rem 0.5rem;
outline: none;
min-width: 0;
}
.hero-email-input-wrapper input::placeholder {
color: rgba(148, 163, 184, 0.7);
}
.hero-email-submit {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 1.75rem;
background: linear-gradient(135deg, #A8D5E5, #0ea5e9);
color: #0a0e17;
font-weight: 800;
font-size: 1rem;
border: none;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
cursor: pointer;
transition: all 0.3s ease;
min-width: 140px;
text-transform: uppercase;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.hero-email-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(168, 213, 229, 0.4);
background: linear-gradient(135deg, #22d3ee, #A8D5E5);
}
.hero-email-submit:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.hero-email-submit .btn-spinner svg {
width: 20px;
height: 20px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.spin {
animation: spin 1s linear infinite;
}
.hero-email-result {
margin-top: 1.25rem;
text-align: center;
}
.hero-email-result .result-card {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
padding: 1.5rem 2.5rem;
background: rgba(10, 15, 30, 0.95);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
border: 2px solid rgba(100, 116, 139, 0.3);
animation: resultSlideUp 0.4s ease;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
@keyframes resultSlideUp {
from { opacity: 0; transform: translateY(20px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-email-result .result-card.danger {
border-color: rgba(239, 68, 68, 0.6);
background: linear-gradient(135deg, rgba(10, 15, 30, 0.98), rgba(239, 68, 68, 0.15));
box-shadow:
0 0 40px rgba(239, 68, 68, 0.2),
0 12px 40px rgba(0, 0, 0, 0.3);
}
.hero-email-result .result-count {
font-family: 'Exo 2', sans-serif;
font-size: 2.25rem;
font-weight: 700;
color: #ef4444;
text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}
.hero-email-result .result-text {
color: var(--text-secondary);
font-size: 0.95rem;
max-width: 280px;
}
.hero-email-result .result-cta {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
font-weight: 700;
font-size: 0.9rem;
border-radius: 10px;
text-decoration: none;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hero-email-result .result-cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
}
/* Simple Trust Line */
.hero-trust-line {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 1rem;
font-size: 0.85rem;
color: var(--text-muted);
}
.trust-item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.trust-divider {
color: rgba(100, 116, 139, 0.4);
}
@media (max-width: 640px) {
.hero-section {
min-height: auto;
padding: 2rem 1rem;
}
.hero-lottie-wrapper {
width: clamp(280px, 75vw, 400px);
}
.hero-logo {
width: 48px;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
}
.hero-title {
font-size: clamp(1.5rem, 6vw, 2rem);
}
.hero-email-input-wrapper {
flex-direction: column;
padding: 1rem;
gap: 0.75rem;
}
.hero-email-icon {
display: none;
}
.hero-email-input-wrapper input {
width: 100%;
text-align: center;
font-size: 1rem;
}
.hero-email-submit {
width: 100%;
padding: 1rem;
}
.hero-trust-line {
flex-direction: column;
gap: 0.5rem;
}
.trust-divider {
display: none;
}
}
/* Why Care Section */
.why-section {
padding: 3.5rem 1.5rem;
max-width: 1000px;
margin: 0 auto;
}
.escalation-section {
position: relative;
padding: 5rem 2rem;
margin: 0;
overflow: hidden;
background: linear-gradient(180deg,
rgba(239, 68, 68, 0.08) 0%,
rgba(15, 23, 42, 0.98) 50%,
rgba(15, 23, 42, 1) 100%
);
display: flex;
align-items: center;
justify-content: center;
}
.escalation-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.5), transparent);
}
/* Content Layer */
.escalation-content {
position: relative;
z-index: 2;
max-width: 800px;
text-align: center;
}
.escalation-section .section-label {
color: #f87171;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.escalation-section .section-title {
color: #fecaca;
text-shadow: 0 2px 20px rgba(0,0,0,0.7);
margin-bottom: 2rem;
}
/* Danger Alert Card with Red Pulsing Border */
.danger-alert-card {
position: relative;
max-width: 650px;
margin: 0 auto;
padding: 2rem 2.5rem;
background: rgba(15, 10, 20, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
box-shadow:
inset 0 0 0 2px #ef4444,
0 0 30px rgba(239, 68, 68, 0.4),
0 0 60px rgba(239, 68, 68, 0.2),
0 25px 50px rgba(0, 0, 0, 0.5);
animation: dangerPulse 2s ease-in-out infinite;
}
@keyframes dangerPulse {
0%, 100% {
border-color: #ef4444;
box-shadow:
0 0 20px rgba(239, 68, 68, 0.3),
0 0 40px rgba(239, 68, 68, 0.15),
inset 0 0 30px rgba(239, 68, 68, 0.05);
}
50% {
border-color: #f87171;
box-shadow:
0 0 30px rgba(239, 68, 68, 0.5),
0 0 60px rgba(239, 68, 68, 0.25),
0 0 80px rgba(239, 68, 68, 0.1),
inset 0 0 40px rgba(239, 68, 68, 0.08);
}
}
.danger-alert-card::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
background: linear-gradient(135deg, rgba(239, 68, 68, 0.4), transparent, rgba(239, 68, 68, 0.4));
z-index: -1;
animation: borderGlow 3s linear infinite;
}
@keyframes borderGlow {
0% { opacity: 0.5; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}
.danger-alert-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.danger-alert-icon {
width: 48px;
height: 48px;
color: #ef4444;
animation: iconPulse 2s ease-in-out infinite;
}
.danger-alert-icon svg {
width: 100%;
height: 100%;
}
@keyframes iconPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.9; }
}
.danger-alert-text {
font-size: 1.1rem;
line-height: 1.7;
color: #fecaca;
margin: 0;
}
.danger-alert-text strong {
color: #fff;
text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}
.danger-learn-more-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.4);
border-radius: 8px;
color: #f87171;
font-family: 'Exo 2', sans-serif;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 0.5rem;
}
.danger-learn-more-btn:hover {
background: rgba(239, 68, 68, 0.25);
border-color: rgba(239, 68, 68, 0.6);
color: #fecaca;
box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}
.danger-learn-more-btn .btn-chevron {
width: 18px;
height: 18px;
transition: transform 0.3s ease;
}
.danger-learn-more-btn.expanded .btn-chevron {
transform: rotate(180deg);
}
/* Collapsible Details Wrapper - Standalone Section */
.danger-details-wrapper {
animation: slideDown 0.4s ease-out;
overflow: hidden;
max-width: 900px;
margin: 0 auto;
padding: 2rem 1.5rem 3rem;
background: linear-gradient(180deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%);
}
@keyframes slideDown {
from {
opacity: 0;
max-height: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
max-height: 1000px;
transform: translateY(0);
}
}
.danger-details-wrapper.collapsing {
animation: slideUp 0.3s ease-in forwards;
}
@keyframes slideUp {
from {
opacity: 1;
max-height: 1000px;
transform: translateY(0);
}
to {
opacity: 0;
max-height: 0;
transform: translateY(-20px);
}
}
@media (max-width: 640px) {
.danger-alert-card {
padding: 1.25rem 1rem;
margin: 1rem auto 1.5rem;
}
.danger-alert-icon {
width: 40px;
height: 40px;
}
.danger-alert-text {
font-size: 1rem;
}
}
.escalation-cards .scenario-card {
border-color: rgba(239, 68, 68, 0.25);
background: linear-gradient(145deg, rgba(239, 68, 68, 0.05), rgba(15, 23, 42, 0.95));
}
.escalation-cards .scenario-card::before {
background: linear-gradient(90deg, #ef4444, #f87171);
}
.escalation-cards .scenario-card:hover {
border-color: rgba(239, 68, 68, 0.6);
box-shadow: 0 12px 40px rgba(239, 68, 68, 0.2);
}
.escalation-cards .scenario-card .scenario-icon {
color: #f87171;
}
.escalation-cards .scenario-card .scenario-text strong {
color: #fca5a5;
}
.section-label {
display: block;
font-family: var(--font-display);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #a78bfa;
margin-bottom: 1.25rem;
text-align: center;
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
.section-title {
font-family: var(--font-display);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1.5rem;
text-align: center;
line-height: 1.2;
letter-spacing: -0.5px;
opacity: 0;
animation: fadeInUp 0.6s ease 0.1s forwards;
}
.section-text {
font-size: 1.1rem;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 2.5rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* Stat Highlight - Bold key numbers */
.stat-highlight {
display: inline-block;
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #f87171;
padding: 0.3rem 0.85rem;
border-radius: 6px;
font-weight: 700;
font-family: var(--font-display);
font-size: 0.95em;
}
/* Fade-in animations for sections */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Subtle pulse for CTA buttons */
@keyframes ctaPulse {
0%, 100% {
box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}
50% {
box-shadow: 0 4px 30px rgba(139, 92, 246, 0.5), 0 0 40px rgba(139, 92, 246, 0.2);
}
}
/* Attack Chain Visual */
.attack-chain {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem;
margin: 2rem 0;
padding: 1.5rem;
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.25);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.chain-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
padding: 0.75rem 1rem;
background: rgba(15, 23, 42, 0.8);
border-radius: 8px;
min-width: 90px;
}
.chain-icon {
font-size: 1.5rem;
color: var(--accent-cyan);
}
.chain-icon .cyber-icon {
width: 2em;
height: 2em;
}
.chain-label {
font-size: 0.75rem;
color: var(--text-secondary);
text-align: center;
white-space: nowrap;
}
.chain-arrow {
font-size: 1.25rem;
color: #ef4444;
font-weight: bold;
}
@media (max-width: 600px) {
.attack-chain {
gap: 0.3rem;
padding: 1rem;
}
.chain-step {
padding: 0.5rem 0.75rem;
min-width: 70px;
}
.chain-icon { font-size: 1.2rem; }
.chain-label { font-size: 0.65rem; }
.chain-arrow { font-size: 1rem; }
}
.scenario-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.scenario-card {
background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(26, 31, 46, 0.9));
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.25);
padding: 1.75rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
position: relative;
overflow: hidden;
}
.scenario-card:nth-child(1) { animation-delay: 0.1s; }
.scenario-card:nth-child(2) { animation-delay: 0.2s; }
.scenario-card:nth-child(3) { animation-delay: 0.3s; }
.scenario-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
opacity: 0;
transition: opacity 0.3s ease;
}
.scenario-card:hover {
border-color: rgba(139, 92, 246, 0.5);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(139, 92, 246, 0.15);
}
.scenario-card:hover::before {
opacity: 1;
}
.scenario-icon {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--accent-cyan);
transition: transform 0.3s ease;
}
.scenario-card:hover .scenario-icon {
transform: scale(1.1);
}
.scenario-icon .cyber-icon {
width: 2.5em;
height: 2.5em;
}
.scenario-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.2rem;
color: var(--text-primary);
margin-bottom: 0.75rem;
letter-spacing: 0.3px;
}
.scenario-title strong {
color: var(--accent-cyan);
font-weight: 800;
}
.scenario-text {
font-size: 0.95rem;
color: var(--text-secondary);
line-height: 1.7;
}
.scenario-text strong {
color: var(--text-primary);
font-weight: 600;
}
/* Threat Section Layout - Side by Side */
.threat-section-layout {
display: flex;
align-items: flex-start;
gap: 2.5rem;
margin-top: 1.5rem;
}
.threat-lottie-wrapper {
flex: 0 0 380px;
max-width: 380px;
position: relative;
}
.threat-lottie-container {
position: relative;
width: 100%;
overflow: hidden;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(168, 213, 229, 0.05));
border: 1px solid rgba(139, 92, 246, 0.35);
clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
box-shadow:
0 0 25px rgba(139, 92, 246, 0.2),
0 0 50px rgba(139, 92, 246, 0.08),
inset 0 0 30px rgba(139, 92, 246, 0.03);
/* GPU acceleration */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.threat-lottie-container::before {
content: '';
position: absolute;
inset: -1px;
clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
padding: 1px;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.5), rgba(168, 213, 229, 0.3), rgba(139, 92, 246, 0.5));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.threat-lottie {
width: 100%;
height: auto;
display: block;
clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
}
.threat-cards-wrapper {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
.threat-cards-wrapper .scenario-card {
margin: 0;
padding: 1.25rem 1.5rem;
}
.threat-cards-wrapper .scenario-card .scenario-icon {
margin-bottom: 0.5rem;
}
.threat-cards-wrapper .scenario-card .scenario-icon .cyber-icon {
width: 2.25em;
height: 2.25em;
}
.threat-cards-wrapper .scenario-card .scenario-title {
font-size: 1.1rem;
margin-bottom: 0.375rem;
}
.threat-cards-wrapper .scenario-card .scenario-text {
font-size: 0.9rem;
line-height: 1.5;
}
/* Mobile: Stack vertically */
@media (max-width: 900px) {
.threat-section-layout {
flex-direction: column;
gap: 1.5rem;
align-items: center;
}
.threat-lottie-wrapper {
flex: none;
width: 100%;
max-width: 320px;
margin: 0 auto;
}
.threat-cards-wrapper {
width: 100%;
}
/* Ensure title is visible and centered on mobile */
.why-section .section-label,
.why-section .section-title {
text-align: center;
display: block;
width: 100%;
}
}
@media (max-width: 600px) {
.threat-lottie-wrapper {
max-width: 280px;
}
.threat-lottie-container {
padding: 0.375rem;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.why-section .section-title {
font-size: 1.4rem;
}
.threat-cards-wrapper .scenario-card {
padding: 1rem 1.25rem;
}
}
/* GetReady Animation - Full Background for Bigger Picture Section */
/* Styles are in .escalation-bg above */
/* Mobile responsiveness for escalation section */
@media (max-width: 900px) {
.escalation-section {
min-height: 550px;
}
.escalation-content {
padding: 4rem 1.5rem;
}
.danger-alert-card {
margin: 0 1rem;
padding: 1.5rem;
}
}
@media (max-width: 600px) {
.escalation-section {
min-height: 500px;
}
.escalation-content {
padding: 3rem 1rem;
}
.danger-alert-card {
padding: 1.25rem;
clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.escalation-section .section-title {
font-size: 1.4rem;
}
}
/* How It Works Section */
.how-section {
padding: 5rem 1.5rem;
background: rgba(15, 23, 42, 0.5);
}
.how-container {
max-width: 1000px;
margin: 0 auto;
}
.how-header {
text-align: center;
margin-bottom: 3rem;
}
.benefit-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
}
.benefit-card {
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(100, 116, 139, 0.2);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
padding: 1.75rem;
text-align: center;
transition: all 0.2s;
}
.benefit-card:hover {
border-color: rgba(139, 92, 246, 0.4);
transform: translateY(-2px);
}
.benefit-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 213, 229, 0.1));
clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin: 0 auto 1rem;
color: var(--accent-cyan);
}
.benefit-icon .cyber-icon {
width: 32px;
height: 32px;
}
.benefit-robot-icon {
width: 56px;
height: auto;
}
.benefit-title {
font-family: 'Exo 2', sans-serif;
font-size: 1rem;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.benefit-text {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* Features Link */
.features-link {
text-align: center;
margin-top: 2.5rem;
}
.features-link a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #a78bfa;
font-weight: 500;
text-decoration: none;
padding: 0.75rem 1.5rem;
border: 1px solid rgba(139, 92, 246, 0.3);
border-radius: 8px;
transition: all 0.2s;
}
.features-link a:hover {
background: rgba(139, 92, 246, 0.1);
border-color: rgba(139, 92, 246, 0.5);
}
/* Social Proof Section */
.proof-section {
position: relative;
padding: 5rem 1.5rem;
text-align: center;
overflow: hidden;
min-height: 400px;
}
/* Animation Background Layer */
.proof-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
.proof-bg .getready-lottie {
width: 150%;
height: 150%;
min-width: 100%;
object-fit: cover;
opacity: 0.6;
}
/* Dark Overlay for Readability */
.proof-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background:
linear-gradient(180deg,
rgba(15, 23, 42, 0.92) 0%,
rgba(15, 23, 42, 0.75) 40%,
rgba(15, 23, 42, 0.75) 60%,
rgba(15, 23, 42, 0.92) 100%
);
pointer-events: none;
}
/* Vignette Effect */
.proof-overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, transparent 30%, rgba(15, 23, 42, 0.5) 100%);
}
.proof-container {
position: relative;
z-index: 2;
max-width: 700px;
margin: 0 auto;
}
.proof-stats {
display: flex;
justify-content: center;
gap: 3rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.proof-stat {
text-align: center;
padding: 1rem 1.5rem;
background: linear-gradient(135deg, rgba(167,139,250,0.08), rgba(167,139,250,0.03));
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
border: 1px solid rgba(167,139,250,0.2);
transition: all 0.3s var(--ease-smooth);
}
.proof-stat:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.2), 0 0 30px rgba(167,139,250,0.15);
border-color: rgba(167,139,250,0.4);
}
.proof-stat-number {
font-family: 'Exo 2', sans-serif;
font-size: 2rem;
font-weight: 700;
color: #a78bfa;
text-shadow: 0 0 25px rgba(167,139,250,0.4), 0 2px 4px rgba(0,0,0,0.2);
}
.proof-stat-label {
font-size: 0.85rem;
color: var(--text-muted);
}
.proof-quote {
font-size: 1.1rem;
color: var(--text-secondary);
font-style: italic;
line-height: 1.7;
margin-bottom: 1rem;
}
.proof-author {
font-size: 0.9rem;
color: var(--text-muted);
}
/* Robot Images - UX Recommendations */
.why-content {
display: flex;
align-items: center;
gap: 2rem;
margin-bottom: 2rem;
}
.why-text {
flex: 1;
}
.why-robot {
width: clamp(180px, 35vw, 300px);
height: auto;
flex-shrink: 0;
filter: drop-shadow(0 5px 20px rgba(168, 213, 229, 0.2));
}
.how-robot {
width: clamp(240px, 40vw, 380px);
height: auto;
margin: 1.5rem auto;
display: block;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
border: 2px solid rgba(168, 213, 229, 0.4);
box-shadow:
0 0 15px rgba(168, 213, 229, 0.2),
0 8px 30px rgba(0, 0, 0, 0.3);
}
.proof-testimonial {
display: flex;
align-items: flex-start;
gap: 1.5rem;
max-width: 600px;
margin: 0 auto;
}
.proof-avatar {
width: 110px;
height: 110px;
object-fit: contain;
border-radius: 50%;
background: rgba(168, 213, 229, 0.1);
padding: 8px;
flex-shrink: 0;
}
.proof-quote-wrapper {
flex: 1;
text-align: left;
}
.faq-icon {
width: 42px;
height: 42px;
object-fit: contain;
vertical-align: middle;
margin-right: 10px;
}
/* Mobile responsiveness for robots */
@media (max-width: 768px) {
.hero-robot {
width: clamp(240px, 70vw, 400px);
margin: 1rem 0 1.5rem;
}
.why-content {
flex-direction: column;
text-align: center;
}
.why-robot {
width: clamp(160px, 50vw, 260px);
order: -1;
}
.how-robot {
width: clamp(200px, 60vw, 320px);
}
.proof-testimonial {
flex-direction: column;
align-items: center;
text-align: center;
}
.proof-quote-wrapper {
text-align: center;
}
.faq-icon {
width: 24px;
height: 24px;
}
}
/* CTA Buttons (Used across pages) */
.cta-buttons {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.cta-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
color: white;
font-weight: 700;
border-radius: 10px;
text-decoration: none;
transition: all 0.3s;
}
.cta-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}
.cta-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
background: transparent;
border: 1px solid rgba(100, 116, 139, 0.4);
color: var(--text-secondary);
font-weight: 500;
border-radius: 10px;
text-decoration: none;
transition: all 0.2s;
}
.cta-secondary:hover {
border-color: rgba(139, 92, 246, 0.5);
color: var(--text-primary);
}
/* FAQ Snippet */
.faq-snippet {
max-width: 700px;
margin: 4rem auto 0;
text-align: left;
}
.faq-item {
background: rgba(15, 23, 42, 0.9);
border: 1px solid rgba(100, 116, 139, 0.2);
border-radius: 10px;
margin-bottom: 0.75rem;
overflow: hidden;
}
.faq-question {
padding: 1rem 1.25rem;
font-weight: 600;
color: var(--text-primary);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-question:hover {
background: rgba(139, 92, 246, 0.05);
}
.faq-toggle {
color: var(--text-muted);
transition: transform 0.2s;
}
.faq-answer {
display: none;
padding: 0 1.25rem 1rem;
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.7;
}
.faq-item.open .faq-answer,
.faq-item.active .faq-answer {
display: block;
}
.faq-item.open .faq-toggle,
.faq-item.active .faq-toggle {
transform: rotate(180deg);
}
/* Mobile Optimization */
@media (max-width: 640px) {
.hero-section {
min-height: 75vh;
padding: 1.5rem 1rem;
}
.hero-lottie-wrapper {
width: clamp(240px, 85vw, 360px);
}
.hero-logo {
width: clamp(80px, 25vw, 120px);
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
margin-bottom: 1.5rem;
}
.hero-title {
font-size: 1.75rem;
}
.hero-description {
font-size: 1rem;
}
.hero-cta {
padding: 0.875rem 2rem;
font-size: 1rem;
}
.why-section, .escalation-section, .how-section, .proof-section {
padding: 2.5rem 1rem;
}
.proof-stats {
gap: 2rem;
}
.benefit-grid {
grid-template-columns: 1fr;
}
}
/* ===== HERO INLINE STEAM SCANNER ===== */
.hero-steam-scanner {
max-width: 500px;
margin-top: 1.5rem;
}
.hero-scanner-input-row {
display: flex;
align-items: center;
background: rgba(15, 23, 42, 0.95);
border: 2px solid rgba(102, 192, 244, 0.4);
clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
padding: 0.4rem 0.5rem 0.4rem 1rem;
transition: all 0.3s ease;
}
.hero-scanner-input-row:focus-within {
border-color: rgba(102, 192, 244, 0.7);
box-shadow: 0 0 25px rgba(102, 192, 244, 0.25);
}
.hero-scanner-icon {
flex-shrink: 0;
margin-right: 0.75rem;
}
.hero-scanner-icon svg {
width: 24px;
height: 24px;
}
#hero-steam-input {
flex: 1;
background: transparent;
border: none;
color: var(--text-primary);
font-size: 1rem;
padding: 0.75rem 0.5rem;
outline: none;
min-width: 0;
}
#hero-steam-input::placeholder {
color: rgba(148, 163, 184, 0.6);
}
#hero-steam-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 1.5rem;
background: linear-gradient(135deg, #66c0f4, #1b2838);
color: white;
font-weight: 700;
font-size: 0.95rem;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
min-width: 140px;
white-space: nowrap;
}
#hero-steam-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 192, 244, 0.4);
background: linear-gradient(135deg, #7dcbf7, #2a475e);
}
#hero-steam-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
#hero-steam-btn .btn-spinner svg {
width: 18px;
height: 18px;
animation: spin 1s linear infinite;
}
.hero-scanner-hint {
font-size: 0.8rem;
color: #64748b;
margin-top: 0.75rem;
}
/* Hero scanner result styles */
.hero-scanner-result {
background: rgba(10, 15, 30, 0.95);
border: 2px solid rgba(239, 68, 68, 0.4);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
padding: 1.5rem;
margin-top: 1rem;
animation: fadeSlideUp 0.4s ease;
}
.hero-scanner-result.loading {
border-color: rgba(102, 192, 244, 0.4);
text-align: center;
padding: 2rem;
}
.hero-scanner-value {
font-family: 'Exo 2', sans-serif;
font-size: 2.5rem;
font-weight: 700;
color: #ef4444;
text-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile responsive for hero scanner */
@media (max-width: 640px) {
.hero-steam-scanner {
max-width: 100%;
}
.hero-scanner-input-row {
flex-direction: column;
padding: 1rem;
gap: 0.75rem;
}
.hero-scanner-icon {
display: none;
}
#hero-steam-input {
width: 100%;
text-align: center;
}
#hero-steam-btn {
width: 100%;
}
.hero-scanner-value {
font-size: 2rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════ */
/* MVP LANDING PAGE STYLES */
/* ═══════════════════════════════════════════════════════════════════════ */
.mvp-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.mvp-section-title {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
color: #e2e8f0;
text-align: center;
margin: 0 0 0.5rem 0;
}
.mvp-section-subtitle {
font-size: 1.1rem;
color: #64748b;
text-align: center;
margin: 0 0 3rem 0;
}
/* Value Props */
.mvp-value-props {
padding: 6rem 0;
background: linear-gradient(180deg, rgba(15,23,42,0.8) 0%, rgba(3,7,18,1) 100%);
}
.mvp-value-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
@media (max-width: 768px) {
.mvp-value-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
.mvp-value-card {
--mouse-x: 50%;
--mouse-y: 50%;
--light-intensity: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.25rem 1.25rem 1.5rem;
background: linear-gradient(160deg, rgba(12, 18, 28, 0.95) 0%, rgba(8, 12, 22, 0.98) 100%);
border: 1px solid rgba(168,213,229,0.15);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
text-align: center;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
overflow: hidden;
clip-path: polygon(
12px 0, calc(100% - 12px) 0,
100% 12px, 100% calc(100% - 12px),
calc(100% - 12px) 100%, 12px 100%,
0 calc(100% - 12px), 0 12px
);
box-shadow:
0 0 0 1px rgba(168, 213, 229, 0.1),
0 4px 20px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(168, 213, 229, 0.08);
}
.mvp-value-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
circle 250px at var(--mouse-x) var(--mouse-y),
rgba(168, 213, 229, calc(0.1 * var(--light-intensity))) 0%,
transparent 60%
);
pointer-events: none;
z-index: 1;
transition: opacity 0.3s;
}
.mvp-value-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(178deg, rgba(168, 213, 229, 0.06) 0%, transparent 100%);
pointer-events: none;
z-index: 1;
}
.mvp-value-card > * {
position: relative;
z-index: 2;
}
.mvp-value-card:hover {
border-color: rgba(168,213,229,0.3);
transform: translateY(-5px);
box-shadow:
0 0 0 1px rgba(168, 213, 229, 0.25),
0 0 40px rgba(91, 164, 181, 0.12),
0 20px 40px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(168, 213, 229, 0.15);
}
.mvp-value-icon {
width: 52px;
height: 52px;
margin: 0 auto 0.75rem;
background: linear-gradient(135deg, rgba(168,213,229,0.2), rgba(167,139,250,0.15));
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 25px rgba(168,213,229,0.15);
position: relative;
}
.mvp-value-icon svg {
width: 26px;
height: 26px;
stroke: #A8D5E5;
filter: drop-shadow(0 0 8px rgba(168,213,229,0.4));
}
.mvp-value-card h3 {
font-family: var(--font-heading);
font-size: 1.1rem;
color: #e2e8f0;
margin: 0 0 0.4rem 0;
}
.mvp-value-card p {
color: #94a3b8;
font-size: 0.88rem;
line-height: 1.5;
margin: 0;
}
/* Stats */
.mvp-stats {
padding: 4rem 0;
background: rgba(168,213,229,0.05);
border-top: 1px solid rgba(168,213,229,0.1);
border-bottom: 1px solid rgba(168,213,229,0.1);
}
.mvp-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
}
@media (max-width: 768px) {
.mvp-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.mvp-stat-number {
display: block;
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.5rem);
font-weight: 700;
color: #A8D5E5;
margin-bottom: 0.25rem;
}
.mvp-stat-label {
font-size: 0.9rem;
color: #64748b;
}
/* How It Works */
.mvp-how {
padding: 5rem 0;
}
.mvp-steps {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 1rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.mvp-step {
flex: 1;
min-width: 250px;
max-width: 320px;
text-align: center;
padding: 1.5rem;
}
.mvp-step-number {
width: 56px;
height: 56px;
margin: 0 auto 1.25rem;
background: linear-gradient(135deg, #A8D5E5, #a78bfa);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
color: #030712;
}
.mvp-step h3 {
font-family: var(--font-heading);
font-size: 1.15rem;
color: #e2e8f0;
margin: 0 0 0.5rem 0;
}
.mvp-step p {
color: #94a3b8;
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
}
.mvp-step-arrow {
font-size: 2rem;
color: #475569;
padding-top: 2rem;
}
@media (max-width: 900px) {
.mvp-step-arrow {
display: none;
}
}
.mvp-cta-center {
text-align: center;
}
.mvp-cta-note {
display: block;
margin-top: 0.75rem;
font-size: 0.85rem;
color: #64748b;
}
/* Buttons */
.mvp-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
background: linear-gradient(135deg, #A8D5E5, #0ea5e9);
color: #030712;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
text-decoration: none;
border-radius: 10px;
transition: all 0.3s;
border: none;
cursor: pointer;
}
.mvp-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(168,213,229,0.3);
}
.mvp-btn-primary.mvp-btn-lg {
padding: 1.25rem 3rem;
font-size: 1.1rem;
}
.mvp-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
background: transparent;
color: #A8D5E5;
font-family: var(--font-heading);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
border-radius: 10px;
border: 2px solid rgba(168,213,229,0.3);
transition: all 0.3s;
cursor: pointer;
}
.mvp-btn-secondary:hover {
background: rgba(168,213,229,0.1);
border-color: rgba(168,213,229,0.5);
}
/* Pricing */
.mvp-pricing {
padding: 5rem 0;
background: linear-gradient(180deg, rgba(3,7,18,1) 0%, rgba(15,23,42,0.5) 100%);
}
.mvp-pricing-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
max-width: 1400px;
margin: 0 auto 2rem;
align-items: stretch;
}
@media (max-width: 1100px) {
.mvp-pricing-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.mvp-pricing-grid {
grid-template-columns: 1fr;
max-width: 400px;
}
}
.mvp-price-card {
position: relative;
padding: 1.5rem;
background: rgba(30,41,59,0.5);
border: 1px solid rgba(100,116,139,0.2);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mvp-price-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.mvp-price-card.featured {
border-color: rgba(168,213,229,0.5);
background: linear-gradient(180deg, rgba(168,213,229,0.1) 0%, rgba(30,41,59,0.5) 100%);
transform: scale(1.02);
}
.mvp-price-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: 0.35rem 1rem;
background: linear-gradient(135deg, #A8D5E5, #0ea5e9);
color: #030712;
font-size: 0.75rem;
font-weight: 700;
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mvp-price-header {
text-align: center;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(100,116,139,0.2);
}
.mvp-price-header h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
color: #e2e8f0;
margin: 0 0 0.5rem 0;
}
.mvp-price {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 700;
color: #A8D5E5;
}
.mvp-price span {
font-size: 1rem;
color: #64748b;
font-weight: 400;
}
.mvp-price-features {
list-style: none;
padding: 0;
margin: 0 0 1.5rem 0;
flex: 1;
}
.mvp-price-features li {
padding: 0.6rem 0;
color: #cbd5e1;
font-size: 0.95rem;
border-bottom: 1px solid rgba(100,116,139,0.1);
}
.mvp-price-features li:last-child {
border-bottom: none;
}
.mvp-price-card .mvp-btn-primary,
.mvp-price-card .mvp-btn-secondary {
width: 100%;
}
.mvp-pricing-note {
text-align: center;
color: #64748b;
font-size: 0.9rem;
}
/* FAQ */
.mvp-faq {
padding: 5rem 0;
}
.mvp-faq-list {
max-width: 800px;
margin: 0 auto;
}
.mvp-faq-item {
margin-bottom: 1rem;
background: rgba(30,41,59,0.5);
border: 1px solid rgba(100,116,139,0.2);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
overflow: hidden;
}
.mvp-faq-item summary {
padding: 1.25rem 1.5rem;
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 600;
color: #e2e8f0;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.mvp-faq-item summary::-webkit-details-marker {
display: none;
}
.mvp-faq-item summary::after {
content: '+';
font-size: 1.5rem;
color: #64748b;
transition: transform 0.2s;
}
.mvp-faq-item[open] summary::after {
transform: rotate(45deg);
}
.mvp-faq-item p {
padding: 0 1.5rem 1.25rem;
color: #94a3b8;
line-height: 1.6;
margin: 0;
}
/* Final CTA */
.mvp-final-cta {
padding: 5rem 0;
text-align: center;
background: linear-gradient(180deg, rgba(168,213,229,0.05) 0%, rgba(167,139,250,0.05) 100%);
border-top: 1px solid rgba(168,213,229,0.1);
}
.mvp-final-cta h2 {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 4vw, 2rem);
color: #e2e8f0;
margin: 0 0 0.75rem 0;
}
.mvp-final-cta p {
color: #94a3b8;
font-size: 1.1rem;
margin: 0 0 2rem 0;
}
/* ═══════════════════════════════════════════════════════════════════════ */
/* STICKY BOTTOM CTA BAR */
/* ═══════════════════════════════════════════════════════════════════════ */
.sticky-bottom-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(135deg, rgba(15,23,42,0.98), rgba(30,41,59,0.98));
border-top: 2px solid rgba(168,213,229,0.3);
padding: 0.875rem 1.5rem;
z-index: 9999;
transform: translateY(100%);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.sticky-bottom-cta.visible {
transform: translateY(0);
opacity: 1;
}
.sticky-cta-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.sticky-cta-text {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.sticky-cta-badge {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
font-size: 0.7rem;
font-weight: 700;
padding: 0.3rem 0.6rem;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
50% { box-shadow: 0 0 12px 4px rgba(16,185,129,0.3); }
}
.sticky-cta-message {
color: #e2e8f0;
font-size: 0.95rem;
}
.sticky-cta-message strong {
color: #A8D5E5;
}
.sticky-cta-actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
.sticky-cta-btn {
padding: 0.65rem 1.25rem;
border-radius: 10px;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
}
.sticky-cta-btn.primary {
background: linear-gradient(135deg, #A8D5E5, #0ea5e9);
color: #030712;
box-shadow: 0 4px 15px rgba(168,213,229,0.3);
}
.sticky-cta-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(168,213,229,0.4);
}
.sticky-cta-btn.secondary {
background: rgba(100,116,139,0.2);
color: #94a3b8;
border: 1px solid rgba(100,116,139,0.3);
}
.sticky-cta-btn.secondary:hover {
background: rgba(100,116,139,0.3);
color: #e2e8f0;
}
.sticky-cta-close {
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
background: rgba(100,116,139,0.2);
border: none;
color: #64748b;
width: 28px;
height: 28px;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
transition: all 0.2s;
}
.sticky-cta-close:hover {
background: rgba(100,116,139,0.4);
color: #e2e8f0;
}
@media (max-width: 768px) {
.sticky-bottom-cta {
padding: 0.75rem 1rem;
}
.sticky-cta-content {
flex-direction: column;
gap: 0.75rem;
text-align: center;
}
.sticky-cta-text {
justify-content: center;
}
.sticky-cta-message {
font-size: 0.85rem;
}
.sticky-cta-actions {
width: 100%;
justify-content: center;
}
.sticky-cta-btn {
padding: 0.6rem 1rem;
font-size: 0.85rem;
}
.sticky-cta-close {
top: 0.5rem;
right: 0.5rem;
transform: none;
}
}
/* Asset Shield Demo CTA */
.mvp-demo-cta {
padding: 3rem 0;
}
.mvp-demo-card {
display: flex;
align-items: center;
gap: 2rem;
padding: 2rem 2.5rem;
background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.05));
border: 2px solid rgba(16,185,129,0.3);
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
transition: all 0.3s;
}
.mvp-demo-card:hover {
border-color: rgba(16,185,129,0.5);
transform: translateY(-2px);
}
.mvp-demo-icon {
width: 72px;
height: 100px;
flex-shrink: 0;
background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(16,185,129,0.1));
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
display: flex;
align-items: center;
justify-content: center;
}
.mvp-demo-icon svg {
width: 36px;
height: 36px;
stroke: #10b981;
}
.mvp-demo-content {
flex: 1;
}
.mvp-demo-content h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
color: #e2e8f0;
margin: 0 0 0.5rem 0;
}
.mvp-demo-content p {
color: #94a3b8;
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
}
@media (max-width: 768px) {
.mvp-demo-card {
flex-direction: column;
text-align: center;
padding: 1.5rem;
}
.mvp-demo-content h3 {
font-size: 1.1rem;
}
}
/* Pricing Page Styles */
.pricing-container {
position: relative;
z-index: 1;
padding: 2rem;
max-width: 1400px;
margin: 0 auto;
}
.pricing-hero {
text-align: center;
padding: 3rem 0 2rem;
}
.pricing-hero h1 {
font-family: 'Exo 2', sans-serif;
font-size: clamp(2rem, 5vw, 3rem);
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.75rem;
}
.pricing-hero p {
color: var(--text-secondary);
font-size: 1.15rem;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
/* Tier Cards - Wider Grid */
.pricing-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin: 2rem 0;
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
.tier-card {
background: linear-gradient(135deg, rgba(30,41,59,0.97) 0%, rgba(15,23,42,0.99) 100%);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
padding: 1.25rem;
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
min-height: 500px;
display: flex;
flex-direction: column;
}
.tier-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.tier-card.featured {
transform: scale(1.02);
z-index: 2;
}
.tier-card.featured:hover {
transform: scale(1.02) translateY(-4px);
}
.tier-badge {
position: absolute;
top: 12px;
right: -35px;
padding: 0.25rem 2.5rem;
font-size: 0.7rem;
font-weight: bold;
transform: rotate(45deg);
text-transform: uppercase;
}
.tier-header {
padding: 0.75rem 1rem;
text-align: center;
margin: -1.5rem -1.5rem 1.5rem -1.5rem;
font-weight: bold;
font-size: 0.9rem;
letter-spacing: 1px;
}
.tier-price {
text-align: center;
font-size: 2.5rem;
font-weight: bold;
margin: 1rem 0;
}
.tier-price span {
font-size: 1rem;
color: #94a3b8;
}
.tier-feature {
padding: 0.5rem 0;
border-bottom: 1px solid rgba(100,116,139,0.2);
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}
.tier-feature:last-child { border-bottom: none; }
.tier-feature.highlight { background: rgba(251,191,36,0.1); margin: 0 -0.5rem; padding: 0.5rem; border-radius: 6px; }
.feature-icon { font-size: 1rem; }
.exclusive-badge { background: linear-gradient(135deg, #a78bfa, #8b5cf6); color: white; font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; margin-left: 4px; }
/* Comparison Table */
.comparison-row { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 0.5rem; padding: 0.6rem 1rem; align-items: center; font-size: 0.9rem; }
.comparison-row:nth-child(even) { background: rgba(30,41,59,0.5); }
.comparison-row.header { background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(167,139,250,0.2)); font-weight: bold; border-radius: 8px 8px 0 0; }
.comparison-cell { text-align: center; }
.comparison-cell:first-child { text-align: left; }
/* Quick Compare Bar */
.quick-compare {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
padding: 1rem;
background: rgba(30,41,59,0.5);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
margin-bottom: 2rem;
}
.quick-compare-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}
@media (max-width: 1200px) {
.pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.comparison-row { grid-template-columns: 1.5fr repeat(3, 1fr); font-size: 0.75rem; padding: 0.4rem 0.5rem; }
}
@media (max-width: 480px) {
.comparison-row { font-size: 0.65rem; padding: 0.3rem 0.25rem; gap: 0.25rem; }
.comparison-row .comparison-cell:first-child { font-size: 0.7rem; }
}
@media (max-width: 768px) {
/* Horizontal scroll for pricing tiers on mobile */
.pricing-grid {
display: flex;
flex-wrap: nowrap;
gap: 1rem;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 1rem 0 1.5rem 0;
margin: 0 -1rem;
padding-left: 1rem;
padding-right: 1rem;
max-width: none;
position: relative;
}
.pricing-grid::-webkit-scrollbar { height: 6px; }
.pricing-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 3px; }
.pricing-grid::-webkit-scrollbar-thumb { background: rgba(168, 213, 229, 0.3); border-radius: 3px; }
.pricing-grid::-webkit-scrollbar-thumb:hover { background: rgba(168, 213, 229, 0.5); }
.pricing-grid > .tier-card,
.pricing-grid > .crystal-cosmic,
.pricing-grid > [class*="tier-card"] {
flex: 0 0 85vw;
max-width: 320px;
min-width: 280px;
scroll-snap-align: center;
}
.pricing-container { padding: 1rem; }
/* Scroll hint text */
.pricing-grid::after {
content: 'Swipe →';
position: sticky;
right: 0;
flex-shrink: 0;
display: flex;
align-items: center;
padding: 0 1rem;
font-size: 0.75rem;
color: rgba(168, 213, 229, 0.6);
background: linear-gradient(90deg, transparent, rgba(10, 14, 23, 0.95) 50%);
pointer-events: none;
animation: fadeHint 3s ease-out forwards;
}
@keyframes fadeHint {
0%, 50% { opacity: 1; }
100% { opacity: 0; }
}
/* Quick compare horizontal scroll on mobile */
.quick-compare {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
justify-content: flex-start;
gap: 1.5rem;
padding: 1rem 1.5rem;
}
.quick-compare-item {
flex-shrink: 0;
white-space: nowrap;
}
}
/* ========== MVP MODE: Show all tiers ========== */
/* Elite tier now visible for MVP */
/* Hide comparison rows for non-MVP features - keeping some hidden */
.comparison-row:has(:contains("Family Fleet")),
.comparison-row:has(:contains("Anti-Doxx")),
.comparison-row:has(:contains("Privacy Zone")),
.comparison-row:has(:contains("Social Nebula")) {
display: none !important;
}
/* ========== END MVP MODE ========== */
.how-container {
max-width: 900px;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
.how-hero {
text-align: center;
margin-bottom: 3rem;
}
.how-hero h1 {
font-family: 'Exo 2', sans-serif;
font-size: clamp(1.8rem, 4vw, 2.5rem);
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1rem;
}
.how-hero p {
color: var(--text-secondary);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
.how-section {
background: linear-gradient(135deg, rgba(30,41,59,0.95), rgba(15,23,42,0.98));
border: 1px solid rgba(100,116,139,0.3);
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
padding: 2rem;
margin-bottom: 2rem;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.how-section h2 {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: 'Exo 2', sans-serif;
font-size: 1.3rem;
color: var(--accent-cyan);
margin-bottom: 1rem;
}
.how-section h2 .section-icon {
font-size: 1.5rem;
}
.how-section p, .how-section li {
color: var(--text-secondary);
line-height: 1.7;
}
.how-section ul {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.how-section li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
}
.how-section li::before {
content: '✓';
position: absolute;
left: 0;
color: #10b981;
font-weight: bold;
}
.how-highlight {
background: rgba(168,213,229,0.1);
border-left: 3px solid var(--accent-cyan);
padding: 1rem;
border-radius: 0 8px 8px 0;
margin: 1rem 0;
}
.how-highlight strong {
color: var(--accent-cyan);
}
/* Tech stack */
.tech-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.tech-item {
background: rgba(30,41,59,0.5);
border: 1px solid rgba(100,116,139,0.2);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 1rem;
text-align: center;
}
.tech-item-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.tech-item-name {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.tech-item-desc {
font-size: 0.8rem;
color: var(--text-muted);
}
/* Data flow diagram */
.data-flow {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1.5rem 0;
padding: 1rem;
background: rgba(15,23,42,0.5);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.data-flow-node {
background: rgba(168,213,229,0.1);
border: 1px solid rgba(168,213,229,0.3);
border-radius: 8px;
padding: 0.5rem 1rem;
font-size: 0.85rem;
color: var(--text-primary);
}
.data-flow-arrow {
color: var(--accent-cyan);
font-size: 1.2rem;
}
/* CTA */
.how-cta {
text-align: center;
margin-top: 3rem;
padding: 2rem;
background: linear-gradient(135deg, rgba(30,41,59,0.95), rgba(15,23,42,0.98));
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
border: 1px solid rgba(168,213,229,0.4);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(168,213,229,0.1);
}
.how-cta h3 {
font-family: 'Exo 2', sans-serif;
color: var(--accent-cyan);
margin-bottom: 1rem;
}
.how-cta-btn {
display: inline-block;
padding: 1rem 2rem;
background: linear-gradient(135deg, #10b981, #059669);
color: white;
font-weight: 700;
border-radius: 10px;
text-decoration: none;
transition: all 0.3s;
}
.how-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(16,185,129,0.4);
}
.coverage-container {
max-width: 1100px;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
.coverage-hero {
text-align: center;
margin-bottom: 2rem;
}
.coverage-hero h1 {
font-family: 'Exo 2', sans-serif;
font-size: clamp(1.8rem, 4vw, 2.5rem);
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1rem;
}
.coverage-hero p {
color: var(--text-secondary);
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.coverage-stats {
display: flex;
justify-content: center;
gap: 2rem;
margin: 2rem 0;
flex-wrap: wrap;
}
.coverage-stat {
text-align: center;
background: rgba(15,23,42,0.9);
border: 1px solid rgba(167,139,250,0.4);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
padding: 1.5rem 2rem;
backdrop-filter: blur(10px);
}
.coverage-stat-number {
font-family: 'Exo 2', sans-serif;
font-size: 2.5rem;
font-weight: 700;
color: #a78bfa;
}
.coverage-stat-label {
color: var(--text-secondary);
font-size: 0.9rem;
}
/* Tier Comparison Banner */
.tier-comparison {
background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(30,41,59,0.9));
border: 1px solid rgba(167,139,250,0.3);
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
padding: 1.5rem;
margin: 2rem 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
@media (max-width: 768px) {
.tier-comparison { grid-template-columns: 1fr; }
}
.tier-box {
text-align: center;
padding: 1.25rem;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
border: 1px solid rgba(100,116,139,0.2);
}
.tier-box.explorer {
background: rgba(16,185,129,0.1);
border-color: rgba(16,185,129,0.3);
}
.tier-box.navigator {
background: rgba(96,165,250,0.1);
border-color: rgba(96,165,250,0.3);
}
.tier-box.commander {
background: rgba(167,139,250,0.15);
border-color: rgba(167,139,250,0.4);
position: relative;
}
.tier-box.commander::before {
content: '⭐ BEST VALUE';
position: absolute;
top: -10px;
right: 10px;
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
color: white;
font-size: 0.6rem;
padding: 3px 8px;
border-radius: 10px;
font-weight: 700;
}
.tier-name {
font-family: 'Exo 2', sans-serif;
font-size: 1rem;
margin-bottom: 0.5rem;
}
.tier-box.explorer .tier-name { color: #10b981; }
.tier-box.navigator .tier-name { color: #60a5fa; }
.tier-box.commander .tier-name { color: #a78bfa; }
.tier-price {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 0.75rem;
}
.tier-features {
text-align: left;
font-size: 0.8rem;
color: var(--text-secondary);
}
.tier-features li {
margin-bottom: 0.4rem;
display: flex;
align-items: flex-start;
gap: 0.4rem;
}
.tier-features li::before {
content: '✓';
color: #10b981;
font-weight: bold;
flex-shrink: 0;
}
.tier-features li.coming::before {
content: '⏳';
}
.tier-features li.coming {
opacity: 0.7;
}
/* Search Box */
.broker-search {
max-width: 400px;
margin: 1.5rem auto;
position: relative;
}
.broker-search input {
width: 100%;
padding: 0.875rem 1rem 0.875rem 2.75rem;
background: rgba(15,23,42,0.8);
border: 1px solid rgba(100,116,139,0.3);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
color: var(--text-primary);
font-size: 0.95rem;
}
.broker-search input:focus {
outline: none;
border-color: rgba(167,139,250,0.5);
}
.broker-search::before {
content: '';
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 1rem;
}
.broker-search-clear {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 1.1rem;
display: none;
}
.broker-search-clear.visible { display: block; }
/* Legend */
.coverage-legend {
display: flex;
justify-content: center;
gap: 1rem;
margin: 1.5rem 0;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
color: var(--text-secondary);
cursor: help;
padding: 0.5rem 0.75rem;
background: rgba(15,23,42,0.9);
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
border: 1px solid rgba(100,116,139,0.3);
position: relative;
backdrop-filter: blur(10px);
}
.legend-item:hover {
border-color: rgba(167,139,250,0.4);
}
.legend-tooltip {
display: none;
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: rgba(15,23,42,0.98);
border: 1px solid rgba(167,139,250,0.4);
border-radius: 10px;
padding: 0.75rem 1rem;
font-size: 0.75rem;
width: 220px;
text-align: left;
z-index: 100;
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.legend-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: rgba(167,139,250,0.4);
}
.legend-item:hover .legend-tooltip {
display: block;
}
.legend-tooltip strong {
display: block;
margin-bottom: 0.25rem;
color: var(--text-primary);
}
.broker-section {
margin-bottom: 2rem;
}
.broker-section h2 {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: 'Exo 2', sans-serif;
font-size: 1.1rem;
color: var(--text-primary);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(100,116,139,0.2);
}
.broker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0.75rem;
}
.broker-card {
background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(30,41,59,0.9));
border: 1px solid rgba(100,116,139,0.3);
border-radius: 10px;
padding: 0.875rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.2s;
cursor: pointer;
backdrop-filter: blur(10px);
}
.broker-card:hover {
border-color: rgba(167,139,250,0.4);
transform: translateY(-1px);
}
.broker-card.hidden { display: none; }
.broker-info {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.broker-name {
font-weight: 500;
color: var(--text-primary);
font-size: 0.9rem;
}
.broker-meta {
font-size: 0.7rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 0.5rem;
}
.broker-badges {
display: flex;
align-items: center;
gap: 0.4rem;
}
.broker-status {
font-size: 0.7rem;
padding: 3px 8px;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
font-weight: 600;
white-space: nowrap;
}
.broker-status.quick-form {
background: rgba(16,185,129,0.2);
color: #10b981;
}
.broker-status.step-by-step {
background: rgba(96,165,250,0.2);
color: #60a5fa;
}
.broker-status.direct-contact {
background: rgba(251,191,36,0.2);
color: #fbbf24;
}
.broker-status.auto-remove {
background: linear-gradient(135deg, rgba(167,139,250,0.3), rgba(139,92,246,0.2));
color: #a78bfa;
border: 1px solid rgba(167,139,250,0.3);
}
.broker-tier-badge {
font-size: 0.6rem;
padding: 2px 6px;
border-radius: 8px;
font-weight: 700;
}
.broker-tier-badge.commander {
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
color: white;
}
/* Auto-Removal Coming Soon Banner */
.auto-removal-banner {
background: linear-gradient(135deg, rgba(167,139,250,0.15), rgba(139,92,246,0.1));
border: 2px solid rgba(167,139,250,0.3);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
padding: 1.5rem;
margin: 2rem 0;
text-align: center;
}
.auto-removal-banner h3 {
font-family: 'Exo 2', sans-serif;
color: #a78bfa;
margin-bottom: 0.75rem;
font-size: 1.1rem;
}
.auto-removal-banner p {
color: var(--text-secondary);
font-size: 0.9rem;
max-width: 600px;
margin: 0 auto 1rem;
}
.auto-removal-brokers {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
}
.auto-removal-broker {
background: rgba(16,185,129,0.15);
border: 1px solid rgba(16,185,129,0.3);
padding: 0.4rem 0.75rem;
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
font-size: 0.8rem;
color: #10b981;
display: flex;
align-items: center;
gap: 0.3rem;
}
.auto-removal-broker::before {
content: '';
font-size: 0.75rem;
}
.coverage-cta {
text-align: center;
margin-top: 3rem;
padding: 2rem;
background: linear-gradient(135deg, rgba(167,139,250,0.1), rgba(139,92,246,0.1));
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
border: 1px solid rgba(167,139,250,0.2);
}
.coverage-cta h3 {
font-family: 'Exo 2', sans-serif;
color: #a78bfa;
margin-bottom: 1rem;
}
.coverage-cta-btn {
display: inline-block;
padding: 1rem 2rem;
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
color: white;
font-weight: 700;
border-radius: 10px;
text-decoration: none;
transition: all 0.3s;
}
.coverage-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(167,139,250,0.4);
}
.no-results {
text-align: center;
padding: 2rem;
color: var(--text-muted);
display: none;
}
.no-results.visible { display: block; }
/* Broker Detail Modal */
.broker-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
backdrop-filter: blur(8px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
animation: fadeIn 0.2s ease;
}
.broker-modal {
background: linear-gradient(135deg, rgba(15,23,42,0.98), rgba(30,41,59,0.95));
border: 1px solid rgba(167,139,250,0.3);
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
width: 100%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
position: relative;
animation: modalSlide 0.3s ease;
}
@keyframes modalSlide {
from { opacity: 0; transform: translateY(20px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.broker-modal-close {
position: absolute;
top: 1rem;
right: 1rem;
background: rgba(100,116,139,0.2);
border: none;
color: var(--text-secondary);
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 1.5rem;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.broker-modal-close:hover {
background: rgba(239,68,68,0.2);
color: #ef4444;
}
.broker-modal-header {
padding: 1.5rem 1.5rem 0;
}
.broker-modal-header h2 {
font-family: 'Exo 2', sans-serif;
font-size: 1.4rem;
color: var(--text-primary);
margin-bottom: 0.75rem;
padding-right: 2rem;
}
.broker-modal-badges {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.broker-modal-stats {
display: flex;
gap: 1rem;
padding: 1rem 1.5rem;
flex-wrap: wrap;
}
.broker-stat-item {
background: rgba(100,116,139,0.1);
padding: 0.5rem 1rem;
border-radius: 10px;
font-size: 0.85rem;
}
.broker-stat-item strong {
color: var(--accent-cyan);
}
.broker-modal-content {
padding: 0 1.5rem 1rem;
}
/* Steps Section */
.broker-steps {
background: rgba(15,23,42,0.5);
border: 1px solid rgba(100,116,139,0.2);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 1rem;
margin-bottom: 1rem;
}
.broker-steps h3 {
font-size: 0.9rem;
color: var(--text-primary);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.broker-steps ol {
margin: 0;
padding-left: 1.25rem;
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.8;
}
.broker-steps li {
margin-bottom: 0.25rem;
}
/* Email Template Section */
.broker-template {
background: rgba(15,23,42,0.5);
border: 1px solid rgba(100,116,139,0.2);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 1rem;
margin-bottom: 1rem;
}
.broker-template h3 {
font-size: 0.9rem;
color: var(--text-primary);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.broker-template-content {
background: rgba(0,0,0,0.3);
border: 1px solid rgba(100,116,139,0.2);
border-radius: 8px;
padding: 1rem;
font-family: 'Monaco', 'Consolas', monospace;
font-size: 0.8rem;
color: var(--text-secondary);
line-height: 1.6;
white-space: pre-wrap;
max-height: 200px;
overflow-y: auto;
}
.template-field {
background: rgba(167,139,250,0.2);
color: #a78bfa;
padding: 1px 4px;
border-radius: 3px;
}
/* Copy Button */
.copy-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1rem;
background: rgba(100,116,139,0.2);
border: 1px solid rgba(100,116,139,0.3);
border-radius: 8px;
color: var(--text-secondary);
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s;
margin-top: 0.75rem;
}
.copy-btn:hover {
background: rgba(167,139,250,0.2);
border-color: rgba(167,139,250,0.4);
color: #a78bfa;
}
.copy-btn.copied {
background: rgba(16,185,129,0.2);
border-color: rgba(16,185,129,0.4);
color: #10b981;
}
/* Navigator Upgrade Prompt */
.navigator-upgrade {
background: linear-gradient(135deg, rgba(96,165,250,0.15), rgba(59,130,246,0.1));
border: 1px solid rgba(96,165,250,0.3);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 1rem;
margin-bottom: 1rem;
text-align: center;
}
.navigator-upgrade h4 {
color: #60a5fa;
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
.navigator-upgrade p {
color: var(--text-secondary);
font-size: 0.85rem;
margin-bottom: 0.75rem;
}
.navigator-upgrade-btn {
display: inline-block;
padding: 0.6rem 1.25rem;
background: linear-gradient(135deg, #60a5fa, #3b82f6);
color: white;
font-weight: 600;
font-size: 0.85rem;
border-radius: 8px;
text-decoration: none;
transition: all 0.2s;
}
.navigator-upgrade-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(96,165,250,0.4);
}
/* Commander Auto-Remove Section */
.commander-auto {
background: linear-gradient(135deg, rgba(167,139,250,0.15), rgba(139,92,246,0.1));
border: 1px solid rgba(167,139,250,0.3);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 1.25rem;
margin-bottom: 1rem;
text-align: center;
}
.commander-auto h4 {
color: #a78bfa;
font-size: 1rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.commander-auto p {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 1rem;
}
.commander-auto-btn {
display: inline-block;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
color: white;
font-weight: 700;
border-radius: 10px;
text-decoration: none;
transition: all 0.2s;
}
.commander-auto-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(167,139,250,0.4);
}
/* Modal Actions */
.broker-modal-actions {
padding: 1rem 1.5rem 1.5rem;
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.broker-action-btn {
flex: 1;
min-width: 140px;
padding: 0.875rem 1rem;
border-radius: 10px;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
text-align: center;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
.broker-action-btn.primary {
background: linear-gradient(135deg, var(--accent-cyan), #0891b2);
color: #0a0e17;
}
.broker-action-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(168,213,229,0.3);
}
.broker-action-btn.secondary {
background: rgba(100,116,139,0.2);
border: 1px solid rgba(100,116,139,0.3);
color: var(--text-secondary);
}
.broker-action-btn.secondary:hover {
background: rgba(100,116,139,0.3);
}
/* Demo Page - Complete Overhaul */
.demo-page {
min-height: 100vh;
padding-bottom: 4rem;
}
/* Hero Section */
.demo-hero {
text-align: center;
padding: 4rem 1rem 3rem;
position: relative;
}
.demo-hero::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(167,139,250,0.15) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.demo-hero-content {
position: relative;
z-index: 1;
}
.demo-badge {
display: inline-block;
background: linear-gradient(135deg, rgba(167,139,250,0.2), rgba(139,92,246,0.2));
border: 1px solid rgba(167,139,250,0.4);
color: #a78bfa;
font-size: 0.75rem;
font-weight: 600;
padding: 6px 16px;
border-radius: 50px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1.5rem;
}
.demo-hero h1 {
font-family: 'Exo 2', sans-serif;
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}
.demo-hero h1 .gradient-text {
background: linear-gradient(135deg, #A8D5E5, #60a5fa, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.demo-hero-subtitle {
color: var(--text-secondary);
font-size: 1.15rem;
max-width: 600px;
margin: 0 auto 2rem;
line-height: 1.6;
}
/* Privacy Assessment Card - Featured */
.assessment-card {
max-width: 700px;
margin: 0 auto 4rem;
padding: 2.5rem;
background: linear-gradient(135deg, rgba(30,41,59,0.98), rgba(15,23,42,0.98));
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
border: 2px solid rgba(167,139,250,0.4);
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 25px 60px rgba(0,0,0,0.4), 0 0 100px rgba(167,139,250,0.1);
}
.assessment-card::before {
content: '';
position: absolute;
top: -100px;
left: -100px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(167,139,250,0.15) 0%, transparent 70%);
pointer-events: none;
}
.assessment-card::after {
content: '';
position: absolute;
bottom: -100px;
right: -100px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(168,213,229,0.1) 0%, transparent 70%);
pointer-events: none;
}
.assessment-content {
position: relative;
z-index: 1;
}
.assessment-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 2.5rem;
box-shadow: 0 10px 40px rgba(167,139,250,0.3);
}
.assessment-card h2 {
font-family: 'Exo 2', sans-serif;
font-size: 1.75rem;
color: #e2e8f0;
margin-bottom: 0.75rem;
}
.assessment-card .highlight {
color: #a78bfa;
}
.assessment-card p {
color: var(--text-secondary);
font-size: 1.1rem;
margin-bottom: 2rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.assessment-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
color: white;
font-weight: 700;
font-size: 1.1rem;
padding: 18px 40px;
clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(167,139,250,0.3);
}
.assessment-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(167,139,250,0.4);
}
.assessment-features {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.assessment-feature {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-secondary);
font-size: 0.95rem;
}
.assessment-feature svg {
flex-shrink: 0;
}
/* How It Works Section */
.how-it-works {
margin: 4rem 0;
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-header h2 {
font-family: 'Exo 2', sans-serif;
font-size: 1.75rem;
color: #e2e8f0;
margin-bottom: 0.5rem;
}
.section-header p {
color: var(--text-secondary);
}
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
@media (max-width: 768px) {
.steps-grid { grid-template-columns: 1fr; max-width: 400px; }
}
.step-card {
background: rgba(30,41,59,0.6);
border: 1px solid rgba(100,116,139,0.2);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
padding: 2rem;
text-align: center;
position: relative;
transition: all 0.3s ease;
}
.step-card:hover {
border-color: rgba(168,213,229,0.3);
transform: translateY(-4px);
}
.step-number {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 32px;
background: linear-gradient(135deg, #A8D5E5, #0891b2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
color: #0a0e17;
}
.step-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.step-card h3 {
font-size: 1.1rem;
color: #e2e8f0;
margin-bottom: 0.5rem;
}
.step-card p {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.5;
}
/* What You'll Discover Section */
.discover-section {
margin: 4rem 0;
padding: 3rem 2rem;
background: linear-gradient(135deg, rgba(30,41,59,0.5), rgba(15,23,42,0.5));
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
border: 1px solid rgba(168,213,229,0.15);
}
.discover-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.discover-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.25rem;
background: rgba(15,23,42,0.5);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
border: 1px solid rgba(100,116,139,0.15);
transition: all 0.2s ease;
}
.discover-item:hover {
border-color: rgba(168,213,229,0.3);
background: rgba(15,23,42,0.7);
}
.discover-icon {
width: 44px;
height: 44px;
background: linear-gradient(135deg, rgba(168,213,229,0.15), rgba(96,165,250,0.15));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.3rem;
}
.discover-item h4 {
font-size: 1rem;
color: #e2e8f0;
margin-bottom: 0.25rem;
}
.discover-item p {
color: var(--text-secondary);
font-size: 0.85rem;
line-height: 1.4;
margin: 0;
}
/* Trust Signals */
.trust-section {
text-align: center;
margin: 4rem 0 2rem;
padding: 2rem;
}
.trust-stats {
display: flex;
justify-content: center;
gap: 4rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.trust-stat {
text-align: center;
}
.trust-stat-value {
font-family: 'Exo 2', sans-serif;
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(135deg, #A8D5E5, #60a5fa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.trust-stat-label {
color: var(--text-secondary);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.trust-badges {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
opacity: 0.7;
}
.trust-badge {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-secondary);
font-size: 0.9rem;
}
/* Bottom CTA */
.bottom-cta {
text-align: center;
margin: 3rem 0;
padding: 3rem 2rem;
background: linear-gradient(135deg, rgba(30,41,59,0.8), rgba(15,23,42,0.9));
clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
border: 1px solid rgba(168,213,229,0.2);
}
.bottom-cta h2 {
font-family: 'Exo 2', sans-serif;
font-size: 1.5rem;
color: #e2e8f0;
margin-bottom: 0.5rem;
}
.bottom-cta p {
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.cta-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #10b981, #059669);
color: white;
font-weight: 600;
padding: 14px 28px;
border-radius: 10px;
text-decoration: none;
transition: all 0.2s ease;
}
.cta-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(16,185,129,0.3);
}
.cta-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(100,116,139,0.2);
border: 1px solid rgba(100,116,139,0.3);
color: var(--text-secondary);
font-weight: 500;
padding: 14px 28px;
border-radius: 10px;
text-decoration: none;
transition: all 0.2s ease;
}
.cta-btn-secondary:hover {
background: rgba(100,116,139,0.3);
border-color: rgba(100,116,139,0.5);
color: #e2e8f0;
}
/* Breach Scanner Demo - Immersive Styles */
.scanner-container {
max-width: 900px;
margin: 0 auto;
padding: 2rem 1rem;
position: relative;
z-index: 1;
}
.scanner-header {
text-align: center;
margin-bottom: 2rem;
}
.scanner-header h1 {
font-family: 'Exo 2', sans-serif;
font-size: clamp(1.8rem, 4vw, 2.5rem);
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
text-shadow: none;
}
.scanner-header p {
color: var(--text-secondary);
font-size: 1.1rem;
}
/* Main Scanner Interface */
.scanner-interface {
background: linear-gradient(135deg, rgba(15,23,42,0.95) 0%, rgba(30,41,59,0.9) 100%);
border: 2px solid rgba(168,213,229,0.3);
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
padding: 2rem;
position: relative;
overflow: hidden;
}
.scanner-interface::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple), var(--accent-cyan));
background-size: 200% 100%;
animation: gradientFlow 3s linear infinite;
}
@keyframes gradientFlow {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
/* Scan Line Effect */
.scanner-interface .scan-line {
position: absolute;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
opacity: 0;
pointer-events: none;
}
.scanner-interface.scanning .scan-line {
opacity: 1;
animation: scanDown 3s linear infinite;
}
@keyframes scanDown {
0% { top: 0; }
100% { top: 100%; }
}
/* Input Section */
.scanner-input-section {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.scanner-input-wrapper {
flex: 1;
min-width: 250px;
position: relative;
}
.scanner-input {
width: 100%;
padding: 1.25rem 1.5rem;
padding-left: 3rem;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
border: 2px solid rgba(100,116,139,0.3);
background: rgba(15,23,42,0.8);
color: var(--text-primary);
font-size: 1.1rem;
transition: all 0.3s ease;
}
.scanner-input:focus {
outline: none;
border-color: var(--accent-cyan);
box-shadow: 0 0 0 4px rgba(168,213,229,0.1), 0 0 30px rgba(168,213,229,0.2);
}
.scanner-input-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.2rem;
opacity: 0.6;
}
.scanner-btn {
padding: 1.25rem 2.5rem;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
border: none;
background: linear-gradient(135deg, var(--accent-cyan), #0891b2);
color: #0a0e17;
font-weight: 700;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.scanner-btn::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.3), transparent 30%);
opacity: 0;
transition: opacity 0.3s;
}
.scanner-btn:hover::before {
opacity: 1;
animation: btnSpin 2s linear infinite;
}
@keyframes btnSpin {
100% { transform: rotate(360deg); }
}
.scanner-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(168,213,229,0.4);
}
.scanner-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.scanner-btn span {
position: relative;
z-index: 1;
}
/* Radar Display */
.radar-container {
display: none;
justify-content: center;
margin: 2rem 0;
}
.radar-container.active {
display: flex;
}
.radar-display {
width: 280px;
height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(168,213,229,0.05) 0%, rgba(15,23,42,0.9) 70%);
border: 2px solid rgba(168,213,229,0.3);
position: relative;
overflow: hidden;
}
.radar-rings {
position: absolute;
inset: 0;
}
.radar-ring {
position: absolute;
border: 1px solid rgba(168,213,229,0.15);
border-radius: 50%;
}
.radar-ring:nth-child(1) { inset: 20%; }
.radar-ring:nth-child(2) { inset: 40%; }
.radar-ring:nth-child(3) { inset: 60%; }
.radar-sweep {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 3px;
background: linear-gradient(90deg, var(--accent-cyan), transparent);
transform-origin: left center;
animation: radarSweep 2s linear infinite;
box-shadow: 0 0 20px var(--accent-cyan);
}
@keyframes radarSweep {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.radar-crosshair {
position: absolute;
inset: 0;
}
.radar-crosshair::before,
.radar-crosshair::after {
content: '';
position: absolute;
background: rgba(168,213,229,0.2);
}
.radar-crosshair::before {
top: 50%;
left: 10%;
right: 10%;
height: 1px;
}
.radar-crosshair::after {
left: 50%;
top: 10%;
bottom: 10%;
width: 1px;
}
/* Radar Blips */
.radar-blip {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
transform: translate(-50%, -50%);
animation: blipAppear 0.5s ease-out forwards, blipPulse 1.5s ease-in-out infinite;
}
.radar-blip.threat {
background: #ef4444;
box-shadow: 0 0 15px #ef4444;
}
.radar-blip.warning {
background: #f59e0b;
box-shadow: 0 0 15px #f59e0b;
}
.radar-blip.safe {
background: #10b981;
box-shadow: 0 0 10px #10b981;
}
@keyframes blipAppear {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes blipPulse {
0%, 100% { box-shadow: 0 0 10px currentColor; }
50% { box-shadow: 0 0 25px currentColor; }
}
/* Progress Console */
.scan-console {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(100,116,139,0.3);
border-radius: 8px;
padding: 1rem;
font-family: 'Courier New', monospace;
font-size: 0.85rem;
max-height: 150px;
overflow-y: auto;
margin-top: 1.5rem;
display: none;
}
.scan-console.active {
display: block;
}
.console-line {
color: var(--accent-cyan);
margin-bottom: 0.5rem;
opacity: 0;
animation: consoleFade 0.3s ease forwards;
}
.console-line.error { color: #ef4444; }
.console-line.warning { color: #f59e0b; }
.console-line.success { color: #10b981; }
@keyframes consoleFade {
to { opacity: 1; }
}
/* Results Section */
.scanner-results {
display: none;
margin-top: 2rem;
}
.scanner-results.active {
display: block;
animation: resultsReveal 0.5s ease-out;
}
@keyframes resultsReveal {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.results-header {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1.5rem;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
margin-bottom: 1.5rem;
}
.results-header.critical {
background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.05));
border: 1px solid rgba(239,68,68,0.4);
}
.results-header.clean {
background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.05));
border: 1px solid rgba(16,185,129,0.4);
}
.results-icon {
font-size: 3.5rem;
animation: iconPulse 2s ease-in-out infinite;
}
@keyframes iconPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.results-summary h2 {
font-family: 'Exo 2', sans-serif;
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.results-header.critical h2 { color: #ef4444; }
.results-header.clean h2 { color: #10b981; }
.results-summary p {
color: var(--text-secondary);
margin: 0;
}
/* Breach Cards */
.breach-grid {
display: grid;
gap: 1rem;
margin-bottom: 1.5rem;
}
.breach-card {
background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.25);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 1.25rem;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1rem;
align-items: center;
transition: all 0.3s ease;
cursor: pointer;
}
.breach-card:hover {
transform: translateX(5px);
border-color: rgba(239,68,68,0.5);
box-shadow: -4px 0 20px rgba(239,68,68,0.2);
}
.breach-card-icon {
font-size: 2rem;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(239,68,68,0.15);
border-radius: 10px;
}
.breach-card-info h4 {
color: var(--text-primary);
font-weight: 600;
margin-bottom: 0.25rem;
}
.breach-card-info p {
color: var(--text-secondary);
font-size: 0.85rem;
margin: 0;
}
.breach-card-severity {
padding: 0.5rem 1rem;
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.severity-high {
background: rgba(239,68,68,0.2);
color: #ef4444;
}
.severity-medium {
background: rgba(245,158,11,0.2);
color: #f59e0b;
}
.severity-low {
background: rgba(100,116,139,0.2);
color: #94a3b8;
}
/* AI Analysis Panel */
.ai-analysis-panel {
background: linear-gradient(135deg, rgba(96,165,250,0.1), rgba(167,139,250,0.1));
border: 1px solid rgba(96,165,250,0.3);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
padding: 1.5rem;
margin-top: 1.5rem;
position: relative;
overflow: hidden;
}
.ai-analysis-panel::before {
content: 'AI ANALYSIS';
position: absolute;
top: 0;
right: 0;
background: linear-gradient(135deg, #60a5fa, #a78bfa);
color: white;
padding: 0.5rem 1rem;
font-size: 0.7rem;
font-weight: 700;
border-radius: 0 16px 0 12px;
}
.ai-typing {
display: inline-block;
}
.ai-typing::after {
content: '|';
animation: blink 0.7s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.ai-analysis-content {
color: var(--text-secondary);
line-height: 1.7;
margin-top: 0.5rem;
}
.ai-analysis-content strong {
color: var(--accent-blue);
}
/* Recommendations */
.recommendations {
margin-top: 1.5rem;
}
.recommendations h3 {
font-family: 'Exo 2', sans-serif;
color: var(--accent-cyan);
font-size: 1.1rem;
margin-bottom: 1rem;
}
.recommendation-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
background: rgba(168,213,229,0.05);
border: 1px solid rgba(168,213,229,0.15);
border-radius: 10px;
margin-bottom: 0.75rem;
transition: all 0.3s ease;
}
.recommendation-item:hover {
background: rgba(168,213,229,0.1);
transform: translateX(5px);
}
.recommendation-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.recommendation-text {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.5;
}
.recommendation-text strong {
color: var(--text-primary);
}
/* CTA Section */
.scanner-cta {
background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(168,213,229,0.1));
border: 2px solid rgba(16,185,129,0.3);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
padding: 2rem;
text-align: center;
margin-top: 2rem;
}
.scanner-cta h3 {
font-family: 'Exo 2', sans-serif;
color: #10b981;
font-size: 1.4rem;
margin-bottom: 0.75rem;
}
.scanner-cta p {
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
.scanner-cta .btn {
padding: 1rem 2.5rem;
font-size: 1.1rem;
}
/* Stats Bar */
.scan-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(100,116,139,0.2);
}
.scan-stat {
text-align: center;
}
.scan-stat-value {
font-family: 'Exo 2', sans-serif;
font-size: 1.5rem;
color: var(--accent-cyan);
display: block;
}
.scan-stat-label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.scanner-input-section {
flex-direction: column;
}
.radar-display {
width: 220px;
height: 220px;
}
.scan-stats {
grid-template-columns: repeat(2, 1fr);
}
.breach-card {
grid-template-columns: 1fr;
text-align: center;
}
.breach-card-icon {
margin: 0 auto;
}
}
.tour-container {
max-width: 1000px;
margin: 0 auto;
padding: 2rem 1rem;
}
.tour-header {
text-align: center;
margin-bottom: 2rem;
}
.tour-header h1 {
font-family: 'Exo 2', sans-serif;
color: #10b981;
margin-bottom: 0.5rem;
}
/* Tour Steps */
.tour-steps {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.tour-step-indicator {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
background: rgba(100,116,139,0.3);
color: var(--text-muted);
transition: all 0.3s;
cursor: pointer;
}
.tour-step-indicator.active {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
}
.tour-step-indicator.completed {
background: rgba(16,185,129,0.3);
color: #10b981;
}
/* Tour Content */
.tour-content {
background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%);
border: 2px solid rgba(16,185,129,0.3);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
padding: 2rem;
min-height: 400px;
}
.tour-slide {
display: none;
animation: fadeIn 0.3s ease;
}
.tour-slide.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.tour-slide-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.tour-slide-icon { font-size: 2.5rem; }
.tour-slide-title {
font-family: 'Exo 2', sans-serif;
font-size: 1.3rem;
color: #10b981;
}
.tour-preview {
background: rgba(15,23,42,0.8);
border: 1px solid rgba(100,116,139,0.2);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 1.5rem;
margin: 1.5rem 0;
}
.tour-preview-title {
font-size: 0.8rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1rem;
}
/* Mock Dashboard Elements */
.mock-stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.mock-stat {
background: rgba(30,41,59,0.8);
padding: 1rem;
border-radius: 8px;
text-align: center;
}
.mock-stat-value {
font-family: 'Exo 2', sans-serif;
font-size: 1.5rem;
color: var(--accent-cyan);
}
.mock-stat-label {
font-size: 0.75rem;
color: var(--text-muted);
}
.mock-mission {
background: rgba(16,185,129,0.1);
border: 1px solid rgba(16,185,129,0.3);
border-radius: 8px;
padding: 1rem;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 1rem;
}
.mock-mission-icon { font-size: 1.5rem; }
.mock-mission-progress {
flex: 1;
height: 8px;
background: rgba(100,116,139,0.3);
border-radius: 4px;
overflow: hidden;
}
.mock-mission-fill {
height: 100%;
background: linear-gradient(90deg, #10b981, #059669);
}
.mock-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(251,191,36,0.1);
border: 1px solid rgba(251,191,36,0.3);
border-radius: 8px;
padding: 0.5rem 1rem;
margin: 0.25rem;
}
/* Navigation */
.tour-nav {
display: flex;
justify-content: space-between;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(100,116,139,0.2);
}
.tour-nav-btn {
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.tour-nav-btn.prev {
background: rgba(100,116,139,0.3);
color: var(--text-primary);
}
.tour-nav-btn.next {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
}
.tour-nav-btn:hover { transform: translateY(-2px); }
.tour-nav-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
@media (max-width: 768px) {
.mock-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.galaxy-demo-container {
max-width: 1600px;
margin: 0 auto;
padding: 2rem 1rem;
}
.galaxy-demo-header {
text-align: center;
margin-bottom: 2rem;
}
.galaxy-demo-header h1 {
font-family: 'Exo 2', sans-serif;
font-size: clamp(1.8rem, 3vw, 2.8rem);
background: linear-gradient(135deg, #f472b6, #ec4899, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
}
/* Main Galaxy Display */
.galaxy-viewport {
position: relative;
width: 100%;
aspect-ratio: 16/10;
min-height: 500px;
max-height: 800px;
background: radial-gradient(ellipse at center, #0d1117 0%, #010409 100%);
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
border: 1px solid rgba(139, 92, 246, 0.3);
overflow: hidden;
margin-bottom: 2rem;
box-shadow:
0 0 60px rgba(139, 92, 246, 0.15),
inset 0 0 100px rgba(0, 0, 0, 0.5);
}
/* Star Field - Procedural Stars */
.star-field {
position: absolute;
inset: 0;
overflow: hidden;
}
.star {
position: absolute;
background: white;
border-radius: 50%;
animation: twinkle var(--duration, 3s) ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
@keyframes twinkle {
0%, 100% { opacity: var(--base-opacity, 0.3); transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
/* Nebula Effects */
.nebula {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.15;
animation: nebulaPulse 8s ease-in-out infinite;
}
@keyframes nebulaPulse {
0%, 100% { opacity: 0.1; transform: scale(1); }
50% { opacity: 0.2; transform: scale(1.05); }
}
/* Grid Overlay */
.grid-overlay {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}
/* Central Core */
.galaxy-core {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 140px;
height: 140px;
z-index: 20;
cursor: pointer;
}
.core-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid;
animation: coreRotate var(--speed, 20s) linear infinite;
}
.core-ring:nth-child(1) { border-color: rgba(244, 114, 182, 0.6); animation-direction: normal; }
.core-ring:nth-child(2) { inset: 10px; border-color: rgba(167, 139, 250, 0.5); animation-direction: reverse; --speed: 15s; }
.core-ring:nth-child(3) { inset: 20px; border-color: rgba(96, 165, 250, 0.4); --speed: 25s; }
@keyframes coreRotate { to { transform: rotate(360deg); } }
.core-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: radial-gradient(circle, rgba(244, 114, 182, 0.9) 0%, rgba(139, 92, 246, 0.6) 40%, transparent 70%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
box-shadow: 0 0 40px rgba(244, 114, 182, 0.5), 0 0 80px rgba(139, 92, 246, 0.3);
animation: corePulse 3s ease-in-out infinite;
}
@keyframes corePulse {
0%, 100% { box-shadow: 0 0 40px rgba(244, 114, 182, 0.5), 0 0 80px rgba(139, 92, 246, 0.3); }
50% { box-shadow: 0 0 60px rgba(244, 114, 182, 0.7), 0 0 120px rgba(139, 92, 246, 0.5); }
}
.core-label {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
font-family: 'Exo 2', sans-serif;
font-size: 0.7rem;
color: #f472b6;
text-transform: uppercase;
letter-spacing: 2px;
white-space: nowrap;
}
/* Orbital Paths */
.orbital-path {
position: absolute;
top: 50%;
left: 50%;
border: 1px dashed rgba(139, 92, 246, 0.15);
border-radius: 50%;
transform: translate(-50%, -50%);
}
/* Sector Nodes - Enhanced */
.sector-node {
position: absolute;
width: 100px;
height: 100px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 15;
}
.sector-node:hover {
transform: scale(1.1);
z-index: 25;
}
.sector-node:hover .sector-glow {
opacity: 1;
transform: scale(1.5);
}
.sector-glow {
position: absolute;
inset: -20px;
border-radius: 50%;
background: radial-gradient(circle, var(--sector-color) 0%, transparent 70%);
opacity: 0.3;
transition: all 0.4s;
filter: blur(15px);
}
.sector-body {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
border-radius: 50%;
border: 2px solid var(--sector-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
.sector-icon { font-size: 1.6rem; margin-bottom: 2px; }
.sector-name {
font-family: 'Exo 2', sans-serif;
font-size: 0.6rem;
color: var(--sector-color);
text-transform: uppercase;
letter-spacing: 1px;
}
/* Mini Health Ring */
.health-ring {
position: absolute;
inset: 3px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: var(--sector-color);
transform: rotate(var(--health-rotation, 0deg));
opacity: 0.8;
}
/* Sector Data Badges */
.sector-badge {
position: absolute;
padding: 3px 8px;
border-radius: 10px;
font-size: 0.6rem;
font-weight: 700;
white-space: nowrap;
}
.sector-badge.threats {
top: -8px;
right: -8px;
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
animation: badgePulse 2s infinite;
}
.sector-badge.health {
bottom: -8px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
border: 1px solid var(--sector-color);
color: var(--sector-color);
}
@keyframes badgePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}
/* Sector Positions */
.sector-node[data-sector="gaming"] {
--sector-color: #60a5fa;
--health-rotation: 270deg;
top: 8%;
left: 50%;
transform: translateX(-50%);
}
.sector-node[data-sector="social"] {
--sector-color: #10b981;
--health-rotation: 330deg;
top: 50%;
right: 8%;
transform: translateY(-50%);
}
.sector-node[data-sector="messaging"] {
--sector-color: #a78bfa;
--health-rotation: 300deg;
bottom: 8%;
left: 50%;
transform: translateX(-50%);
}
.sector-node[data-sector="personal"] {
--sector-color: #f59e0b;
--health-rotation: 340deg;
top: 50%;
left: 8%;
transform: translateY(-50%);
}
/* Connection Lines - SVG */
.connections-svg {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
}
.connection-line {
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
}
.connection-line.active {
stroke: url(#connectionGradient);
stroke-dasharray: 8 4;
animation: dataFlow 2s linear infinite;
}
.connection-line.inactive {
stroke: rgba(139, 92, 246, 0.1);
}
@keyframes dataFlow {
to { stroke-dashoffset: -24; }
}
/* Data Packets */
.data-packet {
position: absolute;
width: 6px;
height: 6px;
background: var(--packet-color, #A8D5E5);
border-radius: 50%;
box-shadow: 0 0 10px var(--packet-color, #A8D5E5);
animation: packetMove var(--duration, 3s) linear infinite;
opacity: 0;
}
@keyframes packetMove {
0% { offset-distance: 0%; opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { offset-distance: 100%; opacity: 0; }
}
/* Threat Markers */
.threat-marker {
position: absolute;
z-index: 18;
}
.threat-marker .marker-dot {
width: 16px;
height: 16px;
background: radial-gradient(circle, #ef4444 30%, transparent 70%);
border-radius: 50%;
animation: threatPulse 1.5s ease-out infinite;
position: relative;
}
.threat-marker .marker-ring {
position: absolute;
inset: -8px;
border: 2px solid #ef4444;
border-radius: 50%;
animation: threatRing 1.5s ease-out infinite;
}
@keyframes threatPulse {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.5); opacity: 0; }
}
@keyframes threatRing {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(2); opacity: 0; }
}
.threat-marker .marker-label {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 4px;
font-size: 0.55rem;
color: #ef4444;
white-space: nowrap;
background: rgba(0, 0, 0, 0.8);
padding: 2px 6px;
border-radius: 4px;
}
/* Security Score Display */
.security-score {
position: absolute;
top: 20px;
left: 20px;
background: rgba(10, 14, 23, 0.9);
border: 1px solid rgba(139, 92, 246, 0.3);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 16px 20px;
z-index: 30;
}
.score-label {
font-size: 0.65rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
}
.score-value {
font-family: 'Exo 2', sans-serif;
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, #10b981, #34d399);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.score-bar {
width: 120px;
height: 4px;
background: rgba(100, 116, 139, 0.3);
border-radius: 2px;
margin-top: 8px;
overflow: hidden;
}
.score-bar-fill {
height: 100%;
background: linear-gradient(90deg, #10b981, #34d399);
border-radius: 2px;
transition: width 1s ease;
}
/* Threat Counter */
.threat-counter {
position: absolute;
top: 20px;
right: 20px;
background: rgba(10, 14, 23, 0.9);
border: 1px solid rgba(239, 68, 68, 0.3);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 16px 20px;
z-index: 30;
}
.threat-counter .score-label { color: #ef4444; }
.threat-counter .score-value {
background: linear-gradient(135deg, #ef4444, #f87171);
-webkit-background-clip: text;
}
/* Timestamp */
.timestamp {
position: absolute;
bottom: 20px;
left: 20px;
font-family: 'Exo 2', sans-serif;
font-size: 0.7rem;
color: rgba(139, 92, 246, 0.6);
z-index: 30;
}
/* Legend */
.map-legend {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(10, 14, 23, 0.9);
border: 1px solid rgba(139, 92, 246, 0.2);
border-radius: 10px;
padding: 12px 16px;
z-index: 30;
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.65rem;
color: #94a3b8;
}
.legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
/* Sector Info Panel - Enhanced */
.sector-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.info-card {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
padding: 1.5rem;
border: 1px solid var(--card-color, rgba(139, 92, 246, 0.2));
transition: all 0.3s;
cursor: pointer;
}
.info-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
border-color: var(--card-color);
}
.info-card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 1rem;
}
.info-card-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--card-color), transparent);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.info-card-title {
font-family: 'Exo 2', sans-serif;
font-size: 1rem;
color: var(--card-color);
}
.info-card-subtitle {
font-size: 0.75rem;
color: #64748b;
}
.info-card-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.stat-item {
text-align: center;
padding: 10px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
.stat-value {
font-family: 'Exo 2', sans-serif;
font-size: 1.2rem;
font-weight: 700;
color: var(--stat-color, #e0e7ff);
}
.stat-label {
font-size: 0.65rem;
color: #64748b;
text-transform: uppercase;
}
/* CTA Section */
.cta-section {
background: linear-gradient(135deg, rgba(244, 114, 182, 0.1), rgba(139, 92, 246, 0.1));
border: 1px solid rgba(244, 114, 182, 0.3);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
padding: 2rem;
text-align: center;
}
.cta-section h3 {
font-family: 'Exo 2', sans-serif;
color: #f472b6;
margin-bottom: 0.5rem;
}
/* Responsive */
@media (min-width: 2560px) {
.galaxy-viewport { max-height: 1000px; }
.sector-node { width: 120px; height: 120px; }
.sector-icon { font-size: 2rem; }
.sector-name { font-size: 0.7rem; }
.galaxy-core { width: 180px; height: 180px; }
.core-center { width: 100px; height: 100px; font-size: 2.5rem; }
}
@media (max-width: 1024px) {
.sector-node { width: 80px; height: 80px; }
.security-score, .threat-counter { padding: 12px 16px; }
.score-value { font-size: 1.5rem; }
}
@media (max-width: 768px) {
.galaxy-viewport { aspect-ratio: 4/3; min-height: 400px; }
.sector-node { width: 60px; height: 60px; }
.sector-icon { font-size: 1.2rem; }
.sector-name { font-size: 0.5rem; }
.security-score, .threat-counter {
position: relative;
top: auto; left: auto; right: auto;
display: inline-block;
margin: 10px;
}
.map-legend { position: relative; bottom: auto; right: auto; margin-top: 10px; justify-content: center; }
.info-card-stats { grid-template-columns: 1fr; }
}
.gaming-demo-container {
max-width: 1000px;
margin: 0 auto;
padding: 2rem 1rem;
}
.gaming-demo-header {
text-align: center;
margin-bottom: 2rem;
}
.gaming-demo-header h1 {
font-family: 'Exo 2', sans-serif;
color: #60a5fa;
margin-bottom: 0.5rem;
}
/* Platform Grid */
.platforms-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.platform-card {
background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 1.5rem 1rem;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid rgba(100,116,139,0.2);
}
.platform-card:hover {
transform: translateY(-4px);
border-color: var(--platform-color, #60a5fa);
box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.platform-card.active {
border-color: var(--platform-color, #60a5fa);
box-shadow: 0 0 20px rgba(96,165,250,0.3);
}
.platform-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.platform-name { font-weight: 600; color: var(--text-primary); }
.platform-status {
font-size: 0.75rem;
margin-top: 0.5rem;
padding: 0.25rem 0.5rem;
border-radius: 4px;
display: inline-block;
}
.platform-status.secure {
background: rgba(16,185,129,0.2);
color: #10b981;
}
.platform-status.warning {
background: rgba(251,191,36,0.2);
color: #fbbf24;
}
.platform-status.danger {
background: rgba(239,68,68,0.2);
color: #ef4444;
}
/* Platform Details */
.platform-details {
background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
padding: 2rem;
border: 2px solid rgba(96,165,250,0.3);
margin-bottom: 2rem;
}
.platform-details-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(100,116,139,0.2);
}
.platform-details-icon { font-size: 3rem; }
.platform-details-title { font-family: 'Exo 2', sans-serif; font-size: 1.5rem; color: #60a5fa; }
.platform-details-subtitle { color: var(--text-muted); font-size: 0.9rem; }
/* Security Checklist */
.security-checklist {
margin: 1.5rem 0;
}
.checklist-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: rgba(15,23,42,0.5);
border-radius: 8px;
margin-bottom: 0.75rem;
transition: all 0.2s;
}
.checklist-item:hover {
background: rgba(15,23,42,0.8);
}
.checklist-icon {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.checklist-icon.complete {
background: rgba(16,185,129,0.2);
color: #10b981;
}
.checklist-icon.incomplete {
background: rgba(100,116,139,0.2);
color: var(--text-muted);
}
.checklist-text { flex: 1; }
.checklist-title { font-weight: 600; color: var(--text-primary); }
.checklist-desc { font-size: 0.85rem; color: var(--text-muted); }
.checklist-action {
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.checklist-action.guide {
background: rgba(96,165,250,0.2);
color: #60a5fa;
border: 1px solid rgba(96,165,250,0.3);
}
.checklist-action.guide:hover {
background: rgba(96,165,250,0.3);
}
/* Scam Alerts */
.scam-alerts {
background: rgba(239,68,68,0.1);
border: 1px solid rgba(239,68,68,0.3);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 1.5rem;
margin-top: 1.5rem;
}
.scam-alerts-header {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 600;
color: #ef4444;
margin-bottom: 1rem;
}
.scam-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: rgba(15,23,42,0.5);
border-radius: 8px;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.platforms-grid { grid-template-columns: repeat(3, 1fr); }
.platform-card { padding: 1rem 0.5rem; }
.platform-icon { font-size: 1.8rem; }
.platform-name { font-size: 0.85rem; }
}
.badges-demo-container {
max-width: 1000px;
margin: 0 auto;
padding: 2rem 1rem;
}
.badges-demo-header {
text-align: center;
margin-bottom: 2rem;
}
.badges-demo-header h1 {
font-family: 'Exo 2', sans-serif;
color: #fbbf24;
margin-bottom: 0.5rem;
}
/* XP & Level Display */
.xp-display {
background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(245,158,11,0.1));
border: 2px solid rgba(251,191,36,0.3);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
padding: 2rem;
margin-bottom: 2rem;
text-align: center;
}
.level-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
padding: 0.75rem 1.5rem;
border-radius: 50px;
margin-bottom: 1rem;
}
.level-badge-icon { font-size: 1.5rem; }
.level-badge-text {
font-family: 'Exo 2', sans-serif;
font-weight: 700;
color: #0a0e17;
}
.xp-bar-container {
max-width: 400px;
margin: 1rem auto;
}
.xp-bar {
height: 12px;
background: rgba(100,116,139,0.3);
border-radius: 6px;
overflow: hidden;
}
.xp-bar-fill {
height: 100%;
background: linear-gradient(90deg, #fbbf24, #f59e0b);
width: 65%;
animation: xpGlow 2s ease-in-out infinite;
}
@keyframes xpGlow {
0%, 100% { box-shadow: 0 0 10px rgba(251,191,36,0.5); }
50% { box-shadow: 0 0 20px rgba(251,191,36,0.8); }
}
.xp-text {
margin-top: 0.5rem;
font-size: 0.9rem;
color: var(--text-secondary);
}
/* Rank Display */
.rank-display {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
flex-wrap: wrap;
}
.rank-item {
padding: 0.5rem 1rem;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 600;
}
.rank-item.current {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #0a0e17;
}
.rank-item.locked {
background: rgba(100,116,139,0.2);
color: var(--text-muted);
}
/* Badge Grid */
.badges-section {
margin-bottom: 2rem;
}
.badges-section-title {
font-family: 'Exo 2', sans-serif;
color: var(--text-primary);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.badges-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 1rem;
}
.badge-card {
background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 1rem;
text-align: center;
border: 2px solid rgba(100,116,139,0.2);
transition: all 0.3s ease;
cursor: pointer;
}
.badge-card:hover {
transform: translateY(-4px);
border-color: var(--badge-color, #fbbf24);
box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.badge-card.locked {
opacity: 0.5;
filter: grayscale(80%);
}
.badge-card.locked:hover {
opacity: 0.7;
filter: grayscale(50%);
}
.badge-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.badge-name { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }
.badge-xp {
font-size: 0.7rem;
color: #fbbf24;
margin-top: 0.25rem;
}
/* Mission Cards */
.missions-section {
margin-bottom: 2rem;
}
.mission-card {
background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 1.5rem;
border: 2px solid rgba(16,185,129,0.3);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 1rem;
}
.mission-icon { font-size: 2rem; }
.mission-content { flex: 1; }
.mission-title { font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; }
.mission-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.mission-progress {
display: flex;
align-items: center;
gap: 0.75rem;
}
.mission-bar {
flex: 1;
height: 8px;
background: rgba(100,116,139,0.3);
border-radius: 4px;
overflow: hidden;
}
.mission-bar-fill {
height: 100%;
background: linear-gradient(90deg, #10b981, #059669);
}
.mission-steps {
font-size: 0.8rem;
color: #10b981;
white-space: nowrap;
}
.mission-xp {
background: rgba(251,191,36,0.2);
color: #fbbf24;
padding: 0.5rem 1rem;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
}
/* Mission Type Badges */
.mission-type-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 10px;
}
.mission-type-badge.secure {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.mission-type-badge.purge {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2));
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.3);
}
.mission-type-badge.investigate {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(124, 58, 237, 0.2));
color: #8b5cf6;
border: 1px solid rgba(139, 92, 246, 0.3);
}
/* Cross-Breach Alert */
.cross-breach-alert {
margin: 16px 0;
padding: 14px 18px;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1));
border-radius: 10px;
border-left: 4px solid #ef4444;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.cross-breach-alert-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.cross-breach-alert-icon {
font-size: 1.2rem;
}
.cross-breach-alert-title {
color: #ef4444;
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cross-breach-alert-text {
color: #fca5a5;
font-size: 0.9rem;
line-height: 1.5;
}
/* Data Class Icons in Steps */
.step-data-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 6px;
font-size: 0.8rem;
margin-right: 8px;
flex-shrink: 0;
}
.step-data-icon.password { background: rgba(239, 68, 68, 0.2); }
.step-data-icon.identity { background: rgba(245, 158, 11, 0.2); }
.step-data-icon.financial { background: rgba(16, 185, 129, 0.2); }
.step-data-icon.contact { background: rgba(96, 165, 250, 0.2); }
.step-data-icon.account { background: rgba(139, 92, 246, 0.2); }
/* Credits System Preview */
.credits-preview {
background: linear-gradient(135deg, rgba(168,213,229,0.1), rgba(96,165,250,0.1));
border: 1px solid rgba(168,213,229,0.3);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 1.5rem;
margin-bottom: 2rem;
}
.credits-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.credits-header-icon { font-size: 1.5rem; }
.credits-header-title { font-weight: 600; color: #A8D5E5; }
.credits-cells {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.credits-cell {
width: 40px;
height: 50px;
background: linear-gradient(180deg, rgba(168,213,229,0.3), rgba(168,213,229,0.1));
border: 2px solid #A8D5E5;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.credits-cell.empty {
background: rgba(100,116,139,0.1);
border-color: rgba(100,116,139,0.3);
opacity: 0.4;
}
.credits-refill-text {
margin-top: 1rem;
font-size: 0.85rem;
color: var(--text-secondary);
}
@media (max-width: 768px) {
.badges-grid { grid-template-columns: repeat(3, 1fr); }
.mission-card { flex-direction: column; text-align: center; }
}
.seo-guide-container {
max-width: 900px;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
.seo-guide-header {
text-align: center;
margin-bottom: 3rem;
}
.seo-guide-icon {
font-size: 4rem;
margin-bottom: 1rem;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.seo-guide-icon svg {
width: 80px;
height: 80px;
max-width: 80px;
max-height: 80px;
}
.seo-guide-title {
font-family: 'Exo 2', sans-serif;
font-size: clamp(1.75rem, 4vw, 2.5rem);
color: var(--text-primary);
margin-bottom: 0.75rem;
}
.seo-guide-subtitle {
font-size: 1.1rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* Checklist Section */
.seo-checklist-section {
background: rgba(10, 15, 30, 0.95);
border: 1px solid rgba(100, 116, 139, 0.2);
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
padding: 2rem;
margin-bottom: 2rem;
}
.seo-section-title {
font-family: 'Exo 2', sans-serif;
font-size: 1.25rem;
color: var(--text-primary);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.seo-section-title svg {
width: 24px;
height: 24px;
color: #A8D5E5;
}
.seo-checklist {
list-style: none;
padding: 0;
margin: 0;
}
.seo-checklist-item {
display: flex;
gap: 1rem;
padding: 1.25rem;
margin-bottom: 1rem;
background: rgba(15, 23, 42, 0.8);
border: 1px solid rgba(100, 116, 139, 0.15);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
transition: all 0.2s;
}
.seo-checklist-item:hover {
border-color: rgba(168, 213, 229, 0.3);
background: rgba(15, 23, 42, 0.95);
}
.seo-checklist-item:last-child {
margin-bottom: 0;
}
.seo-item-priority {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
}
.seo-item-priority.critical {
background: rgba(239, 68, 68, 0.2);
color: #f87171;
border: 1px solid rgba(239, 68, 68, 0.3);
}
.seo-item-priority.high {
background: rgba(245, 158, 11, 0.2);
color: #fbbf24;
border: 1px solid rgba(245, 158, 11, 0.3);
}
.seo-item-priority.medium {
background: rgba(168, 213, 229, 0.15);
color: #A8D5E5;
border: 1px solid rgba(168, 213, 229, 0.3);
}
.seo-item-priority.low {
background: rgba(100, 116, 139, 0.2);
color: #94a3b8;
border: 1px solid rgba(100, 116, 139, 0.3);
}
.seo-item-content {
flex: 1;
}
.seo-item-title {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.35rem;
font-size: 1rem;
}
.seo-item-description {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.5;
}
.seo-item-link {
margin-top: 0.5rem;
}
.seo-item-link a {
font-size: 0.85rem;
color: #A8D5E5;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.seo-item-link a:hover {
text-decoration: underline;
}
.seo-item-link svg {
width: 14px;
height: 14px;
}
/* CTA Section */
.seo-cta-section {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(168, 213, 229, 0.1));
border: 2px solid rgba(139, 92, 246, 0.3);
clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
padding: 2.5rem;
text-align: center;
margin-top: 2rem;
}
.seo-cta-title {
font-family: 'Exo 2', sans-serif;
font-size: 1.5rem;
color: var(--text-primary);
margin-bottom: 0.75rem;
}
.seo-cta-text {
font-size: 1rem;
color: var(--text-secondary);
max-width: 500px;
margin: 0 auto 1.5rem;
line-height: 1.6;
}
.seo-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
color: white;
font-weight: 700;
font-size: 1rem;
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
text-decoration: none;
transition: all 0.3s;
}
.seo-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}
.seo-cta-note {
margin-top: 0.75rem;
font-size: 0.85rem;
color: var(--text-muted);
}
/* Common Scams Section */
.seo-scams-section {
background: rgba(239, 68, 68, 0.06);
border: 1px solid rgba(239, 68, 68, 0.15);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.seo-scams-title {
font-size: 1rem;
font-weight: 600;
color: #f87171;
margin-bottom: 0.75rem;
}
.seo-scams-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
list-style: none;
padding: 0;
margin: 0;
}
.seo-scams-list li {
font-size: 0.9rem;
color: var(--text-secondary);
}
.seo-scams-list li::before {
content: "⚠ ";
color: #f87171;
}
/* 404 State */
.seo-not-found {
text-align: center;
padding: 4rem 2rem;
}
.seo-not-found-title {
font-family: 'Exo 2', sans-serif;
font-size: 2rem;
color: var(--text-primary);
margin-bottom: 1rem;
}
.seo-not-found-text {
color: var(--text-secondary);
margin-bottom: 2rem;
}
/* Breadcrumb */
.seo-breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 2rem;
}
.seo-breadcrumb a {
color: var(--text-secondary);
text-decoration: none;
}
.seo-breadcrumb a:hover {
color: #A8D5E5;
}
/* Mobile */
@media (max-width: 640px) {
.seo-guide-container {
padding: 1rem;
}
.seo-checklist-section,
.seo-cta-section {
padding: 1.25rem;
}
.seo-checklist-item {
flex-direction: column;
gap: 0.75rem;
}
}
.guides-index-container {
max-width: 1000px;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
.guides-index-header {
text-align: center;
margin-bottom: 3rem;
}
.guides-index-title {
font-family: 'Exo 2', sans-serif;
font-size: clamp(1.75rem, 4vw, 2.5rem);
color: var(--text-primary);
margin-bottom: 0.75rem;
}
.guides-index-subtitle {
font-size: 1.1rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.guides-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.guide-card {
background: rgba(10, 15, 30, 0.95);
border: 1px solid rgba(100, 116, 139, 0.2);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 1.25rem 1.5rem;
text-decoration: none;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 1rem;
}
.guide-card:hover {
border-color: rgba(168, 213, 229, 0.4);
background: rgba(15, 23, 42, 0.95);
}
.guide-card-icon {
font-size: 2rem;
flex-shrink: 0;
}
.guide-card-name {
font-family: 'Exo 2', sans-serif;
font-size: 1.1rem;
color: var(--text-primary);
flex: 1;
}
.guide-card-arrow {
color: var(--text-muted);
transition: transform 0.2s;
flex-shrink: 0;
}
.guide-card:hover .guide-card-arrow {
transform: translateX(4px);
color: #A8D5E5;
}
.guide-card-arrow svg {
width: 20px;
height: 20px;
}
/* Email Scanner Promo */
.guides-scanner-promo {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
padding: 1.25rem;
background: rgba(15, 23, 42, 0.5);
border: 1px solid rgba(100, 116, 139, 0.15);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
font-size: 0.95rem;
color: var(--text-secondary);
}
.guides-scanner-link {
color: #A8D5E5;
text-decoration: none;
font-weight: 500;
}
.guides-scanner-link:hover {
text-decoration: underline;
}
@media (max-width: 640px) {
.guides-grid {
grid-template-columns: 1fr;
}
}
/* Tour Page Styles */
.tour-container {
max-width: 1100px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.tour-hero {
text-align: center;
padding: 3rem 0 4rem;
}
.tour-hero h1 {
font-family: 'Exo 2', sans-serif;
font-size: clamp(2rem, 4vw, 2.75rem);
background: linear-gradient(135deg, #a78bfa, #A8D5E5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1rem;
}
.tour-hero p {
font-size: 1.1rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}
/* Feature Sections */
.tour-section {
margin-bottom: 4rem;
scroll-margin-top: 100px;
}
.tour-section-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(100,116,139,0.2);
}
.tour-section-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(168,213,229,0.1));
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.tour-section-title {
font-family: 'Exo 2', sans-serif;
font-size: 1.5rem;
color: var(--text-primary);
}
.tour-section-desc {
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 1.5rem;
}
/* Feature Cards */
.tour-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
}
.tour-feature {
background: rgba(15,23,42,0.9);
border: 1px solid rgba(100,116,139,0.2);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 1.5rem;
transition: all 0.2s;
}
.tour-feature:hover {
border-color: rgba(139,92,246,0.4);
transform: translateY(-2px);
}
.tour-feature h4 {
color: var(--text-primary);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.tour-feature p {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.6;
}
.tour-feature .tier-badge {
font-size: 0.7rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-weight: 600;
}
.tier-badge.free { background: rgba(100,116,139,0.2); color: #94a3b8; }
.tier-badge.navigator { background: rgba(59,130,246,0.2); color: #60a5fa; }
.tier-badge.commander { background: rgba(139,92,246,0.2); color: #a78bfa; }
/* Screenshot/Demo Box */
.tour-demo-box {
background: rgba(15,23,42,0.95);
border: 1px solid rgba(100,116,139,0.3);
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
padding: 1.5rem;
margin-top: 1.5rem;
}
.tour-demo-box h4 {
color: var(--text-primary);
margin-bottom: 1rem;
font-size: 0.95rem;
}
.demo-preview {
background: rgba(0,0,0,0.4);
border-radius: 10px;
padding: 2rem;
text-align: center;
color: var(--text-muted);
}
/* Navigation */
.tour-nav {
position: fixed;
left: 0;
top: 70px;
bottom: 0;
width: 180px;
background: rgba(15,23,42,0.98);
backdrop-filter: blur(12px);
border-right: 1px solid rgba(100,116,139,0.2);
padding: 1.5rem 0;
z-index: 40;
overflow-y: auto;
}
.tour-nav-inner {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0 0.75rem;
}
.tour-nav a {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
color: var(--text-secondary);
text-decoration: none;
font-size: 0.85rem;
border-radius: 8px;
border: 1px solid transparent;
transition: all 0.2s;
}
.tour-nav a:hover {
color: var(--text-primary);
background: rgba(139,92,246,0.15);
border-color: rgba(139,92,246,0.3);
}
.tour-nav a.active {
color: #a78bfa;
background: rgba(139,92,246,0.2);
border-color: rgba(139,92,246,0.4);
}
.tour-nav-label {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
padding: 0.5rem 1rem 0.25rem;
margin-top: 0.5rem;
}
/* Offset container for sidebar */
.tour-page-wrapper {
margin-left: 180px;
}
/* Tier Comparison */
.tier-compare {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 1.5rem;
}
.tier-card {
background: rgba(15,23,42,0.9);
border: 1px solid rgba(100,116,139,0.2);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
padding: 1.5rem;
text-align: center;
}
.tier-card.featured {
border-color: rgba(139,92,246,0.5);
position: relative;
}
.tier-card.featured::before {
content: 'BEST VALUE';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
color: white;
font-size: 0.65rem;
font-weight: 700;
padding: 0.25rem 0.75rem;
border-radius: 10px;
}
.tier-name {
font-family: 'Exo 2', sans-serif;
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.tier-price {
font-size: 1.5rem;
font-weight: 700;
color: #a78bfa;
margin-bottom: 1rem;
}
.tier-price span {
font-size: 0.9rem;
font-weight: 400;
color: var(--text-muted);
}
.tier-features {
text-align: left;
font-size: 0.85rem;
color: var(--text-secondary);
}
.tier-features li {
margin-bottom: 0.5rem;
padding-left: 1.25rem;
position: relative;
}
.tier-features li::before {
content: '✓';
position: absolute;
left: 0;
color: #10b981;
}
/* CTA */
.tour-cta {
text-align: center;
padding: 4rem 1.5rem;
background: linear-gradient(180deg, transparent, rgba(139,92,246,0.05));
}
.tour-cta h2 {
font-family: 'Exo 2', sans-serif;
font-size: 1.75rem;
color: var(--text-primary);
margin-bottom: 1rem;
}
.tour-cta p {
color: var(--text-secondary);
margin-bottom: 2rem;
}
.tour-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
color: white;
font-weight: 700;
border-radius: 10px;
text-decoration: none;
transition: all 0.3s;
}
.tour-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(139,92,246,0.4);
}
@media (max-width: 768px) {
.tier-compare {
grid-template-columns: 1fr;
}
/* Hide sidebar on mobile, show bottom nav */
.tour-nav {
position: fixed;
left: 0;
right: 0;
top: auto;
bottom: 0;
width: 100%;
height: auto;
border-right: none;
border-top: 1px solid rgba(100,116,139,0.3);
padding: 0.5rem;
}
.tour-nav-inner {
flex-direction: row;
overflow-x: auto;
gap: 0.25rem;
padding: 0;
-webkit-overflow-scrolling: touch;
}
.tour-nav a {
flex-shrink: 0;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
white-space: nowrap;
}
.tour-nav-label {
display: none;
}
.tour-page-wrapper {
margin-left: 0;
padding-bottom: 60px; /* Space for bottom nav */
}
}
/* ============================================
FACETED BUTTON SYSTEM - Marketing Override
Gem-cut edges for all marketing page buttons
============================================ */
:root {
--facet-btn-sm: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
--facet-btn-md: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
--facet-btn-lg: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
/* Navigation CTA */
.gw-nav-cta {
border-radius: 0 !important;
clip-path: var(--facet-btn-md);
}
/* Navigation login link */
.gw-nav-login {
border-radius: 0 !important;
clip-path: var(--facet-btn-sm);
}
/* Sticky CTA buttons */
.sticky-cta-btn,
.sticky-cta-btn.primary,
.sticky-cta-btn.secondary {
border-radius: 0 !important;
clip-path: var(--facet-btn-md);
}
.sticky-cta-close {
border-radius: 0 !important;
clip-path: var(--facet-btn-sm);
}
/* MVP section buttons */
.mvp-btn-primary,
.mvp-btn-secondary {
border-radius: 0 !important;
clip-path: var(--facet-btn-md);
}
/* Tour buttons */
.tour-btn,
.tour-cta-btn {
border-radius: 0 !important;
clip-path: var(--facet-btn-lg);
}
/* Hero buttons */
.hero-cta,
.landing-cta,
.mvp-hero-cta,
.mvp-hero-secondary {
border-radius: 0 !important;
clip-path: var(--facet-btn-lg);
}
/* Feature cards buttons */
.feature-cta,
.feature-btn,
.card-cta {
border-radius: 0 !important;
clip-path: var(--facet-btn-md);
}
/* Pricing page buttons */
.pricing-btn,
.tier-cta,
.plan-cta {
border-radius: 0 !important;
clip-path: var(--facet-btn-md);
}
/* FAQ toggle buttons */
.faq-toggle,
.accordion-toggle {
border-radius: 0 !important;
clip-path: var(--facet-btn-sm);
}
/* General .btn on marketing pages */
.mvp-container .btn,
.tour-section .btn,
.pricing-container .btn,
.feature-container .btn {
border-radius: 0 !important;
clip-path: var(--facet-btn-md);
}
/* All anchor links styled as buttons */
a[class*="btn"],
a[class*="cta"],
a[class*="action"] {
border-radius: 0 !important;
clip-path: var(--facet-btn-md);
}
/* Exception for circular/icon buttons */
.btn-icon,
.btn-circle,
.icon-only,
.mobile-menu-btn {
clip-path: none !important;
}
/* Exception for badges */
.badge,
.tag,
.chip,
.price-badge,
.tier-badge,
.mvp-price-badge {
clip-path: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* HERO TRUST CHECKMARKS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.hero-trust-checks {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.5rem;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
.hero-check {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: rgba(168, 213, 229, 0.9);
font-weight: 500;
}
.hero-check svg {
width: 18px;
height: 18px;
stroke: #10b981;
flex-shrink: 0;
}
@media (max-width: 768px) {
.hero-trust-checks {
flex-direction: column;
gap: 0.5rem;
}
.hero-check {
font-size: 0.85rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* FOUNDER STORY SECTION */
/* ═══════════════════════════════════════════════════════════════════════════ */
.founder-story {
padding: 5rem 1.5rem;
background: linear-gradient(180deg,
rgba(10, 14, 23, 0) 0%,
rgba(15, 23, 42, 0.5) 20%,
rgba(15, 23, 42, 0.5) 80%,
rgba(10, 14, 23, 0) 100%
);
position: relative;
}
.founder-story::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(168, 213, 229, 0.3),
rgba(167, 139, 250, 0.3),
transparent
);
}
.founder-story-card {
max-width: 800px;
margin: 0 auto;
position: relative;
padding: 3rem;
background: linear-gradient(135deg,
rgba(30, 41, 59, 0.4) 0%,
rgba(15, 23, 42, 0.6) 100%
);
border: 1px solid rgba(100, 116, 139, 0.2);
clip-path: polygon(
20px 0%, calc(100% - 20px) 0%, 100% 20px,
100% calc(100% - 20px), calc(100% - 20px) 100%,
20px 100%, 0% calc(100% - 20px), 0% 20px
);
box-shadow:
inset 0 1px 0 rgba(168, 213, 229, 0.1),
0 20px 60px rgba(0, 0, 0, 0.3);
}
.founder-story-quote-mark {
position: absolute;
top: 1.5rem;
left: 2rem;
font-size: 6rem;
font-family: Georgia, serif;
color: rgba(167, 139, 250, 0.15);
line-height: 1;
pointer-events: none;
user-select: none;
}
.founder-story-content {
position: relative;
z-index: 1;
}
.founder-story-headline {
font-size: 1.75rem;
font-weight: 700;
color: #f8fafc;
margin-bottom: 1.5rem;
text-align: center;
}
.founder-story-text {
color: rgba(203, 213, 225, 0.9);
line-height: 1.8;
font-size: 1.05rem;
}
.founder-story-text p {
margin-bottom: 1.25rem;
}
.founder-story-text p:last-child {
margin-bottom: 0;
}
.founder-story-text strong {
color: #A8D5E5;
font-weight: 600;
}
.founder-story-signature {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(100, 116, 139, 0.2);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.25rem;
}
.founder-name {
font-size: 1.1rem;
font-weight: 600;
color: #f8fafc;
}
.founder-title {
font-size: 0.85rem;
color: rgba(167, 139, 250, 0.8);
}
@media (max-width: 768px) {
.founder-story {
padding: 3rem 1rem;
}
.founder-story-card {
padding: 2rem 1.5rem;
clip-path: polygon(
12px 0%, calc(100% - 12px) 0%, 100% 12px,
100% calc(100% - 12px), calc(100% - 12px) 100%,
12px 100%, 0% calc(100% - 12px), 0% 12px
);
}
.founder-story-quote-mark {
font-size: 4rem;
top: 1rem;
left: 1rem;
}
.founder-story-headline {
font-size: 1.4rem;
}
.founder-story-text {
font-size: 0.95rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* FLOATING JUMP NAVIGATION */
/* ═══════════════════════════════════════════════════════════════════════════ */
.floating-jump-nav {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
display: flex;
flex-direction: column;
gap: 12px;
opacity: 0;
transition: opacity 0.3s ease;
}
.floating-jump-nav.visible {
opacity: 1;
}
.floating-jump-nav a {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
text-decoration: none;
color: #64748b;
transition: all 0.2s;
}
.floating-jump-nav a:hover {
color: #A8D5E5;
}
.floating-jump-nav a:hover .jump-dot {
background: #A8D5E5;
box-shadow: 0 0 12px rgba(168,213,229,0.5);
transform: scale(1.3);
}
.floating-jump-nav a:hover .jump-label {
opacity: 1;
transform: translateX(0);
}
.floating-jump-nav a.active .jump-dot {
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
box-shadow: 0 0 12px rgba(167,139,250,0.6);
width: 12px;
height: 12px;
}
.jump-dot {
width: 8px;
height: 8px;
background: rgba(100,116,139,0.5);
border-radius: 50%;
transition: all 0.2s;
flex-shrink: 0;
}
.jump-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0;
transform: translateX(10px);
transition: all 0.2s;
white-space: nowrap;
background: rgba(15,23,42,0.9);
padding: 4px 8px;
border-radius: 4px;
border: 1px solid rgba(100,116,139,0.2);
}
@media (max-width: 1200px) {
.floating-jump-nav {
display: none;
}
}
/* MVP Button Secondary Style */
.mvp-btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.2s;
cursor: pointer;
clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
}
.mvp-btn-secondary:hover {
background: rgba(168,213,229,0.1) !important;
border-color: rgba(168,213,229,0.5) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* DEMO PREVIEW - ENHANCED POLISH */
/* ═══════════════════════════════════════════════════════════════════════════ */
.demo-preview {
margin-top: 1.5rem;
background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(30,41,59,0.9));
padding: 1.5rem;
clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
box-shadow:
inset 2px 2px 0 rgba(168,213,229,0.1),
inset -2px -2px 0 rgba(167,139,250,0.05),
0 8px 32px rgba(0,0,0,0.3);
position: relative;
overflow: hidden;
max-height: 0;
opacity: 0;
padding: 0 1.5rem;
transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
}
.demo-preview.visible {
max-height: 500px;
opacity: 1;
padding: 1.5rem;
}
.demo-preview::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(168,213,229,0.3), transparent);
}
.demo-preview-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
color: #64748b;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.demo-preview-header .live-dot {
width: 6px;
height: 6px;
background: #10b981;
border-radius: 50%;
animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(16,185,129,0); }
}
.demo-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.demo-stat-card {
padding: 1rem;
clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
position: relative;
transition: all 0.3s ease;
opacity: 0;
transform: translateY(10px);
}
.demo-preview.visible .demo-stat-card {
opacity: 1;
transform: translateY(0);
}
.demo-preview.visible .demo-stat-card:nth-child(1) { transition-delay: 0.1s; }
.demo-preview.visible .demo-stat-card:nth-child(2) { transition-delay: 0.2s; }
.demo-preview.visible .demo-stat-card:nth-child(3) { transition-delay: 0.3s; }
.demo-stat-card.green {
background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.05));
box-shadow: inset 1px 1px 0 rgba(16,185,129,0.2), inset -1px -1px 0 rgba(16,185,129,0.1);
}
.demo-stat-card.red {
background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.05));
box-shadow: inset 1px 1px 0 rgba(239,68,68,0.2), inset -1px -1px 0 rgba(239,68,68,0.1);
}
.demo-stat-card.orange {
background: linear-gradient(135deg, rgba(249,115,22,0.15), rgba(249,115,22,0.05));
box-shadow: inset 1px 1px 0 rgba(249,115,22,0.2), inset -1px -1px 0 rgba(249,115,22,0.1);
}
.demo-stat-card:hover {
transform: translateY(-2px);
}
.demo-stat-card.green:hover {
box-shadow: inset 1px 1px 0 rgba(16,185,129,0.3), inset -1px -1px 0 rgba(16,185,129,0.15), 0 4px 20px rgba(16,185,129,0.2);
}
.demo-stat-card.red:hover {
box-shadow: inset 1px 1px 0 rgba(239,68,68,0.3), inset -1px -1px 0 rgba(239,68,68,0.15), 0 4px 20px rgba(239,68,68,0.2);
}
.demo-stat-card.orange:hover {
box-shadow: inset 1px 1px 0 rgba(249,115,22,0.3), inset -1px -1px 0 rgba(249,115,22,0.15), 0 4px 20px rgba(249,115,22,0.2);
}
.demo-stat-label {
color: #94a3b8;
font-size: 0.7rem;
text-transform: uppercase;
margin-bottom: 0.25rem;
letter-spacing: 0.5px;
}
.demo-stat-value {
font-size: 1.75rem;
font-weight: 800;
font-family: 'Exo 2', sans-serif;
line-height: 1.2;
}
.demo-stat-value.green { color: #10b981; text-shadow: 0 0 20px rgba(16,185,129,0.3); }
.demo-stat-value.red { color: #ef4444; text-shadow: 0 0 20px rgba(239,68,68,0.3); }
.demo-stat-value.orange { color: #f97316; text-shadow: 0 0 20px rgba(249,115,22,0.3); }
.demo-stat-sub {
color: #64748b;
font-size: 0.75rem;
}
.demo-next-steps {
margin-top: 1rem;
padding: 1rem;
background: linear-gradient(135deg, rgba(167,139,250,0.1), rgba(167,139,250,0.02));
clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
box-shadow: inset 1px 1px 0 rgba(167,139,250,0.15);
display: flex;
align-items: flex-start;
gap: 0.75rem;
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease 0.4s;
}
.demo-preview.visible .demo-next-steps {
opacity: 1;
transform: translateY(0);
}
.demo-next-steps-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, rgba(167,139,250,0.2), transparent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
clip-path: polygon(4px 0%, calc(100% - 4px) 0%, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0% calc(100% - 4px), 0% 4px);
}
.demo-cta-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
color: #A8D5E5;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.2s;
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease 0.5s;
}
.demo-preview.visible .demo-cta-link {
opacity: 1;
transform: translateX(0);
}
.demo-cta-link:hover {
color: #fff;
gap: 0.75rem;
}
.demo-cta-link svg {
transition: transform 0.2s;
}
.demo-cta-link:hover svg {
transform: translateX(4px);
}
/* Toggle button enhanced */
.demo-toggle-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
background: transparent;
color: #A8D5E5;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.2s;
clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
box-shadow: inset 0 0 0 1px rgba(168,213,229,0.3);
}
.demo-toggle-btn:hover {
background: rgba(168,213,229,0.1);
box-shadow: inset 0 0 0 1px rgba(168,213,229,0.5);
}
.demo-toggle-btn .toggle-icon {
transition: transform 0.3s;
}
.demo-toggle-btn.active .toggle-icon {
transform: rotate(180deg);
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* FLOATING NAV - ENHANCED WITH PROGRESS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.floating-jump-nav::before {
content: '';
position: absolute;
right: 3.5px;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(100,116,139,0.3) 20%, rgba(100,116,139,0.3) 80%, transparent);
}
.floating-jump-nav .jump-progress {
position: absolute;
right: 3px;
top: 0;
width: 2px;
background: linear-gradient(180deg, #a78bfa, #A8D5E5);
border-radius: 1px;
transition: height 0.2s ease;
box-shadow: 0 0 8px rgba(167,139,250,0.5);
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* FINAL CTA - ENHANCED POLISH */
/* ═══════════════════════════════════════════════════════════════════════════ */
.final-cta-banner {
padding: 3rem 2rem 5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.final-cta-banner::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 50%, rgba(0,212,170,0.08) 0%, transparent 50%),
radial-gradient(ellipse at 70% 50%, rgba(168,213,229,0.06) 0%, transparent 50%);
pointer-events: none;
}
.final-cta-banner::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(168,213,229,0.2), rgba(167,139,250,0.2), transparent);
}
.final-cta-particles {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.final-cta-particles span {
position: absolute;
width: 4px;
height: 4px;
background: rgba(167,139,250,0.4);
border-radius: 50%;
animation: floatParticle 15s linear infinite;
}
.final-cta-particles span:nth-child(1) { left: 10%; animation-delay: 0s; }
.final-cta-particles span:nth-child(2) { left: 25%; animation-delay: 3s; }
.final-cta-particles span:nth-child(3) { left: 40%; animation-delay: 6s; background: rgba(168,213,229,0.4); }
.final-cta-particles span:nth-child(4) { left: 60%; animation-delay: 9s; }
.final-cta-particles span:nth-child(5) { left: 75%; animation-delay: 12s; background: rgba(168,213,229,0.4); }
.final-cta-particles span:nth-child(6) { left: 90%; animation-delay: 2s; }
@keyframes floatParticle {
0% { transform: translateY(100vh) scale(0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-100px) scale(1); opacity: 0; }
}
.final-cta-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(16,185,129,0.15);
padding: 0.5rem 1rem;
margin-bottom: 1.5rem;
font-size: 0.8rem;
color: #10b981;
clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
box-shadow: inset 0 0 0 1px rgba(16,185,129,0.3);
}
.final-cta-title {
font-size: 2.25rem;
font-weight: 800;
color: #e2e8f0;
margin-bottom: 1rem;
font-family: 'Exo 2', sans-serif;
}
.final-cta-subtitle {
color: #94a3b8;
font-size: 1.1rem;
margin-bottom: 2rem;
line-height: 1.6;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.final-cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.final-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.final-cta-btn.primary {
background: linear-gradient(135deg, #00D4AA, #10b981);
color: #0a0e17;
box-shadow: 0 4px 20px rgba(0,212,170,0.4);
}
.final-cta-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(0,212,170,0.5);
}
.final-cta-btn.secondary {
background: transparent;
color: #A8D5E5;
box-shadow: inset 0 0 0 1px rgba(168,213,229,0.3);
}
.final-cta-btn.secondary:hover {
box-shadow: inset 0 0 0 1px rgba(168,213,229,0.6);
background: rgba(168,213,229,0.05);
}
/* Button ripple effect */
.final-cta-btn::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.3) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.3s;
}
.final-cta-btn:active::after {
opacity: 1;
}
@media (max-width: 600px) {
.final-cta-title {
font-size: 1.75rem;
}
.final-cta-buttons {
flex-direction: column;
align-items: center;
}
.final-cta-btn {
width: 100%;
max-width: 280px;
justify-content: center;
}
}
/* ============================================================
MOBILE-FIRST OPTIMIZATIONS
Added: January 30, 2026
============================================================ */
/* Base mobile styles - designed for 320px+ screens */
@media (max-width: 768px) {
/* Improved touch targets - minimum 44px for accessibility */
.gw-nav-link,
.gw-nav-cta,
.gw-nav-login,
.gw-btn,
.btn,
a.btn,
button {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Mobile hero section improvements */
.hero-banner-content {
padding: 1rem;
text-align: center;
}
.hero-banner-title {
font-size: 1.75rem !important;
line-height: 1.2;
margin-bottom: 1rem;
}
.hero-banner-description {
font-size: 0.95rem;
line-height: 1.5;
padding: 0 0.5rem;
}
/* Steam scanner input - full width on mobile */
.hero-steam-scanner,
.hero-email-check {
width: 100%;
max-width: 100%;
padding: 0 1rem;
}
.hero-scanner-input-row {
flex-direction: column;
gap: 0.75rem;
}
.hero-scanner-input-row input {
width: 100%;
min-height: 48px;
font-size: 16px; /* Prevents iOS zoom */
}
.hero-scanner-input-row button {
width: 100%;
min-height: 48px;
}
/* Trust badges - horizontal scroll on small screens */
.hero-trust-checks {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0 1rem;
}
.hero-check {
font-size: 0.85rem;
justify-content: flex-start;
}
/* Pricing cards - stack vertically */
.pricing-grid,
.plan-cards {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 0 1rem;
}
.pricing-card,
.plan-card {
width: 100%;
max-width: 100%;
}
/* Feature cards - single column */
.scenario-cards,
.feature-grid,
.gw-features-grid {
grid-template-columns: 1fr !important;
gap: 1rem;
padding: 0 1rem;
}
/* Stats section - 2 columns instead of 4 */
.mvp-stats {
grid-template-columns: repeat(2, 1fr) !important;
gap: 1rem;
padding: 0 1rem;
}
.mvp-stat-number {
font-size: 1.5rem;
}
.mvp-stat-label {
font-size: 0.75rem;
}
/* Improved readability - larger font sizes */
body {
font-size: 16px;
line-height: 1.6;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
/* Section padding adjustments */
section,
.gw-section {
padding: 3rem 1rem;
}
/* Sticky CTA bar improvements */
.sticky-cta-bar {
padding: 0.75rem 1rem;
flex-direction: column;
gap: 0.75rem;
}
.sticky-cta-text {
font-size: 0.9rem;
text-align: center;
}
.sticky-cta-btn {
width: 100%;
min-height: 48px;
font-size: 1rem;
}
/* Form inputs - prevent iOS zoom */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
font-size: 16px !important;
}
/* Hide decorative elements on mobile for performance */
.scanlines {
opacity: 0.3;
}
}
/* Small phones (320px - 480px) */
@media (max-width: 480px) {
.hero-banner-title {
font-size: 1.5rem !important;
}
.hero-banner-label {
font-size: 0.75rem;
padding: 0.3rem 0.75rem;
}
/* Single column stats */
.mvp-stats {
grid-template-columns: 1fr !important;
}
/* Smaller section padding */
section,
.gw-section {
padding: 2rem 0.75rem;
}
/* Pricing improvements */
.pricing-card,
.plan-card {
padding: 1.25rem;
}
.plan-price {
font-size: 2rem;
}
/* Button text adjustments */
.gw-btn,
.btn {
font-size: 0.9rem;
padding: 0.75rem 1.25rem;
}
}
/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
.hero-banner {
min-height: auto;
padding: 2rem 1rem;
}
.hero-banner-content {
flex-direction: row;
text-align: left;
gap: 2rem;
}
.hero-steam-scanner {
max-width: 400px;
}
}
/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
/* Disable hover effects on touch devices */
.gw-btn:hover,
.btn:hover,
.pricing-card:hover,
.scenario-card:hover {
transform: none !important;
}
/* Active states for touch feedback */
.gw-btn:active,
.btn:active {
transform: scale(0.98);
opacity: 0.9;
}
/* Increase tap targets */
.gw-nav-dropdown a {
padding: 1rem;
min-height: 48px;
}
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.gw-reveal,
.gw-reveal-left,
.gw-reveal-right {
opacity: 1;
transform: none;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.gw-btn,
.btn {
border: 2px solid currentColor;
}
.pricing-card,
.scenario-card {
border: 2px solid #A8D5E5;
}
}
/* ============================================================
IMPROVED MOBILE NAVIGATION
============================================================ */
@media (max-width: 768px) {
/* Sticky nav adjustments */
.gw-sticky-nav {
padding: 0.5rem 1rem;
}
.gw-nav-container {
height: 60px;
padding: 0 1rem;
}
.gw-nav-logo img {
width: 40px;
height: 40px;
}
.gw-nav-logo-text {
font-size: 1rem;
}
/* Hide desktop nav, show mobile menu button */
.gw-nav-menu,
.gw-nav-login {
display: none !important;
}
.gw-mobile-menu-btn {
display: flex !important;
padding: 0.5rem;
min-width: 44px;
min-height: 44px;
}
.gw-nav-cta {
font-size: 0.85rem;
padding: 0.5rem 1rem;
min-height: 40px;
}
/* Mobile menu overlay - enable on mobile */
.gw-mobile-overlay {
display: block;
}
.gw-mobile-overlay.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Mobile menu drawer - enable on mobile */
.gw-mobile-drawer {
display: block;
}
.gw-mobile-drawer.open {
right: 0;
visibility: visible;
}
.gw-mobile-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(168, 213, 229, 0.2);
}
.gw-mobile-drawer-close {
background: none;
border: none;
color: #94a3b8;
font-size: 1.5rem;
cursor: pointer;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.gw-mobile-nav-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
color: #e2e8f0;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
border-radius: 8px;
transition: all 0.2s;
min-height: 48px;
}
.gw-mobile-nav-link:hover,
.gw-mobile-nav-link:active {
background: rgba(168, 213, 229, 0.1);
color: #A8D5E5;
}
.gw-mobile-nav-link svg {
width: 20px;
height: 20px;
opacity: 0.7;
}
.gw-mobile-nav-divider {
height: 1px;
background: rgba(168, 213, 229, 0.15);
margin: 1rem 0;
}
.gw-mobile-nav-cta {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem;
background: linear-gradient(135deg, #A8D5E5, #7FC8DC);
color: #0a0e17;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
border-radius: 12px;
margin-top: 1rem;
min-height: 48px;
transition: all 0.2s ease;
}
.gw-mobile-nav-cta:hover,
.gw-mobile-nav-cta:active {
background: linear-gradient(135deg, #b8e5f2, #8fd8e8);
transform: translateY(-1px);
}
}
/* Extra small screens */
@media (max-width: 380px) {
.gw-nav-logo-text {
display: none;
}
.gw-nav-cta {
padding: 0.4rem 0.75rem;
font-size: 0.8rem;
}
}
/* ============================================
GALAXYWARDEN ENHANCED UI STATES
Inspired by error page design system
============================================ */
/* ===========================================
SECTION 1: EMPTY STATES
Terminal-style with diagnostics
=========================================== */
.gw-empty-state {
position: relative;
padding: 3rem 2rem;
text-align: center;
background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(30,41,59,0.9));
border: 1px solid rgba(100,116,139,0.3);
border-radius: 16px;
overflow: hidden;
}
/* Terminal Header */
.gw-empty-state::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 32px;
background: linear-gradient(135deg, rgba(30,41,59,0.98), rgba(15,23,42,0.95));
border-bottom: 1px solid rgba(100,116,139,0.3);
}
.gw-empty-terminal-title {
position: absolute;
top: 8px;
left: 16px;
font-size: 0.7rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 1px;
font-family: 'Exo 2', monospace;
}
.gw-empty-terminal-dots {
position: absolute;
top: 10px;
right: 16px;
display: flex;
gap: 6px;
}
.gw-empty-terminal-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(100,116,139,0.5);
}
.gw-empty-terminal-dots span:nth-child(1) { background: #ef4444; }
.gw-empty-terminal-dots span:nth-child(2) { background: #fbbf24; }
.gw-empty-terminal-dots span:nth-child(3) { background: #10b981; }
/* Corner Brackets */
.gw-empty-state .corner-bracket {
position: absolute;
width: 20px;
height: 20px;
border: 2px solid rgba(168,213,229,0.4);
}
.gw-empty-state .corner-bracket.tl { top: 40px; left: 8px; border-right: none; border-bottom: none; }
.gw-empty-state .corner-bracket.tr { top: 40px; right: 8px; border-left: none; border-bottom: none; }
.gw-empty-state .corner-bracket.bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.gw-empty-state .corner-bracket.br { bottom: 8px; right: 8px; border-left: none; border-top: none; }
/* Content */
.gw-empty-content {
margin-top: 2rem;
}
.gw-empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
filter: drop-shadow(0 0 20px rgba(168,213,229,0.3));
animation: emptyIconFloat 3s ease-in-out infinite;
}
@keyframes emptyIconFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(5deg); }
}
.gw-empty-title {
font-family: 'Exo 2', sans-serif;
font-size: 1.5rem;
font-weight: 700;
color: #e2e8f0;
margin-bottom: 0.5rem;
}
.gw-empty-message {
color: #94a3b8;
font-size: 0.95rem;
max-width: 400px;
margin: 0 auto 1.5rem;
line-height: 1.6;
}
/* Diagnostic Readout */
.gw-empty-diagnostic {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
margin: 1.5rem 0;
padding: 1rem;
background: rgba(0,0,0,0.3);
border-radius: 8px;
}
.gw-diagnostic-item {
text-align: center;
}
.gw-diagnostic-label {
font-size: 0.65rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
}
.gw-diagnostic-value {
font-family: 'Exo 2', monospace;
font-size: 0.85rem;
font-weight: 600;
padding: 4px 12px;
border-radius: 4px;
background: rgba(100,116,139,0.2);
}
.gw-diagnostic-value.ok { color: #10b981; background: rgba(16,185,129,0.15); }
.gw-diagnostic-value.warning { color: #fbbf24; background: rgba(251,191,36,0.15); }
.gw-diagnostic-value.error { color: #ef4444; background: rgba(239,68,68,0.15); }
.gw-diagnostic-value.info { color: #A8D5E5; background: rgba(168,213,229,0.15); }
/* Suggestions */
.gw-empty-suggestions {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(100,116,139,0.2);
}
.gw-empty-suggestions-title {
font-size: 0.75rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1rem;
}
.gw-empty-suggestions-links {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.gw-empty-suggestions-links a {
color: #A8D5E5;
text-decoration: none;
font-size: 0.85rem;
padding: 0.5rem 1rem;
border: 1px solid rgba(168,213,229,0.3);
border-radius: 20px;
transition: all 0.2s;
}
.gw-empty-suggestions-links a:hover {
background: rgba(168,213,229,0.15);
border-color: rgba(168,213,229,0.5);
}
/* ===========================================
SECTION 2: SKELETON LOADERS
Cosmic-themed loading placeholders
=========================================== */
.gw-skeleton {
position: relative;
background: linear-gradient(135deg, rgba(30,41,59,0.8), rgba(15,23,42,0.9));
border: 1px solid rgba(100,116,139,0.2);
border-radius: 12px;
overflow: hidden;
}
.gw-skeleton::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(168,213,229,0.08),
transparent
);
animation: skeletonShimmer 1.5s infinite;
}
@keyframes skeletonShimmer {
0% { left: -100%; }
100% { left: 100%; }
}
.gw-skeleton-card {
padding: 1.5rem;
min-height: 200px;
}
.gw-skeleton-line {
height: 12px;
background: rgba(100,116,139,0.3);
border-radius: 4px;
margin-bottom: 12px;
}
.gw-skeleton-line.short { width: 60%; }
.gw-skeleton-line.medium { width: 80%; }
.gw-skeleton-line.full { width: 100%; }
.gw-skeleton-circle {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(100,116,139,0.3);
}
.gw-skeleton-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.gw-skeleton-title {
height: 20px;
width: 150px;
background: rgba(100,116,139,0.4);
border-radius: 4px;
}
/* Breach Card Skeleton */
.gw-skeleton-breach {
padding: 1rem;
margin-bottom: 1rem;
}
.gw-skeleton-breach-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.gw-skeleton-breach-icon {
width: 40px;
height: 40px;
border-radius: 8px;
background: rgba(100,116,139,0.3);
}
.gw-skeleton-breach-badge {
width: 80px;
height: 24px;
border-radius: 12px;
background: rgba(100,116,139,0.3);
}
/* ===========================================
SECTION 3: SUCCESS CELEBRATIONS
Animated completion states
=========================================== */
.gw-success-state {
position: relative;
padding: 3rem 2rem;
text-align: center;
background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(15,23,42,0.95));
border: 2px solid rgba(16,185,129,0.4);
border-radius: 16px;
overflow: hidden;
}
.gw-success-state::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(
from 0deg,
transparent,
rgba(16,185,129,0.1),
transparent,
rgba(16,185,129,0.1),
transparent
);
animation: successSweep 4s linear infinite;
}
@keyframes successSweep {
to { transform: rotate(360deg); }
}
.gw-success-content {
position: relative;
z-index: 1;
}
.gw-success-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, #10b981, #059669);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: white;
animation: successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 0 40px rgba(16,185,129,0.4);
}
@keyframes successPop {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}
.gw-success-title {
font-family: 'Exo 2', sans-serif;
font-size: 1.75rem;
font-weight: 700;
color: #10b981;
margin-bottom: 0.5rem;
}
.gw-success-message {
color: #94a3b8;
font-size: 1rem;
margin-bottom: 1.5rem;
}
/* Confetti Particles */
.gw-success-confetti {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.gw-confetti-particle {
position: absolute;
width: 10px;
height: 10px;
background: #10b981;
animation: confettiFall 3s ease-out forwards;
}
.gw-confetti-particle:nth-child(odd) { background: #A8D5E5; }
.gw-confetti-particle:nth-child(3n) { background: #fbbf24; }
.gw-confetti-particle:nth-child(4n) { background: #a78bfa; }
@keyframes confettiFall {
0% { transform: translateY(-100%) rotate(0deg); opacity: 1; }
100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
/* Reward Badge */
.gw-success-reward {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.5rem;
background: rgba(16,185,129,0.15);
border: 1px solid rgba(16,185,129,0.3);
border-radius: 12px;
margin-top: 1rem;
}
.gw-success-reward-icon {
font-size: 1.5rem;
}
.gw-success-reward-text {
text-align: left;
}
.gw-success-reward-label {
font-size: 0.7rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 1px;
}
.gw-success-reward-value {
font-family: 'Exo 2', sans-serif;
font-size: 1.1rem;
font-weight: 700;
color: #10b981;
}
/* ===========================================
SECTION 4: LOCKED FEATURE CARDS
Premium upgrade prompts
=========================================== */
.gw-locked-card {
position: relative;
padding: 2rem;
background: linear-gradient(135deg, rgba(30,41,59,0.9), rgba(15,23,42,0.95));
border: 2px solid rgba(167,139,250,0.3);
border-radius: 16px;
overflow: hidden;
}
.gw-locked-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(167,139,250,0.03) 10px,
rgba(167,139,250,0.03) 20px
);
}
.gw-locked-badge {
position: absolute;
top: 12px;
right: 12px;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
color: white;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.gw-locked-badge svg {
width: 12px;
height: 12px;
}
.gw-locked-content {
position: relative;
z-index: 1;
text-align: center;
}
.gw-locked-icon {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.7;
filter: grayscale(50%);
}
.gw-locked-title {
font-family: 'Exo 2', sans-serif;
font-size: 1.25rem;
font-weight: 700;
color: #e2e8f0;
margin-bottom: 0.5rem;
}
.gw-locked-description {
color: #94a3b8;
font-size: 0.9rem;
margin-bottom: 1.5rem;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
.gw-locked-features {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.gw-locked-feature {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: #94a3b8;
font-size: 0.85rem;
}
.gw-locked-feature svg {
width: 16px;
height: 16px;
color: #a78bfa;
}
.gw-locked-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.75rem;
background: linear-gradient(135deg, #a78bfa, #8b5cf6);
color: white;
text-decoration: none;
font-weight: 700;
border-radius: 8px;
transition: all 0.3s;
}
.gw-locked-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(167,139,250,0.4);
}
/* ===========================================
SECTION 5: STATUS INDICATORS
Diagnostic-style badges
=========================================== */
.gw-status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.gw-status-badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
/* Status Types */
.gw-status-badge.online {
background: rgba(16,185,129,0.15);
color: #10b981;
}
.gw-status-badge.online::before { background: #10b981; }
.gw-status-badge.scanning {
background: rgba(168,213,229,0.15);
color: #A8D5E5;
}
.gw-status-badge.scanning::before {
background: #A8D5E5;
animation: statusPulse 0.5s ease-in-out infinite;
}
.gw-status-badge.warning {
background: rgba(251,191,36,0.15);
color: #fbbf24;
}
.gw-status-badge.warning::before { background: #fbbf24; }
.gw-status-badge.critical {
background: rgba(239,68,68,0.15);
color: #ef4444;
}
.gw-status-badge.critical::before {
background: #ef4444;
animation: statusPulse 0.3s ease-in-out infinite;
}
.gw-status-badge.offline {
background: rgba(100,116,139,0.15);
color: #64748b;
}
.gw-status-badge.offline::before {
background: #64748b;
animation: none;
}
/* Detailed Status Card */
.gw-status-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: rgba(30,41,59,0.8);
border: 1px solid rgba(100,116,139,0.2);
border-radius: 12px;
}
.gw-status-card-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
.gw-status-card-icon.success { background: rgba(16,185,129,0.2); }
.gw-status-card-icon.warning { background: rgba(251,191,36,0.2); }
.gw-status-card-icon.error { background: rgba(239,68,68,0.2); }
.gw-status-card-icon.info { background: rgba(168,213,229,0.2); }
.gw-status-card-content {
flex: 1;
}
.gw-status-card-title {
font-weight: 600;
color: #e2e8f0;
font-size: 0.9rem;
}
.gw-status-card-subtitle {
color: #64748b;
font-size: 0.8rem;
}
/* ===========================================
SECTION 6: PROGRESS INDICATORS
Animated progress displays
=========================================== */
.gw-progress-ring {
position: relative;
width: 80px;
height: 80px;
}
.gw-progress-ring svg {
transform: rotate(-90deg);
}
.gw-progress-ring-bg {
fill: none;
stroke: rgba(100,116,139,0.2);
stroke-width: 8;
}
.gw-progress-ring-fill {
fill: none;
stroke: url(#gw-grad-stellar);
stroke-width: 8;
stroke-linecap: round;
transition: stroke-dashoffset 0.5s ease;
}
.gw-progress-ring-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Exo 2', sans-serif;
font-size: 1.1rem;
font-weight: 700;
color: #e2e8f0;
}
/* Step Progress */
.gw-step-progress {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
}
.gw-step {
display: flex;
align-items: center;
}
.gw-step-circle {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
background: rgba(100,116,139,0.3);
color: #64748b;
border: 2px solid transparent;
transition: all 0.3s;
}
.gw-step.active .gw-step-circle {
background: rgba(168,213,229,0.2);
color: #A8D5E5;
border-color: #A8D5E5;
}
.gw-step.completed .gw-step-circle {
background: #10b981;
color: white;
border-color: #10b981;
}
.gw-step-line {
width: 40px;
height: 2px;
background: rgba(100,116,139,0.3);
transition: background 0.3s;
}
.gw-step.completed + .gw-step .gw-step-line,
.gw-step.completed .gw-step-line {
background: #10b981;
}
/* ===========================================
SECTION 7: NOTIFICATION BANNERS
Alert-style announcements
=========================================== */
.gw-banner {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
border-radius: 12px;
margin-bottom: 1rem;
}
.gw-banner-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.gw-banner-content {
flex: 1;
}
.gw-banner-title {
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 2px;
}
.gw-banner-text {
font-size: 0.85rem;
opacity: 0.9;
}
.gw-banner-action {
flex-shrink: 0;
}
/* Banner Types */
.gw-banner.info {
background: linear-gradient(135deg, rgba(168,213,229,0.15), rgba(168,213,229,0.05));
border: 1px solid rgba(168,213,229,0.3);
color: #A8D5E5;
}
.gw-banner.success {
background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.05));
border: 1px solid rgba(16,185,129,0.3);
color: #10b981;
}
.gw-banner.warning {
background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(251,191,36,0.05));
border: 1px solid rgba(251,191,36,0.3);
color: #fbbf24;
}
.gw-banner.error {
background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.05));
border: 1px solid rgba(239,68,68,0.3);
color: #ef4444;
}
/* ===========================================
SECTION 8: TOOLTIP SYSTEM
Helpful info popovers
=========================================== */
.gw-tooltip-trigger {
position: relative;
cursor: help;
}
.gw-tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
padding: 0.75rem 1rem;
background: rgba(15,23,42,0.98);
border: 1px solid rgba(168,213,229,0.3);
border-radius: 8px;
font-size: 0.8rem;
color: #e2e8f0;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.2s;
z-index: 1000;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.gw-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: rgba(168,213,229,0.3);
}
.gw-tooltip-trigger:hover .gw-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-12px);
}
/* ===========================================
SECTION 9: CARD ENHANCEMENTS
Hover effects and polish
=========================================== */
.gw-card-glow {
position: relative;
transition: all 0.3s ease;
}
.gw-card-glow::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, transparent, rgba(168,213,229,0.3), transparent);
border-radius: inherit;
opacity: 0;
z-index: -1;
transition: opacity 0.3s;
}
.gw-card-glow:hover::before {
opacity: 1;
}
.gw-card-glow:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
/* Scan Line Animation */
.gw-scan-line {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #A8D5E5, transparent);
animation: scanLine 2s linear infinite;
opacity: 0;
}
.gw-card-glow:hover .gw-scan-line {
opacity: 1;
}
@keyframes scanLine {
0% { top: 0; }
100% { top: 100%; }
}
/* ===========================================
RESPONSIVE ADJUSTMENTS
=========================================== */
@media (max-width: 768px) {
.gw-empty-state {
padding: 2rem 1rem;
}
.gw-empty-diagnostic {
gap: 1rem;
}
.gw-empty-icon {
font-size: 3rem;
}
.gw-locked-card {
padding: 1.5rem;
}
.gw-step-line {
width: 24px;
}
.gw-banner {
flex-direction: column;
text-align: center;
}
}
/* ═══════════════════════════════════════════════════════════════
MOBILE LANDING PAGE — Reduce scroll length & text density
Added 2026-02-16
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── Hero: tighter padding ── */
.hero-banner {
padding-bottom: 2rem !important;
}
.hero-banner-scroll {
display: none !important;
}
/* ── Differentiation: tighten + hide discovery chain ── */
.gw-diff-section {
padding: 2.5rem 0 1.5rem !important;
}
.gw-diff-section .gw-discovery-chain {
display: none !important;
}
.gw-diff-section .gw-discovery-chain + p {
display: none !important;
}
/* Discovery chain parent margin */
.gw-diff-section [style*="margin-top: 3rem"] {
display: none !important;
}
/* Side-by-side comparison → stack on mobile */
.gw-diff-section [style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
/* ── Value props: reduce section padding ── */
.mvp-value-props {
padding: 2.5rem 0 !important;
}
/* ── Stats: reduce section padding ── */
.mvp-stats {
padding: 1.5rem 0 !important;
}
/* ── How it works: reduce padding ── */
.mvp-how {
padding: 2.5rem 1rem !important;
}
.mvp-step-arrow {
display: none !important;
}
/* ── Demo report: collapse behind toggle on mobile ── */
.mvp-demo-cta {
padding: 2rem 0 !important;
}
#demo-preview {
max-height: 400px !important;
overflow: hidden;
position: relative;
}
#demo-preview::after {
content: 'Scroll to see more ↓';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(transparent, rgba(10,14,23,0.95));
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 12px;
color: #64748b;
font-size: 0.75rem;
pointer-events: none;
}
/* ── Pricing: stack cards ── */
.pricing-grid,
.gw-clean-pricing {
grid-template-columns: 1fr !important;
gap: 1rem !important;
max-width: 400px !important;
margin: 0 auto !important;
}
#pricing {
padding: 2.5rem 1rem !important;
}
/* ── FAQ: tighter spacing ── */
.mvp-faq {
padding: 2.5rem 0 !important;
}
.mvp-faq [style*="gap: 0.75rem"] {
gap: 0.5rem !important;
}
/* Smaller FAQ icon badges */
.mvp-faq details summary span[style*="width: 36px"] {
width: 28px !important;
height: 28px !important;
border-radius: 8px !important;
}
.mvp-faq details summary {
padding: 1rem 1.25rem !important;
gap: 0.75rem !important;
font-size: 0.9rem;
}
.mvp-faq details div[style*="calc(1.5rem + 36px"] {
padding-left: 1.25rem !important;
padding-right: 1.25rem !important;
}
/* ── Final CTA: reduce padding ── */
.final-cta-banner {
padding: 3rem 1.5rem !important;
}
.final-cta-title {
font-size: 1.5rem !important;
}
.final-cta-particles {
display: none !important;
}
}