/* ---------------------------------------------------------
   ZFC Research · Design System  v11-f
   – dark theme, maximum legibility + “bright-patch” classes
---------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

/* ===== Design Tokens ===== */
:root{
  /* brand */
  --primary:        #5e6dda;
  --primary-light:  #8d9bff;
  --primary-dark:   #10193a;

  --accent:         #7df0ff;

  /* surfaces */
  --bg:          #0b1024;
  --surface:     #242e52;   /* main panels */
  --surface-sub: #2b3660;   /* subtle elevation */

  /* type */
  --text-main:   #ffffff;   /* pure white on dark */
  --text-muted:  #d7defc;   /* light slate */

  /* misc */
  --radius:     12px;
  --shadow-sm:  0 4px 12px  rgba(0,0,0,.14);
  --shadow-lg:  0 22px 46px rgba(0,0,0,.55);
  --max-w:      1180px;
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text-main);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}

/* -------------------------------------------------- */
/*                     HEADER                         */
/* -------------------------------------------------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:transparent;
  backdrop-filter:blur(3px);
  transition:background .4s,box-shadow .4s,padding .35s;
}
.header-inner{
  max-width:var(--max-w);margin:auto;
  padding:1.4rem 1.6rem;
  display:flex;align-items:center;justify-content:space-between;
  transition:padding .35s;
}
header.shrink{
  background:var(--primary-dark);
  box-shadow:0 3px 8px rgba(0,0,0,.40);
}
header.shrink .header-inner{padding:.7rem 1.2rem}

/* logo – always white */
.logo img{height:46px;width:auto;display:block}

/* nav links */
nav a{
  margin-left:1.8rem;
  font-weight:500;
  text-decoration:none;
  color:#fff;
  position:relative;
  transition:color .25s;
}
nav a::after{
  content:'';position:absolute;left:0;bottom:-5px;
  height:2px;width:0;background:#fff;transition:width .25s;
}
nav a:hover::after{width:100%}
nav a.active{font-weight:600;color:var(--accent)}
nav a:hover{color:var(--accent)}

/* -------------------------------------------------- */
/*                     HERO                           */
/* -------------------------------------------------- */
.hero{
  min-height:88vh;
  padding:7rem 1.5rem 5rem;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;color:#fff;position:relative;overflow:hidden;
}
.hero h1{
  font-size:3.1rem;line-height:1.2;font-weight:600;margin-bottom:1.25rem;
}
.hero p{
  font-size:1.25rem;max-width:820px;color:#cdd4ff;margin-bottom:2.6rem;
}

/* -------------------------------------------------- */
/*                     BUTTONS                        */
/* -------------------------------------------------- */
.btn{
  padding:1rem 2.4rem;font-weight:600;border:none;cursor:pointer;
  border-radius:var(--radius);
  background:var(--primary-light);color:#fff;
  box-shadow:var(--shadow-sm);
  transition:transform .25s,box-shadow .25s,background .25s;
}
.btn:hover{
  transform:translateY(-5px);
  box-shadow:0 0 0 3px rgba(255,255,255,.18), var(--shadow-lg);
  background:var(--primary);
}
.btn:active{transform:scale(.97)}

/* -------------------------------------------------- */
/*                MAIN CONTENT WRAPPER               */
/* -------------------------------------------------- */
main{
  max-width:var(--max-w);
  margin:-4rem auto 4rem;
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:4.4rem 2.6rem 5rem;
}
section+section{margin-top:3.2rem}

