/* ============================================================ Athos AI Integrations — core styles Futuristic, minimalist SaaS aesthetic — monochrome black & white palette aligned to the logo. Theming via [data-theme] on . ============================================================ */ /* ---------- Light theme — CSS default ---------- */ :root, html[data-theme="light"] { --ease: cubic-bezier(0.22, 1, 0.36, 1); --radius: 16px; --maxw: 1180px; --font-display: "Exo 2", "Sora", system-ui, sans-serif; --font-body: "Sora", system-ui, sans-serif; /* Grayscale accent ramp — dark grays read well on the light bg. */ --teal-100: #3a3a3a; --teal-300: #4a4a4a; --teal-400: #555555; --teal-500: #6e6e6e; --teal-700: #888888; --bg-0: #ededed; --bg-1: #f7f7f7; --surface: rgba(255, 255, 255, 0.8); --surface-strong: rgba(255, 255, 255, 0.96); --border: rgba(0, 0, 0, 0.14); --text: #0e0e0e; --text-dim: #444444; --text-faint: #777777; --glow: rgba(0, 0, 0, 0.18); --bg-canvas-opacity: 0.8; /* Purple accent ramp for the stage art. */ --accent: #6c42f5; --accent-bright: #8e7dc6; --accent-deep: #4a2db8; --accent-soft: rgba(108, 66, 245, 0.16); } /* ---------- Dark theme ---------- */ html[data-theme="dark"] { /* Grayscale accent ramp — light grays read well on the dark bg. */ --teal-100: #f2f2f2; --teal-300: #d4d4d4; --teal-400: #bdbdbd; --teal-500: #8c8c8c; --teal-700: #5c5c5c; --bg-0: #0a0a0a; --bg-1: #151515; --surface: rgba(255, 255, 255, 0.045); --surface-strong: rgba(20, 20, 20, 0.94); --border: rgba(255, 255, 255, 0.14); --text: #f2f2f2; --text-dim: #a6a6a6; --text-faint: #6a6a6a; --glow: rgba(255, 255, 255, 0.28); --bg-canvas-opacity: 0.72; /* Purple accent ramp for the stage art. */ --accent: #a896e4; --accent-bright: #c4b6ff; --accent-deep: #6c42f5; --accent-soft: rgba(168, 150, 228, 0.22); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); color: var(--text); background: var(--bg-0); overflow-x: hidden; transition: background 0.6s var(--ease), color 0.6s var(--ease); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.1ms !important; } } /* ---------- Background layers ---------- */ #bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: var(--bg-canvas-opacity); transition: opacity 0.6s var(--ease); } .bg-grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1200px 700px at 70% -10%, var(--glow), transparent 60%), radial-gradient(900px 600px at 10% 110%, rgba(180, 180, 180, 0.22), transparent 60%); opacity: 0.5; mix-blend-mode: screen; } html[data-theme="light"] .bg-grain { mix-blend-mode: multiply; opacity: 0.35; } html[data-theme="dark"] .bg-grain { background: radial-gradient(1200px 700px at 70% -10%, rgba(255, 255, 255, 0.10), transparent 60%), radial-gradient(900px 600px at 10% 110%, rgba(255, 255, 255, 0.06), transparent 60%); } /* ============================================================ Top bar ============================================================ */ .topbar { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 1200px; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 12px 28px; background: rgba(12, 12, 12, 0.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: var(--radius); transition: background 0.6s var(--ease), border-color 0.6s var(--ease); } html[data-theme="light"] .topbar { background: rgba(237, 237, 237, 0.08); } .brand { display: inline-flex; text-decoration: none; } .wordmark { width: clamp(90px, 10vw, 120px); height: auto; display: block; border-radius: 8px; overflow: hidden; } /* Blend the logo's white backing plate away on both themes. */ html[data-theme="light"] .wordmark { mix-blend-mode: multiply; } html[data-theme="dark"] .wordmark { filter: invert(1); mix-blend-mode: screen; } /* Theme toggle */ .theme-toggle { border: none; background: none; cursor: pointer; padding: 4px; } .theme-toggle__track { position: relative; display: flex; align-items: center; width: 64px; height: 32px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(10px); box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.25); transition: background 0.4s var(--ease); } .theme-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(160deg, var(--teal-300), var(--teal-500)); box-shadow: 0 0 14px var(--glow); transition: transform 0.45s var(--ease); } html[data-theme="light"] .theme-toggle__thumb { transform: translateX(32px); } .theme-toggle__icon { position: absolute; width: 15px; height: 15px; fill: none; stroke: var(--text-dim); stroke-width: 2; transition: opacity 0.4s var(--ease); } .theme-toggle__icon--sun { right: 8px; } .theme-toggle__icon--moon { left: 8px; fill: var(--text-dim); stroke: none; } html[data-theme="dark"] .theme-toggle__icon--moon { opacity: 1; } html[data-theme="dark"] .theme-toggle__icon--sun { opacity: 0.25; } html[data-theme="light"] .theme-toggle__icon--moon { opacity: 0.25; } html[data-theme="light"] .theme-toggle__icon--sun { opacity: 1; } /* ============================================================ Buttons ============================================================ */ .btn { font-family: var(--font-body); font-size: 0.98rem; font-weight: 400; letter-spacing: 0.02em; padding: 14px 26px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; transition: transform 0.25s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease); -webkit-tap-highlight-color: transparent; } .btn:active { transform: scale(0.98); } .btn--sm { padding: 10px 20px; font-size: 0.9rem; } .btn--block { width: 100%; } .btn--primary { color: #fff; background: linear-gradient( 100deg, #8273b4 0%, #a896e4 25%, #8e7dc6 50%, #a896e4 75%, #8273b4 100% ); background-size: 200% 100%; animation: btnShimmer 36s linear infinite; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 10px 30px -10px var(--glow); } .btn--primary:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 16px 40px -12px var(--glow), 0 0 24px -2px var(--glow); } /* Seamless shimmer — shift = exactly one tile (200%) so the loop is invisible. */ @keyframes btnShimmer { from { background-position: 200% 0; } to { background-position: 0% 0; } } @media (prefers-reduced-motion: reduce) { .btn--primary { animation: none; } } .btn--ghost { color: var(--text); background: var(--surface); border-color: var(--border); backdrop-filter: blur(10px); } .btn--ghost:hover { border-color: var(--teal-400); box-shadow: 0 0 24px -6px var(--glow); } /* ============================================================ Layout / sections ============================================================ */ .viewport { position: relative; z-index: 1; } section { width: 100%; } /* ---------- Hero ---------- */ /* Content sits in the upper third so the eye is drawn up toward the logo. */ .hero { min-height: 100vh; display: grid; justify-items: center; align-content: center; padding: clamp(80px, 10vh, 120px) clamp(20px, 5vw, 40px) clamp(40px, 5vh, 60px); } .hero__inner { max-width: 880px; text-align: center; } .hero__bubble { padding: clamp(28px, 4vw, 44px) clamp(36px, 6vw, 72px); background: rgba(10, 10, 10, 0.38); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(40px); border-radius: 50px; margin-bottom: 32px; } html[data-theme="light"] .hero__bubble { background: rgba(237, 237, 237, 0.38); } .hero__eyebrow { font-size: 1rem; letter-spacing: 0.42em; color: var(--teal-400); margin: 0 0 22px; } .hero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 6.2vw, 3.2rem); line-height: 1.08; margin: 0 0 24px; letter-spacing: -0.01em; } /* Same shimmer gradient + animation as .btn--primary — synchronized on page load. */ .grad-text { background: linear-gradient( 100deg, #8273b4 0%, #a896e4 25%, #8e7dc6 50%, #a896e4 75%, #8273b4 100% ); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: btnShimmer 36s linear infinite; } .grad-text--dim { opacity: 0.72; } @media (prefers-reduced-motion: reduce) { .grad-text { animation: none; background: var(--teal-400); -webkit-background-clip: unset; background-clip: unset; color: inherit; } } .hero__subtitle { font-size: clamp(1.1rem, 1.9vw, 1.32rem); font-weight: 300; line-height: 1.65; color: var(--text-dim); max-width: 640px; margin: 0 auto 40px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } .hero__scroll-hint { display: block; margin: 64px auto 0; width: 26px; height: 42px; border-radius: 14px; border: 1px solid var(--border); background: transparent; position: relative; cursor: pointer; } .hero__scroll-hint span { position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--teal-400); animation: scrollDot 1.8s var(--ease) infinite; } @keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 35% { opacity: 1; } 70% { opacity: 0; transform: translateY(14px); } 100% { opacity: 0; } } /* ============================================================ Product presentation ============================================================ */ .presentation { min-height: 100vh; display: grid; place-items: center; padding: 100px 0; } /* Horizontal slider: presentation pane + demo pane sit side by side. deck-viewport is 80px wider than the topbar so that after the 40px pane padding on each side is subtracted, each frame lands at exactly 1200px — matching the topbar. Gap between frames during slide stays 80px (40+40). */ .deck-viewport { width: calc(90% + 80px); max-width: 1280px; overflow: hidden; } .deck-track { display: flex; width: 200%; transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1); } .deck-track.is-demo { transform: translateX(-50%); } /* Promote to its own compositor layer only while sliding (removed after). */ .deck-track.is-sliding { will-change: transform; } .deck-pane { width: 50%; flex: 0 0 50%; display: grid; place-items: center; align-content: center; padding: 0 40px; } .presentation__frame { width: 100%; /* Near-opaque solid card (no backdrop-filter) so the panel can translate as a cheap compositor-only transform — keeps the slide smooth on all devices. */ background: var(--surface-strong); border: 1px solid var(--border); border-radius: 28px; padding: clamp(24px, 4vw, 48px); overflow: hidden; } /* Demo pane reuses the presentation frame so it matches shape/size/position. */ .demo-frame__inner { max-width: 560px; margin: 22px auto 0; } .demo-back { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-dim); background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: 8px; transition: color 0.3s var(--ease); } .demo-back:hover { color: var(--accent); } .presentation__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; } .presentation__kicker { margin: 0; font-size: 0.74rem; letter-spacing: 0.4em; color: var(--teal-400); } .stage-progress { display: flex; gap: 10px; } .stage-progress__dot { width: 38px; height: 4px; border-radius: 4px; background: var(--border); transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease); } .stage-progress__dot.is-active { background: linear-gradient(90deg, var(--accent-bright), var(--accent)); box-shadow: 0 0 14px var(--accent-soft); } .stage-progress__dot.is-done { background: var(--accent-deep); } /* Stage deck */ .stage-deck { position: relative; min-height: 360px; } .stage { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; opacity: 0; visibility: hidden; transform: translateY(24px) scale(0.98); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), visibility 0.6s; } .stage.is-active { opacity: 1; visibility: visible; transform: none; } .stage.is-leaving { opacity: 0; transform: translateY(-20px) scale(0.98); } .stage__stage-art { display: grid; place-items: center; aspect-ratio: 16 / 11; border-radius: var(--radius); background: radial-gradient(120% 120% at 50% 0%, rgba(200, 200, 200, 0.1), transparent 70%), var(--surface-strong); border: 1px solid var(--border); } .art { width: 86%; height: auto; } .stage__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin: 0 0 16px; } .stage__text { font-weight: 300; line-height: 1.7; color: var(--text-dim); margin: 0; } .stage-controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 40px; } /* ============================================================ Book a Demo — slide-in window (second deck pane) ============================================================ */ .demo-panel__title { font-family: var(--font-display); font-weight: 300; font-size: 2.1rem; margin: 0 0 10px; } .demo-panel__lead { color: var(--text-dim); font-weight: 300; line-height: 1.6; margin: 0 0 28px; } .demo-form { display: flex; flex-direction: column; gap: 16px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { display: flex; flex-direction: column; gap: 7px; } .field span { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--text-faint); text-transform: uppercase; } .field input { font-family: var(--font-body); font-size: 1rem; color: var(--text); padding: 13px 15px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .field input:focus { outline: none; border-color: var(--teal-400); box-shadow: 0 0 0 3px rgba(180, 180, 180, 0.22); } .field input:user-invalid { border-color: #e0596b; } /* JS-driven invalid state (phone format + soft name check) */ .field input.is-invalid, .phone-row.is-invalid .phone-row__code, .phone-row.is-invalid input { border-color: #e0596b; } .field__opt { text-transform: none; letter-spacing: 0; color: var(--text-faint); font-style: normal; opacity: 0.7; } /* Country code + phone number on one row */ .phone-row { display: grid; grid-template-columns: minmax(0, auto) 1fr; gap: 10px; } /* Custom country dial-code picker */ .dial-picker { position: relative; min-width: 100px; max-width: 130px; } .dial-picker__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-family: var(--font-body); font-size: 0.9rem; letter-spacing: 0.04em; color: var(--text); padding: 13px 12px 13px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; white-space: nowrap; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .dial-picker__trigger:focus, .dial-picker[aria-expanded="true"] .dial-picker__trigger { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .dial-picker__chevron { width: 10px; height: 6px; flex-shrink: 0; fill: none; stroke: var(--accent); stroke-width: 1.6; transition: transform 0.25s var(--ease); } .dial-picker[aria-expanded="true"] .dial-picker__chevron { transform: rotate(180deg); } .dial-picker__panel { /* position: fixed so it escapes overflow:hidden on .presentation__frame; top/left are set via JS on open using getBoundingClientRect(). */ position: fixed; top: 0; left: 0; min-width: 140px; max-height: 220px; overflow-y: auto; list-style: none; margin: 0; padding: 6px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.55); z-index: 200; opacity: 0; transform: translateY(-6px) scale(0.97); transform-origin: top left; pointer-events: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); } .dial-picker__panel::-webkit-scrollbar { width: 4px; } .dial-picker__panel::-webkit-scrollbar-track { background: transparent; } .dial-picker__panel::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; } .dial-picker__panel.is-open { opacity: 1; transform: none; pointer-events: auto; } .dial-picker__option { padding: 9px 12px; border-radius: 8px; font-size: 0.88rem; letter-spacing: 0.04em; color: var(--text-dim); cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .dial-picker__option:hover, .dial-picker__option.is-highlighted { background: var(--accent-soft); color: var(--text); } .dial-picker__option.is-selected { color: var(--accent-bright); font-weight: 500; } .field__warning { display: flex; gap: 6px; margin: 2px 0 0; font-size: 0.82rem; line-height: 1.4; color: #ff8893; } .field__warning[hidden] { display: none; } .demo-form__status { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.5; min-height: 1.2em; } .demo-form__status.is-error { color: #ff8893; } .demo-form__status.is-success { color: var(--accent-bright); } .demo-form.is-sending #demo-submit { opacity: 0.6; pointer-events: none; } /* Success state — the form's siblings hide, the message takes their place */ .demo-frame__inner.is-success > :not(.demo-success) { display: none; } .demo-success { text-align: center; padding: 40px 0; animation: fadeUp 0.6s var(--ease) both; } .demo-success__mark { width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, var(--accent-soft), transparent 70%); border: 1px solid var(--accent); } .demo-success__mark svg { width: 34px; height: 34px; stroke: var(--accent-bright); fill: none; stroke-width: 3; } .demo-success h3 { font-family: var(--font-display); font-weight: 300; font-size: 1.6rem; margin: 0 0 12px; } .demo-success p { color: var(--text-dim); font-weight: 300; line-height: 1.6; margin: 0 0 24px; } /* ============================================================ Reveal-on-load helpers ============================================================ */ .reveal { animation: fadeUp 1s var(--ease) both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* ============================================================ Stage SVG art — animations fire only while the stage is active ============================================================ */ .art [stroke] { stroke: var(--accent); } .art text { fill: var(--text-faint); font-family: var(--font-body); } /* --- Stage 1: Discovery --- */ .art--discovery .cal-body { fill: var(--surface-strong); stroke: var(--border); stroke-width: 2; } .art--discovery .cal-bar { stroke: var(--accent); stroke-width: 2; } .art--discovery .cal-ring { fill: none; stroke: var(--accent); stroke-width: 3; } .art--discovery .cal-dots circle { fill: var(--text-faint); opacity: 0.5; } .art--discovery .cal-pick { fill: var(--accent-bright); opacity: 1; } .art--discovery .art-link { fill: none; stroke: var(--accent-bright); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; } .art--discovery .call-pulse { fill: var(--accent); opacity: 0.25; } .art--discovery .call-core { fill: var(--accent-deep); } .art--discovery .call-glyph { fill: #fff; } .stage.is-active .art--discovery .cal-pick { animation: pickPulse 1.8s var(--ease) infinite; } .stage.is-active .art--discovery .art-link { animation: drawLine 1.4s var(--ease) 0.4s forwards; } .stage.is-active .art--discovery .call-pulse { animation: ring 1.8s var(--ease) 1.2s infinite; } @keyframes pickPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } } @keyframes drawLine { to { stroke-dashoffset: 0; } } @keyframes ring { 0% { transform: scale(0.7); opacity: 0.4; } 100% { transform: scale(1.8); opacity: 0; } } .art--discovery .cal-pick, .art--discovery .call-pulse { transform-box: fill-box; transform-origin: center; } /* --- Stage 2: Onboarding --- */ .art--onboard .ob-path { fill: none; stroke: var(--accent-bright); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .art--onboard .ob-step circle { fill: var(--surface-strong); stroke: var(--accent); stroke-width: 2.5; } .art--onboard .ob-step text { fill: var(--accent-bright); font-size: 12px; text-anchor: middle; } .art--onboard .ob-step--flag circle { fill: var(--accent-deep); } .art--onboard .ob-check { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .stage.is-active .art--onboard .ob-path { animation: drawLine 1.6s var(--ease) 0.2s forwards; } .stage.is-active .art--onboard .ob-step { opacity: 0; animation: popIn 0.5s var(--ease) forwards; } .stage.is-active .art--onboard .ob-step:nth-child(1) { animation-delay: 0.3s; } .stage.is-active .art--onboard .ob-step:nth-child(2) { animation-delay: 0.7s; } .stage.is-active .art--onboard .ob-step:nth-child(3) { animation-delay: 1.1s; } .stage.is-active .art--onboard .ob-step--flag { animation-delay: 1.5s; } .stage.is-active .art--onboard .ob-check { animation: drawLine 0.5s var(--ease) 1.9s forwards; } @keyframes popIn { from { opacity: 0; transform: translateY(6px) scale(0.6); } to { opacity: 1; transform: none; } } .art--onboard .ob-step { transform-box: fill-box; transform-origin: center; } /* --- Stage 3: Integration — NN glides in, company fills, vines spread --- */ .art--integrate .co-square { fill: none; stroke: var(--border); stroke-width: 2.5; } .art--integrate .co-fill { fill: var(--accent-soft); opacity: 0; } .art--integrate .co-label { fill: var(--text-faint); font-size: 11px; letter-spacing: 1px; text-anchor: middle; } .art--integrate .nn-edge { stroke: var(--accent); stroke-width: 1.6; opacity: 0.75; } .art--integrate .nn-node { fill: var(--accent); } .art--integrate .nn-node--hub { fill: var(--accent-bright); } .art--integrate .nn-cluster { transform-box: fill-box; transform-origin: center; } .art--integrate .vine { fill: none; stroke: var(--accent-bright); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .art--integrate .vine-tips .nn-node { opacity: 0; transform-box: fill-box; transform-origin: center; } /* 1 — cluster glides into the company; the vessel wakes and fills */ .stage.is-active .art--integrate .nn-cluster { animation: integrateIn 1.4s var(--ease) 0.2s forwards; } .stage.is-active .art--integrate .co-square { animation: companyWake 1.6s var(--ease) 0.2s forwards; } .stage.is-active .art--integrate .co-fill { animation: companyFill 2.8s var(--ease) 1.2s forwards; } .stage.is-active .art--integrate .nn-cluster .nn-node, .stage.is-active .art--integrate .nn-cluster .nn-edge { animation: clusterSettle 1s var(--ease) 2.4s forwards; } /* 2 — vines draw outward, one after another */ .stage.is-active .art--integrate .vine { animation: drawLine 0.9s var(--ease) forwards; } .stage.is-active .art--integrate .vine:nth-child(1) { animation-delay: 1.40s; } .stage.is-active .art--integrate .vine:nth-child(2) { animation-delay: 1.58s; } .stage.is-active .art--integrate .vine:nth-child(3) { animation-delay: 1.76s; } .stage.is-active .art--integrate .vine:nth-child(4) { animation-delay: 1.94s; } .stage.is-active .art--integrate .vine:nth-child(5) { animation-delay: 2.12s; } .stage.is-active .art--integrate .vine:nth-child(6) { animation-delay: 2.30s; } .stage.is-active .art--integrate .vine:nth-child(7) { animation-delay: 2.48s; } .stage.is-active .art--integrate .vine:nth-child(8) { animation-delay: 2.66s; } .stage.is-active .art--integrate .vine:nth-child(9) { animation-delay: 2.84s; } .stage.is-active .art--integrate .vine:nth-child(10) { animation-delay: 3.02s; } .stage.is-active .art--integrate .vine:nth-child(11) { animation-delay: 3.20s; } /* 3 — tips bloom as each vine lands, then breathe gently */ .stage.is-active .art--integrate .vine-tips .nn-node { animation: tipPop 0.5s var(--ease) forwards, tipBreathe 3.4s var(--ease) 3.8s infinite; } .stage.is-active .art--integrate .vine-tips .nn-node:nth-child(1) { animation-delay: 1.9s, 3.8s; } .stage.is-active .art--integrate .vine-tips .nn-node:nth-child(2) { animation-delay: 2.08s, 3.8s; } .stage.is-active .art--integrate .vine-tips .nn-node:nth-child(3) { animation-delay: 2.26s, 3.8s; } .stage.is-active .art--integrate .vine-tips .nn-node:nth-child(4) { animation-delay: 2.44s, 3.8s; } .stage.is-active .art--integrate .vine-tips .nn-node:nth-child(5) { animation-delay: 2.62s, 3.8s; } .stage.is-active .art--integrate .vine-tips .nn-node:nth-child(6) { animation-delay: 2.80s, 3.8s; } .stage.is-active .art--integrate .vine-tips .nn-node:nth-child(7) { animation-delay: 2.98s, 3.8s; } .stage.is-active .art--integrate .vine-tips .nn-node:nth-child(8) { animation-delay: 3.16s, 3.8s; } .stage.is-active .art--integrate .vine-tips .nn-node:nth-child(9) { animation-delay: 3.34s, 3.8s; } .stage.is-active .art--integrate .vine-tips .nn-node:nth-child(10) { animation-delay: 3.52s, 3.8s; } .stage.is-active .art--integrate .vine-tips .nn-node:nth-child(11) { animation-delay: 3.70s, 3.8s; } @keyframes integrateIn { 0% { transform: translateX(0); opacity: 0.9; } 100% { transform: translateX(102px); opacity: 1; } } @keyframes companyWake { 0% { stroke: var(--border); } 100% { stroke: var(--accent); filter: drop-shadow(0 0 9px var(--accent-soft)); } } @keyframes companyFill { from { opacity: 0; } to { opacity: 1; } } @keyframes clusterSettle { to { opacity: 0.35; } } @keyframes tipPop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } } @keyframes tipBreathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } } /* --- Stage 4: Customer success --- */ .art--success .cs-axis { stroke: var(--border); stroke-width: 2; } .art--success .cs-bars rect { fill: var(--accent); opacity: 0.55; transform-box: fill-box; transform-origin: bottom; } .art--success .cs-line { fill: none; stroke: var(--accent-bright); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .art--success .cs-ping { fill: var(--accent-bright); } .stage.is-active .art--success .cs-bars rect { animation: growBar 0.7s var(--ease) forwards; transform: scaleY(0); } .stage.is-active .art--success .cs-bars rect:nth-child(1) { animation-delay: 0.3s; } .stage.is-active .art--success .cs-bars rect:nth-child(2) { animation-delay: 0.5s; } .stage.is-active .art--success .cs-bars rect:nth-child(3) { animation-delay: 0.7s; } .stage.is-active .art--success .cs-bars rect:nth-child(4) { animation-delay: 0.9s; } .stage.is-active .art--success .cs-line { animation: drawLine 1.6s var(--ease) 0.6s forwards; } .stage.is-active .art--success .cs-ping { animation: ping 1.6s var(--ease) 2s infinite; transform-box: fill-box; transform-origin: center; } @keyframes growBar { to { transform: scaleY(1); } } @keyframes ping { 0% { transform: scale(1); opacity: 1; } 60% { transform: scale(2.4); opacity: 0; } 100% { opacity: 0; } } /* ============================================================ Responsive ============================================================ */ @media (max-width: 820px) { .stage { grid-template-columns: 1fr; text-align: center; gap: 22px; } .stage__stage-art { max-width: 360px; margin: 0 auto; width: 100%; } .stage-deck { min-height: 540px; } .presentation__head { flex-direction: column; align-items: flex-start; gap: 14px; } /* Prevent horizontal overflow on small screens. */ .deck-viewport { width: 100%; } .deck-pane { padding: 0 20px; } } @media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } .hero__cta { flex-direction: column; } .btn { width: 100%; } }