:root{
      --bg: #ffffff;
      --fg: #071025;
      --muted: #64748b;
      --card-radius: 14px;
      --container-max: 1200px;
      --accent-blue: #0ea5e9;
      --accent-emerald: #10b981;
      --accent-purple: #7c3aed;
      --glass: rgba(255,255,255,0.06);
    }
    @media (prefers-color-scheme: dark){
      :root{
        --bg: #071025;
        --fg: #e6eef8;
        --muted: #94a3b8;
      }
    }

    /* Reset & base */
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;line-height:1.5;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
    img{display:block;max-width:100%;height:auto}

    /* Section background (hero-like textured backdrop) */
    .mission-hero1 {
      position: relative;
      padding: 4.5rem 1rem;
      overflow: hidden;
      background-color: #071025;
      color: #fff;
      min-height: 520px;
      display: flex;
      align-items: center;
    }

    .mission-hero3 {
      position: relative;
      padding: 4.5rem 1rem;
      overflow: hidden;
      background-color: #071025;
      color: #fff;
      min-height: 520px;
      display: flex;
      align-items: center;
    }

    /* Background image layer */
    .mission-hero1__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image: url("https://mj-ahmad.github.io/qf/assets/qf-h.jpg");
      background-size: cover;
      background-position: center center;
      filter: saturate(.9) contrast(.9) brightness(.45);
      transform-origin: center;
      will-change: transform;
    }

    .mission-hero2__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image: url("https://mj-ahmad.github.io/qf/assets/qf-dis.png");
      background-size: cover;
      background-position: center center;
      filter: saturate(.9) contrast(.9) brightness(.45);
      transform-origin: center;
      will-change: transform;
    }

    .mission-hero3__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image: url("https://mj-ahmad.github.io/qf/assets/dis/qf-dis7.png");
      background-size: cover;
      background-position: center center;
      filter: saturate(.9) contrast(.9) brightness(.45);
      transform-origin: center;
      will-change: transform;
    }

    /* Soft overlay gradient for legibility */
    .mission-hero1__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-hero2__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-hero3__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;
    }

    /* Decorative radial glow */
    .mission-hero1__glow {
      position: absolute;
      z-index: 1;
      left: 10%;
      top: 8%;
      width: 60%;
      height: 60%;
      background: radial-gradient(circle at 30% 20%, rgba(14,165,233,0.12), transparent 30%);
      mix-blend-mode: screen;
      pointer-events: none;
    }

    .mission-hero2__glow {
      position: absolute;
      z-index: 1;
      left: 10%;
      top: 8%;
      width: 60%;
      height: 60%;
      background: radial-gradient(circle at 30% 20%, rgba(14,165,233,0.12), transparent 30%);
      mix-blend-mode: screen;
      pointer-events: none;
    }

    .mission-hero3__glow {
      position: absolute;
      z-index: 1;
      left: 10%;
      top: 8%;
      width: 60%;
      height: 60%;
      background: radial-gradient(circle at 30% 20%, rgba(14,165,233,0.12), transparent 30%);
      mix-blend-mode: screen;
      pointer-events: none;
    }


    /* Container */
    .container1 { max-width: var(--container-max); margin: 0 auto; padding: 0 1rem; position: relative; z-index: 2; }

    /* Header content */
    .mission-header1 { text-align: center; max-width: 980px; margin: 0 auto 2rem; }
    .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; font-size:.95rem; margin-bottom:.9rem;
    }
    .mission-title {
      font-size: 2.1rem; line-height:1.02; margin:0 0 .6rem; font-weight:800;
      letter-spacing:-0.02em;
    }
    @media(min-width:768px){ .mission-title{font-size:2.8rem} }
    .mission-subtitle {
      color: rgba(255,255,255,0.85); font-size:1.05rem; margin:0 auto; max-width:72ch;
    }

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

    .card {
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
      border-radius: var(--card-radius);
      border: 1px solid rgba(255,255,255,0.06);
      padding: 1.25rem;
      display:flex; gap:1rem; align-items:flex-start; min-height:200px;
      transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease;
      backdrop-filter: blur(6px);
    }
    .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__icon svg{ width:30px; height:30px; display:block; color: #fff; opacity: .95; }

    .card__content { flex:1; }
    .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.85); line-height:1.6; font-size:.98rem; }

    /* Accent color variants */
    .card--research .card__icon { background: linear-gradient(135deg, rgba(14,165,233,0.18), rgba(14,165,233,0.06)); color:#0369a1; }
    .card--printing .card__icon { background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(16,185,129,0.06)); color:#065f46; }
    .card--distribution .card__icon { background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(124,58,237,0.06)); color:#5b21b6; }

    /* CTA */
    .mission-cta { margin-top:2rem; display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
    .btn {
      display:inline-flex; align-items:center; gap:.6rem; padding:.72rem 1.05rem; border-radius:10px; font-weight:700; text-decoration:none; border:0; cursor:pointer;
    }
    .btn--primary { background: linear-gradient(90deg,var(--accent-blue),var(--accent-emerald)); color:#fff; box-shadow: 0 10px 30px rgba(16,185,129,0.12); }
    .btn--primary1 { background: linear-gradient(90deg,var(--accent-blue); color:#000; box-shadow: 0 10px 30px rgba(16,185,129,0.12); }
    .btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.95); }

    /* Reveal animation */
    .reveal { opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1); will-change: opacity, transform; }
    .reveal.in-view { opacity:1; transform:none; }
    @media (prefers-reduced-motion: reduce) { .reveal { transition: none; opacity:1; transform:none; } }

    /* Small utilities */
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }