/* ========================================================================== NovaZphere Solutions — Premium Web Agency Design System v1.0 ========================================================================== */ /* ── Fonts ────────────────────────────────────────────────────────────────── */ /* Loaded via + in each HTML instead of @import (which is render-blocking on the CSSOM). Trimmed to 5 weights total — Inter 400/500/600/800 + JetBrains Mono 500. */ /* ── Design Tokens — Quantum Sapphire (Linear/Mercury grade) ─────────────── */ :root { /* Base — near-black with blue undertone */ --nz-void: #04060d; --nz-deep: #080a14; --nz-navy: #0a0f1e; --nz-navy-2: #111627; --nz-blue: #1e3a8a; --nz-blue-bright: #2563ff; /* SIGNATURE: deep saturated sapphire */ /* Accents — disciplined: sapphire is the ONLY signature color used >5% of UI */ --nz-sapphire: #2563ff; /* signature */ --nz-sapphire-light: #5a8aff; /* hover, hairlines */ --nz-sapphire-deep: #1e4ed4; /* pressed states */ --nz-spark: #7dd3fc; /* used <5%: focus rings, highlights, sparks */ /* Reserved for WARP DIVE only — the "epic moment" multi-color palette */ --nz-cyan: #5a8aff; --nz-cyan-bright: #7dd3fc; --nz-electric: #22d3ee; --nz-indigo: #6366f1; --nz-violet: #8b5cf6; --nz-ice: #e0e7ff; /* Text — warm-leaning slate (not pure white, premium feel) */ --nz-white: #f5f7fa; --nz-mist: #d4dae5; --nz-fog: #9ca5b8; --nz-haze: #8b95a8; --nz-shadow: #5a6273; /* Surfaces */ --glass-bg: rgba(10, 15, 30, 0.6); --glass-bg-hover: rgba(17, 22, 39, 0.7); --glass-border: rgba(139, 149, 168, 0.08); --glass-border-strong: rgba(139, 149, 168, 0.18); /* Gradients — mostly monochrome sapphire; multi-color only for the WARP gradient text */ --grad-cosmic: linear-gradient(135deg, #2563ff 0%, #1e4ed4 100%); /* sapphire-only CTA */ --grad-aurora: linear-gradient(135deg, #2563ff 0%, #5a8aff 100%); /* lighter sapphire hover */ --grad-text: linear-gradient(135deg, #f5f7fa 0%, #7dd3fc 60%, #5a8aff 100%); /* used SPARINGLY */ --grad-text-bold: linear-gradient(135deg, #f5f7fa 0%, #5a8aff 100%); --grad-hero: linear-gradient(180deg, #04060d 0%, #080a14 40%, #0a0f1e 70%, #04060d 100%); --grad-radial-cyan: radial-gradient(ellipse at center, rgba(37, 99, 255, 0.25), transparent 70%); --grad-radial-violet: radial-gradient(ellipse at center, rgba(90, 138, 255, 0.20), transparent 70%); --grad-radial-ice: radial-gradient(ellipse at center, rgba(125, 211, 252, 0.14), transparent 70%); /* Shadows & Glows — only sapphire */ --glow-cyan: 0 0 40px rgba(37, 99, 255, 0.45), 0 0 90px rgba(37, 99, 255, 0.20); --glow-cyan-soft: 0 0 28px rgba(37, 99, 255, 0.22); --glow-indigo: 0 0 40px rgba(37, 99, 255, 0.35), 0 0 80px rgba(37, 99, 255, 0.18); --glow-cool: 0 0 50px rgba(37, 99, 255, 0.25), 0 0 100px rgba(125, 211, 252, 0.10); --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6); --shadow-xl: 0 40px 120px rgba(0, 0, 0, 0.7); /* Typography */ --font-display: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Type Scale (fluid) */ --fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem); --fs-sm: clamp(0.875rem, 0.82rem + 0.25vw, 1rem); --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --fs-2xl: clamp(2rem, 1.6rem + 2vw, 3rem); --fs-3xl: clamp(2.75rem, 2rem + 3.5vw, 4.5rem); --fs-4xl: clamp(3.5rem, 2.5rem + 5vw, 6.5rem); --fs-5xl: clamp(4.5rem, 3rem + 7vw, 9rem); /* Spacing */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-10: 4rem; --sp-12: 6rem; --sp-16: 8rem; --sp-20: 10rem; --sp-24: 12rem; /* Layout */ --max-w: 1400px; --max-w-narrow: 1100px; --max-w-text: 720px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-full: 999px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 200ms; --dur-mid: 400ms; --dur-slow: 700ms; --dur-slower: 1200ms; /* Z-index scale */ --z-bg: 0; --z-content: 10; --z-nav: 100; --z-modal: 1000; --z-cursor: 9999; } /* ── Reset ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { font-family: var(--font-body); font-size: var(--fs-base); font-weight: 400; line-height: 1.65; color: var(--nz-mist); background: var(--nz-void); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.is-loading { overflow: hidden; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } ::selection { background: var(--nz-cyan); color: var(--nz-void); } /* ── Typography ───────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.04; letter-spacing: -0.025em; color: var(--nz-white); font-feature-settings: 'ss01', 'cv11'; } h1 { font-size: var(--fs-5xl); letter-spacing: -0.045em; font-weight: 800; } h2 { font-size: var(--fs-4xl); letter-spacing: -0.04em; font-weight: 700; } h3 { font-size: var(--fs-3xl); letter-spacing: -0.035em; } h4 { font-size: var(--fs-2xl); letter-spacing: -0.025em; } h5 { font-size: var(--fs-xl); letter-spacing: -0.02em; } h6 { font-size: var(--fs-lg); letter-spacing: -0.015em; } p { color: var(--nz-fog); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nz-sapphire-light); } .eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--nz-sapphire-light); opacity: 0.6; } .accent-grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .accent-cyan { color: var(--nz-cyan-bright); } /* ── Utility ──────────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2.5rem); } .container-narrow { max-width: var(--max-w-narrow); } .container-text { max-width: var(--max-w-text); } .section { padding-block: clamp(4rem, 10vh, 10rem); position: relative; } .section-lg { padding-block: clamp(6rem, 14vh, 14rem); position: relative; } .glass { background: var(--glass-bg); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); } .text-center { text-align: center; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── Background Universe (fixed) ──────────────────────────────────────────── */ .universe { position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; background: radial-gradient(ellipse 1200px 800px at 18% 20%, rgba(37, 99, 255, 0.07), transparent 60%), radial-gradient(ellipse 1000px 700px at 82% 80%, rgba(37, 99, 255, 0.05), transparent 60%), linear-gradient(180deg, #04060d 0%, #080a14 30%, #0a0f1e 60%, #04060d 100%); } /* ── Grain / noise overlay (Vercel-style) ────────────────────────────────── */ .grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); background-size: 250px 250px; } .universe::before, .universe::after { content: ''; position: absolute; inset: 0; background-repeat: repeat; opacity: 0.6; } .universe::before { background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.7), transparent), radial-gradient(1.5px 1.5px at 90px 40px, #fff, transparent), radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.5), transparent), radial-gradient(1.5px 1.5px at 160px 30px, rgba(255,255,255,0.9), transparent); background-size: 200px 200px; animation: starsDrift 200s linear infinite; } .universe::after { background-image: radial-gradient(2px 2px at 50px 100px, rgba(125, 211, 252, 0.45), transparent), radial-gradient(1.5px 1.5px at 150px 50px, rgba(90, 138, 255, 0.35), transparent), radial-gradient(1px 1px at 250px 150px, rgba(255, 255, 255, 0.55), transparent); background-size: 350px 350px; animation: starsDrift 350s linear infinite reverse; } @keyframes starsDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-200px, -200px, 0); } } .grid-overlay { position: fixed; inset: 0; z-index: var(--z-bg); pointer-events: none; background-image: linear-gradient(rgba(90, 138, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(90, 138, 255, 0.025) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); } /* WebGL canvas layer */ #bg-canvas { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.9; } /* ── Preloader ────────────────────────────────────────────────────────────── */ .preloader { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--nz-void); display: grid; place-items: center; transition: opacity 600ms var(--ease-out), visibility 600ms; } .preloader.is-hidden { opacity: 0; visibility: hidden; } .preloader-ring { width: 90px; height: 90px; border: 2px solid var(--glass-border); border-top-color: var(--nz-cyan); border-radius: 50%; animation: spin 1s linear infinite; } .preloader-text { position: absolute; bottom: 8%; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.4em; color: var(--nz-haze); text-transform: uppercase; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Navigation ──────────────────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); padding: var(--sp-5) clamp(1rem, 4vw, 2.5rem); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); transition: padding var(--dur-mid) var(--ease-out), background var(--dur-mid); } .nav { transition: padding var(--dur-mid) var(--ease-out), background var(--dur-mid), transform 400ms var(--ease-out); } .nav.is-scrolled { padding-block: var(--sp-3); background: rgba(5, 8, 16, 0.72); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border-bottom: 1px solid var(--glass-border); } .nav.is-hidden { transform: translateY(-110%); } .btn { transition: transform 300ms var(--ease-out), background var(--dur-mid), box-shadow var(--dur-mid), color var(--dur-mid); } .nav-logo { display: flex; align-items: center; gap: var(--sp-3); z-index: 2; } .nav-logo img { height: 38px; width: auto; filter: drop-shadow(0 0 12px rgba(90, 138, 255, 0.4)); } .nav-links { display: flex; align-items: center; gap: 2px; background: rgba(10, 15, 30, 0.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(139, 149, 168, 0.10); border-radius: 12px; padding: 4px; } .nav-link { position: relative; padding: 8px 14px; font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; color: var(--nz-fog); border-radius: 8px; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .nav-link:hover { color: var(--nz-white); background: rgba(139, 149, 168, 0.06); } .nav-link.is-active { background: rgba(139, 149, 168, 0.10); color: var(--nz-white); box-shadow: none; } .nav-cta { z-index: 2; } .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius-md); color: var(--nz-mist); z-index: 2; } .nav-toggle svg { transition: transform var(--dur-mid) var(--ease-spring); } .nav-toggle.is-active svg { transform: rotate(90deg); } /* Mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); background: rgba(3, 5, 11, 0.95); backdrop-filter: blur(30px); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity var(--dur-mid) var(--ease-out), visibility var(--dur-mid); } .mobile-menu.is-open { opacity: 1; visibility: visible; } .mobile-menu-list { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); } .mobile-menu-link { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; color: var(--nz-mist); opacity: 0; transform: translateY(20px); transition: all var(--dur-mid) var(--ease-out); } .mobile-menu.is-open .mobile-menu-link { opacity: 1; transform: translateY(0); } .mobile-menu.is-open .mobile-menu-link:nth-child(1) { transition-delay: 100ms; } .mobile-menu.is-open .mobile-menu-link:nth-child(2) { transition-delay: 150ms; } .mobile-menu.is-open .mobile-menu-link:nth-child(3) { transition-delay: 200ms; } .mobile-menu.is-open .mobile-menu-link:nth-child(4) { transition-delay: 250ms; } .mobile-menu.is-open .mobile-menu-link:nth-child(5) { transition-delay: 300ms; } .mobile-menu.is-open .mobile-menu-link:nth-child(6) { transition-delay: 350ms; } @media (max-width: 980px) { .nav-links { display: none; } .nav-cta:not(.nav-cta--mobile) { display: none; } .nav-toggle { display: flex; } } /* ── Buttons — Enterprise grade (Stripe / Linear / Anthropic level) ─────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; line-height: 1; border-radius: 10px; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform 300ms var(--ease-out); position: relative; isolation: isolate; white-space: nowrap; border: 1px solid transparent; } .btn svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.85; transition: transform 300ms var(--ease-out), opacity var(--dur-fast); } .btn:hover svg { transform: translateX(3px); opacity: 1; } /* PRIMARY — Dark Premium (Linear / Mercury / Cursor style) Warm near-black surface with subtle sapphire ambient glow. The brand color lives in the GLOW around the button, not on the surface. */ .btn--primary { background: /* Glass highlight at top */ linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 28%, rgba(0, 0, 0, 0.00) 60%, rgba(0, 0, 0, 0.22) 100% ), /* Base — warm dark with cool undertone, NOT pure black */ linear-gradient(180deg, #1f2229 0%, #16191f 50%, #0d1015 100%); color: #f5f7fa; border-color: rgba(255, 255, 255, 0.10); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); box-shadow: /* Glass: inner top highlight 1px */ inset 0 1px 0 rgba(255, 255, 255, 0.10), /* Glass: inner bottom shadow 1px */ inset 0 -1px 0 rgba(0, 0, 0, 0.40), /* Side glass hints */ inset 1px 0 0 rgba(255, 255, 255, 0.03), inset -1px 0 0 rgba(0, 0, 0, 0.10), /* Crisp 1px ambient */ 0 1px 2px rgba(0, 0, 0, 0.55), /* Medium depth */ 0 4px 12px rgba(0, 0, 0, 0.45), /* Sapphire ambient glow — brand presence WITHOUT saturated background */ 0 6px 24px rgba(37, 99, 255, 0.14), 0 12px 48px rgba(37, 99, 255, 0.08); } .btn--primary:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 28%, rgba(0, 0, 0, 0.00) 60%, rgba(0, 0, 0, 0.14) 100% ), linear-gradient(180deg, #262a32 0%, #1c1f26 50%, #12161c 100%); border-color: rgba(255, 255, 255, 0.18); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.40), inset 1px 0 0 rgba(255, 255, 255, 0.04), inset -1px 0 0 rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.50), 0 10px 32px rgba(37, 99, 255, 0.28), 0 18px 64px rgba(37, 99, 255, 0.16); } .btn--primary:active { background: linear-gradient(180deg, #16191f 0%, #0d1015 100%); border-color: rgba(255, 255, 255, 0.06); text-shadow: none; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.50), inset 0 -1px 0 rgba(255, 255, 255, 0.02), 0 1px 1px rgba(0, 0, 0, 0.60), 0 4px 12px rgba(37, 99, 255, 0.10); transform: translateY(0.5px); } /* Arrow gets a subtle spark cyan tint so brand connection stays without saturating */ .btn--primary svg { color: var(--nz-spark); opacity: 0.95; } .btn--primary:hover svg { opacity: 1; } /* GHOST / SECONDARY — glass treatment with proper layering */ .btn--ghost { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 50%, rgba(0, 0, 0, 0.10) 100% ), rgba(17, 22, 39, 0.65); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); color: var(--nz-mist); border-color: rgba(139, 149, 168, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.18); } .btn--ghost:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(0, 0, 0, 0.04) 100% ), rgba(30, 41, 59, 0.75); border-color: rgba(139, 149, 168, 0.32); color: var(--nz-white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.20), 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25); } .btn--ghost:active { background: rgba(10, 15, 30, 0.85); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.40); transform: translateY(0.5px); } /* SIZE VARIANTS */ .btn--lg { padding: 13px 22px; font-size: 15px; } .btn--lg svg { width: 15px; height: 15px; } .btn--sm { padding: 7px 12px; font-size: 12px; border-radius: 8px; } .btn--sm svg { width: 12px; height: 12px; } /* Inline subtle link-button — used in hero secondary */ .btn--link { background: transparent; color: var(--nz-mist); border: none; padding: 11px 6px; box-shadow: none; font-weight: 500; } .btn--link:hover { color: var(--nz-white); background: transparent; box-shadow: none; } /* ── Hero ────────────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding-top: 8rem; padding-bottom: 4rem; overflow: hidden; z-index: var(--z-content); } .hero-inner { position: relative; text-align: center; z-index: 3; max-width: 1100px; padding-inline: clamp(1rem, 4vw, 2.5rem); } .hero-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; background: rgba(10, 15, 30, 0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(139, 149, 168, 0.16); border-radius: 999px; font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; text-transform: none; color: var(--nz-mist); margin-bottom: 32px; opacity: 0; animation: fadeUp 800ms var(--ease-out) 200ms forwards; } .hero-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: #00d97e; box-shadow: 0 0 8px rgba(0, 217, 126, 0.7); animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } .hero-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; background: rgba(10, 15, 30, 0.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(139, 149, 168, 0.16); border-radius: 999px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nz-mist); margin-bottom: 28px; opacity: 0; animation: fadeUp 800ms var(--ease-out) 200ms forwards; } .hero-kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nz-spark); box-shadow: 0 0 10px rgba(125, 211, 252, 0.7); animation: pulse 2.4s ease-in-out infinite; } .hero-title { font-size: clamp(3rem, 9vw, 10rem); line-height: 0.92; letter-spacing: -0.055em; font-weight: 800; margin-bottom: var(--sp-6); text-wrap: balance; } .hero-title .word { display: inline-block; opacity: 0; transform: translateY(50px); animation: fadeUp 1000ms var(--ease-out) forwards; } .hero-title .word:nth-child(1) { animation-delay: 300ms; } .hero-title .word:nth-child(2) { animation-delay: 450ms; } .hero-title .word:nth-child(3) { animation-delay: 600ms; } .hero-title .word:nth-child(4) { animation-delay: 750ms; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } .hero-sub { font-size: clamp(1.05rem, 1.4vw, 1.35rem); color: var(--nz-fog); max-width: 660px; margin: 0 auto var(--sp-8); opacity: 0; line-height: 1.55; text-wrap: balance; animation: fadeUp 1000ms var(--ease-out) 900ms forwards; } .hero-cta { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; opacity: 0; animation: fadeUp 1000ms var(--ease-out) 1050ms forwards; } .hero-stats { display: flex; gap: clamp(2.5rem, 6vw, 4.5rem); justify-content: center; margin-top: 96px; padding-top: 40px; border-top: 1px solid rgba(139, 149, 168, 0.08); flex-wrap: wrap; opacity: 0; animation: fadeUp 1000ms var(--ease-out) 1200ms forwards; } .hero-stat { text-align: left; min-width: 90px; } .hero-stat-num { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; color: var(--nz-white); font-variant-numeric: tabular-nums; margin-bottom: 6px; } .hero-stat-label { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em; text-transform: none; color: var(--nz-haze); } .hero-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nz-shadow); z-index: 4; } .hero-scroll-line { width: 1px; height: 36px; background: linear-gradient(180deg, var(--nz-shadow), transparent); animation: scrollHint 2.4s ease-in-out infinite; } @keyframes scrollHint { 0%, 100% { transform: scaleY(1); transform-origin: top; } 50% { transform: scaleY(0.4); transform-origin: bottom; } } /* ── Floating Orbs (hero decoration) ──────────────────────────────────────── */ .orbs { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.6; animation: float 20s ease-in-out infinite; } .orb--1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(37, 99, 255, 0.45), transparent 70%); top: -100px; left: -150px; animation-delay: 0s; } .orb--2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(37, 99, 255, 0.30), transparent 70%); bottom: -50px; right: -100px; animation-delay: -7s; } .orb--3 { width: 350px; height: 350px; background: radial-gradient(circle, rgba(125, 211, 252, 0.20), transparent 70%); top: 40%; left: 50%; transform: translateX(-50%); opacity: 0.18; animation-delay: -14s; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -60px) scale(1.1); } 66% { transform: translate(-30px, 40px) scale(0.95); } } /* ── Marquee (trusted by / tech logos) ────────────────────────────────────── */ .marquee { overflow: hidden; padding-block: 28px; border-top: 1px solid rgba(139, 149, 168, 0.06); border-bottom: 1px solid rgba(139, 149, 168, 0.06); background: transparent; position: relative; z-index: var(--z-content); -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); } .marquee-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: marquee 50s linear infinite; } .marquee-item { font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--nz-shadow); letter-spacing: -0.015em; white-space: nowrap; transition: color var(--dur-fast); } .marquee-item:hover { color: var(--nz-mist); } .marquee-item--icon { display: flex; align-items: center; gap: var(--sp-3); } .marquee-item--icon svg { width: 32px; height: 32px; opacity: 0.6; } @keyframes marquee { to { transform: translateX(calc(-50% - var(--sp-12))); } } /* ── Section header ───────────────────────────────────────────────────────── */ .section-head { text-align: center; margin-bottom: 80px; max-width: 760px; margin-inline: auto; } .section-head .eyebrow { justify-content: center; margin-bottom: 20px; } .section-head h2 { margin-bottom: 18px; font-size: clamp(2rem, 4.5vw, 3.5rem); letter-spacing: -0.035em; font-weight: 700; line-height: 1.05; text-wrap: balance; } .section-head p { font-size: 17px; line-height: 1.55; color: var(--nz-fog); text-wrap: balance; } /* ── Services Grid ────────────────────────────────────────────────────────── */ .services { position: relative; z-index: var(--z-content); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--sp-5); } .service-card { position: relative; padding: 36px 32px; background: rgba(10, 15, 30, 0.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(139, 149, 168, 0.08); border-radius: 14px; overflow: hidden; transition: border-color var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out); cursor: default; isolation: isolate; } .service-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), rgba(37, 99, 255, 0.10), transparent 45%); opacity: 0; transition: opacity var(--dur-mid); z-index: -1; } .service-card:hover { transform: translateY(-3px); border-color: rgba(139, 149, 168, 0.20); background: rgba(17, 22, 39, 0.7); } .service-card:hover::before { opacity: 1; } .service-card::after { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(37, 99, 255, 0.7), transparent); opacity: 0; transform: scaleX(0.4); transition: opacity 300ms var(--ease-out), transform 600ms var(--ease-out); } .service-card:hover::after { opacity: 1; transform: scaleX(1); } /* Number label in top-right corner (enterprise feel) */ .service-num { position: absolute; top: 28px; right: 28px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; color: var(--nz-shadow); pointer-events: none; } .service-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: linear-gradient(180deg, rgba(37, 99, 255, 0.14) 0%, rgba(37, 99, 255, 0.06) 100%), rgba(10, 15, 30, 0.6); border: 1px solid rgba(37, 99, 255, 0.22); border-radius: 12px; color: var(--nz-sapphire-light); margin-bottom: 24px; transition: background var(--dur-mid), border-color var(--dur-mid), color var(--dur-mid), box-shadow var(--dur-mid); box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.10); } .service-card:hover .service-icon { background: linear-gradient(180deg, rgba(37, 99, 255, 0.22) 0%, rgba(37, 99, 255, 0.10) 100%), rgba(10, 15, 30, 0.7); border-color: rgba(125, 211, 252, 0.45); color: var(--nz-spark); box-shadow: inset 0 1px 0 rgba(125, 211, 252, 0.20), 0 6px 20px rgba(37, 99, 255, 0.25); } .service-title { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 10px; color: var(--nz-white); } .service-desc { color: var(--nz-fog); font-size: 14.5px; line-height: 1.6; margin-bottom: 20px; } .service-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; text-transform: none; color: var(--nz-sapphire-light); transition: color var(--dur-fast), gap 200ms var(--ease-out); } .service-link:hover { color: var(--nz-white); } .service-card:hover .service-link { gap: 10px; } .service-link svg { width: 12px; height: 12px; } .service-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; } .service-tag { padding: 3px 9px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--nz-haze); background: rgba(139, 149, 168, 0.05); border: 1px solid rgba(139, 149, 168, 0.10); border-radius: 6px; } /* ── Scroll-locked Storytelling Section ─────────────────────────────────── */ .story { position: relative; z-index: var(--z-content); } .story-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; } .story-stack { position: relative; width: 100%; height: 100%; } .story-panel { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sp-10); padding: var(--sp-10) clamp(2rem, 6vw, 6rem); opacity: 0; transition: opacity 600ms var(--ease-out); } .story-panel.is-active { opacity: 1; } .story-text { max-width: 540px; } .story-text .eyebrow { margin-bottom: var(--sp-4); } .story-text h3 { margin-bottom: var(--sp-5); } .story-text p { font-size: var(--fs-lg); margin-bottom: var(--sp-6); color: var(--nz-fog); } .story-features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .story-feature { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--nz-mist); } .story-feature svg { width: 18px; height: 18px; color: var(--nz-cyan-bright); flex-shrink: 0; } .story-visual { position: relative; aspect-ratio: 1 / 1; max-width: 540px; margin-inline: auto; } .story-visual-frame { position: absolute; inset: 0; border-radius: var(--radius-xl); background: linear-gradient(145deg, rgba(37, 99, 255, 0.15), rgba(37, 99, 255, 0.05)); border: 1px solid var(--glass-border-strong); overflow: hidden; box-shadow: var(--shadow-xl), inset 0 0 80px rgba(37, 99, 255, 0.1); } .story-visual-frame::before { content: ''; position: absolute; inset: -2px; border-radius: var(--radius-xl); background: var(--grad-cosmic); z-index: -1; opacity: 0.4; filter: blur(20px); } .story-progress { position: absolute; left: 50%; bottom: var(--sp-8); transform: translateX(-50%); display: flex; gap: var(--sp-2); z-index: 5; } .story-progress-dot { width: 32px; height: 3px; background: var(--glass-border-strong); border-radius: var(--radius-full); transition: background var(--dur-mid); } .story-progress-dot.is-active { background: var(--nz-cyan); box-shadow: 0 0 12px var(--nz-cyan); } @media (max-width: 900px) { .story-pin { height: auto; min-height: auto; } .story-panel { position: relative; opacity: 1; grid-template-columns: 1fr; padding-block: var(--sp-12); gap: var(--sp-6); } .story-progress { display: none; } .story-visual { max-width: 380px; } .story-features { grid-template-columns: 1fr; } } /* ── Process Timeline ─────────────────────────────────────────────────────── */ .process { position: relative; z-index: var(--z-content); } .process-timeline { position: relative; max-width: 1000px; margin-inline: auto; } .process-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, var(--glass-border-strong) 10%, var(--glass-border-strong) 90%, transparent); transform: translateX(-50%); } .process-step { position: relative; display: grid; grid-template-columns: 1fr 80px 1fr; gap: var(--sp-6); align-items: center; margin-bottom: var(--sp-10); } .process-step:last-child { margin-bottom: 0; } .process-step:nth-child(even) .process-content { grid-column: 3; text-align: left; } .process-step:nth-child(even) .process-spacer { grid-column: 1; } .process-step:nth-child(odd) .process-content { text-align: right; } .process-node { grid-column: 2; display: grid; place-items: center; width: 56px; height: 56px; background: rgba(10, 15, 30, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(139, 149, 168, 0.18); border-radius: 50%; font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--nz-mist); position: relative; transition: background var(--dur-mid), border-color var(--dur-mid), color var(--dur-mid); } .process-step.in-view .process-node, .process-step:has(.process-node:hover) .process-node { background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.20)), linear-gradient(180deg, #1f2229 0%, #16191f 100%); color: #ffffff; border-color: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.30), 0 4px 16px rgba(37, 99, 255, 0.24); } .process-content h4 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--nz-white); margin-bottom: 8px; } .process-content p { color: var(--nz-fog); font-size: 14.5px; line-height: 1.55; max-width: 380px; margin-inline: auto; } .process-step:nth-child(odd) .process-content p { margin-right: 0; } .process-step:nth-child(even) .process-content p { margin-left: 0; } @media (max-width: 800px) { .process-timeline::before { left: 40px; } .process-step { grid-template-columns: 80px 1fr; gap: var(--sp-5); } .process-step:nth-child(even) .process-content, .process-step:nth-child(odd) .process-content { grid-column: 2; text-align: left; } .process-step:nth-child(even) .process-spacer { display: none; } .process-node { grid-column: 1; } .process-content p { margin: 0; } } /* ── Stats Ribbon ─────────────────────────────────────────────────────────── */ .stats { position: relative; z-index: var(--z-content); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0; background: rgba(10, 15, 30, 0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(139, 149, 168, 0.08); border-radius: 16px; overflow: hidden; } .stat-cell { padding: 44px 32px; text-align: left; border-right: 1px solid rgba(139, 149, 168, 0.06); position: relative; } .stat-cell:last-child { border-right: none; } .stat-num { font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1; color: var(--nz-white); margin-bottom: 10px; font-variant-numeric: tabular-nums; } .stat-num span { color: inherit; } .stat-label { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; text-transform: none; color: var(--nz-haze); } @media (max-width: 700px) { .stat-cell { border-right: none; border-bottom: 1px solid var(--glass-border); } .stat-cell:last-child { border-bottom: none; } } /* ── Portfolio Bento ──────────────────────────────────────────────────────── */ .portfolio { position: relative; z-index: var(--z-content); } .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 280px; gap: var(--sp-4); } .bento-tile { position: relative; overflow: hidden; border-radius: 14px; background: rgba(10, 15, 30, 0.6); border: 1px solid rgba(139, 149, 168, 0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); cursor: pointer; transition: border-color var(--dur-mid), background var(--dur-mid), transform var(--dur-mid); padding: 0; isolation: isolate; } .bento-tile:hover { transform: translateY(-3px); border-color: rgba(139, 149, 168, 0.22); background: rgba(17, 22, 39, 0.75); } .bento-tile > * { position: relative; z-index: 1; } /* Visual mockup area — fills most of the tile */ .bento-visual { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .bento-visual svg { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-out); } .bento-tile:hover .bento-visual svg { transform: scale(1.04); } /* Gradient overlay so text stays legible over the mockup */ .bento-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(4, 6, 13, 0.7) 75%, rgba(4, 6, 13, 0.95) 100%); pointer-events: none; } /* Text content at the bottom */ .bento-text { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 28px 26px; z-index: 2; } .bento-tile h4 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--nz-white); margin-bottom: 6px; } .bento-tile p { font-size: 13.5px; line-height: 1.5; color: var(--nz-fog); } .bento-tag { position: absolute; top: 20px; left: 20px; padding: 3px 9px; background: rgba(4, 6, 13, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(139, 149, 168, 0.18); border-radius: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: none; color: var(--nz-sapphire-light); z-index: 2; } .bento-tile--lg { grid-column: span 2; grid-row: span 2; } .bento-tile--wide { grid-column: span 2; } .bento-tile--tall { grid-row: span 2; } @media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento-tile--lg { grid-column: span 2; grid-row: span 2; } .bento-tile--wide { grid-column: span 2; grid-row: span 1; } .bento-tile--tall { grid-column: span 1; grid-row: span 2; } } @media (max-width: 540px) { .bento { grid-template-columns: 1fr; grid-auto-rows: 200px; } .bento-tile--lg, .bento-tile--wide, .bento-tile--tall { grid-column: 1; grid-row: span 1; } } /* ── Testimonials ─────────────────────────────────────────────────────────── */ .testimonials { position: relative; z-index: var(--z-content); } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--sp-5); } .testimonial { padding: 36px 32px; background: rgba(10, 15, 30, 0.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(139, 149, 168, 0.08); border-radius: 14px; transition: border-color var(--dur-mid), background var(--dur-mid); } .testimonial:hover { border-color: rgba(139, 149, 168, 0.18); background: rgba(17, 22, 39, 0.65); } .testimonial-quote { font-family: var(--font-display); font-size: 17px; line-height: 1.55; letter-spacing: -0.015em; color: var(--nz-mist); margin-bottom: 28px; } .testimonial-quote::before { content: ''; display: block; width: 18px; height: 14px; margin-bottom: 14px; background: linear-gradient(135deg, var(--nz-sapphire-light), var(--nz-spark)); -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } .testimonial-author { display: flex; align-items: center; gap: 12px; } .testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.20)), linear-gradient(135deg, #262a32 0%, #16191f 100%); border: 1px solid rgba(255, 255, 255, 0.08); display: grid; place-items: center; font-family: var(--font-display); font-weight: 500; font-size: 12.5px; color: var(--nz-mist); flex-shrink: 0; letter-spacing: -0.01em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .testimonial-info strong { display: block; color: var(--nz-white); font-weight: 500; font-size: 14.5px; letter-spacing: -0.005em; margin-bottom: 2px; } .testimonial-info span { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--nz-haze); letter-spacing: -0.005em; } /* ── Pricing ─────────────────────────────────────────────────────────────── */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sp-5); max-width: 1100px; margin-inline: auto; } .pricing-card { position: relative; padding: 40px 32px; background: rgba(10, 15, 30, 0.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(139, 149, 168, 0.08); border-radius: 16px; transition: border-color var(--dur-mid), background var(--dur-mid), transform var(--dur-mid); overflow: hidden; } .pricing-card:hover { transform: translateY(-3px); border-color: rgba(139, 149, 168, 0.20); } .pricing-card--featured { border-color: rgba(37, 99, 255, 0.35); background: linear-gradient(180deg, rgba(37, 99, 255, 0.08), rgba(37, 99, 255, 0.03) 60%, rgba(10, 15, 30, 0.55)), rgba(10, 15, 30, 0.55); } .pricing-card--featured::before { content: ''; position: absolute; inset: -1px; border-radius: var(--radius-lg); padding: 1px; background: var(--grad-cosmic); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .pricing-badge { position: absolute; top: 0; right: 24px; transform: translateY(-50%); padding: 5px 12px; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.20)), linear-gradient(180deg, #1f2229, #0d1015); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: none; color: var(--nz-spark); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.40), 0 0 16px rgba(37, 99, 255, 0.20); } .pricing-name { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--nz-cyan-bright); margin-bottom: var(--sp-3); } .pricing-price { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; color: var(--nz-white); line-height: 1; margin-bottom: var(--sp-2); } .pricing-price small { font-size: var(--fs-base); font-weight: 400; color: var(--nz-haze); } .pricing-tag { color: var(--nz-fog); margin-bottom: var(--sp-6); } .pricing-features { margin-bottom: var(--sp-6); } .pricing-feature { display: flex; align-items: flex-start; gap: var(--sp-2); padding-block: var(--sp-2); border-bottom: 1px solid var(--glass-border); color: var(--nz-mist); font-size: var(--fs-sm); } .pricing-feature:last-child { border-bottom: none; } .pricing-feature svg { width: 18px; height: 18px; color: var(--nz-cyan-bright); flex-shrink: 0; margin-top: 2px; } /* ── FAQ ─────────────────────────────────────────────────────────────────── */ .faq { position: relative; z-index: var(--z-content); max-width: 820px; margin-inline: auto; } .faq-item { border-bottom: 1px solid var(--glass-border); transition: all var(--dur-mid); } .faq-question { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; padding: 24px 0; font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -0.015em; text-align: left; color: var(--nz-white); transition: color var(--dur-fast); } .faq-question:hover { color: var(--nz-sapphire-light); } .faq-toggle { width: 28px; height: 28px; display: grid; place-items: center; background: rgba(17, 22, 39, 0.7); border: 1px solid rgba(139, 149, 168, 0.15); border-radius: 8px; color: var(--nz-mist); transition: transform var(--dur-mid) var(--ease-out); flex-shrink: 0; } .faq-item.is-open .faq-toggle { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out); } .faq-item.is-open .faq-answer { max-height: 500px; } .faq-answer p { padding-bottom: var(--sp-5); color: var(--nz-fog); line-height: 1.7; } /* ── CTA Section ─────────────────────────────────────────────────────────── */ .cta-section { position: relative; z-index: var(--z-content); } .cta-box { position: relative; padding: clamp(60px, 8vw, 100px) clamp(40px, 6vw, 80px); background: rgba(10, 15, 30, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(139, 149, 168, 0.10); border-radius: 20px; text-align: center; overflow: hidden; isolation: isolate; } .cta-box::before { content: ''; position: absolute; inset: -200px; background: radial-gradient(ellipse 600px 300px at 30% 0%, rgba(37, 99, 255, 0.18), transparent 60%), radial-gradient(ellipse 500px 250px at 70% 100%, rgba(125, 211, 252, 0.10), transparent 60%); filter: blur(20px); z-index: -1; animation: ctaGlow 16s ease-in-out infinite; } @keyframes ctaGlow { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } } .cta-box h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; margin-bottom: 18px; text-wrap: balance; } .cta-box p { font-size: 16.5px; color: var(--nz-fog); max-width: 520px; line-height: 1.55; margin: 0 auto 32px; text-wrap: balance; } .cta-footnote { margin-top: 20px; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em; text-transform: none; color: var(--nz-haze); } /* ── Contact form ────────────────────────────────────────────────────────── */ .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-10); align-items: start; } .contact-info h2 { margin-bottom: var(--sp-4); } .contact-info p { margin-bottom: var(--sp-6); } .contact-meta { display: flex; flex-direction: column; gap: var(--sp-4); } .contact-meta-item { display: flex; align-items: center; gap: var(--sp-3); } .contact-meta-icon { display: grid; place-items: center; width: 44px; height: 44px; background: rgba(37, 99, 255, 0.1); border: 1px solid rgba(37, 99, 255, 0.3); border-radius: var(--radius-md); color: var(--nz-cyan-bright); flex-shrink: 0; } .contact-meta-text strong { display: block; color: var(--nz-white); font-weight: 500; margin-bottom: 2px; } .contact-meta-text span { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--nz-haze); letter-spacing: 0.05em; } .contact-form { padding: var(--sp-8); background: linear-gradient(145deg, rgba(15, 29, 58, 0.5), rgba(10, 20, 40, 0.3)); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .form-field { display: flex; flex-direction: column; gap: var(--sp-2); } .form-field--full { grid-column: 1 / -1; } .form-label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--nz-haze); } .form-input, .form-textarea, .form-select { width: 100%; padding: 14px 16px; background: rgba(3, 5, 11, 0.6); border: 1px solid var(--glass-border); border-radius: var(--radius-md); color: var(--nz-white); font-family: var(--font-body); font-size: var(--fs-base); transition: all var(--dur-fast); } .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--nz-cyan); box-shadow: 0 0 0 4px rgba(37, 99, 255, 0.15); background: rgba(3, 5, 11, 0.8); } .form-textarea { resize: vertical; min-height: 140px; font-family: inherit; } .form-submit { grid-column: 1 / -1; margin-top: var(--sp-3); justify-content: center; } .form-message { grid-column: 1 / -1; padding: var(--sp-4); border-radius: var(--radius-md); font-size: var(--fs-sm); display: none; } .form-message.is-visible { display: block; } .form-message--success { background: rgba(0, 255, 136, 0.1); border: 1px solid rgba(0, 255, 136, 0.3); color: #00ff88; } .form-message--error { background: rgba(244, 63, 94, 0.10); border: 1px solid rgba(244, 63, 94, 0.3); color: #f43f5e; } @media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } } /* ── Areas We Serve (local SEO grid) ─────────────────────────────────────── */ .areas { position: relative; z-index: var(--z-content); } .areas-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: rgba(139, 149, 168, 0.06); border: 1px solid rgba(139, 149, 168, 0.08); border-radius: 14px; overflow: hidden; list-style: none; padding: 0; margin: 0; } .areas-list li { background: rgba(10, 15, 30, 0.5); transition: background var(--dur-mid); } .areas-list li:hover { background: rgba(17, 22, 39, 0.85); } .areas-list a { display: block; padding: 18px 22px; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--nz-mist); letter-spacing: -0.005em; transition: color var(--dur-fast), padding-left var(--dur-fast); text-decoration: none; position: relative; } .areas-list a::before { content: '→'; margin-right: 10px; color: var(--nz-sapphire-light); opacity: 0.5; transition: opacity var(--dur-fast), transform var(--dur-fast); display: inline-block; } .areas-list a:hover { color: var(--nz-white); padding-left: 26px; } .areas-list a:hover::before { opacity: 1; transform: translateX(3px); } /* ── Footer ──────────────────────────────────────────────────────────────── */ .footer { position: relative; z-index: var(--z-content); padding-block: var(--sp-12) var(--sp-6); border-top: 1px solid var(--glass-border); background: rgba(3, 5, 11, 0.5); backdrop-filter: blur(20px); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-8); margin-bottom: var(--sp-10); } .footer-brand img { height: 42px; margin-bottom: var(--sp-4); filter: drop-shadow(0 0 12px rgba(90, 138, 255, 0.4)); } .footer-brand p { color: var(--nz-haze); max-width: 340px; font-size: var(--fs-sm); } .footer-col h5 { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--nz-cyan-bright); margin-bottom: var(--sp-4); } .footer-link { display: block; padding-block: 6px; font-size: var(--fs-sm); color: var(--nz-fog); transition: color var(--dur-fast), padding-left var(--dur-fast); } .footer-link:hover { color: var(--nz-cyan-bright); padding-left: 6px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-4); padding-top: var(--sp-6); border-top: 1px solid var(--glass-border); font-size: var(--fs-xs); color: var(--nz-haze); font-family: var(--font-mono); letter-spacing: 0.05em; } .footer-social { display: flex; gap: var(--sp-3); } .footer-social a { display: grid; place-items: center; width: 36px; height: 36px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 50%; color: var(--nz-fog); transition: all var(--dur-fast); } .footer-social a:hover { background: var(--grad-cosmic); color: var(--nz-white); border-color: transparent; transform: translateY(-2px); } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } } /* ── Reveal animations (intersection observer) ────────────────────────────── */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1000ms var(--ease-out), transform 1000ms var(--ease-out); } .reveal.is-revealed { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 100ms; } .reveal-delay-2 { transition-delay: 200ms; } .reveal-delay-3 { transition-delay: 300ms; } .reveal-delay-4 { transition-delay: 400ms; } .reveal-delay-5 { transition-delay: 500ms; } .reveal-delay-6 { transition-delay: 600ms; } /* ── Scroll progress bar ─────────────────────────────────────────────────── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--grad-cosmic); z-index: calc(var(--z-nav) + 1); box-shadow: 0 0 10px rgba(37, 99, 255, 0.5); transition: width 100ms linear; } /* ── Page transition ─────────────────────────────────────────────────────── */ .page-content { position: relative; z-index: var(--z-content); } /* ── Inner-page hero (smaller) ──────────────────────────────────────────── */ .page-hero { position: relative; padding-block: 12rem 6rem; text-align: center; z-index: var(--z-content); } .page-hero h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); margin-bottom: var(--sp-5); } .page-hero p { font-size: var(--fs-lg); color: var(--nz-fog); max-width: 620px; margin: 0 auto; } /* ── Selection lines decorations ─────────────────────────────────────────── */ .deco-line { position: absolute; pointer-events: none; background: linear-gradient(90deg, transparent, var(--nz-cyan), transparent); height: 1px; opacity: 0.3; } /* ── WARP DIVE — Premium v2 ──────────────────────────────────────────────── */ .warp { position: relative; height: 460vh; z-index: var(--z-content); } .warp-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; /* No background — the fixed .universe nebula behind the page shows through. */ background: transparent; isolation: isolate; } /* Fixed canvas — sits at page level (above grain, below content) so rings span the full viewport and bleed past the warp section into adjacent ones, passing BEHIND all text and cards. */ .warp-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100svh; z-index: 3; opacity: 0; pointer-events: none; will-change: opacity; /* No transition on opacity — JS sets it per frame for buttery scroll sync */ } /* Pulsing central orb — color-shifts through phases via JS-set CSS variables */ .warp-orb { --orb-r: 96; --orb-g: 165; --orb-b: 250; position: absolute; top: 50%; left: 50%; width: clamp(200px, 26vw, 380px); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 5; will-change: transform; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.55), transparent 60%), radial-gradient(circle at center, rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.18), rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.02) 60%, transparent 80%); box-shadow: 0 0 80px rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.5), 0 0 200px rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.25), inset 0 0 60px rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.3); animation: orbPulse 4s ease-in-out infinite; transition: background 600ms ease, box-shadow 600ms ease; } .warp-orb::before, .warp-orb::after { content: ''; position: absolute; inset: -20%; border-radius: 50%; border: 1px solid rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.18); transition: border-color 600ms ease; } .warp-orb::after { inset: -45%; border-color: rgba(var(--orb-r), var(--orb-g), var(--orb-b), 0.08); animation: orbRingPulse 6s ease-in-out infinite; } @keyframes orbPulse { 0%, 100% { filter: brightness(1) blur(0); } 50% { filter: brightness(1.18) blur(2px); } } @keyframes orbRingPulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.08); opacity: 0.9; } } /* Phase indicator label (top-right, mono) — sits above the top fade overlay */ .warp-phase { position: absolute; top: clamp(7rem, 12vh, 9rem); right: clamp(2rem, 5vw, 3rem); z-index: 12; pointer-events: none; } .warp-phase-label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.3em; text-transform: uppercase; color: var(--nz-haze); padding: 6px 14px; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius-full); } /* Frames stack — all rendered, opacity-controlled */ .warp-frames { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; z-index: 10; pointer-events: none; padding: 18vh clamp(1.25rem, 5vw, 3rem); } .warp-frame { position: absolute; max-width: 940px; opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity 50ms linear, transform 50ms linear; /* JS-driven */ will-change: opacity, transform; } .warp-eyebrow { display: inline-block; padding: 6px 14px; margin-bottom: var(--sp-5); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--nz-mist); background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(20px); border: 1px solid var(--glass-border-strong); border-radius: var(--radius-full); } .warp-headline { font-family: var(--font-display); font-size: clamp(2.5rem, 7.5vw, 6.5rem); line-height: 0.95; letter-spacing: -0.045em; font-weight: 700; margin-bottom: var(--sp-6); color: var(--nz-white); text-wrap: balance; } .warp-headline-em { background: linear-gradient(135deg, #5a8aff 0%, #7dd3fc 60%, #e0e7ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 30px rgba(37, 99, 255, 0.40)); } .warp-sub { font-size: clamp(1rem, 1.45vw, 1.35rem); line-height: 1.5; color: var(--nz-fog); max-width: 640px; margin-inline: auto; text-wrap: balance; } /* Progress dots — sits above the bottom fade overlay */ .warp-progress { position: absolute; bottom: clamp(6rem, 10vh, 8rem); left: 50%; transform: translateX(-50%); display: flex; gap: var(--sp-2); z-index: 12; } .warp-progress-dot { width: 40px; height: 3px; background: rgba(148, 163, 184, 0.2); border-radius: var(--radius-full); transition: background 500ms var(--ease-out), box-shadow 500ms, width 500ms var(--ease-out); } .warp-progress-dot.is-active { width: 56px; background: var(--nz-cyan); box-shadow: 0 0 16px rgba(37, 99, 255, 0.6); } /* Mobile */ @media (max-width: 768px) { .warp { height: 380vh; } .warp-orb { width: clamp(160px, 50vw, 240px); } .warp-headline { font-size: clamp(2.25rem, 9vw, 4rem); } .warp-sub { font-size: 1rem; } .warp-phase { top: 1.5rem; right: 1.5rem; } } /* ── Responsive misc ─────────────────────────────────────────────────────── */ @media (max-width: 700px) { .hero { padding-top: 7rem; } .hero-stats { gap: var(--sp-5); } .section { padding-block: var(--sp-12); } }