@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); :root { /* Brand Colors */ --primary: #18254e; --primary-dark: #0f1833; --primary-light: #243564; --accent: #6de36c; --accent-dark: #4fc94e; --accent-light: #8cec8b; --accent-glow: rgba(109, 227, 108, 0.25); /* Dark System Backgrounds */ --bg-base: #0d1a3a; --bg-surface: rgba(255, 255, 255, 0.05); --bg-elevated: rgba(255, 255, 255, 0.08); /* Semantic aliases — maintained for JS/HTML compatibility */ --background: #0d1a3a; --surface: rgba(255, 255, 255, 0.05); --secondary: rgba(255, 255, 255, 0.08); /* Glass Borders */ --border-glass: rgba(109, 227, 108, 0.18); --border-glass-hover: rgba(109, 227, 108, 0.38); --border-subtle: rgba(255, 255, 255, 0.07); --border: rgba(109, 227, 108, 0.18); /* Text */ --text-primary: rgba(255, 255, 255, 0.88); --text-secondary: rgba(255, 255, 255, 0.55); --text-muted: rgba(255, 255, 255, 0.38); --text-main: rgba(255, 255, 255, 0.88); /* Chat Colors */ --chat-user: rgba(109, 227, 108, 0.1); --chat-user-text: rgba(255, 255, 255, 0.88); --chat-user-border: rgba(109, 227, 108, 0.22); --chat-ai: rgba(255, 255, 255, 0.06); --chat-ai-text: rgba(255, 255, 255, 0.82); --chat-ai-border: rgba(255, 255, 255, 0.08); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6); /* Radius */ --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.4s ease; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: var(--bg-base); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; } /* Layout */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .flex-center { display: flex; justify-content: center; align-items: center; } /* Ambient orb background — add

as first child of */ .orb-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .orb-bg::before { content: ''; position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(109, 227, 108, 0.07) 0%, transparent 65%); top: -150px; right: -100px; border-radius: 50%; animation: pulse-orb 7s ease-in-out infinite; } .orb-bg::after { content: ''; position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(109, 227, 108, 0.05) 0%, transparent 65%); bottom: -80px; left: -80px; border-radius: 50%; animation: pulse-orb 9s ease-in-out infinite reverse; } @keyframes pulse-orb { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.7; } } /* Header & Navigation */ header { background: rgba(8, 15, 30, 0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(109, 227, 108, 0.12); position: sticky; top: 0; z-index: 100; transition: box-shadow var(--transition-normal); } header:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .nav-container { display: flex; justify-content: space-between; align-items: center; height: 70px; } .logo { font-size: 1.5rem; font-weight: 700; color: rgba(255, 255, 255, 0.92); display: flex; align-items: center; gap: 8px; transition: opacity var(--transition-fast); } .logo:hover { opacity: 0.82; } .logo span { color: rgba(255, 255, 255, 0.92); } .nav-links { display: flex; gap: 32px; } .nav-link { font-weight: 500; color: rgba(255, 255, 255, 0.52); transition: color var(--transition-fast); position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width var(--transition-normal); border-radius: 1px; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link:hover, .nav-link.active { color: rgba(255, 255, 255, 0.95); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; border-radius: 99px; font-weight: 600; font-size: 0.9rem; transition: all var(--transition-normal); cursor: pointer; border: none; letter-spacing: 0.01em; min-height: 44px; } .btn-primary { background: var(--accent); color: var(--bg-base); box-shadow: 0 4px 15px rgba(109, 227, 108, 0.3); } .btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 6px 25px rgba(109, 227, 108, 0.45); } .btn-secondary { background: transparent; color: var(--accent); border: 1px solid rgba(109, 227, 108, 0.35); } .btn-secondary:hover { background: rgba(109, 227, 108, 0.1); border-color: rgba(109, 227, 108, 0.6); color: var(--accent); transform: translateY(-1px); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* Glassmorphism card */ .card { background: var(--bg-surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius-xl); padding: 2rem; border: 1px solid var(--border-glass); transition: all var(--transition-normal); } .card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(109, 227, 108, 0.08); border-color: var(--border-glass-hover); background: var(--bg-elevated); } /* Typography */ h1, h2, h3 { line-height: 1.2; } h1 { font-size: 3.5rem; font-weight: 800; color: rgba(255, 255, 255, 0.95); background: none; -webkit-text-fill-color: rgba(255, 255, 255, 0.95); } h2 { font-size: 2.5rem; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.9); } h3 { color: rgba(255, 255, 255, 0.85); } /* Footer */ footer { background: transparent; border-top: 1px solid rgba(109, 227, 108, 0.08); color: rgba(255, 255, 255, 0.45); text-align: center; padding: 2rem 1rem; font-size: 0.82rem; position: relative; z-index: 2; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.6s ease-out forwards; } /* Responsive */ @media (max-width: 768px) { h1 { font-size: 2.2rem; } .nav-links { gap: 16px; } .btn { padding: 8px 16px; font-size: 0.85rem; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Logo Glitch Animation */ .logo-glitch-container { position: relative; display: inline-block; } .logo-glitch-layer { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; } /* When idle: activate the 3 RGB layers */ .logo-glitch-container.glitching .logo-glitch-layer { opacity: 1; } .logo-glitch-container.glitching .glitch-main { animation: glitch-main 0.15s ease infinite alternate; } .logo-glitch-container.glitching .glitch-r { animation: glitch-r 0.15s ease infinite alternate; color: #ff0040; } .logo-glitch-container.glitching .glitch-g { animation: glitch-g 0.13s ease infinite alternate; color: #6de36c; } .logo-glitch-container.glitching .glitch-b { animation: glitch-b 0.11s ease infinite alternate; color: #3040ff; } @keyframes glitch-main { 0% { transform: translate(0, 0); } 25% { transform: translate(-1px, 1px); } 50% { transform: translate(1px, -1px) skewX(-1deg); } 75% { transform: translate(-1px, 0); } 100% { transform: translate(1px, 1px) skewX(1deg); } } @keyframes glitch-r { 0% { transform: translate(-2px, 0) skewX(0deg); opacity: 0.9; } 33% { transform: translate(2px, -1px) skewX(-2deg); opacity: 0.8; } 66% { transform: translate(-2px, 1px) skewX(2deg); opacity: 0.9; } 100% { transform: translate(2px, 0) skewX(0deg); opacity: 1; } } @keyframes glitch-g { 0% { transform: translate(2px, 1px) skewX(-2deg); opacity: 0.8; } 33% { transform: translate(-2px, -1px) skewX(2deg); opacity: 1; } 66% { transform: translate(2px, 0) skewX(0deg); opacity: 0.9; } 100% { transform: translate(-1px, 1px) skewX(-2deg); opacity: 0.8; } } @keyframes glitch-b { 0% { transform: translate(-1px, -1px) skewX(2deg); opacity: 0.8; } 33% { transform: translate(1px, 1px) skewX(-2deg); opacity: 0.9; } 66% { transform: translate(-1px, 0) skewX(0deg); opacity: 1; } 100% { transform: translate(1px, -1px) skewX(2deg); opacity: 0.8; } } @media (max-width: 768px) { .hero-inner { flex-direction: column; padding-top: 40px; gap: 2.5rem; } .hero-title, .hero-subject-line { font-size: 2.5rem; } .hero-right { flex: none; width: 100%; } }