/* ============================================================ CONTENUUM — AI Content Supply Chain · by Deloitte v3 · loop hero · isometric supply chain · particle thread ============================================================ */ :root { --bg: #060707; --bg-elev: #0b0d0c; --surface: rgba(255, 255, 255, 0.025); --surface-2: rgba(255, 255, 255, 0.045); --line: rgba(255, 255, 255, 0.08); --line-soft: rgba(255, 255, 255, 0.05); --text: #f2f4ef; --text-dim: #a2a8a0; --text-mute: #62675f; --accent: #86bc25; --accent-bright: #a8e02e; --accent-soft: rgba(134, 188, 37, 0.14); --accent-glow: rgba(134, 188, 37, 0.35); --amber: #d9a441; /* ============ BRAND FONT — change it HERE only ============ Every font-family in the site reads these three tokens. To move to the brand-compliant Open Sans: (1) swap the family names below, e.g. --font-display: "Open Sans", …; --font-body: "Open Sans", …; (2) update the Google Fonts in index.html to load it. */ --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --nav-h: 68px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } html.lenis-on { scroll-behavior: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: var(--accent); color: #0a0f03; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } section[id] { scroll-margin-top: var(--nav-h); } .container { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; position: relative; z-index: 3; } .dim { color: var(--text-dim); } .accent { color: var(--accent); } /* ---------- Continuous data flow ---------- */ #flowCanvas { position: fixed; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; } /* Content activation — a card's content stays dormant until the flow reaches it (desktop) or the section scrolls into view (mobile / reduced motion — main.js adds .flow-on in both those cases). Once active, it stays active. */ .cell .vs-master { transition: border-color 0.6s ease, background 0.6s ease; } .cell .vs-master i:first-child { transition: background 0.6s ease; } .ready-cube { transition: opacity 0.6s ease; } .bento .cell:not(.flow-on) .viz, .bento .cell:not(.flow-on) .viz * { animation-play-state: paused !important; } .cell:not(.flow-on) .vs-master { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.025); } .cell:not(.flow-on) .vs-master i:first-child { background: rgba(255, 255, 255, 0.2); } .readiness-visual:not(.flow-on) .ready-cube { animation-play-state: paused !important; opacity: 0.3; } .cell.flow-on { animation: cell-flash 1.4s var(--ease-out) 1; } @keyframes cell-flash { 0% { box-shadow: 0 0 0 0 rgba(134, 188, 37, 0); } 30% { box-shadow: 0 0 44px -6px rgba(134, 188, 37, 0.35); border-color: rgba(134, 188, 37, 0.5); } 100% { box-shadow: 0 0 0 0 rgba(134, 188, 37, 0); } } /* glow uses filter:drop-shadow (follows the L-shape) NOT box-shadow (which traces the full box and leaves dark notches on the borderless sides) */ .gov-corner { transition: border-color 0.5s ease, filter 0.5s ease; } .gov-console.flow-on .gov-corner { border-color: rgba(168, 224, 46, 0.9); filter: drop-shadow(0 0 3px rgba(134, 188, 37, 0.6)); } /* the bottom corners are the guardrail EXIT point — kept white (data leaving here is "guardrailed"); the top corners stay brand-green */ .gov-console.flow-on .c-bl, .gov-console.flow-on .c-br { border-color: rgba(255, 255, 255, 0.92); filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.55)); } /* ---------- Film grain ---------- */ .noise { position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Custom cursor ---------- */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; border-radius: 50%; opacity: 0; } html.has-cursor .cursor-dot, html.has-cursor .cursor-ring { opacity: 1; } html.has-cursor.cursor-native .cursor-dot, html.has-cursor.cursor-native .cursor-ring, html.has-cursor.cursor-away .cursor-dot, html.has-cursor.cursor-away .cursor-ring { opacity: 0; } .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent); } .cursor-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; mix-blend-mode: difference; } .cursor-ring::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; border: 1.5px solid rgba(242, 244, 239, 0.55); transition: transform 0.3s var(--ease-out), background 0.3s ease, border-color 0.3s ease; } html.cursor-hover .cursor-ring::after { transform: scale(1.55); background: #fff; border-color: #fff; } html.has-cursor, html.has-cursor * { cursor: none !important; } html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto !important; } /* ---------- Scroll progress ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; } .scroll-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); transform-origin: 0 50%; transform: scaleX(0); } /* ============================================================ NAVIGATION ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(6, 7, 7, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom-color: var(--line-soft); } .nav-inner { width: min(1280px, calc(100% - 3rem)); margin-inline: auto; height: var(--nav-h); display: flex; align-items: center; gap: 2.5rem; } .brand { display: flex; flex-direction: column; gap: 2px; line-height: 1; white-space: nowrap; } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; letter-spacing: -0.015em; color: var(--accent); } .brand-by { font-size: 0.64rem; font-weight: 500; color: var(--text-dim); letter-spacing: 0.05em; } .nav-links { display: flex; gap: 1.9rem; margin-left: auto; } .nav-links a { font-size: 0.85rem; color: var(--text-dim); letter-spacing: 0.01em; transition: color 0.25s ease; position: relative; padding: 0.35rem 0; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--accent); transition: right 0.35s var(--ease-out); } .nav-links a:hover { color: var(--text); } .nav-links a.active { color: var(--text); } .nav-links a.active::after { right: 0; } .nav-cta { display: flex; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 42px; height: 42px; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; padding: 0 10px; } .nav-toggle span { display: block; height: 1.5px; background: var(--text); transition: transform 0.3s var(--ease-out), opacity 0.3s; } body.menu-open .nav-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); } body.menu-open .nav-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 90; background: rgba(6, 7, 7, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; justify-content: center; padding: 2rem; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s; } body.menu-open .mobile-menu { opacity: 1; visibility: visible; } .mobile-menu nav { display: flex; flex-direction: column; gap: 1.4rem; } .mobile-menu a { font-family: var(--font-display); font-size: 2rem; font-weight: 500; letter-spacing: -0.02em; color: var(--text); } .mobile-menu-cta { color: var(--accent) !important; } .mobile-menu-foot { margin-top: 3rem; font-size: 0.78rem; color: var(--text-mute); letter-spacing: 0.08em; } /* ============================================================ SHARED ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; padding: 0.85rem 1.75rem; border-radius: 100px; border: 1px solid transparent; white-space: nowrap; cursor: pointer; transition: transform 0.25s var(--ease-out), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } /* glass buttons: primary = green glass (translucent brand + blur + inner highlight), ghost = clear glass — particles read blurred through both */ .btn-primary { background: rgba(134, 188, 37, 0.82); color: #0a0f03; backdrop-filter: blur(10px) saturate(1.25); -webkit-backdrop-filter: blur(10px) saturate(1.25); border-color: rgba(168, 224, 46, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); } .btn-primary:hover { background: rgba(168, 224, 46, 0.9); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 32px -8px var(--accent-glow); } .btn-ghost { border-color: var(--line); color: var(--text); background: rgba(255, 255, 255, 0.045); backdrop-filter: blur(10px) saturate(1.25); -webkit-backdrop-filter: blur(10px) saturate(1.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); } .btn-ghost:hover { border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); } .btn-sm { padding: 0.55rem 1.2rem; font-size: 0.82rem; } .btn-lg { padding: 1rem 2.4rem; font-size: 0.95rem; } .chip { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: 100px; border: 1px solid var(--line); color: var(--text-dim); } .chip-live { border-color: rgba(134, 188, 37, 0.3); color: var(--accent); } .chip-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); animation: pulse-dot 2.4s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.4rem; } .section { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(6rem, 12vh, 9rem) 0; } .section::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100% - 3rem)); height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } .section-head { max-width: 760px; } .section-head h2 { font-family: var(--font-display); font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 550; line-height: 1.08; letter-spacing: -0.03em; } .section-sub { margin-top: 1.4rem; font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--text-dim); max-width: 560px; } .section-close { margin-top: clamp(3.5rem, 7vh, 5.5rem); font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -0.015em; } /* trust/outcome meta lines — small glass chip containers (readable, contained) */ .trust-line, .momentum-outcomes { display: block; width: fit-content; padding: 0.55rem 1.15rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.045); backdrop-filter: blur(12px) saturate(1.25); -webkit-backdrop-filter: blur(12px) saturate(1.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); font-size: 0.7rem; line-height: 1.7; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); text-align: center; } .demo .trust-line { margin-inline: auto; } /* ---------- Reveal-on-scroll ---------- */ .reveal, .reveal-group > * { opacity: 0; transform: translateY(26px); filter: blur(3px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out); } .reveal[data-d="1"] { transition-delay: 0.1s; } .reveal[data-d="2"] { transition-delay: 0.2s; } .reveal[data-d="3"] { transition-delay: 0.3s; } .reveal[data-d="4"] { transition-delay: 0.42s; } .reveal-group > *:nth-child(1) { transition-delay: 0.05s; } .reveal-group > *:nth-child(2) { transition-delay: 0.13s; } .reveal-group > *:nth-child(3) { transition-delay: 0.21s; } .reveal-group > *:nth-child(4) { transition-delay: 0.29s; } .reveal-group > *:nth-child(5) { transition-delay: 0.37s; } .reveal-group > *:nth-child(6) { transition-delay: 0.45s; } .reveal.in-view, .reveal-group.in-view > * { opacity: 1; transform: translateY(0); filter: blur(0); } /* ============================================================ 1 · HERO — the loop ============================================================ */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; /* just clear the fixed nav — the flex centering handles the rest; extra padding here doubled the perceived top gap on every screen size */ padding-top: var(--nav-h); overflow: hidden; } /* bias the centred hero content upward so the space between the nav and the eyebrow reads tight and intentional on every screen size */ .hero-inner { margin-top: clamp(-6.5rem, -8vh, -1.5rem); } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 35%, black 30%, transparent 75%); } .hero-glow { position: absolute; top: -25%; left: 50%; transform: translateX(-50%); width: 90vw; height: 70vh; background: radial-gradient(ellipse at center, rgba(134, 188, 37, 0.1) 0%, transparent 65%); filter: blur(20px); } .hero-field { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-loop-labels { position: absolute; inset: 0; } .hero-node { position: absolute; width: 0; height: 0; } .hero-node i { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 12px; height: 12px; border: 1.5px solid var(--accent); border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 3px rgba(134, 188, 37, 0.1); transition: background 0.4s ease, box-shadow 0.4s ease; } .hero-node em { position: absolute; top: 14px; left: 0; transform: translateX(-50%); font-style: normal; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; transition: color 0.4s ease; } .hero-node:first-child em { transform: translateX(-14%); } .hero-node:last-child em { transform: translateX(-86%); } .hero-node.flare i { background: var(--accent); box-shadow: 0 0 18px var(--accent-glow); } .hero-node.flare em { color: var(--text); } .hero-field.field-fallback::before { content: ""; position: absolute; left: 5%; right: 5%; top: 24%; height: 160%; border: 1px solid rgba(134, 188, 37, 0.22); border-radius: 50%; } .hero-inner { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: 1.5rem; } .hero-headline { font-family: var(--font-display); font-size: clamp(2.5rem, 6.2vw, 5rem); font-weight: 550; line-height: 1.04; letter-spacing: -0.035em; max-width: 17ch; } .hero-sub { margin-top: 1.6rem; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--text-dim); max-width: 620px; } .hero-ctas { margin-top: 2.4rem; display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center; } .hero .trust-line { margin-top: 2.4rem; } /* ============================================================ 2 · PLATFORM — bento of live UI abstractions ============================================================ */ .bento { margin-top: clamp(3rem, 6vh, 4.5rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .cell { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.045); backdrop-filter: blur(12px) saturate(1.25); -webkit-backdrop-filter: blur(12px) saturate(1.25); box-shadow: 0 24px 48px -26px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08); padding: 1.5rem; min-height: 250px; display: flex; flex-direction: column; gap: 1.2rem; transition: border-color 0.3s ease, transform 0.3s var(--ease-out), box-shadow 0.3s ease; } .cell:hover { border-color: rgba(134, 188, 37, 0.4); transform: translateY(-3px); box-shadow: 0 30px 56px -26px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .cell-wide { grid-column: span 2; min-height: 300px; } /* Desktop: the platform is pinned, so header + both card rows must fit one viewport. Tighten the vertical rhythm here. */ @media (min-width: 900px) { #platform { min-height: 100vh; justify-content: flex-start; padding: calc(var(--nav-h) + 1rem) 0 0.75rem; } #platform .bento { margin-top: 1.2rem; } #platform .cell { min-height: 188px; padding: 1.25rem; } #platform .cell-wide { min-height: 214px; } #platform .viz { min-height: 80px; } #platform .section-close { margin-top: 0.9rem; font-size: 1.1rem; } } .cell-copy h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 550; letter-spacing: -0.01em; margin-bottom: 0.3rem; } .cell-copy p { font-size: 0.85rem; color: var(--text-dim); } .viz { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; min-height: 110px; } .bento:not(.in-view) .viz *, .bento:not(.in-view) .viz { animation-play-state: paused !important; } .viz-brief { flex-direction: column; } .vb-input { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-dim); border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.95rem; background: rgba(255, 255, 255, 0.02); display: flex; align-items: center; gap: 0.55rem; } .vb-caret { width: 1.5px; height: 13px; background: var(--accent); animation: caret-blink 1.1s steps(1) infinite; } @keyframes caret-blink { 50% { opacity: 0; } } /* the brief input reads greyed until the flow arrives at the card */ .vb-input { transition: color 0.5s ease, border-color 0.5s ease; } .cell:not(.flow-on) .vb-input { color: var(--text-mute); border-color: rgba(255, 255, 255, 0.06); } .vb-stem { width: 1px; height: 20px; background: var(--line); } .vb-branch { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .vb-chip { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.05em; padding: 0.32rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.14); color: var(--text-mute); border-radius: 100px; opacity: 0.3; transform: translateY(5px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease; transition-delay: calc(var(--d) * 0.32s); } /* the flow enables the chips one after another — and they stay lit, they never loop back off */ .cell.flow-on .vb-chip { opacity: 1; transform: none; color: var(--accent); border-color: rgba(134, 188, 37, 0.5); box-shadow: 0 0 14px -4px var(--accent-glow); } .viz-studio { min-height: 160px; overflow: hidden; } .vs-master { position: absolute; left: 12%; top: 50%; transform: translateY(-50%); width: 118px; height: 76px; border: 1px solid rgba(134, 188, 37, 0.5); border-radius: 8px; background: rgba(134, 188, 37, 0.05); padding: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; } .vs-master i { display: block; height: 5px; border-radius: 3px; background: rgba(242, 244, 239, 0.16); } .vs-master i:first-child { width: 62%; background: rgba(134, 188, 37, 0.55); } .vs-variant { position: absolute; left: calc(12% + 30px); top: 50%; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, 0.03); padding: 6px; opacity: 0; animation: variant-fan 7s var(--ease-out) infinite; } .vs-variant i { display: block; height: 4px; width: 70%; border-radius: 2px; background: rgba(242, 244, 239, 0.14); } .vs-wide { width: 92px; height: 52px; margin-top: -26px; --tx: 150px; --ty: -34px; --tx2: 196px; animation-delay: 0s; } .vs-square { width: 56px; height: 56px; margin-top: -28px; --tx: 186px; --ty: 30px; --tx2: 232px; animation-delay: 1.5s; } .vs-tall { width: 40px; height: 66px; margin-top: -33px; --tx: 118px; --ty: 38px; --tx2: 164px; animation-delay: 3s; } /* a conveyor: each asset is generated at the master, travels to its slot, then moves on (delivered / distributed) as the next one is generated — continuous */ @keyframes variant-fan { 0% { opacity: 0; transform: translate(0, 0) scale(0.5); } 14% { opacity: 1; transform: translate(0, 0) scale(0.5); } 55% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1); } 80% { opacity: 0.85; transform: translate(var(--tx2), var(--ty)) scale(0.98); } 100% { opacity: 0; transform: translate(var(--tx2), var(--ty)) scale(0.94); } } .vs-variant { animation-duration: 4.5s; } .viz-brand { flex-direction: column; gap: 0.65rem; align-items: stretch; } .vr-row { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 8px; padding: 0.55rem 0.85rem; font-size: 0.8rem; color: var(--text-mute); transition: color 0.5s ease, border-color 0.5s ease, background 0.5s ease; transition-delay: calc(var(--d) * 0.5s + 0.3s); } /* each rule verifies once and stays green — voice, then visual, then claims */ .cell.flow-on .viz-brand .vr-row { color: var(--accent); border-color: rgba(134, 188, 37, 0.45); background: rgba(134, 188, 37, 0.04); } .vr-row svg { width: 14px; height: 14px; overflow: visible; } .vr-row path { stroke: var(--accent); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: check-draw 0.55s ease forwards; animation-delay: calc(var(--d) * 0.5s + 0.4s); } @keyframes check-draw { to { stroke-dashoffset: 0; } } .viz-approval { flex-direction: column; gap: 0.9rem; } .va-ring { width: 62px; height: 62px; overflow: visible; } .va-track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); } /* fills once, amber → green, and STAYS full */ .va-fill { fill: none; stroke: var(--amber); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); animation: appr-fill 2.2s ease forwards; } @keyframes appr-fill { 0% { stroke-dashoffset: 1; stroke: #d9a441; } 70% { stroke-dashoffset: 0; stroke: #d9a441; } 100% { stroke-dashoffset: 0; stroke: #86bc25; } } /* the tick draws inside the ring once approved, and stays */ .va-tick { fill: none; stroke: #86bc25; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tick-draw 0.5s ease forwards; animation-delay: 1.95s; } @keyframes tick-draw { to { stroke-dashoffset: 0; } } .va-states { position: relative; height: 1.25rem; width: 100%; text-align: center; } .va-state { position: absolute; inset: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; } /* Pending → In review → Approved(stays) — a one-time sequence, not a loop */ .va-pending { color: var(--amber); animation: appr-show 2.2s ease forwards; } .va-review { color: var(--amber); animation: appr-show 2.2s ease forwards; animation-delay: 0.75s; } .va-approved { color: var(--accent); animation: appr-final 0.6s ease forwards; animation-delay: 1.95s; } @keyframes appr-show { 0% { opacity: 0; } 14% { opacity: 1; } 30% { opacity: 1; } 44%, 100% { opacity: 0; } } @keyframes appr-final { from { opacity: 0; } to { opacity: 1; } } .viz-channels { flex-direction: column; gap: 0.55rem; align-items: stretch; } .vc-row { display: flex; align-items: center; gap: 0.7rem; } .vc-line { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .vc-line i { position: absolute; top: -0.5px; left: -30%; width: 30%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: beam-run 5s infinite; animation-delay: calc(var(--d) * 0.35s + 0.3s); } @keyframes beam-run { 0% { left: -30%; opacity: 0; } 4% { opacity: 1; } 22% { opacity: 1; } 26%, 100% { left: 105%; opacity: 0; } } .vc-name { font-size: 0.72rem; color: var(--text-dim); width: 74px; letter-spacing: 0.04em; } .viz-learning svg { width: 88%; overflow: visible; } .vl-grid { stroke: rgba(255, 255, 255, 0.07); } .vl-line { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } /* baseline draws first and stays; the improved line rises above it and stays */ .vl-base { stroke: rgba(134, 188, 37, 0.4); stroke-width: 1.5; animation: vl-draw 1s ease forwards; animation-delay: 0.3s; } .vl-improved { stroke: var(--accent); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(134, 188, 37, 0.4)); animation: vl-draw 1.1s ease forwards; animation-delay: 1.3s; } @keyframes vl-draw { to { stroke-dashoffset: 0; } } /* the AI star sits at the head of the improved line, rotating + glowing, and gently keeps lifting — performance improving */ .vl-star-pos { animation: vl-rise 3.6s ease-in-out infinite; animation-delay: 2.4s; } @keyframes vl-rise { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .vl-star { fill: var(--accent-bright); transform-box: fill-box; transform-origin: center; opacity: 0; animation: vl-star-in 0.5s ease forwards, vl-spin 7s linear infinite, vl-glow 2.4s ease-in-out infinite; animation-delay: 2.4s, 2.4s, 2.4s; } @keyframes vl-star-in { to { opacity: 1; } } @keyframes vl-spin { to { transform: rotate(360deg); } } @keyframes vl-glow { 0%, 100% { filter: drop-shadow(0 0 2px rgba(134, 188, 37, 0.6)); } 50% { filter: drop-shadow(0 0 7px rgba(168, 224, 46, 0.95)); } } /* ============================================================ 3 · THE SUPPLY CHAIN — pinned scrub · isometric ============================================================ */ .sc { position: relative; background: var(--bg); } .sc-grid { display: grid; /* wider left column — the stage tab strip needs the room */ grid-template-columns: minmax(400px, 480px) minmax(0, 1fr); gap: clamp(2rem, 3vw, 3.5rem); align-items: center; height: 100vh; padding: calc(var(--nav-h) + 1rem) 0 1.5rem; } .sc-head h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 550; line-height: 1.1; letter-spacing: -0.025em; } /* ---- stage TAB STRIP (top): the active stage renders LARGE with a green underline; the others stay small uppercase with a grey underline. The whole scroll flow is marked here — no separate step headings needed. ---- */ .sc-index { list-style: none; display: flex; align-items: flex-end; gap: clamp(0.9rem, 1.6vw, 1.9rem); margin-top: clamp(2rem, 4vh, 3.2rem); } .sc-index li { position: relative; padding-bottom: 0.85rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); line-height: 1; transition: color 0.35s ease; } .sc-index li::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.16); transition: background 0.35s ease; } .sc-index li.done { color: var(--text-dim); } .sc-index li.done::before { background: rgba(134, 188, 37, 0.45); } .sc-index li.active { font-family: var(--font-display); font-size: clamp(1.7rem, 2.4vw, 2.4rem); font-weight: 550; letter-spacing: -0.02em; text-transform: none; color: var(--text); } .sc-index li.active::before { background: var(--accent); height: 3px; } /* ---- active step: BIG OUTLINE number + description beside it ---- */ .sc-steps { position: relative; height: 190px; margin-top: clamp(1.6rem, 3.5vh, 2.8rem); } .sc-step { position: absolute; inset: 0; display: flex; align-items: center; gap: clamp(1.4rem, 2vw, 2.2rem); opacity: 0; transform: translateY(14px); transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); pointer-events: none; } .sc-step.active { opacity: 1; transform: none; } /* the h3 text ("Brief") is redundant with the tab strip — collapse it to zero size (still exposed to screen readers) and blow the number up as an outline */ .sc-step h3 { font-size: 0; line-height: 0; } .sc-step h3 span { display: block; font-family: var(--font-display); font-size: clamp(6.5rem, 9vw, 9.5rem); font-weight: 620; line-height: 0.82; letter-spacing: -0.03em; color: rgba(134, 188, 37, 0.5); /* fallback where text-stroke is unsupported */ } @supports (-webkit-text-stroke: 1px black) { .sc-step h3 span { color: transparent; -webkit-text-stroke: 1.5px rgba(134, 188, 37, 0.6); } } .sc-step p { margin-top: 0; color: var(--text-dim); font-size: clamp(1.05rem, 1.4vw, 1.35rem); line-height: 1.55; max-width: 30ch; } .sc-hint { margin-top: 1rem; font-size: 0.68rem; color: var(--text-mute); letter-spacing: 0.06em; } .sc-diagram svg { width: 100%; height: auto; max-height: calc(100vh - 130px); margin-inline: auto; } /* --- isometric cubes --- */ .cf-top { fill: rgba(255, 255, 255, 0.07); stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; } .cf-left { fill: rgba(255, 255, 255, 0.028); stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; } .cf-right { fill: rgba(255, 255, 255, 0.012); stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; } .sys-fade { opacity: 0.15; } #coreGroup .cf-top { fill: rgba(134, 188, 37, 0.09); stroke: rgba(134, 188, 37, 0.4); } #coreGroup .cf-left { fill: rgba(134, 188, 37, 0.035); stroke: rgba(134, 188, 37, 0.25); } #coreGroup .cf-right { fill: rgba(134, 188, 37, 0.018); stroke: rgba(134, 188, 37, 0.25); } .sc-caption { fill: var(--text-mute); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .core-title { fill: var(--accent); } .sc-label { fill: var(--text); font-family: var(--font-display); font-size: 13.5px; font-weight: 550; } .sc-sub { fill: var(--text-dim); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em; } /* --- particle streams --- */ .stream { opacity: 0; } .stream-line { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; fill: none; } .p-dot { fill: var(--accent); stroke: rgba(134, 188, 37, 0.22); stroke-width: 6; } .p-dot-lg { fill: var(--accent-bright); stroke: rgba(134, 188, 37, 0.38); stroke-width: 8; } .sys-feed { fill: var(--accent-bright); stroke: rgba(134, 188, 37, 0.3); stroke-width: 7; } .loop-line { stroke: rgba(134, 188, 37, 0.4); stroke-width: 1.2; fill: none; } .layer-tick { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; } #loopArrow { fill: var(--accent); opacity: 0; } #loopLabel { opacity: 0; } .sys-layer { opacity: 0.25; } .ws { opacity: 0.45; } #coreGroup { opacity: 0.55; } .layer { opacity: 0.4; } .ch-chip { opacity: 0.3; } .ch-chip rect { fill: url(#chipGlass); stroke: rgba(255, 255, 255, 0.2); } .vdot { fill: rgba(217, 164, 65, 0.15); stroke: var(--amber); stroke-width: 1.2; opacity: 0; } .ch-ico { color: var(--accent); } .ch-ico-def circle, .ch-ico-def path, .ch-ico-def rect, .ch-ico-def ellipse { stroke: currentColor; stroke-width: 1.3; fill: none; } .ch-ico-def .ico-fill { fill: currentColor; stroke: none; } /* --- workspace hover focus --- */ #scSvg .ws { cursor: pointer; } #scSvg.focusing .ws, #scSvg.focusing .stream { transition: opacity 0.35s ease; } #scSvg.focus-a #wsB, #scSvg.focus-a #wsC, #scSvg.focus-a #streamWsB, #scSvg.focus-a #streamWsC, #scSvg.focus-b #wsA, #scSvg.focus-b #wsC, #scSvg.focus-b #streamWsA, #scSvg.focus-b #streamWsC, #scSvg.focus-c #wsA, #scSvg.focus-c #wsB, #scSvg.focus-c #streamWsA, #scSvg.focus-c #streamWsB { opacity: 0.1 !important; } #scSvg.focus-a #wsA, #scSvg.focus-a #streamWsA, #scSvg.focus-b #wsB, #scSvg.focus-b #streamWsB, #scSvg.focus-c #wsC, #scSvg.focus-c #streamWsC { opacity: 1 !important; visibility: visible !important; } /* --- static fully-lit state (mobile / reduced motion) --- */ .sc-lit .sys-layer, .sc-lit .ws, .sc-lit #coreGroup, .sc-lit .layer, .sc-lit .ch-chip { opacity: 1 !important; } .sc-lit .stream { opacity: 1 !important; visibility: visible !important; } .sc-lit #loopArrow, .sc-lit #loopLabel { opacity: 1 !important; } .sc-lit #coreGroup .cf-top { fill: rgba(134, 188, 37, 0.12); } /* ============================================================ 4 · GOVERNANCE ============================================================ */ .governance-layout { margin-top: clamp(3.5rem, 7vh, 5rem); display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(3rem, 6vw, 6rem); align-items: center; } .pillar-list { list-style: none; display: grid; } .pillar-list li { padding: 1.15rem 0 1.15rem 1.6rem; border-top: 1px solid var(--line-soft); display: grid; gap: 0.25rem; position: relative; } .pillar-list li::before { content: ""; position: absolute; left: 0; top: 1.62rem; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--accent); transition: background 0.3s ease, box-shadow 0.3s ease; } .pillar-list li:hover::before { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } /* hover lights the whole item, not just the bullet: the title tints brand-green, the description lifts, and a green line SWEEPS across the top hairline */ .pillar-list li::after { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 100%; background: linear-gradient(90deg, var(--accent-bright), rgba(134, 188, 37, 0)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); } .pillar-list li:hover::after { transform: scaleX(1); } .pillar-list h3 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 550; letter-spacing: -0.01em; transition: color 0.3s ease; } .pillar-list li:hover h3 { color: var(--accent-bright); } .pillar-list p { font-size: 0.88rem; color: var(--text-dim); transition: color 0.3s ease; } .pillar-list li:hover p { color: var(--text); } .pillar-list-compact { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } .gov-console { position: relative; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.045); backdrop-filter: blur(12px) saturate(1.25); -webkit-backdrop-filter: blur(12px) saturate(1.25); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .gov-corner { position: absolute; width: 20px; height: 20px; border: 1.5px solid rgba(134, 188, 37, 0.55); z-index: 2; } /* radius matches the card's own 16px corner so each bracket traces it exactly */ .c-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: 16px; } .c-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; border-top-right-radius: 16px; } .c-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; border-bottom-left-radius: 16px; } .c-br { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: 16px; } /* bottom corners white at rest too (the guardrail exit point) */ .c-bl, .c-br { border-color: rgba(255, 255, 255, 0.5); } .gov-console-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.4rem; border-bottom: 1px solid var(--line-soft); } .panel-title { font-size: 0.78rem; letter-spacing: 0.05em; color: var(--text-dim); } .gov-rows { padding: 0.4rem 0; } .gov-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.4rem; border-bottom: 1px solid var(--line-soft); animation: row-hint 9s infinite; animation-delay: calc(var(--i) * 2.25s); } .gov-row:last-child { border-bottom: none; } @keyframes row-hint { 0%, 20%, 100% { background: transparent; } 6%, 14% { background: rgba(134, 188, 37, 0.045); } } .gov-state { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .gov-state-active { border: 1.5px solid var(--accent); } .gov-state-active::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); } .gov-state-lock { border: 1.5px solid var(--accent); color: var(--accent); } .gov-state-lock svg { width: 11px; height: 11px; } .gov-state-pending { border: 1.5px solid var(--amber); overflow: hidden; } .gov-state-pending::after { content: ""; width: 50%; height: 100%; margin-right: 50%; background: rgba(217, 164, 65, 0.55); } .gov-state-approved { border: 1.5px solid var(--accent); color: var(--accent); } .gov-state-approved svg { width: 11px; height: 11px; } .gov-name { font-size: 0.9rem; font-weight: 500; } .gov-status { margin-left: auto; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.26rem 0.7rem; border-radius: 100px; } .status-green { color: var(--accent); background: var(--accent-soft); } .status-amber { color: var(--amber); background: rgba(217, 164, 65, 0.12); } .gov-ledger { border-top: 1px solid var(--line-soft); padding: 0.9rem 1.4rem; font-family: var(--font-mono); font-size: 0.68rem; display: grid; gap: 0.45rem; } .ledger-title { font-family: var(--font-body); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 0.2rem; } .ledger-line { color: var(--text-dim); opacity: 0; transform: translateX(-6px); animation: ledger-in 8s infinite; animation-delay: calc(var(--d) * 0.9s + 0.4s); } @keyframes ledger-in { 0% { opacity: 0; transform: translateX(-6px); } 6%, 85% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateX(-6px); } } .gov-console-foot { display: flex; justify-content: space-between; padding: 0.85rem 1.4rem; border-top: 1px solid var(--line-soft); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-mute); } /* ============================================================ 5 · ENTERPRISE READINESS ============================================================ */ .readiness { min-height: 80vh; overflow: hidden; justify-content: flex-start; padding-block: clamp(3rem, 6vh, 4.5rem); } .readiness-lines { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 130px); mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent); pointer-events: none; } .readiness-layout { margin-top: clamp(0.75rem, 1.6vh, 1.25rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; } /* tighter vertical rhythm for this section specifically (header → sub → points → close) — other sections are unaffected */ .readiness .section-sub { margin-top: 0.8rem; } .readiness-list { align-content: start; } .readiness-list li { padding: 0.7rem 0 0.7rem 1.6rem; } /* the stack is the hero of this section — let it be big and spread */ .readiness-visual { margin-top: -0.5rem; display: flex; justify-content: center; } .readiness-visual svg { max-width: 510px; } .readiness-visual { width: 100%; } /* the grid gap pushes the right column's centre gap/4 right of the content's 75% line; pull the SVG back so the stack sits dead-centre in the 2nd half. (Applied to the svg, not .readiness-visual, whose transform the reveal owns.) */ .readiness-visual svg { width: 100%; height: auto; } /* desktop only: raise the stack into the empty upper-right and reclaim the layout height so the close line pulls up right under the content. Below 900px the layout stacks single-column — the translate would overlap the list, so it stays neutral there. */ @media (min-width: 900px) { .readiness-visual svg { transform: translate(calc(clamp(3rem, 6vw, 5rem) * -0.25), clamp(-7.5rem, -11vh, -3rem)); } .readiness .section-close { margin-top: clamp(-6rem, -9vh, -2rem); } } .ready-cube { animation: ready-pulse 6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.3s); } @keyframes ready-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .ready-cube.lit .cf-top { fill: rgba(134, 188, 37, 0.18); stroke: rgba(134, 188, 37, 0.5); } .ready-cube.lit .cf-left { fill: rgba(134, 188, 37, 0.06); stroke: rgba(134, 188, 37, 0.3); } .ready-cube.lit .cf-right { fill: rgba(134, 188, 37, 0.03); stroke: rgba(134, 188, 37, 0.3); } /* --- multi-floor tower: each floor is an identical cube grid, stacked via its own transform; upper floors (not .foundation) flicker green at random, staggered per-cube (--i) and per-floor (--floor) so nothing reads as synchronised. The bottom .foundation floor stays a static, neutral base. --- */ .ready-floor.flicker .ready-cube .cf-top { animation: ready-flicker-top calc(4.6s + var(--i) * 0.37s) ease-in-out infinite; animation-delay: calc((var(--i) + var(--floor) * 12) * -0.53s); } .ready-floor.flicker .ready-cube .cf-left { animation: ready-flicker-left calc(4.6s + var(--i) * 0.37s) ease-in-out infinite; animation-delay: calc((var(--i) + var(--floor) * 12) * -0.53s); } .ready-floor.flicker .ready-cube .cf-right { animation: ready-flicker-right calc(4.6s + var(--i) * 0.37s) ease-in-out infinite; animation-delay: calc((var(--i) + var(--floor) * 12) * -0.53s); } @keyframes ready-flicker-top { 0%, 78%, 100% { fill: rgba(255, 255, 255, 0.07); stroke: rgba(255, 255, 255, 0.2); } 40% { fill: rgba(134, 188, 37, 0.22); stroke: rgba(134, 188, 37, 0.55); } } @keyframes ready-flicker-left { 0%, 78%, 100% { fill: rgba(255, 255, 255, 0.028); stroke: rgba(255, 255, 255, 0.13); } 40% { fill: rgba(134, 188, 37, 0.08); stroke: rgba(134, 188, 37, 0.32); } } @keyframes ready-flicker-right { 0%, 78%, 100% { fill: rgba(255, 255, 255, 0.012); stroke: rgba(255, 255, 255, 0.13); } 40% { fill: rgba(134, 188, 37, 0.04); stroke: rgba(134, 188, 37, 0.32); } } /* The readiness tower's particle motion is now driven entirely by the flow.js canvas field (organic, top-in → fall-through → bottom-out, white + green), matching the hero/supply-chain sections — the SVG holds only the static stacked cubes, no in-diagram animated dots. */ /* ============================================================ 6 · MOMENTUM — engagement marquee ============================================================ */ .momentum { overflow: hidden; } .marquee { position: relative; z-index: 3; margin-top: clamp(3rem, 6vh, 4.5rem); overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent); } .marquee-track { display: flex; gap: 1rem; width: max-content; padding-block: 0.5rem; animation: marquee-scroll 80s linear infinite; } .marquee:hover .marquee-track, .marquee.paused .marquee-track { animation-play-state: paused; } @keyframes marquee-scroll { to { transform: translateX(calc(-50% - 0.5rem)); } } /* full glassmorphism (user-mandated on ALL cards) — verified 60fps with the backdrop blur despite the continuous track scroll */ .eng-card { width: 380px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 1.6rem 1.5rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px) saturate(1.25); -webkit-backdrop-filter: blur(12px) saturate(1.25); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07); transition: border-color 0.3s ease; } .eng-card:hover { border-color: rgba(134, 188, 37, 0.4); } .eng-sector { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .eng-card h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 550; letter-spacing: -0.01em; margin: 0.7rem 0 0.5rem; } .eng-card p { font-size: 0.82rem; color: var(--text-dim); line-height: 1.55; } .momentum-note { margin-top: 1.6rem; font-size: 0.72rem; color: var(--text-mute); font-style: italic; } .momentum-outcomes { margin-top: 2rem; } /* ============================================================ 7 · REQUEST DEMO ============================================================ */ .demo { position: relative; overflow: hidden; } .demo-glow { position: absolute; bottom: -30%; left: 50%; transform: translateX(-50%); width: 100vw; height: 60vh; background: radial-gradient(ellipse at center, rgba(134, 188, 37, 0.08) 0%, transparent 65%); filter: blur(24px); pointer-events: none; } .demo-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } .demo .section-head { display: flex; flex-direction: column; align-items: center; } .demo .section-sub { margin-inline: auto; } .demo-form-wrap { margin-top: clamp(3rem, 6vh, 4.5rem); width: min(680px, 100%); text-align: left; } .demo-form { display: grid; gap: 1.4rem; } .demo-form[hidden] { display: none; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } .field { display: grid; gap: 0.5rem; } .field label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .field input, .field select, .field textarea { font-family: var(--font-body); font-size: 0.95rem; color: var(--text); background: rgba(255, 255, 255, 0.045); backdrop-filter: blur(12px) saturate(1.25); -webkit-backdrop-filter: blur(12px) saturate(1.25); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; padding: 0.9rem 1.1rem; outline: none; transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; width: 100%; appearance: none; -webkit-appearance: none; } .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23a2a8a0' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; } .field select:invalid { color: var(--text-mute); } .field select option { background: var(--bg-elev); color: var(--text); } .field input::placeholder, .field textarea::placeholder { color: var(--text-mute); } .field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(134, 188, 37, 0.55); background: rgba(134, 188, 37, 0.04); box-shadow: 0 0 0 3px rgba(134, 188, 37, 0.12); } .field textarea { resize: vertical; min-height: 110px; } .form-actions { display: flex; align-items: center; gap: 1.2rem; margin-top: 0.4rem; } .form-error { font-size: 0.85rem; color: #e07a5f; } /* the thread converges here — give the CTA its aura */ .demo .btn-lg { position: relative; } .demo .btn-lg::after { content: ""; position: absolute; inset: -16px -24px; border-radius: 100px; background: radial-gradient(ellipse at center, rgba(134, 188, 37, 0.3), transparent 70%); z-index: -1; pointer-events: none; animation: btn-aura 3.2s ease-in-out infinite; } @keyframes btn-aura { 0%, 100% { opacity: 0.45; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } } .demo-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; padding: 3.5rem 2rem; border: 1px solid rgba(134, 188, 37, 0.3); border-radius: 16px; background: rgba(134, 188, 37, 0.05); } .demo-success[hidden] { display: none; } .success-mark { color: var(--accent); } .success-mark svg { width: 48px; height: 48px; } .demo-success h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 550; letter-spacing: -0.02em; } .demo-success p { color: var(--text-dim); max-width: 42ch; } .demo .trust-line { margin-top: 3rem; } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--line-soft); padding: 2.6rem 0; } .footer-inner { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; } .footer-links { display: flex; gap: 1.6rem; margin-left: auto; } .footer-links a { font-size: 0.8rem; color: var(--text-dim); transition: color 0.25s ease; } .footer-links a:hover { color: var(--text); } .footer-note { width: 100%; font-size: 0.74rem; color: var(--text-mute); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1023px) { .bento { grid-template-columns: repeat(2, 1fr); } .governance-layout { grid-template-columns: 1fr; gap: 3.5rem; } .gov-console { max-width: 560px; order: 2; } .readiness-layout { grid-template-columns: 1fr; gap: 3rem; } .readiness-visual { max-width: 480px; } } @media (max-width: 899px) { .nav-links, .nav-cta { display: none; } .nav-toggle { display: flex; } .sc-grid { grid-template-columns: 1fr; height: auto; gap: 2.5rem; padding: clamp(5rem, 10vh, 7rem) 0 4rem; } .sc-steps { position: static; height: auto; margin-top: 0.5rem; display: grid; } .sc-step { position: static; display: block; opacity: 1; transform: none; pointer-events: auto; padding: 1.3rem 0; border-top: 1px solid var(--line-soft); } /* stacked list on mobile: compact inline number + visible stage name */ .sc-step h3 { font-size: 1.3rem; line-height: 1.2; } .sc-step h3 span { display: inline; font-size: 0.85em; font-weight: 600; line-height: inherit; letter-spacing: 0.06em; color: var(--accent); -webkit-text-stroke: 0; margin-right: 0.6rem; } .sc-step p { margin-top: 0.5rem; font-size: 0.9rem; max-width: none; } .sc-index, .sc-hint { display: none; } .sc-diagram { order: -1; margin-top: 1rem; } .sc-left { display: contents; } .sc-head { order: -2; } } @media (max-width: 767px) { .section { min-height: auto; padding: clamp(4.5rem, 10vh, 6rem) 0; } .section-head h2 br { display: none; } .hero { padding-top: calc(var(--nav-h) + 2rem); } .hero-ctas { width: 100%; flex-direction: column; } .hero-ctas .btn { width: 100%; } .hero-loop-labels { display: none; } .bento { grid-template-columns: 1fr; } .cell-wide { grid-column: span 1; } .cell { min-height: 220px; } .pillar-list-compact { grid-template-columns: 1fr; } .eng-card { width: 300px; padding: 1.4rem 1.3rem; } .form-row { grid-template-columns: 1fr; } .form-actions { flex-direction: column; align-items: stretch; } .footer-inner { flex-direction: column; align-items: flex-start; gap: 1.2rem; } .footer-links { margin-left: 0; flex-wrap: wrap; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; } .reveal, .reveal-group > * { opacity: 1 !important; transform: none !important; filter: none !important; } .sc-step { opacity: 1 !important; transform: none !important; } .marquee-track { animation: none !important; flex-wrap: wrap; width: auto; } .marquee { mask-image: none; -webkit-mask-image: none; } .vb-chip, .ledger-line { opacity: 1 !important; } .ready-cube { opacity: 1 !important; } /* reduced motion: draw the persistent end-states directly */ .vr-row path, .va-fill, .va-tick, .vl-line { stroke-dashoffset: 0 !important; } }