/* ═══════════════════════════════════════════
   ANTON MARRERO — Premium Design
   Philosophy: restraint = confidence = luxury
   ═══════════════════════════════════════════ */

:root{
  --bg:#05080F;
  --bg2:#080D1A;
  --surface:#0B1221;
  --surface-h:#0E1729;
  --line:rgba(255,255,255,.1);
  --line-h:rgba(255,255,255,.18);
  --accent:#5B9BFF;
  --accent-soft:rgba(91,155,255,.12);
  --text:#DEE4EE;
  --text-bright:#F4F6FA;
  --dim:#9AABBF;
  --muted:#6B7FA0;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans','Helvetica Neue',sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ── BASE ── */
body{
  font-family:var(--sans);background:var(--bg);color:var(--text);
  font-weight:300;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:#fff}
.text-accent{color:var(--accent)!important}
.text-dim{color:var(--dim)}
.text-dim-link{color:var(--dim);text-decoration:none;transition:color .5s}
.text-dim-link:hover{color:#fff}

/* ── NAVBAR ── */
.nav-custom{
  background:rgba(5,8,15,.9)!important;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.brand-custom{
  font-family:var(--serif);font-size:1.2rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-bright)!important;font-weight:400;
}
.nav-custom .nav-link{
  font-family:var(--sans);font-size:.65rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text)!important;font-weight:400;
  transition:color .3s;
}
.nav-custom .nav-link:hover{color:#fff!important}
.nav-custom .navbar-toggler{border:0;padding:.25rem}
.nav-custom .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important;
  filter:none!important;width:1.6em;height:1.6em;
}
.nav-custom .navbar-toggler:focus{box-shadow:none}

/* ── HERO ── */
.hero-section{
  min-height:90vh;position:relative;z-index:1;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding-top:5rem;
}
.overline{
  font-family:var(--mono),var(--sans);
  font-size:.6rem;letter-spacing:.5em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.2rem;font-weight:400;
}
.hero-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(3rem,7vw,6.5rem);line-height:1.04;
  color:var(--text-bright);
}
.hero-title em{
  font-style:italic;color:var(--accent);
  -webkit-text-fill-color:var(--accent);
}
.hero-sub{
  font-size:1rem;color:var(--dim);max-width:500px;
  margin-top:1.5rem;line-height:1.9;font-weight:300;
}

/* ── BUTTONS ── */
.btn-cta{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.25em;
  text-transform:uppercase;font-weight:400;
  padding:1rem 2.2rem;color:var(--text)!important;text-decoration:none;
  border:1px solid rgba(255,255,255,.18);background:transparent;
  transition:all .6s var(--ease);margin-top:2rem;
}
.btn-cta:hover{
  border-color:var(--accent);color:var(--text-bright)!important;
  box-shadow:0 0 40px rgba(75,139,245,.06);
}
.btn-cta-fill{
  background:var(--accent)!important;border-color:var(--accent)!important;
  color:#fff!important;letter-spacing:.2em;
}
.btn-cta-fill:hover{
  background:#3A7AE4!important;
  box-shadow:0 0 50px rgba(75,139,245,.15);
}

.btn-submit{
  font-family:var(--sans);font-size:.62rem;letter-spacing:.25em;
  text-transform:uppercase;font-weight:400;
  padding:1rem 2.5rem;color:#fff;border:none;cursor:pointer;
  background:var(--accent);transition:all .6s var(--ease);
}
.btn-submit:hover{background:#3A7AE4;box-shadow:0 8px 30px rgba(75,139,245,.2);transform:translateY(-1px)}
.btn-submit:disabled{opacity:.3;transform:none;box-shadow:none}

/* ── SECTIONS ── */
.section-label{
  font-family:var(--mono),var(--sans);
  font-size:.55rem;letter-spacing:.5em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.8rem;font-weight:400;
}
.section-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,4vw,3rem);line-height:1.15;
  color:var(--text-bright);
}
.section-divider{
  display:block;width:40px;height:1px;margin:1.5rem auto 0;
  background:var(--accent);opacity:.6;
}
.py-lg-6{padding-top:3.5rem!important;padding-bottom:3.5rem!important}
.bg-section{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pt-page{padding-top:10rem}

/* ── STAT CARDS ── */
.stat-card{
  padding:2rem;height:100%;
  border:1px solid var(--line);background:transparent;
  transition:all .6s var(--ease);
}
.stat-card:hover{
  border-color:var(--line-h);background:var(--surface);
}
.stat-num{
  font-family:var(--serif);font-size:2.8rem;line-height:1;
  color:var(--accent);font-weight:300;
}
.stat-label{
  font-family:var(--mono),var(--sans);
  font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-top:.8rem;line-height:1.5;
}

/* ── EXPERTISE CARDS ── */
.exp-card{
  padding:2.5rem 2rem;height:100%;
  border:1px solid var(--line);background:transparent;
  transition:all .6s var(--ease);
}
.exp-card:hover{
  border-color:var(--line-h);background:var(--surface);
  transform:translateY(-2px);
}
.exp-card h3{
  font-family:var(--serif);font-size:1.3rem;font-weight:400;
  margin-bottom:.8rem;color:var(--text-bright);
}
.exp-card .bi{font-size:.85rem;opacity:.8}
.exp-card p{font-size:.88rem;color:var(--dim);margin-bottom:0;line-height:1.75}

/* ── CTA ── */
.cta-section{
  background:var(--bg2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.cta-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.2;
  color:var(--text-bright);
}
.cta-title em{font-style:italic;color:var(--accent)}

/* ── FORM ── */
.input-custom{
  background:var(--surface)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  color:var(--text)!important;font-size:.9rem;font-weight:300;
  padding:.9rem 1.1rem;border-radius:0!important;
  transition:border-color .5s;
}
.input-custom:focus{
  border-color:var(--accent)!important;
  box-shadow:none!important;
  background:var(--surface-h)!important;
}
.input-custom::placeholder{color:var(--dim)!important;font-weight:300}
.form-select.input-custom{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239AABBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")!important;
  background-repeat:no-repeat!important;
  background-position:right .75rem center!important;
  background-size:16px 12px!important;
  padding-right:2.5rem!important;
}
.label-custom{
  font-family:var(--mono),var(--sans);
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);font-weight:400;margin-bottom:.35rem;
}
.form-note{font-size:.78rem;color:var(--dim);border-left:1px solid var(--accent);padding-left:1rem}

/* ── BLOG ── */
.blog-card-title{
  font-family:var(--serif);font-weight:400;font-size:1.15rem;
  color:var(--text-bright);transition:color .5s;margin-bottom:.6rem;
}
.blog-card-title:hover{color:var(--accent)}
.blog-item{transition:all .5s var(--ease);color:inherit}
.blog-item:hover{padding-left:1rem}
.blog-item-title{
  font-family:var(--serif);font-weight:400;font-size:1.5rem;
  color:var(--text-bright);transition:color .5s;
}
.blog-item:hover .blog-item-title{color:var(--accent)}

/* ── PAGINATION ── */
.page-link-custom{
  background:transparent!important;border:1px solid rgba(255,255,255,.12)!important;
  color:var(--text)!important;font-size:.7rem;letter-spacing:.1em;
  padding:.5rem .9rem;transition:all .4s var(--ease);
}
.page-link-custom:hover{
  border-color:var(--accent)!important;color:var(--text-bright)!important;
  background:var(--surface)!important;
}
.page-item.active .page-link-custom{
  background:var(--accent)!important;border-color:var(--accent)!important;
  color:#fff!important;
}

/* ── POST ── */
.post-body{font-size:1.05rem;color:var(--dim);line-height:1.95}
.post-body p{margin-bottom:1.5rem}
.post-body strong{color:var(--text-bright);font-weight:400}

/* ── SECTION DIVIDERS ── */
.section-line{
  display:block;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(91,155,255,.3),rgba(91,155,255,.12),transparent);
}

