/* ==========================================================
   HERO.CSS — Hero Section, Video, Overlay, Aurora Background
========================================================== */

.hero{
  min-height:100svh;
  display:flex; align-items:center;
  position:relative;
  overflow:hidden;
  padding-top:var(--header-h);
}

/* ---------- Background layers ---------- */
.hero__bg{ position:absolute; inset:0; z-index:0; }

.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.28;
}

.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 100%);
}

.orb{
  position:absolute; border-radius:50%;
  filter:blur(80px);
  opacity:.55;
  animation:float 14s ease-in-out infinite;
}
.orb--1{ width:420px; height:420px; background:var(--primary); top:-10%; left:-8%; }
.orb--2{ width:320px; height:320px; background:var(--secondary); bottom:-12%; right:-6%; animation-delay:-4s; }
.orb--3{ width:220px; height:220px; background:#2d5fd6; top:40%; left:60%; animation-delay:-8s; }

.hero__overlay{
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse 60% 50% at 50% 40%, transparent 0%, var(--bg) 78%),
             linear-gradient(180deg, rgba(5,8,22,.2), var(--bg) 96%);
}

/* ---------- Content ---------- */
.hero__content{ position:relative; z-index:2; text-align:center; }

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--secondary);
  padding:8px 18px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  margin-bottom:24px;
}

/* ---------- Photo frame (glass card + parallax tilt target) ---------- */
.hero__photo-wrap{ display:flex; justify-content:center; margin-bottom:28px; }
.hero__photo-frame{
  position:relative;
  width:132px; height:132px;
  border-radius:50%;
  padding:4px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  transform-style:preserve-3d;
  will-change:transform;
}
.hero__photo-inner{
  width:100%; height:100%;
  border-radius:50%;
  background:var(--card);
  display:grid; place-items:center;
  overflow:hidden;
  border:3px solid var(--bg);
}
.hero__photo-inner i{ font-size:52px; color:var(--primary); }
.hero__photo-inner img{
  width:100%; height:100%; object-fit:cover;
}

.hero__title{
  font-size:clamp(34px,6vw,60px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.08;
  margin-bottom:10px;
}
.hero__role{
  font-size:clamp(15px,2vw,18px);
  font-weight:600;
  color:var(--secondary);
  margin-bottom:16px;
}
.hero__tagline{
  color:var(--paragraph);
  font-size:15.5px;
  max-width:46ch;
  margin:0 auto 30px;
}

.hero__chips{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:34px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--paragraph);
}
.chip i{ color:var(--primary); }

.hero__actions{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }

.hero__scroll-hint{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid var(--border); border-radius:20px;
  z-index:2;
}
.hero__scroll-hint span{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; border-radius:2px; background:var(--secondary);
  animation:scrollhint 1.8s ease-in-out infinite;
}