/* Critical CSS - Above the fold styles only */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color:var(--text);background:var(--app-bg)}
body{min-height:100vh;display:flex;flex-direction:column}

:root{
	--brand:#00D4FF;
	--brand2:#0099CC;
	--brand-600:#0066CC;
	--text:#FFFFFF;
	--muted:#B8C5D1;
	--border:#2A3441;
	--surface:#0D1117;
	--surface-2:#161B22;
	--app-bg:radial-gradient(ellipse at top, #0A0E1A 0%, #000000 50%, #0A0E1A 100%);
	--danger:#FF4757;
	--success:#00FF88;
	--success-bg:#001A0D;
	--success-border:#00FF88;
	--success-text:#00FF88;
	--accent:#FF6B35;
	--accent2:#FF0080;
}

.container{max-width:1200px;margin:0 auto;padding:32px}

/* Navigation - Critical */
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;background:linear-gradient(135deg, rgba(13,17,23,0.98) 0%, rgba(22,27,34,0.95) 100%);position:sticky;top:0;border-bottom:2px solid var(--border);z-index:40;margin-bottom:32px;box-shadow:0 8px 32px rgba(0,0,0,0.3);position:relative}
.nav a{color:var(--text);text-decoration:none;font-weight:600;margin:0 16px;font-size:16px;transition:all 0.3s ease;position:relative}
.nav a:hover{color:var(--brand);text-shadow:0 0 10px var(--brand)}
.nav-actions{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo{width:48px;height:48px;filter:drop-shadow(0 0 10px var(--brand))}
.brand-name{font-weight:900;letter-spacing:2px;background:linear-gradient(45deg, var(--brand), var(--brand2), var(--accent));background-clip:text;-webkit-background-clip:text;color:transparent;font-size:32px;font-family:'Orbitron', monospace;text-shadow:0 0 20px rgba(0,212,255,0.5);text-transform:uppercase !important}
/* Force uppercase for all brand names */
span.brand-name, .brand .brand-name, nav .brand-name{text-transform:uppercase !important}

/* Buttons - Critical */
.btn{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(135deg, var(--brand), var(--brand2));color:#000;padding:16px 28px;border-radius:16px;text-decoration:none;border:2px solid var(--brand);font-weight:700;cursor:pointer;box-shadow:0 8px 25px rgba(0,212,255,0.3);transition:all 0.3s ease;font-family:'Space Grotesk', sans-serif;font-size:16px;text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,0.3)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(0,212,255,0.4);filter:brightness(1.1)}
.btn:active{transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--brand);border:2px solid var(--brand);border-radius:16px;font-family:'Space Grotesk', sans-serif;box-shadow:0 0 20px rgba(0,212,255,0.2)}
.btn-outline:hover{background:var(--brand);color:#000;box-shadow:0 0 30px var(--brand);text-shadow:0 1px 2px rgba(0,0,0,0.3)}

/* Hero - Critical */
.hero{padding:120px 32px;text-align:center;background:linear-gradient(135deg, rgba(13,17,23,0.95) 0%, rgba(22,27,34,0.9) 100%);margin:32px auto;border-radius:32px;width:1200px;min-width:1200px;max-width:1200px;position:relative;overflow:hidden;border:2px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,0.4);height:auto;min-height:600px;display:flex;flex-direction:column;justify-content:center}
.hero h1{font-size:48px;line-height:1.2;margin:0 0 24px;color:var(--text);font-weight:900;font-family:'Orbitron', monospace;height:auto;min-height:120px;display:flex;align-items:center;justify-content:center;width:100%;min-width:100%;max-width:100%;margin-left:auto;margin-right:auto;text-align:center;position:relative;z-index:2;text-shadow:0 0 30px rgba(0,212,255,0.5);background:linear-gradient(45deg, var(--text), var(--brand), var(--accent));background-clip:text;-webkit-background-clip:text;color:transparent;padding:0 20px}
.hero p{color:var(--muted);width:800px;min-width:800px;max-width:800px;margin:0 auto 40px;font-size:22px;height:88px;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;line-height:1.6;font-weight:400;min-height:88px;max-height:88px;overflow:hidden;text-overflow:ellipsis}
.hero .cta{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:40px;height:60px;align-items:center;min-height:60px;max-height:60px;width:100%;min-width:100%;max-width:100%}

/* Chip group - Critical */
.chip-group{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:32px;height:60px;align-items:center;min-height:60px;max-height:60px;width:100%;min-width:100%;max-width:100%}
.chip{display:inline-flex;align-items:center;gap:12px;padding:16px 24px;border-radius:20px;border:2px solid var(--brand);background:linear-gradient(135deg,rgba(0,212,255,0.1),rgba(0,153,204,0.05));color:var(--brand);font-weight:700;font-size:16px;box-shadow:0 8px 25px rgba(0,212,255,0.2), 0 0 20px rgba(0,212,255,0.1);transition:all 0.3s ease;position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:1px;font-family:'Space Grotesk', sans-serif}
.chip::before{content:'';width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 0 10px var(--brand)}
.chip:hover{transform:translateY(-4px);box-shadow:0 15px 40px rgba(0,212,255,0.3), 0 0 30px var(--brand);border-color:var(--accent);color:var(--accent)}