/* Satoshi is loaded via in each page for faster, non-render-blocking delivery. System fonts are the fallback stack. */ :root { /* Primary Colors */ --c-yellow: #FFD02C; --c-ink: #1A1A1A; --c-cloud: #F6F4EE; --c-white: #FEFDFB; /* Supporting Colors */ --c-warm-yellow: #FFB800; --c-soft-yellow: #FFF3B5; --c-graphite: #292929; --c-muted: #686868; --c-border: rgba(255, 255, 255, 0.1); --c-border-dark: rgba(0, 0, 0, 0.08); /* Layout */ --max-width: 1280px; --nav-height: 78px; --nav-height-scrolled: 64px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x: clip; max-width: 100%; } body { font-family: 'Satoshi', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background-color: var(--c-white); color: var(--c-ink); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.04em; color: inherit; line-height: 1.05; } p { line-height: 1.65; max-width: 660px; } a { text-decoration: none; transition: all 0.3s ease; color: inherit; } ul { list-style: none; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 48px; width: 100%; } .section { padding: 130px 0; } /* Typography Utilities */ .text-yellow { color: var(--c-yellow); } .text-ink { color: var(--c-ink); } .text-muted { color: var(--c-muted); } .text-white { color: var(--c-white); } .text-amber { color: #8A6D00; } /* accessible yellow for use on light backgrounds */ .text-center { text-align: center; } .label-small { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 24px; display: inline-block; } .h1 { font-size: clamp(48px, 6vw, 82px); line-height: 0.98; margin-bottom: 24px; } .h2 { font-size: clamp(36px, 4vw, 54px); margin-bottom: 24px; } .h3 { font-size: clamp(24px, 3vw, 36px); margin-bottom: 16px; } .body-large { font-size: 18px; color: var(--c-muted); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; font-size: 15px; font-weight: 700; border-radius: 12px; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); border: none; text-align: center; } .btn-primary { background-color: var(--c-yellow); color: var(--c-ink); box-shadow: 0 4px 14px rgba(255, 208, 44, 0.3); } .btn-primary:hover { transform: scale(1.02); box-shadow: 0 6px 20px rgba(255, 208, 44, 0.4); } .btn-primary:active { transform: scale(0.98); } .btn-secondary { background-color: rgba(255, 255, 255, 0.1); color: var(--c-white); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); } .btn-secondary:hover { background-color: rgba(255, 255, 255, 0.15); transform: scale(1.02); } .btn-secondary:active { transform: scale(0.98); } /* Backgrounds */ .bg-ink { background-color: var(--c-ink); color: var(--c-white); } .bg-yellow { background-color: var(--c-yellow); color: var(--c-ink); } .bg-cloud { background-color: var(--c-cloud); } .bg-white { background-color: var(--c-white); } .bg-soft { background-color: var(--c-soft-yellow); } /* Grid Layouts */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .align-center { align-items: center; } /* ---------------- Navigation ---------------- */ .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); z-index: 1000; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; align-items: center; } .navbar.transparent { background: transparent; color: var(--c-white); } .navbar.scrolled { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); height: var(--nav-height-scrolled); color: var(--c-ink); box-shadow: 0 1px 0 var(--c-border-dark); } .nav-inner { display: flex; justify-content: space-between; align-items: center; } .nav-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; } .nav-mark { height: 30px; width: auto; display: block; } .nav-mark-dark { display: none; } /* transparent nav sits on dark: use the light (yellow+white) mark */ .navbar.transparent .nav-mark-color { display: none; } .navbar.transparent .nav-mark-dark { display: block; } /* menu open / scrolled sit on light: use the full-color mark */ .navbar.nav-open .nav-mark-color { display: block; } .navbar.nav-open .nav-mark-dark { display: none; } .nav-links { display: flex; gap: 32px; } .nav-links a { font-size: 14px; font-weight: 600; position: relative; } .navbar.transparent .nav-links a:hover { color: var(--c-yellow); } .navbar.scrolled .nav-links a:hover { color: var(--c-ink); } /* Active (yellow) nav link stays readable once the bar turns white on scroll */ .navbar.scrolled .nav-links a.text-yellow { color: #8A6D00; } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0%; height: 2px; background-color: var(--c-yellow); transition: width 0.3s ease; } .nav-links a:hover::after { width: 100%; } .nav-actions .btn { padding: 10px 20px; font-size: 14px; } .mobile-menu-btn { display: none; } /* ---------------- Hero Section ---------------- */ .hero { min-height: 90vh; padding-top: 120px; position: relative; overflow: hidden; display: flex; align-items: center; } .hero-bg { position: absolute; top: -4%; left: -4%; width: 108%; height: 108%; will-change: transform; background: radial-gradient(circle at 70% 50%, rgba(255, 208, 44, 0.15) 0%, transparent 60%), url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.03"/%3E%3C/svg%3E'), var(--c-ink); z-index: 0; } .hero .container { position: relative; z-index: 1; } .hero-content { max-width: 580px; } .hero-buttons { display: flex; gap: 16px; margin-top: 40px; margin-bottom: 24px; align-items: center; } .hero-trust { font-size: 13px; color: rgba(255,255,255,0.5); font-weight: 500; } /* Hero entrance choreography (hidden only when JS is present) */ .js .hero .anim { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .js .hero .anim-fade { opacity: 0; transition: opacity 0.9s ease; } .hero.loaded .anim { opacity: 1; transform: none; } .hero.loaded .anim-fade { opacity: 1; } .hero .d1 { transition-delay: 0.10s; } .hero .d2 { transition-delay: 0.22s; } .hero .d3 { transition-delay: 0.36s; } .hero .d4 { transition-delay: 0.50s; } .hero .d5 { transition-delay: 0.62s; } .hero .d6 { transition-delay: 0.45s; } .hero .d7 { transition-delay: 1.1s; } /* Live status chip in the trust line */ .hero-live { display: inline-flex; align-items: center; gap: 7px; color: var(--c-yellow); font-weight: 700; } .hero-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-yellow); box-shadow: 0 0 8px var(--c-yellow); animation: pulseDot 2s infinite; } /* Scroll-down cue */ .scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2; opacity: 0.55; transition: opacity 0.3s ease; } .scroll-cue:hover { opacity: 1; } .scroll-cue-mouse { display: block; width: 24px; height: 38px; border: 2px solid rgba(255, 255, 255, 0.4); border-radius: 12px; position: relative; } .scroll-cue-wheel { position: absolute; top: 7px; left: 50%; width: 4px; height: 7px; background: var(--c-yellow); border-radius: 2px; transform: translateX(-50%); animation: scrollWheel 1.8s ease-in-out infinite; } @keyframes scrollWheel { 0% { opacity: 1; transform: translate(-50%, 0); } 60% { opacity: 0; transform: translate(-50%, 12px); } 100% { opacity: 0; transform: translate(-50%, 12px); } } @media (prefers-reduced-motion: reduce) { .hero .anim { opacity: 1 !important; transform: none !important; transition: none; } .hero .anim-fade { opacity: 1 !important; transition: none; } .scroll-cue-wheel { animation: none; } } /* 3D Answering Engine Visualization */ .hero-visual { position: absolute; right: -5%; top: 180px; width: 600px; height: 600px; perspective: 1000px; } .ae-core { position: absolute; top: 50%; left: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; background: radial-gradient(circle at 30% 30%, #333, #0a0a0a); border-radius: 50%; box-shadow: inset 0 0 40px rgba(255, 208, 44, 0.1), 0 0 60px rgba(255, 208, 44, 0.3), inset 0px -10px 20px rgba(0,0,0,0.8); border: 1px solid rgba(255, 208, 44, 0.2); transform-style: preserve-3d; animation: floatCore 6s ease-in-out infinite; } .ae-glow { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; background: var(--c-yellow); border-radius: 50%; filter: blur(20px); animation: pulseGlow 4s ease-in-out infinite alternate; } .ae-ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px solid rgba(255, 208, 44, 0.15); transform-style: preserve-3d; } .ae-ring-1 { width: 340px; height: 340px; margin: -170px 0 0 -170px; animation: rotateRing 20s linear infinite; } .ae-ring-2 { width: 480px; height: 480px; margin: -240px 0 0 -240px; animation: rotateRingReverse 25s linear infinite; border-color: rgba(255,255,255,0.05); } .ae-ring-3 { width: 560px; height: 560px; margin: -280px 0 0 -280px; animation: rotateRing 35s linear infinite; border-style: dashed; } .floating-card { position: absolute; background: rgba(30, 30, 30, 0.6); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); border-top: 1px solid rgba(255,255,255,0.2); border-left: 1px solid rgba(255,255,255,0.2); padding: 16px 20px; border-radius: 16px; color: var(--c-white); box-shadow: 0 16px 32px rgba(0,0,0,0.4); transform-style: preserve-3d; } .card-label { font-size: 11px; color: var(--c-yellow); font-weight: 700; text-transform: uppercase; margin-bottom: 4px; } .card-title { font-size: 14px; font-weight: 600; } .card-desc { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 4px; } /* Parallax wrappers position the cards; the inner card keeps floating */ .fc-wrap { position: absolute; will-change: transform; } .fc-wrap.fc-1 { top: 15%; left: 0; } .fc-wrap.fc-2 { bottom: 20%; right: 10%; } .fc-wrap.fc-3 { top: 24%; right: 9%; } .fc-wrap .floating-card { position: relative; width: max-content; animation: floatCard 5s ease-in-out infinite; } .fc-wrap.fc-2 .floating-card { animation-duration: 6s; animation-delay: 1s; } .fc-wrap.fc-3 .floating-card { animation-duration: 7s; animation-delay: 2s; } /* Soft content swap for the live-feed card cycling */ .floating-card > div { transition: opacity 0.3s ease, transform 0.3s ease; } .floating-card.card-swap > div { opacity: 0; transform: translateY(6px); } @keyframes floatCore { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } @keyframes pulseGlow { 0% { opacity: 0.5; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } } @keyframes rotateRing { 0% { transform: rotateX(70deg) rotateZ(0deg); } 100% { transform: rotateX(70deg) rotateZ(360deg); } } @keyframes rotateRingReverse { 0% { transform: rotateX(60deg) rotateY(20deg) rotateZ(360deg); } 100% { transform: rotateX(60deg) rotateY(20deg) rotateZ(0deg); } } @keyframes floatCard { 0%, 100% { transform: translateY(0) rotateX(10deg) rotateY(-10deg); } 50% { transform: translateY(-10px) rotateX(12deg) rotateY(-12deg); } } /* ---------------- Clara: interactive voice orb ---------------- */ [hidden] { display: none !important; } .clara-ui { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; text-align: center; padding: 24px; pointer-events: none; } .clara-orb, .clara-hint, .clara-chip, .clara-mute, .clara-live, .clara-stop, .clara-end { pointer-events: auto; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .clara-orb { position: relative; width: 176px; height: 176px; border-radius: 50%; border: 1px solid rgba(255, 208, 44, 0.35); padding: 0; cursor: pointer; background: radial-gradient(circle at 35% 30%, #3a3010, #140f00 72%); box-shadow: 0 0 55px rgba(255, 208, 44, 0.28), inset 0 0 36px rgba(255, 208, 44, 0.12), inset 0 -10px 22px rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; transition: box-shadow 0.3s ease, transform 0.25s ease; --clara-level: 0; } .clara-orb::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 208, 44, 0.5), transparent 62%); filter: blur(22px); transform: scale(calc(0.85 + var(--clara-level) * 0.55)); opacity: calc(0.45 + var(--clara-level) * 0.55); transition: transform 0.09s linear, opacity 0.09s linear; z-index: -1; } .clara-orb-core { width: 82px; height: 82px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFE9A6, #FFD02C 55%, #C99B00); box-shadow: 0 0 28px rgba(255, 208, 44, 0.55); transform: scale(calc(0.82 + var(--clara-level) * 0.4)); transition: transform 0.09s linear, opacity 0.2s ease; } .clara-orb:hover { transform: scale(1.04); box-shadow: 0 0 80px rgba(255, 208, 44, 0.45), inset 0 0 36px rgba(255, 208, 44, 0.18), inset 0 -10px 22px rgba(0, 0, 0, 0.7); } .clara-orb:active { transform: scale(0.98); } .clara-orb:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 6px; } /* Sound-wave ripples that radiate out of the orb — the "talking" waves */ .clara-orb::before, .clara-orb-core, .clara-ripple { pointer-events: none; } .clara-ripple { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c-yellow); opacity: 0; } .clara-orb.speaking .clara-ripple { animation: claraRipple 1.7s ease-out infinite; } .clara-orb.speaking .clara-ripple:nth-child(2) { animation-delay: 0.55s; } .clara-orb.speaking .clara-ripple:nth-child(3) { animation-delay: 1.1s; } @keyframes claraRipple { 0% { transform: scale(0.9); opacity: calc(0.35 + var(--clara-level) * 0.5); } 100% { transform: scale(2.4); opacity: 0; } } /* Idle: the inner core gently breathes & glows to invite a tap, with one slow ping */ .clara-orb.idle .clara-orb-core { animation: claraCorePulse 2.6s ease-in-out infinite; } @keyframes claraCorePulse { 0%, 100% { transform: scale(0.88); box-shadow: 0 0 20px rgba(255, 208, 44, 0.5); } 50% { transform: scale(1.06); box-shadow: 0 0 46px rgba(255, 208, 44, 0.95); } } .clara-orb.idle .clara-ripple:first-child { animation: claraRipple 3.4s ease-out infinite; } .clara-orb.idle::before { animation: claraGlowPulse 2.6s ease-in-out infinite; } @keyframes claraGlowPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } /* Speaking: the inner core reacts to Clara's actual voice level */ .clara-orb.speaking .clara-orb-core { transform: scale(calc(0.82 + var(--clara-level) * 0.55)); } .clara-hint { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 208, 44, 0.3); color: #fff; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 100px; cursor: pointer; white-space: nowrap; backdrop-filter: blur(8px); animation: claraIdle 3.6s ease-in-out infinite; } .clara-hint-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-yellow); box-shadow: 0 0 10px var(--c-yellow); } .hero-visual.clara-active .clara-hint { display: none; } .clara-stop { position: relative; z-index: 10; background: rgba(20, 15, 0, 0.85); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 100px; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(4px); } .clara-stop:hover { border-color: var(--c-yellow); color: var(--c-yellow); } .clara-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 360px; } .clara-chip { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 100px; cursor: pointer; transition: all 0.2s; } .clara-chip:hover { border-color: var(--c-yellow); color: var(--c-yellow); transform: translateY(-2px); } .clara-chip.playing { background: var(--c-yellow); color: var(--c-ink); border-color: var(--c-yellow); } .clara-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; } .clara-mute, .clara-end { background: none; border: none; color: rgba(255, 255, 255, 0.6); font-size: 12px; font-weight: 600; cursor: pointer; } .clara-mute:hover, .clara-end:hover { color: #fff; } .clara-live { color: var(--c-yellow); font-size: 13px; font-weight: 700; } .clara-live:hover { text-decoration: underline; } .hero-visual.clara-active .floating-card { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } @media (prefers-reduced-motion: reduce) { .clara-orb.idle .clara-orb-core, .clara-orb.idle::before, .clara-ripple, .clara-hint { animation: none; } } /* ---------------- Tech Rail ---------------- */ .tech-rail { padding: 44px 0; border-top: 1px solid var(--c-border-dark); border-bottom: 1px solid var(--c-border-dark); overflow: hidden; background: var(--c-white); } .tech-rail .label-small { text-align: center; display: block; color: var(--c-muted); margin-bottom: 30px; } /* Fade the marquee out at both edges */ .ticker-mask { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } /* The looping is driven by JS (Web Animations) for a seamless, screen-width-safe belt */ .ticker-track { display: flex; width: max-content; will-change: transform; } .ticker-track.left { margin-bottom: 24px; } .ticker-set { display: flex; align-items: center; } /* Each logo sits in a soft, uniform card */ .tech-tile { flex: 0 0 auto; min-width: 170px; height: 74px; margin: 0 9px; padding: 0 26px; border-radius: 16px; background: var(--c-cloud); border: 1px solid var(--c-border-dark); display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .tech-tile:hover { background: var(--c-white); border-color: rgba(255, 208, 44, 0.55); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.07); transform: translateY(-4px); } /* Logos are pre-trimmed to full-bleed, so one height reads evenly across all of them. Monochrome + darkened at rest; full colour on hover. */ .tech-tile img { height: 28px; width: auto; max-width: 128px; object-fit: contain; filter: grayscale(1) brightness(0.45); transition: filter 0.3s ease, transform 0.3s ease; } .tech-tile:hover img { filter: grayscale(0) brightness(1); transform: scale(1.05); } /* ---------------- Missed Call Problem ---------------- */ .missed-call-section { overflow: hidden; } /* ---- Feature list -> icon rows ---- */ .missed-features { margin-top: 40px; } .missed-feature { display: flex; gap: 16px; align-items: flex-start; border-top: 1px solid rgba(0,0,0,0.12); padding: 24px 0; } .missed-feature-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: rgba(0,0,0,0.06); color: var(--c-ink); display: flex; align-items: center; justify-content: center; transition: background .3s ease, color .3s ease, transform .3s ease; } .missed-feature-icon svg { width: 22px; height: 22px; } .missed-feature:hover .missed-feature-icon { background: var(--c-ink); color: var(--c-yellow); transform: translateY(-2px); } .missed-feature h4 { font-size: 20px; margin-bottom: 6px; } .missed-feature p { color: rgba(0,0,0,0.7); font-size: 15px; line-height: 1.5; } /* staggered cascade as they scroll in */ .missed-features .missed-feature.reveal:nth-child(1) { transition-delay: 0.06s; } .missed-features .missed-feature.reveal:nth-child(2) { transition-delay: 0.16s; } .missed-features .missed-feature.reveal:nth-child(3) { transition-delay: 0.26s; } /* ---- Live call card ---- */ .missed-call-section .grid-2 { align-items: stretch; } .callcard-stage { position: relative; display: flex; align-items: stretch; justify-content: center; } .callcard { position: relative; width: 100%; max-width: 380px; background: var(--c-white); border-radius: 24px; padding: 24px; box-shadow: 0 30px 70px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.08); overflow: hidden; display: flex; flex-direction: column; } .callcard::before { content: ""; position: absolute; inset: 0; border-radius: 24px; border: 1px solid rgba(0,0,0,0.05); pointer-events: none; } .callcard-top { display: flex; align-items: center; justify-content: space-between; background: var(--c-ink); margin: -24px -24px 20px; padding: 15px 20px; border-radius: 24px 24px 0 0; } .callcard-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--c-white); } .callcard-live i { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; } .callcard.state-ringing .callcard-live i { animation: ccPulse 1.6s ease-out infinite; } .callcard.state-answered .callcard-live i, .callcard.state-talking .callcard-live i, .callcard.state-booked .callcard-live i { background: var(--c-yellow); animation: none; box-shadow: none; } .callcard.state-booked .callcard-live { color: var(--c-yellow); } @keyframes ccPulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,0.5); } 70% { box-shadow: 0 0 0 9px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } } .callcard-timer { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.65); font-variant-numeric: tabular-nums; } /* live audio equalizer in header (voice on the line) */ .callcard-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; margin-left: auto; margin-right: 14px; opacity: 0; transition: opacity .3s ease; } .callcard-eq i { width: 3px; height: 4px; border-radius: 2px; background: var(--c-yellow); } .callcard.state-answered .callcard-eq, .callcard.state-talking .callcard-eq { opacity: 1; } .callcard.state-answered .callcard-eq i, .callcard.state-talking .callcard-eq i { animation: ccEq .9s ease-in-out infinite; } .callcard-eq i:nth-child(2) { animation-delay: .12s; } .callcard-eq i:nth-child(3) { animation-delay: .24s; } .callcard-eq i:nth-child(4) { animation-delay: .36s; } .callcard-eq i:nth-child(5) { animation-delay: .48s; } @keyframes ccEq { 0%,100% { height: 4px; } 50% { height: 16px; } } /* caller row */ .callcard-caller { display: flex; align-items: center; gap: 16px; position: relative; padding-bottom: 24px; } .callcard-avatar { position: relative; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--c-ink); color: var(--c-yellow); display: flex; align-items: center; justify-content: center; } .callcard-avatar svg { width: 26px; height: 26px; position: relative; z-index: 2; } .callcard-ring { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--c-yellow); opacity: 0; } .callcard.state-ringing .callcard-ring { animation: ccRing 2s ease-out infinite; } .callcard.state-ringing .callcard-ring:nth-child(2) { animation-delay: 1s; } @keyframes ccRing { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.1); opacity: 0; } } .callcard-id { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; } .callcard-id strong { font-size: 17px; color: var(--c-ink); white-space: nowrap; } .callcard-id span { font-size: 14px; color: rgba(0,0,0,0.5); white-space: nowrap; } .callcard-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--c-ink); color: var(--c-yellow); font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(6px) scale(0.9); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); } .callcard-badge svg { width: 15px; height: 15px; } .callcard.state-answered .callcard-badge, .callcard.state-talking .callcard-badge, .callcard.state-booked .callcard-badge { opacity: 1; transform: translateY(0) scale(1); } /* live-call transcript (voice, not SMS) */ /* live voice waveform (fills the card, signals an active call) */ .callcard-viz { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 3px; min-height: 88px; padding: 20px 0; opacity: 0.35; transform: scaleY(0.5); transform-origin: center; transition: opacity .3s ease, transform .3s ease; } .callcard.state-answered .callcard-viz, .callcard.state-talking .callcard-viz { opacity: 1; } /* conversation rhythm: surge on the active speaker, calm between turns */ .callcard.state-talking:not(.vox-active) .callcard-viz { opacity: 0.55; transform: scaleY(0.5); } .callcard.vox-active.vox-agent .callcard-viz { opacity: 1; transform: scaleY(1); } .callcard.vox-active.vox-caller .callcard-viz { opacity: 0.9; transform: scaleY(0.7); } .callcard-viz i { flex: 1 1 0; border-radius: 3px; background: var(--c-yellow); transform: scaleY(0.22); transform-origin: center; } .callcard.state-answered .callcard-viz i, .callcard.state-talking .callcard-viz i { animation: ccViz 1.1s ease-in-out infinite; } .callcard.vox-caller .callcard-viz i { background: #C9A227; } .callcard.state-booked .callcard-viz i { transform: scaleY(0.5); animation: none; } .callcard.state-booked .callcard-viz { opacity: 0.55; transform: scaleY(0.5); } @keyframes ccViz { 0%, 100% { transform: scaleY(0.22); } 50% { transform: scaleY(1); } } .callcard-convo { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid rgba(0,0,0,0.07); padding-top: 20px; } .cc-line { display: flex; flex-direction: column; gap: 5px; padding-left: 12px; border-left: 2px solid transparent; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; } .cc-line.agent { border-left-color: var(--c-yellow); } .cc-line.caller { border-left-color: rgba(0,0,0,0.18); } .cc-line.show { opacity: 1; transform: translateY(0); } .cc-who { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .cc-line.agent .cc-who { color: var(--c-ink); } .cc-line.caller .cc-who { color: rgba(0,0,0,0.45); } .cc-who svg { width: 14px; height: 14px; } .cc-line p { font-size: 14.5px; line-height: 1.45; color: var(--c-ink); } .cc-line.caller p { color: rgba(0,0,0,0.72); } /* tiny talking waveform on the agent's turn */ .cc-wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; } .cc-wave i { width: 2px; height: 3px; border-radius: 1px; background: var(--c-ink); } .cc-line.agent.show .cc-wave i { animation: ccWave .7s ease-in-out infinite; } @keyframes ccWave { 0%,100% { height: 3px; } 50% { height: 10px; } } .cc-wave i:nth-child(2) { animation-delay: .1s; } .cc-wave i:nth-child(3) { animation-delay: .2s; } .cc-wave i:nth-child(4) { animation-delay: .3s; } .callcard.state-booked .cc-wave i { animation: none !important; height: 3px; } /* outcome */ .callcard-outcome { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: rgba(255,208,44,0.20); border: 1px solid rgba(255,208,44,0.55); color: var(--c-ink); font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; } .callcard-outcome svg { width: 18px; height: 18px; } .callcard.state-booked .callcard-outcome { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .callcard-live i, .callcard.state-ringing .callcard-ring, .callcard-eq i, .cc-wave i, .callcard-viz i { animation: none !important; } .cc-line, .callcard-badge, .callcard-outcome { transition: none; } } @media (max-width: 768px) { .callcard-stage { min-height: auto; padding: 8px 0 0; } .callcard { max-width: 100%; } } /* ---------------- Capabilities Bento ---------------- */ .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 244px; gap: 20px; margin-top: 60px; } .bento-item { background: var(--c-cloud); border: 1px solid var(--c-border-dark); border-radius: 24px; padding: 28px; position: relative; overflow: hidden; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease; display: flex; flex-direction: column; } .bento-item:hover { transform: translateY(-6px); background: var(--c-white); border-color: rgba(255,208,44,0.6); box-shadow: 0 18px 40px rgba(0,0,0,0.08); } /* consistent icon tile */ .bento-icon { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px; background: rgba(0,0,0,0.06); color: var(--c-ink); display: flex; align-items: center; justify-content: center; transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease; } .bento-icon svg { width: 24px; height: 24px; } .bento-item:hover .bento-icon { background: var(--c-ink); color: var(--c-yellow); transform: translateY(-2px); } .bento-body { margin-top: auto; } .bento-body h3 { font-size: 21px; margin: 18px 0 8px; letter-spacing: -0.01em; } .bento-body p { font-size: 14.5px; line-height: 1.55; color: var(--c-muted); } /* Hero tile (ink, waveform, 24/7) */ .bento-hero { grid-column: span 2; background: var(--c-ink); border-color: transparent; color: var(--c-white); } .bento-hero:hover { background: #111; border-color: rgba(255,208,44,0.5); } .bento-hero .bento-body { margin-top: 0; } .bento-hero .bento-body p { color: rgba(255,255,255,0.72); max-width: 46ch; } .bento-hero .bento-icon { background: rgba(255,255,255,0.1); color: var(--c-yellow); } .bento-hero:hover .bento-icon { background: var(--c-yellow); color: var(--c-ink); } .bento-head { display: flex; align-items: center; justify-content: space-between; } .bento-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255,208,44,0.14); color: var(--c-yellow); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; } .bento-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-yellow); animation: bentoPulse 1.8s ease-out infinite; } @keyframes bentoPulse { 0% { box-shadow: 0 0 0 0 rgba(255,208,44,0.5); } 70% { box-shadow: 0 0 0 8px rgba(255,208,44,0); } 100% { box-shadow: 0 0 0 0 rgba(255,208,44,0); } } /* hero waveform */ .bento-wave { position: absolute; left: 28px; right: 28px; bottom: 24px; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 3px; opacity: 0.9; } .bento-wave i { flex: 1 1 0; border-radius: 3px; background: var(--c-yellow); transform: scaleY(0.2); transform-origin: center; animation: ccViz 1.2s ease-in-out infinite; } /* Full-width closer banner */ .bento-banner { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 40px; background: var(--c-ink); border-color: transparent; color: var(--c-white); } .bento-banner:hover { background: #111; border-color: rgba(255,208,44,0.5); transform: translateY(-4px); } .bento-banner .bento-body { margin-top: 0; max-width: 320px; flex: 0 0 auto; } .bento-banner .bento-body h3 { margin-top: 16px; } .bento-banner .bento-body p { color: rgba(255,255,255,0.72); } .bento-banner .bento-icon { background: rgba(255,255,255,0.1); color: var(--c-yellow); } .bento-banner:hover .bento-icon { background: var(--c-yellow); color: var(--c-ink); } .bento-flow { flex: 1; display: flex; align-items: center; gap: 0; min-width: 0; } .flow-node { flex: 0 0 auto; padding: 12px 18px; border-radius: 12px; background: var(--c-yellow); color: var(--c-ink); font-weight: 700; font-size: 14px; white-space: nowrap; } .flow-line { flex: 0 0 56px; height: 2px; position: relative; background: rgba(255,255,255,0.18); margin: 0 4px; } .flow-line b { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--c-yellow); animation: flowDot 2.2s linear infinite; } @keyframes flowDot { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } } .flow-chips { display: flex; flex-wrap: wrap; gap: 10px; } .flow-chip { padding: 10px 16px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.9); font-size: 13.5px; font-weight: 600; transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease; } .bento-banner:hover .flow-chip { border-color: rgba(255,208,44,0.35); } /* staggered scroll-in cascade */ .bento-grid .bento-item.reveal:nth-child(1) { transition-delay: 0.04s; } .bento-grid .bento-item.reveal:nth-child(2) { transition-delay: 0.10s; } .bento-grid .bento-item.reveal:nth-child(3) { transition-delay: 0.16s; } .bento-grid .bento-item.reveal:nth-child(4) { transition-delay: 0.22s; } .bento-grid .bento-item.reveal:nth-child(5) { transition-delay: 0.28s; } .bento-grid .bento-item.reveal:nth-child(6) { transition-delay: 0.34s; } @media (prefers-reduced-motion: reduce) { .bento-wave i, .bento-badge i, .flow-line b { animation: none !important; } .bento-wave i { transform: scaleY(0.5); } } /* ---------------- Interactive Demo ---------------- */ .demo-section { position: relative; } .demo-glow { position: absolute; top: 50%; left: 50%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,208,44,0.15) 0%, transparent 70%); transform: translate(-50%, -50%); z-index: 0; pointer-events: none; } .demo-interface { background: rgba(41,41,41,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 32px; backdrop-filter: blur(20px); position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 60px; box-shadow: 0 40px 100px rgba(0,0,0,0.5); } /* Left: live voice-call transcript (matches Section 3, dark theme) */ .demo-call { display: flex; flex-direction: column; } .demo-call-top { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.1); } .demo-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--c-white); } .demo-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-yellow); animation: demoPulse 1.6s ease-out infinite; } @keyframes demoPulse { 0% { box-shadow: 0 0 0 0 rgba(255,208,44,0.5); } 70% { box-shadow: 0 0 0 8px rgba(255,208,44,0); } 100% { box-shadow: 0 0 0 0 rgba(255,208,44,0); } } .demo-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; margin-right: auto; } .demo-eq i { width: 3px; height: 4px; border-radius: 2px; background: var(--c-yellow); animation: demoEq 0.9s ease-in-out infinite; } .demo-eq i:nth-child(2) { animation-delay: 0.12s; } .demo-eq i:nth-child(3) { animation-delay: 0.24s; } .demo-eq i:nth-child(4) { animation-delay: 0.36s; } .demo-eq i:nth-child(5) { animation-delay: 0.48s; } @keyframes demoEq { 0%, 100% { height: 4px; } 50% { height: 16px; } } .demo-timer { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; } .demo-transcript { display: flex; flex-direction: column; gap: 18px; } .dc-line { display: flex; flex-direction: column; gap: 5px; padding-left: 14px; border-left: 2px solid transparent; opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; } .dc-line.agent { border-left-color: var(--c-yellow); } .dc-line.caller { border-left-color: rgba(255,255,255,0.25); } .dc-line.show { opacity: 1; transform: translateY(0); } .dc-who { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .dc-line.agent .dc-who { color: var(--c-yellow); } .dc-line.caller .dc-who { color: rgba(255,255,255,0.45); } .dc-line p { font-size: 15px; line-height: 1.5; color: var(--c-white); } .dc-line.caller p { color: rgba(255,255,255,0.72); } /* Right: live actions ledger with ticking checks */ .demo-outcome { background: rgba(0,0,0,0.25); border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); padding: 32px; align-self: start; } .outcome-header { font-size: 12px; color: var(--c-yellow); font-weight: 700; letter-spacing: 0.1em; margin-bottom: 28px; display: flex; align-items: center; gap: 8px; } .outcome-header::before { content: ''; display: block; width: 8px; height: 8px; background: var(--c-yellow); border-radius: 50%; box-shadow: 0 0 10px var(--c-yellow); } .outcome-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; opacity: 0.35; transform: translateX(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .outcome-row.active { opacity: 1; transform: translateX(0); } .outcome-check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); color: var(--c-yellow); display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, border-color 0.3s ease; } .outcome-row.active .outcome-check { background: rgba(255,208,44,0.16); border-color: rgba(255,208,44,0.55); } .outcome-check svg { width: 15px; height: 15px; stroke-dasharray: 26; stroke-dashoffset: 26; } .outcome-row.active .outcome-check svg { animation: dcCheck 0.4s ease forwards 0.1s; } @keyframes dcCheck { to { stroke-dashoffset: 0; } } .outcome-text { padding-top: 2px; } .outcome-label { font-size: 13px; color: var(--c-muted); margin-bottom: 3px; } .outcome-value { font-size: 16px; color: var(--c-white); font-weight: 500; } .replay-btn { background: transparent; color: var(--c-muted); border: 1px solid rgba(255,255,255,0.18); padding: 9px 18px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .replay-btn:hover { background: rgba(255,208,44,0.12); color: var(--c-white); border-color: rgba(255,208,44,0.5); } /* completed state */ .demo-interface.completed .demo-live i { animation: none; } .demo-interface.completed .demo-eq i { animation: none; height: 4px; } @media (prefers-reduced-motion: reduce) { .demo-live i, .demo-eq i { animation: none !important; } .dc-line, .outcome-row { transition: none; } .outcome-check svg { stroke-dashoffset: 0; animation: none !important; } } /* ---------------- Industries ---------------- */ .industries-section { position: relative; overflow: hidden; } .industries-bg-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1000px; height: 1000px; background: radial-gradient(circle, var(--c-soft-yellow) 0%, transparent 60%); z-index: 0; pointer-events: none; } .industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; z-index: 1; margin-top: 60px; } .industry-card { background: var(--c-white); border-radius: 24px; padding: 32px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); border: 1px solid var(--c-border-dark); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, border-color 0.45s ease; position: relative; display: flex; flex-direction: column; } /* "live call" ripple on hover: two rings emanating from the card */ .industry-card::before, .industry-card::after { content: ''; position: absolute; inset: 0; border-radius: 24px; border: 2.5px solid var(--c-yellow); opacity: 0; pointer-events: none; } .industry-card:hover::after { animation: indPulse 1.5s ease-out infinite; } .industry-card:hover::before { animation: indPulse 1.5s ease-out infinite 0.35s; } @keyframes indPulse { 0% { opacity: 0.9; transform: scale(1); } 75% { opacity: 0; transform: scale(1.11); } 100% { opacity: 0; transform: scale(1.11); } } /* active (auto-cycle) and hover share the lit look */ .industry-card.calling, .industry-card:hover { transform: translateY(-8px); box-shadow: 0 26px 54px rgba(0,0,0,0.09); border-color: rgba(255, 208, 44, 0.6); } .industry-icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(0,0,0,0.06); color: var(--c-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease; } .industry-icon svg { width: 28px; height: 28px; } .industry-card.calling .industry-icon, .industry-card:hover .industry-icon { background: var(--c-ink); color: var(--c-yellow); transform: translateY(-2px); } .industry-card h3 { font-size: 21px; margin-bottom: 10px; letter-spacing: -0.01em; } .industry-card p { font-size: 15px; color: var(--c-muted); margin-bottom: 24px; line-height: 1.55; } .industry-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; } .ind-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--c-border-dark); background: transparent; color: var(--c-muted); font-size: 12.5px; font-weight: 600; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .ind-chip::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.55; } /* chips light up sequentially when the card is active or hovered */ .industry-card.calling .ind-chip, .industry-card:hover .ind-chip { background: rgba(255,208,44,0.16); border-color: rgba(255,208,44,0.5); color: var(--c-ink); } .industry-card.calling .ind-chip:nth-child(2), .industry-card:hover .ind-chip:nth-child(2) { transition-delay: 0.08s; } .industry-card.calling .ind-chip:nth-child(3), .industry-card:hover .ind-chip:nth-child(3) { transition-delay: 0.16s; } @media (prefers-reduced-motion: reduce) { .industry-card:hover::before, .industry-card:hover::after { animation: none; } .ind-chip { transition: none; } } /* ---------------- Process ---------------- */ .process-path { position: relative; padding-left: 60px; margin-top: 80px; } .process-line { position: absolute; top: 0; bottom: 0; left: 24px; width: 2px; background: var(--c-border-dark); } .process-line-active { position: absolute; top: 0; left: -1px; width: 4px; height: 0%; background: var(--c-yellow); transition: height 0.3s ease; } .process-step { position: relative; margin-bottom: 80px; } .process-step:last-child { margin-bottom: 0; } .step-node { position: absolute; left: -44px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--c-cloud); border: 4px solid var(--c-white); box-shadow: 0 0 0 1px var(--c-border-dark); z-index: 2; transition: all 0.3s ease; } .process-step.active .step-node { background: var(--c-yellow); box-shadow: 0 0 0 2px var(--c-yellow), 0 0 20px rgba(255,208,44,0.5); } .step-label { font-size: 14px; font-weight: 700; color: var(--c-muted); margin-bottom: 8px; display: block; } .process-step h3 { font-size: 28px; margin-bottom: 14px; } .process-step p { font-size: 16px; color: var(--c-muted); line-height: 1.6; } /* two-column scrollytelling layout */ .process-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-top: 60px; } .process-layout .process-path { margin-top: 0; } /* tall gaps give the sticky panel room to stay pinned across all steps */ .process-step { margin-bottom: 44vh; } .process-step:first-child { margin-top: 4vh; } /* active step brightens, others dim */ .process-step h3, .process-step p, .process-step .step-label { transition: opacity 0.4s ease, color 0.4s ease; } .process-step:not(.current) h3, .process-step:not(.current) p, .process-step:not(.current) .step-label { opacity: 0.45; } .process-step.current .step-label { color: var(--c-ink); } /* sticky visual panel */ .process-visual-wrap { position: sticky; top: 120px; } .process-visual-card { position: relative; background: linear-gradient(var(--c-cloud), var(--c-cloud)) padding-box, linear-gradient(140deg, var(--c-ink) 0%, var(--c-ink) 40%, var(--c-yellow) 100%) border-box; border: 2px solid transparent; border-radius: 24px; min-height: 452px; padding: 32px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,208,44,0.14), 0 0 34px rgba(255,208,44,0.18), 0 24px 55px rgba(0,0,0,0.12); } .pv { position: absolute; inset: 32px; display: flex; flex-direction: column; opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; } .pv.active { opacity: 1; transform: translateY(0); } .pv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; } .pv-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink); background: rgba(255,208,44,0.22); padding: 6px 12px; border-radius: 999px; } .pv-tag-live { display: inline-flex; align-items: center; gap: 7px; background: var(--c-ink); color: var(--c-yellow); } .pv-tag-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-yellow); animation: demoPulse 1.6s ease-out infinite; } .pv-sub { font-size: 13px; color: var(--c-muted); } @keyframes pvIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } /* step 1: intake rows */ .pv-rows { display: flex; flex-direction: column; gap: 10px; } .pv-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border-radius: 12px; background: var(--c-white); border: 1px solid var(--c-border-dark); font-size: 14px; opacity: 0; } .pv-row span { color: var(--c-muted); } .pv-row b { color: var(--c-ink); font-weight: 600; text-align: right; } .pv.active .pv-row { animation: pvIn 0.5s ease forwards; } .pv.active .pv-row:nth-child(1) { animation-delay: 0.08s; } .pv.active .pv-row:nth-child(2) { animation-delay: 0.18s; } .pv.active .pv-row:nth-child(3) { animation-delay: 0.28s; } .pv.active .pv-row:nth-child(4) { animation-delay: 0.38s; } .pv.active .pv-row:nth-child(5) { animation-delay: 0.48s; } /* step 2: flow diagram */ .pv-flow { display: flex; flex-direction: column; align-items: center; padding-top: 8px; } .pv-fnode { background: var(--c-white); border: 1px solid var(--c-border-dark); border-radius: 10px; padding: 11px 20px; font-size: 14px; font-weight: 600; color: var(--c-ink); opacity: 0; } .pv-fnode.alt { background: rgba(255,208,44,0.16); border-color: rgba(255,208,44,0.5); font-size: 13px; padding: 9px 15px; } .pv-fline { width: 2px; height: 24px; background: var(--c-border-dark); opacity: 0; } .pv-fbranch { display: flex; gap: 12px; margin-top: 2px; } .pv.active .pv-fnode, .pv.active .pv-fline { animation: pvIn 0.45s ease forwards; } .pv.active .pv-flow > *:nth-child(1) { animation-delay: 0.10s; } .pv.active .pv-flow > *:nth-child(2) { animation-delay: 0.22s; } .pv.active .pv-flow > *:nth-child(3) { animation-delay: 0.34s; } .pv.active .pv-flow > *:nth-child(4) { animation-delay: 0.46s; } .pv.active .pv-flow > *:nth-child(5) { animation-delay: 0.58s; } /* step 3: integrations + tests */ .pv-integrations { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .pv-chip { padding: 8px 14px; border-radius: 999px; background: var(--c-white); border: 1px solid var(--c-border-dark); font-size: 13px; font-weight: 600; color: var(--c-ink); opacity: 0; } .pv.active .pv-chip { animation: pvIn 0.4s ease forwards; } .pv.active .pv-chip:nth-child(2) { animation-delay: 0.08s; } .pv.active .pv-chip:nth-child(3) { animation-delay: 0.16s; } .pv.active .pv-chip:nth-child(4) { animation-delay: 0.24s; } .pv-tests { display: flex; flex-direction: column; gap: 12px; } .pv-test { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--c-ink); opacity: 0; } .pv-check { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; background: rgba(255,208,44,0.2); color: #8a6d00; display: flex; align-items: center; justify-content: center; } .pv-check svg { width: 13px; height: 13px; } .pv.active .pv-test { animation: pvIn 0.4s ease forwards; } .pv.active .pv-test:nth-child(1) { animation-delay: 0.30s; } .pv.active .pv-test:nth-child(2) { animation-delay: 0.42s; } .pv.active .pv-test:nth-child(3) { animation-delay: 0.54s; } .pv.active .pv-test:nth-child(4) { animation-delay: 0.66s; } /* step 4: live dashboard */ .pv-wave { height: 60px; display: flex; align-items: center; gap: 3px; margin: 10px 0 24px; } .pv-wave i { flex: 1 1 0; border-radius: 3px; background: var(--c-yellow); transform: scaleY(0.3); transform-origin: center; animation: ccViz 1.2s ease-in-out infinite; } .pv-stats { display: flex; gap: 12px; margin-top: auto; } .pv-stat { flex: 1; background: var(--c-white); border: 1px solid var(--c-border-dark); border-radius: 12px; padding: 16px; } .pv-stat b { display: block; font-size: 26px; color: var(--c-ink); line-height: 1.1; } .pv-stat span { font-size: 12px; color: var(--c-muted); } @media (prefers-reduced-motion: reduce) { .pv-row, .pv-fnode, .pv-fline, .pv-chip, .pv-test { opacity: 1 !important; animation: none !important; } .pv-wave i, .pv-tag-live i { animation: none !important; } } /* ---------------- Managed Diagram ---------------- */ .managed-diagram { margin-top: 72px; } .managed-stage { position: relative; min-height: 452px; display: flex; align-items: center; justify-content: center; } /* scattered component chips that converge into the core */ .managed-orbit { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .diagram-piece { position: absolute; top: 50%; left: 50%; background: var(--c-graphite); border: 1px solid var(--c-border); padding: 11px 18px; border-radius: 10px; color: var(--c-white); font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 12px 26px rgba(0,0,0,0.4); transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)); transition: transform 0.9s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.7s ease; } .diagram-piece span { display: block; animation: mgFloat 3.6s ease-in-out infinite; } .dp-1 { --x: -232px; --y: -120px; --r: -8deg; } .dp-1 span { animation-delay: 0s; } .dp-2 { --x: 228px; --y: -142px; --r: 7deg; } .dp-2 span { animation-delay: 0.4s; } .dp-3 { --x: -280px; --y: 14px; --r: 5deg; } .dp-3 span { animation-delay: 0.8s; } .dp-4 { --x: 274px; --y: 26px; --r: -6deg; } .dp-4 span { animation-delay: 1.2s; } .dp-5 { --x: -196px; --y: 150px; --r: 9deg; } .dp-5 span { animation-delay: 1.6s; } .dp-6 { --x: 210px; --y: 150px; --r: -9deg; } .dp-6 span { animation-delay: 2s; } @keyframes mgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* central managed core */ .managed-core { position: relative; z-index: 2; width: 100%; max-width: 340px; background: linear-gradient(160deg, var(--c-graphite), #101010); border: 1px solid var(--c-border); border-radius: 20px; padding: 24px; box-shadow: 0 24px 60px rgba(0,0,0,0.45); opacity: 0.5; transform: scale(0.96); transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.7s ease, box-shadow 0.7s ease; } .managed-core-head { text-align: center; margin-bottom: 18px; } .managed-core-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-yellow); background: rgba(255,208,44,0.12); padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; } .managed-core-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-yellow); } .managed-core-head h3 { font-size: 30px; } .managed-stack { display: flex; flex-direction: column; gap: 8px; } .managed-layer { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 500; opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; } .managed-layer svg { width: 18px; height: 18px; color: var(--c-yellow); flex: 0 0 auto; } /* on scroll: chips converge and fade, core lights up, layers assemble in */ .managed-section.active .diagram-piece { transform: translate(-50%, -50%) translate(calc(var(--x) * 0.14), calc(var(--y) * 0.14)) scale(0.5); opacity: 0; } .managed-section.active .diagram-piece span { animation: none; } .managed-section.active .managed-core { opacity: 1; transform: scale(1); border-color: rgba(255,208,44,0.55); box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 42px rgba(255,208,44,0.18); } .managed-section.active .managed-layer { opacity: 1; transform: translateY(0); } .managed-section.active .managed-layer:nth-child(1) { transition-delay: 0.15s; } .managed-section.active .managed-layer:nth-child(2) { transition-delay: 0.25s; } .managed-section.active .managed-layer:nth-child(3) { transition-delay: 0.35s; } .managed-section.active .managed-layer:nth-child(4) { transition-delay: 0.45s; } .managed-section.active .managed-layer:nth-child(5) { transition-delay: 0.55s; } .managed-section.active .dp-2 { transition-delay: 0.04s; } .managed-section.active .dp-3 { transition-delay: 0.08s; } .managed-section.active .dp-4 { transition-delay: 0.12s; } .managed-section.active .dp-5 { transition-delay: 0.16s; } .managed-section.active .dp-6 { transition-delay: 0.20s; } /* points as icon cards */ .managed-points { margin-top: 72px; gap: 20px; } .managed-point { display: flex; gap: 16px; align-items: flex-start; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px; transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease; } .managed-point:hover { transform: translateY(-4px); border-color: rgba(255,208,44,0.4); background: rgba(255,255,255,0.05); } .mp-icon { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto; background: rgba(255,255,255,0.06); color: var(--c-white); display: flex; align-items: center; justify-content: center; transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease; } .mp-icon svg { width: 24px; height: 24px; } .managed-point:hover .mp-icon { background: var(--c-yellow); color: var(--c-ink); transform: translateY(-2px); } .managed-point h4 { font-size: 18px; margin-bottom: 8px; color: var(--c-white); } .managed-point p { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.55; } @media (prefers-reduced-motion: reduce) { .diagram-piece, .managed-core, .managed-layer { transition: none; } .diagram-piece span { animation: none; } } /* ---------------- Network Map ---------------- */ .network-map { position: relative; height: 800px; display: flex; align-items: center; justify-content: center; margin-top: 60px; } .network-center { width: 140px; height: 140px; background: var(--c-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; box-shadow: 0 20px 40px rgba(0,0,0,0.08), 0 0 46px rgba(255,208,44,0.22); border: 2px solid rgba(255,208,44,0.55); z-index: 10; position: relative; } .network-center::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c-yellow); opacity: 0; animation: hubPulse 2.6s ease-out infinite; } @keyframes hubPulse { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } } /* SVG spokes connecting hub to nodes */ .network-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; } .net-line { fill: none; stroke: var(--c-border-dark); stroke-width: 1.5; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 0.9s ease var(--delay), stroke 0.3s ease, stroke-width 0.3s ease; } .network-map.drawn .net-line { stroke-dashoffset: 0; } .net-line.hot { stroke: var(--c-yellow); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(255,208,44,0.55)); } .net-pulse { fill: var(--c-yellow); opacity: 0; transition: opacity 0.5s ease 0.6s; filter: drop-shadow(0 0 4px rgba(255,208,44,0.8)); } .network-map.drawn .net-pulse { opacity: 0.95; } .network-node { position: absolute; width: 280px; background: var(--c-white); border: 1px solid var(--c-border-dark); border-radius: 16px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; z-index: 5; } .network-node:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); border-color: rgba(255,208,44,0.6); } .nn-icon { width: 44px; height: 44px; border-radius: 11px; background: rgba(0,0,0,0.06); color: var(--c-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; } .nn-icon svg { width: 22px; height: 22px; } .network-node:hover .nn-icon { background: var(--c-ink); color: var(--c-yellow); transform: translateY(-2px); } .network-node h4 { font-size: 16px; margin-bottom: 8px; } .network-node p { font-size: 13px; color: var(--c-muted); line-height: 1.5; } .nn-1 { top: 0; left: calc(50% - 140px); } .nn-2 { top: 6%; right: 0; } .nn-3 { bottom: 6%; right: 0; } .nn-4 { bottom: 0; left: calc(50% - 140px); } .nn-5 { bottom: 6%; left: 0; } .nn-6 { top: 6%; left: 0; } @media (prefers-reduced-motion: reduce) { .net-line { transition: none; stroke-dashoffset: 0; } .net-pulse, .network-center::after { display: none; } } /* ---------------- Dashboard ---------------- */ .dashboard-visual { margin-top: 60px; } .dash-card { background: var(--c-white); border-radius: 20px; border: 1px solid var(--c-border-dark); box-shadow: 0 40px 90px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.05); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.4s ease; } .dash-card:hover { box-shadow: 0 46px 100px rgba(0,0,0,0.14), 0 8px 24px rgba(0,0,0,0.05); } /* window top bar */ .dash-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: var(--c-ink); } .dash-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--c-white); } .dash-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-yellow); box-shadow: 0 0 0 0 rgba(255,208,44,0.5); animation: dashPulse 1.8s ease-out infinite; } @keyframes dashPulse { 0% { box-shadow: 0 0 0 0 rgba(255,208,44,0.5); } 70% { box-shadow: 0 0 0 8px rgba(255,208,44,0); } 100% { box-shadow: 0 0 0 0 rgba(255,208,44,0); } } .dash-meta { font-size: 12.5px; color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; } /* tabs */ .dash-header { position: relative; background: var(--c-cloud); padding: 0 24px; border-bottom: 1px solid var(--c-border-dark); display: flex; gap: 28px; } .dash-tab { appearance: none; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--c-muted); padding: 16px 0; transition: color 0.3s ease; } .dash-tab:hover { color: var(--c-ink); } .dash-tab.active { color: var(--c-ink); } .dash-underline { position: absolute; bottom: -1px; left: 24px; height: 2px; width: 60px; background: var(--c-yellow); transition: left 0.4s cubic-bezier(0.16,1,0.3,1), width 0.4s cubic-bezier(0.16,1,0.3,1); } /* panels */ .dash-panels { position: relative; min-height: 392px; } .dash-panel { position: absolute; inset: 0; padding: 32px; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; overflow-y: auto; } .dash-panel.active { opacity: 1; transform: translateY(0); pointer-events: auto; } .dash-panel.active .stagger { animation: dashIn 0.5s ease backwards; } .dash-panel.active .stagger:nth-child(1) { animation-delay: 0.05s; } .dash-panel.active .stagger:nth-child(2) { animation-delay: 0.12s; } .dash-panel.active .stagger:nth-child(3) { animation-delay: 0.19s; } .dash-panel.active .stagger:nth-child(4) { animation-delay: 0.26s; } .dash-panel.active .stagger:nth-child(5) { animation-delay: 0.33s; } @keyframes dashIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .dash-field { margin-bottom: 22px; } .dash-field:last-child { margin-bottom: 0; } .dash-field label { font-size: 12px; color: var(--c-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 7px; display: block; } .dash-field .val { font-size: 16px; font-weight: 500; } .dash-field .val-strong { font-weight: 700; } .dash-field .val-pill { display: inline-flex; align-items: center; padding: 6px 12px; background: rgba(255,208,44,0.18); color: #8a6d00; font-weight: 700; border-radius: 20px; font-size: 13px; } /* transcript panel */ .dash-transcript { display: flex; flex-direction: column; gap: 16px; } .dt-line { padding-left: 12px; border-left: 2px solid transparent; } .dt-line.agent { border-left-color: var(--c-yellow); } .dt-line.caller { border-left-color: rgba(0,0,0,0.18); } .dt-who { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px; } .dt-line.agent .dt-who { color: var(--c-ink); } .dt-line.caller .dt-who { color: rgba(0,0,0,0.45); } .dt-line p { font-size: 14.5px; line-height: 1.45; color: var(--c-ink); } .dt-line.caller p { color: rgba(0,0,0,0.72); } /* recording panel */ .dash-recording { display: flex; flex-direction: column; gap: 28px; } .dr-player { display: flex; align-items: center; gap: 18px; } .dr-play { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--c-ink); color: var(--c-yellow); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; } .dr-play:hover { transform: scale(1.06); } .dr-play svg { width: 22px; height: 22px; margin-left: 2px; } .dr-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 48px; } .dr-wave i { flex: 1 1 0; border-radius: 2px; background: rgba(0,0,0,0.14); } .dr-wave i.played { background: var(--c-yellow); } .dr-time { font-size: 14px; font-weight: 600; color: var(--c-muted); font-variant-numeric: tabular-nums; } .dr-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .dr-rows .dash-field { margin-bottom: 0; } /* customer panel */ .dash-customer { display: flex; flex-direction: column; gap: 22px; } .dc-profile { display: flex; align-items: center; gap: 16px; } .dc-avatar { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; background: var(--c-ink); color: var(--c-yellow); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; } .dc-id { display: flex; flex-direction: column; } .dc-id strong { font-size: 18px; } .dc-id span { font-size: 14px; color: var(--c-muted); } .dc-tags { display: flex; flex-wrap: wrap; gap: 8px; } .dc-tag { padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,0.05); border: 1px solid var(--c-border-dark); font-size: 12.5px; font-weight: 600; } .dc-history { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--c-border-dark); padding-top: 18px; } .dc-hrow { display: flex; align-items: baseline; gap: 14px; font-size: 14px; } .dc-hrow span { flex: 0 0 56px; color: var(--c-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; } .dc-hrow b { font-weight: 500; color: var(--c-ink); } /* appointment panel */ .dash-appointment { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .da-cal { background: var(--c-cloud); border: 1px solid var(--c-border-dark); border-radius: 14px; padding: 18px; } .da-cal-head { font-size: 13px; font-weight: 700; color: var(--c-ink); margin-bottom: 14px; } .da-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .da-day { position: relative; text-align: center; padding: 10px 0; border-radius: 10px; background: var(--c-white); border: 1px solid var(--c-border-dark); } .da-day span { display: block; font-size: 10.5px; color: var(--c-muted); font-weight: 700; text-transform: uppercase; margin-bottom: 4px; } .da-day b { font-size: 16px; } .da-day.is-set { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); } .da-day.is-set span { color: var(--c-yellow); } .da-day.is-set i { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--c-yellow); } .da-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .da-add, .da-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; } .da-add { color: var(--c-ink); } .da-add svg { width: 18px; height: 18px; color: var(--c-ink); } .da-status { color: #8a6d00; } .da-status svg { width: 16px; height: 16px; } @media (prefers-reduced-motion: reduce) { .dash-live i { animation: none; } .dash-panel, .dash-underline { transition: none; } .dash-panel.active .stagger { animation: none; } } /* ---------------- FAQ ---------------- */ /* ---- Ask Citgentic FAQ ---- */ .faq-head { max-width: 640px; margin: 0 auto; } .faq-head h2 { margin: 12px 0 16px; } .faq-ask { display: none; } .js .faq-ask { display: grid; grid-template-columns: 1fr 1.05fr; gap: 32px; margin-top: 48px; align-items: stretch; } .faq-ask-left { display: flex; flex-direction: column; } .faq-source { max-width: 760px; margin: 48px auto 0; } .faq-cat-title { font-size: 20px; margin: 28px 0 8px; } .faq-qa { border-bottom: 1px solid var(--c-border-dark); padding: 18px 0; } .faq-qa h4 { font-size: 17px; margin-bottom: 8px; } .faq-qa p { color: var(--c-muted); } .js .faq-source { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* paginated question pages */ .faq-pages { position: relative; flex: 1; min-height: 300px; } .faq-page { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; opacity: 0; transform: translateX(14px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; } .faq-page.active { opacity: 1; transform: translateX(0); pointer-events: auto; } .faq-page-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); } .faq-page-chips { display: flex; flex-direction: column; gap: 10px; } /* nav: arrows + dots */ .faq-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; } .faq-dots { display: flex; gap: 9px; } .faq-dot { width: 8px; height: 8px; border-radius: 50%; padding: 0; border: none; cursor: pointer; background: rgba(0,0,0,0.18); transition: background 0.3s ease, transform 0.3s ease; } .faq-dot:hover { background: rgba(0,0,0,0.35); } .faq-dot.active { background: var(--c-yellow); transform: scale(1.3); } .faq-arrow { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; border: 1px solid var(--c-border-dark); background: var(--c-white); color: var(--c-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.25s ease, background 0.25s ease; } .faq-arrow svg { width: 18px; height: 18px; } .faq-arrow:hover { border-color: rgba(255,208,44,0.7); background: rgba(255,208,44,0.08); } /* question chips */ .faq-chip { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: var(--c-white); border: 1px solid var(--c-border-dark); border-radius: 12px; padding: 14px 16px; font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--c-ink); cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .faq-chip:hover { border-color: rgba(255,208,44,0.6); transform: translateX(3px); } .faq-chip.active { border-color: var(--c-yellow); background: rgba(255,208,44,0.12); } .faq-chip-arrow { width: 18px; height: 18px; flex: 0 0 auto; color: var(--c-muted); opacity: 0; transform: translateX(-4px); transition: opacity 0.25s ease, transform 0.25s ease; } .faq-chip:hover .faq-chip-arrow, .faq-chip.active .faq-chip-arrow { opacity: 1; transform: translateX(0); color: var(--c-ink); } .faq-chip[hidden] { display: none; } /* agent answer panel */ .faq-agent { background: var(--c-white); border: 1px solid var(--c-border-dark); border-radius: 20px; padding: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.06); min-height: 316px; display: flex; flex-direction: column; } .faq-agent-top { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--c-border-dark); margin-bottom: 18px; } .faq-avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; background: var(--c-ink); color: var(--c-yellow); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; } .faq-agent-id { display: flex; flex-direction: column; } .faq-agent-id strong { font-size: 15px; } .faq-status { font-size: 13px; color: var(--c-muted); } .faq-eq { margin-left: auto; display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; opacity: 0; transition: opacity 0.3s ease; } .faq-eq i { width: 3px; height: 4px; border-radius: 2px; background: var(--c-yellow); } .faq-agent.speaking .faq-eq { opacity: 1; } .faq-agent.speaking .faq-eq i { animation: ccEq 0.9s ease-in-out infinite; } .faq-eq i:nth-child(2) { animation-delay: 0.12s; } .faq-eq i:nth-child(3) { animation-delay: 0.24s; } .faq-eq i:nth-child(4) { animation-delay: 0.36s; } .faq-eq i:nth-child(5) { animation-delay: 0.48s; } .faq-convo { flex: 1; } .faq-q { font-size: 16px; font-weight: 600; color: var(--c-ink); padding-left: 12px; border-left: 2px solid rgba(0,0,0,0.18); margin-bottom: 16px; } .faq-a { padding-left: 12px; border-left: 2px solid var(--c-yellow); min-height: 24px; } .faq-answer-text { font-size: 15px; line-height: 1.6; color: var(--c-ink); display: inline; } .faq-answer-text.typing::after { content: '▍'; color: var(--c-yellow); animation: faqCaret 0.8s step-end infinite; } @keyframes faqCaret { 50% { opacity: 0; } } .faq-typing { display: inline-flex; align-items: center; gap: 5px; height: 20px; } .faq-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,0.3); animation: faqBlink 1.2s infinite; } .faq-typing i:nth-child(2) { animation-delay: 0.2s; } .faq-typing i:nth-child(3) { animation-delay: 0.4s; } @keyframes faqBlink { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } .faq-agent-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-border-dark); font-size: 12.5px; color: var(--c-muted); font-weight: 600; } .faq-foot-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-yellow); } @media (max-width: 768px) { .js .faq-ask { grid-template-columns: 1fr; gap: 20px; } .faq-agent { position: static; } } @media (prefers-reduced-motion: reduce) { .faq-agent.speaking .faq-eq i, .faq-typing i { animation: none; } .faq-answer-text.typing::after { display: none; } } /* ---------------- Final CTA ---------------- */ .cta-section { position: relative; overflow: hidden; text-align: center; padding: 160px 0 320px; } .cta-sphere-wrap { position: absolute; bottom: -440px; left: 50%; transform: translateX(-50%); width: 720px; height: 720px; z-index: 0; will-change: transform; } .cta-sphere { position: relative; width: 100%; height: 100%; background: radial-gradient(circle at 50% 20%, #FFD02C, #B38F00, #332700); border-radius: 50%; box-shadow: 0 0 150px rgba(255, 208, 44, 0.4); animation: breatheSphere 8s ease-in-out infinite; } /* answering signal rings emanating from the sphere */ .cta-ring { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(255, 208, 44, 0.45); transform: translate(-50%, -50%) scale(1); opacity: 0; animation: ctaRing 4.2s ease-out infinite; } .cta-ring:nth-child(2) { animation-delay: 1.4s; } .cta-ring:nth-child(3) { animation-delay: 2.8s; } @keyframes ctaRing { 0% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); } } .cta-content { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; } @keyframes breatheSphere { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } /* live chip */ .cta-content .label-small { display: block; } .cta-live { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255,208,44,0.12); color: var(--c-yellow); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 20px; } .cta-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-yellow); box-shadow: 0 0 0 0 rgba(255,208,44,0.5); animation: ctaDot 1.8s ease-out infinite; } @keyframes ctaDot { 0% { box-shadow: 0 0 0 0 rgba(255,208,44,0.5); } 70% { box-shadow: 0 0 0 9px rgba(255,208,44,0); } 100% { box-shadow: 0 0 0 0 rgba(255,208,44,0); } } /* headline sized to read in 2-3 lines */ .cta-title { font-size: clamp(38px, 6vw, 66px); line-height: 1.08; letter-spacing: -0.02em; margin: 18px 0 0; } .cta-sub { max-width: 620px; margin: 24px auto 0; opacity: 0.8; } .cta-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 40px; } .cta-btn { padding: 18px 40px; font-size: 18px; } .cta-link { color: var(--c-yellow); font-weight: 600; font-size: 15px; transition: opacity 0.2s ease; } .cta-link:hover { opacity: 0.75; } .cta-fine { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 8px; } /* staggered entrance */ .js .cta-content .cta-anim { opacity: 0; transform: translateY(22px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); } .cta-content.in .cta-anim { opacity: 1; transform: none; } .cta-content.in .cta-anim:nth-child(1) { transition-delay: 0.05s; } .cta-content.in .cta-anim:nth-child(2) { transition-delay: 0.14s; } .cta-content.in .cta-anim:nth-child(3) { transition-delay: 0.23s; } .cta-content.in .cta-anim:nth-child(4) { transition-delay: 0.32s; } .cta-content.in .cta-anim:nth-child(5) { transition-delay: 0.41s; } @media (prefers-reduced-motion: reduce) { .cta-sphere, .cta-ring, .cta-live i { animation: none; } .js .cta-content .cta-anim { opacity: 1; transform: none; transition: none; } } /* ---------------- Under construction ---------------- */ .construction { position: relative; overflow: hidden; min-height: 82vh; display: flex; align-items: center; text-align: center; padding: 120px 0; } .construction-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 620px; height: 620px; background: radial-gradient(circle, rgba(255,208,44,0.13), transparent 70%); pointer-events: none; z-index: 0; } .construction-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; } .cst-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255,208,44,0.12); color: var(--c-yellow); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 24px; } .cst-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-yellow); box-shadow: 0 0 0 0 rgba(255,208,44,0.5); animation: ctaDot 1.8s ease-out infinite; } .construction h1 { margin-bottom: 20px; } .construction p { opacity: 0.8; margin-bottom: 36px; } .cst-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ---------------- Nav dropdown (Legal) ---------------- */ .nav-dd { position: relative; } .nav-dd-toggle { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: inherit; padding: 0; } .nav-dd-caret { width: 15px; height: 15px; transition: transform 0.25s ease; } .nav-dd.open .nav-dd-caret { transform: rotate(180deg); } .nav-dd-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 226px; background: var(--c-white); border: 1px solid var(--c-border-dark); border-radius: 14px; box-shadow: 0 20px 44px rgba(0,0,0,0.14); padding: 8px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; z-index: 100; } /* invisible bridge across the gap so hover stays continuous */ .nav-dd-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* caret pointing at the toggle */ .nav-dd-menu::after { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 11px; height: 11px; background: var(--c-white); border-left: 1px solid var(--c-border-dark); border-top: 1px solid var(--c-border-dark); } .nav-dd:hover .nav-dd-menu, .nav-dd.open .nav-dd-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dd-menu a { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--c-ink) !important; transition: background 0.2s ease, padding 0.2s ease; } .nav-dd-menu a::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: var(--c-border-dark); transition: background 0.2s ease; } .nav-dd-menu a:hover { background: var(--c-cloud); padding-left: 16px; } .nav-dd-menu a:hover::before { background: var(--c-yellow); } /* ---------------- Legal / policy pages ---------------- */ .legal-hero { background: var(--c-ink); padding: 130px 0 52px; } .legal-hero h1 { color: var(--c-white); font-size: clamp(30px, 5vw, 46px); margin-top: 10px; } .legal-hero p { color: rgba(255,255,255,0.7); margin-top: 12px; max-width: 640px; } .legal-body { padding: 52px 0 80px; } .legal-content { max-width: 800px; margin: 0 auto; } .legal-updated { color: var(--c-muted); font-size: 14px; margin-bottom: 8px; } .legal-content h2 { font-size: 21px; margin: 40px 0 12px; letter-spacing: -0.01em; } .legal-content h3 { font-size: 16px; margin: 22px 0 8px; } .legal-content p { color: var(--c-muted); line-height: 1.7; margin-bottom: 14px; font-size: 15.5px; } .legal-content ul { margin: 0 0 16px 22px; color: var(--c-muted); line-height: 1.7; font-size: 15.5px; } .legal-content li { margin-bottom: 6px; } .legal-content a { color: var(--c-ink); font-weight: 600; text-decoration: underline; } .legal-content strong { color: var(--c-ink); } .legal-kw { display: inline-block; background: var(--c-cloud); border: 1px solid var(--c-border-dark); border-radius: 6px; padding: 1px 8px; font-weight: 700; color: var(--c-ink); } /* ---------------- SMS opt-in form ---------------- */ .sms-form-wrap { max-width: 620px; margin: 0 auto; } .sms-card { background: var(--c-white); border: 1px solid var(--c-border-dark); border-radius: 18px; padding: 32px; box-shadow: 0 20px 50px rgba(0,0,0,0.05); } .sms-field { margin-bottom: 18px; } .sms-field label { display: block; font-size: 13px; font-weight: 700; color: var(--c-ink); margin-bottom: 7px; } .sms-field .opt { color: var(--c-muted); font-weight: 500; } .sms-field input[type="text"], .sms-field input[type="email"], .sms-field input[type="tel"] { width: 100%; font-family: inherit; font-size: 15px; color: var(--c-ink); background: var(--c-cloud); border: 1px solid var(--c-border-dark); border-radius: 10px; padding: 13px 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .sms-field input:focus { outline: none; border-color: rgba(255,208,44,0.7); box-shadow: 0 0 0 3px rgba(255,208,44,0.15); } .sms-consent { display: flex; gap: 12px; align-items: flex-start; background: var(--c-cloud); border: 1px solid var(--c-border-dark); border-radius: 12px; padding: 16px; margin: 20px 0; } .sms-consent input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--c-yellow); cursor: pointer; } .sms-consent label { font-size: 13.5px; line-height: 1.6; color: var(--c-muted); } .sms-consent label strong { color: var(--c-ink); } .sms-ack { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; } .sms-ack input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--c-yellow); cursor: pointer; } .sms-ack label { font-size: 14px; color: var(--c-muted); } .sms-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sms-submit { width: 100%; margin-top: 8px; } .sms-status { padding: 14px 16px; border-radius: 10px; font-size: 14.5px; font-weight: 600; margin-bottom: 20px; } .sms-status.ok { background: rgba(48,163,108,0.12); color: #218358; border: 1px solid rgba(48,163,108,0.35); } .sms-status.err { background: rgba(229,72,77,0.1); color: #c0343a; border: 1px solid rgba(229,72,77,0.3); } .sms-note { font-size: 13px; color: var(--c-muted); margin-top: 16px; line-height: 1.6; } /* ---- Legal page design enhancements ---- */ .legal-hero { position: relative; overflow: hidden; } .legal-hero::after { content: ''; position: absolute; top: -40%; right: -10%; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(255,208,44,0.16), transparent 70%); pointer-events: none; } .legal-hero .container { position: relative; z-index: 1; } .legal-updated { display: inline-block; background: var(--c-cloud); border: 1px solid var(--c-border-dark); color: var(--c-muted); font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; margin-bottom: 28px; } /* two-column: sticky table of contents + content */ .legal-layout { display: grid; grid-template-columns: 236px 1fr; gap: 56px; align-items: start; max-width: 1060px; margin: 0 auto; } .legal-layout .legal-content { max-width: 760px; margin: 0; } .legal-toc { position: sticky; top: 100px; } .legal-toc-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 12px; } .legal-toc-list { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 160px); overflow-y: auto; } .legal-toc-list a { display: block; padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--c-muted); border-left: 2px solid transparent; text-decoration: none; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .legal-toc-list a:hover { color: var(--c-ink); background: var(--c-cloud); } .legal-toc-list a.active { color: var(--c-ink); border-left-color: var(--c-yellow); font-weight: 600; } /* sectioned headers */ .legal-content h2 { border-top: 1px solid var(--c-border-dark); padding-top: 30px; margin-top: 38px; display: flex; align-items: baseline; gap: 12px; } .legal-content h2:first-of-type { border-top: none; padding-top: 0; margin-top: 8px; } .legal-content > p:first-of-type { font-size: 16.5px; color: var(--c-ink); } /* ---- SMS opt-in page: two-column ---- */ .sms-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: start; max-width: 1000px; margin: 0 auto; } .sms-info { position: sticky; top: 100px; } .sms-info-card { background: var(--c-ink); color: var(--c-white); border-radius: 18px; padding: 28px; } .sms-info-card h3 { color: var(--c-white); font-size: 18px; margin-bottom: 6px; } .sms-info-card .sms-info-sub { color: rgba(255,255,255,0.6); font-size: 14px; margin-bottom: 20px; } .sms-info-list { display: flex; flex-direction: column; gap: 12px; } .sms-info-list li { display: flex; align-items: flex-start; gap: 11px; list-style: none; font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.5; } .sms-info-list li svg { width: 18px; height: 18px; color: var(--c-yellow); flex: 0 0 auto; margin-top: 1px; } .sms-info-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 10px; } .sms-info-foot span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.7); } .sms-info-foot span i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-yellow); flex: 0 0 auto; } .sms-form-wrap { max-width: none; margin: 0; } @media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; gap: 0; } .legal-toc { display: none; } .sms-layout { grid-template-columns: 1fr; gap: 28px; } .sms-info { position: static; order: -1; } } @media (max-width: 768px) { .nav-dd { width: 100%; } .nav-dd-toggle { width: 100%; justify-content: space-between; } .nav-dd-menu { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; box-shadow: none; border: none; background: transparent; padding: 6px 0 0 12px; min-width: 0; } .nav-dd-menu::before, .nav-dd-menu::after { display: none; } .navbar.transparent .nav-dd-menu a { color: var(--c-ink) !important; } .sms-card { padding: 22px; } } /* ---------------- Footer ---------------- */ .footer { position: relative; background: var(--c-ink); color: var(--c-muted); padding: 56px 0 28px; border-top: 1px solid rgba(255,255,255,0.06); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 36px; } .footer-brand p { max-width: 300px; margin-bottom: 20px; } .footer-social { display: flex; gap: 10px; margin-bottom: 18px; } .footer-social a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .footer-social a:hover { color: var(--c-ink); background: var(--c-yellow); border-color: var(--c-yellow); transform: translateY(-2px); } .footer-social svg { width: 18px; height: 18px; } .footer-email { color: rgba(255,255,255,0.7); font-size: 14px; font-weight: 600; transition: color 0.2s ease; } .footer-email:hover { color: var(--c-white); } .footer-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; color: var(--c-white); margin-bottom: 16px; } .footer-mark { height: 26px; width: auto; display: block; } .footer h4 { color: var(--c-white); font-size: 13px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.06em; } .footer ul li { margin-bottom: 11px; } .footer ul a { font-size: 15px; transition: color 0.2s; } .footer ul a:hover { color: var(--c-white); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 14px; } .footer-links a { margin-left: 24px; } .status-dot { display: inline-flex; align-items: center; gap: 8px; color: var(--c-white); font-weight: 600; } .status-dot::before { content: ''; width: 8px; height: 8px; background: var(--c-yellow); border-radius: 50%; box-shadow: 0 0 10px var(--c-yellow); animation: pulseDot 2s infinite; } @keyframes pulseDot { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } } /* Scroll Animations Hidden only when JS is present (html.js is set synchronously in ). Without JS, .reveal content stays fully visible, never a blank page. */ .js .reveal { opacity: 0; transform: translateY(30px); transition: all 0.75s cubic-bezier(0.16, 1, 0.3, 1); } .js .reveal.active { opacity: 1; transform: translateY(0); } /* Scroll Progress Line (Desktop) */ .scroll-progress { position: fixed; right: 24px; top: 0; bottom: 0; width: 2px; background: var(--c-border-dark); z-index: 999; } .scroll-progress-fill { width: 100%; background: var(--c-yellow); height: 0%; } /* =================================================================== Shared Subpage Components (Services / Use Cases / Resources) Built on the same tokens + visual language as the homepage. =================================================================== */ /* Page hero (dark, consistent with homepage hero) */ .page-hero { position: relative; overflow: hidden; padding: 190px 0 110px; } .page-hero .container { position: relative; z-index: 1; } .page-hero-content { max-width: 780px; } .page-hero-content .body-large { color: rgba(255, 255, 255, 0.7); } .page-hero .hero-buttons { margin-bottom: 0; } .eyebrow-line { width: 48px; height: 3px; background: var(--c-yellow); border-radius: 2px; margin-bottom: 24px; } /* Generic split section (text + visual) */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .split.reverse > *:first-child { order: 2; } .split.reverse > *:last-child { order: 1; } .split-visual { position: relative; min-height: 420px; border-radius: 24px; display: flex; align-items: center; justify-content: center; } /* Feature cards (3-up) */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; } .feature-card { background: var(--c-white); border: 1px solid var(--c-border-dark); border-radius: 24px; padding: 36px 32px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; } .feature-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.07); border-color: rgba(255, 208, 44, 0.5); } .feature-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--c-soft-yellow); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; } .feature-icon svg { width: 24px; height: 24px; stroke: var(--c-ink); } .feature-card h3 { font-size: 21px; margin-bottom: 12px; } .feature-card p { font-size: 15px; color: var(--c-muted); line-height: 1.6; } /* Numbered intake / benefit list */ .check-list { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; } .check-list li { display: flex; gap: 16px; align-items: flex-start; font-size: 16px; line-height: 1.55; } .check-list .check-mark { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--c-yellow); color: var(--c-ink); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; margin-top: 1px; } /* Stat row */ .stat-row { display: flex; gap: 56px; margin-top: 48px; flex-wrap: wrap; } .stat-num { font-size: clamp(34px, 4vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .stat-label { font-size: 14px; color: var(--c-muted); margin-top: 8px; max-width: 180px; } /* Integration chips */ .chip-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .chip { padding: 10px 18px; border: 1px solid var(--c-border); border-radius: 100px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.85); transition: all 0.25s ease; } .chip:hover { border-color: rgba(255, 208, 44, 0.5); color: var(--c-white); } /* Numbered process timeline (Resources) */ .timeline { max-width: 860px; margin: 72px auto 0; display: flex; flex-direction: column; gap: 20px; } .timeline-step { display: flex; gap: 28px; align-items: flex-start; background: var(--c-white); border: 1px solid var(--c-border-dark); border-radius: 20px; padding: 32px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .timeline-step:hover { transform: translateX(6px); border-color: rgba(255, 208, 44, 0.5); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05); } .timeline-num { flex: 0 0 auto; font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: var(--c-yellow); line-height: 1; width: 56px; } .timeline-step h3 { font-size: 20px; margin-bottom: 8px; } .timeline-step p { font-size: 15px; color: var(--c-muted); line-height: 1.6; } /* Pricing tiers */ .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 64px; align-items: stretch; } .price-card { background: var(--c-white); border: 1px solid var(--c-border-dark); border-radius: 24px; padding: 34px 28px; display: flex; flex-direction: column; position: relative; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .price-card:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08); border-color: rgba(255, 208, 44, 0.5); } .price-card.featured { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18); } .price-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--c-yellow); color: var(--c-ink); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; white-space: nowrap; } .price-tier { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted); margin-bottom: 18px; } .price-card.featured .price-tier { color: var(--c-yellow); } .price-amount { display: flex; align-items: baseline; gap: 6px; } .price-amount .amt { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .price-amount .per { font-size: 15px; font-weight: 600; color: var(--c-muted); } .price-card.featured .price-amount .per { color: rgba(255, 255, 255, 0.6); } .price-minutes { font-size: 15px; font-weight: 600; margin-top: 14px; } .price-est { font-size: 13px; color: var(--c-muted); margin-top: 4px; margin-bottom: 26px; } .price-card.featured .price-est { color: rgba(255, 255, 255, 0.6); } .price-features { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; flex: 1; } .price-features li { font-size: 14px; line-height: 1.45; display: flex; gap: 10px; align-items: flex-start; } .price-features li::before { content: '✓'; color: #8A6D00; font-weight: 800; flex: 0 0 auto; } .price-card.featured .price-features li::before { color: var(--c-yellow); } .price-card .btn { width: 100%; } /* Media slot placeholder (swapped for real image/video in Phase 2) */ .media-slot { width: 100%; min-height: 420px; border-radius: 24px; background: radial-gradient(circle at 30% 30%, rgba(255, 208, 44, 0.12), transparent 60%), var(--c-graphite); border: 1px solid var(--c-border); display: flex; align-items: center; justify-content: center; overflow: hidden; } @media (max-width: 1024px) { .split { grid-template-columns: 1fr; gap: 40px; } .split.reverse > *:first-child, .split.reverse > *:last-child { order: 0; } .feature-grid { grid-template-columns: 1fr 1fr; } .pricing-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .page-hero { padding: 140px 0 72px; } .feature-grid { grid-template-columns: 1fr; } .pricing-grid { grid-template-columns: 1fr; } .stat-row { gap: 32px; } .split-visual, .media-slot { min-height: 320px; } .timeline-step { gap: 16px; padding: 24px; } .timeline-num { font-size: 28px; width: 40px; } } @media (max-width: 1024px) { .hero-visual { width: 400px; height: 400px; right: -10%; } .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } .bento-hero, .bento-banner { grid-column: span 1; } .bento-item { min-height: 220px; } .bento-hero { min-height: 300px; } .bento-banner { flex-direction: column; align-items: flex-start; gap: 24px; min-height: 0; } .bento-banner .bento-body { max-width: 100%; } .bento-flow { flex-direction: column; align-items: flex-start; gap: 16px; } .flow-line { display: none; } .demo-interface { grid-template-columns: 1fr; } .network-map { height: auto; flex-direction: column; } .network-node { position: static; transform: none !important; width: 100%; margin-bottom: 16px; } .network-svg { display: none; } .network-center { margin-bottom: 40px; } } @media (max-width: 768px) { .section { padding: 80px 0; } .container { padding: 0 24px; } .nav-links, .nav-actions { display: none; } .mobile-menu-btn { display: block; font-size: 24px; cursor: pointer; line-height: 1; position: relative; z-index: 1002; padding: 8px; margin: -8px; } /* Mobile dropdown menu */ .navbar.nav-open { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--c-ink); height: auto; align-items: flex-start; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } .navbar.nav-open .nav-inner { flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; } .navbar.nav-open .nav-logo { color: var(--c-ink); } .navbar.nav-open .nav-links { display: flex; flex-direction: column; gap: 4px; width: 100%; order: 3; margin-top: 16px; } .navbar.nav-open .nav-links a { font-size: 17px; padding: 14px 4px; border-bottom: 1px solid var(--c-border-dark); color: var(--c-ink); } .navbar.nav-open .nav-links a::after { display: none; } .navbar.nav-open .nav-actions { display: block; width: 100%; order: 4; margin-top: 16px; } .navbar.nav-open .nav-actions .btn { width: 100%; padding: 14px; font-size: 16px; } .cta-section { padding: 110px 0 220px; } .cta-sphere-wrap { width: 480px; height: 480px; bottom: -300px; } .hero { flex-direction: column; text-align: center; padding-top: 100px; } .hero-buttons { justify-content: center; flex-direction: column; width: 100%; } .hero-buttons .btn { width: 100%; } .hero-visual { position: relative; right: auto; top: auto; transform: none; margin: 32px auto 0; width: 100%; max-width: 360px; height: auto; } .hero-visual .ae-ring, .hero-visual .ae-glow, .hero-visual .fc-wrap { display: none; } .scroll-cue { display: none; } .clara-ui { position: static; inset: auto; padding: 0; } .clara-orb { width: 150px; height: 150px; } .clara-caption { max-width: 300px; } .grid-2 { grid-template-columns: 1fr; } .industry-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 24px; } .industry-card { min-width: 85vw; scroll-snap-align: center; } .process-layout { grid-template-columns: 1fr; gap: 0; margin-top: 40px; } .process-visual-wrap { display: none; } .process-path { padding-left: 32px; margin-top: 0; } .process-line { left: 8px; } .step-node { left: -32px; } .process-step h3 { font-size: 24px; } .process-step { margin-bottom: 48px; min-height: 0; } .process-step:first-child { margin-top: 0; } .process-step:not(.current) h3, .process-step:not(.current) p, .process-step:not(.current) .step-label { opacity: 1; } .managed-stage { min-height: 0; } .managed-orbit { display: none; } .managed-core { max-width: 100%; } .dash-grid, .dash-appointment { grid-template-columns: 1fr; } .dr-rows { grid-template-columns: 1fr; gap: 16px; } .dash-header { gap: 18px; overflow-x: auto; scrollbar-width: none; } .dash-header::-webkit-scrollbar { display: none; } .dash-tab { white-space: nowrap; } .dash-panels { min-height: 0; } .dash-panel { position: relative; overflow: visible; } .dash-panel:not(.active) { display: none; } .dash-meta { display: none; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { flex-direction: column; gap: 16px; text-align: center; } .footer-links a { margin: 0 12px; } .scroll-progress { display: none; } }