*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:#0a0c10;
  color:#e8eaed;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-weight:400;
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* Subtle grid background across whole page */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(rgba(0,229,255,.035) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(0,229,255,.035) 1px,transparent 1px) 0 0/48px 48px,
    radial-gradient(ellipse at 50% 0%,#0f141c 0%,#06080b 70%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  box-shadow:inset 0 0 220px 60px rgba(0,0,0,.9);
}

/* HEADER with soldier image banner */
.site-header{
  position:relative;
  border-bottom:1px solid #1a2230;
  padding:4.5rem 1.5rem 4rem;
  overflow:hidden;
  isolation:isolate;
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url('../images/TeamGattaca1.png') center/cover no-repeat;
  filter:brightness(.32) contrast(1.1) saturate(.85) hue-rotate(-10deg);
  transform:scale(1.05);
}
.site-header::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(10,12,16,.5) 0%,rgba(10,12,16,.85) 70%,#0a0c10 100%),
    linear-gradient(90deg,rgba(10,12,16,.6) 0%,transparent 50%,rgba(10,12,16,.6) 100%);
}
.header-inner{
  max-width:1100px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.2rem;
  position:relative;
}
.logo{
  height:150px;width:auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.7));
}
.tagline{background:linear-gradient(180deg,#ffffff 0%,#7fdfff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-family:'Chakra Petch','Inter',sans-serif;
  font-size:clamp(2rem,4.5vw,3.4rem);
  font-weight:700;letter-spacing:.005em;line-height:1.1;
  color:#cfe8f5;
  text-shadow:0 2px 18px rgba(0,0,0,.65);
  text-transform:uppercase;
  position:relative;
  padding-bottom:.9rem;
}
.tagline::after{
  content:"";
  position:absolute;left:50%;bottom:0;
  transform:translateX(-50%) skewX(-20deg);
  width:90px;height:3px;
  background:linear-gradient(90deg,transparent,#00e5ff,transparent);
  box-shadow:0 0 14px rgba(0,229,255,.6);
}
.sub{
  color:#a8b0bc;font-size:1.1rem;max-width:540px;font-weight:500;
  letter-spacing:.01em;
}

/* MAIN */
.container{
  max-width:1200px;margin:0 auto;padding:3.5rem 1.5rem 4rem;
}
.section-label{
  display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem;
}
.section-label span{
  font-family:'Chakra Petch','Inter',sans-serif;
  font-size:.85rem;font-weight:700;letter-spacing:.32em;
  text-transform:uppercase;color:#00e5ff;
  text-shadow:0 0 12px rgba(0,229,255,.35);
}
.section-label .line{
  flex:1;height:1px;background:linear-gradient(90deg,rgba(0,229,255,.4),transparent);
}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.25rem;
}
.tile{
  position:relative;
  background:#11141b;
  border:1px solid #1f2530;
  border-radius:10px;
  overflow:hidden;
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
  transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.tile::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#00e5ff,transparent);
  opacity:0;transition:opacity .25s ease;
}
.tile:hover{
  transform:translateY(-4px);
  border-color:#2a3848;
  background:#151923;
  box-shadow:0 8px 28px rgba(0,0,0,.55), 0 0 22px rgba(0,229,255,.08);
}
.tile:hover::before{opacity:1}
.tile-cover{
  height:130px;
  border-bottom:1px solid #1f2530;
  position:relative;
}
.tile-cover::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 12px,rgba(0,229,255,.04) 12px 24px);
}
.tile-body{
  padding:1.1rem 1.2rem 1.3rem;
}
.tile-body h2{
  font-family:'Chakra Petch','Inter',sans-serif;
  font-size:1.3rem;font-weight:700;letter-spacing:.01em;
  margin-bottom:.3rem;color:#cfe8f5;
  text-transform:uppercase;
}
.tile-body p{
  font-size:.92rem;color:#9aa0a8;font-weight:500;
}
.tile-soon{
  opacity:.55;pointer-events:none;
}

/* FOOTER */
.site-footer{
  border-top:1px solid #1a2230;
  padding:1.5rem;
  text-align:center;
  color:#6b7079;font-size:.85rem;
  font-family:'Chakra Petch','Inter',sans-serif;
  letter-spacing:.08em;
}

@media (max-width:520px){
  .logo{height:110px}
  .site-header{padding:3rem 1.5rem 2.5rem}
}