/* ─── HERO ─── */
#hero{
  min-height:100vh;padding:100px 5% 80px;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
  background:var(--white);position:relative;overflow:hidden;
}
.hero-bg-deco{
  position:absolute;top:0;right:0;width:55%;height:100%;
  background:var(--off);clip-path:polygon(8% 0,100% 0,100% 100%,0 100%);
  z-index:0;
}
.hero-stripe{
  position:absolute;top:0;right:0;width:4px;height:100%;
  background:linear-gradient(180deg,var(--blue-mid) 0%,var(--red) 100%);
  z-index:1;
}
.hero-l{position:relative;z-index:2}
.hero-r{position:relative;z-index:2}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--off2);border:1px solid var(--border2);
  border-radius:100px;padding:6px 18px;margin-bottom:32px;
  font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.5px;
}
.hero-dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

.hero-h1{
  font-family:var(--ff-head);
  font-size:clamp(38px,5vw,72px);
  font-weight:800;line-height:1.03;letter-spacing:-2px;
  color:var(--navy);margin-bottom:28px;
}
.hero-h1 .red{color:var(--red)}
.hero-h1 .red.animated-gradient{color:transparent}
.hero-h1 .blue{color:var(--blue-mid)}
.hero-h1 .blue.animated-gradient{color:transparent}

.hero-p{font-size:17px;color:var(--muted);line-height:1.75;max-width:480px;margin-bottom:44px;font-weight:300}

.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.btn-red{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--red);color:#fff;
  padding:14px 30px;border-radius:11px;font-size:15px;font-weight:700;
  transition:background var(--t),transform var(--t);
}
.btn-red:hover{background:var(--red2);transform:translateY(-2px)}
.btn-navy{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--navy);color:#fff;
  padding:14px 30px;border-radius:11px;font-size:15px;font-weight:600;
  transition:background var(--t),transform var(--t);
}
.btn-navy:hover{background:var(--navy2);transform:translateY(-2px)}
.btn-outline{
  display:inline-flex;align-items:center;gap:9px;
  border:1.5px solid var(--border2);color:var(--navy);
  padding:13px 28px;border-radius:11px;font-size:15px;font-weight:600;
  transition:border-color var(--t),background var(--t);
}
.btn-outline:hover{border-color:var(--blue-mid);background:var(--off)}

.hero-stats{
  display:flex;gap:40px;margin-top:60px;padding-top:36px;
  border-top:1px solid var(--border);
}
.stat-n{
  font-family:var(--ff-head);font-size:36px;font-weight:800;color:var(--navy);line-height:1;
}
.stat-n span{color:var(--red)}
.stat-l{font-size:12px;color:var(--muted);margin-top:6px;font-weight:500}

/* hero image */
.hero-imgs{position:relative;height:580px}
.hi-main{
  position:absolute;right:0;top:0;width:90%;height:450px;
  border-radius:20px;overflow:hidden;border:1px solid var(--border2);
  box-shadow:0 24px 64px rgba(11,31,75,.12);
}
.hi-main img{width:100%;height:100%;object-fit:cover;filter:brightness(.82) saturate(.9)}
.hi-float{
  position:absolute;left:0;bottom:0;width:52%;height:250px;
  border-radius:16px;overflow:hidden;border:2px solid var(--white);
  box-shadow:0 20px 56px rgba(11,31,75,.18);
}
.hi-float img{width:100%;height:100%;object-fit:cover;filter:brightness(.85) saturate(.9)}
.hi-card{
  position:absolute;top:36px;left:-8px;
  background:var(--white);border:1px solid var(--border2);
  border-radius:14px;padding:14px 18px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 12px 40px rgba(11,31,75,.15);
}
.hi-card-stripe{width:4px;height:40px;border-radius:2px;background:linear-gradient(180deg,var(--blue-mid),var(--red));flex-shrink:0}
.hi-ct{font-size:13px;font-weight:700;color:var(--navy)}
.hi-cs{font-size:11.5px;color:var(--muted);margin-top:3px}