:root{
  --bg: #0A0E27;
  --violet: #6C5CE7;
  --teal: #00D9C0;
  --coral: #FF6B9D;
  --glass: rgba(255,255,255,0.055);
  --glass-strong: rgba(255,255,255,0.09);
  --glass-border: rgba(255,255,255,0.14);
  --text: #F5F6FA;
  --muted: #9BA0BC;
  --danger: #FF6B6B;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  overflow-x:hidden;
  min-height:100vh;
}

.atmosphere{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background: radial-gradient(ellipse at top, #131736 0%, var(--bg) 55%);
}
.blob{ position:absolute; border-radius:50%; filter: blur(90px); opacity:0.5; will-change: transform; }
.blob1{ width:520px; height:520px; background:var(--violet); top:-120px; left:-100px; animation: drift1 22s ease-in-out infinite; }
.blob2{ width:460px; height:460px; background:var(--teal); bottom:-140px; right:-80px; animation: drift2 26s ease-in-out infinite; }
.blob3{ width:360px; height:360px; background:var(--coral); top:38%; left:55%; opacity:0.3; animation: drift3 30s ease-in-out infinite; }

@keyframes drift1{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(60px,50px) } }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-50px,-40px) } }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(-40px,30px) scale(1.1) } }

.wrap{ position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:0 32px; }

nav{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(16px);
  background: rgba(10,14,39,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav-inner{ max-width:1180px; margin:0 auto; padding:18px 32px; display:flex; align-items:center; justify-content:space-between; }
.brand{ font-family:'Unbounded', sans-serif; font-weight:600; font-size:1.05rem; display:flex; align-items:center; gap:10px; }
.brand-dot{ width:9px; height:9px; border-radius:50%; background: linear-gradient(135deg, var(--violet), var(--teal)); box-shadow: 0 0 12px var(--violet); }
.nav-links{ display:flex; gap:34px; align-items:center; }
.nav-links a{ color: var(--muted); text-decoration:none; font-size:0.92rem; font-weight:500; transition: color 0.25s ease; }
.nav-links a:hover{ color: var(--text); }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 12px 22px; border-radius: 12px;
  font-size: 0.92rem; font-weight: 600; text-decoration:none; cursor:pointer; border:none;
  font-family:'Inter', sans-serif;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn-primary{ background: linear-gradient(135deg, var(--violet), #8C7BFF); color: white; box-shadow: 0 8px 24px rgba(108,92,231,0.35); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(108,92,231,0.5); }
.btn-ghost{ background: var(--glass); border: 1px solid var(--glass-border); color: var(--text); backdrop-filter: blur(10px); }
.btn-ghost:hover{ background: var(--glass-strong); transform: translateY(-2px); }
.btn-danger{ background: rgba(255,107,107,0.12); border: 1px solid rgba(255,107,107,0.35); color: var(--danger); }
.btn-danger:hover{ background: rgba(255,107,107,0.2); }
.btn-sm{ padding: 8px 14px; font-size: 0.82rem; border-radius: 9px; }

.card{
  position:relative;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  border-radius: 20px;
  padding: 28px;
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.status{ display:inline-flex; align-items:center; gap:7px; font-size: 0.8rem; font-weight:500; color: var(--muted); margin-bottom: 14px; }
.status .dot{ width:7px; height:7px; border-radius:50%; }
.status.producao .dot{ background: var(--teal); box-shadow:0 0 8px var(--teal); }
.status.beta .dot{ background: var(--coral); box-shadow:0 0 8px var(--coral); }

.tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{ font-size: 0.78rem; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--muted); }

input, textarea, select{
  width:100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  outline:none;
  transition: border-color 0.2s ease;
}
input:focus, textarea:focus, select:focus{ border-color: var(--violet); }
label{ display:block; font-size:0.82rem; color: var(--muted); margin-bottom:6px; font-weight:500; }
textarea{ resize: vertical; min-height: 80px; }

@media (prefers-reduced-motion: reduce){ .blob{ animation:none; } }