/* ═══════════════════════════════════════════════════════
   TOKENS — DARK ONLY
═══════════════════════════════════════════════════════ */
:root {
  --rgb-1: #ff2d78;
  --rgb-2: #00f5ff;
  --rgb-3: #a855f7;
  --rgb-4: #39ff14;
  --bg:      #04060f;
  --bg2:     #080c1a;
  --surface:  rgba(8,14,35,0.88);
  --surface2: rgba(15,22,50,0.72);
  --border:   rgba(0,245,255,0.16);
  --text:      #e8f4ff;
  --text-muted: rgba(200,220,255,0.52);
  --font-display: 'Orbitron', monospace;
  --font-body:    'Rajdhani', sans-serif;
  --font-mono:    'Share Tech Mono', monospace;
  --glow-cyan:   0 0 22px rgba(0,245,255,0.5),  0 0 70px rgba(0,245,255,0.18);
  --glow-pink:   0 0 22px rgba(255,45,120,0.5),  0 0 70px rgba(255,45,120,0.18);
  --glow-purple: 0 0 22px rgba(168,85,247,0.5),  0 0 70px rgba(168,85,247,0.18);
  --navbar-h: 56px;
}

/* ═══════════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  min-height: 100vh;
  overflow-x: hidden;
  padding-top: var(--navbar-h);
}

/* ═══════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navbar-h);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: rgba(4,6,15,0.82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0,245,255,0.10);
  box-shadow: 0 2px 40px rgba(0,0,0,0.5);
}
.navbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rgb-2), var(--rgb-3), var(--rgb-1), transparent);
  opacity: 0.4;
}

.nav-left { display: flex; align-items: center; gap: 14px; }

.sidebar-toggle {
  background: none;
  border: 1px solid rgba(0,245,255,0.2);
  border-radius: 8px;
  color: var(--rgb-2);
  cursor: pointer;
  padding: 7px 10px;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.sidebar-toggle:hover { border-color: var(--rgb-2); box-shadow: 0 0 14px rgba(0,245,255,0.25); }
.sidebar-toggle span {
  display: block; width: 18px; height: 1.5px;
  background: var(--rgb-2);
  transition: transform 0.3s, opacity 0.3s;
}
.sidebar-toggle.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.sidebar-toggle.open span:nth-child(2) { opacity: 0; }
.sidebar-toggle.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-brand {
  font-family: var(--font-display);
  font-size: clamp(0.65rem, 2.5vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 2px;
  background: linear-gradient(90deg, var(--rgb-2), var(--rgb-3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

.nav-right { display: flex; align-items: center; gap: 10px; }

.nav-user {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 2px;
  color: var(--text-muted);
  display: none;
}
.nav-user.visible { display: block; }

.nav-auth-btn {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
}
.nav-auth-btn.signin {
  background: none;
  border: 1px solid var(--rgb-2);
  color: var(--rgb-2);
}
.nav-auth-btn.signin:hover {
  background: rgba(0,245,255,0.1);
  box-shadow: 0 0 18px rgba(0,245,255,0.3);
}
.nav-auth-btn.signout {
  background: none;
  border: 1px solid rgba(255,45,120,0.4);
  color: var(--rgb-1);
}
.nav-auth-btn.signout:hover {
  background: rgba(255,45,120,0.1);
  box-shadow: 0 0 18px rgba(255,45,120,0.3);
}

/* ═══════════════════════════════════════════════════════
   BACKGROUND LAYERS
═══════════════════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.32;
}
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,245,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridDrift 22s linear infinite;
}
@keyframes gridDrift { to { background-position: 50px 50px; } }

.orb {
  position: fixed; border-radius: 50%; filter: blur(90px);
  pointer-events: none; z-index: 0; animation: orbFloat linear infinite;
}
.orb-1 { width:420px; height:420px; background:rgba(255,45,120,0.11);   top:-8%;   left:-12%;  animation-duration:19s; }
.orb-2 { width:520px; height:520px; background:rgba(0,245,255,0.08);    bottom:-14%;right:-10%; animation-duration:25s; animation-delay:-8s; }
.orb-3 { width:320px; height:320px; background:rgba(168,85,247,0.11);   top:42%;   left:62%;   animation-duration:16s; animation-delay:-4s; }
.orb-4 { width:260px; height:260px; background:rgba(57,255,20,0.06);    top:22%;   right:18%;  animation-duration:21s; animation-delay:-13s; }
@keyframes orbFloat {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(28px,-18px) scale(1.04); }
  66%  { transform: translate(-18px,28px) scale(0.96); }
  100% { transform: translate(0,0) scale(1); }
}
.scanlines {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.035) 2px, rgba(0,0,0,0.035) 4px
  );
}
#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ═══════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════ */
.wrapper {
  position: relative; z-index: 2;
  max-width: 820px; margin: 0 auto;
  padding: 0 20px 80px;
}

