:root { --ocean-deep: #083344; --ocean-mid: #0284c7; --ocean-shallow: #38bdf8; --ocean-foam: #f0f9ff; --sand: #fdfbf7; --text-dark: #0f172a; --font-serif: 'Playfair Display', serif; --font-sans: 'Inter', sans-serif; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 2.5rem; --spacing-lg: 5rem; --spacing-xl: 8rem; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-sans); color: var(--text-dark); background-color: var(--ocean-foam); line-height: 1.6; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--ocean-deep); } img { width: 100%; height: auto; object-fit: cover; display: block; } a { color: var(--ocean-mid); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--ocean-deep); } .kine-nav-system { position: sticky; top: 0; z-index: 100; background: rgba(253, 251, 247, 0.95); backdrop-filter: blur(10px); display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--ocean-shallow); } .kine-brand-mark { display: flex; align-items: center; gap: var(--spacing-xs); font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; color: var(--ocean-deep); } .kine-navigation { display: flex; gap: var(--spacing-md); } .kine-navigation a { font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ocean-deep); } .btn-ocean-primary { display: inline-block; background-color: var(--ocean-mid); color: var(--sand); padding: 0.75rem 1.5rem; font-weight: 600; border: none; cursor: pointer; transition: background-color 0.3s ease; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; } .btn-ocean-primary:hover { background-color: var(--ocean-deep); color: var(--sand); } .biomech-split-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 85vh; background-color: var(--sand); } .hero-text-module { padding: var(--spacing-xl) var(--spacing-md); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--spacing-md); } .sys-update { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ocean-mid); border: 1px solid var(--ocean-shallow); padding: 0.25rem 0.5rem; } .hero-prime-heading { font-size: 4rem; line-height: 1.1; } .hero-sub-telemetry { font-size: 1.25rem; color: #475569; max-width: 90%; } .stat-counter { background: var(--ocean-foam); padding: 1rem; border-left: 4px solid var(--ocean-mid); } .metric-value { font-size: 2rem; font-weight: 700; color: var(--ocean-deep); } .metric-label { font-size: 0.9rem; font-weight: 600; margin-left: 0.5rem; } .hero-image-module img { height: 100%; } .kinematic-deep-dive { display: grid; grid-template-columns: 5fr 4fr; gap: var(--spacing-lg); padding: var(--spacing-xl) var(--spacing-md); background-color: var(--ocean-deep); color: var(--ocean-foam); } .kinematic-deep-dive .serif-heading { color: var(--ocean-shallow); font-size: 2.5rem; margin-bottom: var(--spacing-md); } .deep-dive-content p { margin-bottom: var(--spacing-sm); font-size: 1.1rem; font-weight: 300; } .inline-data-link { color: var(--ocean-shallow); border-bottom: 1px dotted var(--ocean-shallow); } .inline-data-link:hover { color: var(--sand); border-bottom-color: var(--sand); } .legal-micro { margin-top: var(--spacing-md); font-size: 0.75rem; color: #94a3b8; font-style: italic; } .deep-dive-visual img { border-radius: 4px; filter: grayscale(20%) contrast(120%); } .empirical-feedback-sys { padding: var(--spacing-lg) var(--spacing-md); background-color: var(--sand); } .text-center { text-align: center; margin-bottom: var(--spacing-lg); font-size: 2.5rem; } .case-study-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-md); max-width: 1200px; margin: 0 auto; } .case-card { background: #fff; padding: var(--spacing-md); box-shadow: 0 10px 30px rgba(2, 132, 199, 0.05); border-top: 3px solid var(--ocean-mid); display: flex; flex-direction: column; gap: var(--spacing-sm); } .client-avatar { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--ocean-shallow); } .client-quote { font-style: italic; color: #334155; flex-grow: 1; } .client-id { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: var(--ocean-mid); } .protocol-matrix-sys { padding: var(--spacing-xl) var(--spacing-md); background-color: var(--ocean-foam); } .protocol-header { max-width: 800px; margin: 0 auto var(--spacing-lg); text-align: center; } .protocol-header .serif-heading { font-size: 2.5rem; margin-bottom: var(--spacing-sm); } .workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); max-width: 1200px; margin: 0 auto var(--spacing-lg); } .workflow-node { background: #fff; padding: var(--spacing-sm); } .workflow-node img { aspect-ratio: 4/3; margin-bottom: var(--spacing-sm); } .node-title { font-size: 1.25rem; margin-bottom: var(--spacing-xs); } .text-only-node { padding: var(--spacing-md); background: var(--ocean-deep); color: var(--ocean-foam); height: 100%; display: flex; flex-direction: column; justify-content: center; } .text-only-node .node-title { color: var(--ocean-shallow); } .operational-faq { max-width: 800px; margin: 0 auto; background: #fff; padding: var(--spacing-md); border-left: 4px solid var(--ocean-deep); } .faq-heading { margin-bottom: var(--spacing-sm); } .faq-item { margin-bottom: var(--spacing-sm); border-bottom: 1px solid var(--ocean-foam); padding-bottom: var(--spacing-xs); } .faq-item summary { font-weight: 600; cursor: pointer; color: var(--ocean-deep); } .faq-item p { margin-top: var(--spacing-xs); font-size: 0.95rem; color: #475569; } .telemetry-intake-sys { display: grid; grid-template-columns: 1fr 1fr; background-color: var(--sand); } .intake-visual img { height: 100%; } .intake-form-container { padding: var(--spacing-xl) var(--spacing-lg); display: flex; flex-direction: column; justify-content: center; } .intake-form-container .serif-heading { font-size: 2.5rem; margin-bottom: var(--spacing-xs); } .intake-form-container p { margin-bottom: var(--spacing-md); color: #475569; } .kine-form { display: flex; flex-direction: column; gap: var(--spacing-sm); } .input-group { display: flex; flex-direction: column; gap: 0.25rem; } .input-group label { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; color: var(--ocean-deep); } .input-group input, .input-group textarea { padding: 0.75rem; border: 1px solid #cbd5e1; background: #fff; font-family: var(--font-sans); transition: border-color 0.3s ease; } .input-group input:focus, .input-group textarea:focus { outline: none; border-color: var(--ocean-mid); } .base-footer-telemetry { background-color: var(--ocean-deep); color: var(--ocean-foam); padding: var(--spacing-lg) var(--spacing-md) var(--spacing-sm); font-size: 0.9rem; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md); max-width: 1200px; margin: 0 auto var(--spacing-lg); } .footer-brand { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--ocean-shallow); display: block; margin-bottom: var(--spacing-xs); } .footer-col a { display: block; color: var(--ocean-foam); margin-bottom: var(--spacing-xs); } .footer-col a:hover { color: var(--ocean-shallow); } .footer-col p { margin-bottom: var(--spacing-xs); color: #94a3b8; } .footer-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--spacing-sm); color: #64748b; font-size: 0.8rem; } @media (max-width: 900px) { .biomech-split-hero, .kinematic-deep-dive, .telemetry-intake-sys { grid-template-columns: 1fr; } .kine-navigation { display: none; } .hero-prime-heading { font-size: 3rem; } .workflow-grid { grid-template-columns: 1fr; } }