/* ============================================================ OMNIVISER — Dark Enterprise Design System Figma-faithful: dark bg, Poppins, purple accents, glassmorphism ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Brand purples */ --purple: #9810fa; --purple-light: #c27aff; --purple-deep: #4f39f6; --purple-glow: rgba(152,16,250,0.15); --blue-glow: rgba(79,57,246,0.15); --purple-text: #dab2ff; --purple-badge-from: rgba(173,70,255,0.15); --purple-badge-to: rgba(97,95,255,0.15); --purple-badge-border: rgba(194,122,255,0.3); /* Surfaces */ --bg: #0a0612; --bg-section: #0d091a; --card-bg: rgba(255,255,255,0.05); --card-border: rgba(255,255,255,0.15); --card-glow: inset 0px 1px 0px rgba(255,255,255,0.1); --card-shadow: 0px 8px 32px rgba(0,0,0,0.3); /* Text */ --white: #ffffff; --text-primary: rgba(255,255,255,0.9); --text-body: rgba(255,255,255,0.7); --text-muted: rgba(255,255,255,0.6); --text-subtle: rgba(255,255,255,0.5); --text-dim: rgba(255,255,255,0.4); /* Layout */ --max-w: 1314px; --content-w: 1250px; --pad: 32px; --nav-h: 72px; --section-gap: 112px; /* Radius */ --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-full: 9999px; /* Font */ --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Motion */ --t: 0.22s ease; } /* ============================================================ LIGHT THEME Activated via data-theme="light" on Clean white bg, deep purple accents, warm greys for text ============================================================ */ [data-theme="light"] { /* Brand purples — slightly deeper for contrast on white */ --purple: #7c3aed; --purple-light: #a855f7; --purple-deep: #4f39f6; --purple-glow: rgba(124,58,237,0.08); --blue-glow: rgba(79,57,246,0.06); --purple-text: #6d28d9; --purple-badge-from: rgba(124,58,237,0.08); --purple-badge-to: rgba(79,57,246,0.06); --purple-badge-border: rgba(124,58,237,0.2); /* Surfaces — clean whites and warm greys */ --bg: #ffffff; --bg-section: #f8f7fa; --card-bg: #ffffff; --card-border: rgba(0,0,0,0.08); --card-glow: inset 0px 1px 0px rgba(255,255,255,0.8); --card-shadow: 0px 4px 24px rgba(124,58,237,0.06), 0px 1px 4px rgba(0,0,0,0.04); /* Text — deep greys, not pure black */ --white: #1a1135; --text-primary: #1a1135; --text-body: #4a4560; --text-muted: #6b6280; --text-subtle: #9b92b0; --text-dim: #c4bdd8; } /* Light theme — surface overrides */ [data-theme="light"] body { background: var(--bg); color: var(--text-body); } /* Nav */ [data-theme="light"] .nav--scrolled { background: rgba(255,255,255,0.92); box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 16px rgba(124,58,237,0.04); } [data-theme="light"] .nav__logo-svg path, [data-theme="light"] .nav__logo-svg polygon { fill: #1a1135 !important; } [data-theme="light"] .nav__links a { color: var(--text-muted); } [data-theme="light"] .nav__links a:hover { color: var(--text-primary); background: rgba(0,0,0,0.03); } [data-theme="light"] .nav__burger span { background: #1a1135; } /* Mobile menu */ [data-theme="light"] .nav__mobile { background: rgba(255,255,255,0.98); border-bottom-color: rgba(0,0,0,0.06); } [data-theme="light"] .nav__mobile a { color: var(--text-muted); } [data-theme="light"] .nav__mobile a:hover { background: rgba(0,0,0,0.03); color: var(--text-primary); } /* Dropdown */ [data-theme="light"] .nav__dropdown-menu { background: rgba(255,255,255,0.98); border-color: rgba(0,0,0,0.08); box-shadow: 0 8px 32px rgba(0,0,0,0.08); } [data-theme="light"] .nav__dropdown-menu a { color: var(--text-muted); } [data-theme="light"] .nav__dropdown-menu a:hover { background: rgba(124,58,237,0.04); color: var(--purple); } /* Glass cards — white cards with subtle shadow */ [data-theme="light"] .glass-card { background: #ffffff; border-color: rgba(0,0,0,0.06); box-shadow: var(--card-shadow); } [data-theme="light"] .glass-card::after { box-shadow: none; } [data-theme="light"] .glass-card::before { background: radial-gradient(circle, rgba(124,58,237,0.06) 0%, transparent 70%); } [data-theme="light"] .glass-card:hover { border-color: rgba(124,58,237,0.2); box-shadow: 0px 8px 36px rgba(124,58,237,0.1), 0px 2px 8px rgba(0,0,0,0.04); } /* Gradient headings — use deeper purple on light bg */ [data-theme="light"] .gradient-heading { background: linear-gradient(90deg, #1a1135 0%, #4a2080 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="light"] .gradient-heading-purple { background: linear-gradient(90deg, #7c3aed 0%, #a855f7 50%, #4f39f6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Headings */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4 { color: #1a1135; } /* Buttons */ [data-theme="light"] .btn--primary { background: linear-gradient(90deg, #7c3aed, #a855f7 50%, #4f39f6); box-shadow: 0 4px 20px rgba(124,58,237,0.25); } [data-theme="light"] .btn--ghost { background: transparent; color: var(--text-muted); border-color: rgba(0,0,0,0.12); } [data-theme="light"] .btn--ghost:hover { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.2); color: var(--text-primary); } [data-theme="light"] .btn--outline-purple { background: transparent; color: var(--purple); border-color: rgba(124,58,237,0.2); } [data-theme="light"] .btn--outline-purple:hover { background: rgba(124,58,237,0.04); border-color: rgba(124,58,237,0.35); } /* Badge pill */ [data-theme="light"] .badge-pill { background: linear-gradient(90deg, rgba(124,58,237,0.06), rgba(79,57,246,0.04)); border-color: rgba(124,58,237,0.15); color: var(--purple); } /* Hero */ [data-theme="light"] .hero { background: linear-gradient(180deg, #f3eeff 0%, #ffffff 60%); } [data-theme="light"] .hero__gradient { background: linear-gradient(180deg, rgba(124,58,237,0.06) 0%, transparent 50%); } [data-theme="light"] .glow { opacity: 0.4; } [data-theme="light"] .hero__subtitle { color: #4a4560; } [data-theme="light"] .hero__desc { color: #6b6280; } [data-theme="light"] .hero__link { color: var(--purple); } [data-theme="light"] .hero__link:hover { color: #4f39f6; } /* Hero orb — softer on light */ [data-theme="light"] .hero__orb-core { background: radial-gradient(circle at 40% 40%, rgba(124,58,237,0.2), rgba(168,85,247,0.12) 50%, rgba(79,57,246,0.08) 100%); box-shadow: 0 0 60px rgba(124,58,237,0.15), 0 0 120px rgba(79,57,246,0.08); } [data-theme="light"] .hero__orb-ring { border-color: rgba(124,58,237,0.1); } [data-theme="light"] .hero__orb-ring--1 { border-color: rgba(124,58,237,0.12); } [data-theme="light"] .hero__orb-ring--2 { border-color: rgba(124,58,237,0.06); } [data-theme="light"] .hero__orb-ring--3 { border-color: rgba(124,58,237,0.04); } [data-theme="light"] .hero__orb-label { background: rgba(124,58,237,0.04); border-color: rgba(124,58,237,0.1); color: var(--text-muted); } /* Sections */ [data-theme="light"] .section--light { background: linear-gradient(180deg, #f8f7fa 0%, #f3f1f8 50%, #f8f7fa 100%); } /* Page header */ [data-theme="light"] .page-header { background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(124,58,237,0.05) 0%, transparent 70%), linear-gradient(180deg, #f3eeff 0%, #ffffff 100%); } [data-theme="light"] .page-header::before { background: radial-gradient(circle, rgba(124,58,237,0.03) 0%, transparent 70%); } /* Comparison table */ [data-theme="light"] .compare__table th { color: #9b92b0; } [data-theme="light"] .compare__table td { border-bottom-color: rgba(0,0,0,0.04); } [data-theme="light"] .compare__table td:first-child { color: #4a4560; } [data-theme="light"] .compare__col--ours { background: rgba(124,58,237,0.04); color: var(--purple) !important; } [data-theme="light"] .compare__row--highlight td { background: rgba(124,58,237,0.03); border-bottom-color: rgba(124,58,237,0.12); } [data-theme="light"] .check { color: #16a34a; } [data-theme="light"] .cross { color: #dc2626; } /* Results metrics */ [data-theme="light"] .result__metric--green { background-image: linear-gradient(165deg, #16a34a, #059669); } [data-theme="light"] .result__metric--purple { background-image: linear-gradient(159deg, #7c3aed, #4f39f6); } [data-theme="light"] .result__metric--blue { background-image: linear-gradient(159deg, #2563eb, #0891b2); } [data-theme="light"] .result__metric--violet { background-image: linear-gradient(161deg, #7c3aed, #a855f7); } [data-theme="light"] .result__label { color: #1a1135; } /* Security checklist */ [data-theme="light"] .security__card h3 { color: #1a1135; } /* Compliance badges */ [data-theme="light"] .compliance__badge { background: rgba(124,58,237,0.04); border-color: rgba(124,58,237,0.12); color: var(--purple); } /* Feature strip */ [data-theme="light"] .feature-strip { border-top-color: rgba(0,0,0,0.06); border-bottom-color: rgba(0,0,0,0.06); } /* How it works layers */ [data-theme="light"] .how__layer-num { color: var(--purple); } [data-theme="light"] .how__tags span { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.12); color: var(--purple); } [data-theme="light"] .how__mode { background: rgba(124,58,237,0.04); border-color: rgba(124,58,237,0.1); color: var(--purple); } /* CTA banner */ [data-theme="light"] .cta-banner { background: radial-gradient(ellipse 50% 80% at 50% 50%, rgba(124,58,237,0.03) 0%, transparent 70%); } /* Footer */ [data-theme="light"] .footer { background: #1a1135; border-top-color: rgba(0,0,0,0.06); } /* Persona question */ [data-theme="light"] .persona__question em { color: var(--purple); } /* Icon boxes — keep colored but softer */ [data-theme="light"] .icon-box { border-color: rgba(0,0,0,0.06); } /* ============================================================ THEME TOGGLE ============================================================ */ .theme-toggle { position: relative; width: 48px; height: 26px; border-radius: 13px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); cursor: pointer; transition: background 0.3s, border-color 0.3s; flex-shrink: 0; } .theme-toggle__track { position: absolute; inset: 2px; border-radius: 11px; } .theme-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s; display: flex; align-items: center; justify-content: center; } .theme-toggle__thumb svg { width: 12px; height: 12px; } /* Dark mode state */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } /* Light mode state */ [data-theme="light"] .theme-toggle { background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.15); } [data-theme="light"] .theme-toggle__thumb { transform: translateX(22px); background: #7c3aed; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* Base */ html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font); background: var(--bg); color: var(--text-body); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } ul { list-style: none; } /* Typography */ h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; color: var(--white); } h1 { font-size: clamp(2.8rem, 5.5vw, 5.125rem); font-weight: 700; } h2 { font-size: clamp(2rem, 4vw, 3.75rem); } h3 { font-size: 1.5rem; font-weight: 700; } p { color: var(--text-body); line-height: 1.62; font-size: 1rem; } .gradient-heading { background: linear-gradient(90deg, #fff 0%, #f3e8ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gradient-heading-purple { background: linear-gradient(90deg, #c27aff 0%, #dab2ff 50%, #7c86ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Layout */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); } .container--narrow { max-width: 1000px; } .section { padding: var(--section-gap) 0; position: relative; } /* Lighter sections for pacing — breathing room on info-heavy pages */ .section--light { background: linear-gradient(180deg, #0d091a 0%, #0f0b1e 50%, #0d091a 100%); } .section--lighter { background: linear-gradient(180deg, #0f0b1e 0%, #13102a 50%, #0f0b1e 100%); } .section__header { text-align: center; margin-bottom: 80px; } .section__header h2 { margin-bottom: 16px; } .section__header p { font-size: 1.25rem; color: var(--text-muted); } /* Animations */ .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); } .fade-up.visible { opacity: 1; transform: translateY(0); } .stagger > *:nth-child(1) { transition-delay: 0.04s; } .stagger > *:nth-child(2) { transition-delay: 0.1s; } .stagger > *:nth-child(3) { transition-delay: 0.16s; } .stagger > *:nth-child(4) { transition-delay: 0.22s; } .stagger > *:nth-child(5) { transition-delay: 0.28s; } /* Glow blobs */ .glow { position: absolute; border-radius: 50%; filter: blur(150px); pointer-events: none; z-index: 0; } .glow--purple { background: var(--purple-glow); } .glow--blue { background: var(--blue-glow); } /* Glass card */ .glass-card { background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%); border: 1px solid var(--card-border); border-radius: var(--r-lg); box-shadow: var(--card-shadow); padding: 40px; position: relative; transition: border-color var(--t), transform var(--t); } .glass-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--card-glow); pointer-events: none; } .glass-card:hover { border-color: rgba(255,255,255,0.25); transform: translateY(-2px); } /* Mouse-follow glow on glass cards */ .glass-card::before { content: ''; position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(194,122,255,0.12) 0%, transparent 70%); opacity: 0; transition: opacity 0.35s ease; top: var(--mouse-y, 50%); left: var(--mouse-x, 50%); transform: translate(-50%, -50%); pointer-events: none; z-index: 0; border-radius: 50%; } .glass-card:hover::before { opacity: 1; } /* Purple badge pill */ .badge-pill { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(90deg, var(--purple-badge-from), var(--purple-badge-to)); border: 1px solid var(--purple-badge-border); border-radius: var(--r-full); padding: 10px 16px; font-size: 0.8125rem; font-weight: 600; color: var(--purple-text); letter-spacing: 0.02em; } /* Icon box */ .icon-box { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; } .icon-box--lg { width: 80px; height: 80px; border-radius: var(--r-lg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); } .icon-box img { width: 32px; height: 32px; } .icon-box--lg img { width: 40px; height: 40px; } .icon-box--green { background: linear-gradient(135deg, rgba(0,166,62,0.2), rgba(0,153,102,0.1)); } .icon-box--orange { background: linear-gradient(135deg, rgba(255,105,0,0.1), rgba(254,154,0,0.1)); } .icon-box--red { background: linear-gradient(135deg, rgba(251,44,54,0.1), rgba(255,105,0,0.1)); } .icon-box--yellow { background: linear-gradient(135deg, rgba(254,154,0,0.1), rgba(240,177,0,0.1)); } .icon-box--purple { background: linear-gradient(135deg, rgba(152,16,250,0.2), rgba(79,57,246,0.1)); } .icon-box--blue { background: linear-gradient(135deg, rgba(21,93,252,0.2), rgba(0,146,184,0.1)); } .icon-box--violet { background: linear-gradient(135deg, rgba(79,57,246,0.2), rgba(127,34,254,0.1)); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-weight: 600; font-size: 0.9375rem; border-radius: var(--r-full); border: none; cursor: pointer; transition: all var(--t); white-space: nowrap; text-decoration: none; padding: 18px 40px; } .btn--primary { background: linear-gradient(90deg, #9810fa, #ad46ff 50%, #4f39f6); color: var(--white); box-shadow: 0 4px 24px rgba(152,16,250,0.4); } .btn--primary:hover { box-shadow: 0 6px 32px rgba(152,16,250,0.55); transform: translateY(-1px); } .btn--ghost { background: rgba(255,255,255,0.06); color: var(--white); border: 1px solid rgba(255,255,255,0.2); } .btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.35); } .btn--outline-purple { background: rgba(255,255,255,0.06); color: var(--white); border: 1px solid var(--purple-badge-border); } .btn--outline-purple:hover { background: rgba(255,255,255,0.1); } .btn--sm { padding: 10px 20px; font-size: 0.8125rem; } .btn--lg { padding: 20px 48px; font-size: 1rem; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--nav-h); transition: background var(--t), box-shadow var(--t); } .nav--scrolled { background: rgba(10,6,18,0.92); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 1px 0 rgba(255,255,255,0.06); } .nav__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); height: 100%; display: flex; align-items: center; gap: 40px; } .nav__logo { display: flex; align-items: center; flex-shrink: 0; height: 24px; } .nav__logo svg { height: 100%; width: auto; } .nav__logo-svg path, .nav__logo-svg polygon { fill: var(--white); transition: fill var(--t); } .nav__links { display: flex; align-items: center; gap: 4px; flex: 1; } .nav__links a { font-size: 0.875rem; font-weight: 500; color: var(--text-subtle); padding: 8px 14px; border-radius: var(--r-sm); transition: color var(--t), background var(--t); } .nav__links a:hover { color: var(--white); background: rgba(255,255,255,0.06); } .nav__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; margin-left: auto; } .nav__burger span { display: block; width: 22px; height: 1.5px; background: var(--white); border-radius: 2px; transition: all var(--t); } .nav__burger--open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav__burger--open span:nth-child(2) { opacity: 0; } .nav__burger--open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .nav__mobile { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; background: rgba(10,6,18,0.97); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.08); padding: 16px var(--pad) 28px; } .nav__mobile--open { display: block; } .nav__mobile ul { display: flex; flex-direction: column; gap: 4px; } .nav__mobile a { display: block; padding: 12px 14px; font-size: 0.9375rem; font-weight: 500; color: var(--text-subtle); border-radius: var(--r-sm); } .nav__mobile a:hover { background: rgba(255,255,255,0.06); color: var(--white); } .nav__mobile .btn { margin-top: 10px; width: 100%; } /* Dropdown */ .nav__dropdown { position: relative; } .nav__dropdown-trigger { display: flex; align-items: center; gap: 4px; } .nav__dropdown-trigger svg { transition: transform var(--t); } .nav__dropdown:hover .nav__dropdown-trigger svg { transform: rotate(180deg); } .nav__dropdown-menu { display: none; position: absolute; top: 100%; left: -8px; min-width: 220px; background: rgba(10,6,18,0.97); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-sm); padding: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.4); z-index: 300; } .nav__dropdown:hover .nav__dropdown-menu { display: block; } .nav__dropdown-menu a { display: block; padding: 10px 14px; font-size: 0.875rem; font-weight: 500; color: var(--text-subtle); border-radius: var(--r-sm); transition: color var(--t), background var(--t); } .nav__dropdown-menu a:hover { background: rgba(255,255,255,0.06); color: var(--white); } .nav__link--active { color: var(--white) !important; } /* Page header (used on all inner pages) — gradient bg replaces image backgrounds */ .page-header { padding: calc(var(--nav-h) + 80px) var(--pad) 64px; text-align: center; position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(152,16,250,0.1) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 30% 20%, rgba(79,57,246,0.08) 0%, transparent 60%), var(--bg); } .page-header::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; background: radial-gradient(circle, rgba(194,122,255,0.06) 0%, transparent 70%); pointer-events: none; } .page-header__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; } .page-header h1 { margin-bottom: 20px; } .page-header p { font-size: 1.25rem; color: var(--text-muted); max-width: 640px; margin: 0 auto; } /* Content sections for inner pages */ .content-section { padding: 80px var(--pad); position: relative; } .content-section + .content-section { border-top: 1px solid rgba(255,255,255,0.04); } .content-section h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 20px; } .content-section h3 { font-size: 1.25rem; margin-bottom: 12px; } .content-section p { margin-bottom: 16px; } .content-section ul { padding-left: 24px; margin-bottom: 20px; } .content-section li { color: var(--text-body); margin-bottom: 8px; font-size: 0.9375rem; list-style: disc; } .content-section li::marker { color: var(--purple-light); } /* Two-column layout for inner pages */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } } /* CTA banner (reused on many pages) */ .cta-banner { text-align: center; padding: 80px var(--pad); position: relative; background: radial-gradient(ellipse 50% 80% at 50% 50%, rgba(152,16,250,0.06) 0%, transparent 70%); } .cta-banner h2 { margin-bottom: 16px; } .cta-banner p { color: var(--text-muted); font-size: 1.125rem; margin-bottom: 32px; } .cta-banner .btn { margin: 0 8px; } /* ============================================================ HERO ============================================================ */ .hero { padding: calc(var(--nav-h) + 80px) var(--pad) 80px; position: relative; overflow: hidden; min-height: 100vh; } .hero__glow-1 { width: 800px; height: 800px; top: 200px; left: 25%; } .hero__glow-2 { width: 600px; height: 600px; top: 300px; left: 30%; } .hero__gradient { position: absolute; top: 0; left: 0; right: 0; height: 100%; background: linear-gradient(180deg, rgba(89,22,139,0.1) 0%, transparent 50%, rgba(60,3,102,0.2) 100%); pointer-events: none; } .hero__inner { position: relative; z-index: 1; max-width: var(--content-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .hero__content { max-width: 585px; } .hero__pill { margin-bottom: 32px; } .hero__pill .badge-pill { box-shadow: 0 0 30px rgba(124,58,237,0.2); } .hero h1 { margin-bottom: 16px; line-height: 1.1; } .hero__subtitle { font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 400; color: var(--text-primary); max-width: 560px; margin-bottom: 20px; line-height: 1.6; } .hero__link { color: var(--purple-text); font-size: 0.9375rem; font-weight: 600; text-decoration: none; transition: color var(--t); padding: 12px 0; } .hero__link:hover { color: var(--white); } .hero__desc { font-size: 1.0625rem; color: var(--text-body); line-height: 1.62; margin-bottom: 12px; } .hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; margin: 40px 0 44px; } .hero__trust { display: flex; align-items: center; gap: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.875rem; color: var(--text-subtle); } .hero__trust-tags { display: flex; gap: 24px; opacity: 0.4; } .hero__trust-tags span { font-weight: 500; color: var(--text-body); font-size: 0.875rem; } /* ============================================================ HERO VISUALIZATION — Data Flow Constellation Sources orbit → connect → flow to core → outputs emerge ============================================================ */ .hero__visual { position: relative; display: flex; align-items: center; justify-content: center; } .hero-viz { position: relative; width: 460px; height: 460px; } /* Orbit rings */ .viz-ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px dashed rgba(194,122,255,0.1); } .viz-ring--1 { width: 200px; height: 200px; margin: -100px 0 0 -100px; border-style: solid; border-color: rgba(194,122,255,0.12); } .viz-ring--2 { width: 320px; height: 320px; margin: -160px 0 0 -160px; } .viz-ring--3 { width: 440px; height: 440px; margin: -220px 0 0 -220px; border-color: rgba(194,122,255,0.06); } /* Central core — OMNIVISER icon with multi-ring pulse + shockwave */ /* Dark mode: white core so white icon has maximum contrast */ .viz-core { position: absolute; top: 50%; left: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: linear-gradient(135deg, #391157 0%, #4a1870 40%, #391157 100%); border: 2px solid rgba(194,122,255,0.4); z-index: 10; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(152,16,250,0.6), 0 0 60px rgba(124,58,237,0.4), 0 0 120px rgba(79,57,246,0.2); animation: coreBreath 4s ease-in-out infinite; } @keyframes coreBreath { 0%,100% { box-shadow: 0 0 30px rgba(152,16,250,0.6), 0 0 60px rgba(124,58,237,0.4), 0 0 120px rgba(79,57,246,0.2); } 50% { box-shadow: 0 0 40px rgba(152,16,250,0.8), 0 0 80px rgba(124,58,237,0.5), 0 0 160px rgba(79,57,246,0.3); } } .viz-core__inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; } /* Dark mode: white icon on purple core */ .viz-core__icon { display: block; filter: drop-shadow(0 0 6px rgba(255,255,255,0.4)); } .viz-core__icon--light { display: none; } /* Light mode: purple (#391157) icon on lighter core */ [data-theme="light"] .viz-core__icon--dark { display: none; } [data-theme="light"] .viz-core__icon--light { display: block; filter: drop-shadow(0 0 6px rgba(57,17,87,0.4)); } /* Ambient glow behind core */ .viz-core__glow { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(152,16,250,0.2) 0%, rgba(79,57,246,0.1) 40%, transparent 70%); z-index: -1; animation: glowRotate 10s linear infinite; } @keyframes glowRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Triple expanding pulse rings */ .viz-core__pulse { position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid rgba(194,122,255,0.4); animation: corePulse 3s ease-out infinite; } .viz-core__pulse--2 { animation-delay: 1s; border-color: rgba(124,134,255,0.3); } .viz-core__pulse--3 { animation-delay: 2s; border-color: rgba(81,162,255,0.2); } @keyframes corePulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3); opacity: 0; } } /* Shockwave — slower, larger, dramatic */ .viz-core__shockwave { position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(194,122,255,0.15); animation: shockwave 6s ease-out infinite; } @keyframes shockwave { 0% { transform: scale(1); opacity: 0.4; border-width: 2px; } 100% { transform: scale(5); opacity: 0; border-width: 0.5px; } } /* Data source nodes */ .viz-node { position: absolute; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.03em; color: var(--white); border: 1px solid rgba(255,255,255,0.15); z-index: 5; transition: transform 0.3s, box-shadow 0.3s; cursor: default; } .viz-node span { position: relative; z-index: 2; } .viz-node::before { content: attr(data-label); position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; font-weight: 500; color: var(--text-dim); white-space: nowrap; opacity: 0; transition: opacity 0.2s; } .viz-node:hover::before { opacity: 1; } .viz-node:hover { transform: scale(1.25); z-index: 20; box-shadow: 0 0 24px currentColor, 0 0 48px rgba(152,16,250,0.2); } /* Node colors */ .viz-node--s1 { background: linear-gradient(135deg, rgba(0,136,209,0.3), rgba(0,136,209,0.1)); top: 8%; left: 28%; box-shadow: 0 0 16px rgba(0,136,209,0.2); } .viz-node--s2 { background: linear-gradient(135deg, rgba(255,0,0,0.2), rgba(200,0,0,0.08)); top: 5%; right: 22%; box-shadow: 0 0 16px rgba(255,0,0,0.15); } .viz-node--s3 { background: linear-gradient(135deg, rgba(0,120,212,0.3), rgba(0,120,212,0.1)); right: 2%; top: 30%; box-shadow: 0 0 16px rgba(0,120,212,0.2); } .viz-node--s4 { background: linear-gradient(135deg, rgba(0,164,239,0.3), rgba(0,164,239,0.1)); right: 0%; bottom: 30%; box-shadow: 0 0 16px rgba(0,164,239,0.2); } .viz-node--s5 { background: linear-gradient(135deg, rgba(0,102,153,0.3), rgba(0,102,153,0.1)); bottom: 5%; right: 25%; box-shadow: 0 0 16px rgba(0,102,153,0.2); } .viz-node--s6 { background: linear-gradient(135deg, rgba(0,114,198,0.3), rgba(0,114,198,0.1)); bottom: 8%; left: 22%; box-shadow: 0 0 16px rgba(0,114,198,0.2); } .viz-node--s7 { background: linear-gradient(135deg, rgba(44,160,28,0.3), rgba(44,160,28,0.1)); left: 0%; bottom: 35%; box-shadow: 0 0 16px rgba(44,160,28,0.2); } .viz-node--s8 { background: linear-gradient(135deg, rgba(152,16,250,0.3), rgba(152,16,250,0.1)); left: 2%; top: 25%; box-shadow: 0 0 16px rgba(152,16,250,0.2); } /* Orbiting animation — each node slowly drifts */ .viz-node--s1 { animation: nodeFloat1 8s ease-in-out infinite; } .viz-node--s2 { animation: nodeFloat2 9s ease-in-out infinite; } .viz-node--s3 { animation: nodeFloat3 7s ease-in-out infinite; } .viz-node--s4 { animation: nodeFloat4 10s ease-in-out infinite; } .viz-node--s5 { animation: nodeFloat5 8.5s ease-in-out infinite; } .viz-node--s6 { animation: nodeFloat6 9.5s ease-in-out infinite; } .viz-node--s7 { animation: nodeFloat7 7.5s ease-in-out infinite; } .viz-node--s8 { animation: nodeFloat8 11s ease-in-out infinite; } @keyframes nodeFloat1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(8px,-12px); } } @keyframes nodeFloat2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-10px,8px); } } @keyframes nodeFloat3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-8px,-10px); } } @keyframes nodeFloat4 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(6px,12px); } } @keyframes nodeFloat5 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(10px,6px); } } @keyframes nodeFloat6 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-6px,10px); } } @keyframes nodeFloat7 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(12px,-8px); } } @keyframes nodeFloat8 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-10px,-6px); } } /* Output badges */ .viz-output { position: absolute; z-index: 15; display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-full); font-size: 0.75rem; font-weight: 600; color: var(--white); white-space: nowrap; box-shadow: 0 4px 20px rgba(0,0,0,0.2); animation: outputFadeIn 0.6s ease-out both; } .viz-output--1 { top: 38%; right: -30px; animation-delay: 0.5s; } .viz-output--2 { bottom: 12%; right: 10%; animation-delay: 0.8s; } .viz-output--3 { bottom: 20%; left: -20px; animation-delay: 1.1s; } @keyframes outputFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .viz-output__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; animation: dotPulse 2s ease-in-out infinite; } .viz-output__dot--green { background: #05df72; box-shadow: 0 0 10px rgba(5,223,114,0.6); } .viz-output__dot--blue { background: #51a2ff; box-shadow: 0 0 10px rgba(81,162,255,0.6); } .viz-output__dot--purple { background: #c27aff; box-shadow: 0 0 10px rgba(194,122,255,0.6); } @keyframes dotPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } } /* Data flow particles — small dots that travel from nodes to core */ .viz-particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #c27aff; box-shadow: 0 0 8px rgba(194,122,255,0.8); z-index: 8; opacity: 0; } .viz-particle--1 { animation: particleFlow1 3s linear infinite; } .viz-particle--2 { animation: particleFlow2 3.5s linear infinite 0.5s; } .viz-particle--3 { animation: particleFlow3 4s linear infinite 1s; } .viz-particle--4 { animation: particleFlow4 3.2s linear infinite 1.5s; } .viz-particle--5 { animation: particleFlow5 3.8s linear infinite 2s; } .viz-particle--6 { animation: particleFlow6 4.2s linear infinite 0.3s; } .viz-particle--7 { animation: particleFlow1 2.8s linear infinite 0.8s; width: 3px; height: 3px; } .viz-particle--8 { animation: particleFlow3 3.6s linear infinite 1.8s; width: 5px; height: 5px; box-shadow: 0 0 12px rgba(81,162,255,0.8); background: #51a2ff; } @keyframes particleFlow1 { 0% { top: 10%; left: 30%; opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { top: 48%; left: 48%; opacity: 0; } } @keyframes particleFlow2 { 0% { top: 8%; right: 24%; left: auto; opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { top: 48%; right: auto; left: 48%; opacity: 0; } } @keyframes particleFlow3 { 0% { top: 32%; right: 4%; left: auto; opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { top: 48%; right: auto; left: 49%; opacity: 0; } } @keyframes particleFlow4 { 0% { bottom: 8%; left: 24%; top: auto; opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { bottom: auto; top: 49%; left: 49%; opacity: 0; } } @keyframes particleFlow5 { 0% { bottom: 35%; left: 2%; top: auto; opacity: 0; } 10% { opacity: 0.6; } 90% { opacity: 0.6; } 100% { bottom: auto; top: 49%; left: 49%; opacity: 0; } } @keyframes particleFlow6 { 0% { bottom: 30%; right: 2%; left: auto; top: auto; opacity: 0; } 10% { opacity: 0.7; } 90% { opacity: 0.7; } 100% { bottom: auto; right: auto; top: 49%; left: 49%; opacity: 0; } } /* SVG connection lines */ .viz-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } /* Light theme adjustments */ [data-theme="light"] .viz-core { background: #ffffff; border-color: rgba(124,58,237,0.25); box-shadow: 0 0 30px rgba(124,58,237,0.2), 0 0 60px rgba(79,57,246,0.1), 0 0 100px rgba(124,58,237,0.06); } [data-theme="light"] .viz-core__pulse { border-color: rgba(124,58,237,0.15); } [data-theme="light"] .viz-core__shockwave { border-color: rgba(124,58,237,0.08); } [data-theme="light"] .viz-core__glow { background: radial-gradient(circle, rgba(124,58,237,0.1) 0%, rgba(79,57,246,0.05) 40%, transparent 70%); } [data-theme="light"] .viz-ring { border-color: rgba(124,58,237,0.08); } [data-theme="light"] .viz-ring--1 { border-color: rgba(124,58,237,0.1); border-style: solid; } [data-theme="light"] .viz-node { border-color: rgba(0,0,0,0.08); } [data-theme="light"] .viz-node::before { color: var(--text-muted); } [data-theme="light"] .viz-output { background: rgba(255,255,255,0.9); border-color: rgba(0,0,0,0.08); color: #1a1135; box-shadow: 0 4px 20px rgba(0,0,0,0.06); } [data-theme="light"] .viz-particle { background: #7c3aed; box-shadow: 0 0 8px rgba(124,58,237,0.6); } [data-theme="light"] .viz-lines line { stroke: rgba(124,58,237,0.15); } /* ============================================================ PROBLEM SECTION ============================================================ */ .problem__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .problem__card .glass-card { padding: 33px; height: 100%; } .problem__card h3 { font-size: 1.5rem; margin: 24px 0 16px; letter-spacing: -0.025em; } .problem__card p { font-size: 0.9375rem; line-height: 1.62; color: var(--text-body); } /* 3-column problem grid variant */ .problem__grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .problem__grid--3 { grid-template-columns: 1fr; } } /* Feature strip */ .feature-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 40px; margin-top: 56px; padding: 24px 0; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); } .feature-strip__item { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 500; color: var(--text-body); } /* Comparison highlight row */ .compare__row--highlight td { background: rgba(152,16,250,0.06); border-bottom: 2px solid rgba(194,122,255,0.2); padding-top: 18px; padding-bottom: 18px; } /* Persona question */ .persona__question { margin-top: 12px; font-size: 0.875rem; color: var(--text-muted); } .persona__question em { color: var(--purple-text); } .persona__card .glass-card { display: flex; flex-direction: column; height: 100%; } /* ============================================================ HOW IT WORKS ============================================================ */ .how__visual { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .how__diagram { position: relative; } .how__diagram .glass-card { text-align: center; padding: 48px 32px; } .how__layers { display: flex; flex-direction: column; gap: 24px; } .how__layer { display: flex; gap: 20px; align-items: flex-start; } .how__layer-num { font-size: 0.75rem; font-weight: 800; color: var(--purple-light); letter-spacing: 0.06em; padding-top: 4px; flex-shrink: 0; width: 28px; } .how__layer h3 { font-size: 1.125rem; margin-bottom: 8px; } .how__layer p { font-size: 0.9375rem; color: var(--text-body); } .how__layer .badge-pill { margin-top: 12px; font-size: 0.75rem; padding: 6px 12px; } .how__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .how__tags span { background: rgba(152,16,250,0.12); border: 1px solid rgba(194,122,255,0.2); color: var(--purple-text); border-radius: 4px; padding: 4px 10px; font-size: 0.75rem; font-weight: 600; } .how__modes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .how__mode { display: inline-flex; align-items: center; gap: 6px; background: rgba(152,16,250,0.1); border: 1px solid rgba(194,122,255,0.2); color: var(--purple-text); border-radius: var(--r-sm); padding: 8px 14px; font-size: 0.875rem; font-weight: 500; } /* ============================================================ WHY DIFFERENT ============================================================ */ .why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .why__card { display: flex; gap: 32px; align-items: flex-start; } .why__card h3 { font-size: 1.5rem; margin-bottom: 12px; letter-spacing: -0.025em; } /* ============================================================ COMPARISON TABLE ============================================================ */ .compare { margin-top: var(--section-gap); } .compare__table-wrap { overflow-x: auto; } .compare__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; } .compare__table th, .compare__table td { padding: 16px 24px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); } .compare__table th { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } .compare__table td:first-child { color: var(--text-muted); font-weight: 500; width: 200px; } .compare__table tr:last-child td { border-bottom: none; } .compare__col--ours { background: rgba(152,16,250,0.08); } .compare__col--ours { color: var(--purple-text) !important; } .check { color: #05df72; margin-right: 6px; font-weight: 700; } .cross { color: #fb2c36; margin-right: 6px; font-weight: 700; } /* ============================================================ PERSONAS ============================================================ */ .personas__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .persona__card .glass-card { padding: 40px; height: 100%; display: flex; flex-direction: column; gap: 32px; } .persona__header { display: flex; flex-direction: column; gap: 16px; } .persona__title { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; } /* ============================================================ RESULTS ============================================================ */ .results { position: relative; } .results__glow-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, transparent, rgba(60,3,102,0.3) 50%, transparent); pointer-events: none; } .results__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .result__card .glass-card { text-align: center; padding: 40px; height: 100%; display: flex; flex-direction: column; align-items: center; } .result__metric { font-size: 3.75rem; font-weight: 900; letter-spacing: -0.025em; line-height: 1; margin: 24px 0 8px; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .result__metric--green { background-image: linear-gradient(165deg, #05df72, #00bc7d); } .result__metric--purple { background-image: linear-gradient(159deg, #c27aff, #615fff); } .result__metric--blue { background-image: linear-gradient(159deg, #51a2ff, #00b8db); } .result__metric--violet { background-image: linear-gradient(161deg, #a684ff, #ad46ff); } .result__label { font-size: 1.25rem; font-weight: 700; color: var(--white); margin-bottom: 8px; letter-spacing: -0.02em; } .result__desc { font-size: 0.875rem; color: var(--text-muted); } /* ============================================================ SECURITY ============================================================ */ .security__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 48px; } .security__card { display: flex; gap: 32px; align-items: flex-start; } .security__card h3 { font-size: 1.5rem; margin-bottom: 12px; } .compliance__badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 48px; } .compliance__badge { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); color: var(--text-body); border-radius: var(--r-sm); padding: 10px 20px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; } /* ============================================================ CTA SECTION ============================================================ */ .cta__header { text-align: center; margin-bottom: 64px; } .cta__header h2 { font-size: clamp(2.5rem, 4vw, 4rem); margin-bottom: 20px; } .cta__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 48px; } .cta__card .glass-card { padding: 32px; height: 100%; display: flex; flex-direction: column; gap: 16px; } .cta__card h3 { font-size: 1.25rem; } .cta__card p { font-size: 0.875rem; color: var(--text-muted); flex: 1; } .cta__note { text-align: center; font-size: 0.875rem; color: var(--text-dim); } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid rgba(255,255,255,0.06); padding: 64px 0 36px; } .footer__top { display: flex; gap: 80px; margin-bottom: 48px; } .footer__brand { flex-shrink: 0; } .footer__logo { display: flex; align-items: center; height: 20px; margin-bottom: 12px; } .footer__logo svg { height: 100%; width: auto; } .footer__logo .logo-svg path, .footer__logo .logo-svg polygon { fill: rgba(255,255,255,0.65); } .footer__brand > p { font-size: 0.84rem; color: var(--text-dim); } .footer__links { display: flex; gap: 48px; flex: 1; justify-content: flex-end; } .footer__col { display: flex; flex-direction: column; gap: 10px; min-width: 110px; } .footer__col strong { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.28); font-weight: 700; margin-bottom: 4px; } .footer__col a { font-size: 0.875rem; color: var(--text-dim); transition: color var(--t); } .footer__col a:hover { color: rgba(255,255,255,0.75); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.07); font-size: 0.78rem; color: rgba(255,255,255,0.22); flex-wrap: wrap; gap: 8px; } /* ============================================================ SECTION CTA (inline) ============================================================ */ .section__cta { display: flex; justify-content: center; margin-top: 48px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px) { .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero__content { max-width: 700px; margin: 0 auto; } .hero__ctas { justify-content: center; } .hero__trust { justify-content: center; } .hero__visual { display: none; } .hero__inner { text-align: center; } .hero__content { margin: 0 auto; } .hero__subtitle { margin-left: auto; margin-right: auto; } .hero__ctas { justify-content: center; } .problem__grid { grid-template-columns: repeat(2, 1fr); } .why__grid { grid-template-columns: 1fr; } .results__grid { grid-template-columns: repeat(2, 1fr); } .cta__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { :root { --section-gap: 80px; } .nav__links, .nav__actions { display: none; } .nav__burger { display: flex; } .personas__grid { grid-template-columns: 1fr; } .security__grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { :root { --section-gap: 56px; --pad: 20px; } .problem__grid, .results__grid, .cta__grid { grid-template-columns: 1fr; } .hero__ctas { flex-direction: column; } .hero__ctas .btn { width: 100%; justify-content: center; } .hero__trust { flex-direction: column; gap: 12px; } .section__header { margin-bottom: 48px; } .footer__top { flex-direction: column; gap: 32px; } .footer__links { justify-content: flex-start; flex-wrap: wrap; } .footer__bottom { flex-direction: column; text-align: center; } .compare__table th, .compare__table td { padding: 12px 14px; font-size: 0.8125rem; } .compare__table td:first-child { width: 120px; } }