/* ========================================================================== Yotin Energy — design system Accent family is ember + sand. Cyan is retired from all UI chrome; it survives only inside the embedded R3F well scene, where it reads as *signal* rather than as brand. ========================================================================== */ :root { /* Base */ --void: #03070b; --deep: #06111a; --deep-2: #0a1a25; --deep-3: #102530; --paper: #f1eee7; --paper-2: #e6e0d6; --ink: #17222c; --white: #f8f7f3; --muted: #97a3aa; /* Accent — ember carries the loud notes, sand the quiet structural ones. */ --ember: #f27622; --ember-lit: #ff9147; --ember-deep: #d85a10; --ember-ink: #9f470d; /* the only ember safe for text on --paper */ --sand: #e8dcc8; --sand-mute: #b3aa9a; /* Hairlines are sand-tinted, not white. A cold white rule on near-black is the single strongest "generic dark template" tell on a page like this. */ --line: rgba(232, 220, 200, 0.13); --line-strong: rgba(232, 220, 200, 0.28); --line-dark: rgba(3, 7, 11, 0.14); --font-display: "Archivo", Arial, sans-serif; --font-hero: "Space Grotesk", "IBM Plex Sans", Arial, sans-serif; --font-body: "IBM Plex Sans", Arial, sans-serif; --font-mono: "IBM Plex Mono", Consolas, monospace; --shell: 1536px; --pad: clamp(22px, 4vw, 60px); --header-h: 84px; --ease: cubic-bezier(0.2, 0.75, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); } body { margin: 0; background: var(--void); color: var(--white); font-family: var(--font-body); font-size: 16px; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; /* MUST be clip, not hidden. `overflow-x: hidden` computes overflow-y to `auto`, which makes a scroll container — and a view() timeline binds to its nearest scroll-container ancestor. That silently freezes every scroll-driven animation on the page. `clip` clips without creating one. The `hidden` line is the fallback for browsers without `clip`. */ overflow-x: hidden; overflow-x: clip; } body.chatfi-open { overflow: hidden; } img { display: block; max-width: 100%; } button, input, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } [hidden] { display: none !important; } .shell { width: min(100%, var(--shell)); margin-inline: auto; padding-inline: var(--pad); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; padding: 10px 14px; background: var(--paper); color: var(--ink); transform: translateY(-160%); } .skip-link:focus { transform: translateY(0); } /* Page-progress rail. Inert without scroll-driven animation support — it just sits at scaleX(0) and is invisible, which is the correct no-op. */ .scroll-rail { position: fixed; inset: 0 0 auto; z-index: 90; height: 2px; background: linear-gradient(90deg, var(--ember-deep), var(--ember), var(--ember-lit)); transform: scaleX(0); transform-origin: left center; pointer-events: none; } :focus-visible { outline: 2px solid var(--ember-lit); outline-offset: 4px; } /* Shared type primitives ------------------------------------------------- */ .eyebrow { margin: 0 0 18px; color: var(--ember); font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.2em; } .eyebrow-ink { color: var(--ember-ink); } .section-head h2 span, .contact-section h2 span { color: var(--ember); } /* ========================================================================== Header ========================================================================== */ .site-header { position: fixed; inset: 0 0 auto; z-index: 80; transform: translateZ(0); height: var(--header-h); background: rgba(3, 7, 11, 0.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); transition: background-color 220ms ease, border-color 220ms ease, height 220ms ease; } .site-header[data-scrolled] { height: 64px; background: rgba(3, 7, 11, 0.96); border-bottom-color: var(--line-strong); } .header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand-mini { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); transition: transform 220ms var(--ease); } .brand-mini img { width: 54px; height: auto; flex: none; } .brand-mini-copy { display: flex; flex-direction: column; align-items: flex-start; } .brand-mini-copy strong { font-size: 30px; line-height: 0.9; font-weight: 800; letter-spacing: -0.045em; } .brand-mini-copy small { margin-top: 4px; color: var(--sand-mute); font-family: var(--font-body); font-size: 10px; line-height: 1; letter-spacing: 0.04em; } .site-header[data-scrolled] .brand-mini { transform: scale(0.86); transform-origin: left center; } .site-header[data-scrolled] .brand-mini-copy small { opacity: 0; } .desktop-nav { display: flex; align-items: center; gap: clamp(28px, 3.4vw, 52px); margin-left: auto; } .desktop-nav a { position: relative; padding: 6px 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #c1c9cd; transition: color 180ms ease; } .desktop-nav a::after { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--ember); transform: scaleX(0); transform-origin: left center; transition: transform 240ms var(--ease); content: ""; } .desktop-nav a:hover, .desktop-nav a.is-active { color: var(--ember-lit); } .desktop-nav a:hover::after, .desktop-nav a.is-active::after { transform: scaleX(1); } .nav-cta { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border: 1px solid var(--ember); border-radius: 999px; background: transparent; color: var(--ember); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background-color 180ms ease, color 180ms ease; } .nav-cta:hover { background: var(--ember); color: var(--void); } .nav-toggle { display: none; } .mobile-nav { display: none; } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; padding-top: var(--header-h); background: var(--void); border-bottom: 1px solid var(--line); /* clip, not hidden — the signal strip lives in here and needs its view() timeline to resolve against the document. See the note on body. */ overflow: hidden; overflow: clip; /* Pointer input only nudges the decorative scene. Keep a vertical swipe and pinch zoom available to the document itself. */ touch-action: pan-y pinch-zoom; } .hero-grid { /* Capped, not just 100svh. On a tall monitor an uncapped hero opened a ~390px void between the CTAs and the signal strip, because the copy is top-anchored and cannot grow to fill it. The cap also lets the signal strip peek above the fold, which reads as an invitation to scroll rather than a dead end. */ min-height: min(calc(100svh - var(--header-h)), 800px); display: flex; align-items: flex-start; /* The copy is lifted into the upper-left of the frame, which is where the island render is empty sky. Bottom-aligning it (the previous behaviour) left that corner as dead space and detached the copy from the art. */ padding-top: clamp(28px, 5vh, 64px); padding-bottom: clamp(84px, 10vh, 116px); position: relative; } .hero-copy { position: relative; z-index: 2; width: min(620px, 52vw); transform: translateZ(0); } .hero-message > .eyebrow { margin-bottom: 22px; } /* Product wordmark in place of a text eyebrow — brands the device rather than labelling it. Sized off height so the 4.5:1 mark keeps its proportions. */ .hero-wordmark { height: clamp(34px, 3.6vw, 48px); width: auto; margin: 0 0 24px; filter: drop-shadow(0 2px 10px rgba(3, 7, 11, 0.75)); } .hero-message h1 { max-width: 720px; margin: 0; font-family: var(--font-hero); font-size: clamp(58px, 5.6vw, 86px); line-height: 1; font-weight: 500; letter-spacing: -0.015em; } .hero-message h1 span { color: var(--ember); } .hero-lede { max-width: 470px; margin: 22px 0 0; color: #c3ccd1; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; } .proof-chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; margin: 26px 0 0; padding: 0; list-style: none; } .proof-chips li { min-height: 36px; display: inline-flex; align-items: center; gap: 9px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(3, 7, 11, 0.5); color: #cdd4d7; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } .proof-chips i { color: var(--ember); font-size: 15px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; } .button { min-height: 58px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 0 28px; border: 1px solid transparent; border-radius: 999px; font-weight: 600; cursor: pointer; transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; } .button:hover { transform: translateY(-2px); } .button i { font-size: 20px; transition: transform 220ms var(--ease); } .button:hover i { transform: translateX(4px); } .button-primary { background: var(--ember); color: var(--void); } .button-primary:hover { background: var(--ember-lit); box-shadow: 0 12px 34px -14px rgba(242, 118, 34, 0.9); } .button-secondary { border-color: var(--line-strong); background: rgba(3, 7, 11, 0.55); color: var(--sand); } .button-secondary:hover { border-color: var(--sand); color: var(--white); } .hero-actions .button { min-width: 236px; min-height: 62px; border-radius: 2px; font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } /* Scene ------------------------------------------------------------------ */ .hero-visual { position: absolute; inset: 0; z-index: 1; width: 100vw; height: 100%; margin-left: calc(50% - 50vw); pointer-events: none; } .hero-scene { --hero-legacy-x: 0px; --hero-legacy-y: 0px; position: absolute; top: calc(-20px + var(--hero-legacy-y)); right: calc(-190px - var(--hero-legacy-x)); width: min(114vw, 1800px); aspect-ratio: 16 / 9; max-width: none; transition: top 180ms cubic-bezier(0.22, 1, 0.36, 1), right 180ms cubic-bezier(0.22, 1, 0.36, 1); filter: saturate(0.95) contrast(1.04); isolation: isolate; background: #020408; } .hero-scene > .hero-poster, .hero-scene > .hero-live-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; background: #020408; pointer-events: none; } .hero-scene > .hero-poster { z-index: 1; opacity: 1; transition: opacity 800ms var(--ease); } .hero-scene > .hero-live-frame { z-index: 2; border: 0; opacity: 0; transition: opacity 800ms var(--ease); } .hero-scene.is-live > .hero-poster { opacity: 0; } .hero-scene.is-live > .hero-live-frame { opacity: 1; } .hero-scene.is-live:not(.has-pointer-bridge):not(.is-pointer-active) { animation: hero-legacy-idle 5.5s cubic-bezier(0.45, 0, 0.55, 1) infinite; } @keyframes hero-legacy-idle { 0%, 100% { margin-top: 4px; margin-right: -8px; } 50% { margin-top: -4px; margin-right: 8px; } } /* Scrim: seats the copy on the art instead of letting it float in a void. */ .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(3, 7, 11, 0.95) 0%, rgba(3, 7, 11, 0.82) 26%, rgba(3, 7, 11, 0.18) 54%, rgba(3, 7, 11, 0) 72%), linear-gradient(to top, rgba(3, 7, 11, 0.88) 0%, rgba(3, 7, 11, 0) 34%); } .scroll-cue { position: absolute; left: var(--pad); bottom: clamp(28px, 5vh, 48px); z-index: 2; transform: translateZ(0); display: inline-flex; align-items: center; gap: 12px; color: var(--sand-mute); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; } .scroll-cue i { color: var(--ember); font-size: 18px; animation: cue-drift 2.4s var(--ease) infinite; } @keyframes cue-drift { 0%, 100% { transform: translateY(-3px); opacity: 0.45; } 50% { transform: translateY(4px); opacity: 1; } } /* Signal strip ----------------------------------------------------------- */ .signal-strip { /* MUST sit above .hero-scrim (z-index 1). Left static, the scrim painted over these cards and its 100deg gradient dimmed them left-to-right — Signal buried at 0.95 alpha, Insight untouched past the 72% stop. The scrim still darkens the artwork behind; it just no longer darkens the UI. .hero-copy and .scroll-cue already had z-index 2; this was the omission. */ position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); padding-top: 30px; padding-bottom: 36px; } .signal-step { min-height: 132px; display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start; padding: 18px clamp(16px, 2vw, 34px); border-right: 1px solid var(--line); } .signal-step:first-child { padding-left: 0; } .signal-step:last-child { border-right: 0; padding-right: 0; } .signal-icon { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(242, 118, 34, 0.32); border-radius: 12px; background: rgba(242, 118, 34, 0.07); color: var(--ember); font-size: 26px; } .signal-number { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ember); color: var(--void); font-family: var(--font-mono); font-size: 10px; font-weight: 600; } .signal-step h2 { margin: 2px 0 6px; font-family: var(--font-display); font-size: 18px; } .signal-step p { margin: 0; max-width: 270px; color: var(--muted); font-size: 14px; line-height: 1.55; } /* ========================================================================== WellFi section ========================================================================== */ .wellfi-section { padding: clamp(88px, 9vw, 148px) 0; background: var(--deep); } .section-intro { display: grid; grid-template-columns: 0.9fr 1.1fr; column-gap: clamp(42px, 8vw, 120px); align-items: end; } .section-intro .eyebrow { grid-column: 1 / -1; } .section-intro h2 { margin: 0; max-width: 690px; font-family: var(--font-display); font-size: clamp(42px, 5.2vw, 76px); line-height: 1; letter-spacing: -0.05em; } .section-intro h2 span { color: var(--ember); } .section-summary { align-self: end; } .section-summary p { margin: 0; color: #b6c0c5; font-size: 18px; line-height: 1.75; } .section-summary .measurement-line { margin-bottom: 18px; color: var(--white); font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 23px); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; } /* Telemetry channel cards ------------------------------------------------ */ .channel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin: clamp(64px, 7vw, 96px) 0 22px; } .channel-head h3 { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.03em; } .channel-head p { margin: 0; color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .channel-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .channel-card { position: relative; min-height: 186px; /* clip so the enclosed .channel-sweep keeps a working view() timeline */ overflow: hidden; overflow: clip; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(180deg, rgba(16, 30, 42, 0.86), rgba(5, 12, 18, 0.94)); transition: transform 300ms var(--ease), border-color 300ms ease; } .channel-card:hover { transform: translateY(-4px); border-color: rgba(242, 118, 34, 0.36); } /* Hairline "acquire" sweep — scaled in by the motion layer. */ .channel-sweep { position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, rgba(242, 118, 34, 0), rgba(242, 118, 34, 0.85), rgba(232, 220, 200, 0.3), rgba(242, 118, 34, 0)); transform: scaleX(0); transform-origin: left center; } .channel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .channel-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(242, 118, 34, 0.28); border-radius: 9px; background: rgba(242, 118, 34, 0.08); color: var(--ember); font-size: 21px; } .channel-tag { padding: 4px 8px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255, 255, 255, 0.03); color: var(--sand-mute); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; } .channel-card h4 { margin: 22px 0 8px; font-family: var(--font-display); font-size: 16px; } .channel-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; } /* Journey ---------------------------------------------------------------- */ .journey-list { list-style: none; margin: clamp(64px, 7vw, 104px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); } .journey-list li { display: grid; grid-template-columns: 54px 1fr; gap: 22px; padding: 34px 34px 34px 0; border-bottom: 1px solid var(--line); } .journey-list li:nth-child(odd) { border-right: 1px solid var(--line); } .journey-list li:nth-child(even) { padding-left: 34px; } .journey-icon { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(232, 220, 200, 0.04); color: var(--sand); font-size: 26px; } .journey-icon span { position: absolute; top: -9px; left: -9px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ember); color: var(--void); font-family: var(--font-mono); font-size: 10px; font-weight: 600; } .journey-list h3 { margin: 4px 0 8px; font-family: var(--font-display); font-size: 22px; } .journey-list p { margin: 0; color: var(--muted); } /* Specs ------------------------------------------------------------------ */ .spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: clamp(66px, 7vw, 104px) 0 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .spec-grid > div { position: relative; min-height: 176px; padding: 26px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color 260ms ease; } .spec-grid > div:hover { background: rgba(242, 118, 34, 0.04); } .spec-grid > div > i { position: absolute; top: 24px; right: 26px; color: var(--ember); font-size: 26px; opacity: 0.55; } .spec-grid dt { color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; } .spec-grid dd { margin: 20px 0 0; font-family: var(--font-display); font-size: clamp(38px, 4vw, 58px); line-height: 1; font-weight: 700; letter-spacing: -0.045em; } .spec-grid dd.spec-output-value { font-size: clamp(32px, 3.25vw, 46px); line-height: 1.08; } .spec-grid small { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ember); } /* ========================================================================== Drill scrollytelling ========================================================================== */ .drill-section { position: relative; background: #04060a; border-top: 1px solid var(--line); } .drill-sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .drill-sticky::before { position: absolute; inset: 0; background: radial-gradient(125% 85% at 50% 42%, rgba(20, 27, 36, 0.55), #04060a 72%); pointer-events: none; content: ""; } .drill-stage { position: relative; width: min(94vw, 1180px); aspect-ratio: 16 / 9; } .drill-stage img.drill-formation, .drill-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* The raw Blender pass is a pale grey-blue section. Graded down and warmed so it belongs to the ember/void palette and so overlaid copy stays legible. */ .drill-stage img.drill-formation { object-fit: contain; filter: brightness(0.58) contrast(1.14) saturate(0.72) sepia(0.16); } /* Sits above the artwork, below the copy — keeps the centre band dark enough for the benefit cards without dimming the bore at the edges. */ .drill-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(68% 46% at 50% 32%, rgba(3, 7, 11, 0.74), rgba(3, 7, 11, 0.12) 70%, rgba(3, 7, 11, 0) 100%); } .drill-glow { position: absolute; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0; mix-blend-mode: screen; pointer-events: none; } .drill-glow > span { display: block; width: 100%; height: 100%; border-radius: 50%; /* The bloom stays cyan on purpose: this is the EM signal, i.e. data, and data is the one place the cool hue is still allowed to speak. */ background: radial-gradient(circle, rgba(190, 248, 255, 0.95) 0%, rgba(34, 211, 238, 0.7) 16%, rgba(56, 189, 248, 0.32) 40%, rgba(34, 211, 238, 0) 72%); filter: blur(4px); animation: drill-breathe 3s ease-in-out infinite alternate; } @keyframes drill-breathe { 0% { transform: scale(0.92); opacity: 0.82; } 100% { transform: scale(1.08); opacity: 1; } } .drill-intro { position: absolute; left: 50%; top: 9%; z-index: 3; width: min(90vw, 44rem); transform: translateX(-50%); text-align: center; } .drill-intro .eyebrow { margin-bottom: 10px; } .drill-intro h2 { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 50px); line-height: 1.02; letter-spacing: -0.045em; } .drill-benefit { position: absolute; left: 50%; top: 29%; z-index: 3; width: min(90vw, 34rem); padding: 22px 28px; border: 1px solid rgba(242, 118, 34, 0.34); border-radius: 14px; /* Near-opaque on purpose: these cards float over a lit geological render, so translucency costs more legibility than it buys atmosphere. */ background: rgba(4, 8, 12, 0.94); backdrop-filter: blur(8px); box-shadow: 0 22px 60px -18px rgba(0, 0, 0, 0.9), 0 0 40px -16px rgba(242, 118, 34, 0.55); text-align: center; opacity: 0; transform: translate(-50%, 14px); } .drill-benefit i { color: var(--ember); font-size: 30px; } .drill-benefit h3 { margin: 8px 0 6px; font-family: var(--font-display); font-size: clamp(19px, 2vw, 25px); letter-spacing: -0.02em; } .drill-benefit p { margin: 0; color: #b6c0c5; font-size: 15px; line-height: 1.55; } .drill-progress { position: absolute; left: 50%; bottom: 5.5%; z-index: 3; display: flex; gap: 7px; transform: translateX(-50%); } .drill-progress span { width: 26px; height: 3px; border-radius: 999px; background: rgba(232, 220, 200, 0.18); transition: background-color 260ms ease; } .drill-progress span.is-on { background: var(--ember); } /* Static fallback: mobile, touch, reduced motion, or no JS. */ .drill-fallback { padding: clamp(72px, 9vw, 120px) 0; } .drill-fallback .drill-fallback-head { max-width: 640px; margin: 0 auto 40px; text-align: center; } .drill-fallback h2 { margin: 0; font-family: var(--font-display); font-size: clamp(32px, 5.6vw, 52px); line-height: 1.02; letter-spacing: -0.045em; } .drill-fallback ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; } .drill-fallback li { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: rgba(10, 18, 26, 0.7); } .drill-fallback li i { color: var(--ember); font-size: 26px; } .drill-fallback li h3 { margin: 12px 0 6px; font-family: var(--font-display); font-size: 17px; } .drill-fallback li p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; } /* ========================================================================== Insight / device banner ========================================================================== */ .insight-section { padding: clamp(88px, 9vw, 140px) 0; background: var(--deep-2); border-top: 1px solid var(--line); } .insight-head { max-width: 760px; margin: 0 auto; text-align: center; } .insight-head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.05em; } .insight-head h2 span { color: var(--ember); } .insight-head > p { margin: 20px 0 0; color: #b6c0c5; font-size: 18px; line-height: 1.7; } .application-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; } .application-chips li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(242, 118, 34, 0.05); color: #cdd4d7; font-size: 14px; font-weight: 500; } .application-chips i { color: var(--ember); font-size: 17px; } .device-banner { position: relative; margin-top: clamp(46px, 5vw, 70px); padding: clamp(34px, 4vw, 56px) 0 26px; border: 1px solid var(--line); border-radius: 26px; background: radial-gradient(circle at 50% 50%, rgba(242, 118, 34, 0.09), transparent 64%); /* clip so the enclosed device image keeps a working view() timeline */ overflow: hidden; overflow: clip; } .device-glow { position: absolute; left: 50%; top: 46%; width: 58%; height: 120px; border-radius: 50%; background: rgba(242, 118, 34, 0.18); filter: blur(60px); transform: translate(-50%, -50%); pointer-events: none; } .device-banner img { position: relative; z-index: 1; width: 100%; max-width: 1120px; height: auto; margin-inline: auto; /* Fades the cut tubing ends into the panel so it reads as a cutaway rather than a pasted rectangle. */ -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%); } /* Access Portal callout — the software half of the product, which the hardware render alone doesn't communicate. */ .portal-note { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; max-width: 860px; margin: clamp(38px, 4.5vw, 60px) auto 0; padding: 26px 30px; border: 1px solid var(--line-strong); border-left: 3px solid var(--ember); border-radius: 14px; background: linear-gradient(100deg, rgba(242, 118, 34, 0.07), rgba(255, 255, 255, 0.02) 60%); } .portal-icon { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(242, 118, 34, 0.3); border-radius: 12px; background: rgba(242, 118, 34, 0.09); color: var(--ember); font-size: 28px; } .portal-note h3 { margin: 4px 0 8px; font-family: var(--font-display); font-size: 20px; letter-spacing: -0.02em; } .portal-note p { margin: 0; color: #b6c0c5; font-size: 15.5px; line-height: 1.65; } .device-caption { margin: clamp(22px, 3vw, 34px) auto 0; max-width: 620px; color: var(--sand-mute); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; } /* ========================================================================== Company ========================================================================== */ /* ========================================================================== FAQ Native

, so the answers are in the document for crawlers and for anyone without JavaScript, and the open/close costs no script at all. The shared `name="faq"` makes them an exclusive accordion in browsers that support it and independent toggles everywhere else — both are fine. ========================================================================== */ .faq-section { padding: clamp(76px, 8vw, 128px) 0; background: var(--deep); } .faq-section h2 { margin: 12px 0 clamp(32px, 4vw, 52px); font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 62px); line-height: 1; letter-spacing: -0.045em; } .faq-item { border-top: 1px solid var(--line); } .faq-item:last-of-type { border-bottom: 1px solid var(--line); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; /* 56px min-height keeps the target comfortable on a phone. */ min-height: 56px; padding: 18px 0; font-family: var(--font-display); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.35; color: var(--white); cursor: pointer; list-style: none; transition: color 180ms ease; } /* Suppress the default disclosure triangle in both engines; the icon below carries the state instead. */ .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::marker { content: ""; } .faq-item summary:hover { color: var(--ember-lit); } .faq-item summary:focus-visible { outline: 2px solid var(--ember-lit); outline-offset: 4px; } .faq-item summary i { flex: none; font-size: 22px; color: var(--ember); transition: transform 240ms var(--ease); } .faq-item[open] summary i { transform: rotate(45deg); } .faq-item p { max-width: 62ch; margin: 0; padding: 0 0 26px; color: #b6c0c5; font-size: 15.5px; line-height: 1.7; } .company-section { padding: clamp(88px, 9vw, 150px) 0; background: var(--paper); color: var(--ink); } .company-grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(50px, 8vw, 130px); align-items: start; } .company-section h2 { margin: 0; font-family: var(--font-display); font-size: clamp(44px, 5.6vw, 84px); line-height: 0.98; letter-spacing: -0.06em; } .company-section h2 em { color: var(--ember-ink); font-style: italic; } /* Ownership badge sits directly under the name, where it carries most. */ .company-badge { display: inline-flex; align-items: center; gap: 10px; margin: 26px 0 0; padding: 11px 20px; border: 1px solid rgba(159, 71, 13, 0.3); border-radius: 999px; background: rgba(242, 118, 34, 0.09); color: var(--ember-ink); font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .company-badge i { font-size: 19px; } .company-copy { padding-top: 30px; } .company-copy > p { margin: 0 0 22px; color: #46545d; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.72; } /* The name's meaning is the lead thought now, so it carries more weight. */ .company-copy > p.company-lede { color: var(--ink); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.6; letter-spacing: -0.01em; } .company-copy em { color: var(--ink); font-style: italic; } .company-copy .location { display: flex; align-items: center; gap: 10px; margin-top: 34px; color: var(--ember-ink); font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; } .company-copy .location i { font-size: 21px; } .company-marks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; } .company-mark { padding: 20px; border: 1px solid rgba(23, 34, 44, 0.14); border-radius: 12px; background: rgba(255, 255, 255, 0.5); } .company-mark i { color: var(--ember-ink); font-size: 26px; } .company-mark strong { display: block; margin: 12px 0 4px; font-family: var(--font-display); font-size: 15px; } .company-mark span { color: #5c6971; font-size: 13.5px; line-height: 1.5; } /* ========================================================================== Contact ========================================================================== */ .contact-section { padding: clamp(88px, 9vw, 146px) 0; background: var(--deep-2); } .contact-grid { display: grid; grid-template-columns: 1fr 0.8fr; gap: clamp(60px, 10vw, 160px); align-items: end; } .contact-section h2 { margin: 0; font-family: var(--font-display); font-size: clamp(44px, 5.6vw, 84px); line-height: 0.98; letter-spacing: -0.06em; } .contact-actions > p { margin: 0 0 30px; color: #b6c0c5; font-size: 19px; } .contact-actions { display: flex; flex-direction: column; align-items: flex-start; } .contact-email { margin: 18px 0 0; color: var(--muted); font-size: 14.5px; } .contact-email a { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; } .contact-email a:hover { color: var(--ember-lit); } .text-button { margin-top: 18px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--ember); background: transparent; color: var(--ember); cursor: pointer; } .text-button:hover { color: var(--ember-lit); } /* ========================================================================== Candidate-well qualifier ========================================================================== */ .qualifier { max-width: 780px; margin: clamp(52px, 6vw, 84px) auto 0; padding: clamp(26px, 3.5vw, 42px); border: 1px solid var(--line-strong); border-radius: 22px; background: linear-gradient(180deg, rgba(16, 30, 42, 0.7), rgba(5, 12, 18, 0.86)); box-shadow: 0 26px 80px -34px rgba(0, 0, 0, 0.9); } .qualifier-intro { text-align: center; margin-bottom: 26px; } .qualifier-intro .eyebrow { margin-bottom: 10px; } .qualifier-intro h3 { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.035em; } .qualifier-intro > p { margin: 12px auto 0; max-width: 30rem; color: var(--muted); font-size: 15px; line-height: 1.6; } .qualifier-progress { display: flex; gap: 6px; margin-bottom: 24px; } .qualifier-progress span { flex: 1; height: 3px; border-radius: 999px; background: rgba(232, 220, 200, 0.14); transition: background-color 260ms var(--ease); } .qualifier-progress span.is-done { background: var(--ember); } .qualifier-progress span.is-current { background: rgba(242, 118, 34, 0.5); } .qualifier-step { text-align: center; } .qualifier-count { color: var(--sand-mute); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } .qualifier-question { margin: 10px 0 22px; font-family: var(--font-display); font-size: clamp(19px, 2vw, 25px); letter-spacing: -0.02em; } /* Focus is moved here programmatically so the new question is announced, but it is a heading rather than a control — a visible ring just reads as a bug. Focus still moves, so screen readers still announce it. */ .qualifier-question:focus { outline: none; } .qualifier-hint { margin: -12px auto 20px; max-width: 30rem; color: var(--sand-mute); font-size: 13.5px; line-height: 1.5; } /* Numeric step */ .qualifier-number { display: grid; justify-items: center; gap: 4px; } .qualifier-field { display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(3, 7, 11, 0.6); transition: border-color 180ms ease, box-shadow 180ms ease; } .qualifier-field:focus-within { border-color: var(--ember); box-shadow: 0 0 0 3px rgba(242, 118, 34, 0.16); } .qualifier-input { width: 8ch; padding: 12px 14px; border: 0; background: transparent; color: var(--white); font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -0.02em; text-align: center; } .qualifier-input:focus { outline: none; } .qualifier-input::placeholder { color: #5d6a72; font-weight: 500; } .qualifier-unit { color: var(--ember); font-family: var(--font-mono); font-size: 15px; font-weight: 600; } .qualifier-error { min-height: 18px; margin: 6px 0 0; color: var(--ember-lit); font-size: 13px; } .qualifier-go { min-width: 200px; margin-top: 6px; } .qualifier-options { display: grid; gap: 10px; } .qualifier-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 58px; padding: 14px 20px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(255, 255, 255, 0.025); color: var(--white); font-size: 15.5px; font-weight: 500; text-align: left; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, transform 140ms ease; } .qualifier-option:hover { border-color: var(--ember); background: rgba(242, 118, 34, 0.08); transform: translateY(-1px); } .qualifier-option .tag { flex: none; padding: 4px 10px; border-radius: 999px; background: rgba(242, 118, 34, 0.14); color: var(--ember); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; } .qualifier-back { margin-top: 18px; padding: 8px 0; border: 0; background: transparent; color: var(--sand-mute); font-size: 13.5px; cursor: pointer; } .qualifier-back:hover { color: var(--white); } /* --- verdict --- */ .qualifier-verdict { text-align: center; } .qualifier-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 999px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .qualifier-badge i { font-size: 19px; } .qualifier-verdict[data-fit="strong"] .qualifier-badge { border: 1px solid rgba(125, 216, 106, 0.4); background: rgba(125, 216, 106, 0.1); color: #8fe07a; } .qualifier-verdict[data-fit="review"] .qualifier-badge { border: 1px solid rgba(242, 118, 34, 0.4); background: rgba(242, 118, 34, 0.1); color: var(--ember-lit); } /* Not a rejection — a waitlist. Styled as sand/neutral rather than a warning, because "we're building that" should not read like "no". */ .qualifier-verdict[data-fit="future"] .qualifier-badge { border: 1px solid rgba(232, 220, 200, 0.32); background: rgba(232, 220, 200, 0.07); color: var(--sand); } .qualifier-headline { margin: 18px 0 0; font-family: var(--font-display); font-size: clamp(21px, 2.3vw, 29px); letter-spacing: -0.03em; } .qualifier-detail { margin: 12px auto 0; max-width: 32rem; color: #b6c0c5; font-size: 15.5px; line-height: 1.65; } .qualifier-notes { margin: 18px auto 0; max-width: 32rem; padding: 0; list-style: none; text-align: left; } .qualifier-notes li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 7px 0; color: var(--muted); font-size: 14px; line-height: 1.5; } .qualifier-notes i { color: var(--ember); font-size: 16px; margin-top: 2px; } .qualifier-summary { margin: 24px 0 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-align: left; } .qualifier-summary div { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 14px; } .qualifier-summary div:last-child { border-bottom: 0; } .qualifier-summary dt { color: var(--muted); } .qualifier-summary dd { margin: 0; color: var(--white); font-family: var(--font-mono); font-size: 13px; text-align: right; } .qualifier-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; } .qualifier-actions .button { min-height: 54px; font-size: 15px; } .qualifier-copy-state { margin: 14px 0 0; min-height: 18px; color: var(--sand-mute); font-family: var(--font-mono); font-size: 12px; } @media (max-width: 560px) { .qualifier { padding: 22px 18px; border-radius: 18px; } .qualifier-option { flex-direction: column; align-items: flex-start; gap: 8px; } .qualifier-actions { flex-direction: column; } .qualifier-actions .button { width: 100%; } .qualifier-summary div { grid-template-columns: 1fr; gap: 2px; } .qualifier-summary dd { text-align: left; } } /* ========================================================================== Footer ========================================================================== */ /* ========================================================================== Legal pages (privacy) Deliberately plain: a long-form text page, no motion, no scroll-driven anything. It reuses the site's tokens so it does not read as a bolted-on document, but nothing here should compete with the content. ========================================================================== */ .legal-page { padding: clamp(56px, 7vw, 104px) 0 clamp(64px, 8vw, 120px); background: var(--deep); } .legal-shell { max-width: 74ch; } .legal-page h1 { margin: 12px 0 22px; font-family: var(--font-display); font-size: clamp(36px, 5vw, 62px); line-height: 1.02; letter-spacing: -0.045em; } .legal-page h2 { margin: clamp(38px, 4vw, 54px) 0 12px; font-family: var(--font-display); font-size: clamp(21px, 2.1vw, 27px); letter-spacing: -0.02em; } .legal-page h3 { margin: 26px 0 8px; font-family: var(--font-display); font-size: 17px; color: var(--sand); } .legal-page p { margin: 0 0 14px; color: #b6c0c5; font-size: 16px; line-height: 1.75; } .legal-lede { color: var(--white) !important; font-size: 18px !important; } .legal-updated { margin-bottom: 8px !important; font-family: var(--font-mono); font-size: 12px !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted) !important; } .legal-list { margin: 0 0 14px; padding-left: 20px; color: #b6c0c5; font-size: 16px; line-height: 1.75; } .legal-list li { margin-bottom: 6px; } .legal-list strong, .legal-page strong { color: var(--white); } .legal-page a { color: var(--ember-lit); text-decoration: underline; text-underline-offset: 3px; } .legal-page a:hover { color: var(--ember); } .legal-back { margin-top: clamp(40px, 5vw, 64px); font-family: var(--font-mono); font-size: 14px; } .site-footer { padding: 42px 0; border-top: 1px solid var(--line); background: var(--void); } /* Sits with the copyright rather than in the footer nav: that nav is the four-destination public contract, and a legal link is not a destination. */ .footer-legal { margin-left: 10px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .footer-legal:hover { color: var(--ember-lit); } .footer-inner { display: grid; grid-template-columns: 1fr auto auto; gap: 40px; align-items: center; } .footer-brand { display: flex; align-items: center; gap: 12px; } .footer-brand img { width: 52px; height: auto; } .footer-brand span { display: flex; flex-direction: column; } .footer-brand strong { font-family: var(--font-display); letter-spacing: 0.08em; } .footer-brand small { color: var(--muted); font-size: 10px; } .site-footer nav { display: flex; gap: 24px; } .site-footer nav a { color: #b6c0c5; font-size: 13px; transition: color 180ms ease; } .site-footer nav a:hover { color: var(--ember); } .site-footer p { margin: 0; color: #718087; font-size: 12px; } /* ========================================================================== ChatFi ========================================================================== */ .chatfi-launcher { position: fixed; right: 24px; bottom: 24px; z-index: 95; min-width: 64px; min-height: 64px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 2px solid var(--ember); border-radius: 999px; background: var(--void); color: var(--white); font-weight: 600; cursor: pointer; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.36); transition: transform 180ms ease, background-color 180ms ease, opacity 220ms ease; } .chatfi-launcher:hover { transform: translateY(-3px); background: var(--deep-2); } .chatfi-launcher i { color: var(--ember); font-size: 28px; } .site-header:not([data-scrolled]) ~ .chatfi-launcher { opacity: 0; pointer-events: none; transform: translateY(12px); } .chatfi-panel { --chatfi-vh: 100vh; position: fixed; right: 24px; bottom: 24px; z-index: 100; width: min(410px, calc(100vw - 32px)); height: min(660px, calc(var(--chatfi-vh) - 48px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 18px; background: #09131b; color: var(--white); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.62); } .chatfi-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 16px; border-bottom: 1px solid var(--line); } .chatfi-header p { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 700; } .chatfi-header span { display: block; color: var(--muted); font-size: 11px; } .chatfi-header button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; } .chatfi-header button:hover { background: rgba(255, 255, 255, 0.07); color: var(--white); } .chatfi-header i { font-size: 22px; } .chatfi-body { position: relative; min-height: 0; overflow: hidden; background: #09131b; } .chatfi-chat { display: block; width: 100%; height: 100%; visibility: hidden; } .chatfi-body.is-ready .chatfi-chat { visibility: visible; } .chatfi-loading { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 12px; padding: 32px; background: #09131b; color: var(--muted); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; text-align: center; } .chatfi-loading::before { width: 10px; height: 10px; margin: 0 auto; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 0 rgba(242, 118, 34, 0.42); content: ""; animation: chatfi-ready-pulse 1.5s ease-out infinite; } .chatfi-loading a { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; } .chatfi-body.is-ready .chatfi-loading { display: none; } .chatfi-disclosure { margin: 10px 18px 16px; color: #718087; font-size: 10px; line-height: 1.45; text-align: center; } @keyframes chatfi-ready-pulse { 70%, 100% { box-shadow: 0 0 0 14px rgba(242, 118, 34, 0); } } /* ========================================================================== Motion primitives Reveals are scroll-LINKED, not scroll-triggered. A fire-and-forget tween starts when an element clips the viewport edge and is done ~0.7s later, while it is still in the corner of your eye — so nothing appears to respond to scrolling. `animation-timeline: view()` binds progress directly to the element's travel through the viewport, so it genuinely brightens as you pass it, and it runs on the compositor rather than the main thread. Content is fully visible by default. Elements are only put into a hidden start state by a mechanism that has already proven it can animate them back. ========================================================================== */ [data-motion], [data-hero-step] { opacity: 1; transform: none; } @keyframes reveal-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes reveal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes sweep-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } @keyframes drift-up { from { transform: translateY(24px); } to { transform: translateY(-24px); } } @keyframes hero-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* Traveling spotlight: each card rises out of a dim rest state, peaks, then settles back down as the next one takes over. The floor is 0.34 and the settle is 0.74 — never 0 — because a card that is on screen must stay readable whether or not it currently holds the highlight. */ @keyframes signal-sweep { 0% { opacity: 0.34; transform: translateY(18px); } 40% { opacity: 1; transform: translateY(0); } 58% { opacity: 1; transform: translateY(0); } 100% { opacity: 0.74; transform: translateY(0); } } @keyframes signal-icon-sweep { 0% { border-color: rgba(232, 220, 200, 0.14); background-color: rgba(232, 220, 200, 0.03); box-shadow: 0 0 0 0 rgba(242, 118, 34, 0); color: var(--sand-mute); } 40%, 58% { border-color: rgba(242, 118, 34, 0.7); background-color: rgba(242, 118, 34, 0.17); box-shadow: 0 0 28px -2px rgba(242, 118, 34, 0.8); color: var(--ember-lit); } 100% { border-color: rgba(242, 118, 34, 0.3); background-color: rgba(242, 118, 34, 0.07); box-shadow: 0 0 0 0 rgba(242, 118, 34, 0); color: var(--ember); } } /* Same idea for the five telemetry channels — reads as each channel being swept and acquired in turn. */ @keyframes channel-sweep-in { 0% { opacity: 0.3; transform: translateY(26px); } 42% { opacity: 1; transform: translateY(0); } 60% { opacity: 1; transform: translateY(0); } 100% { opacity: 0.78; transform: translateY(0); } } /* The hero scene recedes as the page scrolls off it, so the hero feels like a layer being left behind rather than a block scrolling away. */ @keyframes hero-recede { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-7%); opacity: 0.42; } } @keyframes rail-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* --- Hero load-in: pure CSS. No JS, no library, works with both off. ---- */ @media (prefers-reduced-motion: no-preference) { [data-hero-step] { animation: hero-in 0.8s var(--ease) both; } .hero-message > [data-hero-step]:nth-child(1) { animation-delay: 0.10s; } .hero-message > [data-hero-step]:nth-child(2) { animation-delay: 0.20s; } .hero-message > [data-hero-step]:nth-child(3) { animation-delay: 0.31s; } .hero-message > [data-hero-step]:nth-child(4) { animation-delay: 0.42s; } .hero-message > [data-hero-step]:nth-child(5) { animation-delay: 0.53s; } .scroll-cue[data-hero-step] { animation-delay: 0.80s; } } /* --- Modern path: native scroll-driven animation ------------------------ */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* The range MUST be chosen so that "element is comfortably in view" maps to >= 100% progress. Otherwise anything already on screen at load sits permanently half-revealed — which is exactly what happened to the signal strip on tall monitors: fully visible at scrollY 0, stuck at 0.76. `cover 30%` puts the element's top at roughly 66% down the viewport when the reveal completes, and that ratio barely moves across viewport heights (0.28-0.32 from 720px to 1440px). An `entry`-based end is scaled by the ELEMENT's height instead, so it drifts wildly between a 130px card and a 500px block. Prefer `cover` for reveals. */ [data-motion] { animation: reveal-rise linear both; animation-timeline: view(); animation-range: cover 0% cover 30%; } [data-motion="fade"] { animation-name: reveal-fade; } /* The three signal cards share a grid row, so a view() timeline hands them identical progress and they resolve as one block. Staggering each card's range makes the highlight travel left to right: card 1 peaks and is already settling as card 2 peaks. The ranges overlap on purpose — a clean hand-off reads better than three separate blinks. */ .signal-step[data-motion] { animation-name: signal-sweep; } .signal-step:nth-child(1)[data-motion] { animation-range: cover 0% cover 30%; } .signal-step:nth-child(2)[data-motion] { animation-range: cover 9% cover 39%; } .signal-step:nth-child(3)[data-motion] { animation-range: cover 18% cover 48%; } .signal-icon { animation: signal-icon-sweep linear both; animation-timeline: view(); } .signal-step:nth-child(1) .signal-icon { animation-range: cover 0% cover 30%; } .signal-step:nth-child(2) .signal-icon { animation-range: cover 9% cover 39%; } .signal-step:nth-child(3) .signal-icon { animation-range: cover 18% cover 48%; } /* Five channels, same travelling highlight. */ .channel-card[data-channel] { animation: channel-sweep-in linear both; animation-timeline: view(); animation-range: cover 0% cover 34%; } /* Sweeps just behind its card so it reads as the channel locking on. */ .channel-sweep { animation: sweep-in linear both; animation-timeline: view(); animation-range: cover 8% cover 42%; } /* The hero layer recedes as it scrolls away. No will-change: measured with and without, it made no difference to frame pacing, and it would keep a full-viewport iframe permanently promoted to its own layer for nothing. */ .hero-visual { animation: hero-recede linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; } /* Page-progress rail. scroll() rather than view() — it tracks the document, not an element's travel through it. */ .scroll-rail { animation: rail-grow linear both; animation-timeline: scroll(root block); } /* Parallax, compositor-side. Replaces a scrubbed JS tween. */ .device-banner img { animation: drift-up linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } } } /* --- Per-item cascades, only where items actually share a row ------------ These offsets exist to break the tie when several elements sit at the same height. Where the grid wraps, the rows already stagger naturally and adding offsets on top would leave the last item dim long after it is on screen, so each cascade is scoped to the breakpoint whose layout needs it. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* Channels are 5-across only above 1180px. */ @media (min-width: 1181px) { .channel-card:nth-child(1)[data-channel] { animation-range: cover 0% cover 30%; } .channel-card:nth-child(2)[data-channel] { animation-range: cover 5% cover 35%; } .channel-card:nth-child(3)[data-channel] { animation-range: cover 10% cover 40%; } .channel-card:nth-child(4)[data-channel] { animation-range: cover 15% cover 45%; } .channel-card:nth-child(5)[data-channel] { animation-range: cover 20% cover 50%; } .channel-card:nth-child(1) .channel-sweep { animation-range: cover 6% cover 34%; } .channel-card:nth-child(2) .channel-sweep { animation-range: cover 11% cover 39%; } .channel-card:nth-child(3) .channel-sweep { animation-range: cover 16% cover 44%; } .channel-card:nth-child(4) .channel-sweep { animation-range: cover 21% cover 49%; } .channel-card:nth-child(5) .channel-sweep { animation-range: cover 26% cover 54%; } } /* Journey is a 2x2 grid above 820px: rows already differ vertically, so only the second column in each row needs an offset. */ @media (min-width: 821px) { .journey-list li:nth-child(2)[data-motion], .journey-list li:nth-child(4)[data-motion] { animation-range: cover 7% cover 37%; } } /* Spec tiles are 3-across above 820px — cascade within each row. */ @media (min-width: 821px) { .spec-grid > div:nth-child(3n + 2)[data-motion] { animation-range: cover 5% cover 35%; } .spec-grid > div:nth-child(3n + 3)[data-motion] { animation-range: cover 10% cover 40%; } } /* Company marks are 3-across above 900px. */ @media (min-width: 901px) { .company-mark:nth-child(2)[data-motion] { animation-range: cover 5% cover 35%; } .company-mark:nth-child(3)[data-motion] { animation-range: cover 10% cover 40%; } } } } /* --- Legacy path: JS opt-in hidden state -------------------------------- */ /* Only browsers WITHOUT native scroll-driven animation get `motion-ready`, and only after the inline head script confirms motion is wanted. main.js removes it if GSAP never arrives, so this can never strand the page blank. */ @supports not (animation-timeline: view()) { .motion-ready [data-motion] { opacity: 0; } .motion-ready [data-motion="rise"] { transform: translateY(26px); } .motion-ready [data-motion="fade"] { transform: none; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1180px) { .hero-copy { width: min(600px, 58vw); } .hero-scene { width: 1240px; right: -170px; } .channel-grid { grid-template-columns: repeat(3, 1fr); } .drill-fallback ul { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .company-marks { grid-template-columns: 1fr; } } @media (max-width: 820px) { :root { --pad: 22px; --header-h: 72px; } .site-header[data-scrolled] { height: 60px; } .brand-mini img { width: 44px; } .brand-mini-copy strong { font-size: 24px; } .brand-mini-copy small { font-size: 8.5px; max-width: 200px; } .desktop-nav { display: none; } /* ChatFi already has a row in the mobile menu and a floating launcher; a third entry here only crowds the brand and the toggle. */ .nav-cta { display: none; } .nav-toggle { display: flex; width: 48px; height: 48px; flex-direction: column; justify-content: center; gap: 6px; align-items: center; border: 0; background: transparent; cursor: pointer; } .nav-toggle span { width: 24px; height: 2px; background: var(--white); transition: transform 180ms ease, opacity 180ms ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .mobile-nav { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; padding: 18px 22px 24px; background: var(--void); border-bottom: 1px solid var(--line); } .mobile-nav a, .mobile-nav button { min-height: 50px; display: flex; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--white); text-align: left; } .mobile-nav button { color: var(--ember); cursor: pointer; } .hero-grid { padding-top: clamp(26px, 4vh, 44px); padding-bottom: clamp(84px, 12vh, 118px); } .hero-copy { width: 100%; max-width: 560px; } .hero-message h1 { font-size: clamp(46px, 12.5vw, 62px); } .hero-lede { max-width: 100%; font-size: 16px; } .hero-scene { width: 1000px; right: -300px; } /* On narrow screens the copy sits over the middle of the art, so the scrim becomes a vertical wash instead of a side wash. Kept lighter through the lower third so the island still reads behind the CTAs. */ .hero-scrim { background: linear-gradient(to bottom, rgba(3, 7, 11, 0.9) 0%, rgba(3, 7, 11, 0.72) 42%, rgba(3, 7, 11, 0.3) 68%, rgba(3, 7, 11, 0.72) 100%); } .signal-strip { grid-template-columns: 1fr; padding-top: 0; } .signal-step, .signal-step:first-child, .signal-step:last-child { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); } .signal-step:last-child { border-bottom: 0; } /* Stacked, the cards already sit at different heights and stagger on their own. Keeping the per-card offsets here would double the delay and leave the third card dim well after it is on screen. */ .signal-step:nth-child(1)[data-motion], .signal-step:nth-child(2)[data-motion], .signal-step:nth-child(3)[data-motion], .signal-step:nth-child(1) .signal-icon, .signal-step:nth-child(2) .signal-icon, .signal-step:nth-child(3) .signal-icon { animation-range: cover 0% cover 30%; } .portal-note { grid-template-columns: 1fr; gap: 16px; padding: 22px; } .section-intro, .company-grid, .contact-grid { grid-template-columns: 1fr; gap: 38px; } .section-intro .eyebrow { grid-column: auto; } .channel-head { flex-direction: column; align-items: flex-start; gap: 8px; } .channel-grid { grid-template-columns: repeat(2, 1fr); } .journey-list { grid-template-columns: 1fr; } .journey-list li, .journey-list li:nth-child(even) { padding: 26px 0; border-right: 0; } .spec-grid { grid-template-columns: repeat(2, 1fr); } .company-copy { padding-top: 0; } .drill-fallback ul { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; } /* Footer links are the smallest targets on the page; give them a real touch box rather than relying on the 13px text bounds. */ .site-footer nav { order: 3; flex-wrap: wrap; gap: 4px 20px; } .site-footer nav a { min-height: 44px; display: inline-flex; align-items: center; } .text-button { min-height: 44px; } .chatfi-launcher span { display: none; } .chatfi-launcher { width: 60px; min-width: 60px; height: 60px; padding: 0; right: 16px; bottom: 16px; } /* Use the real available height rather than a fixed cap — --chatfi-vh is kept in sync with visualViewport so the panel rides above the keyboard. */ .chatfi-panel { left: 8px; right: 8px; bottom: 8px; width: auto; height: calc(var(--chatfi-vh) - 16px); max-height: calc(var(--chatfi-vh) - 16px); border-radius: 16px; } } @media (max-width: 560px) { .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .button { width: 100%; min-width: 0; } .hero-message h1 { font-size: clamp(42px, 12.5vw, 56px); } .proof-chips { max-width: 100%; } .hero-scene { width: 880px; right: -330px; } .channel-grid { grid-template-columns: 1fr; } .channel-card { min-height: 0; } .spec-grid { grid-template-columns: 1fr; } .spec-grid > div { min-height: 148px; } .device-banner { padding: 16px 0; border-radius: 18px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Never let the opt-in hidden state survive when motion is disabled. */ .motion-ready [data-motion], .motion-ready [data-hero-step] { opacity: 1 !important; transform: none !important; } }