/* ═══════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════ */
.hero {
  min-height: calc(100svh - var(--navbar-h));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 60px 16px 60px;
  position: relative;
  overflow: hidden;
}
.hero-rings {
  position: absolute; top:50%; left:50%;
  transform: translate(-50%,-50%);
  width: min(520px,90vw); height: min(520px,90vw);
  pointer-events: none; z-index: -1;
}
.hero-ring {
  position: absolute; inset:0; border-radius:50%;
  border: 1px solid transparent;
  transform-origin: center;
}
.hero-ring:nth-child(1) { border-color:rgba(0,245,255,0.22); animation:ringA 7s linear infinite; }
.hero-ring:nth-child(2) { border-color:rgba(168,85,247,0.16); border-style:dashed; animation:ringB 12s linear infinite; }
.hero-ring:nth-child(3) { border-color:rgba(255,45,120,0.11); animation:ringC 18s linear infinite; }
.hero-ring:nth-child(1)::before {
  content:''; position:absolute; top:-4px; left:50%;
  width:8px; height:8px; border-radius:50%;
  transform:translateX(-50%);
  background:var(--rgb-2); box-shadow:0 0 14px var(--rgb-2),0 0 28px var(--rgb-2);
}
.hero-ring:nth-child(3)::before {
  content:''; position:absolute; bottom:-4px; left:50%;
  width:6px; height:6px; border-radius:50%;
  transform:translateX(-50%);
  background:var(--rgb-1); box-shadow:0 0 12px var(--rgb-1),0 0 24px var(--rgb-1);
}
@keyframes ringA { from{transform:scale(0.45) rotate(0deg);}   to{transform:scale(0.45) rotate(360deg);} }
@keyframes ringB { from{transform:scale(0.70) rotate(0deg);}   to{transform:scale(0.70) rotate(-360deg);} }
@keyframes ringC { from{transform:scale(1.00) rotate(0deg);}   to{transform:scale(1.00) rotate(360deg);} }

