/* ═══════════════════════════════════ APEX LAB — ONE-PAGER (fresh build) ═══════════════════════════════════ */ :root { --bg: #FAF9F7; --surface-1: #FFFFFF; --surface-2: #F5F4F2; --surface-3: #ECEAE6; --text-primary: #1A1915; --text-secondary: #4A4640; --text-tertiary: #7A756C; --text-quaternary: #A8A29E; --accent: #6B7D8A; --accent-hover: #5A6C79; --accent-dim: rgba(107,125,138,0.10); --accent-ring: rgba(107,125,138,0.15); --border-subtle: rgba(74,70,64,0.06); --border-default: rgba(74,70,64,0.12); --border-emphasis: rgba(74,70,64,0.20); --surface-hover: #F0EFEC; --dark-obsidian: #2E2B27; --semantic-good: #6B8F71; --semantic-warning: #B8860B; --semantic-alert: #A04838; --shadow-subtle: 0 2px 12px rgba(0,0,0,0.04); --shadow-medium: 0 4px 24px rgba(0,0,0,0.08); --font: 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-heading: 'Space Grotesk', sans-serif; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* overflow-x on breaks position: sticky on descendants (.pin-stage). Body keeps overflow-x: hidden to clip horizontal bleed. */ } /* Lenis handles smooth scroll — leave native alone */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } body { font-family: var(--font); color: var(--text-primary); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; width: 100%; -webkit-tap-highlight-color: transparent; } a { text-decoration: none; color: inherit; } a, button { touch-action: manipulation; } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5 { font-family: var(--font-heading); } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Scroll reveal — Framer-style easing */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal.visible { opacity: 1; transform: translateY(0); } /* Staggered entrance for children of revealed containers */ .stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.visible .stagger > *, .stagger.visible > * { opacity: 1; transform: translateY(0); } .reveal.visible .stagger > *:nth-child(1), .stagger.visible > *:nth-child(1) { transition-delay: 0.08s; } .reveal.visible .stagger > *:nth-child(2), .stagger.visible > *:nth-child(2) { transition-delay: 0.16s; } .reveal.visible .stagger > *:nth-child(3), .stagger.visible > *:nth-child(3) { transition-delay: 0.24s; } .reveal.visible .stagger > *:nth-child(4), .stagger.visible > *:nth-child(4) { transition-delay: 0.32s; } .reveal.visible .stagger > *:nth-child(5), .stagger.visible > *:nth-child(5) { transition-delay: 0.40s; } .reveal.visible .stagger > *:nth-child(6), .stagger.visible > *:nth-child(6) { transition-delay: 0.48s; } /* Cards get a bigger, more pronounced slide-up (orbai-style) */ .feature-grid.stagger > *, .how-grid.stagger > *, .dashboard-wrap.stagger > * { opacity: 0; transform: translateY(80px) scale(0.96); transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.visible .feature-grid.stagger > *, .reveal.visible .how-grid.stagger > *, .reveal.visible .dashboard-wrap.stagger > * { opacity: 1; transform: translateY(0) scale(1); } .reveal.visible .feature-grid.stagger > *:nth-child(1), .reveal.visible .how-grid.stagger > *:nth-child(1), .reveal.visible .dashboard-wrap.stagger > *:nth-child(1) { transition-delay: 0.1s; } .reveal.visible .feature-grid.stagger > *:nth-child(2), .reveal.visible .how-grid.stagger > *:nth-child(2), .reveal.visible .dashboard-wrap.stagger > *:nth-child(2) { transition-delay: 0.22s; } .reveal.visible .feature-grid.stagger > *:nth-child(3), .reveal.visible .how-grid.stagger > *:nth-child(3), .reveal.visible .dashboard-wrap.stagger > *:nth-child(3) { transition-delay: 0.34s; } .reveal.visible .feature-grid.stagger > *:nth-child(4), .reveal.visible .how-grid.stagger > *:nth-child(4), .reveal.visible .dashboard-wrap.stagger > *:nth-child(4) { transition-delay: 0.46s; } /* Scroll-linked image "breathe": subtle scale on entry for featured media */ .feature-card-media img, .how-card-media img, .dash-main, .dash-sidebar-widget { transform: scale(0.98); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.visible .feature-card-media img, .reveal.visible .how-card-media img, .reveal.visible .dash-main, .reveal.visible .dash-sidebar-widget { transform: scale(1); } .feature-card:hover .feature-card-media img, .how-card:hover .how-card-media img { transform: scale(1.03); } /* ═══════════════════════════════════ FLOATING PILL NAV (preserved) ═══════════════════════════════════ */ .nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1000; /* Match the .container max-width (1200px) minus its 24px horizontal padding on each side, so the nav pill's edges line up with card edges below. */ width: calc(100% - 48px); max-width: 1152px; } /* Glass-style nav pill — matches the "See the platform" hero button. Default (over dark hero): translucent white on dark → white text. .scrolled (over light content): translucent white-ish → dark text. */ .nav-pill { display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 9999px; padding: 6px 6px 6px 20px; border: 1px solid rgba(255, 255, 255, 0.18); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .nav-pill.scrolled { background: rgba(255, 255, 255, 0.72); border-color: rgba(74, 70, 64, 0.10); box-shadow: 0 6px 24px rgba(26, 25, 21, 0.06); } /* Logo crossfade — white on hero, black when scrolled past */ .nav-logo { display: flex; align-items: center; position: relative; } .nav-logo-img { height: 15px; width: auto; transition: opacity 0.3s ease; } .nav-logo-img--dark { position: absolute; inset: 0; opacity: 0; } .nav-pill.scrolled .nav-logo-img--light { opacity: 0; } .nav-pill.scrolled .nav-logo-img--dark { opacity: 1; } .nav-links { display: flex; align-items: center; gap: 4px; list-style: none; } .nav-links a { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.9); padding: 10px 14px; border-radius: 9999px; transition: background 0.2s ease, color 0.3s ease; white-space: nowrap; } .nav-links a:hover { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; } /* Dark-text variant when scrolled onto light sections */ .nav-pill.scrolled .nav-links a { color: var(--text-secondary); } .nav-pill.scrolled .nav-links a:hover { background: rgba(26, 25, 21, 0.06); color: var(--text-primary); } .nav-links .sep { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.20); margin: 0 4px; transition: background 0.3s ease; } .nav-pill.scrolled .nav-links .sep { background: rgba(74, 70, 64, 0.18); } /* CTA — solid black pill. Same vertical rhythm as sibling links so it sits flush inside the nav pill without sticking out. */ .nav-cta { background: var(--text-primary) !important; color: #FFFFFF !important; font-weight: 500 !important; padding: 10px 18px !important; } .nav-cta:hover { background: #000000 !important; color: #FFFFFF !important; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle svg { width: 24px; height: 24px; stroke: #FFFFFF; fill: none; stroke-width: 2; transition: stroke 0.3s ease; } .nav-pill.scrolled .nav-toggle svg { stroke: var(--text-primary); } /* ═══════════════════════════════════ 1. HERO (preserved) ═══════════════════════════════════ */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; overflow: hidden; background: var(--dark-obsidian); padding: 0 80px 56px; } .hero-video-wrap { position: absolute; inset: 0; z-index: 0; } .hero-video { width: 100%; height: 100%; object-fit: cover; } .hero-bg { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(26,25,21,0.45) 0%, rgba(26,25,21,0.30) 40%, rgba(26,25,21,0.50) 100%); } .hero-grain { position: absolute; inset: 0; z-index: 1; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; } .hero-content { position: relative; z-index: 2; max-width: 760px; margin-bottom: 14vh; } .hero-eyebrow-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.82); margin-bottom: 22px; } .hero-eyebrow-pill svg { width: 14px; height: 14px; stroke: rgba(255,255,255,0.9); fill: none; stroke-width: 2.2; } .hero h1 { font-family: var(--font-heading); font-size: 64px; font-weight: 700; color: #FFFFFF; letter-spacing: -1.8px; line-height: 1.05; margin-bottom: 20px; } .hero h1 em { font-style: italic; font-weight: 400; color: rgba(255,255,255,0.9); } .hero-sub { font-size: 16px; color: rgba(255,255,255,0.75); max-width: 480px; margin: 0 0 32px; line-height: 1.55; } .hero-actions { display: flex; align-items: center; gap: 12px; } .hero-cta { display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; color: var(--text-primary); font-size: 14px; font-weight: 500; padding: 13px 24px; border-radius: 9999px; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; } .hero-cta:hover { background: #F5F4F2; transform: translateY(-1px); box-shadow: 0 4px 24px rgba(0,0,0,0.15); } .hero-cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; } .hero-cta-secondary { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.9); font-size: 14px; font-weight: 500; padding: 13px 22px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 9999px; backdrop-filter: blur(8px); transition: all 0.25s; } .hero-cta-secondary:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.14); color: #FFFFFF; } .hero-cta-secondary svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; } .hero-stats { position: relative; z-index: 2; display: flex; gap: 40px; padding-top: 24px; } .hero-stat { padding-left: 20px; border-left: 1px solid rgba(255,255,255,0.18); min-width: 180px; } .hero-stat:first-child { padding-left: 0; border-left: none; } .hero-stat-title { font-size: 13px; font-weight: 600; color: #FFFFFF; } .hero-stat-sub { font-size: 12px; color: rgba(255,255,255,0.58); line-height: 1.4; } /* ═══════════════════════════════════ 2. COMPATIBILITY STRIP ═══════════════════════════════════ */ .compat-bar { padding: 36px 0 32px; text-align: center; background: var(--bg); border-bottom: 1px solid var(--border-subtle); } .compat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 24px; } .compat-logos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 56px; } .compat-logo { display: flex; align-items: center; } .compat-logo img { height: 14px; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: 0.55; transition: opacity 0.25s ease; } .compat-logo:hover img { opacity: 0.9; } .compat-logo-text span { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-primary); opacity: 0.55; transition: opacity 0.25s ease; line-height: 1; } .compat-logo-text:hover span { opacity: 0.9; } /* ═══════════════════════════════════ SECTION HEADING ═══════════════════════════════════ */ .section-head { margin-bottom: 64px; max-width: 700px; } .section-head-center { margin-left: auto; margin-right: auto; text-align: center; } .eyebrow { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 16px; padding: 6px 16px; border-radius: 9999px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(74, 70, 64, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .section-head h2 { font-size: 52px; font-weight: 700; letter-spacing: -1.4px; line-height: 1.08; color: var(--text-primary); margin-bottom: 16px; } .section-head h2 em { font-style: italic; font-weight: 400; color: var(--accent); } .section-head p { font-size: 17px; color: var(--text-secondary); line-height: 1.6; max-width: 560px; } .section-head-center p { margin-left: auto; margin-right: auto; } /* ═══════════════════════════════════ 3. BENEFITS ═══════════════════════════════════ */ .benefits { padding: 120px 0; background: var(--surface-1); } .benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; perspective: 1200px; } .benefit-card { position: relative; background: var(--bg); border: 1px solid var(--border-subtle); border-radius: 20px; padding: 36px 32px; transform-style: preserve-3d; transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; will-change: transform; } .benefit-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( 480px circle at var(--mx, 50%) var(--my, 50%), rgba(107, 125, 138, 0.14), transparent 45% ); opacity: 0; transition: opacity 0.3s ease; z-index: 0; } .benefit-card > * { position: relative; z-index: 1; } .benefit-card:hover { border-color: var(--border-default); box-shadow: 0 18px 40px -18px rgba(26, 25, 21, 0.18); } .benefit-card:hover::before { opacity: 1; } .benefit-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--accent-dim); border-radius: 14px; margin-bottom: 24px; } .benefit-icon svg { width: 24px; height: 24px; color: var(--accent); } .benefit-card h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.25; margin-bottom: 10px; } .benefit-card p { font-size: 15px; color: var(--text-tertiary); line-height: 1.6; } /* ═══════════════════════════════════ 4. FEATURES ═══════════════════════════════════ */ .features { padding: 120px 0; background: var(--bg); } .feature-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; perspective: 1400px; } .feature-card--image { grid-column: span 7; } .feature-card--bg { grid-column: span 5; } .feature-card { position: relative; background: var(--surface-2); border: 1px solid rgba(74, 70, 64, 0.04); border-radius: 32px; padding: 40px 36px; min-height: 260px; display: flex; align-items: center; transform-style: preserve-3d; transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; will-change: transform; overflow: hidden; } .feature-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( 520px circle at var(--mx, 50%) var(--my, 50%), rgba(107, 125, 138, 0.14), transparent 45% ); opacity: 0; transition: opacity 0.3s ease; z-index: 0; } .feature-card > * { position: relative; z-index: 1; } .feature-card:hover { border-color: var(--border-default); box-shadow: 0 22px 50px -22px rgba(26, 25, 21, 0.22); } .feature-card:hover::before { opacity: 1; } .feature-card-body { flex: 1; min-width: 0; } /* Image-card variants */ .feature-card--image { padding: 10px; gap: 8px; } .feature-card--image .feature-card-body { padding: 30px 28px; } /* Soft-gradient variant (icon-only cards) — subtle depth without texture */ .feature-card--bg { background: var(--surface-2); border-color: rgba(74, 70, 64, 0.04); } .feature-card-media { flex: 0 0 42%; align-self: stretch; position: relative; overflow: hidden; border-radius: 24px; } .feature-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .feature-card--image:hover .feature-card-media img { transform: scale(1.04); } /* CTAs below grid */ .feature-cta { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 48px; } .btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--text-primary); color: #FFFFFF; font-size: 14px; font-weight: 500; padding: 13px 22px; border-radius: 9999px; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; } .btn-primary:hover { background: #000000; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(26, 25, 21, 0.2); } .btn-primary svg { width: 16px; height: 16px; } .btn-secondary { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-1); color: var(--text-primary); font-size: 14px; font-weight: 500; padding: 13px 22px; border-radius: 9999px; border: 1px solid var(--border-default); transition: border-color 0.2s, background 0.2s; } .btn-secondary:hover { background: var(--surface-2); border-color: var(--border-emphasis, rgba(74, 70, 64, 0.2)); } .feature-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #3a3833 0%, #1a1915 100%); border-radius: 14px; margin-bottom: 20px; box-shadow: 0 4px 14px -4px rgba(26, 25, 21, 0.35), inset 0 1px 0 rgba(255,255,255,0.08); } .feature-icon svg { width: 20px; height: 20px; color: #FFFFFF; } .feature-card h4 { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; margin-bottom: 8px; } .feature-card p { font-size: 14px; color: var(--text-tertiary); line-height: 1.55; } /* ═══════════════════════════════════ 5. PROCESS ═══════════════════════════════════ */ .process { padding: 120px 0; background: var(--surface-1); } .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; } .process-grid::before { content: ''; position: absolute; top: 36px; left: 10%; right: 10%; height: 1px; background: var(--border-default); z-index: 0; } .process-card { position: relative; padding: 0 8px; z-index: 1; } .process-num { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; background: var(--bg); border: 1px solid var(--border-default); border-radius: 9999px; font-family: var(--font-heading); font-size: 20px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; margin-bottom: 28px; } .process-card h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.3; margin-bottom: 10px; } .process-card p { font-size: 15px; color: var(--text-tertiary); line-height: 1.6; max-width: 340px; } /* ═══════════════════════════════════ 6. PROOF / SAMPLE INSIGHT ═══════════════════════════════════ */ .proof { padding: 120px 0; background: var(--bg); } .proof-card { background: var(--dark-obsidian); border-radius: 28px; padding: 72px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; position: relative; overflow: hidden; } .proof-card::before { content: ''; position: absolute; top: 0; right: 0; width: 60%; height: 100%; background: radial-gradient(circle at 70% 50%, rgba(107,125,138,0.18), transparent 60%); pointer-events: none; } .proof-left { position: relative; z-index: 1; } .proof-right { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; } .proof-left .eyebrow { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); } .proof-left h2 { font-size: 36px; font-weight: 600; letter-spacing: -0.8px; line-height: 1.25; color: #FFFFFF; margin-bottom: 20px; } .proof-left h2 em { font-style: italic; font-weight: 400; color: #BFCBD6; } .proof-left p { font-size: 15px; color: rgba(255,255,255,0.65); line-height: 1.65; max-width: 440px; } .proof-stat { padding: 20px 24px; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; background: rgba(255,255,255,0.03); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .proof-stat-num { font-family: var(--font-heading); font-size: 36px; font-weight: 700; letter-spacing: -0.03em; color: #FFFFFF; line-height: 1; } .proof-stat-num span { font-size: 22px; color: rgba(255,255,255,0.55); margin-left: 2px; } .proof-stat-label { font-size: 13px; color: rgba(255,255,255,0.55); text-align: right; max-width: 140px; line-height: 1.4; } /* ═══════════════════════════════════ 7. FAQ ═══════════════════════════════════ */ .faq { padding: 120px 0; background: var(--surface-1); } .faq-container { max-width: 800px; } .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--bg); border: 1px solid var(--border-subtle); border-radius: 16px; transition: border-color 0.25s; } .faq-item.open { border-color: var(--border-default); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; font-family: var(--font-heading); font-size: 17px; font-weight: 500; color: var(--text-primary); background: none; border: none; cursor: pointer; text-align: left; letter-spacing: -0.2px; } .faq-q svg { width: 18px; height: 18px; color: var(--text-tertiary); flex-shrink: 0; transition: transform 0.3s ease; } .faq-item.open .faq-q svg { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-a p { padding: 0 24px 22px; font-size: 15px; color: var(--text-tertiary); line-height: 1.65; } /* ═══════════════════════════════════ 8. CTA ═══════════════════════════════════ */ .cta { padding: 100px 24px; background: var(--bg); } .cta-inner { background: var(--dark-obsidian); border-radius: 28px; padding: 96px 48px; text-align: center; max-width: 1000px; margin: 0 auto; position: relative; overflow: hidden; } .cta-inner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(107,125,138,0.25), transparent 50%), radial-gradient(circle at 80% 80%, rgba(107,125,138,0.18), transparent 50%); pointer-events: none; } .cta-inner h2, .cta-inner p, .cta-inner a { position: relative; z-index: 1; } .cta-inner h2 { font-size: 52px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.08; color: #FFFFFF; margin-bottom: 16px; } .cta-inner h2 em { font-style: italic; font-weight: 400; color: #BFCBD6; } .cta-inner p { font-size: 17px; color: rgba(255,255,255,0.7); max-width: 500px; margin: 0 auto 36px; line-height: 1.6; } .cta-btn { display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; color: var(--text-primary); font-size: 15px; font-weight: 500; padding: 15px 28px; border-radius: 9999px; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; } .cta-btn:hover { background: #F5F4F2; transform: translateY(-1px); box-shadow: 0 6px 28px rgba(0,0,0,0.25); } .cta-btn svg { width: 16px; height: 16px; } /* ═══════════════════════════════════ FOOTER ═══════════════════════════════════ */ /* (Legacy footer CSS removed — replaced by the Footer7 block further down) */ /* ═══════════════════════════════════ RESPONSIVE ═══════════════════════════════════ */ @media (max-width: 1100px) { .proof-card { padding: 56px; gap: 40px; } .proof-left h2 { font-size: 30px; } } @media (max-width: 1024px) { .hero { padding: 0 40px 56px; } .hero h1 { font-size: 52px; } .section-head h2, .cta-inner h2 { font-size: 40px; } .benefit-grid { grid-template-columns: 1fr; gap: 16px; } .process-grid { grid-template-columns: 1fr; gap: 40px; } .process-grid::before { display: none; } .proof-card { grid-template-columns: 1fr; padding: 48px 32px; } .proof-right { flex-direction: row; flex-wrap: wrap; } .proof-stat { flex: 1 1 240px; } } @media (max-width: 768px) { .hero { padding: 0 24px 48px; min-height: 85vh; min-height: 85svh; } .hero h1 { font-size: 40px; letter-spacing: -0.8px; } .hero-sub { font-size: 15px; } .hero-content { margin-bottom: 8vh; } .hero-actions { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; } .hero-actions a { width: 100%; justify-content: center; } .hero-stats { flex-wrap: wrap; gap: 16px 24px; padding-top: 16px; } .hero-stat { min-width: 130px; padding-left: 14px; flex: 1 1 45%; } .hero-eyebrow-pill { font-size: 12px; margin-bottom: 16px; } .nav { width: calc(100% - 24px); top: 12px; } .nav-links { display: none; } .nav-toggle { display: block; } .nav-pill { padding: 10px 10px 10px 16px; } .nav-links.open { display: flex; flex-direction: column; position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: rgba(46, 43, 39, 0.95); backdrop-filter: blur(16px); border-radius: 20px; padding: 12px; gap: 2px; } .nav-links.open a { padding: 12px 16px; } .compat-logos { gap: 32px; } .benefits, .features, .process, .proof, .faq { padding: 80px 0; } .section-head { margin-bottom: 48px; } .section-head h2, .cta-inner h2 { font-size: 34px; letter-spacing: -0.8px; } .feature-grid { grid-template-columns: 1fr; } .feature-card--image { flex-direction: column; } .feature-card--image-right { flex-direction: column; } .feature-card-media { flex: 0 0 200px; width: 100%; } .feature-cta { flex-direction: column; width: 100%; } .feature-cta .btn-primary, .feature-cta .btn-secondary { width: 100%; justify-content: center; } .proof-card { padding: 40px 28px; border-radius: 20px; } .proof-left h2 { font-size: 26px; } .faq-q { font-size: 16px; padding: 18px 20px; } .cta { padding: 64px 16px; } .cta-inner { padding: 64px 28px; border-radius: 20px; } .footer-sections { grid-template-columns: repeat(2, 1fr); gap: 32px; } } @media (max-width: 480px) { .hero { padding: 0 20px 40px; } .hero h1 { font-size: 32px; } .hero-sub { font-size: 14px; } .hero-stats { gap: 14px; } .hero-stat { min-width: 0; flex: 1 1 100%; padding-left: 12px; } .hero-stat:not(:first-child) { padding-top: 14px; padding-left: 0; border-left: none; border-top: 1px solid rgba(255,255,255,0.12); } .section-head h2, .cta-inner h2 { font-size: 28px; } .proof-right { flex-direction: column; } .footer { padding: 80px 0 0; } .footer-sections { grid-template-columns: 1fr; } .footer-description { max-width: 100%; } .compat-logos { gap: 24px 28px; } .compat-logo img { height: 12px; } .compat-logo-text span { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } } /* ═══════════════════════════════════ SECTION UTILITY (from legacy) ═══════════════════════════════════ */ .section-header { margin-bottom: 64px; } .section-header h2 { font-family: var(--font-heading); font-size: 52px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.1; color: var(--text-primary); margin-bottom: 16px; } .section-header p { font-size: 18px; color: var(--text-tertiary); max-width: 560px; line-height: 1.6; } .section-header-center { text-align: center; } .section-header-center p { margin: 0 auto; } /* Shared em style (science + CTA; platform uses its own) */ .section-header h2 em, .cta-section h2 em { font-style: italic; font-weight: 400; } /* Shared showcase label (used by #science and #contact headings) */ .showcase-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } /* ═══════════════════════════════════ PLATFORM — 3D scroll-tilt reveal (21st.dev pattern, vanilla adapt) As user scrolls through the tall container, the dashboard card flips from a 20deg backward tilt to flat, scales 1.05 → 1, and the header translates up. Driven by the --scroll-progress CSS variable (0→1), set by JS scroll listener. ═══════════════════════════════════ */ /* Register the custom property so calc() with units resolves correctly */ @property --scroll-progress { syntax: ''; inherits: true; initial-value: 0; } .platform { --scroll-progress: 0; position: relative; background: radial-gradient(125% 125% at 50% 90%, #FFFFFF 40%, #6B6660 100%); color: var(--text-primary); overflow: hidden; isolation: isolate; } .platform-ambient { position: absolute; inset: -10% -20% -10% -20%; background: radial-gradient(ellipse 55% 45% at 82% 32%, rgba(107,125,138,0.10) 0%, transparent 70%), radial-gradient(ellipse 55% 45% at 16% 74%, rgba(107,143,113,0.08) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* Scroll container — 2-column layout, progress 0→1 as user scrolls through */ .platform-scroll-container { position: relative; z-index: 2; padding: 120px 24px; } .platform-grid { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 64px; align-items: center; max-width: 1200px; margin: 0 auto; } /* LEFT: text column */ .platform-text { max-width: 440px; } .platform-eyebrow { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); padding: 6px 16px; border-radius: 9999px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(74, 70, 64, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin-bottom: 24px; } .platform-heading { font-family: var(--font-heading); font-size: 52px; font-weight: 700; letter-spacing: -1.4px; line-height: 1.08; color: var(--text-primary); margin-bottom: 20px; } .platform-heading em { font-style: italic; font-weight: 400; color: var(--accent); } .platform-lead { font-size: 16px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 28px; } .platform-bullets { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; } .platform-bullets li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-secondary); } .bullet-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(0,0,0,0.03); } /* RIGHT: 3D card wrap (applies perspective) */ .platform-card-wrap { perspective: 1200px; width: 100%; } /* The 3D card — tilts from 20deg → 0deg, scales 1.05 → 1 as progress 0→1 */ .platform-card { position: relative; width: 100%; padding: 8px; background: linear-gradient(180deg, rgba(74,70,64,0.10), rgba(74,70,64,0.04)); border: 1px solid var(--border-default); border-radius: 26px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 9px 20px rgba(26, 25, 21, 0.08), 0 37px 37px rgba(26, 25, 21, 0.06), 0 84px 50px rgba(26, 25, 21, 0.03), 0 149px 60px rgba(26, 25, 21, 0.01); transform-style: preserve-3d; transform-origin: center center; transform: rotateX(calc((1 - var(--scroll-progress)) * 22deg)) scale(calc(1 + (1 - var(--scroll-progress)) * 0.05)); will-change: transform; } .platform-card-inner { background: var(--surface-1); border-radius: 20px; padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 20px; overflow: hidden; box-shadow: 0 2px 8px rgba(26, 25, 21, 0.04); } .platform-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--text-primary); padding: 12px 22px; background: var(--surface-1); border: 1.5px solid var(--border-default); border-radius: 9999px; transition: background 0.2s, border-color 0.2s, transform 0.2s; } .platform-link:hover { background: var(--surface-2); border-color: var(--border-emphasis); transform: translateY(-1px); } .platform-link svg { width: 14px; height: 14px; } /* Canvas header */ .canvas-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--border-subtle); } .canvas-brand { font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--text-primary); } .canvas-live { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); } .canvas-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--semantic-good); box-shadow: 0 0 0 3px rgba(107,143,113,0.22); animation: canvas-pulse 2s ease-in-out infinite; } @keyframes canvas-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(107,143,113,0.22); } 50% { box-shadow: 0 0 0 7px rgba(107,143,113,0.04); } } /* Rings */ .canvas-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .canvas-ring { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 8px 14px; } .canvas-ring svg { width: 112px; height: 112px; overflow: visible; } .ring-track { fill: none; stroke: rgba(74,70,64,0.08); stroke-width: 6; } .ring-arc { fill: none; stroke: var(--arc-color, #6B8F71); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 276; stroke-dashoffset: 276; filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--arc-color) 30%, transparent)); transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.35s; } .platform.visible .ring-arc { stroke-dashoffset: var(--arc-offset); } .ring-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 2px; pointer-events: none; } .ring-value { font-family: var(--font-heading); font-size: 28px; font-weight: 700; letter-spacing: -0.04em; color: var(--text-primary); line-height: 1; } .ring-unit { font-family: var(--font-heading); font-size: 13px; font-weight: 500; color: var(--text-tertiary); } .ring-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); } /* Trend */ .canvas-trend { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 14px; background: var(--bg); border: 1px solid var(--border-subtle); border-radius: 16px; } .trend-header { display: flex; align-items: center; justify-content: space-between; } .trend-label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); } .trend-delta { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--semantic-good); } .trend-svg { width: 100%; height: 72px; display: block; } .trend-area { fill: url(#trendFill); opacity: 0; transition: opacity 1.2s ease 1.3s; } .platform.visible .trend-area { opacity: 1; } .trend-path { fill: none; stroke: var(--semantic-good); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s; } .platform.visible .trend-path { stroke-dashoffset: 0; } /* Stress bars */ .canvas-bars { display: flex; flex-direction: column; gap: 10px; } .canvas-bar { display: flex; align-items: center; gap: 14px; opacity: 0; transform: translateX(-24px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .platform.visible .canvas-bar { opacity: 1; transform: translateX(0); } .platform.visible .canvas-bar:nth-child(1) { transition-delay: 0.75s; } .platform.visible .canvas-bar:nth-child(2) { transition-delay: 0.87s; } .platform.visible .canvas-bar:nth-child(3) { transition-delay: 0.99s; } .platform.visible .canvas-bar:nth-child(4) { transition-delay: 1.11s; } .bar-time { font-family: var(--font-heading); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-tertiary); font-variant-numeric: tabular-nums; width: 42px; flex-shrink: 0; } .bar-body { position: relative; flex: 1; height: 40px; background: var(--bg); border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; } .bar-fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--bar-color) 14%, transparent), color-mix(in srgb, var(--bar-color) 26%, transparent)); border-right: 1.5px solid var(--bar-color); transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .platform.visible .canvas-bar:nth-child(1) .bar-fill { transition-delay: 0.85s; transform: scaleX(1); } .platform.visible .canvas-bar:nth-child(2) .bar-fill { transition-delay: 0.97s; transform: scaleX(1); } .platform.visible .canvas-bar:nth-child(3) .bar-fill { transition-delay: 1.09s; transform: scaleX(1); } .platform.visible .canvas-bar:nth-child(4) .bar-fill { transition-delay: 1.21s; transform: scaleX(1); } .bar-content { position: relative; z-index: 1; height: 100%; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; } .bar-task { font-size: 13px; font-weight: 500; color: var(--text-primary); } .bar-stress { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); } /* Insight */ .canvas-insight { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: linear-gradient(135deg, rgba(107,143,113,0.12), rgba(107,143,113,0.04)); border: 1px solid rgba(107,143,113,0.28); border-radius: 14px; opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease 1.35s, transform 0.7s ease 1.35s; } .platform.visible .canvas-insight { opacity: 1; transform: translateY(0); } .canvas-insight svg { width: 20px; height: 20px; color: var(--semantic-good); flex-shrink: 0; } .canvas-insight span { font-size: 13px; line-height: 1.55; color: var(--text-secondary); } .canvas-insight strong { font-weight: 600; color: var(--text-primary); } /* Text entry animations */ .platform-text > * { opacity: 0; transform: translateY(20px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .platform.visible .platform-text > * { opacity: 1; transform: translateY(0); } .platform.visible .platform-text > *:nth-child(1) { transition-delay: 0.1s; } .platform.visible .platform-text > *:nth-child(2) { transition-delay: 0.2s; } .platform.visible .platform-text > *:nth-child(3) { transition-delay: 0.3s; } .platform.visible .platform-text > *:nth-child(4) { transition-delay: 0.4s; } .platform.visible .platform-text > *:nth-child(5) { transition-delay: 0.5s; } /* ═══════════════════════════════════ MANIFESTO — word-by-word scroll reveal (orbai pattern) Alternating normal/bold weights create typographic rhythm. ═══════════════════════════════════ */ .manifesto { position: relative; padding: 96px 0 112px; background: var(--bg); overflow: hidden; } /* Uses the site's default container max-width (1200px) for alignment with the rest of the site */ .manifesto-eyebrow { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); padding: 6px 16px; border-radius: 9999px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(74, 70, 64, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin-bottom: 28px; } .manifesto-body { position: relative; font-family: var(--font-heading); font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.4px; line-height: 1.35; color: var(--text-primary); margin: 0; } /* Decorative quotation marks — editorial serif-style feel */ .manifesto-body::before, .manifesto-body::after { color: var(--accent); font-family: var(--font-heading); font-weight: 500; line-height: 0; opacity: 0.9; } .manifesto-body::before { content: "\201C"; font-size: 1.6em; margin-right: 0.08em; vertical-align: -0.18em; } .manifesto-body::after { content: "\201D"; font-size: 1.6em; margin-left: 0.04em; vertical-align: -0.18em; } .manifesto-body .word { display: inline-block; color: rgba(74, 70, 64, 0.20); transition: color 0.55s cubic-bezier(0.22, 1, 0.36, 1); margin-right: 0.22em; font-weight: 400; } /* Intentional bolding — only the key noun phrases carry meaning */ .manifesto-body .word-strong { font-weight: 700; } .manifesto-body .word.revealed { color: var(--text-primary); } .manifesto-punch { font-family: var(--font-heading); font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -0.8px; line-height: 1.15; margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 0 0.3em; } .punch-line { display: inline-block; opacity: 0; transform: translateY(14px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); color: var(--text-primary); } .punch-line-accent { color: var(--accent); font-style: italic; font-weight: 400; } .manifesto.visible .punch-line { opacity: 1; transform: translateY(0); } .manifesto.visible .punch-line:nth-child(1) { transition-delay: 0.8s; } .manifesto.visible .punch-line:nth-child(2) { transition-delay: 1.05s; } /* Two-column grid on desktop: text left, dunk image right */ .manifesto-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; align-items: center; } .manifesto-visual { display: none; } @media (min-width: 1024px) { .manifesto-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 72px; } .manifesto-visual { display: block; position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px -20px rgba(26, 25, 21, 0.28), 0 8px 24px -12px rgba(26, 25, 21, 0.18); transform: translateY(0) scale(0.98); opacity: 0; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s ease; transition-delay: 0.4s; } .manifesto.visible .manifesto-visual { transform: translateY(0) scale(1); opacity: 1; } .manifesto-visual img { width: 100%; height: 100%; object-fit: cover; display: block; } .manifesto-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250, 249, 247, 0) 55%, rgba(46, 43, 39, 0.18) 100%); pointer-events: none; } } @media (max-width: 720px) { .manifesto { padding: 64px 0 72px; } .manifesto-eyebrow { margin-bottom: 20px; } .manifesto-punch { margin-top: 28px; } } @media (max-width: 480px) { .manifesto { padding: 56px 0 60px; } .manifesto-body { font-size: 20px; line-height: 1.4; letter-spacing: -0.2px; } .manifesto-body::before, .manifesto-body::after { font-size: 1.4em; } .manifesto-punch { font-size: 24px; margin-top: 24px; letter-spacing: -0.4px; } } /* Bottom radial hairline */ .platform-hairline { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: radial-gradient(50% 50% at 50% 50%, rgba(74,70,64,0.12) 0%, rgba(74,70,64,0) 100%); z-index: 3; } /* Responsive */ @media (max-width: 1100px) { .platform-scroll-container { padding: 96px 20px; } .platform-grid { grid-template-columns: 1fr; gap: 48px; } .platform-text { max-width: 640px; margin: 0 auto; text-align: center; } .platform-bullets { align-items: flex-start; margin-left: auto; margin-right: auto; width: max-content; max-width: 100%; } .platform-card-wrap { max-width: 640px; margin: 0 auto; } .platform-heading { font-size: 44px; } } @media (max-width: 720px) { .platform-scroll-container { padding: 72px 16px; } .platform-card-wrap { perspective: 800px; } .platform-card { /* On mobile, scale on entry only — no tilt (narrow viewports make perspective ugly) */ transform: scale(calc(0.96 + var(--scroll-progress) * 0.04)); border-radius: 22px; } .platform-card-inner { padding: 18px 16px 16px; border-radius: 16px; } .platform-heading { font-size: 36px; letter-spacing: -1px; } .canvas-rings { gap: 4px; } .canvas-ring { padding: 8px 2px 10px; } .canvas-ring svg { width: 84px; height: 84px; } .ring-value { font-size: 20px; } .ring-label { font-size: 10px; } .bar-task { font-size: 12px; } .bar-time { width: 36px; font-size: 10px; } .canvas-insight { padding: 12px 14px; } .canvas-insight span { font-size: 12px; } .canvas-header { padding-bottom: 14px; } } /* ═══════════════════════════════════ HOW IT WORKS — orbai staggered cards ═══════════════════════════════════ */ .how { padding: 72px 0 80px; background: var(--bg); } .how .section-head { margin-bottom: 40px; } .how-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 20px; margin-top: 32px; } .how-card { position: relative; background: var(--surface-2); border: 1px solid rgba(74, 70, 64, 0.04); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(26, 25, 21, 0.04), 0 10px 28px -10px rgba(26, 25, 21, 0.10); transform-style: preserve-3d; will-change: transform; transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1); } /* Magnetic glow — matches .feature-card pattern */ .how-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( 520px circle at var(--mx, 50%) var(--my, 50%), rgba(107, 125, 138, 0.14), transparent 45% ); opacity: 0; transition: opacity 0.3s ease; z-index: 0; } .how-card > * { position: relative; z-index: 1; } .how-card:hover { border-color: var(--border-default); box-shadow: 0 22px 50px -22px rgba(26, 25, 21, 0.22); } .how-card:hover::before { opacity: 1; } .how-card--tall { grid-row: span 2; } .how-card-head { display: flex; flex-direction: column; gap: 12px; } .how-card-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #3a3833 0%, #1a1915 100%); border-radius: 12px; margin-bottom: 4px; box-shadow: 0 4px 14px -4px rgba(26, 25, 21, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .how-card-icon svg { width: 20px; height: 20px; color: #FFFFFF; } .how-card h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.3px; } .how-card p { font-size: 14px; color: var(--text-tertiary); line-height: 1.55; max-width: 420px; } .how-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(74, 70, 64, 0.08); } .how-card-num { font-family: var(--font-heading); font-size: 52px; font-weight: 400; line-height: 1; color: var(--text-primary); letter-spacing: -2px; } .how-card-dots { display: flex; gap: 7px; align-items: center; } .how-card-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-quaternary); opacity: 0.3; } .how-card-dot.active { opacity: 1; background: var(--text-primary); } .how-card-media { position: relative; border-radius: 18px; overflow: hidden; background: var(--surface-3); aspect-ratio: 2 / 1; } .how-card--tall .how-card-media { flex: 1; aspect-ratio: auto; min-height: 280px; background: var(--surface-3); } .how-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .how-card--tall .how-card-media img { object-fit: cover; object-position: center; } .how-card:hover .how-card-media img { transform: scale(1.03); } /* Dashboard mock inside card 03 */ .how-card-mock { background: #FAF9F7; aspect-ratio: auto; padding: 16px 18px 14px; display: block; } .mock-frame { display: flex; flex-direction: column; gap: 10px; height: 100%; } .mock-briefing { display: flex; flex-direction: column; gap: 6px; } .mock-label { font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); } .mock-head { font-family: var(--font-heading); font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--text-primary); letter-spacing: -0.3px; } .mock-head em { font-style: italic; font-weight: 400; color: var(--accent); } .mock-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mock-metric { position: relative; background: #FFFFFF; border-radius: 14px; padding: 10px 6px; text-align: center; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; } .mock-metric-ring { position: relative; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; } .mock-arc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .mock-metric-val { position: relative; font-family: var(--font-heading); font-size: 20px; font-weight: 600; line-height: 1; color: var(--text-primary); letter-spacing: -0.5px; } .mock-metric-label { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 2px; } .mock-timeline { background: #FFFFFF; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } .mock-tl-item { display: flex; align-items: center; gap: 10px; } .mock-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 0 0 4px rgba(74, 70, 64, 0.06); } .mock-tl-body { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; } .mock-tl-time { font-size: 9px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; } .mock-tl-title { font-size: 11px; font-weight: 600; color: var(--text-primary); } @media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; } .how-card--tall { grid-row: auto; } .how-card--tall .how-card-media { min-height: 300px; } } @media (max-width: 480px) { .how { padding: 64px 0 72px; } .how-card { padding: 22px; border-radius: 22px; } .how-card h3 { font-size: 18px; } .how-card p { font-size: 13.5px; } .how-card--tall .how-card-media { min-height: 220px; } .mock-frame { padding: 16px; border-radius: 14px; } } /* ═══════════════════════════════════ SCIENCE — Oura-style Carousel ═══════════════════════════════════ */ .science-section { padding: 120px 0 80px; background: var(--surface-2); } .carousel-wrap { position: relative; padding: 0 0 0 max(24px, calc((100vw - 1200px) / 2 + 24px)); overflow: hidden; } .carousel-track { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 8px 40px 8px 0; scrollbar-width: none; } .carousel-track::-webkit-scrollbar { display: none; } .carousel-card { position: relative; flex: 0 0 380px; height: 520px; border-radius: 24px; overflow: hidden; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; scroll-snap-align: start; cursor: pointer; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .carousel-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26, 25, 21, 0.85) 0%, rgba(26, 25, 21, 0.35) 50%, rgba(26, 25, 21, 0.05) 75%, transparent 100%); z-index: 1; transition: opacity 0.3s ease; } .carousel-card:hover { transform: translateY(-4px); } .carousel-card:hover::before { opacity: 0.95; } .carousel-tag { position: absolute; top: 20px; left: 20px; z-index: 3; display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 100px; padding: 8px 18px 8px 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .carousel-tag img { width: 20px; height: 20px; filter: brightness(0) saturate(0); opacity: 0.65; } .carousel-tag span { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.01em; white-space: nowrap; } .carousel-expand { position: absolute; top: 20px; right: 20px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); transition: background 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .carousel-expand:hover { background: rgba(255, 255, 255, 0.92); transform: scale(1.08); } .carousel-card.is-expanded .carousel-expand { transform: rotate(45deg); background: rgba(255, 255, 255, 0.92); } .carousel-card-bottom { position: relative; z-index: 2; padding: 0 32px 36px; } .carousel-card h3 { margin: 0; font-family: var(--font-heading); font-size: 30px; font-weight: 500; line-height: 1.15; letter-spacing: -0.5px; color: #FFFFFF; } .carousel-card h3 em { font-style: italic; font-weight: 400; } .carousel-desc { margin: 0; max-height: 0; overflow: hidden; opacity: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .carousel-card.is-expanded .carousel-desc { max-height: 160px; opacity: 1; margin-top: 14px; } .carousel-nav { display: flex; justify-content: center; gap: 12px; margin-top: 40px; } .carousel-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border-default); background: var(--surface-1); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; } .carousel-arrow:hover { border-color: var(--text-tertiary); background: var(--surface-hover); } .carousel-arrow:disabled { opacity: 0.35; cursor: not-allowed; } /* ═══════════════════════════════════ FAQ — clean grouped layout ═══════════════════════════════════ */ .faq-section { padding: 120px 0; background: var(--surface-1); } .faq-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1px solid var(--border-subtle); } .faq-header h2 { font-family: var(--font-heading); font-size: 44px; font-weight: 700; letter-spacing: -1px; color: var(--text-primary); line-height: 1.1; margin: 0; } .faq-more { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: 1px solid var(--border-default); border-radius: 9999px; font-size: 13px; font-weight: 500; color: var(--text-primary); background: transparent; white-space: nowrap; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .faq-more:hover { background: var(--text-primary); color: #FFFFFF; border-color: var(--text-primary); transform: translateY(-1px); } .faq-grid { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; } .faq-grid + .faq-grid { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--border-subtle); } .faq-category { font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding-top: 22px; } .faq-section .faq-list { border-top: 1px solid var(--border-subtle); border-radius: 0; } .faq-section .faq-item { background: transparent; border: none; border-bottom: 1px solid var(--border-subtle); border-radius: 0; } .faq-section .faq-q { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 22px 20px; background: none; border: none; cursor: pointer; font-family: var(--font); font-size: 16px; font-weight: 500; color: var(--text-primary); text-align: left; gap: 16px; transition: color 0.2s ease; } .faq-section .faq-item:hover .faq-q, .faq-section .faq-item.open .faq-q { color: var(--accent); } .faq-section .faq-q svg { width: 22px; height: 22px; stroke: var(--text-tertiary); fill: none; stroke-width: 1.5; stroke-linecap: round; flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.2s ease; } .faq-section .faq-item:hover .faq-q svg, .faq-section .faq-item.open .faq-q svg { stroke: var(--accent); } .faq-section .faq-item.open .faq-q svg { transform: rotate(45deg); } .faq-section .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .faq-section .faq-a p { padding: 0 20px 24px; font-size: 15px; color: var(--text-tertiary); line-height: 1.7; max-width: 680px; } @media (max-width: 900px) { .faq-section { padding: 80px 0; } .faq-header { flex-direction: column; align-items: flex-start; gap: 16px; } .faq-header h2 { font-size: 32px; } .faq-grid { grid-template-columns: 1fr; gap: 20px; } .faq-grid + .faq-grid { margin-top: 32px; padding-top: 32px; } .faq-category { padding-top: 0; display: inline-block; padding: 6px 14px; background: var(--accent-dim); border-radius: 999px; letter-spacing: 0.1em; } .faq-section .faq-q { padding: 20px 16px; font-size: 15px; } .faq-section .faq-a p { padding: 0 16px 20px; } } /* ═══════════════════════════════════ CTA — cinematic with image background ═══════════════════════════════════ */ .cta-section { position: relative; padding: 200px 0; text-align: center; overflow: hidden; background: #1A1915; } .cta-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: 0; } .cta-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(26, 25, 21, 0.75) 0%, rgba(26, 25, 21, 0.55) 40%, rgba(26, 25, 21, 0.75) 100%); } .cta-content { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; padding: 0 24px; } .cta-section h2 { font-size: 52px; font-weight: 700; color: #FFFFFF; letter-spacing: -1px; line-height: 1.1; margin-bottom: 16px; } .cta-section h2 em { font-style: italic; font-weight: 400; color: #FFFFFF; } .cta-section p { font-size: 18px; color: rgba(255,255,255,0.5); margin-bottom: 40px; } .cta-section .cta-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #FFFFFF; font-size: 18px; font-weight: 500; padding: 16px 32px; border-radius: 9999px; transition: background 0.2s, transform 0.2s; } .cta-section .cta-btn:hover { background: var(--accent-hover); transform: scale(1.03); } .cta-section .cta-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.5; } /* Pilot intake form — glass panel on dark CTA */ .cta-form { max-width: 560px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 18px; padding: 32px; background: rgba(20, 19, 16, 0.55); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } .cta-form-hp { position: absolute; left: -9999px; } .cta-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cta-form-field { display: flex; flex-direction: column; gap: 6px; } .cta-form-field label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); } .cta-form-field input, .cta-form-field select { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: #FFFFFF; background: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(255, 255, 255, 0.22); border-radius: 12px; padding: 13px 14px; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; appearance: none; -webkit-appearance: none; } .cta-form-field select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; } .cta-form-field select option { color: var(--text-primary); background: #FFFFFF; } .cta-form-field input::placeholder { color: rgba(255, 255, 255, 0.5); } .cta-form-field input:hover, .cta-form-field select:hover { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.10); } .cta-form-field input:focus, .cta-form-field select:focus { outline: none; border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); } .cta-btn-submit { align-self: center; margin-top: 8px; border: none; cursor: pointer; font-family: var(--font-body); } .cta-form-fineprint { text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.6) !important; margin: 4px 0 0 !important; line-height: 1.5; } @media (max-width: 600px) { .cta-form-row { grid-template-columns: 1fr; } .cta-form { padding: 24px 20px; gap: 14px; border-radius: 16px; } /* Prevent iOS Safari from zooming on focus (requires 16px+ input text) */ .cta-form-field input, .cta-form-field select { font-size: 16px; padding: 12px 14px; } .cta-section { padding: 96px 0 104px; } .cta-section h2 { font-size: 32px; letter-spacing: -0.6px; } .cta-section p { font-size: 15px; margin-bottom: 28px; } } .cta-success { max-width: 480px; margin: 0 auto; text-align: center; padding: 32px 24px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 20px; } .cta-success-icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: rgba(107,143,113,0.18); color: #9BC2A1; display: flex; align-items: center; justify-content: center; } .cta-success-icon svg { width: 26px; height: 26px; } .cta-success h3 { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: #FFFFFF; letter-spacing: -0.4px; margin-bottom: 6px; } .cta-success p { font-size: 15px !important; color: rgba(255,255,255,0.7) !important; margin: 0 !important; } /* ═══════════════════════════════════ FOOTER — multi-column grid (legacy) ═══════════════════════════════════ */ /* ═══════════════════════════════════ FOOTER — Footer7 layout, light mode Left: brand + description + socials. Right: 3 link sections in a grid. Divider + copyright/legal row below. ═══════════════════════════════════ */ .footer { background: var(--bg); padding: 128px 0 0; border-top: none; } .footer-top { display: flex; flex-direction: column; gap: 40px; padding-bottom: 32px; text-align: left; } @media (min-width: 1024px) { .footer-top { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 80px; } } /* LEFT — brand column */ .footer-brand { display: flex; flex-direction: column; gap: 24px; flex: 1; min-width: 0; } .footer-brand-logo { display: inline-flex; align-items: center; text-decoration: none; } .footer-brand-logo img { height: 28px; width: auto; display: block; } @media (min-width: 1024px) { .footer-brand-logo img { height: 36px; } } .footer-description { font-size: 14px; line-height: 1.6; color: var(--text-tertiary); max-width: 70%; margin: 0; } .footer-socials { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 24px; } .footer-socials a { display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-weight: 500; transition: color 0.2s ease; } .footer-socials a:hover { color: var(--accent); } .footer-socials svg { width: 20px; height: 20px; } /* RIGHT — 3 link sections */ .footer-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; flex: 1; width: 100%; } @media (min-width: 1024px) { .footer-sections { gap: 80px; max-width: 640px; } } .footer-section h3 { font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0 0 16px; letter-spacing: -0.1px; } .footer-section ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .footer-section ul a { font-size: 14px; font-weight: 500; color: var(--text-tertiary); transition: color 0.2s ease; } .footer-section ul a:hover { color: var(--accent); } /* Bottom divider + copyright / legal links */ .footer-bottom { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; margin-top: 32px; padding: 32px 0; border-top: 1px solid var(--border-default); font-size: 12px; font-weight: 500; color: var(--text-tertiary); text-align: left; } @media (min-width: 768px) { .footer-bottom { flex-direction: row; align-items: center; } } .footer-copyright { order: 2; margin: 0; } @media (min-width: 768px) { .footer-copyright { order: 1; } } .footer-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; order: 1; } @media (min-width: 768px) { .footer-legal { flex-direction: row; gap: 24px; order: 2; } } .footer-legal a { color: var(--text-tertiary); transition: color 0.2s ease; } .footer-legal a:hover { color: var(--accent); } /* ═══════════════════════════════════ MERGED LAYOUT — responsive ═══════════════════════════════════ */ @media (max-width: 1024px) { .section-header h2, .showcase-header h2, .faq-header h2, .cta-section h2 { font-size: 40px; } .dashboard-wrap { flex-direction: column; } .dash-sidebar-widget { width: 100%; } .faq-grid { grid-template-columns: 1fr; gap: 16px; } .carousel-card { flex: 0 0 320px; height: 460px; } } @media (max-width: 768px) { .carousel-card { flex: 0 0 260px; height: 380px; } .carousel-card h3 { font-size: 22px; } .carousel-card-bottom { padding: 0 24px 28px; } .science-section { padding: 80px 0 60px; } .carousel-wrap { padding-left: 20px; } .faq-header { flex-direction: column; gap: 16px; } .cta-section { padding: 120px 0; } .cta-section h2 { font-size: 36px; } } /* ═══════════════════════════════════ 3.5 PIN SECTION — Full-bleed, sticky, 3 beats (superpower-style) ═══════════════════════════════════ */ .pin-section { position: relative; background: #000; } .pin-track { position: relative; /* Each beat takes 100vh of scroll; 3 beats = 300vh total */ height: 300vh; } .pin-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: #fff; } /* Full-bleed crossfading backgrounds */ .pin-bg { position: absolute; inset: 0; z-index: 0; } .pin-bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.04); transition: opacity 0.9s ease, transform 1.6s ease; will-change: opacity, transform; } .pin-bg-img.is-active { opacity: 1; transform: scale(1); } .pin-bg-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.55) 100%), linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0) 100%); pointer-events: none; } /* Foreground layout */ .pin-stage > .pin-left, .pin-stage > .pin-right { position: absolute; z-index: 2; } .pin-left { left: clamp(32px, 6vw, 96px); right: auto; bottom: 48px; top: auto; max-width: min(560px, 46vw); /* Grid stack — all slides occupy the same cell; container sizes to tallest */ display: grid; grid-template-areas: "stack"; } .pin-right { right: clamp(32px, 6vw, 96px); top: 50%; transform: translateY(-50%); } /* Each slide is a self-contained column (copy + accordion). Slides stack in the same grid cell and crossfade on beat change. */ .pin-slide { grid-area: stack; display: flex; flex-direction: column; gap: 28px; opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.6s ease; pointer-events: none; } .pin-slide.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .pin-slide-copy { display: flex; flex-direction: column; } .pin-eyebrow { font-family: var(--font, 'Inter', system-ui, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 18px; } .pin-slide h2 { font-family: var(--font-heading, 'Space Grotesk', system-ui, sans-serif); font-size: clamp(36px, 4.4vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -1.2px; color: #fff; margin: 0 0 18px; } .pin-slide h2 em { font-style: italic; font-weight: 400; color: rgba(255,255,255,0.82); } .pin-slide p { font-family: var(--font, 'Inter', system-ui, sans-serif); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 460px; margin: 0; } /* Accordion — dark glass pills (superpower.com style) */ .pin-acc { display: flex; flex-direction: column; gap: 10px; max-width: 440px; } .pin-acc-item { background: rgba(20,20,20,0.55); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; transition: background 0.25s ease, border-color 0.25s ease; } .pin-acc-item:hover { background: rgba(30,30,30,0.65); border-color: rgba(255,255,255,0.14); } .pin-acc-item.open { background: rgba(30,30,30,0.7); border-color: rgba(255,255,255,0.18); } .pin-acc-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: none; border: none; cursor: pointer; font-family: var(--font, 'Inter', system-ui, sans-serif); font-size: 14px; font-weight: 500; color: #fff; text-align: left; } .pin-acc-q svg { width: 18px; height: 18px; flex-shrink: 0; color: rgba(255,255,255,0.7); transition: transform 0.3s ease, color 0.2s ease; } .pin-acc-item.open .pin-acc-q svg { transform: rotate(45deg); color: #fff; } .pin-acc-a { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .pin-acc-a p { padding: 0 18px 16px; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.75); margin: 0; } /* Right-side numbered list */ .pin-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; text-align: right; } .pin-nav-item { display: flex; align-items: baseline; justify-content: flex-end; gap: 18px; padding: 8px 0; font-family: var(--font, 'Inter', system-ui, sans-serif); color: rgba(255,255,255,0.5); cursor: pointer; border-right: 2px solid transparent; padding-right: 16px; transition: color 0.25s ease, border-color 0.25s ease; } .pin-nav-item:hover { color: rgba(255,255,255,0.85); } .pin-nav-item.is-active { color: #fff; border-right-color: #fff; } .pin-nav-label { font-size: 14px; font-weight: 500; letter-spacing: -0.1px; } .pin-nav-num { font-family: var(--font-heading, 'Space Grotesk', system-ui, sans-serif); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: inherit; opacity: 0.7; min-width: 22px; text-align: right; } /* Tablet */ @media (max-width: 1100px) { .pin-left { max-width: min(520px, 60vw); } .pin-right { display: none; } /* numbered list hides on smaller screens */ } /* Mobile */ @media (max-width: 760px) { .pin-track { height: 320vh; } .pin-stage { color: #fff; } .pin-left { left: 20px; right: 20px; bottom: 24px; max-width: none; } .pin-slide { gap: 20px; } .pin-slide h2 { font-size: 32px; letter-spacing: -0.6px; } .pin-slide p { font-size: 14px; } .pin-acc-q { font-size: 13.5px; padding: 12px 14px; } .pin-acc-a p { font-size: 13px; padding: 0 14px 14px; } } @media (max-width: 480px) { .pin-slide h2 { font-size: 28px; letter-spacing: -0.4px; } .pin-slide p { font-size: 13.5px; line-height: 1.55; } .pin-acc { gap: 8px; } .pin-acc-q { font-size: 13px; padding: 11px 12px; gap: 12px; } .pin-acc-q span { min-width: 0; } .pin-acc-a p { font-size: 12.5px; padding: 0 12px 12px; line-height: 1.55; } } @media (prefers-reduced-motion: reduce) { .pin-bg-img, .pin-slide { transition: opacity 0.01ms; transform: none; } } /* ═══════════════════════════════════ 6. CLIENTS — "What participants say" (orbai-style) ═══════════════════════════════════ */ .clients { padding: 120px 0; background: var(--bg); } .clients-header { text-align: center; max-width: 720px; margin: 0 auto 64px; } .clients-eyebrow { display: inline-block; padding: 6px 16px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(74, 70, 64, 0.08); border-radius: 9999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--font, 'Inter', system-ui, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 28px; } .clients-header h2 { font-family: var(--font-heading, 'Space Grotesk', system-ui, sans-serif); font-size: clamp(44px, 5.4vw, 68px); font-weight: 700; line-height: 1.02; letter-spacing: -1.8px; color: var(--text-primary); margin: 0 0 20px; } .clients-header h2 em { font-style: italic; font-weight: 400; color: var(--accent); /* Soft Slate blue */ } .clients-header p { font-family: var(--font, 'Inter', system-ui, sans-serif); font-size: 16px; line-height: 1.6; color: var(--text-tertiary); max-width: 540px; margin: 0 auto; } /* Hero row: quote + image */ .clients-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .client-quote-card, .client-image-card { position: relative; background: var(--surface-2); border: 1px solid rgba(74, 70, 64, 0.04); border-radius: 24px; overflow: hidden; box-shadow: 0 2px 24px rgba(26, 25, 21, 0.05), 0 1px 3px rgba(26, 25, 21, 0.04); transform-style: preserve-3d; will-change: transform; transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; } .client-quote-card:hover, .client-image-card:hover { border-color: var(--border-default); box-shadow: 0 22px 50px -22px rgba(26, 25, 21, 0.22); } .client-quote-card { padding: 56px 56px 48px; display: flex; align-items: center; justify-content: center; } .client-quote-card blockquote { margin: 0; font-family: var(--font-heading, 'Space Grotesk', system-ui, sans-serif); font-size: clamp(22px, 2vw, 28px); font-weight: 500; line-height: 1.45; letter-spacing: -0.4px; color: var(--text-primary); text-align: center; max-width: 520px; } /* Per-word scroll reveal (orbai pattern): Words start at the same muted gray and transition to text-primary as they cross the middle of the viewport. Words inside .q-em stay muted after the reveal, creating the lighter "highlighted phrase" emphasis. */ .client-quote-card .q-word { color: rgba(74, 70, 64, 0.22); transition: color 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .client-quote-card .q-word.revealed { color: var(--text-primary); } .client-quote-card .q-em .q-word.revealed { color: var(--text-tertiary); } .client-image-card { padding: 0; min-height: 380px; display: block; position: relative; } .client-image-card img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; } /* 3 small testimonial cards */ .clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px; } .client-card { position: relative; background: var(--surface-2); border: 1px solid rgba(74, 70, 64, 0.04); border-radius: 20px; padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 28px; overflow: hidden; box-shadow: 0 2px 16px rgba(26, 25, 21, 0.04), 0 1px 2px rgba(26, 25, 21, 0.03); transform-style: preserve-3d; will-change: transform; transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; } .client-card:hover { border-color: var(--border-default); box-shadow: 0 22px 50px -22px rgba(26, 25, 21, 0.22); } /* Magnetic glow — mirrors .feature-card pattern. Radial gradient tracks the mouse via --mx/--my (set by JS in initCardTilt). */ .client-quote-card::before, .client-card::before, .client-image-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( 520px circle at var(--mx, 50%) var(--my, 50%), rgba(107, 125, 138, 0.14), transparent 45% ); opacity: 0; transition: opacity 0.3s ease; z-index: 0; } /* For the image card, lift the glow above the photo so it's visible */ .client-image-card::before { z-index: 2; } .client-quote-card > *, .client-card > * { position: relative; z-index: 1; } .client-quote-card:hover::before, .client-card:hover::before, .client-image-card:hover::before { opacity: 1; } .client-quote { font-family: var(--font, 'Inter', system-ui, sans-serif); font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0; flex: 1; } .client-meta { display: flex; align-items: center; gap: 12px; } .client-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); display: grid; place-items: center; font-family: var(--font-heading, 'Space Grotesk', system-ui, sans-serif); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; flex-shrink: 0; } .client-name { font-family: var(--font, 'Inter', system-ui, sans-serif); font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.3; } .client-role { font-family: var(--font, 'Inter', system-ui, sans-serif); font-size: 12.5px; color: var(--text-tertiary); line-height: 1.3; margin-top: 2px; } /* Stats row */ .clients-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 32px; border-top: 1px solid var(--border-subtle); } .client-stat { text-align: center; padding: 12px 8px; } .stat-num { font-family: var(--font-heading, 'Space Grotesk', system-ui, sans-serif); font-size: clamp(40px, 4vw, 56px); font-weight: 700; letter-spacing: -1.5px; color: var(--text-primary); line-height: 1; margin-bottom: 10px; } .stat-label { font-family: var(--font, 'Inter', system-ui, sans-serif); font-size: 13px; color: var(--text-tertiary); line-height: 1.4; max-width: 240px; margin: 0 auto; } /* Tablet */ @media (max-width: 1100px) { .clients { padding: 100px 0; } .clients-hero { grid-template-columns: 1fr; } .client-image-card { min-height: 320px; } .client-quote-card { padding: 44px 36px; } .clients-grid { grid-template-columns: 1fr; } } /* Mobile */ @media (max-width: 600px) { .clients { padding: 80px 0; } .clients-header { margin-bottom: 48px; } .clients-header h2 { font-size: 40px; letter-spacing: -1px; } .clients-hero, .clients-grid, .clients-stats { gap: 14px; } .client-quote-card { padding: 32px 24px; } .client-quote-card blockquote { font-size: 20px; } .client-image-card { min-height: 260px; border-radius: 20px; } .client-card { padding: 24px; border-radius: 16px; } .clients-stats { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; } } /* Preview-mode filename label */ .pin-filelabel { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(20,20,20,0.55); border: 1px solid rgba(255,255,255,0.10); border-radius: 999px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-family: var(--font, 'Inter', system-ui, sans-serif); font-size: 12px; color: rgba(255,255,255,0.9); letter-spacing: 0.02em; white-space: nowrap; pointer-events: none; } .pin-filelabel-count { font-weight: 600; color: rgba(255,255,255,0.7); letter-spacing: 0.08em; } .pin-filelabel-count::after { content: "·"; margin-left: 10px; color: rgba(255,255,255,0.35); } .pin-filelabel-name { font-family: var(--font-mono, ui-monospace, 'SF Mono', monospace); font-weight: 500; color: #fff; }