/* EthosiFi Hub — Shared Styles */
/* Include via: <link rel="stylesheet" href="shared.css"> */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Syne:wght@400;600;800&family=JetBrains+Mono:wght@300;400&display=swap');

:root {
  --navy: #020818;
  --navy2: #050f2a;
  --cyan: #00d4ff;
  --cyan2: #00ffea;
  --electric: #0088ff;
  --gold: #ffd700;
  --red: #ff3355;
  --green: #00ff88;
  --purple: #8855ff;
  --white: #f0f8ff;
  --muted: #5a7a9a;
  --card: rgba(5, 20, 50, 0.7);
  --border: rgba(0, 212, 255, 0.15);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--navy); color: var(--white); font-family: 'Syne', sans-serif; overflow-x: hidden; cursor: none; }

.cursor { position: fixed; width: 12px; height: 12px; background: var(--cyan); border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%,-50%); transition: width 0.2s, height 0.2s; mix-blend-mode: screen; }
.cursor-ring { position: fixed; width: 36px; height: 36px; border: 1px solid rgba(0,212,255,0.4); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%,-50%); transition: transform 0.15s ease, width 0.3s, height 0.3s; }

.grid-bg { position: fixed; inset: 0; background-image: linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; }
.orb { position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }
.orb1 { width: 500px; height: 500px; background: rgba(0,136,255,0.07); top: -150px; right: -100px; }
.orb2 { width: 350px; height: 350px; background: rgba(0,255,234,0.05); bottom: 50px; left: -100px; }

body::after { content:''; position:fixed; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px); pointer-events:none; z-index:1; }

nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding:0 40px; height:64px; display:flex; align-items:center; justify-content:space-between; background:rgba(2,8,24,0.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
.nav-logo { font-family:'Orbitron',monospace; font-size:18px; font-weight:900; color:var(--cyan); letter-spacing:2px; text-decoration:none; display:flex; align-items:center; gap:10px; }
.nav-back { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); text-decoration:none; letter-spacing:2px; display:flex; align-items:center; gap:8px; transition:color 0.2s; }
.nav-back:hover { color:var(--cyan); }
.nav-cta { background:transparent; border:1px solid var(--cyan); color:var(--cyan); padding:8px 20px; font-family:'Orbitron',monospace; font-size:11px; font-weight:700; letter-spacing:2px; cursor:none; transition:all 0.2s; text-decoration:none; }
.nav-cta:hover { background:var(--cyan); color:var(--navy); }

.page-hero { position:relative; z-index:2; padding:120px 40px 60px; max-width:1400px; margin:0 auto; }
.page-tag { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--cyan); letter-spacing:4px; text-transform:uppercase; margin-bottom:16px; display:block; }
.page-title { font-family:'Orbitron',monospace; font-size:clamp(32px,5vw,64px); font-weight:900; line-height:1.1; margin-bottom:20px; }
.page-sub { font-size:17px; color:var(--muted); max-width:580px; line-height:1.7; }

.content-section { position:relative; z-index:2; padding:40px 40px 80px; max-width:1400px; margin:0 auto; }

.card { background:var(--card); border:1px solid var(--border); padding:32px; transition:border-color 0.2s; }
.card:hover { border-color:rgba(0,212,255,0.3); }

.form-input, .form-textarea, .form-select { background:rgba(0,212,255,0.03); border:1px solid var(--border); color:var(--white); padding:14px 18px; font-family:'Syne',sans-serif; font-size:14px; outline:none; transition:border-color 0.2s; width:100%; }
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color:rgba(0,212,255,0.5); }
.form-input::placeholder, .form-textarea::placeholder { color:var(--muted); }
.form-textarea { resize:none; }
.form-select { cursor:none; appearance:none; }

.btn-primary { background:linear-gradient(90deg,var(--cyan),var(--electric)); border:none; color:var(--navy); padding:16px 32px; font-family:'Orbitron',monospace; font-size:12px; font-weight:700; letter-spacing:2px; cursor:none; transition:opacity 0.2s, transform 0.2s; }
.btn-primary:hover { opacity:0.9; transform:translateY(-2px); }
.btn-danger { background:linear-gradient(90deg,var(--red),#ff6633); border:none; color:var(--white); padding:16px 32px; font-family:'Orbitron',monospace; font-size:12px; font-weight:700; letter-spacing:2px; cursor:none; transition:opacity 0.2s; }

.tag { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:3px; text-transform:uppercase; padding:4px 10px; border:1px solid; display:inline-block; }

footer.page-footer { position:relative; z-index:2; padding:40px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; max-width:1400px; margin:0 auto; }
.footer-copy { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); }

@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.fade-up { animation: fadeUp 0.7s ease forwards; }