.hero-lines { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.h-line {
  position:absolute; height:1px; width:60%;
  background:linear-gradient(90deg,transparent,var(--lc,#00f5ff),transparent);
  opacity:0;
  animation:lineScan var(--ld,6s) ease-in-out infinite var(--ldel,0s);
}
@keyframes lineScan {
  0%   { opacity:0; transform:translateX(-115%); }
  12%  { opacity:0.6; }
  88%  { opacity:0.6; }
  100% { opacity:0; transform:translateX(250%); }
}
.hero-corner {
  position:absolute; width:34px; height:34px;
  opacity:0; animation:fadeIn 0.5s ease forwards;
}
.hero-corner.tl { top:20px; left:20px; border-top:2px solid var(--rgb-2); border-left:2px solid var(--rgb-2); animation-delay:1.7s; }
.hero-corner.tr { top:20px; right:20px; border-top:2px solid var(--rgb-3); border-right:2px solid var(--rgb-3); animation-delay:1.9s; }
.hero-corner.bl { bottom:62px; left:20px; border-bottom:2px solid var(--rgb-1); border-left:2px solid var(--rgb-1); animation-delay:2.1s; }
.hero-corner.br { bottom:62px; right:20px; border-bottom:2px solid var(--rgb-3); border-right:2px solid var(--rgb-3); animation-delay:2.3s; }
@keyframes fadeIn { to { opacity:1; } }

.hero-eyebrow {
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:6px; text-transform:uppercase;
  color:var(--rgb-2); margin-bottom:28px;
  opacity:0; animation:slideDown 0.7s cubic-bezier(0.23,1,0.32,1) 0.3s forwards;
}
.hero-eyebrow::after { content:'_'; animation:cursorBlink 1s step-end infinite; }
@keyframes cursorBlink { 0%,100%{opacity:1;} 50%{opacity:0;} }
@keyframes slideDown { from{opacity:0;transform:translateY(-18px);} to{opacity:1;transform:translateY(0);} }

.hero-title {
  font-family:var(--font-display);
  font-size:clamp(2rem,8.5vw,5rem);
  font-weight:900; line-height:1.04; letter-spacing:-1px;
  background:linear-gradient(135deg,var(--rgb-2) 0%,var(--rgb-3) 45%,var(--rgb-1) 85%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; background-size:200% 200%;
  position:relative; padding-bottom:4px;
  animation: gradShift 4s ease infinite, fadeScale 0.9s cubic-bezier(0.23,1,0.32,1) 0.6s both, glitchTick 10s step-end infinite 5s;
}
.hero-title::after {
  content:attr(data-text); position:absolute; inset:0;
  background:linear-gradient(135deg,var(--rgb-2),var(--rgb-3),var(--rgb-1));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter:blur(26px); opacity:0; z-index:-1;
  animation:glowPulse 3s ease-in-out infinite 2s;
}
@keyframes glowPulse  { 0%,100%{opacity:0.2;} 50%{opacity:0.6;} }
@keyframes gradShift  { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
@keyframes fadeScale  { from{opacity:0;transform:scale(0.88) translateY(20px);} to{opacity:1;transform:scale(1) translateY(0);} }
@keyframes glitchTick {
  0%,92%,100%{ clip-path:none; transform:none; }
  93%{ clip-path:inset(20% 0 50% 0); transform:translateX(-5px); }
  94%{ clip-path:inset(60% 0 10% 0); transform:translateX(5px); }
  95%{ clip-path:none; transform:none; }
}

.hero-typewriter {
  font-family:var(--font-mono); font-size:0.6rem; letter-spacing:3px;
  color:var(--rgb-4); margin-top:12px;
  overflow:hidden; white-space:nowrap; width:0;
  animation:typeReveal 1.6s steps(30,end) 1.4s forwards;
}
@keyframes typeReveal { to { width:100%; } }

.hero-subtitle {
  font-family:var(--font-body); font-weight:300;
  font-size:clamp(0.78rem,3.2vw,1.2rem);
  color:var(--text-muted); letter-spacing:5px; text-transform:uppercase;
  margin-top:18px; opacity:0; animation:fadeUp 0.8s ease 1.1s forwards;
}
.hero-divider {
  width:140px; height:2px; margin:30px auto 0;
  background:linear-gradient(90deg,transparent,var(--rgb-2),var(--rgb-3),var(--rgb-1),transparent);
  position:relative; opacity:0;
  animation:fadeUp 0.8s ease 1.3s forwards, divGlow 3s ease-in-out infinite 2.5s;
}
@keyframes divGlow { 0%,100%{box-shadow:none;} 50%{box-shadow:0 0 24px rgba(0,245,255,0.55);} }
.hero-divider::before {
  content:'◆'; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  color:var(--rgb-2); font-size:0.56rem;
  animation:spinSlow 4s linear infinite;
}
@keyframes spinSlow { to{ transform:translate(-50%,-50%) rotate(360deg); } }

.hero-metrics {
  display:flex; gap:28px; margin-top:34px;
  opacity:0; animation:fadeUp 0.8s ease 1.6s forwards;
}
.metric { display:flex; flex-direction:column; align-items:center; gap:4px; }
.metric-val { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--rgb-2); line-height:1; }
.metric-val.p { color:var(--rgb-1); }
.metric-val.b { color:var(--rgb-3); }
.metric-sep { width:1px; height:36px; background:var(--border); align-self:center; }
.metric-lbl { font-family:var(--font-mono); font-size:0.48rem; letter-spacing:2px; color:var(--text-muted); text-transform:uppercase; }

/* ═══════════════════════════════════════════════════════
   SCROLL REVEAL (keep animation, text removed from HTML)
═══════════════════════════════════════════════════════ */
.reveal        { opacity:0; transform:translateY(40px);  transition:opacity 0.8s cubic-bezier(0.23,1,0.32,1), transform 0.8s cubic-bezier(0.23,1,0.32,1); }
.reveal-left   { opacity:0; transform:translateX(-44px); transition:opacity 0.75s cubic-bezier(0.23,1,0.32,1), transform 0.75s cubic-bezier(0.23,1,0.32,1); }
.reveal-right  { opacity:0; transform:translateX(44px);  transition:opacity 0.75s cubic-bezier(0.23,1,0.32,1), transform 0.75s cubic-bezier(0.23,1,0.32,1); }
.in-view { opacity:1 !important; transform:none !important; }

/* ═══════════════════════════════════════════════════════
   SECTION LABEL
═══════════════════════════════════════════════════════ */
.section-label {
  font-family:var(--font-mono); font-size:0.62rem;
  letter-spacing:5px; color:var(--text-muted); text-transform:uppercase;
  text-align:center; margin-bottom:36px;
}

/* ═══════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════ */
.cards { display:flex; flex-direction:column; gap:30px; }

.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:30px;
  position:relative; overflow:hidden; backdrop-filter:blur(16px);
  transition:transform 0.4s cubic-bezier(0.23,1,0.32,1), box-shadow 0.4s, border-color 0.4s;
}
.card:hover { transform:translateY(-6px) scale(1.012); }
.card-1 { --card-color:var(--rgb-2); }
.card-2 { --card-color:var(--rgb-1); }
.card-3 { --card-color:var(--rgb-3); }
.card-1:hover { box-shadow:var(--glow-cyan),   0 24px 60px rgba(0,0,0,0.5); border-color:var(--rgb-2); }
.card-2:hover { box-shadow:var(--glow-pink),   0 24px 60px rgba(0,0,0,0.5); border-color:var(--rgb-1); }
.card-3:hover { box-shadow:var(--glow-purple), 0 24px 60px rgba(0,0,0,0.5); border-color:var(--rgb-3); }
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--card-color),transparent);
  opacity:0; transition:opacity 0.4s;
}
.card:hover::before { opacity:1; }
.card::after {
  content:''; position:absolute; bottom:0; right:0;
  width:110px; height:110px; border-radius:0 0 20px 0;
}
.card-1::after { background:radial-gradient(circle at 100% 100%,rgba(0,245,255,0.08) 0%,transparent 70%); }
.card-2::after { background:radial-gradient(circle at 100% 100%,rgba(255,45,120,0.08) 0%,transparent 70%); }
.card-3::after { background:radial-gradient(circle at 100% 100%,rgba(168,85,247,0.08) 0%,transparent 70%); }

