/* Critical CSS — inlined in for above-the-fold rendering. Keep this lean. Tokens, reset, layout primitives, header, hero. */ /* ============ Tokens ============ */ :root { /* Brand */ --c-teal: #0F4C5C; --c-teal-900: #0A1A1F; --c-teal-700: #133840; --c-teal-500: #0F4C5C; --c-teal-300: #2EC4B6; --c-coral: #FF5A6F; --c-coral-300: #FFC857; --c-indigo: #5B5FFF; --c-yellow: #FFC857; --c-mint: #2EC4B6; --c-violet: #9B5DE5; /* Neutrals */ --c-bg: #FFFFFF; --c-bg-alt: #F5F8FA; --c-bg-deep: #0A1A1F; --c-fg: #0A1A1F; --c-fg-muted: #4B5A60; --c-fg-subtle: #7A8A90; --c-border: #E2E8EA; --c-border-strong: #C8D3D6; /* Gradients */ --g-core: linear-gradient(135deg, #0F4C5C 0%, #2EC4B6 100%); --g-energy: linear-gradient(135deg, #FF5A6F 0%, #FFC857 100%); --g-depth: linear-gradient(180deg, #0A1A1F 0%, #0F4C5C 60%, #133840 100%); /* Type */ --font-sans: 'Sofia Pro', Aptos, 'Century Gothic', 'Trebuchet MS', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-48: 3rem; --fs-56: 3.5rem; --fs-64: 4rem; /* Space */ --sp-4: 0.25rem; --sp-8: 0.5rem; --sp-12: 0.75rem; --sp-16: 1rem; --sp-24: 1.5rem; --sp-32: 2rem; --sp-48: 3rem; --sp-64: 4rem; --sp-80: 5rem; --sp-96: 6rem; /* Layout */ --container: 1200px; --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --radius-xl: 28px; /* Shadow */ --shadow-sm: 0 1px 2px rgba(10,26,31,0.06); --shadow-md: 0 6px 18px rgba(10,26,31,0.08); --shadow-lg: 0 20px 50px rgba(10,26,31,0.12); /* Motion */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 120ms; --dur: 220ms; } /* ============ Font (self-hosted fallback tuned to Sofia Pro metrics) ============ */ /* Production should replace with actual Sofia Pro woff2 files. */ @font-face { font-family: 'Sofia Pro Fallback'; src: local('Aptos'), local('Century Gothic'), local('Trebuchet MS'); font-display: swap; size-adjust: 100%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; } /* ============ Reset ============ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-16); line-height: 1.6; color: var(--c-fg); background: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-16); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.015em; } h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); } h4 { font-size: var(--fs-20); } p { margin: 0 0 var(--sp-16); } a { color: var(--c-teal); text-decoration: none; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--c-coral); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--c-mint); outline-offset: 2px; border-radius: 4px; } ul, ol { padding-left: 1.25rem; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ============ Layout ============ */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-24); } .section { padding: var(--sp-80) 0; } @media (max-width: 720px) { .section { padding: var(--sp-64) 0; } } .section--deep { background: var(--g-depth); color: #fff; } .section--deep h1, .section--deep h2, .section--deep h3 { color: #fff; } .section--alt { background: var(--c-bg-alt); } .eyebrow { display: inline-block; font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-mint); margin-bottom: var(--sp-16); } .section--deep .eyebrow { color: var(--c-coral-300); } /* ============ Skip link ============ */ .skip-link { position: absolute; left: 0; top: -100px; background: var(--c-teal); color: #fff; padding: var(--sp-12) var(--sp-24); z-index: 1000; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { top: 0; color: #fff; } /* ============ Header ============ */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--c-border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); height: 72px; } .site-header__logo { display: inline-flex; align-items: center; gap: var(--sp-8); font-weight: 700; font-size: var(--fs-20); color: var(--c-teal); letter-spacing: -0.01em; } .site-header__logo:hover { color: var(--c-teal); } .site-header__logo-mark { width: 32px; height: 32px; border-radius: 50%; background: var(--g-core); flex-shrink: 0; } .site-nav { display: flex; align-items: center; gap: var(--sp-32); } .site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-24); } .site-nav__link { color: var(--c-fg); font-weight: 500; font-size: var(--fs-16); padding: var(--sp-8) 0; position: relative; } .site-nav__link:hover { color: var(--c-teal); } .site-nav__cta { display: inline-flex; align-items: center; gap: var(--sp-8); } .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-sm); } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 22px; height: 2px; background: var(--c-fg); position: relative; transition: transform var(--dur) var(--ease); } .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; } .nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; } @media (max-width: 960px) { .nav-toggle { display: inline-flex; } .site-nav { position: fixed; inset: 72px 0 0 0; background: #fff; flex-direction: column; align-items: stretch; padding: var(--sp-24); gap: var(--sp-16); transform: translateX(100%); transition: transform var(--dur) var(--ease); overflow-y: auto; } .site-nav[data-open="true"] { transform: translateX(0); } .site-nav__list { flex-direction: column; gap: var(--sp-8); } .site-nav__link { padding: var(--sp-12) 0; font-size: var(--fs-18); border-bottom: 1px solid var(--c-border); display: block; } } /* ============ Buttons ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); padding: 0.875rem 1.5rem; font-weight: 600; font-size: var(--fs-16); line-height: 1; border-radius: 999px; transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); white-space: nowrap; text-align: center; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--c-teal); color: #fff; } .btn--primary:hover { background: var(--c-teal-700); color: #fff; box-shadow: var(--shadow-md); } .btn--cta { background: var(--g-energy); color: #fff; } .btn--cta:hover { color: #fff; box-shadow: 0 10px 30px rgba(255,90,111,0.35); } .btn--secondary { background: transparent; color: var(--c-teal); box-shadow: inset 0 0 0 2px var(--c-teal); } .btn--secondary:hover { background: var(--c-teal); color: #fff; } .btn--ghost { background: transparent; color: var(--c-fg); } .btn--ghost:hover { background: var(--c-bg-alt); color: var(--c-fg); } .section--deep .btn--secondary { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); } .section--deep .btn--secondary:hover { background: #fff; color: var(--c-teal); } /* ============ Hero ============ */ .hero { position: relative; padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 8vw, 5rem); background: var(--g-depth); color: #fff; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(ellipse at 20% 10%, rgba(46,196,182,0.25), transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(255,90,111,0.18), transparent 55%); pointer-events: none; } .hero__inner { position: relative; display: grid; gap: var(--sp-48); } .hero__eyebrow { display: inline-block; padding: 6px 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; font-size: var(--fs-14); font-weight: 500; color: #fff; margin-bottom: var(--sp-24); } .hero h1 { color: #fff; max-width: 22ch; margin-bottom: var(--sp-24); } .hero__sub { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: rgba(255,255,255,0.82); max-width: 56ch; margin-bottom: var(--sp-32); } .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-16); } .hero__media { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(46,196,182,0.2), rgba(91,95,255,0.15)), rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); font-size: var(--fs-14); overflow: hidden; position: relative; } .hero__media::after { content: ''; position: absolute; inset: auto; width: 72px; height: 72px; border-radius: 50%; background: var(--g-energy); box-shadow: 0 20px 60px rgba(255,90,111,0.5); } .hero__media span { position: relative; z-index: 1; background: rgba(10,26,31,0.6); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px); margin-top: 100px; }