* { box-sizing: border-box }
.accent-text, .group:hover .group-hover\:accent-text, .hover\:accent-text:hover { color: var(--accent); transition: color 0.2s ease }
.badge-pulse { animation: pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1) }
.cta-button { align-items: center; background: var(--accent-gradient); border-radius: 0.75rem; border: none; color: white; display: inline-flex; font-weight: 700; gap: 0.5rem; overflow: hidden; padding: 1rem 2.5rem; position: relative; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1 }
.cta-button:hover { box-shadow: 0 10px 30px rgba(240, 180, 79, 0.3); transform: translatey(-4px) }
.fade-in { animation: fadeIn 0.8s ease-out forwards; opacity: 0; transform: translatey(20px) }
.form-input { background: var(--card-bg); border-radius: 0.75rem; border: 1px solid var(--border); color: var(--text-primary); padding: 1rem 1.25rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); width: 100% }
.form-input:focus { background: var(--card-hover); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240, 180, 79, 0.1); outline: none }
.grid-overlay { animation: pan-grid 60s linear infinite; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(to right, var(--border) 1px, transparent 1px); background-size: 4rem 4rem; height: 100%; left: 0; opacity: 0.05; position: fixed; top: 0; width: 100%; z-index: -1 }
.hero-title { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background: var(--accent-gradient) }
.interactive-card { -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); background: var(--glass-bg); border-radius: 1.25rem; border: 1px solid var(--border); overflow: hidden; position: relative; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) }
.interactive-card::before { background: radial-gradient(circle, rgba(240, 180, 79, 0.15) 0%, transparent 70%); content: ""; height: 200px; left: var(--mouse-x); opacity: 0; position: absolute; top: var(--mouse-y); transform: translate(-50%, -50%); transition: opacity 0.4s ease; width: 200px; will-change: left, top }
.interactive-card:hover { border-color: var(--accent); box-shadow: var(--shadow-primary); transform: translatey(-8px) }
.interactive-card:hover::before { opacity: 1 }
.light-mode { --accent-secondary: #1A7A7A; --accent: #D4861F; --bg-secondary: #F1F7F9; --bg: #F7FAFB; --border: #E1EEF2; --card-bg: #FFF; --card-hover: #F8FCFD; --glass-bg: rgba(255, 255, 255, 0.7); --header-bg: rgba(255, 255, 255, 0.85); --shadow-primary: 0 4px 32px rgba(212, 134, 31, 0.08); --shadow-secondary: 0 8px 64px rgba(26, 122, 122, 0.05); --tag-bg: #E8F8F9; --tag-text: #1A7A7A; --text-muted: #5B7A86; --text-primary: #0A2329; --text-secondary: #2A4853 }
.section-title { padding-bottom: 1rem; position: relative }
.section-title::after { background: var(--accent-gradient); border-radius: 2px; bottom: 0; content: ""; height: 3px; left: 50%; position: absolute; transform: translatex(-50%); width: 60px }
.typing-cursor { animation: blink 1s step-end infinite; background: var(--accent); display: inline-block; height: 1.1em; margin-left: 0.2em; vertical-align: bottom; width: 0.6em }
:root { --accent-gradient: linear-gradient(135deg, #F0B44F 0%, #40C0C0 100%); --accent-secondary: #40C0C0; --accent: #F0B44F; --bg-secondary: #0F2329; --bg: #0A1A21; --border: #2A4A5A; --card-bg: #142A35; --card-hover: #1A3442; --glass-bg: rgba(20, 42, 53, 0.6); --header-bg: rgba(10, 26, 33, 0.85); --shadow-primary: 0 4px 32px rgba(240, 180, 79, 0.1); --shadow-secondary: 0 8px 64px rgba(64, 192, 192, 0.05); --tag-bg: #0F3D4A; --tag-text: #40C0C0; --text-muted: #6B9AA8; --text-primary: #E8F4F8; --text-secondary: #A8D4DB }
body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--text-secondary); font-family: "Inter", sans-serif; line-height: 1.6; scroll-behavior: smooth; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) }
h1, h2, h3, h4, .font-mono { font-family: "JetBrains Mono", monospace }