/* ============================================================ TOKENS ============================================================ */ :root { --text: #0d0d0e; --muted: #72757c; --accent: #5e5eff; --accent-text: #5454FF; /* accent as text/link color (light mode); overridden in dark mode */ --border: rgba(0,0,0,0.2); --hero-bg: #07070c; --page-bg: #ffffff; --alt-bg: #f7f7f7; --footer-bg: #0d0d0e; --footer-text: rgba(255,255,255,0.55); --footer-dim: rgba(255,255,255,0.30); --tunnel-color: #ADADFF; --cta-shadow: 0px 4px 24px rgba(94,94,255,0.40); --cta-shadow2: 0px 2px 5px rgba(91,108,255,0.25); --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --max-w: 1120px; --gutter: 48px; } /* ============================================================ DARK THEME Toggled via [data-theme="dark"] on . Hero and footer keep their own fixed dark background variables in both themes (--hero-bg, --footer-bg, etc. are untouched here) — only the body-content tokens invert. ============================================================ */ :root[data-theme="dark"] { --text: #f1f1f4; --muted: #9a9da6; --accent-text: #6D6DFF; --border: rgba(255,255,255,0.16); --page-bg: #0b0b0f; --alt-bg: #15151b; } :root[data-theme="dark"] .nav--light { background: rgba(11,11,15,0.88); border-bottom-color: rgba(255,255,255,0.1); } :root[data-theme="dark"] .nav--light .nav__links a { color: rgba(255,255,255,0.65); } :root[data-theme="dark"] .nav--light .nav__links a:hover { color: var(--text); } :root[data-theme="dark"] .nav--light .nav-cta { background: #ffffff; color: #0d0d0e; } :root[data-theme="dark"] .nav__mobile-drawer a { border-bottom-color: rgba(255,255,255,0.08); } :root[data-theme="dark"] .ind-tab:hover { background: rgba(255,255,255,0.06); } :root[data-theme="dark"] .ind-tab.active { background: rgba(255,255,255,0.10); } :root[data-theme="dark"] .ind-col--problems li::before { background: rgba(255,255,255,0.35); } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); background: var(--page-bg); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: var(--font); cursor: pointer; } input, select, textarea { font-family: var(--font); } /* ============================================================ LAYOUT ============================================================ */ .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } /* Section reveal animation */ .reveal { opacity: 0; transform: translate3d(0, 48px, 0); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); } .reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); } .reveal-delay-1 { transition-delay: 0ms; } .reveal-delay-2 { transition-delay: 120ms; } .reveal-delay-3 { transition-delay: 240ms; } .reveal-delay-4 { transition-delay: 360ms; } .reveal-delay-5 { transition-delay: 480ms; } .reveal-delay-6 { transition-delay: 600ms; } /* ============================================================ TYPOGRAPHY HELPERS ============================================================ */ .section-label { font-size: 12px; font-weight: 600; line-height: 24px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent-text); display: block; margin-bottom: 16px; } .section-h2 { font-size: 48px; font-weight: 400; line-height: 54px; letter-spacing: -2px; color: var(--text); } .section-body { font-size: 16px; font-weight: 400; line-height: 24px; color: var(--muted); } /* Gradient number (card indices) */ .grad-num { font-size: 48px; font-weight: 200; line-height: 48px; letter-spacing: -2px; background: linear-gradient(to bottom, #a1a1ff 0%, #5E5EFF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 1; display: block; } /* ============================================================ BUTTONS ============================================================ */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--accent); border-radius: 2px; height: 56px; padding: 0 24px; box-shadow: var(--cta-shadow); border: none; cursor: pointer; text-decoration: none; transition: opacity .15s, transform .15s; } .btn-primary:hover { opacity: .9; transform: translateY(-1px); } .btn-primary__label { font-size: 16px; font-weight: 600; color: #ffffff; line-height: 1; white-space: nowrap; } .btn-primary__arrow { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #ffffff; flex-shrink: 0; } /* Nav CTA (changes with scroll state) */ .nav-cta { display: inline-flex; align-items: center; gap: 0; border-radius: 2px; padding: 4px 4px 4px 16px; border: none; cursor: pointer; text-decoration: none; transition: background .3s ease, color .3s ease; font-size: 14px; font-weight: 500; } .nav-cta__label { line-height: 1; } .nav-cta__icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 16px; border-radius: 1px; flex-shrink: 0; transition: background .3s ease; } .nav--top .nav-cta, .nav--dark .nav-cta { background: #ffffff; color: #0d0d0e; } .nav--light .nav-cta { background: #0d0d0e; color: #f5f5f5; } /* ============================================================ THEME TOGGLE ============================================================ */ .nav__actions { display: flex; align-items: center; gap: 12px; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid transparent; background: transparent; flex-shrink: 0; padding: 0; transition: background .3s ease, color .3s ease, border-color .3s ease; } .theme-toggle__icon { width: 16px; height: 16px; } .theme-toggle__icon--moon { display: block; } .theme-toggle__icon--sun { display: none; } :root[data-theme="dark"] .theme-toggle__icon--moon { display: none; } :root[data-theme="dark"] .theme-toggle__icon--sun { display: block; } .nav--top .theme-toggle, .nav--dark .theme-toggle { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.18); } .nav--top .theme-toggle:hover, .nav--dark .theme-toggle:hover { color: #ffffff; border-color: rgba(255,255,255,0.35); } .nav--light .theme-toggle { color: var(--muted); border-color: var(--border); } .nav--light .theme-toggle:hover { color: var(--text); border-color: var(--accent); } /* ============================================================ NAVIGATION ============================================================ */ #nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; display: flex; align-items: center; padding: 0 var(--gutter); height: 82px; transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; } .nav--top { background: transparent; border-bottom: 1px solid transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .nav--dark { background: rgba(7,7,12,0.4); border-bottom: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .nav--light { background: rgba(255,255,255,0.88); border-bottom: 1px solid rgba(0,0,0,0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } #nav .nav__inner { max-width: var(--max-w); margin: 0 auto; padding: 0; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } #nav .nav__inner .nav__actions { justify-self: end; } .nav__logo { display: flex; align-items: center; flex-shrink: 0; } .nav__logo svg { transition: fill .3s ease; } .nav__logo svg path { transition: fill .3s ease; } .nav--top .nav__logo path, .nav--dark .nav__logo path { fill: #ffffff; } .nav--light .nav__logo path { fill: var(--text); } .nav__links { display: flex; align-items: center; gap: 28px; } .nav__links a { font-size: 14px; font-weight: 500; letter-spacing: .014px; text-decoration: none; transition: color .3s ease; } .nav--top .nav__links a, .nav--dark .nav__links a { color: rgba(255,255,255,0.75); } .nav--top .nav__links a:hover, .nav--dark .nav__links a:hover { color: #ffffff; } .nav--light .nav__links a { color: rgba(13,13,14,0.65); } .nav--light .nav__links a:hover { color: var(--text); } .nav__hamburger { display: none; background: none; border: none; padding: 4px; position: absolute; right: var(--gutter); } .nav--top .nav__hamburger, .nav--dark .nav__hamburger { color: rgba(255,255,255,0.75); } .nav--light .nav__hamburger { color: var(--text); } .nav__mobile-drawer { display: none; position: fixed; top: 82px; left: 0; right: 0; background: var(--page-bg); border-bottom: 1px solid var(--border); padding: 20px var(--gutter) 28px; flex-direction: column; gap: 0; z-index: 499; } .nav__mobile-drawer.open { display: flex; } .nav__mobile-drawer a { font-size: 16px; font-weight: 500; color: var(--muted); padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.06); } .nav__mobile-drawer a:last-child { border: none; color: var(--accent-text); } /* ============================================================ HERO ============================================================ */ #hero { position: relative; height: 100vh; min-height: 640px; background: var(--hero-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } #tunnel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .hero__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 35%, rgba(7,7,12,0.6) 70%, rgba(7,7,12,0.92) 100%); pointer-events: none; } .hero__top-wash { position: absolute; top: 0; left: 0; right: 0; height: 100%; background: linear-gradient(180deg, rgba(130, 115, 255, 0.2 ) 0%, rgba(0, 0, 1, 0) 100%); pointer-events: none; } .hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; padding: 0 var(--gutter); max-width: 860px; transition: transform .1s linear, opacity .1s linear; } .hero__h1 { font-size: 64px; font-weight: 400; line-height: 76px; letter-spacing: -2px; color: #ffffff; } .hero__subtitle { font-size: 24px; font-weight: 400; line-height: 32px; color: rgba(255,255,255,0.55); max-width: 580px; } /* Hero stats row */ .hero__stats { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; max-width: var(--max-w); margin: 0 auto; padding: 24px var(--gutter) 80px; display: flex; align-items: center; gap: 32px; } .hero__stats-item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; text-align: center; } .hero__stat-val { font-size: 40px; font-weight: 400; letter-spacing: -2px; color: #ffffff; line-height: 1; } .hero__stat-lbl { font-size: 14px; font-weight: 400; line-height: 20.8px; color: rgba(255,255,255,0.45); } /* ============================================================ TRUST LAYER ============================================================ */ .trust-layer { background: var(--page-bg); border-bottom: 1px solid var(--border); padding: 22px var(--gutter); } .trust-layer__inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; } .trust-layer__label { font-size: 11px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); opacity: .55; white-space: nowrap; flex-shrink: 0; } .trust-layer__divider { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; } .trust-layer__logos { display: flex; flex: 1; gap: 36px; align-items: center; justify-content: space-evenly; flex-wrap: wrap; } .trust-layer__logo { display: flex; align-items: center; opacity: .28; filter: grayscale(1); transition: opacity .2s ease; } .trust-layer__logo:hover { opacity: .5; } .trust-layer__logo svg { display: block; fill: var(--text); } /* ============================================================ TESTIMONIAL ============================================================ */ .testimonial { padding: 100px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--page-bg); } .testimonial__inner { max-width: 800px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; } .testimonial__mark { font-family: var(--font); font-size: 130px; line-height: .45; background: linear-gradient(to bottom, #a1a1ff 0%, #5E5EFF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 1; display: block; margin-bottom: 24px; font-weight: 200; } .testimonial__quote { font-size: 28px; font-weight: 400; line-height: 1.45; letter-spacing: -.8px; color: var(--text); margin-bottom: 28px; } .testimonial__attr { font-size: 14px; font-weight: 400; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 10px; } .testimonial__attr::before { content: ''; display: block; width: 24px; height: 1px; background: var(--muted); opacity: .4; } /* ============================================================ SHARED SECTION STRUCTURE ============================================================ */ .section { padding: 128px 0; border-top: 1px solid var(--border); } .section--alt { background: var(--alt-bg); } .section--both { border-bottom: 1px solid var(--border); } #blueprint.section--both, #get-started.section--both { border-bottom: none; } .section--blueprint { background: linear-gradient(180deg, rgba(130,115,255,0.50) 0%, rgba(130,115,255,0.05) 60%, rgba(255,255,255,0.00) 100%); } .blueprint__card { max-width: var(--max-w); margin: 0 auto; padding: 80px 64px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; } .section__header { margin-bottom: 40px; } /* ============================================================ CARDS (shared) ============================================================ */ .card { border: 1px solid var(--border); border-radius: 4px; padding: 25px; display: flex; flex-direction: column; gap: 24px; transition: border-color .25s ease, box-shadow .25s ease; } .card:hover { border-color: var(--accent); box-shadow: 0 8px 32px rgba(94,94,255,0.18); } .card__title { font-size: 24px; font-weight: 500; letter-spacing: -1px; line-height: 1.15; color: var(--text); } .card__body { font-size: 14px; font-weight: 400; line-height: 20px; color: var(--muted); } .card__list { display: flex; flex-direction: column; gap: 8px; } .card__list li { font-size: 13px; line-height: 1.5; color: var(--muted); display: flex; align-items: flex-start; gap: 8px; } .card__list li::before { content: ''; flex-shrink: 0; display: block; width: 4px; height: 4px; background: var(--accent); border-radius: 50%; margin-top: 8px; opacity: .6; } /* Success Stories — punched-up metric call-outs */ .story-metrics { display: flex; flex-direction: column; gap: 14px; } .story-metric { display: flex; flex-direction: column; gap: 2px; } .story-metric__val { font-size: 20px; font-weight: 500; letter-spacing: -0.5px; line-height: 1.15; background: linear-gradient(to bottom, #a1a1ff 0%, #5E5EFF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .story-metric__lbl { font-size: 13px; line-height: 1.4; color: var(--muted); } /* Success Stories — single-column case-study rows. Title + description sit on top; the metrics become an aligned stat grid below a divider, so metric columns line up across every card. Padding/gaps inherit the shared .card (25px padding, 24px gap) and the site-wide 24px grid rhythm. */ #success-stories .card__title { /* Tighten the 24px flex gap down to 16px, without affecting the body-to-divider gap. */ margin-bottom: -8px; } #success-stories .card__body { /* Fixed to 3 lines (line-height 20px) so the divider/metrics row lands at the same height in every card, regardless of body copy length. */ min-height: 60px; } #success-stories .story-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding-top: 24px; border-top: 1px solid var(--border); } @media (max-width: 1024px) { #success-stories .story-metrics { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { #success-stories .story-metrics { grid-template-columns: 1fr; } } /* ============================================================ THE FOUNDRY MODEL ============================================================ */ #the-foundry .foundry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } #the-foundry .card__title { /* Tighten the 24px flex gap down to 16px, without affecting the body-to-list gap. */ margin-bottom: -8px; } /* ============================================================ BLUEPRINT CTA ============================================================ */ #blueprint .blueprint__h2 { font-size: 48px; font-weight: 400; line-height: 54px; letter-spacing: -2px; color: var(--text); } #blueprint .blueprint__body { font-size: 16px; line-height: 24px; color: var(--muted); max-width: 520px; } #blueprint .blueprint__note { font-size: 14px; color: var(--muted); margin-top: 4px; } #blueprint .blueprint__note a { color: var(--accent-text); } /* ============================================================ ADAPT FRAMEWORK ============================================================ */ #adapt .adapt__layout, .adapt__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .adapt__left { position: sticky; top: 96px; } .adapt__list { display: flex; flex-direction: column; gap: 24px; } .adapt__item { position: relative; display: flex; align-items: flex-start; gap: 24px; padding: 24px; border: 1px solid var(--border); border-radius: 4px; margin-top: -1px; background: var(--alt-bg); /* Match the belief cards' reveal (fade + slide, staggered). Use transition longhand and OMIT transition-delay so the .reveal-delay-* classes still supply the stagger — a shorthand here would reset the delay to 0 and kill it. opacity/transform carry the reveal; border-color/box-shadow the hover. */ transition-property: opacity, transform, border-color, box-shadow; transition-duration: .8s, .8s, .35s, .35s; transition-timing-function: cubic-bezier(.16,1,.3,1), cubic-bezier(.16,1,.3,1), ease, ease; overflow: hidden; cursor: default; } .adapt__item::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(94,94,255,0.09) 0%, transparent 70%); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .adapt__item:hover { border-color: rgba(94,94,255,0.35); box-shadow: 0 4px 40px rgba(94,94,255,0.10); z-index: 1; transition-delay: 0s; /* keep hover snappy regardless of the reveal stagger */ } .adapt__item:hover::before { opacity: 1; } .adapt__letter { font-size: 48px; font-weight: 200; background: linear-gradient(to bottom, #a1a1ff 0%, #5E5EFF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 1; line-height: 48px; letter-spacing: -2px; flex-shrink: 0; width: 40px; } .adapt__item-title { font-size: 16px; font-weight: 500; color: var(--text); margin-bottom: 6px; } .adapt__item-body { font-size: 14px; line-height: 20px; color: var(--muted); } /* ADAPT — horizontal 5-column layout (matches proposal.html) */ #adapt .adapt__layout { display: block; } #adapt .adapt__left { position: static; margin-bottom: 40px; } #adapt .adapt__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--border); border-radius: 4px; } #adapt .adapt__item { flex-direction: column; gap: 12px; margin-top: 0; border: none; border-right: 1px solid var(--border); border-radius: 0; overflow: visible; } #adapt .adapt__item-body { /* Widen the 12px flex gap to 16px, without affecting the letter-to-title gap. */ margin-top: 4px; } #adapt .adapt__item:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } #adapt .adapt__item:last-child { border-right: none; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } #adapt .adapt__item::before { display: none; } #adapt .adapt__item:hover { box-shadow: inset 1px 0 0 var(--accent), inset -1px 0 0 var(--accent), inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent), 0 8px 32px rgba(94,94,255,0.18); z-index: 2; } #adapt .adapt__letter { line-height: 1; } /* ============================================================ CAPABILITIES ============================================================ */ #capabilities .caps-grid, .caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .cap-card { border: 1px solid var(--border); border-radius: 4px; padding: 25px; display: flex; flex-direction: column; gap: 16px; transition: border-color .25s ease, box-shadow .25s ease; } .cap-card:hover { border-color: var(--accent); box-shadow: 0 8px 32px rgba(94,94,255,0.18); } .cap-icon { color: var(--accent-text); opacity: 1; } .cap-icon svg { width: 48px; height: 48px; stroke: url(#cap-icon-grad); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } .cap-title { font-size: 18px; font-weight: 500; letter-spacing: -.4px; color: var(--text); line-height: 1.2; } .cap-body { font-size: 14px; line-height: 20px; color: var(--muted); } /* ============================================================ INDUSTRIES ============================================================ */ #industries .industries__layout { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; } .ind-tabs { display: flex; flex-direction: column; gap: 0; } .ind-tab { background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 14px 18px; font-size: 14px; font-weight: 500; color: var(--muted); text-align: left; cursor: pointer; transition: all .15s; margin-top: -1px; } .ind-tab:hover { color: var(--text); background: rgba(0,0,0,.03); } .ind-tab.active { background: rgba(0,0,0,.05); border-color: var(--border); color: var(--text); } .ind-panel { border: 1px solid var(--border); border-radius: 4px; padding: 32px; min-height: 360px; } .ind-content { display: none; } .ind-content.active { display: block; } .ind-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px; } .ind-heading { font-size: 28px; font-weight: 400; letter-spacing: -1px; line-height: 1.15; color: var(--text); margin-bottom: 10px; } .ind-body { font-size: 14px; line-height: 20px; color: var(--muted); margin-bottom: 24px; } .ind-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .ind-col-label { font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); opacity: .6; margin-bottom: 10px; } .ind-col-items { display: flex; flex-direction: column; gap: 8px; } .ind-col-items li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); line-height: 1.4; } .ind-col--problems li::before { content: ''; flex-shrink: 0; display: block; width: 4px; height: 4px; background: rgba(0,0,0,.35); border-radius: 50%; margin-top: 8px; } .ind-col--leverage li::before { content: ''; flex-shrink: 0; display: block; width: 4px; height: 4px; background: var(--accent); border-radius: 50%; margin-top: 8px; opacity: .7; } /* ============================================================ WHAT WE BELIEVE ============================================================ */ #about .beliefs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } #about .card__title { /* Tighten the 24px flex gap down to 16px, without affecting the grad-num-to-title gap. */ margin-bottom: -8px; } /* ============================================================ GET STARTED / CONTACT FORM ============================================================ */ #get-started .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .contact-form { display: flex; flex-direction: column; gap: 16px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-field { display: flex; flex-direction: column; gap: 7px; } .form-label { font-size: 14px; font-weight: 500; color: var(--muted); } .form-input, .form-select, .form-textarea { font-size: 16px; font-weight: 400; color: var(--text); background: var(--page-bg); border: 1px solid var(--border); border-radius: 2px; padding: 13px 16px; outline: none; width: 100%; transition: border-color .15s; appearance: none; -webkit-appearance: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); } .form-textarea { resize: vertical; min-height: 120px; line-height: 1.5; } .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2372757c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; } .form-note { font-size: 14px; font-weight: 400; color: var(--muted); line-height: 20px; } .form-note a { color: var(--accent-text); } /* ============================================================ FOOTER ============================================================ */ footer { background: var(--footer-bg); padding: 64px var(--gutter) 40px; } .footer__inner { max-width: var(--max-w); margin: 0 auto; } .footer__top { display: grid; grid-template-columns: 240px 1fr; gap: 72px; margin-bottom: 48px; } .footer__brand-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .footer__brand-name { font-size: 17px; font-weight: 600; color: #ffffff; letter-spacing: -.3px; } .footer__tagline { font-size: 13px; color: rgba(255,255,255,0.35); line-height: 1.55; max-width: 200px; } .footer__social { display: flex; align-items: center; gap: 16px; margin-top: 24px; } .footer__social a { color: var(--footer-text); transition: color .15s; } .footer__social a:hover { color: #ffffff; } .footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .footer__col-title { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--footer-dim); margin-bottom: 20px; } .footer__address { font-size: 14px; font-weight: 400; font-style: normal; line-height: 1.6; color: var(--footer-dim); } .footer__bottom { display: flex; align-items: center; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.07); } .footer__copy { font-size: 12px; font-weight: 400; color: var(--footer-dim); } /* ============================================================ SIDEBAR NAV (proposal page only) ============================================================ */ .sidebar-nav { position: fixed; left: 28px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 10px; } .sidebar-nav__item { font-size: 11px; font-weight: 500; color: var(--muted); cursor: pointer; transition: color .2s; letter-spacing: .04em; text-decoration: none; opacity: .5; transition: color .2s, opacity .2s; } .sidebar-nav__item.active, .sidebar-nav__item:hover { color: var(--accent-text); opacity: 1; } @media (max-width: 1280px) { .sidebar-nav { display: none; } } /* ============================================================ PROPOSAL — GENERAL GRIDS ============================================================ */ .foundry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .foundry-grid--4 { grid-template-columns: repeat(4, 1fr); } .foundry-grid--2 { grid-template-columns: repeat(2, 1fr); } /* Comparison table (Sovereign AI section) */ .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; } .compare-col { display: flex; flex-direction: column; } .compare-col--saas { background: var(--page-bg); border-right: 1px solid var(--border); } .compare-col--altir { background: linear-gradient(180deg, rgba(168,185,230,0.30) 7.37%, rgba(255,255,255,0.00) 100%); } .compare-col__header { padding: 18px 24px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; } .compare-col--saas .compare-col__header { color: var(--muted); background: var(--alt-bg); } .compare-col--altir .compare-col__header { color: #ffffff; background: rgb(61, 94, 185); } .compare-row { padding: 12px 24px; font-size: 14px; line-height: 1.5; color: var(--text); display: flex; align-items: flex-start; gap: 10px; } .compare-col__header + .compare-row { padding-top: 24px; } .compare-row:last-child { padding-bottom: 24px; } .compare-col--saas .compare-row { color: var(--muted); } .compare-row::before { content: ''; flex-shrink: 0; width: 4px; height: 4px; border-radius: 50%; margin-top: 8px; } .compare-col--altir .compare-row::before { background: var(--accent); opacity: .6; } .compare-col--saas .compare-row::before { background: rgba(0,0,0,.25); } /* Video card */ .video-card { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; } .video-card__thumb { aspect-ratio: 16/9; background: var(--hero-bg); display: flex; align-items: center; justify-content: center; position: relative; } .video-card__play { width: 44px; height: 44px; border-radius: 50%; background: rgba(94,94,255,0.85); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; backdrop-filter: blur(4px); } .video-card__duration { position: absolute; bottom: 10px; right: 12px; font-size: 11px; color: rgba(255,255,255,0.7); background: rgba(0,0,0,0.45); padding: 2px 6px; border-radius: 2px; letter-spacing: .03em; } .video-card__label { padding: 14px 18px; font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.4; border-top: 1px solid var(--border); } .video-card__modules { padding: 0 18px 14px; font-size: 11px; color: var(--accent-text); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } /* Roadmap (vertical stack) */ .roadmap-list { display: flex; flex-direction: column; gap: 24px; } .roadmap-card { border: 1px solid var(--border); border-radius: 4px; padding: 28px 32px; display: flex; gap: 16px; align-items: flex-start; } .roadmap-card__meta { flex-shrink: 0; width: 72px; } .roadmap-card__phase { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--accent-text); margin-bottom: 4px; } .roadmap-card__timeline { font-size: 13px; color: var(--muted); } .roadmap-card__title { font-size: 20px; font-weight: 500; letter-spacing: -.5px; color: var(--text); margin-bottom: 8px; } .roadmap-card__body { font-size: 14px; line-height: 20px; color: var(--muted); margin-bottom: 16px; } .roadmap-card__deliverables { display: flex; flex-direction: column; gap: 6px; } .roadmap-card__deliverables li { font-size: 13px; color: var(--muted); display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; } .roadmap-card__deliverables li::before { content: ''; flex-shrink: 0; width: 4px; height: 4px; background: var(--accent); border-radius: 50%; margin-top: 7px; opacity: .6; } /* Stats grid (exec summary) */ .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; } .stats-grid__item { background: var(--page-bg); padding: 24px; display: flex; flex-direction: column; gap: 6px; } .stats-grid__val { font-size: 28px; font-weight: 400; letter-spacing: -1.5px; color: var(--text); } .stats-grid__lbl { font-size: 12px; color: var(--muted); line-height: 1.4; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { :root { --gutter: 32px; } #the-foundry .foundry-grid { grid-template-columns: repeat(2, 1fr); } .foundry-grid { grid-template-columns: repeat(2, 1fr); } #adapt .adapt__layout, .adapt__layout { gap: 48px; } .adapt__left { position: static; } .blueprint__card { padding: 56px 40px; } .footer__top { grid-template-columns: 1fr; gap: 40px; } .roadmap-card { flex-direction: column; gap: 16px; } .roadmap-card__meta { width: auto; } } @media (max-width: 768px) { :root { --gutter: 24px; } .nav__links { display: none; } .nav__hamburger { display: block; } .hero__h1 { font-size: 44px; line-height: 50px; letter-spacing: -1.5px; } .hero__subtitle { font-size: 17px; } .hero__stats { gap: 0; } .section { padding: 80px 0; } #the-foundry .foundry-grid { grid-template-columns: 1fr; } .foundry-grid { grid-template-columns: 1fr; } #success-stories .foundry-grid { grid-template-columns: 1fr !important; } .blueprint__card { padding: 48px 28px; border-radius: 8px; } #adapt .adapt__layout, .adapt__layout { grid-template-columns: 1fr; gap: 40px; } #adapt .adapt__list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; } #adapt .adapt__item { border: none; border-right: none; border-bottom: 1px solid var(--border); border-radius: 0; } #adapt .adapt__item:last-child { border-bottom: none; } #capabilities .caps-grid, .caps-grid { grid-template-columns: 1fr; } #industries .industries__layout { grid-template-columns: 1fr; } .ind-tabs { flex-direction: row; flex-wrap: wrap; gap: 6px; } .ind-tab { font-size: 13px; padding: 9px 13px; margin-top: 0; } #about .beliefs-grid { grid-template-columns: 1fr; } #get-started .contact-layout { grid-template-columns: 1fr; gap: 40px; } .footer__bottom { flex-direction: column; gap: 8px; text-align: center; } .section-h2 { font-size: 36px; line-height: 42px; } .compare-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .testimonial__quote { font-size: 20px; } .trust-layer__logos { gap: 20px; } } @media (max-width: 480px) { .hero__h1 { font-size: 36px; line-height: 42px; } .hero__stats { display: none; } .ind-cols { grid-template-columns: 1fr; } .footer__cols { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr; } }