/* ── FOOTER ── */
.footer-custom{border-top:1px solid var(--line);background:var(--bg);padding-top:3rem;padding-bottom:2rem}
.footer-custom .brand-custom{font-size:.95rem;letter-spacing:.15em}
.footer-copy{font-size:.65rem;color:var(--dim);letter-spacing:.1em;margin-top:1rem}
.footer-email{color:var(--accent);text-decoration:none;font-size:.85rem;transition:color .3s}
.footer-email:hover{color:var(--text)}

/* ── BACK TO TOP ── */
.btn-btt{
  position:fixed;bottom:2rem;right:2rem;z-index:80;
  width:40px;height:40px;
  background:var(--surface);border:1px solid rgba(255,255,255,.15);
  color:var(--text);font-size:.8rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all .6s var(--ease);
}
.btn-btt.show{opacity:1;visibility:visible;transform:translateY(0)}
.btn-btt:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

/* ── SCROLL HINT ── */
.scroll-hint{margin-top:3rem}
.scroll-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);color:var(--text);
  text-decoration:none;font-size:1.1rem;
  transition:all .6s var(--ease);
  animation:bounce 2.5s var(--ease) infinite 2s;
}
.scroll-arrow:hover{
  border-color:var(--accent);color:var(--accent);
  transform:translateY(3px);
  box-shadow:0 0 25px rgba(75,139,245,.1);
}
@keyframes bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(8px)}
}

/* ── ANIMATIONS ── */
.anim{opacity:0;transform:translateY(25px);animation:fadeUp .9s var(--ease) forwards}
.a1{animation-delay:.3s}.a2{animation-delay:.5s}.a3{animation-delay:.7s}.a4{animation-delay:.9s}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.rv{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.v{opacity:1;transform:translateY(0)}
