.hero{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  align-items:center;
  gap:clamp(20px,4vw,48px);
  padding:60px 24px;
  background:
    radial-gradient(600px 360px at 10% 10%, rgba(172,255,79,0.18), transparent 60%),
    radial-gradient(700px 420px at 90% 15%, rgba(172,255,79,0.12), transparent 65%),
    #0a0f1c;
  color:#e9edf6;
}

/* ===== heading ===== */
.herotitle{
  font-size:clamp(2.6rem,7vw,4rem);
  line-height:1.05;
  margin:0 0 16px 0;
  font-weight:800;
}

/* "Stanford Institute of" — outline only, fill on hover from left */
.outline{
  color:transparent;                               /* no fill initially */
  -webkit-text-stroke:2px rgba(255,255,255,0.35);  /* outline */
  text-stroke:2px rgba(255,255,255,0.35);

  /* prepare the white fill sweep */
  background-image:linear-gradient(90deg,#ffffff,#ffffff);
  background-repeat:no-repeat;
  background-size:0% 100%;                         /* start at 0% */
  -webkit-background-clip:text;
  background-clip:text;
  transition:background-size .9s ease;             /* smooth sweep */
}
.herotitle:hover .outline{
  background-size:100% 100%;                       /* fill left→right */
  -webkit-text-stroke:2.5px #ffffff;               /* crisper outline on hover */
  text-stroke:2.5px #ffffff;
}

/* "Technology" — keep lime */
.fill{
  color:#d7ff5e;
}

/* ===== copy & layout bits ===== */
.herosubtitle{
  font-size:1.05rem;
  line-height:1.65;
  color:#a9b2c4;
  max-width:680px;
  margin:0 0 22px 0;
}

.herobadges{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  margin:18px 0 24px;
}
.badge{
  padding:8px 12px;
  border-radius:15px;
 background: #121a2b !important;
  border:1px solid rgba(255,255,255,.14);
  color:#e9edf6;
}
/* lime-on-dark like the mock */
.badge:first-child{ background:#2a3418; border-color:#9adf37; color:#d9ff7a; }
.badge:nth-child(2){ background:#2a3418; border-color:#b6ff52; color:#eaff99; }

.heroactionswrapper{ margin-top:8px; }
.heroactions{ display:flex; gap:12px; align-items:center; }

/* ===== buttons ===== */
.btn{
  padding:12px 18px;
  border:0; border-radius:12px;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn:active{ transform:translateY(1px); }

/* primary (lime) */
.btn:not(.btnsecondary){
  background:#d7ff5e; color:#0a0f1c; font-weight:600;
}
.btn:not(.btnsecondary):hover{
  background:#c8ff4a;
  box-shadow:0 8px 18px rgba(124,255,90,.25);
}

/* secondary (dark pill with border) */
.btnsecondary{
  background: #101723 !important;
  color:#e9edf6;
  border:1px solid rgba(255,255,255,.18);
}
.btnsecondary:hover{
  background:#141e2d;
  border-color:rgba(255,255,255,.25);
}

/* ===== visuals ===== */
.herovisuals{ width:100%; }
.heroimg{ max-width:640px; margin-left:auto; }
.heroimginner{ position:relative; overflow:hidden; border-radius:24px; }
.heroimginner img{ display:block; width:100%; height:auto; transition:transform 250ms ease; }

/* ===== responsive ===== */
/* <=1200 */
@media (max-width:1200px){
  .hero{ grid-template-columns:1fr 1fr; }
}
/* <=1024 */
@media (max-width:1024px){
  .hero{ grid-template-columns:1fr; text-align:center; }
  .herocontent{ margin:0 auto; text-align:center; }
  .heroactions{ justify-content:center; }
  .herovisuals{ margin-top:20px; }
  .heroimg{ margin:0 auto; }
}
/* <=768 — show IMAGE first on mobile */
@media (max-width:768px){
  .hero{ padding:30px 20px; min-height:auto; }
  .herovisuals{ order:-1; margin-bottom:16px; }   /* image before content/badges */

  .herotitle{
    font-size:clamp(1.9rem,7vw,3rem);
    text-align:center !important;
    margin-bottom:16px;
  }
  .herosubtitle{ font-size:1rem; margin:0 auto 24px; max-width:90%; }
  .herobadges{ justify-content:center; gap:10px; }
  .heroactions{ flex-direction:column; gap:12px; align-items:center; }
  .btn{ width:100%; max-width:260px; }
  .heroimg{ max-width:90%; }
}
/* <=480 */
@media (max-width:480px){
  .hero{ padding:20px 12px; }
  .herotitle{ font-size:clamp(1.4rem,8vw,2rem); }
  .herosubtitle{ font-size:.95rem; line-height:1.45; }
  .badge{ font-size:.85rem; padding:6px 10px; }
  .btn{ font-size:.95rem; padding:10px 18px; }
}