.card-shimmer {
  position:absolute; inset:0; pointer-events:none; border-radius:20px;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,0.045) 50%,transparent 62%);
  transform:translateX(-100%);
}
.card:hover .card-shimmer { transform:translateX(200%); transition:transform 0.65s ease; }
.card-inner { display:flex; align-items:flex-start; gap:26px; }

.logo-wrap { flex-shrink:0; width:76px; height:76px; display:flex; align-items:center; justify-content:center; position:relative; }
.logo-svg { width:68px; height:68px; }
.hex-group { transform-origin:center; animation:spinHex 8s linear infinite; }
.hex-inner { transform-origin:center; animation:spinHex 5s linear infinite reverse; }
.tri-group { transform-origin:center; animation:spinHex 6s linear infinite; }
.tri-inner { transform-origin:center; animation:spinHex 3s linear infinite reverse; }
.dia-group { transform-origin:center; animation:spinHex 10s linear infinite; }
.dia-inner { transform-origin:center; animation:spinHex 4s  linear infinite reverse; }
@keyframes spinHex { to{ transform:rotate(360deg); } }

.logo-pulse {
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle,var(--card-color) 0%,transparent 70%);
  opacity:0.13; animation:pulseLogo 2.5s ease-in-out infinite;
}
@keyframes pulseLogo { 0%,100%{transform:scale(0.78);opacity:0.13;} 50%{transform:scale(1.2);opacity:0.28;} }

