/* css/section/style.css
   Hero and Mission section styles (uses assets/qf-h.jpg and earth-daymap.png)
*/
:root{
  --bg-dark:#071025;
  --accent-blue:#0ea5e9;
  --accent-emerald:#10b981;
  --card-radius:14px;
}

.hero1{
  position:relative;
  min-height:520px;
  padding:4.5rem 0;
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden;
  background:linear-gradient(135deg,#071025 0%, #0b2b4a 50%, #071025 100%);
}
.hero__map{
  position:absolute;inset:0;z-index:0;background-image:url('../assets/earth-daymap.png');background-size:cover;background-position:center;opacity:0.12;mix-blend-mode:overlay;
}
.hero__overlay{position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 30% 20%, rgba(14,165,233,0.08), transparent 30%);pointer-events:none}
.hero__content{position:relative;z-index:2;max-width:56rem;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .75rem;border-radius:999px;background:linear-gradient(90deg, rgba(14,165,233,0.08), rgba(16,185,129,0.04));color:#9be7ff;font-weight:600;margin-bottom:1rem}
.hero__title{font-size:2.25rem;line-height:1.02;margin:0 0 1rem;font-weight:800}
@media(min-width:768px){ .hero__title{font-size:3rem} }
.gradient-text{background:linear-gradient(90deg,#60a5fa,#34d399);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__lead{color:rgba(255,255,255,0.92);font-size:1.125rem;margin-bottom:1.25rem;max-width:48rem}
.hero__actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* Mission */
.mission{position:relative;padding:4rem 0;color:#fff;overflow:visible}
.mission__bg-wrap{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mission__bg{position:absolute;inset:0;background-image:url('../assets/qf-h.jpg');background-size:cover;background-position:center;filter:blur(18px) saturate(.9) contrast(.9) brightness(.45);opacity:.28;transform-origin:center;transition:filter .9s ease,opacity .9s ease,transform .9s ease;transform:scale(1.03)}
.mission__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(2,6,23,0.55) 0%, rgba(2,6,23,0.45) 40%, rgba(2,6,23,0.6) 100%);pointer-events:none}
.mission.in-view .mission__bg{filter:blur(4px) saturate(1.05) contrast(1.02);opacity:.72;transform:scale(1)}

.mission__inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 1rem}
.mission-header{text-align:center;max-width:980px;margin:0 auto 2rem}
.mission-title{font-size:1.9rem;margin:0 0 .6rem;font-weight:800}
@media(min-width:768px){ .mission-title{font-size:2.6rem} }
.mission-subtitle{color:rgba(255,255,255,0.9);font-size:1.05rem;margin:0 auto;max-width:72ch}

.mission-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:1.5rem}
@media(min-width:900px){ .mission-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem} }

.card{border-radius:var(--card-radius);padding:1.25rem;display:flex;gap:1rem;align-items:flex-start;min-height:200px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(6px);transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(2,6,23,0.28)}
.card__icon{width:64px;height:64px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));box-shadow:inset 0 -6px 18px rgba(0,0,0,0.12)}
.card__title{margin:0 0 .4rem;font-size:1.05rem;font-weight:700;color:#fff;text-transform:capitalize}
.card__desc{margin:0;color:rgba(255,255,255,0.88);line-height:1.6;font-size:.98rem}