:root { --primary: #0f172a; --primary-light: #1e293b; --primary-lighter: #334155; --blue: #2563eb; --blue-light: #3b82f6; --blue-dark: #1d4ed8; --accent: #c8912e; --accent-light: #f59e0b; --accent-dark: #92400e; --bg: #ffffff; --bg-alt: #f8fafc; --bg-dark: #0f172a; --text: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --border: #e2e8f0; --border-light: #f1f5f9; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.03); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.08); --radius: 12px; --radius-lg: 16px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { background: var(--bg); color: var(--text); font-family: "Inter", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: "Inter", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; } .section-heading { font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; } input, textarea, select { font-family: "Inter", system-ui, sans-serif !important; font-size: 16px !important; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } @keyframes slide-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-float { animation: float 3s ease-in-out infinite; } .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } .reveal-delay-5 { transition-delay: 0.5s; } .reveal-delay-6 { transition-delay: 0.6s; } .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateX(0); } .reveal-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .reveal-scale.visible { opacity: 1; transform: scale(1); } .text-gradient { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .scroll-indicator { width: 22px; height: 36px; border: 2px solid rgba(200, 145, 46, 0.3); border-radius: 999px; display: flex; justify-content: center; padding-top: 7px; } .scroll-dot { width: 3px; height: 9px; background: rgba(200, 145, 46, 0.5); border-radius: 999px; animation: scrollBounce 2s infinite; } @keyframes scrollBounce { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(7px); opacity: 0.3; } } @supports (padding: max(0px)) { .safe-area-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); } .safe-area-top { padding-top: max(1rem, env(safe-area-inset-top)); } } .nav-blur { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .card-hover { transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); } .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.75rem; background: var(--blue); color: white; font-weight: 600; border-radius: 999px; transition: all 0.3s; } .btn-primary:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3); } .btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.75rem; border: 2px solid #64748b; color: #475569; font-weight: 600; border-radius: 999px; background: transparent; transition: all 0.3s; } .btn-outline:hover { background: #475569; color: white; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(71, 85, 105, 0.2); } .bg-grid { background-image: linear-gradient(var(--border-light) 1px, transparent 1px), linear-gradient(90deg, var(--border-light) 1px, transparent 1px); background-size: 60px 60px; } .btn-arrow::after { content: ''; display: inline-block; width: 0.6em; height: 0.6em; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; margin-left: 0.25em; } .btn-arrow:hover::after { transform: rotate(45deg) translate(2px, -2px); } .nav-link.active { color: #2563eb; font-weight: 600; }