.card-content { flex:1; min-width:0; }
.card-header {
  display:flex; align-items:center;
  justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin-bottom:10px;
}
.card-name {
  font-family:var(--font-display); font-size:1.12rem; font-weight:700;
  letter-spacing:1px; color:var(--card-color);
  text-shadow:0 0 22px currentColor;
}
.badge {
  font-family:var(--font-mono); font-size:0.56rem;
  letter-spacing:2px; text-transform:uppercase;
  padding:4px 12px; border-radius:30px;
  border:1px solid var(--card-color); color:var(--card-color);
  background:rgba(0,0,0,0.25); white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}
.badge::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--card-color); box-shadow:0 0 6px var(--card-color);
  animation:blink 1.4s ease-in-out infinite; flex-shrink:0;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.1;} }

.card-desc {
  font-family:var(--font-body); font-size:0.94rem; font-weight:300;
  color:var(--text-muted); line-height:1.65; margin-bottom:16px;
}
.tags { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:20px; }
.tag {
  font-family:var(--font-mono); font-size:0.58rem;
  letter-spacing:1.5px; text-transform:uppercase;
  padding:4px 10px; border-radius:6px;
  background:var(--surface2); border:1px solid var(--border);
  color:var(--text-muted);
  transition:color 0.3s, border-color 0.3s;
}
.card:hover .tag { color:var(--card-color); border-color:var(--card-color); }

.launch-btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:0.68rem;
  letter-spacing:3px; text-transform:uppercase;
  text-decoration:none; color:var(--bg);
  background:var(--card-color);
  padding:11px 26px; border-radius:10px;
  transition:all 0.3s; position:relative; overflow:hidden;
}
.launch-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
  transform:translateX(-100%);
}
.launch-btn:hover::before { transform:translateX(200%); transition:transform 0.5s; }
.launch-btn:hover { box-shadow:0 0 30px var(--card-color); transform:translateX(3px); letter-spacing:4px; }
.btn-arrow { transition:transform 0.3s; display:inline-block; }
.launch-btn:hover .btn-arrow { transform:translateX(4px); }

/* ═══════════════════════════════════════════════════════
   CARD ADMIN CONTROLS
═══════════════════════════════════════════════════════ */
.admin-controls {
  display: none;
  position: absolute;
  top: 14px; right: 14px;
  gap: 8px;
  z-index: 5;
}
.admin-controls.visible { display: flex; }

