.udacity-hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:640px;padding:96px 0;background:#0a1124;isolation:isolate}
.udacity-hero__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;background-repeat:no-repeat}
/* Dark scrim: stronger on the left for left-aligned legibility, plus a base veil */
.udacity-hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, rgba(8,14,32,calc(var(--uh-overlay,.65) + .2)) 0%, rgba(8,14,32,var(--uh-overlay,.65)) 45%, rgba(8,14,32,calc(var(--uh-overlay,.65) - .25)) 100%),
             linear-gradient(180deg, rgba(8,14,32,.35) 0%, rgba(8,14,32,.55) 100%)}
.udacity-hero--center .udacity-hero__scrim{background:rgba(8,14,32,var(--uh-overlay,.65))}

.udacity-hero__inner{position:relative;z-index:1;width:100%}
.udacity-hero__content{max-width:620px}
.udacity-hero--center .udacity-hero__content{max-width:760px;margin:0 auto;text-align:center}

.udacity-hero__eyebrow{padding:8px 16px;border:1px solid rgba(255,255,255,.28);border-radius:32px;color:#fff;font-size:13px;font-weight:500;letter-spacing:.2px;margin-bottom:24px}
.udacity-hero__eyebrow .icons{color:#fff}
.udacity-hero--center .udacity-hero__eyebrow{margin-left:auto;margin-right:auto}

.udacity-hero__title{margin:0;color:#fff;font-weight:800;font-size:64px;line-height:1.04;letter-spacing:-1px}
/* Rotating role sits on its OWN line with reserved height, so the typing
   animation can never reflow / wrap the headline as the word length changes. */
.udacity-hero__accent{color:var(--uh-accent, var(--primary,#4f8cff));display:block;white-space:nowrap;min-height:1.12em}
.udacity-hero__title .d-block{display:block}

.udacity-hero__subtext{margin:20px 0 0;color:rgba(255,255,255,.82);font-size:19px;line-height:1.55;max-width:560px}
.udacity-hero--center .udacity-hero__subtext{margin-left:auto;margin-right:auto}

.udacity-hero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px}
.udacity-hero--center .udacity-hero__actions{justify-content:center}
.udacity-hero__btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:10px;font-size:16px;font-weight:600;line-height:1;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease;border:2px solid transparent}
.udacity-hero__btn:hover{transform:translateY(-2px)}
.udacity-hero__btn--primary{background:var(--primary,#4f8cff);border-color:var(--primary,#4f8cff);color:#fff;box-shadow:0 10px 26px rgba(79,140,255,.35)}
.udacity-hero__btn--primary:hover{box-shadow:0 14px 32px rgba(79,140,255,.45)}
.udacity-hero__btn--ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.udacity-hero__btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.udacity-hero__btn .icons{color:currentColor}

.udacity-hero__checks{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:36px}
.udacity-hero--center .udacity-hero__checks{justify-content:center}
.udacity-hero__check{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.92);font-size:15px}
.udacity-hero__check .icons{color:#FD3206;flex-shrink:0}

@media (max-width:991px){
  .udacity-hero{min-height:520px;padding:72px 0}
  .udacity-hero__title{font-size:46px}
  .udacity-hero__subtext{font-size:17px}
  /* keep text readable on small screens regardless of alignment */
  .udacity-hero__scrim{background:rgba(8,14,32,calc(var(--uh-overlay,.65) + .1))}
}
@media (max-width:575px){
  .udacity-hero{min-height:auto;padding:56px 0}
  .udacity-hero__title{font-size:36px;letter-spacing:-.5px}
  .udacity-hero__btn{padding:13px 24px;font-size:15px}
  .udacity-hero__actions{gap:12px}
  .udacity-hero__btn{flex:1 1 auto;justify-content:center}
}

/* ── Optional right-side panel (image or card) ───────────────────────────── */
.udacity-hero--has-side .udacity-hero__inner{display:flex;align-items:center;gap:56px}
.udacity-hero--has-side .udacity-hero__main{flex:1 1 54%;min-width:0}
.udacity-hero--has-side .udacity-hero__content{max-width:none;text-align:left;margin:0}
.udacity-hero--has-side .udacity-hero__subtext,
.udacity-hero--has-side .udacity-hero__actions,
.udacity-hero--has-side .udacity-hero__checks{margin-left:0;margin-right:0;justify-content:flex-start}
.udacity-hero__side{flex:0 0 40%;display:flex;justify-content:flex-end;align-items:center}
.udacity-hero__side-image{max-width:100%;height:auto;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.udacity-hero__side-card{max-width:380px;padding:28px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:20px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.udacity-hero__side-card-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;background:var(--uh-accent,var(--primary,#4f8cff));margin-bottom:16px}
.udacity-hero__side-card-icon .icons{color:#fff}
.udacity-hero__side-card-title{margin:0;color:#fff;font-size:20px;font-weight:700;line-height:1.3}
.udacity-hero__side-card-text{margin:8px 0 0;color:rgba(255,255,255,.8);font-size:15px;line-height:1.6}

@media (max-width:991px){
  .udacity-hero--has-side .udacity-hero__inner{flex-direction:column;align-items:flex-start;gap:32px}
  .udacity-hero--has-side .udacity-hero__main,
  .udacity-hero__side{flex:1 1 auto;width:100%}
  .udacity-hero__side{justify-content:flex-start}
}