/* Base */
:root { --bg: #050508; --fg: #ffffff; --accent: #00e5cc; --muted: #6b7280; --border: rgba(255,255,255,0.08); }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--fg); overflow-x: hidden; }
.font-display { font-family: 'Space Grotesk', sans-serif; }

/* Utils */
.btn-primary { background: linear-gradient(135deg, var(--accent) 0%, #00b8a3 100%); color: #050508; font-weight: 600; padding: 14px 32px; border-radius: 12px; border: none; cursor: pointer; transition: all 0.3s ease; }
.btn-secondary { background: transparent; color: var(--fg); font-weight: 500; padding: 14px 32px; border-radius: 12px; border: 1px solid var(--border); cursor: pointer; transition: all 0.3s ease; }
.glass-card { background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid var(--border); border-radius: 20px; backdrop-filter: blur(10px); }
.input-field { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 8px; padding: 12px; color: var(--fg); outline: none; }
.input-field:focus { border-color: var(--accent); }

/* Background Orbs */
.gradient-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.gradient-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; animation: float 20s ease-in-out infinite; }
.orb-1 { width: 600px; height: 600px; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); top: -200px; right: -100px; }
.orb-2 { width: 500px; height: 500px; background: radial-gradient(circle, #0066ff 0%, transparent 70%); bottom: -150px; left: -100px; animation-delay: -7s; }
@keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, 30px) scale(1.1); } }

/* Grid */
.grid-pattern { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 60px 60px; }

/* Phone Mockup */
.phone-mockup { width: 280px; height: 560px; background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 100%); border-radius: 40px; padding: 12px; box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.8); animation: phoneFloat 6s ease-in-out infinite; }
.phone-screen { width: 100%; height: 100%; background: #0a0a12; border-radius: 32px; }
@keyframes phoneFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

/* FAQ */
.faq-item { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.faq-question { width: 100%; padding: 16px; background: rgba(255,255,255,0.02); text-align: left; color: var(--fg); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item.active .faq-answer { max-height: 500px; }
.faq-answer-content { padding: 16px; color: var(--muted); }

/* CMS Specific */
.cms-tab-btn { transition: all 0.2s; }
.cms-tab-btn.active { background: rgba(255,255,255,0.1); color: var(--accent); }
.cms-tab-content { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }