/* ============================================================ TYPOGRAPHY SYSTEM v4 — Hanken Grotesk (sans-only) ============================================================ Sans/display/headings/body/UI: Hanken Grotesk (variable 400-700) Mono: IBM Plex Mono — labels, captions, technical data (Marketing pages are sans-only per BAU AI Typography Spec.) ============================================================ All fonts self-hosted (woff2), free OFL for commercial use. Inspired by Vercel, Linear, Sana Labs design systems. ============================================================ */ /* ---------- Font loading note ---------- Geist + Geist Mono + Instrument Serif are all loaded via Google Fonts at the top of . No self-hosted files required. Fonts are free for commercial use. ------------------------------------------------------ */ /* ---------- Font stacks (CSS variables) ---------- Primary: Geist (sans) + Instrument Serif (display serif) + Geist Mono. Designed for AI-native SaaS — modern, calm, sophisticated. Inspired by Vercel, Linear, Sana Labs typography systems. ----------------------------------------------------- */ :root { /* Sans: display, headings, UI, body, navigation, buttons, forms, cards */ --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Arial, sans-serif; /* Marketing pages are sans-only — the "serif" token now maps to the sans display face so legacy .serif/.section-h markup renders in Hanken Grotesk (see Typography Spec §2). */ --font-serif: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Arial, sans-serif; /* Mono: technical data, file paths, agent IDs, BGH citations */ --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace; } /* ---------- Global type rendering settings ---------- */ html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; overflow-x: clip; } /* ---------- Display / heading defaults — Hanken Grotesk (sans-only) ---------- */ .serif, h1.serif, h2.serif, h3.serif, h4.serif, .section-h, .hero-h, .feature-h, .chapter-title, .stat-num, .pricing-amount { font-family: var(--font-sans) !important; font-weight: 600; /* Hanken Grotesk Semibold */ font-style: normal !important; /* override legacy inline italic */ font-feature-settings: 'kern' 1, 'liga' 1; } /* Display sizes: tight tracking + tall leading per spec */ .section-h, .hero-h, h1.serif, .chapter-title { letter-spacing: -0.025em; line-height: 1.02; } /* Headline accents stay upright (sans-only) — only their colour differs */ .serif em, .section-h em, .hero-h em, .chapter-title em, h1 em, h2 em, h3 em, h4 em { font-style: normal; } /* Inline emphasis in body copy remains italic (synthetic oblique) */ p em, li em, p i, li i, blockquote em { font-style: normal; } /* Global: no italic anywhere */ *, *::before, *::after, em, i { font-style: normal !important; } /* ---------- Hanken Grotesk body defaults ---------- */ body, p, span, li, a, button, input, textarea, select, label { font-family: var(--font-sans); } /* Slightly looser leading for heavy German copy (Spec §4) */ body { letter-spacing: -0.005em; line-height: 1.55; } /* Sans-serif headings (when serif is not used) */ h1:not(.serif), h2:not(.serif), h3:not(.serif), h4:not(.serif), h5:not(.serif), h6:not(.serif) { letter-spacing: -0.02em; line-height: 1.15; } /* ---------- IBM Plex Mono refinement ---------- */ .mono, .eyebrow, .eyebrow-center, code, kbd, samp, pre { font-family: var(--font-mono); font-feature-settings: 'tnum' 1, 'zero' 1, 'kern' 1, 'liga' 0; letter-spacing: 0; } /* Strong text uses Geist's medium/semibold weights */ strong, b, .font-medium { font-weight: 500; letter-spacing: -0.005em; } .font-semibold { font-weight: 600; letter-spacing: -0.01em; } .font-bold { font-weight: 700; letter-spacing: -0.015em; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } /* ============================================================ COLOR SYSTEM — Bold accents on warm cream ============================================================ Saturated brand accents (purple/slate/amber) on warm cream backgrounds. Bolder, more confident tone. ============================================================ */ :root { /* Foundation — soft off-black + warm neutrals */ --ink: #0A0A0B; /* warm soft off-black (text + dark surfaces) */ --ink-soft: #1A1A1F; /* slightly lighter ink for layered dark surfaces */ --ink-deeper: #0F0F12; /* deepest dark for layering on dark sections */ /* Light backgrounds — refined warm off-white */ --cream: #F7F4EE; /* primary light background */ --cream-dim: #F0EBE0; /* secondary surface */ --cream-deep: #E2DDD0; /* nested/deep surface */ /* Text hierarchy */ --muted: #6B6B6E; /* secondary text (warm gray, not cold) */ --muted-soft: #92928D; /* tertiary text + labels */ --on-dark: #ECEBE7; /* primary text on dark surfaces */ --on-dark-mute: #9B978E; /* secondary text on dark */ /* Borders — extremely subtle */ --border: #E5E0D5; /* default low-contrast border */ --border-strong: #D5CFC2; /* emphasis border */ --border-dark: #1F1F23; /* border on dark surfaces */ /* Accent: Clara (muted lavender-stone, premium) */ --purple: #5000A8; --purple-bright: #7563A0; --purple-soft: #EDE3F9; --purple-glow: rgba(80, 0, 168, 0.10); /* Accent: Dora (warm graphite slate) */ --slate: #424B5A; --slate-soft: #E0E2E6; --slate-glow: rgba(66, 75, 90, 0.12); /* Accent: Nova (muted bronze, sophisticated) */ --amber: #C97B3F; --amber-soft: #F5E4D5; --amber-glow: rgba(201, 123, 63, 0.12); /* Status colors — muted, never alarming */ --green: #2D7A4F; /* muted forest */ --red: #B14242; /* muted terracotta */ } * { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.025em; } .mono { font-family: var(--font-mono); } body { background: var(--cream); color: var(--ink); font-size: 16.5px; /* slightly increased base for premium reading */ font-weight: 400; } /* Color utils */ .bg-ink { background: var(--ink); } .bg-ink-soft { background: var(--ink-soft); } .bg-cream { background: var(--cream); } .bg-cream-dim { background: var(--cream-dim); } .bg-cream-deep { background: var(--cream-deep); } .bg-purple-brand { background: var(--purple); } .bg-purple-soft { background: var(--purple-soft); } .text-ink { color: var(--ink); } .text-cream { color: var(--cream); } .text-muted { color: var(--muted); } .text-muted-soft { color: var(--muted-soft); } .text-purple-brand { color: var(--purple); } .text-amber-brand { color: var(--amber); } .text-green-brand { color: var(--green); } .border-cream { border-color: var(--border); } .border-strong { border-color: var(--border-strong); } .border-dark { border-color: var(--border-dark); } /* Subtle grain texture */ .grain::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: 0.035; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Animated background glow */ .bg-glow { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(80px); opacity: 0.4; animation: float 12s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.1); } } /* Premium scroll reveal */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.in { opacity: 1; transform: translateY(0); } .reveal-stagger > *:nth-child(1) { transition-delay: 0ms; } .reveal-stagger > *:nth-child(2) { transition-delay: 80ms; } .reveal-stagger > *:nth-child(3) { transition-delay: 160ms; } .reveal-stagger > *:nth-child(4) { transition-delay: 240ms; } .reveal-stagger > *:nth-child(5) { transition-delay: 320ms; } .reveal-stagger > *:nth-child(6) { transition-delay: 400ms; } /* Marquee */ .marquee { display: flex; overflow: hidden; gap: 4rem; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); } .marquee-track { display: flex; gap: 4rem; animation: scroll 40s linear infinite; flex-shrink: 0; align-items: center; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Reverse marquee */ .marquee-reverse .marquee-track { animation: scroll-reverse 40s linear infinite; } @keyframes scroll-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* Cards */ .card-elevated { background: var(--cream); border: 1px solid var(--border); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .card-elevated:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(10,10,11,0.12); } /* Pricing card */ .pricing-card { background: var(--cream); border: 1px solid var(--border); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .pricing-card:hover { border-color: var(--ink); transform: translateY(-2px); } .pricing-card.featured { background: var(--ink); color: var(--cream); border-color: var(--ink); box-shadow: 0 30px 60px -30px var(--purple-glow); } /* Tabs */ .agent-tab { cursor: pointer; transition: all 0.3s ease; border-bottom: 2px solid transparent; } .agent-tab.active { border-bottom-color: var(--ink); } .agent-content { display: none; opacity: 0; transition: opacity 0.4s ease; } .agent-content.active { display: block; opacity: 1; } /* Accordion */ .accordion-item { border-bottom: 1px solid var(--border); } .accordion-trigger { cursor: pointer; } .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .accordion-content.open { max-height: 600px; } .accordion-icon { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .accordion-trigger.open .accordion-icon { transform: rotate(45deg); } /* Mockup */ .mockup { background: #FAFAF8; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(10,10,11,0.18), 0 12px 24px -12px rgba(10,10,11,0.08); } .mockup-header { background: #F3F0E8; border-bottom: 1px solid var(--border); padding: 12px 16px; display: flex; align-items: center; gap: 8px; } .mockup-dot { width: 10px; height: 10px; border-radius: 50%; background: #D9D4C8; } /* Risk states */ .risk-high { background: rgba(201, 123, 63, 0.10); border-left: 2px solid var(--amber); } .risk-medium { background: rgba(80, 0, 168, 0.06); border-left: 2px solid var(--purple); } /* Bars */ .bar-bg { background: var(--border); border-radius: 3px; height: 6px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 3px; transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================ "Built for" / audience grid Nine profession cards moved from footer to a dedicated section ============================================================ */ /* Soft aurora glow blobs behind the section title for ambient depth */ .audience-aurora { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .audience-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.45; will-change: transform; } .audience-blob-1 { width: 520px; height: 520px; top: -160px; left: -120px; background: radial-gradient(circle, rgba(80, 0, 168, 0.18), transparent 70%); animation: audienceBlobDrift 22s ease-in-out infinite; } .audience-blob-2 { width: 460px; height: 460px; bottom: -180px; right: -100px; background: radial-gradient(circle, rgba(201, 123, 63, 0.14), transparent 70%); animation: audienceBlobDrift 26s ease-in-out infinite reverse; animation-delay: -8s; } @keyframes audienceBlobDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -25px) scale(1.08); } 66% { transform: translate(-30px, 35px) scale(0.94); } } @media (prefers-reduced-motion: reduce) { .audience-blob { animation: none !important; } } .audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; } @media (max-width: 639px) { .audience-grid { grid-template-columns: 1fr; } } @media (min-width: 640px) and (max-width: 1023px) { .audience-grid { grid-template-columns: repeat(2, 1fr); } } .audience-card { background: var(--cream); padding: 24px 26px; display: flex; gap: 16px; align-items: flex-start; position: relative; overflow: hidden; transition: background 0.35s ease; } .audience-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 0%) var(--my, 0%), rgba(80, 0, 168, 0.08), transparent 55%); opacity: 0; transition: opacity 0.45s ease; pointer-events: none; } .audience-card:hover::before { opacity: 1; } .audience-card:hover .audience-card-title { color: var(--purple); } .audience-card-icon { width: 44px; height: 44px; border-radius: 11px; background: var(--purple-soft); color: var(--purple); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease, background 0.35s ease; } .audience-card:hover .audience-card-icon { transform: rotate(-6deg) scale(1.08); background: rgba(80, 0, 168, 0.16); box-shadow: 0 8px 20px -8px rgba(80, 0, 168, 0.4); } .audience-card-title { font-weight: 600; font-size: 1.0625rem; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.01em; transition: color 0.35s ease; } .audience-card-desc { font-size: 0.875rem; color: var(--muted); line-height: 1.5; } /* Mouse-tracked glow position */ @media (hover: hover) { .audience-card { cursor: default; } } /* Reduced-motion: drop the spring rotate */ @media (prefers-reduced-motion: reduce) { .audience-card-icon, .audience-card::before, .audience-card-title { transition: none !important; } .audience-card:hover .audience-card-icon { transform: none; } } /* ============================================================ Hero mockup card — animated reveal sequence Plays once when the parent .reveal becomes .reveal.in ============================================================ */ .mockup-animated { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .mockup-animated:hover { transform: translateY(-4px); box-shadow: 0 50px 100px -32px rgba(10,10,11,0.22), 0 18px 32px -14px rgba(80,0,168,0.12); } /* Progress bar: animates from 0 → its set width when card reveals */ .reveal.in .mockup-animated .bar-fill { animation: mockupBarFill 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; position: relative; overflow: hidden; } @keyframes mockupBarFill { 0% { width: 0%; } 100% { width: 96%; } } /* Shimmer pulse traveling across the fill */ .reveal.in .mockup-animated .bar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%); transform: translateX(-100%); animation: mockupBarShimmer 2.4s ease-out 0.4s 2; } @keyframes mockupBarShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } } /* Findings rows: stagger fade-slide in */ .mockup-animated .space-y-2 > div { opacity: 0; transform: translateY(8px); } .reveal.in .mockup-animated .space-y-2 > div { animation: mockupFindingIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .reveal.in .mockup-animated .space-y-2 > div:nth-child(1) { animation-delay: 1.1s; } .reveal.in .mockup-animated .space-y-2 > div:nth-child(2) { animation-delay: 1.4s; } .reveal.in .mockup-animated .space-y-2 > div:nth-child(3) { animation-delay: 1.7s; } @keyframes mockupFindingIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } /* Final recommendation pill: scale-pop in last */ .mockup-animated .border-t > span:last-child { opacity: 0; transform: scale(0.85); transform-origin: center; } .reveal.in .mockup-animated .border-t > span:last-child { animation: mockupPillPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 2.1s forwards; } @keyframes mockupPillPop { 0% { opacity: 0; transform: scale(0.85); } 60% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } } /* Agent chip dot pulses subtly forever */ .mockup-animated .agent-chip > span:first-child { position: relative; animation: mockupDotPulse 2.4s ease-in-out infinite; } @keyframes mockupDotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(80, 0, 168, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(80, 0, 168, 0); } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .reveal.in .mockup-animated .bar-fill, .reveal.in .mockup-animated .bar-fill::after, .reveal.in .mockup-animated .space-y-2 > div, .reveal.in .mockup-animated .border-t > span:last-child, .mockup-animated .agent-chip > span:first-child { animation: none !important; } .mockup-animated .space-y-2 > div, .mockup-animated .border-t > span:last-child { opacity: 1; transform: none; } .mockup-animated:hover { transform: none; } } /* ============================================================ Dora mockup animation — contract scan + stagger + flag pulse ============================================================ */ .mockup-dora-animated { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .mockup-dora-animated:hover { transform: translateY(-4px); box-shadow: 0 50px 100px -32px rgba(10,10,11,0.22), 0 18px 32px -14px rgba(66, 75, 90, 0.16); } /* Contract excerpt: relative container for the scan line */ .mockup-dora-animated .contract-excerpt { position: relative; overflow: hidden; } /* Scan line: thin purple/slate gradient sweeps top → bottom once */ .mockup-dora-animated .dora-scan-line { position: absolute; left: 0; right: 0; top: -2px; height: 24px; pointer-events: none; background: linear-gradient(180deg, rgba(80, 0, 168, 0) 0%, rgba(80, 0, 168, 0.10) 40%, rgba(80, 0, 168, 0.28) 50%, rgba(80, 0, 168, 0.10) 60%, rgba(80, 0, 168, 0) 100%); opacity: 0; z-index: 1; } .reveal.in .mockup-dora-animated .dora-scan-line { animation: doraScan 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both; } @keyframes doraScan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(280px); opacity: 0; } } /* Contract lines stagger in from left as scan passes */ .mockup-dora-animated .contract-line { opacity: 0; transform: translateX(-12px); position: relative; z-index: 2; } .reveal.in .mockup-dora-animated .contract-line { animation: doraLineIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .reveal.in .mockup-dora-animated .contract-line:nth-child(2) { animation-delay: 0.40s; } .reveal.in .mockup-dora-animated .contract-line:nth-child(3) { animation-delay: 0.55s; } .reveal.in .mockup-dora-animated .contract-line:nth-child(4) { animation-delay: 0.70s; } .reveal.in .mockup-dora-animated .contract-line:nth-child(5) { animation-delay: 0.85s; } .reveal.in .mockup-dora-animated .contract-line:nth-child(6) { animation-delay: 1.00s; } .reveal.in .mockup-dora-animated .contract-line:nth-child(7) { animation-delay: 1.15s; } .reveal.in .mockup-dora-animated .contract-line:nth-child(8) { animation-delay: 1.30s; } .reveal.in .mockup-dora-animated .contract-line:nth-child(9) { animation-delay: 1.45s; } @keyframes doraLineIn { 0% { opacity: 0; transform: translateX(-12px); } 100% { opacity: 1; transform: translateX(0); } } /* Flagged clauses get a one-shot ring pulse after stagger completes */ .reveal.in .mockup-dora-animated .contract-line.flag-medium { animation: doraLineIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.40s forwards, doraFlagPulseMedium 1.4s ease-out 2.1s 1; } .reveal.in .mockup-dora-animated .contract-line.flag-high { animation: doraLineIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards, doraFlagPulseHigh 1.4s ease-out 2.3s 1; } @keyframes doraFlagPulseHigh { 0% { box-shadow: 0 0 0 0 rgba(177, 66, 66, 0.42); } 100% { box-shadow: 0 0 0 8px rgba(177, 66, 66, 0); } } @keyframes doraFlagPulseMedium { 0% { box-shadow: 0 0 0 0 rgba(201, 123, 63, 0.40); } 100% { box-shadow: 0 0 0 8px rgba(201, 123, 63, 0); } } /* Risk findings rows: stagger in after contract clauses settle */ .mockup-dora-animated .risk-row { opacity: 0; transform: translateY(8px); } .reveal.in .mockup-dora-animated .risk-row { animation: doraFindingIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .reveal.in .mockup-dora-animated .risk-row:nth-child(1) { animation-delay: 2.0s; } .reveal.in .mockup-dora-animated .risk-row:nth-child(2) { animation-delay: 2.3s; } @keyframes doraFindingIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } /* "Geprüft" badge: subtle pulse on the indicator dot, infinite */ .mockup-dora-animated .pulse-dot { animation: doraDotPulse 2.2s ease-in-out infinite; } @keyframes doraDotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(45, 122, 79, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(45, 122, 79, 0); } } /* Reduced motion: keep everything visible, drop the animations */ @media (prefers-reduced-motion: reduce) { .reveal.in .mockup-dora-animated .dora-scan-line, .reveal.in .mockup-dora-animated .contract-line, .reveal.in .mockup-dora-animated .risk-row, .mockup-dora-animated .pulse-dot { animation: none !important; } .mockup-dora-animated .contract-line, .mockup-dora-animated .risk-row { opacity: 1; transform: none; } .mockup-dora-animated .dora-scan-line { display: none; } .mockup-dora-animated:hover { transform: none; } } /* Nav */ /* Sticky top header: pins the announcement bar + nav together on scroll */ .site-header { position: sticky; top: 0; z-index: 50; } .nav-blur { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); background: rgba(247, 244, 238, 0.78); } /* Compliance chips */ .compliance-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); background: var(--cream); font-weight: 500; } /* Hover underlines */ .hover-line { position: relative; } .hover-line::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .hover-line:hover::after { transform: scaleX(1); } /* Agents dropdown menu */ .agents-dropdown { position: relative; } .dropdown-trigger { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; position: relative; } .dropdown-trigger::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 14px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .agents-dropdown:hover .dropdown-trigger::after, .agents-dropdown.open .dropdown-trigger::after { transform: scaleX(1); } .dropdown-trigger .chevron { width: 10px; height: 10px; opacity: 0.55; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; } .agents-dropdown:hover .dropdown-trigger .chevron, .agents-dropdown.open .dropdown-trigger .chevron { transform: rotate(180deg); opacity: 1; } /* Invisible hover bridge to prevent dropdown closing in gap */ .agents-dropdown::after { content: ''; position: absolute; top: 100%; left: -20px; right: -20px; height: 18px; } .dropdown-panel { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(-8px) scale(0.98); min-width: 340px; background: var(--cream); border: 1px solid var(--border); border-radius: 18px; padding: 10px; box-shadow: 0 28px 60px -18px rgba(10, 10, 11, 0.22), 0 6px 16px -4px rgba(10, 10, 11, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.6) inset; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.32s; z-index: 100; } .agents-dropdown:hover .dropdown-panel, .agents-dropdown:focus-within .dropdown-panel, .agents-dropdown.open .dropdown-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); transition-delay: 0s; } .dropdown-item { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); transition: background-color 0.18s ease, transform 0.18s ease; } .dropdown-item:hover { background: var(--cream-dim); transform: translateX(2px); } .dropdown-item.active { background: var(--cream-deep); } .dropdown-item.active .agent-name::after { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--purple); margin-left: 8px; box-shadow: 0 0 0 3px rgba(80,0,168,0.18); transform: translateY(-2px); } .dropdown-item .agent-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; position: relative; box-shadow: 0 0 0 4px currentColor; opacity: 0.9; } .dropdown-item .agent-dot.dot-clara { background: var(--purple); color: rgba(80,0,168,0.12); } .dropdown-item .agent-dot.dot-dora { background: var(--slate); color: rgba(66,75,90,0.14); } .dropdown-item .agent-dot.dot-nova { background: var(--amber); color: rgba(201,123,63,0.14); } .dropdown-item .agent-dot.dot-future { background: var(--muted); color: rgba(107,107,110,0.12); opacity: 0.6; } .dropdown-item .agent-info { flex: 1; min-width: 0; } .dropdown-item .agent-name { font-weight: 600; font-size: 14px; line-height: 1.3; margin-bottom: 3px; color: var(--ink); letter-spacing: -0.01em; } .dropdown-item .agent-role { font-size: 12.5px; color: var(--muted); line-height: 1.4; } .dropdown-divider { height: 1px; background: var(--border); margin: 8px 6px; } .dropdown-item-future .agent-name { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); } .dropdown-item-future .agent-name::after { content: '→'; font-weight: 400; transition: transform 0.2s ease; } .dropdown-item-future:hover .agent-name::after { transform: translateX(3px); } /* Agent avatar frame */ .agent-avatar { position: relative; border-radius: 999px; overflow: hidden; background: transparent; box-shadow: 0 0 0 1px rgba(10, 10, 11, 0.08), 0 8px 24px -8px rgba(10, 10, 11, 0.18), 0 2px 6px -2px rgba(10, 10, 11, 0.08); transition: box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .agent-card:hover .agent-avatar { box-shadow: 0 0 0 1px rgba(10, 10, 11, 0.12), 0 16px 36px -10px rgba(10, 10, 11, 0.26), 0 4px 10px -2px rgba(10, 10, 11, 0.10); transform: translateY(-1px); } .agent-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* badge hidden — avatar is identified by adjacent name text */ .agent-badge { display: none; } /* Hero H1 - confident sans, no overflow */ .hero-h1 { font-weight: 600; letter-spacing: -0.035em; line-height: 0.96; color: var(--ink); } .hero-h1 .accent { font-family: var(--font-sans); font-style: normal; font-weight: 600; letter-spacing: -0.035em; color: var(--purple); background-image: linear-gradient(180deg, transparent 81%, rgba(80, 0, 168, 0.18) 81%, rgba(80, 0, 168, 0.18) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; background-repeat: no-repeat; background-position: left center; } /* Section heading */ .section-h { font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; } .section-h .accent { font-family: var(--font-sans); font-style: normal; font-weight: 600; letter-spacing: -0.03em; background-image: linear-gradient(180deg, transparent 81%, rgba(80, 0, 168, 0.18) 81%, rgba(80, 0, 168, 0.18) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; background-repeat: no-repeat; background-position: left center; } /* ── Problem comparison — premium before/after cards ── */ .problem-compare { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .problem-compare { grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; } } .problem-card { position: relative; border-radius: 18px; padding: 1.5rem 1.5rem 1.625rem; border: 1px solid var(--border-strong); background: var(--cream); overflow: hidden; transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease, border-color 0.45s ease; } .problem-card.bauai { background: linear-gradient(165deg, rgba(80,0,168,0.07) 0%, var(--cream) 58%); border-color: rgba(80,0,168,0.28); box-shadow: 0 18px 42px -24px rgba(80,0,168,0.32); } /* animated top sheen on the BAU AI card */ .problem-card.bauai::before { content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 2px; background: linear-gradient(90deg, transparent, var(--purple), transparent); animation: problem-sheen 3.4s ease-in-out infinite; } @keyframes problem-sheen { 0% { left: -40%; opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { left: 100%; opacity: 0; } } .problem-card:hover { transform: translateY(-5px); box-shadow: 0 24px 46px -24px rgba(10,10,11,0.20); } .problem-card.bauai:hover { box-shadow: 0 26px 54px -22px rgba(80,0,168,0.38); border-color: rgba(80,0,168,0.45); } .problem-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 1.25rem; } .problem-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; font-weight: 500; } .problem-badge.today { background: rgba(201,123,63,0.13); color: var(--amber); } .problem-badge.bauai { background: rgba(80,0,168,0.1); color: var(--purple); display: inline-flex; align-items: center; gap: 5px; } .problem-badge.bauai::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--purple); animation: rm-pulse-dot 2s ease-in-out infinite; } .problem-badge-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-soft); } .problem-list { display: flex; flex-direction: column; gap: 0.875rem; } .problem-row { display: flex; align-items: flex-start; gap: 12px; font-size: 0.875rem; line-height: 1.45; color: var(--ink); opacity: 0; transform: translateY(12px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1); } .reveal.in .problem-row { opacity: 1; transform: translateY(0); } .reveal.in .problem-card.today .problem-row:nth-child(1) { transition-delay: 0.05s; } .reveal.in .problem-card.today .problem-row:nth-child(2) { transition-delay: 0.11s; } .reveal.in .problem-card.today .problem-row:nth-child(3) { transition-delay: 0.17s; } .reveal.in .problem-card.today .problem-row:nth-child(4) { transition-delay: 0.23s; } .reveal.in .problem-card.today .problem-row:nth-child(5) { transition-delay: 0.29s; } .reveal.in .problem-card.bauai .problem-row:nth-child(1) { transition-delay: 0.18s; } .reveal.in .problem-card.bauai .problem-row:nth-child(2) { transition-delay: 0.24s; } .reveal.in .problem-card.bauai .problem-row:nth-child(3) { transition-delay: 0.30s; } .reveal.in .problem-card.bauai .problem-row:nth-child(4) { transition-delay: 0.36s; } .reveal.in .problem-card.bauai .problem-row:nth-child(5) { transition-delay: 0.42s; } .problem-icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; transition: transform 0.3s ease; } .problem-icon.x { background: rgba(201,123,63,0.15); color: var(--amber); } .problem-icon.check { background: var(--purple); color: #fff; } .problem-icon svg { width: 11px; height: 11px; display: block; } .problem-card.bauai:hover .problem-icon.check { transform: scale(1.15); } .problem-card.today:hover .problem-icon.x { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .problem-card.bauai::before { animation: none; opacity: 0; } .problem-row { opacity: 1; transform: none; transition: none; } } /* ── Platform header — native-standards capability strip ── */ .platform-caps { margin-top: 1.75rem; width: 100%; } .platform-caps-label { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-soft); margin-bottom: 0.85rem; } .platform-caps-label::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--purple); animation: rm-pulse-dot 2s ease-in-out infinite; } .platform-caps-row { display: flex; flex-wrap: wrap; gap: 0.55rem; } .platform-cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; padding: 7px 13px; border-radius: 999px; background: var(--cream); border: 1px solid var(--border-strong); color: var(--ink); white-space: nowrap; opacity: 0; transform: translateY(12px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease, background 0.3s ease, color 0.3s ease; } .reveal.in .platform-cap { opacity: 1; transform: translateY(0); } .reveal.in .platform-cap:nth-child(1) { transition-delay: 0.10s; } .reveal.in .platform-cap:nth-child(2) { transition-delay: 0.17s; } .reveal.in .platform-cap:nth-child(3) { transition-delay: 0.24s; } .reveal.in .platform-cap:nth-child(4) { transition-delay: 0.31s; } .reveal.in .platform-cap:nth-child(5) { transition-delay: 0.38s; } .platform-cap:hover { border-color: rgba(80,0,168,0.45); background: rgba(80,0,168,0.06); color: var(--purple); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .platform-cap { opacity: 1; transform: none; transition: none; } .platform-caps-label::before { animation: none; } } /* Number counter */ .num-counter { display: inline-block; font-variant-numeric: tabular-nums; } /* Comparison table */ .compare-row { display: grid; grid-template-columns: 2fr 1fr 1fr; padding: 14px 20px; border-bottom: 1px solid var(--border); align-items: center; } .compare-row.header { background: var(--cream-dim); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--border-strong); } .compare-row .col-task { font-size: 14px; } .compare-row .col-manual { font-family: var(--font-mono); font-size: 13px; color: var(--muted); } .compare-row .col-bauai { font-family: var(--font-mono); font-size: 13px; color: var(--purple); font-weight: 500; } /* Slider input */ input[type=range].premium-slider { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 999px; background: var(--border); outline: none; } input[type=range].premium-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--purple); cursor: pointer; box-shadow: 0 0 0 4px rgba(80,0,168,0.15); transition: transform 0.2s ease; } input[type=range].premium-slider::-webkit-slider-thumb:hover { transform: scale(1.12); } input[type=range].premium-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--purple); cursor: pointer; border: none; } /* Timeline */ .timeline-track { position: relative; height: 4px; background: var(--border); border-radius: 999px; margin: 60px 40px; } .timeline-progress { position: absolute; left: 0; top: 0; height: 100%; background: var(--purple); border-radius: 999px; transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1); } .timeline-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--cream); border: 2px solid var(--purple); top: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease; } .timeline-dot.filled { background: var(--purple); } /* Pricing toggle */ .pricing-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px; background: var(--cream); } .pricing-toggle button { padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); transition: all 0.3s ease; border: none; background: transparent; cursor: pointer; } .pricing-toggle button.active { background: var(--ink); color: var(--cream); } /* Lang switch */ .lang-switch { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px; background: var(--cream); font-size: 11px; letter-spacing: 0.04em; } .lang-switch button { padding: 4px 10px; border-radius: 999px; background: transparent; border: none; cursor: pointer; color: var(--muted); font-weight: 500; font-family: var(--font-mono); transition: all 0.25s ease; } .lang-switch button.active { background: var(--ink); color: var(--cream); } /* Floating elements */ .float-1 { animation: floatY 6s ease-in-out infinite; } .float-2 { animation: floatY 7s ease-in-out infinite 0.5s; } .float-3 { animation: floatY 8s ease-in-out infinite 1s; } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Pulse */ .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); position: relative; } .pulse-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.8); opacity: 0; } } /* Agent name pill */ .agent-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; font-family: var(--font-mono); } /* Logo strip pill */ .logo-pill { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-serif); font-size: 1.4rem; white-space: nowrap; color: var(--muted); font-weight: 500; } /* Section divider */ .divider { background: var(--border); height: 1px; width: 100%; } /* ============================================================ EDITORIAL PROBLEM SECTION COMPONENTS ============================================================ */ /* Paired comparison: TODAY ←→ WITH BAU AI rows */ .compare-header { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--border-strong); } .compare-col-label { display: flex; align-items: center; gap: 10px; } .compare-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .compare-h-text { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--label-color, var(--ink)); } .compare-spacer { display: block; } .compare-pairs { /* container for rows */ } .compare-row { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 1rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--border); position: relative; } .compare-row:last-child { border-bottom: 0; } /* Subtle hover-to-emphasis on each row */ .compare-row::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--purple-glow), transparent); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .compare-row:hover::before { opacity: 0.4; } .compare-today { font-size: 16px; line-height: 1.5; color: var(--ink); opacity: 0.5; font-feature-settings: 'tnum' 1; } .compare-bauai { font-size: 16px; line-height: 1.5; color: var(--ink); font-weight: 500; } .compare-arrow { font-family: var(--font-mono); color: var(--purple); font-size: 14px; align-self: center; text-align: center; opacity: 0.5; transition: opacity 0.3s ease, transform 0.3s ease; } .compare-row:hover .compare-arrow { opacity: 1; transform: translateX(3px); } /* Mobile: stack vertically with a connecting purple rule */ @media (max-width: 640px) { .compare-header { grid-template-columns: 1fr; gap: 0.5rem; } .compare-header .compare-spacer { display: none; } .compare-header .compare-col-label:last-child { display: none; } .compare-row { grid-template-columns: 1fr; gap: 0.6rem; padding: 1.25rem 0; } .compare-arrow { display: none; } .compare-bauai { padding-left: 14px; border-left: 2px solid var(--purple); } .compare-today { font-size: 14.5px; padding-left: 14px; border-left: 2px solid var(--border-strong); } } /* Closing verdict block (italic pull-quote with purple rule) */ .verdict-block { position: relative; max-width: 56rem; padding-left: 28px; } .verdict-block::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(to bottom, var(--purple), rgba(80, 0, 168, 0.2)); border-radius: 2px; } .verdict-text { font-family: var(--font-serif); font-style: normal; font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; color: var(--ink); letter-spacing: -0.005em; } /* Animated underline accent for headlines - multi-line safe */ .ul-anim { display: inline; background-image: linear-gradient(180deg, transparent 81%, rgba(80, 0, 168, 0.18) 81%, rgba(80, 0, 168, 0.18) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; background-size: 0% 100%; background-repeat: no-repeat; background-position: left center; animation: hl-sweep 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards; } @keyframes hl-sweep { to { background-size: 100% 100%; } } @media (prefers-reduced-motion: reduce) { .ul-anim { animation: none !important; background-size: 100% 100% !important; } } /* Premium agent card motion */ .agent-card { position: relative; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; } .agent-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), var(--card-glow, rgba(80, 0, 168, 0.06)), transparent 40%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .agent-card:hover::before { opacity: 1; } .agent-card:hover { transform: translateY(-4px); } .agent-card.clara { --card-glow: rgba(80, 0, 168, 0.08); } .agent-card.dora { --card-glow: rgba(66, 75, 90, 0.08); } .agent-card.nova { --card-glow: rgba(201, 123, 63, 0.10); } /* Avatar wrap - keep simple positioning, no conic gradient halo */ .agent-avatar-wrap { position: relative; } .agent-avatar { position: relative; z-index: 1; } /* Badge pulse */ .agent-badge { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .agent-card:hover .agent-badge { transform: scale(1.12) rotate(-6deg); } /* Agent reveal entrance */ .agent-card.reveal { transform: translateY(40px) scale(0.96); } .agent-card.reveal.in { transform: translateY(0) scale(1); } /* Roadmap — upcoming agents grid */ @keyframes rm-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } @keyframes rm-shimmer { 0% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(220%) skewX(-18deg); } } @keyframes rm-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } } @keyframes rm-card-in { from { opacity: 0; transform: translateY(22px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes rm-rail-fill { from { width: 0; } to { width: 100%; } } /* Phase pipeline */ .rm-pipeline { position: relative; display: flex; align-items: center; gap: 0; margin-bottom: 2.5rem; padding: 1.5rem 1.75rem; background: var(--cream); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; } .rm-pipeline::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(80,0,168,0.03) 0%, transparent 60%); pointer-events: none; } .rm-pipeline-track { position: relative; display: flex; align-items: center; width: 100%; gap: 0; } .rm-pipeline-track::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border-strong); transform: translateY(-50%); z-index: 0; } .rm-pipeline-fill { position: absolute; top: 50%; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--purple) 0%, rgba(80,0,168,0.4) 100%); transform: translateY(-50%); z-index: 1; border-radius: 2px; transition: width 1.2s cubic-bezier(0.16,1,0.3,1); } .rm-pipeline-fill.in { width: 31%; } /* fills through the 3 live agents */ .rm-pipeline-node { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; } .rm-pipeline-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--cream); transition: transform 0.3s ease; } .rm-pipeline-node.live .rm-pipeline-dot { background: var(--purple); border-color: var(--purple); box-shadow: 0 0 0 3px rgba(80,0,168,0.15); } .rm-pipeline-node.live:hover .rm-pipeline-dot { transform: scale(1.3); } .rm-pipeline-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; color: var(--muted); white-space: nowrap; text-align: center; } .rm-pipeline-node.live .rm-pipeline-label { color: var(--ink); font-weight: 600; } @media (max-width: 640px) { .rm-pipeline { padding: 1.25rem 1rem; } .rm-pipeline-label { font-size: 7.5px; } .rm-pipeline-dot { width: 9px; height: 9px; } } /* Cards grid */ .roadmap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.875rem; } @media (min-width: 640px) { .roadmap-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .roadmap-grid { grid-template-columns: repeat(5, 1fr); gap: 1rem; } } .roadmap-agent { position: relative; display: flex; flex-direction: column; gap: 0.625rem; padding: 1.375rem 1.25rem; background: var(--cream); border: 1px solid var(--border-strong); border-radius: 16px; overflow: hidden; opacity: 0; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease; } .roadmap-agent.rm-in { animation: rm-card-in 0.55s cubic-bezier(0.16,1,0.3,1) both; } .roadmap-agent::after { content: ''; position: absolute; top: 0; left: 0; width: 45%; height: 100%; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%); transform: translateX(-120%) skewX(-18deg); pointer-events: none; } .roadmap-agent:hover::after { animation: rm-shimmer 0.7s ease forwards; } .roadmap-agent:hover { transform: translateY(-5px); border-color: rgba(80,0,168,0.35); box-shadow: 0 18px 36px -18px rgba(80,0,168,0.18), 0 4px 12px -4px rgba(10,10,11,0.08); } .roadmap-agent-icon { width: 54px; height: 54px; border-radius: 15px; overflow: hidden; flex-shrink: 0; box-shadow: 0 4px 12px -5px rgba(10, 10, 11, 0.12); animation: rm-float 4s ease-in-out infinite; } .roadmap-agent:nth-child(2) .roadmap-agent-icon { animation-delay: -0.8s; } .roadmap-agent:nth-child(3) .roadmap-agent-icon { animation-delay: -1.6s; } .roadmap-agent:nth-child(4) .roadmap-agent-icon { animation-delay: -2.4s; } .roadmap-agent:nth-child(5) .roadmap-agent-icon { animation-delay: -3.2s; } .roadmap-agent-icon svg { width: 100%; height: 100%; display: block; } .roadmap-agent-name { font-weight: 600; color: var(--ink); font-size: 0.9375rem; } .roadmap-agent-role { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; } .roadmap-agent-soon { position: absolute; top: 1rem; right: 1rem; display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px 3px 6px; border-radius: 999px; background: rgba(80, 0, 168, 0.07); color: var(--purple); } .roadmap-soon-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--purple); flex-shrink: 0; animation: rm-pulse-dot 2s ease-in-out infinite; } .roadmap-agent:nth-child(2) .roadmap-soon-dot { animation-delay: -0.4s; } .roadmap-agent:nth-child(3) .roadmap-soon-dot { animation-delay: -0.8s; } .roadmap-agent:nth-child(4) .roadmap-soon-dot { animation-delay: -1.2s; } .roadmap-agent:nth-child(5) .roadmap-soon-dot { animation-delay: -1.6s; } /* Agent stats panel (matches pricing-card stat row pattern) */ .agent-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 14px; padding: 18px 8px; margin-bottom: 1.5rem; border: 1px solid transparent; } .agent-stats.clara { background: var(--purple-soft); border-color: rgba(80, 0, 168, 0.12); } .agent-stats.dora { background: rgba(66, 75, 90, 0.07); border-color: rgba(66, 75, 90, 0.14); } .agent-stats.nova { background: rgba(201, 123, 63, 0.08); border-color: rgba(201, 123, 63, 0.16); } .agent-stat { position: relative; text-align: center; padding: 2px 6px; } .agent-stat + .agent-stat::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; } .agent-stats.clara .agent-stat + .agent-stat::before { background: rgba(80, 0, 168, 0.18); } .agent-stats.dora .agent-stat + .agent-stat::before { background: rgba(66, 75, 90, 0.20); } .agent-stats.nova .agent-stat + .agent-stat::before { background: rgba(201, 123, 63, 0.24); } .agent-stat-value { font-family: var(--font-serif); font-style: normal; font-weight: 500; font-size: 1.65rem; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 8px; } .agent-stats.clara .agent-stat-value { color: var(--purple); } .agent-stats.dora .agent-stat-value { color: var(--slate); } .agent-stats.nova .agent-stat-value { color: var(--amber); } .agent-stat-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); line-height: 1.35; font-weight: 500; } @media (max-width: 768px) { .hero-h1 { font-size: clamp(1.875rem, 8vw, 3rem) !important; line-height: 1.05 !important; overflow-wrap: break-word; word-break: break-word; } .section-h { font-size: 2.5rem !important; } .compare-row { grid-template-columns: 1.5fr 1fr 1fr; padding: 12px 14px; } .agent-stat-value { font-size: 1.35rem; } .agent-stat-label { font-size: 8px; } } /* Trust seal */ .trust-seal { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(45, 122, 79, 0.08); border: 1px solid rgba(45, 122, 79, 0.2); border-radius: 6px; font-size: 10px; letter-spacing: 0.06em; color: var(--green); text-transform: uppercase; font-weight: 600; font-family: var(--font-mono); } /* ========== MERGED AGENT SECTIONS ========== */ /* Per-agent color theming via data-agent attribute */ .agent-section { --agent: var(--purple); --agent-soft: var(--purple-soft); --agent-glow: var(--purple-glow); --agent-hl: rgba(80, 0, 168, 0.18); } .agent-section[data-agent="clara"] { --agent: var(--purple); --agent-soft: var(--purple-soft); --agent-glow: var(--purple-glow); --agent-hl: rgba(80, 0, 168, 0.18); } .agent-section[data-agent="dora"] { --agent: var(--slate); --agent-soft: var(--slate-soft); --agent-glow: var(--slate-glow); --agent-hl: rgba(66, 75, 90, 0.18); } .agent-section[data-agent="nova"] { --agent: var(--amber); --agent-soft: var(--amber-soft); --agent-glow: var(--amber-glow); --agent-hl: rgba(201, 123, 63, 0.18); } /* Agent section base styles */ .agent-section { position: relative; overflow: hidden; } .agent-section + .agent-section { border-top: 1px solid var(--border); } .agent-section .bg-agent { background: var(--agent); } .agent-section .bg-agent-soft { background: var(--agent-soft); } .agent-section .text-agent { color: var(--agent); } .agent-section .border-agent { border-color: var(--agent); } .agent-section .hover\:bg-agent:hover { background: var(--agent); } /* Hero h1 in agent section (smaller than agent page hero) */ .agent-section .hero-h1 { font-family: var(--font-sans); font-weight: 700; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.025em; color: var(--ink); } .agent-section .hero-h1 .accent { font-family: var(--font-sans); font-style: normal; font-weight: 600; color: var(--ink); } .agent-section .feature-h { font-family: var(--font-serif); font-style: normal; font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.15; color: var(--ink); letter-spacing: -0.01em; } .agent-section .section-h { font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.85rem, 4vw, 2.85rem); line-height: 1.1; color: var(--ink); letter-spacing: -0.02em; } /* Agent ID chip */ .agent-section .agent-id-chip { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; background: var(--cream-dim); border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 500; } .agent-section .agent-id-chip .glyph { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--agent); color: white; font-family: var(--font-serif); font-style: normal; font-size: 15px; font-weight: 500; } .agent-section .breathe { animation: breathe-agent 4s ease-in-out infinite; } @keyframes breathe-agent { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } } /* Animated underline behind accent text (agent section variant) */ .agent-section .ul-anim { display: inline; background-image: linear-gradient(180deg, transparent 81%, var(--agent-hl) 81%, var(--agent-hl) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; background-size: 0% 100%; background-repeat: no-repeat; background-position: left center; animation: hl-agent-sweep 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards; position: static; } .agent-section .ul-anim::after { display: none; } @keyframes hl-agent-sweep { to { background-size: 100% 100%; } } /* Pulse dot */ .agent-section .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); position: relative; } .agent-section .pulse-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: pulse-agent 2s ease-in-out infinite; } @keyframes pulse-agent { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.8); opacity: 0; } } /* Mockup card */ .agent-section .mockup { background: white; border-radius: 16px; padding: 20px; border: 1px solid var(--border); box-shadow: 0 30px 60px -20px rgba(10, 10, 11, 0.18), 0 8px 20px -6px rgba(10, 10, 11, 0.08); position: relative; } .agent-section .mockup-header { display: flex; align-items: center; gap: 6px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .agent-section .mockup-header .dot { width: 10px; height: 10px; border-radius: 50%; } .agent-section .mockup-header .dot.red { background: #FF5F57; } .agent-section .mockup-header .dot.yellow { background: #FEBC2E; } .agent-section .mockup-header .dot.green { background: #28C840; } .agent-section .risk-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 8px; transition: background-color 0.2s ease; } .agent-section .risk-row.high { background: rgba(177, 66, 66, 0.08); } .agent-section .risk-row.danger { background: rgba(177, 66, 66, 0.08); } .agent-section .risk-row.medium { background: rgba(201, 123, 63, 0.08); } .agent-section .risk-row.ok { background: rgba(45, 122, 79, 0.08); } .agent-section .risk-row .icon { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; font-weight: 700; } .agent-section .risk-row.high .icon { background: #B14242; } .agent-section .risk-row.danger .icon { background: #B14242; } .agent-section .risk-row.medium .icon { background: #C97B3F; } .agent-section .risk-row.ok .icon { background: #2D7A4F; } /* Problem card with mouse-tracked glow */ .agent-section .problem-card { position: relative; background: var(--cream); border: 1px solid var(--border); border-radius: 14px; padding: 28px; overflow: hidden; transition: border-color 0.3s ease, transform 0.3s ease; } .agent-section .problem-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), var(--agent-glow), transparent 60%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .agent-section .problem-card:hover { border-color: var(--agent); transform: translateY(-2px); } .agent-section .problem-card:hover::before { opacity: 1; } .agent-section .problem-card h3 { overflow-wrap: break-word; word-break: break-word; hyphens: auto; -webkit-hyphens: auto; } /* Feature numbered blocks */ .agent-section .feature-num { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--agent); margin-bottom: 16px; letter-spacing: 0.04em; text-transform: uppercase; } .agent-section .feature-num::before { content: ''; width: 32px; height: 1px; background: var(--agent); } /* ============================================================ PROCESS STEP FLOW (connected cards with animated arrows) ============================================================ */ .agent-section .step-card { background: var(--cream); border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px; position: relative; overflow: visible; transition: border-color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .agent-section .step-card:hover { border-color: var(--agent); transform: translateY(-4px); box-shadow: 0 14px 32px -10px rgba(10, 10, 11, 0.16), 0 4px 12px -2px rgba(10, 10, 11, 0.06); } /* Step number circle */ .agent-section .step-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--agent-soft); color: var(--agent); font-family: var(--font-serif); font-style: normal; font-weight: 500; font-size: 15px; margin-bottom: 20px; position: relative; z-index: 2; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; } .agent-section .step-card:hover .step-num { transform: scale(1.08); } .agent-section[data-agent="clara"] .step-card:hover .step-num { box-shadow: 0 0 0 4px rgba(80, 0, 168, 0.10); } .agent-section[data-agent="dora"] .step-card:hover .step-num { box-shadow: 0 0 0 4px rgba(66, 75, 90, 0.12); } .agent-section[data-agent="nova"] .step-card:hover .step-num { box-shadow: 0 0 0 4px rgba(201, 123, 63, 0.12); } /* Animated dashed connector line (between cards, desktop only) */ .agent-section .step-card:not(:last-child)::before { content: ''; position: absolute; left: 100%; top: 51px; margin-left: 2px; width: 14px; height: 2px; background-image: repeating-linear-gradient(to right, var(--agent) 0 4px, transparent 4px 7px); background-size: 7px 2px; background-repeat: repeat-x; opacity: 0.55; animation: step-line-flow 0.8s linear infinite; pointer-events: none; z-index: 3; } /* Animated arrow head */ .agent-section .step-card:not(:last-child)::after { content: ''; position: absolute; left: 100%; top: 47px; margin-left: 17px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--agent); opacity: 0.75; animation: step-arrow-pulse 1.8s ease-in-out infinite; pointer-events: none; z-index: 3; transform-origin: left center; } @keyframes step-line-flow { from { background-position: 0 0; } to { background-position: 7px 0; } } @keyframes step-arrow-pulse { 0%, 100% { transform: translateX(0) scaleX(1); opacity: 0.55; } 50% { transform: translateX(4px) scaleX(1.15); opacity: 1; } } /* Stack vertically below lg breakpoint — hide horizontal connectors */ @media (max-width: 1023px) { .agent-section .step-card::before, .agent-section .step-card::after { display: none; } } /* Reduced motion: connectors visible but static */ @media (prefers-reduced-motion: reduce) { .agent-section .step-card::before, .agent-section .step-card::after { animation: none !important; } .agent-section .step-card:hover { transform: none !important; } } /* ============================================================ OUTCOME CARDS (refined, editorial) ============================================================ */ .agent-section .outcome-card { background: var(--cream); border: 1px solid var(--border); border-radius: 16px; padding: 36px 24px 30px; text-align: center; position: relative; opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease; } .reveal.in .outcome-card { opacity: 1; transform: translateY(0); } /* Tiny brand-color dot at the top center — subtle identification */ .agent-section .outcome-card::before { content: ''; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--agent); opacity: 0.45; transition: opacity 0.3s ease, transform 0.3s ease; } /* Hover: gentle lift, slightly stronger border, dot becomes more visible */ .agent-section .outcome-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: 0 10px 24px -10px rgba(10, 10, 11, 0.12); } .agent-section .outcome-card:hover::before { opacity: 0.9; transform: translateX(-50%) scale(1.3); } /* Number — italic Fraunces in dark ink, not brand color (calmer) */ .agent-section .outcome-num { font-family: var(--font-serif); font-style: normal; font-weight: 500; font-size: clamp(2.25rem, 3.8vw, 3rem); color: var(--ink); line-height: 1; letter-spacing: -0.02em; margin-bottom: 10px; margin-top: 8px; } /* Label — kept muted for restraint */ .agent-section .outcome-card .text-sm { font-size: 13px; color: var(--muted); font-weight: 400; line-height: 1.5; } /* Stagger reveal — gentler delay */ .reveal.in .outcome-card:nth-child(1) { transition-delay: 0.05s; } .reveal.in .outcome-card:nth-child(2) { transition-delay: 0.12s; } .reveal.in .outcome-card:nth-child(3) { transition-delay: 0.19s; } .reveal.in .outcome-card:nth-child(4) { transition-delay: 0.26s; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .agent-section .outcome-card { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ============================================================ PREMIUM STATS ROW (cards with motion + agent-color theming) ============================================================ */ .agent-section .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: transparent; border: none; border-radius: 0; overflow: visible; } .agent-section .stat-cell { background: var(--cream); padding: 38px 24px 28px; text-align: center; border-radius: 16px; border: 1px solid var(--border); position: relative; overflow: hidden; opacity: 0; transform: translateY(28px); transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s ease; } /* Top brand-color accent bar (animates in on reveal) */ .agent-section .stat-cell::before { content: ''; position: absolute; top: 0; left: 50%; width: 36px; height: 3px; background: var(--agent); border-radius: 0 0 4px 4px; transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, width 0.45s cubic-bezier(0.16, 1, 0.3, 1); z-index: 2; } /* Soft radial agent-color glow emanating from top */ .agent-section .stat-cell::after { content: ''; position: absolute; top: -80px; left: 50%; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, var(--agent-glow), transparent 65%); opacity: 0.55; transform: translateX(-50%); pointer-events: none; transition: opacity 0.55s ease, top 0.55s cubic-bezier(0.16, 1, 0.3, 1); z-index: 0; } /* Reveal-in state */ .reveal.in .agent-section .stat-cell, .agent-section .reveal.in .stat-cell, section.reveal.in .stat-cell { opacity: 1; transform: translateY(0); } .reveal.in .agent-section .stat-cell::before, .agent-section .reveal.in .stat-cell::before, section.reveal.in .stat-cell::before { transform: translateX(-50%) scaleX(1); } section.reveal.in .stat-cell:nth-child(1) { transition-delay: 0.05s; } section.reveal.in .stat-cell:nth-child(2) { transition-delay: 0.15s; } section.reveal.in .stat-cell:nth-child(3) { transition-delay: 0.25s; } section.reveal.in .stat-cell:nth-child(4) { transition-delay: 0.35s; } /* Hover state */ .agent-section .stat-cell:hover { transform: translateY(-5px); box-shadow: 0 18px 36px -10px rgba(10, 10, 11, 0.18), 0 4px 12px -2px rgba(10, 10, 11, 0.08); } .agent-section[data-agent="clara"] .stat-cell:hover { border-color: rgba(80, 0, 168, 0.30); } .agent-section[data-agent="dora"] .stat-cell:hover { border-color: rgba(66, 75, 90, 0.35); } .agent-section[data-agent="nova"] .stat-cell:hover { border-color: rgba(201, 123, 63, 0.35); } .agent-section .stat-cell:hover::before { width: 64px; } .agent-section .stat-cell:hover::after { opacity: 0.85; top: -50px; } /* Number — large italic Fraunces in agent color */ .agent-section .stat-num { font-family: var(--font-serif); font-style: normal; font-weight: 500; font-size: clamp(2.5rem, 4.4vw, 3.25rem); color: var(--agent); line-height: 1; margin-bottom: 14px; letter-spacing: -0.02em; position: relative; z-index: 1; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .agent-section .stat-cell:hover .stat-num { transform: scale(1.04); } /* Label */ .agent-section .stat-label { font-size: 13px; color: var(--muted); line-height: 1.5; font-weight: 500; position: relative; z-index: 1; } @media (max-width: 768px) { .agent-section .stats-row { grid-template-columns: repeat(2, 1fr); gap: 12px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .agent-section .stat-cell { opacity: 1 !important; transform: none !important; transition: none !important; } .agent-section .stat-cell::before { transform: translateX(-50%) scaleX(1) !important; transition: none !important; } } /* ===== Clara-specific: scan-line animation ===== */ .agent-section[data-agent="clara"] .scan-line { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--purple), transparent); opacity: 0.65; animation: scanline 3s ease-in-out infinite; } @keyframes scanline { 0% { top: 8%; opacity: 0; } 20% { opacity: 0.65; } 80% { opacity: 0.65; } 100% { top: 92%; opacity: 0; } } .agent-section[data-agent="clara"] .portal-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--purple-soft); color: var(--purple); font-size: 11px; font-weight: 500; margin: 2px; } /* ===== Dora-specific: contract lines + highlight animation ===== */ .agent-section[data-agent="dora"] .contract-line { font-family: var(--font-mono); font-size: 12.5px; padding: 6px 10px; border-radius: 5px; color: var(--muted); margin-bottom: 4px; position: relative; transition: background-color 0.3s ease; } .agent-section[data-agent="dora"] .contract-line.flag-high { color: var(--ink); font-weight: 500; background: rgba(177, 66, 66, 0.10); } .agent-section[data-agent="dora"] .contract-line.flag-high::after { content: '!'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #B14242; font-weight: 700; } .agent-section[data-agent="dora"] .contract-line.flag-medium { color: var(--ink); background: rgba(201, 123, 63, 0.10); } .agent-section[data-agent="dora"] .contract-line.flag-ok { color: var(--ink); background: rgba(45, 122, 79, 0.08); } .agent-section[data-agent="dora"] .highlight-anim { background: linear-gradient(90deg, transparent 0%, rgba(201, 123, 63, 0.18) 50%, transparent 100%); background-size: 200% 100%; background-position: 100% 0; animation: highlightSlide 2.5s ease-in-out infinite; } @keyframes highlightSlide { 0% { background-position: 100% 0; } 50% { background-position: -100% 0; } 100% { background-position: -100% 0; } } .agent-section[data-agent="dora"] .clause-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; background: var(--slate-soft); font-family: var(--font-mono); font-size: 10.5px; color: var(--slate); letter-spacing: 0.02em; } /* ===== Nova-specific: bid bars + scoring rings ===== */ .agent-section[data-agent="nova"] .bid-bar { height: 8px; border-radius: 4px; background: var(--amber-soft); position: relative; overflow: hidden; } .agent-section[data-agent="nova"] .bid-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--amber); transform-origin: left; transform: scaleX(0); animation: barRise 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; border-radius: 4px; } @keyframes barRise { to { transform: scaleX(var(--w, 1)); } } /* ----- Bidder comparison row (Nova hero mockup) ----- */ .agent-section[data-agent="nova"] .bid-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; padding: 8px 0; } .agent-section[data-agent="nova"] .bid-label { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); font-weight: 500; letter-spacing: 0.02em; } .agent-section[data-agent="nova"] .bid-bar-track { position: relative; height: 8px; background: rgba(201, 123, 63, 0.10); border-radius: 4px; overflow: hidden; } .agent-section[data-agent="nova"] .bid-bar-track .bid-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--amber); border-radius: 4px; transform-origin: left; transform: scaleX(0); animation: bidBarRise 1.4s cubic-bezier(0.16, 1, 0.3, 1) both; /* width on the element is the target — animation scales from 0 → 1 */ } .agent-section[data-agent="nova"] .bid-bar-track .bid-bar-fill.winner { background: linear-gradient(90deg, #2D7A4F 0%, #3F9C66 100%); box-shadow: 0 0 0 1px rgba(45, 122, 79, 0.18); } .agent-section[data-agent="nova"] .bid-bar-track .bid-bar-fill.danger { background: linear-gradient(90deg, #B14242 0%, #D26060 100%); box-shadow: 0 0 0 1px rgba(177, 66, 66, 0.18); } @keyframes bidBarRise { from { transform: scaleX(0); } to { transform: scaleX(1); } } .agent-section[data-agent="nova"] .bid-price { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } /* Score ring (SVG-based) used inside Nova plausibility cards */ .agent-section[data-agent="nova"] .score-ring { position: relative; width: 80px; height: 80px; flex-shrink: 0; } .agent-section[data-agent="nova"] .score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .agent-section[data-agent="nova"] .score-ring .ring-bg { fill: none; stroke: var(--border); stroke-width: 5; } .agent-section[data-agent="nova"] .score-ring .ring-fill { fill: none; stroke: var(--amber); stroke-width: 5; stroke-linecap: round; /* Circumference of r=35 circle: 2 * π * 35 ≈ 219.9 */ stroke-dasharray: 220; stroke-dashoffset: var(--ring-offset, 220); transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1); } .agent-section[data-agent="nova"] .score-ring .ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-style: normal; font-weight: 500; font-size: 24px; color: var(--ink); letter-spacing: -0.02em; } @keyframes fillRing { to { background: conic-gradient(var(--amber) var(--p, 100%), var(--border) 0); } } /* Legal foundation strip (Dora) */ .agent-section[data-agent="dora"] .legal-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--cream-dim); border: 1px solid var(--border); font-size: 12.5px; font-weight: 500; color: var(--ink); } .agent-section[data-agent="dora"] .legal-chip svg { color: var(--slate); } /* Card elevated for agent sections (reuses v3 pattern but scoped) */ .agent-section .card-elevated { background: var(--cream); border: 1px solid var(--border); box-shadow: 0 2px 0 var(--border-strong); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .agent-section .card-elevated:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(10, 10, 11, 0.12), 0 2px 0 var(--border-strong); border-color: var(--agent); } /* mono class consistency */ .agent-section .mono { font-family: var(--font-mono); } .agent-section .serif { font-family: var(--font-serif); } /* ========== END MERGED AGENT SECTIONS ========== */ /* ============================================================ PREMIUM AGENTS SECTION ANIMATIONS ============================================================ */ /* Aurora gradient backdrop */ .agents-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .agents-aurora .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; will-change: transform; } .agents-aurora .blob-1 { width: 480px; height: 480px; background: radial-gradient(circle, rgba(80, 0, 168, 0.20), transparent 60%); top: 8%; left: 6%; animation: aurora-drift-a 24s ease-in-out infinite; } .agents-aurora .blob-2 { width: 540px; height: 540px; background: radial-gradient(circle, rgba(201, 123, 63, 0.18), transparent 60%); bottom: 4%; right: 6%; animation: aurora-drift-b 28s ease-in-out infinite -8s; } .agents-aurora .blob-3 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(66, 75, 90, 0.14), transparent 60%); top: 38%; left: 42%; animation: aurora-drift-c 32s ease-in-out infinite -14s; } @keyframes aurora-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(60px, -40px) scale(1.08); } 66% { transform: translate(-40px, 60px) scale(0.92); } } @keyframes aurora-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-50px, 30px) scale(1.06); } 66% { transform: translate(40px, -50px) scale(0.94); } } @keyframes aurora-drift-c { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, 40px) scale(1.10); } } /* Headline word stagger */ .headline-words .word { display: inline-block; opacity: 0; transform: translateY(26px); transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.in .headline-words .word { opacity: 1; transform: translateY(0); } .reveal.in .headline-words .word:nth-child(1) { transition-delay: 0.05s; } .reveal.in .headline-words .word:nth-child(2) { transition-delay: 0.14s; } .reveal.in .headline-words .word:nth-child(3) { transition-delay: 0.23s; } .reveal.in .headline-words .word:nth-child(4) { transition-delay: 0.38s; } .reveal.in .headline-words .word:nth-child(5) { transition-delay: 0.49s; } .reveal.in .headline-words .word:nth-child(6) { transition-delay: 0.62s; } /* Italic accent word: clean italic purple with subtle highlight, same as ul-anim elsewhere */ .headline-words .word.accent { color: var(--purple); display: inline; background-image: linear-gradient(180deg, transparent 81%, rgba(80, 0, 168, 0.16) 81%, rgba(80, 0, 168, 0.16) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; background-size: 0% 100%; background-repeat: no-repeat; background-position: left center; padding: 0 0.05em; } .reveal.in .headline-words .word.accent { animation: accent-highlight-sweep 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards; } @keyframes accent-highlight-sweep { to { background-size: 100% 100%; } } /* Agent card 3D mouse-tilt */ .agent-card { transform-style: preserve-3d; perspective: 1200px; will-change: transform; } .agent-card-inner { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; } /* Agent reveal entrance */ .agent-card { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .agent-card.card-in { opacity: 1; transform: translateY(0); } /* Avatar orbital satellite dot - hidden for cleaner look */ .agent-orbit { display: none !important; } .agent-orbit-disabled { position: absolute; inset: -12px; border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.8s ease; } .agent-card.card-in .agent-orbit { opacity: 1; } .agent-orbit-track { position: absolute; inset: 0; animation: orbit-rotate var(--orbit-speed, 9s) linear infinite; animation-direction: var(--orbit-dir, normal); } .agent-orbit-track::after { content: ''; position: absolute; top: 0; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--orbit-color, var(--purple)); box-shadow: 0 0 10px var(--orbit-color, var(--purple)), 0 0 22px var(--orbit-color, var(--purple)); transform: translate(-50%, -50%); } .agent-card.clara .agent-orbit { --orbit-color: var(--purple); --orbit-speed: 8s; --orbit-dir: normal; } .agent-card.dora .agent-orbit { --orbit-color: var(--slate); --orbit-speed: 11s; --orbit-dir: reverse; } .agent-card.nova .agent-orbit { --orbit-color: var(--amber); --orbit-speed: 9s; --orbit-dir: normal; } @keyframes orbit-rotate { to { transform: rotate(360deg); } } /* (previous always-on glow ring removed for cleaner look) */ /* Stat box shimmer on first reveal */ .agent-stats { position: relative; overflow: hidden; } .agent-stats::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; } .agent-card.card-in .agent-stats::after { animation: stat-shimmer 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.55s 1; } @keyframes stat-shimmer { to { transform: translateX(120%); } } /* Stat counter spans (number isolated for animation) */ .agent-stat-value .num-counter { display: inline-block; font-variant-numeric: tabular-nums; } /* List item stagger + checkmark draw */ .agent-card ul li { opacity: 0; transform: translateX(-14px); transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .agent-card.card-in ul li { opacity: 1; transform: translateX(0); } .agent-card.card-in ul li:nth-child(1) { transition-delay: 0.50s; } .agent-card.card-in ul li:nth-child(2) { transition-delay: 0.62s; } .agent-card.card-in ul li:nth-child(3) { transition-delay: 0.74s; } .agent-card.card-in ul li:nth-child(4) { transition-delay: 0.86s; } /* Checkmark draw */ .agent-card ul li svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .agent-card.card-in ul li:nth-child(1) svg path { transition-delay: 0.62s; } .agent-card.card-in ul li:nth-child(2) svg path { transition-delay: 0.74s; } .agent-card.card-in ul li:nth-child(3) svg path { transition-delay: 0.86s; } .agent-card.card-in ul li:nth-child(4) svg path { transition-delay: 0.98s; } .agent-card.card-in ul li svg path { stroke-dashoffset: 0; } /* Constellation line connecting the three agents */ .agents-constellation { position: absolute; top: 14%; left: 0; right: 0; height: 60px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s; } .reveal.in .agents-constellation { opacity: 1; } .agents-constellation svg { width: 100%; height: 100%; } .agents-constellation path { stroke-dasharray: 2 6; stroke-dashoffset: 200; animation: constellation-flow 16s linear infinite; } .reveal.in .agents-constellation path { stroke-dashoffset: 0; } @keyframes constellation-flow { to { stroke-dashoffset: -200; } } /* Section subtle parallax for content */ #agents .max-w-7xl { position: relative; z-index: 2; } /* ============================================================ REDUCED MOTION SUPPORT ============================================================ */ @media (prefers-reduced-motion: reduce) { .agents-aurora .blob, .agent-orbit-track, .agent-avatar-wrap::after, .agents-constellation path, .reveal.in .headline-words .word.accent { animation: none !important; } .agent-card, .agent-card ul li, .headline-words .word, .agents-constellation { opacity: 1 !important; transform: none !important; transition: none !important; } .agent-card ul li svg path { stroke-dashoffset: 0 !important; } .headline-words .word.accent { background-size: 100% 100% !important; color: var(--purple) !important; } .agent-card-tilt { transform: none !important; } } /* ============================================================ PREMIUM SECTION EYEBROW LABELS ============================================================ */ .eyebrow, .eyebrow-center { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--purple); display: inline-flex; align-items: center; gap: 10px; } .eyebrow { width: fit-content; } .eyebrow-center { justify-content: center; width: fit-content; margin-left: auto; margin-right: auto; } /* Small purple dot prefix (replaces the 28px line) */ .eyebrow::before, .eyebrow-center::before, .eyebrow-center::after { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--purple); opacity: 0; transform: scale(0); transition: opacity 0.4s ease 0.15s, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s; } /* The old trailing-dot span no longer needed — leading dot carries the accent */ .eyebrow .eyebrow-dot { display: none; } /* Reveal-driven animations */ .reveal.in .eyebrow::before, .reveal.in .eyebrow-center::before, .reveal.in .eyebrow-center::after { opacity: 1; transform: scale(1); } /* Fallback: if eyebrow is somehow not inside a reveal, show statically */ .no-reveal-fallback .eyebrow::before, .no-reveal-fallback .eyebrow-center::before, .no-reveal-fallback .eyebrow-center::after { opacity: 1; transform: scale(1); } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .eyebrow::before, .eyebrow-center::before, .eyebrow-center::after { transform: scale(1) !important; opacity: 1 !important; transition: none !important; } } /* Agent hero badge inside deep-dive sections — photo avatar + role text */ .agent-section .agent-hero-badge { display: inline-flex; align-items: center; gap: 14px; padding: 8px 18px 8px 8px; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--border); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .agent-section .agent-hero-badge .photo { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--cream-dim); box-shadow: 0 0 0 1px rgba(10, 10, 11, 0.08), 0 4px 12px -3px rgba(10, 10, 11, 0.16); position: relative; } .agent-section .agent-hero-badge .photo img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; } .agent-section .agent-hero-badge .photo-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-style: normal; font-weight: 500; font-size: 22px; background: var(--agent-soft); color: var(--agent); z-index: 0; } .agent-section .agent-hero-badge .role { font-size: 13px; color: var(--ink); font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; } /* AI icon links in footer */ .ai-icon-link { width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; flex-shrink: 0; } .ai-icon-link:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -4px rgba(10, 10, 11, 0.22); } .ai-icon-link img { display: block; width: 24px; height: 24px; border-radius: 6px; } /* ============================================================ AGENT SECTION BRIDGE (transition into Clara / Dora / Nova) ============================================================ */ .agent-bridge { text-align: center; padding: 80px 24px 24px; position: relative; } .agent-bridge .connector-line { width: 1px; height: 56px; margin: 0 auto 28px; background: linear-gradient(to bottom, transparent 0%, var(--agent) 50%, transparent 100%); opacity: 0; transform: scaleY(0); transform-origin: top; transition: opacity 0.6s ease 0.1s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; } .reveal.in .connector-line { opacity: 1; transform: scaleY(1); } .agent-bridge .chapter-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--cream); font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 18px; } .agent-bridge .chapter-num { color: var(--agent); font-weight: 600; } .agent-bridge .chapter-divider { width: 1px; height: 11px; background: var(--border-strong); } .agent-bridge .chapter-label { color: var(--muted); font-weight: 500; } .agent-bridge .chapter-title { font-family: var(--font-serif); font-style: normal; font-weight: 500; font-size: clamp(2rem, 3.6vw, 2.75rem); color: var(--ink); line-height: 1; letter-spacing: -0.02em; margin: 0; } .agent-bridge .chapter-title .accent { color: var(--agent); } /* ============================================================ PREMIUM FEATURE CARDS (Clara / Dora / Nova × 4 each = 12 cards) Unified design system, brand color cascades via [data-agent] ============================================================ */ /* --- Card chrome --- */ .agent-section .feature-visual { position: relative; background: var(--cream); border: 1px solid var(--border); border-radius: 18px; padding: 30px 28px; overflow: hidden; box-shadow: 0 1px 0 rgba(10, 10, 11, 0.04), 0 2px 4px rgba(10, 10, 11, 0.03), 0 24px 48px -24px rgba(10, 10, 11, 0.10); transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1); isolation: isolate; } /* Top edge accent bar — scales in on reveal */ .agent-section .feature-visual::before { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 100%; background: linear-gradient(90deg, transparent 0%, var(--agent) 30%, var(--agent) 70%, transparent 100%); transform: scaleX(0); transform-origin: center; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; z-index: 2; } .feature-block.reveal.in .feature-visual::before { transform: scaleX(1); } /* Radial glow from top-right — subtle agent color */ .agent-section .feature-visual::after { content: ''; position: absolute; top: -100px; right: -100px; width: 260px; height: 260px; background: radial-gradient(circle, var(--agent-glow) 0%, transparent 65%); opacity: 0.55; pointer-events: none; transition: opacity 0.55s ease; z-index: -1; } .feature-block:hover .feature-visual::after { opacity: 0.95; } /* Card hover */ .feature-block:hover .feature-visual { transform: translateY(-4px); border-color: rgba(10, 10, 11, 0.10); box-shadow: 0 1px 0 rgba(10, 10, 11, 0.04), 0 4px 10px rgba(10, 10, 11, 0.04), 0 40px 80px -28px rgba(10, 10, 11, 0.16); } /* --- Feature number label (e.g. "01 · RELEVANCE CHECK") --- */ .agent-section .feature-num { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--agent); margin-bottom: 22px; letter-spacing: 0.12em; text-transform: uppercase; } .agent-section .feature-num::before { content: ''; width: 36px; height: 1px; background: var(--agent); display: inline-block; transform: scaleX(0); transform-origin: left; transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; } .feature-block.reveal.in .feature-num::before { transform: scaleX(1); } /* --- Feature headline polish --- */ .agent-section .feature-h { font-family: var(--font-serif); font-style: normal; font-weight: 400; font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.13; color: var(--ink); letter-spacing: -0.015em; margin-bottom: 18px; opacity: 0; transform: translateY(10px); transition: opacity 0.65s ease 0.3s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; } .feature-block.reveal.in .feature-h { opacity: 1; transform: translateY(0); } /* Feature paragraph reveal */ .agent-section .feature-block .text-muted.text-lg { opacity: 0; transform: translateY(8px); transition: opacity 0.65s ease 0.45s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.45s; } .feature-block.reveal.in .text-muted.text-lg { opacity: 1; transform: translateY(0); } /* --- Card header (mono uppercase label at top of visual) --- */ .agent-section .feature-visual > .flex.items-center.justify-between.mb-5, .agent-section .feature-visual > .text-xs.text-muted.uppercase { padding-bottom: 14px; margin-bottom: 18px !important; border-bottom: 1px solid var(--border); position: relative; } /* --- Card rows: stagger reveal + hover --- */ .agent-section .feature-visual .space-y-2 > div, .agent-section .feature-visual .space-y-2\.5 > div, .agent-section .feature-visual .space-y-3 > div, .agent-section .feature-visual .grid.grid-cols-2 > div { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; } .feature-block.reveal.in .feature-visual .space-y-2 > div, .feature-block.reveal.in .feature-visual .space-y-2\.5 > div, .feature-block.reveal.in .feature-visual .space-y-3 > div, .feature-block.reveal.in .feature-visual .grid.grid-cols-2 > div { opacity: 1; transform: translateY(0); } .feature-block.reveal.in .feature-visual .space-y-2 > div:nth-child(1), .feature-block.reveal.in .feature-visual .space-y-2\.5 > div:nth-child(1), .feature-block.reveal.in .feature-visual .space-y-3 > div:nth-child(1), .feature-block.reveal.in .feature-visual .grid.grid-cols-2 > div:nth-child(1) { transition-delay: 0.35s, 0.35s, 0s, 0s, 0s; } .feature-block.reveal.in .feature-visual .space-y-2 > div:nth-child(2), .feature-block.reveal.in .feature-visual .space-y-2\.5 > div:nth-child(2), .feature-block.reveal.in .feature-visual .space-y-3 > div:nth-child(2), .feature-block.reveal.in .feature-visual .grid.grid-cols-2 > div:nth-child(2) { transition-delay: 0.45s, 0.45s, 0s, 0s, 0s; } .feature-block.reveal.in .feature-visual .space-y-2 > div:nth-child(3), .feature-block.reveal.in .feature-visual .space-y-2\.5 > div:nth-child(3), .feature-block.reveal.in .feature-visual .space-y-3 > div:nth-child(3), .feature-block.reveal.in .feature-visual .grid.grid-cols-2 > div:nth-child(3) { transition-delay: 0.55s, 0.55s, 0s, 0s, 0s; } .feature-block.reveal.in .feature-visual .space-y-2 > div:nth-child(4), .feature-block.reveal.in .feature-visual .space-y-2\.5 > div:nth-child(4), .feature-block.reveal.in .feature-visual .space-y-3 > div:nth-child(4), .feature-block.reveal.in .feature-visual .grid.grid-cols-2 > div:nth-child(4) { transition-delay: 0.65s, 0.65s, 0s, 0s, 0s; } /* Inline-styled rows: hover micro-interaction */ .agent-section .feature-visual .flex.items-center.p-3:hover, .agent-section .feature-visual .flex.items-start.p-3:hover, .agent-section .feature-visual .flex.items-center.gap-3.p-3:hover { transform: translateX(3px); border-color: var(--agent) !important; box-shadow: 0 6px 18px -8px rgba(10, 10, 11, 0.10); } .agent-section .feature-visual .p-3.rounded-md.border:not(.flex):hover, .agent-section .feature-visual .p-4.rounded-md.border:hover { border-color: var(--agent) !important; box-shadow: 0 6px 18px -8px rgba(10, 10, 11, 0.10); } /* Risk rows: hover */ .agent-section .feature-visual .risk-row { transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease; } .agent-section .feature-visual .risk-row:hover { transform: translateX(3px); } .agent-section .feature-visual .risk-row.high:hover { background: rgba(177, 66, 66, 0.13); } .agent-section .feature-visual .risk-row.danger:hover { background: rgba(177, 66, 66, 0.13); } .agent-section .feature-visual .risk-row.medium:hover { background: rgba(201, 123, 63, 0.13); } .agent-section .feature-visual .risk-row.ok:hover { background: rgba(45, 122, 79, 0.13); } /* --- Progress bar polish (Clara feat 02) --- */ .agent-section .feature-visual .bar-bg { background: var(--border); border-radius: 4px; height: 5px; overflow: hidden; position: relative; } .agent-section .feature-visual .bar-fill { height: 100%; border-radius: 4px; transform-origin: left; transform: scaleX(0); transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s; width: 100% !important; position: relative; overflow: hidden; } .feature-block.reveal.in .feature-visual .bar-fill { transform: scaleX(1); } /* Shimmer pass over the progress bar */ .agent-section .feature-visual .bar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%); transform: translateX(-100%); animation: bar-shimmer 3s ease-in-out 1.8s infinite; } @keyframes bar-shimmer { 0% { transform: translateX(-100%); } 50%, 100% { transform: translateX(200%); } } /* --- Clause-tag (unify across all agents) --- */ .agent-section .clause-tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 5px; background: var(--agent-soft); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--agent); letter-spacing: 0.02em; line-height: 1.4; flex-shrink: 0; } /* --- Score-ring reveal animation (Nova feat 02) --- */ .agent-section[data-agent="nova"] .score-ring .ring-fill { stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s; } .feature-block.reveal.in .score-ring .ring-fill { stroke-dashoffset: var(--ring-offset, 156); } .agent-section[data-agent="nova"] .score-ring .ring-num { opacity: 0; transition: opacity 0.6s ease 1.2s; } .feature-block.reveal.in .score-ring .ring-num { opacity: 1; } /* --- Team avatar circles (Clara feat 04): subtle scale on row hover --- */ .agent-section .feature-visual .w-8.h-8.rounded-full { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; } .agent-section .feature-visual .flex.items-center.p-3:hover .w-8.h-8.rounded-full { transform: scale(1.08); box-shadow: 0 0 0 3px var(--agent-glow); } /* --- Mobile: tighter padding --- */ @media (max-width: 768px) { .agent-section .feature-visual { padding: 22px 18px; border-radius: 14px; } .agent-section .feature-num { margin-bottom: 16px; } } /* --- Reduced motion --- */ @media (prefers-reduced-motion: reduce) { .agent-section .feature-visual, .agent-section .feature-visual::before, .agent-section .feature-visual::after, .agent-section .feature-visual .bar-fill, .agent-section .feature-visual .bar-fill::after, .agent-section .feature-num::before, .agent-section .feature-h, .agent-section .feature-block .text-muted.text-lg, .agent-section .feature-visual .space-y-2 > div, .agent-section .feature-visual .space-y-2\.5 > div, .agent-section .feature-visual .space-y-3 > div, .agent-section .feature-visual .grid.grid-cols-2 > div, .agent-section[data-agent="nova"] .score-ring .ring-fill, .agent-section[data-agent="nova"] .score-ring .ring-num { animation: none !important; transition: opacity 0.2s ease !important; transform: none !important; opacity: 1 !important; } .feature-block.reveal.in .feature-visual::before { transform: scaleX(1); } .feature-block.reveal.in .feature-num::before { transform: scaleX(1); } .feature-block.reveal.in .feature-visual .bar-fill { transform: scaleX(1); } } /* ============================================================ PREMIUM AGENT PORTRAITS (adapted from reference design) Aurora glow + rotating ring + portrait + pulsing badge + floating data cards. Per-agent color cascades via .clara/.dora/.nova ============================================================ */ /* --- Portrait container --- */ .agent-portrait-wrap { position: relative; aspect-ratio: 1 / 1; max-width: 220px; width: 100%; margin: 0 auto 24px; isolation: isolate; } /* --- Aurora glow behind portrait --- */ .agent-aurora { position: absolute; inset: -10% -12% -10% -12%; z-index: 0; filter: blur(24px); opacity: 0.7; animation: portrait-aurora 9s cubic-bezier(0.16, 1, 0.3, 1) infinite; pointer-events: none; } .agent-card.clara .agent-aurora { background: radial-gradient(60% 55% at 50% 45%, rgba(80, 0, 168, 0.55), rgba(80, 0, 168, 0.15) 55%, transparent 75%); } .agent-card.dora .agent-aurora { background: radial-gradient(60% 55% at 50% 45%, rgba(66, 75, 90, 0.50), rgba(66, 75, 90, 0.18) 55%, transparent 75%); } .agent-card.nova .agent-aurora { background: radial-gradient(60% 55% at 50% 45%, rgba(201, 123, 63, 0.55), rgba(201, 123, 63, 0.20) 55%, transparent 75%); } @keyframes portrait-aurora { 0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.7; } 50% { transform: scale(1.05) translate(2%, -1%); opacity: 0.95; } } /* --- Concentric rotating ring (sits outside the portrait edges) --- */ .agent-ring { position: absolute; inset: -6% -6% -6% -6%; border: 1px dashed rgba(10, 10, 11, 0.18); border-radius: 26px; z-index: 0; pointer-events: none; animation: ring-rotate 60s linear infinite; } .agent-card.clara .agent-ring { border-color: rgba(80, 0, 168, 0.30); } .agent-card.dora .agent-ring { border-color: rgba(66, 75, 90, 0.30); } .agent-card.nova .agent-ring { border-color: rgba(201, 123, 63, 0.32); } .agent-card.dora .agent-ring { animation-direction: reverse; } @keyframes ring-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* --- Portrait image (fills the entire wrap, no gap below) --- */ .agent-portrait-img { position: absolute; inset: 0; z-index: 1; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 40px -18px rgba(10, 10, 11, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.6) inset; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .agent-portrait-img img, .agent-portrait-img > div { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .agent-portrait-img::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 11, 0.16) 100%); pointer-events: none; } .agent-card:hover .agent-portrait-img { transform: scale(1.02) translateY(-2px); } /* --- "Agent / Online" badge --- */ .agent-online-badge { position: absolute; top: 10px; left: 10px; z-index: 3; background: rgba(10, 10, 11, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; padding: 5px 10px 5px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, 0.12); font-weight: 500; } .agent-online-badge .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #6BE39A; box-shadow: 0 0 0 0 rgba(107, 227, 154, 0.7); animation: pulse-online 2s ease-out infinite; } @keyframes pulse-online { 0% { box-shadow: 0 0 0 0 rgba(107, 227, 154, 0.60); } 70% { box-shadow: 0 0 0 8px rgba(107, 227, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(107, 227, 154, 0); } } /* --- Agent name + role (sits below portrait, centered) --- */ .agent-portrait-meta { text-align: center; margin-bottom: 24px; } .agent-portrait-meta .agent-name { font-family: var(--font-serif); font-style: normal; font-weight: 500; font-size: 2rem; line-height: 1; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 6px; } .agent-portrait-meta .agent-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); font-weight: 500; } /* --- Mobile (< 768px): keep cards inside the portrait area --- */ @media (max-width: 768px) { .agent-portrait-wrap { max-width: 180px; } } /* --- Reduced motion --- */ @media (prefers-reduced-motion: reduce) { .agent-aurora, .agent-ring, .agent-online-badge .pulse-dot { animation: none !important; } } /* ============================================================ PREMIUM STAT CARDS for overview agents ============================================================ */ .agent-stats { background: transparent !important; margin: 24px 0 !important; padding-top: 18px; padding-bottom: 18px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: repeat(3, 1fr); position: relative; } .agent-stats::before { content: ''; position: absolute; top: -1px; left: 0; height: 1px; width: 30%; background: linear-gradient(90deg, var(--card-glow-strong, var(--purple)) 0%, transparent 100%); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; } .agent-card.clara .agent-stats::before { background: linear-gradient(90deg, var(--purple) 0%, transparent 100%); } .agent-card.dora .agent-stats::before { background: linear-gradient(90deg, var(--slate) 0%, transparent 100%); } .agent-card.nova .agent-stats::before { background: linear-gradient(90deg, var(--amber) 0%, transparent 100%); } .agent-card.reveal.in .agent-stats::before { transform: scaleX(1); } .agent-stat { padding: 4px 8px; text-align: center; border-right: 1px solid var(--border); transition: background 0.3s ease; } .agent-stat:last-child { border-right: none; } .agent-stats .agent-stat-value { font-family: var(--font-serif); font-style: normal; font-weight: 500; font-size: 1.6rem; color: var(--ink); letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px; display: inline-block; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease; } .agent-stat:hover .agent-stat-value { transform: scale(1.08); } .agent-card.clara .agent-stat:hover .agent-stat-value { color: var(--purple); } .agent-card.dora .agent-stat:hover .agent-stat-value { color: var(--slate); } .agent-card.nova .agent-stat:hover .agent-stat-value { color: var(--amber); } .agent-stats .agent-stat-label { font-family: var(--font-sans); font-size: 10px; color: var(--muted); line-height: 1.3; text-transform: none; letter-spacing: 0; } /* ════════════════════════════════════════════════════════════ PREMIUM POLISH LAYER Senior-design refinements applied site-wide. Inspired by Linear, Vercel, Stripe, Sana, Cursor. ════════════════════════════════════════════════════════════ */ /* ---------- 1. Motion system ---------- */ :root { --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 150ms; --dur-base: 280ms; --dur-slow: 560ms; --dur-cinema: 1100ms; } /* ---------- 2. Global selection + scroll polish ---------- */ ::selection { background: rgba(80, 0, 168, 0.18); color: inherit; text-shadow: none; } ::-moz-selection { background: rgba(80, 0, 168, 0.18); color: inherit; text-shadow: none; } /* On dark sections keep selection visible by using lighter purple */ .pricing-card.featured ::selection, .win-plan-v2 ::selection, .bg-ink ::selection, [data-theme="dark"] ::selection { background: rgba(201, 160, 245, 0.32); color: inherit; } .pricing-card.featured ::-moz-selection, .win-plan-v2 ::-moz-selection, .bg-ink ::-moz-selection, [data-theme="dark"] ::-moz-selection { background: rgba(201, 160, 245, 0.32); color: inherit; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------- 3. Premium button system ---------- Universal upgrade to any `.inline-flex.rounded-full` button. Adds: depth shadow, magnetic hover, subtle shine sweep. ------------------------------------------------------------ */ a.inline-flex.rounded-full, button.inline-flex.rounded-full, a.inline-flex.items-center.gap-2[class*="bg-ink"], a.inline-flex.items-center.gap-2[class*="bg-cream"][href] { position: relative; isolation: isolate; transition: transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo), background-color var(--dur-base) var(--ease-out-expo), color var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo); will-change: transform; } a.inline-flex.rounded-full:hover, button.inline-flex.rounded-full:hover { transform: translateY(-1px); } a.inline-flex.rounded-full:active, button.inline-flex.rounded-full:active { transform: translateY(0); transition-duration: var(--dur-fast); } /* Primary ink-on-cream / cream-on-ink CTAs get a soft shadow */ a.bg-ink.rounded-full, a.bg-cream.rounded-full { box-shadow: 0 1px 2px rgba(10, 10, 11, 0.06), 0 4px 16px -4px rgba(10, 10, 11, 0.10); } a.bg-ink.rounded-full:hover { box-shadow: 0 2px 4px rgba(80, 0, 168, 0.18), 0 12px 32px -8px rgba(80, 0, 168, 0.32); } a.bg-cream.rounded-full:hover { box-shadow: 0 2px 4px rgba(247, 244, 238, 0.18), 0 12px 32px -8px rgba(80, 0, 168, 0.40); } /* SVG arrows in CTAs subtly translate on hover */ a.inline-flex.rounded-full svg, button.inline-flex.rounded-full svg { transition: transform var(--dur-base) var(--ease-out-expo); } a.inline-flex.rounded-full:hover svg[viewBox*="24 24"], button.inline-flex.rounded-full:hover svg[viewBox*="24 24"] { transform: translateX(2px); } /* ---------- 4. Navigation refinement ---------- */ nav.sticky.top-0 { transition: background-color var(--dur-slow) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo), border-color var(--dur-slow) var(--ease-out-expo), backdrop-filter var(--dur-slow) var(--ease-out-expo); } nav.sticky.top-0.is-scrolled { background: rgba(247, 244, 238, 0.78); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: rgba(10, 10, 11, 0.06); box-shadow: 0 1px 0 rgba(10, 10, 11, 0.03), 0 8px 24px -16px rgba(10, 10, 11, 0.10); } /* Refined nav link underline */ nav .hover-line { position: relative; } nav .hover-line::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform-origin: right center; transform: scaleX(0); transition: transform var(--dur-base) var(--ease-out-expo); } nav .hover-line:hover::after { transform-origin: left center; transform: scaleX(1); } /* ---------- 5. Hero typography rhythm ---------- */ section:first-of-type .section-h, section:first-of-type .hero-h, section.relative.overflow-hidden:first-of-type h1 { letter-spacing: -0.035em; line-height: 0.98; } section.relative.overflow-hidden:first-of-type h1 em, section.relative.overflow-hidden:first-of-type h1 .accent { font-style: normal; color: var(--purple); } /* ---------- 6. Section rhythm improvements ---------- */ /* Slightly more breathing room between major sections on desktop */ @media (min-width: 1024px) { section[id]:not(:first-of-type) { position: relative; } } /* Hairline section dividers on light/light transitions */ section.bg-cream-dim + section:not([class*="bg-"]):not([id="cta"]), section.bg-cream + section.bg-cream-dim { position: relative; } /* ---------- 7. Agent card chrome polish ---------- */ .agent-card { position: relative; transition: transform var(--dur-slow) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo); will-change: transform; } .agent-card:hover { transform: translateY(-4px); z-index: 2; } /* Card edges get a subtle inner highlight on hover */ .agent-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: 0 0 0 1px transparent inset; transition: box-shadow var(--dur-slow) var(--ease-out-expo); } .agent-card.clara:hover::after { box-shadow: 0 0 0 1px rgba(80, 0, 168, 0.14) inset; } .agent-card.dora:hover::after { box-shadow: 0 0 0 1px rgba(66, 75, 90, 0.14) inset; } .agent-card.nova:hover::after { box-shadow: 0 0 0 1px rgba(201, 123, 63, 0.16) inset; } /* Portrait subtly leans into camera on hover */ .agent-card:hover .agent-portrait-img { transform: scale(1.025) translateY(-3px); } .agent-card:hover .agent-aurora { animation-duration: 6s; opacity: 1; } /* ---------- 8. Premium pricing cards ---------- */ #pricing [class*="rounded-"][class*="border"], #pricing .pricing-card { position: relative; transition: transform var(--dur-slow) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo), border-color var(--dur-slow) var(--ease-out-expo); } #pricing [class*="rounded-"][class*="border"]:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(10, 10, 11, 0.04), 0 20px 48px -16px rgba(10, 10, 11, 0.14); border-color: rgba(10, 10, 11, 0.12); } /* Featured plan visual distinction (uses purple-tinted border) */ #pricing [class*="border-purple"], #pricing [class*="bg-purple"], #pricing .pricing-featured { position: relative; } #pricing [class*="border-purple"]::before, #pricing .pricing-featured::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, rgba(80, 0, 168, 0.6) 0%, rgba(80, 0, 168, 0.2) 40%, transparent 70% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } /* ---------- 9. CTA section drama ---------- */ #cta { isolation: isolate; } #cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(80, 0, 168, 0.18), transparent 50%), radial-gradient(circle at 80% 70%, rgba(201, 123, 63, 0.12), transparent 50%), linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%); pointer-events: none; z-index: 0; animation: cta-aurora 14s var(--ease-out-expo) infinite; } @keyframes cta-aurora { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06) translate(-1%, 1%); } } /* Subtle grid texture on CTA */ #cta::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(247, 244, 238, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(247, 244, 238, 0.04) 1px, transparent 1px); background-size: 64px 64px; background-position: center center; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); pointer-events: none; z-index: 0; opacity: 0.5; } #cta > *:not(.bg-glow) { position: relative; z-index: 2; } #cta .bg-glow { z-index: 1; } #cta .reveal, #cta .max-w-5xl { position: relative; z-index: 3; } #cta .section-h { letter-spacing: -0.04em; } #cta a.bg-cream:hover { background: var(--purple); color: var(--cream); border-color: transparent; } /* ---------- 10. Footer hierarchy ---------- */ footer { position: relative; } footer a { transition: color var(--dur-base) var(--ease-out-expo); } footer .text-muted:hover, footer a:hover { color: var(--ink); } /* Subtle separator above footer */ footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1200px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(10, 10, 11, 0.10) 20%, rgba(10, 10, 11, 0.10) 80%, transparent 100% ); } /* ---------- 11. Reveal animation upgrade ---------- Smoother entrance with a soft scale + slide. ------------------------------------------------------------ */ .reveal { transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); will-change: opacity, transform; } /* Stagger for child reveals */ .reveal[data-d="1"] { transition-delay: 0ms; } .reveal[data-d="2"] { transition-delay: 80ms; } .reveal[data-d="3"] { transition-delay: 160ms; } .reveal[data-d="4"] { transition-delay: 240ms; } .reveal[data-d="5"] { transition-delay: 320ms; } /* ---------- 12. (Global grain texture removed — caused stacking issues) ---------- */ /* ---------- 13. (Mobile typography handled by new fluid type system below) ---------- */ @media (max-width: 480px) { .agent-portrait-wrap { max-width: 200px; } } /* ---------- 14. Focus states (accessibility + polish) ---------- */ a:focus-visible, button:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 4px; } a.inline-flex.rounded-full:focus-visible, button.inline-flex.rounded-full:focus-visible { outline-offset: 4px; border-radius: 9999px; } /* ---------- 15. Image loading polish ---------- */ img { transition: opacity var(--dur-base) var(--ease-out-expo); } img[loading="lazy"]:not([data-loaded]) { opacity: 0; } img[loading="lazy"][data-loaded] { opacity: 1; } /* ════════════════════════════════════════════════════════════ RESPONSIVE TYPOGRAPHY SYSTEM Geist (primary) + Instrument Serif (editorial accents only) Fluid scale via clamp(min, preferred, max). Inspired by Superside AI Creative, Sana Labs, Linear, Vercel. ════════════════════════════════════════════════════════════ */ :root { /* ---- DISPLAY (hero) ---- */ /* Mobile 40-52px → Tablet 56-72px → Desktop 72-96px */ --type-display: clamp(2.5rem, 6vw + 0.5rem, 6rem); /* 40 → 96 */ --type-display-sm: clamp(2.25rem, 5vw + 0.5rem, 5rem); /* 36 → 80 */ /* ---- SECTION HEADLINES ---- */ /* Mobile 28-36px → Tablet 32-44px → Desktop 40-56px */ --type-h1: clamp(1.75rem, 3.5vw + 0.5rem, 3.5rem); /* 28 → 56 */ --type-h2: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem); /* 24 → 40 */ --type-h3: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);/* 20 → 28 */ --type-h4: clamp(1.125rem, 1vw + 0.5rem, 1.375rem);/* 18 → 22 */ /* ---- BODY ---- */ /* Mobile 15-16px → Desktop 16-18px */ --type-body-lg: clamp(1rem, 0.4vw + 0.875rem, 1.125rem); /* 16 → 18 */ --type-body: clamp(0.9375rem, 0.2vw + 0.875rem, 1rem);/* 15 → 16 */ --type-body-sm: 0.875rem; /* 14px — captions */ --type-caption: 0.8125rem; /* 13px */ --type-eyebrow: 0.75rem; /* 12px — mono labels */ --type-micro: 0.6875rem; /* 11px — fine print */ /* ---- LINE HEIGHTS ---- */ --lh-display: 0.98; /* hero — tight cinematic */ --lh-headline: 1.05; /* section heads */ --lh-tight: 1.2; /* small heads */ --lh-body: 1.6; /* readable body */ --lh-loose: 1.7; /* generous prose */ --lh-ui: 1.4; /* buttons, labels */ /* ---- LETTER SPACING ---- */ --ls-display: -0.04em; /* hero, very tight */ --ls-headline: -0.025em; /* section heads */ --ls-tight: -0.015em; /* small heads */ --ls-body: -0.005em; /* body, calm */ --ls-ui: -0.01em; /* buttons */ --ls-eyebrow: 0.08em; /* mono uppercase labels */ --ls-eyebrow-wide: 0.12em; } /* ───────────────────────────────────────────────────────── APPLY TOKENS TO BODY + ELEMENT SELECTORS Override existing utility classes with !important where needed to enforce the system across the site. ───────────────────────────────────────────────────────── */ body { font-family: var(--font-sans); font-size: var(--type-body-lg); line-height: var(--lh-body); letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ---- HERO DISPLAY ---- Any heading inside the first
with .overflow-hidden OR explicitly tagged .hero-h gets the display scale. */ section.relative.overflow-hidden:first-of-type h1, .hero-h { font-size: var(--type-display) !important; line-height: var(--lh-display) !important; letter-spacing: var(--ls-display) !important; font-weight: 500; } /* ---- SECTION HEADLINES ---- .section-h is used site-wide. Anchor it to fluid scale. */ .section-h, h2.serif { font-size: var(--type-h1) !important; line-height: var(--lh-headline) !important; letter-spacing: var(--ls-headline) !important; font-weight: 500; } /* CTA-area heads slightly larger */ #cta .section-h { font-size: clamp(2rem, 4vw + 0.5rem, 4rem) !important; /* 32 → 64 */ } /* Smaller section heads (used inside columns / cards) */ .feature-h, h3.serif { font-size: var(--type-h2) !important; line-height: var(--lh-headline) !important; letter-spacing: var(--ls-headline) !important; font-weight: 500; } h4 { font-size: var(--type-h3); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 500; } h5, h6 { font-size: var(--type-h4); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 500; } /* ---- BODY PARAGRAPHS ---- */ p { line-height: var(--lh-body); } .text-lg { font-size: var(--type-body-lg) !important; line-height: var(--lh-loose) !important; } /* ---- EYEBROW / MONO LABELS ---- */ .eyebrow, .eyebrow-center, .mono { font-family: var(--font-mono); font-size: var(--type-eyebrow); line-height: var(--lh-ui); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: 500; } /* ---- UI / BUTTONS / NAVIGATION ---- */ nav, button, .btn { letter-spacing: var(--ls-ui); } /* Pill buttons — clean SaaS feel */ a.inline-flex.rounded-full, button.inline-flex.rounded-full { letter-spacing: var(--ls-ui); font-weight: 500; line-height: var(--lh-ui); } /* ───────────────────────────────────────────────────────── INSTRUMENT SERIF — STRATEGIC USAGE ONLY Reserved for: • .accent / .serif spans inside headlines • / emphasis • .editorial display moments Geist owns everything else. ───────────────────────────────────────────────────────── */ .accent, .editorial, .section-h .accent, .hero-h .accent, h1 .accent, h2 .accent, h3 .accent { font-family: var(--font-sans); font-style: normal; font-weight: 600; letter-spacing: -0.02em; } /* Inline emphasis in body copy stays italic (synthetic oblique) */ p em, li em, p i, li i, blockquote em { font-style: normal; } /* ---- SECTION RHYTHM ---- Calm vertical pacing between major content blocks. Generous on desktop, tighter on mobile. */ @media (min-width: 1024px) { section[id] { padding-top: clamp(5rem, 6vw, 8rem); padding-bottom: clamp(5rem, 6vw, 8rem); } } @media (max-width: 1023px) and (min-width: 768px) { section[id] { padding-top: 4.5rem; padding-bottom: 4.5rem; } } @media (max-width: 767px) { section[id] { padding-top: 3.5rem; padding-bottom: 3.5rem; } } /* ---- TIGHTER HEADLINE → BODY SPACING ---- The space between heading and following paragraph in editorial typography is ~0.5-0.75em of the heading. */ .section-h + p, .hero-h + p, h1 + p, h2 + p, h3 + p { margin-top: clamp(1rem, 1.5vw, 1.5rem); } /* ---- MOBILE-SPECIFIC PRESERVE CINEMATIC FEEL ---- Override Tailwind's text-5xl/text-7xl that fights the system */ @media (max-width: 767px) { .text-5xl, .text-6xl, .text-7xl, .text-8xl { font-size: var(--type-display) !important; line-height: var(--lh-display) !important; letter-spacing: var(--ls-display) !important; } .text-4xl { font-size: var(--type-h1) !important; line-height: var(--lh-headline) !important; } .text-3xl { font-size: var(--type-h2) !important; line-height: var(--lh-headline) !important; } } /* ---- TABLET-SPECIFIC ---- */ @media (min-width: 768px) and (max-width: 1023px) { .section-h { font-size: clamp(2rem, 4vw + 0.5rem, 2.75rem) !important; /* 32 → 44 */ } } /* ════════════════════════════════════════════════════════════ ANNOUNCEMENT BAR — 7-day free trial offer ════════════════════════════════════════════════════════════ */ .announcement-bar { position: relative; overflow: hidden; border-bottom: 1px solid rgba(247, 244, 238, 0.06); /* Subtle purple-tinted depth */ background: linear-gradient(90deg, rgba(80, 0, 168, 0.12) 0%, transparent 40%, transparent 60%, rgba(201, 123, 63, 0.08) 100%), var(--ink); } .announcement-bar > div { position: relative; z-index: 1; } /* Live pulse dot */ .announcement-dot { width: 6px; height: 6px; border-radius: 50%; background: #6BE39A; box-shadow: 0 0 0 0 rgba(107, 227, 154, 0.6); animation: announcement-pulse 2s ease-out infinite; flex-shrink: 0; } @keyframes announcement-pulse { 0% { box-shadow: 0 0 0 0 rgba(107, 227, 154, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(107, 227, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(107, 227, 154, 0); } } /* CTA link — underlined with hover lift */ .announcement-cta { color: var(--cream); position: relative; padding-bottom: 2px; transition: color var(--dur-base) var(--ease-out-expo); } .announcement-cta::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left center; transition: transform var(--dur-base) var(--ease-out-expo); } .announcement-cta:hover { color: #C8A6FF; } .announcement-cta:hover::after { transform: scaleX(1.05); } /* Mobile: stack the CTA below on very narrow screens */ @media (max-width: 480px) { .announcement-bar > div { gap: 0.5rem 0.75rem; font-size: 0.6875rem; } } /* ---- TABULAR NUMBERS for stats ---- */ .num-counter, .stat-num, .pricing-amount, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'cv11' 1; } /* ---- HEADING BALANCE (better wrap on multi-line heads) ---- */ .section-h, .hero-h, h1, h2, h3 { text-wrap: balance; -webkit-text-wrap: balance; } /* ---- BODY PROSE: pretty line breaks ---- */ p { text-wrap: pretty; -webkit-text-wrap: pretty; } /* ════════════════════════════════════════════════════════════ ROI CALCULATOR — three-agent tabs + combined view ════════════════════════════════════════════════════════════ */ /* ---------- Premium shell ---------- */ .roi-section { position: relative; overflow: hidden; } .roi-section::before { content: ''; position: absolute; top: 12%; left: 50%; width: min(860px, 92%); height: 480px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(80, 0, 168, 0.07), transparent 68%); pointer-events: none; z-index: 0; } .roi-section > div { position: relative; z-index: 1; } .roi-shell { position: relative; background: var(--cream); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 28px 64px -32px rgba(10, 10, 11, 0.22), 0 2px 6px -3px rgba(10, 10, 11, 0.05); overflow: hidden; } .roi-shell::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--purple) 0%, var(--slate) 50%, var(--amber) 100%); z-index: 2; } @media (max-width: 640px) { .roi-shell { border-radius: 18px; } } /* Tabs as the shell's header bar */ .roi-shell .roi-tabs { margin: 0; background: linear-gradient(180deg, rgba(10, 10, 11, 0.022), rgba(10, 10, 11, 0)); } .roi-shell .roi-tab { padding: 1.375rem 0.5rem; } /* Calculator body, integrated into the shell */ .roi-card { padding: 1.75rem 1.5rem; } @media (min-width: 640px) { .roi-card { padding: 2.5rem; } } @media (min-width: 1024px) { .roi-card { padding: 3rem 3.25rem; } } /* ---------- Tab bar ---------- */ .roi-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 2rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .roi-tabs::-webkit-scrollbar { display: none; } .roi-tab { position: relative; background: transparent; border: none; padding: 1rem 0.5rem 1.125rem; text-align: center; cursor: pointer; transition: background 0.2s var(--ease-out-expo), color 0.2s var(--ease-out-expo); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; flex-direction: column; align-items: center; gap: 0.375rem; min-width: 0; } .roi-tab:hover { background: rgba(10, 10, 11, 0.025); color: var(--ink); } .roi-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); } .roi-tab.is-active[data-tab="clara"] { border-bottom-color: var(--purple); } .roi-tab.is-active[data-tab="dora"] { border-bottom-color: var(--slate); } .roi-tab.is-active[data-tab="nova"] { border-bottom-color: var(--amber); } .roi-tab-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; opacity: 0.5; transition: opacity 0.2s var(--ease-out-expo); } .roi-tab.is-active .roi-tab-dot { opacity: 1; } .roi-tab-dots { display: inline-flex; gap: 3px; align-items: center; } .roi-tab-name { font-family: var(--font-sans); font-weight: 500; font-size: 0.9375rem; letter-spacing: -0.01em; line-height: 1; } .roi-tab-role { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); line-height: 1; font-weight: 500; } /* Hide dots row on very narrow screens to save space; keep name + role */ @media (max-width: 480px) { .roi-tab { padding: 0.75rem 0.25rem 1rem; gap: 0.25rem; } .roi-tab-name { font-size: 0.8125rem; } .roi-tab-role { font-size: 0.5625rem; letter-spacing: 0.06em; } .roi-tab-dot, .roi-tab-dots { display: none; } } /* ---------- Panels ---------- */ .roi-panel { display: none; animation: roi-panel-in 0.36s var(--ease-out-expo); } .roi-panel.is-active { display: block; } @keyframes roi-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Inputs ---------- */ .roi-input { margin-bottom: 1.5rem; } .roi-input-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; gap: 1rem; } .roi-input-row label { font-family: var(--font-sans); font-size: 0.875rem; color: var(--ink); font-weight: 500; letter-spacing: -0.005em; line-height: 1.3; } .roi-value { font-family: var(--font-mono); font-size: 1.0625rem; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; flex-shrink: 0; } /* ---------- Per-agent result card ---------- */ .roi-result { background: var(--cream); border: 1px solid var(--border); border-radius: 14px; padding: clamp(1.25rem, 3vw, 2rem); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .roi-result::before { content: ''; position: absolute; top: 0; left: 0; width: 30%; height: 2px; background: var(--accent); transform: scaleX(1); transform-origin: left center; opacity: 0.85; } .roi-result-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; font-weight: 500; } .roi-result-label:not(:first-child) { margin-top: 1.25rem; } .roi-result-current { font-family: var(--font-serif); font-style: normal; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--muted); text-decoration: line-through; opacity: 0.6; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .roi-result-savings { font-family: var(--font-serif); font-style: normal; font-size: clamp(2.25rem, 5vw, 3.5rem); color: var(--accent); line-height: 1; letter-spacing: -0.03em; margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; transition: color 0.3s var(--ease-out-expo); } .roi-result-meta { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--muted); margin-bottom: 1.5rem; line-height: 1.4; } .roi-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: var(--ink); color: var(--cream); border-radius: 9999px; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; transition: background 0.25s var(--ease-out-expo), transform 0.25s var(--ease-out-expo); align-self: flex-start; } .roi-cta:hover { background: var(--accent); transform: translateY(-1px); } /* ---------- Responsive ---------- */ @media (max-width: 1023px) { .roi-result { margin-top: 0.5rem; } } /* ---------- Hero product pill (boxed eyebrow with animations) ---------- */ .product-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; background: linear-gradient(135deg, rgba(80, 0, 168, 0.06) 0%, rgba(80, 0, 168, 0.10) 50%, rgba(80, 0, 168, 0.06) 100%); border: 1px solid rgba(80, 0, 168, 0.18); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple); position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 6px 16px -8px rgba(80, 0, 168, 0.20); transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), border-color 360ms ease, box-shadow 360ms ease; } .product-pill:hover { transform: translateY(-1px); border-color: rgba(80, 0, 168, 0.30); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 10px 24px -10px rgba(80, 0, 168, 0.32); } /* Shimmer sweep across the pill, runs once on reveal + every ~6s thereafter */ .product-pill::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0%, transparent 30%, rgba(80, 0, 168, 0.18) 45%, rgba(155, 93, 229, 0.32) 50%, rgba(80, 0, 168, 0.18) 55%, transparent 70%, transparent 100%); transform: translateX(-110%); pointer-events: none; z-index: 0; } .reveal.in .product-pill::before, .product-pill.in-view::before { animation: pill-shimmer 6s ease-in-out 0.5s infinite; } @keyframes pill-shimmer { 0% { transform: translateX(-110%); } 18% { transform: translateX(110%); } 100% { transform: translateX(110%); } } /* Pulsing dot on the left of the pill */ .product-pill .pill-dot { position: relative; width: 7px; height: 7px; border-radius: 999px; background: var(--purple); flex-shrink: 0; z-index: 1; } .product-pill .pill-dot::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--purple); opacity: 0.6; transform: scale(1); animation: pill-dot-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pill-dot-pulse { 0% { opacity: 0.55; transform: scale(1); } 70% { opacity: 0; transform: scale(2.6); } 100% { opacity: 0; transform: scale(2.6); } } /* Make the text sit above the shimmer */ .product-pill > span, .product-pill > .pill-dot { position: relative; z-index: 1; } /* Reduced motion: kill animations */ @media (prefers-reduced-motion: reduce) { .product-pill::before, .product-pill .pill-dot::after { animation: none !important; } .product-pill { transition: none; } } /* ---------- Pricing v2 (modular agent stack) ---------- */ .agent-dot { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 600; font-size: 11px; color: white; line-height: 1; letter-spacing: -0.02em; flex-shrink: 0; } .agent-dot.clara { background: var(--purple); } .agent-dot.dora { background: var(--slate); } .agent-dot.nova { background: var(--amber); } .agent-dot.plus { background: var(--ink); } .pricing-card.featured .agent-dot.plus { background: var(--cream); color: var(--ink); } .plan-agents-row { display: flex; align-items: center; gap: 6px; margin-bottom: 1.25rem; } .plan-agents-row .meta { font-size: 10px; color: var(--muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; margin-left: 6px; font-weight: 500; } .plan-agents-row.on-dark .meta { color: rgba(247,244,238,0.55); } .pricing-toggle button .save-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(45, 122, 79, 0.16); color: var(--green); font-size: 10px; font-weight: 500; letter-spacing: 0.02em; vertical-align: 1px; } .pricing-toggle button.active .save-badge { background: rgba(247,244,238,0.18); color: var(--cream); } .addon-card { background: var(--cream); border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem 1.75rem; transition: border-color 280ms ease, transform 280ms ease, box-shadow 280ms ease; } .addon-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(10, 10, 11, 0.05); } .comparison-table-wrap { border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; background: var(--cream); } .comparison-table { width: 100%; border-collapse: collapse; } .comparison-table thead th { text-align: left; font-weight: 500; font-size: 12px; color: var(--muted); padding: 18px 16px; border-bottom: 1px solid var(--border-strong); vertical-align: bottom; background: var(--cream-dim); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono); } .comparison-table thead th.plan-col { text-align: center; font-family: var(--font-sans); font-style: normal; font-size: 20px; font-weight: 400; color: var(--ink); text-transform: none; letter-spacing: -0.01em; } .comparison-table thead th.featured-col { background: var(--ink); color: var(--cream); } .comparison-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 14px; } .comparison-table tbody tr:last-child td { border-bottom: none; } .comparison-table tbody td.feature-label { color: var(--ink); } .comparison-table tbody td.value { text-align: center; color: var(--muted); font-size: 13px; } .comparison-table tbody td.value.check { color: var(--purple); font-weight: 600; font-size: 15px; } .comparison-table tbody td.value.dash { color: var(--muted-soft); } .comparison-table tbody td.featured-col { background: rgba(80, 0, 168, 0.03); } .comparison-table tbody tr.section-header td { background: var(--cream-deep); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-family: var(--font-mono); padding: 12px 16px; } @media (max-width: 900px) { .comparison-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 0.5rem; } .comparison-table { min-width: 760px; } } /* Build Your Plan modular selector */ .builder-section { background: var(--cream); border: 1px solid var(--border); border-radius: 24px; padding: 2.5rem 2rem; position: relative; overflow: hidden; } @media (min-width: 1024px) { .builder-section { padding: 3rem 3.5rem; } } .builder-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 1.5rem 0; } @media (max-width: 768px) { .builder-checks { grid-template-columns: 1fr; } } .builder-check { display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: var(--cream-dim); border: 1px solid var(--border); border-radius: 14px; cursor: pointer; transition: all 280ms var(--ease-out-quart); position: relative; user-select: none; } .builder-check:hover { border-color: var(--border-strong); transform: translateY(-1px); } .builder-check input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .builder-check .check-box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--border-strong); background: var(--cream); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 200ms ease; } .builder-check.checked .check-box { background: var(--ink); border-color: var(--ink); } .builder-check .check-box svg { width: 14px; height: 14px; color: var(--cream); opacity: 0; transition: opacity 150ms ease; } .builder-check.checked .check-box svg { opacity: 1; } .builder-check .check-info { flex: 1; min-width: 0; } .builder-check .check-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; } .builder-check .check-role { display: block; font-size: 11px; color: var(--muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; } .builder-check.checked { background: var(--purple-soft); border-color: var(--purple); } .builder-check.checked .check-name { color: var(--purple); } .builder-result { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-radius: 14px; background: var(--cream-dim); border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .builder-result-text { font-size: 15px; color: var(--ink); letter-spacing: -0.005em; flex: 1; min-width: 240px; } .builder-result-text strong { font-weight: 500; color: var(--purple); font-family: var(--font-sans); font-style: normal; font-size: 18px; margin: 0 4px; } .builder-result-path { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--purple); padding: 6px 12px; border-radius: 999px; background: var(--purple-soft); white-space: nowrap; } /* Pay-When-You-Win alternate plan */ .win-plan-strip { background: var(--ink); color: var(--cream); border-radius: 24px; padding: 2.5rem 2rem; position: relative; overflow: hidden; } @media (min-width: 1024px) { .win-plan-strip { padding: 3rem 3.5rem; } } .win-plan-strip::before { content: ''; position: absolute; top: -50%; right: -20%; width: 60%; height: 200%; background: radial-gradient(ellipse, rgba(80,0,168,0.18) 0%, transparent 60%); pointer-events: none; } .win-plan-grid { display: grid; gap: 2.5rem; align-items: center; position: relative; z-index: 1; } @media (min-width: 900px) { .win-plan-grid { grid-template-columns: 1.2fr 1fr; gap: 3.5rem; } } .win-plan-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(247,244,238,0.7); margin-bottom: 1rem; } .win-plan-tag .dot { width: 6px; height: 6px; border-radius: 999px; background: #C9A0F5; } .win-plan-bullets { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; } @media (max-width: 600px) { .win-plan-bullets { grid-template-columns: 1fr; } } .win-plan-bullets li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: rgba(247,244,238,0.85); } .win-plan-bullets li svg { flex-shrink: 0; margin-top: 4px; color: #C9A0F5; } /* ---------- Pricing v4 premium upgrades ---------- */ /* Section atmospheric background */ #pricing { position: relative; } #pricing::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 10%, rgba(80, 0, 168, 0.04) 0%, transparent 40%), radial-gradient(circle at 85% 90%, rgba(201, 123, 63, 0.03) 0%, transparent 40%); pointer-events: none; z-index: 0; } #pricing > .max-w-7xl { position: relative; z-index: 1; } /* Agent avatar stack (on plan cards) */ .plan-avatar-stack { display: inline-flex; align-items: center; margin-bottom: 1.5rem; } .plan-avatar-stack .plan-avatar { width: 34px; height: 34px; border-radius: 999px; overflow: hidden; border: 2px solid var(--cream); background: var(--cream-dim); margin-left: -10px; position: relative; transition: transform 400ms var(--ease-out-quart); flex-shrink: 0; box-shadow: 0 4px 12px -2px rgba(10, 10, 11, 0.18), 0 1px 3px rgba(10, 10, 11, 0.08); } .plan-avatar-stack .plan-avatar:nth-child(1) { margin-left: 0; z-index: 3; } .plan-avatar-stack .plan-avatar:nth-child(2) { z-index: 2; } .plan-avatar-stack .plan-avatar:nth-child(3) { z-index: 1; } .plan-avatar-stack .plan-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .pricing-card.v4:hover .plan-avatar-stack .plan-avatar:nth-child(1) { transform: translateX(-5px); } .pricing-card.v4:hover .plan-avatar-stack .plan-avatar:nth-child(3) { transform: translateX(5px); } .pricing-card.v4.featured .plan-avatar-stack .plan-avatar { border-color: rgba(247, 244, 238, 0.95); } .plan-avatar-meta { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-left: 14px; font-weight: 500; white-space: nowrap; } .pricing-card.v4.featured .plan-avatar-meta { color: rgba(247, 244, 238, 0.65); } /* Premium pricing card v4 with hover lift and gradient glow */ .pricing-card.v4 { position: relative; overflow: hidden; transition: transform 480ms var(--ease-out-quart), box-shadow 480ms var(--ease-out-quart), border-color 480ms var(--ease-out-quart); z-index: 1; } .pricing-card.v4:not(.featured) { background: linear-gradient(180deg, var(--cream) 0%, rgba(247, 244, 238, 0.5) 100%); } .pricing-card.v4:not(.featured)::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(80, 0, 168, 0.06) 0%, transparent 55%); opacity: 0; transition: opacity 480ms ease; pointer-events: none; z-index: -1; } .pricing-card.v4:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -28px rgba(80, 0, 168, 0.22), 0 8px 18px -8px rgba(10, 10, 11, 0.10); border-color: var(--border-strong); } .pricing-card.v4:not(.featured):hover::before { opacity: 1; } /* Featured card animated gradient mesh */ .pricing-card.v4.featured { background: var(--ink); } .pricing-card.v4.featured::before { content: ''; position: absolute; inset: -30%; background: radial-gradient(circle at 25% 30%, rgba(80, 0, 168, 0.55) 0%, transparent 50%), radial-gradient(circle at 75% 70%, rgba(201, 123, 63, 0.20) 0%, transparent 50%); opacity: 0.45; pointer-events: none; animation: mesh-drift 16s ease-in-out infinite alternate; z-index: -1; } @keyframes mesh-drift { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(-3%, 2%) rotate(1.5deg); } } .pricing-card.v4.featured > * { position: relative; z-index: 1; } .pricing-card.v4.featured:hover { transform: translateY(-8px); box-shadow: 0 40px 80px -30px rgba(80, 0, 168, 0.55), 0 12px 28px -8px rgba(10, 10, 11, 0.25); } /* Plan badge — animated pulse dot */ .plan-badge-v2 { display: inline-flex; align-items: center; gap: 7px; position: absolute; top: -12px; left: 24px; padding: 6px 13px; border-radius: 999px; background: linear-gradient(135deg, var(--purple) 0%, #7E33D8 100%); color: white; font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; box-shadow: 0 10px 24px -6px rgba(80, 0, 168, 0.55); z-index: 5; } .plan-badge-v2::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: white; animation: badge-pulse 2.2s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8); } @keyframes badge-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 50% { opacity: 0.55; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0); } } /* CTA shimmer */ .cta-shine { position: relative; overflow: hidden; isolation: isolate; } .cta-shine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%); transform: translateX(-110%); transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .cta-shine:hover::after { transform: translateX(110%); } /* Builder check with real avatar */ .builder-check .builder-avatar { width: 42px; height: 42px; border-radius: 999px; overflow: hidden; border: 2px solid var(--cream); flex-shrink: 0; box-shadow: 0 4px 12px -2px rgba(10, 10, 11, 0.14); transition: transform 280ms var(--ease-out-quart), box-shadow 280ms var(--ease-out-quart), border-color 280ms var(--ease-out-quart); } .builder-check .builder-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .builder-check.checked .builder-avatar { transform: scale(1.06); box-shadow: 0 8px 18px -4px rgba(80, 0, 168, 0.30); border-color: var(--purple-soft); } .builder-check .check-name { gap: 6px; } .builder-check .check-name .dot-mini { width: 8px; height: 8px; border-radius: 999px; display: inline-block; } .builder-check[data-agent="clara"] .check-name .dot-mini { background: var(--purple); } .builder-check[data-agent="dora"] .check-name .dot-mini { background: var(--slate); } .builder-check[data-agent="nova"] .check-name .dot-mini { background: var(--amber); } /* Pay-When-You-Win v2 — premium dark hero */ .win-plan-v2 { position: relative; background: radial-gradient(ellipse at 100% 0%, rgba(80, 0, 168, 0.28) 0%, transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(80, 0, 168, 0.12) 0%, transparent 50%), var(--ink); border-radius: 28px; padding: 2.5rem 1.75rem; overflow: hidden; color: var(--cream); } @media (min-width: 1024px) { .win-plan-v2 { padding: 4rem 4rem; } } .win-plan-v2::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(247, 244, 238, 0.045) 1px, transparent 0); background-size: 28px 28px; pointer-events: none; } .win-plan-v2-inner { position: relative; z-index: 1; display: grid; gap: 2.5rem; align-items: center; } @media (min-width: 900px) { .win-plan-v2-inner { grid-template-columns: 1.3fr 1fr; gap: 3.5rem; } } .win-plan-tag-v2 { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(247, 244, 238, 0.08); border: 1px solid rgba(247, 244, 238, 0.14); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(247, 244, 238, 0.85); margin-bottom: 1.25rem; } .win-plan-tag-v2 .pulse { width: 6px; height: 6px; border-radius: 999px; background: #C9A0F5; box-shadow: 0 0 0 0 rgba(201, 160, 245, 0.7); animation: badge-pulse 2.2s ease-in-out infinite; } .win-plan-headline { font-family: var(--font-sans); font-style: normal; font-size: clamp(36px, 5vw, 58px); line-height: 1.05; letter-spacing: -0.02em; color: var(--cream); margin-bottom: 1.25rem; } .win-plan-headline .accent-purple { background: linear-gradient(135deg, #C9A0F5 0%, #A57FE8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .win-plan-bullets-v2 { list-style: none; padding: 0; margin: 0; column-count: 2; column-gap: 24px; } @media (max-width: 600px) { .win-plan-bullets-v2 { column-count: 1; } } .win-plan-bullets-v2 li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(247, 244, 238, 0.85); line-height: 1.4; margin-bottom: 14px; break-inside: avoid; -webkit-column-break-inside: avoid; } .win-plan-bullets-v2 li:last-child { margin-bottom: 0; } .win-plan-bullets-v2 li .check-icon { flex-shrink: 0; margin-top: 2px; width: 18px; height: 18px; border-radius: 999px; background: rgba(201, 160, 245, 0.15); border: 1px solid rgba(201, 160, 245, 0.35); display: flex; align-items: center; justify-content: center; color: #C9A0F5; } /* ROI v2 — premium dark single card */ .roi-strip { position: relative; background: var(--ink); border-radius: 24px; padding: 2.5rem 1.75rem; overflow: hidden; color: var(--cream); } @media (min-width: 1024px) { .roi-strip { padding: 3rem 3rem; } } .roi-strip::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top left, rgba(80, 0, 168, 0.22) 0%, transparent 55%), radial-gradient(ellipse at bottom right, rgba(201, 123, 63, 0.10) 0%, transparent 55%); pointer-events: none; } .roi-strip::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(247, 244, 238, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(247, 244, 238, 0.03) 1px, transparent 1px); background-size: 36px 36px; pointer-events: none; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); } .roi-strip-head { position: relative; z-index: 1; text-align: center; margin-bottom: 2rem; } .roi-strip-eyebrow { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(247, 244, 238, 0.08); border: 1px solid rgba(247, 244, 238, 0.14); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(247, 244, 238, 0.7); margin-bottom: 12px; } .roi-strip-title { font-family: var(--font-sans); font-style: normal; font-size: clamp(26px, 3.5vw, 38px); line-height: 1.15; color: var(--cream); letter-spacing: -0.015em; } .roi-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 2.25rem; } @media (min-width: 768px) { .roi-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } } .roi-stat { position: relative; text-align: center; padding: 0.5rem 1rem; } @media (min-width: 768px) { .roi-stat:not(:last-child)::after { content: ''; position: absolute; right: -0.75rem; top: 15%; height: 70%; width: 1px; background: linear-gradient(180deg, transparent, rgba(247, 244, 238, 0.18) 50%, transparent); } } .roi-icon-wrap { width: 38px; height: 38px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(247, 244, 238, 0.06); border: 1px solid rgba(247, 244, 238, 0.14); color: #C9A0F5; } .roi-num { font-family: var(--font-sans); font-style: normal; font-size: clamp(56px, 8vw, 80px); line-height: 1; letter-spacing: -0.03em; margin-bottom: 0.75rem; background: linear-gradient(180deg, var(--cream) 0%, rgba(201, 160, 245, 0.78) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .roi-label { font-size: 13px; color: rgba(247, 244, 238, 0.65); line-height: 1.45; max-width: 200px; margin: 0 auto; } /* ---------- Minimal inline ROI (replaces dark box) ---------- */ .roi-inline { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2rem 4rem; max-width: 980px; margin: 0 auto; } @media (min-width: 768px) { .roi-inline { gap: 0; } .roi-inline .roi-inline-stat { flex: 1; padding: 0 1.75rem; position: relative; } .roi-inline .roi-inline-stat + .roi-inline-stat::before { content: ''; position: absolute; left: 0; top: 12%; height: 76%; width: 1px; background: linear-gradient(180deg, transparent, var(--border-strong) 30%, var(--border-strong) 70%, transparent); } } .roi-inline-stat { text-align: center; min-width: 180px; } .roi-inline-num { font-family: var(--font-sans); font-style: normal; font-size: clamp(56px, 8vw, 84px); line-height: 1; letter-spacing: -0.03em; color: var(--purple); margin-bottom: 0.75rem; transition: transform 400ms var(--ease-out-quart); } .roi-inline-stat:hover .roi-inline-num { transform: translateY(-2px) scale(1.02); } .roi-inline-label { font-size: 13px; color: var(--muted); line-height: 1.45; max-width: 200px; margin: 0 auto; } /* ---------- Build Your Stack motion enhancements ---------- */ /* Ambient drifting gradient on builder background */ .builder-section { position: relative; isolation: isolate; } .builder-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(80, 0, 168, 0.05) 0%, transparent 45%), radial-gradient(circle at 70% 80%, rgba(80, 0, 168, 0.04) 0%, transparent 45%); animation: builder-drift 18s ease-in-out infinite alternate; z-index: -1; pointer-events: none; border-radius: 24px; } @keyframes builder-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-2%, 1.5%) scale(1.03); } } /* Checkmark draw animation on selection */ .builder-check .check-box svg polyline { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 0.42s cubic-bezier(0.6, 0.05, 0.2, 1) 0.08s; } .builder-check.checked .check-box svg polyline { stroke-dashoffset: 0; } /* Check box pop animation on check */ .builder-check .check-box { transform-origin: center; } .builder-check.checked .check-box { animation: check-pop 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); } @keyframes check-pop { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } } /* Avatar pulsing ring when checked */ .builder-check.checked .builder-avatar { animation: avatar-pulse 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes avatar-pulse { 0%, 100% { box-shadow: 0 8px 18px -4px rgba(80, 0, 168, 0.30), 0 0 0 0 rgba(80, 0, 168, 0.30); } 50% { box-shadow: 0 8px 18px -4px rgba(80, 0, 168, 0.30), 0 0 0 9px rgba(80, 0, 168, 0); } } /* Dot mini pulse when card is checked */ .builder-check .check-name .dot-mini { transition: transform 200ms ease; } .builder-check.checked .check-name .dot-mini { animation: dot-pulse 2.4s ease-in-out infinite; } @keyframes dot-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.65; } } /* Card subtle rise on check */ .builder-check.checked { animation: card-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes card-rise { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } 100% { transform: translateY(0); } } /* Result text smooth crossfade */ .builder-result-text, .builder-result-path { transition: opacity 220ms ease, transform 320ms var(--ease-out-quart); } .builder-result.crossfade .builder-result-text, .builder-result.crossfade .builder-result-path { opacity: 0; transform: translateY(2px); } /* Path pill enhanced state for all-3-selected */ .builder-result-path { transition: background 380ms ease, color 380ms ease, box-shadow 380ms ease, opacity 220ms ease, transform 320ms var(--ease-out-quart); } .builder-result-path[data-tier="3"] { background: linear-gradient(135deg, var(--purple) 0%, #7E33D8 100%); color: white; box-shadow: 0 8px 22px -4px rgba(80, 0, 168, 0.45); animation: path-glow 2.8s ease-in-out infinite; } @keyframes path-glow { 0%, 100% { box-shadow: 0 8px 22px -4px rgba(80, 0, 168, 0.45); } 50% { box-shadow: 0 10px 30px -2px rgba(80, 0, 168, 0.65); } } .builder-result-path[data-tier="2"] { background: linear-gradient(135deg, var(--purple-soft) 0%, #DCC9F5 100%); } /* Honor reduced motion */ @media (prefers-reduced-motion: reduce) { .builder-section::before, .builder-check.checked .builder-avatar, .builder-check.checked .check-name .dot-mini, .builder-check.checked, .builder-result-path[data-tier="3"] { animation: none !important; } } /* ---------- Testimonial marquee ---------- */ .marquee.testimonial-marquee { gap: 0; padding: 0.25rem 0 1rem; } .marquee.testimonial-marquee .marquee-track { gap: 1.25rem; animation: scroll 60s linear infinite; align-items: stretch; } .marquee.testimonial-marquee:hover .marquee-track { animation-play-state: paused; } .testimonial-card { flex-shrink: 0; width: 360px; padding: 1.5rem 1.75rem; background: var(--cream); border: 1px solid var(--border); border-radius: 1rem; display: flex; flex-direction: column; min-height: 224px; box-shadow: 0 1px 2px rgba(10, 10, 11, 0.04); transition: transform 280ms var(--ease-out-quart), box-shadow 280ms ease, border-color 280ms ease; } .testimonial-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(10, 10, 11, 0.06); border-color: var(--border-strong); } .testimonial-quote { color: var(--ink); font-size: 0.9375rem; line-height: 1.55; letter-spacing: -0.005em; margin-bottom: 1.25rem; flex: 1; } .testimonial-author { display: flex; align-items: center; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--border); margin-top: auto; } .testimonial-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-style: normal; font-size: 0.9375rem; line-height: 1; flex-shrink: 0; letter-spacing: -0.01em; } .testimonial-name { color: var(--ink); font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.005em; line-height: 1.3; } .testimonial-company { color: var(--muted); font-size: 0.75rem; line-height: 1.3; margin-top: 2px; } @media (max-width: 768px) { .testimonial-card { width: 300px; padding: 1.25rem 1.5rem; min-height: 208px; } .testimonial-quote { font-size: 0.875rem; } .marquee.testimonial-marquee .marquee-track { animation-duration: 50s; } } @media (prefers-reduced-motion: reduce) { .marquee.testimonial-marquee .marquee-track { animation: none; } } /* ============================================================ Custom cursor - applied site-wide via /js/cursor.js ============================================================ */ .bau-cursor { position: fixed; top: 0; left: 0; width: 22px; height: 22px; pointer-events: none; z-index: 9999; opacity: 0; will-change: transform; /* Force own compositor layer for smooth movement over animated/heavy paint regions */ transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: drop-shadow(0 2px 3px rgba(80, 0, 168, 0.22)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)); transition: opacity 280ms ease, filter 320ms ease; } .bau-cursor svg { width: 100%; height: 100%; display: block; overflow: visible; } .bau-cursor .arrow-path { stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; transform-origin: 0 0; transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease; } .bau-cursor .arrow-dark { opacity: 0; } /* Hide system cursor */ @media (hover: hover) and (pointer: fine) { body.has-custom-cursor, body.has-custom-cursor *, body.has-custom-cursor *::before, body.has-custom-cursor *::after { cursor: none !important; } /* Cookiebot/Usercentrics consent dialog renders above the custom cursor's z-index, so the custom arrow is occluded. Restore the native cursor over the dialog and its backdrop so users can aim and interact normally. */ body.has-custom-cursor #CybotCookiebotDialog, body.has-custom-cursor #CybotCookiebotDialog *, body.has-custom-cursor #CybotCookiebotDialogBodyUnderlay, body.has-custom-cursor #CybotCookiebotDialogBodyUnderlay *, body.has-custom-cursor [id^="usercentrics"], body.has-custom-cursor [id^="usercentrics"] *, body.has-custom-cursor #uc-center-container, body.has-custom-cursor #uc-center-container * { cursor: auto !important; } body.has-custom-cursor #CybotCookiebotDialog a, body.has-custom-cursor #CybotCookiebotDialog button, body.has-custom-cursor #CybotCookiebotDialog label, body.has-custom-cursor #CybotCookiebotDialog [role="button"], body.has-custom-cursor #CybotCookiebotDialog input, body.has-custom-cursor [id^="usercentrics"] a, body.has-custom-cursor [id^="usercentrics"] button, body.has-custom-cursor [id^="usercentrics"] label, body.has-custom-cursor [id^="usercentrics"] [role="button"], body.has-custom-cursor [id^="usercentrics"] input { cursor: pointer !important; } } body.cursor-active .bau-cursor { opacity: 1; } /* Hover on interactive elements: gentle scale up */ body.cursor-hover .bau-cursor .arrow-path { transform: scale(1.12); } /* Click: scale down (pivots at tip since transform-origin is 0,0) */ body.cursor-click .bau-cursor .arrow-path { transform: scale(0.84); } body.cursor-click.cursor-hover .bau-cursor .arrow-path { transform: scale(0.92); } /* On dark sections: swap to cream-to-light-purple gradient */ body.cursor-on-dark .bau-cursor .arrow-default { opacity: 0; } body.cursor-on-dark .bau-cursor .arrow-dark { opacity: 1; } body.cursor-on-dark .bau-cursor { filter: drop-shadow(0 2px 6px rgba(201, 160, 245, 0.45)); } /* Hide on text inputs so system caret takes over */ body.cursor-text .bau-cursor { opacity: 0; } /* Disable on touch */ @media (pointer: coarse), (hover: none) { .bau-cursor, .click-ripple { display: none !important; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .bau-cursor, .bau-cursor .arrow-path { transition: opacity 160ms ease !important; } .click-ripple { animation: none !important; opacity: 0 !important; } } /* ---------- Click ripple ---------- */ .click-ripple { position: fixed; width: 10px; height: 10px; border-radius: 999px; background: rgba(80, 0, 168, 0.18); border: 1.5px solid rgba(80, 0, 168, 0.45); pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); will-change: width, height, opacity; animation: ripple-expand 560ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } .click-ripple.on-dark { background: rgba(201, 160, 245, 0.20); border-color: rgba(201, 160, 245, 0.55); } @keyframes ripple-expand { 0% { width: 10px; height: 10px; opacity: 1; border-width: 1.5px; } 60% { opacity: 0.45; } 100% { width: 78px; height: 78px; opacity: 0; border-width: 0.5px; } } /* Tiny press-state for clickable elements (extra polish) */ .bau-pressing { transition: transform 80ms ease-out; transform: scale(0.985); } /* ============================================================ CROSS-DEVICE & WIDE-SCREEN REFINEMENTS ============================================================ */ /* Tiny / older phones (≤360px wide): prevent edge crush */ @media (max-width: 360px) { .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl { padding-left: 1rem !important; padding-right: 1rem !important; } .hero-h1 { font-size: 1.875rem !important; line-height: 1.05 !important; } .product-pill { font-size: 10px; padding: 6px 12px 6px 10px; letter-spacing: 0.1em; } .pricing-card { padding: 1.5rem !important; } .builder-checks { grid-template-columns: 1fr !important; } } /* iPad / mid-tablet (768-1023px): currently grouped with mobile. Add a few overrides so cards & grids breathe */ @media (min-width: 768px) and (max-width: 1023px) { .pricing-card { padding: 1.75rem !important; } .builder-checks { grid-template-columns: repeat(3, 1fr); } .win-plan-v2-inner { gap: 2rem; } } /* Large desktop (1280-1535px): minor padding bump */ @media (min-width: 1280px) and (max-width: 1535px) { .max-w-7xl { max-width: 1280px; padding-left: 2rem; padding-right: 2rem; } } /* Wide desktop / 2K (1536-1919px): let content breathe more */ @media (min-width: 1536px) { html { font-size: 17px; } .max-w-7xl { max-width: 1480px; } .hero-h1 { font-size: clamp(3rem, 5.5vw, 5.5rem) !important; } .section-h { font-size: clamp(2.75rem, 4.8vw, 4.5rem); } } /* QHD / 1440p (1920-2559px): proportional scale up */ @media (min-width: 1920px) { html { font-size: 18px; } .max-w-7xl { max-width: 1680px; padding-left: 3rem; padding-right: 3rem; } .hero-h1 { font-size: clamp(3.5rem, 5vw, 6.5rem) !important; } .section-h { font-size: clamp(3rem, 4.5vw, 5rem); } .serif { letter-spacing: -0.015em; } .pricing-card { padding: 2.25rem; } } /* 4K / UHD displays (≥2560px): true wide-screen treatment */ @media (min-width: 2560px) { html { font-size: 20px; } body { font-size: 1.0625rem; } .max-w-7xl { max-width: 1880px; padding-left: 4rem; padding-right: 4rem; } .max-w-6xl { max-width: 1480px; } .max-w-5xl { max-width: 1280px; } .max-w-4xl { max-width: 1100px; } .hero-h1 { font-size: clamp(4rem, 4.5vw, 7.5rem) !important; } .section-h { font-size: clamp(3.25rem, 4vw, 5.5rem); } .pricing-card { padding: 2.5rem; border-radius: 1.25rem; } .product-pill { font-size: 12px; padding: 9px 18px 9px 15px; } .bau-cursor { width: 26px; height: 26px; } .testimonial-card { width: 420px; } } /* Ultra-wide / 5K+ (≥3200px): cap so content doesn't stretch absurdly */ @media (min-width: 3200px) { .max-w-7xl { max-width: 2100px; } .hero-h1 { font-size: 8rem !important; } .section-h { font-size: 6rem !important; } } /* High-DPI: sharpen 1px borders that would otherwise look fuzzy */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .pricing-card, .addon-card, .builder-check, .accordion-item, .product-pill, .comparison-table-wrap { border-width: 0.5px; } } /* Landscape orientation on short viewports (e.g. phone in landscape) */ @media (max-height: 500px) and (orientation: landscape) { .hero-h1 { font-size: 2.5rem !important; } section { padding-top: 3rem !important; padding-bottom: 3rem !important; } } /* Print-friendly fallback (just in case) */ @media print { .bau-cursor, .click-ripple, .product-pill::before, .nav-blur, .marquee-track { display: none !important; animation: none !important; } * { background: white !important; color: black !important; box-shadow: none !important; } } /* ════════════════════════════════════════════════════════════ MOBILE NAV (hamburger + sidebar) — injected by /js/mobile-nav.js Hidden on desktop (>=1024px), full UI on mobile. ════════════════════════════════════════════════════════════ */ /* Hamburger button — sits to the left of the logo, only visible on mobile */ .mobile-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 0.25rem; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--ink, #0A0A0B); cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease; -webkit-tap-highlight-color: transparent; } .mobile-burger:hover { background: rgba(10, 10, 11, 0.04); } .mobile-burger:focus-visible { outline: 2px solid var(--purple, #5000A8); outline-offset: 2px; } .mobile-burger svg { width: 22px; height: 22px; } @media (max-width: 1023px) { .mobile-burger { display: inline-flex; } } /* Backdrop behind the sidebar */ .mobile-sidebar-backdrop { position: fixed; inset: 0; background: rgba(10, 10, 11, 0.42); opacity: 0; pointer-events: none; z-index: 78; transition: opacity 0.25s ease; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .mobile-sidebar-backdrop.open { opacity: 1; pointer-events: auto; } /* The slide-in drawer */ .mobile-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 360px); background: var(--cream, #F7F4EE); border-right: 1px solid var(--border, #E5E0D5); box-shadow: 12px 0 40px -12px rgba(10, 10, 11, 0.18); z-index: 80; transform: translateX(-105%); transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-sidebar.open { transform: translateX(0); } /* Lock background scroll while open */ body.mobile-nav-open { overflow: hidden; } /* Sidebar header (brand + close) */ .mobile-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border, #E5E0D5); } .mobile-sidebar-brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--purple, #5000A8); font-family: var(--font-sans, 'Inter', sans-serif); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; } .mobile-sidebar-brand svg { display: block; height: 1.375rem; width: auto; } .mobile-sidebar-close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 999px; color: var(--ink, #0A0A0B); cursor: pointer; transition: background 0.18s ease; } .mobile-sidebar-close:hover { background: rgba(10, 10, 11, 0.06); } .mobile-sidebar-close svg { width: 20px; height: 20px; } /* Link list */ .mobile-sidebar-nav { padding: 0.75rem 0.75rem 1rem; flex: 1; } .mobile-sidebar-list { list-style: none; padding: 0; margin: 0; } .mobile-sidebar-list li { margin: 0; } .mobile-sidebar-list a { display: block; padding: 0.75rem 1rem; border-radius: 10px; font-size: 0.9375rem; font-weight: 500; color: var(--ink, #0A0A0B); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .mobile-sidebar-list a:hover { background: rgba(80, 0, 168, 0.06); color: var(--purple, #5000A8); } .mobile-sidebar-list a.active { color: var(--purple, #5000A8); background: rgba(80, 0, 168, 0.08); } /* Footer (lang switch + CTA) */ .mobile-sidebar-foot { padding: 1rem 1.25rem 1.5rem; border-top: 1px solid var(--border, #E5E0D5); display: flex; flex-direction: column; gap: 0.875rem; } .mobile-sidebar-foot .lang-switch { display: inline-flex !important; align-self: flex-start; border: 1px solid var(--border-strong, #D4CFC2); border-radius: 999px; padding: 2px; background: var(--cream, #F7F4EE); } .mobile-sidebar-foot .lang-switch button { padding: 5px 12px; border-radius: 999px; font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; color: var(--muted, #6B6B6E); background: transparent; border: 0; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .mobile-sidebar-foot .lang-switch button.active { background: var(--ink, #0A0A0B); color: var(--cream, #F7F4EE); } .mobile-sidebar-cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.25rem; background: var(--ink, #0A0A0B); color: var(--cream, #F7F4EE); border-radius: 999px; font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: background 0.18s ease; } .mobile-sidebar-cta:hover { background: var(--purple, #5000A8); } /* ════════════════════════════════════════════════════════════ MOBILE NAV BAR ADJUSTMENTS — shrink CTA, hide desktop bits ════════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { /* Hide the desktop lang-switch in the header (moves into sidebar) */ nav .lang-switch:not(.mobile-sidebar-foot .lang-switch) { display: none !important; } /* Shrink "Jetzt testen" CTA on mobile */ nav a.btn-primary, nav a[href="/#cta"][class*="bg-ink"], nav a[href="#cta"][class*="bg-ink"] { padding: 0.4rem 0.85rem !important; font-size: 0.8125rem !important; } /* Hide "Anmelden" (sign in) in mobile header — accessible via sidebar later if needed */ nav a[href="/"][data-de="Anmelden"], nav a[href="#"][data-de="Anmelden"] { display: none !important; } } /* ════════════════════════════════════════════════════════════ PRODUCT-PILL — wrap and shrink on small screens so it stays inside the container ════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .product-pill { font-size: 9.5px; letter-spacing: 0.10em; padding: 6px 10px 6px 9px; gap: 8px; line-height: 1.35; max-width: 100%; white-space: normal; text-align: left; } .product-pill .pill-dot { flex-shrink: 0; } } @media (max-width: 380px) { .product-pill { font-size: 9px; padding: 5px 9px; } } /* ════════════════════════════════════════════════════════════ MOCKUP — prevent horizontal overflow on small screens The mockup contains long filenames and right-aligned chips; on phones those would push out of the viewport. We constrain the outer card and let inner text wrap rather than scroll. ════════════════════════════════════════════════════════════ */ .mockup { max-width: 100%; } @media (max-width: 640px) { .mockup { border-radius: 12px; } .mockup-header { padding: 10px 12px; } .mockup-header .mono { font-size: 10px; word-break: break-all; } .mockup > div:last-child { padding: 1rem !important; } /* override inline p-5 / p-6 */ .mockup .text-sm { font-size: 0.8125rem; word-break: break-word; } .mockup .text-xs { font-size: 0.6875rem; } .mockup .text-base, .mockup .text-lg { font-size: 0.875rem; } .mockup .truncate { white-space: normal; word-break: break-word; overflow: visible; text-overflow: clip; } .mockup .agent-chip { font-size: 0.6875rem; padding: 3px 8px; flex-shrink: 0; } /* Stack the header row (filename + agent chip) vertically when cramped */ .mockup .flex.items-start.justify-between { flex-wrap: wrap; gap: 0.5rem; } /* Risk/finding rows stay readable */ .mockup .risk-high, .mockup .risk-medium, .mockup .risk-row { padding: 8px 10px !important; } .mockup .contract-line { font-size: 0.75rem !important; padding: 4px 8px !important; } } /* Mobile header tightening: shrink logo and close the gap to the hamburger. Targets both nav styles: old (Tailwind .gap-10 + .h-7) and new (.nav-left + .logo svg). */ @media (max-width: 1023px) { /* New-style nav: trim the flex gap and the logo */ .nav-left { gap: 0.5rem !important; } .logo svg { height: 1.125rem !important; } /* Old-style nav: same treatment via Tailwind selectors */ nav .flex.items-center.gap-10 { gap: 0.5rem !important; } nav a.flex.items-center.gap-2 { gap: 0.25rem !important; } nav svg.h-7 { height: 1.125rem !important; } } /* Mobile header padding: shrink horizontal padding inside the nav from px-6 (24px) to 1rem on viewports below the lg breakpoint. lg:px-8 still wins above 1024px, so desktop is unchanged. */ @media (max-width: 1023px) { nav .max-w-7xl.mx-auto.px-6, nav .max-w-7xl.px-6 { padding-left: 1rem !important; padding-right: 1rem !important; } } /* ============================================================ COMPARISON TABLE — premium redesign ============================================================ */ .compare-section { position: relative; overflow: hidden; } .compare-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 700px 550px at 92% 8%, rgba(80,0,168,.07) 0%, transparent 60%), radial-gradient(ellipse 450px 350px at 4% 88%, rgba(80,0,168,.04) 0%, transparent 60%); pointer-events: none; } /* Grid base — guarantees column alignment across header + rows */ .compare-grid { min-width: 640px; overflow: clip; } .compare-grid-head, .compare-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; } .compare-grid-head { align-items: end; } /* Column header cards */ .compare-col-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px; border-radius: 12px 12px 0 0; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .compare-col-card.col-muted { color: var(--muted); background: rgba(0,0,0,.035); border: 1px solid var(--border); border-bottom: none; } .compare-col-card.col-bauai { background: var(--purple); color: #fff; border-radius: 12px 12px 0 0; box-shadow: 0 -8px 28px rgba(80,0,168,.22), 0 0 0 1px rgba(80,0,168,.3); position: relative; overflow: hidden; } .compare-col-card.col-bauai::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.18) 50%, transparent 80%); transform: translateX(-120%); animation: cmp-shimmer 3.5s ease-in-out 1.8s infinite; } @keyframes cmp-shimmer { 0% { transform: translateX(-120%); } 65%, 100% { transform: translateX(130%); } } .compare-recommended-badge { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; background: rgba(255,255,255,.2); color: rgba(255,255,255,.92); padding: 2px 9px; border-radius: 20px; margin-top: 2px; } /* Feature (label) cells */ .compare-feat-cell { display: flex; align-items: center; padding: 15px 20px 15px 0; color: var(--ink); font-size: 13.5px; line-height: 1.45; border-bottom: 1px solid var(--border); } /* Value cells */ .compare-val-cell { display: flex; align-items: center; justify-content: center; padding: 15px 8px; border-bottom: 1px solid var(--border); } .compare-val-cell.col-bauai { background: rgba(80,0,168,.04); border-bottom: 1px solid rgba(80,0,168,.08); } /* Last row — close the column groups */ .compare-row-last .compare-feat-cell, .compare-row-last .compare-val-cell { border-bottom: none; padding-bottom: 18px; } .compare-row-last .compare-val-cell.col-bauai { border-radius: 0 0 12px 12px; } /* Staggered row reveal */ .compare-row { opacity: 0; } .reveal.in .compare-row { animation: cmp-row-in .5s cubic-bezier(0.16,1,.3,1) both; } .reveal.in .compare-row:nth-child(2) { animation-delay: .20s; } .reveal.in .compare-row:nth-child(3) { animation-delay: .32s; } .reveal.in .compare-row:nth-child(4) { animation-delay: .44s; } .reveal.in .compare-row:nth-child(5) { animation-delay: .56s; } .reveal.in .compare-row:nth-child(6) { animation-delay: .68s; } .reveal.in .compare-row:nth-child(7) { animation-delay: .80s; } .reveal.in .compare-row:nth-child(8) { animation-delay: .92s; } .reveal.in .compare-row:nth-child(9) { animation-delay:1.04s; } @keyframes cmp-row-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } /* Icon circles */ .cmp-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; } .cmp-icon.yes { background: rgba(80,0,168,.10); color: var(--purple); } .cmp-icon.no { background: rgba(0,0,0,.05); color: var(--muted); } .cmp-icon.partial { background: rgba(201,123,63,.12); color: #B56E2A; } /* Bottom strip */ .compare-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 24px; margin-top: 16px; background: rgba(80,0,168,.04); border: 1px solid rgba(80,0,168,.12); border-radius: 12px; } .compare-score { display: flex; align-items: baseline; gap: 2px; } .compare-score-num { font-size: 26px; font-weight: 700; color: var(--purple); font-family: var(--font-mono); line-height: 1; } .compare-score-slash { font-size: 18px; font-weight: 600; color: rgba(80,0,168,.45); font-family: var(--font-mono); } .compare-score-label { font-size: 13px; color: var(--muted); margin-left: 10px; } .compare-legend { display: flex; align-items: center; gap: 24px; } .cmp-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } @media (prefers-reduced-motion: reduce) { .compare-col-card.col-bauai::after { animation: none; } .compare-row { opacity: 1; } .reveal.in .compare-row { animation: none; } } /* ============================================================ IN-CARD AGENT PICKER (Solo / Duo plan cards) ============================================================ */ .plan-pick { margin-bottom: 0.875rem; } .plan-pick-title { display: block; font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 8px; } .plan-pick-row { display: flex; gap: 6px; } .plan-pick-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; padding: 10px 3px 8px; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; background: transparent; overflow: hidden; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; transition: border-color .28s cubic-bezier(.16,1,.3,1), background .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s cubic-bezier(.16,1,.3,1); } .plan-pick-item input[type="radio"], .plan-pick-item input[type="checkbox"] { display: none; } .plan-pick-item img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; filter: grayscale(40%); opacity: .82; box-shadow: 0 0 0 0 rgba(80,0,168,0); transition: filter .28s ease, opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease; } .plan-pick-item > span { position: relative; z-index: 1; font-size: 9px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); transition: color .28s ease; } /* animated checkmark badge */ .plan-pick-item::after { content: ""; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 50%; background-color: var(--purple-brand, #5000A8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E"); background-size: 10px; background-position: center; background-repeat: no-repeat; opacity: 0; transform: scale(.3); transition: opacity .2s ease, transform .35s cubic-bezier(.34,1.56,.64,1); z-index: 2; } /* hover */ .plan-pick-item:hover { border-color: rgba(80,0,168,.4); transform: translateY(-2px); } .plan-pick-item:hover img { filter: grayscale(0%); opacity: 1; } /* selected */ .plan-pick-item:has(input:checked) { border-color: var(--purple-brand, #5000A8); background: linear-gradient(168deg, rgba(80,0,168,.08), rgba(80,0,168,.02)); box-shadow: 0 6px 18px -6px rgba(80,0,168,.4); transform: translateY(-2px); } .plan-pick-item:has(input:checked) img { filter: grayscale(0%); opacity: 1; box-shadow: 0 0 0 2px var(--cream, #F7F4EE), 0 0 0 4px var(--purple-brand, #5000A8); animation: pick-pop .45s cubic-bezier(.34,1.56,.64,1); } .plan-pick-item:has(input:checked) > span { color: var(--purple-brand, #5000A8); font-weight: 600; } .plan-pick-item:has(input:checked)::after { opacity: 1; transform: scale(1); } /* disabled (Duo, max reached) */ .plan-pick-item:has(input:disabled:not(:checked)) { opacity: 0.4; cursor: default; filter: saturate(.45); } .plan-pick-item:has(input:disabled:not(:checked)):hover { transform: none; border-color: var(--border); } @keyframes pick-pop { 0% { transform: scale(.78); } 55% { transform: scale(1.1); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .plan-pick-item, .plan-pick-item img, .plan-pick-item::after { transition: none; } .plan-pick-item:has(input:checked) img { animation: none; } .plan-pick-item:hover, .plan-pick-item:has(input:checked) { transform: none; } } /* ============================================================ TRUST STRIP (highlighted animated trust pills) ============================================================ */ .trust-strip { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 12px 24px; border-radius: 999px; border: 1px solid rgba(80,0,168,.18); background: linear-gradient(110deg, rgba(80,0,168,.07), rgba(80,0,168,.02)), #F7F4EE; box-shadow: 0 8px 24px -12px rgba(80,0,168,.28), inset 0 1px 0 rgba(255,255,255,.8); overflow: hidden; animation: trust-breathe 5.5s ease-in-out infinite; } .trust-strip::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-16deg); animation: trust-shine 5s ease-in-out infinite; pointer-events: none; } .trust-strip-item { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; } .trust-strip-item svg { width: 13px; height: 13px; color: var(--purple, #5000A8); flex-shrink: 0; } .trust-strip-sep { z-index: 1; width: 4px; height: 4px; border-radius: 50%; background: rgba(80,0,168,.28); flex-shrink: 0; } .trust-strip-item--live { color: var(--green, #2D7A4F); } .trust-strip-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green, #2D7A4F); flex-shrink: 0; } .trust-strip-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green, #2D7A4F); animation: pulse 2s ease-in-out infinite; } @keyframes trust-shine { 0% { left: -40%; } 60% { left: 110%; } 100% { left: 110%; } } @keyframes trust-breathe { 0%, 100% { box-shadow: 0 8px 24px -12px rgba(80,0,168,.22), inset 0 1px 0 rgba(255,255,255,.8); } 50% { box-shadow: 0 10px 28px -10px rgba(80,0,168,.34), inset 0 1px 0 rgba(255,255,255,.8); } } @media (prefers-reduced-motion: reduce) { .trust-strip { animation: none; } .trust-strip::before { animation: none; opacity: 0; } .trust-strip-dot::after { animation: none; } }