:root{
  --c1:#ff3b30; --c2:#ff9500;
  --ink:#0f172a; --ink-2:#334155; --wash:#ffffff;
  --nav-bg: rgba(17, 25, 40, .36);
  --nav-border: rgba(148, 163, 184, .18);
}

/* NAVBAR – glassmorphism elegante */
.navbar {
  transition: all .35s ease;
}
.bg-blur{
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.navbar.nav-scrolled{
  background: rgba(17, 25, 40, .58);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

/* HERO – imagen real + overlay transparente y elegante */
.hero{
  min-height: 78vh;
  position: relative;
  color: #fff;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(180deg, rgba(12,12,14,.35), rgba(12,12,14,.35)),
    url("../assets/img/hero-tech.jpg");  /* <– tu imagen real */
  background-size: cover;
  background-position: center;
  filter: saturate(115%) contrast(105%) brightness(98%);
  transform: scale(1.02);              /* leve profundidad */
}
.hero .hero-bg{ display:none; }         /* ocultamos el degradado plano anterior */
.hero .hero-noise{ display:none; }

.hero .display-5{
  font-weight: 900;
  letter-spacing: -.3px;
  text-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* Tiles */
.tile{background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:18px; padding:22px; box-shadow:0 10px 32px rgba(0,0,0,.08)}
.icon-lg{font-size:36px; color:#ff8c35}

/* Pills */
.pill{display:inline-block;padding:10px 16px;border-radius:999px;background:#fff;border:1px solid rgba(15,23,42,.12); box-shadow:0 6px 18px rgba(0,0,0,.06)}

/* About */
.about-card{border:1px solid rgba(15,23,42,.08)}

/* Contact */
.bg-ink{background:#0f172a}
.bg-gradient{background:linear-gradient(135deg,var(--c1),var(--c2));}
.social{width:44px;height:44px;border-radius:999px;background:#ffffff;display:inline-flex;align-items:center;justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.18)}
.social img{width:22px;height:22px}

/* Preloader sin logo */
#preloader{position:fixed; inset:0; background:#0d0d0d; display:flex; align-items:center; justify-content:center; z-index:9999; transition:opacity .6s ease}
#preloader.hide{opacity:0; pointer-events:none}
.pulse-dot{width:16px;height:16px;border-radius:50%; background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 0 0 0 rgba(255,149,0,.6); animation:pulser 1.2s infinite ease-in-out}
@keyframes pulser{0%{transform:scale(.9); box-shadow:0 0 0 0 rgba(255,149,0,.6)}70%{transform:scale(1); box-shadow:0 0 0 14px rgba(255,149,0,0)}100%{transform:scale(.9); box-shadow:0 0 0 0 rgba(255,149,0,0)}}

/* Lists */
.list{padding-left:18px}
.list li{margin:.35rem 0}