/* Critical CSS - Inline this for above-the-fold content */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--primary:#10b981;--primary-light:#34d399;--primary-dark:#059669;--primary-green:var(--primary);--primary-green-dark:var(--primary-dark);--accent-cyan:#06b6d4;--accent-violet:#8b5cf6;--accent-amber:#f59e0b;--black-dark:#030712;--black-base:#0f172a;--black-light:#1e293b;--text-white:#fff;--text-gray:#e2e8f0;--text-muted:#94a3b8;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--space-4:16px;--space-6:24px;--space-8:32px;--font-heading:'Sora',system-ui,sans-serif;--font-body:'Plus Jakarta Sans',system-ui,sans-serif;--font-mono:'JetBrains Mono',monospace}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--black-dark);color:var(--text-gray);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;color:var(--text-white)}
code,pre,.mono{font-family:var(--font-mono);color:var(--accent-cyan)}
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 24px}
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 0;transition:all .4s cubic-bezier(.23,1,.32,1);background:transparent}
.navbar.scrolled{top:16px;left:24px;right:24px;width:auto;max-width:1400px;margin:0 auto;background:rgba(15,23,42,.4);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-xl);padding:12px 16px;box-shadow:0 8px 32px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.03) inset}
.navbar .container{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-icon{width:44px;height:44px;background:var(--primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--black-dark);font-family:var(--font-heading)}
.logo-text h1{font-size:18px;font-weight:700;color:var(--text-white);line-height:1.2}
.logo-text span{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}
.nav-links{display:flex;gap:8px;list-style:none}
.nav-links a{color:var(--text-gray);text-decoration:none;padding:8px 0;font-size:15px;font-weight:500;transition:color .2s ease;background:none}
.nav-links a:hover,.nav-links a.active{color:var(--text-white);background:none}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--radius-md);font-size:15px;font-weight:600;text-decoration:none;transition:all .3s cubic-bezier(.23,1,.32,1);cursor:pointer;border:none;font-family:var(--font-body)}
.btn-primary{background:var(--primary);color:var(--black-dark)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 0 30px rgba(16,185,129,.4)}
.btn-outline{background:transparent;color:var(--text-white);border:1px solid rgba(255,255,255,.2)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.hero{min-height:100vh;display:flex;align-items:center;position:relative;padding:120px 0 80px;overflow:hidden}
.text-gradient{background:linear-gradient(135deg,#059669 0%,#10b981 50%,#34d399 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.text-cyan{color:var(--accent-cyan)}
.text-violet{color:var(--accent-violet)}
.text-amber{color:var(--accent-amber)}
.back-to-top{position:fixed;bottom:32px;right:32px;width:52px;height:52px;background:rgba(15,23,42,.8);backdrop-filter:blur(12px);border:1px solid rgba(16,185,129,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:20px;cursor:pointer;z-index:1000;opacity:0;visibility:hidden;transform:translateY(20px) scale(.8);transition:all .4s cubic-bezier(.23,1,.32,1)}
.back-to-top:hover{background:var(--primary);color:var(--black-dark);transform:translateY(-4px) scale(1.1)}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
@media(max-width:1024px){.nav-links,.nav-cta{display:none}.mobile-menu-btn{display:flex}.navbar.scrolled{left:16px;right:16px;top:12px}}
@media(max-width:768px){.hero{padding:100px 0 60px}.back-to-top{bottom:24px;right:24px;width:48px;height:48px}}