.edit-btn, .delete-btn {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid;
  background: rgba(0,0,0,0.4);
  transition: all 0.25s;
}
.edit-btn { color: var(--rgb-2); border-color: rgba(0,245,255,0.3); }
.edit-btn:hover { background: rgba(0,245,255,0.12); border-color: var(--rgb-2); box-shadow: 0 0 12px rgba(0,245,255,0.3); }
.delete-btn { color: var(--rgb-1); border-color: rgba(255,45,120,0.3); }
.delete-btn:hover { background: rgba(255,45,120,0.12); border-color: var(--rgb-1); box-shadow: 0 0 12px rgba(255,45,120,0.3); }

/* ═══════════════════════════════════════════════════════
   INLINE EDIT PANEL
═══════════════════════════════════════════════════════ */
.edit-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.23,1,0.32,1), padding 0.45s;
  padding: 0;
}
.edit-panel.open {
  max-height: 640px;
  padding: 24px 0 4px;
}

.edit-form-inner {
  border-top: 1px solid rgba(0,245,255,0.12);
  padding-top: 20px;
}

.form-row { margin-bottom: 14px; }
.form-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}
.form-input, .form-textarea, .form-select {
  width: 100%;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(0,245,255,0.14);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 9px 14px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--card-color, var(--rgb-2));
  box-shadow: 0 0 14px rgba(0,245,255,0.12);
}
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
.form-select option { background: #080c1a; }

.form-status-row { display: flex; gap: 10px; align-items: center; }
.status-radio { display: none; }
.status-label {
  font-family: var(--font-mono);
  font-size: 0.52rem; letter-spacing: 2px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 20px; cursor: pointer;
  border: 1px solid rgba(200,220,255,0.15);
  color: var(--text-muted);
  transition: all 0.25s;
}
.status-radio:checked + .status-label {
  border-color: var(--card-color, var(--rgb-2));
  color: var(--card-color, var(--rgb-2));
  background: rgba(0,245,255,0.08);
}

.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.btn-save {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 2px; text-transform: uppercase;
  padding: 9px 22px; border-radius: 8px; cursor: pointer;
  background: var(--card-color, var(--rgb-2)); color: var(--bg);
  border: none; transition: all 0.3s;
}
.btn-save:hover { box-shadow: 0 0 20px var(--card-color, var(--rgb-2)); transform: translateY(-1px); }
.btn-cancel {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 2px; text-transform: uppercase;
  padding: 9px 22px; border-radius: 8px; cursor: pointer;
  background: none; color: var(--text-muted);
  border: 1px solid rgba(200,220,255,0.15); transition: all 0.3s;
}
.btn-cancel:hover { border-color: var(--text-muted); color: var(--text); }
.btn-delete-confirm {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 2px; text-transform: uppercase;
  padding: 9px 22px; border-radius: 8px; cursor: pointer;
  background: none; color: var(--rgb-1);
  border: 1px solid rgba(255,45,120,0.3); transition: all 0.3s;
  margin-left: auto;
}
.btn-delete-confirm:hover { background: rgba(255,45,120,0.1); border-color: var(--rgb-1); }

/* ═══════════════════════════════════════════════════════
   ADD PROJECT SECTION
═══════════════════════════════════════════════════════ */
.add-project-section {
  display: none;
  margin-top: 40px;
}
.add-project-section.admin-visible { display: block; }

.add-toggle-btn {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.65rem; letter-spacing: 4px; text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 14px;
  cursor: pointer;
  background: var(--surface);
  border: 1px dashed rgba(0,245,255,0.25);
  color: var(--rgb-2);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  transition: all 0.35s;
  backdrop-filter: blur(10px);
}
.add-toggle-btn:hover {
  border-color: var(--rgb-2);
  background: rgba(0,245,255,0.05);
  box-shadow: 0 0 30px rgba(0,245,255,0.1);
}
.add-toggle-btn .plus-icon {
  font-size: 1.1rem; line-height: 1;
  transition: transform 0.3s;
}
.add-toggle-btn.open .plus-icon { transform: rotate(45deg); }

.add-project-form-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.23,1,0.32,1);
}
.add-project-form-wrap.open { max-height: 700px; }

