:root {
  --deep-navy: #0a0f1e;
  --pure-white: #ffffff;
  --studio-gray: #8e9aaf;
  --electric-cyan: #00f0ff;
  --cyan-soft: rgba(0, 240, 255, 0.26);
}

* {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

body {
  color: var(--pure-white);
  background-color: var(--deep-navy);
}

.draft-grid-background {
  background-color: var(--deep-navy);
  background-image:
    linear-gradient(to right, rgba(0, 240, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 240, 255, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}

.draft-navbar {
  background: rgba(10, 15, 30, 0.82);
  border-bottom: 1px solid var(--cyan-soft);
  backdrop-filter: blur(10px);
}

.nav-link { color: #d6deea; }
.nav-link.active, .nav-link:hover { color: var(--electric-cyan) !important; }

.text-cyan, .link-cyan { color: var(--electric-cyan); }
.link-cyan:hover { color: #8df8ff; }
.text-muted-brand { color: var(--studio-gray); font-weight: 400; }

.btn-cyan {
  color: #02131a;
  border: 1px solid var(--electric-cyan);
  background: linear-gradient(90deg, #00f0ff, #00bdd5);
  font-weight: 700;
}

.btn-cyan:hover { filter: brightness(1.07); }

.hero {
  padding: 84px 0 64px;
}

.badge-cyan {
  border: 1px solid var(--cyan-soft);
  color: var(--electric-cyan);
  background: rgba(0, 240, 255, 0.08);
}

.card-draft {
  border: 0.7px solid rgba(0, 240, 255, 0.35);
  background: rgba(12, 20, 38, 0.9);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.14);
  height: 100%;
}

.card-draft:hover {
  border-color: rgba(0, 240, 255, 0.55);
  transform: translateY(-2px);
  transition: 220ms cubic-bezier(0.2, 1, 0.3, 1);
}

.section-title {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 800;
}

.text-soft {
  color: var(--studio-gray);
}

.brand-image {
  max-width: 320px;
  border-radius: 20px;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.form-control, .form-control:focus {
  color: #dbe8f5;
  background-color: rgba(13, 22, 41, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.35);
  box-shadow: none;
}

.border-cyan-soft {
  border-color: rgba(0, 240, 255, 0.24) !important;
}

.alert {
  border: 1px solid rgba(0, 240, 255, 0.3);
}