h2{color:#e0e5ff;font-size:1.9rem;margin-bottom:.65rem}
h3,h4{color:#e0e5ff}
p,li{color:var(--text-muted)}
ul{margin-left:1.2rem}

/* -------------------------------------------------- */
/*                     CARDS                          */
/* -------------------------------------------------- */
.card{
  background:var(--surface-sub);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:2.2rem;
  transition:box-shadow .35s,transform .35s,background .35s;
}
.card:hover{
  background:var(--surface);
  box-shadow:var(--shadow-lg);
  transform:translateY(-7px);
}

/* feature / stat / generic tiles */
.features{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;margin-top:1.9rem;
}
.feature{
  padding:2rem;border-radius:var(--radius);
  text-align:center;
  background:var(--surface-sub);
  color:var(--text-main);
  box-shadow:var(--shadow-sm);
  animation:float 6s ease-in-out infinite;
  transition:transform .3s,background .25s;
}
.feature:hover{
  transform:translateY(-6px);
  background:var(--surface);
  box-shadow:var(--shadow-lg);
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* home stats grid */
.home-stat{
  background:var(--surface-sub);
  border-radius:var(--radius);
  padding:1.8rem 1rem;
  box-shadow:var(--shadow-sm);
  color:#fff;
}
.home-stat strong{font-size:1.6rem;font-weight:600;color:#fff}
.home-stat span{font-size:.92rem;color:#cdd4ff}

/* -------------------------------------------------- */
/*           QUICK-NAV “pill” LINKS                   */
/* -------------------------------------------------- */
.about-quicknav a,
.car-quicknav   a,
.lead-quicknav  a{
  text-decoration:none;
  color:#fff;                                 /* bright text */
  border:1px solid var(--primary-light);
  border-radius:999px;
  padding:.25rem .75rem;
  margin:.25rem .6rem;
  transition:.25s;
}
.about-quicknav a:hover,
.car-quicknav   a:hover,
.lead-quicknav  a:hover{
  background:var(--primary-light);
  color:var(--primary-dark);
  box-shadow:0 0 0 2px rgba(0,0,0,.2);
}

/* -------------------------------------------------- */
/*           ACCORDIONS (Careers / Leadership)        */
/* -------------------------------------------------- */
details.car-module,
details.lead-module{
  margin-top:1.1rem;
  background:var(--surface);
  padding:1.25rem 1.5rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s;
}
details[open].car-module,
details[open].lead-module{box-shadow:var(--shadow-lg)}

details.car-module summary,
details.lead-module summary{
  cursor:pointer;
  list-style:none;
  font-weight:600;
  color:#e0e5ff;                              /* brighter */
  outline:none;
  position:relative;
  padding-right:1.4rem;
}
details.car-module summary::after,
details.lead-module summary::after{
  content:'+';
  position:absolute;top:0;right:0;
  color:var(--accent);
  transition:.25s;
}
details[open].car-module summary::after,
details[open].lead-module summary::after{transform:rotate(45deg)}
.lead-module-content,.car-module-content{color:var(--text-muted)}
.car-module-content li+li,
.lead-module-content li+li{margin-top:.25rem}

/* -------------------------------------------------- */
/*                    TAG / CHIP                      */
/* -------------------------------------------------- */
.alp-tags span{
  padding:.25rem .6rem;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid var(--accent);
  color:var(--accent);
  font-size:.8rem;
  line-height:1;
}

/* -------------------------------------------------- */
/*                 INLINE “EQ” BLOCK                  */
/* -------------------------------------------------- */
.eq{
  font-family:ui-monospace,monospace;
  background:rgba(255,255,255,.07);
  color:#e0e5ff;
  padding:.4rem .65rem;
  border-radius:4px;
}

/* -------------------------------------------------- */
/*                 OPTIONAL “REQ” LABEL               */
/* -------------------------------------------------- */
.req{
  color:#e0e5ff;
  font-weight:600;
}

/* -------------------------------------------------- */
.home-contact-band,
.home-band-card{
  background:var(--surface-sub);
  box-shadow:var(--shadow-sm);
  color:var(--text-main);
}

/* -------------------------------------------------- */
/*                     FOOTER                         */
/* -------------------------------------------------- */
footer{
  background:var(--primary-dark);
  color:#fff;
  text-align:center;
  font-size:.95rem;
  padding:2rem 1rem;
}

/* -------------------------------------------------- */
/*                RESPONSIVE TWEAKS                  */
/* -------------------------------------------------- */
@media (max-width:768px){
  .hero{padding:6rem 1rem 4rem}
  .hero h1{font-size:2.4rem}
  .hero p{font-size:1.05rem;margin-bottom:2rem}
  nav a{margin-left:1.2rem;font-size:.95rem}
  main{margin:-3rem auto 3rem;padding:3.2rem 1.6rem 4rem}
}
@media (max-width:480px){
  .hero{padding:5.5rem 1rem 3.5rem}
  .hero h1{font-size:2.05rem}
  .hero p{font-size:1rem}
  nav a{margin-left:1rem;font-size:.9rem}
  .features{grid-template-columns:1fr}
}

/* -------------------------------------------------- */
/*                 INTERNAL PAGES                    */
/* -------------------------------------------------- */
body.page-no-hero header{
  background:var(--primary-dark)!important;
  box-shadow:0 3px 8px rgba(0,0,0,.40)!important;
  backdrop-filter:none!important;
}
body.page-no-hero main{margin:8rem auto 4rem!important}
body.page-no-hero .hero{display:none!important}

/* -------------------------------------------------- */
/*          FULL-PAGE WARP BACKGROUND CANVAS         */
/* -------------------------------------------------- */
#warp-bg{
  position:fixed;
  inset:0;
  width:100%;height:100%;
  z-index:-2;
  pointer-events:none;
  background:var(--bg);
}

/* -------------------------------------------------- */
/*             ANIMATIONS / REVEAL STATES            */
/* -------------------------------------------------- */
.reveal{opacity:0;transform:translateY(55px);transition:all .9s cubic-bezier(.4,.2,.2,1)}
.reveal.visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .feature{animation:none}
}