/* ---- SOC 2 divider pill between hero and problem sections ---- */ .soc2-divider { display: flex; justify-content: center; align-items: center; padding: 3rem 1rem; position: relative; background: var(--main-bg-color); } .soc2-divider + .problem-section { padding-top: 3rem !important; } .soc2-pill { display: inline-flex; align-items: center; gap: 1rem; padding: 0.85rem 2.4rem; border: 1px solid color-mix(in srgb, var(--purple) 20%, transparent); border-radius: 100px; text-decoration: none !important; cursor: pointer; background: color-mix(in srgb, var(--purple) 8%, transparent); box-shadow: 0 0 40px -10px color-mix(in srgb, var(--purple) 12%, transparent); transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .soc2-pill:hover { border-color: color-mix(in srgb, var(--purple) 35%, transparent); background: color-mix(in srgb, var(--purple) 12%, transparent); box-shadow: 0 0 50px -8px color-mix(in srgb, var(--purple) 18%, transparent); text-decoration: none !important; } .soc2-pill-logo { width: 42px; height: 42px; border-radius: 50%; } .soc2-pill-text { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); white-space: nowrap; text-transform: uppercase; text-decoration: none !important; } .site-header+.site-content .section:first-of-type{ padding-top: 120px !important; }.site-header+.site-content .hero.section:first-of-type, .site-header+.site-content .surface-beat--navigate.section:first-of-type{ padding-top: 0px !important; } /* ---- Hero Kicker — Premium brand lockup ---- */.hero-kicker, .surface-beat--navigate-kicker{ display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0; margin-bottom: 2.5rem; position: relative; }.hero-kicker-icon, .surface-beat--navigate-kicker-icon{ width: 20px; height: 20px; flex-shrink: 0; opacity: 0.9; filter: brightness(var(--kicker-icon-brightness, 1)); }.hero-kicker-text, .surface-beat--navigate-kicker-text{ font-size: 1rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; line-height: 1.3; display: inline-flex; gap: 0.4rem; color: inherit; text-decoration: none !important; }.hero-kicker-prefix, .surface-beat--navigate-kicker-prefix{ color: var(--slate-400, #94a3b8); }.hero-kicker-term, .surface-beat--navigate-kicker-term{ font-weight: 600; background: var(--kicker-gradient, linear-gradient(160deg, rgba(79,70,229,1) 0%, rgba(99,102,241,1) 50%, rgba(139,92,246,1) 100%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .category-badge-prefix{ font-size: 0.6rem; }.hero-pills svg, .hero-pills svg *, .surface-beat--navigate-pills svg, .surface-beat--navigate-pills svg *{ fill: var(--blurple); stroke: var(--blurple); /* width: 24px; height: 24px; */ }.hero-pills > div, .surface-beat--navigate-pills > div{ display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.95rem; background-color: var(--lightestblue); border-radius: 999px; font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--inv-bg-color) !important; font-weight: 800; border: none !important; opacity: 0.7; } /* Legacy scroll-reveal.js + its .has-animations [class*="reveal-"] CSS are dead on V6 because _index_v6.html strips `has-animations` from pre-execution. No CSS kill-switch needed — every legacy rule is scoped under `.has-animations` so the cascade no longer matches. */.hero.particles .particles-js-canvas-el, .surface-beat--navigate.particles .particles-js-canvas-el{ opacity: 0 !important; }.hero.particles h1, .surface-beat--navigate.particles h1{ color: var(--inv-bg-color) !important; font-weight: 600 !important; margin-bottom: 1.5rem !important; }.hero.particles .hero-wrapper, .surface-beat--navigate.particles .surface-beat--navigate-wrapper{ padding-top: 0px !important; padding-bottom: 0; min-height: 100vh; }.hero-wrapper, .surface-beat--navigate-wrapper{ gap: 0px; }.hero-wrapper > .reveal-from-bottom:has(.navigator-ring), .surface-beat--navigate-wrapper > .reveal-from-bottom:has(.navigator-ring){ padding-top: 30px; } @media (max-width: 850px) {.hero-wrapper > .reveal-from-bottom:has(.navigator-ring), .surface-beat--navigate-wrapper > .reveal-from-bottom:has(.navigator-ring){ padding-top: 0; } }.hero-wrapper > div > .flex button, .hero-wrapper > div > .flex a:not(.blurpleButtonAlt, .hero-btn-minimal, .hero-btn-secondary), .surface-beat--navigate-wrapper > div > .flex button, .surface-beat--navigate-wrapper > div > .flex a:not(.blurpleButtonAlt, .surface-beat--navigate-btn-minimal, .surface-beat--navigate-btn-secondary){ width: 272px; justify-content: center; text-decoration: none; color: var(--white) !important; }.hero-btn-minimal, .surface-beat--navigate-btn-minimal{ all: unset; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--inv-bg-color) !important; cursor: pointer; transition: transform 0.3s ease, color 0.3s ease; text-decoration: none !important; font-weight: 600; opacity: 0.9; }.hero-btn-minimal:hover, .surface-beat--navigate-btn-minimal:hover{ transform: scale(1.15); opacity: 1; color: var(--lightblue) !important; } /* ---- Hero glass CTA buttons ---- */.hero-cta-row, .surface-beat--navigate-cta-row{ display: flex; flex-wrap: wrap; gap: 1.75rem; justify-content: center; }.hero-glass-btn, .surface-beat--navigate-glass-btn{ position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.8rem; border-radius: 14px; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.01em; color: var(--inv-bg-color) !important; text-decoration: none !important; cursor: pointer; overflow: hidden; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 4%, transparent); transition: border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }.hero-glass-btn::before, .surface-beat--navigate-glass-btn::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, color-mix(in srgb, var(--blurpleblue) 60%, transparent), color-mix(in srgb, var(--purple) 40%, transparent)); opacity: 0.5; transition: opacity 0.4s ease; }.hero-glass-btn:hover, .surface-beat--navigate-glass-btn:hover{ border-color: color-mix(in srgb, var(--purple) 20%, transparent); box-shadow: 0 4px 24px color-mix(in srgb, var(--purple) 10%, transparent), 0 12px 48px color-mix(in srgb, var(--purple) 5%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent); transform: translateY(-3px); }.hero-glass-btn:hover::before, .surface-beat--navigate-glass-btn:hover::before{ opacity: 1; } /* Primary CTA — elevated glowing focal point */.hero-glass-btn.hero-glass-btn-primary, .surface-beat--navigate-glass-btn.surface-beat--navigate-glass-btn-primary{ background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border-color: color-mix(in srgb, var(--purple) 18%, transparent); font-weight: 600; letter-spacing: 0.02em; box-shadow: 0 2px 16px color-mix(in srgb, var(--purple) 8%, transparent), 0 8px 40px color-mix(in srgb, var(--purple) 4%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent); }.hero-glass-btn.hero-glass-btn-primary::before, .surface-beat--navigate-glass-btn.surface-beat--navigate-glass-btn-primary::before{ opacity: 0.7; height: 1.5px; }.hero-glass-btn.hero-glass-btn-primary:hover, .surface-beat--navigate-glass-btn.surface-beat--navigate-glass-btn-primary:hover{ border-color: color-mix(in srgb, var(--purple) 30%, transparent); box-shadow: 0 4px 24px color-mix(in srgb, var(--purple) 15%, transparent), 0 16px 60px color-mix(in srgb, var(--purple) 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } /* Secondary text links — elegant minimal */.hero-text-link, .surface-beat--navigate-text-link{ display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent) !important; text-decoration: none !important; cursor: pointer; transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1); }.hero-text-link:hover, .surface-beat--navigate-text-link:hover{ color: color-mix(in srgb, var(--inv-bg-color) 85%, transparent) !important; }.hero-text-link-arrow, .surface-beat--navigate-text-link-arrow{ display: inline-block; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); font-size: 0.9em; }.hero-text-link:hover .hero-text-link-arrow, .surface-beat--navigate-text-link:hover .surface-beat--navigate-text-link-arrow{ transform: translateX(3px); } /* Primary text link — "Get Started" with slightly more presence */.hero-text-link.hero-text-link-primary, .surface-beat--navigate-text-link.surface-beat--navigate-text-link-primary{ color: color-mix(in srgb, var(--inv-bg-color) 75%, transparent) !important; font-weight: 600; letter-spacing: 0.02em; }.hero-text-link.hero-text-link-primary:hover, .surface-beat--navigate-text-link.surface-beat--navigate-text-link-primary:hover{ color: var(--inv-bg-color) !important; }.hero .hero-btn-secondary, .surface-beat--navigate .surface-beat--navigate-btn-secondary{ display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, var(--inv-bg-color), var(--purple)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; cursor: pointer; transition: opacity 0.3s ease; text-decoration: none !important; font-weight: 400; opacity: 0.7; font-size: 0.85rem; border: none !important; padding: 0 !important; width: auto !important; }.hero-btn-secondary:hover, .surface-beat--navigate-btn-secondary:hover{ opacity: 1; color: var(--lightblue) !important; }.hero-scroll-cue, .surface-beat--navigate-scroll-cue{ position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 10; opacity: 0.3; animation: hero-scroll-bounce 2s ease-in-out infinite; color: var(--inv-bg-color); } @keyframes hero-scroll-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } .problem-section { /* Design-vocabulary continuity with the hero — same faint blurple/ * purple radial washes on the light base. Paired with .proof-section * below: the two sections share the same wash treatment with a * small tonal shift between them (proof gets slightly more purple) * — distinguishable, but the deviation is calibrated narrow so they * read as one continuous canvas, not two different bgs. */ background: radial-gradient(ellipse 58% 35% at 78% 22%, color-mix(in srgb, var(--blurple) 5%, transparent) 0%, transparent 65%), radial-gradient(ellipse 45% 28% at 20% 70%, color-mix(in srgb, var(--purple) 4%, transparent) 0%, transparent 60%), var(--main-bg-color); color: var(--inv-bg-color); padding-top: 7rem !important; padding-bottom: 7rem !important; /* Linear-style hairline divider above. Very faint — visible only * as a structural cue, not a hard line. */ border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .problem-section .problem-copy, .problem-section .problem-copy p, .problem-section .problem-copy h2, .problem-section .problem-copy li { color: var(--inv-bg-color); text-align: left; } .problem-section .problem-copy p{ font-size: 0.6rem; } /* ---- Problem section tag pill ---- * Editorial section mark: a thin gradient hairline + uppercase tracked * text. Replaces the red-tinted info pill, which read as a warning * banner rather than a section heading — wrong register for a serious * thesis statement under a high-end hero. */ .problem-tag { display: flex; width: fit-content; margin-left: auto; margin-right: auto; margin-bottom: 2rem; align-items: center; justify-content: center; gap: 0.75rem; padding: 0; background: none; border: none; border-radius: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent); opacity: 1; text-align: center; } .problem-tag::before { content: ""; display: inline-block; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--blurple)); } .problem-tag::after { content: ""; display: inline-block; width: 28px; height: 1px; background: linear-gradient(90deg, var(--blurple), transparent); } /* The inline info-circle SVG was carrying the "alert / notification" * read. Hide it; the gradient hairlines do the section-mark job. */ .problem-tag svg { display: none; width: 13px; height: 13px; opacity: 0.8; flex-shrink: 0; } .problem-bg { position: absolute; inset: 0; background: radial-gradient(circle at 78% 20%, rgba(129, 140, 248, 0.15), transparent 45%), radial-gradient(circle at 18% 70%, rgba(168, 85, 247, 0.12), transparent 55%); opacity: 0.1; } .problem-copy { background: var(--main-bg-color); border-radius: 32px; padding: 2.75rem; box-shadow: 0 45px 90px rgba(15, 23, 42, 0.18); border: 1px solid rgba(99, 102, 241, 0.08); backdrop-filter: blur(26px); max-width: 920px; margin: 0 auto; } .share-bg { position: absolute; inset: 0; background: radial-gradient(circle at 22% 30%, rgba(139, 92, 246, 0.15), transparent 45%), radial-gradient(circle at 82% 60%, rgba(96, 165, 250, 0.12), transparent 55%); opacity: 0.1; } .share-copy { background: var(--main-bg-color); border-radius: 32px; padding: 0 2rem; box-shadow: 0 45px 90px rgba(15, 23, 42, 0.18); border: 1px solid rgba(99, 102, 241, 0.08); backdrop-filter: blur(26px); max-width: 920px; height: 601px !important; overflow: hidden !important; margin: 0 auto; } .problem-lede { margin-bottom: 1.25rem; } .problem-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.95rem; background-color: var(--lightestblue); border-radius: 999px; font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--inv-bg-color) !important; font-weight: 800; border: none; opacity: 0.7; margin-bottom: 1.5rem; } .problem-pill svg, .problem-pill svg * { fill: var(--blurple); stroke: var(--blurple); } .problem-contrast { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(99, 102, 241, 0.35); border-radius: 16px; padding: 1.25rem 1.5rem; } .problem-chart { position: relative; min-height: 360px; isolation: isolate; border-radius: 36px; padding: 0 !important; background: var(--main-bg-color); border: none; box-shadow: none; max-width: 960px; margin: 0 auto; } .problem-chart-mobile { display: none; gap: 1.5rem; margin-top: 2rem; } /* ════════════════════════════════════════════════════════════════════ * PROOF SECTION — the pain chapter, on the main theme. * * No dark inversion. The page stays on a single light theme throughout * (Linear's pattern — one consistent canvas signals confidence). This * section gets its weight from typography + composition + a slightly * more saturated purple wash than .problem-section, so it reads as a * tonal shift, not a theme shift. * ════════════════════════════════════════════════════════════════════ */ .proof-section { position: relative; overflow: hidden; /* Same canvas as .problem-section above, just a small tonal shift — * a touch more purple in the central wash — so the section reads * as a distinct beat without breaking continuity. The deviation * was previously too big (10% center purple + multiple stronger * washes); pulled the central wash down to 6% so the chart → * proof transition is calibrated to feel inevitable, not abrupt. */ background: radial-gradient(ellipse 70% 50% at 50% 45%, color-mix(in srgb, var(--purple) 6%, transparent) 0%, transparent 65%), radial-gradient(ellipse 55% 40% at 80% 22%, color-mix(in srgb, var(--blurple) 5%, transparent) 0%, transparent 60%), radial-gradient(ellipse 50% 35% at 20% 75%, color-mix(in srgb, var(--blurple) 4%, transparent) 0%, transparent 60%), var(--main-bg-color); color: var(--inv-bg-color); padding-top: 7rem; padding-bottom: 7rem; /* Linear-style hairline divider above — same value as .problem-section * for rhythmic consistency. Overrides the Tailwind border-t-white/5 * from the HTML (which was a dark-theme leftover). */ border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent) !important; } .proof-section > * { position: relative; z-index: 2; } /* ─── Header: eyebrow → H2 thesis → subtitle ─────────────────────── * Spacing rhythm uses a single base unit (1.5rem) so the section * reads as a coherent vertical scale: eyebrow→H2 = 1× (close, they * belong together), header→stats = 2× (a real beat), stats→verdict * = 2× (echo), verdict→divider = 1×. */ .proof-section .proof-header { color: var(--inv-bg-color); margin-bottom: 3.5rem !important; } /* Eyebrow — editorial section mark matching the .problem-tag above * the chart. No filled pill, no gradient — gradient hairlines + tracked * uppercase text. Pulls weight off the chrome so the H2 underneath * carries the section. Was a saturated gradient pill that read as * consumer-app marketing tag. */ .proof-section .proof-pill-gradient { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0; background: none; border: none; box-shadow: none; border-radius: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent); } .proof-section .proof-pill-gradient::before, .proof-section .proof-pill-gradient::after { content: ""; display: inline-block; width: 28px; height: 1px; } .proof-section .proof-pill-gradient::before { background: linear-gradient(90deg, transparent, var(--blurple)); } .proof-section .proof-pill-gradient::after { background: linear-gradient(90deg, var(--blurple), transparent); } .proof-section .proof-pill-gradient:hover { transform: none; box-shadow: none; } /* H2 thesis — editorial display type sized so the line breaks cleanly * once (at the comma). Two lines: "When the journey breaks," / "the * deal dies." (the accent carries the gradient — same brand colors * as everywhere else, no boutique variant). */ .proof-section .proof-thesis { margin: 1.5rem auto 0; max-width: 26ch; text-align: center; font-family: var(--brand-font); font-size: clamp(1.7rem, 4vw, 2.7rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--inv-bg-color); } .proof-section .proof-thesis-accent { background: linear-gradient(135deg, var(--blurple), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ─── Stats grid: clean exhibit treatment ───────────────────────── * No dividers, no top/bottom hairlines — the eye reads them as five * inscriptions floating on the dark canvas, separated only by negative * space. Less visual noise, more confident. */ .proof-section .proof-stats-grid { padding: 0; gap: 1.5rem; } .proof-section .proof-stat-card { background: none; border: none; box-shadow: none; padding: 0.75rem 1.5rem; position: relative; transition: opacity 280ms ease; } .proof-section .proof-stat-card:hover { background: none; transform: none; box-shadow: none; opacity: 1; } /* Strip the legacy .proof-stat-emphasis gradient block on the 77% card. * It had a saturated 85% purple bg + white text + heavy purple shadows * — the "noisy radiant background" complaint. Now it matches every * other stat card: no bg, no border, no shadow, dark ink text. The * data IS the emphasis at this size — no extra chrome needed. */ .proof-section .proof-stat-card.proof-stat-emphasis, .proof-section .proof-stat-card.proof-stat-emphasis:hover { background: none !important; border-color: transparent !important; box-shadow: none !important; } .proof-section .proof-stat-card.proof-stat-emphasis .proof-stat-value { color: var(--inv-bg-color) !important; filter: none !important; } .proof-section .proof-stat-card.proof-stat-emphasis .proof-stat-label { color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent) !important; font-weight: 500; } .proof-section .proof-stat-card .proof-stat-value { font-family: var(--brand-font); font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.035em; /* Solid ink — was a blurple→purple gradient. Five rainbow numbers * stacked next to a gradient pill above and a gradient H2 accent * was too much, started reading as consumer-AI hype. Numbers do * their own work at this size; gradient is unnecessary flair. * The H2 accent "the deal dies" still carries gradient as the * single brand accent moment in this section. */ color: var(--inv-bg-color); margin-bottom: 0.85rem; white-space: nowrap; } /* Dashed/longer stat values (57-70%, 60-100) get a smaller variant so * they fit their cell without overflowing or wrapping. The single-token * values (77%, 15%, 7.1) keep the full size. */ .proof-section .proof-stat-card:nth-child(2) .proof-stat-value, .proof-section .proof-stat-card:nth-child(3) .proof-stat-value { font-size: clamp(1.55rem, 2.7vw, 2.3rem); letter-spacing: -0.025em; } .proof-section .proof-stat-card .proof-stat-label { font-family: var(--brand-font); font-size: 0.78rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent); max-width: 22ch; } /* ─── Closing verdict — the punch line ────────────────────────────── * One sentence under the stats grid that turns the numbers into a * verdict. Italic editorial, narrower max-width so it reads as a * pull-quote rather than body copy. */ .proof-section .proof-verdict { max-width: 38rem; margin: 3rem auto 0; text-align: center; font-family: var(--brand-font); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 400; font-style: italic; line-height: 1.45; letter-spacing: -0.005em; color: color-mix(in srgb, var(--inv-bg-color) 78%, transparent); } /* ─── Bridge divider: light-theme hairline ────────────────────────── */ .proof-section .proof-bridge-divider { margin: 1.5rem auto 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--inv-bg-color) 22%, transparent), transparent); } /* Mobile: tighter padding only. No dividers to worry about. */ @media (max-width: 768px) { .proof-section { padding-top: 5rem; padding-bottom: 5rem; } .proof-section .proof-stats-grid { padding: 2.25rem 0; } .proof-section .proof-thesis { max-width: 18ch; } } /* Epic Transition Section */ /* Minimal Transition Section */ .epic-transition-section { position: relative; background: var(--main-bg-color); /* Same Linear-style hairline divider as .problem-section and * .proof-section above — same value for rhythmic consistency. */ border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .epic-portal-container { position: relative; padding: 4rem 1.5rem; max-width: 800px; margin: 0 auto; } .epic-portal-content { position: relative; } .epic-portal-title { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--inv-bg-color) !important; font-weight: 700; margin-bottom: 1.5rem; opacity: 0.9; } .epic-portal-divider { width: 60px; height: 2px; background: var(--blurple); margin: 0 auto 2.5rem; opacity: 0.6; } .epic-section-title { font-size: 3.5rem; font-weight: 800; color: var(--inv-bg-color); margin-bottom: 1.5rem; line-height: 1.1; } .epic-section-subtitle { font-size: 1.125rem; color: var(--inv-bg-color); opacity: 0.7; max-width: 600px; margin: 0 auto; line-height: 1.6; } /* Mobile Responsive */ @media (max-width: 768px) { .epic-section-title { font-size: 2.5rem; } .epic-section-subtitle { font-size: 1rem; } .epic-portal-container { padding: 3rem 1.5rem; } } .solution-pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.35rem 0.95rem; border-radius: 999px; letter-spacing: 0.4em; font-size: 0.65rem; text-transform: uppercase; background-color: var(--lightestblue); color: var(--inv-bg-color) !important; border: none; opacity: 0.7; font-weight: 800; } .solution-pill svg, .solution-pill svg * { fill: var(--blurple); stroke: var(--blurple); } .solution-title { color: var(--inv-bg-color); } .ai-architect-card { background: radial-gradient(circle at top left, color-mix(in srgb, var(--purple) 25%, transparent), transparent 50%), radial-gradient(circle at bottom right, color-mix(in srgb, var(--blurple) 20%, transparent), transparent 50%), linear-gradient(135deg, color-mix(in srgb, var(--blurple) 15%, var(--main-bg-color) 85%), color-mix(in srgb, var(--purple) 20%, var(--main-bg-color) 80%)); box-shadow: 0 25px 60px color-mix(in srgb, var(--blurple) 20%, transparent); } .ai-architect-card .space-y-4 { overflow: hidden; } .ai-flow-nav-buttons { display: flex; gap: 4px; } .ai-flow-nav-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: #fff; opacity: 0.5; cursor: pointer; transition: opacity 0.2s ease, background 0.2s ease; } .ai-flow-nav-btn:hover { opacity: 0.85; background: rgba(255, 255, 255, 0.12); } .ai-flow-nav-btn svg { flex-shrink: 0; color: var(--white); } .ai-tool-label { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; } .ai-header-icon { display: flex; align-items: center; justify-content: center; color: var(--inv-bg-color); flex-shrink: 0; opacity: 0.85; } .ai-header-icon svg { width: 36px; height: 36px; fill: currentColor; } .ai-architect-glyph { display: none; } .template-icon { width: 3rem; height: 3rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--inv-bg-color) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); flex-shrink: 0; } .template-icon--creator { background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 18%, transparent), color-mix(in srgb, var(--blurple) 10%, transparent)); border: 0.5px solid color-mix(in srgb, var(--purple) 28%, transparent); box-shadow: 0 2px 12px color-mix(in srgb, var(--purple) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--purple) 10%, transparent); color: var(--purple); } .template-icon--editor { background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 18%, transparent), color-mix(in srgb, var(--purple) 10%, transparent)); border: 0.5px solid color-mix(in srgb, var(--blurple) 28%, transparent); box-shadow: 0 2px 12px color-mix(in srgb, var(--blurple) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--blurple) 10%, transparent); color: var(--inv-bg-color) !important; } .template-icon--coach { background: linear-gradient(135deg, color-mix(in srgb, var(--lightblue) 18%, transparent), color-mix(in srgb, var(--purple) 10%, transparent)); border: 0.5px solid color-mix(in srgb, var(--lightblue) 28%, transparent); box-shadow: 0 2px 12px color-mix(in srgb, var(--lightblue) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--lightblue) 10%, transparent); color: var(--darkblue); } .ai-prompt-display { display: block; font-family: var(--font-main, 'Satoshi', sans-serif); color: var(--inv-bg-color); line-height: 1.5; min-height: 4.5rem; } .ai-prompt-text { display: inline; white-space: pre-wrap; letter-spacing: 0.01em; color: inherit; color: var(--inv-bg-color); } .ai-prompt-caret { width: 2px; height: 1.3em; background: #c7d2fe; display: inline-block; margin-left: 0.12rem; vertical-align: text-bottom; animation: blink 1s steps(1) infinite; } .ai-prompt-caret.is-solid { animation: none; background: #6366f1; } .ai-status-message { font-size: 0.9rem; color: #bae6fd; margin-top: 0.85rem; padding-bottom: 0.35rem; min-height: 1.4rem; opacity: 0; transition: opacity 300ms ease; } .ai-status-message.is-visible { opacity: 1; } .ai-status-chip { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; padding: 0.2rem 0.8rem; border-radius: 999px; border: 1px solid transparent; transition: all 200ms ease; } .ai-status-chip--idle { background: rgba(148, 163, 184, 0.2); border-color: rgba(148, 163, 184, 0.4); color: #e2e8f0; } .ai-status-chip--active { background: rgba(245, 158, 11, 0.2); border-color: rgba(251, 191, 36, 0.45); color: #fbbf24; } .ai-status-chip--done { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.35); color: #86efac; } .ai-status-label { color: #c7d2fe; letter-spacing: 0.2em; min-height: 1.2rem; display: inline-flex; align-items: center; transition: color 200ms ease; } .ai-status-header { position: sticky; top: 0; z-index: 2; padding-block: 0.35rem; background: transparent; border-bottom: 1px solid transparent; box-shadow: none; transition: background 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } .ai-status-header[data-status-state="complete"] { background: transparent; border-bottom: 1px solid transparent; box-shadow: none; } .ai-stage-scroll { margin-top: 0; padding-top: 0.85rem; padding-bottom: 1rem; flex: 1; min-height: 240px; max-height: none; overflow-y: auto; padding-right: 0.35rem; scrollbar-width: none; } .ai-stage-scroll::-webkit-scrollbar { display: none; } .ai-stage-list { opacity: 0; transform: translateY(12px); transition: opacity 400ms ease, transform 400ms ease; min-height: 10rem; margin-top: 0; } .ai-stage-list.is-ready { opacity: 1; transform: translateY(0); } .ai-stage { display: flex; align-items: center; gap: 0.75rem; color: #cbd5f5; font-size: 0.8rem; } .ai-stage-label { color: #e2e8f0; } .ai-stage-indicator { width: 1.9rem; height: 1.9rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.4); display: inline-flex; align-items: center; justify-content: center; position: relative; } .ai-stage-spinner { position: absolute; inset: 3px; border-radius: 999px; border: 2px solid rgba(148, 163, 184, 0.2); border-top-color: #a5b4fc; opacity: 0; } .ai-stage-check { width: 1.1rem; height: 1.1rem; color: #86efac; opacity: 0; transform: scale(0.5); transition: opacity 250ms ease, transform 250ms ease; } .ai-stage.is-active .ai-stage-spinner { opacity: 1; animation: spin 1s linear infinite; } .ai-stage.is-complete .ai-stage-spinner { opacity: 0; } .ai-stage.is-complete .ai-stage-check { opacity: 1; transform: scale(1); } @keyframes confetti-fall { 0% { transform: translateY(-10px) rotate(0deg); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(60px) rotate(220deg); opacity: 0; } } @keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } @keyframes spin { to { transform: rotate(360deg); } } .proof-header { position: relative; z-index: 1; max-width: 860px; margin-inline: auto; color: var(--inv-bg-color); margin-bottom: 60px !important; } .proof-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.95rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.4em; font-size: 0.65rem; background-color: rgba(139, 92, 246, 0.15); color: var(--purple); border: 1px solid rgba(139, 92, 246, 0.3); opacity: 1; font-weight: 800; } .proof-pill svg, .proof-pill svg * { fill: var(--purple); stroke: var(--purple); } /* Gradient Pill - matches quadrant gradient via brand variables */ .proof-pill-gradient { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 2rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem; font-weight: 800; background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%), linear-gradient(160deg, rgba(79,70,229,0.85) 0%, rgba(99,102,241,0.75) 50%, rgba(139,92,246,0.8) 100%), var(--main-bg-color); color: #ffffff; border: none; box-shadow: 0 4px 20px color-mix(in srgb, var(--purple) 35%, transparent), 0 2px 10px color-mix(in srgb, var(--blurple) 20%, transparent); transition: all 0.3s ease; } .proof-pill-gradient:hover { transform: translateY(-2px); box-shadow: 0 6px 30px color-mix(in srgb, var(--purple) 45%, transparent), 0 3px 15px color-mix(in srgb, var(--blurple) 30%, transparent); } /* Urgency Tag - Muted & Sophisticated */ .urgency-tag { display: inline-block; padding: 0.5rem 1.25rem; background: linear-gradient(135deg, #dc2626, #f87171); color: #ffffff; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; border-radius: 6px; border: 1px solid rgba(220, 38, 38, 0.3); box-shadow: 0 8px 24px rgba(220, 38, 38, 0.15), 0 2px 8px rgba(248, 113, 113, 0.1); animation: urgency-pulse 2s ease-in-out infinite; } @keyframes urgency-pulse { 0%, 100% { box-shadow: 0 8px 24px rgba(220, 38, 38, 0.15), 0 2px 8px rgba(248, 113, 113, 0.1); } 50% { box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2), 0 3px 10px rgba(248, 113, 113, 0.15); } } .proof-title { color: var(--inv-bg-color); line-height: 1.2; letter-spacing: -0.03em; margin-top: 3rem !important; opacity: 0.85; font-size: 2.6rem; } .proof-title-em { opacity: 0.5; } .proof-bridge-divider { width: 48px; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--blurple) 50%, transparent), color-mix(in srgb, var(--purple) 30%, transparent)); margin: 1.25rem auto 0; border-radius: 1px; } .proof-subhead { color: var(--inv-bg-color); opacity: 0.7; } .proof-visual { display: flex; flex-direction: column; gap: 64px; align-items: center; position: relative; z-index: 1; } .proof-holo { position: relative; width: min(520px, 85vw); aspect-ratio: 1; /* border-radius: 50%; background: radial-gradient(circle, rgba(99, 102, 241, 0.08), transparent 65%), rgba(255, 255, 255, 0.9); border: 1px solid rgba(99, 102, 241, 0.18); box-shadow: 0 35px 80px rgba(15, 23, 42, 0.15); */ overflow: visible; } .proof-holo::before, .proof-holo::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed rgba(96, 165, 250, 0.4); animation: pulseRing 8s ease-in-out infinite; } .proof-holo::after { inset: 22%; border-style: solid; border-color: rgba(125, 211, 252, 0.35); animation-delay: 2s; } .proof-core { position: absolute; inset: 42%; border-radius: 32px; background: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; text-align: center; box-shadow: 0 35px 55px rgba(15, 23, 42, 0.15); border: 1px solid rgba(15, 23, 42, 0.06); } .proof-core span { font-weight: 700; font-size: 1.1rem; } .proof-core p { font-size: 0.9rem; color: var(--inv-bg-color) !important; text-transform: uppercase; letter-spacing: 0.08em; } /* NEW STATS GRID LAYOUT WITH GLASSMORPHISM */ .proof-grid-container { max-width: 1200px; margin: 0 auto; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; border: none; box-shadow: none; } .proof-stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; border-radius: 16px; overflow: visible; } .proof-stat-card { padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; position: relative; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); color: var(--inv-bg-color); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border-radius: 12px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 4%, transparent); transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); min-height: 172px; } .proof-stat-card:last-child { border-right: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .proof-stat-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--blurple) 18%, transparent); box-shadow: 0 8px 40px color-mix(in srgb, var(--blurple) 10%, transparent), 0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent); z-index: 10; } .proof-stat-card .proof-stat-value { font-size: 2.325rem; font-weight: 800; margin-bottom: 0; line-height: 1.1; min-height: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; } /* Stat card values - sampled from quadrant gradient stops: #4f46e5 → #6366f1 → #8b5cf6 */ .proof-stat-card:nth-child(1) .proof-stat-value { color: #4f46e5; filter: drop-shadow(0 0 20px rgba(79, 70, 229, 0.4)); } .proof-stat-card:nth-child(2) .proof-stat-value { color: #5958eb; filter: drop-shadow(0 0 20px rgba(89, 88, 235, 0.4)); font-size: 38px; } .proof-stat-card:nth-child(3) .proof-stat-value { color: #6366f1; filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.4)); font-size: 38px; } .proof-stat-card:nth-child(4) .proof-stat-value { color: #7761f3; filter: drop-shadow(0 0 20px rgba(119, 97, 243, 0.4)); font-size: 38px; } .proof-stat-card:nth-child(5) .proof-stat-value { color: #8b5cf6; filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.4)); font-size: 38px; } .proof-stat-card .proof-stat-label { margin-top: 14px; font-size: 0.875rem; color: var(--inv-bg-color); opacity: 0.7; line-height: 1.5; max-width: 180px; } /* Emphasized stat card — gradient bg, white text */ .proof-stat-emphasis { background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%), linear-gradient(160deg, rgba(79,70,229,0.85) 0%, rgba(99,102,241,0.75) 50%, rgba(139,92,246,0.8) 100%), var(--main-bg-color) !important; border-color: transparent !important; backdrop-filter: none !important; box-shadow: 0 4px 20px color-mix(in srgb, var(--purple) 35%, transparent), 0 2px 10px color-mix(in srgb, var(--blurple) 20%, transparent) !important; } .proof-stat-emphasis:hover { background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%), linear-gradient(160deg, rgba(67,56,202,0.9) 0%, rgba(79,70,229,0.8) 50%, rgba(124,58,237,0.85) 100%), var(--main-bg-color) !important; } .proof-stat-emphasis .proof-stat-value { color: var(--white) !important; filter: none !important; } .proof-stat-emphasis .proof-stat-label { color: var(--white) !important; font-weight: 600; } /* Tablet: 3 columns */ @media (max-width: 1024px) { .proof-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .proof-stat-card { border-right: 1px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent); } .proof-stat-card:nth-child(3n) { border-right: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } .proof-stat-card:nth-last-child(-n+3) { border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } } /* Mobile: 1 column */ @media (max-width: 640px) { .proof-stats-grid { grid-template-columns: 1fr; } .proof-stat-card { border-right: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent); } .proof-stat-card:last-child { border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } } /* OLD BUBBLE CLOUD STYLES - COMMENTED OUT */ /*.proof-orbit { position: absolute; inset: 0; } .proof-node { --node-accent-rgb: 99, 102, 241; --magnet-x: 0px; --magnet-y: 0px; position: absolute; top: 50%; left: 50%; width: 205px; height: 205px; border-radius: 999px; background: radial-gradient(circle at 78% 20%, rgba(var(--node-accent-rgb), 0.06), transparent 45%), radial-gradient(circle at 18% 70%, rgba(var(--node-accent-rgb), 0.04), transparent 55%), #fefefe; border: 1px solid rgba(var(--node-accent-rgb), 0.5); box-shadow: 0 25px 50px rgba(15, 23, 42, 0.06), 0 0 35px rgba(var(--node-accent-rgb), 0.2); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; backdrop-filter: none; animation: float 6s ease-in-out infinite; transform: translate(-50%, -50%) translate(calc(var(--offset-x, 0px) + var(--magnet-x)), calc(var(--offset-y, 0px) + var(--magnet-y))); padding: 1.5rem 1rem; position: absolute; overflow: visible; z-index: 999; text-shadow: none; transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1); will-change: transform; } .proof-node.is-magnetic { animation-play-state: paused; } .proof-node::before { content: ""; position: absolute; inset: -12px; border-radius: inherit; background: radial-gradient(circle, rgba(var(--node-accent-rgb), 0.4), transparent 15%); filter: blur(18px); opacity: 0.45; z-index: -1; } .proof-node .proof-stat-value { font-size: 2rem; font-weight: 800; color: rgb(var(--node-accent-rgb)); } .proof-node .proof-stat-label { font-size: 0.8rem; color: var(--inv-bg-color); opacity: 0.7; line-height: 1.4; } @keyframes pulseRing { 0% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 0.3; } 100% { transform: scale(1); opacity: 0.7; } } @keyframes float { 0% { transform: translate(-50%, -50%) translate(calc(var(--offset-x, 0px) + var(--magnet-x)), calc(var(--offset-y, -200px) + var(--magnet-y))); } 50% { transform: translate(-50%, -50%) translate(calc(var(--offset-x, 0px) + var(--magnet-x)), calc(var(--offset-y, -200px) - 12px + var(--magnet-y))); } 100% { transform: translate(-50%, -50%) translate(calc(var(--offset-x, 0px) + var(--magnet-x)), calc(var(--offset-y, -200px) + var(--magnet-y))); } } .node-one { --offset-x: 0px; --offset-y: -220px; --node-accent-rgb: 99, 102, 241; animation-delay: 0s; } .node-two { --offset-x: 190px; --offset-y: -90px; --node-accent-rgb: 129, 140, 248; animation-delay: 1s; } .node-three { --offset-x: 150px; --offset-y: 160px; --node-accent-rgb: 109, 40, 217; animation-delay: 2s; } .node-four { --offset-x: -150px; --offset-y: 160px; --node-accent-rgb: 147, 51, 234; animation-delay: 3s; } .node-five { --offset-x: -190px; --offset-y: -90px; --node-accent-rgb: 168, 85, 247; animation-delay: 4s; } @media (max-width: 1024px) { .proof-node { width: 160px; height: 160px; padding: 1.25rem; } } @media (max-width: 640px) { .proof-holo { width: 100%; } .proof-node { position: static; transform: none !important; animation: none; width: 100%; height: auto; margin-bottom: 1rem; } .proof-orbit { position: static; display: flex; flex-direction: column; gap: 1rem; } .proof-holo::before, .proof-holo::after, .proof-core { display: none; } .proof-visual { gap: 1.5rem; } } */ /* END OLD BUBBLE CLOUD STYLES */ .problem-chart-mobile .mobile-quadrant-card { border-radius: 20px; padding: 1.75rem 1.75rem; background: linear-gradient(135deg, color-mix(in srgb, var(--inv-bg-color) 3%, transparent) 0%, color-mix(in srgb, var(--inv-bg-color) 1%, transparent) 100%); border: 1.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 1rem; width: min(100%, 520px); margin-inline: auto; position: relative; transition: all 0.3s ease; backdrop-filter: blur(20px); } .mobile-quadrant-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--inv-bg-color) 12%, transparent) 50%, transparent 100%); pointer-events: none; } .mobile-card-title { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--inv-bg-color); letter-spacing: -0.01em; line-height: 1.3; } .mobile-card-bullets { margin: 0; padding-left: 0; display: flex; flex-direction: column; gap: 1rem; color: var(--inv-bg-color); list-style: none; } .mobile-card-bullets > li { list-style-type: none; padding-left: 0; } .mobile-card-bullet-label { display: block; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--inv-bg-color) !important; opacity: 0.5; font-weight: 700; margin-bottom: 0.5rem; } .mobile-card-sublist { margin: 0; padding-left: 0; list-style-type: none; font-size: 1rem; color: var(--inv-bg-color); opacity: 0.75; display: flex; flex-direction: column; gap: 0.4rem; line-height: 1.5; } .mobile-card-sublist li { padding-left: 1.25rem; position: relative; } .mobile-card-sublist li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--inv-bg-color); opacity: 0.35; } .mobile-quadrant-highlight { background: linear-gradient(135deg, var(--blurple) 0%, var(--lightblue) 100%); color: #ffffff; border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(99, 102, 241, 0.35), 0 4px 16px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25); transform: scale(1.02); } .mobile-quadrant-highlight::before { background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%); } .mobile-quadrant-highlight .mobile-card-bullets, .mobile-quadrant-highlight .mobile-card-title, .mobile-quadrant-highlight .mobile-card-bullet-label, .mobile-quadrant-highlight .mobile-card-sublist { color: #ffffff; } .mobile-quadrant-highlight .mobile-card-title { color: var(--blurple) !important; } .mobile-quadrant-highlight .mobile-card-bullet-label { opacity: 0.85; } .mobile-quadrant-highlight .mobile-card-sublist { opacity: 0.95; } .mobile-quadrant-highlight .mobile-card-sublist li::before { background: #ffffff; opacity: 0.75; box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); } /* Complexity Axis Color Coding */ /* Offering axis - Purple */ .mobile-card-bullets > li:first-child .mobile-card-sublist li:first-child { color: var(--purple); font-weight: 600; } .mobile-card-bullets > li:first-child .mobile-card-sublist li:first-child::before { background: var(--purple); opacity: 0.8; box-shadow: 0 0 6px rgba(168, 85, 247, 0.4); } /* Customer axis - Blue */ .mobile-card-bullets > li:first-child .mobile-card-sublist li:nth-child(2) { color: var(--lightblue); font-weight: 600; } .mobile-card-bullets > li:first-child .mobile-card-sublist li:nth-child(2)::before { background: var(--lightblue); opacity: 0.8; box-shadow: 0 0 6px rgba(99, 179, 237, 0.4); } /* Override for CustomerNode highlighted card - keep axis colors */ .mobile-quadrant-highlight .mobile-card-bullets > li:first-child .mobile-card-sublist li:first-child { color: var(--purple); } .mobile-quadrant-highlight .mobile-card-bullets > li:first-child .mobile-card-sublist li:nth-child(2) { color: var(--lightblue); } .mobile-quadrant-highlight .mobile-card-bullets > li:first-child .mobile-card-sublist li:first-child::before { background: var(--purple); box-shadow: 0 0 10px rgba(168, 85, 247, 0.7); } .mobile-quadrant-highlight .mobile-card-bullets > li:first-child .mobile-card-sublist li:nth-child(2)::before { background: var(--lightblue); box-shadow: 0 0 10px rgba(99, 179, 237, 0.7); } /* Low complexity - reduced opacity */ .mobile-card-sublist li[data-complexity="low"] { opacity: 0.35; } .mobile-card-sublist li[data-complexity="low"]::before { opacity: 0.3; } .cartesian-chart { --chart-node-radius: 0.75rem; padding: clamp(1.5rem, 3vw, 2.75rem); } .cartesian-chart .cartesian-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); grid-template-areas: "buyer-orchestration active-zone" "transactional mass-custom"; /* column-gap: clamp(0.35rem, 0.8vw, 1.15rem); */ /* row-gap: clamp(0.35rem, 0.8vw, 1.15rem); */ gap: 2px; align-items: stretch; min-height: 360px; padding: clamp(1rem, 2vw, 2.25rem); } .cartesian-grid.reveal-from-bottom.is-revealed { background: transparent !important; border: none !important; } .cartesian-chart .cartesian-grid::before, .cartesian-chart .cartesian-grid::after { content: ""; position: absolute; pointer-events: none; opacity: 1; } .cartesian-chart .cartesian-grid::before { z-index: 0; top: clamp(0.5rem, 1vw, 1rem); bottom: clamp(0.5rem, 1vw, 1rem); left: 50%; width: 2px; background: linear-gradient(180deg, transparent 0%, rgba(148, 163, 184, 0.4) 30%, rgba(148, 163, 184, 0.35) 70%, transparent 100%); transform: translateX(-50%); } .cartesian-chart .cartesian-grid::after { z-index: 0; left: clamp(0.5rem, 1vw, 1rem); right: clamp(0.5rem, 1vw, 1rem); top: 50%; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.4) 30%, rgba(148, 163, 184, 0.35) 70%, transparent 100%); transform: translateY(-50%); } .cartesian-chart .chart-axis { text-transform: uppercase; font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.25em; font-weight: 600; z-index: 3; color: var(--inv-bg-color); opacity: 0.8; display: flex; align-items: center; gap: 0.35rem; } .cartesian-chart .chart-axis span { white-space: nowrap; /* background: rgba(255, 255, 255, 0.9); */ color: var(--inv-bg-color); /* padding: 0.35rem 0.9rem; */ border-radius: 999px; display: inline-flex; align-items: center; gap: 0.35rem; } .axis-direction { display: inline-flex !important; align-items: center; justify-content: center; color: var(--inv-bg-color) !important; opacity: 1; } .axis-direction svg { width: 18px; height: 18px; stroke: var(--inv-bg-color) !important; stroke-width: 2.5; flex-shrink: 0; } /* Rotate Y-axis arrow for vertical context */ .chart-axis-y .axis-direction svg { transform: rotate(-90deg); } .cartesian-chart .chart-axis-y { writing-mode: vertical-rl; transform: rotate(180deg); left: clamp(-0.25rem, 0.5vw, 0.5rem); top: 50%; translate: 0 -50%; } #customer_complexity_svg{ transform: rotate(180deg) !important; } .cartesian-chart .chart-axis-x { left: 50%; bottom: clamp(-0.25rem, 0.5vw, 0.5rem); transform: translateX(-50%); } .cartesian-chart .chart-quadrant { position: relative; display: flex; flex-direction: column; gap: 0.8rem; height: 100%; padding: clamp(0.75rem, 1vw, 1.4rem); border-radius: 0; border: none; background: transparent; box-shadow: none; min-height: 120px; z-index: 1; } .cartesian-chart .quadrant-buyer-orchestration, .cartesian-chart .active-quadrant { padding-bottom: clamp(1.5rem, 2vw, 2.5rem); } .chart-quadrant.quadrant-customernode.active-quadrant{ transform: translate(15px, -15px); opacity: 1 !important; } .cartesian-chart .quadrant-transactional, .cartesian-chart .quadrant-mass-custom { padding-top: clamp(1.5rem, 2vw, 2.5rem); } .cartesian-chart .quadrant-transactional, .cartesian-chart .quadrant-buyer-orchestration { padding-right: clamp(2rem, 3vw, 3.75rem); } .cartesian-chart .quadrant-mass-custom, .cartesian-chart .active-quadrant { padding-left: clamp(2rem, 3vw, 3.75rem); } .cartesian-chart .quadrant-title { font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--inv-bg-color); opacity: 0.65; } .quadrant-coords { display: flex; flex-wrap: nowrap; gap: 0.5rem; font-size: 0.42rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--inv-bg-color); } .quadrant-coords .coord { white-space: nowrap; color: var(--inv-bg-color); } .chart-quadrant .quadrant-coords { order: 99; margin-top: auto; width: 100%; justify-content: space-between; row-gap: 0.35rem; padding-top: 0.75rem; } .cartesian-chart .active-quadrant .quadrant-coords { color: var(--inv-bg-color); } .cartesian-chart .quadrant-meta { font-size: 0.42rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--inv-bg-color) !important; opacity: 0; transition: opacity 0.3s ease; } .cartesian-chart .chart-quadrant:hover .quadrant-meta { opacity: 0.65; } .cartesian-chart .quadrant-nodes { margin: 0; padding: 0; display: block; font-size: 0.72rem; line-height: 1.35; color: var(--inv-bg-color); opacity: 0; transition: opacity 0.3s ease; } .cartesian-chart .chart-quadrant:hover .quadrant-nodes { opacity: 0.9; } .cartesian-chart .quadrant-customernode { opacity: 1; } .cartesian-chart .active-quadrant .quadrant-meta { opacity: 0.9; color: #fff !important; } .cartesian-chart .active-quadrant .quadrant-nodes { opacity: 0.95; color: #fff !important; } .cartesian-chart .quadrant-nodes-inline { font-weight: 500; letter-spacing: 0.01em; } .cartesian-chart .quadrant-nodes--stacked { display: flex; flex-direction: column; gap: 0.3rem; } .cartesian-chart .quadrant-nodes--stacked .quadrant-line { font-size: 0.8rem; font-weight: 600; color: #fff; } .cartesian-chart .quadrant-transactional, .cartesian-chart .quadrant-mass-custom, .cartesian-chart .quadrant-buyer-orchestration { background: transparent; opacity: 0.6; filter: saturate(0.3); transition: opacity 0.4s ease, filter 0.4s ease; } .cartesian-chart .quadrant-transactional:hover, .cartesian-chart .quadrant-mass-custom:hover, .cartesian-chart .quadrant-buyer-orchestration:hover { opacity: 0.7; filter: saturate(0.6); } .cartesian-chart .quadrant-transactional { grid-area: transactional; } .cartesian-chart .quadrant-mass-custom { grid-area: mass-custom; } .cartesian-chart .quadrant-buyer-orchestration { grid-area: buyer-orchestration; } .cartesian-chart .active-quadrant { grid-area: active-zone; } .desc-text-hero{ max-width: 570px !important; letter-spacing: 0.02em; color: var(--inv-bg-color) !important; opacity: 0.8; } .cartesian-chart .active-quadrant { border-color: transparent; /* Restrained "you are here" treatment — was a saturated 85% purple * block that read as consumer-AI marketing. Pulled back to a soft * glass card with a faint blurple/purple radial wash, an accent * hairline border, and gentle elevation. Same idea (this zone IS * the highlight) executed with editorial restraint. */ background: radial-gradient(ellipse 70% 55% at 50% 50%, color-mix(in srgb, var(--blurple) 14%, transparent) 0%, transparent 75%), linear-gradient(160deg, color-mix(in srgb, var(--blurple) 6%, var(--main-bg-color)) 0%, color-mix(in srgb, var(--purple) 4%, var(--main-bg-color)) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 20px; border: none; position: relative; color: var(--inv-bg-color); box-shadow: 0 1px 0 color-mix(in srgb, #fff 50%, transparent) inset, 0 24px 56px color-mix(in srgb, var(--inv-bg-color) 12%, transparent), 0 8px 20px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); transform: translate(8px, -8px) scale(1.045); z-index: 2; overflow: hidden; } .cartesian-chart .active-quadrant::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 128px 128px; opacity: 0.02; pointer-events: none; mix-blend-mode: overlay; border-radius: inherit; } .cartesian-chart .active-quadrant::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; /* Softer accent border — was a saturated purple→indigo edge. Now a * single low-opacity blurple hairline that frames the zone without * shouting. */ background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 28%, transparent), color-mix(in srgb, var(--purple) 18%, transparent)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; } .cartesian-chart .active-quadrant .quadrant-title, .cartesian-chart .active-quadrant .chart-node { color: var(--inv-bg-color); opacity: 0.95; } .cartesian-chart .active-quadrant .chart-node { color: var(--inv-bg-color); } .cartesian-chart .active-quadrant .quadrant-title { background: none; -webkit-background-clip: unset; /* Dark ink — was #fff for the old saturated-purple background. * Now the card is a light glass card so the text needs to match * everything else on this page. */ -webkit-text-fill-color: var(--inv-bg-color); color: var(--inv-bg-color); font-weight: 800; } .cartesian-chart .active-quadrant .chart-node { border: none; background: transparent; font-weight: 700; opacity: 1; font-size: 0.72rem; color: var(--inv-bg-color); } .cartesian-chart .active-quadrant .chart-node::before { background: var(--inv-bg-color); } .cartesian-chart .active-quadrant .quadrant-meta { opacity: 0.65; color: var(--inv-bg-color) !important; } .cartesian-chart .active-quadrant .chart-node:hover { filter: brightness(1.05); } @keyframes cnPulse { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.45); } 70% { box-shadow: 0 0 35px 12px rgba(99, 102, 241, 0); } 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } } .problem-chart-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(115px, 1fr)); grid-template-areas: "highBuyerLowOffer highBuyerHighOffer" "lowBuyerLowOffer lowBuyerHighOffer"; gap: clamp(1rem, 1.4vw, 1.5rem); padding: clamp(1rem, 1.8vw, 1.7rem); background: var(--main-bg-color); border-radius: 36px; border: none; box-shadow: none; overflow: hidden; } .problem-chart-grid::before, .problem-chart-grid::after { content: ""; position: absolute; pointer-events: none; background: rgba(99, 102, 241, 0.15); } .problem-chart-grid::before { top: clamp(1rem, 3vw, 2.25rem); bottom: clamp(1rem, 3vw, 2.25rem); left: 50%; width: 1px; transform: translateX(-50%); } .problem-chart-grid::after { left: clamp(1rem, 3vw, 2.25rem); right: clamp(1rem, 3vw, 2.25rem); top: 50%; height: 1px; transform: translateY(-50%); } .chart-axis { position: absolute; text-transform: uppercase; font-size: 10px; letter-spacing: 0.45em; color: var(--inv-bg-color); opacity: 0.8; font-weight: 800; z-index: 3; } .chart-axis span { white-space: nowrap; } .chart-axis-y { writing-mode: vertical-rl; transform: rotate(180deg); left: clamp(0.25rem, 1vw, 1rem); top: 50%; translate: 0 -50%; } .chart-axis-x { left: 50%; bottom: clamp(0.5rem, 1vw, 1rem); transform: translateX(-50%); } .chart-quadrant { position: relative; display: flex; flex-direction: column; gap: 0.9rem; min-height: 138px; padding: clamp(0.85rem, 1.2vw, 1.25rem); border-radius: 24px; border: 1px solid rgba(99, 102, 241, 0.15); background: var(--main-bg-color); opacity: 0.5; box-shadow: 0 22px 40px rgba(99, 102, 241, 0.15); backdrop-filter: blur(15px); transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; z-index: 1; } .chart-quadrant p { margin: 0; } .chart-quadrant:hover { border-color: rgba(99, 102, 241, 0.4); box-shadow: 0 30px 60px rgba(99, 102, 241, 0.25); opacity: 1; } .chart-quadrant::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid transparent; pointer-events: none; transition: border-color 0.3s ease, opacity 0.3s ease; } .chart-quadrant:hover::after { border-color: rgba(129, 140, 248, 0.4); opacity: 0.9; } .chart-quadrant .quadrant-title { font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: var(--inv-bg-color); opacity: 0.9; line-height: 1.25; width: min-content; max-width: min-content; text-align: left; } .chart-quadrant .quadrant-meta { font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--inv-bg-color) !important; opacity: 0.8; margin-top: -0.05rem; margin-bottom: 0.1rem; } .cartesian-chart .quadrant-transactional, .cartesian-chart .quadrant-mass-custom, .cartesian-chart .quadrant-buyer-orchestration, .cartesian-chart .quadrant-customernode, .cartesian-chart .active-quadrant { padding: clamp(0.85rem, 1.2vw, 1.25rem); } .chart-quadrant .quadrant-nodes, .chart-quadrant .quadrant-examples { font-size: 0.94rem; line-height: 1.45; color: var(--inv-bg-color); opacity: 0.85; gap: 0.35rem; } .chart-quadrant *:not(.quadrant-coords){ padding-left: 20px; padding-right: 20px; box-sizing: border-box; } .problem-chart-grid .quadrant-transactional, .problem-chart-grid .quadrant-mass-custom, .problem-chart-grid .quadrant-buyer-orchestration, .problem-chart-grid .quadrant-customernode, .problem-chart-grid .active-quadrant { padding: clamp(0.95rem, 1.35vw, 1.45rem); } .quadrant-amazon { grid-area: lowBuyerLowOffer; background: linear-gradient(165deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.12)); } .quadrant-vistaprint { grid-area: lowBuyerHighOffer; background: linear-gradient(165deg, rgba(244, 114, 182, 0.22), rgba(244, 114, 182, 0.12)); } .quadrant-calendly { grid-area: highBuyerLowOffer; background: linear-gradient(165deg, rgba(165, 180, 252, 0.24), rgba(165, 180, 252, 0.12)); } .quadrant-customernode { grid-area: highBuyerHighOffer; border-color: rgba(79, 70, 229, 0.35); box-shadow: 0 25px 45px rgba(79, 70, 229, 0.3); background: linear-gradient(130deg, #3730a3, #7c3aed, #6366f1); color: #f8fafc; } .quadrant-customernode h3, .quadrant-customernode .quadrant-tag, .quadrant-customernode .quadrant-examples li { color: var(--inv-bg-color); } .quadrant-customernode:hover { transform: translateY(-10px) scale(1.01); box-shadow: 0 15px 30px rgba(79, 70, 229, 0.18); } .chart-quadrant.quadrant-customernode.active-quadrant { transform: translate(15px, -15px); opacity: 1 !important; } /* Keep text untouched on CN quadrant hover — override general hover rules */ .cartesian-chart .quadrant-customernode:hover .quadrant-meta { opacity: 0.9; color: #fff !important; } .cartesian-chart .quadrant-customernode:hover .quadrant-nodes { opacity: 0.95; color: #fff !important; } .quadrant-tag { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); padding: 0.4rem 0.95rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(15, 23, 42, 0.25); } .rounded-4xl { border-radius: 2.5rem; } .quadrant-examples { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; color: var(--inv-bg-color); display: grid; gap: 0.35rem; line-height: 1.4; } .quadrant-examples li { position: relative; padding-left: 1.25rem; opacity: 0.9; } .quadrant-examples li::before { content: ""; position: absolute; left: 0; top: 0.65rem; width: 8px; height: 8px; border-radius: 999px; background: var(--inv-bg-color); } .problem-chart-grid .chart-quadrant:not(.quadrant-customernode) .quadrant-examples li::before { background: rgba(15, 23, 42, 0.7); box-shadow: 0 0 6px rgba(15, 23, 42, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.4); } .quadrant-examples-highlight li:first-child { font-weight: 700; } @media (max-width: 768px) { .problem-chart { padding-bottom: 4rem; } .chart-axis { letter-spacing: 0.2em; } .chart-axis-y { left: auto; right: 1rem; } .chart-axis-x { bottom: 0.5rem; } .problem-copy { padding: 2rem; } .share-copy { padding: 2rem; } .problem-chart-grid { grid-template-columns: 1fr; grid-template-areas: "highBuyerLowOffer" "highBuyerHighOffer" "lowBuyerLowOffer" "lowBuyerHighOffer"; } .cartesian-chart { padding-bottom: 4rem; } .cartesian-chart .cartesian-grid { grid-template-columns: 1fr; min-height: auto; } .cartesian-chart .chart-axis-y { left: auto; right: 0.5rem; } .cartesian-chart .chart-axis span { font-size: 0.5rem; letter-spacing: 0.2em; } } @media (max-width: 800px) { .problem-chart { padding: 0.5rem; min-height: auto; margin-top: 60px; } .problem-chart-mobile { display: none !important; } .cartesian-chart .cartesian-grid { display: grid; min-height: auto; padding: 0; gap: 2px; } .cartesian-chart .chart-axis { display: flex; } .cartesian-chart .chart-axis span { font-size: 0.5rem; letter-spacing: 0.15em; padding: 0.2rem 0.5rem; } .cartesian-chart .chart-axis-y { left: -25px; width: fit-content; } .cartesian-chart .chart-axis-x { bottom: -30px; } .cartesian-chart .quadrant-title { font-size: 0.65rem; word-spacing: 100vw; } .cartesian-chart .quadrant-nodes { font-size: 0.45rem; } .cartesian-chart .quadrant-nodes--stacked .quadrant-line { font-size: 0.6rem; padding: 0; } .cartesian-chart .chart-quadrant { padding: clamp(0.6rem, 0.5vw, 0.7rem) 0.4rem; gap: 0.4rem; } .problem-section .problem-copy .quadrant-meta { font-size: 0.5rem; } .quadrant-coords { font-size: 0.35rem; justify-content: center; align-items: center; } .chart-quadrant.quadrant-customernode.active-quadrant { transform: translate(-9px, -20px) !important; scale: 1.2; } .navigator-ring .ring-nav-chevron, .navigator-ring .ring-nav-counter { bottom: -30px !important; } .chart-quadrant > * { padding-left: 0 !important; padding-right: 0 !important; } .problem-copy { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; } } @media (max-width: 640px) { .problem-section { padding-top: 7rem !important; padding-bottom: 3rem; } .problem-copy { padding: clamp(1.4rem, 6vw, 1.8rem); border-radius: 24px; } .share-copy { padding: clamp(1.4rem, 6vw, 1.8rem); border-radius: 24px; } .problem-chart { border-radius: 28px; } .problem-chart-grid { gap: 0.85rem; padding: 1rem; } .problem-chart-grid::before, .problem-chart-grid::after { display: none; } .cartesian-chart .cartesian-grid::before, .cartesian-chart .cartesian-grid::after { opacity: 0.3; } .cartesian-chart .cartesian-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } .problem-chart-grid { grid-template-columns: 1fr; } .chart-quadrant { min-height: auto; } .chart-quadrant .quadrant-title { width: 100%; max-width: none; } .quadrant-coords { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .problem-copy { padding: 1.2rem; } .share-copy { padding: 1.2rem; } .problem-pill { letter-spacing: 0.3em; } .chart-quadrant .quadrant-nodes, .chart-quadrant .quadrant-examples { font-size: 0.85rem; } } @media (max-width: 500px) { .stage-progress-card { min-width: 90vw; padding: 20px !important; z-index: 1000; background: linear-gradient(135deg, color-mix(in srgb, var(--inv-bg-color) 8%, transparent) 0%, color-mix(in srgb, var(--inv-bg-color) 4%, transparent) 100%) !important; backdrop-filter: blur(20px) saturate(1.2) !important; -webkit-backdrop-filter: blur(20px) saturate(1.2) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 15%, transparent) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; position: relative; transform: translateZ(50px); } } .glass { /* background: rgba(15, 15, 20, 0.7); */ /* backdrop-filter: blur(12px); */ /* border: 1px solid rgba(255, 255, 255, 0.1); */ box-shadow: var(--headerShadow); background-color: var(--main-bg-color) !important; color: var(--inv-bg-color) !important; } .stage-label { color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent) !important; font-size: 9px; letter-spacing: 0.12em; margin-bottom: 8px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-weight: 600; text-transform: uppercase; } /* Tiny horizontal stage header */ .stage-header-row { display: flex; align-items: center; justify-content: flex-start; padding-bottom: 0.35rem; margin-bottom: 0.35rem; gap: 0.6rem; border-bottom: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .currStage { color: var(--lightblue) !important; font-weight: 700; letter-spacing: 0.08em; transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); text-shadow: none; font-size: 11px; opacity: 1; text-transform: uppercase; white-space: nowrap; min-width: 70px; flex-shrink: 0; text-align: left; } .currStage.is-transitioning { opacity: 0; transform: scale(0.55); } /* Stage context positioned at bottom left of navigator ring */ .stage-context { position: absolute; bottom: -8px; left: 150px; color: var(--inv-bg-color); font-size: 8.5px; opacity: 0.5; font-weight: 500; letter-spacing: 0.04em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; text-transform: none; white-space: nowrap; } /* Inline subtle progress bar */ .stage-header-row .stage-progress-bar { display: block; position: relative; overflow: visible; height: 15px; width: 80px; flex-shrink: 0; border-radius: 9999px; background: color-mix(in srgb, var(--purple) 8%, transparent); margin-left: auto; align-self: flex-start; margin-top: 0px; } .stage-header-row .stage-progress-fill { display: block; height: 100%; width: var(--bar-width, 0%); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--lightblue) 50%, transparent), color-mix(in srgb, var(--blurpleblue) 50%, transparent)); transition: width 0.5s ease-in-out; } .stage-header-row .stage-progress-percent { position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 1px)); font-size: 10px; font-weight: 600; color: var(--inv-bg-color); opacity: 0.6; white-space: nowrap; pointer-events: none; z-index: 1; } .navigator-ring svg, .navigator-ring svg *{ color: var(--inv-bg-color) !important ; }.hero.particles .hero-gradient, .surface-beat--navigate.particles .surface-beat--navigate-gradient{ background: radial-gradient(ellipse 80% 40% at 50% 95%, color-mix(in srgb, var(--purple) 8%, transparent) 0%, transparent 70%), radial-gradient(ellipse 50% 30% at 35% 85%, color-mix(in srgb, var(--purple) 4%, transparent) 0%, transparent 60%), radial-gradient(ellipse 40% 25% at 65% 90%, color-mix(in srgb, var(--blurple) 3%, transparent) 0%, transparent 55%), linear-gradient(180deg, var(--main-bg-color) 0%, var(--main-bg-color) 50%, var(--off-bg-color) 100%); background-size: 100% 100%; animation: none; }.hero.particles .hero-gradient::after, .surface-beat--navigate.particles .surface-beat--navigate-gradient::after{ content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 128px 128px; opacity: 0.025; pointer-events: none; mix-blend-mode: overlay; }.hero-tag, .surface-beat--navigate-tag{ display: inline-flex; align-items: center; padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--inv-bg-color); opacity: 0.65; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); margin-bottom: 1.5rem; text-decoration: none !important; cursor: pointer; transition: opacity 0.3s ease, border-color 0.3s ease; }.hero-tag:hover, .surface-beat--navigate-tag:hover{ opacity: 1; border-color: color-mix(in srgb, var(--purple) 30%, transparent); }.hero-tag-inline, .surface-beat--navigate-tag-inline{ display: none; margin-bottom: 0; } @media (min-width: 768px) {.hero-tag-inline, .surface-beat--navigate-tag-inline{ display: inline-flex; }.hero-tag:not(.hero-tag-inline), .surface-beat--navigate-tag:not(.surface-beat--navigate-tag-inline){ display: none; } }.hero-tag-gradient, .surface-beat--navigate-tag-gradient{ margin-left: 0.3em; background: linear-gradient(160deg, var(--blurpleblue), var(--blurple), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; opacity: 1; }a.hero-tag-gradient, a.surface-beat--navigate-tag-gradient{ margin-left: 0; text-decoration: none; transition: opacity 0.2s ease; }a.hero-tag-gradient:hover, a.surface-beat--navigate-tag-gradient:hover{ opacity: 0.8; }.hero-headline, .surface-beat--navigate-headline{ font-family: var(--brand-font); font-size: 2.4rem; margin-bottom: 1rem; max-width: 20ch; letter-spacing: -0.03em; line-height: 1.1; font-weight: 600 !important; color: var(--inv-bg-color); }.hero .desc-text-hero, .surface-beat--navigate .desc-text-hero{ margin-bottom: 2rem !important; font-size: 0.85rem !important; max-width: 28rem !important; line-height: 1.7; letter-spacing: 0.015em; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent) !important; }.hero-kicker-inline, .surface-beat--navigate-kicker-inline{ text-decoration: none !important; color: inherit !important; }.hero-kicker-inline .hero-kicker-term, .surface-beat--navigate-kicker-inline .surface-beat--navigate-kicker-term{ font-weight: 600; }.hero .hero-btn-minimal, .surface-beat--navigate .surface-beat--navigate-btn-minimal{ font-size: 0.9rem; } @media (max-width: 767px) {.hero-headline, .surface-beat--navigate-headline{ font-size: 2rem; }.hero .hero-btn-minimal[href="#problem"], .surface-beat--navigate .surface-beat--navigate-btn-minimal[href="#problem"]{ display: none; }.hero-scroll-cue, .surface-beat--navigate-scroll-cue{ display: none; }.hero-tag, .surface-beat--navigate-tag{ display: none; }.hero-text-link[href="#problem"], .surface-beat--navigate-text-link[href="#problem"]{ display: inline-flex; } } /* ---- Hero text gradient shimmer ---- */.hero h1 .bg-gradient-to-r, .surface-beat--navigate h1 .bg-gradient-to-r{ background-size: 200% 100%; animation: heroTextShimmer 5s ease-in-out infinite; } .glow-border:hover { border-color: #6366f1; box-shadow: 0 0 20px rgba(99, 102, 241, 0.2); } .navigator-ring { --navigator-size: clamp(300px, calc(100vw - 40px), 580px); --node-distance: calc(var(--navigator-size) / 2 - 2px); width: var(--navigator-size); height: var(--navigator-size); position: relative; filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--inv-bg-color) 6%, transparent)) drop-shadow(0 0 60px color-mix(in srgb, var(--purple) 6%, transparent)); /* transform: perspective(1000px) rotateX(18deg); */ } /* Navigation chevrons - positioned on stage-progress-card */ .stage-progress-card { position: relative; } /* Navigation buttons positioned at bottom right of navigator ring */ .navigator-ring .ring-nav-chevron { position: absolute; bottom: -20px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border-radius: 10px; cursor: pointer; opacity: 0.3; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all 0.3s ease; z-index: 10; pointer-events: auto; } .navigator-ring .ring-nav-chevron:hover { opacity: 0.6; background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border-color: color-mix(in srgb, var(--inv-bg-color) 20%, transparent); transform: scale(1.05); } .navigator-ring .ring-nav-chevron svg { width: 20px; height: 20px; stroke: var(--inv-bg-color); stroke-width: 2.5; } .navigator-ring .ring-nav-prev { right: 52px; } .navigator-ring .ring-nav-counter { position: absolute; bottom: -20px; right: 46px; transform: translateX(50%); color: var(--inv-bg-color); font-size: 11px; opacity: 0.4; font-weight: 500; white-space: nowrap; pointer-events: none; letter-spacing: 0.02em; height: 40px; display: flex; align-items: center; } .navigator-ring .ring-nav-next { right: 0px; } /* ---- Tick marks around the ring (watch bezel style) ---- */ .navigator-ring-ticks { display: none ; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; z-index: 1; background: repeating-conic-gradient( from 0deg, transparent 0deg, transparent 2deg, color-mix(in srgb, var(--inv-bg-color) 15%, transparent) 2deg, color-mix(in srgb, var(--inv-bg-color) 15%, transparent) 3deg, transparent 3deg, transparent 6deg ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 12px), #000 calc(100% - 2px), transparent calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 12px), #000 calc(100% - 2px), transparent calc(100% - 2px)); opacity: 0.3; } /* ---- Ecosystem connector lines — infrastructure hint ---- */ .navigator-ring-connectors { position: absolute; inset: -40px; pointer-events: none; z-index: 0; } .navigator-ring-connectors::before, .navigator-ring-connectors::after, .navigator-connector-line { content: ""; position: absolute; width: 1px; height: 60px; background: linear-gradient(180deg, color-mix(in srgb, var(--inv-bg-color) 8%, transparent) 0%, transparent 100%); opacity: 0.15; } .navigator-ring-connectors::before { top: 0; left: 50%; transform: translateX(-50%) rotate(25deg); transform-origin: top center; } .navigator-ring-connectors::after { bottom: 0; left: 50%; transform: translateX(-50%) rotate(-35deg); transform-origin: bottom center; } .navigator-connector-line { top: 50%; right: 0; transform: translateY(-50%) rotate(15deg); transform-origin: right center; } .navigator-ring-track { position: absolute; inset: 0; /* To restore spin: animation: spin 80s linear infinite; */ } /* ---- Primary ring — segmented precision dial ---- */ .navigator-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; /* Render a thin (1px) ring: remove border and rely on masked conic-gradient */ border: none; background: conic-gradient( var(--green) 0deg 0deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 0deg 360deg ); /* Mask out the center to make a 1px ring band */ -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px), transparent 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px), transparent 100%); box-shadow: 0 0 4px color-mix(in srgb, var(--green) 6%, transparent), inset 0 0 3px color-mix(in srgb, var(--secondary-grey-color) 4%, transparent); /* To restore spin: animation: spin 80s linear infinite; */ transition: background 1s cubic-bezier(0.4, 0, 0.2, 1); /* ensure ring paints above the inner fill */ z-index: 2; } /* ─── Stage progress ring (UNIFIED) ─── * One rule replaces the 6 hardcoded `.navigator-ring--progress-N::before` * variants that previously had misaligned angles (e.g. progress-1 painted * green from 0° to 0° instead of 0° to 60°, progress-2 stopped at 40° * instead of 120°, etc.). Now both the ::before AND the separate * `.navigator-ring-completion-arc` element read from the SAME source of * truth — the `--completion-percent` CSS variable set by activateStage() * in JS. Pixel-perfect alignment with the stage nodes because the formula * is geometric: pct = idx/N * 100 → green fills to idx*(360/N)° which is * exactly where node idx sits on the ring. * * SMOOTH ARC TWEEN: `--completion-percent` is registered via @property * with syntax ``. Unregistered custom props are interpolated as * strings — so a change from "16.7" to "33.3" would jump the gradient * instantly. Registering it as a number lets the transition tween the * value, and the conic-gradient consuming `var(--completion-percent)` * recomputes per frame, smoothly extending the green arc between stages. */ @property --completion-percent { syntax: ''; inherits: true; initial-value: 0; } .navigator-ring::before { /* No `from` clause — default 0° = 12 o'clock = Discovery's position. * Conic gradient goes clockwise from there. Without this fix, the * old completion-arc used `from -90deg` which shifted the start to * 9 o'clock and made every progress arc render in the wrong place. */ background: conic-gradient( var(--green) 0%, var(--green) calc(var(--completion-percent, 0) * 1%), color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) calc(var(--completion-percent, 0) * 1%), color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 100% ) !important; } /* Hide the duplicate completion-arc element — the ::before above does * the green-arc job, and having two arcs at slightly different radii * was creating the "sometimes the arc is wrong" visual jitter. */ .navigator-ring-completion-arc { display: none !important; } /* 4-stage progress ring (90-degree increments) */ [data-stage-count="4"].navigator-ring--progress-0::before { background: conic-gradient( var(--green) 0deg 0deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 0deg 360deg ); } [data-stage-count="4"].navigator-ring--progress-1::before { background: conic-gradient( var(--green) 0deg, var(--lightblue) 90deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 90deg 360deg ); } [data-stage-count="4"].navigator-ring--progress-2::before { background: conic-gradient( var(--green) 0deg 60deg, var(--lightblue) 180deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 180deg 360deg ); } [data-stage-count="4"].navigator-ring--progress-3::before { background: conic-gradient( var(--green) 0deg 150deg, var(--lightblue) 270deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 270deg 360deg ); } /* 5-stage progress ring (72-degree increments) */ [data-stage-count="5"].navigator-ring--progress-0::before { background: conic-gradient( var(--green) 0deg 0deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 0deg 360deg ); } [data-stage-count="5"].navigator-ring--progress-1::before { background: conic-gradient( var(--green) 0deg, var(--lightblue) 72deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 72deg 360deg ); } [data-stage-count="5"].navigator-ring--progress-2::before { background: conic-gradient( var(--green) 0deg 50deg, var(--lightblue) 144deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 144deg 360deg ); } [data-stage-count="5"].navigator-ring--progress-3::before { background: conic-gradient( var(--green) 0deg 120deg, var(--lightblue) 216deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 216deg 360deg ); } [data-stage-count="5"].navigator-ring--progress-4::before { background: conic-gradient( var(--green) 0deg 190deg, var(--lightblue) 288deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 288deg 360deg ); } .navigator-ring::after { content: ""; position: absolute; /* inset matches the 1px ring so inner fill sits flush inside */ inset: 1px; border-radius: 50%; background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 55%, color-mix(in srgb, var(--purple) 4%, transparent) 75%, color-mix(in srgb, var(--purple) 6%, transparent) 90%, transparent 100%); z-index: 1; pointer-events: none; } /* ---- Sweeping arc light — blurple→purple scanning effect ---- */ /* .navigator-ring::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: conic-gradient( from 0deg, transparent 0deg, transparent 260deg, color-mix(in srgb, var(--blurple) 4%, transparent) 280deg, color-mix(in srgb, var(--blurple) 35%, transparent) 330deg, color-mix(in srgb, var(--purple) 60%, transparent) 350deg, color-mix(in srgb, var(--blurple) 4%, transparent) 360deg ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px), #000 100%, transparent 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px), #000 100%, transparent 100%); animation: spin 4s linear infinite; filter: blur(0.5px); } */ /* ---- Transit particles (fire on stage change, node → node) ---- */ .nav-transit { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 8px 3px color-mix(in srgb, var(--purple) 70%, transparent), 0 0 24px color-mix(in srgb, var(--blurple) 40%, transparent), 0 0 40px color-mix(in srgb, var(--purple) 15%, transparent); pointer-events: none; animation: navTransit 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .nav-transit:nth-child(2) { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; animation-delay: 0.08s; } .nav-transit:nth-child(3) { width: 2px; height: 2px; margin: -1px 0 0 -1px; animation-delay: 0.16s; opacity: 0.7; } @keyframes navTransit { 0% { transform: rotate(var(--from-angle)) translateY(calc(-1 * var(--node-distance))); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { transform: rotate(var(--to-angle)) translateY(calc(-1 * var(--node-distance))); opacity: 0; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes counter-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @media (prefers-reduced-motion: reduce) { .navigator-ring::before, .navigator-ring::after { animation: none; } .navigator-ring-track, .stage-node-face { animation: none; } .nav-transit, .stage-burst { display: none; } .navigator-ring-arc2, .navigator-ring-motes { display: none; }.hero.particles .hero-gradient, .surface-beat--navigate.particles .surface-beat--navigate-gradient{ animation: none; }.hero h1 .bg-gradient-to-r, .surface-beat--navigate h1 .bg-gradient-to-r{ animation: none; } } /* ---- Stage-change burst wave ---- */ .stage-burst { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(139, 120, 248, 0.6); box-shadow: 0 0 15px rgba(139, 120, 248, 0.3), inset 0 0 10px rgba(139, 120, 248, 0.1); animation: burstExpand 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; pointer-events: none; } @keyframes burstExpand { 0% { width: 100%; height: 100%; opacity: 0.8; box-shadow: 0 0 20px rgba(139, 120, 248, 0.4), inset 0 0 15px rgba(139, 120, 248, 0.15); } 100% { width: 280%; height: 280%; opacity: 0; box-shadow: 0 0 4px rgba(139, 120, 248, 0); } } /* ---- Center core glow — minimal premium halo ---- */ .navigator-ring-glow { position: absolute; top: 50%; left: 50%; width: 55%; height: 55%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--blurple) 4%, transparent) 0%, color-mix(in srgb, var(--purple) 1.5%, transparent) 45%, transparent 70%); animation: ringCoreBreath 3.5s ease-in-out infinite; pointer-events: none; z-index: 0; } @keyframes ringCoreBreath { 0%, 100% { opacity: 0.12; transform: translate(-50%, -50%) scale(0.85); } 50% { opacity: 0.3; transform: translate(-50%, -50%) scale(1.15); } } /* ---- Circle micro-label — centered inside ring ---- */ .navigator-ring-micro-label { position: absolute; bottom: -10px; left: 0; z-index: 2; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--inv-bg-color); opacity: 0.55; pointer-events: none; white-space: nowrap; display: flex; align-items: center; gap: 6px; } .micro-label-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: microPulse 2s ease-in-out infinite; } @keyframes microPulse { 0%, 100% { opacity: 0.4; box-shadow: 0 0 0 0 transparent; } 50% { opacity: 1; box-shadow: 0 0 6px 2px color-mix(in srgb, var(--green) 40%, transparent); } } /* The "double ring" was .navigator-ring-arc2: a purple sweep at inset:-1px (outside the primary ring's stroke) that read as a concentric second band. Killing only that one. The completion arc (.navigator-ring-completion-arc, inset:0) overlays the SAME stroke as the primary ring — it's progress along the one ring, not a second ring. Keep it. */ .navigator-ring-arc2 { display: none !important; } /* ---- Completion arc — green 1px ring following active node ---- */ .navigator-ring-completion-arc { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient( from -90deg, var(--green) 0%, var(--green) calc(var(--completion-percent, 0) * 1%), transparent calc(var(--completion-percent, 0) * 1%) ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px), #000 100%, transparent 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px), #000 100%, transparent 100%); pointer-events: none; z-index: 2; opacity: 1; transition: opacity 0.6s ease; } .navigator-ring[data-completion-percent]:not([data-completion-percent="0"]) .navigator-ring-completion-arc { opacity: 1; } /* ---- Ambient orbiting motes — DISABLED for precision instrument look ---- */ .navigator-ring-motes { display: none; /* Removed: no sparkles/particles for category-king design */ position: absolute; inset: 0; pointer-events: none; z-index: 0; } .navigator-ring-motes i { position: absolute; top: 50%; left: 50%; width: var(--mote-size, 2px); height: var(--mote-size, 2px); margin: calc(var(--mote-size, 2px) / -2) 0 0 calc(var(--mote-size, 2px) / -2); border-radius: 50%; background: color-mix(in srgb, var(--blurple) 80%, var(--purple)); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--blurple) 35%, transparent); animation: moteOrbit var(--mote-dur, 18s) linear infinite, motePulse var(--mote-fade, 6s) ease-in-out infinite; animation-delay: var(--mote-delay, 0s); } .navigator-ring-motes i:nth-child(1) { --mote-dur: 18s; --mote-fade: 5s; --mote-r: calc(var(--node-distance) * -0.82); --mote-size: 2px; --mote-delay: 0s; } .navigator-ring-motes i:nth-child(2) { --mote-dur: 25s; --mote-fade: 7s; --mote-r: calc(var(--node-distance) * -1.08); --mote-size: 1.5px; --mote-delay: -5s; } .navigator-ring-motes i:nth-child(3) { --mote-dur: 14s; --mote-fade: 4.5s; --mote-r: calc(var(--node-distance) * -0.65); --mote-size: 2.5px; --mote-delay: -9s; } .navigator-ring-motes i:nth-child(4) { --mote-dur: 22s; --mote-fade: 8s; --mote-r: calc(var(--node-distance) * -1.15); --mote-size: 1.5px; --mote-delay: -12s; } .navigator-ring-motes i:nth-child(5) { --mote-dur: 30s; --mote-fade: 9s; --mote-r: calc(var(--node-distance) * -0.55); --mote-size: 2px; --mote-delay: -3s; } .navigator-ring-motes i:nth-child(6) { --mote-dur: 20s; --mote-fade: 6s; --mote-r: calc(var(--node-distance) * -0.95); --mote-size: 1px; --mote-delay: -16s; } @keyframes moteOrbit { from { transform: rotate(0deg) translateY(var(--mote-r)); } to { transform: rotate(360deg) translateY(var(--mote-r)); } } @keyframes motePulse { 0%, 15%, 85%, 100% { opacity: 0; } 35%, 65% { opacity: 0.6; } 50% { opacity: 0.8; } } /* ---- Hero background ambient drift ---- */ @keyframes heroBgDrift { 0%, 100% { background-position: 40% 40%, 60% 60%, 0 0; } 33% { background-position: 60% 35%, 40% 55%, 0 0; } 66% { background-position: 45% 60%, 55% 40%, 0 0; } } /* ---- Hero text gradient shimmer ---- */ @keyframes heroTextShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ---- Ring border breath ---- */ @keyframes ringBorderBreath { 0%, 100% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.12), 0 0 40px rgba(139, 92, 246, 0.06), inset 0 0 15px rgba(99, 102, 241, 0.06); border-color: rgba(99, 102, 241, 0.25); } 50% { box-shadow: 0 0 25px rgba(99, 102, 241, 0.22), 0 0 60px rgba(139, 92, 246, 0.12), inset 0 0 25px rgba(99, 102, 241, 0.1); border-color: rgba(129, 120, 248, 0.38); } } .stage-node { --node-angle: 0deg; --stage-node-color: var(--inv-bg-color); --node-transform: translate(-50%, -50%) rotate(var(--node-angle)) translateY(calc(-1 * var(--node-distance))) rotate(calc(-1 * var(--node-angle))); position: absolute; top: 50%; left: 50%; width: 80px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px !important; background: color-mix(in srgb, var(--main-bg-color) 82%, transparent); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important; box-shadow: 0 4px 16px color-mix(in srgb, var(--inv-bg-color) 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent) !important; transform: var(--node-transform); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease; color: var(--stage-node-color) !important; z-index: 999999; } .stage-node svg, .stage-node svg * { color: var(--stage-node-color) !important; margin: 0px !important; width: 0.95rem; height: 0.95rem; transition: 0.3s all; } .stage-node-face { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; /* To restore counter-spin: animation: counter-spin 80s linear infinite; */ } .stage-node-index { font-size: 1.05rem; font-weight: 700; color: var(--stage-node-color); } .stage-node.is-active { opacity: 1 !important; background: color-mix(in srgb, var(--main-bg-color) 86%, var(--blurple)) !important; border: 1px solid color-mix(in srgb, var(--blurple) 28%, transparent) !important; box-shadow: 0 4px 16px color-mix(in srgb, var(--blurple) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--blurple) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent) !important; transform: var(--node-transform) scale(1); animation: none; } @keyframes activeNodePulse { 0%, 100% { box-shadow: 0 0 30px color-mix(in srgb, var(--purple) 40%, transparent), 0 0 60px color-mix(in srgb, var(--blurple) 25%, transparent), 0 0 90px color-mix(in srgb, var(--purple) 10%, transparent), 0 12px 30px color-mix(in srgb, var(--blurple) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 15%, transparent), 0 0 0 1px color-mix(in srgb, var(--blurple) 45%, transparent) !important; } 50% { box-shadow: 0 0 40px color-mix(in srgb, var(--purple) 55%, transparent), 0 0 80px color-mix(in srgb, var(--blurple) 30%, transparent), 0 0 110px color-mix(in srgb, var(--purple) 15%, transparent), 0 12px 30px color-mix(in srgb, var(--blurple) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 20%, transparent), 0 0 0 1px color-mix(in srgb, var(--blurple) 55%, transparent) !important; } } .stage-node.is-active *{ color: color-mix(in srgb, var(--lightblue) 50%, var(--lightblue)) !important; } .white{ color: var(--white) !important; } /* Stage NAME label — replaces the icon AND preview animation on every * node by default. Each node carries `data-stage="Discovery"` etc., so * we render that via a pseudo on .stage-node. Both the icon * (.stage-node-index) and the active-state animation (.stage-node-preview) * are hidden so only the name shows. Completed nodes hide the name and * show a ✓ check. * * NOTE: Using ::after — not ::before — because a separate legacy rule * `.stage-node.v6-is-active::before { content: '' }` paints a glow * background and would clobber any name content we tried to put there. */ .stage-node .stage-node-index, .stage-node .stage-node-preview { display: none; } .stage-node::after { content: attr(data-stage); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--brand-font); font-size: 11px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: var(--stage-node-color); white-space: nowrap; pointer-events: none; z-index: 3; /* Crossfade with the .stage-node-face::after checkmark when the * node flips to done. Was `content: ""` swap — that can't animate. */ opacity: 1; transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1), color 480ms ease; } /* Active node — solid blurple gradient background so the white stage * name on ::after reads clearly. The original .stage-node.is-active * rule (line 3377) uses an !important faint-cyan tint that we override * here. Must come AFTER the legacy rule in source order to win. */ .stage-node.v6-is-active, .stage-node.is-active { background: color-mix(in srgb, var(--main-bg-color) 86%, var(--blurple)) !important; border: 1px solid color-mix(in srgb, var(--blurple) 28%, transparent) !important; box-shadow: 0 4px 16px color-mix(in srgb, var(--blurple) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--blurple) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent) !important; } .stage-node.v6-is-active::after, .stage-node.is-active::after { color: var(--blurple) !important; font-weight: 700; z-index: 3; } /* Completed stage nodes: fade out the name, fade in the checkmark. * Both pseudos are always rendered with their content; opacity is what * actually animates between them — so the active-name → done-check swap * is a smooth crossfade instead of an instant content swap. */ .stage-node.is-complete::after, .stage-node.v6-is-done::after { opacity: 0; } /* The face::after is always there with the check; opacity gates it. * Green check on the node's neutral default background — NOT white on * a green background. Completed nodes match inactive nodes in chrome, * only the check marks them done. */ .stage-node .stage-node-face::after { content: "\2713"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.95rem; font-weight: 700; color: var(--green); line-height: 1; z-index: 3; opacity: 0; transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1) 120ms; pointer-events: none; } .stage-node.is-complete .stage-node-face::after, .stage-node.v6-is-done .stage-node-face::after { opacity: 1; } /* (The dedicated .stage-node-face::after rule + opacity gating above * handles the completed-state check. The legacy duplicate that lived * here was overriding our color with a dim green — removed.) */ .stage-node.is-complete{ /* background: color-mix(in srgb, var(--main-bg-color) 98%, var(--main-bg-color) 2%) !important; */ border: 0.5px solid color-mix(in srgb, var(--green) 8%, transparent) !important; opacity: 1 !important; } /* Default 6-stage positioning (60deg apart) */ .stage-node[data-stage-index="0"] { --node-angle: 0deg; } .stage-node[data-stage-index="1"] { --node-angle: 60deg; } .stage-node[data-stage-index="2"] { --node-angle: 120deg; } .stage-node[data-stage-index="3"] { --node-angle: 180deg; } .stage-node[data-stage-index="4"] { --node-angle: 240deg; } .stage-node[data-stage-index="5"] { --node-angle: 300deg; } /* 4-stage positioning (90deg apart) */ [data-stage-count="4"] .stage-node[data-stage-index="0"] { --node-angle: 0deg; } [data-stage-count="4"] .stage-node[data-stage-index="1"] { --node-angle: 90deg; } [data-stage-count="4"] .stage-node[data-stage-index="2"] { --node-angle: 180deg; } [data-stage-count="4"] .stage-node[data-stage-index="3"] { --node-angle: 270deg; } /* 5-stage positioning (72deg apart) */ [data-stage-count="5"] .stage-node[data-stage-index="0"] { --node-angle: 0deg; } [data-stage-count="5"] .stage-node[data-stage-index="1"] { --node-angle: 72deg; } [data-stage-count="5"] .stage-node[data-stage-index="2"] { --node-angle: 144deg; } [data-stage-count="5"] .stage-node[data-stage-index="3"] { --node-angle: 216deg; } [data-stage-count="5"] .stage-node[data-stage-index="4"] { --node-angle: 288deg; } /* ========== STAGE NODE MICRO-PREVIEWS ========== */ .stage-node-face { position: relative; flex-direction: column; gap: 0; } .stage-node-preview { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -46%) scale(0.3); opacity: 0; width: 44px; height: 28px; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .stage-node-preview svg { width: 100%; height: 100%; display: block; overflow: visible; } .stage-node .stage-node-index { transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .stage-node.is-active .stage-node-index { opacity: 0; transform: scale(0.5); } .stage-node.is-active .stage-node-preview { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-delay: 0.1s; } /* ---- Base hidden state for all animated strokes ---- */ .disc-line, .disc-ring, .disc-cardinal, .scope-box, .scope-line, .scope-chk, .commit-sig, .deploy-bar, .collab-deploy-bar, .success-ring, .success-chk { stroke-dasharray: 1; stroke-dashoffset: 1; } .disc-dot, .disc-needle { opacity: 0; } .exp-eye { opacity: 0; transform: translateY(0); } .collab-deploy-text, .collab-deploy-bar-4, .collab-deploy-bar-5 { opacity: 0; } /* ---- Motion keyframes ---- */ /* Smooth stroke draw */ @keyframes pvDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } /* Dot appearance */ @keyframes pvDotIn { from { opacity: 0; } to { opacity: 0.85; } } /* Experience eye shift up and fade */ @keyframes expEyeShiftUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } /* Experience eye reveal from below */ @keyframes expEyeReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Organic signature — variable velocity, pen-pressure feel */ @keyframes pvSig { 0% { stroke-dashoffset: 1; } 30% { stroke-dashoffset: 0.5; } 65% { stroke-dashoffset: 0.12; } 100% { stroke-dashoffset: 0; } } /* Decisive check stroke */ @keyframes pvCheck { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } /* Breathing dot pulse */ @keyframes pvDotPulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.6); opacity: 1; } } /* Deploy bars turn green on completion */ @keyframes deployGreen { from { stroke: currentColor; } to { stroke: #10b981; } } /* Compass needle wobble */ @keyframes discNeedleWobble { 0% { transform: rotate(0deg); } 15% { transform: rotate(-25deg); } 35% { transform: rotate(20deg); } 55% { transform: rotate(-15deg); } 75% { transform: rotate(10deg); } 90% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } /* Scope tuner handle slides */ @keyframes scopeTune1 { 0% { transform: translateY(7px); } 35% { transform: translateY(-9px); } 65% { transform: translateY(3px); } 85% { transform: translateY(-1px); } 100% { transform: translateY(0); } } @keyframes scopeTune2 { 0% { transform: translateY(-8px); } 30% { transform: translateY(6px); } 60% { transform: translateY(-3px); } 80% { transform: translateY(1px); } 100% { transform: translateY(0); } } @keyframes scopeTune3 { 0% { transform: translateY(6px); } 40% { transform: translateY(-7px); } 70% { transform: translateY(2px); } 100% { transform: translateY(0); } } /* ---- DISCOVERY — compass with wobbling needle ---- */ .stage-node.is-active .disc-ring { animation: pvDraw 0.5s 0.08s cubic-bezier(0.16,1,0.3,1) both; } .stage-node.is-active .disc-cardinal { animation: pvDraw 0.3s 0.35s cubic-bezier(0.16,1,0.3,1) both; } .stage-node.is-active .disc-needle { animation: pvDotIn 0.2s 0.5s cubic-bezier(0.34,1.56,0.64,1) both, discNeedleWobble 1.2s 0.7s cubic-bezier(0.34,1.56,0.64,1) both; } /* ---- EXPERIENCE — two-layer eye reveal ---- */ .stage-node.is-active .exp-eye-1 { animation: expEyeShiftUp 0.6s 0.08s cubic-bezier(0.16,1,0.3,1) both; } .stage-node.is-active .exp-eye-2 { animation: expEyeReveal 0.6s 0.4s cubic-bezier(0.34,1.56,0.64,1) both; } /* ---- SCOPE — tuner tracks draw then handles slide into position ---- */ .stage-node.is-active .scope-box-1 { animation: pvDraw 0.3s 0.08s cubic-bezier(0.22,1,0.36,1) both; } .stage-node.is-active .scope-line-1 { animation: pvDraw 0.3s 0.14s cubic-bezier(0.16,1,0.3,1) both, scopeTune1 0.7s 0.4s cubic-bezier(0.22,1,0.36,1) both; } .stage-node.is-active .scope-box-2 { animation: pvDraw 0.3s 0.22s cubic-bezier(0.22,1,0.36,1) both; } .stage-node.is-active .scope-line-2 { animation: pvDraw 0.3s 0.28s cubic-bezier(0.16,1,0.3,1) both, scopeTune2 0.7s 0.55s cubic-bezier(0.22,1,0.36,1) both; } .stage-node.is-active .scope-box-3 { animation: pvDraw 0.3s 0.36s cubic-bezier(0.22,1,0.36,1) both; } .stage-node.is-active .scope-line-3 { animation: pvDraw 0.3s 0.42s cubic-bezier(0.16,1,0.3,1) both, scopeTune3 0.7s 0.7s cubic-bezier(0.22,1,0.36,1) both; } /* ---- COMMIT — organic signature flow ---- */ .stage-node.is-active .commit-sig { animation: pvSig 0.85s 0.45s cubic-bezier(0.16,1,0.3,1) both; } /* ---- DEPLOY — gantt bars with spring-bounce stagger ---- */ .stage-node.is-active .deploy-bar-1 { animation: pvDraw 0.5s 0.1s cubic-bezier(0.34,1.56,0.64,1) both; } .stage-node.is-active .deploy-bar-2 { animation: pvDraw 0.5s 0.28s cubic-bezier(0.34,1.56,0.64,1) both; } .stage-node.is-active .deploy-bar-3 { animation: pvDraw 0.5s 0.46s cubic-bezier(0.34,1.56,0.64,1) both; } /* ---- COLLABORATION SPACE DEPLOY — 6-step scope removal sequence ---- */ /* Trigger these when Deploy stage is active in collab space */ .collab-deploy-viz.is-active .collab-deploy-bar-1 { animation: pvDraw 0.4s 0s cubic-bezier(0.34,1.56,0.64,1) both; } .collab-deploy-viz.is-active .collab-deploy-bar-2 { animation: collabDeployBar2Sequence 3s 0s both; } .collab-deploy-viz.is-active .collab-deploy-bar-3 { animation: collabDeployBar3Sequence 3s 0s both; } .collab-deploy-viz.is-active .collab-deploy-bar-4 { animation: collabDeployBar4Appear 0.4s 1.2s cubic-bezier(0.34,1.56,0.64,1) both; } .collab-deploy-viz.is-active .collab-deploy-bar-5 { animation: collabDeployBar5Appear 0.4s 2.5s cubic-bezier(0.34,1.56,0.64,1) both; } .collab-deploy-viz.is-active .collab-deploy-remove-text { animation: collabDeployRemoveText 3s 0s both; } .collab-deploy-viz.is-active .collab-deploy-schedule-text { animation: collabDeployScheduleText 3s 0s both; } /* (1) Bar 2 draws in, (2) turns red, (3) fades out */ @keyframes collabDeployBar2Sequence { 0% { stroke-dashoffset: 1; stroke: currentColor; opacity: 1; } 13% { stroke-dashoffset: 0; stroke: currentColor; opacity: 1; } 27% { stroke-dashoffset: 0; stroke: var(--alert-red-start); opacity: 1; } 40%, 100% { stroke-dashoffset: 0; stroke: var(--alert-red-end); opacity: 0; } } /* (1) Bar 3 draws in, (3) moves up to position 2 (y=60), (5) moves left */ @keyframes collabDeployBar3Sequence { 0% { stroke-dashoffset: 1; transform: translate(0, 0); } 20% { stroke-dashoffset: 0; transform: translate(0, 0); } 40% { stroke-dashoffset: 0; transform: translate(0, -30px); } 73% { stroke-dashoffset: 0; transform: translate(0, -30px); } 100% { stroke-dashoffset: 0; transform: translate(-20px, -30px); } } /* (3) Bar 4 appears as new bar 3 */ @keyframes collabDeployBar4Appear { 0% { stroke-dashoffset: 1; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } } /* (6) Bar 5 fills the space */ @keyframes collabDeployBar5Appear { 0% { stroke-dashoffset: 1; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } } /* (4) "Out of scope module removed" text */ @keyframes collabDeployRemoveText { 0%, 49% { opacity: 0; } 50%, 66% { opacity: 1; } 67%, 100% { opacity: 0; } } /* (5) "Rescheduling..." text */ @keyframes collabDeployScheduleText { 0%, 66% { opacity: 0; } 67%, 82% { opacity: 1; } 83%, 100% { opacity: 0; } } /* ---- SUCCESS — bug icon dances ---- */ .success-bug-dance { opacity: 0; transform-origin: center center; } .stage-node.is-active .success-bug-dance { animation: bugDanceIn 0.4s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes bugDanceIn { from { opacity: 0; transform: scale(0.3) rotate(-15deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } /* Bug legs jiggle animation */ .stage-node.is-active .bug-legs { transform-origin: 12px 14px; animation: bugLegsJiggle 0.8s ease-in-out infinite; } .stage-node.is-active .bug-legs-top { animation-delay: 0.5s; } .stage-node.is-active .bug-legs-mid { animation-delay: 0.6s; } .stage-node.is-active .bug-legs-bot { animation-delay: 0.7s; } @keyframes bugLegsJiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } 75% { transform: rotate(-1deg); } } @media (prefers-reduced-motion: reduce) { .stage-node-preview { display: none; } } .stage-progress-card { pointer-events: none; position: relative; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--inv-bg-color) 4%, transparent) 0%, color-mix(in srgb, var(--inv-bg-color) 2%, transparent) 100%) !important; backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent) !important; border-radius: 20px !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--inv-bg-color) 5%, transparent), 0 8px 32px color-mix(in srgb, var(--inv-bg-color) 3%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 5%, transparent) !important; z-index: 5; width: clamp(276px, 60%, 380px) !important; padding: clamp(14px, 4%, 22px) !important; transform: scale(1); opacity: 1; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; } .stage-progress-card.is-collapsing { transform: scale(0); opacity: 0; transition: transform 0.3s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.25s ease; } .stage-progress-card.is-expanding { transform: scale(1); opacity: 1; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease 0.05s; } .stage-progress-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, color-mix(in srgb, var(--blurpleblue) 50%, transparent), color-mix(in srgb, var(--purple) 30%, transparent)); opacity: 0.5; z-index: 1; } .stage-progress-bar { display: none; position: relative; overflow: hidden; height: 10px; border-radius: 9999px; } .stage-progress-fill { display: block; height: 100%; width: var(--bar-width, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--blurple), var(--purple)); /* box-shadow: 0 0 10px rgba(120, 115, 245, 0.35); */ transition: width 0.5s ease-in-out; } .stage-progress-card .rounded-full{ margin: 20px 0 0 0 !important; background: none; border: none; font-size: 12px !important; color: var(--inv-bg-color); opacity: 0.8; height: 10px; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .stage-progress-card .rounded-full * { fill: var(--inv-bg-color) !important; } .powered-by{ font-size: 10px !important; color: var(--inv-bg-color); } .stage-progress-card svg{ margin-right: -5px !important; } .stage-participants { margin-top: 0.5rem; } .participants-label { font-size: 8px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5; margin-bottom: 0.25rem; font-weight: 600; } .participants-grid { display: flex; gap: 0.5rem; justify-content: center; align-items: flex-start; } .participant-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; overflow: visible; } .participant-side-label { font-size: 7px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.4; font-weight: 600; text-align: left; } .participant-chips { display: flex; flex-direction: column; gap: 2px; align-items: stretch; } .participant-chip { display: flex; align-items: center; gap: 5px; padding: 4px 7px; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 6px; font-size: 8px; font-weight: 500; letter-spacing: 0.01em; color: var(--inv-bg-color); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent); opacity: 0.75; box-shadow: 0 1px 4px color-mix(in srgb, var(--inv-bg-color) 3%, transparent), inset 0 0.5px 0 color-mix(in srgb, var(--inv-bg-color) 3%, transparent); transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .participant-chip.is-accent { opacity: 0.75; } .participant-avatar { width: 12px; height: 12px; border-radius: 50%; background: var(--inv-bg-color); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--main-bg-color); font-size: 4.5px; flex-shrink: 0; letter-spacing: 0.02em; line-height: 1; padding-top: 0; } /* Varying shades for avatars - purple, blurple, and pink */ .participant-chip[data-color-index="0"] .participant-avatar { background: linear-gradient(135deg, rgba(139, 92, 246, 0.7), rgba(124, 58, 237, 0.7)); color: #fff; box-shadow: 0 0 8px rgba(139, 92, 246, 0.15); } .participant-chip[data-color-index="1"] .participant-avatar { background: linear-gradient(135deg, rgba(99, 102, 241, 0.7), rgba(79, 70, 229, 0.7)); color: #fff; box-shadow: 0 0 8px rgba(99, 102, 241, 0.15); } .participant-chip[data-color-index="2"] .participant-avatar { background: linear-gradient(135deg, rgba(168, 85, 247, 0.7), rgba(147, 51, 234, 0.7)); color: #fff; box-shadow: 0 0 8px rgba(168, 85, 247, 0.15); } .participant-chip[data-color-index="3"] .participant-avatar { background: linear-gradient(135deg, rgba(236, 72, 153, 0.7), rgba(219, 39, 119, 0.7)); color: #fff; box-shadow: 0 0 8px rgba(236, 72, 153, 0.15); } .participant-chip[data-color-index="4"] .participant-avatar { background: linear-gradient(135deg, rgba(59, 130, 246, 0.7), rgba(37, 99, 235, 0.7)); color: #fff; box-shadow: 0 0 8px rgba(59, 130, 246, 0.15); } .participant-chip[data-color-index="5"] .participant-avatar { background: linear-gradient(135deg, rgba(244, 114, 182, 0.7), rgba(225, 29, 155, 0.7)); color: #fff; box-shadow: 0 0 8px rgba(244, 114, 182, 0.15); } .participant-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .participant-name { font-size: 8px; font-weight: 500; color: var(--inv-bg-color); opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; } .participant-title { font-size: 7px; color: var(--inv-bg-color); opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; font-weight: 500; letter-spacing: 0.02em; } .participant-chip.is-entering { animation: chipEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .participant-chip.is-leaving { animation: chipLeave 0.2s cubic-bezier(0.4, 0, 0.6, 1) both; } @keyframes chipEnter { from { opacity: 0; transform: scale(0.3); } to { opacity: 0.75; transform: scale(1); } } @keyframes chipLeave { from { opacity: 0.75; transform: scale(1); } to { opacity: 0; transform: scale(0.5); } } .participant-chip.is-accent.is-entering { animation: chipEnterAccent 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes chipEnterAccent { from { opacity: 0; transform: scale(0.3); } to { opacity: 0.75; transform: scale(1); } } .stage-bottom-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; } /* Collaboration Space */ .stage-collaboration { flex: 66; min-width: 0; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--inv-bg-color) 2%, transparent) 0%, color-mix(in srgb, var(--inv-bg-color) 1%, transparent) 100%); border-radius: 8px; } .collaboration-label { font-size: 7px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.4; margin-bottom: 3px !important; font-weight: 600; text-align: left; } .collaboration-items { display: flex; flex-direction: column; gap: 3px; } .collaboration-items:has(.scope-toggle) { min-height: 110px; } .collaboration-item:nth-child(1) { z-index: 3; } .collaboration-item:nth-child(2) { z-index: 2; } .collaboration-item:nth-child(3) { z-index: 1; } .collaboration-item { height: 32px; padding: 0 10px 0 22px; box-sizing: border-box; display: flex; align-items: center; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); box-shadow: 0 1px 4px color-mix(in srgb, var(--inv-bg-color) 3%, transparent), inset 0 0.5px 0 color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border-radius: 6px; font-size: 9px; color: var(--inv-bg-color); opacity: 0.8; text-align: left; line-height: 1; position: relative; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), margin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .collaboration-item::before { content: ''; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); opacity: 0.6; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .collaboration-item.is-working { overflow: visible; white-space: normal; line-height: 1.3; align-items: flex-start; padding-top: 5px; padding-bottom: 4px; transform: translateY(-3px); } /* Utility: hide elements without inline .style */ .is-hidden { display: none !important; } .is-faded { opacity: 0; transition: opacity 0.3s ease; } /* Discovery: typing dots via JS element instead of ::before */ .collaboration-item.discovery-item::before { display: none; } .discovery-dots { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 900; letter-spacing: 2px; color: var(--lightblue); width: 20px; opacity: 0.3; transition: all 0.2s ease; } .collaboration-item.discovery-item.is-working .discovery-dots { color: var(--lightblue); opacity: 0.7; } .collaboration-item.discovery-item.is-completed .discovery-dots { color: #22c55e; opacity: 1; font-size: 13px; font-weight: 700; letter-spacing: 0; animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .discovery-label { transition: opacity 0.2s ease; } .discovery-label.is-fading { opacity: 0; } .discovery-label.is-answered { opacity: 1; font-weight: 600; } /* Experience: calendar → pulsing dot → green check */ .collaboration-item.experience-meeting.is-working .meeting-icon { border-radius: 50%; background: var(--lightblue); box-shadow: 0 0 6px color-mix(in srgb, var(--lightblue) 60%, transparent); opacity: 1; animation: livePulse 1s ease-in-out infinite; } .collaboration-item.experience-meeting.is-working .meeting-icon svg { display: none; } .collaboration-item.experience-meeting.is-working::before { display: none; } .collaboration-item.experience-meeting.is-completed .meeting-icon { border-radius: 50%; background: #22c55e; box-shadow: none; opacity: 1; animation: none; } .collaboration-item.experience-meeting.is-completed .meeting-icon svg { display: none; } .collaboration-item.experience-meeting.is-completed .meeting-icon::after { content: '✓'; font-size: 7px; font-weight: 900; color: #fff; } @keyframes livePulse { 0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); } 50% { opacity: 0.5; box-shadow: 0 0 10px rgba(239, 68, 68, 0.8); } } /* Default spinner (fallback) */ .collaboration-item.is-working::before { width: 10px; height: 10px; background: none; border: 2px solid color-mix(in srgb, var(--lightblue) 30%, transparent); border-top-color: var(--lightblue); box-shadow: none; opacity: 1; animation: spinWork 0.6s linear infinite; } @keyframes spinWork { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } } .collab-activity { position: absolute; left: 22px; top: calc(71% - 4px); z-index: 10; display: flex; align-items: center; gap: 2px; font-size: 8px; font-weight: 700; color: var(--lightblue); opacity: 0; transition: opacity 0.25s ease; letter-spacing: 0.02em; max-width: 120px; } .collab-activity.is-visible { opacity: 1; } .activity-text { transition: opacity 0.15s ease, transform 0.15s ease; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .activity-text.is-swapping { opacity: 0; transform: translateY(-2px); } .activity-dots::after { content: '...'; display: inline-block; animation: typingDots 1s steps(4, end) infinite; width: 0; overflow: hidden; vertical-align: bottom; } @keyframes typingDots { 0% { width: 0; } 100% { width: 12px; } } .ai-working-indicator { display: flex; align-items: center; gap: 8px; max-width: 280px; } .ai-working-text { font-size: 11px; font-weight: 800; letter-spacing: 0.03em; color: var(--inv-bg-color); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .collaboration-item.is-completed::before { content: '✓'; width: auto; height: auto; border: none; border-radius: 0; background: none; box-shadow: none; font-size: 13px; font-weight: 700; line-height: 1; color: #22c55e; opacity: 1; animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes checkPop { 0% { transform: translateY(-50%) scale(0); opacity: 0; } 50% { transform: translateY(-50%) scale(1.4); opacity: 1; } 100% { transform: translateY(-50%) scale(1); opacity: 1; } } .collaboration-item:hover { opacity: 0.9; border-color: color-mix(in srgb, var(--inv-bg-color) 10%, transparent); } .collaboration-item.is-entering { animation: itemEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .collaboration-item.is-leaving { animation: itemLeave 0.2s cubic-bezier(0.4, 0, 0.6, 1) both; } @keyframes itemEnter { from { opacity: 0; transform: scale(0.3); } to { opacity: 0.8; transform: scale(1); } } /* Scope toggles in collaboration space */ .collaboration-item.scope-toggle { padding-left: 36px; } .collaboration-item.scope-toggle::before { display: none; } .scope-toggle-switch { width: 24px; height: 12px; background: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); border-radius: 8px; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); transition: background 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); flex-shrink: 0; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 20%, transparent); } .scope-toggle-switch::before { content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: color-mix(in srgb, var(--inv-bg-color) 60%, transparent); border-radius: 50%; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 0.5px 2px color-mix(in srgb, var(--inv-bg-color) 10%, transparent); } .scope-toggle-switch.is-on { background: linear-gradient(90deg, var(--blurple), var(--purple)); border-color: var(--blurple); } .scope-toggle-switch.is-on::before { left: calc(100% - 8px); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .scope-toggle-label { font-size: 9px; color: var(--inv-bg-color); opacity: 0.8; flex: 1; font-weight: 500; letter-spacing: 0.01em; } .collaboration-item.scope-toggle.is-fading-out { opacity: 0; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden; } /* Scope agent suggestion */ .collaboration-item.scope-agent-suggestion { padding-left: 12px; gap: 8px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.08)); border: 1px solid rgba(139, 92, 246, 0.2); opacity: 0; transform: translateY(15px); transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .collaboration-item.scope-agent-suggestion::before { display: none; } .collaboration-item.scope-agent-suggestion.is-entering { opacity: 1; transform: translateY(0); } .scope-agent-icon { width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .scope-agent-icon svg { width: 100%; height: 100%; stroke: var(--blurple); opacity: 0.9; } .scope-agent-text { font-size: 8.5px; color: var(--blurple); font-weight: 600; letter-spacing: 0.02em; flex: 1; } /* Deploy three-row auto-scheduling - inherits all from .collaboration-item */ .collaboration-item.deploy-gantt { padding-left: 12px; position: relative; } .collaboration-item.deploy-gantt::before { display: none; } .deploy-gantt-timeline { width: 100%; height: 8px; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border-radius: 4px; position: relative; } .deploy-gantt-bar { position: absolute; top: 0; height: 100%; background: linear-gradient(90deg, var(--blurple), var(--lightblue)); border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Deploy bar positions */ .deploy-bar-1 { left: 0%; width: 45%; } .deploy-bar-2 { left: 30%; width: 50%; } .deploy-bar-3 { left: 55%; width: 25%; } .deploy-bar-3-rescheduled { left: 25%; width: 35%; } .deploy-bar-4 { left: 50%; width: 40%; } .deploy-gantt-bar.is-animating { transform: scaleX(1); } .deploy-gantt-bar.is-collapsing { transform: scaleX(0); transition: transform 0.35s cubic-bezier(0.55, 0, 1, 0.45); } .deploy-gantt-bar.is-error { background: linear-gradient(90deg, var(--alert-red-start), var(--alert-red-end)); animation: errorPulse 0.4s ease-out; } .deploy-gantt-bar.is-rescheduled { left: 45%; transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .deploy-gantt-relative { position: relative; } .deploy-text-overlay { position: absolute; left: 0; width: 100%; top: 50%; transform: translateY(-50%); text-align: center; z-index: 10; } /* Scope label fade */ .scope-toggle-label { transition: opacity 0.25s ease; } .scope-toggle-label.is-fading { opacity: 0; } /* Commit icon complete */ .commit-row-icon.is-complete { opacity: 1; color: #22c55e; } .commit-row-icon.is-complete svg { stroke: #22c55e; } /* Deploy sequence row (row 3) */ .collaboration-item.deploy-sequence-row { position: relative; padding: 10px 12px; min-height: 38px; display: flex; align-items: center; } .collaboration-item.deploy-sequence-row::before { display: none; } .deploy-sequence-bar { position: absolute; height: 8px; background: linear-gradient(90deg, var(--blurple), var(--lightblue)); border-radius: 4px; opacity: 0; transform: scale(0.9); transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .deploy-sequence-bar.is-visible { opacity: 1; transform: scale(1); } .deploy-sequence-bar.is-error { background: linear-gradient(90deg, var(--alert-red-start), var(--alert-red-end)); animation: errorPulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes errorPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } } .deploy-sequence-text { font-size: 8px; color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent); font-weight: 500; text-align: center; width: 100%; opacity: 0; transform: translateY(2px); transition: opacity 0.3s ease, transform 0.3s ease; } .deploy-sequence-text.is-visible { opacity: 1; transform: translateY(0); } .deploy-sequence-text.deploy-rescheduling { color: var(--blurple); font-weight: 600; } /* Success: Bug resolution with state transitions */ .collaboration-item.success-resolve { padding-left: 4px; } .collaboration-item.success-resolve::before { display: none; } .success-state-container { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 18px; } .success-state { position: absolute; left: 0; display: flex; align-items: center; gap: 8px; opacity: 0; transform: scale(0.8); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .success-state.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; } .success-state.is-hidden { opacity: 0; transform: scale(0.8); pointer-events: none; } /* Bug state */ .success-bug { display: flex; align-items: center; gap: 8px; } .success-bug svg { width: 10px; height: 10px; flex-shrink: 0; stroke: var(--inv-bg-color); opacity: 0.7; } .success-bug-text { font-size: 9px; color: var(--inv-bg-color); opacity: 0.7; font-weight: 500; white-space: nowrap; } /* Working state */ .success-working-state { display: flex; align-items: center; gap: 8px; } .success-resolver { width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .success-resolver.auto-solve svg, .success-resolver.sync svg, .success-resolver.team-respond svg { width: 100%; height: 100%; stroke: var(--blurple); opacity: 0.7; } .success-resolver.team-member { min-width: 18px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--blurple)); font-size: 7px; font-weight: 800; color: #fff; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1; } .success-status-text { font-size: 9px; color: var(--inv-bg-color); opacity: 0.7; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; } /* Check resolved state */ .success-check-state { display: flex; align-items: center; gap: 8px; } .success-check-icon { width: 14px; height: 14px; flex-shrink: 0; } .success-check-icon svg { width: 100%; height: 100%; stroke: #22c55e; stroke-width: 2.5; } .success-resolved-text { font-size: 9px; color: #22c55e; font-weight: 600; letter-spacing: 0.01em; } /* Discovery conversation with Smart Conversation agent */ .collaboration-item.discovery-convo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; } .collaboration-item.discovery-convo::before { display: none; } .discovery-participant { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--blurple)); flex-shrink: 0; position: relative; } .discovery-participant::after { content: ''; position: absolute; bottom: -2px; right: -2px; width: 6px; height: 6px; background: var(--inv-bg-color); border-radius: 50%; opacity: 0; transform: scale(0); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .discovery-participant.is-talking::after { opacity: 0.8; transform: scale(1); animation: pulse 1.5s ease-in-out infinite; } .discovery-agent { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; } .discovery-agent svg { width: 100%; height: 100%; stroke: var(--blurple); opacity: 0.7; } .discovery-agent.is-working svg { animation: sparkle 2s ease-in-out infinite; } .discovery-context { flex: 1; display: flex; gap: 3px; align-items: center; justify-content: flex-end; } .discovery-context-bar { width: 18%; height: 6px; background: color-mix(in srgb, var(--inv-bg-color) 10%, transparent); border-radius: 3px; position: relative; overflow: hidden; } .discovery-context-bar::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0; background: linear-gradient(90deg, var(--blurple), var(--purple)); border-radius: 3px; transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .discovery-context-bar.is-filled::after { width: 100%; } @keyframes pulse { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } } @keyframes sparkle { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } /* Commit document signing with e-sign option */ /* Commit: Single document with dual signatures */ .collaboration-item.commit-document-box { display: flex; align-items: center; gap: 6px; padding: 6px 10px; height: auto; max-height: 32px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--inv-bg-color) 4%, transparent), color-mix(in srgb, var(--inv-bg-color) 2%, transparent)); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } .collaboration-item.commit-document-box::before { display: none; } .commit-doc-icon { width: 16px; height: 16px; flex-shrink: 0; } .commit-doc-icon svg { width: 100%; height: 100%; stroke: var(--inv-bg-color); opacity: 0.7; } .commit-signatures { flex: 1; min-width: 0; display: flex; gap: 4px; align-items: center; overflow: hidden; } .commit-signature { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; } .commit-signer-badge { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--blurple)); display: flex; align-items: center; justify-content: center; font-size: 5px; font-weight: 700; color: #fff; letter-spacing: -0.02em; flex-shrink: 0; } .commit-signature.seller .commit-signer-badge { background: linear-gradient(135deg, var(--blurple), var(--lightblue)); } .commit-signature-line { flex: 1; height: 6px; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border-radius: 3px; position: relative; overflow: hidden; } .commit-signature-line::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0; background: linear-gradient(90deg, var(--blurple), var(--purple)); border-radius: 3px; transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } .commit-signature-line.is-signing::after { width: 100%; } /* ======================================== COMMIT — Minimal Doc + Avatar + Signature ======================================== */ /* Row 1: Doc row */ .commit-doc-row { gap: 10px; } .commit-doc-row::before { display: none; } .commit-row-icon { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; } .commit-row-icon svg { width: 100%; height: 100%; stroke: var(--inv-bg-color); } .commit-row-label { font-size: 10px; font-weight: 500; color: var(--inv-bg-color); opacity: 0.8; transition: opacity 0.3s ease; } .commit-row-label.is-fading { opacity: 0; } .commit-row-label.is-complete { opacity: 1; color: #22c55e; font-weight: 600; } /* Row 2 & 3: Signature rows */ .commit-sig-row { overflow: hidden; } .commit-sig-row::before { display: none; } .commit-sig-avatar { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--avatar-color, var(--blurple)); display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 800; color: #fff; letter-spacing: -0.02em; flex-shrink: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .commit-sig-avatar.is-signed { background: #22c55e; font-size: 8px; font-weight: 900; letter-spacing: 0; } .commit-signer-name { font-size: 10px; font-weight: 500; color: var(--inv-bg-color); opacity: 0.8; transition: opacity 0.3s ease; } /* Signature SVG overlay — draws over the name */ .commit-sig-overlay { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); width: calc(100% - 40px); height: 20px; overflow: hidden; pointer-events: none; } .commit-sig-path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: opacity 0.2s ease; } /* Fade name out when signing, signature draws over */ .commit-sig-row.is-signing .commit-signer-name { opacity: 0; } .commit-sig-row.is-signing .commit-sig-path { opacity: 1; } .commit-sig-path.is-drawing { animation: commit-sig-draw 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; } @keyframes commit-sig-draw { from { stroke-dashoffset: 1; opacity: 0; } 10% { opacity: 0.3; } to { stroke-dashoffset: 0; opacity: 0.9; } } .commit-sig-row.is-signed .commit-sig-path { opacity: 0.8; } .commit-sig-path.is-complete { stroke: #22c55e; opacity: 1; transition: stroke 0.4s ease, opacity 0.3s ease; } /* ── Desktop typography scale for navigator ring ── */ @media (min-width: 768px) { /* Stage node numbers */ .stage-node-index { font-size: 1.2rem; } /* Section labels — unified */ .participant-side-label, .collaboration-label, .agents-label { font-size: 8px; letter-spacing: 0.12em; } /* Participant chips */ .participant-chip { font-size: 9px; padding: 5px 9px; } .participant-avatar { font-size: 5px; width: 16px; height: 16px; } .participant-name { font-size: 9px; } /* Collaboration items */ .collaboration-item { height: 36px; font-size: 10px; border-radius: 8px; } /* Activity indicator */ .collab-activity { font-size: 9px; } /* Commit rows */ .commit-row-label, .commit-signer-name { font-size: 11px; } /* Agent chips */ .agent-chip-label { font-size: 9px; } /* Footer items */ .stage-footer-item { font-size: 8.5px; letter-spacing: 0.1em; } /* Nav counter */ .ring-nav-counter { font-size: 12px; } /* Powered-by */ .powered-by { font-size: 11px; } /* Internal spacing */ .participants-grid { gap: 0.75rem; } .participants-label { margin-bottom: 0.4rem; } .participant-side { gap: 0.35rem; } .participant-chips { gap: 3px; } .collaboration-items { gap: 4px; } .stage-footer { margin-top: 1rem; padding-top: 1rem; } } @keyframes itemLeave { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(0.5); } } /* Experience meeting rows (same layout as Discovery) */ .collaboration-item.experience-meeting::before { display: none; } .meeting-icon { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; opacity: 0.6; transition: all 0.3s ease; } .meeting-icon svg { width: 100%; height: 100%; stroke: var(--blurple); } /* AI Agents */ .stage-agents { flex: 34; min-width: 0; padding: 0rem 0.5rem 0.5rem 0.5rem; } .agents-label { font-size: 7px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.4; margin-bottom: 3px !important; font-weight: 600; text-align: right; } .agent-chips { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 5px !important; align-items: center !important; justify-content: flex-end !important; padding: 0 !important; margin: 0 !important; } .agent-chip { display: flex !important; align-items: center !important; gap: 5px !important; width: auto !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; max-width: none !important; max-height: 26px !important; padding: 0 6px 0 4px !important; margin: 0 !important; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent) !important; border-radius: 8px !important; color: var(--inv-bg-color) !important; opacity: 0.75; cursor: default; overflow: hidden !important; box-sizing: border-box !important; box-shadow: 0 1px 4px color-mix(in srgb, var(--inv-bg-color) 3%, transparent), inset 0 0.5px 0 color-mix(in srgb, var(--inv-bg-color) 3%, transparent); transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .agent-chip:hover { opacity: 1; transform: translateY(-1px); border-color: color-mix(in srgb, var(--purple) 20%, transparent) !important; } .agent-chip-icon { flex-shrink: 0 !important; width: 14px !important; height: 14px !important; min-width: 14px !important; min-height: 14px !important; padding: 0 !important; margin: 0 !important; opacity: 0.7; line-height: 0 !important; } .agent-chip-icon svg { display: block !important; width: 14px !important; height: 14px !important; stroke: var(--inv-bg-color) !important; flex-shrink: 0 !important; } .agent-chip-label { display: block !important; font-size: 8px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; opacity: 0.7; } /* Navigate section: show icon + label on desktop, icon-only on mobile */ #navigate .agent-knowledge-bar { display: none !important; } #navigate .agent-chip { width: auto !important; max-width: none !important; padding: 0 6px 0 4px !important; gap: 5px !important; } #navigate .agent-chip-label { display: block !important; font-size: 8px !important; font-weight: 500 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; opacity: 0.7; } /* Mobile: icon-only agent chips */ @media (max-width: 768px) { .agent-chip { width: 26px !important; max-width: 26px !important; padding: 0 !important; justify-content: center !important; } .agent-chip-label { display: none !important; width: 0 !important; height: 0 !important; } } /* Stage Footer */ .stage-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .stage-footer-item { font-size: 7.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--inv-bg-color); opacity: 0.6; font-weight: 500; cursor: pointer; transition: opacity 0.2s ease; white-space: nowrap; } .stage-footer-item:hover { opacity: 0.85; } .agent-knowledge-bar { width: 100%; height: 2px; background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border-radius: 1px; margin-top: 4px; overflow: hidden; } .agent-knowledge-fill { height: 100%; width: var(--bar-width, 0%); background: linear-gradient(90deg, var(--blurple), var(--purple)); border-radius: 1px; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .agent-intel-status { display: flex; align-items: center; gap: 4px; width: 100%; margin-top: 3px; font-size: 8px; font-weight: 500; color: var(--inv-bg-color); opacity: 0; letter-spacing: 0.02em; transition: opacity 0.3s ease; } .agent-intel-status.is-entering { animation: none; opacity: 0.45; } .intel-label { opacity: 0.8; } .intel-sparkles { color: color-mix(in srgb, var(--blurple) 80%, var(--inv-bg-color)); letter-spacing: 1px; font-size: 7px; } .agent-chip.is-entering { animation: agentEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .agent-chip.is-leaving { animation: agentLeave 0.2s cubic-bezier(0.4, 0, 0.6, 1) both; } @keyframes agentEnter { from { opacity: 0; transform: scale(0.3); } to { opacity: 0.95; transform: scale(1); } } @keyframes agentLeave { from { opacity: 0.95; transform: scale(1); } to { opacity: 0; transform: scale(0.5); } } *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: } /* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */ ::after, ::before { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; color: var(--white); } ::after, ::before { --tw-content: '' } :host, html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; overflow-x: clip; } body { margin: 0; line-height: inherit; overflow-x: clip; } hr { height: 0; color: inherit; border-top-width: 1px } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit } a { color: inherit; text-decoration: inherit } b, strong { font-weight: bolder } code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -.25em } sup { top: -.5em } table { text-indent: 0; border-color: inherit; border-collapse: collapse } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0 } button, select { text-transform: none } button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) { -webkit-appearance: button; background-color: transparent; background-image: none } :-moz-focusring { outline: auto } :-moz-ui-invalid { box-shadow: none } progress { vertical-align: baseline } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto } [type=search] { -webkit-appearance: textfield; outline-offset: -2px } ::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } summary { display: list-item } blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0 } fieldset { margin: 0; padding: 0 } legend { padding: 0 } menu, ol, ul { list-style: none; margin: 0; padding: 0 } dialog { padding: 0 } textarea { resize: vertical } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af } [role=button], button { cursor: pointer } :disabled { cursor: default }.hero-wrapper .blurpleButtonAlt, .surface-beat--navigate-wrapper .blurpleButtonAlt{ border: 1px solid var(--blurple) !important; color: var(--blurple) !important; background: var(--main-bg-color) !important; text-decoration: none !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle } img, video { max-width: 100%; height: auto } [hidden]:where(:not([hidden=until-found])) { display: none } .fixed { position: fixed } .absolute { position: absolute } .relative { position: relative } .inset-10 { inset: 2.5rem } .top-0 { top: 0px } .z-10 { z-index: 10 } .z-50 { z-index: 50 } .order-1 { order: 1 } .order-2 { order: 2 } .mx-auto { margin-left: auto; margin-right: auto } .mb-1 { margin-bottom: 0.25rem } .mb-10 { margin-bottom: 2.5rem } .mb-16 { margin-bottom: 4rem } .mb-2 { margin-bottom: 0.5rem } .mb-3 { margin-bottom: 0.75rem } .mb-4 { margin-bottom: 1rem } .mb-6 { margin-bottom: 1.5rem } .mb-8 { margin-bottom: 2rem } .mt-4 { margin-top: 1rem } .flex { display: flex } .inline-flex { display: inline-flex } .grid { display: grid } .hidden { display: none } .aspect-square { aspect-ratio: 1 / 1 } .h-1\.5 { height: 0.375rem } .h-10 { height: 2.5rem } .h-12 { height: 3rem } .h-2 { height: 0.5rem } .h-20 { height: 5rem } .h-3 { height: 0.75rem } .h-4 { height: 1rem } .h-5 { height: 1.25rem } .h-8 { height: 2rem } .h-full { height: 100% } .w-1\/2 { width: 50% } .w-10 { width: 2.5rem } .w-12 { width: 3rem } .w-2\/3 { width: 66.666667% } .w-24 { width: 6rem } .w-3 { width: 0.75rem } .w-3\/4 { width: 75% } .w-4 { width: 1rem } .w-5 { width: 1.25rem } .w-64 { width: 16rem } .w-8 { width: 2rem } .w-full { width: 100% } .max-w-3xl { max-width: 48rem } .max-w-7xl { max-width: 80rem } .max-w-xl { max-width: 36rem } .flex-1 { flex: 1 1 0% } .shrink-0 { flex-shrink: 0 } .translate-y-10 { --tw-translate-y: 2.5rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .translate-y-0 { --tw-translate-y: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } @keyframes pulse { 50% { opacity: .5 } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .flex-col { flex-direction: column } .flex-wrap { flex-wrap: wrap } .items-center { align-items: center } .justify-center { justify-content: center } .justify-between { justify-content: space-between } .gap-12 { gap: 3rem } .gap-2 { gap: 0.5rem } .gap-20 { gap: 5rem } .gap-3 { gap: 0.75rem } .gap-4 { gap: 1rem } .gap-8 { gap: 2rem } .space-y-2> :not([hidden])~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)) } .space-y-4> :not([hidden])~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)) } .space-y-6> :not([hidden])~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)) } .overflow-hidden { overflow: hidden } .scroll-smooth { scroll-behavior: smooth } .rounded { border-radius: 0.25rem } .rounded-2xl { border-radius: 1rem } .rounded-3xl { border-radius: 1.5rem } .rounded-full { border-radius: 9999px } .rounded-lg { border-radius: 0.5rem } .rounded-xl { border-radius: 0.75rem } .border { border-width: 1px } .border-2 { border-width: 2px } .border-y { border-top-width: 1px; border-bottom-width: 1px } .border-b { border-bottom-width: 1px } .border-t { border-top-width: 1px } .border-dashed { border-style: dashed } .border-indigo-500 { --tw-border-opacity: 1; border-color: rgb(99 102 241 / var(--tw-border-opacity, 1)) } .border-indigo-500\/20 { border-color: rgb(99 102 241 / 0.2) } .border-indigo-500\/30 { border-color: rgb(99 102 241 / 0.3) } .border-purple-500\/30 { border-color: rgb(168 85 247 / 0.3) } .border-white\/10 { border-color: rgb(255 255 255 / 0.1) } .border-white\/5 { border-color: rgb(255 255 255 / 0.05) } .border-t-transparent { border-top-color: transparent } .bg-\[\#050505\] { --tw-bg-opacity: 1; background-color: rgb(5 5 5 / var(--tw-bg-opacity, 1)) } .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)) } .bg-black\/40 { background-color: rgb(0 0 0 / 0.4) } .bg-black\/50 { background-color: rgb(0 0 0 / 0.5) } .bg-indigo-500 { --tw-bg-opacity: 1; background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1)) } .bg-indigo-500\/10 { background-color: rgb(99 102 241 / 0.1) } .bg-indigo-500\/20 { background-color: rgb(99 102 241 / 0.2) } .bg-indigo-600 { background-color: var(--purple); } .bg-indigo-900\/10 { background-color: rgb(49 46 129 / 0.1) } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) } .bg-white\/10 { background-color: rgb(255 255 255 / 0.1) } .bg-white\/20 { background-color: rgb(255 255 255 / 0.2) } .bg-white\/5 { background-color: rgb(255 255 255 / 0.05) } .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)) } .from-indigo-400 { --tw-gradient-from: var(--purple) var(--tw-gradient-from-position); --tw-gradient-to: rgb(129 140 248 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) } .to-purple-400 { --tw-gradient-to: var(--blurple) var(--tw-gradient-to-position) } .bg-clip-text { -webkit-background-clip: text; background-clip: text } .p-2 { padding: 0.5rem } .p-3 { padding: 0.75rem } .p-4 { padding: 1rem } .p-6 { padding: 1.5rem } .p-8 { padding: 2rem } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem } .px-8 { padding-left: 2rem; padding-right: 2rem } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem } .py-12 { padding-top: 3rem; padding-bottom: 3rem } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem } .py-16 { padding-top: 4rem; padding-bottom: 4rem } .py-24 { padding-top: 6rem; padding-bottom: 6rem } .py-4 { padding-top: 1rem; padding-bottom: 1rem } .pb-20 { padding-bottom: 5rem } .pt-2 { padding-top: 0.5rem } .pt-40 { padding-top: 10rem } .text-center { text-align: center } .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace } .text-2xl { font-size: 1.5rem; line-height: 2rem } .text-4xl { font-size: 2.25rem; line-height: 2.5rem } .text-3xl { font-size: 1.75rem; line-height: 2.5rem } .text-6xl { font-size: 3.75rem; line-height: 1 } .text-\[10px\] { font-size: 10px } .text-lg { font-size: 1.125rem; line-height: 1.75rem } .text-sm { font-size: 0.875rem; line-height: 1.25rem } .text-xl { font-size: 1.25rem; line-height: 1.75rem } .text-xs { font-size: 0.75rem; line-height: 1rem } .font-black { font-weight: 900 } .font-bold { font-weight: 600 } .font-extrabold { font-weight: 800 } .font-medium { font-weight: 500 } .uppercase { text-transform: uppercase } .italic { font-style: italic } .leading-relaxed { line-height: 1.625 } .leading-tight { line-height: 1.25 } .tracking-tight { letter-spacing: -0.025em } .tracking-tighter { letter-spacing: -0.05em } .tracking-widest { letter-spacing: 0.1em } .text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)) } .text-blue-400 { --tw-text-opacity: 1; color: rgb(96 165 250 / var(--tw-text-opacity, 1)) } .text-blue-500 { --tw-text-opacity: 1; color: rgb(59 130 246 / var(--tw-text-opacity, 1)) } .text-emerald-400 { --tw-text-opacity: 1; color: rgb(52 211 153 / var(--tw-text-opacity, 1)) } .text-emerald-500 { --tw-text-opacity: 1; color: rgb(16 185 129 / var(--tw-text-opacity, 1)) } .text-indigo-400 { color: var(--inv-bg-color) !important; } .text-indigo-500 { --tw-text-opacity: 1; color: rgb(99 102 241 / var(--tw-text-opacity, 1)) } .text-purple-400 { --tw-text-opacity: 1; color: rgb(192 132 252 / var(--tw-text-opacity, 1)) } .text-purple-500 { --tw-text-opacity: 1; color: rgb(168 85 247 / var(--tw-text-opacity, 1)) } .text-slate-300 { --tw-text-opacity: 1; color: rgb(203 213 225 / var(--tw-text-opacity, 1)) } .text-slate-400 { opacity: 0.8; color: var(--inv-bg-color); } .text-slate-500 { --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)) } .text-slate-600 { --tw-text-opacity: 1; color: rgb(71 85 105 / var(--tw-text-opacity, 1)) } .text-transparent { color: transparent } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)) } .opacity-0 { opacity: 0 } .opacity-100 { opacity: 1 } .shadow-xl { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .shadow-indigo-500\/20 { --tw-shadow-color: rgb(99 102 241 / 0.2); --tw-shadow: var(--tw-shadow-colored) } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms } .transition-colors { transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms } .duration-1000 { transition-duration: 1000ms } .hoverScale105:hover{ scale: 1.05; } .desc-text-hero{ } .hover\:bg-indigo-500:hover { --tw-bg-opacity: 1; background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1)); scale:1.05 } .hover\:bg-white\/10:hover { background-color: rgb(255 255 255 / 0.1) } .hover\:text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)) } .md\:text-7xl{ font-size: 3rem !important; } @media (min-width: 768px) { .md\:flex { display: flex } .md\:hidden { display: none } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } .md\:flex-row { flex-direction: row } .md\:text-7xl { font-size: 3.5rem !important; line-height: 1 } } @media (min-width: 1300px) { .md\:text-7xl { font-size: 3rem !important; line-height: 1 } } .md\:text-5xl { font-size: 2.5rem !important; line-height: 1 } @media (min-width:1450px) { .md\:text-7xl { font-size: 4.5rem !important; line-height: 1 } .md\:text-5xl { font-size: 3rem !important; line-height: 1 } } @media (min-width: 1024px) { .md\:text-5xl { font-size: 3rem !important; line-height: 1 } .lg\:order-1 { order: 1 } .lg\:order-2 { order: 2 } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) } } /* Stacked hero layout — mobile/tablet only */ @media (max-width: 1249px) {.hero.particles .hero-wrapper, .surface-beat--navigate.particles .surface-beat--navigate-wrapper{ display: flex !important; flex-direction: column !important; align-items: center !important; padding-top: 90px !important; gap: 44px !important; }.hero-pills, .surface-beat--navigate-pills{ display: flex; justify-content: center; } h1, p { text-align: center; }.hero .reveal-from-top, .surface-beat--navigate .reveal-from-top{ display: flex; flex-direction: column; align-items: center; text-align: center; } .flex.flex-wrap.gap-4{ justify-content: center; }.hero-kicker, .surface-beat--navigate-kicker{ width: 100% !important; justify-content: center !important; } /* ---- Mobile hero — vertical rhythm ---- */.hero h1.mb-6, .surface-beat--navigate h1.mb-6{ margin-bottom: 0.6rem !important; }.hero .hero-kicker, .surface-beat--navigate .surface-beat--navigate-kicker{ display: flex; align-items: center; gap: 0.45rem; width: fit-content !important; background: none; border: none; padding: 0; box-shadow: none; margin-left: auto; margin-right: auto; margin-bottom: 1.75rem; }.hero .hero-kicker-text, .surface-beat--navigate .surface-beat--navigate-kicker-text{ flex-direction: row; align-items: baseline; gap: 0.35rem; }.hero .hero-kicker-icon, .surface-beat--navigate .surface-beat--navigate-kicker-icon{ width: 18px; height: 18px; margin-right: 0; margin-top: 0; opacity: 0.85; }.hero .hero-kicker-prefix, .surface-beat--navigate .surface-beat--navigate-kicker-prefix{ font-size: 0.7rem; letter-spacing: 0.14em; }.hero .desc-text-hero, .surface-beat--navigate .desc-text-hero{ line-height: 1.7; letter-spacing: 0.015em; margin-bottom: 2rem !important; /* font-size: 1.05rem !important; */ } .md\:text-5xl { font-size: 2rem !important; }.hero-wrapper .flex.gap-12, .surface-beat--navigate-wrapper .flex.gap-12{ justify-content: center; width: 100%; gap: 2rem; } .stage-progress-card { padding: 20px !important; } .py-24 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .problem-section { padding-top: 7rem !important; } .tg-subline { text-align: left !important; } .transition-bridge { padding-top: 2rem !important; padding-bottom: 2rem !important; } .transition-bridge-line-top { font-size: clamp(1.3rem, 4.5vw, 2.8rem) !important; white-space: nowrap !important; } .transition-bridge-line-bottom { font-size: clamp(2.2rem, 6vw, 3.4rem) !important; white-space: nowrap !important; } .text-lg.mb-8.text-subdued { text-align: left !important; width: 100%; word-break: break-word; } .ai-feature-list-container { max-width: calc(100vw - 1.6rem) !important; overflow: hidden; } .ai-tool-card * { text-align: left !important; } .ai-tool-card { padding: 10px 12px !important; } .ai-tool-hint { padding-left: 0.8rem !important; } .px-6 { padding-left: 0.8rem !important; padding-right: 0.8rem !important; } .create-templates-section { border-top: none !important; } .order-2.lg\:order-1.glass { max-width: calc(100vw - 1.6rem) !important; } .ai-architect-card--glass { padding-left: 0.8rem !important; padding-right: 0.8rem !important; padding-bottom: 0.8rem !important; } [data-tool-view="default"], [data-tool-view="editor"], [data-tool-view="coach"] { height: auto !important; min-height: auto !important; max-height: none !important; } .editor-prompt-bar { height: 220px !important; } .editor-flow-body.creator-two-col { height: 340px !important; min-height: 340px !important; max-height: 340px !important; gap: 1rem !important; } .editor-flow-body.creator-two-col .editor-circle-column { flex-shrink: 0 !important; } .editor-circle-chart--lg { width: 100px !important; height: 100px !important; } .editor-circle-chart--lg .editor-circle-center { display: none !important; } .editor-flow-body.creator-two-col .ai-process-log { flex: 1 !important; min-width: 0 !important; min-height: 0 !important; max-height: none !important; } .editor-flow-body .editor-circle-chart { width: 100px !important; height: 100px !important; } .editor-flow-body .editor-circle-center { font-size: 0.55rem !important; } .editor-flow-body .editor-coach-btn { font-size: 0.6rem !important; padding: 0.3rem 0.6rem !important; } .editor-flow-body .editor-circle-column { flex-shrink: 0 !important; } .editor-flow-body { height: 340px !important; min-height: 340px !important; max-height: 340px !important; overflow: hidden !important; } .ai-process-log-status { display: none !important; } .coach-chat-messages { height: 505px !important; min-height: 505px !important; max-height: 505px !important; overflow-y: auto !important; } .text-xl { font-size: 1.1rem !important; } .text-lg { font-size: 1.05rem !important; } .text-xs { font-size: 0.6rem !important; } .md\:text-5xl { font-size: 1.8rem !important; } .ai-header-icon svg { width: 24px !important; height: 24px !important; } .problem-tag { font-size: 0.45rem; letter-spacing: 0.15em; } /* Navigate Outcomes - match Create Templates mobile layout */ #navigate > .max-w-7xl > .grid { gap: 2rem !important; } #navigate-visualization { max-width: calc(100vw - 1.6rem) !important; overflow: visible !important; } #navigate p { text-align: left !important; } .navigate-journey-card { padding: 10px 12px !important; } .navigate-journey-card h4 { font-size: 0.85rem !important; } .navigate-journey-card p { font-size: 0.75rem !important; } .navigate-stage-hint { font-size: 0.7rem !important; } .navigate-ring-container { width: 260px !important; height: 260px !important; }.hero-kicker-term, .surface-beat--navigate-kicker-term{ text-align: left !important; font-size: 1.5rem !important; }.hero .hero-kicker-term, .surface-beat--navigate .surface-beat--navigate-kicker-term{ font-size: 0.7rem !important; }.hero .hero-kicker-inline .hero-kicker-term, .surface-beat--navigate .surface-beat--navigate-kicker-inline .surface-beat--navigate-kicker-term{ font-size: inherit !important; } } /* ── Desktop hero — side-by-side layout ── */ @media (min-width: 1250px) {.hero.particles .hero-wrapper, .surface-beat--navigate.particles .surface-beat--navigate-wrapper{ display: grid !important; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem !important; padding-top: 0 !important; }.hero .reveal-from-top, .surface-beat--navigate .reveal-from-top{ text-align: left; align-items: flex-start; }.hero-headline, .surface-beat--navigate-headline{ text-align: left; }.hero .desc-text-hero, .surface-beat--navigate .desc-text-hero{ text-align: left; font-size: 0.9rem !important; }.hero-cta-row, .surface-beat--navigate-cta-row{ justify-content: flex-start; }.hero-tag, .surface-beat--navigate-tag{ align-self: flex-start; } } @media (min-width: 1200px) and (max-width: 1290px) {.hero-headline, .surface-beat--navigate-headline{ font-size: 2.3rem !important; } } @media (min-width: 1397px) {.hero-headline, .surface-beat--navigate-headline{ font-size: 2.7rem !important; } } @media (min-width: 1500px) {.hero-headline, .surface-beat--navigate-headline{ font-size: 3rem !important; } } @media (max-width: 450px){.hero-pills, .surface-beat--navigate-pills{ flex-direction: column; gap: 20px; margin-bottom: 20px; align-items: center; }.hero-pills>div, .surface-beat--navigate-pills>div{ width: fit-content; margin-bottom: 0px; } } /* ========== AI ECOSYSTEM SECTION ========== */ /* ========== AI ECOSYSTEM SECTION ========== */ .ai-ecosystem-section { position: relative; background: var(--main-bg-color); color: var(--inv-bg-color); } /* Ambient glow behind the section */ .ai-ecosystem-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 400px; background: radial-gradient(ellipse, rgba(99, 102, 241, 0.08) 0%, transparent 70%); pointer-events: none; z-index: 0; }.ai-ecosystem-section .hero-kicker, .ai-ecosystem-section .surface-beat--navigate-kicker{ margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--grey-accent-color); }.ai-ecosystem-section .hero-kicker-icon, .ai-ecosystem-section .surface-beat--navigate-kicker-icon{ width:7vh; height: 7vh; margin-right: 10px; margin-top: -1vh; }.ai-ecosystem-section .hero-kicker-text, .ai-ecosystem-section .surface-beat--navigate-kicker-text{ font-size: 1.8rem; align-items: baseline; gap: 0px !important; flex-direction: column !important; }.ai-ecosystem-section .hero-kicker-prefix, .ai-ecosystem-section .surface-beat--navigate-kicker-prefix{ font-size: 0.6rem; } /* AI Ecosystem — Header */ .ai-eco-kicker { justify-content: center; } .ai-eco-desc { color: var(--inv-bg-color); opacity: 0.7; max-width: 700px; margin: 0 auto; } .ai-eco-patent-header { font-size: 0.55rem; color: var(--inv-bg-color); opacity: 0.12; text-align: center; margin: 0.5rem auto 0; letter-spacing: 0.02em; } .ai-eco-cta-wrap { text-align: center; margin-top: 3rem; } .ai-eco-learn-more { all: unset; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.5rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; color: #fff !important; background: linear-gradient(135deg, var(--blurple), var(--lightblue)); cursor: pointer; text-decoration: none !important; transition: transform 0.3s ease, box-shadow 0.3s ease; } .ai-eco-learn-more svg { stroke: #fff; } .ai-eco-learn-more:hover { transform: scale(1.08); box-shadow: 0 0 24px color-mix(in srgb, var(--blurple) 40%, transparent); } /* ── Example Journey Badges ── */ .ai-eco-examples { display: flex; justify-content: center; gap: 0.625rem; margin-top: 1.5rem; flex-wrap: wrap; } .ai-eco-example { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.5rem 1rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.06); background: color-mix(in srgb, var(--purple) 3%, var(--main-bg-color)); } .ai-eco-example-name { font-size: 0.75rem; font-weight: 700; color: var(--inv-bg-color); opacity: 0.8; } .ai-eco-example-meta { font-size: 0.65rem; color: var(--inv-bg-color); opacity: 0.35; } /* ── Footer Badge ── */ .ai-eco-footer-badge { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin: 2rem auto 0; padding: 0.5rem 1.5rem; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.08); background: color-mix(in srgb, var(--purple) 5%, var(--main-bg-color)); width: fit-content; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .ai-eco-footer-count { font-size: 0.8rem; font-weight: 700; color: var(--purple); letter-spacing: 0.02em; } .ai-eco-footer-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); flex-shrink: 0; } .ai-eco-footer-patent { font-size: 0.7rem; color: var(--inv-bg-color); opacity: 0.4; letter-spacing: 0.01em; text-align: center; margin-top: 0.75rem; } .ai-eco-patent-name { font-size: 0.55rem; opacity: 0.7; } /* ── Sliding Tile Gallery ── */ .ai-eco-pillars { display: flex; gap: 0.75rem; align-items: stretch; height: 280px; max-width: 720px; margin: 0 auto; position: relative; z-index: 1; } .ai-eco-pillar { position: relative; flex: 0 0 70px; min-width: 0; padding: 2rem 1.25rem; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.06); background: color-mix(in srgb, var(--purple) 2%, var(--main-bg-color)); cursor: pointer; overflow: hidden; display: flex; flex-direction: column; transition: flex 0.65s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease, background 0.4s ease; } /* Gradient top accent on every pillar */ .ai-eco-pillar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); transition: all 0.5s ease; } /* ── Inactive tile ── */ .ai-eco-pillar:not(.is-active) { opacity: 0.5; box-shadow: none; } .ai-eco-pillar:not(.is-active):hover { opacity: 0.75; border-color: rgba(255, 255, 255, 0.12); background: color-mix(in srgb, var(--purple) 4%, var(--main-bg-color)); } /* ── Active tile expands ── */ .ai-eco-pillar.is-active { flex: 1 1 60%; padding: 2rem 1.75rem; border-color: color-mix(in srgb, var(--purple) 25%, transparent); background: color-mix(in srgb, var(--purple) 4%, var(--main-bg-color)); box-shadow: 0 24px 80px rgba(99, 102, 241, 0.1), 0 8px 32px rgba(96, 165, 250, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* Active accent line — color per pillar */ .ai-eco-pillar:nth-child(1).is-active::before { background: linear-gradient(90deg, transparent, #4f46e5, transparent); } .ai-eco-pillar:nth-child(2).is-active::before { background: linear-gradient(90deg, transparent, #6366f1, transparent); } .ai-eco-pillar:nth-child(3).is-active::before { background: linear-gradient(90deg, transparent, #8b5cf6, transparent); } /* ── Pillar Header ── */ .ai-eco-pillar-head { display: flex; align-items: center; gap: 0.625rem; white-space: nowrap; } .ai-eco-pillar-title { font-size: 1rem; font-weight: 700; color: var(--inv-bg-color); margin: 0; overflow: hidden; text-overflow: ellipsis; max-width: 0; opacity: 0; transition: max-width 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; } .ai-eco-pillar.is-active .ai-eco-pillar-title { max-width: 200px; opacity: 1; } .ai-eco-pillar:not(.is-active) .ai-eco-pillar-head { justify-content: center; } .ai-eco-pillar-icon { width: 2.25rem; height: 2.25rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--inv-bg-color); transition: all 500ms cubic-bezier(0.22, 1, 0.36, 1); } .ai-eco-pillar-icon svg { width: 18px; height: 18px; opacity: 0.9; color: var(--inv-bg-color); overflow: visible; } /* ── Icon: draw in once, then shimmer gradient while active ── */ .eco-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0s; } .ai-eco-pillar.is-active .eco-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 0.7s ease-out; } .ai-eco-pillar.is-active .eco-draw:nth-child(2) { transition-delay: 0.08s; } .ai-eco-pillar.is-active .eco-draw:nth-child(3) { transition-delay: 0.16s; } .ai-eco-pillar.is-active .eco-draw:nth-child(4) { transition-delay: 0.22s; } .ai-eco-pillar.is-active .eco-draw:nth-child(5) { transition-delay: 0.28s; } .ai-eco-pillar.is-active .eco-draw:nth-child(6) { transition-delay: 0.34s; } .ai-eco-pillar.is-active .eco-draw:nth-child(7) { transition-delay: 0.4s; } .ai-eco-pillar.is-active .eco-draw:nth-child(8) { transition-delay: 0.46s; } .ai-eco-pillar.is-active .eco-draw:nth-child(9) { transition-delay: 0.52s; } .ai-eco-pillar.is-active .eco-draw:nth-child(10) { transition-delay: 0.58s; } /* Gradient shimmer on the icon container while active */ .ai-eco-pillar.is-active .ai-eco-pillar-icon { background-size: 200% 200%; animation: eco-icon-shimmer 3s ease-in-out infinite; } @keyframes eco-icon-shimmer { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } /* Per-pillar gradient backgrounds matching stage-icon / template-icon pattern */ .ai-eco-pillar:nth-child(1) .ai-eco-pillar-icon { background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 20%, var(--white) 80%), var(--lightestblue)); border: 1.5px solid color-mix(in srgb, var(--blurple) 50%, transparent); } .ai-eco-pillar:nth-child(2) .ai-eco-pillar-icon { background: linear-gradient(135deg, var(--lightestblue), color-mix(in srgb, var(--purple) 20%, var(--white) 80%)); border: 1.5px solid color-mix(in srgb, var(--blurple) 55%, transparent); } .ai-eco-pillar:nth-child(3) .ai-eco-pillar-icon { background: linear-gradient(135deg, color-mix(in srgb, var(--lightblue) 30%, var(--white) 70%), color-mix(in srgb, var(--purple) 15%, var(--white) 85%)); border: 1.5px solid color-mix(in srgb, var(--lightblue) 40%, transparent); } /* ── Collapsible content ── */ .ai-eco-pillar-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); transition: opacity 0.45s ease, max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1), margin 0.45s ease; overflow: hidden; } .ai-eco-pillar:not(.is-active) .ai-eco-pillar-divider { opacity: 0; max-height: 0; margin: 0; } .ai-eco-pillar.is-active .ai-eco-pillar-divider { opacity: 1; max-height: 2px; margin: 0.75rem 0; } /* ── Pillar Bullet Lists ── */ .ai-eco-pillar-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; transition: opacity 0.45s ease, max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden; } .ai-eco-pillar:not(.is-active) .ai-eco-pillar-bullets { opacity: 0; max-height: 0; } .ai-eco-pillar.is-active .ai-eco-pillar-bullets { opacity: 1; max-height: 200px; } .ai-eco-pillar-bullets li { font-size: 0.8rem; color: var(--inv-bg-color); line-height: 1.4; padding-left: 0; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; } .ai-eco-pillar.is-active .ai-eco-pillar-bullets li { opacity: 0.55; transform: translateY(0); } .ai-eco-pillar.is-active .ai-eco-pillar-bullets li:nth-child(1) { transition-delay: 0.3s; } .ai-eco-pillar.is-active .ai-eco-pillar-bullets li:nth-child(2) { transition-delay: 0.42s; } .ai-eco-pillar.is-active .ai-eco-pillar-bullets li:nth-child(3) { transition-delay: 0.54s; } .ai-eco-pillar-bullets li::before { display: none; } .eco-bullet-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.3; margin-right: 0.5rem; position: relative; top: -1px; } /* ── Responsive ── */ @media (max-width: 1024px) { .ai-eco-pillars { flex-direction: column; height: auto; min-height: 550px; } .ai-eco-pillar:not(.is-active) { flex: 0 0 auto; } .ai-eco-pillar.is-active { flex: 0 0 auto; } .ai-eco-pillar:not(.is-active) .ai-eco-pillar-divider, .ai-eco-pillar:not(.is-active) .ai-eco-pillar-bullets { max-height: 0; opacity: 0; } .ai-eco-pillar-title { max-width: 200px; opacity: 1; } .ai-eco-pillar:not(.is-active) .ai-eco-pillar-head { justify-content: flex-start; } } @media (max-width: 640px) { .ai-eco-pillars { gap: 0.5rem; } .ai-eco-pillar { padding: 1.25rem 1rem; } .ai-eco-pillar.is-active { padding: 1.25rem 1rem; } .ai-eco-footer-badge { flex-direction: column; gap: 0.25rem; padding: 0.625rem 1.25rem; margin-top: 0; } .ai-eco-footer-sep { display: none; } } /* ========== GLOBAL AESTHETIC POLISH ========== */ /* Soft Ambient Shadows - Replace Harsh Shadows */ .glass, .proof-stat-card, .ai-architect-card{ box-shadow: 0 20px 60px rgba(99, 102, 241, 0.07), 0 8px 24px rgba(96, 165, 250, 0.04) !important; } /* Consistent Border Radius */ .ai-architect-card, .proof-stat-card:first-child { border-radius: 24px !important; } /* Consistent Subtle Borders */ .glass, .ai-architect-card { border: 1px solid rgba(255, 255, 255, 0.1) !important; } /* ========== GENERAL POLISH & STANDARDIZATION ========== */ .proof-section { padding-bottom: 7rem !important; } /* Create templates section has transition bridge, so no top padding */ .create-templates-section { padding-top: 0 !important; padding-bottom: 6rem !important; border-top: none !important; } /* Content area within create-templates has standard padding */ .create-templates-content { padding-top: 0 !important; padding-bottom: 6rem !important; } /* Typography Consistency - Sub-headers */ .proof-pill, .epic-portal-title { letter-spacing: 0.1em !important; text-transform: uppercase !important; } /* ========== END GENERAL POLISH ========== */ /* Create Templates Section - Main Background Color */ .create-templates-section { background: var(--main-bg-color) !important; padding-bottom: 0px !important; } /* ========== TRANSITION BRIDGE - CLEAN TYPOGRAPHY ========== */ .transition-bridge { background: linear-gradient(180deg, var(--main-bg-color) 0%, color-mix(in srgb, var(--blurple) 3%, transparent) 45%, color-mix(in srgb, var(--purple) 2%, transparent) 65%, var(--main-bg-color) 100%); padding: 3.5rem 2rem; margin-bottom: 2rem; margin-top: 0; position: relative; } .transition-bridge-content { max-width: 1200px; margin: 0 auto; text-align: center; } .transition-bridge-stack { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .transition-bridge-line-top { display: block; font-size: 2.8rem; font-weight: 500; line-height: 1.2; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); letter-spacing: -0.02em; } .transition-bridge-line-bottom { display: block; font-size: 3.4rem; font-weight: 800; line-height: 1.2; color: color-mix(in srgb, var(--inv-bg-color) 90%, transparent); letter-spacing: -0.025em; } .transition-bridge-flow { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; } .bridge-flow-step { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); } .bridge-flow-num { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0; border-radius: 50%; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 30%, transparent); color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); flex-shrink: 0; } .bridge-flow-sep { width: 28px; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--blurple) 40%, transparent), color-mix(in srgb, var(--purple) 30%, transparent)); position: relative; } .bridge-flow-sep::after { content: ''; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-top: 1px solid color-mix(in srgb, var(--purple) 40%, transparent); border-right: 1px solid color-mix(in srgb, var(--purple) 40%, transparent); transform: rotate(45deg); } .create-templates-content { position: relative; } .create-templates-content > div > div > .glass{ padding: 0px !important; border: none !important; background: none !important; } /* Title Styling - Sick Elevated Gradient */ .create-templates-section .epic-portal-title { background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; background-size: 200% 200% !important; font-weight: 900 !important; opacity: 1 !important; filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.4)) drop-shadow(0 8px 24px rgba(118, 75, 162, 0.3)) drop-shadow(0 2px 6px rgba(79, 172, 254, 0.2)) !important; animation: gradient-shift 8s ease infinite !important; } @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Main Heading - Use inverse background color */ .create-templates-section .solution-title { color: var(--inv-bg-color) !important; background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: unset !important; background-clip: unset !important; } /* Description Text - Only for right side agent list */ .create-templates-section .order-1.lg\:order-2 p :not(* .ai-tool-hint) { color: var(--inv-bg-color) !important; opacity: 0.8 !important; } /* Agent Card Headings - Only for right side agent list */ .create-templates-section .order-1.lg\:order-2 h4 { color: var(--inv-bg-color) !important; opacity: 0.95 !important; font-size: 1.15rem; letter-spacing: -0.01em; } /* Agent Icons - Minimal, No Decoration */ .create-templates-section .template-icon { width: 3rem; height: 3rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .create-templates-section .template-icon svg, .create-templates-section .template-icon svg * { width: 24px; height: 24px; opacity: 0.9; color: var(--inv-bg-color); fill: var(--inv-bg-color) } /* AI Tool Selector - Flex Container */ .create-templates-section .ai-tool-selector { display: flex; flex-direction: column; gap: 8px; } .create-templates-section .ai-tool-selector.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; margin-bottom: 0; } p.ai-tool-hint { font-size: 0.7rem; font-weight: 600; color: var(--inv-bg-color); opacity: 0.6 !important; text-align: left; margin-top: 1.25rem; letter-spacing: 0.04em; margin-top: 40px !important; padding-left: 30px; } /* AI Tool Cards */ .create-templates-section .ai-tool-card { transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease, opacity 0.4s ease; padding: 14px 16px; border-radius: 14px; cursor: pointer; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); position: relative; align-items: center; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 4%, transparent); } .create-templates-section .ai-tool-card:hover { background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border-color: color-mix(in srgb, var(--blurple) 18%, transparent); transform: translateX(3px); box-shadow: 0 8px 40px color-mix(in srgb, var(--blurple) 10%, transparent), 0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent); } .create-templates-section .ai-tool-card.is-active { background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border-color: color-mix(in srgb, var(--blurple) 30%, transparent); box-shadow: 0 4px 24px color-mix(in srgb, var(--blurple) 12%, transparent), 0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent), inset 0 1px 0 color-mix(in srgb, var(--blurple) 8%, transparent); } .create-templates-section .ai-tool-card.is-active .template-icon svg, .create-templates-section .ai-tool-card.is-active .template-icon svg * { opacity: 1; } .create-templates-section .ai-tool-card:not(.is-active) { opacity: 0.55; } .create-templates-section .ai-tool-card:not(.is-active):hover { opacity: 0.85; } /* Unified demo view height */ [data-tool-view="default"], [data-tool-view="editor"], [data-tool-view="coach"] { height: 540px; min-height: 540px; max-height: 540px; overflow: hidden; } [data-tool-view="default"] { display: flex; flex-direction: column; gap: 0.75rem; } [data-tool-view="default"].space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; } [data-tool-view="default"] .editor-flow-body { flex: 1; min-height: 0; } .ai-demo-mode-hint { display: none; font-size: 0.55rem; color: rgba(255, 255, 255, 0.25); font-weight: 400; letter-spacing: 0.03em; } @media (max-width: 1150px) { .ai-demo-mode-hint { display: inline; } } /* ========== AI EDITOR FLOW VIEW ========== */ .editor-flow-view { display: flex; flex-direction: column; gap: 0.75rem; } .editor-prompt-bar { padding: 0.75rem 0.875rem; border-radius: 10px; background: var(--main-bg-color); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); min-height: 200px; } .editor-flow-body { display: flex; gap: 1rem; align-items: flex-start; min-height: 340px; } .editor-circle-column { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; flex-shrink: 0; overflow: hidden; transition: width 0.4s ease, opacity 0.4s ease; } .editor-flow-body .editor-circle-column.is-collapsed { width: 0 !important; opacity: 0; gap: 0; } .editor-flow-body.diff-expanded { gap: 0 !important; } .editor-coach-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .editor-coach-btn:hover { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.95); border-color: rgba(255, 255, 255, 0.25); } .editor-coach-btn svg { width: 14px; height: 14px; flex-shrink: 0; } .editor-circle-chart { width: 160px; height: 160px; position: relative; flex-shrink: 0; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--blurple) 8%, transparent)) drop-shadow(0 2px 4px color-mix(in srgb, var(--inv-bg-color) 4%, transparent)); } .ring-track { display: none; } /* Gradient arc stop colors — shared by creator, editor, personalize rings */ .rg-stop-a { stop-color: rgba(99, 102, 241, 0.68); } .rg-stop-b { stop-color: rgba(139, 92, 246, 0.26); } .rg-stop-c { stop-color: rgba(99, 102, 241, 0.03); } /* Large circle for creator-only view */ .editor-circle-chart--lg { width: 280px; height: 280px; filter: drop-shadow(0 0 60px rgba(139, 92, 246, 0.12)) drop-shadow(0 0 120px rgba(99, 102, 241, 0.06)); } .editor-circle-chart--lg .editor-circle-center { font-size: 0.82rem; font-weight: 600; padding: 4.5rem; line-height: 1.5; letter-spacing: 0.01em; } .editor-circle-chart--lg .editor-circle-nodes rect { transition: fill 0.5s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* Creator two-column layout: circle left, process log right */ .creator-two-col { align-items: stretch; min-height: 0; flex: 1; gap: 1.25rem; } .creator-two-col .editor-circle-column { align-items: center; gap: 1.25rem; flex-shrink: 0; } /* ========== AI PROCESS LOG ========== */ .ai-process-log { flex: 1; display: flex; flex-direction: column; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; min-width: 0; } .ai-process-log-header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .ai-process-log-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.85); } .ai-process-log-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.55rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(110, 231, 183, 0.9); } .ai-log-pulse { width: 6px; height: 6px; border-radius: 50%; background: rgba(110, 231, 183, 0.9); animation: aiLogPulse 2s ease-in-out infinite; } @keyframes aiLogPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.4); } 50% { opacity: 0.5; box-shadow: 0 0 8px 3px rgba(110, 231, 183, 0); } } .ai-process-log-body { flex: 1; padding: 0.5rem 0; overflow-y: auto; scrollbar-width: none; font-family: var(--font-main, 'Satoshi', sans-serif); } .ai-process-log-body::-webkit-scrollbar { display: none; } .ai-log-entry { display: flex; align-items: baseline; gap: 0.65rem; padding: 0.3rem 0.85rem; opacity: 0; transform: translateY(6px); transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes aiLogFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .ai-log-ts { font-size: 0.55rem; color: rgba(255, 255, 255, 0.2); flex-shrink: 0; min-width: 2.2rem; } .ai-log-msg { font-size: 0.75rem; color: rgba(255, 255, 255, 0.95); line-height: 1.5; } .ai-log-entry--system .ai-log-msg { color: rgba(200, 210, 255, 1); font-weight: 600; } .ai-log-entry--success .ai-log-msg { color: #86efac; } .ai-log-entry--success .ai-log-msg::before { content: "\2713 "; font-weight: 700; color: #86efac; } .ai-log-dots::after { content: ''; animation: aiLogDots 1.5s steps(4, end) infinite; } @keyframes aiLogDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } } /* ========== EDITOR AI STATUS CYCLING ========== */ .editor-ai-status-cycle { display: inline-flex; align-items: center; color: rgba(165, 180, 252, 0.8); transition: opacity 0.4s ease; } .editor-diff-panel.is-visible .editor-diff-lines:empty ~ .editor-diff-actions { opacity: 0.3; pointer-events: none; } .editor-circle-ring { position: absolute; inset: 0; width: 100%; height: 100%; } .editor-circle-nodes { position: absolute; inset: 0; width: 100%; height: 100%; } .editor-circle-nodes rect { fill: rgba(99, 102, 241, 0.04); stroke: rgba(99, 102, 241, 0.38); stroke-width: 0.6; transition: fill 0.4s ease, stroke 0.4s ease, filter 0.4s ease; } .editor-circle-nodes rect.is-idle { fill: rgba(99, 102, 241, 0.03); stroke: rgba(99, 102, 241, 0.22); filter: none; } .editor-circle-nodes rect.is-target { fill: rgba(251, 191, 36, 0.9); stroke: rgba(251, 191, 36, 0.6); filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55)); } .editor-circle-nodes rect.is-working { fill: rgba(165, 180, 252, 0.92); stroke: rgba(165, 180, 252, 0.7); filter: drop-shadow(0 0 8px rgba(165, 180, 252, 0.5)); animation: editorNodePulse 1s ease-in-out infinite; } .editor-circle-nodes rect.is-complete { fill: rgba(34, 197, 94, 0.88); stroke: rgba(34, 197, 94, 0.5); filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.4)); } @keyframes editorNodePulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } .editor-circle-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.65rem; font-weight: 700; text-align: center; color: var(--inv-bg-color); opacity: 0.7; padding: 2rem; line-height: 1.3; letter-spacing: 0.02em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } .personalize-circle-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.65rem; font-weight: 700; text-align: center; color: var(--inv-bg-color); opacity: 0.7; padding: 2rem; line-height: 1.3; letter-spacing: 0.02em; } .creator-center-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; font-size: 14px; font-weight: 700; letter-spacing: 0.03em; color: #fff; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; text-decoration: none; pointer-events: auto; transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s; opacity: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .creator-center-cta:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); transform: scale(1.05); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 20px rgba(139, 92, 246, 0.12); } .editor-diff-panel { flex: 1; min-width: 0; overflow: hidden; position: relative; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); padding: 0.75rem; opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; } .editor-diff-panel.is-visible { opacity: 1; transform: translateY(0); } .editor-diff-header { margin-bottom: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.65rem; } .editor-diff-header [data-editor-diff-title] { transition: opacity 0.25s ease; display: inline-block; } .editor-diff-lines { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.72rem; line-height: 1.65; } .editor-diff-line { padding: 0.2rem 0.5rem; border-radius: 4px; opacity: 0; transform: translateX(-4px); transition: opacity 0.25s ease, transform 0.25s ease; } .editor-diff-line.is-visible { opacity: 1; transform: translateX(0); } .editor-diff-line.diff-remove { background: rgba(239, 68, 68, 0.1); color: rgba(252, 165, 165, 0.9); text-decoration: line-through; text-decoration-color: rgba(252, 165, 165, 0.3); } .editor-diff-line.diff-add { background: rgba(34, 197, 94, 0.1); color: rgba(134, 239, 172, 0.9); } .editor-diff-line.diff-context { color: var(--inv-bg-color); opacity: 0.35; } .editor-diff-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; opacity: 0; transition: opacity 0.3s ease; } .editor-diff-actions.is-visible { opacity: 1; } .editor-accept-btn, .editor-reject-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.65rem; border-radius: 6px; font-size: 0.7rem; font-weight: 700; border: none; cursor: pointer; transition: opacity 0.2s ease, transform 0.15s ease; } .editor-accept-btn { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.25); color: rgba(134, 239, 172, 0.9); } .editor-accept-btn:hover { background: rgba(34, 197, 94, 0.25); transform: translateY(-1px); } .editor-reject-btn { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: rgba(252, 165, 165, 0.8); } .editor-reject-btn:hover { background: rgba(239, 68, 68, 0.2); transform: translateY(-1px); } /* ========== AI COACH CHAT VIEW ========== */ .coach-chat-view { display: flex; flex-direction: column; } .coach-chat-messages { flex: 1; overflow-y: auto; padding: 0.5rem 0; display: flex; flex-direction: column; gap: 0.625rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; } .coach-chat-bubble { max-width: 88%; padding: 0.625rem 0.875rem; border-radius: 10px; font-size: 0.8rem; line-height: 1.45; opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; } .coach-chat-bubble.is-visible { opacity: 1; transform: translateY(0); } .coach-bubble-user { align-self: flex-end; background: rgba(78, 137, 241, 0.15); border: 1px solid rgba(78, 137, 241, 0.2); color: var(--inv-bg-color); } .coach-bubble-ai { align-self: flex-start; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); color: var(--inv-bg-color); } .coach-bubble-thinking { align-self: flex-start; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--inv-bg-color); opacity: 0.85; font-style: italic; font-size: 0.75rem; } .coach-bubble-thinking.is-visible { opacity: 0.85; } .coach-thinking-dots { display: inline-flex; gap: 3px; margin-left: 4px; } .coach-thinking-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--inv-bg-color); opacity: 0.7; animation: coachDotPulse 1.2s infinite; } .coach-thinking-dots span:nth-child(2) { animation-delay: 0.2s; } .coach-thinking-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes coachDotPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* Coach report card */ .coach-report-tag { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--blurple); opacity: 0.8; margin-bottom: 0.2rem; } .coach-report-headline { font-size: 0.85rem; font-weight: 800; line-height: 1.25; margin-bottom: 0.6rem; } /* Coach flow pivot bars */ .coach-flow-pivot { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.5rem; } .coach-flow-row { display: flex; align-items: center; gap: 0.35rem; } .coach-flow-stage { flex: 0 0 5.2rem; font-size: 0.58rem; font-weight: 600; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .coach-flow-bar-wrap { flex: 1; height: 6px; border-radius: 3px; background: rgba(78, 137, 241, 0.1); overflow: hidden; } .coach-flow-bar { height: 100%; width: var(--bar-width, 0%); border-radius: 3px; background: var(--blurple); opacity: 0.55; } .coach-flow-row.is-alert .coach-flow-bar { background: #ef4444; opacity: 0.8; } .coach-flow-row.is-good .coach-flow-bar { background: #22c55e; opacity: 0.7; } .coach-flow-pct { flex: 0 0 2.2rem; font-size: 0.6rem; font-weight: 700; text-align: right; opacity: 0.85; } .coach-flow-row.is-alert .coach-flow-pct { color: #ef4444; } .coach-flow-row.is-good .coach-flow-pct { color: #22c55e; } .coach-flow-note { flex: 0 0 auto; font-size: 0.5rem; opacity: 0.5; font-style: italic; white-space: nowrap; } .coach-report-finding { font-size: 0.72rem; line-height: 1.45; opacity: 0.85; margin-bottom: 0.35rem; } .coach-report-source { font-size: 0.58rem; opacity: 0.4; font-style: italic; margin-bottom: 0.5rem; } .coach-cta-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.2rem; border-radius: 10px; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; border: none; cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; text-decoration: none; box-shadow: 0 2px 12px rgba(139, 92, 246, 0.35); } .coach-cta-btn:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 4px 20px rgba(139, 92, 246, 0.5); } .coach-chat-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.875rem; margin-top: 0.5rem; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); } .coach-input-row { flex: 1; font-size: 0.8rem; color: var(--inv-bg-color); opacity: 0.7; display: flex; align-items: center; min-height: 1.2em; } .coach-send-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(78, 137, 241, 0.2); border: 1px solid rgba(78, 137, 241, 0.25); color: var(--blurple); cursor: pointer; transition: background 0.2s ease; flex-shrink: 0; } .coach-send-btn:hover { background: rgba(78, 137, 241, 0.35); } /* Glass Container Enhancement */ .create-templates-section .glass { border: 1px solid rgba(139, 92, 246, 0.2) !important; box-shadow: 0 20px 60px rgba(139, 92, 246, 0.18), 0 10px 30px rgba(96, 165, 250, 0.12) !important; } /* ========== AI ARCHITECT CARD - VISIBLE BLUE GRADIENT (OLD STYLE - KEPT FOR BACKWARDS COMPATIBILITY) ========== */ /* Background with visible blue gradient - more contrast */ .create-templates-section .ai-architect-card { background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%), linear-gradient(160deg, rgba(79,70,229,0.85) 0%, rgba(99,102,241,0.75) 50%, rgba(139,92,246,0.8) 100%), var(--main-bg-color) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 25px 70px rgba(55, 48, 163, 0.4), 0 15px 40px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } /* ========== GLASSMORPHISM GRADIENT STYLE ========== */ /* Semi-transparent gradient with glassmorphism */ /* Reduce header area spacing */ .create-templates-section .ai-architect-card--glass { padding-top: 1.25rem !important; } .create-templates-section .ai-architect-card--glass > .flex.items-center.justify-between { margin-bottom: 1rem !important; } .create-templates-section .ai-architect-card--glass { background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%), linear-gradient(160deg, rgba(79,70,229,0.85) 0%, rgba(99,102,241,0.75) 50%, rgba(139,92,246,0.8) 100%), var(--main-bg-color) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; box-shadow: 0 25px 70px rgba(55, 48, 163, 0.35), 0 15px 40px rgba(99, 102, 241, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; } /* Text colors for gradient background */ .create-templates-section .ai-architect-card--glass > div > div > span { color: rgba(255, 255, 255, 0.98) !important; } /* Icon container for gradient background */ .create-templates-section .ai-architect-card--glass .ai-architect-glyph { background: rgba(255, 255, 255, 0.25) !important; border-color: rgba(255, 255, 255, 0.4) !important; } .create-templates-section .ai-architect-card--glass .ai-architect-glyph svg { color: rgba(255, 255, 255, 0.95) !important; } /* AI Flow Circle Chart in Creator CTA */ .ai-flow-circle-wrap { position: relative; width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .ai-flow-circle-bg { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255, 255, 255, 0.06); } /* Creator-specific overrides (reuses editor layout classes) */ .creator-progress-panel { padding: 0; display: flex; flex-direction: column; overflow: hidden; } .creator-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .creator-panel-scroll { flex: 1; overflow-y: auto; padding: 0.5rem 0.75rem; min-height: 0; scrollbar-width: none; -ms-overflow-style: none; } .creator-panel-scroll::-webkit-scrollbar { display: none; } .create-templates-section .ai-architect-card--glass .ai-prompt-caret { background: #4E89F1 !important; animation: blink 1s step-end infinite; } /* Status container for gradient card */ .create-templates-section .ai-architect-card--glass .ai-architect-status { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.2) !important; } .create-templates-section .ai-architect-card--glass .ai-status-header { color: rgba(255, 255, 255, 0.9) !important; } .create-templates-section .ai-architect-card--glass .ai-status-label { color: rgba(255, 255, 255, 0.9) !important; } .create-templates-section .ai-architect-card--glass .ai-status-message { color: rgba(255, 255, 255, 0.95) !important; } .create-templates-section .ai-architect-card--glass .ai-stage { color: rgba(255, 255, 255, 0.85) !important; } .create-templates-section .ai-architect-card--glass .ai-stage-label { color: rgba(255, 255, 255, 0.95) !important; } .create-templates-section .ai-architect-card--glass .ai-status-chip--idle { background: rgba(255, 255, 255, 0.25) !important; border-color: rgba(255, 255, 255, 0.4) !important; color: rgba(255, 255, 255, 0.95) !important; } /* Vertical centering and spacing */ .create-templates-section .ai-feature-list-container { display: flex; flex-direction: column; justify-content: center; } .create-templates-section .ai-stage-list { line-height: 1.8; } .create-templates-section .ai-stage-list > * + * { margin-top: 1rem; } /* ========== OLD SOLID GRADIENT STYLES (FOR REFERENCE) ========== */ /* AI Creator label and text - white for gradient background */ .create-templates-section .ai-architect-card > div > div > span { color: rgba(255, 255, 255, 0.98) !important; } /* Icon container */ .create-templates-section .ai-architect-glyph { background: rgba(255, 255, 255, 0.25) !important; border-color: rgba(255, 255, 255, 0.4) !important; } .create-templates-section .ai-architect-glyph svg { color: rgba(255, 255, 255, 0.95) !important; } /* Status Header Text */ .create-templates-section .ai-status-header { color: rgba(255, 255, 255, 0.9) !important; } .create-templates-section .ai-status-label { color: rgba(255, 255, 255, 0.9) !important; } /* Status Chips */ .create-templates-section .ai-status-chip--idle { background: rgba(255, 255, 255, 0.25) !important; border-color: rgba(255, 255, 255, 0.4) !important; color: rgba(255, 255, 255, 0.95) !important; } .create-templates-section .ai-status-chip--active { background: rgba(255, 200, 0, 1) !important; border: 2px solid rgba(255, 220, 0, 1) !important; color: rgba(30, 30, 30, 1) !important; font-weight: 700 !important; box-shadow: 0 0 16px rgba(255, 200, 0, 0.8) !important; } .create-templates-section .ai-status-chip--done { background: rgba(34, 197, 94, 1) !important; border: 2px solid rgba(34, 197, 94, 1) !important; color: rgba(255, 255, 255, 1) !important; font-weight: 700 !important; box-shadow: 0 0 16px rgba(34, 197, 94, 0.8) !important; } /* Status Message */ .create-templates-section .ai-status-message { color: rgba(255, 255, 255, 0.95) !important; } /* Stage Items */ .create-templates-section .ai-stage { color: rgba(255, 255, 255, 0.85) !important; } .create-templates-section .ai-stage-label { color: rgba(255, 255, 255, 0.95) !important; } /* Stage Indicators */ .create-templates-section .ai-stage-indicator { border-color: rgba(255, 255, 255, 0.4) !important; } /* Stage Indicator with Check - VIBRANT GREEN BACKGROUND WITH GLOW */ .create-templates-section .ai-stage.is-complete .ai-stage-indicator { background: rgba(34, 197, 94, 0.9) !important; border: 2px solid rgba(34, 197, 94, 1) !important; box-shadow: 0 0 16px rgba(34, 197, 94, 0.7) !important; } /* Stage Checkmarks - WHITE ON GREEN WITH BOLD STROKE */ .create-templates-section .ai-stage-check { color: #ffffff !important; stroke: #ffffff !important; stroke-width: 3 !important; } .create-templates-section .ai-stage.is-complete .ai-stage-check { color: #ffffff !important; stroke: #ffffff !important; stroke-width: 3 !important; } .create-templates-section svg.ai-stage-check { color: #ffffff !important; stroke: #ffffff !important; stroke-width: 3 !important; } .create-templates-section .ai-stage.is-complete svg.ai-stage-check { color: #ffffff !important; stroke: #ffffff !important; stroke-width: 3 !important; } /* Creator panel - gradient card overrides */ .create-templates-section .creator-panel-header { border-bottom-color: rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.9) !important; } .create-templates-section .creator-center-cta { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; text-decoration: none !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.02em; padding: 10px 22px !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 10px !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .create-templates-section .creator-center-cta:hover { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.25) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 20px rgba(139, 92, 246, 0.15) !important; transform: scale(1.05); } /* ========== EDITOR VIEW - GRADIENT CARD OVERRIDES ========== */ /* Boost contrast for editor elements on purple glass background */ .create-templates-section .editor-prompt-bar { background: var(--main-bg-color) !important; border-color: color-mix(in srgb, var(--inv-bg-color) 6%, transparent) !important; backdrop-filter: blur(10px) !important; border-radius: 14px !important; padding: 0.875rem 1rem !important; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--inv-bg-color) 4%, transparent) !important; } .create-templates-section .editor-prompt-bar .text-indigo-400 { color: #4E89F1 !important; opacity: 1 !important; font-weight: 600 !important; } .create-templates-section .editor-prompt-text { color: var(--inv-bg-color) !important; } .create-templates-section .editor-prompt-bar .ai-prompt-caret { background: #4E89F1 !important; } .create-templates-section .editor-diff-panel { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.35) !important; backdrop-filter: blur(6px) !important; } .create-templates-section .editor-diff-header span { color: rgba(255, 255, 255, 0.95) !important; opacity: 1 !important; } .create-templates-section .editor-diff-line.diff-remove { background: rgba(220, 38, 38, 0.3) !important; color: #fee2e2 !important; } .create-templates-section .editor-diff-line.diff-add { background: rgba(22, 163, 74, 0.3) !important; color: #dcfce7 !important; } .create-templates-section .editor-diff-line.diff-context { color: rgba(255, 255, 255, 0.8) !important; opacity: 1 !important; } .create-templates-section .editor-circle-center { color: rgba(255, 255, 255, 0.98) !important; opacity: 1 !important; /* text-shadow: 0 1px 8px rgba(0, 0, 0, 0.15), 0 0 20px rgba(139, 92, 246, 0.15); */ /* background: radial-gradient(circle at center, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.04) 40%, transparent 70%); */ border-radius: 50%; /* backdrop-filter: blur(4px); */ -webkit-backdrop-filter: blur(4px); } .create-templates-section .editor-circle-ring .ring-track { stroke: rgba(255, 255, 255, 0.12) !important; } .create-templates-section .editor-circle-nodes rect.is-idle { fill: rgba(255, 255, 255, 0.18) !important; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.08)) !important; } .create-templates-section .editor-circle-nodes rect.is-target { fill: rgba(251, 191, 36, 1) !important; filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.7)) drop-shadow(0 0 24px rgba(251, 191, 36, 0.25)) !important; } .create-templates-section .editor-circle-nodes rect.is-working { fill: rgba(255, 255, 255, 1) !important; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 20px rgba(165, 180, 252, 0.3)) !important; } .create-templates-section .editor-circle-nodes rect.is-complete { fill: rgba(52, 211, 153, 1) !important; filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.4)) !important; } /* Celebration animation when all stages finish */ .editor-circle-chart.is-celebrating { animation: creatorCelebrate 1.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .editor-circle-chart.is-celebrating .editor-circle-nodes rect.is-complete { animation: nodeCelebratePop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .editor-circle-chart.is-celebrating .editor-circle-ring .ring-track { animation: ringCelebrateGlow 1.4s ease forwards; } @keyframes creatorCelebrate { 0% { transform: scale(1); filter: drop-shadow(0 0 60px rgba(139, 92, 246, 0.12)); } 20% { transform: scale(1.06); filter: drop-shadow(0 0 80px rgba(52, 211, 153, 0.25)); } 50% { transform: scale(0.98); } 70% { transform: scale(1.02); } 100% { transform: scale(1); filter: drop-shadow(0 0 60px rgba(139, 92, 246, 0.12)); } } @keyframes nodeCelebratePop { 0% { filter: drop-shadow(0 0 0 rgba(52, 211, 153, 0)); } 35% { filter: drop-shadow(0 0 14px rgba(52, 211, 153, 0.9)) drop-shadow(0 0 28px rgba(52, 211, 153, 0.3)); } 100% { filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.4)); } } @keyframes ringCelebrateGlow { 0% { stroke: rgba(255, 255, 255, 0.12); } 30% { stroke: rgba(52, 211, 153, 0.5); } 100% { stroke: rgba(255, 255, 255, 0.12); } } .ai-stage.is-done-pulse { animation: stageDonePulse 0.5s ease; } @keyframes stageDonePulse { 0% { opacity: 1; transform: translateX(0); } 30% { opacity: 0.7; transform: translateX(3px); } 100% { opacity: 1; transform: translateX(0); } } .create-templates-section .editor-accept-btn { background: rgba(34, 197, 94, 0.35) !important; border-color: rgba(34, 197, 94, 0.55) !important; color: #dcfce7 !important; } .create-templates-section .editor-reject-btn { background: rgba(239, 68, 68, 0.3) !important; border-color: rgba(239, 68, 68, 0.45) !important; color: #fee2e2 !important; } /* ========== COACH VIEW - GRADIENT CARD OVERRIDES ========== */ /* Boost contrast for coach elements on purple glass background */ .create-templates-section .coach-bubble-user { background: rgba(255, 255, 255, 0.22) !important; border-color: rgba(255, 255, 255, 0.35) !important; color: rgba(255, 255, 255, 0.98) !important; } .create-templates-section .coach-bubble-ai { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: rgba(255, 255, 255, 0.98) !important; } .create-templates-section .coach-bubble-thinking { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.85) !important; } .create-templates-section .coach-report-tag { color: rgba(255, 255, 255, 0.7) !important; opacity: 1 !important; } .create-templates-section .coach-report-headline { color: rgba(255, 255, 255, 1) !important; } .create-templates-section .coach-flow-stage { color: rgba(255, 255, 255, 0.85) !important; opacity: 1 !important; } .create-templates-section .coach-flow-bar-wrap { background: rgba(255, 255, 255, 0.15) !important; } .create-templates-section .coach-flow-bar { background: rgba(255, 255, 255, 0.7) !important; opacity: 0.9 !important; } .create-templates-section .coach-flow-row.is-alert .coach-flow-bar { background: #fca5a5 !important; opacity: 1 !important; } .create-templates-section .coach-flow-row.is-good .coach-flow-bar { background: #86efac !important; opacity: 0.9 !important; } .create-templates-section .coach-flow-pct { color: rgba(255, 255, 255, 0.95) !important; opacity: 1 !important; } .create-templates-section .coach-flow-row.is-alert .coach-flow-pct { color: #fca5a5 !important; } .create-templates-section .coach-flow-row.is-good .coach-flow-pct { color: #86efac !important; } .create-templates-section .coach-flow-note { color: rgba(255, 255, 255, 0.6) !important; opacity: 1 !important; } .create-templates-section .coach-report-finding { color: rgba(255, 255, 255, 0.95) !important; opacity: 1 !important; } .create-templates-section .coach-report-source { color: rgba(255, 255, 255, 0.5) !important; opacity: 1 !important; } .create-templates-section .coach-cta-btn { background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important; } .create-templates-section .coach-cta-btn:hover { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 20px rgba(139, 92, 246, 0.15) !important; } .create-templates-section .coach-chat-input { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(255, 255, 255, 0.3) !important; backdrop-filter: blur(10px) !important; } .create-templates-section .coach-input-row { color: rgba(30, 30, 30, 0.9) !important; opacity: 1 !important; } .create-templates-section .coach-input-row .ai-prompt-caret { background: #4E89F1 !important; } .create-templates-section .coach-send-btn { background: rgba(78, 137, 241, 0.15) !important; border-color: rgba(78, 137, 241, 0.3) !important; color: #4E89F1 !important; } .create-templates-section .coach-thinking-dots span { background: rgba(255, 255, 255, 0.9) !important; } /* ========== SHARE JOURNEYS SECTION ========== */ /* Section Background - Matches Problem Section Layout */ .share-journeys-section { background: var(--main-bg-color); /* background: color-mix(in srgb, var(--main-bg-color) 95%, rgba(139, 92, 246, 1) 5%); */ color: var(--inv-bg-color); } .share-journeys-section .share-copy, .share-journeys-section .share-copy p:not(.beat-mockup-caption), .share-journeys-section .share-copy h2 { color: var(--inv-bg-color); text-align: center; } .share-journeys-section .share-copy p:not(.beat-mockup-caption) { font-size: 1.125rem; opacity: 0.7; } .share-journeys-section .share-feature-title { color: var(--inv-bg-color) !important; } .share-journeys-section .share-feature-desc { color: var(--inv-bg-color) !important; opacity: 0.8 !important; } /* Feature Icons */ .share-journeys-section .share-feature-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 20%, var(--white) 80%), color-mix(in srgb, var(--purple) 25%, var(--white) 75%)); border: 1px solid color-mix(in srgb, var(--blurple) 40%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--blurple) 25%, transparent); transition: all 0.3s ease; } .share-journeys-section .share-feature-icon svg { color: var(--inv-bg-color) !important; } .share-journeys-section .share-feature-icon:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 12px 32px color-mix(in srgb, var(--blurple) 35%, transparent); } /* ========== WORKFLOW CONTAINER ========== */ .share-workflow-container { position: relative; width: 100%; background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(96, 165, 250, 0.05)); border-radius: 16px; padding: 40px 30px; display: flex; flex-direction: column; gap: 0; } /* Workflow Step */ .workflow-step { position: relative; display: flex; align-items: flex-start; gap: 20px; opacity: 0; animation: fade-in-step 0.5s ease-out forwards; } .workflow-step-1 { animation-delay: 0.2s; } .workflow-step-2 { animation-delay: 0.4s; } .workflow-step-3 { animation-delay: 0.6s; } .workflow-step-4 { animation-delay: 0.8s; } /* Step Number */ .workflow-step-number { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4), 0 4px 12px rgba(96, 165, 250, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); z-index: 2; position: relative; } .workflow-step-number::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(96, 165, 250, 0.2)); z-index: -1; opacity: 0; transition: opacity 0.3s ease; } .workflow-step:hover .workflow-step-number::after { opacity: 1; } /* Step Content */ .workflow-step-content { flex: 1; display: flex; align-items: center; gap: 16px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.7)), radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.05), transparent 50%); border: 1.5px solid rgba(139, 92, 246, 0.2); border-radius: 14px; padding: 20px; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.12), 0 2px 8px rgba(96, 165, 250, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .workflow-step-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); } .workflow-step-content:hover { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)), radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.08), transparent 50%); border-color: rgba(139, 92, 246, 0.35); box-shadow: 0 8px 28px rgba(139, 92, 246, 0.2), 0 4px 12px rgba(96, 165, 250, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9); transform: translateX(8px); } /* Step Icon */ .workflow-step-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 20%, var(--white) 80%), color-mix(in srgb, var(--purple) 25%, var(--white) 75%)); border: 1.5px solid color-mix(in srgb, var(--blurple) 40%, transparent); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(139, 92, 246, 0.2), 0 2px 8px rgba(96, 165, 250, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: all 0.3s ease; } .workflow-step-content:hover .workflow-step-icon { transform: scale(1.05); box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25), 0 3px 12px rgba(96, 165, 250, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.6); } .workflow-step-icon svg { color: var(--inv-bg-color) !important; stroke: var(--blurple); } /* Step Text */ .workflow-step-text { flex: 1; } .workflow-step-title { font-size: 18px; font-weight: 700; color: var(--darkblue); margin-bottom: 4px; } .workflow-step-desc { font-size: 14px; color: rgba(0, 0, 0, 0.6); line-height: 1.5; } /* Connector Line */ .workflow-connector { position: absolute; left: 23px; top: 48px; width: 2px; height: calc(100% + 8px); background: linear-gradient(180deg, rgba(139, 92, 246, 0.4), rgba(96, 165, 250, 0.3)); z-index: 1; } .workflow-step-4 .workflow-connector { display: none; } /* Animations */ @keyframes fade-in-step { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive */ @media (max-width: 768px) { .workflow-step { flex-direction: column; align-items: flex-start; } .workflow-step-number { width: 40px; height: 40px; font-size: 16px; } .workflow-connector { left: 19px; top: 40px; } .workflow-step-content { flex-direction: column; align-items: flex-start; padding: 16px; } .workflow-step-icon { width: 48px; height: 48px; } .workflow-step-title { font-size: 16px; } .workflow-step-desc { font-size: 13px; } } .share-workflow-container { max-width: 800px; margin: 0 auto; background: color-mix(in srgb, var(--inv-bg-color) 5%, var(--main-bg-color)); border: 2px solid color-mix(in srgb, var(--purple) 20%, transparent); border-radius: 32px; padding: 64px 56px; display: flex; flex-direction: column; align-items: center; gap: 32px; box-shadow: 0 30px 80px rgba(139, 92, 246, 0.15), 0 12px 32px rgba(96, 165, 250, 0.1), inset 0 2px 4px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); backdrop-filter: blur(16px); position: relative; overflow: hidden; } .share-workflow-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent); } /* Step Label */ .share-step-label { color: var(--inv-bg-color) !important; font-size: 12px; font-weight: 700; text-align: center; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.5; position: relative; display: inline-block; width: 100%; } .share-step-label::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent); } /* Common Step Styles */ .share-step { width: 100%; opacity: 0; animation: share-step-flow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; transform-origin: center; } .share-step-1 { animation-delay: 0.2s; } .share-step-2 { animation-delay: 0.6s; } .share-step-3 { animation-delay: 1.0s; } .share-step-4 { animation-delay: 1.4s; } /* Arrow Down */ .share-arrow-down { opacity: 0; animation: share-arrow-flow 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards, share-arrow-pulse 2.5s ease-in-out infinite; position: relative; } .share-arrow-down::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background: radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 70%); border-radius: 50%; z-index: -1; animation: share-arrow-glow 2.5s ease-in-out infinite; } .share-arrow-down:nth-of-type(2) { animation-delay: 0.4s, 0.4s; } .share-arrow-down:nth-of-type(4) { animation-delay: 0.8s, 0.8s; } .share-arrow-down:nth-of-type(6) { animation-delay: 1.2s, 1.2s; } .share-arrow-down svg { color: var(--inv-bg-color) !important; stroke: var(--blurple); filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.25)); } /* Step 1: Templates Grid */ .share-templates-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .share-template-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; transition: all 0.3s ease; padding: 8px; border-radius: 16px; } .share-template-item:hover { background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .share-template-item:hover .share-template-circle { transform: translateY(-4px) scale(1.05); box-shadow: 0 12px 32px rgba(139, 92, 246, 0.25), 0 6px 16px rgba(96, 165, 250, 0.2); } .share-template-circle { position: relative; width: 110px; height: 110px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--inv-bg-color) 8%, transparent), transparent 70%), radial-gradient(circle, rgba(139, 92, 246, 0.08), transparent 60%); border-radius: 50%; padding: 5px; box-shadow: 0 8px 24px rgba(139, 92, 246, 0.18), 0 4px 12px rgba(96, 165, 250, 0.12), inset 0 2px 8px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .share-template-circle::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(96, 165, 250, 0.1)); border-radius: 50%; z-index: -1; opacity: 0; transition: opacity 0.3s ease; } .share-template-item:hover .share-template-circle::before { opacity: 1; } .share-circle-chart { width: 100%; height: 100%; filter: drop-shadow(0 6px 16px rgba(139, 92, 246, 0.2)); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .share-template-active .share-circle-chart { filter: drop-shadow(0 8px 24px rgba(102, 126, 234, 0.4)); } .share-template-item:hover .share-circle-chart { filter: drop-shadow(0 12px 32px rgba(139, 92, 246, 0.35)); } /* Stage nodes */ .share-circle-chart circle[r="5"] { transition: all 0.3s ease; stroke: color-mix(in srgb, var(--main-bg-color) 90%, transparent); stroke-width: 2.5; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); } .share-template-item:hover .share-circle-chart circle[r="5"] { r: 7; stroke-width: 3; } .share-template-check { position: absolute; top: -6px; right: -6px; width: 28px; height: 28px; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.5), 0 2px 8px rgba(96, 165, 250, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); z-index: 10; animation: pop-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s backwards; } .share-template-name { font-size: 13px; font-weight: 600; color: var(--inv-bg-color) !important; text-align: center; } /* Step 2: Customer Input */ .share-customer-input { display: flex; flex-direction: column; gap: 12px; } .share-input-field { background: color-mix(in srgb, var(--inv-bg-color) 5%, var(--main-bg-color)); border: 1.5px solid color-mix(in srgb, var(--purple) 25%, transparent); border-radius: 14px; padding: 18px 22px; font-size: 16px; font-weight: 600; color: var(--inv-bg-color) !important; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.12), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent); transition: all 0.3s ease; } .share-input-field:hover { border-color: color-mix(in srgb, var(--purple) 40%, transparent); box-shadow: 0 6px 24px rgba(139, 92, 246, 0.18), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .share-input-text { animation: typing 1s steps(20) 1.2s forwards; overflow: hidden; white-space: nowrap; width: 0; } .share-crm-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(59, 130, 246, 0.15)); border: 1.5px solid rgba(96, 165, 250, 0.3); border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--inv-bg-color) !important; align-self: flex-start; box-shadow: 0 4px 12px rgba(96, 165, 250, 0.15); transition: all 0.3s ease; } .share-crm-badge:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(96, 165, 250, 0.2); } .share-crm-badge svg { color: var(--inv-bg-color) !important; stroke: var(--blurple); } /* Step 3: Participants */ .share-participants-list { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .share-participant-chip { display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--inv-bg-color) 5%, var(--main-bg-color)); border: 1.5px solid color-mix(in srgb, var(--purple) 25%, transparent); border-radius: 24px; padding: 8px 16px 8px 8px; font-size: 14px; font-weight: 600; color: var(--inv-bg-color) !important; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.15), 0 2px 8px rgba(96, 165, 250, 0.1), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent); animation: pop-in 0.4s ease-out; transition: all 0.3s ease; } .share-participant-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.2), 0 3px 12px rgba(96, 165, 250, 0.15), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border-color: color-mix(in srgb, var(--purple) 35%, transparent); } .share-participant-chip:nth-child(1) { animation-delay: 1.5s; opacity: 0; animation-fill-mode: forwards; } .share-participant-chip:nth-child(2) { animation-delay: 1.7s; opacity: 0; animation-fill-mode: forwards; } .share-participant-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3); } .share-add-button { display: flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--inv-bg-color) 4%, var(--main-bg-color)); border: 2px dashed color-mix(in srgb, var(--purple) 35%, transparent); border-radius: 24px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--inv-bg-color) !important; cursor: pointer; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1); transition: all 0.3s ease; } .share-add-button:hover { background: linear-gradient(to bottom, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.08)); border-color: rgba(139, 92, 246, 0.5); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(139, 92, 246, 0.2); } .share-add-button svg { color: var(--inv-bg-color) !important; stroke: var(--blurple); } /* Step 4: AI Panel */ .share-ai-panel { position: relative; background: color-mix(in srgb, var(--inv-bg-color) 5%, var(--main-bg-color)); border: 1.5px solid color-mix(in srgb, var(--purple) 25%, transparent); border-radius: 18px; padding: 24px; display: flex; align-items: center; gap: 16px; box-shadow: 0 12px 40px rgba(139, 92, 246, 0.18), 0 6px 20px rgba(96, 165, 250, 0.12), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent); backdrop-filter: blur(10px); overflow: hidden; } .share-ai-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.1), transparent 60%); pointer-events: none; z-index: 0; } .share-ai-panel > * { position: relative; z-index: 1; } .share-ai-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--blurple), var(--purple)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4), 0 2px 8px rgba(96, 165, 250, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); animation: pulse-glow 2s ease-in-out infinite; } .share-ai-icon svg { color: #ffffff; filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.3)); } .share-ai-status { flex: 1; } .share-ai-text { font-size: 14px; font-weight: 600; color: var(--inv-bg-color) !important; margin-bottom: 10px; letter-spacing: -0.01em; } .share-ai-progress { width: 100%; height: 8px; background: color-mix(in srgb, var(--inv-bg-color) 8%, var(--main-bg-color)); border-radius: 4px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); position: relative; } .share-ai-progress::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--blurple), var(--purple)); border-radius: 4px; box-shadow: 0 0 12px rgba(139, 92, 246, 0.4); animation: progress-fill-clip 2.5s ease-out 2s forwards; clip-path: inset(0 100% 0 0); } .share-ai-progress-bar { display: none; } /* Animations */ @keyframes fade-in-step { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in-arrow { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse-arrow-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes pop-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4), 0 2px 8px rgba(96, 165, 250, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); } 50% { box-shadow: 0 8px 28px rgba(139, 92, 246, 0.6), 0 4px 12px rgba(96, 165, 250, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); } } /* Dynamic Share Workflow Animations */ @keyframes share-step-flow { 0% { opacity: 0; transform: translateY(30px) scale(0.95); } 60% { opacity: 0.8; transform: translateY(-5px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes share-arrow-flow { 0% { opacity: 0; transform: translateY(-15px) scale(0.8); } 60% { opacity: 0.9; transform: translateY(3px) scale(1.1); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes share-arrow-pulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } @keyframes share-arrow-glow { 0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); } } @keyframes progress-fill { from { width: 0; } to { width: 100%; } } /* Responsive */ @media (max-width: 768px) { .share-journeys-section { padding: 60px 20px; } .share-workflow-container { padding: 40px 24px; border-radius: 20px; } .share-templates-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .share-template-circle { width: 80px; height: 80px; } .share-template-name { font-size: 11px; } .share-participants-list { flex-direction: column; align-items: stretch; } .share-ai-panel { padding: 20px; border-radius: 16px; } .share-ai-icon { width: 44px; height: 44px; } .workflow-step-content { padding: 16px; border-radius: 12px; } .workflow-step-icon { width: 48px; height: 48px; } .workflow-step-number { width: 42px; height: 42px; font-size: 18px; } } @media (max-width: 480px) { .share-journeys-section { padding: 40px 16px; } .share-workflow-container { padding: 30px 20px; border-radius: 18px; } .share-templates-grid { gap: 12px; } .share-template-circle { width: 70px; height: 70px; } .share-template-check { width: 24px; height: 24px; font-size: 14px; } .share-input-field { padding: 14px 18px; font-size: 14px; border-radius: 12px; } .share-participant-chip { padding: 6px 12px 6px 6px; font-size: 13px; } .share-participant-avatar { width: 28px; height: 28px; font-size: 11px; } .share-ai-panel { padding: 16px; flex-direction: column; text-align: center; } .share-ai-icon { width: 40px; height: 40px; } .share-ai-text { font-size: 13px; } .workflow-step { gap: 12px; } .workflow-step-content { padding: 12px; flex-direction: column; align-items: flex-start; } .workflow-step-icon { width: 42px; height: 42px; } .workflow-step-number { width: 36px; height: 36px; font-size: 16px; } .workflow-step-title { font-size: 16px; } .workflow-step-desc { font-size: 13px; } } /* ============================================ Navigate Journeys Section (3) ============================================ */ /* Stage Icon Styles */ .stage-icon { width: 3rem; height: 3rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--inv-bg-color) !important; } .stage-icon--discovery { background: linear-gradient(160deg, color-mix(in srgb, var(--purple) 28%, transparent) 0%, color-mix(in srgb, var(--blurple) 12%, transparent) 100%); border: 0.5px solid color-mix(in srgb, var(--purple) 36%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 16%, transparent), 0 3px 16px color-mix(in srgb, var(--purple) 20%, transparent); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } .stage-icon--experience { background: linear-gradient(160deg, color-mix(in srgb, var(--blurple) 28%, transparent) 0%, color-mix(in srgb, var(--purple) 12%, transparent) 100%); border: 0.5px solid color-mix(in srgb, var(--blurple) 36%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 16%, transparent), 0 3px 16px color-mix(in srgb, var(--blurple) 20%, transparent); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } .stage-icon--scope { background: linear-gradient(160deg, color-mix(in srgb, var(--lightblue) 28%, transparent) 0%, color-mix(in srgb, var(--purple) 12%, transparent) 100%); border: 0.5px solid color-mix(in srgb, var(--lightblue) 36%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 16%, transparent), 0 3px 16px color-mix(in srgb, var(--lightblue) 20%, transparent); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } /* Navigate Stage Cards */ .navigate-stage-selector { display: flex; flex-direction: column; gap: 0.25rem; } .navigate-stage-card { transition: all 250ms ease; padding: 0.75rem 0.875rem; cursor: pointer; border: none; border-left: 2.5px solid transparent; position: relative; align-items: center; background: transparent; } .navigate-stage-card:hover { background: rgba(255, 255, 255, 0.03); } .navigate-stage-card.is-active { border-left-color: var(--inv-bg-color); background: rgba(255, 255, 255, 0.03); } .navigate-stage-card.is-active .stage-icon svg { opacity: 1; } .navigate-stage-card:not(.is-active) { opacity: 0.5; } .navigate-stage-card:not(.is-active):hover { opacity: 0.8; } .navigate-stage-hint { font-size: 0.7rem; color: var(--inv-bg-color); opacity: 0.6 !important; text-align: left; margin-top: 1.25rem; letter-spacing: 0.04em; margin-top: 40px !important; padding-left: 30px; font-weight: 600 !important; } /* Navigate Journey Cards */ .navigate-journey-selector { display: flex; flex-direction: column; gap: 8px; } @media (min-width: 1230px) { .navigate-grid { grid-template-columns: repeat(2, 1fr); } } .navigate-journey-card { transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1); padding: 14px 16px; border-radius: 14px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); position: relative; align-items: center; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); } .navigate-journey-card:hover { background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border-color: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); transform: translateX(3px); } .navigate-journey-card.is-active { background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border-color: color-mix(in srgb, var(--blurple) 30%, transparent); box-shadow: 0 4px 24px color-mix(in srgb, var(--blurple) 10%, transparent); } .navigate-journey-card.is-active .stage-icon svg { opacity: 1; } .navigate-journey-card:not(.is-active) { opacity: 0.55; } .navigate-journey-card:not(.is-active):hover { opacity: 0.85; } .navigate-journey-selector:has(.navigate-journey-card:hover) .navigate-journey-card:not(:hover):not(.is-active) { opacity: 0.35; filter: blur(0.5px); } /* Navigate Journey Visualizations */ /* Legacy: this used to override a section-level overflow:hidden so vertical * nodes in the old navigate-journey-viz layout could escape. The v6 mockup * panel doesn't share that container; keeping `overflow-x: hidden` here * was clipping the navigate panel's surrounding glow. Allow both axes to * pass through. */ #navigate { overflow: visible !important; } .navigate-journey-viz { position: relative; width: 100%; min-height: 560px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.5s ease; } .navigate-journey-viz.is-active { opacity: 1; } /* Navigate Ring Container */ .navigate-ring-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; max-width: 95%; max-height: 95%; } .navigate-ring { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.3)); } .progress-ring { transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1); } .stage-marker { transition: all 0.4s ease; cursor: pointer; } .stage-marker:hover { r: 10; opacity: 1 !important; } /* Collaboration Space */ .navigate-collab-space { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 280px; max-width: 70%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 16px; padding: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } .collab-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .stage-name-display { font-size: 18px; font-weight: 700; color: var(--inv-bg-color); margin-bottom: 4px; } .stage-progress { font-size: 12px; color: var(--inv-bg-color); opacity: 0.6; } .collab-participants { margin-bottom: 12px; } .participant-group { margin-bottom: 8px; } .participant-group:last-child { margin-bottom: 0; } .group-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--inv-bg-color); opacity: 0.5; margin-bottom: 8px; } .participant-list { display: flex; flex-direction: column; gap: 6px; } .participant { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.02); transition: all 0.3s ease; } .participant.accent { background: rgba(139, 92, 246, 0.15); border: 1px solid rgba(139, 92, 246, 0.3); } .participant-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--lightblue)); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: white; margin-right: 3px; flex-shrink: 0; } .participant-info { flex: 1; min-width: 0; } .participant-name { font-size: 10px; font-weight: 600; color: var(--inv-bg-color); white-space: nowrap; overflow: hidden; text-align: left; text-overflow: ellipsis; } .participant-title { font-size: 10px; color: var(--inv-bg-color); opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .collab-activities { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .activity-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--inv-bg-color); opacity: 0.5; margin-bottom: 8px; } .activity-list { display: flex; flex-direction: column; gap: 6px; } .activity-item { font-size: 11px; color: var(--inv-bg-color); opacity: 0.8; padding: 6px 8px; background: rgba(255, 255, 255, 0.03); border-radius: 6px; border-left: 2px solid rgba(139, 92, 246, 0.4); } /* AI Navigator Widget Animations */ #ai-navigator-widget { transition: all 0.3s ease; } #nav-probability, #nav-confidence { transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); } #nav-justification { transition: opacity 0.4s ease; } /* Responsive adjustments */ @media (max-width: 1024px) { .navigate-collab-space { width: 240px; padding: 16px; } .stage-name-display { font-size: 16px; } .participant-name { font-size: 11px; } .activity-item { font-size: 10px; } } @media (max-width: 768px) { .navigate-ring-container { width: 300px; height: 300px; } .navigate-collab-space { width: 200px; padding: 12px; } .stage-name-display { font-size: 14px; } .collab-participants, .collab-activities { font-size: 10px; } } .stage-icon--commit { background: linear-gradient(160deg, color-mix(in srgb, var(--blurple) 28%, transparent) 0%, color-mix(in srgb, var(--purple) 12%, transparent) 100%); border: 0.5px solid color-mix(in srgb, var(--blurple) 36%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 16%, transparent), 0 3px 16px color-mix(in srgb, var(--blurple) 20%, transparent); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } .stage-icon--deploy { background: linear-gradient(160deg, color-mix(in srgb, var(--lightblue) 28%, transparent) 0%, color-mix(in srgb, var(--purple) 12%, transparent) 100%); border: 0.5px solid color-mix(in srgb, var(--lightblue) 36%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 16%, transparent), 0 3px 16px color-mix(in srgb, var(--lightblue) 20%, transparent); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } .stage-icon--success { background: linear-gradient(160deg, color-mix(in srgb, var(--purple) 28%, transparent) 0%, color-mix(in srgb, var(--blurple) 12%, transparent) 100%); border: 0.5px solid color-mix(in srgb, var(--purple) 36%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 16%, transparent), 0 3px 16px color-mix(in srgb, var(--purple) 20%, transparent); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } /* ── Meets You Where You Are Section ── */ .meets-section { background: var(--main-bg-color); color: var(--inv-bg-color); padding: 7rem 0; position: relative; overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .meets-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 25% 20%, rgba(99, 102, 241, 0.06), transparent 50%), radial-gradient(circle at 75% 80%, rgba(139, 92, 246, 0.04), transparent 50%); pointer-events: none; } .meets-inner { position: relative; max-width: 960px; margin: 0 auto; padding: 0 1.5rem; } .meets-header { text-align: center; margin-bottom: 4rem; } .meets-kicker { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.4em; text-transform: uppercase; color: #818cf8; margin-bottom: 1rem; } .meets-title { font-size: 2rem; font-weight: 700; color: var(--inv-bg-color); letter-spacing: -0.02em; line-height: 1.15; } /* Mode Cards */ .meets-modes { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 4rem; } .meets-mode-card { border-radius: 20px; padding: 2.25rem; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: row; gap: 2.5rem; align-items: flex-start; } .meets-mode-card:hover { transform: translateY(-3px); } /* Left pane: icon + name + desc (+ Trust Center link for Enterprise) */ .meets-mode-identity { flex: 0 0 220px; } /* Right pane: detail rows, tags, integrations */ .meets-mode-features { flex: 1; min-width: 0; } .meets-mode--lightning { background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 1px solid rgba(99, 102, 241, 0.2); } .meets-mode--lightning:hover { box-shadow: 0 16px 48px rgba(99, 102, 241, 0.1); } .meets-mode--enterprise { background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 1px solid rgba(139, 92, 246, 0.2); } .meets-mode--enterprise:hover { box-shadow: 0 16px 48px rgba(139, 92, 246, 0.1); } .meets-mode-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .meets-mode--lightning .meets-mode-icon { background: rgba(99, 102, 241, 0.12); color: #818cf8; } .meets-mode--enterprise .meets-mode-icon { background: rgba(139, 92, 246, 0.12); color: #a78bfa; } .meets-mode-name { font-size: 1.35rem; font-weight: 700; color: var(--inv-bg-color); margin-bottom: 0.6rem; letter-spacing: -0.01em; } .meets-mode-desc { font-size: 0.95rem; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); line-height: 1.6; margin-bottom: 1.5rem; } .meets-mode-detail { margin-bottom: 1.25rem; } .meets-mode-detail:last-child { margin-bottom: 0; } .meets-mode-label { display: block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); margin-bottom: 0.5rem; } .meets-mode-detail-desc { font-size: 0.75rem; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); line-height: 1.5; margin: 0; } .meets-mode-detail-list { list-style: none; margin: 0; padding: 0; } .meets-mode-detail-list li { position: relative; font-size: 0.75rem; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); line-height: 1.5; padding-left: 1rem; margin-bottom: 0.3rem; } .meets-mode-detail-list li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 4px; height: 4px; border-radius: 50%; background: #818cf8; opacity: 0.6; } .meets-mode-includes { font-size: 0.85rem; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); line-height: 1.55; margin: 0; } .meets-mode-footer { font-size: 0.55rem; font-weight: 500; letter-spacing: 0.08em; color: color-mix(in srgb, var(--inv-bg-color) 22%, transparent); margin: 0.75rem 0 0; } /* Trust Center link inside Enterprise identity pane */ .meets-trust-link { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; color: #a78bfa; text-decoration: none !important; border: 1px solid rgba(139, 92, 246, 0.22); padding: 0.4rem 0.85rem; border-radius: 6px; margin-top: 1.25rem; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; letter-spacing: 0.02em; } .meets-trust-link:hover { background: rgba(139, 92, 246, 0.08); border-color: rgba(139, 92, 246, 0.38); color: #c4b5fd; text-decoration: none !important; } .meets-trust-link svg { flex-shrink: 0; opacity: 0.65; } /* Compact SOC 2 pill inside Enterprise identity pane — matches Trust Center link weight */ .soc2-pill--card { display: flex; justify-content: center; padding: 0.4rem 0.85rem; gap: 0.5rem; margin-top: 0.65rem; border-radius: 6px; background: transparent; box-shadow: none; border-color: rgba(139, 92, 246, 0.22); } .soc2-pill--card:hover { border-color: rgba(139, 92, 246, 0.38); box-shadow: none; background: rgba(139, 92, 246, 0.08); } .soc2-pill--card .soc2-pill-logo { width: 16px; height: 16px; } .soc2-pill--card .soc2-pill-text { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: #a78bfa; text-transform: none; } /* Integration tag logos — double-class selector beats .meets-tag's inline-block */ .meets-tag.meets-tag--int { display: inline-flex; align-items: center; gap: 0.35rem; } .meets-int-logo { display: block; width: 12px; height: 12px; flex-shrink: 0; opacity: 0.7; } .meets-modes-note { text-align: center; font-size: 0.65rem; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); margin: 1.75rem auto 0; max-width: 28rem; line-height: 1.5; } .meets-cta-wrap { text-align: center; margin-top: 1.25rem; } .meets-cta { display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; color: #818cf8; text-decoration: none !important; border: 1px solid rgba(129, 140, 248, 0.25); padding: 0.6rem 2rem; border-radius: 6px; transition: background 0.2s ease, color 0.2s ease; } .meets-cta:hover { background: rgba(129, 140, 248, 0.08); color: #a5b4fc; } /* ---- CRM Bridge Card ---- */ /* ── CRM Bridge — Premium Integration Diagram ── */ .meets-crm-bridge { margin-top: 2.5rem; border-radius: 20px; padding: 2.75rem 2.25rem 2.25rem; background: radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--blurple) 5%, transparent) 0%, transparent 70%), color-mix(in srgb, var(--inv-bg-color) 2%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent); box-shadow: 0 0 50px 10px color-mix(in srgb, var(--blurple) 2%, transparent), 0 12px 40px -8px color-mix(in srgb, var(--blurple) 4%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 3%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--inv-bg-color) 5%, transparent); position: relative; overflow: hidden; } /* Ambient atmosphere behind the bridge */ .meets-crm-bridge::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 40% 60% at 50% 50%, color-mix(in srgb, var(--blurple) 4%, transparent) 0%, transparent 70%); pointer-events: none; animation: meetsBridgeAtmosphere 8s ease-in-out infinite; } @keyframes meetsBridgeAtmosphere { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .meets-bridge-inner { display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr; align-items: start; gap: 0; max-width: 54rem; margin: 0 auto; position: relative; z-index: 1; } /* ── Nodes ── */ .meets-bridge-node { text-align: center; padding: 1.25rem 1rem; border-radius: 16px; background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: border-color 0.4s ease, box-shadow 0.4s ease; } .meets-bridge-node:hover { border-color: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--blurple) 4%, transparent); } .meets-bridge-node--center { position: relative; background: radial-gradient(ellipse 80% 60% at 50% 20%, color-mix(in srgb, var(--blurple) 6%, transparent) 0%, transparent 70%), color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border-color: color-mix(in srgb, var(--blurple) 15%, transparent); box-shadow: 0 0 40px 8px color-mix(in srgb, var(--blurple) 4%, transparent), 0 8px 30px -6px color-mix(in srgb, var(--blurple) 6%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent); } /* ── Icons ── */ .meets-bridge-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.85rem; position: relative; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .meets-bridge-node:hover .meets-bridge-icon { transform: scale(1.08); } .meets-bridge-icon--crm { background: color-mix(in srgb, #3b82f6 12%, transparent); color: #60a5fa; border: 0.5px solid color-mix(in srgb, #3b82f6 15%, transparent); } .meets-bridge-icon--cn { background: color-mix(in srgb, var(--blurple) 15%, transparent); color: #a5b4fc; border: 0.5px solid color-mix(in srgb, var(--blurple) 22%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--blurple) 15%, transparent), 0 0 60px color-mix(in srgb, var(--blurple) 6%, transparent); } /* Spinning arc ring around the CN icon */ .meets-bridge-icon--cn::after { content: ''; position: absolute; inset: -5px; border-radius: 18px; background: conic-gradient( from 0deg, transparent 0deg, transparent 290deg, color-mix(in srgb, var(--blurple) 10%, transparent) 330deg, color-mix(in srgb, var(--blurple) 30%, transparent) 355deg, transparent 360deg ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px), #000 100%, transparent 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px), #000 100%, transparent 100%); animation: aiNodeArcSpin 6s linear infinite; pointer-events: none; } .meets-bridge-icon--buyers { background: color-mix(in srgb, #10b981 12%, transparent); color: #6ee7b7; border: 0.5px solid color-mix(in srgb, #10b981 15%, transparent); } /* ── Node text ── */ .meets-bridge-node-title { font-size: 0.9rem; font-weight: 800; margin-bottom: 0.6rem; letter-spacing: -0.01em; color: var(--inv-bg-color); } .meets-bridge-node--center .meets-bridge-node-title { background: linear-gradient(135deg, var(--inv-bg-color) 0%, color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .meets-bridge-node-list { list-style: none; padding: 0; margin: 0; font-size: 0.74rem; font-weight: 450; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); line-height: 1.85; letter-spacing: 0.01em; } .meets-bridge-node-list li { display: flex; align-items: center; justify-content: center; gap: 0.35rem; } .meets-bridge-node-list li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); flex-shrink: 0; } .meets-bridge-node--center .meets-bridge-node-list li::before { background: color-mix(in srgb, var(--blurple) 40%, transparent); box-shadow: 0 0 6px color-mix(in srgb, var(--blurple) 20%, transparent); } .meets-bridge-node--center .meets-bridge-node-list { color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); font-weight: 500; } /* ── Arrows ── */ .meets-bridge-arrow { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 6rem; padding: 0 0.4rem; position: relative; align-self: center; } .meets-bridge-arrow-svg { width: 100%; height: 22px; color: color-mix(in srgb, var(--blurple) 35%, transparent); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--blurple) 10%, transparent)); overflow: visible; } /* Animated pulse traveling along the arrow lines */ .meets-bridge-arrow-svg line { stroke-dashoffset: 0; animation: meetsBridgeFlow 3s linear infinite; } @keyframes meetsBridgeFlow { from { stroke-dashoffset: 14; } to { stroke-dashoffset: 0; } } .meets-bridge-arrow-label { font-size: 0.62rem; font-weight: 600; color: color-mix(in srgb, var(--blurple) 70%, transparent); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; text-align: center; line-height: 1.3; } .meets-bridge-arrow-label--above { order: -1; margin-bottom: 0.25rem; } .meets-bridge-arrow-label--below { margin-top: 0.25rem; } /* ── Tagline ── */ .meets-bridge-tagline { text-align: center; font-size: 0.82rem; font-weight: 500; color: color-mix(in srgb, var(--inv-bg-color) 42%, transparent); margin-top: 2rem; letter-spacing: 0.01em; line-height: 1.6; position: relative; z-index: 1; padding-top: 1.25rem; border-top: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent); } .meets-mode-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .meets-tag { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 72%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent); } .meets-tag--more { color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); background: transparent; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent); letter-spacing: 0.1em; } .meets-tag--int { cursor: pointer; transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .meets-tag--int:hover { background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent); border-color: color-mix(in srgb, var(--inv-bg-color) 16%, transparent); color: color-mix(in srgb, var(--inv-bg-color) 85%, transparent); } .meets-tag--int.is-active { background: color-mix(in srgb, var(--inv-bg-color) 9%, transparent); border-color: color-mix(in srgb, var(--inv-bg-color) 22%, transparent); color: var(--inv-bg-color); box-shadow: 0 0 12px rgba(0, 0, 0, 0.06); } .meets-int-desc { margin-top: 0.85rem; padding: 0.7rem 1rem; overflow: hidden; font-size: 0.78rem; font-weight: 500; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); line-height: 1.55; background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent); border-left: 2px solid rgba(129, 140, 248, 0.35); border-radius: 0 6px 6px 0; transition: opacity 0.3s ease; } .meets-int-desc span { color: #c4b5fd; font-weight: 700; letter-spacing: 0.01em; } .meets-tag--platform { display: inline-flex; align-items: center; gap: 5px; margin-top: 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; color: #818cf8; background: rgba(129, 140, 248, 0.08); border: 1px solid rgba(129, 140, 248, 0.15); padding: 0.2rem 0.65rem; border-radius: 20px; } .meets-tag--platform svg { opacity: 0.5; } /* Integrations Grid */ .meets-integrations { max-width: 540px; margin: 0 auto 2.5rem; display: flex; flex-direction: column; gap: 0; opacity: 0.6; } .meets-int-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.03); } .meets-int-row:last-of-type { border-bottom: none; } .meets-int-cat { font-size: 0.55rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #475569; min-width: 110px; flex-shrink: 0; } .meets-int-name { font-size: 0.75rem; color: #94a3b8; font-weight: 500; } .meets-int-sep { color: #334155; font-size: 0.6rem; } .meets-int-more { text-align: center; font-size: 0.55rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #334155; padding-top: 1.25rem; } /* Footer */ .meets-footer { text-align: center; font-size: 0.95rem; color: #64748b; max-width: 600px; margin: 0 auto; line-height: 1.65; } /* Responsive */ @media (max-width: 768px) { .meets-section { padding: 4rem 0; } .meets-header { margin-bottom: 2.5rem; } .meets-title { font-size: 2rem; letter-spacing: -0.02em; line-height: 1.15; } .meets-modes { gap: 1rem; margin-bottom: 2.5rem; } .meets-mode-card { padding: 1.5rem; flex-direction: column; gap: 1.5rem; } .meets-mode-identity { flex: none; } .meets-crm-bridge { padding: 1.75rem 1.25rem; } .meets-bridge-inner { grid-template-columns: 1fr; gap: 0.75rem; } .meets-bridge-node { padding: 1rem 0.85rem; } .meets-bridge-arrow { min-width: unset; padding: 0.25rem 0; } .meets-bridge-arrow-svg { width: 20px; height: 36px; transform: rotate(90deg); } .meets-bridge-arrow-label { font-size: 0.58rem; } .meets-mode-desc { text-align: left; } .meets-int-cat { min-width: 100px; font-size: 0.6rem; } .meets-int-row { flex-wrap: wrap; gap: 0.35rem; } } /* ── ROI Section — Light Theme ── */ .roi-section { background: var(--main-bg-color); color: var(--inv-bg-color); padding: 7rem 0 5rem; position: relative; overflow: hidden; } .roi-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 800px; height: 500px; background: radial-gradient(ellipse, color-mix(in srgb, var(--purple) 6%, transparent) 0%, transparent 70%); pointer-events: none; } .roi-inner { position: relative; max-width: 960px; margin: 0 auto; padding: 0 1.5rem; } .roi-header { text-align: center; margin-bottom: 3.5rem; } .roi-kicker { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.4em; text-transform: uppercase; color: var(--purple); margin-bottom: 1rem; } .roi-title { font-size: 2.25rem; font-weight: 700; color: var(--inv-bg-color); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 1rem; } .roi-subtitle { font-size: 1.05rem; color: var(--inv-bg-color); opacity: 0.55; max-width: 720px; margin: 0 auto; line-height: 1.6; } /* Multiplier Cards */ .roi-multiplier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 3.5rem; } .roi-multiplier-card { display: flex; gap: 1rem; padding: 1.5rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); background: color-mix(in srgb, var(--purple) 2%, var(--main-bg-color)); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .roi-multiplier-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--purple) 20%, transparent); box-shadow: 0 12px 40px color-mix(in srgb, var(--purple) 8%, transparent); } .roi-card-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--purple) 10%, var(--main-bg-color)); color: var(--purple); } .roi-card-body { flex: 1; min-width: 0; } .roi-card-title { font-size: 0.95rem; font-weight: 700; color: var(--inv-bg-color); margin-bottom: 0.35rem; } .roi-card-desc { font-size: 0.8rem; color: var(--inv-bg-color); opacity: 0.5; line-height: 1.6; margin: 0; } .roi-card-source { display: block; font-size: 0.6rem; color: var(--inv-bg-color); opacity: 0.25; font-style: italic; margin-top: 0.5rem; } /* Stats Bar */ .roi-stats-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; padding: 2.25rem 2.5rem 2.75rem; border-radius: 20px; background: color-mix(in srgb, var(--purple) 3%, var(--main-bg-color)); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); margin-bottom: 3.5rem; position: relative; } .roi-source-note { position: absolute; bottom: 0.6rem; right: 1rem; font-size: 0.5rem; color: var(--inv-bg-color); opacity: 0.2; letter-spacing: 0.02em; } .roi-stat { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .roi-stat-source { font-size: 0.5rem; color: var(--inv-bg-color); opacity: 0.2; font-style: italic; margin-top: 0.15rem; } .roi-stat-value { font-size: 2.325rem; font-weight: 800; color: var(--purple); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .roi-stat-unit { font-size: 1.4rem; font-weight: 700; color: var(--purple); opacity: 0.8; } .roi-stat-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inv-bg-color); opacity: 0.45; } .roi-stat-divider { width: 1px; height: 48px; background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); flex-shrink: 0; } /* Testimonial Carousel */ .roi-testimonials { text-align: center; margin-bottom: 1rem; } .roi-testimonial-track { position: relative; min-height: 120px; display: flex; align-items: center; justify-content: center; } .roi-quote { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; margin: 0; padding: 0; border: none; } .roi-quote.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; position: relative; } .roi-quote p { font-size: 1.05rem; font-weight: 400; color: var(--inv-bg-color); opacity: 0.6; line-height: 1.7; max-width: 600px; margin: 0 0 0.75rem; font-style: italic; } .roi-quote cite { font-size: 0.7rem; font-weight: 600; font-style: normal; color: var(--purple); letter-spacing: 0.08em; text-transform: uppercase; } .roi-quote-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; } .roi-dot { all: unset; width: 5px; height: 5px; border-radius: 50%; background: var(--inv-bg-color); opacity: 0.15; cursor: pointer; transition: opacity 0.3s ease, transform 0.3s ease; } .roi-dot:hover { opacity: 0.35; } .roi-dot.is-active { opacity: 0.6; transform: scale(1.3); background: var(--purple); } .roi-privacy-note { font-size: 0.65rem; color: var(--inv-bg-color); opacity: 0.25; margin-top: 1rem; letter-spacing: 0.03em; } /* ── Final CTA — Light Theme ── */ .final-cta-section { background: linear-gradient( 180deg, var(--main-bg-color) 0%, color-mix(in srgb, var(--purple) 4%, var(--main-bg-color)) 50%, var(--main-bg-color) 100% ); padding: 6rem 0 7rem; position: relative; overflow: hidden; } .final-cta-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 400px; background: radial-gradient(ellipse, color-mix(in srgb, var(--purple) 8%, transparent) 0%, transparent 70%); pointer-events: none; } .final-cta-inner { position: relative; max-width: 640px; margin: 0 auto; padding: 0 1.5rem; text-align: center; } .final-cta-title { font-size: 2.6rem; font-weight: 800; color: var(--inv-bg-color); letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 1.25rem; } .final-cta-subtitle { font-size: 1.05rem; color: var(--inv-bg-color); opacity: 0.45; line-height: 1.6; max-width: 480px; margin: 0 auto 2.5rem; } .final-cta-btn { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.9rem 2.5rem; border-radius: 12px; background: var(--purple); color: #ffffff !important; font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none !important; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; box-shadow: 0 4px 24px color-mix(in srgb, var(--purple) 30%, transparent); } .final-cta-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 40px color-mix(in srgb, var(--purple) 40%, transparent); background: color-mix(in srgb, var(--purple) 85%, var(--blurple)); } .final-cta-btn svg { transition: transform 0.3s ease; } .final-cta-btn:hover svg { transform: translateX(3px); } /* ── ROI + CTA Responsive ── */ @media (max-width: 768px) { .roi-section { padding: 4rem 0 3rem; } .roi-inner { padding: 0 0.8rem; } .roi-header { margin-bottom: 2.5rem; } .roi-title { font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.15; } .roi-multiplier-grid { grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 2.5rem; } .roi-stats-bar { flex-direction: column; gap: 1.5rem; padding: 1.5rem; } .roi-stat-divider { width: 48px; height: 1px; } .roi-stat-value { font-size: 1.875rem; } .roi-card-desc { text-align: left; } .roi-quote p { font-size: 0.95rem; } .final-cta-section { padding: 4rem 0 5rem; } .final-cta-title { font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.15; } .final-cta-subtitle { margin-bottom: 2rem; } } @media (max-width: 480px) { .roi-multiplier-card { padding: 1.25rem; } .roi-card-icon { width: 36px; height: 36px; min-width: 36px; } } /* ── Journey V2 — Start Your Journey ── */ .journey-v2 { background: #000000; color: #f1f5f9; padding: 7rem 0 6rem; position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; } .journey-v2::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 15%, rgba(99, 102, 241, 0.06) 0%, rgba(99, 102, 241, 0.03) 25%, rgba(99, 102, 241, 0) 50%), radial-gradient(circle at 70% 85%, rgba(139, 92, 246, 0.04) 0%, rgba(139, 92, 246, 0.02) 25%, rgba(139, 92, 246, 0) 50%); pointer-events: none; } .journey-v2-inner { position: relative; max-width: 760px; margin: 0 auto; padding: 0 1.5rem; width: 100%; } .journey-v2-header { text-align: center; margin-bottom: 3.5rem; } .journey-v2-kicker { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.4em; text-transform: uppercase; color: #818cf8; margin-bottom: 1rem; } .journey-v2-title { font-size: 2.25rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.15; margin: 0; } .journey-v2-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .journey-v2-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.5rem 2rem; border-radius: 16px; background: rgba(255, 255, 255, 0.03); text-decoration: none !important; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .journey-v2-card:hover { transform: translateY(-3px); } .journey-v2-card--customer { border: 1px solid rgba(148, 163, 184, 0.15); } .journey-v2-card--customer:hover { border-color: rgba(99, 102, 241, 0.3); box-shadow: 0 16px 48px rgba(99, 102, 241, 0.08); } .journey-v2-card--seller { border: 1px solid rgba(139, 92, 246, 0.25); } .journey-v2-card--seller:hover { box-shadow: 0 16px 48px rgba(139, 92, 246, 0.1); } .journey-v2-card-icon { color: #818cf8; margin-bottom: 1.25rem; opacity: 0.7; } .journey-v2-card-title { font-size: 1.35rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; margin: 0 0 0.75rem; } .journey-v2-card-desc { font-size: 0.9rem; color: #94a3b8; line-height: 1.6; margin: 0 0 1.75rem; max-width: 280px; } .journey-v2-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.5rem; border-radius: 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; transition: all 0.25s ease; margin-top: auto; } .journey-v2-cta--customer { background: rgba(255, 255, 255, 0.06); color: #cbd5e1; border: 1px solid rgba(255, 255, 255, 0.1); } .journey-v2-card:hover .journey-v2-cta--customer { background: rgba(255, 255, 255, 0.1); color: #fff; } .journey-v2-cta--seller { background: linear-gradient(135deg, rgba(79, 70, 229, 0.85), rgba(99, 102, 241, 0.85)); color: #ffffff; border: 1px solid transparent; } .journey-v2-card:hover .journey-v2-cta--seller { background: linear-gradient(135deg, rgba(67, 56, 202, 0.95), rgba(79, 70, 229, 0.95)); box-shadow: 0 6px 24px rgba(99, 102, 241, 0.25); } .journey-v2-cta svg { transition: transform 0.3s ease; } .journey-v2-card:hover .journey-v2-cta svg { transform: translateX(3px); } @media (max-width: 768px) { .journey-v2 { padding: 4rem 0 3rem; min-height: auto; } .journey-v2-header { margin-bottom: 2.5rem; } .journey-v2-title { font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.15; } .journey-v2-cards { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } } /* ── Pricing V2 — Premium Black ── */ .pricing-v2, .pricing { background: #000000 !important; color: #f1f5f9; padding: 7rem 0 6rem; position: relative; overflow: hidden; min-height: 100vh; } .pricing-v2::before, .pricing::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 15%, rgba(99, 102, 241, 0.06) 0%, rgba(99, 102, 241, 0.03) 25%, rgba(99, 102, 241, 0) 50%), radial-gradient(circle at 70% 85%, rgba(139, 92, 246, 0.04) 0%, rgba(139, 92, 246, 0.02) 25%, rgba(139, 92, 246, 0) 50%); pointer-events: none; } .pricing-v2-inner { position: relative; max-width: 1360px; margin: 0 auto; padding: 0 1.5rem; } /* Header */ .pricing-v2-header { text-align: center; margin-bottom: 1.5rem; } .pricing-v2-kicker { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.4em; text-transform: uppercase; color: #818cf8; margin-bottom: 1rem; } .pricing-v2-title { font-size: 2.75rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 1.25rem; } .pricing-v2-subtitle { font-size: 1rem; color: #94a3b8; line-height: 1.65; max-width: none; margin: 0 auto; } /* Cards Grid */ .pricing-v2-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 3rem; } .pricing-v2-card { border-radius: 16px; padding: 1.75rem; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; background: rgba(255, 255, 255, 0.03); } .pricing-v2-card:hover { transform: translateY(-3px); } .pricing-v2-card--guest { border: 1px solid rgba(148, 163, 184, 0.15); } .pricing-v2-card--guest:hover { box-shadow: 0 16px 48px rgba(148, 163, 184, 0.06); } .pricing-v2-card--pro { border: 1px solid rgba(99, 102, 241, 0.25); } .pricing-v2-card--pro:hover { box-shadow: 0 16px 48px rgba(99, 102, 241, 0.1); } .pricing-v2-card--enterprise { border: 1px solid rgba(139, 92, 246, 0.25); } .pricing-v2-card--enterprise:hover { box-shadow: 0 16px 48px rgba(139, 92, 246, 0.1); } /* Card Head */ .pricing-v2-card-head { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .pricing-v2-tier { display: block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #64748b; margin-bottom: 0.5rem; } .pricing-v2-price { display: flex; align-items: baseline; gap: 0.1rem; } .pricing-v2-currency { font-size: 1.1rem; font-weight: 600; color: #94a3b8; align-self: flex-start; margin-top: 0.2rem; } .pricing-v2-amount { font-size: 2.5rem; font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1; } .pricing-v2-amount--text { font-size: 2rem; } .pricing-v2-period { font-size: 0.85rem; font-weight: 500; color: #64748b; margin-left: 0.1rem; } /* Features */ .pricing-v2-features { flex: 1; margin-bottom: 1.5rem; } .pricing-v2-features-label { display: block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #64748b; margin-bottom: 0.75rem; } .pricing-v2-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; } .pricing-v2-list li { font-size: 0.85rem; color: #cbd5e1; line-height: 1.45; padding-left: 1.25rem; position: relative; } .pricing-v2-list li::before { content: ""; position: absolute; left: 0; top: 0.45rem; width: 6px; height: 6px; border-radius: 50%; background: #818cf8; opacity: 0.6; } .pricing-v2-list li strong { color: #fff; font-weight: 600; } /* CTA Buttons */ .pricing-v2-cta { display: block; text-align: center; padding: 0.65rem 1.25rem; border-radius: 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; text-decoration: none !important; color: #ffffff !important; transition: all 0.25s ease; margin-top: auto; } .pricing-v2-cta--guest { background: rgba(255, 255, 255, 0.06); color: #cbd5e1; border: 1px solid rgba(255, 255, 255, 0.1); } .pricing-v2-cta--guest:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .pricing-v2-cta--pro { background: linear-gradient(135deg, rgba(79, 70, 229, 0.85), rgba(99, 102, 241, 0.85)); color: #ffffff; border: 1px solid transparent; } .pricing-v2-cta--pro:hover { background: linear-gradient(135deg, rgba(67, 56, 202, 0.95), rgba(79, 70, 229, 0.95)); box-shadow: 0 6px 24px rgba(99, 102, 241, 0.25); color: #ffffff; } .pricing-v2-cta--enterprise { background: rgba(139, 92, 246, 0.12); color: #a78bfa; border: 1px solid rgba(139, 92, 246, 0.25); } .pricing-v2-cta--enterprise:hover { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; } /* Card note */ .pricing-v2-card-note { text-align: center; margin: 0.75rem 0 0; font-size: 0.75rem; color: #64748b; } .pricing-v2-card-note a { color: #818cf8 !important; text-decoration: none !important; font-weight: 600; transition: color 0.2s ease; } .pricing-v2-card-note a:hover { color: #a5b4fc !important; } .pricing-v2-credits-text { font-size: 0.9rem; color: #94a3b8; margin: 0; } .pricing-v2-credits-text a { color: #818cf8 !important; text-decoration: none !important; font-weight: 600; transition: color 0.2s ease; } .pricing-v2-credits-text a:hover { color: #a5b4fc !important; } /* Highlights */ .pricing-v2-highlights { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; } .pricing-v2-highlight { display: flex; align-items: center; gap: 0.6rem; color: #94a3b8; font-size: 0.85rem; font-weight: 600; } .pricing-v2-highlight svg { color: #818cf8; flex-shrink: 0; } /* Responsive */ @media (max-width: 900px) { .pricing-v2-cards { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } } @media (max-width: 768px) { .pricing-v2 { padding: 4rem 0 3rem; } .pricing-v2-title { font-size: 2rem; letter-spacing: -0.02em; line-height: 1.15; } .pricing-v2-highlights { flex-direction: column; align-items: center; gap: 1rem; } } /* ── Documents V2 ── */ .docs-v2 { background: var(--main-bg-color); color: var(--inv-bg-color); padding: 7rem 0 6rem; position: relative; overflow: hidden; min-height: 100vh; } .docs-v2::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 15%, rgba(99, 102, 241, 0.06) 0%, rgba(99, 102, 241, 0.03) 25%, rgba(99, 102, 241, 0) 50%), radial-gradient(circle at 70% 85%, rgba(139, 92, 246, 0.04) 0%, rgba(139, 92, 246, 0.02) 25%, rgba(139, 92, 246, 0) 50%); pointer-events: none; } .docs-v2-inner { position: relative; max-width: 960px; margin: 0 auto; padding: 0 1.5rem; } .docs-v2-header { text-align: center; margin-bottom: 4rem; } .docs-v2-kicker { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.4em; text-transform: uppercase; color: var(--purple); margin-bottom: 1rem; } .docs-v2-subtitle { font-size: 1rem; color: var(--inv-bg-color); opacity: 0.6; line-height: 1.65; } /* ---- FAQ V2 ---- */ .faq-v2-section { background: var(--main-bg-color); color: var(--inv-bg-color); min-height: 100vh; } .faq .container-xs .faq-v2-kicker { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.4em; text-transform: uppercase; color: var(--purple); margin-bottom: 1rem; text-align: center !important; } .faq-v2-subtitle { font-size: 1rem; color: var(--inv-bg-color); opacity: 0.6; line-height: 1.65; text-align: center; } .faq .section-header.center-content { padding-bottom: 0.5rem; } .docs-v2-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .docs-v2-card { border-radius: 20px; padding: 2.25rem; display: flex; flex-direction: column; background: var(--off-bg-color); border: 1px solid var(--grey-accent-color); transition: transform 0.3s ease, box-shadow 0.3s ease; } .docs-v2-card:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(99, 102, 241, 0.06); } .docs-v2-card-body { flex: 1; margin-bottom: 1.5rem; } .docs-v2-card-title { font-size: 1.2rem; font-weight: 700; color: var(--inv-bg-color); margin-bottom: 0.5rem; letter-spacing: -0.01em; } .docs-v2-card-desc { font-size: 0.9rem; color: var(--inv-bg-color); opacity: 0.6; line-height: 1.55; margin: 0; } .docs-v2-cta { display: block; text-align: center; padding: 0.55rem 1.25rem; border-radius: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; text-decoration: none !important; transition: all 0.25s ease; margin-top: auto; background: transparent; } .docs-v2-cta:hover { transform: translateY(-1px); } .docs-v2-card:nth-child(4n+1) .docs-v2-cta { color: var(--middleBlue) !important; border: 1px solid var(--middleBlue); } .docs-v2-card:nth-child(4n+1) .docs-v2-cta:hover { background: var(--middleBlue); color: #ffffff !important; } .docs-v2-card:nth-child(4n+2) .docs-v2-cta { color: var(--purple) !important; border: 1px solid var(--purple); } .docs-v2-card:nth-child(4n+2) .docs-v2-cta:hover { background: var(--purple); color: #ffffff !important; } .docs-v2-card:nth-child(4n+3) .docs-v2-cta { color: var(--blurple) !important; border: 1px solid var(--blurple); } .docs-v2-card:nth-child(4n+3) .docs-v2-cta:hover { background: var(--blurple); color: #ffffff !important; } .docs-v2-card:nth-child(4n+4) .docs-v2-cta { color: var(--pink) !important; border: 1px solid var(--pink); } .docs-v2-card:nth-child(4n+4) .docs-v2-cta:hover { background: var(--pink); color: #ffffff !important; } @media (max-width: 640px) { .docs-v2 { padding: 4rem 0 3rem; min-height: auto; } .docs-v2-header { margin-bottom: 2.5rem; } .docs-v2-cards { grid-template-columns: 1fr; } } /* ---- Contact V2 ---- */ .contact-v2 { background: var(--main-bg-color); color: var(--inv-bg-color); padding: 7rem 0 6rem; min-height: 100vh; position: relative; overflow: hidden; } .contact-v2-inner { max-width: 680px; margin: 0 auto; padding: 0 1.5rem; text-align: center; } .contact-v2-kicker { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.4em; text-transform: uppercase; color: var(--purple); margin-bottom: 1rem; } .contact-v2-headline { font-size: 2.2rem; font-weight: 800; color: var(--inv-bg-color); line-height: 1.2; margin-bottom: 1rem; } .contact-v2-subtitle { font-size: 1rem; color: var(--inv-bg-color); opacity: 0.6; line-height: 1.65; } .contact-v2-header { margin-bottom: 3rem; } .contact-v2-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .contact-v2-card { background: var(--off-bg-color); border: 1px solid var(--grey-accent-color); border-radius: 16px; padding: 2.5rem 1.5rem 2rem; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; text-align: center; } .contact-v2-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(99, 102, 241, 0.08); } .contact-v2-card-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .contact-v2-card--gmail .contact-v2-card-icon { background: rgba(120, 115, 245, 0.1); color: var(--purple); } .contact-v2-card--copy .contact-v2-card-icon { background: rgba(86, 154, 241, 0.1); color: var(--blurple); } .contact-v2-card-title { font-size: 1.05rem; font-weight: 700; color: var(--inv-bg-color); margin-bottom: 0.5rem; } .contact-v2-card-desc { font-size: 0.85rem; color: var(--inv-bg-color); opacity: 0.5; line-height: 1.5; margin-bottom: 1.5rem; } .contact-v2-cta { display: inline-block; padding: 0.6rem 1.5rem; border-radius: 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; transition: all 0.25s ease; text-decoration: none !important; margin-top: auto; background: transparent; border: 1px solid; } .contact-v2-cta--gmail { color: var(--purple) !important; border-color: var(--purple); } .contact-v2-cta--gmail:hover { background: var(--purple); color: #ffffff !important; } .contact-v2-cta--copy { color: var(--blurple) !important; border-color: var(--blurple); } .contact-v2-cta--copy:hover { background: var(--blurple); color: #ffffff !important; } @media (max-width: 768px) { .contact-v2 { padding: 4rem 0 3rem; } .contact-v2-header { margin-bottom: 2.5rem; } .contact-v2-cards { grid-template-columns: 1fr; } } /* ── SweetAlert2 themed overrides (shared CN style) ── */ .swal2-cn-popup { background: var(--main-bg-color) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border-radius: 16px !important; padding: 2.25rem 2rem !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12); } .swal2-cn-title { font-size: 1.35rem !important; font-weight: 700 !important; color: var(--inv-bg-color) !important; letter-spacing: -0.01em !important; padding: 0 !important; margin: 0 0 1rem !important; } .swal2-cn-html { font-size: 0.85rem !important; color: var(--inv-bg-color) !important; opacity: 0.6; line-height: 1.6 !important; padding: 0 !important; margin: 0 0 0.5rem !important; } .swal2-cn-html b { color: var(--inv-bg-color); font-weight: 700; opacity: 1; } .swal2-cn-confirm { background: var(--purple) !important; color: #ffffff !important; border: none !important; border-radius: 10px !important; font-size: 0.8rem !important; font-weight: 700 !important; letter-spacing: 0.03em !important; padding: 0.65rem 1.75rem !important; box-shadow: 0 4px 24px color-mix(in srgb, var(--purple) 30%, transparent) !important; transition: all 0.25s ease !important; } .swal2-cn-confirm:hover { background: color-mix(in srgb, var(--purple) 85%, var(--blurple)) !important; box-shadow: 0 8px 32px color-mix(in srgb, var(--purple) 35%, transparent) !important; } .swal2-cn-cancel { background: none !important; color: var(--inv-bg-color) !important; opacity: 0.4; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important; border-radius: 10px !important; font-size: 0.8rem !important; font-weight: 600 !important; padding: 0.65rem 1.75rem !important; transition: all 0.25s ease !important; } .swal2-cn-cancel:hover { opacity: 0.6; border-color: color-mix(in srgb, var(--inv-bg-color) 15%, transparent) !important; } .swal2-cn-input { border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important; border-radius: 10px !important; background: var(--main-bg-color) !important; color: var(--inv-bg-color) !important; font-size: 0.9rem !important; padding: 0.75rem 1rem !important; box-shadow: none !important; } @keyframes swal2-cn-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes swal2-cn-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } } .swal2-cn-show { animation: swal2-cn-in 0.25s ease-out !important; } .swal2-cn-hide { animation: swal2-cn-out 0.2s ease-in !important; } /* ── CSP-compliant utility classes (moved from inline styles) ── */ .svg-nudge-up { transform: translateY(-1px); } .text-subdued { color: var(--inv-bg-color); opacity: 0.7; } .text-subdued-light { color: var(--inv-bg-color); opacity: 0.6; } .fill-purple { fill: var(--purple) !important; } .icon-scale-up { scale: 1.1; } .share-section-header { text-align: center; margin-bottom: 2.5rem; } .share-section-title { text-align: center; } .share-description { text-align: center; margin: 0; color: var(--inv-bg-color); opacity: 0.7; } /* ── JS state classes (CSP-compliant replacements for .style) ── */ .is-hidden { display: none !important; } .is-visible { opacity: 1; transform: translateY(0); } .is-faded { opacity: 0; } .is-clickable { cursor: pointer; } .fade-swap { transition: opacity 280ms ease; } .fade-in-fast { transition: opacity 0.25s ease; opacity: 1; } .fade-in-medium { transition: opacity 0.4s ease; opacity: 1; } .fade-in-slow { transition: opacity 0.5s ease; opacity: 1; } .fade-out-fast { transition: opacity 0.25s ease; opacity: 0; } .fade-out-medium { transition: opacity 0.3s ease; opacity: 0; } .flash-accept { background: rgba(34, 197, 94, 0.3); } .completion-arc-animated { transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Data-attribute driven CSS custom properties (replaces JS style.setProperty) ── */ /* Bar widths: [data-bar-w="N"] → --bar-width: N% */ [data-bar-w="0"] { --bar-width: 0%; } [data-bar-w="1"] { --bar-width: 1%; } [data-bar-w="2"] { --bar-width: 2%; } [data-bar-w="3"] { --bar-width: 3%; } [data-bar-w="4"] { --bar-width: 4%; } [data-bar-w="5"] { --bar-width: 5%; } [data-bar-w="6"] { --bar-width: 6%; } [data-bar-w="7"] { --bar-width: 7%; } [data-bar-w="8"] { --bar-width: 8%; } [data-bar-w="9"] { --bar-width: 9%; } [data-bar-w="10"] { --bar-width: 10%; } [data-bar-w="11"] { --bar-width: 11%; } [data-bar-w="12"] { --bar-width: 12%; } [data-bar-w="13"] { --bar-width: 13%; } [data-bar-w="14"] { --bar-width: 14%; } [data-bar-w="15"] { --bar-width: 15%; } [data-bar-w="16"] { --bar-width: 16%; } [data-bar-w="17"] { --bar-width: 17%; } [data-bar-w="18"] { --bar-width: 18%; } [data-bar-w="19"] { --bar-width: 19%; } [data-bar-w="20"] { --bar-width: 20%; } [data-bar-w="21"] { --bar-width: 21%; } [data-bar-w="22"] { --bar-width: 22%; } [data-bar-w="23"] { --bar-width: 23%; } [data-bar-w="24"] { --bar-width: 24%; } [data-bar-w="25"] { --bar-width: 25%; } [data-bar-w="26"] { --bar-width: 26%; } [data-bar-w="27"] { --bar-width: 27%; } [data-bar-w="28"] { --bar-width: 28%; } [data-bar-w="29"] { --bar-width: 29%; } [data-bar-w="30"] { --bar-width: 30%; } [data-bar-w="31"] { --bar-width: 31%; } [data-bar-w="32"] { --bar-width: 32%; } [data-bar-w="33"] { --bar-width: 33%; } [data-bar-w="34"] { --bar-width: 34%; } [data-bar-w="35"] { --bar-width: 35%; } [data-bar-w="36"] { --bar-width: 36%; } [data-bar-w="37"] { --bar-width: 37%; } [data-bar-w="38"] { --bar-width: 38%; } [data-bar-w="39"] { --bar-width: 39%; } [data-bar-w="40"] { --bar-width: 40%; } [data-bar-w="41"] { --bar-width: 41%; } [data-bar-w="42"] { --bar-width: 42%; } [data-bar-w="43"] { --bar-width: 43%; } [data-bar-w="44"] { --bar-width: 44%; } [data-bar-w="45"] { --bar-width: 45%; } [data-bar-w="46"] { --bar-width: 46%; } [data-bar-w="47"] { --bar-width: 47%; } [data-bar-w="48"] { --bar-width: 48%; } [data-bar-w="49"] { --bar-width: 49%; } [data-bar-w="50"] { --bar-width: 50%; } [data-bar-w="51"] { --bar-width: 51%; } [data-bar-w="52"] { --bar-width: 52%; } [data-bar-w="53"] { --bar-width: 53%; } [data-bar-w="54"] { --bar-width: 54%; } [data-bar-w="55"] { --bar-width: 55%; } [data-bar-w="56"] { --bar-width: 56%; } [data-bar-w="57"] { --bar-width: 57%; } [data-bar-w="58"] { --bar-width: 58%; } [data-bar-w="59"] { --bar-width: 59%; } [data-bar-w="60"] { --bar-width: 60%; } [data-bar-w="61"] { --bar-width: 61%; } [data-bar-w="62"] { --bar-width: 62%; } [data-bar-w="63"] { --bar-width: 63%; } [data-bar-w="64"] { --bar-width: 64%; } [data-bar-w="65"] { --bar-width: 65%; } [data-bar-w="66"] { --bar-width: 66%; } [data-bar-w="67"] { --bar-width: 67%; } [data-bar-w="68"] { --bar-width: 68%; } [data-bar-w="69"] { --bar-width: 69%; } [data-bar-w="70"] { --bar-width: 70%; } [data-bar-w="71"] { --bar-width: 71%; } [data-bar-w="72"] { --bar-width: 72%; } [data-bar-w="73"] { --bar-width: 73%; } [data-bar-w="74"] { --bar-width: 74%; } [data-bar-w="75"] { --bar-width: 75%; } [data-bar-w="76"] { --bar-width: 76%; } [data-bar-w="77"] { --bar-width: 77%; } [data-bar-w="78"] { --bar-width: 78%; } [data-bar-w="79"] { --bar-width: 79%; } [data-bar-w="80"] { --bar-width: 80%; } [data-bar-w="81"] { --bar-width: 81%; } [data-bar-w="82"] { --bar-width: 82%; } [data-bar-w="83"] { --bar-width: 83%; } [data-bar-w="84"] { --bar-width: 84%; } [data-bar-w="85"] { --bar-width: 85%; } [data-bar-w="86"] { --bar-width: 86%; } [data-bar-w="87"] { --bar-width: 87%; } [data-bar-w="88"] { --bar-width: 88%; } [data-bar-w="89"] { --bar-width: 89%; } [data-bar-w="90"] { --bar-width: 90%; } [data-bar-w="91"] { --bar-width: 91%; } [data-bar-w="92"] { --bar-width: 92%; } [data-bar-w="93"] { --bar-width: 93%; } [data-bar-w="94"] { --bar-width: 94%; } [data-bar-w="95"] { --bar-width: 95%; } [data-bar-w="96"] { --bar-width: 96%; } [data-bar-w="97"] { --bar-width: 97%; } [data-bar-w="98"] { --bar-width: 98%; } [data-bar-w="99"] { --bar-width: 99%; } [data-bar-w="100"] { --bar-width: 100%; } /* Transit angles: [data-from-angle] / [data-to-angle] → --from-angle / --to-angle */ /* Covers multiples of 60° (6 stages), 72° (5 stages), 90° (4 stages) up to 660° wrap */ .nav-transit[data-from-angle="0"] { --from-angle: 0deg; } .nav-transit[data-from-angle="60"] { --from-angle: 60deg; } .nav-transit[data-from-angle="72"] { --from-angle: 72deg; } .nav-transit[data-from-angle="90"] { --from-angle: 90deg; } .nav-transit[data-from-angle="120"] { --from-angle: 120deg; } .nav-transit[data-from-angle="144"] { --from-angle: 144deg; } .nav-transit[data-from-angle="180"] { --from-angle: 180deg; } .nav-transit[data-from-angle="216"] { --from-angle: 216deg; } .nav-transit[data-from-angle="240"] { --from-angle: 240deg; } .nav-transit[data-from-angle="270"] { --from-angle: 270deg; } .nav-transit[data-from-angle="288"] { --from-angle: 288deg; } .nav-transit[data-from-angle="300"] { --from-angle: 300deg; } .nav-transit[data-to-angle="60"] { --to-angle: 60deg; } .nav-transit[data-to-angle="72"] { --to-angle: 72deg; } .nav-transit[data-to-angle="90"] { --to-angle: 90deg; } .nav-transit[data-to-angle="120"] { --to-angle: 120deg; } .nav-transit[data-to-angle="144"] { --to-angle: 144deg; } .nav-transit[data-to-angle="180"] { --to-angle: 180deg; } .nav-transit[data-to-angle="216"] { --to-angle: 216deg; } .nav-transit[data-to-angle="240"] { --to-angle: 240deg; } .nav-transit[data-to-angle="270"] { --to-angle: 270deg; } .nav-transit[data-to-angle="288"] { --to-angle: 288deg; } .nav-transit[data-to-angle="300"] { --to-angle: 300deg; } .nav-transit[data-to-angle="360"] { --to-angle: 360deg; } .nav-transit[data-to-angle="420"] { --to-angle: 420deg; } .nav-transit[data-to-angle="432"] { --to-angle: 432deg; } .nav-transit[data-to-angle="450"] { --to-angle: 450deg; } .nav-transit[data-to-angle="480"] { --to-angle: 480deg; } .nav-transit[data-to-angle="504"] { --to-angle: 504deg; } .nav-transit[data-to-angle="540"] { --to-angle: 540deg; } .nav-transit[data-to-angle="576"] { --to-angle: 576deg; } .nav-transit[data-to-angle="600"] { --to-angle: 600deg; } .nav-transit[data-to-angle="630"] { --to-angle: 630deg; } .nav-transit[data-to-angle="648"] { --to-angle: 648deg; } .nav-transit[data-to-angle="660"] { --to-angle: 660deg; } /* Avatar colors: driven by existing data-signer-index on parent row */ [data-signer-index="0"] .commit-sig-avatar { --avatar-color: var(--purple); } [data-signer-index="1"] .commit-sig-avatar { --avatar-color: var(--blurple); } /* Magnet positions: [data-magnet-x/y] → --magnet-x/y (range: -14 to 14, integer px) */ [data-magnet-x="-14"] { --magnet-x: -14px; } [data-magnet-x="-13"] { --magnet-x: -13px; } [data-magnet-x="-12"] { --magnet-x: -12px; } [data-magnet-x="-11"] { --magnet-x: -11px; } [data-magnet-x="-10"] { --magnet-x: -10px; } [data-magnet-x="-9"] { --magnet-x: -9px; } [data-magnet-x="-8"] { --magnet-x: -8px; } [data-magnet-x="-7"] { --magnet-x: -7px; } [data-magnet-x="-6"] { --magnet-x: -6px; } [data-magnet-x="-5"] { --magnet-x: -5px; } [data-magnet-x="-4"] { --magnet-x: -4px; } [data-magnet-x="-3"] { --magnet-x: -3px; } [data-magnet-x="-2"] { --magnet-x: -2px; } [data-magnet-x="-1"] { --magnet-x: -1px; } [data-magnet-x="0"] { --magnet-x: 0px; } [data-magnet-x="1"] { --magnet-x: 1px; } [data-magnet-x="2"] { --magnet-x: 2px; } [data-magnet-x="3"] { --magnet-x: 3px; } [data-magnet-x="4"] { --magnet-x: 4px; } [data-magnet-x="5"] { --magnet-x: 5px; } [data-magnet-x="6"] { --magnet-x: 6px; } [data-magnet-x="7"] { --magnet-x: 7px; } [data-magnet-x="8"] { --magnet-x: 8px; } [data-magnet-x="9"] { --magnet-x: 9px; } [data-magnet-x="10"] { --magnet-x: 10px; } [data-magnet-x="11"] { --magnet-x: 11px; } [data-magnet-x="12"] { --magnet-x: 12px; } [data-magnet-x="13"] { --magnet-x: 13px; } [data-magnet-x="14"] { --magnet-x: 14px; } [data-magnet-y="-14"] { --magnet-y: -14px; } [data-magnet-y="-13"] { --magnet-y: -13px; } [data-magnet-y="-12"] { --magnet-y: -12px; } [data-magnet-y="-11"] { --magnet-y: -11px; } [data-magnet-y="-10"] { --magnet-y: -10px; } [data-magnet-y="-9"] { --magnet-y: -9px; } [data-magnet-y="-8"] { --magnet-y: -8px; } [data-magnet-y="-7"] { --magnet-y: -7px; } [data-magnet-y="-6"] { --magnet-y: -6px; } [data-magnet-y="-5"] { --magnet-y: -5px; } [data-magnet-y="-4"] { --magnet-y: -4px; } [data-magnet-y="-3"] { --magnet-y: -3px; } [data-magnet-y="-2"] { --magnet-y: -2px; } [data-magnet-y="-1"] { --magnet-y: -1px; } [data-magnet-y="0"] { --magnet-y: 0px; } [data-magnet-y="1"] { --magnet-y: 1px; } [data-magnet-y="2"] { --magnet-y: 2px; } [data-magnet-y="3"] { --magnet-y: 3px; } [data-magnet-y="4"] { --magnet-y: 4px; } [data-magnet-y="5"] { --magnet-y: 5px; } [data-magnet-y="6"] { --magnet-y: 6px; } [data-magnet-y="7"] { --magnet-y: 7px; } [data-magnet-y="8"] { --magnet-y: 8px; } [data-magnet-y="9"] { --magnet-y: 9px; } [data-magnet-y="10"] { --magnet-y: 10px; } [data-magnet-y="11"] { --magnet-y: 11px; } [data-magnet-y="12"] { --magnet-y: 12px; } [data-magnet-y="13"] { --magnet-y: 13px; } [data-magnet-y="14"] { --magnet-y: 14px; } /* ============================================================ AI IN PRACTICE SECTION ============================================================ */ .ai-practice-section { position: relative; /* Force dark — premium gradient theme matching First-Party AI page */ --main-bg-color: #06060e; --inv-bg-color: #f1f5f9; --off-bg-color: #06060e; --grey-accent-color: #0f172a; --secondary-grey-color: #1e293b; color: #f1f5f9; background: #06060e; } .ai-practice-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 20% 0%, color-mix(in srgb, var(--blurple) 6%, transparent) 0%, transparent 70%), radial-gradient(ellipse 50% 30% at 80% 100%, color-mix(in srgb, var(--purple) 5%, transparent) 0%, transparent 70%); pointer-events: none; } /* Header */ .ai-practice-kicker { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.4em; text-transform: uppercase; color: var(--inv-bg-color); margin-bottom: 1rem; } .ai-practice-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.5rem; background: linear-gradient(160deg, rgba(79,70,229,1) 0%, rgba(99,102,241,1) 50%, rgba(139,92,246,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ai-practice-subline { font-size: 0.78rem; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); line-height: 1.5; margin: 0.5rem 0 0; letter-spacing: 0.01em; } .ai-practice-stat-inline { font-weight: 800; color: var(--blurple); letter-spacing: -0.02em; } /* View Toggle */ .ai-practice-toggle-wrap { display: flex; justify-content: center; margin-bottom: 2rem; } .ai-practice-toggle { display: inline-flex; background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); border-radius: 100px; padding: 4px; gap: 2px; } .ai-practice-toggle-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1.05rem; border-radius: 100px; font-size: 0.8rem; font-weight: 500; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); background: transparent; border: none; cursor: pointer; transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .ai-practice-toggle-btn svg { opacity: 0.6; transition: opacity 0.25s ease; flex-shrink: 0; } .ai-practice-toggle-btn.is-active { background: color-mix(in srgb, var(--inv-bg-color) 10%, transparent); color: var(--inv-bg-color); box-shadow: 0 1px 6px color-mix(in srgb, var(--blurple) 20%, transparent); } .ai-practice-toggle-btn.is-active svg { opacity: 1; } .ai-practice-toggle-btn:hover:not(.is-active) { color: color-mix(in srgb, var(--inv-bg-color) 75%, transparent); } .ai-toggle-audience { font-size: 0.55rem; font-weight: 500; letter-spacing: 0.04em; color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); margin-left: 0.15rem; } .ai-practice-toggle-btn.is-active .ai-toggle-audience { color: color-mix(in srgb, var(--blurple) 60%, transparent); } /* Views */ .ai-practice-view { display: none; opacity: 0; transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .ai-practice-view.is-active { display: block; opacity: 1; } /* ================================================================ INTEGRATED STAGE PANEL — Nodes + Content in One Surface ================================================================ */ .ai-stage-ring { position: relative; width: 100%; max-width: 580px; margin: 0 auto; border-radius: 20px; padding: 1.75rem 1.75rem 1.5rem; background: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--blurple) 6%, transparent) 0%, transparent 70%), color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent); box-shadow: 0 0 60px 15px color-mix(in srgb, var(--blurple) 3%, transparent), 0 16px 60px -10px color-mix(in srgb, var(--blurple) 5%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 3%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--inv-bg-color) 5%, transparent); overflow: hidden; } /* Orbit repurposed as horizontal divider between nodes and content */ .ai-ring-orbit { position: relative; width: 100%; height: 1px; margin: 1rem 0 1.25rem; pointer-events: none; z-index: 1; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--inv-bg-color) 6%, transparent) 15%, color-mix(in srgb, var(--blurple) 14%, transparent) 50%, color-mix(in srgb, var(--inv-bg-color) 6%, transparent) 85%, transparent 100%); } /* Sweeping light on the divider */ .ai-ring-orbit::after { content: ''; position: absolute; top: -1px; left: -30%; width: 30%; height: 3px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blurple) 40%, transparent), color-mix(in srgb, var(--blurple) 60%, transparent), transparent); border-radius: 2px; animation: aiDividerSweep 6s cubic-bezier(0.22, 1, 0.36, 1) infinite; pointer-events: none; } @keyframes aiDividerSweep { 0% { left: -30%; opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { left: 100%; opacity: 0; } } /* Arc hidden in panel layout — no circular path */ .ai-ring-arc { display: none; } /* Nodes — integrated horizontal nav row */ .ai-ring-nodes { position: relative; display: flex; justify-content: center; gap: 1.25rem; z-index: 1; padding: 0 0.5rem; } /* ── Progress Track — connecting line between nodes ── */ .ai-ring-track { position: absolute; top: 17px; left: var(--track-left, 10%); width: var(--track-width, 80%); height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); z-index: 0; pointer-events: none; } .ai-ring-track-fill { position: absolute; top: 0; left: 0; height: 100%; width: var(--track-fill, 0%); border-radius: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--blurple) 50%, transparent), var(--blurple)); transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 0 8px color-mix(in srgb, var(--blurple) 25%, transparent); } .ai-stage-node { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; background: none; border: none; cursor: pointer; padding: 0; position: relative; flex: 1 1 0%; } /* Primary expanding ring on active node */ .ai-stage-node::before { content: ''; position: absolute; top: 17px; left: 50%; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--blurple) 30%, transparent); transform: translate(-50%, -50%) scale(1); opacity: 0; pointer-events: none; } .ai-stage-node.is-active::before { animation: aiRingExpand 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite; } /* Secondary expanding ring — offset timing for layered depth */ .ai-stage-node::after { content: ''; position: absolute; top: 17px; left: 50%; width: 38px; height: 38px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--blurple) 15%, transparent); transform: translate(-50%, -50%) scale(1); opacity: 0; pointer-events: none; } .ai-stage-node.is-active::after { animation: aiRingExpand 2.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s infinite; } @keyframes aiRingExpand { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 80% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } } /* Burst effect on stage select — JS-created element */ .ai-node-burst { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--blurple) 50%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--blurple) 30%, transparent); animation: aiNodeBurst 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; pointer-events: none; } @keyframes aiNodeBurst { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } } .ai-stage-node-dot { width: 34px; height: 34px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); display: flex; align-items: center; justify-content: center; position: relative; color: color-mix(in srgb, var(--inv-bg-color) 25%, transparent); transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Outer breathing ring — always visible on active */ .ai-stage-node-ring-outer { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--blurple) 0%, transparent); transition: border-color 0.6s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .ai-stage-node.is-active .ai-stage-node-ring-outer { border-color: color-mix(in srgb, var(--blurple) 20%, transparent); animation: aiNodeRingBreath 3s ease-in-out infinite; } @keyframes aiNodeRingBreath { 0%, 100% { transform: scale(1); opacity: 0.6; border-color: color-mix(in srgb, var(--blurple) 15%, transparent); } 50% { transform: scale(1.15); opacity: 1; border-color: color-mix(in srgb, var(--blurple) 30%, transparent); } } /* Inner conic-gradient sweep ring — spinning arc on active */ .ai-stage-node-ring-inner { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient( from 0deg, transparent 0deg, transparent 300deg, color-mix(in srgb, var(--blurple) 8%, transparent) 330deg, color-mix(in srgb, var(--blurple) 25%, transparent) 355deg, transparent 360deg ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px), #000 100%, transparent 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px), #000 100%, transparent 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .ai-stage-node.is-active .ai-stage-node-ring-inner { opacity: 1; animation: aiNodeArcSpin 4s linear infinite; } @keyframes aiNodeArcSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ai-stage-node-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-bg-color) 22%, transparent); transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1), font-weight 0.3s ease; white-space: nowrap; position: relative; } /* Active node — 5-layer shadow stack with dramatic presence */ .ai-stage-node.is-active .ai-stage-node-dot { background: color-mix(in srgb, var(--blurple) 18%, transparent); border-color: color-mix(in srgb, var(--blurple) 50%, transparent); color: var(--blurple); transform: scale(1.3); box-shadow: 0 0 0 5px color-mix(in srgb, var(--blurple) 6%, transparent), 0 0 30px color-mix(in srgb, var(--blurple) 35%, transparent), 0 0 60px color-mix(in srgb, var(--blurple) 15%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--blurple) 20%, transparent); } .ai-stage-node.is-active .ai-stage-node-label { color: var(--blurple); font-weight: 700; } /* Active node downward glow — connects node to content */ .ai-stage-node.is-active .ai-stage-node-label::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 60px; height: 40px; background: radial-gradient(ellipse 100% 100% at 50% 0%, color-mix(in srgb, var(--blurple) 12%, transparent) 0%, transparent 70%); pointer-events: none; } /* Past nodes — completed feel */ .ai-stage-node.is-past .ai-stage-node-dot { background: color-mix(in srgb, var(--blurple) 8%, transparent); border-color: color-mix(in srgb, var(--blurple) 20%, transparent); color: color-mix(in srgb, var(--blurple) 55%, transparent); } .ai-stage-node.is-past .ai-stage-node-label { color: color-mix(in srgb, var(--blurple) 40%, transparent); } /* Inactive nodes — subtle idle pulse (feel "alive") */ .ai-stage-node:not(.is-active):not(.is-past) .ai-stage-node-dot { animation: aiNodeIdlePulse 4s ease-in-out infinite; } @keyframes aiNodeIdlePulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 12px color-mix(in srgb, var(--inv-bg-color) 4%, transparent); } } /* Hover — subtle magnetism */ .ai-stage-node:hover:not(.is-active) .ai-stage-node-dot { background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent); border-color: color-mix(in srgb, var(--inv-bg-color) 18%, transparent); color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); transform: scale(1.12); box-shadow: 0 0 20px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); animation: none; } /* Content area — below the nodes, full width */ .ai-ring-center { position: relative; text-align: center; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } /* Stage context header — counter + name inline */ .ai-stage-context-header { display: flex; align-items: center; gap: 0.5rem; } .ai-stage-counter { font-size: 0.55rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; color: color-mix(in srgb, var(--blurple) 65%, transparent); background: color-mix(in srgb, var(--blurple) 8%, transparent); border: 0.5px solid color-mix(in srgb, var(--blurple) 15%, transparent); padding: 0.15rem 0.5rem; border-radius: 4px; white-space: nowrap; } .ai-stage-context-name { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.03em; margin: 0; line-height: 1.15; background: linear-gradient(135deg, var(--inv-bg-color) 0%, color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: opacity 0.3s ease; } .ai-stage-context-desc { font-size: 0.62rem; font-weight: 400; color: color-mix(in srgb, var(--inv-bg-color) 38%, transparent); letter-spacing: 0.01em; margin: 0; line-height: 1.35; } /* Atmospheric glow inside ring */ .ai-ring-atmosphere { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; overflow: hidden; } .ai-agent-panel-glow-primary { position: absolute; top: -50%; left: var(--glow-x, 30%); width: 50%; height: 140%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--blurple) 7%, transparent) 0%, transparent 65%); pointer-events: none; animation: aiPanelGlowDrift 8s ease-in-out infinite; transition: left 1.2s cubic-bezier(0.22, 1, 0.36, 1); transform: translateX(-50%); } .ai-agent-panel-glow-secondary { position: absolute; top: -30%; right: 15%; width: 40%; height: 100%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--purple) 5%, transparent) 0%, transparent 65%); pointer-events: none; animation: aiPanelGlowDrift 8s ease-in-out 4s infinite; } @keyframes aiPanelGlowDrift { 0%, 100% { transform: translateX(0) translateY(0); opacity: 0.6; } 50% { transform: translateX(15px) translateY(-10px); opacity: 1; } } /* Scanline — horizontal light sweep (terminal/mission-control feel) */ .ai-agent-panel-scanline { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blurple) 12%, transparent), transparent); z-index: 2; pointer-events: none; animation: aiScanlineMove 6s cubic-bezier(0.22, 1, 0.36, 1) infinite; } @keyframes aiScanlineMove { 0% { top: 0; opacity: 0; } 10% { opacity: 0.6; } 90% { opacity: 0.6; } 100% { top: 100%; opacity: 0; } } .ai-agent-panel-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.65rem; width: 100%; height: 300px; margin-top: 0.5rem; position: relative; z-index: 1; perspective: 1200px; } /* ================================================================ AGENT CARDS — Premium Live Activity Cards ================================================================ */ .ai-agent-card { background: linear-gradient(160deg, color-mix(in srgb, var(--inv-bg-color) 6%, transparent) 0%, color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent) 100%); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); border-radius: 14px; padding: 0.9rem 1rem; backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); position: relative; overflow: hidden; display: flex; flex-direction: column; text-align: left; opacity: 0; transform: translateY(24px) scale(0.95) rotateX(4deg); transform-origin: center bottom; transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease; box-shadow: 0 0 60px 10px color-mix(in srgb, var(--blurple) 3%, transparent), 0 12px 40px -8px color-mix(in srgb, var(--blurple) 6%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--inv-bg-color) 8%, transparent), 0 2px 8px rgba(0,0,0,0.35); } /* De-emphasize card when sibling is active */ .ai-agent-card.is-dimmed { opacity: 0.35; filter: blur(1.5px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease; } .ai-agent-card.is-focused { opacity: 1; filter: blur(0); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease; } /* Left accent bar — color-coded by buyer/seller */ .ai-agent-card-accent { position: absolute; top: 16px; bottom: 16px; left: 0; width: 2px; border-radius: 0 1px 1px 0; background: linear-gradient(to bottom, var(--blurple), color-mix(in srgb, var(--blurple) 20%, transparent)); opacity: 0; transition: opacity 0.5s ease 0.2s; } .ai-agent-card[data-recommend="buyer"] .ai-agent-card-accent { background: linear-gradient(to bottom, #34d399, color-mix(in srgb, #10b981 20%, transparent)); } .ai-agent-card[data-recommend="seller"] .ai-agent-card-accent { background: linear-gradient(to bottom, #818cf8, color-mix(in srgb, var(--blurple) 20%, transparent)); } /* Subtle top shimmer tint per role */ .ai-agent-card[data-recommend="buyer"]::before { background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, #10b981 12%, transparent) 20%, color-mix(in srgb, #10b981 30%, transparent) 50%, color-mix(in srgb, #10b981 12%, transparent) 80%, transparent 100%); } .ai-agent-card[data-recommend="seller"]::before { background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--blurple) 15%, transparent) 20%, color-mix(in srgb, var(--blurple) 50%, transparent) 50%, color-mix(in srgb, var(--blurple) 15%, transparent) 80%, transparent 100%); } /* Buyer card status dot — green pulse */ .ai-agent-card[data-recommend="buyer"] .ai-agent-status-dot { background: #34d399; box-shadow: 0 0 10px color-mix(in srgb, #10b981 70%, transparent); } .ai-agent-card[data-recommend="buyer"] .ai-agent-status-ring { border-color: color-mix(in srgb, #10b981 25%, transparent); } /* Top shimmer line */ .ai-agent-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--blurple) 15%, transparent) 20%, color-mix(in srgb, var(--blurple) 50%, transparent) 50%, color-mix(in srgb, var(--blurple) 15%, transparent) 80%, transparent 100%); opacity: 0; transition: opacity 0.6s ease; } /* Ambient shimmer sweep across card surface */ .ai-agent-card-shimmer-track { position: absolute; top: 0; left: -100%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent), transparent); pointer-events: none; z-index: 0; animation: aiCardShimmerDrift 8s cubic-bezier(0.22, 1, 0.36, 1) infinite; animation-delay: var(--shimmer-delay, 0s); } @keyframes aiCardShimmerDrift { 0% { left: -100%; } 40% { left: 200%; } 100% { left: 200%; } } .ai-agent-card > :not(.ai-agent-card-shimmer-track):not(.ai-agent-card-accent) { position: relative; z-index: 1; } .ai-agent-card.is-visible { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); } .ai-agent-card.is-visible .ai-agent-card-accent { opacity: 1; } .ai-agent-card.is-visible::before { opacity: 1; } /* Hover — elevated with dramatic glow increase */ .ai-agent-card:hover { border-color: color-mix(in srgb, var(--blurple) 28%, transparent); transform: translateY(-4px) scale(1.005); box-shadow: 0 0 80px 15px color-mix(in srgb, var(--blurple) 6%, transparent), 0 20px 60px -8px color-mix(in srgb, var(--blurple) 10%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent), 0 0 0 1px color-mix(in srgb, var(--blurple) 15%, transparent), 0 2px 8px rgba(0,0,0,0.4); } /* Exit — upward fade with perspective */ .ai-agent-card.is-exiting { opacity: 0; transform: translateY(-16px) scale(0.96) rotateX(-2deg); transition: opacity 0.25s cubic-bezier(0.55, 0, 1, 0.45), transform 0.25s cubic-bezier(0.55, 0, 1, 0.45); } /* Card Head */ .ai-agent-card-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; } .ai-agent-status-dot-wrap { position: relative; width: 8px; height: 8px; flex-shrink: 0; } .ai-agent-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #818cf8; flex-shrink: 0; box-shadow: 0 0 10px color-mix(in srgb, var(--blurple) 70%, transparent); animation: aiCardDotPulse 2.6s ease-in-out infinite; } @keyframes aiCardDotPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 10px color-mix(in srgb, var(--blurple) 70%, transparent); } 50% { opacity: 0.4; box-shadow: 0 0 16px color-mix(in srgb, var(--blurple) 40%, transparent); } } /* Status ring — pulsing ring around the status dot */ .ai-agent-status-ring { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--blurple) 25%, transparent); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: aiStatusRingPulse 3s ease-in-out infinite; } @keyframes aiStatusRingPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; } 50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } } .ai-agent-card-name { font-size: 0.72rem; font-weight: 700; color: var(--inv-bg-color); letter-spacing: -0.015em; } .ai-agent-card-badge { margin-left: auto; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.18rem 0.55rem; border-radius: 4px; } .ai-badge-buyer { color: #34d399; background: color-mix(in srgb, #10b981 10%, transparent); border: 0.5px solid color-mix(in srgb, #10b981 18%, transparent); } .ai-badge-seller { color: #818cf8; background: color-mix(in srgb, var(--blurple) 10%, transparent); border: 0.5px solid color-mix(in srgb, var(--blurple) 18%, transparent); } /* Card Body — the typewriter star */ .ai-agent-card-body { font-size: 0.84rem; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); line-height: 1.6; min-height: 2.6em; margin-bottom: 1rem; letter-spacing: 0.005em; } .ai-agent-card-cursor { display: inline-block; width: 2px; height: 1.05em; background: #818cf8; margin-left: 2px; vertical-align: text-bottom; border-radius: 1px; animation: aiCursorBlink 0.9s step-end infinite; } @keyframes aiCursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Card Footer — metadata tags, pinned to bottom */ .ai-agent-card-footer { display: none; } .ai-agent-card-tag { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.03em; color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); padding: 0.2rem 0.6rem; border-radius: 5px; } .ai-agent-card-footer-sep { opacity: 0.35; } /* ── Agent Viz Types ── */ .ai-agent-viz { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; } .ai-agent-viz::-webkit-scrollbar { display: none; } /* --- Checklist viz --- */ .ai-viz-check-row { display: flex; align-items: center; gap: 0.5rem; opacity: 0; transform: translateX(-8px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-check-row.is-checked { opacity: 1; transform: translateX(0); } .ai-viz-check-icon { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); flex-shrink: 0; position: relative; transition: border-color 0.3s ease, background 0.3s ease; } .ai-viz-check-row.is-checked .ai-viz-check-icon { border-color: color-mix(in srgb, var(--blurple) 60%, transparent); background: color-mix(in srgb, var(--blurple) 12%, transparent); } .ai-viz-check-icon::after { content: ''; position: absolute; top: 3px; left: 4.5px; width: 4px; height: 7px; border: solid color-mix(in srgb, var(--blurple) 80%, transparent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) scale(0); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .ai-viz-check-row.is-checked .ai-viz-check-icon::after { transform: rotate(45deg) scale(1); } .ai-viz-check-text { font-size: 0.62rem; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); transition: color 0.3s ease; } .ai-viz-check-row.is-checked .ai-viz-check-text { color: color-mix(in srgb, var(--inv-bg-color) 75%, transparent); } /* --- Bars viz --- */ .ai-agent-viz--bars { gap: 0.45rem; } .ai-viz-bar-row { display: grid; grid-template-columns: 72px 1fr 32px; align-items: center; gap: 0.4rem; padding: 0.15rem 0; } .ai-viz-bar-label { font-size: 0.6rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-viz-bar-track { height: 6px; border-radius: 100px; background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent); overflow: hidden; } .ai-viz-bar-fill { height: 100%; width: 0%; border-radius: 100px; background: linear-gradient(90deg, color-mix(in srgb, var(--blurple) 60%, transparent), var(--blurple)); transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 0 8px color-mix(in srgb, var(--blurple) 35%, transparent); } .ai-viz-bar-val { font-size: 0.62rem; font-weight: 700; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); text-align: right; } /* --- Metrics viz --- */ .ai-agent-viz--metrics { flex-direction: row; justify-content: space-around; align-items: center; gap: 0.75rem; padding: 0.5rem 0; } .ai-viz-metric-block { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .ai-viz-metric-num { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--inv-bg-color) 0%, color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ai-viz-metric-label { font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent); } /* --- Chat viz --- */ .ai-agent-viz--chat { gap: 0.2rem; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .ai-agent-viz--chat::-webkit-scrollbar { display: none; } .ai-viz-chat-msg { opacity: 0; transform: translateY(6px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-chat-msg.is-visible { opacity: 1; transform: translateY(0); } .ai-viz-chat-user { display: flex; justify-content: flex-end; } .ai-viz-chat-user .ai-viz-chat-text { background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 10%, transparent), color-mix(in srgb, var(--blurple) 6%, transparent)); border: 0.5px solid color-mix(in srgb, var(--blurple) 18%, transparent); border-radius: 8px 8px 2px 8px; padding: 0.25rem 0.5rem; font-size: 0.56rem; color: color-mix(in srgb, var(--inv-bg-color) 68%, transparent); display: inline-block; max-width: 88%; } .ai-viz-chat-ai { display: flex; justify-content: flex-start; } .ai-viz-chat-ai .ai-viz-chat-text { background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent); border-radius: 8px 8px 8px 2px; padding: 0.25rem 0.5rem; font-size: 0.56rem; color: color-mix(in srgb, var(--inv-bg-color) 58%, transparent); display: inline-block; max-width: 88%; line-height: 1.45; } /* --- Captured indicator (data flowing to journey record) --- */ .ai-viz-chat-captured { display: block; padding: 0 0.1rem; } .ai-viz-captured-tag { display: block; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.03em; color: #34d399; background: color-mix(in srgb, #10b981 6%, transparent); border-left: 2.5px solid #10b981; padding: 0.15rem 0.45rem; border-radius: 0 3px 3px 0; } /* --- Source indicator (media type being processed) --- */ .ai-viz-source { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.5rem; margin-bottom: 0.25rem; border-radius: 6px; background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .ai-viz-source-icon { color: color-mix(in srgb, var(--blurple) 70%, transparent); flex-shrink: 0; display: flex; align-items: center; } .ai-viz-source-label { font-size: 0.58rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); letter-spacing: 0.02em; } /* Audio waveform indicator */ .ai-viz-source-wave { margin-left: auto; display: flex; align-items: center; gap: 1.5px; height: 14px; } .ai-viz-wave-bar { width: 2px; border-radius: 1px; background: color-mix(in srgb, var(--blurple) 55%, transparent); animation: aiWaveBar 1s ease-in-out infinite; animation-delay: calc(var(--wave-i, 0) * 0.12s); } @keyframes aiWaveBar { 0%, 100% { height: 3px; } 50% { height: 11px; } } /* --- Typewriter viz (existing body/cursor) --- */ .ai-agent-viz--typewriter { min-height: 40px; } /* --- Enhanced chat: mapping tags (Discovery↔Scope) --- */ .ai-viz-mapping-tag { display: block; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.03em; color: #a78bfa; background: color-mix(in srgb, #7c3aed 6%, transparent); border-left: 2.5px solid #7c3aed; padding: 0.15rem 0.45rem; border-radius: 0 3px 3px 0; } /* --- Enhanced chat: value-case tags (argument building) --- */ .ai-viz-valuecase-tag { display: block; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.03em; color: #fbbf24; background: color-mix(in srgb, #f59e0b 6%, transparent); border-left: 2.5px solid #f59e0b; padding: 0.15rem 0.45rem; border-radius: 0 3px 3px 0; } /* --- Enhanced chat: action button --- */ .ai-viz-action-btn { display: inline-block; font-size: 0.52rem; font-weight: 700; color: color-mix(in srgb, var(--blurple) 90%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 12%, transparent), color-mix(in srgb, var(--blurple) 6%, transparent)); border: 0.5px solid color-mix(in srgb, var(--blurple) 25%, transparent); padding: 0.2rem 0.6rem; border-radius: 5px; cursor: default; } /* --- Enhanced chat: research pipeline indicators --- */ .ai-viz-chat-research { display: flex; justify-content: flex-start; } .ai-viz-chat-research .ai-viz-chat-text { background: color-mix(in srgb, var(--blurple) 4%, transparent); border: none; border-left: 2px solid color-mix(in srgb, var(--blurple) 30%, transparent); font-size: 0.52rem; font-style: italic; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); padding: 0.12rem 0.4rem; border-radius: 0 4px 4px 0; } /* --- Field Capture viz (Smart Conversation) --- */ .ai-agent-viz--fieldCapture { gap: 0.2rem; } /* Section icon (replaces emojis) */ .ai-viz-sec-icon { display: inline-flex; align-items: center; margin-right: 0.3rem; color: #818cf8; vertical-align: middle; flex-shrink: 0; } .ai-viz-sec-icon svg { display: block; } /* Ingest viz (Think & Sync) — pipeline layout */ .ai-viz-ingest-phase { position: relative; padding-left: 1.1rem; padding-bottom: 0.4rem; } .ai-viz-ingest-phase::before { content: ''; position: absolute; left: 0.32rem; top: 0.7rem; bottom: 0; width: 1px; background: rgba(129, 140, 248, 0.18); transition: background 0.4s ease; } .ai-viz-ingest-phase.is-active::before { background: rgba(129, 140, 248, 0.4); } .ai-viz-ingest-phase:last-child::before { display: none; } .ai-viz-ingest-phase-dot { position: absolute; left: 0.1rem; top: 0.15rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border: 1.5px solid rgba(129, 140, 248, 0.35); transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .ai-viz-ingest-phase.is-active .ai-viz-ingest-phase-dot { background: rgba(129, 140, 248, 0.25); border-color: #818cf8; box-shadow: 0 0 6px rgba(129, 140, 248, 0.3); } .ai-viz-ingest-phase-label { font-size: 0.45rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(129, 140, 248, 0.5); margin-bottom: 0.25rem; transition: color 0.4s ease; } .ai-viz-ingest-phase.is-active .ai-viz-ingest-phase-label { color: #818cf8; } .ai-viz-ingest-strip { display: flex; flex-wrap: wrap; gap: 0.25rem; } .ai-viz-ingest-chip { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.4rem; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border: 0.5px solid rgba(129, 140, 248, 0.15); border-radius: 20px; opacity: 0; transform: scale(0.9); transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-ingest-chip.is-visible { opacity: 1; transform: scale(1); } .ai-viz-ingest-chip-label { font-size: 0.52rem; font-weight: 600; color: #c4b5fd; white-space: nowrap; } .ai-viz-ingest-icon { flex-shrink: 0; color: #818cf8; display: flex; align-items: center; } .ai-viz-ingest-processing { font-size: 0.5rem; font-weight: 500; color: #64748b; font-style: italic; opacity: 0; transition: opacity 0.4s ease; } .ai-viz-ingest-processing.is-visible { opacity: 1; } .ai-viz-capture-header { font-size: 0.48rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); padding-bottom: 0.15rem; border-bottom: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); margin-bottom: 0.1rem; } .ai-viz-capture-field { background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent); border-left: 2.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); border-radius: 0 6px 6px 0; padding: 0.3rem 0.45rem; opacity: 0; transform: translateX(-8px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, background 0.4s ease; } .ai-viz-capture-field.is-captured { opacity: 1; transform: translateX(0); } .ai-viz-capture-field[data-status="captured"].is-captured { border-left-color: #10b981; background: color-mix(in srgb, #10b981 3%, transparent); } .ai-viz-capture-field[data-status="pending"].is-captured { border-left-color: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); border-left-style: dashed; } .ai-viz-capture-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.1rem; } .ai-viz-capture-label > span:first-child { font-size: 0.56rem; font-weight: 700; color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent); } .ai-viz-capture-status { font-size: 0.46rem; font-weight: 700; letter-spacing: 0.03em; } .ai-viz-capture-field[data-status="captured"] .ai-viz-capture-status { color: #34d399; } .ai-viz-capture-field[data-status="pending"] .ai-viz-capture-status { color: color-mix(in srgb, var(--inv-bg-color) 25%, transparent); } .ai-viz-capture-value { font-size: 0.52rem; color: color-mix(in srgb, var(--inv-bg-color) 48%, transparent); line-height: 1.4; } .ai-viz-capture-empty { font-size: 0.48rem; font-style: italic; color: color-mix(in srgb, var(--inv-bg-color) 20%, transparent); } /* --- Enhanced bars: owner + status columns --- */ .ai-viz-bar-row--extended { grid-template-columns: 68px 48px 1fr 28px 18px; } .ai-viz-bar-owner { font-size: 0.52rem; font-weight: 500; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-viz-bar-status { font-size: 0.6rem; text-align: center; line-height: 1; } /* --- Document viz (meeting prep, call plan) --- */ .ai-agent-viz--document { gap: 0.1rem; } .ai-viz-doc-section { opacity: 0; transform: translateX(-10px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); padding: 0.25rem 0.35rem; border-left: 2px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); margin-left: 0.15rem; } .ai-viz-doc-section.is-visible { opacity: 1; transform: translateX(0); border-left-color: color-mix(in srgb, var(--blurple) 25%, transparent); } .ai-viz-doc-header { font-size: 0.6rem; font-weight: 700; color: color-mix(in srgb, var(--inv-bg-color) 72%, transparent); margin-bottom: 0.1rem; } .ai-viz-doc-content { font-size: 0.54rem; color: color-mix(in srgb, var(--inv-bg-color) 48%, transparent); line-height: 1.45; white-space: pre-line; } .ai-viz-doc-sub { font-size: 0.5rem; color: color-mix(in srgb, var(--blurple) 65%, transparent); margin-top: 0.1rem; padding-left: 0.5rem; border-left: 1.5px solid color-mix(in srgb, var(--blurple) 22%, transparent); white-space: pre-line; line-height: 1.4; } /* --- Review viz (Think & Sync, Propose Scope) --- */ .ai-agent-viz--review { gap: 0.25rem; } .ai-viz-review-step1 { font-size: 0.52rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); font-style: italic; padding: 0.2rem 0.4rem; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); border-radius: 4px; opacity: 0; transition: opacity 0.4s ease; } .ai-viz-review-step1.is-visible { opacity: 1; } .ai-viz-review-card { background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border-radius: 6px; padding: 0.3rem 0.4rem; margin-top: 0.2rem; opacity: 0; transform: translateY(8px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-review-card.is-visible { opacity: 1; transform: translateY(0); } .ai-viz-review-field { font-size: 0.58rem; font-weight: 700; color: color-mix(in srgb, var(--inv-bg-color) 65%, transparent); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.1rem; } .ai-viz-review-conf { font-size: 0.48rem; font-weight: 700; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--blurple) 85%, transparent); background: color-mix(in srgb, var(--blurple) 10%, transparent); border: 0.5px solid color-mix(in srgb, var(--blurple) 15%, transparent); padding: 0.06rem 0.35rem; border-radius: 10px; margin-left: 0.3rem; } .ai-viz-review-value { font-size: 0.5rem; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); margin-bottom: 0.15rem; line-height: 1.35; } .ai-viz-review-btns { display: flex; gap: 0.3rem; } .ai-viz-review-btn { font-size: 0.46rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 10px; cursor: default; } .ai-viz-review-btn--approve { color: #34d399; background: color-mix(in srgb, #10b981 8%, transparent); border: 0.5px solid color-mix(in srgb, #10b981 20%, transparent); } .ai-viz-review-btn--deny { color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); } /* Status badges for review cards */ .ai-viz-review-card[data-status="included"]::before, .ai-viz-review-card[data-status="approve"]::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 2.5px; border-radius: 6px 0 0 6px; background: #10b981; } .ai-viz-review-card[data-status="excluded"]::before, .ai-viz-review-card[data-status="deny"]::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 2.5px; border-radius: 6px 0 0 6px; background: #ef4444; } .ai-viz-review-card[data-status="potential"]::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 2.5px; border-radius: 6px 0 0 6px; background: #f59e0b; } .ai-viz-review-card[data-status] { position: relative; padding-left: 0.6rem; } /* --- Report viz (Execution Readiness) --- */ .ai-agent-viz--report { gap: 0.15rem; } .ai-viz-report-section { padding: 0.25rem 0.35rem; border-left: 2px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); margin-left: 0.1rem; opacity: 0; transform: translateY(6px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-report-section.is-visible { opacity: 1; transform: translateY(0); } .ai-viz-report-header { font-size: 0.58rem; font-weight: 700; color: color-mix(in srgb, var(--inv-bg-color) 68%, transparent); margin-bottom: 0.08rem; } .ai-viz-report-line { font-size: 0.52rem; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); line-height: 1.45; padding-left: 0.3rem; } .ai-viz-report-highlight { background: color-mix(in srgb, var(--blurple) 5%, transparent); border: 0.5px solid color-mix(in srgb, var(--blurple) 14%, transparent); border-left: 2.5px solid color-mix(in srgb, var(--blurple) 50%, transparent); border-radius: 0 5px 5px 0; padding: 0.3rem 0.4rem; margin-left: 0; } .ai-viz-report-highlight .ai-viz-report-header { color: color-mix(in srgb, var(--blurple) 85%, var(--inv-bg-color)); } /* --- Assignment viz (Assign Owners) --- */ .ai-agent-viz--assignment { gap: 0.2rem; } .ai-viz-assign-card { background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent); border-left: 2.5px solid color-mix(in srgb, var(--blurple) 30%, transparent); border-radius: 0 6px 6px 0; padding: 0.3rem 0.45rem; opacity: 0; transform: translateY(8px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-assign-card.is-visible { opacity: 1; transform: translateY(0); } .ai-viz-assign-module { font-size: 0.5rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.15rem; } .ai-viz-assign-person { font-size: 0.58rem; font-weight: 700; color: color-mix(in srgb, var(--inv-bg-color) 70%, transparent); margin-bottom: 0.05rem; } .ai-viz-assign-detail { font-size: 0.48rem; color: color-mix(in srgb, var(--inv-bg-color) 38%, transparent); margin-bottom: 0.15rem; } .ai-viz-assign-btns { display: flex; gap: 0.3rem; } .ai-viz-assign-btn { font-size: 0.46rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 3px; color: color-mix(in srgb, var(--blurple) 85%, transparent); background: color-mix(in srgb, var(--blurple) 8%, transparent); border: 0.5px solid color-mix(in srgb, var(--blurple) 18%, transparent); cursor: default; } .ai-viz-assign-btn--alt { color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } .ai-viz-assign-progress { font-size: 0.52rem; font-weight: 600; color: #34d399; text-align: center; padding: 0.15rem 0; opacity: 0; transition: opacity 0.4s ease; } .ai-viz-assign-progress.is-visible { opacity: 1; } /* --- Dashboard viz (Cheat Sheet) --- */ .ai-agent-viz--dashboard { gap: 0.15rem; } .ai-viz-dash-section { display: flex; flex-direction: column; padding: 0.2rem 0.35rem; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border-radius: 4px; opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s ease; } .ai-viz-dash-section.is-visible { opacity: 1; transform: translateY(0); } .ai-viz-dash-header { font-size: 0.58rem; font-weight: 700; color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent); } .ai-viz-dash-content { font-size: 0.5rem; color: color-mix(in srgb, var(--inv-bg-color) 42%, transparent); line-height: 1.4; white-space: pre-line; padding-left: 0.25rem; } /* --- Gantt viz (AI Navigator) --- */ .ai-viz-gantt-header { display: flex; justify-content: space-between; padding: 0 0 0.3rem 4.35rem; } .ai-viz-gantt-month { font-size: 0.42rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in srgb, var(--inv-bg-color) 25%, transparent); flex: 1; text-align: center; } .ai-viz-gantt-body { position: relative; display: flex; flex-direction: column; gap: 0.3rem; } .ai-viz-gantt-today { position: absolute; top: 0; bottom: 0; width: 1.5px; background: #818cf8; z-index: 2; opacity: 0; transform: scaleY(0); transform-origin: top; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-gantt-today.is-visible { opacity: 1; transform: scaleY(1); } .ai-viz-gantt-today::before { content: 'Today'; position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); font-size: 0.38rem; font-weight: 700; color: #818cf8; letter-spacing: 0.04em; white-space: nowrap; } .ai-viz-gantt-row { display: flex; align-items: center; gap: 0.35rem; opacity: 0; transform: translateX(-6px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-gantt-row.is-visible { opacity: 1; transform: translateX(0); } .ai-viz-gantt-label { width: 4rem; flex-shrink: 0; font-size: 0.5rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-viz-gantt-track { flex: 1; height: 1.1rem; position: relative; background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border-radius: 3px; overflow: hidden; } .ai-viz-gantt-bar { position: absolute; top: 1px; bottom: 1px; left: var(--gantt-left, 0%); width: var(--gantt-width, 30%); border-radius: 2px; background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); overflow: hidden; } .ai-viz-gantt-bar[data-status="complete"] { border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.08); } .ai-viz-gantt-bar[data-status="active"] { border-color: rgba(129, 140, 248, 0.3); background: rgba(129, 140, 248, 0.08); } .ai-viz-gantt-bar[data-status="warning"] { border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.08); } .ai-viz-gantt-bar[data-status="upcoming"] { border-color: color-mix(in srgb, var(--inv-bg-color) 10%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); } .ai-viz-gantt-fill { height: 100%; width: 0%; border-radius: 2px; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-gantt-fill.is-filled { width: var(--gantt-progress, 0%); } .ai-viz-gantt-bar[data-status="complete"] .ai-viz-gantt-fill { background: rgba(16, 185, 129, 0.35); } .ai-viz-gantt-bar[data-status="active"] .ai-viz-gantt-fill { background: rgba(129, 140, 248, 0.35); } .ai-viz-gantt-bar[data-status="warning"] .ai-viz-gantt-fill { background: rgba(245, 158, 11, 0.3); } .ai-viz-gantt-bar[data-status="upcoming"] .ai-viz-gantt-fill { background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } /* Gantt guidance callouts */ .ai-viz-gantt-guidance { margin-top: 0.4rem; padding-top: 0.35rem; border-top: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); display: flex; flex-direction: column; gap: 0.2rem; } .ai-viz-gantt-guidance-line { display: flex; align-items: flex-start; gap: 0.3rem; font-size: 0.48rem; line-height: 1.35; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); opacity: 0; transform: translateY(4px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-gantt-guidance-line.is-visible { opacity: 1; transform: translateY(0); } .ai-viz-gantt-guidance-icon { flex-shrink: 0; display: inline-flex; align-items: center; margin-top: 0.05rem; } .ai-viz-gantt-guidance-line[data-level="warning"] .ai-viz-gantt-guidance-icon { color: #f59e0b; } .ai-viz-gantt-guidance-line[data-level="info"] .ai-viz-gantt-guidance-icon { color: #818cf8; } .ai-viz-gantt-guidance-line[data-level="action"] .ai-viz-gantt-guidance-icon { color: #10b981; } .ai-viz-gantt-guidance-text { flex: 1; } /* Cross Journeys View — Carousel Panels */ .ai-cross-carousel { position: relative; max-width: 720px; margin: 0 auto; } .ai-cross-slides { min-height: 360px; } .ai-cross-panel { padding: 1.25rem 1.5rem; background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); border-radius: 14px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .ai-cross-panel-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; color: var(--blurple); } .ai-cross-panel-title { font-size: 0.82rem; font-weight: 600; color: var(--inv-bg-color); } .ai-cross-panel-sub { font-size: 0.68rem; color: color-mix(in srgb, var(--inv-bg-color) 38%, transparent); margin-left: 0.25rem; } .ai-cross-panel-inner { max-width: 620px; margin: 0 auto; } .ai-cross-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } .ai-cross-1col { display: flex; flex-direction: column; gap: 1.25rem; align-items: center; } /* Carousel bullet overrides (scoped) */ .ai-cross-carousel .carousel-bullets { margin-top: 1rem; gap: 10px; } .ai-cross-carousel .carousel-bullet { width: 12px; height: 12px; } .ai-cross-carousel .carousel-bullet::before { width: 8px; height: 8px; left: 2px; top: 2px; } /* Carousel arrows */ .ai-cross-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; border-radius: 50%; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; cursor: pointer; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease; z-index: 3; padding: 0; } .ai-cross-arrow:hover { color: var(--blurple); border-color: color-mix(in srgb, var(--blurple) 30%, transparent); background: color-mix(in srgb, var(--blurple) 6%, transparent); } .ai-cross-arrow--left { left: -2.75rem; } .ai-cross-arrow--right { right: -2.75rem; } .ai-cross-arrow svg { width: 14px; height: 14px; } /* Nav labels */ .ai-cross-nav-labels { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.72rem; color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent); } .ai-cross-nav-label { cursor: pointer; transition: color 0.25s ease; padding: 0.15rem 0; } .ai-cross-nav-label.is-active { color: var(--blurple); font-weight: 600; } .ai-cross-nav-sep { color: color-mix(in srgb, var(--inv-bg-color) 16%, transparent); } /* ── Hub 1: Chat Simulation ── */ .ai-cross-chat-sim { display: flex; flex-direction: column; gap: 0.6rem; } .ai-chat-sim-msg { opacity: 0; transform: translateY(10px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .ai-chat-sim-msg.is-visible { opacity: 1; transform: translateY(0); } .ai-chat-sim-user { display: flex; justify-content: flex-end; } .ai-chat-sim-bubble-user { background: color-mix(in srgb, var(--blurple) 14%, transparent); border: 0.5px solid color-mix(in srgb, var(--blurple) 22%, transparent); border-radius: 12px 12px 2px 12px; padding: 0.55rem 0.8rem; max-width: 80%; } .ai-chat-sim-text { font-size: 0.78rem; color: var(--inv-bg-color); margin: 0; min-height: 1.15em; } .ai-chat-sim-bubble-ai { background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); border-radius: 12px 12px 12px 2px; padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.45rem; } .ai-chat-sim-label { font-size: 0.65rem; font-weight: 600; color: var(--blurple); margin: 0; letter-spacing: 0.02em; } .ai-chat-sim-insight { font-size: 0.74rem; color: color-mix(in srgb, var(--inv-bg-color) 65%, transparent); margin: 0; line-height: 1.5; } .ai-chat-sim-insight strong { color: var(--inv-bg-color); } /* Inline chart in chat */ .ai-chat-sim-chart { width: 100%; max-width: 240px; height: auto; display: block; } .ai-chat-bar { transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .ai-chat-bar[data-bar-color="pos"] { fill: color-mix(in srgb, #10b981 60%, transparent); } .ai-chat-bar[data-bar-color="warn"] { fill: color-mix(in srgb, #fbbf24 55%, transparent); } .ai-chat-bar[data-bar-color="neg"] { fill: color-mix(in srgb, #f87171 55%, transparent); } .ai-chat-bar-label { font-size: 8px; fill: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); } /* Chat action pills */ .ai-chat-sim-actions { display: flex; gap: 0.4rem; } .ai-chat-sim-btn { font-size: 0.65rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 6px; border: 0.5px solid color-mix(in srgb, var(--blurple) 30%, transparent); background: color-mix(in srgb, var(--blurple) 8%, transparent); color: var(--blurple); cursor: default; opacity: 0; transition: opacity 0.4s ease; } .ai-chat-sim-btn.is-visible { opacity: 1; } /* Typing indicator */ .ai-chat-sim-typing { display: flex; gap: 4px; padding: 0 0.3rem; opacity: 0; transition: opacity 0.3s ease; } .ai-chat-sim-typing.is-visible { opacity: 1; } .ai-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); animation: aiTypingPulse 1.4s infinite ease-in-out; } .ai-typing-dot:nth-child(2) { animation-delay: 0.2s; } .ai-typing-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes aiTypingPulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } } /* ── Hub 1: Predictive Intelligence ── */ .ai-cross-predict { display: flex; flex-direction: column; gap: 0.6rem; } .ai-predict-header { display: flex; align-items: baseline; gap: 0.4rem; opacity: 0; transform: translateY(8px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-predict-header.is-visible { opacity: 1; transform: translateY(0); } .ai-predict-journey-name { font-size: 0.82rem; font-weight: 600; color: var(--inv-bg-color); } .ai-predict-template { font-size: 0.68rem; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); } .ai-predict-prob { display: flex; flex-direction: column; gap: 0.3rem; } .ai-predict-prob-label { font-size: 0.78rem; font-weight: 700; color: var(--inv-bg-color); } .ai-predict-duration { font-size: 0.72rem; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); margin: 0; } .ai-predict-signals-title { font-size: 0.65rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); text-transform: uppercase; letter-spacing: 0.06em; margin: 0.3rem 0 0; } .ai-predict-trust { font-size: 0.62rem; color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); border-top: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); padding-top: 0.5rem; margin: 0; opacity: 0; transition: opacity 0.5s ease; } .ai-predict-trust.is-visible { opacity: 1; } /* ── Hub 2: Data Explorer ── */ .ai-explorer-prompt { display: flex; align-items: center; gap: 0.5rem; background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); border-radius: 8px; padding: 0.6rem 1rem; max-width: 480px; width: 100%; } .ai-explorer-prompt-icon { flex-shrink: 0; color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); } .ai-explorer-prompt-text { font-size: 0.78rem; color: var(--inv-bg-color); min-height: 1.2em; } .ai-explorer-cursor { width: 2px; height: 1em; background: var(--blurple); animation: aiCursorBlink 1s step-end infinite; flex-shrink: 0; } .ai-explorer-result-stage { position: relative; min-height: 200px; width: 100%; max-width: 480px; } .ai-explorer-result { opacity: 0; transform: translateY(12px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; pointer-events: none; } .ai-explorer-result.is-visible { opacity: 1; transform: translateY(0); position: relative; pointer-events: auto; } .ai-explorer-big-num { font-size: 3.5rem; font-weight: 800; letter-spacing: -0.04em; color: var(--blurple); line-height: 1; font-variant-numeric: tabular-nums; } .ai-explorer-trend { display: flex; align-items: center; gap: 0.3rem; color: #10b981; } .ai-explorer-trend-label { font-size: 0.72rem; font-weight: 500; } .ai-explorer-funnel-title { font-size: 0.72rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); margin: 0 0 0.3rem; align-self: flex-start; } .ai-funnel-svg { width: 100%; max-width: 360px; height: auto; display: block; } .ai-funnel-bar { fill: color-mix(in srgb, var(--blurple) 50%, transparent); transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .ai-funnel-label { font-size: 8px; fill: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); } /* ── Hub 3: Success Hub ── */ .ai-success-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.75rem; } .ai-success-stat-card { text-align: center; padding: 0.6rem 0.4rem; border-radius: 8px; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); opacity: 0; transform: translateY(8px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-success-stat-card.is-visible { opacity: 1; transform: translateY(0); } .ai-success-stat-card:nth-child(2) { transition-delay: 0.08s; } .ai-success-stat-card:nth-child(3) { transition-delay: 0.16s; } .ai-success-stat-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; display: block; } .ai-success-stat-label { font-size: 0.62rem; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); } .ai-success-stat-card[data-stat="open"] .ai-success-stat-value { color: #f87171; } .ai-success-stat-card[data-stat="progress"] .ai-success-stat-value { color: #fbbf24; } .ai-success-stat-card[data-stat="resolved"] .ai-success-stat-value { color: #10b981; } .ai-success-trend-svg { width: 100%; max-width: 280px; height: auto; display: block; } .ai-success-trend-line { fill: none; stroke: var(--blurple); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1); } .ai-success-trend-line.is-drawn { stroke-dashoffset: 0; } .ai-success-trend-base { stroke: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); stroke-width: 0.5; } .ai-success-caption { font-size: 0.68rem; color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent); margin: 0.3rem 0 0; } .ai-success-caption strong { color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent); } /* Ticket rows inside carousel panels — animated */ .ai-cross-panel .ai-ticket-row { opacity: 0; transform: translateX(12px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-cross-panel .ai-ticket-row.is-visible { opacity: 1; transform: translateX(0); } .ai-cross-panel .ai-ticket-row:nth-child(2) { transition-delay: 0.08s; } .ai-cross-panel .ai-ticket-row:nth-child(3) { transition-delay: 0.16s; } .ai-cross-panel .ai-ticket-row:nth-child(4) { transition-delay: 0.24s; } .ai-cross-panel .ai-hub-integrations { opacity: 0; transition: opacity 0.5s ease 0.4s; } .ai-cross-panel .ai-hub-integrations.is-visible { opacity: 1; } /* Pivot table mini */ .ai-hub-pivot { display: flex; flex-direction: column; gap: 0; border-radius: 6px; overflow: hidden; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } .ai-pivot-row { display: grid; grid-template-columns: 1fr repeat(3, 42px); gap: 0; padding: 0.3rem 0.5rem; font-size: 0.68rem; text-align: center; } .ai-pivot-row:nth-child(even) { background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); } .ai-pivot-header-row { font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.6rem; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); } .ai-pivot-label { text-align: left; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); font-weight: 500; } .ai-pivot-val { color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); font-variant-numeric: tabular-nums; } .ai-pivot-pos { color: #10b981; font-weight: 600; } .ai-pivot-neg { color: color-mix(in srgb, #f87171 80%, transparent); } /* Ticket list mini */ .ai-hub-tickets { display: flex; flex-direction: column; gap: 0.4rem; } .ai-ticket-row { display: flex; align-items: center; gap: 0.45rem; font-size: 0.7rem; } .ai-ticket-badge { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .ai-ticket-open { background: #f87171; } .ai-ticket-progress { background: #fbbf24; } .ai-ticket-resolved { background: #10b981; } .ai-ticket-text { color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-ticket-age { color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); font-size: 0.62rem; font-variant-numeric: tabular-nums; flex-shrink: 0; } .ai-hub-integrations { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } .ai-hub-int-label { font-size: 0.62rem; color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); } .ai-hub-int-tag { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.04em; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); border-radius: 4px; padding: 0.12rem 0.4rem; } /* Thread lines (reused inside hub cards) */ .ai-threads-svg { width: 100%; height: auto; display: block; } .ai-thread-line { stroke: color-mix(in srgb, var(--blurple) 35%, transparent); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .ai-thread-line[data-thread="1"] { transition-delay: 0.1s; } .ai-thread-line[data-thread="2"] { transition-delay: 0.18s; } .ai-thread-line[data-thread="3"] { transition-delay: 0.28s; } .ai-thread-line[data-thread="4"] { transition-delay: 0.38s; } .ai-thread-line.is-drawn { stroke-dashoffset: 0; } .ai-thread-dot { fill: var(--blurple); opacity: 0; transition: opacity 0.4s ease; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--blurple) 80%, transparent)); } .ai-thread-dot[data-thread="0"].is-visible { transition-delay: 0.7s; } .ai-thread-dot[data-thread="1"].is-visible { transition-delay: 0.82s; } .ai-thread-dot[data-thread="2"].is-visible { transition-delay: 0.9s; } .ai-thread-dot[data-thread="3"].is-visible { transition-delay: 1.0s; } .ai-thread-dot[data-thread="4"].is-visible { transition-delay: 1.1s; } .ai-thread-dot.is-visible { opacity: 1; } /* (thread-names, org-bubble, ml-col, ml-card removed — replaced by hub cards) */ .ai-ml-bar-track { height: 6px; border-radius: 100px; background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); margin-bottom: 0.45rem; overflow: hidden; } .ai-ml-bar-fill { height: 100%; width: 0%; border-radius: 100px; background: linear-gradient(90deg, var(--blurple), color-mix(in srgb, var(--lightblue) 80%, var(--blurple))); transition: width 1.2s cubic-bezier(0.34, 1.0, 0.64, 1); box-shadow: 0 0 10px color-mix(in srgb, var(--blurple) 50%, transparent); } .ai-ml-bar-label { font-size: 0.72rem; font-weight: 600; color: var(--inv-bg-color); } .ai-shap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .ai-shap-item { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 0.5rem; } .ai-shap-name { font-size: 0.68rem; color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent); white-space: nowrap; } .ai-shap-bar-wrap { height: 6px; border-radius: 100px; background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent); overflow: hidden; } .ai-shap-bar { display: block; height: 100%; width: 0%; border-radius: 100px; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .ai-shap-item[data-shap-dir="pos"] .ai-shap-bar { background: linear-gradient(90deg, color-mix(in srgb, #10b981 70%, transparent), #10b981); } .ai-shap-item[data-shap-dir="neg"] .ai-shap-bar { background: linear-gradient(90deg, color-mix(in srgb, #f87171 70%, transparent), #f87171); } .ai-shap-pct { font-size: 0.65rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .ai-shap-item[data-shap-dir="pos"] .ai-shap-pct { color: #10b981; } .ai-shap-item[data-shap-dir="neg"] .ai-shap-pct { color: #f87171; } /* Stagger delays for SHAP bars */ .ai-shap-item:nth-child(1) .ai-shap-bar { transition-delay: 0.0s; } .ai-shap-item:nth-child(2) .ai-shap-bar { transition-delay: 0.1s; } .ai-shap-item:nth-child(3) .ai-shap-bar { transition-delay: 0.2s; } .ai-shap-item:nth-child(4) .ai-shap-bar { transition-delay: 0.3s; } /* Footer */ /* ── Footer: Tier 1 — stat hero ── */ .ai-practice-footer { padding-top: 2.5rem; padding-bottom: 1.5rem; margin-top: 0.75rem; display: flex; flex-direction: column; align-items: center; gap: 2rem; } .ai-practice-footer-hero { display: flex; align-items: center; gap: 1.25rem; max-width: 520px; } .ai-practice-stat { font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--blurple); flex-shrink: 0; } .ai-practice-stat-copy { display: flex; flex-direction: column; gap: 0.25rem; } .ai-practice-stat-headline { font-size: 0.95rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 80%, transparent); margin: 0; line-height: 1.3; } .ai-practice-stat-sub { font-size: 0.78rem; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); margin: 0; line-height: 1.5; } /* ── Footer: Tier 2 — pillars + CTA ── */ .ai-practice-footer-mid { display: flex; align-items: center; gap: 1.5rem; } .ai-practice-pillars-row { display: flex; align-items: center; gap: 0.5rem; } .ai-practice-pillar-tag { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.03em; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); } .ai-practice-pillar-sep { color: color-mix(in srgb, var(--inv-bg-color) 16%, transparent); font-size: 0.72rem; } /* ── Footer: Tier 3 — legal strip ── */ .ai-practice-footer-legal { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; max-width: 680px; } .ai-practice-legal-patent { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.03em; color: color-mix(in srgb, var(--inv-bg-color) 18%, transparent); white-space: nowrap; } .ai-practice-legal-divider { width: 0.5px; height: 10px; background: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); flex-shrink: 0; } .ai-practice-legal-tech-line { font-size: 0.55rem; font-weight: 400; letter-spacing: 0.04em; color: color-mix(in srgb, var(--inv-bg-color) 15%, transparent); line-height: 1.6; } /* Responsive */ @media (max-width: 768px) { .ai-practice-kicker { margin-bottom: 0.6rem; font-size: 0.6rem; letter-spacing: 0.3em; } .ai-practice-title { font-size: 1.6rem; } .ai-practice-toggle-wrap { margin-bottom: 1.25rem; } .ai-practice-toggle { padding: 3px; } .ai-practice-toggle-btn { font-size: 0.65rem; padding: 0.35rem 0.75rem; gap: 0.3rem; } .ai-practice-toggle-btn svg { width: 12px; height: 12px; } .ai-stage-ring { padding: 1.25rem 1rem; } .ai-ring-nodes { gap: 0.65rem; } .ai-stage-node-label { font-size: 0.55rem; } .ai-agent-panel-inner { grid-template-columns: 1fr; height: 360px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .ai-agent-panel-inner::-webkit-scrollbar { display: none; } .ai-agent-card { padding: 0.7rem 0.85rem; } .ai-cross-2col { grid-template-columns: 1fr; gap: 1.2rem; } .ai-cross-arrow { display: none; } .ai-shap-item { grid-template-columns: 80px 1fr auto; gap: 0.5rem; } .ai-practice-footer-hero { flex-direction: column; text-align: center; gap: 0.75rem; } .ai-practice-footer-mid { flex-direction: column; gap: 1rem; } .ai-practice-footer-legal { flex-direction: column; gap: 0.35rem; text-align: center; } .ai-practice-legal-divider { display: none; } .ai-practice-legal-patent { white-space: normal; } .ai-cross-nav-labels { font-size: 0.65rem; } .ai-explorer-big-num { font-size: 2.5rem; } } @media (max-width: 480px) { .ai-practice-title { font-size: 1.4rem; } .ai-practice-toggle-btn { font-size: 0.58rem; padding: 0.3rem 0.6rem; } .ai-stage-node-label { display: none; } .ai-stage-ring { padding: 1rem 0.75rem; border-radius: 16px; } .ai-ring-nodes { gap: 0.4rem; } .ai-stage-node-dot { width: 28px; height: 28px; } .ai-stage-node::before, .ai-stage-node::after { width: 28px; height: 28px; top: 14px; } .ai-stage-context-name { font-size: 0.95rem; } .ai-stage-context-desc { font-size: 0.58rem; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .ai-thread-line, .ai-ml-bar-fill, .ai-shap-bar { transition: none !important; } .ai-ring-orbit::after { animation: none !important; display: none; } .ai-viz-check-row { opacity: 1 !important; transform: none !important; transition: none !important; } .ai-viz-bar-fill { transition: none !important; } .ai-viz-chat-msg { opacity: 1 !important; transform: none !important; transition: none !important; } .ai-viz-ingest-chip, .ai-viz-ingest-processing, .ai-viz-capture-field, .ai-viz-doc-section, .ai-viz-review-card, .ai-viz-review-step1, .ai-viz-report-section, .ai-viz-assign-card, .ai-viz-assign-progress, .ai-viz-dash-section, .ai-viz-gantt-row, .ai-viz-gantt-today, .ai-viz-gantt-guidance-line { opacity: 1 !important; transform: none !important; transition: none !important; } .ai-viz-gantt-fill { width: var(--gantt-progress, 0%) !important; transition: none !important; } .ai-thread-line { stroke-dashoffset: 0; } .ai-agent-card { transition: none !important; opacity: 1; transform: none; } .ai-stage-node.is-active .ai-stage-node-dot, .ai-stage-node.is-active::before, .ai-stage-node.is-active::after { animation: none; } .ai-stage-node::before, .ai-stage-node::after { display: none; } .ai-stage-node-ring-outer, .ai-stage-node-ring-inner { animation: none !important; display: none; } .ai-agent-panel-scanline { animation: none !important; display: none; } .ai-agent-card-shimmer-track { animation: none !important; display: none; } .ai-agent-panel-glow-primary, .ai-agent-panel-glow-secondary { animation: none !important; } .ai-agent-card { transform: none !important; } .ai-agent-status-ring { animation: none !important; display: none; } .ai-stage-node:not(.is-active):not(.is-past) .ai-stage-node-dot { animation: none; } .ai-agent-card-accent { opacity: 1; } .ai-agent-card-cursor { animation: none; opacity: 1; } .ai-agent-status-dot, .ai-typing-dot { animation: none; } .ai-explorer-cursor { animation: none; opacity: 1; } .ai-chat-sim-msg, .ai-predict-header, .ai-predict-trust, .ai-explorer-result, .ai-success-stat-card, .ai-cross-panel .ai-ticket-row, .ai-cross-panel .ai-hub-integrations, .ai-chat-sim-btn { opacity: 1 !important; transform: none !important; transition: none !important; } .ai-chat-sim-typing { display: none; } .ai-chat-bar, .ai-funnel-bar, .ai-success-trend-line { transition: none !important; } .ai-success-trend-line { stroke-dashoffset: 0; } .meets-crm-bridge::before { animation: none !important; } } /* ============================================================ END AI IN PRACTICE SECTION ============================================================ */ /* ════════════════════════════════════════════════════════════════════ V6 HERO MICRO-PASS Just two primitives, scoped to the hero only: 1. .grad-text — CN blurple→purple gradient on inline text 2. .v6-btn / .v6-btn-primary / .v6-btn-ghost — premium pill CTAs Used in the hero headline ("Executable Journeys") and the two hero CTAs ("Get Started" + "How It Works"). Nothing else. ════════════════════════════════════════════════════════════════════ */.hero .grad-text, .surface-beat--navigate .grad-text{ background: linear-gradient(135deg, var(--blurple) 0%, var(--purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; display: inline; } /* Subtle PLG-style CTAs — text-forward, not blob-buttons. Quiet at rest (no solid fill, no heavy shadow), warm on hover (subtle background tint + lift + scale). Smaller padding/type than transactional buttons so they read as "explore" not "buy now". */.hero .v6-btn, .surface-beat--navigate .v6-btn{ display: inline-flex; align-items: center; gap: 0.3rem; /* Symmetric vertical + horizontal padding so the hover background has equal breathing room on all sides around the text. */ padding: 0.4rem 0.7rem; border-radius: 9999px; font-family: var(--font-main); font-size: 0.75rem; font-weight: 500; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transform-origin: center; background: transparent; transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms ease, color 240ms ease, border-color 240ms ease !important; }.hero .v6-btn svg, .surface-beat--navigate .v6-btn svg{ width: 14px; height: 14px; flex-shrink: 0; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); } /* Primary: just text + arrow at rest. On hover: subtle bg tint + arrow slides right + lift + scale. No solid fills, no heavy shadow. */.hero .v6-btn-primary, .surface-beat--navigate .v6-btn-primary{ background: transparent; color: var(--inv-bg-color) !important; border-color: transparent; }.hero .v6-btn-primary:hover, .hero .v6-btn-primary:focus-visible, .surface-beat--navigate .v6-btn-primary:hover, .surface-beat--navigate .v6-btn-primary:focus-visible{ background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent); color: var(--inv-bg-color) !important; transform: translateY(-2px) scale(1.05) !important; }.hero .v6-btn-primary:hover svg, .hero .v6-btn-primary:focus-visible svg, .surface-beat--navigate .v6-btn-primary:hover svg, .surface-beat--navigate .v6-btn-primary:focus-visible svg{ transform: translateX(2px); } /* Ghost: even quieter — same shape, lower-weight text color at rest. */.hero .v6-btn-ghost, .surface-beat--navigate .v6-btn-ghost{ background: transparent; color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent) !important; border-color: transparent; }.hero .v6-btn-ghost:hover, .hero .v6-btn-ghost:focus-visible, .surface-beat--navigate .v6-btn-ghost:hover, .surface-beat--navigate .v6-btn-ghost:focus-visible{ background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); color: var(--inv-bg-color) !important; transform: translateY(-2px) scale(1.05) !important; } /* ─────────── V6 mockup panel (contains navigator-ring + stage card) ─────────── Glass card surface with a subtle 3D tilt at rest. Reads as a real SaaS-app window angled in space. Backdrop-filter is intentionally small (8px) so it adds the frosted-glass feel without fogging out the content underneath. */.hero .v6-mockup-panel, .surface-beat--navigate .v6-mockup-panel{ position: relative; padding: clamp(18px, 2.6vw, 32px); border-radius: clamp(20px, 2.2vw, 28px); background: color-mix(in srgb, var(--main-bg-color) 46%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 16%, transparent); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); /* Make room for the macOS-style window chrome bar that sits across the top. */ padding-top: calc(clamp(18px, 2.6vw, 32px) + 24px); box-shadow: 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 8%, transparent) inset, 0 6px 16px color-mix(in srgb, var(--inv-bg-color) 8%, transparent), 0 32px 72px color-mix(in srgb, var(--inv-bg-color) 14%, transparent), 0 64px 140px color-mix(in srgb, var(--inv-bg-color) 8%, transparent); /* Subtle 3D tilt — like a real product screen sitting in space. 3° is mild enough that the orbital ring inside still reads as a circle (the foreshortening is barely perceptible). */ transform: perspective(1600px) rotateY(-3deg) rotateX(2deg); transform-style: preserve-3d; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); isolation: isolate; }.hero .v6-mockup-panel:hover, .surface-beat--navigate .v6-mockup-panel:hover{ transform: perspective(1600px) rotateY(-1.5deg) rotateX(1deg) translateY(-2px); }.hero .v6-mockup-glow, .surface-beat--navigate .v6-mockup-glow{ position: absolute; inset: -8%; background: radial-gradient(38% 42% at 70% 18%, color-mix(in srgb, var(--purple) 14%, transparent), transparent 65%), radial-gradient(38% 42% at 30% 82%, color-mix(in srgb, var(--blurple) 12%, transparent), transparent 65%); filter: blur(36px); z-index: -1; pointer-events: none; opacity: 0.8; } /* ─── macOS-style window chrome ─── Strip across the top of the .v6-mockup-panel with three traffic-light dots (red/yellow/green) like a desktop browser/native window. Sells the "this is a real product surface" framing. */.hero .v6-mockup-panel .v6-window-chrome, .surface-beat--navigate .v6-mockup-panel .v6-window-chrome{ position: absolute; top: 0; left: 0; right: 0; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-top-left-radius: inherit; border-top-right-radius: inherit; background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); z-index: 25; pointer-events: none; }.hero .v6-mockup-panel .v6-traffic-light, .surface-beat--navigate .v6-mockup-panel .v6-traffic-light{ width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }.hero .v6-mockup-panel .v6-traffic-red, .surface-beat--navigate .v6-mockup-panel .v6-traffic-red{ background: #FF5F57; }.hero .v6-mockup-panel .v6-traffic-yellow, .surface-beat--navigate .v6-mockup-panel .v6-traffic-yellow{ background: #FEBC2E; }.hero .v6-mockup-panel .v6-traffic-green, .surface-beat--navigate .v6-mockup-panel .v6-traffic-green{ background: #28C840; } /* ═══════════════════════════════════════════════════════════════════ .v6-chrome-persona-toggle — Seller / Customer switcher ────────────────────────────────────────────────────────────────── Sits at the right end of the window chrome (margin-left:auto). The panel's `data-persona` attribute is the source of truth; CSS slides the thumb left/right based on that single attribute. Auto-cycle beat 6 clicks the Customer segment via the stage fx cursor; users can also click directly (the chrome opts-back-in to pointer events on the toggle while keeping the rest of the chrome inert). ════════════════════════════════════════════════════════════════ */.hero .v6-mockup-panel .v6-chrome-persona-toggle, .surface-beat--navigate .v6-mockup-panel .v6-chrome-persona-toggle{ position: relative; margin-left: auto; display: inline-flex; align-items: stretch; height: 20px; padding: 2px; border-radius: 999px; background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); pointer-events: auto; font-family: var(--brand-font); } /* Hairline divider between the two segments so they don't visually merge into one label. Sits centered, above the thumb, below the text. Slightly inset top/bottom so it reads as a soft seam, not a hard slash. */.hero .v6-mockup-panel .v6-chrome-persona-toggle::after, .surface-beat--navigate .v6-mockup-panel .v6-chrome-persona-toggle::after{ content: ""; position: absolute; top: 5px; bottom: 5px; left: 50%; width: 1px; background: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); transform: translateX(-50%); pointer-events: none; z-index: 2; transition: opacity 220ms ease; }.hero .v6-mockup-panel .v6-chrome-persona-seg, .surface-beat--navigate .v6-mockup-panel .v6-chrome-persona-seg{ position: relative; z-index: 3; /* Equal widths so the thumb (50%) covers exactly one segment, and text sits centered in its half — labels of unequal length ("Seller" vs "Customer") don't pull the visual center off. */ flex: 1 1 0; min-width: 56px; padding: 0 4px; border: none; background: none; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); font-size: 9.5px; font-weight: 600; letter-spacing: -0.005em; line-height: 16px; text-align: center; cursor: pointer; transition: color 220ms ease; }.hero .v6-mockup-panel .v6-chrome-persona-thumb, .surface-beat--navigate .v6-mockup-panel .v6-chrome-persona-thumb{ position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 999px; background: var(--main-bg-color); box-shadow: 0 1px 2px color-mix(in srgb, var(--inv-bg-color) 12%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms ease; z-index: 1; } /* When persona=guest, slide thumb to the right segment. */.hero .v6-mockup-panel[data-persona="guest"] .v6-chrome-persona-thumb, .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-chrome-persona-thumb{ transform: translateX(100%); background: color-mix(in srgb, var(--purple) 10%, var(--main-bg-color)); } /* Active segment label gets full ink color; the other one stays muted. */.hero .v6-mockup-panel[data-persona="host"] .v6-chrome-persona-seg[data-persona-set="host"], .hero .v6-mockup-panel[data-persona="guest"] .v6-chrome-persona-seg[data-persona-set="guest"], .surface-beat--navigate .v6-mockup-panel[data-persona="host"] .v6-chrome-persona-seg[data-persona-set="host"], .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-chrome-persona-seg[data-persona-set="guest"]{ color: var(--v6-ink); }.hero .v6-mockup-panel[data-persona="guest"] .v6-chrome-persona-seg[data-persona-set="guest"], .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-chrome-persona-seg[data-persona-set="guest"]{ color: var(--purple); } /* The old per-stage persona pill is replaced by the chrome toggle. Keep the element in the DOM (cycle script still queries it for the segment text) but hide it visually. */.hero .v6-mockup-panel .v6-persona-pill, .surface-beat--navigate .v6-mockup-panel .v6-persona-pill{ display: none !important; } /* Entrance: swing-in tilt that composes with the panel's at-rest tilt. */.hero .hero-reveal-grand, .surface-beat--navigate .surface-beat--navigate-reveal-grand{ transform: perspective(1600px) rotateY(-10deg) rotateX(5deg) translateY(40px) scale(0.92) !important; filter: none !important; }body.is-loaded .hero .hero-reveal-grand, body.is-loaded .surface-beat--navigate .surface-beat--navigate-reveal-grand{ animation: heroGrand 1400ms cubic-bezier(0.16, 1, 0.3, 1) 350ms forwards !important; } @keyframes heroGrand { to { opacity: 1; transform: perspective(1600px) rotateY(0) rotateX(0) translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) {.hero .v6-mockup-panel, .surface-beat--navigate .v6-mockup-panel{ transform: none !important; transition: none !important; } } /* ════════════════════════════════════════════════════════════════════ V6 HERO WIDGET — full state machine Drives the .v6-mockup-panel through six phases via [data-v6-phase]: boot → invisible, waiting for visibility trigger chaos → tool windows scatter + drift, confused avatar dissolve → everything collapses to center cn → CN logo materializes, "One platform" click → cursor clicks the logo, ripple ring → navigator-ring fills the panel (overview state) stage → a .v6-stage-panel zooms in (data-active-stage) success → "Stage complete" overlay flashes, then back to ring Builds on the existing CN navigator-ring (kept untouched, still in DOM) but the stage-progress-card is hidden — we render purpose-built per- stage panels that match the real SPA's design vocabulary. ════════════════════════════════════════════════════════════════════ */ /* Hide the legacy stage-progress-card — its content is replaced by .v6-stage-panel */.hero .v6-mockup-panel .stage-progress-card, .surface-beat--navigate .v6-mockup-panel .stage-progress-card{ display: none !important; } /* Bridge tokens for the SPA design vocabulary */.hero .v6-mockup-panel, .surface-beat--navigate .v6-mockup-panel{ --v6-paper: var(--main-bg-color); --v6-paper-2: var(--off-bg-color); --v6-ink: var(--inv-bg-color); --v6-ink-2: color-mix(in srgb, var(--inv-bg-color) 72%, transparent); --v6-ink-3: color-mix(in srgb, var(--inv-bg-color) 52%, transparent); --v6-hair: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); --v6-hair-strong: color-mix(in srgb, var(--inv-bg-color) 14%, transparent); --v6-glass: color-mix(in srgb, var(--main-bg-color) 82%, transparent); --v6-glass-strong: color-mix(in srgb, var(--main-bg-color) 92%, transparent); --v6-grad-cn: linear-gradient(135deg, var(--blurple) 0%, var(--purple) 100%); --v6-spring: cubic-bezier(0.16, 1, 0.3, 1); --v6-ease: cubic-bezier(0.22, 1, 0.36, 1); --v6-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; } /* Navigator-ring entrance/exit driven by [data-v6-phase]. --v6-tilt mirrors the panel's own perspective+rotation so the ring (and everything inside it — nodes, center, stroke) sits on the same tilted plane as the panel surface. Phase rules below compose --v6-tilt with their scale so the tilt is preserved across the cycle. */.hero .v6-mockup-panel .navigator-ring, .surface-beat--navigate .v6-mockup-panel .navigator-ring{ --v6-tilt: perspective(1600px) rotateY(-3deg) rotateX(2deg); transform: var(--v6-tilt); transition: opacity 700ms var(--v6-ease), transform 900ms var(--v6-spring), filter 480ms ease, --completion-percent 700ms cubic-bezier(0.22, 1, 0.36, 1); } /* Stage → ring transition: ring slides in from the left when JS adds the `.v6-ring-slide-in` class (during the between-stages advance). The ring's natural size can exceed the mockup panel's width, so sliding it with translateX would overflow the pseudo-screen frame and break physics. The companion `.has-ring-sliding` class on the panel itself flips overflow:hidden for the duration of the slide so the ring is clipped to the panel's rounded rect. */.hero .v6-mockup-panel.has-ring-sliding, .surface-beat--navigate .v6-mockup-panel.has-ring-sliding{ overflow: hidden; }.hero .v6-mockup-panel .navigator-ring.v6-ring-slide-in, .surface-beat--navigate .v6-mockup-panel .navigator-ring.v6-ring-slide-in{ animation: v6RingSlideIn 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes v6RingSlideIn { 0% { transform: var(--v6-tilt) translateX(-60%); opacity: 0; } 100% { transform: var(--v6-tilt) translateX(0); opacity: 1; } } /* === Phase visibility orchestration === */.hero .v6-mockup-panel[data-v6-phase="boot"] .navigator-ring, .hero .v6-mockup-panel[data-v6-phase="chaos"] .navigator-ring, .hero .v6-mockup-panel[data-v6-phase="dissolve"] .navigator-ring, .hero .v6-mockup-panel[data-v6-phase="cn"] .navigator-ring, .hero .v6-mockup-panel[data-v6-phase="click"] .navigator-ring, .hero .v6-mockup-panel[data-v6-phase="csn"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="boot"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="chaos"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="cn"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="click"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .navigator-ring{ opacity: 0; transform: var(--v6-tilt) scale(0.85); filter: blur(8px); pointer-events: none; }.hero .v6-mockup-panel[data-v6-phase="stage"] .navigator-ring, .hero .v6-mockup-panel[data-v6-phase="success"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .navigator-ring{ opacity: 0.18; transform: var(--v6-tilt) scale(0.74); filter: blur(3px); pointer-events: none; } /* === INTRO container — sits over everything else during phases 0-3 === */.hero .v6-mockup-panel .v6-intro, .surface-beat--navigate .v6-mockup-panel .v6-intro{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 5; color: var(--v6-ink); }.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-intro, .hero .v6-mockup-panel[data-v6-phase="ring"] .v6-intro, .hero .v6-mockup-panel[data-v6-phase="stage"] .v6-intro, .hero .v6-mockup-panel[data-v6-phase="success"] .v6-intro, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-intro, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .v6-intro, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .v6-intro, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .v6-intro{ opacity: 0; pointer-events: none; transition: opacity 600ms var(--v6-ease); } /* --- Chaos phase --- */.hero .v6-mockup-panel .v6-intro-chaos, .surface-beat--navigate .v6-mockup-panel .v6-intro-chaos{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 600ms var(--v6-ease), transform 800ms var(--v6-spring), filter 480ms ease; }.hero .v6-mockup-panel[data-v6-phase="chaos"] .v6-intro-chaos, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="chaos"] .v6-intro-chaos{ opacity: 1; }.hero .v6-mockup-panel[data-v6-phase="dissolve"] .v6-intro-chaos, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .v6-intro-chaos{ opacity: 0; transform: scale(0.6); filter: blur(14px); } /* Tools positioned in the 4 corners of the chaos area via simple top/right/bottom/left + transform-based rotation + jitter. */.hero .v6-mockup-panel .v6-tool, .surface-beat--navigate .v6-mockup-panel .v6-tool{ position: absolute; display: flex; align-items: center; gap: 7px; padding: 7px 10px 7px 7px; max-width: 140px; background: var(--v6-glass); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px solid var(--v6-hair-strong); border-radius: 10px; box-shadow: 0 6px 18px color-mix(in srgb, var(--v6-ink) 10%, transparent), 0 2px 6px color-mix(in srgb, var(--v6-ink) 6%, transparent); will-change: transform; }.hero .v6-mockup-panel .v6-tool-tl, .surface-beat--navigate .v6-mockup-panel .v6-tool-tl{ top: 6%; left: 4%; animation: v6ToolJitterTL 4s ease-in-out infinite; }.hero .v6-mockup-panel .v6-tool-tr, .surface-beat--navigate .v6-mockup-panel .v6-tool-tr{ top: 10%; right: 4%; animation: v6ToolJitterTR 4.4s ease-in-out infinite; }.hero .v6-mockup-panel .v6-tool-bl, .surface-beat--navigate .v6-mockup-panel .v6-tool-bl{ bottom: 18%; left: 6%; animation: v6ToolJitterBL 4.8s ease-in-out infinite; }.hero .v6-mockup-panel .v6-tool-br, .surface-beat--navigate .v6-mockup-panel .v6-tool-br{ bottom: 14%; right: 4%; animation: v6ToolJitterBR 4.2s ease-in-out infinite; } @keyframes v6ToolJitterTL { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-3deg) translate(4px, -3px); } } @keyframes v6ToolJitterTR { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(2deg) translate(-5px, -3px); } } @keyframes v6ToolJitterBL { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(1deg) translate(5px, 3px); } } @keyframes v6ToolJitterBR { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(-2deg) translate(-4px, 3px); } }.hero .v6-mockup-panel .v6-tool-mark, .surface-beat--navigate .v6-mockup-panel .v6-tool-mark{ width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: var(--v6-mono); font-size: 10px; font-weight: 700; color: #fff; letter-spacing: 0; flex-shrink: 0; }.hero .v6-mockup-panel .v6-tool-mark-sf, .surface-beat--navigate .v6-mockup-panel .v6-tool-mark-sf{ background: #00A1E0; }.hero .v6-mockup-panel .v6-tool-mark-sl, .surface-beat--navigate .v6-mockup-panel .v6-tool-mark-sl{ background: #4A154B; }.hero .v6-mockup-panel .v6-tool-mark-nt, .surface-beat--navigate .v6-mockup-panel .v6-tool-mark-nt{ background: #000; color: #fff; }.hero .v6-mockup-panel .v6-tool-mark-ds, .surface-beat--navigate .v6-mockup-panel .v6-tool-mark-ds{ background: #FFC700; color: #000; }.hero .v6-mockup-panel .v6-tool-body, .surface-beat--navigate .v6-mockup-panel .v6-tool-body{ display: flex; flex-direction: column; line-height: 1.2; }.hero .v6-mockup-panel .v6-tool-name, .surface-beat--navigate .v6-mockup-panel .v6-tool-name{ font-family: var(--brand-font); font-size: 11px; font-weight: 600; color: var(--v6-ink); letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-tool-snippet, .surface-beat--navigate .v6-mockup-panel .v6-tool-snippet{ font-family: var(--v6-mono); font-size: 9px; color: var(--v6-ink-3); letter-spacing: 0.02em; margin-top: 2px; }.hero .v6-mockup-panel .v6-confused-avatar, .surface-beat--navigate .v6-mockup-panel .v6-confused-avatar{ position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; border-radius: 50%; background: var(--v6-grad-cn); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--v6-mono); font-size: 11px; font-weight: 700; transform: translate(-50%, -50%); box-shadow: 0 6px 20px rgba(120, 115, 245, 0.45); animation: v6AvatarBounce 2.6s ease-in-out infinite; z-index: 1; }.hero .v6-mockup-panel .v6-confused-q, .surface-beat--navigate .v6-mockup-panel .v6-confused-q{ position: absolute; top: -8px; right: -10px; width: 16px; height: 16px; border-radius: 50%; background: var(--v6-paper); color: var(--v6-ink); display: flex; align-items: center; justify-content: center; font-family: var(--brand-font); font-size: 11px; font-weight: 700; border: 1.5px solid var(--v6-ink); } @keyframes v6AvatarBounce { 0%, 100% { transform: translate(-50%, -50%) translate(0, 0); } 25% { transform: translate(-50%, -50%) translate(-22px, -12px); } 50% { transform: translate(-50%, -50%) translate(18px, 8px); } 75% { transform: translate(-50%, -50%) translate(-10px, 14px); } }.hero .v6-mockup-panel .v6-chaos-connectors, .surface-beat--navigate .v6-mockup-panel .v6-chaos-connectors{ position: absolute; inset: 12%; width: 76%; height: 76%; color: var(--v6-ink-3); opacity: 0.35; pointer-events: none; }.hero .v6-mockup-panel .v6-intro-label, .surface-beat--navigate .v6-mockup-panel .v6-intro-label{ position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-family: var(--v6-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v6-ink-3); white-space: nowrap; } /* --- CN materializes --- */.hero .v6-mockup-panel .v6-intro-cn, .surface-beat--navigate .v6-mockup-panel .v6-intro-cn{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: scale(0.85); filter: blur(12px); transition: opacity 600ms var(--v6-ease), transform 800ms var(--v6-spring), filter 480ms ease; }.hero .v6-mockup-panel[data-v6-phase="cn"] .v6-intro-cn, .hero .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="cn"] .v6-intro-cn, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn{ opacity: 1; transform: scale(1); filter: blur(0); }.hero .v6-mockup-panel .v6-intro-cn-burst, .surface-beat--navigate .v6-mockup-panel .v6-intro-cn-burst{ position: absolute; top: 50%; left: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%); background: radial-gradient(circle at center, rgba(120, 115, 245, 0.22) 0%, transparent 60%), radial-gradient(circle at center, rgba(86, 154, 241, 0.18) 0%, transparent 70%); filter: blur(20px); opacity: 0; }.hero .v6-mockup-panel[data-v6-phase="cn"] .v6-intro-cn-burst, .hero .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-burst, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="cn"] .v6-intro-cn-burst, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-burst{ animation: v6Burst 1.2s var(--v6-ease) forwards; } @keyframes v6Burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.05); } }.hero .v6-mockup-panel .v6-intro-cn-logo, .surface-beat--navigate .v6-mockup-panel .v6-intro-cn-logo{ width: 64px; height: 64px; object-fit: contain; margin-bottom: 14px; z-index: 1; display: block; filter: drop-shadow(0 14px 36px rgba(120, 115, 245, 0.40)) drop-shadow(0 4px 10px rgba(120, 115, 245, 0.22)); }.hero .v6-mockup-panel .v6-intro-cn-mark, .surface-beat--navigate .v6-mockup-panel .v6-intro-cn-mark{ font-family: var(--brand-font); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--v6-ink); z-index: 1; }.hero .v6-mockup-panel .v6-intro-cn-tm, .surface-beat--navigate .v6-mockup-panel .v6-intro-cn-tm{ font-size: 0.6em; vertical-align: super; opacity: 0.5; margin-left: 2px; } /* --- Cursor + click ripple --- Cursor lands on the LOGO (which sits ~38px above center, since logo is 64px + 14px margin-bottom + wordmark below). We aim the cursor's tip into the logo, not the wordmark. */ /* ═══════════════════════════════════════════════════════════════════ .v6-fx — UNIFIED CURSOR + RIPPLE POSITIONING UTILITY ────────────────────────────────────────────────────────────────── One wrapper sits AT the click point (--fx-x, --fx-y, relative to the panel center). Children — the cursor SVG and the ripple — live inside this 0×0 wrapper, so: • The cursor's tip (its viewBox 0,0) is pinned to the wrapper origin: top:0; left:0; no per-site offset to remember. • The ripple is auto-centered on the wrapper origin via margin: calc(size / -2). No per-site "subtract half the ripple width" gotcha. Both consume ONE source of truth — the wrapper's own position. They cannot drift apart. Adjusting where a click lands means editing one (x, y) pair, full stop. USAGE

JS toggles `.is-clicking` on the wrapper to fire cursor-in + ripple in lockstep. OPTIONAL OVERRIDES (set on the wrapper) --fx-duration cursor-in animation length (default 900ms) --fx-delay delay before fire (default 0ms) --fx-ripple-size diameter of the ripple disc (default 90px) ════════════════════════════════════════════════════════════════ */.hero .v6-mockup-panel .v6-fx, .surface-beat--navigate .v6-mockup-panel .v6-fx{ position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: translate(var(--fx-x, 0px), var(--fx-y, 0px)); pointer-events: none; z-index: 20; }.hero .v6-mockup-panel .v6-fx__cursor, .surface-beat--navigate .v6-mockup-panel .v6-fx__cursor{ position: absolute; top: 0; left: 0; width: 18px; height: 22px; /* The wrapper is 0×0 — and tidyTemplate.css's preflight clamps every svg to `max-width: 100%`, which would otherwise squash the cursor to zero width inside the zero-width wrapper. Opt out explicitly. */ max-width: none; max-height: none; color: var(--v6-ink); opacity: 0; transform-origin: 0 0; }.hero .v6-mockup-panel .v6-fx__ripple, .surface-beat--navigate .v6-mockup-panel .v6-fx__ripple{ --_size: var(--fx-ripple-size, 90px); position: absolute; top: 0; left: 0; width: var(--_size); height: var(--_size); margin-top: calc(var(--_size) / -2); margin-left: calc(var(--_size) / -2); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--blurple) 55%, transparent) 0%, transparent 70%); opacity: 0; transform-origin: 50% 50%; } /* Single class fires cursor + ripple in lockstep. */.hero .v6-mockup-panel .v6-fx.is-clicking .v6-fx__cursor, .surface-beat--navigate .v6-mockup-panel .v6-fx.is-clicking .v6-fx__cursor{ animation: v6FxCursorIn var(--fx-duration, 900ms) cubic-bezier(0.22, 1, 0.36, 1) var(--fx-delay, 0ms) forwards; }.hero .v6-mockup-panel .v6-fx.is-clicking .v6-fx__ripple, .surface-beat--navigate .v6-mockup-panel .v6-fx.is-clicking .v6-fx__ripple{ /* Ripple fires at the press moment: delay + 65% × duration. */ animation: v6FxRipple 600ms ease-out calc(var(--fx-delay, 0ms) + var(--fx-duration, 900ms) * 0.65) forwards; } /* Unified rhythm (percentages of --fx-duration): * 0% invisible, off to the lower-right * 50% lands at origin, opacity 1 * 65% presses (scale 0.88, micro-shift) — the click moment * 80% releases, back at origin * 100% held at origin */ @keyframes v6FxCursorIn { 0% { opacity: 0; transform: translate(60px, 60px) scale(0.6); } 50% { opacity: 1; transform: translate(0, 0) scale(1); } 65% { transform: translate(-4px, -4px) scale(0.88); } 80% { transform: translate(0, 0) scale(1); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } @keyframes v6FxRipple { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.6); } } @media (prefers-reduced-motion: reduce) {.hero .v6-mockup-panel .v6-fx.is-clicking .v6-fx__cursor, .hero .v6-mockup-panel .v6-fx.is-clicking .v6-fx__ripple, .surface-beat--navigate .v6-mockup-panel .v6-fx.is-clicking .v6-fx__cursor, .surface-beat--navigate .v6-mockup-panel .v6-fx.is-clicking .v6-fx__ripple{ animation: none !important; opacity: 0 !important; } } /* === STAGE-COMPLETE OVERLAY === Enter: overlay fades + blurs in, check settles with a soft overshoot under a radiating glow ring, label rises a beat after. Exit: overlay fades out smoothly with a slight blur build, no hard cut. */.hero .v6-mockup-panel .v6-stage-success, .surface-beat--navigate .v6-mockup-panel .v6-stage-success{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--blurple) 10%, transparent) 0%, transparent 70%), color-mix(in srgb, var(--main-bg-color) 36%, transparent); backdrop-filter: blur(0px) saturate(1); -webkit-backdrop-filter: blur(0px) saturate(1); border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), backdrop-filter 620ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-backdrop-filter 620ms cubic-bezier(0.22, 1, 0.36, 1); z-index: 20; }.hero .v6-mockup-panel[data-v6-phase="success"] .v6-stage-success, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .v6-stage-success{ opacity: 1; backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); } /* Glow ring sweeps out from behind the check on enter */.hero .v6-mockup-panel .v6-ss-check, .surface-beat--navigate .v6-mockup-panel .v6-ss-check{ position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--v6-grad-cn); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 36px color-mix(in srgb, var(--blurple) 50%, transparent), 0 0 0 1px color-mix(in srgb, #fff 14%, transparent) inset; transform: scale(0.55); filter: blur(10px); opacity: 0; }.hero .v6-mockup-panel .v6-ss-check::before, .surface-beat--navigate .v6-mockup-panel .v6-ss-check::before{ content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--blurple) 55%, transparent); opacity: 0; pointer-events: none; }.hero .v6-mockup-panel[data-v6-phase="success"] .v6-ss-check, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .v6-ss-check{ animation: v6SsCheckIn 860ms cubic-bezier(0.34, 1.4, 0.5, 1) 140ms forwards; }.hero .v6-mockup-panel[data-v6-phase="success"] .v6-ss-check::before, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .v6-ss-check::before{ animation: v6SsCheckRing 1100ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards; } @keyframes v6SsCheckIn { 0% { transform: scale(0.55); filter: blur(10px); opacity: 0; } 55% { transform: scale(1.06); filter: blur(0); opacity: 1; } 78% { transform: scale(0.98); } 100% { transform: scale(1); filter: blur(0); opacity: 1; } } @keyframes v6SsCheckRing { 0% { transform: scale(0.7); opacity: 0; } 35% { opacity: 0.7; } 100% { transform: scale(2.1); opacity: 0; } }.hero .v6-mockup-panel .v6-ss-label, .surface-beat--navigate .v6-mockup-panel .v6-ss-label{ font-family: var(--brand-font); font-size: 16px; font-weight: 600; color: var(--v6-ink); letter-spacing: -0.015em; opacity: 0; transform: translateY(10px); filter: blur(4px); }.hero .v6-mockup-panel[data-v6-phase="success"] .v6-ss-label, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .v6-ss-label{ animation: v6SsLabelIn 640ms cubic-bezier(0.22, 1, 0.36, 1) 360ms forwards; } @keyframes v6SsLabelIn { 0% { opacity: 0; transform: translateY(10px); filter: blur(4px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } /* === STAGE PANELS === All 6 sit absolutely positioned in the same slot. Only the one with .is-active is visible. Container becomes visible during phase=stage. */.hero .v6-mockup-panel .v6-stage-panels, .surface-beat--navigate .v6-mockup-panel .v6-stage-panels{ position: absolute; inset: 8% 6%; z-index: 8; opacity: 0; transform: scale(0.92); filter: blur(4px); transition: opacity 600ms var(--v6-ease), transform 700ms var(--v6-spring), filter 460ms ease; pointer-events: none; }.hero .v6-mockup-panel[data-v6-phase="stage"] .v6-stage-panels, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .v6-stage-panels{ opacity: 1; transform: scale(1); filter: blur(0); } /* ════════════════════════════════════════════════════════════════════ V6 MOBILE VIEW — phone-shaped panel, no orbital ring. The ring is a desktop pattern. On mobile the journey reads as an actual phone screen: tall-rounded frame, a top status strip + dot stepper showing 1/6…6/6 progress, the current stage's content filling the middle, and a Create / Share / Navigate bottom tab bar (replacing the cursor-picker beat from desktop). ════════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { /* Sidestep the parent's flex/grid layout entirely — size the panel directly from viewport units. parent was collapsing the panel to ~30px no matter what we did with width: 100%. Flex column with center alignment vertically centers the in-flow ring in the available area between the window-chrome bar and the tab bar. */.hero .v6-mockup-panel, .surface-beat--navigate .v6-mockup-panel{ display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; width: calc(100vw - 36px) !important; max-width: 360px !important; min-width: 0; /* Phone-shaped proportions without overshoot. Aspect-ratio 9:15 * is taller than square but stops short of a flagship phone's * 9:19.5 — keeps the panel readable on a phone-in-phone preview * without dominating the viewport. */ aspect-ratio: 9 / 15; min-height: 540px; margin: 0 auto; padding: 90px 14px 22px; /* room for top picker stack */ border-radius: 32px; transform: none; }.hero .v6-mockup-panel:hover, .surface-beat--navigate .v6-mockup-panel:hover{ transform: none; } /* Mobile control sizing — keep all chrome on a single row inside the narrow phone-width panel. Tighter gaps, smaller fixed widths so the counter + label both fit without wrapping. */.hero .v6-panel-controls, .surface-beat--navigate .v6-panel-controls{ gap: 6px; }.hero .v6-panel-controls .ring-nav-counter, .surface-beat--navigate .v6-panel-controls .ring-nav-counter{ width: 64px; padding: 0 8px; }.hero .v6-panel-controls .navigator-ring-micro-label, .surface-beat--navigate .v6-panel-controls .navigator-ring-micro-label{ width: 140px; padding: 0 10px; } /* No window chrome / traffic lights on mobile — that's a desktop pattern */.hero .v6-mockup-panel .v6-window-chrome, .surface-beat--navigate .v6-mockup-panel .v6-window-chrome{ display: none; } /* Phone status strip — thin neutral bar at the top */.hero .v6-mockup-panel::before, .surface-beat--navigate .v6-mockup-panel::before{ content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 56px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--inv-bg-color) 22%, transparent); z-index: 30; } /* Keep the orbital ring visible on mobile — smaller, with breathing room to the panel edge, ABSOLUTELY centered in the panel so it sits in the true vertical middle (not biased by picker/padding above). The phase transforms compose var(--v6-tilt) with scale; we redefine --v6-tilt as the centering translate on mobile (no 3D tilt at phone scale) so the scale animations keep working. */.hero .v6-mockup-panel .navigator-ring, .surface-beat--navigate .v6-mockup-panel .navigator-ring{ position: absolute; top: 50%; left: 50%; --v6-tilt: translate(-50%, -50%); --navigator-size: 200px; --node-radius: 90px; width: 200px; height: 200px; margin: 0; }.hero .v6-mockup-panel .v6-stage-panels, .surface-beat--navigate .v6-mockup-panel .v6-stage-panels{ inset: 8% 6%; z-index: 8; } /* Stage panel content fills the phone middle. Larger, mobile-readable */.hero .v6-mockup-panel .v6-stage-panel, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel{ inset: 0; gap: 10px; }.hero .v6-mockup-panel .v6-panel-eyebrow, .surface-beat--navigate .v6-mockup-panel .v6-panel-eyebrow{ font-size: 9px; }.hero .v6-mockup-panel .v6-panel-title, .surface-beat--navigate .v6-mockup-panel .v6-panel-title{ font-size: 14px; } /* Picker floats to the TOP on mobile as a centered vertical stack (Create / Share / Navigate stacked one above the other). */.hero .v6-mockup-panel .v6-csn-picker, .surface-beat--navigate .v6-mockup-panel .v6-csn-picker{ position: absolute; inset: 22px 0 auto 0; /* anchored to top, below status strip */ flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; height: auto; padding: 0 14px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-radius: 0; z-index: 12; opacity: 1; transform: none; filter: none; pointer-events: auto; }.hero .v6-mockup-panel .v6-csn-eyebrow, .surface-beat--navigate .v6-mockup-panel .v6-csn-eyebrow{ display: none; } /* Columns stack vertically on mobile: Create on top, Share (+ Agent Mode) in the middle, Navigate at the bottom. Each tile = iOS-style icon box above its label, centered. */.hero .v6-mockup-panel .v6-csn-columns, .surface-beat--navigate .v6-mockup-panel .v6-csn-columns{ flex-direction: column; align-items: center; width: 100%; gap: 12px; }.hero .v6-mockup-panel .v6-csn-column, .surface-beat--navigate .v6-mockup-panel .v6-csn-column{ align-items: center; gap: 6px; min-width: 0; }.hero .v6-mockup-panel .v6-csn-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-icon{ width: 44px; height: 44px; border-radius: 12px; }.hero .v6-mockup-panel .v6-csn-tile-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-icon svg{ width: 22px; height: 22px; }.hero .v6-mockup-panel .v6-csn-tile-label, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-label{ font-size: 11px; } /* Mobile: unwrap the Share+Agent column-wrap via display:contents so * its children participate directly in .v6-csn-columns' flex layout. * Then `order: 99` on the Agent Mode pill pushes it past Navigate to * the bottom of the stack. Was reading as "Create → Share → Agent → * Navigate" which was weird. * !important needed because the desktop base rule at L19203 sets * display:flex on .v6-csn-column-wrap and lives LATER in source — * same specificity, source order wins. */.hero .v6-mockup-panel .v6-csn-column-wrap, .surface-beat--navigate .v6-mockup-panel .v6-csn-column-wrap{ display: contents !important; }.hero .v6-mockup-panel .v6-csn-agent, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent{ margin-top: 6px; padding: 4px 10px 4px 4px; order: 99 !important; }.hero .v6-mockup-panel .v6-csn-agent-icon, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent-icon{ width: 18px; height: 18px; }.hero .v6-mockup-panel .v6-csn-agent-label, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent-label{ font-size: 9px; } /* Cursor + ripple positioning is handled by the .v6-fx utility — JS writes --fx-x / --fx-y onto the wrapper at runtime. The same keyframes work for desktop and mobile — no per-breakpoint overrides needed. */ /* CN intro — fits the phone frame */.hero .v6-mockup-panel .v6-intro-cn-logo, .surface-beat--navigate .v6-mockup-panel .v6-intro-cn-logo{ width: 56px; height: 56px; margin-bottom: 10px; }.hero .v6-mockup-panel .v6-intro-cn-mark, .surface-beat--navigate .v6-mockup-panel .v6-intro-cn-mark{ font-size: 15px; } /* Success — sized for the phone middle, sits above the tab bar */.hero .v6-mockup-panel .v6-stage-success, .surface-beat--navigate .v6-mockup-panel .v6-stage-success{ inset: 56px 0 60px 0; /* clear status strip + tab bar */ border-radius: 0; }.hero .v6-mockup-panel .v6-ss-check, .surface-beat--navigate .v6-mockup-panel .v6-ss-check{ width: 52px; height: 52px; }.hero .v6-mockup-panel .v6-ss-label, .surface-beat--navigate .v6-mockup-panel .v6-ss-label{ font-size: 14px; } } /* Stage panels are ONLY layout containers — NO chrome of their own. The outer .v6-mockup-panel is the single "app window"; stage content renders directly inside it like the app's content area. */.hero .v6-mockup-panel .v6-stage-panel, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel{ position: absolute; inset: 0; background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(8px); transition: opacity 360ms var(--v6-ease), transform 480ms var(--v6-spring); pointer-events: none; }.hero .v6-mockup-panel .v6-stage-panel.is-active, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel.is-active{ opacity: 1; transform: translateY(0); pointer-events: auto; } /* Header sits as content inside the outer panel — no surrounding card. */.hero .v6-mockup-panel .v6-panel-header, .surface-beat--navigate .v6-mockup-panel .v6-panel-header{ display: flex; flex-direction: column; gap: 3px; }.hero .v6-mockup-panel .v6-panel-eyebrow, .surface-beat--navigate .v6-mockup-panel .v6-panel-eyebrow{ font-family: var(--v6-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v6-ink-3); }.hero .v6-mockup-panel .v6-panel-title, .surface-beat--navigate .v6-mockup-panel .v6-panel-title{ font-family: var(--brand-font); font-size: 15px; font-weight: 600; color: var(--v6-ink); letter-spacing: -0.015em; } /* === DISCOVERY: collaborative table === */.hero .v6-mockup-panel .v6-table, .surface-beat--navigate .v6-mockup-panel .v6-table{ display: flex; flex-direction: column; gap: 6px; }.hero .v6-mockup-panel .v6-table-row, .surface-beat--navigate .v6-mockup-panel .v6-table-row{ position: relative; display: grid; grid-template-columns: 10px 1fr 1fr; align-items: center; gap: 10px; padding: 8px 10px; background: var(--v6-paper); border: 1px solid var(--v6-hair); border-radius: 8px; transition: background 280ms, border-color 280ms; } /* Inline AI-assist chip — pops on a Q&A row while Think & Sync drops its answer in. Sits on the right edge of the row, pulses, dissolves when the answer text materializes. */.hero .v6-mockup-panel .v6-row-assist, .surface-beat--navigate .v6-mockup-panel .v6-row-assist{ position: absolute; top: 50%; right: 8px; transform: translateY(-50%) scale(0.92); display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: linear-gradient(120deg, color-mix(in srgb, var(--blurple) 24%, var(--main-bg-color)), color-mix(in srgb, var(--blurple) 10%, var(--main-bg-color))); border: 0.5px solid color-mix(in srgb, var(--blurple) 45%, transparent); box-shadow: 0 2px 10px color-mix(in srgb, var(--blurple) 22%, transparent); color: var(--blurple); font-family: var(--brand-font); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0; transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; z-index: 4; white-space: nowrap; }.hero .v6-mockup-panel .v6-row-assist svg, .surface-beat--navigate .v6-mockup-panel .v6-row-assist svg{ width: 11px; height: 11px; max-width: none; animation: v6RowAssistPulse 1.1s ease-in-out infinite; }.hero .v6-mockup-panel .v6-row-assist.is-on, .surface-beat--navigate .v6-mockup-panel .v6-row-assist.is-on{ opacity: 1; transform: translateY(-50%) scale(1); }.hero .v6-mockup-panel .v6-row-assist.is-off, .surface-beat--navigate .v6-mockup-panel .v6-row-assist.is-off{ opacity: 0; transform: translateY(calc(-50% - 2px)) scale(0.95); } @keyframes v6RowAssistPulse { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(8deg) scale(1.12); } }.hero .v6-mockup-panel .v6-row-dot, .surface-beat--navigate .v6-mockup-panel .v6-row-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--v6-hair-strong); transition: background 280ms; }.hero .v6-mockup-panel .v6-table-row.is-typing .v6-row-dot, .surface-beat--navigate .v6-mockup-panel .v6-table-row.is-typing .v6-row-dot{ background: var(--purple); animation: v6DotPulse 1s ease-in-out infinite; }.hero .v6-mockup-panel .v6-table-row.is-done .v6-row-dot, .surface-beat--navigate .v6-mockup-panel .v6-table-row.is-done .v6-row-dot{ background: #2BB66D; } /* Celebrate beat — fires after Smart Conversation lands the last fill. All row dots pulse green in unison + table gets a soft green wash, marking "the customer + agent finished Discovery together." Brief so it reads as a beat, not a hold. */.hero .v6-mockup-panel .v6-stage-panel.is-celebrating .v6-row-dot, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel.is-celebrating .v6-row-dot{ animation: v6CelebrateDot 750ms cubic-bezier(0.22, 1, 0.36, 1) 2; }.hero .v6-mockup-panel .v6-stage-panel.is-celebrating .v6-collab-inner, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel.is-celebrating .v6-collab-inner{ animation: v6CelebrateGlow 1500ms ease-out forwards; } @keyframes v6CelebrateDot { 0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, #2BB66D 60%, transparent); } 50% { transform: scale(1.5); box-shadow: 0 0 0 8px color-mix(in srgb, #2BB66D 0%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, #2BB66D 0%, transparent); } } @keyframes v6CelebrateGlow { 0% { background: transparent; } 35% { background: color-mix(in srgb, #2BB66D 8%, transparent); } 100% { background: transparent; } } @keyframes v6DotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(120, 115, 245, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(120, 115, 245, 0); } }.hero .v6-mockup-panel .v6-row-q, .surface-beat--navigate .v6-mockup-panel .v6-row-q{ font-family: var(--brand-font); font-size: 11px; font-weight: 500; color: var(--v6-ink-2); letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-row-a, .surface-beat--navigate .v6-mockup-panel .v6-row-a{ font-family: var(--v6-mono); font-size: 10px; color: var(--v6-ink-3); min-height: 1.2em; }.hero .v6-mockup-panel .v6-table-row.is-typing .v6-row-a, .surface-beat--navigate .v6-mockup-panel .v6-table-row.is-typing .v6-row-a{ color: var(--purple); }.hero .v6-mockup-panel .v6-table-row.is-done .v6-row-q, .surface-beat--navigate .v6-mockup-panel .v6-table-row.is-done .v6-row-q{ color: var(--v6-ink); } /* === EXPERIENCE: curated content cards for the buyer === */.hero .v6-mockup-panel .v6-content-grid, .surface-beat--navigate .v6-mockup-panel .v6-content-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.hero .v6-mockup-panel .v6-content-card, .surface-beat--navigate .v6-mockup-panel .v6-content-card{ display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--v6-paper); border: 1px solid var(--v6-hair); border-radius: 9px; opacity: 0; transform: translateY(8px) scale(0.96); transition: opacity 360ms var(--v6-ease), transform 480ms var(--v6-spring); }.hero .v6-mockup-panel .v6-content-card.is-shown, .surface-beat--navigate .v6-mockup-panel .v6-content-card.is-shown{ opacity: 1; transform: translateY(0) scale(1); }.hero .v6-mockup-panel .v6-content-thumb, .surface-beat--navigate .v6-mockup-panel .v6-content-thumb{ aspect-ratio: 16 / 10; border-radius: 6px; background: color-mix(in srgb, var(--v6-ink) 4%, transparent); display: flex; align-items: center; justify-content: center; color: var(--v6-ink-2); margin-bottom: 4px; }.hero .v6-mockup-panel .v6-content-thumb-video, .surface-beat--navigate .v6-mockup-panel .v6-content-thumb-video{ background: var(--v6-grad-cn); color: #fff; }.hero .v6-mockup-panel .v6-content-thumb-doc, .surface-beat--navigate .v6-mockup-panel .v6-content-thumb-doc{ flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 8px; }.hero .v6-mockup-panel .v6-doc-line, .surface-beat--navigate .v6-mockup-panel .v6-doc-line{ height: 2px; width: 100%; background: var(--v6-hair-strong); border-radius: 1px; }.hero .v6-mockup-panel .v6-doc-line.short, .surface-beat--navigate .v6-mockup-panel .v6-doc-line.short{ width: 60%; }.hero .v6-mockup-panel .v6-content-thumb-chart, .surface-beat--navigate .v6-mockup-panel .v6-content-thumb-chart{ align-items: flex-end; gap: 3px; padding: 6px; }.hero .v6-mockup-panel .v6-chart-bar, .surface-beat--navigate .v6-mockup-panel .v6-chart-bar{ flex: 1; background: var(--v6-grad-cn); border-radius: 1px; height: 30%; }.hero .v6-mockup-panel .v6-chart-bar:nth-child(2), .surface-beat--navigate .v6-mockup-panel .v6-chart-bar:nth-child(2){ height: 55%; }.hero .v6-mockup-panel .v6-chart-bar:nth-child(3), .surface-beat--navigate .v6-mockup-panel .v6-chart-bar:nth-child(3){ height: 40%; }.hero .v6-mockup-panel .v6-chart-bar.tall, .surface-beat--navigate .v6-mockup-panel .v6-chart-bar.tall{ height: 90%; }.hero .v6-mockup-panel .v6-content-title, .surface-beat--navigate .v6-mockup-panel .v6-content-title{ font-family: var(--brand-font); font-size: 11px; font-weight: 600; color: var(--v6-ink); letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-content-meta, .surface-beat--navigate .v6-mockup-panel .v6-content-meta{ font-family: var(--v6-mono); font-size: 9px; color: var(--v6-ink-3); letter-spacing: 0.02em; } /* === SCOPE: tabs + modules === */.hero .v6-mockup-panel .v6-tabs, .surface-beat--navigate .v6-mockup-panel .v6-tabs{ display: flex; gap: 4px; padding: 3px; background: var(--v6-paper); border: 1px solid var(--v6-hair); border-radius: 8px; width: fit-content; }.hero .v6-mockup-panel .v6-tab, .surface-beat--navigate .v6-mockup-panel .v6-tab{ padding: 4px 12px; border-radius: 6px; font-family: var(--brand-font); font-size: 11px; font-weight: 600; color: var(--v6-ink-3); letter-spacing: -0.005em; transition: all 280ms var(--v6-ease); }.hero .v6-mockup-panel .v6-tab.is-active, .surface-beat--navigate .v6-mockup-panel .v6-tab.is-active{ background: var(--v6-ink); color: var(--v6-paper); }.hero .v6-mockup-panel .v6-modules, .surface-beat--navigate .v6-mockup-panel .v6-modules{ display: flex; flex-direction: column; gap: 6px; }.hero .v6-mockup-panel .v6-module-row, .surface-beat--navigate .v6-mockup-panel .v6-module-row{ position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; background: var(--v6-paper); border: 1px solid var(--v6-hair); border-radius: 8px; opacity: 0; transform: translateX(-6px); transition: opacity 320ms var(--v6-ease), transform 420ms var(--v6-spring), background 280ms ease, border-color 280ms ease; }.hero .v6-mockup-panel .v6-module-row.is-shown, .surface-beat--navigate .v6-mockup-panel .v6-module-row.is-shown{ opacity: 1; transform: translateX(0); } /* Proposed Scope's "in-scope" mark: subtle green left border + bg wash so Sarah can scan which modules the agent put inside the scope envelope. Without this the rows look identical to before the agent ran. */.hero .v6-mockup-panel .v6-module-row.is-in-scope, .surface-beat--navigate .v6-mockup-panel .v6-module-row.is-in-scope{ background: color-mix(in srgb, var(--green) 5%, var(--v6-paper)); border-left: 3px solid color-mix(in srgb, var(--green) 55%, transparent); padding-left: 10px; } /* Deferred / out-of-scope mark: muted, no accent border, name dimmed. Reads as "we considered this and chose to leave it out" — not "removed" — so the offering still looks intentionally curated. */.hero .v6-mockup-panel .v6-module-row.is-out-of-scope, .surface-beat--navigate .v6-mockup-panel .v6-module-row.is-out-of-scope{ background: color-mix(in srgb, var(--v6-ink) 2%, var(--v6-paper)); border-color: color-mix(in srgb, var(--v6-ink) 6%, transparent); opacity: 0.55; }.hero .v6-mockup-panel .v6-module-row.is-out-of-scope .v6-module-name, .surface-beat--navigate .v6-mockup-panel .v6-module-row.is-out-of-scope .v6-module-name{ text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--v6-ink) 30%, transparent); } /* Status badge differs per scope state. In-scope ✓ is green, deferred − is muted, undecided em-dash is purple (the original look). */.hero .v6-mockup-panel .v6-module-row.is-in-scope .v6-module-badge, .surface-beat--navigate .v6-mockup-panel .v6-module-row.is-in-scope .v6-module-badge{ background: color-mix(in srgb, var(--green) 14%, transparent); border-color: color-mix(in srgb, var(--green) 36%, transparent); color: var(--green); }.hero .v6-mockup-panel .v6-module-row.is-out-of-scope .v6-module-badge, .surface-beat--navigate .v6-mockup-panel .v6-module-row.is-out-of-scope .v6-module-badge{ background: color-mix(in srgb, var(--v6-ink) 4%, transparent); border-color: color-mix(in srgb, var(--v6-ink) 12%, transparent); color: color-mix(in srgb, var(--v6-ink) 50%, transparent); }.hero .v6-mockup-panel .v6-module-name, .surface-beat--navigate .v6-mockup-panel .v6-module-name{ font-family: var(--brand-font); font-size: 11px; font-weight: 600; color: var(--v6-ink); letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-module-qty, .surface-beat--navigate .v6-mockup-panel .v6-module-qty{ font-family: var(--v6-mono); font-size: 10px; color: var(--v6-ink-3); }.hero .v6-mockup-panel .v6-module-badge, .surface-beat--navigate .v6-mockup-panel .v6-module-badge{ width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--purple) 14%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 32%, transparent); color: var(--purple); font-family: var(--v6-mono); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* === COMMIT: sign card === */.hero .v6-mockup-panel .v6-sign-card, .surface-beat--navigate .v6-mockup-panel .v6-sign-card{ display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--v6-paper); border: 1px solid var(--v6-hair); border-radius: 10px; }.hero .v6-mockup-panel .v6-sign-field, .surface-beat--navigate .v6-mockup-panel .v6-sign-field{ display: flex; flex-direction: column; gap: 2px; }.hero .v6-mockup-panel .v6-sign-label, .surface-beat--navigate .v6-mockup-panel .v6-sign-label{ font-family: var(--v6-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v6-ink-3); }.hero .v6-mockup-panel .v6-sign-value, .surface-beat--navigate .v6-mockup-panel .v6-sign-value{ font-family: var(--brand-font); font-size: 12px; font-weight: 500; color: var(--v6-ink); min-height: 1.4em; padding: 5px 8px; background: var(--v6-paper-2); border: 1px solid var(--v6-hair); border-radius: 6px; letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-sign-value.is-typing::after, .surface-beat--navigate .v6-mockup-panel .v6-sign-value.is-typing::after{ content: '▍'; margin-left: 2px; color: var(--purple); animation: v6CaretBlink 0.7s infinite; } @keyframes v6CaretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }.hero .v6-mockup-panel .v6-sign-check, .hero .v6-mockup-panel .v6-check-row, .surface-beat--navigate .v6-mockup-panel .v6-sign-check, .surface-beat--navigate .v6-mockup-panel .v6-check-row{ display: flex; align-items: center; gap: 8px; cursor: pointer; }.hero .v6-mockup-panel .v6-check-box, .surface-beat--navigate .v6-mockup-panel .v6-check-box{ width: 16px; height: 16px; border-radius: 4px; background: var(--v6-paper-2); border: 1.5px solid var(--v6-hair-strong); flex-shrink: 0; position: relative; transition: all 280ms var(--v6-ease); }.hero .v6-mockup-panel .v6-check-box.is-checked, .surface-beat--navigate .v6-mockup-panel .v6-check-box.is-checked{ background: var(--v6-grad-cn); border-color: transparent; }.hero .v6-mockup-panel .v6-check-box.is-checked::after, .surface-beat--navigate .v6-mockup-panel .v6-check-box.is-checked::after{ content: ''; position: absolute; top: 3px; left: 5px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }.hero .v6-mockup-panel .v6-check-label, .surface-beat--navigate .v6-mockup-panel .v6-check-label{ font-family: var(--brand-font); font-size: 11px; font-weight: 500; color: var(--v6-ink-2); letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-sign-cta, .surface-beat--navigate .v6-mockup-panel .v6-sign-cta{ margin-top: 4px; padding: 9px 14px; background: var(--v6-paper-2); border: 1px solid var(--v6-hair-strong); border-radius: 9999px; font-family: var(--brand-font); font-size: 11px; font-weight: 600; color: var(--v6-ink-3); letter-spacing: -0.005em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: center; transition: all 360ms var(--v6-ease); }.hero .v6-mockup-panel .v6-sign-cta.is-armed, .surface-beat--navigate .v6-mockup-panel .v6-sign-cta.is-armed{ background: var(--v6-grad-cn); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(120, 115, 245, 0.40); }.hero .v6-mockup-panel .v6-sign-cta-check, .surface-beat--navigate .v6-mockup-panel .v6-sign-cta-check{ opacity: 0; transform: scale(0.5); transition: opacity 240ms, transform 320ms var(--v6-spring); }.hero .v6-mockup-panel .v6-sign-cta.is-signed .v6-sign-cta-check, .surface-beat--navigate .v6-mockup-panel .v6-sign-cta.is-signed .v6-sign-cta-check{ opacity: 1; transform: scale(1); } /* === DEPLOY: gantt === */.hero .v6-mockup-panel .v6-gantt, .surface-beat--navigate .v6-mockup-panel .v6-gantt{ display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; background: var(--v6-paper); border: 1px solid var(--v6-hair); border-radius: 10px; }.hero .v6-mockup-panel .v6-gantt-axis, .surface-beat--navigate .v6-mockup-panel .v6-gantt-axis{ display: grid; grid-template-columns: 60px repeat(4, 1fr); font-family: var(--v6-mono); font-size: 9px; color: var(--v6-ink-3); letter-spacing: 0.06em; padding-left: 70px; }.hero .v6-mockup-panel .v6-gantt-rows, .surface-beat--navigate .v6-mockup-panel .v6-gantt-rows{ position: relative; display: flex; flex-direction: column; gap: 6px; }.hero .v6-mockup-panel .v6-gantt-row, .surface-beat--navigate .v6-mockup-panel .v6-gantt-row{ display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 10px; }.hero .v6-mockup-panel .v6-gantt-name, .hero .v6-mockup-panel .v6-gantt-label, .surface-beat--navigate .v6-mockup-panel .v6-gantt-name, .surface-beat--navigate .v6-mockup-panel .v6-gantt-label{ font-family: var(--brand-font); font-size: 10.5px; font-weight: 500; color: var(--v6-ink); text-align: right; letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-gantt-track, .surface-beat--navigate .v6-mockup-panel .v6-gantt-track{ position: relative; height: 14px; background: color-mix(in srgb, var(--v6-ink) 3%, transparent); border-radius: 3px; }.hero .v6-mockup-panel .v6-gantt-bar, .surface-beat--navigate .v6-mockup-panel .v6-gantt-bar{ position: absolute; top: 1px; bottom: 1px; /* HTML provides --start / --width as bare numbers (e.g. 5, 22). * Bare numbers aren't valid lengths — without calc(*1%) the browser * fell back to left:0 / width:auto and every bar collapsed to a * vertical sliver at the start of the track. */ left: calc(var(--start) * 1%); width: calc(var(--width) * 1%); background: rgba(120, 115, 245, 0.14); border: 1px solid rgba(120, 115, 245, 0.35); border-radius: 3px; overflow: hidden; transition: background 280ms, border-color 280ms; }.hero .v6-mockup-panel .v6-gantt-bar.is-running, .surface-beat--navigate .v6-mockup-panel .v6-gantt-bar.is-running{ background: rgba(120, 115, 245, 0.22); border-color: var(--purple); }.hero .v6-mockup-panel .v6-gantt-bar.is-done, .surface-beat--navigate .v6-mockup-panel .v6-gantt-bar.is-done{ background: color-mix(in srgb, var(--v6-ink) 90%, transparent); border-color: var(--v6-ink); }.hero .v6-mockup-panel .v6-gantt-fill, .surface-beat--navigate .v6-mockup-panel .v6-gantt-fill{ display: block; height: 100%; width: 0%; background: var(--v6-grad-cn); border-radius: 2px; transition: width 60ms linear; }.hero .v6-mockup-panel .v6-gantt-bar.is-done .v6-gantt-fill, .surface-beat--navigate .v6-mockup-panel .v6-gantt-bar.is-done .v6-gantt-fill{ background: var(--v6-ink); }.hero .v6-mockup-panel .v6-gantt-now, .surface-beat--navigate .v6-mockup-panel .v6-gantt-now{ position: absolute; top: 0; bottom: 0; left: 70px; width: 1.5px; background: var(--purple); box-shadow: 0 0 8px rgba(120, 115, 245, 0.55); transform: translateX(calc(var(--now, 0) * 1px)); opacity: 0; transition: opacity 220ms; pointer-events: none; }.hero .v6-mockup-panel .v6-gantt-now.is-active, .surface-beat--navigate .v6-mockup-panel .v6-gantt-now.is-active{ opacity: 0.9; } /* === SUCCESS: KPIs === */.hero .v6-mockup-panel .v6-kpis, .surface-beat--navigate .v6-mockup-panel .v6-kpis{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.hero .v6-mockup-panel .v6-kpi, .surface-beat--navigate .v6-mockup-panel .v6-kpi{ display: flex; flex-direction: column; gap: 3px; padding: 10px; background: var(--v6-paper); border: 1px solid var(--v6-hair); border-radius: 9px; }.hero .v6-mockup-panel .v6-kpi-label, .surface-beat--navigate .v6-mockup-panel .v6-kpi-label{ font-family: var(--v6-mono); font-size: 9px; color: var(--v6-ink-3); letter-spacing: 0.08em; text-transform: uppercase; }.hero .v6-mockup-panel .v6-kpi-value, .surface-beat--navigate .v6-mockup-panel .v6-kpi-value{ font-family: var(--brand-font); font-size: 19px; font-weight: 700; color: var(--v6-ink); letter-spacing: -0.025em; line-height: 1.05; }.hero .v6-mockup-panel .v6-kpi-trend, .surface-beat--navigate .v6-mockup-panel .v6-kpi-trend{ font-family: var(--v6-mono); font-size: 10px; font-weight: 600; }.hero .v6-mockup-panel .v6-kpi-trend.up, .surface-beat--navigate .v6-mockup-panel .v6-kpi-trend.up{ color: #2BB66D; } /* ─── SUCCESS · issue submission form (guest view) ───────────────── * Lives inside .v6-collab-inner next to the KPI grid. Hidden by default; * JS adds `.is-issue-mode` to the stage panel when persona swaps to * guest → KPIs fade out, form fades in. Cursor types the issue into * the input, presses Submit → Auto Solve agent panel slides in. */.hero .v6-mockup-panel .v6-issue-form, .surface-beat--navigate .v6-mockup-panel .v6-issue-form{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; padding: 18px 22px; opacity: 0; transform: scale(0.97); pointer-events: none; transition: opacity 360ms var(--v6-ease), transform 420ms var(--v6-spring); }.hero .v6-mockup-panel .v6-stage-panel.is-issue-mode .v6-issue-form, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel.is-issue-mode .v6-issue-form{ opacity: 1; transform: scale(1); pointer-events: auto; }.hero .v6-mockup-panel .v6-stage-panel.is-issue-mode .v6-kpi-grid, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel.is-issue-mode .v6-kpi-grid{ opacity: 0; pointer-events: none; transition: opacity 280ms ease; }.hero .v6-mockup-panel .v6-issue-form-head, .surface-beat--navigate .v6-mockup-panel .v6-issue-form-head{ margin: 0; font-family: var(--brand-font); font-size: 13px; font-weight: 700; color: var(--v6-ink); letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-issue-form-sub, .surface-beat--navigate .v6-mockup-panel .v6-issue-form-sub{ margin: 0; font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); }.hero .v6-mockup-panel .v6-issue-input, .surface-beat--navigate .v6-mockup-panel .v6-issue-input{ min-height: 64px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--main-bg-color) 80%, transparent); border: 1px solid color-mix(in srgb, var(--v6-ink) 12%, transparent); font-family: var(--brand-font); font-size: 11.5px; font-weight: 500; color: var(--v6-ink); letter-spacing: -0.005em; line-height: 1.4; margin-top: 6px; transition: border-color 220ms ease, box-shadow 220ms ease; }.hero .v6-mockup-panel .v6-issue-input.is-typing, .surface-beat--navigate .v6-mockup-panel .v6-issue-input.is-typing{ border-color: color-mix(in srgb, var(--blurple) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blurple) 14%, transparent); }.hero .v6-mockup-panel .v6-issue-input::after, .surface-beat--navigate .v6-mockup-panel .v6-issue-input::after{ content: ""; display: inline-block; width: 1.5px; height: 12px; background: var(--blurple); margin-left: 2px; vertical-align: text-bottom; opacity: 0; }.hero .v6-mockup-panel .v6-issue-input.is-typing::after, .surface-beat--navigate .v6-mockup-panel .v6-issue-input.is-typing::after{ opacity: 1; animation: v6IssueCaret 720ms steps(2) infinite; } @keyframes v6IssueCaret { 50% { opacity: 0; } }.hero .v6-mockup-panel .v6-issue-actions, .surface-beat--navigate .v6-mockup-panel .v6-issue-actions{ display: flex; justify-content: flex-end; margin-top: 2px; }.hero .v6-mockup-panel .v6-issue-submit, .surface-beat--navigate .v6-mockup-panel .v6-issue-submit{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 16px; border-radius: 999px; border: none; background: var(--v6-grad-cn); color: #fff; font-family: var(--brand-font); font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px color-mix(in srgb, var(--blurple) 28%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent); transition: transform 200ms ease, box-shadow 200ms ease; }.hero .v6-mockup-panel .v6-issue-submit.is-pressed, .surface-beat--navigate .v6-mockup-panel .v6-issue-submit.is-pressed{ transform: scale(0.96); }.hero .v6-mockup-panel .v6-issue-submit svg, .surface-beat--navigate .v6-mockup-panel .v6-issue-submit svg{ max-width: none; max-height: none; }.hero .v6-mockup-panel .v6-kpi-trend.down, .surface-beat--navigate .v6-mockup-panel .v6-kpi-trend.down{ color: #E55A5A; } @media (prefers-reduced-motion: reduce) {.hero .v6-mockup-panel .navigator-ring, .hero .v6-mockup-panel .v6-intro, .hero .v6-mockup-panel .v6-stage-panels, .hero .v6-mockup-panel .v6-stage-panel, .hero .v6-mockup-panel .v6-stage-success, .surface-beat--navigate .v6-mockup-panel .navigator-ring, .surface-beat--navigate .v6-mockup-panel .v6-intro, .surface-beat--navigate .v6-mockup-panel .v6-stage-panels, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel, .surface-beat--navigate .v6-mockup-panel .v6-stage-success{ transition: none !important; animation: none !important; }.hero .v6-mockup-panel .v6-tool, .hero .v6-mockup-panel .v6-confused-avatar, .hero .v6-mockup-panel .v6-typing span, .hero .v6-mockup-panel .v6-sign-value.is-typing::after, .surface-beat--navigate .v6-mockup-panel .v6-tool, .surface-beat--navigate .v6-mockup-panel .v6-confused-avatar, .surface-beat--navigate .v6-mockup-panel .v6-typing span, .surface-beat--navigate .v6-mockup-panel .v6-sign-value.is-typing::after{ animation: none !important; } } /* ════════════════════════════════════════════════════════════════════ MOTION POLISH PASS — meticulously engineered transitions across every state. Choreographed for premium PLG feel. ════════════════════════════════════════════════════════════════════ */ /* ───── Chaos connectors — data flowing chaotically between tools ───── */.hero .v6-mockup-panel .v6-chaos-connectors path, .surface-beat--navigate .v6-mockup-panel .v6-chaos-connectors path{ stroke-dasharray: 3 5; animation: v6ConnectorFlow 1.4s linear infinite; }.hero .v6-mockup-panel .v6-chaos-connectors path:nth-child(2), .surface-beat--navigate .v6-mockup-panel .v6-chaos-connectors path:nth-child(2){ animation-delay: -0.35s; animation-duration: 1.8s; }.hero .v6-mockup-panel .v6-chaos-connectors path:nth-child(3), .surface-beat--navigate .v6-mockup-panel .v6-chaos-connectors path:nth-child(3){ animation-delay: -0.7s; animation-duration: 1.6s; }.hero .v6-mockup-panel .v6-chaos-connectors path:nth-child(4), .surface-beat--navigate .v6-mockup-panel .v6-chaos-connectors path:nth-child(4){ animation-delay: -1.05s; animation-duration: 2.0s; } @keyframes v6ConnectorFlow { to { stroke-dashoffset: -16; } } /* ───── Polished tool dissolve — each tool flies toward center ───── */.hero .v6-mockup-panel .v6-tool, .surface-beat--navigate .v6-mockup-panel .v6-tool{ transition: transform 800ms cubic-bezier(0.55, 0, 0.55, 0.2), opacity 700ms ease, filter 600ms ease; }.hero .v6-mockup-panel[data-v6-phase="dissolve"] .v6-tool-tl, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .v6-tool-tl{ transform: translate(160px, 130px) scale(0.3) !important; opacity: 0; filter: blur(10px); animation: none; }.hero .v6-mockup-panel[data-v6-phase="dissolve"] .v6-tool-tr, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .v6-tool-tr{ transform: translate(-180px, 150px) scale(0.3) !important; opacity: 0; filter: blur(10px); animation: none; }.hero .v6-mockup-panel[data-v6-phase="dissolve"] .v6-tool-bl, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .v6-tool-bl{ transform: translate(170px, -130px) scale(0.3) !important; opacity: 0; filter: blur(10px); animation: none; }.hero .v6-mockup-panel[data-v6-phase="dissolve"] .v6-tool-br, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .v6-tool-br{ transform: translate(-170px, -110px) scale(0.3) !important; opacity: 0; filter: blur(10px); animation: none; } /* Connectors retract during dissolve */.hero .v6-mockup-panel[data-v6-phase="dissolve"] .v6-chaos-connectors path, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .v6-chaos-connectors path{ animation: v6ConnectorRetract 700ms cubic-bezier(0.55, 0, 0.55, 0.2) forwards; } @keyframes v6ConnectorRetract { to { stroke-dashoffset: -240; opacity: 0; } } /* Confused avatar implodes */.hero .v6-mockup-panel .v6-confused-avatar, .surface-beat--navigate .v6-mockup-panel .v6-confused-avatar{ transition: transform 700ms cubic-bezier(0.55, 0, 0.55, 0.2), opacity 600ms ease, filter 500ms ease; }.hero .v6-mockup-panel[data-v6-phase="dissolve"] .v6-confused-avatar, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .v6-confused-avatar{ transform: translate(-50%, -50%) scale(0); opacity: 0; filter: blur(6px); animation: none; } /* "Old way" label fades fast during dissolve */.hero .v6-mockup-panel .v6-intro-label-mess, .surface-beat--navigate .v6-mockup-panel .v6-intro-label-mess{ transition: opacity 360ms ease; }.hero .v6-mockup-panel[data-v6-phase="dissolve"] .v6-intro-label-mess, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .v6-intro-label-mess{ opacity: 0; } /* ───── CN logo spring overshoot ───── */.hero .v6-mockup-panel[data-v6-phase="cn"] .v6-intro-cn-logo, .hero .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-logo, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="cn"] .v6-intro-cn-logo, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-logo{ animation: v6LogoSpring 1100ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes v6LogoSpring { 0% { transform: scale(0) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.18) rotate(3deg); opacity: 1; } 80% { transform: scale(0.96) rotate(-1deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }.hero .v6-mockup-panel[data-v6-phase="cn"] .v6-intro-cn-mark, .hero .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-mark, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="cn"] .v6-intro-cn-mark, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-mark{ animation: v6WordmarkRise 600ms cubic-bezier(0.22, 1, 0.36, 1) 700ms forwards; opacity: 0; } @keyframes v6WordmarkRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }.hero .v6-mockup-panel .v6-intro-label-one, .surface-beat--navigate .v6-mockup-panel .v6-intro-label-one{ display: none; } /* Fake-mouse hover feedback on the CN logo + wordmark — fires during the click phase, with a 540ms delay (matches when the cursor's tip lands on the logo per v6FxCursorIn at ~50% × 900ms). Logo lifts + glows; wordmark brightens and picks up a subtle underline. */.hero .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-logo, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-logo{ animation: v6LogoSpring 1100ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards, v6IntroLogoHover 700ms cubic-bezier(0.22, 1, 0.36, 1) 540ms forwards; } @keyframes v6IntroLogoHover { 0% { transform: scale(1) translateY(0); filter: drop-shadow(0 14px 36px rgba(120, 115, 245, 0.40)) drop-shadow(0 4px 10px rgba(120, 115, 245, 0.22)); } 100% { transform: scale(1.08) translateY(-2px); filter: drop-shadow(0 18px 44px rgba(120, 115, 245, 0.58)) drop-shadow(0 6px 14px rgba(120, 115, 245, 0.32)); } }.hero .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-mark, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-mark{ animation: v6WordmarkRise 600ms cubic-bezier(0.22, 1, 0.36, 1) 700ms forwards, v6IntroMarkHover 480ms cubic-bezier(0.22, 1, 0.36, 1) 540ms forwards; } @keyframes v6IntroMarkHover { 0% { color: var(--v6-ink); text-shadow: none; } 100% { color: var(--blurple); text-shadow: 0 0 12px color-mix(in srgb, var(--blurple) 35%, transparent); } } /* ───── Logo bloom outward as picker/ring takes over ───── */.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-intro-cn, .hero .v6-mockup-panel[data-v6-phase="ring"] .v6-intro-cn, .hero .v6-mockup-panel[data-v6-phase="stage"] .v6-intro-cn, .hero .v6-mockup-panel[data-v6-phase="success"] .v6-intro-cn, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-intro-cn, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .v6-intro-cn, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .v6-intro-cn, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .v6-intro-cn{ animation: v6LogoBloom 700ms cubic-bezier(0.4, 0, 0.6, 1) forwards; pointer-events: none; } @keyframes v6LogoBloom { 0% { opacity: 1; transform: scale(1); filter: blur(0); } 100% { opacity: 0; transform: scale(1.4); filter: blur(12px); } } /* Ring node entrance — animate ONLY opacity + scale (modern CSS scale property composes with `transform` instead of overriding it). The legacy --node-transform that places each node on the circle keeps applying. */.hero .v6-mockup-panel[data-v6-phase="ring"] .stage-node, .hero .v6-mockup-panel[data-v6-phase="stage"] .stage-node, .hero .v6-mockup-panel[data-v6-phase="success"] .stage-node, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .stage-node, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .stage-node, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .stage-node{ animation: v6NodeEmerge 900ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }.hero .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="0"], .hero .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="0"], .hero .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="0"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="0"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="0"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="0"]{ animation-delay: 200ms; }.hero .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="1"], .hero .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="1"], .hero .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="1"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="1"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="1"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="1"]{ animation-delay: 280ms; }.hero .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="2"], .hero .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="2"], .hero .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="2"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="2"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="2"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="2"]{ animation-delay: 360ms; }.hero .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="3"], .hero .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="3"], .hero .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="3"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="3"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="3"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="3"]{ animation-delay: 440ms; }.hero .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="4"], .hero .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="4"], .hero .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="4"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="4"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="4"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="4"]{ animation-delay: 520ms; }.hero .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="5"], .hero .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="5"], .hero .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="5"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="5"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="5"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="5"]{ animation-delay: 600ms; } @keyframes v6NodeEmerge { 0% { opacity: 0; scale: 0.4; filter: blur(4px); } 60% { opacity: 1; scale: 1.1; filter: blur(0); } 100% { opacity: 1; scale: 1; filter: blur(0); } } /* ───── Ring → Stage camera zoom (overrides earlier phase rules) ───── The ring scales AWAY from viewer, the stage panel scales TOWARD viewer. */.hero .v6-mockup-panel .navigator-ring, .surface-beat--navigate .v6-mockup-panel .navigator-ring{ transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1), filter 600ms ease, --completion-percent 700ms cubic-bezier(0.22, 1, 0.36, 1); }.hero .v6-mockup-panel .v6-stage-panels, .surface-beat--navigate .v6-mockup-panel .v6-stage-panels{ transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1), filter 600ms ease; }.hero .v6-mockup-panel[data-v6-phase="stage"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .navigator-ring{ opacity: 0.08; transform: var(--v6-tilt) scale(0.62); filter: blur(4px); pointer-events: none; }.hero .v6-mockup-panel[data-v6-phase="stage"] .v6-stage-panels, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .v6-stage-panels{ opacity: 1; transform: scale(1); filter: blur(0); } /* During success the stage panel collapses; ring partially re-emerges */.hero .v6-mockup-panel[data-v6-phase="success"] .v6-stage-panels, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .v6-stage-panels{ opacity: 0; transform: scale(0.88); filter: blur(4px); }.hero .v6-mockup-panel[data-v6-phase="success"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .navigator-ring{ opacity: 0.22; transform: var(--v6-tilt) scale(0.78); filter: blur(2px); } /* ───── Stage panel inner entry — adds focal depth on top of zoom ───── */.hero .v6-mockup-panel .v6-stage-panel.is-active, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel.is-active{ animation: v6StagePanelIn 900ms cubic-bezier(0.16, 1, 0.3, 1) backwards; } @keyframes v6StagePanelIn { 0% { opacity: 0; transform: translateY(20px) scale(0.94); filter: blur(6px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* ───── FPAI agent strip — pinned to the bottom of every stage panel ───── Live narration of what First-Party AI is doing in this stage. Persistent affordance so the AI presence is felt continuously, not just by accident. */.hero .v6-mockup-panel .v6-agent, .surface-beat--navigate .v6-mockup-panel .v6-agent{ margin-top: auto; display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--purple) 6%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 22%, transparent); border-radius: 10px; }.hero .v6-mockup-panel .v6-agent-orb, .surface-beat--navigate .v6-mockup-panel .v6-agent-orb{ width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); box-shadow: 0 0 0 0 rgba(120, 115, 245, 0.6); animation: v6AgentPulse 2s ease-in-out infinite; flex-shrink: 0; } @keyframes v6AgentPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(120, 115, 245, 0.55), 0 0 8px rgba(120, 115, 245, 0.5); } 50% { box-shadow: 0 0 0 5px rgba(120, 115, 245, 0), 0 0 14px rgba(120, 115, 245, 0.8); } }.hero .v6-mockup-panel .v6-agent-text, .surface-beat--navigate .v6-mockup-panel .v6-agent-text{ font-family: var(--font-main); font-size: 11px; font-weight: 500; color: color-mix(in srgb, var(--inv-bg-color) 72%, transparent); letter-spacing: -0.005em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity 220ms ease; }.hero .v6-mockup-panel .v6-agent-text.is-changing, .surface-beat--navigate .v6-mockup-panel .v6-agent-text.is-changing{ opacity: 0; }.hero .v6-mockup-panel .v6-agent-progress, .surface-beat--navigate .v6-mockup-panel .v6-agent-progress{ position: relative; width: 28px; height: 3px; border-radius: 999px; background: color-mix(in srgb, var(--purple) 18%, transparent); overflow: hidden; flex-shrink: 0; }.hero .v6-mockup-panel .v6-agent-progress span, .surface-beat--navigate .v6-mockup-panel .v6-agent-progress span{ position: absolute; inset: 0; background: linear-gradient(90deg, var(--blurple), var(--purple)); transform-origin: left; animation: v6AgentProgress 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes v6AgentProgress { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } } /* ═══════════════════════════════════════════════════════════════ STAGE AGENTS — first-class section alongside collaboration spaces. Each stage has its own tailored agents (multi-role: Host / Guest) that live on the same surface as the collaboration content, not as a footer. Status line above shows the currently-narrating action. ═══════════════════════════════════════════════════════════════ */.hero .v6-mockup-panel .v6-agents, .surface-beat--navigate .v6-mockup-panel .v6-agents{ margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: color-mix(in srgb, var(--blurple) 5%, transparent); border: 1px solid color-mix(in srgb, var(--blurple) 20%, transparent); border-radius: 10px; }.hero .v6-mockup-panel .v6-agents-header, .surface-beat--navigate .v6-mockup-panel .v6-agents-header{ display: flex; align-items: center; gap: 8px; }.hero .v6-mockup-panel .v6-agents-eyebrow, .surface-beat--navigate .v6-mockup-panel .v6-agents-eyebrow{ font-family: var(--v6-mono, var(--brand-font)); font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blurple); flex-shrink: 0; padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--blurple) 14%, transparent); }.hero .v6-mockup-panel .v6-agents-status, .surface-beat--navigate .v6-mockup-panel .v6-agents-status{ font-family: var(--brand-font); font-size: 10.5px; font-weight: 500; color: color-mix(in srgb, var(--inv-bg-color) 75%, transparent); letter-spacing: -0.005em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; transition: opacity 220ms ease; }.hero .v6-mockup-panel .v6-agents-status.is-changing, .surface-beat--navigate .v6-mockup-panel .v6-agents-status.is-changing{ opacity: 0; }.hero .v6-mockup-panel .v6-agents-row, .surface-beat--navigate .v6-mockup-panel .v6-agents-row{ display: flex; gap: 6px; flex-wrap: wrap; }.hero .v6-mockup-panel .v6-agent-chip, .surface-beat--navigate .v6-mockup-panel .v6-agent-chip{ display: inline-flex; align-items: center; gap: 5px; padding: 4px 4px 4px 6px; border-radius: 999px; background: color-mix(in srgb, var(--main-bg-color) 70%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); font-family: var(--brand-font); font-size: 10px; line-height: 1; }.hero .v6-mockup-panel .v6-agent-chip-icon, .surface-beat--navigate .v6-mockup-panel .v6-agent-chip-icon{ width: 14px; height: 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; flex-shrink: 0; box-shadow: 0 0 6px color-mix(in srgb, var(--blurple) 50%, transparent); }.hero .v6-mockup-panel .v6-agent-chip-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-agent-chip-icon svg{ width: 9px; height: 9px; }.hero .v6-mockup-panel .v6-agent-chip-name, .surface-beat--navigate .v6-mockup-panel .v6-agent-chip-name{ font-weight: 600; color: var(--v6-ink); letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-agent-chip-role, .surface-beat--navigate .v6-mockup-panel .v6-agent-chip-role{ font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; line-height: 1; }.hero .v6-mockup-panel .v6-agent-chip[data-role="host"] .v6-agent-chip-role, .surface-beat--navigate .v6-mockup-panel .v6-agent-chip[data-role="host"] .v6-agent-chip-role{ background: color-mix(in srgb, var(--blurple) 14%, transparent); color: var(--blurple); }.hero .v6-mockup-panel .v6-agent-chip[data-role="guest"] .v6-agent-chip-role, .surface-beat--navigate .v6-mockup-panel .v6-agent-chip[data-role="guest"] .v6-agent-chip-role{ background: color-mix(in srgb, var(--purple) 14%, transparent); color: var(--purple); } /* ───── Experience: recipient chips row ───── */.hero .v6-mockup-panel .v6-recipient, .surface-beat--navigate .v6-mockup-panel .v6-recipient{ display: flex; align-items: center; gap: 6px; padding: 8px 0; flex-wrap: wrap; }.hero .v6-mockup-panel .v6-recipient-label, .surface-beat--navigate .v6-mockup-panel .v6-recipient-label{ font-family: var(--v6-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v6-ink-3); margin-right: 4px; }.hero .v6-mockup-panel .v6-recipient-chip, .surface-beat--navigate .v6-mockup-panel .v6-recipient-chip{ display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 999px; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border: 1px solid var(--v6-hair); font-family: var(--brand-font); font-size: 10.5px; font-weight: 500; color: var(--v6-ink); }.hero .v6-mockup-panel .v6-recipient-av, .surface-beat--navigate .v6-mockup-panel .v6-recipient-av{ width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #569AF1, #7873F5); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--v6-mono); font-size: 8px; font-weight: 700; }.hero .v6-mockup-panel .v6-recipient-av-jb, .surface-beat--navigate .v6-mockup-panel .v6-recipient-av-jb{ background: linear-gradient(135deg, #FFE8C5, #FFD188); color: var(--v6-ink); }.hero .v6-mockup-panel .v6-recipient-av-la, .surface-beat--navigate .v6-mockup-panel .v6-recipient-av-la{ background: linear-gradient(135deg, #C9F0E0, #8DDBC5); color: var(--v6-ink); } /* ───── Scope: contract total ───── */.hero .v6-mockup-panel .v6-scope-total, .surface-beat--navigate .v6-mockup-panel .v6-scope-total{ display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: color-mix(in srgb, var(--purple) 8%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 24%, transparent); border-radius: 9px; }.hero .v6-mockup-panel .v6-scope-total-label, .surface-beat--navigate .v6-mockup-panel .v6-scope-total-label{ font-family: var(--v6-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v6-ink-3); }.hero .v6-mockup-panel .v6-scope-total-value, .surface-beat--navigate .v6-mockup-panel .v6-scope-total-value{ font-family: var(--brand-font); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--blurple), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* ───── Commit: contract metadata row ───── */.hero .v6-mockup-panel .v6-commit-meta, .surface-beat--navigate .v6-mockup-panel .v6-commit-meta{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 8px 0; }.hero .v6-mockup-panel .v6-commit-meta-item, .surface-beat--navigate .v6-mockup-panel .v6-commit-meta-item{ display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 1px solid var(--v6-hair); border-radius: 8px; }.hero .v6-mockup-panel .v6-commit-meta-label, .surface-beat--navigate .v6-mockup-panel .v6-commit-meta-label{ font-family: var(--v6-mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v6-ink-3); }.hero .v6-mockup-panel .v6-commit-meta-value, .surface-beat--navigate .v6-mockup-panel .v6-commit-meta-value{ font-family: var(--brand-font); font-size: 11px; font-weight: 600; color: var(--v6-ink); } /* ───── Deploy: gantt owners column ───── */.hero .v6-mockup-panel .v6-gantt-row, .surface-beat--navigate .v6-mockup-panel .v6-gantt-row{ grid-template-columns: 60px 1fr 22px; }.hero .v6-mockup-panel .v6-gantt-owner, .surface-beat--navigate .v6-mockup-panel .v6-gantt-owner{ width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #569AF1, #7873F5); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--v6-mono); font-size: 8.5px; font-weight: 700; } /* ───── Success: insight strip ───── */.hero .v6-mockup-panel .v6-success-insight, .surface-beat--navigate .v6-mockup-panel .v6-success-insight{ display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: color-mix(in srgb, var(--blurple) 8%, transparent); border: 1px solid color-mix(in srgb, var(--blurple) 28%, transparent); border-radius: 9px; }.hero .v6-mockup-panel .v6-insight-dot, .surface-beat--navigate .v6-mockup-panel .v6-insight-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--blurple); flex-shrink: 0; animation: v6AgentPulse 2s ease-in-out infinite; }.hero .v6-mockup-panel .v6-insight-text, .surface-beat--navigate .v6-mockup-panel .v6-insight-text{ font-family: var(--brand-font); font-size: 11.5px; font-weight: 500; color: var(--v6-ink); letter-spacing: -0.005em; } /* ───── Stage panel layout: enable flex column so agent strip can mt-auto pin to bottom ───── */.hero .v6-mockup-panel .v6-stage-panel, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel{ display: flex; flex-direction: column; } /* ───── Ring active-state fix — manual class for current stage ───── The legacy navigator-ring's own active-state logic doesn't always keep up with our cycle, so we explicitly mark the active and the completed stage-nodes via JS. White text everywhere inside the active node beats the legacy `.stage-node.is-active *` lightblue color rule that would otherwise give blue text on a blue gradient. Active ::before glow uses border-radius:16px (matches the node's 12px + 4px outset inset) so the glow follows the rounded-rectangle shape, not an oval. */.hero .v6-mockup-panel .stage-node.v6-is-active, .hero .v6-mockup-panel .stage-node.v6-is-active *, .hero .v6-mockup-panel .stage-node.v6-is-active svg, .hero .v6-mockup-panel .stage-node.v6-is-active svg *, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-active, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-active *, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-active svg, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-active svg *{ color: #fff !important; stroke: #fff !important; } /* Stage-node background layer — always present so active → complete * transitions smoothly. Uses @property-registered CSS variables so the * gradient colors interpolate (raw `background: linear-gradient(...)` * swaps don't animate; per-color custom props do). Default state holds * the colors invisible (opacity 0); active fills with blurple/purple * + pulse; complete cross-interpolates to green + drops the pulse. */ @property --node-grad-a { syntax: ''; inherits: false; initial-value: rgba(120, 115, 245, 0); } @property --node-grad-b { syntax: ''; inherits: false; initial-value: rgba(167, 139, 250, 0); }.hero .v6-mockup-panel .stage-node::before, .surface-beat--navigate .v6-mockup-panel .stage-node::before{ content: ''; position: absolute; inset: -4px; border-radius: 16px; background: linear-gradient(135deg, var(--node-grad-a), var(--node-grad-b)); z-index: -1; opacity: 0; transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), --node-grad-a 620ms cubic-bezier(0.22, 1, 0.36, 1), --node-grad-b 620ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 620ms ease; }.hero .v6-mockup-panel .stage-node.v6-is-active::before, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-active::before{ opacity: 1; --node-grad-a: var(--blurple); --node-grad-b: var(--purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 18%, transparent), 0 6px 18px rgba(120, 115, 245, 0.45); animation: v6ActiveNodePulse 2.2s ease-in-out infinite; } /* Completed nodes: gradient layer fades out smoothly (opacity 1 → 0 * over 620ms via the transition on ::before above). The node returns * to its default neutral background; the green check fades in * separately. No green-tinted background or glow — completed nodes * sit on the same main-bg as inactive ones with only the check * marking them done. */.hero .v6-mockup-panel .stage-node.v6-is-done::before, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-done::before{ opacity: 0; animation: none; } @keyframes v6ActiveNodePulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 18%, transparent), 0 0 0 0 rgba(120, 115, 245, 0.45), 0 6px 18px rgba(120, 115, 245, 0.45); } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 18%, transparent), 0 0 0 8px rgba(120, 115, 245, 0), 0 6px 18px rgba(120, 115, 245, 0.45); } } /* No corner check badge on completed nodes — the center check from `.stage-node.is-complete .stage-node-face::after` is already there. Two checks looked like a duplicate. */.hero .v6-mockup-panel .stage-node.v6-is-done::after, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-done::after{ content: none !important; } /* Stage-complete burst — plays ONCE when a node first picks up .v6-is-done (i.e. the stage just finished). Green halo expands and fades out around the node, syncing with the ring re-emerging + progress segment advancing so the user reads "stage X complete → moving on" as one smooth beat. */.hero .v6-mockup-panel .stage-node.v6-is-done, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-done{ animation: v6NodeCompleteBurst 1100ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes v6NodeCompleteBurst { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 75%, transparent), 0 0 0 0 color-mix(in srgb, var(--green) 30%, transparent); } 45% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--green) 0%, transparent), 0 0 22px 4px color-mix(in srgb, var(--green) 32%, transparent); } 100% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--green) 0%, transparent), 0 0 0 0 color-mix(in srgb, var(--green) 0%, transparent); } } /* ═══════════════════════════════════════════════════════════════ ROBUST RING LAYOUT — hardcoded node positions, no calc chain The legacy --node-transform uses a rotate→translate→rotate chain that depends on --node-distance which depends on --navigator-size which depends on 100vw. That chain produces timing/sizing bugs when the ring is inside a constrained, animating container. Solution: hardcode each node's final pixel offset around a circle of radius 120px. No dependencies. No fragility. ═══════════════════════════════════════════════════════════════ */ /* DO NOT touch the navigator-ring container's size — it sizes the panel and changing it shifts the whole content wrapper. Just hide the chevrons inside, then hardcode node positions below independently of ring size. */ /* Wrapper for panel + controls. The stack's natural height = the panel's height only — the controls are absolutely positioned BELOW the stack (out of layout flow) so the panel itself stays vertically centered by the parent flex/grid, while the controls feel like product chrome "attached" below it without affecting centering. */.hero .v6-panel-stack, .surface-beat--navigate .v6-panel-stack{ position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; } /* Panel controls — chevrons + counter + Live Journey View label. Floats below the panel via absolute positioning so the panel stays the centered element; the controls visually attach beneath it like detached product chrome. */.hero .v6-panel-controls, .surface-beat--navigate .v6-panel-controls{ position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: nowrap; opacity: 1; pointer-events: auto; z-index: 5; } /* Premium glass — lighter, more translucent. Shared by all three controls for a cohesive chrome row: same height (30px), same bg/border opacity, same backdrop blur. Counter + label are both pills (999px); chevrons stay rounded-square because they're icon buttons. */.hero .v6-panel-controls .ring-nav-chevron, .hero .v6-panel-controls .ring-nav-counter, .hero .v6-panel-controls .navigator-ring-micro-label, .surface-beat--navigate .v6-panel-controls .ring-nav-chevron, .surface-beat--navigate .v6-panel-controls .ring-nav-counter, .surface-beat--navigate .v6-panel-controls .navigator-ring-micro-label{ position: static; bottom: auto; top: auto; right: auto; left: auto; transform: none; height: 30px; box-sizing: border-box; /* Glass matches the .v6-mockup-panel exactly — same bg/border/blur so the controls read as the same material as the panel they sit below. (Panel: 46% main-bg, 16% inv-bg border, blur 18 saturate 1.35) */ background: color-mix(in srgb, var(--main-bg-color) 46%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 16%, transparent); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); box-shadow: 0 1px 2px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); display: inline-flex; align-items: center; justify-content: center; font-family: var(--brand-font); color: var(--inv-bg-color); opacity: 1; border-radius: 8px; }.hero .v6-panel-controls .ring-nav-chevron, .surface-beat--navigate .v6-panel-controls .ring-nav-chevron{ width: 30px; padding: 0; cursor: pointer; }.hero .v6-panel-controls .ring-nav-chevron svg, .surface-beat--navigate .v6-panel-controls .ring-nav-chevron svg{ width: 14px; height: 14px; stroke: var(--inv-bg-color); stroke-width: 2.2; opacity: 0.78; }.hero .v6-panel-controls .ring-nav-counter, .surface-beat--navigate .v6-panel-controls .ring-nav-counter{ padding: 0 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; width: 70px; /* fixed width — "9 of 9" doesn't wrap, doesn't shrink in flex */ white-space: nowrap; flex-shrink: 0; } /* Fixed width so swapping the step text doesn't jostle the chevrons. Text centered inside; long step names ellipsis. flex-shrink:0 keeps it from collapsing on narrow viewports. */.hero .v6-panel-controls .navigator-ring-micro-label, .surface-beat--navigate .v6-panel-controls .navigator-ring-micro-label{ gap: 7px; padding: 0 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.005em; white-space: nowrap; width: 220px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--inv-bg-color) 82%, transparent); }.hero .v6-panel-controls .ring-nav-chevron, .surface-beat--navigate .v6-panel-controls .ring-nav-chevron{ flex-shrink: 0; }.hero .v6-panel-controls .navigator-ring-micro-label .micro-label-pulse, .surface-beat--navigate .v6-panel-controls .navigator-ring-micro-label .micro-label-pulse{ width: 6px; height: 6px; border-radius: 50%; background: var(--green, #2BB66D); box-shadow: 0 0 6px color-mix(in srgb, var(--green) 60%, transparent); animation: v6MicroPulse 1.8s ease-in-out infinite; } @keyframes v6MicroPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.78); } } /* Controls are always visible — no phase gating. */ /* Node positions on a circle of radius --node-radius (= --navigator-size / 2). Six nodes at 60° intervals: sin(60°) ≈ 0.866, cos(60°) = 0.5. Driven by the navigator-ring's clamp() so the orbital scales with viewport. */.hero .v6-mockup-panel .stage-node[data-stage-index="0"], .surface-beat--navigate .v6-mockup-panel .stage-node[data-stage-index="0"]{ transform: translate(-50%, -50%) translate(0, calc(-1 * var(--node-radius))) !important; }.hero .v6-mockup-panel .stage-node[data-stage-index="1"], .surface-beat--navigate .v6-mockup-panel .stage-node[data-stage-index="1"]{ transform: translate(-50%, -50%) translate(calc(0.866 * var(--node-radius)), calc(-0.5 * var(--node-radius))) !important; }.hero .v6-mockup-panel .stage-node[data-stage-index="2"], .surface-beat--navigate .v6-mockup-panel .stage-node[data-stage-index="2"]{ transform: translate(-50%, -50%) translate(calc(0.866 * var(--node-radius)), calc(0.5 * var(--node-radius))) !important; }.hero .v6-mockup-panel .stage-node[data-stage-index="3"], .surface-beat--navigate .v6-mockup-panel .stage-node[data-stage-index="3"]{ transform: translate(-50%, -50%) translate(0, var(--node-radius)) !important; }.hero .v6-mockup-panel .stage-node[data-stage-index="4"], .surface-beat--navigate .v6-mockup-panel .stage-node[data-stage-index="4"]{ transform: translate(-50%, -50%) translate(calc(-0.866 * var(--node-radius)), calc(0.5 * var(--node-radius))) !important; }.hero .v6-mockup-panel .stage-node[data-stage-index="5"], .surface-beat--navigate .v6-mockup-panel .stage-node[data-stage-index="5"]{ transform: translate(-50%, -50%) translate(calc(-0.866 * var(--node-radius)), calc(-0.5 * var(--node-radius))) !important; } /* Shrink the navigator-ring container to 240px (matches the hardcoded node orbital). User explicitly approved size reduction. With the container at 240px, ::before, the completion arc, and the nodes all land on the same stroke without any pseudo-element offset trickery. The V6 dashed ::after is no longer needed — dropped to leave one ring. */.hero .v6-mockup-panel .navigator-ring, .surface-beat--navigate .v6-mockup-panel .navigator-ring{ --navigator-size: clamp(280px, 30vw, 400px); --node-radius: calc(var(--navigator-size) / 2); width: var(--navigator-size); height: var(--navigator-size); margin: 0 auto; }.hero .v6-mockup-panel .navigator-ring::after, .surface-beat--navigate .v6-mockup-panel .navigator-ring::after{ display: none; } /* ───── RING CENTER — fills the orbital ring's empty middle ───── Shows the current stage's icon, eyebrow ("Stage X of 6"), and title ("Discovery"/"Experience"/etc.). Anchored absolutely at center of the v6-mockup-panel. Only visible during ring/stage/success phases. */.hero .v6-mockup-panel .v6-ring-center, .surface-beat--navigate .v6-mockup-panel .v6-ring-center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 6; text-align: center; opacity: 0; transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1), filter 480ms ease; filter: blur(4px); }.hero .v6-mockup-panel[data-v6-phase="ring"] .v6-ring-center, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .v6-ring-center{ opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); animation: v6RingCenterIn 900ms cubic-bezier(0.16, 1, 0.3, 1) 700ms backwards; } @keyframes v6RingCenterIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); filter: blur(6px); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); } }.hero .v6-mockup-panel[data-v6-phase="stage"] .v6-ring-center, .hero .v6-mockup-panel[data-v6-phase="success"] .v6-ring-center, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .v6-ring-center, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .v6-ring-center{ opacity: 0; transform: translate(-50%, -50%) scale(0.85); filter: blur(4px); }.hero .v6-mockup-panel .v6-ring-center-icon, .surface-beat--navigate .v6-mockup-panel .v6-ring-center-icon{ width: 56px; height: 56px; border-radius: 16px; background: color-mix(in srgb, var(--main-bg-color) 80%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); display: flex; align-items: center; justify-content: center; color: var(--inv-bg-color); box-shadow: 0 8px 22px color-mix(in srgb, var(--inv-bg-color) 10%, transparent), 0 2px 6px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); transition: opacity 280ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1); }.hero .v6-mockup-panel .v6-ring-center-icon.is-changing, .surface-beat--navigate .v6-mockup-panel .v6-ring-center-icon.is-changing{ opacity: 0; transform: scale(0.85); }.hero .v6-mockup-panel .v6-ring-center-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-ring-center-icon svg{ width: 26px; height: 26px; }.hero .v6-mockup-panel .v6-ring-center-label, .surface-beat--navigate .v6-mockup-panel .v6-ring-center-label{ display: flex; flex-direction: column; align-items: center; gap: 2px; }.hero .v6-mockup-panel .v6-ring-center-eyebrow, .surface-beat--navigate .v6-mockup-panel .v6-ring-center-eyebrow{ font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-bg-color) 52%, transparent); transition: opacity 220ms ease; }.hero .v6-mockup-panel .v6-ring-center-title, .surface-beat--navigate .v6-mockup-panel .v6-ring-center-title{ font-family: var(--brand-font); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; background: linear-gradient(135deg, var(--blurple) 0%, var(--purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; transition: opacity 240ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }.hero .v6-mockup-panel .v6-ring-center-title.is-changing, .surface-beat--navigate .v6-mockup-panel .v6-ring-center-title.is-changing{ opacity: 0; transform: translateY(-4px); } /* ════════════════════════════════════════════════════════════════════ HERO TEXT + CTA ALIGNMENT FIX ════════════════════════════════════════════════════════════════════ */ /* "First-Party AI™" — NO gradient, NO underline, NO border. Just solid main contrast color + bold so it reads as darker/heavier than the muted surrounding body text. */.hero .hero-tag-gradient, .hero a.hero-tag-gradient, .surface-beat--navigate .surface-beat--navigate-tag-gradient, .surface-beat--navigate a.surface-beat--navigate-tag-gradient{ background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: color-mix(in srgb, var(--inv-bg-color) 78%, transparent) !important; color: color-mix(in srgb, var(--inv-bg-color) 78%, transparent) !important; font-weight: 550 !important; opacity: 1 !important; text-decoration: none !important; border-bottom: none !important; } /* CTA row alignment — buttons have 14px horizontal padding so their visible text starts 14px inside the row. Pull the row 14px to the left so the FIRST button's text aligns flush-left with the headline and the subtext. */ /* Buttons have 0.7rem horizontal padding for hover-bg breathing room. Pull the row left by the same amount so the first button's TEXT aligns flush with the headline/subtext left edge. */.hero .hero-cta-row, .surface-beat--navigate .surface-beat--navigate-cta-row{ margin-left: -0.7rem; } /* ════════════════════════════════════════════════════════════════════ PREMIUM SCROLL REVEALS — copied verbatim from michaelcantow.com (PersonalSite/mcantow.github.io/css/main.css L3409–3497). .reveal — fade up + blur clear (base) .reveal-card — 3D card entry (rotateX + scale + blur) .reveal-left/-right — side slide with blur .reveal-stagger > * — children get cascading delay via auto-assigned --i ════════════════════════════════════════════════════════════════════ */ :root { --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); } .reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 820ms var(--ease-reveal) var(--reveal-delay, 0ms), transform 960ms var(--ease-reveal) var(--reveal-delay, 0ms), filter 720ms ease var(--reveal-delay, 0ms); will-change: opacity, transform, filter; } .reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); } .reveal-card { opacity: 0; transform: translateY(40px) rotateX(6deg) scale(0.97); filter: blur(7px); transform-origin: 50% 100%; transition: opacity 880ms var(--ease-reveal) var(--reveal-delay, 0ms), transform 1060ms var(--ease-spring) var(--reveal-delay, 0ms), filter 760ms ease var(--reveal-delay, 0ms); will-change: opacity, transform, filter; } .reveal-card.is-visible { opacity: 1; transform: translateY(0) rotateX(0) scale(1); filter: blur(0); } .reveal-left, .reveal-right { opacity: 0; filter: blur(6px); transition: opacity 820ms var(--ease-reveal) var(--reveal-delay, 0ms), transform 960ms var(--ease-reveal) var(--reveal-delay, 0ms), filter 700ms ease var(--reveal-delay, 0ms); will-change: opacity, transform, filter; } .reveal-left { transform: translateX(-36px); } .reveal-right { transform: translateX(36px); } .reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: translateX(0); filter: blur(0); } .reveal-stagger > *.reveal, .reveal-stagger > *.reveal-card, .reveal-stagger > *.reveal-left, .reveal-stagger > *.reveal-right { --reveal-delay: calc(var(--i, 0) * 110ms); } /* Perspective for 3D card reveals — matches personal site selectors plus the V6 card grids that get .reveal-card on their children. */ .thesis-grid, .cluster-compare, .contact-links, .timeline, .axes, .cn-features, .proof-stats-grid, .meets-modes, .roi-multipliers { perspective: 1600px; perspective-origin: 50% 30%; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-card, .reveal-left, .reveal-right { opacity: 1; transform: none; filter: none; transition: none; } } /* ════════════════════════════════════════════════════════════════════ CREATE / SHARE / NAVIGATE PICKER — first beat of the journey demo. After the CN logo lands, the panel pivots to a three-up of the app's top-level actions (Create, Share, Navigate). The cursor moves to Navigate and clicks it, which kicks off the ring intro. ════════════════════════════════════════════════════════════════════ */.hero .v6-mockup-panel .v6-csn-picker, .surface-beat--navigate .v6-mockup-panel .v6-csn-picker{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; opacity: 0; transform: scale(0.92); filter: blur(4px); pointer-events: none; z-index: 4; /* Same enter/exit rhythm as the ring → stage transition (the reference "perfect" transition). Was scale(0.94) blur(8) with 480/600/420ms timings — too much zoom + blur + faster timing gave the exit a "shrinks away" feel instead of a calm zoom-in. */ transition: opacity 600ms var(--v6-ease), transform 700ms var(--v6-spring), filter 460ms ease; }.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-picker, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-picker{ opacity: 1; transform: scale(1); filter: blur(0); }.hero .v6-mockup-panel .v6-csn-eyebrow, .surface-beat--navigate .v6-mockup-panel .v6-csn-eyebrow{ font-family: var(--brand-font); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--v6-ink) 70%, transparent); opacity: 0; transform: translateY(6px); transition: opacity 360ms var(--v6-ease) 80ms, transform 420ms var(--v6-ease) 80ms; }.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-eyebrow, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-eyebrow{ opacity: 1; transform: translateY(0); } /* iOS-tile layout matching the React app's DashboardLandingV2: 3 columns, primary tile per column = 60×60 icon box (14px radius) with accent-tinted background/border, label centered below. */.hero .v6-mockup-panel .v6-csn-columns, .surface-beat--navigate .v6-mockup-panel .v6-csn-columns{ display: flex; gap: 16px; align-items: flex-start; justify-content: center; } /* Share column wrapper — mirrors SPA's `.wrap` (CommandColumn.module.css): stacks the glass column + the Agent Mode footer pill vertically so the pill sits OUTSIDE the card, not clipped by its overflow: hidden. */.hero .v6-mockup-panel .v6-csn-column-wrap, .surface-beat--navigate .v6-mockup-panel .v6-csn-column-wrap{ display: flex; flex-direction: column; align-items: center; gap: 8px; } /* Premium polish — mirrors SPA's CommandColumn + bare-header treatment (DashboardLandingV2). Each column is a glass card with a 2px gradient accent strip at top. The icon sits bare (no containing box) as a section emblem — same hierarchy inversion the SPA uses to put visual weight on actionable surfaces rather than identity chrome. */.hero .v6-mockup-panel .v6-csn-column, .surface-beat--navigate .v6-mockup-panel .v6-csn-column{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 96px; padding: 16px 14px 14px; border-radius: 14px; background: color-mix(in srgb, var(--v6-paper) 78%, transparent); border: 1px solid color-mix(in srgb, var(--v6-ink) 9%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 2px color-mix(in srgb, var(--v6-ink) 4%, transparent), 0 8px 24px color-mix(in srgb, var(--v6-ink) 5%, transparent); overflow: hidden; --csn-accent: var(--blurple); } /* 2px gradient accent strip at top — verbatim from CommandColumn::before */.hero .v6-mockup-panel .v6-csn-column::before, .surface-beat--navigate .v6-mockup-panel .v6-csn-column::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--csn-accent) 70%, transparent), color-mix(in srgb, var(--csn-accent) 30%, transparent)); opacity: 0.85; z-index: 1; }.hero .v6-mockup-panel .v6-csn-column[data-accent="blurpleblue"], .surface-beat--navigate .v6-mockup-panel .v6-csn-column[data-accent="blurpleblue"]{ --csn-accent: #5689F5; }.hero .v6-mockup-panel .v6-csn-column[data-accent="blurple"], .surface-beat--navigate .v6-mockup-panel .v6-csn-column[data-accent="blurple"]{ --csn-accent: var(--blurple, #7873F5); }.hero .v6-mockup-panel .v6-csn-column[data-accent="purple"], .surface-beat--navigate .v6-mockup-panel .v6-csn-column[data-accent="purple"]{ --csn-accent: var(--purple, #A78BFA); }.hero .v6-mockup-panel .v6-csn-tile, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile{ display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 480ms var(--v6-ease), transform 520ms var(--v6-spring); will-change: transform, opacity; }.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-tile, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-tile{ opacity: 1; transform: translateY(0) scale(1); }.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-tile[data-csn="create"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-tile[data-csn="create"]{ transition-delay: 160ms; }.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-tile[data-csn="share"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-tile[data-csn="share"]{ transition-delay: 240ms; }.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-tile[data-csn="navigate"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-tile[data-csn="navigate"]{ transition-delay: 320ms; } /* Bare-emblem icon — no containing box, accent-tinted. Matches the SPA's `headerStyle="bare"` treatment used by DashboardLandingV2. */.hero .v6-mockup-panel .v6-csn-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-icon{ width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--csn-accent); transition: transform 280ms var(--v6-spring); }.hero .v6-mockup-panel .v6-csn-tile-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-icon svg{ width: 32px; height: 32px; }.hero .v6-mockup-panel .v6-csn-tile-label, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-label{ font-family: var(--brand-font); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.1; color: var(--csn-accent); } /* Agent Mode footer pill — sits below Share column, gradient gearhead */.hero .v6-mockup-panel .v6-csn-agent, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 14px; /* Glass card chrome — matches .v6-csn-column so the pill reads as part of the same Create/Share/Navigate panel system. */ background: color-mix(in srgb, var(--v6-paper) 78%, transparent); border: 1px solid color-mix(in srgb, var(--v6-ink) 9%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 2px color-mix(in srgb, var(--v6-ink) 4%, transparent), 0 8px 24px color-mix(in srgb, var(--v6-ink) 5%, transparent); opacity: 0; transform: translateY(6px); transition: opacity 420ms var(--v6-ease) 400ms, transform 480ms var(--v6-spring) 400ms; }.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-agent, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-agent{ opacity: 1; transform: translateY(0); }.hero .v6-mockup-panel .v6-csn-agent-icon, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent-icon{ width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }.hero .v6-mockup-panel .v6-csn-agent-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent-icon svg{ width: 100%; height: 100%; }.hero .v6-mockup-panel .v6-csn-agent-label, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent-label{ font-family: var(--brand-font); font-size: 10px; font-weight: 500; letter-spacing: 0.01em; color: color-mix(in srgb, var(--blurple) 92%, var(--v6-ink)); } /* Navigate's column lifts + glows when the cursor lands on it. JS adds `.csn-hover-navigate` to the mockup panel at the cursor-lands moment (not on phase entry) so the picker reads as un-hovered until the user's "cursor" actually arrives. */.hero .v6-mockup-panel.csn-hover-navigate .v6-csn-column:has(.v6-csn-tile[data-csn="navigate"]), .surface-beat--navigate .v6-mockup-panel.csn-hover-navigate .v6-csn-column:has(.v6-csn-tile[data-csn="navigate"]){ animation: v6CsnTileHover 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }.hero .v6-mockup-panel.csn-hover-navigate .v6-csn-column:has(.v6-csn-tile[data-csn="navigate"]) .v6-csn-tile-icon, .surface-beat--navigate .v6-mockup-panel.csn-hover-navigate .v6-csn-column:has(.v6-csn-tile[data-csn="navigate"]) .v6-csn-tile-icon{ animation: v6CsnIconLift 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes v6CsnTileHover { 0% { border-color: color-mix(in srgb, var(--v6-ink) 9%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, var(--v6-ink) 4%, transparent), 0 8px 24px color-mix(in srgb, var(--v6-ink) 5%, transparent); transform: translateY(0); } 100% { border-color: color-mix(in srgb, var(--csn-accent) 28%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, var(--v6-ink) 4%, transparent), 0 12px 36px color-mix(in srgb, var(--csn-accent) 18%, transparent); transform: translateY(-4px); } } @keyframes v6CsnIconLift { 0% { transform: scale(1); } 100% { transform: scale(1.06); } } /* Cursor + ripple for the intro pickers (CSN + SPD) live in .v6-fx wrappers — see the .v6-fx utility block. JS writes --fx-x/--fx-y onto the wrapper and toggles `.is-clicking` to fire. These intro cursors use a custom keyframe (v6FxCursorIntro, below) that lands at 35% and presses at 75% — versus the default 50/65 — so 40% of the duration is real hover time. Reads as a deliberate human "decide then click" instead of a slap. */.hero .v6-mockup-panel .v6-fx[data-v6-fx="csn"], .hero .v6-mockup-panel .v6-fx[data-v6-fx="spd"], .surface-beat--navigate .v6-mockup-panel .v6-fx[data-v6-fx="csn"], .surface-beat--navigate .v6-mockup-panel .v6-fx[data-v6-fx="spd"]{ --fx-duration: 1400ms; }.hero .v6-mockup-panel .v6-fx[data-v6-fx="csn"].is-clicking .v6-fx__cursor, .hero .v6-mockup-panel .v6-fx[data-v6-fx="spd"].is-clicking .v6-fx__cursor, .surface-beat--navigate .v6-mockup-panel .v6-fx[data-v6-fx="csn"].is-clicking .v6-fx__cursor, .surface-beat--navigate .v6-mockup-panel .v6-fx[data-v6-fx="spd"].is-clicking .v6-fx__cursor{ animation-name: v6FxCursorIntro; } /* Ripple fires at the press moment — 75% for the intro variant (default global rule uses 65%). */.hero .v6-mockup-panel .v6-fx[data-v6-fx="csn"].is-clicking .v6-fx__ripple, .hero .v6-mockup-panel .v6-fx[data-v6-fx="spd"].is-clicking .v6-fx__ripple, .surface-beat--navigate .v6-mockup-panel .v6-fx[data-v6-fx="csn"].is-clicking .v6-fx__ripple, .surface-beat--navigate .v6-mockup-panel .v6-fx[data-v6-fx="spd"].is-clicking .v6-fx__ripple{ animation-delay: calc(var(--fx-delay, 0ms) + var(--fx-duration) * 0.75); } @keyframes v6FxCursorIntro { 0% { opacity: 0; transform: translate(60px, 60px) scale(0.6); } 35% { opacity: 1; transform: translate(0, 0) scale(1); } 75% { transform: translate(-4px, -4px) scale(0.88); } 85% { transform: translate(0, 0) scale(1); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) {.hero .v6-mockup-panel .v6-csn-picker, .hero .v6-mockup-panel .v6-csn-bubble, .surface-beat--navigate .v6-mockup-panel .v6-csn-picker, .surface-beat--navigate .v6-mockup-panel .v6-csn-bubble{ transition: none !important; animation: none !important; } } /* ════════════════════════════════════════════════════════════════════ START / PLAN / DRIVE — single framing beat after the picker. Matches JourneyDetailV2.tsx: Goals pill (Start) + Journey Map pill (Plan, with small clickable CnCircleFlow chart) + Directions pill (Drive). Cursor clicks the Journey Map pill mid-beat, which is what "expands" into the full navigator-ring on the next phase. ════════════════════════════════════════════════════════════════════ */.hero .v6-mockup-panel .v6-spd, .surface-beat--navigate .v6-mockup-panel .v6-spd{ position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; grid-template-areas: "map map" "goals directions"; gap: clamp(8px, 1.6cqi, 14px); /* Top padding clears the 30px window-chrome strip + 14px breathing room * so the Journey Map pill doesn't kiss the chrome's bottom border. */ padding: 46px clamp(16px, 4cqi, 28px) clamp(16px, 4cqi, 28px); z-index: 7; opacity: 0; transform: scale(0.92); filter: blur(4px); pointer-events: none; /* Same enter/exit rhythm as the ring → stage transition. */ transition: opacity 600ms var(--v6-ease), transform 700ms var(--v6-spring), filter 460ms ease; } /* Place the pills by area; Map gets the dominant top row, Goals and Directions are equal supporting pills below. */.hero .v6-mockup-panel .v6-spd-map, .surface-beat--navigate .v6-mockup-panel .v6-spd-map{ grid-area: map; flex: none; }.hero .v6-mockup-panel .v6-spd-goals, .surface-beat--navigate .v6-mockup-panel .v6-spd-goals{ grid-area: goals; flex: none; }.hero .v6-mockup-panel .v6-spd-directions, .surface-beat--navigate .v6-mockup-panel .v6-spd-directions{ grid-area: directions; flex: none; }.hero .v6-mockup-panel[data-v6-phase="spd"] .v6-spd, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .v6-spd{ opacity: 1; transform: scale(1); filter: blur(0); /* Tightened delay — 200ms is enough to let CSN clear before SPD starts rising. Bigger overlap reads as a continuous handoff. */ transition: opacity 600ms var(--v6-ease) 200ms, transform 700ms var(--v6-spring) 200ms, filter 460ms ease 200ms; }.hero .v6-mockup-panel .v6-spd-pill, .surface-beat--navigate .v6-mockup-panel .v6-spd-pill{ --spd-accent: var(--blurple, #7873F5); min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: clamp(6px, 1cqi, 9px); padding: clamp(10px, 1.8cqi, 16px); border-radius: clamp(12px, 1.8cqi, 16px); background: color-mix(in srgb, var(--main-bg-color) 42%, transparent); border: 1px solid color-mix(in srgb, var(--spd-accent) 16%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); position: relative; opacity: 0; transform: translateY(10px); transition: opacity 520ms var(--v6-ease), transform 580ms var(--v6-spring); overflow: hidden; container-type: inline-size; container-name: v6spdpill; }.hero .v6-mockup-panel .v6-spd-pill[data-accent="blurpleblue"], .surface-beat--navigate .v6-mockup-panel .v6-spd-pill[data-accent="blurpleblue"]{ --spd-accent: #5689F5; }.hero .v6-mockup-panel .v6-spd-pill[data-accent="blurple"], .surface-beat--navigate .v6-mockup-panel .v6-spd-pill[data-accent="blurple"]{ --spd-accent: var(--blurple, #7873F5); }.hero .v6-mockup-panel .v6-spd-pill[data-accent="purple"], .surface-beat--navigate .v6-mockup-panel .v6-spd-pill[data-accent="purple"]{ --spd-accent: var(--purple, #A78BFA); } /* Map pill is the visual hero — gets extra padding, center-aligned chart */.hero .v6-mockup-panel .v6-spd-map, .surface-beat--navigate .v6-mockup-panel .v6-spd-map{ align-items: stretch; /* Bottom padding gives Commit pill (chart center + 100, extending ~11px below chart bounds) real clearance from the pill border. Top padding is tight since the header sits just below it. */ padding: 12px 20px 24px; min-height: 256px; }.hero .v6-mockup-panel[data-v6-phase="spd"] .v6-spd-pill, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .v6-spd-pill{ opacity: 1; transform: translateY(0); }.hero .v6-mockup-panel[data-v6-phase="spd"] .v6-spd-goals, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .v6-spd-goals{ transition-delay: 60ms; }.hero .v6-mockup-panel[data-v6-phase="spd"] .v6-spd-map, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .v6-spd-map{ transition-delay: 160ms; }.hero .v6-mockup-panel[data-v6-phase="spd"] .v6-spd-directions, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .v6-spd-directions{ transition-delay: 260ms; } /* During the SPD → ring exit, pin pills at full opacity so only the container fades. Otherwise the pills' 520ms opacity transition finishes before the container's 600ms, leaving a brief empty shell mid-exit that reads as a "flash." Letting the container own the fade gives one clean unified motion. */.hero .v6-mockup-panel[data-v6-phase="ring"] .v6-spd-pill, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .v6-spd-pill{ opacity: 1; transform: translateY(0); transition: none; }.hero .v6-mockup-panel .v6-spd-header, .surface-beat--navigate .v6-mockup-panel .v6-spd-header{ display: flex; align-items: center; gap: clamp(4px, 0.8cqi, 6px); min-width: 0; }.hero .v6-mockup-panel .v6-spd-header-icon, .surface-beat--navigate .v6-mockup-panel .v6-spd-header-icon{ width: clamp(11px, 1.4cqi, 14px); height: clamp(11px, 1.4cqi, 14px); display: inline-flex; align-items: center; justify-content: center; color: var(--spd-accent); flex-shrink: 0; }.hero .v6-mockup-panel .v6-spd-header-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-spd-header-icon svg{ width: 100%; height: 100%; }.hero .v6-mockup-panel .v6-spd-header-title, .surface-beat--navigate .v6-mockup-panel .v6-spd-header-title{ font-family: var(--brand-font); font-size: clamp(9px, 1.2cqi, 11px); font-weight: 700; letter-spacing: 0.01em; color: var(--v6-ink); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }.hero .v6-mockup-panel .v6-spd-count, .hero .v6-mockup-panel .v6-spd-days, .surface-beat--navigate .v6-mockup-panel .v6-spd-count, .surface-beat--navigate .v6-mockup-panel .v6-spd-days{ margin-left: auto; padding: 2px clamp(5px, 0.8cqi, 7px); font-size: clamp(8px, 1cqi, 9px); font-weight: 600; border-radius: 999px; background: color-mix(in srgb, var(--spd-accent) 14%, transparent); color: var(--spd-accent); letter-spacing: 0.02em; flex-shrink: 0; line-height: 1.2; }.hero .v6-mockup-panel .v6-spd-days, .surface-beat--navigate .v6-mockup-panel .v6-spd-days{ background: color-mix(in srgb, #FF9A3C 18%, transparent); color: #C56A12; } /* Eyebrow used inside Directions pill to show the current stage + days */.hero .v6-mockup-panel .v6-spd-eyebrow, .surface-beat--navigate .v6-mockup-panel .v6-spd-eyebrow{ margin-left: auto; padding: 2px 7px; font-size: 9px; font-weight: 600; border-radius: 999px; background: color-mix(in srgb, var(--spd-accent) 12%, transparent); color: var(--spd-accent); letter-spacing: 0.02em; flex-shrink: 0; }.hero .v6-mockup-panel .v6-spd-list, .surface-beat--navigate .v6-mockup-panel .v6-spd-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(3px, 0.6cqi, 5px); min-width: 0; }.hero .v6-mockup-panel .v6-spd-list li, .surface-beat--navigate .v6-mockup-panel .v6-spd-list li{ display: flex; align-items: center; gap: clamp(5px, 0.8cqi, 7px); font-family: var(--brand-font); font-size: clamp(9px, 1.1cqi, 10px); font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 72%, transparent); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }.hero .v6-mockup-panel .v6-spd-dot, .surface-beat--navigate .v6-mockup-panel .v6-spd-dot{ width: clamp(5px, 0.7cqi, 6px); height: clamp(5px, 0.7cqi, 6px); border-radius: 50%; background: color-mix(in srgb, var(--spd-accent) 80%, transparent); flex-shrink: 0; }.hero .v6-mockup-panel .v6-spd-goal-lead, .surface-beat--navigate .v6-mockup-panel .v6-spd-goal-lead{ color: var(--v6-ink); font-weight: 600; }.hero .v6-mockup-panel .v6-spd-goal-lead .v6-spd-dot, .surface-beat--navigate .v6-mockup-panel .v6-spd-goal-lead .v6-spd-dot{ background: var(--spd-accent); box-shadow: 0 0 6px color-mix(in srgb, var(--spd-accent) 60%, transparent); }.hero .v6-mockup-panel .v6-spd-footer, .surface-beat--navigate .v6-mockup-panel .v6-spd-footer{ margin-top: 2px; font-size: 9px; color: color-mix(in srgb, var(--v6-ink) 45%, transparent); } /* Directions step markers + opacity cascade for next-priority items */.hero .v6-mockup-panel .v6-spd-step, .surface-beat--navigate .v6-mockup-panel .v6-spd-step{ font-size: 8px; color: var(--spd-accent); line-height: 1; width: 8px; text-align: center; flex-shrink: 0; }.hero .v6-mockup-panel .v6-spd-dir-curr, .surface-beat--navigate .v6-mockup-panel .v6-spd-dir-curr{ color: var(--v6-ink); font-weight: 600; }.hero .v6-mockup-panel .v6-spd-dir-np1, .surface-beat--navigate .v6-mockup-panel .v6-spd-dir-np1{ opacity: 0.72; }.hero .v6-mockup-panel .v6-spd-dir-np2, .surface-beat--navigate .v6-mockup-panel .v6-spd-dir-np2{ opacity: 0.5; } /* Mini Journey Map chart — scales with its pill via aspect-ratio + percentage node positions. No fixed-px sizes so it fits cleanly whether the panel is 400px or 600px wide. Six stage labels positioned at 60° intervals on the ring stroke; node radius = 45% of the chart so labels sit on the orbital. */ /* Mini Journey Map chart — scaled-down navigator-ring. Hairline track, conic-gradient progress arc, and 6 circular nodes positioned at 60° intervals around a radius INSIDE the chart bounds so nodes don't touch the surrounding pill edges. Chart container size is fixed to avoid cqi sizing surprises in narrow pills. */.hero .v6-mockup-panel .v6-spd-mini-chart, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-chart{ position: relative; width: 200px; /* Sized so the whole SPD (map + goals/dirs row) fits inside the 488px panel without clipping the bottom-row pills. Pills sit ON the ring stroke at radius 100. */ height: 200px; margin: 0 auto 4px; flex: 0 0 auto; align-self: center; border-radius: 50%; overflow: visible; /* pills can protrude slightly outside the ring */ } /* Track ring — soft 2px gray stroke at the outer edge */.hero .v6-mockup-panel .v6-spd-mini-chart::before, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-chart::before{ content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--v6-ink) 14%, transparent); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1px), transparent 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1px), transparent 100%); z-index: 1; } /* Progress arc — green for done (0-120° = 2 of 6 done) sitting on top of the track at the same stroke width. Conic-gradient defaults to 0° = 12 o'clock = Discovery node's position, so the arc covers Discovery + Experience (the two completed stages). NO `from -90deg`: that was rotating the start to 9 o'clock and misaligning everything. */.hero .v6-mockup-panel .v6-spd-mini-chart::after, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-chart::after{ content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient( var(--green, #2BB66D) 0deg, color-mix(in srgb, var(--green) 70%, var(--blurple)) 120deg, transparent 120deg 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1px), transparent 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1px), transparent 100%); z-index: 2; } /* Mini stage-node — labeled rounded-rect PILLS, matching the real CnCircleFlow preview. Each pill contains the stage NAME (not an icon + separate label). Pills sit ON the ring stroke at 60° apart — pill CENTERS are on the ring (chart radius - 2px). */.hero .v6-mockup-panel .v6-spd-mini-node, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node{ position: absolute; top: 50%; left: 50%; width: 70px; height: 22px; margin-left: -35px; margin-top: -11px; transform: translate(var(--mx, 0), var(--my, 0)); display: flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--main-bg-color); border: 1.5px solid color-mix(in srgb, var(--v6-ink) 20%, transparent); box-shadow: 0 2px 6px color-mix(in srgb, var(--v6-ink) 10%, transparent); color: color-mix(in srgb, var(--v6-ink) 78%, transparent); font-family: var(--brand-font); font-size: 10px; font-weight: 600; letter-spacing: -0.005em; line-height: 1; z-index: 4; transition: background 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 280ms ease; } /* SVG icons inside the original markup are not needed — hide them */.hero .v6-mockup-panel .v6-spd-mini-node svg, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node svg{ display: none; } /* Inline label span shows the stage name */.hero .v6-mockup-panel .v6-spd-mini-label, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-label{ display: inline; line-height: 1; } /* Pills sit ON the ring stroke — pill CENTERS land on the ring's circle. Chart is 200px (radius 100). Ring stroke mask is at `calc(100% - 3px)` → stroke center at radius 100-3 ≈ 97. We snap pill centers to radius 100 so they straddle the stroke. Pills are 70×22; bottom pill extends to 100+11 = 111 from chart center, which protrudes 11px below the chart bounds — absorbed by the map pill's 22px bottom padding. Polar coordinates at 60° intervals, r=100: 0° Discovery → (0, -100) 60° Experience → (100·sin60°, -100·cos60°) = (87, -50) 120° Scope → (87, 50) 180° Commit → (0, 100) 240° Deploy → (-87, 50) 300° Success → (-87, -50) */.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(1), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(1){ --mx: 0; --my: -100px; } /* Discovery — top */.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(2), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(2){ --mx: 87px; --my: -50px; } /* Experience — upper-right */.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(3), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(3){ --mx: 87px; --my: 50px; } /* Scope — lower-right */.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(4), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(4){ --mx: 0; --my: 100px; } /* Commit — bottom */.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(5), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(5){ --mx: -87px; --my: 50px; } /* Deploy — lower-left */.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(6), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(6){ --mx: -87px; --my: -50px; } /* Success — upper-left */ /* Done — green border + green icon, like the main ring's completed nodes. */.hero .v6-mockup-panel .v6-spd-mini-done, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-done{ border-color: color-mix(in srgb, var(--green) 55%, transparent); color: var(--green, #2BB66D); background: color-mix(in srgb, var(--green) 6%, var(--main-bg-color) 88%); } /* Active — blurple gradient like the main ring's .v6-is-active::before, white icon, soft pulse glow. */.hero .v6-mockup-panel .v6-spd-mini-active, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-active{ background: linear-gradient(135deg, var(--blurple, #7873F5), var(--purple, #A78BFA)); border-color: color-mix(in srgb, var(--blurple) 60%, transparent); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blurple) 18%, transparent), 0 6px 14px color-mix(in srgb, var(--blurple) 35%, transparent); }.hero .v6-mockup-panel .v6-spd-mini-active svg, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-active svg{ stroke: #fff; } /* Per-pill container queries — when a pill is narrower than ~110px (tight 3-column desktop layout), drop the 3rd list item + "+ more" footer so the pill doesn't overflow. On mobile the pills are wide (full panel width), so the queries don't trigger and all items stay visible. */ @container v6spdpill (max-width: 110px) {.hero .v6-mockup-panel .v6-spd-list li:nth-child(n+3), .surface-beat--navigate .v6-mockup-panel .v6-spd-list li:nth-child(n+3){ display: none; }.hero .v6-mockup-panel .v6-spd-footer, .surface-beat--navigate .v6-mockup-panel .v6-spd-footer{ display: none; } } /* Very tight pill — drop the count/days tag so the header title fits. */ @container v6spdpill (max-width: 90px) {.hero .v6-mockup-panel .v6-spd-days, .hero .v6-mockup-panel .v6-spd-count, .surface-beat--navigate .v6-mockup-panel .v6-spd-days, .surface-beat--navigate .v6-mockup-panel .v6-spd-count{ display: none; } } /* Cursor + ripple for the SPD map pill live in a .v6-fx wrapper — see the .v6-fx utility block. JS writes --fx-x/--fx-y on the wrapper and toggles `.is-clicking` to fire. */ /* Three states for the SPD map pill, all transition-based (no keyframe animations — those were snapping back to neutral mid-exit and causing the jumpy click). The cursor adds these classes in lockstep: .spd-hover-map — cursor land. Smooth transition to lifted/accented. .spd-click-map — cursor press. Stacks on hover: lifts further + scales down + brighter glow. STAYS ON through the SPD exit so the map looks "still pressed" as the panel fades — no abrupt return to neutral. */.hero .v6-mockup-panel .v6-spd-map, .surface-beat--navigate .v6-mockup-panel .v6-spd-map{ transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease, border-color 260ms ease; }.hero .v6-mockup-panel.spd-hover-map .v6-spd-map, .surface-beat--navigate .v6-mockup-panel.spd-hover-map .v6-spd-map{ transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--blurple) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--blurple) 38%, transparent) inset; border-color: color-mix(in srgb, var(--blurple) 55%, transparent); }.hero .v6-mockup-panel.spd-click-map .v6-spd-map, .surface-beat--navigate .v6-mockup-panel.spd-click-map .v6-spd-map{ transform: translateY(-3px) scale(0.985); box-shadow: 0 16px 42px color-mix(in srgb, var(--blurple) 36%, transparent), 0 0 0 1px color-mix(in srgb, var(--blurple) 62%, transparent) inset; border-color: color-mix(in srgb, var(--blurple) 70%, transparent); transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 160ms ease, border-color 160ms ease; } /* No independent chart pulse — when the pill presses, the chart (a * child of the pill) moves with it. A separate scale-up on the chart * was fighting the pill's press squeeze and reading as a desync. */ @keyframes v6SpdChartPulse { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.06); filter: brightness(1.15); } 100% { transform: scale(1); filter: brightness(1); } } /* SPD shouldn't show in other phases — hide picker/ring during spd too */.hero .v6-mockup-panel[data-v6-phase="spd"] .v6-csn-picker, .hero .v6-mockup-panel[data-v6-phase="spd"] .v6-ring-center, .hero .v6-mockup-panel[data-v6-phase="spd"] .v6-intro, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .v6-csn-picker, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .v6-ring-center, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .v6-intro{ opacity: 0; pointer-events: none; } /* The ring during SPD: same calm-zoom hidden state as other transitions (scale 0.92, blur 4) so its enter uses real motion + defocus instead of an opacity-only flash. */.hero .v6-mockup-panel[data-v6-phase="spd"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .navigator-ring{ opacity: 0; transform: var(--v6-tilt) scale(0.92); filter: blur(4px); pointer-events: none; } /* When the ring phase activates (after SPD exits), delay the ring's reveal by ~350ms so SPD has time to clear out before the ring fades in — allowing a brief crossfade overlap. The between-stages cycle uses .v6-ring-slide-in (keyframe animation) which overrides transition, so the "perfect" ring → stage rhythm is untouched. */.hero .v6-mockup-panel[data-v6-phase="ring"] .navigator-ring:not(.v6-ring-slide-in), .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .navigator-ring:not(.v6-ring-slide-in){ transition: opacity 600ms var(--v6-ease) 350ms, transform 700ms var(--v6-spring) 350ms, filter 460ms ease 350ms, --completion-percent 700ms cubic-bezier(0.22, 1, 0.36, 1); } /* Mobile — pills stack vertically (single column, map on top). */ @media (max-width: 720px) {.hero .v6-mockup-panel .v6-spd, .surface-beat--navigate .v6-mockup-panel .v6-spd{ display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 56px 16px 32px; }.hero .v6-mockup-panel .v6-spd-pill, .surface-beat--navigate .v6-mockup-panel .v6-spd-pill{ flex: 0 0 auto; } } /* ════════════════════════════════════════════════════════════════════ STAGE HOME — pixel-faithful to StageLanding.module.css. Source-of-truth tokens transcribed from react/src/shared/theme/variables.css and react/src/surfaces/stages/StageLanding/StageLanding.module.css. Sized down proportionally to fit the hero mockup panel (~440px wide vs the real 880px max-width card), preserving every visual ratio. ════════════════════════════════════════════════════════════════════ */.hero .v6-mockup-panel .v6-stage-panel, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel{ display: flex; flex-direction: column; /* mirrors real .header padding 28px 40px 0 → halved for our panel */ padding: 0; } /* ─── ROLE PILL (centricity indicator, top-right of card) ─── */.hero .v6-mockup-panel .v6-stage-role-pill, .surface-beat--navigate .v6-mockup-panel .v6-stage-role-pill{ position: absolute; top: 10px; right: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--brand-font); font-size: 9px; font-weight: 600; letter-spacing: 0.02em; color: color-mix(in srgb, var(--v6-ink) 78%, transparent); z-index: 12; }.hero .v6-mockup-panel .v6-stage-role-pill::before, .surface-beat--navigate .v6-mockup-panel .v6-stage-role-pill::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blurple); box-shadow: 0 0 6px color-mix(in srgb, var(--blurple) 60%, transparent); } /* ─── HEADER (real: padding 28px 40px 0; badge 9px / 0.16em; title 24px bold -0.025em; desc 12.5px medium 50% opacity) ─── */.hero .v6-mockup-panel .v6-stage-header, .surface-beat--navigate .v6-mockup-panel .v6-stage-header{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 14px 0; flex-shrink: 0; }.hero .v6-mockup-panel .v6-stage-badge, .surface-beat--navigate .v6-mockup-panel .v6-stage-badge{ /* Clickable affordance — beat 7d's cursor lands here to navigate back * to the journey overview (ring). A leading "‹" hints at the back * action; cursor:pointer + subtle hover lift sells it as a button. */ display: inline-flex; align-items: center; gap: 5px; padding: 2px 12px 2px 8px; border-radius: 999px; font-family: var(--brand-font); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 4px; background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 12%, transparent), color-mix(in srgb, var(--purple) 8%, transparent)); color: var(--blurple); border: 1px solid color-mix(in srgb, var(--blurple) 14%, transparent); cursor: pointer; transition: transform 220ms var(--v6-spring), box-shadow 220ms var(--v6-ease); } /* Leading icon removed — the chevron pseudo-element was rendering badly on the small-font tracked pill. Click affordance is carried by the cursor:pointer + hover lift alone. */.hero .v6-mockup-panel .v6-stage-badge:hover, .surface-beat--navigate .v6-mockup-panel .v6-stage-badge:hover{ transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--blurple) 22%, transparent); }.hero .v6-mockup-panel .v6-stage-title, .surface-beat--navigate .v6-mockup-panel .v6-stage-title{ margin: 0; font-family: var(--brand-font); font-size: clamp(16px, 2.4cqi, 20px); font-weight: 700; letter-spacing: -0.025em; color: var(--v6-ink); line-height: 1.15; }.hero .v6-mockup-panel .v6-stage-desc, .surface-beat--navigate .v6-mockup-panel .v6-stage-desc{ margin: 2px 0 0; font-family: var(--brand-font); font-size: clamp(10.5px, 1.3cqi, 11.5px); font-weight: 500; opacity: 0.5; color: var(--v6-ink); letter-spacing: 0.01em; line-height: 1.35; max-width: 320px; } /* ─── META PANEL — flex with hairline left-border separators ─── */.hero .v6-mockup-panel .v6-stage-meta, .surface-beat--navigate .v6-mockup-panel .v6-stage-meta{ display: flex; align-items: stretch; justify-content: space-evenly; margin: 0 14px; border-radius: 10px; background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); overflow: hidden; flex-shrink: 0; }.hero .v6-mockup-panel .v6-meta-cell, .surface-beat--navigate .v6-mockup-panel .v6-meta-cell{ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 6px; text-align: center; box-sizing: border-box; }.hero .v6-mockup-panel .v6-meta-cell + .v6-meta-cell, .surface-beat--navigate .v6-mockup-panel .v6-meta-cell + .v6-meta-cell{ border-left: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); }.hero .v6-mockup-panel .v6-meta-label, .surface-beat--navigate .v6-mockup-panel .v6-meta-label{ font-family: var(--brand-font); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in srgb, var(--v6-ink) 35%, transparent); line-height: 1; white-space: nowrap; }.hero .v6-mockup-panel .v6-meta-value, .surface-beat--navigate .v6-mockup-panel .v6-meta-value{ font-family: var(--brand-font); font-size: 11px; font-weight: 550; color: color-mix(in srgb, var(--v6-ink) 88%, transparent); letter-spacing: -0.005em; line-height: 1; white-space: nowrap; }.hero .v6-mockup-panel .v6-meta-empty, .surface-beat--navigate .v6-mockup-panel .v6-meta-empty{ color: color-mix(in srgb, var(--v6-ink) 30%, transparent); }.hero .v6-mockup-panel .v6-status-active, .hero .v6-mockup-panel .v6-status-planned, .hero .v6-mockup-panel .v6-status-done, .surface-beat--navigate .v6-mockup-panel .v6-status-active, .surface-beat--navigate .v6-mockup-panel .v6-status-planned, .surface-beat--navigate .v6-mockup-panel .v6-status-done{ padding: 3px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; }.hero .v6-mockup-panel .v6-status-active, .surface-beat--navigate .v6-mockup-panel .v6-status-active{ background: color-mix(in srgb, var(--blurple) 16%, transparent); color: var(--blurple); }.hero .v6-mockup-panel .v6-status-planned, .surface-beat--navigate .v6-mockup-panel .v6-status-planned{ background: color-mix(in srgb, var(--v6-ink) 7%, transparent); color: color-mix(in srgb, var(--v6-ink) 55%, transparent); }.hero .v6-mockup-panel .v6-status-done, .surface-beat--navigate .v6-mockup-panel .v6-status-done{ background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }.hero .v6-mockup-panel .v6-completion-pill, .surface-beat--navigate .v6-mockup-panel .v6-completion-pill{ display: inline-flex; align-items: center; gap: 5px; font-family: var(--brand-font); font-weight: 600; font-size: 11px; color: color-mix(in srgb, var(--v6-ink) 60%, transparent); font-variant-numeric: tabular-nums; }.hero .v6-mockup-panel .v6-completion-pill::before, .surface-beat--navigate .v6-mockup-panel .v6-completion-pill::before{ content: ""; width: 28px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--green) 0%, var(--green) var(--p, 0%), color-mix(in srgb, var(--v6-ink) 9%, transparent) var(--p, 0%)); }.hero .v6-mockup-panel .v6-completion-pill[data-p="0"]::before, .surface-beat--navigate .v6-mockup-panel .v6-completion-pill[data-p="0"]::before{ --p: 0%; }.hero .v6-mockup-panel .v6-completion-pill[data-p="15"]::before, .surface-beat--navigate .v6-mockup-panel .v6-completion-pill[data-p="15"]::before{ --p: 15%; }.hero .v6-mockup-panel .v6-completion-pill[data-p="40"]::before, .surface-beat--navigate .v6-mockup-panel .v6-completion-pill[data-p="40"]::before{ --p: 40%; }.hero .v6-mockup-panel .v6-completion-pill[data-p="62"]::before, .surface-beat--navigate .v6-mockup-panel .v6-completion-pill[data-p="62"]::before{ --p: 62%; }.hero .v6-mockup-panel .v6-completion-pill[data-p="100"]::before, .surface-beat--navigate .v6-mockup-panel .v6-completion-pill[data-p="100"]::before{ --p: 100%; }.hero .v6-mockup-panel .v6-owner-avs, .surface-beat--navigate .v6-mockup-panel .v6-owner-avs{ display: inline-flex; align-items: center; }.hero .v6-mockup-panel .v6-av, .surface-beat--navigate .v6-mockup-panel .v6-av{ width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; font-size: 8.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; border: 1.5px solid color-mix(in srgb, var(--main-bg-color) 92%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, var(--v6-ink) 10%, transparent); }.hero .v6-mockup-panel .v6-av + .v6-av, .surface-beat--navigate .v6-mockup-panel .v6-av + .v6-av{ margin-left: -7px; }.hero .v6-mockup-panel .v6-av-2, .surface-beat--navigate .v6-mockup-panel .v6-av-2{ background: linear-gradient(135deg, #56A8F5, var(--blurple)); }.hero .v6-mockup-panel .v6-av-3, .surface-beat--navigate .v6-mockup-panel .v6-av-3{ background: linear-gradient(135deg, var(--purple), #D490FF); } /* ─── BODY: two sections, both glass with absolute section label ─── */.hero .v6-mockup-panel .v6-stage-body, .surface-beat--navigate .v6-mockup-panel .v6-stage-body{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 8px 14px 12px; gap: 8px; }.hero .v6-mockup-panel .v6-stage-section, .surface-beat--navigate .v6-mockup-panel .v6-stage-section{ position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: center; flex: 1 1 0; min-height: 0; padding: 18px 14px 8px; border-radius: 12px; background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); transition: background 220ms var(--v6-ease), border-color 220ms var(--v6-ease); overflow: hidden; }.hero .v6-mockup-panel .v6-section-collab, .surface-beat--navigate .v6-mockup-panel .v6-section-collab{ border-left: 2px solid color-mix(in srgb, var(--blurple) 45%, transparent); }.hero .v6-mockup-panel .v6-section-agents, .surface-beat--navigate .v6-mockup-panel .v6-section-agents{ border-left: 2px solid color-mix(in srgb, var(--purple) 45%, transparent); } /* Section label sits absolute in top-left, low opacity (real: 25% / 45% on accented) */.hero .v6-mockup-panel .v6-section-label, .surface-beat--navigate .v6-mockup-panel .v6-section-label{ position: absolute; top: 7px; left: 12px; margin: 0; font-family: var(--brand-font); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; pointer-events: none; }.hero .v6-mockup-panel .v6-section-collab .v6-section-label, .surface-beat--navigate .v6-mockup-panel .v6-section-collab .v6-section-label{ color: var(--blurple); opacity: 0.55; }.hero .v6-mockup-panel .v6-section-agents .v6-section-label, .surface-beat--navigate .v6-mockup-panel .v6-section-agents .v6-section-label{ color: var(--purple); opacity: 0.55; } /* Agents narration sits absolute top-right next to label */.hero .v6-mockup-panel .v6-section-agents .v6-agents-status, .surface-beat--navigate .v6-mockup-panel .v6-section-agents .v6-agents-status{ position: absolute; top: 7px; right: 12px; left: 90px; font-family: var(--brand-font); font-size: 9.5px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); letter-spacing: -0.005em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; transition: opacity 220ms ease; }.hero .v6-mockup-panel .v6-agents-status.is-changing, .surface-beat--navigate .v6-mockup-panel .v6-agents-status.is-changing{ opacity: 0; } /* ─── APP GRID + TILES — real AppIcon scaled to fit the panel ─── */.hero .v6-mockup-panel .v6-app-grid, .surface-beat--navigate .v6-mockup-panel .v6-app-grid{ display: flex; align-items: flex-start; justify-content: space-evenly; gap: 18px; width: 100%; flex-wrap: nowrap; }.hero .v6-mockup-panel .v6-app-tile, .surface-beat--navigate .v6-mockup-panel .v6-app-tile{ --tint: var(--blurple); position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; background: none; border: none; padding: 0; cursor: pointer; text-decoration: none; color: inherit; transition: transform 280ms var(--v6-spring); }.hero .v6-mockup-panel .v6-app-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-icon{ width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--tint) 10%, color-mix(in srgb, var(--inv-bg-color) 3%, transparent)); border: 0.5px solid color-mix(in srgb, var(--tint) 14%, transparent); box-shadow: 0 2px 12px color-mix(in srgb, var(--inv-bg-color) 5%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent); backdrop-filter: blur(40px) saturate(1.5); -webkit-backdrop-filter: blur(40px) saturate(1.5); color: var(--tint); transition: transform 320ms var(--v6-spring), box-shadow 320ms var(--v6-ease); }.hero .v6-mockup-panel .v6-app-tile-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-icon svg{ width: 20px; height: 20px; color: var(--tint); }.hero .v6-mockup-panel .v6-app-tile-label, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-label{ font-family: var(--brand-font); font-size: 10px; font-weight: 600; color: color-mix(in srgb, var(--v6-ink) 88%, transparent); letter-spacing: -0.01em; line-height: 1.2; }.hero .v6-mockup-panel .v6-app-tile-role, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-role{ display: none; } /* Per-section tints (collab=blurple, agents=purple) */.hero .v6-mockup-panel .v6-section-collab .v6-app-tile, .surface-beat--navigate .v6-mockup-panel .v6-section-collab .v6-app-tile{ --tint: var(--blurple); }.hero .v6-mockup-panel .v6-section-agents .v6-app-tile, .surface-beat--navigate .v6-mockup-panel .v6-section-agents .v6-app-tile{ --tint: var(--purple); } /* Top Pick — featured badge in top-right + boosted glow */.hero .v6-mockup-panel .v6-app-tile-top .v6-app-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-top .v6-app-tile-icon{ background: color-mix(in srgb, var(--tint) 16%, color-mix(in srgb, var(--inv-bg-color) 4%, transparent)); border-color: color-mix(in srgb, var(--tint) 28%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--tint) 22%, transparent), 0 8px 32px color-mix(in srgb, var(--tint) 16%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent); }.hero .v6-mockup-panel .v6-app-tile-badge, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-badge{ position: absolute; top: -4px; right: -10px; padding: 1px 6px; border-radius: 999px; font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tint); background: color-mix(in srgb, var(--tint) 18%, color-mix(in srgb, var(--inv-bg-color) 4%, transparent)); border: 0.5px solid color-mix(in srgb, var(--tint) 28%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--tint) 18%, transparent); white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2; } /* Explore tile — neutral grey */.hero .v6-mockup-panel .v6-app-tile-explore, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-explore{ --tint: color-mix(in srgb, var(--v6-ink) 40%, transparent); }.hero .v6-mockup-panel .v6-app-tile-explore .v6-app-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-explore .v6-app-tile-icon{ background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border-color: color-mix(in srgb, var(--inv-bg-color) 10%, transparent); } /* ─── EXPLORE OVERLAY — full-panel iOS-Spotlight-style takeover ─── * Sits as a direct child of the .v6-stage-panel (NOT inside any section) * so it can overlay the entire stage panel content. Opaque-glass * background (readable, not super-transparent) lets the stage register * as "still there" underneath without competing for legibility. * Header + 2x2 grid of iOS-style app tiles. */.hero .v6-mockup-panel .v6-explore-menu, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px 18px 18px; background: color-mix(in srgb, var(--main-bg-color) 88%, transparent); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); border-radius: inherit; opacity: 0; transform: scale(0.96); pointer-events: none; z-index: 30; transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 340ms cubic-bezier(0.16, 1, 0.3, 1); }.hero .v6-mockup-panel .v6-stage-panel.explore-menu-open .v6-explore-menu, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel.explore-menu-open .v6-explore-menu{ opacity: 1; transform: scale(1); pointer-events: auto; }.hero .v6-mockup-panel .v6-explore-menu-inner, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu-inner{ display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }.hero .v6-mockup-panel .v6-explore-menu-title, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu-title{ margin: 0; font-family: var(--brand-font); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: color-mix(in srgb, var(--v6-ink) 95%, transparent); }.hero .v6-mockup-panel .v6-explore-menu-sub, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu-sub{ margin: -10px 0 0; font-family: var(--brand-font); font-size: 9.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--v6-ink) 45%, transparent); }.hero .v6-mockup-panel .v6-explore-menu-grid, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu-grid{ display: grid; grid-template-columns: repeat(2, auto); gap: 18px 28px; margin-top: 4px; } /* Tiles inside the overlay tint purple like the agents section, and * scale up slightly on hover. */.hero .v6-mockup-panel .v6-explore-menu .v6-app-tile, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu .v6-app-tile{ --tint: var(--purple); }.hero .v6-mockup-panel .v6-explore-menu .v6-app-tile:hover, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu .v6-app-tile:hover{ transform: translateY(-1px); }.hero .v6-mockup-panel .v6-explore-menu .v6-app-tile:hover .v6-app-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu .v6-app-tile:hover .v6-app-tile-icon{ box-shadow: 0 0 22px color-mix(in srgb, var(--purple) 30%, transparent), 0 10px 28px color-mix(in srgb, var(--purple) 18%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent); } /* Highlight the Proposed Scope tile as the cursor lands on it, * so it reads as "selected" before the menu dismisses. */.hero .v6-mockup-panel .v6-explore-menu .v6-app-tile.is-hot .v6-app-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu .v6-app-tile.is-hot .v6-app-tile-icon{ background: color-mix(in srgb, var(--purple) 26%, color-mix(in srgb, var(--inv-bg-color) 5%, transparent)); border-color: color-mix(in srgb, var(--purple) 50%, transparent); box-shadow: 0 0 28px color-mix(in srgb, var(--purple) 38%, transparent), 0 12px 34px color-mix(in srgb, var(--purple) 22%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent); transform: scale(1.06); } /* When workspace is open, overlay must be gone. */.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-explore-menu, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-explore-menu{ opacity: 0; pointer-events: none; } /* ─── STAGE SUB-STATES — home → workspace open ─── Default state ("home") = the stage landing: header + meta + tiles + agent panel. When the cursor clicks a workspace tile, we flip the panel to data-substate="workspace": the home layers fade and shrink, the collab-inner content (table / cards / gantt / sign card / KPIs) zooms in to fill the panel, and the per-stage micro-animation plays inside. */.hero .v6-mockup-panel .v6-stage-panel > *, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel > *{ transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1), filter 280ms ease; }.hero .v6-mockup-panel .v6-stage-panel .v6-section-collab > *:not(.v6-collab-inner), .surface-beat--navigate .v6-mockup-panel .v6-stage-panel .v6-section-collab > *:not(.v6-collab-inner){ transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 340ms cubic-bezier(0.22, 1, 0.36, 1); } /* Collab-inner — hidden absolutely by default, full panel when workspace open. * IMPORTANT: inset is calculated from the .v6-stage-panel root (not the * .v6-section-collab parent) so the panel doesn't have to reposition the * section to make collab-inner full-bleed. The section in workspace mode * gets `position: static` (see below) which makes inset:14px fall through * to the absolutely-positioned stage-panel. Keeping the section's flex * layout intact means the workspace tile + label fade in place without * a jarring "jump to center" when workspace state activates. */.hero .v6-mockup-panel .v6-collab-inner, .surface-beat--navigate .v6-mockup-panel .v6-collab-inner{ display: flex; flex-direction: column; justify-content: center; gap: 8px; position: absolute; inset: 14px; opacity: 0; transform: scale(0.94); filter: blur(6px); pointer-events: none; z-index: 10; transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1) 80ms, transform 500ms cubic-bezier(0.16, 1, 0.3, 1) 80ms, filter 360ms ease 80ms; } /* Workspace-open state — collab-inner takes over, home layers fade away */.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-collab-inner, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-collab-inner{ opacity: 1; transform: scale(1); filter: blur(0); pointer-events: auto; } /* Fade the meta + agents-section as units. */.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-stage-meta, .hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-agents, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-stage-meta, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-agents{ opacity: 0; transform: scale(0.96) translateY(-6px); filter: blur(2px); pointer-events: none; } /* For the header, fade individual children — NOT the wrapper — so the * persona pill (a direct child) can stay opacity:1. If we faded the * wrapper, compound opacity (parent 0 × child 1 = 0) would invisibly * hide the pill, leaving the persona swap with no clickable trigger. * Keep the wrapper at opacity 1; fade everything inside it except * the pill, which we float as persistent chrome. */.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-stage-header > *:not(.v6-persona-pill), .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-stage-header > *:not(.v6-persona-pill){ opacity: 0; transform: scale(0.96) translateY(-6px); filter: blur(2px); pointer-events: none; }.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-stage-header .v6-persona-pill, .hero .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-stage-panel .v6-stage-header .v6-persona-pill, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-stage-header .v6-persona-pill, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-stage-panel .v6-stage-header .v6-persona-pill{ opacity: 1; transform: none; filter: none; pointer-events: auto; position: absolute; top: 10px; left: 14px; margin-top: 0; z-index: 22; /* Smooth transition for the swap visibility */ transition: opacity 320ms var(--v6-ease), background 300ms ease; } /* In workspace state, the agent panel covers the right 62% of the * mockup. Hide the INACTIVE persona segment so only the active one * shows on the visible left edge — otherwise the active segment ends * up behind the agent panel and the swap reads as unclear. */.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-stage-header .v6-persona-pill > span, .hero .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-stage-panel .v6-stage-header .v6-persona-pill > span, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-stage-header .v6-persona-pill > span, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-stage-panel .v6-stage-header .v6-persona-pill > span{ transition: max-width 320ms var(--v6-ease), padding 320ms var(--v6-ease), opacity 220ms ease; overflow: hidden; }.hero .v6-mockup-panel[data-persona="host"] .v6-stage-panel[data-substate="workspace"] .v6-persona-pill [data-seg="guest"], .hero .v6-mockup-panel:not([data-persona="guest"]) .v6-stage-panel[data-substate="workspace"] .v6-persona-pill [data-seg="guest"], .hero .v6-mockup-panel[data-persona="guest"] [data-stage-substate="workspace-guest"] .v6-persona-pill [data-seg="host"], .hero .v6-mockup-panel[data-persona="guest"] .v6-stage-panel[data-substate="workspace"] .v6-persona-pill [data-seg="host"], .surface-beat--navigate .v6-mockup-panel[data-persona="host"] .v6-stage-panel[data-substate="workspace"] .v6-persona-pill [data-seg="guest"], .surface-beat--navigate .v6-mockup-panel:not([data-persona="guest"]) .v6-stage-panel[data-substate="workspace"] .v6-persona-pill [data-seg="guest"], .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] [data-stage-substate="workspace-guest"] .v6-persona-pill [data-seg="host"], .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-stage-panel[data-substate="workspace"] .v6-persona-pill [data-seg="host"]{ max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; }.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-collab .v6-section-label, .hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-collab .v6-app-grid, .hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-collab .v6-workspace-state, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-collab .v6-section-label, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-collab .v6-app-grid, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-collab .v6-workspace-state{ opacity: 0; transform: scale(0.96); pointer-events: none; /* Disappear instantly when workspace opens — the section drops * position:relative for the inset-from-panel collab-inner trick, * which means the absolutely-positioned label would otherwise * visually "jump" to the panel's top-left during a 280ms fade. * Going opacity 1 → 0 in one frame hides that jump entirely. */ transition: opacity 0ms, transform 0ms; }.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-collab, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-collab{ border: none; background: transparent; padding: 0; overflow: visible; /* Drop position: relative so .v6-collab-inner's inset:14px is now * calculated from the .v6-stage-panel (which is position: absolute). * The section itself doesn't reposition — its flex slot stays in * place — but collab-inner overlays the full panel. The label/grid/ * state chip inside the section fade out in place (no tile-jumping * to center mid-transition). */ position: static; } /* Cursor + ripple for per-stage clicks live in a .v6-fx wrapper — see the .v6-fx utility block. JS writes --fx-x/--fx-y on the wrapper and toggles `.is-clicking` to fire. */ /* ═══════════════════════════════════════════════════════════════ AGENT PANEL — shared sibling of .v6-stage-panels. Slides in from the right when the cursor clicks the Top Pick agent tile (substate="agent"). Houses the agent header (orb / name / sub / live state), a body with sequentially-revealed output lines, and a foot CTA that becomes the next cursor target ("Send to Workspace"). ═══════════════════════════════════════════════════════════════ */ /* ─── STAGE-COMPLETE CTA ────────────────────────────────────────── * Fades in over the (dimmed) workspace at the end of each stage cycle. * Single instance lives inside .v6-stage-panels; JS populates the * title + button label per stage. Visibility gated by * data-stage-substate="completed" on the mockup panel. */.hero .v6-mockup-panel .v6-stage-complete, .surface-beat--navigate .v6-mockup-panel .v6-stage-complete{ position: absolute; inset: 0; z-index: 28; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; opacity: 0; transform: scale(0.94) translateY(8px); pointer-events: none; transition: opacity 460ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1); }.hero .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-complete, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-complete{ opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; } /* Fade the workspace content behind the CTA so the CTA owns focus * (workspace stays slightly visible — sells "you just did this"). */.hero .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-panel .v6-collab-inner, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-panel .v6-collab-inner{ opacity: 0.18; filter: blur(3px); transform: scale(0.97); }.hero .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-panel .v6-stage-meta, .hero .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-panel .v6-section-agents, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-panel .v6-stage-meta, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-panel .v6-section-agents{ opacity: 0; filter: blur(2px); pointer-events: none; }.hero .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-panel .v6-stage-header > *:not(.v6-persona-pill), .surface-beat--navigate .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-panel .v6-stage-header > *:not(.v6-persona-pill){ opacity: 0.25; }.hero .v6-mockup-panel .v6-stage-complete-check, .surface-beat--navigate .v6-mockup-panel .v6-stage-complete-check{ width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--success) 22%, color-mix(in srgb, var(--inv-bg-color) 4%, transparent)); color: var(--success); display: flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--success) 38%, transparent); box-shadow: 0 0 32px color-mix(in srgb, var(--success) 34%, transparent), 0 10px 28px color-mix(in srgb, var(--inv-bg-color) 14%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent); }.hero .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-complete-check, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-complete-check{ animation: v6CompleteCheckIn 580ms cubic-bezier(0.22, 1, 0.36, 1); }.hero .v6-mockup-panel .v6-stage-complete-check svg, .surface-beat--navigate .v6-mockup-panel .v6-stage-complete-check svg{ width: 22px; height: 22px; max-width: none; max-height: none; }.hero .v6-mockup-panel .v6-stage-complete-title, .surface-beat--navigate .v6-mockup-panel .v6-stage-complete-title{ font-family: var(--brand-font); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--v6-ink); margin-top: 4px; }.hero .v6-mockup-panel .v6-stage-complete-sub, .surface-beat--navigate .v6-mockup-panel .v6-stage-complete-sub{ font-family: var(--brand-font); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--v6-ink) 50%, transparent); }.hero .v6-mockup-panel .v6-stage-complete-cta, .surface-beat--navigate .v6-mockup-panel .v6-stage-complete-cta{ margin-top: 10px; padding: 9px 14px 9px 18px; border: none; border-radius: 999px; background: var(--v6-grad-cn); color: #fff; font-family: var(--brand-font); font-size: 12px; font-weight: 700; letter-spacing: -0.005em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 12px 30px color-mix(in srgb, var(--blurple) 32%, transparent), 0 4px 12px color-mix(in srgb, var(--inv-bg-color) 14%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease; }.hero .v6-mockup-panel .v6-stage-complete-cta:hover, .surface-beat--navigate .v6-mockup-panel .v6-stage-complete-cta:hover{ transform: translateY(-1px); box-shadow: 0 16px 38px color-mix(in srgb, var(--blurple) 38%, transparent), 0 4px 14px color-mix(in srgb, var(--inv-bg-color) 16%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent); }.hero .v6-mockup-panel .v6-stage-complete-cta svg, .surface-beat--navigate .v6-mockup-panel .v6-stage-complete-cta svg{ max-width: none; max-height: none; } @keyframes v6CompleteCheckIn { 0% { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }.hero .v6-mockup-panel .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel{ position: absolute; top: 12px; right: 12px; bottom: 12px; width: 62%; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--blurple) 12%, var(--main-bg-color)) 0%, color-mix(in srgb, var(--main-bg-color) 88%, transparent) 60%); border: 1px solid color-mix(in srgb, var(--blurple) 30%, transparent); border-radius: 16px; backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); box-shadow: 0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset, 0 24px 64px color-mix(in srgb, var(--blurple) 20%, transparent), 0 8px 24px color-mix(in srgb, var(--inv-bg-color) 12%, transparent); opacity: 0; transform: translateX(110%) scale(0.96); pointer-events: none; z-index: 25; /* Position properties transition for the full ↔ docked morph used * by stage 4 (Deploy). Without these, switching data-stage-substate * from "agent" to "agent-docked" would snap the panel instantly. */ transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1), top 420ms cubic-bezier(0.22, 1, 0.36, 1), right 420ms cubic-bezier(0.22, 1, 0.36, 1), left 420ms cubic-bezier(0.22, 1, 0.36, 1), bottom 420ms cubic-bezier(0.22, 1, 0.36, 1), width 420ms cubic-bezier(0.22, 1, 0.36, 1), padding 420ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 420ms cubic-bezier(0.22, 1, 0.36, 1), background 320ms ease; } /* Visible during agent, workspace-guest, and agent-docked sub-states */.hero .v6-mockup-panel .v6-stage-panel[data-substate="agent"] ~ .v6-agent-panel, .hero .v6-mockup-panel .v6-stage-panels:has(.v6-stage-panel.is-active[data-substate="agent"]) ~ .v6-agent-panel, .hero .v6-mockup-panel[data-stage-substate="agent"] .v6-agent-panel, .hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel, .hero .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="agent"] ~ .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel .v6-stage-panels:has(.v6-stage-panel.is-active[data-substate="agent"]) ~ .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent"] .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-agent-panel{ opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; } /* Chat-layout panels also need translateX(0) when visible — they share the workspace-guest visibility rule above, but the hidden state lives at translateX(-110%) (left side) not 110% (right side) and the specificity match requires reasserting transform here. */.hero .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-agent-panel[data-layout="chat"], .surface-beat--navigate .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-agent-panel[data-layout="chat"]{ transform: translateX(0) scale(1); } /* Hidden state for chat panels — off-screen LEFT (matches the left:12px docking position). Applies whenever the panel is NOT in a visible substate. */.hero .v6-mockup-panel:not([data-stage-substate="workspace-guest"]):not([data-stage-substate="agent"]):not([data-stage-substate="agent-docked"]) .v6-agent-panel[data-layout="chat"], .surface-beat--navigate .v6-mockup-panel:not([data-stage-substate="workspace-guest"]):not([data-stage-substate="agent"]):not([data-stage-substate="agent-docked"]) .v6-agent-panel[data-layout="chat"]{ transform: translateX(-110%) scale(0.96); } /* ─── DOCKED AGENT STATE ─── * For stages where the agent's job is to GUIDE the workspace (e.g. Deploy's * AI Navigator walking through each gantt track), the agent doesn't slide * fully out when workspace opens — it shrinks to a small docked bar at the * top, leaving the workspace fully visible below while the agent narrates * each step. Cursor + agent text update as each track is highlighted. */.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel{ /* Top strip — sits above the workspace, narrow */ top: 8px; right: 12px; left: 12px; bottom: auto; width: auto; height: auto; padding: 8px 12px; flex-direction: row; align-items: center; gap: 10px; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 14%, var(--main-bg-color)), color-mix(in srgb, var(--purple) 6%, var(--main-bg-color))); border: 1px solid color-mix(in srgb, var(--blurple) 35%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, #fff 12%, transparent) inset, 0 6px 18px color-mix(in srgb, var(--blurple) 18%, transparent); } /* Hide most agent body content in docked mode — show only the orb + name * + a single status line that updates per step. */.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-head, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-head{ flex: 1; padding-bottom: 0; border-bottom: none; gap: 8px; }.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-orb, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-orb{ width: 18px; height: 18px; }.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-orb svg, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-orb svg{ width: 9px; height: 9px; }.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-name, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-name{ font-size: 11px; }.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-sub, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-sub{ font-size: 9.5px; color: color-mix(in srgb, var(--v6-ink) 65%, transparent); }.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-state, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-state{ font-size: 7.5px; padding: 2px 6px; }.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-attribution, .hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-body, .hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-foot, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-attribution, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-body, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-foot{ display: none; } /* The workspace lives BELOW the docked bar — needs top padding so the * collab-inner doesn't disappear under the agent strip. */.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-collab-inner, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-collab-inner{ inset: 50px 14px 14px 14px; } /* Workspace dims when agent is over it */.hero .v6-mockup-panel[data-stage-substate="agent"] .v6-stage-section, .hero .v6-mockup-panel[data-stage-substate="agent"] .v6-stage-meta, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent"] .v6-stage-section, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent"] .v6-stage-meta{ opacity: 0.5; filter: blur(1px); transition: opacity 320ms ease, filter 320ms ease; } /* Close × — sits at the right edge of the panel header. * The old "Agent Mode" / "Powered by First-Party AI™" chrome strip * was removed because it duplicated the agent name. Now the agent's * OWN name (Think & Sync, SOW Generator, etc.) IS the title, and * attribution lives as a small chip below the header. */.hero .v6-mockup-panel .v6-agent-panel-close, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-close{ font-size: 16px; line-height: 1; color: color-mix(in srgb, var(--v6-ink) 45%, transparent); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; flex-shrink: 0; align-self: center; } /* Subtle attribution chip — placed below the agent header. Quiet so * it doesn't compete with the agent name, but present so users know * what's powering the agent. */.hero .v6-mockup-panel .v6-agent-panel-attribution, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-attribution{ font-family: var(--brand-font); font-size: 8.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in srgb, var(--v6-ink) 40%, transparent); padding: 4px 0 0; align-self: flex-start; }.hero .v6-mockup-panel .v6-agent-panel-preview, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-preview{ font-family: var(--brand-font); font-size: 9px; font-weight: 600; color: var(--purple); text-transform: uppercase; letter-spacing: 0.08em; margin-right: auto; opacity: 0; transition: opacity 320ms ease; }.hero .v6-mockup-panel[data-persona="guest"] .v6-agent-panel-preview, .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-agent-panel-preview{ opacity: 1; } /* Header inside the agent panel */.hero .v6-mockup-panel .v6-agent-panel-head, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-head{ display: flex; align-items: flex-start; gap: 9px; padding-bottom: 9px; border-bottom: 1px solid color-mix(in srgb, var(--blurple) 16%, transparent); }.hero .v6-mockup-panel .v6-agent-panel-orb, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-orb{ width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blurple) 18%, transparent), 0 0 14px color-mix(in srgb, var(--blurple) 60%, transparent); animation: v6AgentOrbPulse 1.8s ease-in-out infinite; }.hero .v6-mockup-panel .v6-agent-panel-orb svg, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-orb svg{ width: 12px; height: 12px; }.hero .v6-mockup-panel .v6-agent-panel-title, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-title{ display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }.hero .v6-mockup-panel .v6-agent-panel-name, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-name{ font-family: var(--brand-font); /* This IS the panel title now — sized to fit the longest agent name * ("Execution Readiness", "Smart Conversation") without ellipsis at * the ~280px panel width minus orb / state / close. */ font-size: 13px; font-weight: 700; color: var(--v6-ink); letter-spacing: -0.015em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.hero .v6-mockup-panel .v6-agent-panel-sub, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-sub{ font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); letter-spacing: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.hero .v6-mockup-panel .v6-agent-panel-state, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-state{ padding: 2px 7px; border-radius: 999px; font-family: var(--brand-font); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: color-mix(in srgb, var(--blurple) 16%, transparent); color: var(--blurple); flex-shrink: 0; align-self: center; }.hero .v6-mockup-panel .v6-agent-panel-state[data-done="true"], .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-state[data-done="true"]{ background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); } /* Body — sequentially-revealed output lines */.hero .v6-mockup-panel .v6-agent-panel-body, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-body{ flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }.hero .v6-mockup-panel .v6-ap-line, .surface-beat--navigate .v6-mockup-panel .v6-ap-line{ font-family: var(--brand-font); font-size: 10.5px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 82%, transparent); line-height: 1.4; letter-spacing: -0.005em; padding: 5px 9px; background: color-mix(in srgb, var(--main-bg-color) 56%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border-radius: 8px; opacity: 0; transform: translateY(8px); transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1); }.hero .v6-mockup-panel .v6-ap-line.is-shown, .surface-beat--navigate .v6-mockup-panel .v6-ap-line.is-shown{ opacity: 1; transform: translateY(0); }.hero .v6-mockup-panel .v6-ap-line strong, .surface-beat--navigate .v6-mockup-panel .v6-ap-line strong{ color: var(--v6-ink); font-weight: 700; }.hero .v6-mockup-panel .v6-ap-line[data-tone="heading"], .surface-beat--navigate .v6-mockup-panel .v6-ap-line[data-tone="heading"]{ background: none; border: none; padding: 0 2px; font-family: var(--brand-font); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); }.hero .v6-mockup-panel .v6-ap-line[data-tone="cta"], .surface-beat--navigate .v6-mockup-panel .v6-ap-line[data-tone="cta"]{ background: color-mix(in srgb, var(--blurple) 10%, transparent); border-color: color-mix(in srgb, var(--blurple) 28%, transparent); color: var(--v6-ink); font-weight: 600; }.hero .v6-mockup-panel .v6-ap-line[data-tone="check"]::before, .surface-beat--navigate .v6-mockup-panel .v6-ap-line[data-tone="check"]::before{ content: "✓"; margin-right: 6px; color: var(--green); font-weight: 700; } /* Document-shape line — used by Statement of Work for the doc preview header */.hero .v6-mockup-panel .v6-ap-line[data-tone="doc"], .surface-beat--navigate .v6-mockup-panel .v6-ap-line[data-tone="doc"]{ display: flex; flex-direction: column; gap: 3px; background: linear-gradient(180deg, color-mix(in srgb, #fff 88%, transparent), color-mix(in srgb, #fff 96%, transparent)); color: #202F39; border: 1px solid color-mix(in srgb, var(--blurple) 24%, transparent); padding: 10px 12px; box-shadow: 0 1px 0 color-mix(in srgb, #fff 100%, transparent) inset, 0 4px 14px color-mix(in srgb, var(--blurple) 14%, transparent); }.hero .v6-mockup-panel .v6-ap-doc-title, .surface-beat--navigate .v6-mockup-panel .v6-ap-doc-title{ font-family: var(--brand-font); font-size: 12px; font-weight: 700; color: #202F39; letter-spacing: -0.01em; }.hero .v6-mockup-panel .v6-ap-doc-meta, .surface-beat--navigate .v6-mockup-panel .v6-ap-doc-meta{ font-family: var(--brand-font); font-size: 9.5px; font-weight: 500; color: color-mix(in srgb, #202F39 55%, transparent); letter-spacing: 0; } /* ════════════════════════════════════════════════════════════════════ * AGENT BODY LAYOUTS — distinct visual structure per agent so each one * reads like its real React component, not a generic list. Layouts: * form-think — Think & Sync (tabs + sources + aggressiveness) * form-sow — SOW Generator (doc tabs + section toggles) * chat — Tailored Script / Execution Readiness / AI Navigator / * Why Commit / Smart Conversation / Auto Solve * report — Cheat Sheet (Regenerate/Copy chrome + sections) * list — Solution Fit / Assign Owners (state-marked rows) * ════════════════════════════════════════════════════════════════════ */ /* Shared reveal animation — replaces .v6-ap-line is-shown */.hero .v6-mockup-panel .v6-ap-reveal, .surface-beat--navigate .v6-mockup-panel .v6-ap-reveal{ opacity: 0; transform: translateY(6px); transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1); }.hero .v6-mockup-panel .v6-ap-reveal.is-shown, .surface-beat--navigate .v6-mockup-panel .v6-ap-reveal.is-shown{ opacity: 1; transform: translateY(0); } /* ─── form-think — Think & Sync — seed picker + aggressiveness ─── */ /* Think-form wrapper — explicit vertical gap so the file-type tabs, * dropzone (selected files), aggressiveness picker, and Run button each * have breathing room instead of stacking flush. */.hero .v6-mockup-panel .v6-ap-think-form, .surface-beat--navigate .v6-mockup-panel .v6-ap-think-form{ display: flex; flex-direction: column; gap: 10px; }.hero .v6-mockup-panel .v6-ap-tabs, .surface-beat--navigate .v6-mockup-panel .v6-ap-tabs{ display: inline-flex; padding: 2px; border-radius: 8px; background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); align-self: flex-start; }.hero .v6-mockup-panel .v6-ap-tab, .surface-beat--navigate .v6-mockup-panel .v6-ap-tab{ padding: 3px 10px; border-radius: 6px; font-family: var(--brand-font); font-size: 9.5px; font-weight: 600; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); letter-spacing: 0.02em; }.hero .v6-mockup-panel .v6-ap-tab.is-active, .surface-beat--navigate .v6-mockup-panel .v6-ap-tab.is-active{ background: var(--v6-ink); color: var(--v6-paper); }.hero .v6-mockup-panel .v6-ap-source-list, .surface-beat--navigate .v6-mockup-panel .v6-ap-source-list{ display: flex; flex-direction: column; gap: 4px; }.hero .v6-mockup-panel .v6-ap-source-row, .surface-beat--navigate .v6-mockup-panel .v6-ap-source-row{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; background: color-mix(in srgb, var(--main-bg-color) 60%, transparent); border: 1px dashed color-mix(in srgb, var(--blurple) 22%, transparent); font-family: var(--v6-mono); font-size: 9.5px; color: color-mix(in srgb, var(--v6-ink) 78%, transparent); }.hero .v6-mockup-panel .v6-ap-source-icon, .surface-beat--navigate .v6-mockup-panel .v6-ap-source-icon{ font-size: 10px; } /* File-tab dropzone wrapper — matches the React FileInput visual. */.hero .v6-mockup-panel .v6-ap-file-dropzone, .surface-beat--navigate .v6-mockup-panel .v6-ap-file-dropzone{ display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--blurple) 28%, transparent); background: color-mix(in srgb, var(--blurple) 3%, transparent); }.hero .v6-mockup-panel .v6-ap-file-dropzone-hint, .surface-beat--navigate .v6-mockup-panel .v6-ap-file-dropzone-hint{ display: inline-flex; align-items: center; gap: 5px; font-family: var(--brand-font); font-size: 8.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in srgb, var(--blurple) 80%, transparent); transition: color 220ms ease; }.hero .v6-mockup-panel .v6-ap-file-dropzone-hint.is-done, .surface-beat--navigate .v6-mockup-panel .v6-ap-file-dropzone-hint.is-done{ color: var(--green); } /* Spinner — small ring that spins while sources are being read. */.hero .v6-mockup-panel .v6-ap-dropzone-spinner, .surface-beat--navigate .v6-mockup-panel .v6-ap-dropzone-spinner{ width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--blurple) 22%, transparent); border-top-color: var(--blurple); animation: v6ApSpin 720ms linear infinite; } @keyframes v6ApSpin { to { transform: rotate(360deg); } } /* Check glyph that replaces the spinner when reading completes. */.hero .v6-mockup-panel .v6-ap-dropzone-check, .surface-beat--navigate .v6-mockup-panel .v6-ap-dropzone-check{ display: inline-flex; align-items: center; justify-content: center; width: 9px; height: 9px; border-radius: 50%; background: var(--green); color: var(--main-bg-color); font-size: 7px; line-height: 1; font-weight: 700; } /* Muted "+N more" row inside the proposed-answers list. */.hero .v6-mockup-panel .v6-ap-result-more, .surface-beat--navigate .v6-mockup-panel .v6-ap-result-more{ opacity: 0.6; font-style: italic; font-size: 9px; }.hero .v6-mockup-panel .v6-ap-file-dropzone .v6-ap-source-row, .surface-beat--navigate .v6-mockup-panel .v6-ap-file-dropzone .v6-ap-source-row{ border-style: solid; border-color: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } /* Aggressiveness picker (Cautious / Balanced / Strike). Chips lay out in a single horizontal row — icon to the LEFT of the label inside each chip. The wrapper preflight (`svg { display: block }`) would otherwise stack icon-above-label inside an inline span; explicit inline-flex on the chip + the icon enforces horizontal flow. */.hero .v6-mockup-panel .v6-ap-modes, .surface-beat--navigate .v6-mockup-panel .v6-ap-modes{ display: flex; flex-direction: column; gap: 4px; }.hero .v6-mockup-panel .v6-ap-modes-label, .surface-beat--navigate .v6-mockup-panel .v6-ap-modes-label{ font-family: var(--brand-font); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); }.hero .v6-mockup-panel .v6-ap-mode-row, .surface-beat--navigate .v6-mockup-panel .v6-ap-mode-row{ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; }.hero .v6-mockup-panel .v6-ap-mode-chip, .surface-beat--navigate .v6-mockup-panel .v6-ap-mode-chip{ display: inline-flex; flex-direction: row; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-family: var(--brand-font); font-size: 9.5px; font-weight: 600; line-height: 1; white-space: nowrap; background: color-mix(in srgb, var(--main-bg-color) 56%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); color: color-mix(in srgb, var(--v6-ink) 60%, transparent); }.hero .v6-mockup-panel .v6-ap-mode-icon, .surface-beat--navigate .v6-mockup-panel .v6-ap-mode-icon{ display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 12px; height: 12px; line-height: 1; }.hero .v6-mockup-panel .v6-ap-mode-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-ap-mode-icon svg{ width: 12px; height: 12px; max-width: none; max-height: none; display: block; }.hero .v6-mockup-panel .v6-ap-mode-label, .surface-beat--navigate .v6-mockup-panel .v6-ap-mode-label{ line-height: 1; }.hero .v6-mockup-panel .v6-ap-mode-chip.is-active, .surface-beat--navigate .v6-mockup-panel .v6-ap-mode-chip.is-active{ background: color-mix(in srgb, var(--blurple) 14%, transparent); border-color: color-mix(in srgb, var(--blurple) 38%, transparent); color: var(--blurple); }.hero .v6-mockup-panel .v6-ap-result, .surface-beat--navigate .v6-mockup-panel .v6-ap-result{ padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--green) 5%, transparent); border: 1px solid color-mix(in srgb, var(--green) 22%, transparent); }.hero .v6-mockup-panel .v6-ap-result-head, .surface-beat--navigate .v6-mockup-panel .v6-ap-result-head{ display: block; font-family: var(--brand-font); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green); margin-bottom: 4px; }.hero .v6-mockup-panel .v6-ap-result-list, .surface-beat--navigate .v6-mockup-panel .v6-ap-result-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }.hero .v6-mockup-panel .v6-ap-result-list li, .surface-beat--navigate .v6-mockup-panel .v6-ap-result-list li{ font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 82%, transparent); line-height: 1.35; transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms ease; } /* ─── Think button — step 1 trigger in the two-step Think & Sync flow. The user (or the auto-cycle's cursor) clicks Think to actually run the agent. Hidden initially via opacity (revealed by the stagger), then visually presses on click. */.hero .v6-mockup-panel .v6-ap-think-btn, .surface-beat--navigate .v6-mockup-panel .v6-ap-think-btn{ align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; font-family: var(--brand-font); font-size: 10.5px; font-weight: 700; letter-spacing: 0.005em; border: none; cursor: pointer; box-shadow: 0 4px 14px color-mix(in srgb, var(--blurple) 30%, transparent); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, opacity 280ms ease; }.hero .v6-mockup-panel .v6-ap-think-btn:hover, .surface-beat--navigate .v6-mockup-panel .v6-ap-think-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--blurple) 40%, transparent); }.hero .v6-mockup-panel .v6-ap-think-btn.is-clicked, .surface-beat--navigate .v6-mockup-panel .v6-ap-think-btn.is-clicked{ transform: scale(0.96); box-shadow: 0 2px 8px color-mix(in srgb, var(--blurple) 30%, transparent); }.hero .v6-mockup-panel .v6-ap-think-btn-icon, .surface-beat--navigate .v6-mockup-panel .v6-ap-think-btn-icon{ width: 11px; height: 11px; max-width: none; display: block; } /* ─── Proposed Scope (form-analyze) — no upload UI ─────────────── Auto-reads Discovery + module catalog (no file dropzone). Each context card pulses a scanning indicator that flips to a checkmark once "read." Then a Run button replaces the Think button. Shares the orb-thinking + diff phases with form-think above. */.hero .v6-mockup-panel .v6-ap-analyze-form, .surface-beat--navigate .v6-mockup-panel .v6-ap-analyze-form{ display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }.hero .v6-mockup-panel .v6-ap-analyze-head, .surface-beat--navigate .v6-mockup-panel .v6-ap-analyze-head{ font-family: var(--brand-font); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--v6-ink) 50%, transparent); padding: 0 2px; }.hero .v6-mockup-panel .v6-ap-context-cards, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-cards{ display: flex; flex-direction: column; gap: 8px; }.hero .v6-mockup-panel .v6-ap-context-card, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-card{ display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); transition: background 220ms ease, border-color 220ms ease; }.hero .v6-mockup-panel .v6-ap-context-icon, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-icon{ width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--blurple) 14%, transparent); color: var(--blurple); flex: 0 0 auto; }.hero .v6-mockup-panel .v6-ap-context-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-icon svg{ width: 16px; height: 16px; max-width: none; max-height: none; }.hero .v6-mockup-panel .v6-ap-context-text, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-text{ display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }.hero .v6-mockup-panel .v6-ap-context-label, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-label{ font-family: var(--brand-font); font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--v6-ink) 90%, transparent); letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.hero .v6-mockup-panel .v6-ap-context-meta, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-meta{ font-family: var(--brand-font); font-size: 9px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 50%, transparent); letter-spacing: 0.005em; } /* Status dot: scanning ring → check when card flips .is-ready. */.hero .v6-mockup-panel .v6-ap-context-status, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-status{ width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; border: 1.5px solid color-mix(in srgb, var(--blurple) 60%, transparent); border-top-color: transparent; animation: v6ContextSpin 900ms linear infinite; } /* While the card is scanning (default state once .is-shown), a soft * blurple aura pulses behind it — visualizes the agent "reading." * Disappears the moment the card flips to .is-ready. */.hero .v6-mockup-panel .v6-ap-context-card.is-shown:not(.is-ready), .surface-beat--navigate .v6-mockup-panel .v6-ap-context-card.is-shown:not(.is-ready){ background: color-mix(in srgb, var(--blurple) 5%, color-mix(in srgb, var(--inv-bg-color) 3%, transparent)); border-color: color-mix(in srgb, var(--blurple) 26%, transparent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--blurple) 35%, transparent); animation: v6CtxScan 1400ms cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes v6CtxScan { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blurple) 0%, transparent); } 50% { box-shadow: 0 0 18px 2px color-mix(in srgb, var(--blurple) 28%, transparent); } }.hero .v6-mockup-panel .v6-ap-context-card.is-ready, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-card.is-ready{ border-color: color-mix(in srgb, var(--success) 30%, transparent); background: color-mix(in srgb, var(--success) 5%, color-mix(in srgb, var(--inv-bg-color) 2%, transparent)); animation: v6CtxReady 520ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes v6CtxReady { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent); } 35% { box-shadow: 0 0 22px 4px color-mix(in srgb, var(--success) 38%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent); } }.hero .v6-mockup-panel .v6-ap-context-card.is-ready .v6-ap-context-status, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-card.is-ready .v6-ap-context-status{ border: none; background: var(--success); animation: none; position: relative; }.hero .v6-mockup-panel .v6-ap-context-card.is-ready .v6-ap-context-status::after, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-card.is-ready .v6-ap-context-status::after{ content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; } @keyframes v6ContextSpin { to { transform: rotate(360deg); } } /* ─── Think & Sync — three-stage panel UX ───────────────────────── STATE 1 (default): .v6-ap-think-form visible (tabs/sources/aggressiveness/Think btn) STATE 2 (.is-thinking): form hidden, AI assist orb + "Thinking…" centered STATE 3 (.is-proposing): orb hidden, diff visible, Accept footer fades in Class transitions happen in renderAgentPanel; CSS owns visibility. */.hero .v6-mockup-panel .v6-ap-thinking-stage, .hero .v6-mockup-panel .v6-ap-diff, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-stage, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff{ display: none; }.hero .v6-mockup-panel .v6-agent-panel.is-thinking .v6-ap-think-form, .hero .v6-mockup-panel .v6-agent-panel.is-thinking .v6-ap-analyze-form, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel.is-thinking .v6-ap-think-form, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel.is-thinking .v6-ap-analyze-form{ display: none; }.hero .v6-mockup-panel .v6-agent-panel.is-thinking .v6-ap-thinking-stage, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel.is-thinking .v6-ap-thinking-stage{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; flex: 1 1 auto; padding: 24px 16px; animation: v6ThinkStageIn 320ms cubic-bezier(0.22, 1, 0.36, 1); }.hero .v6-mockup-panel .v6-agent-panel.is-proposing .v6-ap-think-form, .hero .v6-mockup-panel .v6-agent-panel.is-proposing .v6-ap-analyze-form, .hero .v6-mockup-panel .v6-agent-panel.is-proposing .v6-ap-thinking-stage, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel.is-proposing .v6-ap-think-form, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel.is-proposing .v6-ap-analyze-form, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel.is-proposing .v6-ap-thinking-stage{ display: none; }.hero .v6-mockup-panel .v6-agent-panel.is-proposing .v6-ap-diff, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel.is-proposing .v6-ap-diff{ display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; animation: v6DiffIn 340ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes v6ThinkStageIn { 0% { opacity: 0; transform: scale(0.94); } 100% { opacity: 1; transform: scale(1); } } @keyframes v6DiffIn { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } /* Accumulating findings list under the orb. Each finding lands with * a scanning spinner ("is-current"), then locks ✓ ("is-done") when * the next finding appears. Builds visible work — the viewer SEES * the agent's chain of reasoning instead of a single swapping label. */.hero .v6-mockup-panel .v6-ap-thinking-findings, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-findings{ list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; width: max-content; max-width: 90%; }.hero .v6-mockup-panel .v6-ap-thinking-finding, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-finding{ display: flex; align-items: center; gap: 8px; font-family: var(--brand-font); font-size: 10px; font-weight: 500; letter-spacing: 0.005em; color: color-mix(in srgb, var(--v6-ink) 60%, transparent); opacity: 0; transform: translateY(6px); animation: v6FindingIn 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes v6FindingIn { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }.hero .v6-mockup-panel .v6-ap-thinking-finding.is-current, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-finding.is-current{ color: color-mix(in srgb, var(--blurple) 70%, var(--v6-ink)); font-weight: 600; }.hero .v6-mockup-panel .v6-ap-thinking-finding.is-done, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-finding.is-done{ color: color-mix(in srgb, var(--v6-ink) 78%, transparent); } /* Spinner / check dot */.hero .v6-mockup-panel .v6-ap-thinking-finding-dot, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-finding-dot{ width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; position: relative; }.hero .v6-mockup-panel .v6-ap-thinking-finding.is-current .v6-ap-thinking-finding-dot, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-finding.is-current .v6-ap-thinking-finding-dot{ border: 1.5px solid color-mix(in srgb, var(--blurple) 60%, transparent); border-top-color: transparent; animation: v6FindingSpin 900ms linear infinite; }.hero .v6-mockup-panel .v6-ap-thinking-finding.is-done .v6-ap-thinking-finding-dot, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-finding.is-done .v6-ap-thinking-finding-dot{ background: var(--success); border: none; animation: v6FindingLock 420ms cubic-bezier(0.22, 1, 0.36, 1); }.hero .v6-mockup-panel .v6-ap-thinking-finding.is-done .v6-ap-thinking-finding-dot::after, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-finding.is-done .v6-ap-thinking-finding-dot::after{ content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 9px 9px; } @keyframes v6FindingSpin { to { transform: rotate(360deg); } } @keyframes v6FindingLock { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent); } 40% { box-shadow: 0 0 14px 3px color-mix(in srgb, var(--success) 38%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent); } } /* AI assist orb — friendly AI icon with a soft pulsing aura while the agent is reasoning. */.hero .v6-mockup-panel .v6-ap-thinking-orb, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-orb{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; color: var(--blurple); background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 18%, var(--main-bg-color)), color-mix(in srgb, var(--purple) 14%, var(--main-bg-color))); border: 1px solid color-mix(in srgb, var(--blurple) 28%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--blurple) 20%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent); }.hero .v6-mockup-panel .v6-ap-thinking-orb svg, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-orb svg{ width: 30px; height: 30px; max-width: none; animation: v6OrbBob 1.6s ease-in-out infinite; }.hero .v6-mockup-panel .v6-ap-thinking-orb::after, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-orb::after{ content: ""; position: absolute; inset: -6px; border-radius: 50%; background: color-mix(in srgb, var(--blurple) 35%, transparent); animation: v6OrbPulseRing 1.8s ease-in-out infinite; z-index: -1; } @keyframes v6OrbBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-2px) rotate(3deg); } } @keyframes v6OrbPulseRing { 0%, 100% { opacity: 0.45; transform: scale(0.85); } 50% { opacity: 0; transform: scale(1.35); } }.hero .v6-mockup-panel .v6-ap-thinking-label, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-label{ font-family: var(--brand-font); font-size: 11px; font-weight: 600; letter-spacing: -0.005em; color: color-mix(in srgb, var(--blurple) 80%, transparent); } /* Diff view — change-proposal style. + marker, field name, value. Reads like a git diff so the user understands "these are the changes being proposed before I accept." */.hero .v6-mockup-panel .v6-ap-diff-head, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-head{ font-family: var(--brand-font); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); margin-bottom: 2px; }.hero .v6-mockup-panel .v6-ap-diff-rows, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-rows{ display: flex; flex-direction: column; gap: 4px; }.hero .v6-mockup-panel .v6-ap-diff-row, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row{ display: grid; grid-template-columns: 14px auto 1fr; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--green) 6%, transparent); border-left: 2px solid color-mix(in srgb, var(--green) 55%, transparent); font-family: var(--brand-font); font-size: 10.5px; line-height: 1.3; } /* Out-of-scope diff rows read as "considered + intentionally left out" — muted background, no accent border, dimmed text. */.hero .v6-mockup-panel .v6-ap-diff-row[data-scope="out"], .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row[data-scope="out"]{ background: color-mix(in srgb, var(--v6-ink) 3%, transparent); border-left-color: color-mix(in srgb, var(--v6-ink) 14%, transparent); }.hero .v6-mockup-panel .v6-ap-diff-row[data-scope="out"] .v6-ap-diff-field, .hero .v6-mockup-panel .v6-ap-diff-row[data-scope="out"] .v6-ap-diff-value, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row[data-scope="out"] .v6-ap-diff-field, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row[data-scope="out"] .v6-ap-diff-value{ color: color-mix(in srgb, var(--v6-ink) 55%, transparent); }.hero .v6-mockup-panel .v6-ap-diff-marker, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-marker{ font-weight: 800; color: color-mix(in srgb, var(--green) 80%, transparent); font-size: 12px; line-height: 1; text-align: center; }.hero .v6-mockup-panel .v6-ap-diff-row[data-scope="out"] .v6-ap-diff-marker, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row[data-scope="out"] .v6-ap-diff-marker{ color: color-mix(in srgb, var(--v6-ink) 38%, transparent); }.hero .v6-mockup-panel .v6-ap-diff-field, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-field{ font-weight: 700; color: color-mix(in srgb, var(--v6-ink) 88%, transparent); }.hero .v6-mockup-panel .v6-ap-diff-value, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-value{ color: color-mix(in srgb, var(--v6-ink) 72%, transparent); font-family: var(--brand-mono, var(--brand-font)); } /* Accept (Send-to-Workspace) footer — hidden until is-proposing, then fades in. */.hero .v6-mockup-panel .v6-agent-panel[data-layout="form-think"]:not(.is-proposing) .v6-agent-panel-foot, .hero .v6-mockup-panel .v6-agent-panel[data-layout="form-analyze"]:not(.is-proposing) .v6-agent-panel-foot, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel[data-layout="form-think"]:not(.is-proposing) .v6-agent-panel-foot, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel[data-layout="form-analyze"]:not(.is-proposing) .v6-agent-panel-foot{ display: none; }.hero .v6-mockup-panel .v6-agent-panel[data-layout="form-think"].is-proposing .v6-agent-panel-foot, .hero .v6-mockup-panel .v6-agent-panel[data-layout="form-analyze"].is-proposing .v6-agent-panel-foot, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel[data-layout="form-think"].is-proposing .v6-agent-panel-foot, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel[data-layout="form-analyze"].is-proposing .v6-agent-panel-foot{ animation: v6FootIn 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes v6FootIn { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } /* As Accept fires, each diff row "transfers" to the workspace — fades, slides slightly left, strike-throughs as its matching sheet row resolves. Reads as "the proposed change just landed." */.hero .v6-mockup-panel .v6-ap-diff-row, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row{ transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1), background 320ms ease, border-color 320ms ease; }.hero .v6-mockup-panel .v6-ap-diff-row.is-transferring, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row.is-transferring{ opacity: 0.45; transform: translateX(-6px); }.hero .v6-mockup-panel .v6-ap-diff-row.is-transferred, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row.is-transferred{ opacity: 0.32; transform: translateX(0); background: color-mix(in srgb, var(--green) 4%, transparent); }.hero .v6-mockup-panel .v6-ap-diff-row.is-transferred .v6-ap-diff-field, .hero .v6-mockup-panel .v6-ap-diff-row.is-transferred .v6-ap-diff-value, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row.is-transferred .v6-ap-diff-field, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row.is-transferred .v6-ap-diff-value{ text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--green) 60%, transparent); } /* ─── form-sow — SOW Generator — doc tabs + section toggles ─── */.hero .v6-mockup-panel .v6-ap-doc-tabs, .surface-beat--navigate .v6-mockup-panel .v6-ap-doc-tabs{ display: inline-flex; border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); gap: 0; align-self: flex-start; }.hero .v6-mockup-panel .v6-ap-doc-tab, .surface-beat--navigate .v6-mockup-panel .v6-ap-doc-tab{ padding: 4px 12px 6px; font-family: var(--brand-font); font-size: 10px; font-weight: 600; color: color-mix(in srgb, var(--v6-ink) 50%, transparent); border-bottom: 2px solid transparent; margin-bottom: -1px; }.hero .v6-mockup-panel .v6-ap-doc-tab.is-active, .surface-beat--navigate .v6-mockup-panel .v6-ap-doc-tab.is-active{ color: var(--v6-ink); border-bottom-color: var(--blurple); }.hero .v6-mockup-panel .v6-ap-form-row, .surface-beat--navigate .v6-mockup-panel .v6-ap-form-row{ display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }.hero .v6-mockup-panel .v6-ap-form-label, .surface-beat--navigate .v6-mockup-panel .v6-ap-form-label{ font-family: var(--brand-font); font-size: 9.5px; font-weight: 600; color: color-mix(in srgb, var(--v6-ink) 60%, transparent); }.hero .v6-mockup-panel .v6-ap-file-chips, .surface-beat--navigate .v6-mockup-panel .v6-ap-file-chips{ display: inline-flex; gap: 4px; }.hero .v6-mockup-panel .v6-ap-file-chip, .surface-beat--navigate .v6-mockup-panel .v6-ap-file-chip{ padding: 3px 9px; border-radius: 6px; font-family: var(--brand-font); font-size: 9.5px; font-weight: 600; background: color-mix(in srgb, var(--main-bg-color) 60%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); color: color-mix(in srgb, var(--v6-ink) 60%, transparent); }.hero .v6-mockup-panel .v6-ap-file-chip.is-active, .surface-beat--navigate .v6-mockup-panel .v6-ap-file-chip.is-active{ background: var(--v6-ink); color: var(--v6-paper); border-color: transparent; }.hero .v6-mockup-panel .v6-ap-section-head, .surface-beat--navigate .v6-mockup-panel .v6-ap-section-head{ font-family: var(--brand-font); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); margin-top: 2px; }.hero .v6-mockup-panel .v6-ap-toggle-list, .surface-beat--navigate .v6-mockup-panel .v6-ap-toggle-list{ display: flex; flex-direction: column; gap: 4px; }.hero .v6-mockup-panel .v6-ap-toggle, .surface-beat--navigate .v6-mockup-panel .v6-ap-toggle{ display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; background: color-mix(in srgb, var(--main-bg-color) 56%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 78%, transparent); } /* Accordion chevron prefix for SOW section toggles — reads as a real * collapsible section row like in StatementOfWorkAgent. */.hero .v6-mockup-panel .v6-ap-toggle-chevron, .surface-beat--navigate .v6-mockup-panel .v6-ap-toggle-chevron{ font-size: 9px; color: color-mix(in srgb, var(--blurple) 55%, transparent); line-height: 1; flex-shrink: 0; }.hero .v6-mockup-panel .v6-ap-toggle-label, .surface-beat--navigate .v6-mockup-panel .v6-ap-toggle-label{ flex: 1; min-width: 0; } /* Sticky Generate button at the bottom of the SOW form. */.hero .v6-mockup-panel .v6-ap-sow-sticky, .surface-beat--navigate .v6-mockup-panel .v6-ap-sow-sticky{ margin-top: 6px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--blurple) 14%, transparent); display: flex; justify-content: flex-end; }.hero .v6-mockup-panel .v6-ap-sow-generate, .surface-beat--navigate .v6-mockup-panel .v6-ap-sow-generate{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; border: none; cursor: pointer; font-family: var(--brand-font); font-size: 10px; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 4px 14px color-mix(in srgb, var(--blurple) 30%, transparent); }.hero .v6-mockup-panel .v6-ap-sow-generate svg, .surface-beat--navigate .v6-mockup-panel .v6-ap-sow-generate svg{ width: 11px; height: 11px; }.hero .v6-mockup-panel .v6-ap-toggle-box, .surface-beat--navigate .v6-mockup-panel .v6-ap-toggle-box{ width: 14px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--main-bg-color) 80%, transparent); border: 1.5px solid color-mix(in srgb, var(--v6-ink) 20%, transparent); flex-shrink: 0; position: relative; }.hero .v6-mockup-panel .v6-ap-toggle.is-on .v6-ap-toggle-box, .surface-beat--navigate .v6-mockup-panel .v6-ap-toggle.is-on .v6-ap-toggle-box{ background: linear-gradient(135deg, var(--blurple), var(--purple)); border-color: transparent; }.hero .v6-mockup-panel .v6-ap-toggle.is-on .v6-ap-toggle-box::after, .surface-beat--navigate .v6-mockup-panel .v6-ap-toggle.is-on .v6-ap-toggle-box::after{ content: ''; position: absolute; top: 2px; left: 4px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } /* ─── chat — alternating AI / user bubbles + input row + disclaimer ─── */.hero .v6-mockup-panel .v6-ap-chat-stream, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-stream{ display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }.hero .v6-mockup-panel .v6-ap-chat-stream::-webkit-scrollbar, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-stream::-webkit-scrollbar{ display: none; } /* Bubbles + typing dots must NOT shrink. The default flex-shrink:1 was * compressing each bubble vertically when the conversation total exceeded * the stream height — text overlapped or collapsed entirely, leaving the * panel looking empty. Locking shrink to 0 forces them to keep their * natural content height, and overflow-y:auto handles the rest. */.hero .v6-mockup-panel .v6-ap-chat-stream > .v6-ap-bubble, .hero .v6-mockup-panel .v6-ap-chat-stream > .v6-ap-chat-typing, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-stream > .v6-ap-bubble, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-stream > .v6-ap-chat-typing{ flex-shrink: 0; } /* Conversation fills from the top normally. When it outgrows the * stream, the JS revealInto helper scrolls the container so the bottom * of the content aligns with the bottom of the viewport. No CSS spacer * tricks — JS handles the overflow case explicitly. */.hero .v6-mockup-panel .v6-ap-chat-input, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-input{ margin-top: 6px; display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; background: color-mix(in srgb, var(--main-bg-color) 78%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); border-radius: 999px; }.hero .v6-mockup-panel .v6-ap-chat-textarea, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-textarea{ flex: 1; font-family: var(--brand-font); font-size: 10.5px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 38%, transparent); letter-spacing: -0.005em; line-height: 1.3; padding: 4px 0; }.hero .v6-mockup-panel .v6-ap-chat-send, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-send{ width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; flex-shrink: 0; box-shadow: 0 2px 8px color-mix(in srgb, var(--blurple) 35%, transparent); }.hero .v6-mockup-panel .v6-ap-chat-send svg, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-send svg{ width: 12px; height: 12px; }.hero .v6-mockup-panel .v6-ap-chat-disclaimer, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-disclaimer{ display: block; margin-top: 4px; text-align: center; font-family: var(--brand-font); font-size: 8px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 35%, transparent); letter-spacing: 0; line-height: 1.3; }.hero .v6-mockup-panel .v6-ap-bubble, .surface-beat--navigate .v6-mockup-panel .v6-ap-bubble{ display: flex; max-width: 86%; }.hero .v6-mockup-panel .v6-ap-bubble[data-from="ai"], .surface-beat--navigate .v6-mockup-panel .v6-ap-bubble[data-from="ai"]{ align-self: flex-start; }.hero .v6-mockup-panel .v6-ap-bubble[data-from="user"], .surface-beat--navigate .v6-mockup-panel .v6-ap-bubble[data-from="user"]{ align-self: flex-end; }.hero .v6-mockup-panel .v6-ap-bubble-body, .surface-beat--navigate .v6-mockup-panel .v6-ap-bubble-body{ padding: 6px 10px; border-radius: 12px; font-family: var(--brand-font); font-size: 10.5px; font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-ap-bubble[data-from="ai"] .v6-ap-bubble-body, .surface-beat--navigate .v6-mockup-panel .v6-ap-bubble[data-from="ai"] .v6-ap-bubble-body{ background: color-mix(in srgb, var(--main-bg-color) 70%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); color: color-mix(in srgb, var(--v6-ink) 88%, transparent); border-bottom-left-radius: 4px; }.hero .v6-mockup-panel .v6-ap-bubble[data-from="user"] .v6-ap-bubble-body, .surface-beat--navigate .v6-mockup-panel .v6-ap-bubble[data-from="user"] .v6-ap-bubble-body{ background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 4px 12px color-mix(in srgb, var(--blurple) 25%, transparent); }.hero .v6-mockup-panel .v6-ap-bubble[data-from="user"] .v6-ap-bubble-body strong, .surface-beat--navigate .v6-mockup-panel .v6-ap-bubble[data-from="user"] .v6-ap-bubble-body strong{ color: #fff; } /* ─── report — Cheat Sheet — collapsible-style sections with chevrons ─── */.hero .v6-mockup-panel .v6-ap-report-chevron, .surface-beat--navigate .v6-mockup-panel .v6-ap-report-chevron{ display: inline-block; margin-right: 5px; font-size: 9px; color: color-mix(in srgb, var(--blurple) 60%, transparent); line-height: 1; transform: translateY(-1px); }.hero .v6-mockup-panel .v6-ap-report-sections, .surface-beat--navigate .v6-mockup-panel .v6-ap-report-sections{ display: flex; flex-direction: column; gap: 8px; }.hero .v6-mockup-panel .v6-ap-report-section, .surface-beat--navigate .v6-mockup-panel .v6-ap-report-section{ border-left: 2px solid color-mix(in srgb, var(--blurple) 40%, transparent); padding-left: 8px; }.hero .v6-mockup-panel .v6-ap-report-h, .surface-beat--navigate .v6-mockup-panel .v6-ap-report-h{ display: block; font-family: var(--brand-font); font-size: 10.5px; font-weight: 700; color: var(--v6-ink); letter-spacing: -0.005em; margin-bottom: 3px; }.hero .v6-mockup-panel .v6-ap-report-body, .surface-beat--navigate .v6-mockup-panel .v6-ap-report-body{ font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 78%, transparent); line-height: 1.45; }.hero .v6-mockup-panel .v6-ap-report-body ul, .surface-beat--navigate .v6-mockup-panel .v6-ap-report-body ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }.hero .v6-mockup-panel .v6-ap-report-body p, .surface-beat--navigate .v6-mockup-panel .v6-ap-report-body p{ margin: 0; } /* ─── list — Solution Fit / Assign Owners — state-marked rows ─── */.hero .v6-mockup-panel .v6-ap-list, .surface-beat--navigate .v6-mockup-panel .v6-ap-list{ display: flex; flex-direction: column; gap: 5px; }.hero .v6-mockup-panel .v6-ap-list-row, .surface-beat--navigate .v6-mockup-panel .v6-ap-list-row{ display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--main-bg-color) 60%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 82%, transparent); }.hero .v6-mockup-panel .v6-ap-list-marker, .surface-beat--navigate .v6-mockup-panel .v6-ap-list-marker{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }.hero .v6-mockup-panel .v6-ap-list-row[data-state="pass"] .v6-ap-list-marker, .surface-beat--navigate .v6-mockup-panel .v6-ap-list-row[data-state="pass"] .v6-ap-list-marker{ background: var(--green); box-shadow: 0 0 6px color-mix(in srgb, var(--green) 50%, transparent); }.hero .v6-mockup-panel .v6-ap-list-row[data-state="warn"] .v6-ap-list-marker, .surface-beat--navigate .v6-mockup-panel .v6-ap-list-row[data-state="warn"] .v6-ap-list-marker{ background: #E5A24A; box-shadow: 0 0 6px color-mix(in srgb, #E5A24A 50%, transparent); }.hero .v6-mockup-panel .v6-ap-list-row[data-state="open"] .v6-ap-list-marker, .surface-beat--navigate .v6-mockup-panel .v6-ap-list-row[data-state="open"] .v6-ap-list-marker{ background: transparent; border: 1.5px solid color-mix(in srgb, var(--v6-ink) 30%, transparent); }.hero .v6-mockup-panel .v6-ap-list-row[data-state="open"], .surface-beat--navigate .v6-mockup-panel .v6-ap-list-row[data-state="open"]{ opacity: 0.7; } /* Footer + CTA */.hero .v6-mockup-panel .v6-agent-panel-foot, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-foot{ display: flex; justify-content: flex-end; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--blurple) 14%, transparent); } /* GUEST-side chat panels (Smart Conversation, Diligent Attendee, etc.): the chat IS what drives the workspace, so no "Send to Workspace" CTA, the panel docks LEFT with a see-through background so the sheet on the right stays visible. Scoped to [data-persona="guest"] so host-side chat agents (Tailored Script, Execution Readiness, AI Navigator) keep their opaque right-side default. */.hero .v6-mockup-panel[data-persona="guest"] .v6-agent-panel[data-layout="chat"] .v6-agent-panel-foot, .hero .v6-mockup-panel[data-persona="guest"] .v6-agent-panel[data-layout="chat"] .v6-agent-panel-attribution, .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-agent-panel[data-layout="chat"] .v6-agent-panel-foot, .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-agent-panel[data-layout="chat"] .v6-agent-panel-attribution{ display: none; }.hero .v6-mockup-panel[data-persona="guest"] .v6-agent-panel[data-layout="chat"], .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-agent-panel[data-layout="chat"]{ left: 12px !important; right: auto !important; width: 58% !important; background: linear-gradient(160deg, color-mix(in srgb, var(--purple) 8%, color-mix(in srgb, var(--main-bg-color) 30%, transparent)) 0%, color-mix(in srgb, var(--main-bg-color) 40%, transparent) 60%); backdrop-filter: blur(34px) saturate(1.5); -webkit-backdrop-filter: blur(34px) saturate(1.5); border-color: color-mix(in srgb, var(--purple) 28%, transparent); } /* Inline typing-dots indicator that pops in the chat stream just before an AI bubble lands. Sells the "agent is composing" beat. */.hero .v6-mockup-panel .v6-ap-chat-typing, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-typing{ align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px; margin: 4px 0; border-radius: 14px; background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); animation: v6ChatTypingIn 220ms ease-out; }.hero .v6-mockup-panel .v6-ap-chat-typing > span, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-typing > span{ width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--v6-ink) 45%, transparent); animation: v6ChatTypingDot 1.1s ease-in-out infinite; }.hero .v6-mockup-panel .v6-ap-chat-typing > span:nth-child(2), .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-typing > span:nth-child(2){ animation-delay: 0.14s; }.hero .v6-mockup-panel .v6-ap-chat-typing > span:nth-child(3), .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-typing > span:nth-child(3){ animation-delay: 0.28s; } @keyframes v6ChatTypingIn { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes v6ChatTypingDot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } } /* Customer-typing state — when the user is "typing" their message, the chat input box shows the text as it gets entered and looks active (caret blink, accent border). */.hero .v6-mockup-panel .v6-ap-chat-textarea.is-typing, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-textarea.is-typing{ color: var(--v6-ink); }.hero .v6-mockup-panel .v6-ap-chat-input:has(.v6-ap-chat-textarea.is-typing), .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-input:has(.v6-ap-chat-textarea.is-typing){ border-color: color-mix(in srgb, var(--purple) 45%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple) 12%, transparent); }.hero .v6-mockup-panel .v6-ap-chat-textarea.is-typing::after, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-textarea.is-typing::after{ content: "▍"; display: inline-block; margin-left: 1px; color: color-mix(in srgb, var(--purple) 70%, transparent); animation: v6StreamCaret 0.7s steps(2) infinite; }.hero .v6-mockup-panel .v6-agent-panel-cta, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-cta{ padding: 6px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; font-family: var(--brand-font); font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; border: none; cursor: pointer; box-shadow: 0 6px 18px color-mix(in srgb, var(--blurple) 35%, transparent); } /* ─── PERSONA PILL — segmented Host / Guest indicator in stage header ─── */.hero .v6-mockup-panel .v6-persona-pill, .surface-beat--navigate .v6-mockup-panel .v6-persona-pill{ display: inline-flex; align-items: center; padding: 2px; margin-top: 6px; border-radius: 999px; background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--brand-font); font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }.hero .v6-mockup-panel .v6-persona-pill > span, .surface-beat--navigate .v6-mockup-panel .v6-persona-pill > span{ padding: 2px 9px; border-radius: 999px; color: color-mix(in srgb, var(--v6-ink) 50%, transparent); transition: background 300ms ease, color 300ms ease, box-shadow 300ms ease; }.hero .v6-mockup-panel[data-persona="host"] .v6-persona-pill [data-seg="host"], .hero .v6-mockup-panel:not([data-persona="guest"]) .v6-persona-pill [data-seg="host"], .surface-beat--navigate .v6-mockup-panel[data-persona="host"] .v6-persona-pill [data-seg="host"], .surface-beat--navigate .v6-mockup-panel:not([data-persona="guest"]) .v6-persona-pill [data-seg="host"]{ background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; box-shadow: 0 1px 4px color-mix(in srgb, var(--blurple) 40%, transparent); }.hero .v6-mockup-panel[data-persona="guest"] .v6-persona-pill [data-seg="guest"], .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-persona-pill [data-seg="guest"]{ background: linear-gradient(135deg, var(--purple), #D490FF); color: #fff; box-shadow: 0 1px 4px color-mix(in srgb, var(--purple) 40%, transparent); } /* Guest persona — re-tint the agent panel border + orb so the user reads the perspective shift */.hero .v6-mockup-panel[data-persona="guest"] .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-agent-panel{ background: linear-gradient(160deg, color-mix(in srgb, var(--purple) 12%, var(--main-bg-color)) 0%, color-mix(in srgb, var(--main-bg-color) 88%, transparent) 60%); border-color: color-mix(in srgb, var(--purple) 32%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset, 0 24px 64px color-mix(in srgb, var(--purple) 20%, transparent), 0 8px 24px color-mix(in srgb, var(--inv-bg-color) 12%, transparent); }.hero .v6-mockup-panel[data-persona="guest"] .v6-agent-panel-orb, .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-agent-panel-orb{ background: linear-gradient(135deg, var(--purple), #D490FF); box-shadow: 0 0 0 4px color-mix(in srgb, var(--purple) 18%, transparent), 0 0 14px color-mix(in srgb, var(--purple) 60%, transparent); }.hero .v6-mockup-panel[data-persona="guest"] .v6-agent-panel-state, .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-agent-panel-state{ background: color-mix(in srgb, var(--purple) 16%, transparent); color: var(--purple); } /* Mobile — agent panel takes full panel below the chrome */ @media (max-width: 720px) {.hero .v6-mockup-panel .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel{ top: 60px; right: 10px; bottom: 10px; left: 10px; width: auto; padding: 12px; } } /* ═══════════════════════════════════════════════════════════════ * AGENT TRIGGER PILL — replaces the old .v6-section-agents block. * Per product feedback: "no agent selector inside the collaboration * space — you have to click back to get the agent if you want." So * agents are surfaced via a single compact pill that sits OUTSIDE * the collab section (at the foot of the stage panel), reading as a * suggestion bar rather than another sub-surface inside the workspace. * ═══════════════════════════════════════════════════════════════ */.hero .v6-mockup-panel .v6-stage-panel .v6-agent-trigger, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel .v6-agent-trigger{ display: flex; align-items: center; gap: 8px; margin: 0 14px 12px; padding: 7px 10px 7px 8px; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 7%, var(--main-bg-color)), color-mix(in srgb, var(--purple) 4%, var(--main-bg-color))); border: 1px solid color-mix(in srgb, var(--blurple) 22%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, #fff 50%, transparent) inset, 0 4px 12px color-mix(in srgb, var(--blurple) 10%, transparent); cursor: pointer; flex-shrink: 0; font-family: var(--brand-font); transition: transform 220ms var(--v6-spring), box-shadow 220ms var(--v6-ease), background 220ms ease; }.hero .v6-mockup-panel .v6-agent-trigger:hover, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger:hover{ transform: translateY(-1px); box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, 0 8px 20px color-mix(in srgb, var(--blurple) 18%, transparent); }.hero .v6-mockup-panel .v6-agent-trigger-orb, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-orb{ width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 10px color-mix(in srgb, var(--blurple) 45%, transparent); }.hero .v6-mockup-panel .v6-agent-trigger-orb svg, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-orb svg{ width: 10px; height: 10px; }.hero .v6-mockup-panel .v6-agent-trigger-badge, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-badge{ padding: 1px 6px; border-radius: 999px; font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blurple); background: color-mix(in srgb, var(--blurple) 16%, transparent); border: 0.5px solid color-mix(in srgb, var(--blurple) 28%, transparent); flex-shrink: 0; }.hero .v6-mockup-panel .v6-agent-trigger-name, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-name{ font-size: 11.5px; font-weight: 700; color: var(--v6-ink); letter-spacing: -0.01em; line-height: 1; white-space: nowrap; flex-shrink: 0; }.hero .v6-mockup-panel .v6-agent-trigger-status, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-status{ font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 60%, transparent); letter-spacing: -0.005em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }.hero .v6-mockup-panel .v6-agent-trigger-caret, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-caret{ font-size: 14px; font-weight: 600; color: color-mix(in srgb, var(--v6-ink) 40%, transparent); flex-shrink: 0; line-height: 1; } /* Hide the trigger during workspace + workspace-guest substates — * the collab space is doing its thing; the agent trigger reads as * noise. It re-emerges automatically when we return to home. */.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-agent-trigger, .hero .v6-mockup-panel[data-stage-substate="agent"] .v6-agent-trigger, .hero .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-agent-trigger, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-agent-trigger, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent"] .v6-agent-trigger, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-agent-trigger{ opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 240ms var(--v6-ease), transform 280ms var(--v6-ease); }.hero .v6-mockup-panel .v6-agent-trigger, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger{ transition: opacity 280ms var(--v6-ease), transform 280ms var(--v6-spring), box-shadow 220ms var(--v6-ease), background 220ms ease; } /* Mobile — tighten the trigger pill */ @media (max-width: 720px) {.hero .v6-mockup-panel .v6-agent-trigger, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger{ margin: 0 12px 10px; padding: 6px 9px 6px 7px; gap: 6px; }.hero .v6-mockup-panel .v6-agent-trigger-orb, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-orb{ width: 18px; height: 18px; }.hero .v6-mockup-panel .v6-agent-trigger-orb svg, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-orb svg{ width: 9px; height: 9px; }.hero .v6-mockup-panel .v6-agent-trigger-name, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-name{ font-size: 10.5px; }.hero .v6-mockup-panel .v6-agent-trigger-status, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-status{ font-size: 9px; }.hero .v6-mockup-panel .v6-agent-trigger-badge, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-badge{ font-size: 7px; padding: 1px 5px; } } /* Workspace state strip — hidden in stage home (it competed for the tight section height and bled into the agents row below). The same "live state" intent is already carried by .v6-agents-status. The strip still appears inside the workspace substate (.v6-collab-inner). */.hero .v6-mockup-panel .v6-stage-panel .v6-workspace-state, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel .v6-workspace-state{ display: none; }.hero .v6-mockup-panel .v6-collab-inner .v6-workspace-state, .surface-beat--navigate .v6-mockup-panel .v6-collab-inner .v6-workspace-state{ margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); flex-wrap: wrap; }.hero .v6-mockup-panel .v6-state-chip, .surface-beat--navigate .v6-mockup-panel .v6-state-chip{ display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); font-family: var(--brand-font); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }.hero .v6-mockup-panel .v6-state-chip::before, .surface-beat--navigate .v6-mockup-panel .v6-state-chip::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 4px color-mix(in srgb, var(--green) 60%, transparent); }.hero .v6-mockup-panel .v6-state-chip[data-state="planned"], .surface-beat--navigate .v6-mockup-panel .v6-state-chip[data-state="planned"]{ background: color-mix(in srgb, var(--v6-ink) 6%, transparent); color: color-mix(in srgb, var(--v6-ink) 60%, transparent); }.hero .v6-mockup-panel .v6-state-chip[data-state="planned"]::before, .surface-beat--navigate .v6-mockup-panel .v6-state-chip[data-state="planned"]::before{ background: color-mix(in srgb, var(--v6-ink) 45%, transparent); box-shadow: none; }.hero .v6-mockup-panel .v6-state-meta, .surface-beat--navigate .v6-mockup-panel .v6-state-meta{ font-family: var(--brand-font); font-size: 9.5px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 50%, transparent); letter-spacing: -0.005em; } /* Inline .v6-agent-action panels (one per stage panel, baked into HTML) are redundant now that the shared sliding aside (.v6-agent-panel) handles agent open state. Hide them to declutter the stage home. */.hero .v6-mockup-panel .v6-stage-panel .v6-agent-action, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel .v6-agent-action{ display: none; } /* ─── Agent-in-action — the live work the top agent is doing right now. Sits below the agent tiles. Reads as a real assistant panel: gradient orb, agent name, live state, and a chat-bubble preview of the current action with animated typing dots. */.hero .v6-mockup-panel .v6-agent-action, .surface-beat--navigate .v6-mockup-panel .v6-agent-action{ margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 7%, transparent), color-mix(in srgb, var(--purple) 5%, transparent)); border: 1px solid color-mix(in srgb, var(--blurple) 20%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset, 0 6px 18px color-mix(in srgb, var(--blurple) 10%, transparent); }.hero .v6-mockup-panel .v6-agent-action-header, .surface-beat--navigate .v6-mockup-panel .v6-agent-action-header{ display: flex; align-items: center; gap: 7px; }.hero .v6-mockup-panel .v6-agent-action-orb, .surface-beat--navigate .v6-mockup-panel .v6-agent-action-orb{ width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 0 color-mix(in srgb, var(--blurple) 55%, transparent), 0 0 12px color-mix(in srgb, var(--blurple) 60%, transparent); animation: v6AgentOrbPulse 1.8s ease-in-out infinite; flex-shrink: 0; }.hero .v6-mockup-panel .v6-agent-action-orb svg, .surface-beat--navigate .v6-mockup-panel .v6-agent-action-orb svg{ width: 10px; height: 10px; } @keyframes v6AgentOrbPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blurple) 55%, transparent), 0 0 10px color-mix(in srgb, var(--blurple) 50%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--blurple) 0%, transparent), 0 0 16px color-mix(in srgb, var(--blurple) 80%, transparent); } }.hero .v6-mockup-panel .v6-agent-action-name, .surface-beat--navigate .v6-mockup-panel .v6-agent-action-name{ font-family: var(--brand-font); font-size: 11px; font-weight: 700; color: var(--v6-ink); letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-agent-action-state, .surface-beat--navigate .v6-mockup-panel .v6-agent-action-state{ margin-left: auto; font-family: var(--brand-font); font-size: 9.5px; font-weight: 600; color: color-mix(in srgb, var(--blurple) 75%, var(--v6-ink)); letter-spacing: 0.02em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--blurple) 12%, transparent); }.hero .v6-mockup-panel .v6-agent-action-bubble, .surface-beat--navigate .v6-mockup-panel .v6-agent-action-bubble{ margin-top: 8px; display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; background: color-mix(in srgb, var(--main-bg-color) 60%, transparent); border-radius: 8px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); font-family: var(--brand-font); font-size: 10.5px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 78%, transparent); line-height: 1.4; letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-typing, .surface-beat--navigate .v6-mockup-panel .v6-typing{ display: inline-flex; align-items: center; gap: 3px; margin-top: 5px; flex-shrink: 0; }.hero .v6-mockup-panel .v6-typing-dot, .surface-beat--navigate .v6-mockup-panel .v6-typing-dot{ width: 4px; height: 4px; border-radius: 50%; background: var(--blurple); animation: v6TypingDot 1.2s ease-in-out infinite; }.hero .v6-mockup-panel .v6-typing-dot:nth-child(2), .surface-beat--navigate .v6-mockup-panel .v6-typing-dot:nth-child(2){ animation-delay: 0.15s; }.hero .v6-mockup-panel .v6-typing-dot:nth-child(3), .surface-beat--navigate .v6-mockup-panel .v6-typing-dot:nth-child(3){ animation-delay: 0.3s; } @keyframes v6TypingDot { 0%, 60%, 100% { opacity: 0.25; transform: scale(0.9); } 30% { opacity: 1; transform: scale(1.2); } } /* Role-viewing line was redundant with the persona-pill segments immediately below it (both convey "viewing as Host · Sarah K." vs the pill's "For Sarah · Host"). Hide to reclaim ~26px of header. */.hero .v6-mockup-panel .v6-stage-role, .surface-beat--navigate .v6-mockup-panel .v6-stage-role{ display: none; }.hero .v6-mockup-panel .v6-stage-role-legacy, .surface-beat--navigate .v6-mockup-panel .v6-stage-role-legacy{ display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); font-family: var(--brand-font); font-size: 9px; font-weight: 600; color: color-mix(in srgb, var(--v6-ink) 70%, transparent); letter-spacing: 0.01em; margin-top: 6px; }.hero .v6-mockup-panel .v6-stage-role::before, .surface-beat--navigate .v6-mockup-panel .v6-stage-role::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blurple); box-shadow: 0 0 4px color-mix(in srgb, var(--blurple) 60%, transparent); } /* Mobile — proportional shrink, single column not needed (tiles stay in row) */ @media (max-width: 720px) {.hero .v6-mockup-panel .v6-stage-header, .surface-beat--navigate .v6-mockup-panel .v6-stage-header{ padding: 8px 12px 0; }.hero .v6-mockup-panel .v6-stage-title, .surface-beat--navigate .v6-mockup-panel .v6-stage-title{ font-size: 16px; }.hero .v6-mockup-panel .v6-stage-desc, .surface-beat--navigate .v6-mockup-panel .v6-stage-desc{ font-size: 10.5px; }.hero .v6-mockup-panel .v6-stage-meta, .surface-beat--navigate .v6-mockup-panel .v6-stage-meta{ flex-wrap: wrap; margin: 0 12px; padding: 2px; }.hero .v6-mockup-panel .v6-meta-cell, .surface-beat--navigate .v6-mockup-panel .v6-meta-cell{ flex-basis: 33.33%; padding: 5px 4px; }.hero .v6-mockup-panel .v6-meta-cell + .v6-meta-cell, .surface-beat--navigate .v6-mockup-panel .v6-meta-cell + .v6-meta-cell{ border-left: none; }.hero .v6-mockup-panel .v6-stage-body, .surface-beat--navigate .v6-mockup-panel .v6-stage-body{ padding: 6px 12px 10px; gap: 6px; }.hero .v6-mockup-panel .v6-stage-section, .surface-beat--navigate .v6-mockup-panel .v6-stage-section{ padding: 16px 10px 6px; }.hero .v6-mockup-panel .v6-app-grid, .surface-beat--navigate .v6-mockup-panel .v6-app-grid{ gap: 12px; }.hero .v6-mockup-panel .v6-app-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-icon{ width: 36px; height: 36px; border-radius: 10px; }.hero .v6-mockup-panel .v6-app-tile-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-icon svg{ width: 18px; height: 18px; }.hero .v6-mockup-panel .v6-app-tile-label, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-label{ font-size: 9.5px; }.hero .v6-mockup-panel .v6-section-agents .v6-agents-status, .surface-beat--navigate .v6-mockup-panel .v6-section-agents .v6-agents-status{ display: none; } } /* ════════════════════════════════════════════════════════════════════ MOBILE PHASE OVERRIDES — must live at end of file so they win source order over the unconditional desktop CSN/SPD rules earlier in the stylesheet (equal-specificity rules lose to whichever comes last). ════════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { /* CSN picker — center the 3-tile picker as a clean vertical stack */.hero .v6-mockup-panel .v6-csn-picker, .surface-beat--navigate .v6-mockup-panel .v6-csn-picker{ inset: 12% 0 auto 0; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; padding: 0 14px; }.hero .v6-mockup-panel .v6-csn-eyebrow, .surface-beat--navigate .v6-mockup-panel .v6-csn-eyebrow{ display: block; font-size: 9.5px; margin-bottom: 4px; }.hero .v6-mockup-panel .v6-csn-columns, .surface-beat--navigate .v6-mockup-panel .v6-csn-columns{ flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; gap: 14px; }.hero .v6-mockup-panel .v6-csn-column, .surface-beat--navigate .v6-mockup-panel .v6-csn-column{ align-items: center; gap: 6px; min-width: 0; width: auto; }.hero .v6-mockup-panel .v6-csn-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-icon{ width: 48px; height: 48px; border-radius: 12px; }.hero .v6-mockup-panel .v6-csn-tile-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-icon svg{ width: 24px; height: 24px; }.hero .v6-mockup-panel .v6-csn-tile-label, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-label{ font-size: 11px; }.hero .v6-mockup-panel .v6-csn-agent, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent{ margin-top: 4px; padding: 4px 10px 4px 4px; }.hero .v6-mockup-panel .v6-csn-agent-icon, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent-icon{ width: 18px; height: 18px; }.hero .v6-mockup-panel .v6-csn-agent-label, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent-label{ font-size: 9.5px; } /* SPD — shrink the journey map so all 3 pills fit the 420px panel. Map pill goes 280px → 160px (chart 200→128, less padding). Top padding clears the 30px window-chrome + breathing room. */.hero .v6-mockup-panel .v6-spd, .surface-beat--navigate .v6-mockup-panel .v6-spd{ padding: 42px 12px 12px; gap: 6px; }.hero .v6-mockup-panel .v6-spd-map, .surface-beat--navigate .v6-mockup-panel .v6-spd-map{ padding: 10px 12px 12px; min-height: 0; }.hero .v6-mockup-panel .v6-spd-mini-chart, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-chart{ width: 150px; height: 150px; margin: 4px auto 0; overflow: visible; } /* Mobile pills on the ring stroke — chart is 150px (radius 75), ring stroke at ~73. Pill centers at r=73. 60° polar: x=±63, y=±37. */.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(1), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(1){ --mx: 0; --my: -73px; }.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(2), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(2){ --mx: 63px; --my: -37px; }.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(3), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(3){ --mx: 63px; --my: 37px; }.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(4), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(4){ --mx: 0; --my: 73px; }.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(5), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(5){ --mx: -63px; --my: 37px; }.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(6), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(6){ --mx: -63px; --my: -37px; }.hero .v6-mockup-panel .v6-spd-mini-node, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node{ width: 50px; height: 16px; margin-left: -25px; margin-top: -8px; font-size: 8px; border-width: 1px; }.hero .v6-mockup-panel .v6-spd-goals, .hero .v6-mockup-panel .v6-spd-directions, .surface-beat--navigate .v6-mockup-panel .v6-spd-goals, .surface-beat--navigate .v6-mockup-panel .v6-spd-directions{ padding: 8px 12px 10px; }.hero .v6-mockup-panel .v6-spd-list, .surface-beat--navigate .v6-mockup-panel .v6-spd-list{ gap: 2px; }.hero .v6-mockup-panel .v6-spd-list li, .surface-beat--navigate .v6-mockup-panel .v6-spd-list li{ font-size: 10px; padding: 1px 0; line-height: 1.25; }.hero .v6-mockup-panel .v6-spd-header, .surface-beat--navigate .v6-mockup-panel .v6-spd-header{ gap: 6px; }.hero .v6-mockup-panel .v6-spd-header-title, .surface-beat--navigate .v6-mockup-panel .v6-spd-header-title{ font-size: 11px; }.hero .v6-mockup-panel .v6-spd-footer, .surface-beat--navigate .v6-mockup-panel .v6-spd-footer{ font-size: 8.5px; margin-top: 0; } /* Drop "+2 more" footer on mobile to gain a line */.hero .v6-mockup-panel .v6-spd-goals .v6-spd-footer, .surface-beat--navigate .v6-mockup-panel .v6-spd-goals .v6-spd-footer{ display: none; } /* Stage 1 (Experience) content cards — title was wrapping awkwardly at 75px width. Shrink the title font + tighten so it reads cleanly. */.hero .v6-mockup-panel .v6-content-grid, .surface-beat--navigate .v6-mockup-panel .v6-content-grid{ gap: 6px; }.hero .v6-mockup-panel .v6-content-card, .surface-beat--navigate .v6-mockup-panel .v6-content-card{ padding: 6px; gap: 3px; }.hero .v6-mockup-panel .v6-content-title, .surface-beat--navigate .v6-mockup-panel .v6-content-title{ font-size: 9.5px; line-height: 1.15; }.hero .v6-mockup-panel .v6-content-meta, .surface-beat--navigate .v6-mockup-panel .v6-content-meta{ font-size: 8px; } /* Stage 5 (Success) KPIs — switch to 4-column at narrow width so all 4 KPIs (Adoption, NPS, Tickets, Renewal) sit on one row. */.hero .v6-mockup-panel .v6-kpis, .surface-beat--navigate .v6-mockup-panel .v6-kpis{ grid-template-columns: repeat(4, 1fr); gap: 5px; }.hero .v6-mockup-panel .v6-kpi, .surface-beat--navigate .v6-mockup-panel .v6-kpi{ padding: 6px; gap: 2px; }.hero .v6-mockup-panel .v6-kpi-label, .surface-beat--navigate .v6-mockup-panel .v6-kpi-label{ font-size: 7px; }.hero .v6-mockup-panel .v6-kpi-value, .surface-beat--navigate .v6-mockup-panel .v6-kpi-value{ font-size: 14px; }.hero .v6-mockup-panel .v6-kpi-trend, .surface-beat--navigate .v6-mockup-panel .v6-kpi-trend{ font-size: 8.5px; } /* Hide section labels on mobile — sections are too short, labels overlap the centered tiles. The tile rows are self-explanatory. */.hero .v6-mockup-panel .v6-stage-panel .v6-section-label, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel .v6-section-label{ display: none; }.hero .v6-mockup-panel .v6-stage-section, .surface-beat--navigate .v6-mockup-panel .v6-stage-section{ padding-top: 8px; } } /* ════════════════════════════════════════════════════════════════════ * SURFACE DESIGN SYSTEM — chart quadrants + proof stat cards * * Single premium-glass treatment shared across: * - 4 chart quadrants (cartesian chart on the problem section) * - 1 active CN quadrant (same family, more elevation) * - 5 proof stat cards (incl. the .proof-stat-emphasis 77% variant) * * Lives at the END of the file so it wins source order against all the * legacy gradient blocks scattered through lines 1389+, 1899+, 2050+, * 2432+ that hard-coded saturated purple + white text. Single source of * truth — modify here, not in the legacy locations. * ════════════════════════════════════════════════════════════════════ */ :root { --surface-glass-bg: color-mix(in srgb, var(--main-bg-color) 55%, transparent); --surface-glass-border: color-mix(in srgb, var(--inv-bg-color) 9%, transparent); --surface-glass-shadow: 0 1px 0 color-mix(in srgb, #fff 50%, transparent) inset, 0 6px 22px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); --surface-glass-shadow-hover: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, 0 14px 32px color-mix(in srgb, var(--inv-bg-color) 9%, transparent); --surface-glass-bg-active: radial-gradient(ellipse 75% 60% at 50% 45%, color-mix(in srgb, var(--blurple) 6%, transparent) 0%, transparent 80%), color-mix(in srgb, var(--blurple) 2.5%, var(--main-bg-color)); --surface-glass-border-active: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); --surface-glass-shadow-active: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, 0 18px 40px color-mix(in srgb, var(--inv-bg-color) 9%, transparent), 0 6px 14px color-mix(in srgb, var(--blurple) 8%, transparent); --surface-glass-shadow-active-hover: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, 0 26px 58px color-mix(in srgb, var(--inv-bg-color) 12%, transparent), 0 10px 22px color-mix(in srgb, var(--blurple) 11%, transparent); --surface-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ─── Inactive chart quadrants — bare base, soft wash on hover. * No border ever. Hover gets a subtle blurple-tinted background + * faint shadow so it reads as "highlighted" without adding chrome. */ .cartesian-chart .chart-quadrant { background: transparent !important; border: none !important; border-radius: 12px !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: background 320ms var(--surface-ease), box-shadow 320ms var(--surface-ease), opacity 320ms ease !important; } .cartesian-chart .chart-quadrant:hover { transform: none; background: color-mix(in srgb, var(--blurple) 4%, transparent) !important; border-color: transparent !important; box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--blurple) 16%, transparent) !important; opacity: 1 !important; filter: none !important; } .cartesian-chart .quadrant-transactional, .cartesian-chart .quadrant-mass-custom, .cartesian-chart .quadrant-buyer-orchestration { opacity: 0.85 !important; filter: none !important; } .cartesian-chart .quadrant-transactional:hover, .cartesian-chart .quadrant-mass-custom:hover, .cartesian-chart .quadrant-buyer-orchestration:hover { opacity: 1 !important; filter: none !important; } /* ─── Proof stat cards — glass treatment (the cards earn it; the * cartesian quadrants don't). */ .proof-section .proof-stat-card { background: var(--surface-glass-bg) !important; border: 1px solid var(--surface-glass-border) !important; border-radius: 16px !important; box-shadow: var(--surface-glass-shadow) !important; backdrop-filter: blur(14px) saturate(1.15) !important; -webkit-backdrop-filter: blur(14px) saturate(1.15) !important; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1), border-color 320ms ease !important; } .proof-section .proof-stat-card:hover { transform: translateY(-2px); box-shadow: var(--surface-glass-shadow-hover) !important; border-color: color-mix(in srgb, var(--inv-bg-color) 14%, transparent) !important; background: var(--surface-glass-bg) !important; } /* ─── Active CN quadrant — same neutral hairline as proof cards (1px, * tinted with ink not blurple) so the family reads as one design system. * Background is a barely-there blurple wash; saturation lives in the * canonical CN gradient (text/marks), not the surface. */ .cartesian-chart .chart-quadrant.active-quadrant, .cartesian-chart .chart-quadrant.quadrant-customernode.active-quadrant { background: var(--surface-glass-bg-active) !important; border: 1px solid var(--surface-glass-border-active) !important; border-radius: 16px !important; box-shadow: var(--surface-glass-shadow-active) !important; backdrop-filter: blur(14px) saturate(1.1) !important; -webkit-backdrop-filter: blur(14px) saturate(1.1) !important; transition: transform 420ms var(--surface-ease), box-shadow 420ms var(--surface-ease), border-color 320ms ease, background 320ms ease !important; will-change: transform; } .cartesian-chart .chart-quadrant.active-quadrant:hover, .cartesian-chart .chart-quadrant.quadrant-customernode.active-quadrant:hover, .cartesian-chart .chart-quadrant.quadrant-customernode:hover { transform: translate(8px, -10px) scale(1.022); background: var(--surface-glass-bg-active) !important; border-color: color-mix(in srgb, var(--inv-bg-color) 16%, transparent) !important; box-shadow: var(--surface-glass-shadow-active-hover) !important; } /* ─── Text colors — softened ink on these surfaces ────────────────── * Solid black on the glass cards reads as heavy/aggressive. Softened * by mixing 6% blurple into the ink, which adds a faint blue undertone * that reads as premium-financial (Bloomberg, Stripe Press) instead of * default-system-black. The legacy `color: #fff !important` rules * (lines 2050, 2055, 2072, 2434, 2439) are overridden here. */ .cartesian-chart .active-quadrant .quadrant-title, .cartesian-chart .quadrant-customernode .quadrant-title, .cartesian-chart .quadrant-customernode:hover .quadrant-title { color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)) !important; -webkit-text-fill-color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)) !important; opacity: 0.92 !important; } .cartesian-chart .active-quadrant .quadrant-meta, .cartesian-chart .quadrant-customernode .quadrant-meta, .cartesian-chart .quadrant-customernode:hover .quadrant-meta { color: color-mix(in srgb, var(--inv-bg-color) 52%, transparent) !important; -webkit-text-fill-color: color-mix(in srgb, var(--inv-bg-color) 52%, transparent) !important; } .cartesian-chart .active-quadrant .quadrant-nodes, .cartesian-chart .quadrant-customernode .quadrant-nodes, .cartesian-chart .quadrant-customernode:hover .quadrant-nodes, .cartesian-chart .active-quadrant .quadrant-line, .cartesian-chart .quadrant-customernode .quadrant-line, .cartesian-chart .quadrant-customernode:hover .quadrant-line, .cartesian-chart .active-quadrant .chart-node, .cartesian-chart .quadrant-customernode .chart-node { color: color-mix(in srgb, var(--inv-bg-color) 78%, var(--blurple) 10%) !important; -webkit-text-fill-color: color-mix(in srgb, var(--inv-bg-color) 78%, var(--blurple) 10%) !important; } /* The general hover rule was opacity-toggling .quadrant-meta / * .quadrant-nodes (0 → 0.65/0.9). Keep that intent — these don't show * until hovered — but on the active quadrant, they're always visible. */ .cartesian-chart .active-quadrant .quadrant-meta, .cartesian-chart .active-quadrant .quadrant-nodes { opacity: 1 !important; } /* ─── Proof stat card sizing + text on the glass surface ─────────── */ .proof-section .proof-stat-card { padding: 1.5rem 1.25rem !important; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1), border-color 320ms ease !important; } /* Stat values: softer ink with faint blurple undertone. Solid pure * black read as heavy/aggressive at 3rem; the slight blue mix gives * the numbers a premium-financial feel without going full gradient. */ .proof-section .proof-stat-card .proof-stat-value { color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)) !important; -webkit-text-fill-color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)) !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; } /* The 77% emphasis card matches every other stat — same surface, same * text. Emphasis comes from position (first in grid). */ .proof-section .proof-stat-card.proof-stat-emphasis { background: var(--surface-glass-bg) !important; border: 1px solid var(--surface-glass-border) !important; border-radius: 16px !important; box-shadow: var(--surface-glass-shadow) !important; } .proof-section .proof-stat-card.proof-stat-emphasis .proof-stat-value { color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)) !important; -webkit-text-fill-color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)) !important; filter: none !important; } .proof-section .proof-stat-card.proof-stat-emphasis .proof-stat-label { color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent) !important; font-weight: 500 !important; } /* ════════════════════════════════════════════════════════════════════ SURFACE JOURNEY — Create / Share / Navigate. Sticky-aside scroll pattern. The aside (left column) pins as the user scrolls and holds the section's editorial moment ("Can't buy now? Journey now.") + the live "Now showing" tracker. The right column scrolls through three beats — Create, Share, Navigate. ════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ "Can't buy now? Journey now." — EPIC REVEAL Full-width editorial interstitial between proof stats and beats. Uses the v6_reveals.js is-visible hook for per-line @keyframe animations: ambient glow blooms first, line 1 fades up, line 2 punches in from scale with a brief gradient glow flare. ════════════════════════════════════════════════════════════════════ */ .journey-interstitial { position: relative; padding: clamp(72px, 10vw, 128px) clamp(20px, 4vw, 56px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 2vw, 28px); text-align: center; overflow: visible; } /* Neutralise the generic .reveal on the container — we animate * children directly; the wrapper must stay fully visible as an anchor. */ .journey-interstitial.reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } /* ── Ambient glow bloom ──────────────────────────────────────────── * Blooms behind the text during the reveal, then settles to a soft * halo that frames the section. */ .journey-interstitial::before { content: ''; position: absolute; inset: -100px -140px; background: radial-gradient( ellipse 75% 65% at 50% 58%, color-mix(in srgb, var(--blurple) 20%, transparent), color-mix(in srgb, var(--purple) 10%, transparent) 42%, transparent 68% ); opacity: 0; pointer-events: none; z-index: -1; } .journey-interstitial.is-visible::before { animation: _jiGlow 2200ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both; } /* ── Lines start invisible ─────────────────────────────────────── */ .journey-interstitial .surface-bridge-line--top, .journey-interstitial .surface-bridge-line--bottom { opacity: 0; } /* Line 1 — elegant fade-and-lift */ .journey-interstitial.is-visible .surface-bridge-line--top { animation: _jiLine1 960ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both; } /* Line 2 — cinematic scale-punch with gradient glow flare on landing */ .journey-interstitial.is-visible .surface-bridge-line--bottom { animation: _jiLine2 1080ms cubic-bezier(0.16, 1, 0.3, 1) 340ms both; } @keyframes _jiGlow { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0.6; } } @keyframes _jiLine1 { from { opacity: 0; transform: translateY(30px); filter: blur(10px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: none; } } @keyframes _jiLine2 { 0% { opacity: 0; transform: scale(1.18) translateY(38px); filter: blur(14px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--blurple) 20%, transparent)); } } .journey-interstitial .surface-journey-bridge { font-size: clamp(42px, 5.5vw, 72px); } /* ── Flow hint: 01 Create → 02 Share → 03 Navigate ───────────── */ .journey-flow-hint { display: flex; align-items: center; opacity: 0; } .journey-interstitial.is-visible .journey-flow-hint { animation: _jiLine1 960ms cubic-bezier(0.16, 1, 0.3, 1) 900ms both; } .jfh-step { display: flex; align-items: baseline; gap: 5px; font-size: clamp(11px, 1vw, 13px); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); } .jfh-num { font-style: normal; font-size: clamp(11px, 1vw, 13px); font-weight: 500; letter-spacing: 0.04em; color: var(--blurple); opacity: 0.75; } .jfh-arrow { display: block; width: 28px; height: 1px; background: color-mix(in srgb, var(--inv-bg-color) 18%, transparent); margin: 0 8px; position: relative; flex-shrink: 0; } .jfh-arrow::after { content: ''; position: absolute; right: -1px; top: -3px; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid color-mix(in srgb, var(--inv-bg-color) 18%, transparent); border-right: none; } /* Reduced-motion: skip animation, show text immediately. */ @media (prefers-reduced-motion: reduce) { .journey-interstitial .surface-bridge-line--top, .journey-interstitial .surface-bridge-line--bottom { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; } .journey-interstitial .journey-flow-hint { opacity: 1 !important; animation: none !important; } .journey-interstitial::before { opacity: 0.5 !important; animation: none !important; } } .surface-journey { position: relative; /* Section sizes to its content (bridge column + gap + panel) and * centers via auto margins. The panel width is JS-driven to match * the hero, so a fixed max-width here leaves dead space on either * side of the panel inside the timeline column. */ width: fit-content; max-width: 100%; margin: 0 auto; } .surface-journey::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); pointer-events: none; } .surface-journey { /* Bottom padding tuned to fit the Navigate panel's 64/140 box-shadow * (~200px fade tail). Without this, the next section's solid * background paints over the shadow and creates a hard line under * the panel. */ padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 56px) clamp(160px, 16vw, 240px); /* No overflow on any of these — sticky needs the chain clean. */ } .surface-journey-body { position: relative; display: grid; grid-template-columns: auto auto; gap: clamp(40px, 4vw, 72px); align-items: start; } /* ─── Sticky aside: bridge headline + tracker, pinned. ─────────────── */ .surface-journey-aside { position: sticky; top: 96px; align-self: start; z-index: 5; } .surface-journey-aside-inner { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); max-width: 300px; } /* Bridge — the section's editorial headline, now inside the aside. * Smaller than the giant centered version that lived above the grid. * Max size tuned so each line ("Can't buy now?" / "Journey now.") * stays on a single line within the sticky-aside column. */ .surface-journey-bridge { font-size: clamp(32px, 3.4vw, 46px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin: 0; display: flex; flex-direction: column; gap: clamp(2px, 0.3vw, 6px); } .surface-bridge-line { display: block; white-space: nowrap; } .surface-bridge-line--top { color: color-mix(in srgb, var(--inv-bg-color) 92%, var(--blurple)); font-weight: 500; opacity: 0.72; } .surface-bridge-line--bottom { background: linear-gradient(135deg, var(--blurple), var(--purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } /* ─── Tracker — "Now showing: Create / 01 of 03" beneath the bridge. */ .surface-tracker { padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); } /* When tracker is the sole aside element (bridge moved to interstitial) */ .surface-tracker--standalone { padding-top: 0; border-top: none; min-width: 180px; } .surface-tracker-label { display: block; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); margin-bottom: 10px; } .surface-tracker-text { display: block; font-size: clamp(42px, 4.8vw, 62px); font-weight: 700; letter-spacing: -0.03em; color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)); line-height: 1.1; white-space: nowrap; min-width: 10ch; transition: opacity 220ms ease, transform 320ms var(--surface-ease, cubic-bezier(0.22, 1, 0.36, 1)); } .surface-tracker-text.is-changing { opacity: 0; transform: translateY(-4px); } @keyframes _trackerSlideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .surface-tracker-text.is-entering { animation: _trackerSlideIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both; } .surface-tracker-subtext { display: block; margin: 6px 0 0; font-size: clamp(13px, 1.2vw, 16px); font-weight: 400; line-height: 1.5; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); max-width: 26ch; transition: opacity 220ms ease, transform 320ms var(--surface-ease, cubic-bezier(0.22, 1, 0.36, 1)); } .surface-tracker-subtext.is-changing { opacity: 0; transform: translateY(-4px); } .surface-tracker-subtext.is-entering { animation: _trackerSlideIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both; } .surface-tracker-text-mobile { transition: opacity 220ms ease; } .surface-tracker-text-mobile.is-changing { opacity: 0; } .surface-tracker-text-mobile.is-entering { animation: _trackerSlideIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both; } .surface-tracker-bar { display: flex; gap: 4px; margin-top: 16px; } .surface-tracker-bar > span { flex: 1; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--inv-bg-color) 9%, transparent); transition: background 360ms var(--surface-ease, cubic-bezier(0.22, 1, 0.36, 1)); } .surface-tracker-bar > span.is-on { background: linear-gradient(135deg, var(--blurple), var(--purple)); } .surface-tracker-count { display: block; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11px; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); letter-spacing: 0.08em; margin-top: 10px; } /* Mobile sticky pill — hidden on desktop, shown below the nav on * narrow viewports. */ .surface-tracker-mobile { display: none; } /* ─── Timeline column: three beats stacked vertically. ─────────────── */ .surface-journey-timeline { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 112px); min-width: 0; max-width: 400px; } .surface-stop { position: relative; min-width: 0; transition: opacity 600ms ease, filter 600ms ease; } .surface-stop:not(.is-current) { opacity: 0.38; filter: blur(1.5px); } .surface-stop.is-current { opacity: 1; filter: none; } /* ─── Beat: one of the three (Create, Share, Navigate). ────────────── */ .surface-beat { position: relative; padding: 0; } /* Cap the beat's inner content wrapper to the same max-width as surface-beat-mockup-panel so nothing (eyebrow, tabs, caption) overflows wider than the demo panel. */ .surface-beat > .max-w-7xl { max-width: min(100%, 400px); } .surface-beat-header { margin-bottom: clamp(24px, 3vw, 36px); } .beat-mockup-caption { margin: 0 0 clamp(20px, 2.4vw, 28px); font-size: clamp(12px, 1.1vw, 14px); font-weight: 400; line-height: 1.5; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); max-width: min(100%, 400px); text-align: left; } .surface-beat-eyebrow { display: block; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: clamp(10px, 0.95vw, 12px); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--blurple) 65%, var(--inv-bg-color)); margin-bottom: clamp(8px, 1vw, 12px); } .surface-beat-headline { font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 6px; color: color-mix(in srgb, var(--inv-bg-color) 92%, var(--blurple)); max-width: 36ch; } .surface-beat-subtext { font-size: clamp(13px, 1.1vw, 15px); font-weight: 400; line-height: 1.5; margin: 0; color: color-mix(in srgb, var(--inv-bg-color) 52%, transparent); max-width: 32ch; } .surface-beat--navigate .surface-beat-headline { text-rendering: optimizeLegibility; } /* ─── Surface frame: single quiet glass card holding the demo. * No chrome bar. No traffic-light dots. No tab bar above. The demo * lives directly inside, on the same light surface family as the * proof stat cards and the CN quadrant — one design system. */ .surface-frame { position: relative; background: var(--surface-glass-bg, color-mix(in srgb, var(--main-bg-color) 60%, transparent)); border: 1px solid var(--surface-glass-border, color-mix(in srgb, var(--inv-bg-color) 10%, transparent)); border-radius: 18px; box-shadow: 0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset, 0 24px 56px color-mix(in srgb, var(--inv-bg-color) 8%, transparent), 0 8px 18px color-mix(in srgb, var(--inv-bg-color) 5%, transparent); backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15); padding: clamp(20px, 2.4vw, 32px); overflow: hidden; } /* Hidden JS-compat shell for the icons + label + nav buttons the * existing tool-switching code still references via .ai-tool-label, * .ai-header-icon, .ai-flow-nav-btn. The tool picker itself is gone; * the demo defaults to AI Creator. */ .surface-frame .ai-tool-compat, .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* ─── Legacy demo internals re-skinned for light surface. ──────────── */ .surface-beat--create .editor-flow-view { gap: 1rem; } .surface-beat--create .editor-prompt-bar { background: color-mix(in srgb, var(--main-bg-color) 92%, transparent) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent) !important; border-radius: 12px !important; padding: 14px 16px !important; min-height: 0 !important; display: flex; flex-direction: column; gap: 6px; } .surface-beat--create .surface-prompt-label { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--blurple) 70%, var(--inv-bg-color)); } .surface-beat--create .ai-prompt-display, .surface-beat--create .surface-prompt-display { color: color-mix(in srgb, var(--inv-bg-color) 88%, var(--blurple)) !important; background: transparent !important; padding: 0 !important; border: none !important; font-size: 15px; line-height: 1.5; min-height: 22px; } .surface-beat--create .ai-prompt-text { color: color-mix(in srgb, var(--inv-bg-color) 88%, var(--blurple)) !important; } .surface-beat--create .ai-prompt-caret { background: var(--blurple) !important; color: var(--blurple) !important; } .surface-beat--create .editor-circle-chart--lg { filter: none !important; width: clamp(200px, 22vw, 260px) !important; height: clamp(200px, 22vw, 260px) !important; } .surface-beat--create .editor-circle-ring .ring-track { stroke: color-mix(in srgb, var(--inv-bg-color) 12%, transparent) !important; } .surface-beat--create .editor-circle-chart .editor-circle-center { color: color-mix(in srgb, var(--inv-bg-color) 85%, var(--blurple)) !important; } .surface-beat--create .ai-process-log { background: color-mix(in srgb, var(--main-bg-color) 70%, transparent) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent) !important; border-radius: 12px !important; } .surface-beat--create .ai-process-log-header { border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent) !important; padding: 12px 16px !important; } .surface-beat--create .ai-process-log-title { color: color-mix(in srgb, var(--inv-bg-color) 78%, var(--blurple)) !important; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; } .surface-beat--create .ai-process-log-status { color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent) !important; font-size: 11px; } .surface-beat--create .ai-log-pulse { background: var(--blurple) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blurple) 18%, transparent) !important; } .surface-beat--create .ai-process-log-body { color: color-mix(in srgb, var(--inv-bg-color) 72%, transparent) !important; } /* ═══ Mobile: collapse grid to single column, swap aside for sticky pill. */ @media (max-width: 979px) { .surface-journey-body { grid-template-columns: 1fr; gap: 24px; } .surface-journey-aside { display: none; } .surface-tracker-mobile { display: flex; align-items: center; gap: 10px; position: sticky; top: 64px; z-index: 20; margin: 12px -16px; padding: 10px 16px; background: color-mix(in srgb, var(--main-bg-color) 88%, transparent); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } .surface-tracker-text-mobile { font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 88%, var(--blurple)); white-space: nowrap; } .surface-tracker-bar-mobile { flex: 1; margin: 0; } .surface-tracker-mobile .surface-tracker-count { margin: 0; font-size: 10px; flex-shrink: 0; } .surface-beat--create .editor-flow-body, .surface-beat--create .creator-two-col { flex-direction: column !important; align-items: stretch !important; } .surface-beat--create .editor-circle-column { width: 100% !important; align-items: center !important; } } /* ════════════════════════════════════════════════════════════════════ STICKY FIX — .body-wrap (tidyTemplate.css L3115) has overflow:hidden, which silently kills position:sticky for every descendant. Replace with overflow:clip — same overflow-clipping behavior, but does NOT create a scroll container, so sticky works through it. Scoped to the v6 page via the index_v6.css load order. ════════════════════════════════════════════════════════════════════ */ .body-wrap { overflow: clip !important; overflow-x: clip !important; overflow-y: clip !important; } /* ════════════════════════════════════════════════════════════════════ BEAT 2 (Share) + BEAT 3 (Navigate) — same eyebrow + headline opener as Beat 1. Plus light-theme overrides on the most jarring legacy dark elements so the three beats finally read as one family. The inner demo logic stays intact; only the surrounding chrome gets retinted. ════════════════════════════════════════════════════════════════════ */ /* Share: kill the dark .share-bg layer and drop the dark .share-copy / * .share-description text colors. */ .surface-beat--share .share-bg { display: none !important; } .surface-beat--share { background: transparent !important; } .surface-beat--share .share-description, .surface-beat--share .share-copy { color: color-mix(in srgb, var(--inv-bg-color) 70%, transparent) !important; } /* Navigate: same — drop any dark background or saturated overlay. */ .surface-beat--navigate { background: transparent !important; } /* Both beats: align inner content header to the page rhythm. The * legacy sections each used their own heading; * those nodes are gone, replaced with .surface-beat-header above. */ /* ════════════════════════════════════════════════════════════════════ TEMPLATE GALLERY — uses the existing .template-card visual (same one used in Share Step 1) as static gallery entries. Cards arrange in a responsive grid; each card has the circular stage-ring preview already styled by the legacy CSS. ════════════════════════════════════════════════════════════════════ */ .template-gallery-section { position: relative; padding: clamp(72px, 9vw, 128px) clamp(20px, 4vw, 56px) clamp(80px, 10vw, 140px); background: radial-gradient(ellipse 60% 40% at 50% 20%, color-mix(in srgb, var(--blurple) 3.5%, transparent) 0%, transparent 70%), var(--main-bg-color); } .template-gallery-inner { max-width: 1240px; margin: 0 auto; } .template-gallery-header { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); } /* Reuse the same eyebrow chip + headline pattern as the beats so the * gallery reads as one more sibling moment, not a separate section. */ .template-gallery-header .surface-beat-eyebrow { margin-bottom: 14px; } .template-gallery-header .surface-beat-headline { max-width: none; margin: 0 auto; } /* Grid of cards. Auto-fill at 220px min so we get 4–5 per row on * desktop, 2 on tablet, 1 on phone. */ .template-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(14px, 1.4vw, 22px); } /* The static gallery variant of .template-card. Inherits all the * stage-ring SVG sizing from the legacy .template-card rules; this * just adds the surface treatment and hover state. */ .template-card--gallery { text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 22px 16px 20px; background: var(--surface-glass-bg, color-mix(in srgb, var(--main-bg-color) 60%, transparent)); border: 1px solid var(--surface-glass-border, color-mix(in srgb, var(--inv-bg-color) 10%, transparent)); border-radius: 16px; box-shadow: var(--surface-glass-shadow, 0 6px 22px color-mix(in srgb, var(--inv-bg-color) 6%, transparent)); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); cursor: pointer; transition: transform 320ms var(--surface-ease, cubic-bezier(0.22, 1, 0.36, 1)), border-color 280ms ease, box-shadow 320ms var(--surface-ease, cubic-bezier(0.22, 1, 0.36, 1)); /* Reset any legacy state classes that may apply (.is-active / * .template-folder etc.) — gallery cards are inert. */ opacity: 1 !important; } .template-card--gallery:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--blurple) 28%, transparent); box-shadow: var(--surface-glass-shadow-hover, 0 14px 32px color-mix(in srgb, var(--inv-bg-color) 10%, transparent)); } .template-card--gallery .template-icon { width: clamp(96px, 12vw, 128px); height: clamp(96px, 12vw, 128px); position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .template-card--gallery .template-icon .template-circle-bg, .template-card--gallery .template-icon .template-circle-stages { position: absolute; inset: 0; width: 100%; height: 100%; } .template-card--gallery .template-icon .template-folder-icon { width: 50%; height: 50%; position: static; } .template-card--gallery .template-info { width: 100%; } .template-card--gallery .template-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)); margin-bottom: 4px; } .template-card--gallery .template-stages { font-size: 12px; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing: 0.04em; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); } /* Hide any "Selected" badge if it leaks from the source markup. */ .template-card--gallery .template-selected-badge { display: none; } /* ════════════════════════════════════════════════════════════════════ SHARED TABS — used by both Beat 1 (Create: Creator/Editor/Coach) and Beat 3 (Navigate: 3 example journeys). Segmented-control style with subtle elevated active state. Buttons inside also carry the legacy .ai-tool-card / .navigate-journey-card class so existing click handlers still fire and switch the demo views. ════════════════════════════════════════════════════════════════════ */ .surface-frame-tabs { display: flex !important; flex-direction: row !important; gap: 4px !important; padding: 5px; margin-bottom: clamp(18px, 2vw, 24px); background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border-radius: 12px; overflow-x: auto; scrollbar-width: none; } .surface-frame-tabs::-webkit-scrollbar { display: none; } .surface-frame-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; flex: 1; min-width: max-content; background: transparent; border: none; border-radius: 9px; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); cursor: pointer; white-space: nowrap; transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease; /* Reset legacy .navigate-journey-card / .ai-tool-card hover/border * leftovers that might bleed in from older CSS. */ text-align: center; aria-checked: false; } .surface-frame-tab:hover { color: color-mix(in srgb, var(--inv-bg-color) 80%, var(--blurple)); background: color-mix(in srgb, var(--main-bg-color) 50%, transparent); } .surface-frame-tab.is-active { background: color-mix(in srgb, var(--main-bg-color) 92%, transparent); color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)); box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, 0 2px 8px color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } .surface-frame-tab-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); transition: color 220ms ease; /* Drop any legacy circular bg from .stage-icon variants — we just * want the SVG showing inline next to the label. */ background: transparent !important; border-radius: 0 !important; padding: 0 !important; } .surface-frame-tab-icon svg { display: block; width: 100%; height: 100%; } .surface-frame-tab.is-active .surface-frame-tab-icon { color: var(--blurple); } /* When .surface-frame-tabs lives DIRECTLY inside .surface-frame (Beat 1 * case), it sits flush against the body with no extra spacing. */ .surface-frame > .surface-frame-tabs { margin: 0 0 clamp(18px, 2vw, 24px); } /* Navigate variant: tabs sit ABOVE the visualization (no surface-frame * wrapper around them on Beat 3). Add the same max-width container as * the visualization so they align. */ .surface-frame-tabs--navigate { max-width: 640px; margin-left: auto; margin-right: auto; } /* Navigate stage wrap — replaces the legacy 2-col grid. Centered, * generous breathing room around the ring. */ .navigate-stage-wrap { position: relative; display: flex; justify-content: center; align-items: center; margin-top: clamp(20px, 2.4vw, 32px); } /* ════════════════════════════════════════════════════════════════════ TAB CONSISTENCY — Beat 1 and Beat 3 both wrap their tabs+content in a .surface-frame. Remove the standalone Beat 3 variant override that capped tab width to 640px (no longer needed). The tabs fill the frame width on both beats now. ════════════════════════════════════════════════════════════════════ */ .surface-frame-tabs--navigate { /* Reset the old standalone constraints — now lives inside .surface-frame. */ max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* ════════════════════════════════════════════════════════════════════ .v6-beat-selector — slim chip row sitting directly above the v6-mockup-panel traffic-light container. Replaces the .surface-frame tab bar so the panel can stand on its own without an outer frame wrapper. Used by Beat 1 (Create) and Beat 3 (Navigate); Beat 2 (Share) uses its own .demo-progress-bar in the same slot. ════════════════════════════════════════════════════════════════════ */ .v6-beat-selector { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin: 0 0 clamp(12px, 1.4vw, 20px); padding: 4px; background: color-mix(in srgb, var(--main-bg-color) 50%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border-radius: 999px; width: max-content; max-width: 100%; } .v6-beat-selector .surface-frame-tab { padding: 6px 14px !important; border-radius: 999px !important; font-size: 12.5px !important; line-height: 1.2; gap: 6px; } .v6-beat-selector .surface-frame-tab-icon, .v6-beat-selector .surface-frame-tab-icon svg { width: 13px !important; height: 13px !important; } .v6-beat-selector .surface-frame-tab-label { font-weight: 600; letter-spacing: 0.01em; } @media (max-width: 720px) { .v6-beat-selector { gap: 4px; padding: 3px; } .v6-beat-selector .surface-frame-tab { padding: 5px 10px !important; font-size: 11.5px !important; } } /* surface-frame-body inside Beat 3 (Navigate) doesn't need vertical * padding — the ring + progress card have their own breathing room. */ .surface-beat--navigate .surface-frame-body { padding: 0; min-height: 0; } /* ════════════════════════════════════════════════════════════════════ NAVIGATE RING POLISH — bring the ring closer to the hero's motion language. Lighter overall feel, cleaner glow, more visible active stage. Hide the legacy chevron nav arrows that fight the tab UI. ════════════════════════════════════════════════════════════════════ */ /* Drop the legacy ring-nav-chevron arrows — tabs replace them. */ .surface-beat--navigate .navigator-ring .ring-nav-chevron { display: none !important; } /* Stage the ring inside the frame body with generous padding around it * so the glow + motes have room to bleed before the frame edge. */ .surface-beat--navigate .navigate-stage-wrap { padding: clamp(32px, 4vw, 56px) clamp(16px, 2vw, 32px); background: radial-gradient(ellipse 60% 50% at 50% 50%, color-mix(in srgb, var(--blurple) 4%, transparent) 0%, transparent 75%), transparent; } /* Soften the ring's outer drop-shadow so it doesn't feel heavy on * the light surface. */ .surface-beat--navigate .navigator-ring { filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--inv-bg-color) 8%, transparent)) drop-shadow(0 0 80px color-mix(in srgb, var(--blurple) 9%, transparent)); } /* Beat 3 visualization tightens — the journey-viz containers stack * cleanly inside the frame body. */ .surface-beat--navigate .navigate-journey-viz { display: none; transition: opacity 320ms ease; } .surface-beat--navigate .navigate-journey-viz.is-active { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 2.4vw, 32px); width: 100%; } /* Smooth journey transition — when user switches tabs, the new ring * fades in rather than popping. */ .surface-beat--navigate #navigate-visualization { transition: opacity 280ms ease; } /* ════════════════════════════════════════════════════════════════════ NAVIGATE TAB CONSISTENCY — kill the legacy .navigate-journey-card + .stage-icon--* styling that bleeds into the new tab UI. The legacy card was a 14px-padded glass card with 3rem circular gradient stage badges, inactive opacity 0.55, translateX hover, and a :has() rule that blurs sibling cards on hover. None of that belongs on a segmented-control tab. Match Beat 1's tab look exactly. ════════════════════════════════════════════════════════════════════ */ /* Reset legacy .navigate-journey-card styling on tabs. */ .surface-frame-tab.navigate-journey-card { padding: 9px 14px !important; border: none !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; } .surface-frame-tab.navigate-journey-card:hover { transform: none !important; background: color-mix(in srgb, var(--main-bg-color) 50%, transparent) !important; border-color: transparent !important; box-shadow: none !important; } .surface-frame-tab.navigate-journey-card.is-active { background: color-mix(in srgb, var(--main-bg-color) 92%, transparent) !important; border: none !important; box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, 0 2px 8px color-mix(in srgb, var(--inv-bg-color) 8%, transparent) !important; } .surface-frame-tab.navigate-journey-card:not(.is-active) { opacity: 1 !important; filter: none !important; } /* Defuse the :has() sibling-blur rule that scopes off * .navigate-journey-selector. When the selector ALSO has the new * .surface-frame-tabs class, the selector-blur is wrong. */ .surface-frame-tabs.navigate-journey-selector:has(.surface-frame-tab:hover) .surface-frame-tab:not(:hover):not(.is-active) { opacity: 1 !important; filter: none !important; } /* Reset legacy .stage-icon--* gradient badge styling on tab icons. */ .surface-frame-tab-icon.stage-icon, .surface-frame-tab-icon.stage-icon--discovery, .surface-frame-tab-icon.stage-icon--experience, .surface-frame-tab-icon.stage-icon--scope, .surface-frame-tab-icon.stage-icon--commit, .surface-frame-tab-icon.stage-icon--deploy { width: 16px !important; height: 16px !important; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; color: inherit !important; } /* ════════════════════════════════════════════════════════════════════ BEAT 3 JOURNEY FLOW PANELS — three v6-mockup-panels (one per journey) sit inside .navigate-mockup-host. Only the one with .is-active-flow shows; the others collapse out. JS toggles the class on tab click. ════════════════════════════════════════════════════════════════════ */ .navigate-mockup-host { position: relative; } .navigate-mockup-host > .v6-mockup-panel { display: none; } .navigate-mockup-host > .v6-mockup-panel.is-active-flow { display: block; } /* ════════════════════════════════════════════════════════════════════ BEAT 3 — give v6-mockup-panel explicit dimensions. In the hero, the panel inherits height from class-section-287 (min-height:100vh). In Beat 3 it sits inside .surface-frame-body (content-sized) so the panel collapses to ~30px and all the absolute- positioned content (ring, stage-panels) has nowhere to render. Pin a desktop size that matches the hero proportions; stack vertically on mobile. ════════════════════════════════════════════════════════════════════ */ .surface-beat--navigate .navigate-mockup-host { position: relative; width: 100%; } /* ─── Navigate gradient — relocated from inside the panel to the host. * * The original .v6-mockup-glow sits inside .v6-mockup-panel with * `inset: -8%` — designed to extend 8% past the panel edge. But the * navigate panel has `overflow: hidden !important` (scrollbar * suppression — line 24288), which clips that overflow and makes the * gradient stop hard at the panel border. * * Fix: kill the clipped internal glow and paint the SAME gradient on * the host (which has overflow:visible). Same numbers as the source * rule at line 16670 — no intensity change, just a different host. */ .surface-beat--navigate .v6-mockup-panel > .v6-mockup-glow { display: none !important; } .surface-beat--navigate .navigate-mockup-host::before { content: ''; position: absolute; /* Big inset so the bloom actually extends well past the panel. * Gradient centers are deliberately placed OUTSIDE the host bounds * (negative / >100% positions) so the brightest part of each * radial sits beyond the panel corner and the bloom naturally * spills inward toward the panel — instead of being contained * inside it like a backdrop. That's what gives Create/Share their * "flourishing" feel by accident of geometry; here we do it on * purpose. */ inset: -35% -28%; background: radial-gradient(50% 50% at 110% -10%, color-mix(in srgb, var(--purple) 26%, transparent), transparent 70%), radial-gradient(50% 50% at -10% 110%, color-mix(in srgb, var(--blurple) 24%, transparent), transparent 70%); filter: blur(70px); z-index: -1; pointer-events: none; opacity: 1; } .surface-beat--navigate .navigate-mockup-host > .v6-mockup-panel { /* Dimensions are set by JS (syncBeat3PanelSizeToHero in * v6_navigate_flow.js) which copies the live hero panel's * width + height onto each Beat 3 panel and re-syncs on resize. * That guarantees EXACT same size as the hero. CSS only handles * centering and a baseline fallback before JS runs. */ margin: 0 auto; min-height: 400px; /* fallback before JS sync runs */ } @media (max-width: 720px) { /* Mobile rule already exists upstream sizing the panel from viewport * units; just override our desktop aspect-ratio so it can take over. */ .surface-beat--navigate .navigate-mockup-host > .v6-mockup-panel { max-width: none; aspect-ratio: auto; min-height: 0; } } /* ════════════════════════════════════════════════════════════════════ .surface-beat-mockup-panel — shared traffic-light container styling for Beat 1 (Create) and Beat 2 (Share). Mirrors the .v6-mockup-panel chrome used by the hero and Beat 3 (Navigate) so all three beats read as the same "real product window" surface. Sizing is JS-driven via syncAllBeatPanelsToHero so widths track the hero exactly. ════════════════════════════════════════════════════════════════════ */ .surface-beat-mockup-panel { position: relative; padding: clamp(18px, 2.6vw, 32px); padding-top: calc(clamp(18px, 2.6vw, 32px) + 24px); border-radius: clamp(20px, 2.2vw, 28px); background: color-mix(in srgb, var(--main-bg-color) 60%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); box-shadow: 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 8%, transparent) inset, 0 6px 16px color-mix(in srgb, var(--inv-bg-color) 8%, transparent), 0 32px 72px color-mix(in srgb, var(--inv-bg-color) 14%, transparent), 0 64px 140px color-mix(in srgb, var(--inv-bg-color) 8%, transparent); margin: 0 auto; isolation: isolate; overflow: hidden; /* JS-set width/height to match the hero panel; CSS fallback below. */ max-width: min(100%, 400px); } .surface-beat-mockup-panel > .v6-mockup-glow { position: absolute; inset: -8%; background: radial-gradient(38% 42% at 70% 18%, color-mix(in srgb, var(--purple) 14%, transparent), transparent 65%), radial-gradient(38% 42% at 30% 82%, color-mix(in srgb, var(--blurple) 12%, transparent), transparent 65%); filter: blur(36px); z-index: -1; pointer-events: none; opacity: 0.8; } .surface-beat-mockup-panel > .v6-window-chrome { position: absolute; top: 0; left: 0; right: 0; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-top-left-radius: inherit; border-top-right-radius: inherit; background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); z-index: 25; pointer-events: none; } .surface-beat-mockup-panel .v6-traffic-light { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); } .surface-beat-mockup-panel .v6-traffic-red { background: #FF5F57; } .surface-beat-mockup-panel .v6-traffic-yellow { background: #FEBC2E; } .surface-beat-mockup-panel .v6-traffic-green { background: #28C840; } /* Inner surface-frame-body inherits the new panel — it no longer needs * its own background/border/padding (the panel provides them). */ .surface-beat--create .surface-beat-mockup-panel > .surface-frame-body { background: transparent; border: 0; box-shadow: none; padding: 0; } /* Share's existing demo layout had its own padding; remove now that the * mockup-panel wrapper provides the chrome + padding. */ .surface-beat--share .share-ui-demo.surface-beat-mockup-panel { /* width handled by .surface-beat-mockup-panel base + JS sync */ } @media (max-width: 720px) { .surface-beat-mockup-panel { max-width: 100%; padding: clamp(14px, 4vw, 22px); padding-top: calc(clamp(14px, 4vw, 22px) + 26px); } } /* ════════════════════════════════════════════════════════════════════ BEAT 3 — hide v5 legacy fragments that came along with the hero panel clone. The hero panel includes a .stage-progress-card (carousel with Buying Team / Selling Team / Collaboration Space / Integrations / Security / Privacy / Logs) that's gated to specific phases in the hero but renders by default in Beat 3 because we don't drive those phases. Hide these specifically; the v6-agent-panel + v6-stage-success stay visible because they ARE part of the hero's stage UX cycle. ════════════════════════════════════════════════════════════════════ */ .surface-beat--navigate .stage-progress-card, .surface-beat--navigate .stage-footer, .surface-beat--navigate .stage-participants, .surface-beat--navigate .stage-collaboration { display: none !important; } /* ════════════════════════════════════════════════════════════════════ BEAT 3 — minimal panel/body baseline. JS sync to hero panel handles the panel's outer dimensions (width/height inline). The hero's own stage-body / section-collab / section-agents flex rules handle the internal proportions — DO NOT override them, since giving collab a higher flex or min-height pushes agents off the viewport. The hero's defaults already balance them correctly when the panel is the right outer size. ════════════════════════════════════════════════════════════════════ */ .surface-beat--navigate .v6-mockup-panel { min-height: 400px; /* fallback before JS sync runs */ } /* Hide filler stages that don't belong to the active journey (Sustainability has 4 stages, Pest Control 5; the leftover slots that keep EDA's template structure for div-balance get this marker and are hidden from view + skipped by the cycle JS). */ .surface-beat--navigate .v6-stage-panel.is-hidden-flow-stage, .surface-beat--navigate .stage-node.is-hidden-flow-stage { display: none !important; } /* ════════════════════════════════════════════════════════════════════ BEAT 3 — radial node distribution for 4- and 5-stage rings. The base CSS hardcodes node angles at 60° intervals (for 6 stages). For shorter journeys those positions only fill the top arc, leaving visual gaps. Override with proper sin/cos-based positions per data-stage-count. ════════════════════════════════════════════════════════════════════ */ /* ─── 4 stages: 90° intervals (top, right, bottom, left) ───────────── */ .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="4"] .stage-node[data-stage-index="0"] { transform: translate(-50%, -50%) translate(0, calc(-1 * var(--node-radius))) !important; } .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="4"] .stage-node[data-stage-index="1"] { transform: translate(-50%, -50%) translate(var(--node-radius), 0) !important; } .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="4"] .stage-node[data-stage-index="2"] { transform: translate(-50%, -50%) translate(0, var(--node-radius)) !important; } .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="4"] .stage-node[data-stage-index="3"] { transform: translate(-50%, -50%) translate(calc(-1 * var(--node-radius)), 0) !important; } /* ─── 5 stages: 72° intervals ───────────────────────────────────────── */ /* angle 0: (0, -1) top */ /* angle 72: (0.951, -0.309) upper right */ /* angle 144: (0.588, 0.809) lower right */ /* angle 216: (-0.588, 0.809) lower left */ /* angle 288: (-0.951, -0.309) upper left */ .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="5"] .stage-node[data-stage-index="0"] { transform: translate(-50%, -50%) translate(0, calc(-1 * var(--node-radius))) !important; } .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="5"] .stage-node[data-stage-index="1"] { transform: translate(-50%, -50%) translate(calc(0.951 * var(--node-radius)), calc(-0.309 * var(--node-radius))) !important; } .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="5"] .stage-node[data-stage-index="2"] { transform: translate(-50%, -50%) translate(calc(0.588 * var(--node-radius)), calc(0.809 * var(--node-radius))) !important; } .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="5"] .stage-node[data-stage-index="3"] { transform: translate(-50%, -50%) translate(calc(-0.588 * var(--node-radius)), calc(0.809 * var(--node-radius))) !important; } .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="5"] .stage-node[data-stage-index="4"] { transform: translate(-50%, -50%) translate(calc(-0.951 * var(--node-radius)), calc(-0.309 * var(--node-radius))) !important; } /* ════════════════════════════════════════════════════════════════════ BEATS 1–3 UNIFICATION PASS — Create / Share / Navigate all read as the same "iPhone window" container family. This block is the final polish after the surface-frame wrappers were removed in favor of v6-mockup-panel chrome. ════════════════════════════════════════════════════════════════════ */ /* ─── (1) Selector parity ────────────────────────────────────────── * Navigate's .navigate-journey-selector is legacy column-flex; its * .navigate-journey-card chips have their own padding / borders / * opacity-on-inactive / translateX-hover styling. Inside .v6-beat-selector * those must all be defused so Navigate's chips render identical to * Create's. */ .v6-beat-selector.navigate-journey-selector { flex-direction: row !important; gap: 6px !important; } .v6-beat-selector .surface-frame-tab, .v6-beat-selector .navigate-journey-card { flex-direction: row !important; padding: 6px 14px !important; border-radius: 999px !important; border: none !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; transition: background 200ms ease, color 200ms ease !important; font-size: 12.5px !important; line-height: 1.2 !important; gap: 6px !important; cursor: pointer; } .v6-beat-selector .surface-frame-tab:hover, .v6-beat-selector .navigate-journey-card:hover { transform: none !important; background: color-mix(in srgb, var(--main-bg-color) 50%, transparent) !important; border-color: transparent !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; } .v6-beat-selector .surface-frame-tab.is-active, .v6-beat-selector .navigate-journey-card.is-active { background: color-mix(in srgb, var(--main-bg-color) 92%, transparent) !important; border: none !important; box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, 0 2px 8px color-mix(in srgb, var(--inv-bg-color) 8%, transparent) !important; } .v6-beat-selector .surface-frame-tab:not(.is-active), .v6-beat-selector .navigate-journey-card:not(.is-active) { opacity: 1 !important; filter: none !important; } .v6-beat-selector.navigate-journey-selector:has(.navigate-journey-card:hover) .navigate-journey-card:not(:hover):not(.is-active) { opacity: 1 !important; filter: none !important; } /* TEMP — hide the journey selector tabs in Navigate (EDA / Sustainability / Pest Control). * Logic and panels are untouched; remove this rule to restore the selector. */ .surface-beat--navigate .navigate-journey-selector { display: none; } .v6-beat-selector .surface-frame-tab-icon, .v6-beat-selector .surface-frame-tab-icon svg { width: 13px !important; height: 13px !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; } .v6-beat-selector .surface-frame-tab.is-active .surface-frame-tab-icon, .v6-beat-selector .navigate-journey-card.is-active .surface-frame-tab-icon { color: var(--blurple) !important; } /* ─── (2) Navigate scrollbar fix ─────────────────────────────────── * The legacy .surface-frame wrapped Beat 3 and provided overflow:hidden, * which clipped any minor content bleed from the v6-mockup-panel. With * the wrapper gone, the panel itself must clip — JS sizes it to the * hero's exact rect and the slightest sub-pixel mismatch produces a * scrollbar on a descendant. */ .surface-beat--navigate .navigate-mockup-host > .v6-mockup-panel { overflow: hidden; } /* ─── (3) Share double-background fix ────────────────────────────── * .share-copy is a legacy white "card" with fixed 601px height + * background + border + shadow. Now that .share-ui-demo is a * v6-mockup-panel in its own right, .share-copy must become a pure * layout wrapper (no chrome). */ .surface-beat--share .share-copy { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; height: auto !important; overflow: visible !important; max-width: none !important; padding: 0 !important; } .surface-beat--share .share-bg { display: none !important; } /* ─── (4) Share inner content fits the new container ─────────────── * The legacy .share-ui-demo was hard-capped at 900px. Now it's a * mockup panel sized to the hero via JS; the inner content must follow * the panel width, not the old 900px cap. Demo content keeps its * natural height. */ .surface-beat--share .share-ui-demo.surface-beat-mockup-panel { max-width: none !important; margin: 0 auto; } .surface-beat--share .share-ui-demo.surface-beat-mockup-panel .demo-content { width: 100%; /* min-height bumped down for the narrower box; let inner content * grow naturally rather than reserving 480px of empty space. */ min-height: 360px; } /* Step 1 template grid was a wide 3-col layout; at narrower widths * (matching Navigate's hero panel) drop to 2-col so cards don't crush. */ .surface-beat--share .surface-beat-mockup-panel .template-options { grid-template-columns: repeat(2, 1fr); gap: 10px; } /* Step 3 buying/selling team columns can collapse to stacked rows * inside the narrower box. */ .surface-beat--share .surface-beat-mockup-panel .share-teams-section { flex-direction: column !important; gap: 12px !important; } /* ─── (5) Create inner content fits the new container ────────────── * .editor-flow-body.creator-two-col is a side-by-side circle + log * layout that needs ~700px+ to breathe. Inside the new mockup panel * (~hero width) it cramps. Stack vertically below a breakpoint and * cap the circle column height so the log gets a real share of * vertical space. */ .surface-beat--create .surface-beat-mockup-panel .editor-flow-body.creator-two-col { flex-direction: column; gap: 14px; } .surface-beat--create .surface-beat-mockup-panel .editor-circle-column { width: 100%; max-width: 320px; margin: 0 auto; flex-shrink: 0; } .surface-beat--create .surface-beat-mockup-panel .editor-circle-chart--lg { max-width: 240px; max-height: 240px; margin: 0 auto; } .surface-beat--create .surface-beat-mockup-panel .ai-process-log { width: 100%; min-height: 0; max-height: 260px; } /* The diff-expanded state (Editor mode) widens the right column — keep * the vertical stack regardless of state. */ .surface-beat--create .surface-beat-mockup-panel .editor-flow-body.diff-expanded { flex-direction: column; } /* ─── (6) Panel sizing — give Create + Share a slightly wider cap * than Navigate. Navigate's panel is portrait-tall (matches hero); * Create + Share content is landscape-natural. JS sync sets width * to hero rect; we ALSO need them to not overflow the page padding * and have a sensible mobile fallback. */ .surface-beat--create .surface-beat-mockup-panel, .surface-beat--share .surface-beat-mockup-panel { width: 100%; max-width: min(100%, 400px); } /* ─── (7) Beat selector spacing — pull the chip row up tight against * the panel so it reads as one unit, not a row + a card. */ .v6-beat-selector { margin-bottom: clamp(10px, 1.1vw, 16px); } /* ─── Mobile (≤720px) ────────────────────────────────────────────── * On phones: stop forcing hero width (JS already bails); flatten the * panels, drop the tilt, hide the chrome bar's persona toggle if * needed. */ @media (max-width: 720px) { .surface-beat--create .surface-beat-mockup-panel, .surface-beat--share .surface-beat-mockup-panel { width: 100% !important; max-width: 100% !important; } .v6-beat-selector { width: 100%; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; scrollbar-width: none; } .v6-beat-selector::-webkit-scrollbar { display: none; } .v6-beat-selector .surface-frame-tab, .v6-beat-selector .navigate-journey-card { flex-shrink: 0; } } /* ════════════════════════════════════════════════════════════════════ FOLLOW-UP POLISH PASS — title-width parity, Share inner fit, and a hard kill on every scrollbar inside the Beat 3 mockup panel. ════════════════════════════════════════════════════════════════════ */ /* ─── (A) Beat content COLUMN width matches the panel width. * The legacy .max-w-7xl wrapper (~1280px) is far too wide when the * demo panel below it is hero-width (~640px). Narrow the entire * column — header + chip selector + panel — to the panel's width. * Text alignment is left as-is (default left); only the column * itself shrinks. */ .surface-beat--create > .max-w-7xl, .surface-beat--navigate > .max-w-7xl, .surface-beat--share .share-journeys-section > .max-w-7xl { max-width: min(100%, 760px) !important; margin-left: 0; margin-right: 0; } /* ─── (B) NAVIGATE — nuke every scrollbar inside the Beat 3 panel. * Several inner panels (chat stream, agent viz, log) have * overflow-y: auto. With hero-matched height there's no guarantee * scrollbar-width:none beats every UA quirk. Force-hide all of them * at every nesting level. The scroll BEHAVIOR is preserved * (overflow:auto still scrolls); only the scrollbar UI is gone. */ .surface-beat--navigate .v6-mockup-panel, .surface-beat--navigate .v6-mockup-panel * { scrollbar-width: none !important; -ms-overflow-style: none !important; } .surface-beat--navigate .v6-mockup-panel::-webkit-scrollbar, .surface-beat--navigate .v6-mockup-panel *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } /* Belt-and-braces: also hide any scrollbar that might paint on the * panel itself (in case a future change adds overflow there). */ .surface-beat--navigate .navigate-mockup-host > .v6-mockup-panel { overflow: hidden !important; } .surface-beat--navigate .navigate-mockup-host { overflow: visible; } /* ─── (C) SHARE — proper polish so it actually fits the panel. * The legacy share-ui-demo was sized for a ~900px box. Every step's * internal layout needs to be tuned for the new ~hero-width box. */ /* Outer container: progress bar margin tightened, sit clean against * the panel's window-chrome bar. */ .surface-beat--share .surface-beat-mockup-panel .demo-progress-bar { margin: 0 0 14px 0; font-size: 11.5px; border-radius: 8px; } .surface-beat--share .surface-beat-mockup-panel .progress-step { padding: 6px 8px; font-size: 10px; gap: 4px; min-width: 0; } .surface-beat--share .surface-beat-mockup-panel .progress-step .step-number { font-size: 10px; } /* Override the legacy .step-label (13px from share-ui-demo.css) so the * "1. Select Template" / "4. Personalize Journey" labels actually fit * inside the narrower v6 panel instead of being clipped by the * white-space:nowrap + overflow:hidden parent. */ .surface-beat--share .surface-beat-mockup-panel .step-label { font-size: 10px; gap: 4px; min-width: 0; } .surface-beat--share .surface-beat-mockup-panel .step-check { width: 11px; height: 11px; margin-right: 2px; } .surface-beat--share .surface-beat-mockup-panel .progress-step.current { font-size: 10px; scale: 1; /* The legacy share-ui-demo.css gives .current a rounded blue border * + 1.05 scale. Nothing else in the v6 progress bar (or the panels * around it) uses a rounded border, so it reads as a foreign chip * stuck on the bar. Strip the border + radius; .current still reads * as active via the color + weight change. */ border: 0 !important; border-radius: 0 !important; } .surface-beat--share .surface-beat-mockup-panel .step-percent { font-size: 9px; padding: 2px 5px; margin-left: 6px; } /* Step title — was 20px, too loud for a small box. */ .surface-beat--share .surface-beat-mockup-panel .demo-step-title { font-size: 15px; margin-bottom: 14px; } /* Step 1: template grid — 2 columns, tighter gap, smaller cards. */ .surface-beat--share .surface-beat-mockup-panel .template-options { grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: auto !important; gap: 10px !important; } .surface-beat--share .surface-beat-mockup-panel .template-card { padding: 12px !important; gap: 8px !important; border-radius: 12px !important; box-shadow: 0 6px 18px rgba(0,0,0,.08) !important; } .surface-beat--share .surface-beat-mockup-panel .template-card.hovered { box-shadow: 0 8px 22px rgba(0,0,0,.14) !important; } .surface-beat--share .surface-beat-mockup-panel .template-icon { width: 42px !important; height: 42px !important; } .surface-beat--share .surface-beat-mockup-panel .template-folder-icon { width: 36px !important; height: 36px !important; } .surface-beat--share .surface-beat-mockup-panel .template-name { font-size: 12px !important; } .surface-beat--share .surface-beat-mockup-panel .template-stages { font-size: 10px !important; } .surface-beat--share .surface-beat-mockup-panel .template-utility-bar { margin-bottom: 10px; } .surface-beat--share .surface-beat-mockup-panel .template-utility-btn { font-size: 10px; padding: 3px 7px; } /* Step 2: Name Journey — autofill fields fit the narrower box. */ .surface-beat--share .surface-beat-mockup-panel .autofill-field { font-size: 12px !important; padding: 8px 10px !important; } .surface-beat--share .surface-beat-mockup-panel .choice-option { padding: 6px 12px !important; font-size: 12px !important; gap: 6px !important; } .surface-beat--share .surface-beat-mockup-panel .choice-option svg { width: 14px !important; height: 14px !important; } /* Step 3: Teams — keep horizontal (two columns) but compact. * Earlier rule had stacked them column; that takes too much vertical * space. Reverting to two-side layout with tighter internals. */ .surface-beat--share .surface-beat-mockup-panel .share-teams-section { flex-direction: row !important; gap: 10px !important; } .surface-beat--share .surface-beat-mockup-panel .team-section { padding: 10px !important; border-radius: 10px !important; } .surface-beat--share .surface-beat-mockup-panel .team-header { font-size: 10px !important; margin-bottom: 10px !important; padding-bottom: 8px !important; gap: 6px !important; } .surface-beat--share .surface-beat-mockup-panel .team-label { font-size: 11px !important; } .surface-beat--share .surface-beat-mockup-panel .team-members { gap: 6px !important; } .surface-beat--share .surface-beat-mockup-panel .team-member { padding: 6px 8px !important; gap: 7px !important; border-radius: 8px !important; } .surface-beat--share .surface-beat-mockup-panel .team-member .member-name, .surface-beat--share .surface-beat-mockup-panel .team-member .member-role { font-size: 11px !important; line-height: 1.25 !important; } .surface-beat--share .surface-beat-mockup-panel .team-member .member-role { font-size: 10px !important; opacity: 0.7; } .surface-beat--share .surface-beat-mockup-panel .team-member .member-avatar, .surface-beat--share .surface-beat-mockup-panel .team-member .member-icon { width: 26px !important; height: 26px !important; font-size: 10px !important; flex-shrink: 0; } .surface-beat--share .surface-beat-mockup-panel .team-member .invite-pill, .surface-beat--share .surface-beat-mockup-panel .team-member .member-status { font-size: 9px !important; padding: 2px 6px !important; } /* Step 4: AI personalization — keep the circle + log balanced inside * the narrower box. */ .surface-beat--share .surface-beat-mockup-panel .ai-personalize-circle, .surface-beat--share .surface-beat-mockup-panel .ai-personalize-canvas { max-width: 220px; margin: 0 auto; } .surface-beat--share .surface-beat-mockup-panel .ai-personalize-log { font-size: 10.5px !important; max-height: 140px !important; } /* demo-content height: let it grow with content rather than forcing * a min that leaves dead air. */ .surface-beat--share .surface-beat-mockup-panel .demo-content { min-height: 280px; } /* ─── (D) CREATE — same compactness pass for the creator demo so it * reads as deliberate, not cramped. */ .surface-beat--create .surface-beat-mockup-panel .editor-prompt-bar { padding: 10px 12px !important; font-size: 12px !important; } .surface-beat--create .surface-beat-mockup-panel .surface-prompt-label { font-size: 9px !important; } .surface-beat--create .surface-beat-mockup-panel .ai-process-log-header { padding: 0.45rem 0.7rem; } .surface-beat--create .surface-beat-mockup-panel .ai-process-log-title { font-size: 0.6rem; } .surface-beat--create .surface-beat-mockup-panel .ai-process-log-body { padding: 0.4rem 0; font-size: 11.5px; max-height: 200px; overflow: hidden; } .surface-beat--create .surface-beat-mockup-panel .ai-stage-scroll { min-height: 0; max-height: 160px; overflow: hidden; scrollbar-width: none; } .surface-beat--create .surface-beat-mockup-panel .ai-stage-scroll::-webkit-scrollbar { display: none; } /* AI Coach view — the legacy .coach-chat-input is styled for a dark * panel (white-on-white border/background). On the v6 light surface * it disappears entirely. Re-skin to match the editor-prompt-bar so * the input row reads as a proper text field. */ .surface-beat--create .surface-beat-mockup-panel .coach-chat-input, .surface-beat--create .surface-beat-mockup-panel .surface-chat-input { background: color-mix(in srgb, var(--main-bg-color) 92%, transparent) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 14%, transparent) !important; border-radius: 12px !important; padding: 12px 14px !important; box-shadow: 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 4%, transparent) inset, 0 1px 2px color-mix(in srgb, var(--inv-bg-color) 4%, transparent); } .surface-beat--create .surface-beat-mockup-panel .coach-input-row, .surface-beat--create .surface-beat-mockup-panel .surface-chat-input-row { color: color-mix(in srgb, var(--inv-bg-color) 88%, var(--blurple)) !important; opacity: 1 !important; font-size: 13px !important; } .surface-beat--create .surface-beat-mockup-panel .coach-send-btn, .surface-beat--create .surface-beat-mockup-panel .surface-chat-send { background: linear-gradient(135deg, var(--blurple), var(--purple)) !important; border: 0 !important; color: #fff !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--blurple) 30%, transparent); } /* ─── (E) Mobile (≤720px) — collapse Share team columns back to stacked * because the panel itself is narrow on phones. */ @media (max-width: 720px) { .surface-beat--share .surface-beat-mockup-panel .share-teams-section { flex-direction: column !important; } .surface-beat--create .surface-beat-header, .surface-beat--share .surface-beat-header, .surface-beat--navigate .surface-beat-header { max-width: 100%; } } /* ════════════════════════════════════════════════════════════════════ NAVIGATE — SCROLLBAR NUKE (final). Earlier rules scoped to .v6-mockup-panel weren't enough — the scroll- bar is showing on a descendant whose webkit pseudo wasn't being hit. Cast the net across the ENTIRE section + every descendant + every nesting level. Also force overflow:hidden on every realistic scroll container so no element can produce a visible track. ════════════════════════════════════════════════════════════════════ */ .surface-beat--navigate, .surface-beat--navigate * { scrollbar-width: none !important; -ms-overflow-style: none !important; } .surface-beat--navigate::-webkit-scrollbar, .surface-beat--navigate *::-webkit-scrollbar, .surface-beat--navigate::-webkit-scrollbar-track, .surface-beat--navigate *::-webkit-scrollbar-track, .surface-beat--navigate::-webkit-scrollbar-thumb, .surface-beat--navigate *::-webkit-scrollbar-thumb, .surface-beat--navigate::-webkit-scrollbar-corner, .surface-beat--navigate *::-webkit-scrollbar-corner { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; -webkit-appearance: none !important; appearance: none !important; } /* Force-clip every realistic scroll source inside the panel. The * scroll BEHAVIOR for these (chat stream auto-scroll, log auto-scroll) * still works because overflow:hidden + JS-controlled scrollTop is fine * for our animated cycle — the user never manually scrolls inside the * demo. */ .surface-beat--navigate .v6-mockup-panel, /* .navigate-mockup-host deliberately NOT clipped here — the panel itself * already clips internal scrollbars, and the host needs overflow:visible * so the relocated .v6-mockup-glow on .navigate-mockup-host::before can * actually bloom past the panel boundary (the whole point of moving it * out of the panel's overflow:hidden). */ .surface-beat--navigate .v6-stage-panels, .surface-beat--navigate .v6-stage-panel, .surface-beat--navigate .v6-stage-body, .surface-beat--navigate .v6-section-collab, .surface-beat--navigate .v6-section-agents, .surface-beat--navigate .v6-ap-chat-stream, .surface-beat--navigate .ai-agent-viz, .surface-beat--navigate .coach-chat-messages, .surface-beat--navigate .creator-panel-scroll, .surface-beat--navigate .ai-process-log-body { overflow: hidden !important; } /* ════════════════════════════════════════════════════════════════════ v6 LIGHT-SURFACE POLISH — Create + Share The Create + Share demos were authored against a dark panel surface (rgba(255,255,255,N%) backgrounds and borders, white text). On the v6 light glass panel those default styles render invisible or muddy. This block re-skins every affected element with light hairlines, readable ink, and restrained brand accents so the interior reads at the same fidelity as Navigate. Scoping rule: every rule below is scoped to `.surface-beat--create .surface-beat-mockup-panel` or `.surface-beat--share .surface-beat-mockup-panel`. Nothing here should bleed past the surface-journey section. ════════════════════════════════════════════════════════════════════ */ /* ─── (1) Editor circle chart — re-skinned nodes + center for light. */ .surface-beat--create .surface-beat-mockup-panel .editor-circle-chart { /* Drop the heavy purple drop-shadows from the legacy --lg variant; * the panel's own ambient glow is doing that job. Keep one soft * tint to anchor the ring. */ filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--inv-bg-color) 6%, transparent)); } .surface-beat--create .surface-beat-mockup-panel .editor-circle-ring .ring-track { stroke: color-mix(in srgb, var(--inv-bg-color) 14%, transparent) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-circle-nodes rect { fill: color-mix(in srgb, var(--inv-bg-color) 14%, transparent); transition: fill 360ms cubic-bezier(0.22, 1, 0.36, 1), filter 360ms cubic-bezier(0.22, 1, 0.36, 1); } .surface-beat--create .surface-beat-mockup-panel .editor-circle-nodes rect.is-idle { fill: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); } .surface-beat--create .surface-beat-mockup-panel .editor-circle-nodes rect.is-target { fill: color-mix(in srgb, var(--blurple) 65%, var(--inv-bg-color)); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--blurple) 32%, transparent)); } .surface-beat--create .surface-beat-mockup-panel .editor-circle-nodes rect.is-working { fill: var(--blurple); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--blurple) 36%, transparent)); } .surface-beat--create .surface-beat-mockup-panel .editor-circle-nodes rect.is-complete { fill: color-mix(in srgb, var(--blurple) 78%, var(--purple)); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--purple) 24%, transparent)); } .surface-beat--create .surface-beat-mockup-panel .editor-circle-center { color: color-mix(in srgb, var(--inv-bg-color) 80%, var(--blurple)) !important; opacity: 1 !important; text-shadow: none !important; font-size: 0.78rem !important; letter-spacing: -0.01em; } /* Creator center CTA — kill the dark-glass legacy; use the brand * gradient pill that matches the rest of v6's primary actions. */ .surface-beat--create .surface-beat-mockup-panel .creator-center-cta { color: #fff !important; background: linear-gradient(135deg, var(--blurple), var(--purple)) !important; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--blurple) 28%, transparent), 0 1px 0 color-mix(in srgb, #fff 35%, transparent) inset !important; padding: 9px 18px; font-size: 12px; letter-spacing: 0.02em; border-radius: 8px; } .surface-beat--create .surface-beat-mockup-panel .creator-center-cta:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 88%, #fff), color-mix(in srgb, var(--purple) 88%, #fff)) !important; transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--blurple) 32%, transparent), 0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset !important; } /* ─── (2) AI Process log — readable on light surface. */ .surface-beat--create .surface-beat-mockup-panel .ai-process-log { background: color-mix(in srgb, var(--main-bg-color) 86%, transparent) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important; border-radius: 10px; } .surface-beat--create .surface-beat-mockup-panel .ai-process-log-header { border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent) !important; } .surface-beat--create .surface-beat-mockup-panel .ai-process-log-title { color: color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) !important; } .surface-beat--create .surface-beat-mockup-panel .ai-process-log-status { color: color-mix(in srgb, var(--blurple) 78%, var(--inv-bg-color)) !important; } .surface-beat--create .surface-beat-mockup-panel .ai-log-pulse { background: var(--blurple) !important; } .surface-beat--create .surface-beat-mockup-panel .ai-log-ts { color: color-mix(in srgb, var(--inv-bg-color) 32%, transparent) !important; } .surface-beat--create .surface-beat-mockup-panel .ai-log-msg { color: color-mix(in srgb, var(--inv-bg-color) 82%, var(--blurple)) !important; } .surface-beat--create .surface-beat-mockup-panel .ai-log-entry--system .ai-log-msg { color: color-mix(in srgb, var(--blurple) 70%, var(--inv-bg-color)) !important; font-weight: 600; } .surface-beat--create .surface-beat-mockup-panel .ai-log-entry--success .ai-log-msg, .surface-beat--create .surface-beat-mockup-panel .ai-log-entry--success .ai-log-msg::before { color: color-mix(in srgb, var(--blurple) 72%, var(--purple)) !important; } /* ─── (3) AI Editor — diff panel + diff lines + accept/reject. */ .surface-beat--create .surface-beat-mockup-panel .editor-diff-panel { background: color-mix(in srgb, var(--main-bg-color) 86%, transparent) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important; border-radius: 10px; padding: 0.85rem 0.95rem; } .surface-beat--create .surface-beat-mockup-panel .editor-diff-header { color: color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) !important; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; } .surface-beat--create .surface-beat-mockup-panel .editor-ai-status-cycle { color: color-mix(in srgb, var(--blurple) 70%, var(--inv-bg-color)) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-diff-line.diff-remove { background: color-mix(in srgb, #dc2626 8%, transparent) !important; color: color-mix(in srgb, #b91c1c 88%, var(--inv-bg-color)) !important; text-decoration-color: color-mix(in srgb, #b91c1c 60%, transparent) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-diff-line.diff-add { background: color-mix(in srgb, #16a34a 10%, transparent) !important; color: color-mix(in srgb, #166534 90%, var(--inv-bg-color)) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-diff-line.diff-context { color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent) !important; opacity: 1; } .surface-beat--create .surface-beat-mockup-panel .editor-accept-btn { background: color-mix(in srgb, #16a34a 12%, transparent) !important; border: 1px solid color-mix(in srgb, #16a34a 28%, transparent) !important; color: color-mix(in srgb, #166534 92%, var(--inv-bg-color)) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-accept-btn:hover { background: color-mix(in srgb, #16a34a 18%, transparent) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-reject-btn { background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent) !important; color: color-mix(in srgb, var(--inv-bg-color) 65%, transparent) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-reject-btn:hover { background: color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-coach-btn { background: color-mix(in srgb, var(--main-bg-color) 90%, transparent) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent) !important; color: color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-coach-btn:hover { background: color-mix(in srgb, var(--blurple) 8%, transparent) !important; border-color: color-mix(in srgb, var(--blurple) 28%, transparent) !important; color: color-mix(in srgb, var(--inv-bg-color) 85%, var(--blurple)) !important; } /* ─── (4) AI Editor — pin the layout vertically so the panel never * overflows. Diff panel gets its own scroll-clip, capped height. */ .surface-beat--create .surface-beat-mockup-panel [data-tool-view="editor"] .editor-flow-body { flex-direction: column; gap: 12px; min-height: 0; } .surface-beat--create .surface-beat-mockup-panel [data-tool-view="editor"] .editor-circle-column { width: 100%; max-width: 200px; margin: 0 auto; flex-shrink: 0; } .surface-beat--create .surface-beat-mockup-panel [data-tool-view="editor"] .editor-circle-chart { width: 160px !important; height: 160px !important; margin: 0 auto; } .surface-beat--create .surface-beat-mockup-panel [data-tool-view="editor"] .editor-diff-panel { width: 100%; max-height: 240px; overflow: hidden; display: flex; flex-direction: column; } .surface-beat--create .surface-beat-mockup-panel [data-tool-view="editor"] .editor-diff-lines { flex: 1; min-height: 0; overflow-y: hidden; } /* ─── (5) Coach chat — bubbles need light treatment too. */ .surface-beat--create .surface-beat-mockup-panel .coach-chat-messages { padding: 6px 4px 12px; gap: 8px; } /* ─── (6) SHARE — Step 2 (Name Journey) polish. Tighten autofill + * choice fields so they read as crafted inputs rather than oversized * buttons. */ .surface-beat--share .surface-beat-mockup-panel .autofill-field { height: 38px !important; border-radius: 8px !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent) !important; background: color-mix(in srgb, var(--main-bg-color) 92%, transparent); padding: 0 12px !important; } .surface-beat--share .surface-beat-mockup-panel .autofill-field.filled { border-color: color-mix(in srgb, var(--blurple) 22%, transparent) !important; background: color-mix(in srgb, var(--blurple) 4%, var(--main-bg-color)) !important; } .surface-beat--share .surface-beat-mockup-panel .autofill-label { font-size: 9px !important; letter-spacing: 0.08em; opacity: 0.5 !important; } .surface-beat--share .surface-beat-mockup-panel .autofill-field.filled .autofill-label { opacity: 0 !important; } .surface-beat--share .surface-beat-mockup-panel .autofill-value { font-size: 12px !important; } .surface-beat--share .surface-beat-mockup-panel .autofill-logo-placeholder { width: 22px !important; height: 22px !important; font-size: 9px !important; border-radius: 5px !important; } .surface-beat--share .surface-beat-mockup-panel .choice-option { padding: 8px 14px !important; border-radius: 8px !important; font-size: 12px !important; border-width: 1px !important; border-color: color-mix(in srgb, var(--inv-bg-color) 12%, transparent) !important; background: color-mix(in srgb, var(--main-bg-color) 92%, transparent) !important; } .surface-beat--share .surface-beat-mockup-panel .choice-option:hover { border-color: color-mix(in srgb, var(--blurple) 28%, transparent) !important; background: color-mix(in srgb, var(--blurple) 4%, var(--main-bg-color)) !important; transform: none; box-shadow: none; } .surface-beat--share .surface-beat-mockup-panel .choice-option.selected { border-color: var(--blurple) !important; background: color-mix(in srgb, var(--blurple) 8%, var(--main-bg-color)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blurple) 12%, transparent), 0 1px 0 color-mix(in srgb, #fff 50%, transparent) inset; } /* ─── (7) SHARE — Step 4 (Personalize) rebuild. Re-skin the legacy * personalize-circle to match the editor-circle light treatment; * re-skin the log to read as a proper sibling card. */ /* Base layout: personalize-circle-ring and -nodes must overlay each other * inside the chart container, same as editor-circle-ring/-nodes. */ .personalize-circle-chart { position: relative; } .personalize-circle-ring, .personalize-circle-nodes { position: absolute; inset: 0; width: 100%; height: 100%; } .surface-beat--share .surface-beat-mockup-panel .personalize-circle-chart { width: 180px !important; height: 180px !important; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--blurple) 12%, transparent)) drop-shadow(0 2px 4px color-mix(in srgb, var(--inv-bg-color) 4%, transparent)) !important; margin: 0 auto; } .surface-beat--share .surface-beat-mockup-panel .personalize-circle-ring .ring-track { stroke: color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important; } .surface-beat--share .surface-beat-mockup-panel .personalize-circle-nodes rect { fill: rgba(99, 102, 241, 0.04) !important; stroke: rgba(99, 102, 241, 0.34); stroke-width: 0.5; filter: none; transition: fill 360ms cubic-bezier(0.22, 1, 0.36, 1), stroke 360ms cubic-bezier(0.22, 1, 0.36, 1), filter 360ms cubic-bezier(0.22, 1, 0.36, 1) !important; } .surface-beat--share .surface-beat-mockup-panel .personalize-circle-nodes rect.is-working { fill: var(--blurple) !important; stroke: color-mix(in srgb, var(--blurple) 70%, transparent) !important; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--blurple) 50%, transparent)) !important; } .surface-beat--share .surface-beat-mockup-panel .personalize-circle-nodes rect.is-complete { fill: color-mix(in srgb, var(--blurple) 88%, var(--purple)) !important; stroke: color-mix(in srgb, var(--blurple) 50%, transparent) !important; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--blurple) 40%, transparent)) !important; } .surface-beat--share .surface-beat-mockup-panel .personalize-log { height: 200px !important; max-width: none !important; background: color-mix(in srgb, var(--main-bg-color) 86%, transparent) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important; border-radius: 10px !important; } .surface-beat--share .surface-beat-mockup-panel .personalize-log-header { padding: 8px 12px !important; } .surface-beat--share .surface-beat-mockup-panel .personalize-log-title { font-size: 10px !important; letter-spacing: 0.08em; color: color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) !important; } .surface-beat--share .surface-beat-mockup-panel .personalize-log-status { font-size: 9px !important; letter-spacing: 0.08em; } .surface-beat--share .surface-beat-mockup-panel .p-log-entry { padding: 3px 12px !important; } .surface-beat--share .surface-beat-mockup-panel .p-log-msg { font-size: 11px !important; line-height: 1.5; } /* ─── (8) SHARE — demo step title typography. */ .surface-beat--share .surface-beat-mockup-panel .demo-step-title { font-size: 13px !important; font-weight: 700 !important; letter-spacing: -0.01em; margin-bottom: 12px !important; color: color-mix(in srgb, var(--inv-bg-color) 88%, var(--blurple)) !important; } /* ─── (9) SHARE — clear the legacy progress.fill animation kicker. * The "current" step in the v6 progress bar now uses color + * weight only; kill the leftover background-tint stripe. */ .surface-beat--share .surface-beat-mockup-panel .progress-step.current::before { opacity: 0 !important; } /* ════════════════════════════════════════════════════════════════ LIVE TEMPLATE GALLERY — Experience Your Journey section ════════════════════════════════════════════════════════════════ */ .template-gallery-section { position: relative; padding: 7rem 0; } .template-gallery-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); pointer-events: none; } .tg-inner { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); } /* Header */ .tg-header { margin-bottom: 2.5rem; } .tg-headline { font-family: var(--brand-font, 'Space Grotesk', sans-serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--inv-bg-color); letter-spacing: -0.025em; line-height: 1.08; margin: 0.35rem 0 0.6rem; } .tg-subline { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 1rem; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); margin: 0; max-width: 750px; line-height: 1.55; } /* Filter bar — hierarchical dropdowns + search */ .tg-pivot-bar { margin-bottom: 1.75rem; } .tg-pivot-bar__filters { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; } /* Dropdown wrapper — provides the custom chevron */ /* ── Custom dropdown filters ──────────────────────────────────── */ .tg-drop { position: relative; width: 160px; flex-shrink: 0; } .tg-drop__trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; width: 100%; padding: 0.42rem 0.6rem 0.42rem 0.75rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); color: color-mix(in srgb, var(--inv-bg-color) 78%, transparent); font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.82rem; font-weight: 500; cursor: pointer; text-align: left; transition: border-color 160ms ease, background 160ms ease, color 160ms ease; } .tg-drop__trigger:hover { border-color: color-mix(in srgb, var(--inv-bg-color) 16%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); color: var(--inv-bg-color); } .tg-drop.is-open .tg-drop__trigger { border-color: color-mix(in srgb, var(--blurple) 50%, transparent); background: color-mix(in srgb, var(--blurple) 5%, transparent); color: var(--inv-bg-color); } .tg-drop.is-disabled .tg-drop__trigger { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .tg-drop__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tg-drop__chevron { flex-shrink: 0; width: 12px; height: 12px; opacity: 0.45; transition: transform 200ms ease, opacity 200ms ease; } .tg-drop__trigger:hover .tg-drop__chevron, .tg-drop.is-open .tg-drop__chevron { opacity: 0.85; } .tg-drop.is-open .tg-drop__chevron { transform: rotate(180deg); } .tg-drop__panel { position: absolute; top: calc(100% + 5px); left: 0; min-width: 100%; max-width: 280px; max-height: 260px; overflow-y: auto; overflow-x: hidden; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); background: var(--main-bg-color); box-shadow: 0 8px 30px color-mix(in srgb, #000 22%, transparent); z-index: 200; padding: 4px; opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none; transition: opacity 140ms ease, transform 140ms ease; } .tg-drop.is-open .tg-drop__panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .tg-drop__option { display: block; width: 100%; padding: 0.38rem 0.65rem; border-radius: 6px; font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.82rem; font-weight: 400; color: color-mix(in srgb, var(--inv-bg-color) 70%, transparent); text-align: left; cursor: pointer; background: transparent; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 100ms ease, color 100ms ease; } .tg-drop__option:hover, .tg-drop__option:focus-visible { background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent); color: var(--inv-bg-color); outline: none; } .tg-drop__option.is-active { color: var(--blurple); font-weight: 600; } .tg-search-wrap { position: relative; width: 240px; margin-left: auto; } .tg-search-icon { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent); pointer-events: none; } .tg-search { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.82rem; width: 100%; padding: 0.45rem 0.75rem 0.45rem 2.1rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); color: var(--inv-bg-color); outline: none; transition: border-color 160ms ease, background 160ms ease; } .tg-search:focus { border-color: color-mix(in srgb, var(--blurple) 45%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); } .tg-search::placeholder { color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); } .tg-count { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.76rem; color: color-mix(in srgb, var(--inv-bg-color) 36%, transparent); white-space: nowrap; } /* Cards grid */ .tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.75rem; max-height: 640px; overflow-y: auto; overscroll-behavior: contain; padding-right: 0.5rem; scrollbar-width: thin; } .tg-sentinel { grid-column: 1 / -1; height: 1px; } /* Scroll lock toggle bar — inset at bottom of grid via negative margin */ .tg-scroll-bar { display: flex; justify-content: center; margin-top: -22px; position: relative; z-index: 2; } .tg-scroll-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 22px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 16%, transparent); background: var(--main-bg-color); color: color-mix(in srgb, var(--inv-bg-color) 70%, transparent); font-size: 0.8rem; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 2px 16px color-mix(in srgb, var(--inv-bg-color) 8%, transparent); transition: border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; } .tg-scroll-toggle svg { width: 14px; height: 14px; flex-shrink: 0; } .tg-scroll-toggle:hover { border-color: color-mix(in srgb, var(--inv-bg-color) 28%, transparent); color: color-mix(in srgb, var(--inv-bg-color) 90%, transparent); box-shadow: 0 4px 20px color-mix(in srgb, var(--inv-bg-color) 12%, transparent); } .tg-scroll-toggle.is-active { border-color: color-mix(in srgb, var(--blurple) 50%, transparent); color: var(--blurple); box-shadow: 0 2px 16px color-mix(in srgb, var(--blurple) 15%, transparent); } /* Card */ .tg-card { position: relative; display: flex; flex-direction: column; gap: 0.65rem; padding: 1rem 1rem 0.9rem 1.25rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 1.5%, transparent); cursor: pointer; text-align: left; overflow: hidden; transition: border-color 180ms ease, background 180ms ease, transform 200ms ease, box-shadow 200ms ease; } .tg-card:hover { border-color: color-mix(in srgb, var(--inv-bg-color) 14%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 3.5%, transparent); transform: translateY(-2px); box-shadow: 0 6px 20px color-mix(in srgb, var(--inv-bg-color) 3%, transparent); } .tgc-accent { position: absolute; top: 0; left: 0; width: 3px; height: 100%; border-radius: 10px 0 0 10px; opacity: 0.55; } .tgc-icon { width: 28px; height: 28px; flex-shrink: 0; } .tgc-icon svg { width: 100%; height: 100%; } .tgc-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .tgc-industry { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tgc-name { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.85rem; font-weight: 600; color: var(--inv-bg-color); line-height: 1.3; } .tgc-sub { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.7rem; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Preview panel ─────────────────────────────────────────────── */ /* == CipPopup — matches authenticated gallery dialog exactly ========= */ body.tg-cip-open { overflow: hidden; } .cip-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.52); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 200ms ease; padding: 1rem; } .cip-overlay.is-open { opacity: 1; } .cip-popup { position: relative; padding: 2.5rem 2.25rem 1.75rem; max-width: 420px; width: 90vw; text-align: left; font-family: var(--font-main, 'Satoshi', sans-serif); color: var(--inv-bg-color); background: color-mix(in srgb, var(--main-bg-color, #0d0d10) 88%, transparent); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-radius: 20px; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 15%, transparent); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35), 0 2px 16px rgba(0, 0, 0, 0.15), inset 0 0.5px 0 color-mix(in srgb, var(--inv-bg-color) 8%, transparent); transform: scale(0.95) translateY(8px); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease; opacity: 0; } .cip-overlay.is-open .cip-popup { transform: scale(1) translateY(0); opacity: 1; } .cip-close { position: absolute; top: 12px; right: 16px; background: none; border: none; padding: 4px 8px; color: var(--inv-bg-color); opacity: 0.3; cursor: pointer; line-height: 1; transition: opacity 120ms ease, transform 120ms ease; } .cip-close:hover { opacity: 0.7; transform: scale(1.15); } .cip-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 0.75rem; } .cip-title { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.03em; color: var(--inv-bg-color); } .cip-subtitle { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: linear-gradient(135deg, var(--purple), var(--blurple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cip-divider { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--purple), var(--blurple), color-mix(in srgb, var(--blurple) 15%, transparent)); margin-bottom: 1rem; } .cip-lead { font-size: 0.8125rem; font-style: italic; line-height: 1.65; color: var(--inv-bg-color); opacity: 0.65; margin: 0 0 0.5rem; } .cip-capsules { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.25rem; } .cip-capsule { font-size: 0.68rem; font-weight: 500; padding: 0.2rem 0.5rem; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent); color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); } .cip-actions { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 1rem; margin-bottom: 0.25rem; } .cip-action { display: flex; align-items: center; gap: 0.75rem; padding: 12px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); text-decoration: none; color: var(--inv-bg-color); cursor: pointer; width: 100%; box-sizing: border-box; font: inherit; text-align: left; appearance: none; transition: background 140ms ease, border-color 140ms ease; } .cip-action:hover { background: color-mix(in srgb, var(--purple) 8%, transparent); border-color: color-mix(in srgb, var(--purple) 20%, transparent); } .cip-action-icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: color-mix(in srgb, var(--purple) 10%, transparent); color: var(--purple); } .cip-action-icon svg { width: 16px; height: 16px; } .cip-action-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .cip-action-label { font-size: 0.8125rem; font-weight: 700; color: var(--inv-bg-color); } .cip-action-desc { font-size: 0.7rem; color: var(--inv-bg-color); opacity: 0.55; line-height: 1.4; } .cip-action-arrow { flex-shrink: 0; opacity: 0.3; transition: opacity 140ms ease, transform 140ms ease; color: var(--inv-bg-color); } .cip-action:hover .cip-action-arrow { opacity: 0.7; transform: translateX(2px); } .cip-classification { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .cip-class-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 1px; color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent); margin-bottom: 0.35rem; } .cip-class-level { font-size: 0.72rem; color: var(--inv-bg-color); line-height: 1.9; } .cip-tree-branch { opacity: 0.4; margin: 0 0.2em; } .cip-level0 { opacity: 0.4; } .cip-level1 { opacity: 0.65; } .cip-level2 { opacity: 0.8; font-weight: 500; } /* Queued (not-yet-generated) template cards — slightly dimmed */ .tg-card--queued { opacity: 0.6; } .tg-card--queued .tgc-accent { opacity: 0.45; } /* JS filtering: hide non-matching cards */ .tg-card--hidden { display: none !important; } /* Cards are tags — reset default link appearance */ a.tg-card { text-decoration: none; color: inherit; } @media (prefers-reduced-motion: reduce) { .cip-overlay, .cip-popup, .cip-close, .cip-action, .cip-action-arrow { transition: none; } .cip-close:hover { transform: none; } .cip-action:hover .cip-action-arrow { transform: none; } } /* ════════════════════════════════════════════════════════════════════ MOBILE POLISH — Share + Navigate ════════════════════════════════════════════════════════════════════ */ /* (1) Share traffic-light overlap fix. * share-ui-demo.css ≤768px sets `.share-ui-demo { padding: 0 }` which * removes the chrome-clearing padding-top, letting the absolute * window-chrome strip overlap the progress bar. Reassert it here with * enough specificity + !important to win the cascade. */ @media (max-width: 768px) { .surface-beat--share .share-ui-demo.surface-beat-mockup-panel { padding: clamp(14px, 4vw, 22px) !important; padding-top: calc(clamp(14px, 4vw, 22px) + 30px) !important; } } /* (2) Share demo-content height: clear the 280px floor so the stacked * teams section (flex-direction:column at ≤720px) can breathe without * dead air on shorter steps. */ @media (max-width: 720px) { .surface-beat--share .surface-beat-mockup-panel .demo-content { min-height: 500px !important; } } /* (3) Navigate right-push fix. * The hero panel JS sets width: calc(100vw - 36px) on all navigate * panels, but the navigate section's .max-w-7xl has px-6 (24px each * side = 48px total). The panel overflows right by 12px. Drop section * padding to 18px each side to match the hero's effective margin. */ @media (max-width: 720px) { .surface-beat--navigate > .max-w-7xl { padding-left: 0px !important; padding-right: 0px !important; } } /* (4) Navigate journey chips: wrap + center on narrow phones so all three * options are visible without horizontal scroll. */ @media (max-width: 560px) { .surface-beat--navigate .v6-beat-selector { flex-wrap: wrap !important; overflow-x: visible !important; justify-content: center !important; gap: 6px !important; } .surface-beat--navigate .v6-beat-selector .navigate-journey-card { flex: 0 1 auto !important; min-width: min-content !important; padding: 5px 10px !important; gap: 5px !important; } .surface-beat--navigate .v6-beat-selector .navigate-journey-card .surface-frame-tab-label { font-size: 11px !important; } .surface-beat--navigate .v6-beat-selector .navigate-journey-card .surface-frame-tab-icon { width: 14px !important; height: 14px !important; } }