/* Eagle-Chris v3 adjustments: simpler, brighter, more readable */
:root{
  --brand-navy:#0b1220;
  --brand-blue:#1f5bff;
  --brand-green:#18a957;
  --text:#0f172a;
  --muted:#475569;
  --border:#e2e8f0;
  --bg:#ffffff;
}

body{ background: var(--bg); color: var(--text); }
.container{ max-width: 1140px; }

.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .brand{ display:flex; align-items:center; gap:12px; }
.site-header .brand img{ width:44px; height:44px; border-radius:10px; background:#fff; }
.site-header .brand .name{ font-size:18px; font-weight:800; line-height:1.1; }
.site-header .brand .tagline{ font-size:13px; color:var(--muted); margin-top:2px; }

.nav a{ color: var(--text); font-weight:600; }
.nav a:hover{ color: var(--brand-blue); }

.hero{
  background: linear-gradient(110deg, rgba(11,18,32,.86), rgba(11,18,32,.55)),
              url('../img/v3/hero-engineer.jpg') center/cover no-repeat;
  color:#fff;
  padding: 72px 0 64px;
}
.hero h1{ font-size: clamp(28px, 3.4vw, 44px); line-height:1.05; margin: 0 0 14px; }
.hero p{ max-width: 720px; font-size: 18px; color: rgba(255,255,255,.86); }
.hero .chips{ display:flex; flex-wrap:wrap; gap:10px; margin: 18px 0 22px; }
.hero .chip{
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  padding:8px 12px; border-radius:999px; font-size:13px;
}
.btn{ border-radius: 12px; font-weight:700; }
.btn-primary{ background: var(--brand-blue); border: 0; }
.btn-success{ background: var(--brand-green); border: 0; }
.btn-outline{ background: transparent; border:1px solid rgba(255,255,255,.35); color:#fff; }
.btn-outline:hover{ border-color: rgba(255,255,255,.6); }

.section{ padding: 56px 0; }
.section h2{ font-size: 28px; margin: 0 0 12px; }
.section p.lead{ color: var(--muted); font-size: 16px; max-width: 860px; }

.cards{ display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; margin-top: 22px; }
.card{
  grid-column: span 4;
  border:1px solid var(--border);
  border-radius: 16px;
  overflow:hidden;
  background:#fff;
}
.card img{ width:100%; height: 190px; object-fit: cover; display:block; }
.card .body{ padding:16px; }
.card .title{ font-weight:800; margin:0 0 8px; font-size: 18px; }
.card .text{ color: var(--muted); margin:0; font-size: 14.5px; line-height:1.55; }
.card .link{ display:inline-block; margin-top: 12px; font-weight:700; color: var(--brand-blue); text-decoration:none; }

@media (max-width: 980px){
  .card{ grid-column: span 6; }
}
@media (max-width: 640px){
  .card{ grid-column: span 12; }
  .hero{ padding: 54px 0 52px; }
}

.split{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items:start; }
@media (max-width: 860px){ .split{ grid-template-columns: 1fr; } }

.kpi{
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  background:#fff;
}
.kpi .row{ display:flex; gap:12px; flex-wrap:wrap; }
.kpi .item{ flex:1; min-width: 140px; }
.kpi .item .label{ color: var(--muted); font-size: 12px; }
.kpi .item .value{ font-weight: 800; font-size: 16px; }

.gallery-grid{ display:grid; grid-template-columns: repeat(12,1fr); gap:12px; margin-top: 18px; }
.gallery-grid a{ grid-column: span 4; border-radius: 14px; overflow:hidden; display:block; border:1px solid var(--border); }
.gallery-grid img{ width:100%; height: 180px; object-fit: cover; display:block; }
@media (max-width: 980px){ .gallery-grid a{ grid-column: span 6; } }
@media (max-width: 640px){ .gallery-grid a{ grid-column: span 12; } }

.video-grid{ display:grid; grid-template-columns: repeat(12,1fr); gap:16px; margin-top: 18px; }
.video{ grid-column: span 6; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:#fff; }
.video .cap{ padding:12px 14px; font-weight:700; }
.video iframe{ width:100%; aspect-ratio: 16 / 9; border:0; display:block; }
@media (max-width: 860px){ .video{ grid-column: span 12; } }

.testimonials{ display:grid; grid-template-columns: repeat(12,1fr); gap: 16px; margin-top: 18px; }
.quote{ grid-column: span 4; border:1px solid var(--border); border-radius:16px; background:#fff; padding:16px; }
.quote p{ color: var(--muted); margin:0 0 10px; }
.quote .who{ font-weight:800; }
@media (max-width: 980px){ .quote{ grid-column: span 6; } }
@media (max-width: 640px){ .quote{ grid-column: span 12; } }

.footer{
  border-top:1px solid var(--border);
  padding: 22px 0;
  color: var(--muted);
  font-size: 13px;
}

.whatsapp-float{
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  background: var(--brand-green); color:#fff;
  border-radius: 999px; padding: 12px 14px;
  display:flex; align-items:center; gap:10px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  text-decoration:none; font-weight:800;
}
.whatsapp-float:hover{ filter: brightness(1.05); color:#fff; }

/* Video grid (Projects & Videos) */
.video-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.video-card{
  position: relative;
  grid-column: span 6;
  display: block;
  border: 1px solid rgba(10, 19, 33, 0.12);
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 18px rgba(10, 19, 33, 0.06);
}
.video-card img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.video-meta{
  padding: 12px 14px 14px;
}
.video-meta h4{
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}
.video-meta p{
  margin: 8px 0 0;
  font-size: 14px;
  opacity: 0.75;
}
.play-badge{
  position:absolute;
  left: 12px;
  top: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 16px;
}
.video-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(10, 19, 33, 0.12);
}
@media (max-width: 860px){
  .video-card{ grid-column: span 12; }
}