.add-project-form-inner {
  background: var(--surface);
  border: 1px solid rgba(0,245,255,0.14);
  border-top: none;
  border-radius: 0 0 14px 14px;
  padding: 28px 28px 24px;
  backdrop-filter: blur(14px);
}
.add-form-title {
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 4px; text-transform: uppercase;
  color: var(--rgb-2); margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.footer {
  text-align:center; padding:56px 0 18px;
  font-family:var(--font-mono); font-size:0.56rem;
  letter-spacing:3px; color:var(--text-muted); opacity:0.5;
}
.footer span { color:var(--rgb-2); }

/* ═══════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
═══════════════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  top: calc(var(--navbar-h) + 14px);
  right: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 2px;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid;
  backdrop-filter: blur(14px);
  animation: toastIn 0.35s ease forwards;
  max-width: 280px;
}
.toast.success { background: rgba(0,245,255,0.08); border-color: var(--rgb-2); color: var(--rgb-2); }
.toast.error   { background: rgba(255,45,120,0.08); border-color: var(--rgb-1); color: var(--rgb-1); }
@keyframes toastIn { from{opacity:0;transform:translateX(20px);} to{opacity:1;transform:translateX(0);} }
@keyframes toastOut { to{opacity:0;transform:translateX(20px);} }

/* ═══════════════════════════════════════════════════════
   UTILITY
═══════════════════════════════════════════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:translateY(0);} }

/* ═══════════════════════════════════════════════════════
   MOBILE — ≤ 600px
═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .wrapper { padding: 0 12px 60px; }
  .hero { padding: 50px 12px 54px; }
  .hero-eyebrow { font-size:0.54rem; letter-spacing:3px; margin-bottom:20px; }
  .hero-title { font-size:clamp(1.7rem,10vw,2.8rem); letter-spacing:-0.5px; }
  .hero-subtitle { font-size:0.7rem; letter-spacing:3px; margin-top:14px; }
  .hero-divider { width:110px; margin-top:22px; }
  .hero-rings { width:84vw; height:84vw; }
  .hero-metrics { gap:16px; margin-top:24px; }
  .metric-val { font-size:1.05rem; }
  .metric-lbl { font-size:0.42rem; }
  .metric-sep { height:28px; }
  .hero-corner { display:none; }
  .hero-typewriter { font-size:0.52rem; letter-spacing:2px; }
  .card { padding:20px 14px 22px; border-radius:16px; }
  .card-inner { flex-direction:column; align-items:center; gap:12px; }
  .logo-wrap { width:62px; height:62px; }
  .logo-svg  { width:56px; height:56px; }
  .card-content { width:100%; }
  .card-header { flex-direction:column; align-items:center; gap:8px; }
  .card-name { font-size:0.98rem; text-align:center; }
  .card-desc { font-size:0.87rem; text-align:center; line-height:1.6; }
  .tags { justify-content:center; gap:6px; }
  .tag { font-size:0.54rem; padding:4px 8px; }
  .launch-btn { width:100%; justify-content:center; padding:13px 14px; font-size:0.6rem; letter-spacing:2px; }
  .cards { gap:20px; }
  .section-label { font-size:0.5rem; letter-spacing:3px; margin-bottom:24px; }
  .reveal-left, .reveal-right { transform:translateY(30px); }
  .orb-1, .orb-4 { display:none; }
  .orb-2 { width:300px; height:300px; }
  .orb-3 { width:200px; height:200px; }
  .admin-controls { top:10px; right:10px; }
  .add-project-form-inner { padding:20px 16px 18px; }
  .nav-brand { font-size:0.62rem; }
}

@media (max-width: 380px) {
  .hero-title { font-size:1.55rem; }
  .card-name  { font-size:0.9rem; }
  .hero-metrics { flex-wrap:wrap; justify-content:center; gap:12px; }
  .metric-sep { display:none; }
}