/* ══════════════════════════════════════════════════════════ FrameLock Landing — styles.css Neo-Cine design system ══════════════════════════════════════════════════════════ */ /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Tokens ── */ :root { --fl-bg: #0E1116; --fl-surface: #171C24; --fl-surface-hi: #1D2430; --fl-border: #2A3342; --fl-border-hover: #3D4A5C; --fl-text: #F2F4F8; --fl-muted: #97A0AF; --fl-placeholder: #6E7D95; --fl-accent: #F03000; --fl-accent-hover: #FF4A1F; --fl-accent-press: #C82800; --fl-success: #3B8D62; --fl-error: #CC3355; --fl-radius: 8px; --fl-max-w: 1200px; --fl-pad: 40px; --fl-pad-mobile: 20px; --fl-font-display: 'Space Grotesk', system-ui, sans-serif; --fl-font-body: 'Inter', system-ui, sans-serif; --fl-shadow-raised: 0 8px 16px rgba(0, 0, 0, 0.32), 0 -2px 8px rgba(255, 248, 240, 0.09); --fl-shadow-raised-hover: 0 14px 28px rgba(0, 0, 0, 0.38), 0 -4px 12px rgba(255, 248, 240, 0.12); --fl-shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 2px rgba(255, 248, 240, 0.06); --fl-shadow-inset-focus: inset 0 2px 5px rgba(0, 0, 0, 0.30), inset 0 -1px 3px rgba(255, 248, 240, 0.08); --fl-radius-card: 10px; } /* ── Font faces ── */ @font-face { font-family: 'Space Grotesk'; src: url('assets/fonts/SpaceGrotesk-SemiBold.0640890476.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('assets/fonts/SpaceGrotesk-Bold.0640890476.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Inter'; src: url('assets/fonts/Inter-Regular.3100e775e8.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Inter'; src: url('assets/fonts/Inter-Medium.3100e775e8.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Inter'; src: url('assets/fonts/Inter-SemiBold.3100e775e8.woff2') format('woff2'); font-weight: 600; font-display: swap; } /* JetBrains Mono for timecodes and scene IDs */ @font-face { font-family: 'JetBrains Mono'; src: local('JetBrains Mono'), url('assets/fonts/JetBrainsMono-Regular.14425ba9c6.woff2') format('woff2'); font-weight: 400; font-display: swap; } /* ── Base ── */ /* scroll-behavior: smooth removed — JS handles smooth scrolling for anchor links. CSS smooth-scroll on causes mobile browsers to visibly animate their own scroll corrections (address bar, keyboard), creating a jump-back sensation. */ /* clip (not hidden) on html — prevents horizontal overflow from ticker/film-strip tracks without creating a new scroll container (which hidden does on iOS). */ html { overflow-x: clip; } body { overflow-x: hidden; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--fl-bg); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--scroll-grad, 180deg), var(--fl-accent) 0%, var(--fl-border) 100%); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--scroll-grad, 180deg), var(--fl-accent-hover) 0%, var(--fl-border-hover) 100%); } body { font-family: var(--fl-font-body); background: var(--fl-bg); color: var(--fl-text); line-height: 1.6; -webkit-font-smoothing: antialiased; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } a { color: inherit; text-decoration: none; } button, a { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* ── Accessibility ── */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 200; padding: 8px 16px; background: var(--fl-accent); color: var(--fl-bg); border-radius: 0 0 var(--fl-radius) var(--fl-radius); font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: top 0.2s ease; } .skip-link:focus { top: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Nav ── */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(14, 17, 22, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(42, 51, 66, 0.3); transition: background-color 0.3s ease, box-shadow 0.3s ease; } .header-scrolled { background: rgba(14, 17, 22, 0.88); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); } .nav-inner { max-width: var(--fl-max-w); margin: 0 auto; padding: 0 var(--fl-pad); height: 64px; display: flex; align-items: center; justify-content: space-between; } .logo { display: inline-flex; align-items: center; } .logo-img { height: 40px; width: auto; } .nav-links { display: flex; gap: 32px; align-items: center; } .nav-links a { font-size: 14px; color: var(--fl-muted); transition: color 0.2s; min-height: 44px; display: inline-flex; align-items: center; } .nav-links a:hover { color: var(--fl-text); } /* ── Mobile nav toggle — cinematic transport button ── */ .nav-toggle { display: none; background: var(--fl-surface-hi); border: 1px solid var(--fl-border); border-radius: 8px; width: 44px; height: 44px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 248, 240, 0.05); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .nav-toggle:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 -1px 2px rgba(255, 248, 240, 0.04); } .nav-toggle[aria-expanded="true"] { border-color: rgba(240, 48, 0, 0.3); box-shadow: 0 0 12px rgba(240, 48, 0, 0.08), inset 0 1px 0 rgba(255, 248, 240, 0.05); } .nav-toggle-bar { display: block; width: 18px; height: 2px; background: var(--fl-text); border-radius: 1px; transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: var(--fl-accent); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(4px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: translateY(-4px) rotate(-45deg); } .nav-links .nav-cta { background: linear-gradient(180deg, #FF3A0A 0%, #D02800 100%); color: #fff; padding: 10px 28px; border-radius: 9999px; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; min-height: 44px; gap: 8px; border: 1px solid rgba(255, 130, 90, 0.15); box-shadow: 0 0 16px rgba(240, 48, 0, 0.20), 0 3px 10px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* Mini rec-dot for nav CTA */ .nav-links .nav-cta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #fff 40%, rgba(255, 210, 190, 0.6) 70%, transparent 100%); box-shadow: 0 0 4px rgba(255, 255, 255, 0.5), 0 0 0 1.5px rgba(0, 0, 0, 0.25); flex-shrink: 0; animation: rec-pulse 2.4s ease-in-out infinite; } .nav-links .nav-cta:hover { background: linear-gradient(180deg, #FF4F20 0%, #E03000 100%); box-shadow: 0 0 24px rgba(240, 48, 0, 0.30), 0 5px 16px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22); transform: translateY(-1px); } /* ── Buttons — Director's Transport Controls ── */ /* Pill-shaped, neumorphic depth, cinema-camera tactile feel */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; position: relative; /* Cinematic gradient — machined red, not flat fill */ background: linear-gradient(180deg, #FF3A0A 0%, #D02800 100%); color: #fff; padding: 16px 40px; border-radius: 9999px; /* pill — transport-bar geometry */ font-family: var(--fl-font-body); font-weight: 600; font-size: 16px; letter-spacing: 0.02em; line-height: 1; min-height: 54px; /* Machined-edge light catch */ border: 1px solid rgba(255, 130, 90, 0.18); cursor: pointer; /* Neumorphic depth: glow + drop shadow + inner highlight + inner base */ box-shadow: 0 0 24px rgba(240, 48, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -1px 0 rgba(0, 0, 0, 0.15); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* Tally / record indicator — cinema camera rec light w/ housing ring */ .btn-primary::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #fff 35%, rgba(255, 210, 190, 0.7) 65%, transparent 100%); box-shadow: 0 0 6px rgba(255, 255, 255, 0.6), 0 0 14px rgba(240, 48, 0, 0.35), 0 0 0 2.5px rgba(0, 0, 0, 0.3), 0 0 0 3.5px rgba(255, 130, 90, 0.12); flex-shrink: 0; animation: rec-pulse 2.4s ease-in-out infinite; } @keyframes rec-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(255,255,255,0.6), 0 0 14px rgba(240,48,0,0.35), 0 0 0 2.5px rgba(0,0,0,0.3), 0 0 0 3.5px rgba(255,130,90,0.12); } 50% { opacity: 0.5; box-shadow: 0 0 3px rgba(255,255,255,0.3), 0 0 8px rgba(240,48,0,0.2), 0 0 0 2.5px rgba(0,0,0,0.3), 0 0 0 3.5px rgba(255,130,90,0.08); } } .btn-primary:hover { background: linear-gradient(180deg, #FF4F20 0%, #E03000 100%); border-color: rgba(255, 150, 100, 0.25); box-shadow: 0 0 36px rgba(240, 48, 0, 0.35), 0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .btn-primary:active { /* Pressed inset — physically depressed like a hardware button */ background: linear-gradient(180deg, #B82200 0%, #9C1F00 100%); border-color: rgba(255, 100, 60, 0.10); box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.50), inset 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 4px rgba(240, 48, 0, 0.12); transform: translateY(1px); text-shadow: none; } .btn-primary:focus-visible { outline: 2px solid rgba(240, 48, 0, 0.7); outline-offset: 3px; } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; filter: saturate(0.5); } .btn-primary:disabled::before { animation: none; opacity: 0.3; } /* Secondary — frosted console control w/ transport arrow reveal */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative; background: rgba(23, 28, 36, 0.65); color: var(--fl-text); padding: 16px 40px; border-radius: 9999px; /* pill to match primary */ font-family: var(--fl-font-body); font-weight: 500; font-size: 16px; letter-spacing: 0.02em; line-height: 1; min-height: 54px; /* Machined edge — subtle light catch on top */ border: 1px solid rgba(151, 160, 175, 0.12); cursor: pointer; /* Neumorphic depth + frosted glass */ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 248, 240, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.10); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* Transport arrow — reveals on hover like a play-head indicator. Positioned absolutely so it doesn't shift the centered text at rest. */ .btn-secondary::after { content: '→'; position: absolute; right: 20px; font-size: 15px; opacity: 0; transform: translateX(-6px); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .btn-secondary:hover { background: rgba(29, 36, 48, 0.75); border-color: rgba(151, 160, 175, 0.22); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 248, 240, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .btn-secondary:hover::after { opacity: 0.65; transform: translateX(0); } .btn-secondary:active { background: rgba(14, 17, 22, 0.8); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.40), inset 0 1px 2px rgba(0, 0, 0, 0.25); transform: translateY(1px); border-color: rgba(151, 160, 175, 0.08); } /* .btn-loading relies on [hidden] attribute toggled by JS */ .btn-loading:not([hidden]) { display: inline; } /* ── Sections (shared) ── */ section, .section-wrap { max-width: var(--fl-max-w); margin: 0 auto; padding: 120px var(--fl-pad); } .section-label { font-family: var(--fl-font-body); font-size: 13px; font-weight: 600; color: var(--fl-accent); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 24px; display: flex; align-items: center; gap: 14px; } .section-label::before { content: ''; width: 32px; height: 2px; background: linear-gradient(90deg, var(--fl-accent), rgba(240, 48, 0, 0.3)); border-radius: 1px; } .section-heading { font-family: var(--fl-font-display); font-size: clamp(36px, 4.5vw, 56px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; max-width: 720px; } .section-sub { font-size: 19px; color: var(--fl-muted); margin-top: 20px; max-width: 580px; line-height: 1.7; } /* ── Hero ── */ .hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 140px var(--fl-pad) 100px; position: relative; overflow: hidden; background: radial-gradient(ellipse 70% 50% at 50% 15%, rgba(240, 48, 0, 0.10) 0%, transparent 55%), radial-gradient(ellipse 50% 35% at 30% 55%, rgba(240, 48, 0, 0.04) 0%, transparent 50%), radial-gradient(ellipse 40% 30% at 70% 65%, rgba(255, 106, 64, 0.03) 0%, transparent 50%); } /* Ambient gradient mesh — single element, stacked radial-gradients, one animation */ .hero-mesh { position: absolute; inset: -10%; pointer-events: none; z-index: 0; background: radial-gradient(circle 400px at 10% 15%, rgba(240, 48, 0, 0.05) 0%, transparent 50%), radial-gradient(circle 280px at 90% 80%, rgba(255, 106, 64, 0.04) 0%, transparent 50%), radial-gradient(circle 210px at 55% 35%, rgba(240, 48, 0, 0.03) 0%, transparent 50%); animation: mesh-drift 15s ease-in-out infinite alternate; animation-play-state: var(--hero-anim-state, running); } @keyframes mesh-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(30px, 20px) scale(1.08); } } /* ── Film grain overlay — lightweight CSS noise ── */ .hero::before { content: ''; position: absolute; inset: 0; /* Replaced SVG feTurbulence (CPU-rendered) with a tiny repeating gradient noise */ background-image: repeating-conic-gradient(rgba(255,255,255,0.008) 0% 25%, transparent 0% 50%); background-size: 3px 3px; pointer-events: none; z-index: 0; opacity: 0.5; } /* ── Viewfinder crosshair ── */ .hero::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1060px, 90vw); height: min(560px, 65vh); border: 1px solid rgba(240, 48, 0, 0.06); border-radius: 4px; pointer-events: none; z-index: 0; } .hero > *:not(.hero-mesh):not(.hero-glow):not(.hero-vf) { position: relative; z-index: 1; } /* ── Viewfinder overlay ── */ .hero-vf { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1100px, 92vw); height: min(600px, 70vh); pointer-events: none; z-index: 0; } .vf-corner { position: absolute; width: 32px; height: 32px; border-color: rgba(240, 48, 0, 0.25); border-style: solid; border-width: 0; transition: border-color 0.6s ease; } .hero:hover .vf-corner { border-color: rgba(240, 48, 0, 0.45); } .vf-tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; } .vf-tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; } .vf-bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; } .vf-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; } .vf-timecode { position: absolute; bottom: -28px; right: 0; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 11px; letter-spacing: 0.06em; color: rgba(240, 48, 0, 0.35); font-variant-numeric: tabular-nums; animation: tc-blink 4s ease-in-out infinite; } @keyframes tc-blink { 0%, 80%, 100% { opacity: 1; } 90% { opacity: 0.3; } } /* ── Viewfinder crosshair lines ── */ .hero-vf::before, .hero-vf::after { content: ''; position: absolute; background: rgba(240, 48, 0, 0.06); } .hero-vf::before { top: 50%; left: 0; right: 0; height: 1px; } .hero-vf::after { left: 50%; top: 0; bottom: 0; width: 1px; } /* ── Lock icon in comparison ── */ .lock-icon { width: 14px; height: 14px; margin-right: 6px; vertical-align: -1px; flex-shrink: 0; color: var(--fl-success); } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; background: var(--fl-surface); border: 1px solid rgba(42, 51, 66, 0.3); border-radius: 9999px; font-size: 13px; font-weight: 500; color: var(--fl-muted); margin-bottom: 40px; box-shadow: var(--fl-shadow-raised); letter-spacing: 0.02em; } .hero-badge .dot { width: 8px; height: 8px; background: var(--fl-accent); border-radius: 50%; box-shadow: 0 0 8px rgba(240, 48, 0, 0.6); animation: rec-pulse 2s ease-in-out infinite; } @keyframes rec-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(240, 48, 0, 0.6); } 50% { opacity: 0.4; box-shadow: 0 0 4px rgba(240, 48, 0, 0.3); } } .hero h1 { font-family: var(--fl-font-display); font-size: clamp(52px, 7.5vw, 88px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.0; max-width: 960px; } .hero h1 em { font-style: normal; background: linear-gradient( 135deg, #F03000 0%, #FF6A40 40%, #FFB088 55%, #FF6A40 70%, #F03000 100% ); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer-text 6s ease-in-out infinite; } @keyframes shimmer-text { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero p.hero-sub { margin-top: 32px; font-size: 21px; color: var(--fl-muted); max-width: 600px; line-height: 1.7; } .hero-actions { margin-top: 48px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } .hero-qualifier { margin-top: 24px; font-size: 12px; color: var(--fl-placeholder); letter-spacing: 0.08em; text-transform: uppercase; } /* Hero entrance choreography */ .hero-badge { animation: hero-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; } .hero h1 { animation: hero-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; } .hero .hero-sub { animation: hero-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; } .hero .hero-actions { animation: hero-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; } .hero .hero-qualifier { animation: hero-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both; } .hero .hero-vf { animation: hero-vf-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both; } @keyframes hero-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes hero-vf-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* ── Logo bar ── */ .logos-bar { border-top: 1px solid var(--fl-border); border-bottom: 1px solid var(--fl-border); padding: 48px var(--fl-pad); text-align: center; position: relative; background: var(--fl-surface); } .logos-bar p { font-size: 13px; color: var(--fl-muted); margin-bottom: 32px; } .logos-row { display: flex; justify-content: center; align-items: center; gap: 64px; flex-wrap: wrap; max-width: var(--fl-max-w); margin: 0 auto; } .logo-placeholder { display: block; width: 80px; height: 24px; border-radius: 4px; background: linear-gradient(90deg, var(--fl-border) 0%, rgba(42, 51, 66, 0.4) 100%); opacity: 0.35; } .logo-placeholder:nth-child(2) { width: 96px; } .logo-placeholder:nth-child(3) { width: 72px; } .logo-placeholder:nth-child(4) { width: 88px; } .logo-placeholder:nth-child(5) { width: 64px; } /* ── Cards (neumorphic) ── */ .fl-card { background: var(--fl-surface); border: 1px solid rgba(42, 51, 66, 0.35); border-radius: var(--fl-radius-card); box-shadow: var(--fl-shadow-raised); position: relative; } .fl-card::before { content: ''; position: absolute; inset: 0; border-radius: var(--fl-radius-card); background: linear-gradient(180deg, rgba(255, 248, 240, 0.04) 0%, transparent 50%); pointer-events: none; } /* Only interactive cards elevate on hover */ .portfolio-card { transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease; overflow: hidden; } .portfolio-card:hover { box-shadow: var(--fl-shadow-raised-hover); border-color: var(--fl-border-hover); transform: translateY(-3px); } /* ── Problem ── */ .problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .problem-frame { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--fl-surface), var(--fl-bg)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--fl-border-hover); font-size: 14px; filter: saturate(0.7); overflow: hidden; position: relative; transition: transform 0.3s ease; } .problem-frame:hover { transform: scale(1.02); } .problem-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; color: var(--fl-placeholder); text-transform: uppercase; position: relative; z-index: 3; } .problem-face { width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(204, 51, 85, 0.3); display: flex; align-items: center; justify-content: center; font-family: var(--fl-font-display); font-size: 24px; font-weight: 700; color: var(--fl-error); position: relative; z-index: 3; background: rgba(204, 51, 85, 0.06); } /* Each face gets a different tint to emphasize inconsistency */ .problem-frame:nth-child(1) .problem-face { border-color: rgba(204, 51, 85, 0.35); color: #CC3355; } .problem-frame:nth-child(2) .problem-face { border-color: rgba(200, 120, 40, 0.35); color: #C87828; background: rgba(200, 120, 40, 0.06); } .problem-frame:nth-child(3) .problem-face { border-color: rgba(100, 80, 180, 0.35); color: #6450B4; background: rgba(100, 80, 180, 0.06); } /* CRT scanline overlay */ .problem-frame::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(204, 51, 85, 0.06) 2px, rgba(204, 51, 85, 0.06) 4px ); pointer-events: none; z-index: 1; } /* Glitch bar — signals broken state */ .problem-frame::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; top: 35%; background: rgba(204, 51, 85, 0.3); box-shadow: 0 0 12px rgba(204, 51, 85, 0.2); transform: scaleX(0); transform-origin: left; animation: glitch-bar 6s ease-in-out infinite; pointer-events: none; z-index: 2; } .problem-frame:nth-child(2)::after { animation-delay: 2s; top: 55%; } .problem-frame:nth-child(3)::after { animation-delay: 4s; top: 25%; } @keyframes glitch-bar { 0%, 85%, 100% { transform: scaleX(0); opacity: 0; } 90% { transform: scaleX(1); opacity: 1; } 95% { transform: scaleX(0.4); opacity: 0.5; } } .problem-caption { margin-top: 36px; font-size: 16px; color: var(--fl-muted); line-height: 1.65; max-width: 580px; font-style: italic; } /* ── Services grid ── */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; } .service-card { padding: 40px 32px; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.35s ease; overflow: hidden; } .service-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--fl-accent), transparent); opacity: 0; transition: opacity 0.3s ease; } .service-card:hover { transform: translateY(-8px); border-color: rgba(240, 48, 0, 0.2); box-shadow: var(--fl-shadow-raised-hover), 0 0 60px rgba(240, 48, 0, 0.06); } .service-card:hover::after { opacity: 0.6; } .service-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--fl-surface-hi); border: 1px solid rgba(240, 48, 0, 0.15); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), 0 -2px 6px rgba(255, 248, 240, 0.06), inset 0 1px 0 rgba(255, 248, 240, 0.05); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--fl-accent); margin-bottom: 24px; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; position: relative; } /* Outer ring — camera dial motif */ .service-icon::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px dashed rgba(240, 48, 0, 0.12); transition: transform 0.6s ease, border-color 0.3s ease; } .service-card:hover .service-icon { transform: scale(1.1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 24px rgba(240, 48, 0, 0.15), 0 -2px 8px rgba(255, 248, 240, 0.08), inset 0 1px 0 rgba(255, 248, 240, 0.06); } .service-card:hover .service-icon::after { transform: rotate(45deg); border-color: rgba(240, 48, 0, 0.3); } .service-card h3 { font-family: var(--fl-font-display); font-size: 20px; font-weight: 600; margin-bottom: 12px; } .service-card p { font-size: 15px; color: var(--fl-muted); line-height: 1.6; } /* ── Steps ── */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 64px; position: relative; } .steps::before { content: ''; position: absolute; top: 32px; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, var(--fl-border) 15%, var(--fl-accent) 50%, var(--fl-border) 85%, transparent); opacity: 0.6; } .steps::after { content: ''; position: absolute; top: 30px; left: 15%; right: 15%; height: 5px; background: linear-gradient(90deg, transparent, rgba(240, 48, 0, 0.3) 50%, transparent); filter: blur(6px); opacity: 0; transition: opacity 0.6s ease; } .steps:hover::after { opacity: 1; } .step { text-align: center; position: relative; } .step-number { width: 72px; height: 72px; border-radius: 50%; background: var(--fl-surface-hi); border: 1px solid var(--fl-border); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.32), 0 -2px 8px rgba(255, 248, 240, 0.09), inset 0 1px 0 rgba(255, 248, 240, 0.05); display: flex; align-items: center; justify-content: center; font-family: var(--fl-font-display); font-size: 26px; font-weight: 700; color: var(--fl-accent); margin: 0 auto 28px; position: relative; z-index: 1; transition: box-shadow 0.3s ease, border-color 0.3s ease; } .step:hover .step-number { border-color: rgba(240, 48, 0, 0.25); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 24px rgba(240, 48, 0, 0.15), inset 0 1px 0 rgba(255, 248, 240, 0.05); } .step-tc { font-family: var(--fl-font-display); font-size: 24px; font-weight: 700; color: var(--fl-accent); font-variant-numeric: tabular-nums; } .step h3 { font-family: var(--fl-font-display); font-size: 18px; font-weight: 600; margin-bottom: 12px; } .step p { font-size: 15px; color: var(--fl-muted); line-height: 1.6; max-width: 280px; margin: 0 auto; } /* ── Mid-page CTA ── */ .mid-cta { text-align: center; max-width: var(--fl-max-w); margin: 0 auto; padding: 120px var(--fl-pad); position: relative; } .mid-cta-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 300px; background: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(240, 48, 0, 0.10) 0%, transparent 65%); pointer-events: none; border-radius: 50%; } .mid-cta .section-heading { margin: 0 auto; font-size: clamp(28px, 4vw, 44px); } .mid-cta-actions { margin-top: 40px; position: relative; /* Viewfinder frame-gate brackets — cinema framing motif */ display: inline-flex; flex-direction: column; align-items: center; } .mid-cta-actions::before, .mid-cta-actions::after { content: ''; position: absolute; width: 18px; height: 18px; border-color: rgba(240, 48, 0, 0.20); border-style: solid; pointer-events: none; transition: border-color 0.3s ease; } .mid-cta-actions::before { top: -10px; left: -16px; border-width: 1.5px 0 0 1.5px; } .mid-cta-actions::after { bottom: -10px; right: -16px; border-width: 0 1.5px 1.5px 0; } .mid-cta-actions:hover::before, .mid-cta-actions:hover::after { border-color: rgba(240, 48, 0, 0.40); } /* ── Numbers / Stats ── */ .numbers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 64px; align-items: stretch; } .number-card { text-align: center; padding: 48px 32px; border-radius: var(--fl-radius-card); display: flex; flex-direction: column; justify-content: center; transition: transform 0.25s ease, box-shadow 0.25s ease; } .number-card:hover { transform: scale(1.03); box-shadow: var(--fl-shadow-raised-hover), 0 0 40px rgba(240, 48, 0, 0.08); } .number-card .big { font-family: var(--fl-font-display); font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1; position: relative; } .number-card .stat-num { font-size: clamp(72px, 7vw, 104px); background: linear-gradient(180deg, #FF4A1F 0%, #F03000 50%, #FF6A40 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -3px; line-height: 1; } .number-card .stat-unit { font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fl-muted); -webkit-text-fill-color: initial; line-height: 1; margin-top: 6px; } .number-card .label { font-size: 14px; color: var(--fl-muted); margin-top: 12px; } /* ── Portfolio ── */ .portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 64px; } .portfolio-card { overflow: hidden; } .portfolio-thumb { width: 100%; height: 300px; background: linear-gradient(135deg, var(--fl-surface-hi) 0%, var(--fl-surface) 50%, var(--fl-bg) 100%); display: flex; align-items: center; justify-content: center; color: var(--fl-border-hover); font-size: 14px; letter-spacing: 1px; position: relative; overflow: hidden; } .portfolio-scene-id { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; color: var(--fl-placeholder); opacity: 0.5; } .portfolio-thumb--cta { border: 1px dashed rgba(240, 48, 0, 0.15); background: linear-gradient(135deg, rgba(240, 48, 0, 0.02), var(--fl-surface) 50%, var(--fl-bg) 100%); } .portfolio-thumb--cta .portfolio-scene-id { color: var(--fl-accent); opacity: 0.4; } /* Cinematic play button overlay */ .portfolio-thumb::before { content: '\\25B6'; position: absolute; width: 56px; height: 56px; border-radius: 50%; background: rgba(240, 48, 0, 0.9); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; padding-left: 3px; opacity: 0; transform: scale(0.8); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); z-index: 2; box-shadow: 0 4px 20px rgba(240, 48, 0, 0.4); } .portfolio-card:hover .portfolio-thumb::before { opacity: 1; transform: scale(1); } .portfolio-thumb::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: repeating-linear-gradient( 90deg, transparent 0px, transparent 6px, rgba(240, 48, 0, 0.15) 6px, rgba(240, 48, 0, 0.15) 8px ); } .portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; } .portfolio-info { padding: 24px 28px 28px; } .portfolio-info .tag { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--fl-accent); margin-bottom: 12px; } .portfolio-info h3 { font-family: var(--fl-font-display); font-size: 24px; font-weight: 600; margin-bottom: 10px; } .portfolio-info p { font-size: 14px; color: var(--fl-muted); line-height: 1.5; } .portfolio-cta-link { color: var(--fl-accent); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; } .portfolio-cta-link:hover { color: var(--fl-accent-hover); } /* ── Comparison ── */ .comparison-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 64px; } .comparison-panel { padding: 36px; position: relative; } /* Status indicator lights — broadcast tally motif */ .comparison-panel--without::after { content: 'INCONSISTENT'; position: absolute; top: 16px; right: 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; color: var(--fl-error); padding: 4px 10px; border: 1px solid rgba(204, 51, 85, 0.3); border-radius: 4px; background: rgba(204, 51, 85, 0.08); animation: error-pulse 3s ease-in-out infinite; } @keyframes error-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .comparison-panel--with::after { content: 'LOCKED'; position: absolute; top: 16px; right: 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; color: var(--fl-success); padding: 4px 10px 4px 22px; border: 1px solid rgba(59, 141, 98, 0.3); border-radius: 4px; background: rgba(59, 141, 98, 0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='3' fill='%233B8D62'/%3E%3C/svg%3E") no-repeat 8px center / 8px 8px; } .comparison-panel--without { border-color: rgba(204, 51, 85, 0.3); background: linear-gradient(180deg, var(--fl-surface) 0%, rgba(204, 51, 85, 0.06) 100%); } /* Red side-bar accent — failure signal */ .comparison-panel--without::before { content: ''; position: absolute; top: 16px; bottom: 16px; left: 0; width: 3px; background: linear-gradient(180deg, transparent, var(--fl-error), transparent); border-radius: 2px; opacity: 0.5; } .comparison-panel--with { border-color: rgba(59, 141, 98, 0.3); background: linear-gradient(180deg, var(--fl-surface) 0%, rgba(59, 141, 98, 0.06) 100%); box-shadow: var(--fl-shadow-raised), 0 0 40px rgba(59, 141, 98, 0.04); } /* Green side-bar accent on the "with" panel */ .comparison-panel--with::before { content: ''; position: absolute; top: 16px; bottom: 16px; left: 0; width: 3px; background: linear-gradient(180deg, transparent, var(--fl-success), transparent); border-radius: 2px; opacity: 0.6; } .comparison-panel h3 { font-family: var(--fl-font-display); font-size: 16px; font-weight: 600; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fl-muted); } .comparison-frames { display: flex; flex-direction: column; gap: 12px; } .comparison-frame { aspect-ratio: 16 / 9; background: var(--fl-bg); border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--fl-border-hover); font-size: 13px; transition: transform 0.3s ease; } .comp-face { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--fl-font-display); font-size: 16px; font-weight: 700; } .comp-face--a { border: 2px solid rgba(204, 51, 85, 0.4); color: #CC3355; background: rgba(204, 51, 85, 0.08); } .comp-face--b { border: 2px solid rgba(200, 120, 40, 0.4); color: #C87828; background: rgba(200, 120, 40, 0.08); } .comp-face--c { border: 2px solid rgba(100, 80, 180, 0.4); color: #6450B4; background: rgba(100, 80, 180, 0.08); } .comp-face--locked { border: 2px solid rgba(59, 141, 98, 0.4); color: var(--fl-success); background: rgba(59, 141, 98, 0.08); } .comp-shot { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--fl-placeholder); text-transform: uppercase; } .comparison-panel--without .comparison-frame { border: 1px solid rgba(204, 51, 85, 0.08); } .comparison-panel--with .comparison-frame { border: 1px solid rgba(59, 141, 98, 0.08); } .comparison-label { margin-top: 20px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; } .comparison-panel--without .comparison-label { color: var(--fl-error); } .comparison-panel--with .comparison-label { color: var(--fl-success); } /* ── Approach ── */ .approach-content { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-top: 72px; align-items: center; } .approach-text p { font-size: 18px; color: var(--fl-muted); line-height: 1.75; margin-bottom: 28px; } .approach-text p strong { color: var(--fl-text); } .approach-visual { padding: 48px 40px; background: linear-gradient(180deg, var(--fl-surface) 0%, rgba(23, 28, 36, 0.8) 100%); border: 1px solid rgba(42, 51, 66, 0.3); position: relative; overflow: hidden; } .approach-visual::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--fl-accent), transparent); opacity: 0.3; } .approach-visual .layer { display: flex; align-items: center; gap: 20px; padding: 18px 0; transition: padding-left 0.3s ease, background 0.3s ease; position: relative; border-radius: 6px; } .approach-visual .layer::before { content: ''; position: absolute; left: 21px; top: 100%; width: 1px; height: 100%; background: linear-gradient(180deg, rgba(240, 48, 0, 0.18), rgba(240, 48, 0, 0.04)); pointer-events: none; z-index: 1; } .approach-visual .layer:last-child::before { display: none; } .approach-visual .layer:hover { padding-left: 8px; background: rgba(240, 48, 0, 0.02); } .approach-visual .layer .icon { width: 44px; height: 44px; border-radius: 50%; background: var(--fl-surface-hi); border: 1px solid rgba(240, 48, 0, 0.12); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 248, 240, 0.05); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--fl-accent); flex-shrink: 0; transition: box-shadow 0.2s ease, border-color 0.2s ease; position: relative; z-index: 2; } .approach-visual .layer:hover .icon { border-color: rgba(240, 48, 0, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(240, 48, 0, 0.12), inset 0 1px 0 rgba(255, 248, 240, 0.05); } .approach-visual .layer .name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .approach-visual .layer .desc { font-size: 13px; color: var(--fl-muted); } /* ── Who it's for ── */ .audience-section { text-align: center; max-width: 720px; margin: 0 auto; padding: 120px var(--fl-pad); } .audience-section .section-heading { margin: 0 auto; } .audience-list { list-style: none; text-align: left; max-width: 520px; margin: 40px auto 0; } .audience-list li { padding: 14px 0; font-size: 17px; display: flex; align-items: flex-start; gap: 16px; border-bottom: 1px solid rgba(42, 51, 66, 0.2); transition: padding-left 0.3s ease; } .audience-list li:last-child { border-bottom: none; } .audience-list li:hover { padding-left: 8px; } .audience-list li::before { content: ''; width: 20px; height: 20px; border-radius: 50%; background: rgba(240, 48, 0, 0.1); border: 1px solid rgba(240, 48, 0, 0.2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' fill='none'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23F03000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } /* ── CTA / Waitlist ── */ .cta-section { text-align: center; padding: 120px var(--fl-pad) 140px; position: relative; } .cta-section::before { content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 900px; height: 900px; background: radial-gradient(ellipse 55% 35% at 50% 40%, rgba(240, 48, 0, 0.14) 0%, transparent 55%), radial-gradient(ellipse 75% 55% at 50% 55%, rgba(240, 48, 0, 0.06) 0%, transparent 75%); pointer-events: none; border-radius: 50%; animation: cta-glow 4s ease-in-out infinite alternate; } @keyframes cta-glow { from { opacity: 0.7; } to { opacity: 1; } } .cta-section .section-heading { margin: 0 auto; } .cta-section .section-sub { margin: 16px auto 0; } .cta-actions { margin-top: 40px; position: relative; display: inline-flex; flex-direction: column; align-items: center; } /* Viewfinder corner brackets on final CTA */ .cta-actions::before, .cta-actions::after { content: ''; position: absolute; width: 18px; height: 18px; border-color: rgba(240, 48, 0, 0.20); border-style: solid; pointer-events: none; transition: border-color 0.3s ease; } .cta-actions::before { top: -10px; left: -16px; border-width: 1.5px 0 0 1.5px; } .cta-actions::after { bottom: -10px; right: -16px; border-width: 0 1.5px 1.5px 0; } .cta-actions:hover::before, .cta-actions:hover::after { border-color: rgba(240, 48, 0, 0.40); } .input-email { display: block; width: 100%; padding: 14px 18px; min-height: 48px; font-family: var(--fl-font-body); font-size: 16px; color: var(--fl-text); background: var(--fl-bg); border: 1px solid rgba(42, 51, 66, 0.2); border-radius: 8px; box-shadow: var(--fl-shadow-inset); -webkit-appearance: none; appearance: none; transition: border-color 0.2s, box-shadow 0.2s; } .input-email::placeholder { color: var(--fl-placeholder); } .input-email:focus { outline: none; border-color: var(--fl-accent); box-shadow: var(--fl-shadow-inset-focus), 0 0 0 3px rgba(240, 48, 0, 0.12); } .input-email.has-error { border-color: var(--fl-error); box-shadow: 0 0 0 3px rgba(204, 51, 85, 0.1); } .form-error { color: var(--fl-error); font-size: 0.875rem; text-align: left; } .form-success { padding: 16px 20px; color: var(--fl-text); font-size: 1rem; font-weight: 500; text-align: center; border-radius: var(--fl-radius); } .form-alt-contact { margin-top: 24px; font-size: 14px; color: var(--fl-muted); } .form-alt-contact a { color: var(--fl-text); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; } /* ── Footer ── */ .site-footer { background: var(--fl-bg); border-top: 1px solid var(--fl-border); padding: 64px var(--fl-pad) 48px; position: relative; } /* Film-strip sprocket motif */ .site-footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 4px; background: repeating-linear-gradient( 90deg, transparent 0px, transparent 28px, rgba(240, 48, 0, 0.30) 28px, rgba(240, 48, 0, 0.30) 32px ); opacity: 0.7; } .footer-inner { max-width: var(--fl-max-w); margin: 0 auto; display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; } .footer-nav { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; } .footer-nav a { font-size: 14px; color: var(--fl-muted); transition: color 0.2s; min-height: 44px; display: inline-flex; align-items: center; } .footer-nav a:hover { color: var(--fl-text); } .footer-tagline { font-family: var(--fl-font-display); font-size: 14px; font-weight: 600; color: var(--fl-border-hover); letter-spacing: 0.08em; text-transform: uppercase; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; width: 100%; } .footer-inner p { font-size: 14px; color: var(--fl-muted); } .footer-links { display: flex; gap: 24px; } .footer-links a { font-size: 14px; color: var(--fl-muted); transition: color 0.2s; min-height: 44px; display: inline-flex; align-items: center; } .footer-links a:hover { color: var(--fl-text); } /* ── Dev badge ── */ .dev-badge { position: fixed; top: 8px; right: 8px; z-index: 9999; padding: 4px 10px; background: var(--fl-success); color: #fff; font-size: 11px; font-weight: 600; border-radius: 4px; pointer-events: none; } /* ── Scroll animations ── */ .animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); } /* Staggered children animation — hide before parent reveals to prevent flicker */ .animate-on-scroll .fl-card, .animate-on-scroll .step, .animate-on-scroll .audience-list li { opacity: 0; } .animate-on-scroll.is-visible .fl-card, .animate-on-scroll.is-visible .step, .animate-on-scroll.is-visible .audience-list li { animation: stagger-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .animate-on-scroll.is-visible .fl-card:nth-child(1), .animate-on-scroll.is-visible .step:nth-child(1), .animate-on-scroll.is-visible .audience-list li:nth-child(1) { animation-delay: 0.05s; } .animate-on-scroll.is-visible .fl-card:nth-child(2), .animate-on-scroll.is-visible .step:nth-child(2), .animate-on-scroll.is-visible .audience-list li:nth-child(2) { animation-delay: 0.1s; } .animate-on-scroll.is-visible .fl-card:nth-child(3), .animate-on-scroll.is-visible .step:nth-child(3), .animate-on-scroll.is-visible .audience-list li:nth-child(3) { animation-delay: 0.15s; } .animate-on-scroll.is-visible .fl-card:nth-child(4), .animate-on-scroll.is-visible .audience-list li:nth-child(4) { animation-delay: 0.2s; } .animate-on-scroll.is-visible .fl-card:nth-child(5) { animation-delay: 0.25s; } .animate-on-scroll.is-visible .fl-card:nth-child(6) { animation-delay: 0.3s; } @keyframes stagger-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .animate-on-scroll { opacity: 1; transform: none; } .animate-on-scroll .fl-card, .animate-on-scroll .step, .animate-on-scroll .audience-list li, .animate-on-scroll.is-visible .fl-card, .animate-on-scroll.is-visible .step, .animate-on-scroll.is-visible .audience-list li { opacity: 1; animation: none; } .hero-badge, .hero h1, .hero .hero-sub, .hero .hero-actions, .hero .hero-qualifier, .hero .hero-vf { animation: none; opacity: 1; } } /* ── Alternating section backgrounds ── */ .section-alt { background: var(--fl-surface); border-top: 1px solid var(--fl-border); border-bottom: 1px solid var(--fl-border); position: relative; } /* Removed: SVG feTurbulence noise overlay (CPU-rendered, near-invisible at 2%×0.5 opacity) */ /* ── Scene Timeline Divider ── */ .scene-divider { display: flex; align-items: center; justify-content: center; gap: 0; padding: 48px var(--fl-pad) 24px; /* asymmetric: more top (section-alt border above), less bottom */ max-width: var(--fl-max-w); margin: 0 auto; opacity: 0.6; transition: opacity 0.3s ease; } .scene-divider:hover { opacity: 1; } .scene-marker { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; color: var(--fl-muted); padding: 4px 12px; border: 1px solid var(--fl-border); border-radius: 4px; background: var(--fl-surface); white-space: nowrap; transition: all 0.3s ease; font-variant-numeric: tabular-nums; } .scene-marker.active { color: var(--fl-accent); border-color: rgba(240, 48, 0, 0.3); background: rgba(240, 48, 0, 0.06); box-shadow: 0 0 12px rgba(240, 48, 0, 0.1); } .scene-line { flex: 1; height: 1px; max-width: 80px; background: linear-gradient(90deg, var(--fl-border), rgba(240, 48, 0, 0.2), var(--fl-border)); } /* section-alt: full-width background but content aligns with max-width sections. Uses 100% (not 100vw) to exclude scrollbar width and match auto-margin centering. */ .section-wrap.section-alt { max-width: none; padding-left: max(var(--fl-pad), calc((100% - var(--fl-max-w) + var(--fl-pad) * 2) / 2)); padding-right: max(var(--fl-pad), calc((100% - var(--fl-max-w) + var(--fl-pad) * 2) / 2)); } .audience-section.section-alt { max-width: none; padding-left: max(var(--fl-pad), calc((100vw - 720px) / 2)); padding-right: max(var(--fl-pad), calc((100vw - 720px) / 2)); } .logos-bar { overflow-x: hidden; } /* ── Responsive ── */ @media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { :root { --fl-pad: var(--fl-pad-mobile); } section, .section-wrap { padding: 64px var(--fl-pad); } .services-grid, .steps, .approach-content, .comparison-panels { grid-template-columns: 1fr; } .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .number-card { padding: 32px 16px; } .number-card .stat-num { font-size: 48px; letter-spacing: -2px; } .number-card .stat-unit { font-size: 13px; } .mid-cta { padding: 64px var(--fl-pad); } .portfolio-grid { grid-template-columns: 1fr; } .problem-grid { grid-template-columns: 1fr; } .steps::before { display: none; } .steps::after { display: none; } .scene-divider { display: none; } .nav-toggle { display: flex; } .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--fl-bg); border-bottom: 1px solid var(--fl-border); flex-direction: column; padding: 16px var(--fl-pad); gap: 0; } .nav-links.is-open { display: flex; } .nav-links.is-open a { display: block; padding: 12px 0; color: var(--fl-text); } .nav-links.is-open .nav-cta { justify-content: center; margin-top: 8px; padding: 12px var(--fl-pad); } .hero { padding: 100px var(--fl-pad) 64px; } .hero h1 { font-size: clamp(40px, 8vw, 56px); } /* Stacked CTA buttons — equal width on mobile */ .hero-actions, .mid-cta-actions, .cta-actions { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; } .hero-actions .btn-primary, .hero-actions .btn-secondary, .mid-cta-actions .btn-primary, .cta-actions .btn-primary { width: 100%; justify-content: center; } /* Portrait viewfinder — vertical frame for mobile (matches 9:16 video output). Frame sits 8px outside the content area on each side so corners don't overlap text. Content padding is 20px, so frame edge = 12px from viewport. */ .hero-vf { width: calc(100vw - 24px); height: min(600px, 78vh); } .hero-vf::before, .hero-vf::after { display: none; } /* Replace desktop timecode with aspect ratio label */ .vf-timecode { font-size: 9px; letter-spacing: 0.1em; color: rgba(240, 48, 0, 0.25); bottom: -20px; right: 4px; animation: none; opacity: 1; } .vf-corner { width: 20px; height: 20px; border-color: rgba(240, 48, 0, 0.15); } .hero::after { display: none; } .section-wrap.section-alt { padding-left: var(--fl-pad); padding-right: var(--fl-pad); } .audience-section.section-alt { padding-left: var(--fl-pad); padding-right: var(--fl-pad); } .audience-section { padding: 64px var(--fl-pad); } .logos-row { gap: 24px; } .cta-section { padding: 80px var(--fl-pad) 96px; } .site-footer { padding: 64px var(--fl-pad) 48px; } .footer-inner { flex-direction: column; gap: 16px; text-align: center; } } /* ── Mobile nav backdrop ── */ .nav-backdrop { position: fixed; inset: 0; z-index: 99; background: rgba(14, 17, 22, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .nav-backdrop.is-visible { opacity: 1; pointer-events: auto; } @media (max-width: 374px) { .hero h1 { font-size: clamp(32px, 10vw, 40px); } .number-card .big { font-size: 28px; } } /* ══════════════════════════════════════════════════════════ Creative Artifacts — Apple-Level Premium Enhancements ══════════════════════════════════════════════════════════ */ /* ── Horizontal Film Strip ── */ .film-strip { width: 100%; overflow: hidden; padding: 24px 0; position: relative; background: var(--fl-bg); } .film-strip::before, .film-strip::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; background: repeating-linear-gradient( 90deg, transparent 0px, transparent 24px, rgba(240, 48, 0, 0.18) 24px, rgba(240, 48, 0, 0.18) 28px ); opacity: 0.7; } .film-strip::before { top: 0; } .film-strip::after { bottom: 0; } .film-strip-track { display: flex; gap: 16px; animation: film-scroll 40s linear infinite; animation-play-state: var(--filmstrip-anim-state, paused); width: max-content; } .film-strip-frame { width: 180px; height: 100px; flex-shrink: 0; border-radius: 4px; background: linear-gradient(135deg, var(--fl-surface-hi), var(--fl-surface)); border: 1px solid rgba(42, 51, 66, 0.25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-family: 'JetBrains Mono', monospace; color: var(--fl-muted); letter-spacing: 0.08em; position: relative; overflow: hidden; transition: border-color 0.3s ease; } .film-strip-frame:hover { border-color: rgba(240, 48, 0, 0.25); } /* Simulated waveform/timeline bar at bottom of each frame */ .film-strip-frame::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, rgba(240, 48, 0, 0.15) 0%, rgba(240, 48, 0, 0.4) 30%, rgba(240, 48, 0, 0.2) 60%, rgba(240, 48, 0, 0.35) 100% ); opacity: 0.6; } .fs-id { font-size: 12px; font-weight: 500; color: var(--fl-muted); letter-spacing: 0.1em; } .fs-tc { font-size: 9px; color: var(--fl-placeholder); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } .film-strip-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 40%); pointer-events: none; } @keyframes film-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── Aperture Dividers ── */ .aperture-divider { display: flex; align-items: center; justify-content: center; padding: 32px 0 64px; /* asymmetric: less top, more bottom to offset section-alt bg shift */ position: relative; } .aperture-ring { width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(240, 48, 0, 0.15); position: relative; display: flex; align-items: center; justify-content: center; } .aperture-ring::before { content: ''; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(240, 48, 0, 0.25); background: radial-gradient(circle, rgba(240, 48, 0, 0.06) 0%, transparent 70%); } .aperture-ring::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 1px dashed rgba(42, 51, 66, 0.25); animation: aperture-spin 20s linear infinite; animation-play-state: var(--aperture-anim-state, paused); } @keyframes aperture-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .aperture-line { flex: 1; max-width: 200px; height: 1px; background: linear-gradient(90deg, transparent, var(--fl-border), transparent); } @media (max-width: 768px) { .aperture-divider { padding: 16px 0 32px; } } /* ══════════════════════════════════════════════════════════ Upload — shared styles (modal + drop zone) ══════════════════════════════════════════════════════════ */ /* ── Drop zone — neumorphic inset well with viewfinder corners ── */ .upload-drop-zone { position: relative; border: 1px solid rgba(42, 51, 66, 0.3); border-radius: 12px; padding: 48px 24px; background: var(--fl-bg); cursor: pointer; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 -1px 3px rgba(255, 248, 240, 0.04); transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; outline: none; } .upload-drop-zone:hover, .upload-drop-zone:focus-visible { border-color: rgba(240, 48, 0, 0.35); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 -1px 3px rgba(255, 248, 240, 0.04), 0 0 0 3px rgba(240, 48, 0, 0.08); } .upload-drop-zone:focus-visible { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(240, 48, 0, 0.15); } .upload-drop-zone.is-dragover { border-color: var(--fl-accent); background: rgba(240, 48, 0, 0.04); box-shadow: inset 0 0 40px rgba(240, 48, 0, 0.04), 0 0 0 3px rgba(240, 48, 0, 0.15); } .upload-drop-zone.has-file { border-color: rgba(59, 141, 98, 0.35); background: rgba(59, 141, 98, 0.03); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 -1px 4px rgba(255, 248, 240, 0.06); } /* Viewfinder corners */ .uz-corner { position: absolute; width: 16px; height: 16px; border-color: rgba(42, 51, 66, 0.35); border-style: solid; border-width: 0; transition: border-color 0.3s ease; z-index: 2; } .upload-drop-zone:hover .uz-corner, .upload-drop-zone.is-dragover .uz-corner { border-color: rgba(240, 48, 0, 0.35); } .upload-drop-zone.has-file .uz-corner { border-color: rgba(59, 141, 98, 0.35); } .uz-tl { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; } .uz-tr { top: 8px; right: 8px; border-top-width: 1px; border-right-width: 1px; } .uz-bl { bottom: 8px; left: 8px; border-bottom-width: 1px; border-left-width: 1px; } .uz-br { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; } .upload-drop-icon { color: var(--fl-muted); margin-bottom: 16px; transition: color 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .upload-drop-zone:hover .upload-drop-icon, .upload-drop-zone.is-dragover .upload-drop-icon { color: var(--fl-accent); transform: translateY(-4px); } .upload-drop-zone.has-file .upload-drop-icon { color: var(--fl-success); } .upload-drop-text { font-size: 16px; font-weight: 500; color: var(--fl-text); margin-bottom: 4px; } .upload-drop-formats { font-size: 12px; color: var(--fl-placeholder); letter-spacing: 0.02em; } /* ── File preview ── */ .upload-file-preview { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--fl-surface-hi); border: 1px solid rgba(59, 141, 98, 0.25); border-radius: 8px; animation: file-lock-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .upload-file-preview[hidden] { display: none; } @keyframes file-lock-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .upload-file-info { display: flex; align-items: center; gap: 10px; min-width: 0; } .upload-file-lock-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(59, 141, 98, 0.1); border: 1px solid rgba(59, 141, 98, 0.2); display: flex; align-items: center; justify-content: center; color: var(--fl-success); flex-shrink: 0; } .upload-file-name { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--fl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .upload-file-size { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--fl-muted); flex-shrink: 0; } .upload-file-remove { background: none; border: none; color: var(--fl-muted); cursor: pointer; padding: 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color 0.2s, background 0.2s; } .upload-file-remove:hover { color: var(--fl-error); background: rgba(204, 51, 85, 0.1); } /* Submit — full-width in modal, distinct from landing CTAs */ .upload-submit { width: 100%; border-radius: 12px; /* Override the ambient glow — too aggressive inside a dark modal */ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.12); } /* No rec-dot inside modal — user is already committed; use a static record-circle (⏺) as the transport metaphor instead */ .upload-submit::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(255, 130, 90, 0.10); flex-shrink: 0; animation: none; /* kills the rec-pulse from .btn-primary */ opacity: 0.8; transition: opacity 0.2s, transform 0.2s; } .upload-submit:hover::before { opacity: 1; transform: scale(1.15); } .upload-submit:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.40), 0 0 16px rgba(240, 48, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.10); } .upload-submit:disabled { opacity: 0.45; cursor: not-allowed; filter: saturate(0.4); } .upload-submit:disabled::before { opacity: 0.2; } /* ── Success Takeover ── */ .upload-success-takeover { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 24px 8px; min-height: 260px; animation: success-fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .upload-success-takeover[hidden] { display: none; } /* Ring + glow container */ .success-ring { position: relative; width: 88px; height: 88px; margin-bottom: 28px; } .success-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); } .success-ring-track { stroke: var(--fl-border, #2A3342); fill: none; } .success-ring-fill { stroke: var(--fl-success); fill: none; stroke-dasharray: 289; stroke-dashoffset: 289; animation: ring-draw 0.8s 0.15s cubic-bezier(0.65, 0, 0.35, 1) forwards; } .success-check { stroke: var(--fl-success); fill: none; stroke-dasharray: 60; stroke-dashoffset: 60; transform: rotate(90deg); transform-origin: 50% 50%; animation: check-draw 0.4s 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards; } .success-ring-glow { position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(59, 141, 98, 0.2) 0%, transparent 70%); opacity: 0; animation: glow-pulse 1.6s 0.6s ease-out forwards; pointer-events: none; } /* Headline */ .success-headline { font-family: var(--fl-font-display); font-size: clamp(22px, 3.5vw, 28px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--fl-text); margin-bottom: 8px; opacity: 0; transform: translateY(8px); animation: success-text-in 0.5s 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* Subtext */ .success-sub { font-size: 15px; line-height: 1.55; color: var(--fl-muted); max-width: 340px; margin-bottom: 32px; opacity: 0; transform: translateY(6px); animation: success-text-in 0.5s 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* Trust line in success */ .success-trust { font-size: 12px; color: var(--fl-placeholder, #6E7D95); margin-top: 0; opacity: 0; animation: success-text-in 0.5s 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* Keyframes */ @keyframes success-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ring-draw { to { stroke-dashoffset: 0; } } @keyframes check-draw { to { stroke-dashoffset: 0; } } @keyframes glow-pulse { 0% { opacity: 0; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0.4; transform: scale(1); } } @keyframes success-text-in { to { opacity: 1; transform: translateY(0); } } /* ── Trust line ── */ .upload-trust-line { font-size: 12px; color: var(--fl-placeholder); text-align: center; padding-top: 4px; } /* Compact drop zone variant — horizontal layout */ .upload-drop-zone--compact { padding: 20px 24px; } .upload-drop-row { display: flex; align-items: center; gap: 16px; } .upload-drop-zone--compact .upload-drop-icon { margin-bottom: 0; } .upload-drop-copy { text-align: left; } .upload-drop-zone--compact .upload-drop-text { margin-bottom: 2px; } .upload-drop-zone--compact .upload-drop-formats { margin-bottom: 0; } /* What happens next */ .upload-modal-next { font-size: 13px; color: var(--fl-muted); text-align: center; line-height: 1.5; } /* ── Form scene-cut divider (optional track separator) ── */ .form-scene-cut { display: flex; align-items: center; gap: 12px; margin: 4px 0 -4px; /* breathe inside the form's 16px gap */ } .form-scene-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--fl-border), transparent); } .form-scene-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fl-placeholder); padding: 2px 10px; border: 1px solid var(--fl-border); border-radius: 4px; background: var(--fl-surface); white-space: nowrap; user-select: none; } /* Responsive */ @media (max-width: 768px) { .upload-drop-zone { padding: 36px 16px; } .upload-drop-zone--compact { padding: 16px 16px; } } /* ══════════════════════════════════════════════════════════ Upload Modal Desktop: centered card | Mobile: bottom drawer ══════════════════════════════════════════════════════════ */ .upload-modal-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(14, 17, 22, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .upload-modal-backdrop.is-visible { opacity: 1; pointer-events: auto; } /* Override UA styles */ .upload-modal { position: fixed; z-index: 910; max-width: 560px; width: calc(100% - 48px); max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; background: var(--fl-bg); border-radius: 16px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(42, 51, 66, 0.3); padding: 0; margin: 0; border: none; color: var(--fl-text); /* Desktop: vertically + horizontally centered */ top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.96); opacity: 0; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease; } .upload-modal[open] { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* Kill the browser's default ::backdrop — we use our own div */ .upload-modal::backdrop { display: none; } .upload-modal-inner { padding: 36px 36px 40px; position: relative; } .upload-modal-close { position: absolute; top: 20px; right: 20px; background: var(--fl-surface); border: 1px solid var(--fl-border); color: var(--fl-muted); cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: color 0.2s, background 0.2s; z-index: 2; } .upload-modal-close:hover { color: var(--fl-text); background: var(--fl-surface-hi); } .upload-modal-header { text-align: center; margin-bottom: 28px; padding-right: 40px; /* space for close button */ padding-left: 40px; } .upload-modal-heading { font-family: var(--fl-font-display); font-size: clamp(24px, 4vw, 32px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } .upload-modal-sub { font-size: 16px; color: var(--fl-muted); margin-top: 12px; line-height: 1.6; } .modal-upload-form { display: flex; flex-direction: column; gap: 16px; } .modal-upload-form[hidden] { display: none; } /* Mobile: convert to bottom drawer */ @media (max-width: 768px) { .upload-modal { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; transform: translateY(100%); opacity: 1; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .upload-modal[open] { transform: translateY(0); } /* Pill drag handle — mobile only */ .upload-modal-inner::before { content: ''; display: block; width: 40px; height: 4px; background: var(--fl-border); border-radius: 2px; margin: 0 auto 20px; } .upload-modal-inner { padding: 16px 20px 36px; } .upload-modal-header { padding-right: 40px; padding-left: 0; text-align: left; } .upload-modal-close { top: 16px; right: 16px; } } /* ── Floating scanline overlay on sections ── */ .section-alt::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 3px, rgba(255, 255, 255, 0.006) 3px, rgba(255, 255, 255, 0.006) 4px ); pointer-events: none; z-index: 0; } /* ── Enhanced scroll reveal ── */ .animate-on-scroll .section-heading { transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; } .animate-on-scroll .section-sub { transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; } /* ── Cursor glow on hero (pointer-following accent) ── */ .hero-glow { position: absolute; top: 0; left: 0; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(240, 48, 0, 0.06) 0%, transparent 60%); pointer-events: none; z-index: 0; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; opacity: 0; } .hero:hover .hero-glow { opacity: 1; } /* Removed backdrop-filter from approach-visual (not visible on opaque bg) */ /* ── Pulse ring on "Now accepting projects" badge ── */ .hero-badge .dot::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(240, 48, 0, 0.4); animation: dot-ring 2s ease-in-out infinite; } @keyframes dot-ring { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(3); opacity: 0; } } .hero-badge .dot { position: relative; } /* ── Round 3: Premium Details ── */ /* Portfolio cards — scene ID overlay */ .portfolio-card .portfolio-thumb::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: repeating-linear-gradient( 90deg, transparent 0px, transparent 6px, rgba(240, 48, 0, 0.15) 6px, rgba(240, 48, 0, 0.15) 8px ); } /* Portfolio thumb — gradient overlay on hover */ .portfolio-card:hover .portfolio-thumb { background: linear-gradient(135deg, rgba(240, 48, 0, 0.04), var(--fl-surface-hi) 30%, var(--fl-surface) 60%, var(--fl-bg) 100%); } /* Problem frames — stronger broken signal */ .problem-frame { border: 1px solid rgba(204, 51, 85, 0.1); } /* Footer responsive override */ @media (max-width: 768px) { .footer-bottom { flex-direction: column; gap: 12px; } .footer-inner { gap: 16px; } } /* Comparison frame hover inside "with" panel */ .comparison-panel--with .comparison-frame { transition: border-color 0.3s ease, box-shadow 0.3s ease; } .comparison-panel--with:hover .comparison-frame { border-color: rgba(59, 141, 98, 0.15); box-shadow: inset 0 0 20px rgba(59, 141, 98, 0.03); } /* "Without" panel — lightweight CSS noise on frames */ .comparison-panel--without .comparison-frame::after { content: ''; position: absolute; inset: 0; background-image: repeating-conic-gradient(rgba(204,51,85,0.015) 0% 25%, transparent 0% 50%); background-size: 2px 2px; pointer-events: none; opacity: 0.6; } /* Audience check marks — accent glow on hover */ .audience-list li:hover::before { box-shadow: 0 0 12px rgba(240, 48, 0, 0.2); border-color: rgba(240, 48, 0, 0.4); } /* ══════════════════════════════════════════════════════════ Round 4: Apple-Level Premium Enhancements ══════════════════════════════════════════════════════════ */ /* ── 3D Perspective Card Tilt ── */ .service-card { transform-style: preserve-3d; perspective: 800px; } /* Subtle light reflection on tilt */ .service-card::before { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.06) 0%, transparent 40%, transparent 60%, rgba(255, 255, 255, 0.02) 100% ); transition: opacity 0.4s ease; } .service-card:hover::before { opacity: 1; } /* ── Production Ticker Strip ── */ .production-ticker { width: 100%; overflow: hidden; padding: 20px 0; position: relative; border-top: 1px solid rgba(42, 51, 66, 0.2); border-bottom: 1px solid rgba(42, 51, 66, 0.2); background: var(--fl-bg); } .production-ticker::before, .production-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; } .production-ticker::before { left: 0; background: linear-gradient(90deg, var(--fl-bg), transparent); } .production-ticker::after { right: 0; background: linear-gradient(270deg, var(--fl-bg), transparent); } .production-ticker-track { display: flex; gap: 48px; animation: ticker-scroll 30s linear infinite; animation-play-state: var(--ticker-anim-state, paused); width: max-content; align-items: center; } .production-ticker-item { font-family: var(--fl-font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fl-muted); white-space: nowrap; display: flex; align-items: center; gap: 12px; opacity: 0.6; transition: opacity 0.3s ease; } .production-ticker-item:hover { opacity: 1; } .production-ticker-item .ticker-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--fl-accent); opacity: 0.5; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── Glow Section Dividers ── */ .glow-divider { width: 100%; height: 1px; position: relative; overflow: visible; } .glow-divider::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 60%; max-width: 600px; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 48, 0, 0.35), transparent); } .glow-divider::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 40%; max-width: 400px; height: 8px; top: -3px; background: linear-gradient(90deg, transparent, rgba(240, 48, 0, 0.08), transparent); filter: blur(4px); } /* ── Enhanced Number Cards with ring animation ── */ .number-card { position: relative; overflow: hidden; } .number-card::after { content: ''; position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(240, 48, 0, 0.1); border-top-color: var(--fl-accent); opacity: 0; transition: opacity 0.5s ease; } .number-card:hover::after { opacity: 0.6; animation: ring-spin 2s linear infinite; } @keyframes ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Hero word reveal animation ── */ .hero h1.words-ready { animation: none !important; opacity: 1 !important; transform: none !important; } .hero h1 .word { display: inline-block; opacity: 0; transform: translateY(20px) rotateX(-15deg); animation: word-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* Gradient text words inside need their own gradient */ .hero h1 em .word { background: linear-gradient( 135deg, #F03000 0%, #FF6A40 40%, #FFB088 55%, #FF6A40 70%, #F03000 100% ); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: word-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards, shimmer-text 6s ease-in-out infinite; } .hero h1 .word-space { display: inline; width: 0.3em; } /* Stagger delays set via inline style in JS */ @keyframes word-reveal { to { opacity: 1; transform: translateY(0) rotateX(0deg); } } /* ── Scroll progress indicator ── */ .scroll-progress { position: fixed; top: 64px; left: 0; height: 2px; background: linear-gradient(90deg, var(--fl-accent), var(--fl-accent-hover)); z-index: 99; transform-origin: left; transform: scaleX(0); transition: none; will-change: transform; } /* ── Section number indicators ── */ .section-label::after { content: ''; flex: 1; max-width: 80px; height: 1px; background: linear-gradient(90deg, rgba(240, 48, 0, 0.2), transparent); } /* ── Approach visual — floating particles ── */ .approach-visual::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--fl-accent), transparent); opacity: 0.2; } /* ── Smooth underline on footer email ── */ .form-alt-contact a { position: relative; } .form-alt-contact a::after { content: ''; position: absolute; bottom: 8px; left: 0; width: 100%; height: 1px; background: var(--fl-accent); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; } .form-alt-contact a:hover::after { transform: scaleX(1); transform-origin: left; } /* ── Portfolio card play button pulse ── */ .portfolio-card:hover .portfolio-thumb::before { animation: play-pulse 1.5s ease-in-out infinite; } @keyframes play-pulse { 0%, 100% { box-shadow: 0 4px 20px rgba(240, 48, 0, 0.4); } 50% { box-shadow: 0 4px 30px rgba(240, 48, 0, 0.6), 0 0 0 8px rgba(240, 48, 0, 0.1); } } /* ── Responsive overrides for new elements ── */ @media (max-width: 768px) { .production-ticker { padding: 14px 0; } .production-ticker-track { gap: 32px; } .production-ticker-item { font-size: 11px; } .hero-mesh { display: none; } .scroll-progress { top: 64px; } .portfolio-card { will-change: auto; } } @media (prefers-reduced-motion: reduce) { .hero-mesh { animation: none; } .production-ticker-track { animation: none; } .hero h1 .word { opacity: 1; transform: none; animation: none; } .scroll-progress { display: none; } .number-card:hover::after { animation: none; } }