/* ============================================================ FULLPRESS — site.css · Operations Floor (all-dark) Deep Anchor Ink base, dark glass tiers throughout. Builds on brand.css tokens. ============================================================ */ /* ── Tweak-driven knobs (overridden inline by the Tweaks panel) ── */ :root { --site-accent: var(--ignition-red, #FF2B4E); --rhythm: 1; /* density multiplier */ --max-shell: 1240px; --max-read: 760px; /* Dark glass surface system (Operations Floor). Depth = opacity differential across tiers, not shadows. */ --surface-card: rgba(255,255,255,0.07); /* surface-tier glass card */ --surface-alt: rgba(255,255,255,0.025); /* recessed band tint */ --surface-inset: rgba(255,255,255,0.045); /* insets inside a card */ --border-card: rgba(74,68,88,0.55); /* slate border */ --border-card-strong: rgba(74,68,88,0.85); /* interactive card edges */ --shadow-card: inset 0 1px 0 0 rgba(255,255,255,0.07); /* specular top edge */ --shadow-card-lift: inset 0 1px 0 0 rgba(255,255,255,0.11); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-secondary); color: var(--light-orbit); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* atmosphere comes from .atmo-light on (DS atmosphere.css) */ #root { position: relative; z-index: 1; } a { color: inherit; text-decoration: none; } img { display: block; } ::selection { background: rgba(255,43,78,0.18); } /* ════════════════════════════════════════════════════════════ V12 CONTRAST TOKENS — override legacy warm grays (brand v11). Secondary text on dark = Light Orbit 75%, tertiary = 62%. ════════════════════════════════════════════════════════════ */ :root { --muted: rgba(240,246,255,0.75); --warm-gray: rgba(240,246,255,0.62); --positive-text: var(--signal-green); --warn-text: var(--amber-warning, #F5A623); --error-text: #FF8296; } /* ════════════════════════════════════════════════════════════ LAYOUT ════════════════════════════════════════════════════════════ */ .shell { max-width: var(--max-shell); margin: 0 auto; padding: 0 40px; } .read { max-width: var(--max-read); } .sec { padding: calc(104px * var(--rhythm)) 0; position: relative; } .sec--tight { padding: calc(72px * var(--rhythm)) 0; } @media (max-width: 720px) { .shell { padding: 0 22px; } .sec { padding: 64px 0; } } /* ════════════════════════════════════════════════════════════ TYPE HELPERS ════════════════════════════════════════════════════════════ */ .mono { font-family: var(--font-mono); } /* Overlines come from the DS component (fp-overline). Spacing for standalone uses (heroes, CTA bands) + centered variant: */ .fp-overline.reveal, .fp-overline.ov-center { margin-bottom: 22px; } .ov-center { display: flex; justify-content: center; } h1, h2, h3, h4 { font-family: var(--font-primary); margin: 0; color: var(--light-orbit); } .dark h1, .dark h2, .dark h3, .dark h4 { color: var(--light-orbit); } .h-xl { font-weight: 800; font-size: clamp(40px, 5.6vw, 76px); letter-spacing: -0.03em; line-height: 1.0; } .h-lg { font-weight: 700; font-size: clamp(32px, 4.2vw, 52px); letter-spacing: -0.022em; line-height: 1.08; } .h-md { font-weight: 700; font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.018em; line-height: 1.14; } .accent { color: var(--site-accent); } .dim { color: rgba(240,246,255,0.40); font-weight: 700; } .dark .dim { color: rgba(240,246,255,0.62); } .lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.62; color: rgba(240,246,255,0.75); max-width: 640px; } .dark .lede { color: rgba(240,246,255,0.75); } .prose p { font-size: 17px; line-height: 1.72; color: rgba(240,246,255,0.76); margin: 0 0 20px; } .prose p:last-child { margin-bottom: 0; } .prose strong { color: var(--light-orbit); font-weight: 700; } .dark .prose p { color: rgba(240,246,255,0.75); } .dark .prose strong { color: var(--light-orbit); } /* Section heads come from the DS component. */ .fp-section-header { margin-bottom: 52px; } .fp-section-header--left { max-width: 780px; } /* ════════════════════════════════════════════════════════════ NAV — floating mission-control console ════════════════════════════════════════════════════════════ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: block; padding: 18px 20px 0; pointer-events: none; background: transparent; border: none; box-shadow: none; } /* first section clears the floating console */ .nav + section, .nav + main > section:first-child { padding-top: 124px; } .nav__inner { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; height: 60px; pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 12px 0 16px; border-radius: 16px; background: linear-gradient(180deg, rgba(20,14,30,0.78) 0%, rgba(11,7,18,0.82) 100%); backdrop-filter: blur(22px) saturate(155%); -webkit-backdrop-filter: blur(22px) saturate(155%); border: 1px solid rgba(74,68,88,0.55); box-shadow: 0 20px 50px -26px rgba(0,0,0,0.75), inset 0 1px 0 0 rgba(255,255,255,0.07); transition: height 240ms cubic-bezier(0.16,1,0.3,1), background 240ms ease-out, border-color 240ms ease-out, box-shadow 240ms ease-out, transform 240ms ease-out; } .nav.is-scrolled { padding-top: 10px; } .nav.is-scrolled .nav__inner { height: 54px; background: linear-gradient(180deg, rgba(16,11,24,0.92) 0%, rgba(8,5,13,0.94) 100%); box-shadow: 0 16px 40px -22px rgba(0,0,0,0.85), inset 0 1px 0 0 rgba(255,255,255,0.06); } /* corner-bracket accent on the console (mission-control tick) */ .nav__inner::before { content: ""; position: absolute; top: 9px; left: 9px; width: 12px; height: 12px; pointer-events: none; border-top: 1.5px solid rgba(255,43,78,0.7); border-left: 1.5px solid rgba(255,43,78,0.7); border-top-left-radius: 7px; } /* ── brand module ── */ .nav__brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding-left: 6px; } .nav__brand img { height: 40px; width: auto; transition: transform 220ms cubic-bezier(0.16,1,0.3,1); } .nav__brand:hover img { transform: scale(1.06) rotate(-3deg); } .nav__logo--onlight { display: none; } .nav--light .nav__logo--ondark { display: none; } .nav--light .nav__logo--onlight { display: block; } .nav__lockup { display: flex; flex-direction: column; gap: 3px; } .nav__wm { font-family: var(--font-primary); font-weight: 900; font-size: 17px; letter-spacing: 0.17em; color: var(--light-orbit); line-height: 1; } .nav__desc { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,246,255,0.62); line-height: 1; } @media (max-width: 600px) { .nav__desc { display: none; } } /* ── centered segmented control ── */ .nav__links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 2px; align-items: center; list-style: none; margin: 0; padding: 4px; border-radius: 999px; background: rgba(0,0,0,0.25); border: 1px solid rgba(74,68,88,0.45); box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); } .nav__links li { display: flex; } .nav__links a { font-size: 12.5px; font-weight: 500; color: rgba(240,246,255,0.62); letter-spacing: 0.005em; white-space: nowrap; transition: color 160ms ease-out, background 160ms ease-out; padding: 8px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; } .nav__links a:hover { color: var(--light-orbit); background: rgba(255,255,255,0.05); } .nav__links a.active { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.07)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 1px 3px rgba(0,0,0,0.35); } .nav__links a.active::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--site-accent); box-shadow: 0 0 8px 0 rgba(255,43,78,0.8); } /* ── right cluster ── */ .nav__right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } /* DS StatusBadge carries its own look; we only size + hide responsively */ .nav__loc { display: inline-flex; } .nav__burger { display: none; background: rgba(255,255,255,0.05); border: 1px solid rgba(74,68,88,0.55); border-radius: 10px; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--light-orbit); font-size: 20px; cursor: pointer; transition: background 140ms; } .nav__burger:hover { background: rgba(255,255,255,0.1); } @media (max-width: 1120px) { .nav__loc { display: none; } } @media (max-width: 1040px) { .nav__links { display: none; } .nav__burger { display: flex; } .nav__links.open { display: flex; flex-direction: column; align-items: stretch; gap: 3px; position: absolute; left: 0; right: 0; top: calc(100% + 12px); transform: none; padding: 10px; border-radius: 16px; background: rgba(10,6,16,0.97); border: 1px solid rgba(74,68,88,0.55); box-shadow: 0 26px 50px -22px rgba(0,0,0,0.85); } .nav__links.open a { padding: 14px 16px; font-size: 15px; border-radius: 11px; } .nav__links.open a.active { background: rgba(255,43,78,0.12); } .nav__links.open a.active::before { box-shadow: none; } } /* ── adaptive LIGHT variant (when floating over a light section) ── */ .nav__wm, .nav__desc, .nav__links a, .nav__loc { transition: color 260ms ease-out; } .nav--light .nav__inner { background: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(244,248,253,0.82) 100%); border-color: rgba(25,20,36,0.10); box-shadow: 0 18px 44px -24px rgba(25,20,36,0.40), inset 0 1px 0 0 rgba(255,255,255,0.7); } .nav--light.is-scrolled .nav__inner { background: linear-gradient(180deg, rgba(255,255,255,0.93) 0%, rgba(244,248,253,0.90) 100%); box-shadow: 0 16px 38px -22px rgba(25,20,36,0.50), inset 0 1px 0 0 rgba(255,255,255,0.7); } .nav--light .nav__wm { color: var(--deep-anchor-ink); } .nav--light .nav__desc { color: #5C5568; } .nav--light .nav__links { background: rgba(25,20,36,0.05); border-color: rgba(25,20,36,0.12); box-shadow: inset 0 1px 2px rgba(25,20,36,0.08); } .nav--light .nav__links a { color: rgba(25,20,36,0.66); } .nav--light .nav__links a:hover { color: var(--deep-anchor-ink); background: rgba(25,20,36,0.06); } .nav--light .nav__links a.active { color: var(--deep-anchor-ink); background: linear-gradient(180deg, #fff, rgba(255,255,255,0.85)); box-shadow: 0 1px 3px rgba(25,20,36,0.14), inset 0 1px 0 rgba(255,255,255,0.9); } .nav--light .nav__loc { color: #5C5568; } .nav--light .nav__burger { background: rgba(25,20,36,0.05); border-color: rgba(25,20,36,0.16); color: var(--deep-anchor-ink); } .nav--light .nav__burger:hover { background: rgba(25,20,36,0.10); } @media (max-width: 1040px) { .nav--light .nav__links.open { background: rgba(255,255,255,0.97); border-color: rgba(25,20,36,0.12); box-shadow: 0 26px 50px -22px rgba(25,20,36,0.35); } .nav--light .nav__links.open a.active { background: rgba(255,43,78,0.10); } } /* ════════════════════════════════════════════════════════════ BUTTONS — DS fp-btn (ds-button.css). Site-level helpers only. ════════════════════════════════════════════════════════════ */ .fp-btn i { font-size: 15px; } /* ════════════════════════════════════════════════════════════ DARK BAND — atmosphere comes from DS .atmo-dark (starfield, nebula, drift, vignette). This class only sets text + clipping. ════════════════════════════════════════════════════════════ */ .band-dark { color: var(--light-orbit); overflow: hidden; } body.no-motion .atmo-dark::before { animation: none; } /* Nested-theme fix: this site is a light page (html[data-theme="light"]) with dark Ops-Floor sections (section[data-theme="dark"]). The DS component CSS keys on [data-theme] without nesting awareness, so the page-level light rules can win by source order inside dark sections. Re-assert dark-context styling for the DS components we use inside dark bands: */ section[data-theme="dark"] .fp-overline { color: var(--signal-green); } section[data-theme="dark"] .fp-btn--secondary { background: var(--signal-green); color: var(--deep-anchor-ink); border: 1px solid transparent; } section[data-theme="dark"] .fp-btn--secondary:hover { background: #33DE95; } section[data-theme="dark"] .fp-stat-card__value { color: var(--light-orbit); } /* ── INTERSTELLAR DRIFT (v12) — the only ambient background motion. Two star bands at different rates + breathing nebula, 240–420s alternate (no loop jump). Dark context only; the all-dark page shares one continuous atmosphere. Static under reduced motion. */ .band-dark.atmo-dark::before, body.atmo-dark::before { animation: fp-inter-near 240s linear infinite alternate; /* near star band */ } .band-dark.atmo-dark, body.atmo-dark { background-image: radial-gradient(1px 1px at 18% 32%, rgba(240,246,255,0.22), transparent 55%), radial-gradient(1px 1px at 63% 12%, rgba(240,246,255,0.18), transparent 55%), radial-gradient(1.5px 1.5px at 84% 58%, rgba(240,246,255,0.20), transparent 55%), radial-gradient(1px 1px at 38% 78%, rgba(240,246,255,0.16), transparent 55%), radial-gradient(1px 1px at 92% 88%, rgba(240,246,255,0.14), transparent 55%); background-size: 1400px 900px; animation: fp-inter-deep 420s linear infinite alternate; /* deep star band */ } .band-dark.atmo-dark::after, body.atmo-dark::after { animation: fp-nebula-breathe 300s ease-in-out infinite alternate; /* breathing nebula */ } @keyframes fp-inter-near { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-70px, -130px, 0); } } @keyframes fp-inter-deep { from { background-position: 0 0; } to { background-position: 90px -60px; } } @keyframes fp-nebula-breathe { from { opacity: 0.62; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .band-dark.atmo-dark, .band-dark.atmo-dark::before, .band-dark.atmo-dark::after, body.atmo-dark, body.atmo-dark::before, body.atmo-dark::after { animation: none; } } body.no-motion .band-dark.atmo-dark, body.no-motion .band-dark.atmo-dark::before, body.no-motion .band-dark.atmo-dark::after, body.no-motion.atmo-dark, body.no-motion.atmo-dark::before, body.no-motion.atmo-dark::after { animation: none; } /* hero terminal — live session replay */ .terminal__line { opacity: 0; transform: translateY(5px); transition: opacity 380ms var(--ease-arrival, cubic-bezier(0.16,1,0.3,1)), transform 380ms var(--ease-arrival, cubic-bezier(0.16,1,0.3,1)); } .terminal__line.is-on { opacity: 1; transform: none; } body.no-motion .terminal__line { opacity: 1 !important; transform: none !important; } /* lifecycle — the record in motion (DS motion-flow sweep) */ .lc-flow { height: 2px; border-radius: 999px; margin-top: 18px; opacity: 0.7; } body.no-motion .motion-flow, body.no-motion .lc-arrow.is-broken i { animation: none !important; } /* ════════════════════════════════════════════════════════════ HERO ════════════════════════════════════════════════════════════ */ .hero { padding-top: 92px; padding-bottom: 84px; } .hero__grid { display: grid; grid-template-columns: 1fr 392px; gap: 60px; align-items: start; } @media (max-width: 1080px) { .hero__grid { grid-template-columns: 1fr; gap: 44px; } } .hero h1 { max-width: 16ch; margin-bottom: 28px; } .hero .lede { margin-bottom: 40px; } .hero__cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .hero__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(240,246,255,0.62); margin-left: 6px; } /* hero variant B: single-column centered */ .hero--centered .hero__grid { grid-template-columns: 1fr; } .hero--centered .terminal { display: none; } .hero--centered .hero__cta { justify-content: flex-start; } /* terminal panel in hero */ .terminal { background: rgba(255,255,255,0.04); border: 1px solid rgba(74,68,88,0.55); border-radius: 14px; padding: 0; backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.07); overflow: hidden; } .terminal__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(74,68,88,0.45); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: rgba(240,246,255,0.62); text-transform: uppercase; } .terminal__bar .dots { display: flex; gap: 6px; margin-right: 6px; } .terminal__bar .dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(240,246,255,0.18); } .terminal__bar .live { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--signal-green); } .terminal__body { padding: 18px 18px 20px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.95; } .terminal__line { display: flex; gap: 8px; color: rgba(240,246,255,0.82); } .terminal__line .p { color: var(--signal-green); } .terminal__line .c { color: rgba(240,246,255,0.62); } .terminal__line.out { color: rgba(240,246,255,0.62); padding-left: 16px; } .terminal__line .ok { color: var(--signal-green); } .terminal__line .red { color: var(--site-accent); } .terminal__cursor { display: inline-block; width: 8px; height: 15px; background: var(--signal-green); vertical-align: -2px; animation: term-blink 1.1s steps(1) infinite; } @keyframes term-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .terminal__cursor { animation: none; } } /* ════════════════════════════════════════════════════════════ PROOF / STAT BAND ════════════════════════════════════════════════════════════ */ .proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .proof__cell { padding: 4px 36px; border-left: 1px solid rgba(74,68,88,0.32); } .proof__cell:first-child { padding-left: 0; border-left: none; } .dark .proof__cell { border-left-color: rgba(74,68,88,0.40); } .proof__big { font-family: var(--font-primary); font-weight: 800; font-variant-numeric: tabular-nums; font-size: clamp(42px, 4.8vw, 70px); line-height: 0.95; letter-spacing: -0.04em; color: var(--light-orbit); } .proof__big .u { color: var(--site-accent); font-size: 0.4em; margin-left: 3px; letter-spacing: -0.02em; } .proof__cap { font-size: 13.5px; line-height: 1.55; color: rgba(240,246,255,0.62); margin-top: 16px; max-width: 230px; } .proof__src { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0,214,126,0.55); margin-top: 12px; } /* word-stat variant (e.g. "Anthropic") — accent-colored, slightly smaller */ .proof__big--word { color: var(--site-accent); font-size: clamp(34px, 3.6vw, 52px); } /* icon-row card (Approach how-we-work) */ .card--row { display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start; } .card--row .card__ico { margin-bottom: 0; } /* quiz helper text under the question */ .quiz__help { font-size: 14.5px; line-height: 1.6; color: rgba(240,246,255,0.62); margin: -14px 0 26px; } /* centered section head with token spacing */ .section-head--center { text-align: center; margin: 0 auto var(--space-10, 40px); } @media (max-width: 880px) { .proof { grid-template-columns: repeat(2, 1fr); gap: 40px 0; } .proof__cell:nth-child(3) { border-left: none; padding-left: 0; } } @media (max-width: 520px) { .proof { grid-template-columns: 1fr; } .proof__cell { border-left: none; padding-left: 0; } } /* ════════════════════════════════════════════════════════════ GLASS CARD (light) ════════════════════════════════════════════════════════════ */ .card { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 14px; padding: 30px 28px; box-shadow: var(--shadow-card); transition: transform 300ms cubic-bezier(0.16,1,0.3,1), box-shadow 300ms cubic-bezier(0.16,1,0.3,1), border-color 300ms; } .card:hover { box-shadow: var(--shadow-card-lift); border-color: var(--border-card-strong); transform: translateY(-2px); } .card__ico { width: 46px; height: 46px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,43,78,0.09); border: 1px solid rgba(255,43,78,0.26); color: var(--site-accent); font-size: 22px; margin-bottom: 22px; } /* ════════════════════════════════════════════════════════════ POV BULLETS (data point of view) ════════════════════════════════════════════════════════════ */ .povs { display: grid; gap: 1px; background: rgba(240,246,255,0.10); border: 1px solid var(--border-card); border-radius: 14px; overflow: hidden; } .pov { background: var(--surface-card); padding: 26px 30px; display: grid; grid-template-columns: 30px 1fr; gap: 18px; align-items: start; } .pov__n { font-family: var(--font-mono); font-size: 12px; color: var(--site-accent); padding-top: 3px; } .pov h4, .pov h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 7px; } .pov p { font-size: 15px; line-height: 1.6; color: rgba(240,246,255,0.70); margin: 0; } /* ════════════════════════════════════════════════════════════ THE LADDER (climbable, stages.html + preview) ════════════════════════════════════════════════════════════ */ .ladder { display: grid; grid-template-columns: 320px 1fr; gap: 44px; align-items: start; } @media (max-width: 940px) { .ladder { grid-template-columns: 1fr; gap: 28px; } } .ladder__rail { position: relative; display: flex; flex-direction: column; gap: 10px; } @media (min-width: 941px) { .ladder__rail { position: sticky; top: 88px; } } .rung { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 12px; cursor: pointer; text-align: left; background: var(--surface-card); border: 1px solid var(--border-card); border-left: 2px solid rgba(0,214,126,0.45); box-shadow: 0 1px 2px rgba(240,246,255,0.04); transition: all 220ms cubic-bezier(0.16,1,0.3,1); width: 100%; font-family: inherit; } .rung:hover { border-left-color: rgba(0,214,126,0.85); transform: translateX(2px); } .rung.is-active { background: rgba(255,255,255,0.10); border-color: var(--light-orbit); border-left: 2px solid var(--site-accent); box-shadow: 0 10px 28px -14px rgba(240,246,255,0.62); } .rung__n { font-family: var(--font-primary); font-weight: 800; font-size: 22px; width: 30px; flex-shrink: 0; color: rgba(240,246,255,0.30); line-height: 1; font-variant-numeric: tabular-nums; } .rung.is-active .rung__n { color: var(--site-accent); } .rung__txt { flex: 1; min-width: 0; } .rung__name { font-family: var(--font-primary); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--light-orbit); } .rung.is-active .rung__name { color: var(--light-orbit); } .rung__sub { font-size: 12px; color: rgba(240,246,255,0.62); margin-top: 2px; } .rung.is-active .rung__sub { color: rgba(240,246,255,0.62); } .rung__avail { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; flex-shrink: 0; white-space: nowrap; } .avail-ga { color: var(--text-signal); background: rgba(0,214,126,0.12); } .avail-beta { color: var(--warn-text); background: rgba(245,166,35,0.16); } .avail-edge { color: var(--site-accent); background: rgba(255,43,78,0.10); } .rung.is-active .rung__avail { background: rgba(255,255,255,0.12); color: rgba(240,246,255,0.8); } /* timeline variant — horizontal stepper */ .steps { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin-bottom: 32px; } .steps::before { content: ""; position: absolute; top: 21px; left: 9%; right: 9%; height: 2px; background: rgba(240,246,255,0.12); } .steps__fill { position: absolute; top: 21px; left: 9%; height: 2px; background: linear-gradient(90deg, var(--signal-green), var(--site-accent)); transition: width 360ms cubic-bezier(0.16,1,0.3,1); z-index: 1; } .step { position: relative; z-index: 2; background: none; border: none; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 6px; } .step__dot { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-primary); font-weight: 800; font-size: 18px; background: var(--surface-card); color: rgba(240,246,255,0.62); border: 2px solid rgba(240,246,255,0.15); transition: all 220ms cubic-bezier(0.16,1,0.3,1); } .step:hover .step__dot { border-color: rgba(0,214,126,0.7); } .step.is-done .step__dot { background: rgba(0,214,126,0.12); border-color: var(--signal-green); color: var(--text-signal); } .step.is-active .step__dot { background: rgba(255,255,255,0.10); border-color: var(--site-accent); color: var(--light-orbit); transform: scale(1.08); } .step__lab { font-family: var(--font-primary); font-weight: 600; font-size: 12.5px; color: rgba(240,246,255,0.62); text-align: center; line-height: 1.25; } .step.is-active .step__lab { color: var(--light-orbit); } .step__av { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; } @media (max-width: 720px) { .steps { grid-auto-flow: row; grid-auto-columns: auto; gap: 4px; } .steps::before, .steps__fill { display: none; } .step { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 6px 0; } .step__lab { text-align: left; } } /* climb progress meter */ .climb { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240,246,255,0.62); } .climb__track { flex: 1; height: 4px; border-radius: 999px; background: rgba(240,246,255,0.10); overflow: hidden; } .climb__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--signal-green), var(--site-accent)); transition: width 360ms cubic-bezier(0.16,1,0.3,1); } /* detail panel */ .detail { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 6px rgba(240,246,255,0.04), 0 22px 50px -30px rgba(240,246,255,0.62); } .detail__top { padding: 34px 38px 30px; border-bottom: 1px solid rgba(240,246,255,0.08); position: relative; } .detail__n { position: absolute; top: 24px; right: 34px; font-family: var(--font-primary); font-weight: 800; font-size: 76px; line-height: 1; color: rgba(240,246,255,0.06); letter-spacing: -0.03em; } .detail__name { font-family: var(--font-primary); font-weight: 800; font-size: clamp(28px,3.4vw,40px); letter-spacing: -0.022em; margin-bottom: 14px; } .detail__lede { font-size: 16.5px; line-height: 1.65; color: rgba(240,246,255,0.75); max-width: 60ch; } .detail__body { padding: 30px 38px 36px; display: grid; gap: 26px; } .detail__note { font-size: 15px; line-height: 1.7; color: rgba(240,246,255,0.75); padding: 18px 20px; background: var(--surface-inset); border-radius: 10px; border-left: 2px solid rgba(240,246,255,0.25); } .pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 620px) { .pr-grid { grid-template-columns: 1fr; } .detail__top, .detail__body { padding-left: 24px; padding-right: 24px; } } .pr { border-radius: 12px; padding: 20px 22px; border: 1px solid; } .pr__lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; } .pr__lab i { font-size: 14px; } .pr p { font-size: 14.5px; line-height: 1.6; margin: 0; color: rgba(240,246,255,0.75); } .pr--payoff { background: rgba(0,214,126,0.06); border-color: rgba(0,214,126,0.28); } .pr--payoff .pr__lab { color: var(--text-signal); } .pr--risk { background: rgba(255,43,78,0.05); border-color: rgba(255,43,78,0.24); } .pr--risk .pr__lab { color: var(--site-accent); } .uses { margin-top: 2px; } .uses__lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(240,246,255,0.62); margin-bottom: 14px; } .uses ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .uses li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.55; color: rgba(240,246,255,0.78); } .uses li i { color: var(--signal-green); font-size: 15px; margin-top: 2px; } /* ════════════════════════════════════════════════════════════ STAGE TABLE (overview preview) ════════════════════════════════════════════════════════════ */ .stable { width: 100%; border-collapse: collapse; background: var(--surface-card); border-radius: 14px; overflow: hidden; border: 1px solid var(--border-card); box-shadow: 0 14px 34px -24px rgba(240,246,255,0.35); } .stable th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240,246,255,0.62); text-align: left; padding: 16px 22px; border-bottom: 1px solid var(--border-card); background: rgba(240,246,255,0.02); } .stable td { padding: 18px 22px; border-bottom: 1px solid rgba(240,246,255,0.07); vertical-align: top; font-size: 14.5px; color: rgba(240,246,255,0.75); } .stable tr:last-child td { border-bottom: none; } .stable tr { transition: background 150ms; } .stable tbody tr:hover { background: rgba(255,43,78,0.025); } .stable .st-n { font-family: var(--font-primary); font-weight: 800; color: var(--light-orbit); font-size: 15px; white-space: nowrap; } .stable .st-n .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--site-accent); margin-right: 9px; vertical-align: middle; } .stable .st-pay { color: var(--light-orbit); font-weight: 500; } .tag-avail { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } @media (max-width: 760px) { .stable, .stable thead, .stable tbody, .stable tr, .stable td { display: block; width: 100%; } .stable thead { display: none; } .stable td { border: none; padding: 4px 20px; } .stable tr { padding: 16px 0; border-bottom: 1px solid var(--border-card); } .stable .st-n { font-size: 17px; padding-top: 14px; } } /* ════════════════════════════════════════════════════════════ PAIN MAPPER + ASSESSMENT ════════════════════════════════════════════════════════════ */ .mapper { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; } @media (max-width: 900px) { .mapper { grid-template-columns: 1fr; } } .symptoms { display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow-y: auto; padding-right: 6px; } .symptom { text-align: left; font-family: inherit; cursor: pointer; width: 100%; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 10px; padding: 15px 18px; font-size: 14.5px; line-height: 1.4; color: rgba(240,246,255,0.78); display: flex; align-items: center; gap: 12px; transition: all 160ms ease-out; } .symptom:hover { border-color: rgba(255,43,78,0.4); background: rgba(255,43,78,0.02); } .symptom.is-active { background: rgba(255,255,255,0.10); border-color: var(--light-orbit); color: var(--light-orbit); } .symptom__ar { margin-left: auto; color: rgba(240,246,255,0.3); font-size: 15px; transition: transform 160ms, color 160ms; } .symptom.is-active .symptom__ar { color: var(--site-accent); transform: translateX(2px); } .diagnosis { position: sticky; top: 88px; } .diag-card { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 16px; overflow: hidden; box-shadow: 0 22px 50px -30px rgba(240,246,255,0.62); } .diag-card__head { padding: 26px 30px; background: rgba(255,255,255,0.10); color: var(--light-orbit); } .diag-card__head .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-green); margin-bottom: 12px; } .diag-card__feel { font-family: var(--font-primary); font-weight: 700; font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; } .diag-card__body { padding: 26px 30px 30px; } .diag-row { margin-bottom: 22px; } .diag-row:last-of-type { margin-bottom: 26px; } .diag-row .lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(240,246,255,0.62); margin-bottom: 8px; } .diag-row .val { font-size: 16px; line-height: 1.5; color: var(--light-orbit); font-weight: 500; } .diag-stages { display: flex; gap: 8px; flex-wrap: wrap; } .diag-stage { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; padding: 6px 12px; border-radius: 999px; background: rgba(255,43,78,0.08); color: var(--site-accent); border: 1px solid rgba(255,43,78,0.25); } /* assessment quiz */ .quiz { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 16px; overflow: hidden; box-shadow: 0 22px 50px -30px rgba(240,246,255,0.62); max-width: 720px; margin: 0 auto; } .quiz__progress { height: 4px; background: rgba(240,246,255,0.08); } .quiz__progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--signal-green), var(--site-accent)); transition: width 320ms cubic-bezier(0.16,1,0.3,1); } .quiz__body { padding: 40px 44px 38px; } @media (max-width: 560px) { .quiz__body { padding: 30px 24px; } } .quiz__step { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240,246,255,0.62); margin-bottom: 18px; } .quiz__q { font-family: var(--font-primary); font-weight: 700; font-size: clamp(22px,2.6vw,30px); letter-spacing: -0.018em; line-height: 1.2; margin-bottom: 28px; } .quiz__opts { display: flex; flex-direction: column; gap: 10px; } .quiz__opt { text-align: left; font-family: inherit; cursor: pointer; width: 100%; background: var(--surface-card); border: 1.5px solid var(--border-card-strong); border-radius: 12px; padding: 18px 20px; font-size: 16px; color: rgba(240,246,255,0.82); display: flex; align-items: center; gap: 14px; transition: all 160ms ease-out; } .quiz__opt:hover { border-color: var(--site-accent); background: rgba(255,43,78,0.025); } .quiz__opt .rad { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(240,246,255,0.25); flex-shrink: 0; transition: all 160ms; } .quiz__opt:hover .rad { border-color: var(--site-accent); } .quiz__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; } .quiz__back { background: none; border: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(240,246,255,0.62); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .quiz__back:hover { color: var(--light-orbit); } .quiz__back:disabled { opacity: 0; pointer-events: none; } /* result */ .result__rec { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-signal); margin-bottom: 14px; } .result__stage { font-family: var(--font-primary); font-weight: 800; font-size: clamp(30px,4vw,46px); letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 6px; } .result__stage .num { color: var(--site-accent); } .result__focus { font-size: 17px; line-height: 1.6; color: rgba(240,246,255,0.75); margin: 20px 0 8px; } .result__cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; } /* ════════════════════════════════════════════════════════════ MODEL CARDS ════════════════════════════════════════════════════════════ */ .models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 980px) { .models { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .models { grid-template-columns: 1fr; } } .model { display: flex; flex-direction: column; } .model .card__ico { background: rgba(0,214,126,0.08); border-color: rgba(0,214,126,0.28); color: var(--text-signal); } .model h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 14px; } .model p { font-size: 14px; line-height: 1.6; color: rgba(240,246,255,0.75); margin: 0 0 14px; } .model .pain { font-size: 13.5px; color: rgba(240,246,255,0.62); } .model__stat { margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--border-card); } .model__stat .big { font-family: var(--font-primary); font-weight: 800; font-size: 38px; letter-spacing: -0.03em; color: var(--light-orbit); line-height: 1; } .model__stat .big .u { color: var(--site-accent); font-size: 0.5em; } .model__stat .sl { font-size: 12.5px; line-height: 1.45; color: rgba(240,246,255,0.62); margin-top: 8px; } .model__focus { margin-top: 18px; padding: 14px 16px; background: var(--surface-inset); border-radius: 10px; border-left: 2px solid var(--signal-green); font-size: 13.5px; line-height: 1.5; color: rgba(240,246,255,0.75); } .model__focus b { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-signal); display: block; margin-bottom: 5px; font-weight: 400; } /* ════════════════════════════════════════════════════════════ "WHERE TEAMS ARE" — clustered findings ════════════════════════════════════════════════════════════ */ .findings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 760px) { .findings { grid-template-columns: 1fr; } } .finding { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 12px; padding: 26px 28px; box-shadow: 0 1px 2px rgba(240,246,255,0.04); } .finding h4, .finding h3 { font-family: var(--font-primary); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .finding h4 .pulse-dot, .finding h3 .pulse-dot { width: 7px; height: 7px; } .finding p { font-size: 14px; line-height: 1.6; color: rgba(240,246,255,0.75); margin: 0; } .finding em { font-style: normal; color: var(--site-accent); font-weight: 600; } /* ════════════════════════════════════════════════════════════ CTA BAND ════════════════════════════════════════════════════════════ */ .cta-band { text-align: center; } .cta-band h2 { margin: 0 auto 22px; max-width: 18ch; } .cta-band p { font-size: 18px; line-height: 1.6; color: rgba(240,246,255,0.75); max-width: 560px; margin: 0 auto 36px; } .cta-band .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ════════════════════════════════════════════════════════════ CONTACT FORM ════════════════════════════════════════════════════════════ */ .contact { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; } @media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: 40px; } } .contact__aside .lede { margin-bottom: 30px; } .contact__points { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; } .contact__point { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 14.5px; line-height: 1.5; color: rgba(240,246,255,0.75); } .contact__point i { color: var(--signal-green); font-size: 17px; margin-top: 1px; } .form { background: rgba(255,255,255,0.04); border: 1px solid rgba(74,68,88,0.55); border-radius: 16px; padding: 34px 36px; backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.06); } @media (max-width: 560px) { .form { padding: 26px 22px; } } .field { margin-bottom: 20px; } .field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 520px) { .field--row { grid-template-columns: 1fr; gap: 0; } } .field label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240,246,255,0.62); margin-bottom: 9px; } .field label .req { color: var(--site-accent); } .field input, .field select, .field textarea { width: 100%; font-family: var(--font-secondary); font-size: 15px; color: var(--light-orbit); background: rgba(10,6,16,0.5); border: 1px solid rgba(74,68,88,0.6); border-radius: 9px; padding: 13px 15px; transition: border-color 140ms, box-shadow 140ms; outline: none; } .field input::placeholder, .field textarea::placeholder { color: rgba(240,246,255,0.32); } .field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(255,43,78,0.6); box-shadow: 0 0 0 3px rgba(255,43,78,0.12); } .field textarea { resize: vertical; min-height: 120px; } .field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 15px center; } .form__submit { width: 100%; justify-content: center; margin-top: 6px; } .form__note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: rgba(240,246,255,0.62); margin-top: 16px; text-align: center; } .form__success { text-align: center; padding: 30px 10px; } .form__success i { font-size: 44px; color: var(--signal-green); margin-bottom: 16px; } .form__success h3, .form__success h2 { font-size: 24px; margin-bottom: 10px; } .form__success p { color: rgba(240,246,255,0.75); font-size: 15px; line-height: 1.6; } /* ════════════════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════════════════ */ .footer { padding: 60px 40px 46px; } .footer__grid { max-width: var(--max-shell); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; } @media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; } } .footer__brand .wm { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; } .footer__brand .wm img { height: 26px; } .footer__brand .wm span { font-family: var(--font-primary); font-weight: 900; font-size: 15px; letter-spacing: 0.18em; color: var(--light-orbit); } .footer__brand p { font-size: 13.5px; line-height: 1.6; color: rgba(240,246,255,0.62); max-width: 320px; } .footer__col h5, .footer__col h2 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240,246,255,0.62); margin: 0 0 14px; font-weight: 400; } .footer__col a { display: block; margin-bottom: 9px; font-size: 13.5px; color: rgba(240,246,255,0.75); transition: color 120ms; } .footer__col a:hover { color: var(--light-orbit); } .footer__legal { max-width: var(--max-shell); margin: 36px auto 0; padding-top: 24px; border-top: 1px solid rgba(74,68,88,0.4); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: rgba(240,246,255,0.62); } .footer__legal .egg { color: rgba(0,214,126,0.4); } /* ════════════════════════════════════════════════════════════ AMBIENT EASTER EGG — DS + .telemetry; we position only ════════════════════════════════════════════════════════════ */ .egg-float { position: fixed; bottom: 22px; right: 24px; z-index: 9; pointer-events: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } @media (max-width: 1023px) { .egg-float { display: none; } } /* ── Scroll reveal (JS-driven via useReveal → .is-visible) ────── The DS motion.css sets `.reveal { opacity:0 }` as a base but keys its reveal on [data-reveal].revealed. This site drives reveals by toggling .is-visible, so re-assert the full pair here (site.css loads after the DS, so equal-specificity wins by order). */ .reveal { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } .reveal[data-stagger="1"] { transition-delay: 80ms; } .reveal[data-stagger="2"] { transition-delay: 160ms; } .reveal[data-stagger="3"] { transition-delay: 240ms; } .reveal[data-stagger="4"] { transition-delay: 320ms; } .reveal[data-stagger="5"] { transition-delay: 400ms; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* tweak: motion off */ body.no-motion .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* tweak: ambient telemetry off */ body.no-eggs .egg-float { display: none !important; } /* overview inline grids */ @media (max-width: 760px) { .believe-grid { grid-template-columns: 1fr !important; } .crm-grid { grid-template-columns: 1fr !important; } .about-grid { grid-template-columns: 1fr !important; gap: 24px !important; } } /* ════════════════════════════════════════════════════════════ THE STACK — agentic architecture on Revenue Cloud ════════════════════════════════════════════════════════════ */ .stack { display: flex; flex-direction: column; gap: 0; } .layer { display: grid; grid-template-columns: 58px 1fr; gap: 22px; align-items: center; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 14px; padding: 24px 28px; box-shadow: 0 1px 2px rgba(240,246,255,0.04), 0 14px 30px -22px rgba(240,246,255,0.28); position: relative; z-index: 1; } .layer--found { border-color: rgba(255,43,78,0.30); border-left: 3px solid var(--site-accent); box-shadow: 0 2px 6px rgba(255,43,78,0.05), 0 18px 40px -24px rgba(255,43,78,0.25); } .layer__ico { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(0,214,126,0.08); border: 1px solid rgba(0,214,126,0.26); color: var(--text-signal); } .layer--found .layer__ico { background: rgba(255,43,78,0.09); border-color: rgba(255,43,78,0.26); color: var(--site-accent); } .layer__lab { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240,246,255,0.62); margin-bottom: 5px; } .layer__name { font-family: var(--font-primary); font-weight: 800; font-size: 20px; letter-spacing: -0.015em; color: var(--light-orbit); margin-bottom: 5px; } .layer__name .badge { font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-signal); background: rgba(0,214,126,0.10); border: 1px solid rgba(0,214,126,0.25); border-radius: 999px; padding: 2px 9px; margin-left: 10px; vertical-align: middle; } .layer__role { font-size: 14.5px; line-height: 1.55; color: rgba(240,246,255,0.75); } .layer__role b { color: var(--light-orbit); font-weight: 600; } .layer__edge { width: 2px; height: 22px; margin: 0 0 0 86px; position: relative; z-index: 0; background: linear-gradient(180deg, rgba(0,214,126,0.55), rgba(0,214,126,0.12)); } .layer__edge::after { content: "↓"; position: absolute; left: -5px; bottom: -3px; font-family: var(--font-mono); font-size: 11px; color: rgba(0,214,126,0.6); } .layer__edge--found { background: linear-gradient(180deg, rgba(0,214,126,0.4), rgba(255,43,78,0.5)); } .layer__edge--found::after { color: var(--site-accent); } @media (max-width: 620px) { .layer { grid-template-columns: 1fr; gap: 14px; padding: 20px 22px; } .layer__edge { margin-left: 30px; } } /* ════════════════════════════════════════════════════════════ LIFECYCLE STRIP (Home problem band) ════════════════════════════════════════════════════════════ */ .lifecycle { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; } .lc-node { flex: 1; min-width: 96px; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 12px; padding: 20px 16px; text-align: center; position: relative; box-shadow: 0 1px 2px rgba(240,246,255,0.04); } .lc-node i { font-size: 24px; color: var(--text-signal); margin-bottom: 10px; display: block; } .lc-node .lc-name { font-family: var(--font-primary); font-weight: 700; font-size: 14px; color: var(--light-orbit); } .lc-arrow { display: flex; align-items: center; justify-content: center; padding: 0 6px; color: rgba(240,246,255,0.3); font-size: 18px; flex: 0 0 auto; } .lc-arrow.is-broken { color: var(--site-accent); } .lc-arrow.is-broken i { animation: lc-pulse 2s ease-in-out infinite; } @keyframes lc-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .lc-arrow.is-broken i { animation: none; } } .lc-node.is-leak { border-color: rgba(255,43,78,0.4); } .lc-node.is-leak::after { content: "leak"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--site-accent); padding: 2px 8px; border-radius: 999px; } @media (max-width: 760px) { .lifecycle { flex-direction: column; gap: 8px; } .lc-arrow { transform: rotate(90deg); padding: 4px 0; } } /* ════════════════════════════════════════════════════════════ PROOF BAR (Home — credibility) ════════════════════════════════════════════════════════════ */ .pbar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; align-items: center; max-width: 720px; margin: 0 auto; } .pbar__cell { text-align: center; padding: 8px 30px; border-left: 1px solid rgba(74,68,88,0.4); } .pbar__cell:first-child { border-left: none; } .pbar__big { font-family: var(--font-primary); font-weight: 800; font-size: clamp(34px, 4.4vw, 58px); line-height: 1; letter-spacing: -0.03em; color: var(--light-orbit); font-variant-numeric: tabular-nums; } .pbar__big.accent { color: var(--site-accent); } .pbar__lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240,246,255,0.62); margin-top: 14px; } @media (max-width: 520px) { .pbar { grid-template-columns: 1fr; gap: 34px; } .pbar__cell { border-left: none; } } /* ════════════════════════════════════════════════════════════ ICP TEASER (Home — segment marks) ════════════════════════════════════════════════════════════ */ .icp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 820px) { .icp { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .icp { grid-template-columns: 1fr; } } .icp__mark { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 12px; padding: 24px 18px; text-align: center; transition: all 200ms cubic-bezier(0.16,1,0.3,1); box-shadow: 0 1px 2px rgba(240,246,255,0.04); } .icp__mark:hover { border-color: rgba(0,214,126,0.5); transform: translateY(-2px); } .icp__mark i { font-size: 28px; color: var(--text-signal); margin-bottom: 12px; display: block; } .icp__mark .nm { font-family: var(--font-primary); font-weight: 700; font-size: 13.5px; letter-spacing: -0.005em; color: var(--light-orbit); line-height: 1.25; } /* ════════════════════════════════════════════════════════════ ACCELERATOR ROWS + PRACTICE CARDS (What We Do) ════════════════════════════════════════════════════════════ */ .accels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 720px) { .accels { grid-template-columns: 1fr; } } .accel { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 14px; padding: 28px 30px; box-shadow: 0 1px 2px rgba(240,246,255,0.04), 0 14px 30px -22px rgba(240,246,255,0.28); display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start; } .accel__ico { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(255,43,78,0.08); border: 1px solid rgba(255,43,78,0.24); color: var(--site-accent); } .accel__code { margin-bottom: 8px; } .accel__name { font-family: var(--font-primary); font-weight: 800; font-size: 21px; letter-spacing: -0.015em; color: var(--light-orbit); margin-bottom: 8px; } .accel__body { font-size: 14.5px; line-height: 1.6; color: rgba(240,246,255,0.75); margin: 0; } .practice .card__ico { background: rgba(0,214,126,0.08); border-color: rgba(0,214,126,0.28); color: var(--text-signal); } .practice .tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-signal); margin-bottom: 8px; display: block; } .practice h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 12px; } .practice p { font-size: 14.5px; line-height: 1.6; color: rgba(240,246,255,0.75); margin: 0; } /* before/after catalog (What We Do) */ .ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; } @media (max-width: 760px) { .ba { grid-template-columns: 1fr; } } .ba__col { border-radius: 14px; padding: 26px 28px; border: 1px solid; } .ba__col--before { background: rgba(255,43,78,0.04); border-color: rgba(255,43,78,0.22); } .ba__col--after { background: rgba(0,214,126,0.05); border-color: rgba(0,214,126,0.28); } .ba__lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .ba__col--before .ba__lab { color: var(--site-accent); } .ba__col--after .ba__lab { color: var(--text-signal); } .ba__col h4, .ba__col h3 { font-size: 18px; font-weight: 700; margin-bottom: 14px; letter-spacing: -0.01em; } .ba__chips { display: flex; flex-wrap: wrap; gap: 7px; } .ba__chip { font-family: var(--font-mono); font-size: 11px; padding: 5px 11px; border-radius: 7px; } .ba__col--before .ba__chip { background: rgba(255,43,78,0.10); color: var(--site-accent); } .ba__col--after .ba__chip { background: rgba(0,214,126,0.12); color: var(--text-signal); } .ba__mid { display: flex; align-items: center; justify-content: center; color: rgba(240,246,255,0.3); font-size: 26px; } @media (max-width: 760px) { .ba__mid { transform: rotate(90deg); padding: 6px 0; } } /* ════════════════════════════════════════════════════════════ APPROACH — cross-link cards + about facts ════════════════════════════════════════════════════════════ */ .crosslink { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 760px) { .crosslink { grid-template-columns: 1fr; } } .xl { background: rgba(255,255,255,0.10); border-radius: 16px; padding: 34px 34px 30px; color: var(--light-orbit); position: relative; overflow: hidden; border: 1px solid rgba(74,68,88,0.5); transition: transform 280ms cubic-bezier(0.16,1,0.3,1); display: block; } .xl:hover { transform: translateY(-3px); } .xl__ico { width: 48px; height: 48px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 23px; background: rgba(255,43,78,0.12); border: 1px solid rgba(255,43,78,0.3); color: var(--site-accent); margin-bottom: 20px; } .xl h3 { font-size: 23px; font-weight: 800; letter-spacing: -0.018em; margin-bottom: 10px; color: var(--light-orbit); } .xl p { font-size: 14.5px; line-height: 1.6; color: rgba(240,246,255,0.75); margin: 0 0 20px; } .xl__go { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal-green); display: inline-flex; align-items: center; gap: 8px; } .about-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .fact { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 14px; padding: 30px 30px; box-shadow: 0 1px 2px rgba(240,246,255,0.04); border-top: 2px solid var(--signal-green); } .fact__k { margin-top: 0; font-weight: 500; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-signal); margin-bottom: 14px; } .fact p { font-size: 15px; line-height: 1.65; color: rgba(240,246,255,0.75); margin: 0; } .verticals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .vert { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; padding: 8px 14px; border-radius: 999px; background: rgba(240,246,255,0.04); border: 1px solid var(--border-card); color: rgba(240,246,255,0.75); } /* ════════════════════════════════════════════════════════════ QUOTE-TO-CASH — 80/20 split + use-case cards (Who We Serve) ════════════════════════════════════════════════════════════ */ .split { display: flex; gap: 12px; margin-bottom: 16px; } .split__seg { border: 1px solid var(--border-card); cursor: pointer; font-family: inherit; text-align: left; border-radius: 16px; padding: 24px 28px; position: relative; overflow: hidden; background: var(--surface-card); box-shadow: 0 1px 2px rgba(240,246,255,0.04); transition: border-color 220ms, box-shadow 220ms, transform 220ms; } .split__seg--q { flex: 80 1 0; } .split__seg--b { flex: 20 1 0; } .split__seg:hover { transform: translateY(-2px); } .split__seg .pct { font-family: var(--font-primary); font-weight: 800; font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.03em; color: var(--light-orbit); line-height: 0.95; } .split__seg .nm { font-family: var(--font-primary); font-weight: 700; font-size: clamp(16px,1.6vw,20px); letter-spacing: -0.012em; color: var(--light-orbit); margin-top: 12px; } .split__seg .sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(240,246,255,0.62); margin-top: 8px; } .split__seg.is-active { border-color: var(--site-accent); box-shadow: 0 12px 30px -16px rgba(255,43,78,0.42); } .split__seg.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--site-accent); } .split__seg--b.is-active { border-color: var(--signal-green); box-shadow: 0 12px 30px -16px rgba(0,214,126,0.42); } .split__seg--b.is-active::after { background: var(--signal-green); } .split__seg--b .pct { color: rgba(240,246,255,0.62); } .split__hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: rgba(240,246,255,0.62); margin: 0 0 40px; } .split__hint b { color: var(--light-orbit); font-weight: 500; } @media (max-width: 680px) { .split { flex-direction: column; } .split__seg { flex: 1 1 auto; } } .uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 960px) { .uc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .uc-grid { grid-template-columns: 1fr; } } .uc { background: var(--surface-card); border: 1px solid var(--border-card); border-left: 2px solid var(--site-accent); border-radius: 12px; padding: 24px 26px; box-shadow: 0 1px 2px rgba(240,246,255,0.04), 0 14px 30px -24px rgba(240,246,255,0.3); display: flex; flex-direction: column; } .uc--b { border-left-color: var(--signal-green); } .uc__ico { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(255,43,78,0.08); border: 1px solid rgba(255,43,78,0.24); color: var(--site-accent); margin-bottom: 18px; } .uc--b .uc__ico { background: rgba(0,214,126,0.08); border-color: rgba(0,214,126,0.26); color: var(--text-signal); } .uc h4 { font-family: var(--font-primary); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--light-orbit); margin-bottom: 12px; } .uc__prob { font-size: 14px; line-height: 1.55; color: rgba(240,246,255,0.75); margin: 0 0 16px; } .uc__sol { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(240,246,255,0.08); } .uc__sol .lab { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-signal); display: flex; align-items: center; gap: 7px; margin-bottom: 8px; } .uc__sol .lab i { font-size: 13px; } .uc__sol p { font-size: 14px; line-height: 1.55; color: var(--light-orbit); margin: 0; font-weight: 500; } /* ── Use cases BY INDUSTRY (quoting-dominant, 80/20) ── */ .ind-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 44px; } .ind-tab { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(240,246,255,0.12); background: var(--surface-card); cursor: pointer; font-family: var(--font-secondary); font-weight: 600; font-size: 14px; color: rgba(240,246,255,0.62); transition: all 180ms ease-out; } .ind-tab i { font-size: 17px; color: rgba(240,246,255,0.62); transition: color 180ms; } .ind-tab:hover { border-color: rgba(255,43,78,0.4); color: var(--light-orbit); transform: translateY(-1px); } .ind-tab.is-active { background: rgba(255,255,255,0.10); border-color: var(--light-orbit); color: var(--light-orbit); } .ind-tab.is-active i { color: var(--site-accent); } .ind-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 26px; flex-wrap: wrap; } .ind-head__main { flex: 1; min-width: 280px; } .ind-head h3 { font-family: var(--font-primary); font-weight: 800; font-size: clamp(26px,3vw,38px); letter-spacing: -0.02em; } .ind-head .shape { font-size: 15px; line-height: 1.6; color: rgba(240,246,255,0.75); max-width: 62ch; margin: 10px 0 0; } .ind-stat { text-align: right; flex-shrink: 0; } .ind-stat .big { font-family: var(--font-primary); font-weight: 800; font-size: clamp(34px,3.6vw,46px); letter-spacing: -0.03em; color: var(--site-accent); line-height: 1; } .ind-stat .sl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(240,246,255,0.62); margin-top: 9px; max-width: 210px; margin-left: auto; line-height: 1.5; } @media (max-width: 620px) { .ind-stat { text-align: left; } .ind-stat .sl { margin-left: 0; } } .ratio { display: flex; height: 9px; gap: 4px; margin-bottom: 9px; } .ratio span { display: block; border-radius: 999px; } .ratio .q { flex: 80; background: linear-gradient(90deg, var(--site-accent), rgba(255,43,78,0.7)); } .ratio .b { flex: 20; background: var(--signal-green); } .ratio-lab { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240,246,255,0.62); margin-bottom: 34px; } .ratio-lab .q-l { color: var(--site-accent); } .ratio-lab .b-l { color: var(--text-signal); } .uc2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 22px; align-items: start; margin-top: 28px; } @media (max-width: 880px) { .uc2 { grid-template-columns: 1fr; } } .uc-col__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .uc-col__head .t { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .uc-col--q .uc-col__head .t { color: var(--site-accent); } .uc-col--b .uc-col__head .t { color: var(--text-signal); } .uc-col__head .pct { font-family: var(--font-primary); font-weight: 800; font-size: 15px; color: rgba(240,246,255,0.35); } .uc-rows { display: grid; gap: 10px; } .uc-col--q .uc-rows { grid-template-columns: 1fr 1fr; } @media (max-width: 1080px) { .uc-col--q .uc-rows { grid-template-columns: 1fr; } } .uc-row { background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 12px; padding: 17px 19px; border-left: 2px solid var(--site-accent); box-shadow: 0 1px 2px rgba(240,246,255,0.04); transition: transform 240ms cubic-bezier(0.16,1,0.3,1), box-shadow 240ms; } .uc-row:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(240,246,255,0.35); } .uc-col--b .uc-row { border-left-color: var(--signal-green); } .uc-row .rh { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; } .uc-row .rh i { font-size: 18px; color: var(--site-accent); flex-shrink: 0; } .uc-col--b .uc-row .rh i { color: var(--text-signal); } .uc-row .rh .nm { font-family: var(--font-primary); font-weight: 700; font-size: 15px; letter-spacing: -0.008em; color: var(--light-orbit); } .uc-row p { font-size: 13.5px; line-height: 1.5; color: rgba(240,246,255,0.75); margin: 0; } /* operational core grid (services) */ .lc-node--stall { border-color: rgba(245,166,35,0.5); } .lc-node--stall .lc-name { color: var(--warn-text); } @media (max-width: 960px) { .findings[data-core-grid], section [data-core-grid].findings { grid-template-columns: repeat(2,1fr) !important; } } @media (max-width: 620px) { .findings[data-core-grid], section [data-core-grid].findings { grid-template-columns: 1fr !important; } } /* ============================================================ Production pass (voice + SEO, Sep 2026) ============================================================ */ main { display: block; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ignition-red, #FF2B4E); color: #fff; padding: 10px 14px; font-weight: 700; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; outline: 2px solid #fff; } /* stage rail: name above payoff line, not run together */ .rung__txt { display: flex; flex-direction: column; } .footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .form__success a, .form p[role="alert"] a { color: var(--light-orbit); text-decoration: underline; text-underline-offset: 3px; } .pov h3 .tag-avail { font-size: 10px; } .ind-stat .big { max-width: 260px; }