:root {
  --blue:#123c66;
  --orange:#ef7d1a;
  --ink:#0c1016;
  --bg:#ffffff;
  --white:#fff;

  --header-h:72px;   /* match navbar.css */
  --hero-y:42%;      /* background crop */
}

@media (max-width:640px){
  :root{
    --header-h:64px;
    --hero-y:48%;
  }
}

/* Reset */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  padding-top:var(--header-h);
  font-family:system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}

/* Hero */
.hero{
  position:relative;
  min-height:calc(100dvh - var(--header-h));
  width:100%;
  background-image:url("../assets/MSA-Homescreen-wallpaper.png");
  background-size:cover;
  background-position:left var(--hero-y);
  background-repeat:no-repeat;
  display:grid;
  place-items:stretch;

  overflow:hidden;
  isolation:isolate;
}

.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 36%,
    rgba(255,255,255,.88) 76%,
    rgba(255,255,255,.98) 100%
  );
}

.hero-content{
  position:relative;
  margin-inline:auto;
  width:min(1200px, 92vw);
  padding:clamp(20px, 3vw, 40px);
  display:flex; flex-direction:column;
  align-items:flex-end; justify-content:center;
  min-height:calc(100dvh - var(--header-h));
  text-align:right;
}

/* Text */
.headline{
  font-size:clamp(2rem, 3.6vw, 3.2rem);
  line-height:1.15;
  margin:0 0 .6rem;
  font-weight:800;
}
.headline span{ color:var(--blue); }

.subhead{
  font-size:clamp(1.05rem, 1.6vw, 1.35rem);
  margin:0 0 1.4rem;
  max-width:42ch;
  color:#334155;
}

/* Buttons */
.actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:16px;
  text-decoration:none; font-weight:700; letter-spacing:.02em;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  border:2px solid transparent; will-change:transform;
  overflow:hidden; background-clip:padding-box; -webkit-background-clip:padding-box;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn-primary{
  background:linear-gradient(90deg, var(--blue), var(--orange));
  color:var(--white);
  box-shadow:0 10px 24px rgba(18,60,102,.22);
}
.btn-primary:hover{ box-shadow:0 12px 28px rgba(18,60,102,.28); }

.btn-ghost{
  background:rgba(255,255,255,.6);
  color:var(--blue);
  border-color:rgba(18,60,102,.2);
  backdrop-filter:saturate(1.2) blur(4px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.9); }

/* ---------- Mobile (≤900px) ---------- */
@media (max-width:900px){

  .hero{ background-position:left var(--hero-y); }
  .hero-overlay{
    background:linear-gradient(
      90deg,
      rgba(255,255,255,0) 20%,
      rgba(255,255,255,.9) 68%,
      rgba(255,255,255,1) 100%
    );
  }

  /* Center the headline block near the top */
  .hero-content{
    align-items:center;
    text-align:center;
    justify-content:flex-start;
    padding:16px 16px;
    padding-top:calc(var(--header-h) + 4vh);
    row-gap:12px;
  }

  /* Headline: centered above the logo */
  .headline{
    max-width:16ch;
    margin-left:auto; margin-right:auto;
    margin-top:clamp(12px, 9vh, 18vh);     /* move higher/lower here */
    margin-bottom:clamp(6px, 1.5vh, 12px);
    color:var(--ink);
    text-shadow:0 2px 8px rgba(0,0,0,.25); 
  }
  .headline span{ color:var(--blue); }

  /* Subhead: pushed down below the logo area */
  .subhead{
    max-width:34ch;
    margin-left:auto; margin-right:auto;
    margin-top:clamp(24px, 12vh, 22vh);    /* controls distance below logo */
    color:#334155;
    text-shadow:0 2px 8px rgba(0,0,0,.25);
  }

  /* Buttons centered under the subhead */
  .actions{
    justify-content:center;
    margin-top:clamp(10px, 2.5vh, 20px);
  }
}



/* Phones (≤600px) */
@media (max-width:600px){
  .headline{ font-size:clamp(2rem, 7.5vw, 2.6rem); }
  .subhead{ font-size:clamp(1rem, 3.6vw, 1.15rem); }
  .actions .btn{ padding:12px 18px; }
}

/* Small iPhones (≤430px) */
@media (max-width:430px){
  .headline{ font-size:clamp(1.9rem, 7.8vw, 2.4rem); }
  .subhead{ font-size:clamp(.98rem, 3.8vw, 1.08rem); }
}

/* Extra-small (≤390px) */
@media (max-width:390px){
  .headline{ font-size:clamp(1.8rem, 8.2vw, 2.2rem); }
  .subhead{ font-size:clamp(.95rem, 3.9vw, 1.05rem); }
}

/* navbar stacking that depends on this page */
.site-header{ z-index:1001; }
@media (max-width:900px){
  .site-header.open .main-nav{ z-index:1000; }
}

/* show a white border on all primary buttons */
.btn-primary{
  border-color:#fff;          /* make border visible */
  border-width:3px;           /* match navbar thickness */
  background-clip:padding-box;
  -webkit-background-clip:padding-box; /* Safari */
}
.btn-primary:hover{ border-color:#fff; } /* keep on hover */

/* keep hero layers below the footer */
.hero{ isolation:isolate; overflow:hidden; }
.hero-overlay{ z-index:0; }
.hero-content{ position:relative; z-index:1; }