@keyframes homeMeshBreathe { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.12) saturate(1.18); } } /* class on — no :has() (avoids edge cases); base always paints */ html.home-root { min-height: 100%; --particle-connection: rgba(80, 213, 255, 0.34); --particle-connection-purple: rgba(170, 100, 255, 0.28); background: var(--marketing-bg); } body.page-home:not(.accessibility-simple-background):not(.accessibility-high-contrast) { background: transparent !important; } body.page-home { --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --radius-card: 20px; --radius-lg: 20px; --home-safe-bottom: clamp(104px, 14vh, 148px); --mesh-vignette-alpha: 0.58; --mesh-vignette-shift: 12%; } body.page-home::before { opacity: var(--mesh-vignette-alpha); background: radial-gradient(circle at 18% var(--mesh-vignette-shift), rgba(7, 26, 44, 0.66), transparent 58%), radial-gradient(circle at 76% 12%, rgba(26, 12, 48, 0.58), transparent 52%), radial-gradient(circle at 84% 84%, rgba(34, 8, 52, 0.42), transparent 60%), linear-gradient(180deg, rgba(3, 9, 18, 0.52), rgba(2, 7, 16, 0.84)); transform-origin: 48% 38%; will-change: transform; animation: homeAmbientMesh 22s ease-in-out infinite alternate; } body.page-home::after { opacity: 0.54; background: repeating-linear-gradient(126deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 9px), repeating-linear-gradient(52deg, rgba(118, 206, 255, 0.028), rgba(118, 206, 255, 0.028) 1px, transparent 1px, transparent 13px), radial-gradient(circle at 82% 8%, rgba(255, 178, 62, 0.1), transparent 42%); transform-origin: center; will-change: transform, opacity; animation: homeCausticDrift 32s linear infinite; } body.page-home #particles { z-index: 0 !important; pointer-events: none !important; transform-origin: center center; will-change: transform; animation: homeParticlesFloat 44s ease-in-out infinite alternate; } /* Main marketing content above decorative layers */ body.page-home .unified-home-main { position: relative; z-index: 3; } @media (prefers-reduced-motion: reduce) { body.page-home::before, body.page-home::after, body.page-home #particles { animation: none !important; } .home-atmosphere__mesh, .home-atmosphere__caustic, .home-atmosphere__pulse { animation: none !important; filter: none !important; } } /* Fixed DOM layers — z-index above html paint; !important beats stray rules */ .home-atmosphere { position: fixed; inset: 0; z-index: 1 !important; pointer-events: none; overflow: hidden; } .home-atmosphere__base { position: absolute; inset: 0; background: radial-gradient(circle at 16% 20%, rgba(66, 128, 210, 0.12) 0%, transparent 56%), radial-gradient(circle at 84% 12%, rgba(130, 92, 210, 0.16) 0%, transparent 54%), linear-gradient(180deg, rgba(5, 8, 12, 0.94) 0%, rgba(1, 2, 5, 0.98) 100%); } .home-atmosphere__mesh { position: absolute; inset: -12%; opacity: 0.95; background: radial-gradient(ellipse 85% 55% at 14% 18%, rgba(72, 224, 255, 0.5), transparent 58%), radial-gradient(ellipse 75% 50% at 88% 12%, rgba(164, 107, 255, 0.45), transparent 56%), radial-gradient(ellipse 65% 45% at 72% 82%, rgba(255, 118, 218, 0.28), transparent 62%), radial-gradient(ellipse 50% 40% at 40% 88%, rgba(114, 255, 217, 0.22), transparent 58%); animation: homeAmbientMesh 18s ease-in-out infinite alternate, homeMeshBreathe 9s ease-in-out infinite alternate; } .home-atmosphere__caustic { position: absolute; inset: -4%; opacity: 0.65; background: repeating-linear-gradient(126deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07) 1px, transparent 1px, transparent 9px), repeating-linear-gradient(52deg, rgba(118, 206, 255, 0.06), rgba(118, 206, 255, 0.06) 1px, transparent 1px, transparent 13px), radial-gradient(circle at 78% 10%, rgba(255, 200, 120, 0.28), transparent 45%); animation: homeCausticDrift 26s linear infinite; } .home-atmosphere__pulse { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(94, 222, 255, 0.14), transparent 62%); animation: homeAtmospherePulse 10s ease-in-out infinite alternate; } /* ChatDock home embed: readable motion + glow (still respects reduce-motion above) */ body.page-home.home-dock-embed .home-atmosphere__base { filter: saturate(1.12) brightness(1.08); } body.page-home.home-dock-embed .home-atmosphere__mesh { opacity: 1; filter: saturate(1.22) brightness(1.1); } body.page-home.home-dock-embed .home-atmosphere__caustic { opacity: 0.88; } @keyframes homeAtmospherePulse { 0% { opacity: 0.25; transform: scale(1); } 100% { opacity: 0.55; transform: scale(1.08); } } @keyframes homeAtmospherePulseDock { 0% { opacity: 0.52; transform: scale(1); } 100% { opacity: 0.94; transform: scale(1.1); } } body.page-home.home-dock-embed .home-atmosphere__pulse { animation: homeAtmospherePulseDock 10s ease-in-out infinite alternate; } body.page-home::before, body.page-home::after { content: none !important; display: none !important; } body.accessibility-simple-background .home-atmosphere { display: none !important; } /* Keep a static base for reduce-motion; only drop the moving layers (matches particle behavior). */ body.accessibility-reduce-motion .home-atmosphere__mesh, body.accessibility-reduce-motion .home-atmosphere__caustic, body.accessibility-reduce-motion .home-atmosphere__pulse { display: none !important; } body.page-home #mainContent { position: relative; z-index: 3 !important; } body.page-home .site-footer { position: relative; z-index: 3 !important; } body.page-home .site-header { min-height: 62px; padding: 10px 30px; } body.page-home .site-header.scrolled { padding: 8px 30px; } body.page-home .nav-bar { margin: 10px auto 8px; padding: 10px 18px; border-radius: 20px; } body.page-home .nav-primary__link, body.page-home .nav-actions__link { min-height: 44px; display: inline-flex; align-items: center; } body.page-home .container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 0; } body.page-home:not(.home-dock-embed) #mainContent { display: grid; gap: clamp(24px, 3.2vw, 40px); padding-bottom: var(--home-safe-bottom); } body.page-home #mainContent > .hero, body.page-home #mainContent > .section, body.page-home #mainContent > .panel { width: min(92%, 1120px); margin-top: 0; margin-inline: auto; padding: clamp(44px, 6.1vw, 62px) clamp(18px, 2.2vw, 24px); border: 1px solid rgba(126, 218, 255, 0.34); border-radius: 20px; background: linear-gradient(154deg, rgba(5, 14, 32, 0.46), rgba(12, 10, 30, 0.44)); box-shadow: 0 12px 28px rgba(4, 8, 20, 0.34), inset 0 0 14px rgba(48, 92, 186, 0.08); } body.page-home #mainContent > * + * { position: relative; } body.page-home #mainContent > * + *::before { content: ""; position: absolute; left: 7%; right: 7%; top: -14px; height: 14px; background: linear-gradient(90deg, transparent, rgba(114, 210, 255, 0.18), transparent); pointer-events: none; } body.page-home .hero::before, body.page-home .section::before { opacity: 0.4; } body.page-home .hero::after, body.page-home .section::after { opacity: 0.18; } body.page-home .hero--solo .hero__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 24px); align-items: start; } body.page-home .hero--solo .hero__copy { grid-column: 1 / span 8; width: 100%; max-width: none; display: grid; gap: var(--space-2); justify-items: start; } body.page-home .hero.hero--solo h1, body.page-home .section h2, body.page-home .section h3 { line-height: 1.02; } body.page-home .hero.hero--solo h1 { margin-bottom: var(--space-1); font-size: clamp(2rem, 4.6vw, 3.3rem); max-width: 16ch; letter-spacing: 0.05em; color: #7abfff; background: none !important; -webkit-text-fill-color: currentColor !important; } body.page-home .hero-subhead, body.page-home .hero-copy, body.page-home .hero-subtext, body.page-home .section-lead, body.page-home .card p, body.page-home .workspace-includes-card p, body.page-home .addons__legal, body.page-home .plan-footnote { max-width: 72ch; line-height: 1.58; margin: 0; } body.page-home .hero-subhead { letter-spacing: 0.1em; margin-bottom: var(--space-1); } body.page-home .hero-value-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; } body.page-home .hero-value-grid li { min-height: 100%; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(118, 214, 255, 0.24); background: linear-gradient(145deg, rgba(7, 16, 34, 0.38), rgba(20, 12, 44, 0.34)); display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; } body.page-home .hero-value-grid li p { margin: 0; max-width: none; } body.page-home .hero-value-grid__icon { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(126, 218, 255, 0.45); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 0.62rem; letter-spacing: 0.08em; color: rgba(204, 240, 255, 0.96); background: rgba(12, 24, 46, 0.7); } body.page-home .hero__actions, body.page-home #workspace-includes .hero__actions, body.page-home #workspace-difference .hero__actions, body.page-home #managed-service .hero__actions, body.page-home .pricing-actions { gap: clamp(12px, 1.6vw, 16px); margin-top: var(--space-2); } body.page-home .hero__actions .btn, body.page-home .pricing-actions .btn { min-height: 44px; padding: 12px 20px; letter-spacing: 0.12em; font-size: 0.74rem; } body.page-home .hero__actions .btn-neon, body.page-home .pricing-actions .btn-neon { background: linear-gradient(116deg, rgba(255, 186, 70, 0.96), rgba(196, 56, 132, 0.94), rgba(93, 156, 255, 0.92)); border-color: rgba(255, 214, 144, 0.88); color: #06131f; box-shadow: 0 16px 34px rgba(20, 66, 150, 0.5), 0 0 0 1px rgba(255, 208, 128, 0.24); } body.page-home .hero__actions .btn-outline, body.page-home .pricing-actions .btn-outline { background: linear-gradient(140deg, rgba(8, 18, 34, 0.72), rgba(18, 10, 34, 0.66)); border-color: rgba(140, 226, 255, 0.58); } body.page-home .section-header { display: grid; gap: clamp(16px, 2vw, 24px); margin-bottom: clamp(16px, 2vw, 24px); justify-items: start; } body.page-home .section-header p { margin: 0; } body.page-home .cards-3, body.page-home .mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } body.page-home .cards-3 { margin: 0; padding: 0; list-style: none; } body.page-home .cards-3 > li, body.page-home .mini-cards .card { min-height: 100%; } body.page-home .workspace-includes-card, body.page-home .card, body.page-home .pricing-overview-card { border-radius: 20px; border-width: 1px; border-color: rgba(126, 216, 255, 0.3); background: linear-gradient(154deg, rgba(8, 18, 38, 0.42), rgba(22, 12, 46, 0.4)); box-shadow: 0 12px 28px rgba(4, 10, 22, 0.3), inset 0 0 12px rgba(36, 84, 176, 0.08); } body.page-home .workspace-includes-card, body.page-home .card { padding: clamp(14px, 2vw, 18px); } body.page-home .trustbar { width: min(92%, 1120px); padding: 0; justify-content: flex-start; gap: var(--space-2); } body.page-home .trust-pill { font-size: 0.72rem; padding: 8px 12px; border-width: 1px; border-radius: 999px; } body.page-home .learn-more { margin-top: var(--space-2); width: min(72ch, 100%); border: 1px solid rgba(118, 214, 255, 0.38); border-radius: 14px; background: rgba(7, 18, 34, 0.62); overflow: hidden; } body.page-home .learn-more__summary { list-style: none; cursor: pointer; padding: 10px 14px; font-family: var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.68rem; color: rgba(190, 232, 255, 0.95); } body.page-home .learn-more__summary::-webkit-details-marker { display: none; } body.page-home .learn-more__content { padding: 0 14px 12px; display: grid; gap: 10px; } body.page-home .comparison { overflow-x: auto; } body.page-home .comparison__table { table-layout: fixed; } body.page-home .comparison__table th, body.page-home .comparison__table td { padding: 14px; overflow-wrap: anywhere; } body.page-home .assistant-launch { right: clamp(14px, 2vw, 24px); bottom: calc(var(--home-safe-bottom) + env(safe-area-inset-bottom, 0px)); z-index: 1260; } body.page-home .assistant-launch__button { min-height: 44px; } body.page-home .assistant-panel { border-width: 1px; } @media (max-width: 960px) { body.page-home .hero--solo .hero__inner { grid-template-columns: 1fr; } body.page-home .hero--solo .hero__copy { grid-column: auto; } body.page-home .hero-value-grid, body.page-home .cards-3, body.page-home .mini-cards { grid-template-columns: 1fr; } } @media (max-width: 768px) { body.page-home #mainContent > .hero, body.page-home #mainContent > .section, body.page-home #mainContent > .panel { width: min(92%, 1120px); padding: clamp(40px, 7vw, 56px) clamp(16px, 4.8vw, 20px); } body.page-home .hero.hero--solo h1 { max-width: 13ch; font-size: clamp(1.7rem, 6.6vw, 2.25rem); } body.page-home .hero__actions .btn, body.page-home .pricing-actions .btn { width: 100%; } body.page-home .hero__actions, body.page-home #workspace-includes .hero__actions, body.page-home #workspace-difference .hero__actions, body.page-home #managed-service .hero__actions, body.page-home .pricing-actions { gap: clamp(8px, 2.6vw, 12px); } body.page-home .workspace-includes-card, body.page-home .card { padding: clamp(16px, 4.8vw, 20px); } body.page-home .comparison__table { min-width: 100%; } body.page-home .comparison__table.is-stacked { border: none; box-shadow: none; background: transparent; } body.page-home .comparison__table.is-stacked tbody { gap: 14px; } body.page-home .comparison__table.is-stacked tr { border-radius: 14px; border: 1px solid rgba(126, 214, 255, 0.4); background: linear-gradient(145deg, rgba(6, 16, 32, 0.84), rgba(18, 10, 38, 0.82)); padding: 14px; } body.page-home .comparison__table.is-stacked td { font-size: 0.92rem; line-height: 1.45; min-width: 0; } body.page-home .comparison__table.is-stacked th[scope="row"] { margin: 0 0 6px; padding: 0; border: none; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(178, 222, 252, 0.95); } body.page-home .comparison__table.is-stacked td::before { min-width: 112px; font-size: 0.64rem; letter-spacing: 0.08em; } body.page-home .assistant-launch { left: auto; right: 10px; } body.page-home .assistant-panel { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } }