/* ═══════════════════════════════════════════
   JUAN URBINA — SHARED DESIGN SYSTEM
   All pages import this. Do not duplicate.
   ═══════════════════════════════════════════ */

/* ─── FONTS (loaded per-page via Google Fonts link) ─── */
/* Anton = headers | Inter = body */

/* ─── TOKENS ─── */
:root {
  --black:   #000000;
  --navy:    #1A1F36;
  --navy2:   #141824;
  --navy3:   #0f1220;
  --blue:    #007BFF;
  --blue-glow: rgba(0,123,255,.18);
  --blue-dim:  rgba(0,123,255,.08);
  --ash:     #B0B0B0;
  --ash2:    #6e6e6e;
  --white:   #FAFAFA;
  --border:  #252c44;
  --border2: #2e3654;
  --orange:  #ffb347;
}

/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--black);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ═══ TOPBAR ═══ */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding: 15px 28px;
  background: var(--navy3);
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index:300;
  backdrop-filter: blur(14px);
}
.tb-logo {
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.tb-logo img { height:30px; width:auto; filter:brightness(1.15); }
.tb-logo span {
  font-family:'Anton',sans-serif;
  font-size:16px; letter-spacing:2.4px;
  color:var(--white); text-transform:uppercase;
}
.tb-nav { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.tb-nav a {
  text-decoration:none;
  font-size:11.5px; font-weight:500;
  color:var(--ash2);
  padding:6px 15px; border-radius:18px;
  border:1px solid transparent;
  transition:.2s;
}
.tb-nav a:hover,
.tb-nav a.active {
  background: var(--blue-dim);
  border-color: rgba(0,123,255,.28);
  color: var(--blue);
}

/* ═══ BADGE ═══ */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(0,123,255,.3);
  background: var(--blue-dim);
  color: var(--blue);
  font-size:10.5px; font-weight:600;
  letter-spacing:1.8px; text-transform:uppercase;
  padding: 5px 18px; border-radius:20px;
}

/* ═══ FOOTER ═══ */
footer {
  text-align:center;
  padding: 52px 24px;
  border-top:1px solid var(--border);
  margin-top: 70px;
}
.ft-logo {
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin-bottom:14px;
}
.ft-logo img { height:20px; filter:brightness(1.15); }
.ft-logo span {
  font-family:'Anton',sans-serif;
  font-size:12px; letter-spacing:2.2px;
  color:var(--ash); text-transform:uppercase;
}
footer p { font-size:11.5px; color:var(--ash2); line-height:1.8; }
footer a { color:var(--blue); text-decoration:none; }
footer a:hover { text-decoration:underline; }

/* ═══ NETLIFY FORM (shared across pages) ═══ */
.form-wrap { max-width: 400px; margin: 0 auto; }

.form-wrap input {
  width:100%;
  background: rgba(26,31,54,.7);
  border:1px solid var(--border);
  border-radius:10px;
  padding: 13px 18px;
  color: var(--white);
  font-family:'Inter',sans-serif;
  font-size:14px;
  margin-bottom:10px;
  outline:none;
  transition: border-color .2s;
}
.form-wrap input:focus { border-color: var(--blue); }
.form-wrap input::placeholder { color: var(--ash2); }

.form-wrap button[type="submit"] {
  width:100%;
  background: var(--blue);
  color:#fff; border:none;
  border-radius:10px;
  padding:14px;
  font-family:'Anton',sans-serif;
  font-size:16px; letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  transition: transform .15s, box-shadow .2s;
}
.form-wrap button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 30px rgba(0,123,255,.32);
}

.trust {
  font-size:11px; color:var(--ash2);
  text-align:center; margin-top:12px;
}

/* ─── SUCCESS STATE (after form submit) ─── */
.success-state {
  display:none;
  text-align:center;
  padding: 36px 20px;
}
.success-state.visible {
  display:block;
  animation: fadeUp .4s ease;
}
.success-state .check-icon {
  width:68px; height:68px;
  background: rgba(0,123,255,.12);
  border:2px solid var(--blue);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 22px;
  font-size:30px; color:var(--blue);
}
.success-state h3 {
  font-family:'Anton',sans-serif;
  font-size:22px; text-transform:uppercase;
  letter-spacing:1px; margin-bottom:10px;
}
.success-state p {
  font-size:13.5px; color:var(--ash);
  line-height:1.7; max-width:380px;
  margin: 0 auto 24px;
}
.dl-btn {
  display:inline-block;
  background: var(--blue); color:#fff;
  text-decoration:none;
  padding: 14px 32px; border-radius:10px;
  font-family:'Anton',sans-serif;
  font-size:16px; letter-spacing:1px;
  text-transform:uppercase;
  transition: transform .15s, box-shadow .2s;
}
.dl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 30px rgba(0,123,255,.32);
}

/* ─── UTILITY ─── */
.acc   { color: var(--blue); }
.dim   { color: var(--ash2); }
hr.div { max-width:840px; margin:0 auto; border:none; border-top:1px solid var(--border); }

/* ─── KEYFRAMES ─── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0);    }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width:600px) {
  .topbar        { padding:13px 16px; }
  .tb-logo span  { font-size:14px; letter-spacing:1.6px; }
  .tb-nav a      { font-size:10.5px; padding:5px 10px; }
}