/* Shared styles for the GearShift Robotics sub-pages (team, outreach, contact). */
:root{
  --turquoise:#2AD9C6;
  --turquoise-dim:#1B978A;
  --orange:#F2762E;
  --black:#15171B;
  --charcoal:#1D2126;
  --white:#F6F8F8;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--black);
  color:var(--white);
  font-family:'Rajdhani', sans-serif;
  font-weight:500;
  line-height:1.5;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24'><path fill='%232AD9C6' d='M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zm9.4 2.1-1.75-.3a7.6 7.6 0 0 0-.55-1.33l1.04-1.44a.6.6 0 0 0-.07-.78l-1.34-1.34a.6.6 0 0 0-.78-.07l-1.44 1.04a7.6 7.6 0 0 0-1.33-.55l-.3-1.75A.6.6 0 0 0 14.29 3h-1.9a.6.6 0 0 0-.59.5l-.3 1.75c-.47.14-.92.32-1.33.55L8.73 4.76a.6.6 0 0 0-.78.07L6.61 6.17a.6.6 0 0 0-.07.78l1.04 1.44c-.23.41-.41.86-.55 1.33l-1.75.3a.6.6 0 0 0-.5.59v1.9c0 .29.21.54.5.59l1.75.3c.14.47.32.92.55 1.33l-1.04 1.44a.6.6 0 0 0 .07.78l1.34 1.34c.21.21.55.24.78.07l1.44-1.04c.41.23.86.41 1.33.55l.3 1.75c.05.29.3.5.59.5h1.9c.29 0 .54-.21.59-.5l.3-1.75c.47-.14.92-.32 1.33-.55l1.44 1.04c.24.17.57.14.78-.07l1.34-1.34a.6.6 0 0 0 .07-.78l-1.04-1.44c.23-.41.41-.86.55-1.33l1.75-.3a.6.6 0 0 0 .5-.59v-1.9a.6.6 0 0 0-.5-.59z'/></svg>") 15 15, auto;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none;}

::selection{background:var(--turquoise); color:var(--black);}

@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- HEADER ---------- */
header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 5vw;
  background:rgba(21,23,27,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(42,217,198,.18);
}
.brand{display:flex; align-items:center; gap:14px;}
.brand img{height:46px; width:46px; display:block; transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.brand:hover img{transform:rotate(360deg);}
.brand span{
  font-family:'Orbitron', sans-serif;
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:.04em;
}
.brand:focus-visible{outline:2px solid var(--turquoise); outline-offset:5px;}
nav{display:flex; gap:2.2vw;}
nav a{
  font-family:'Rajdhani', sans-serif;
  font-weight:600;
  font-size:.98rem;
  letter-spacing:.02em;
  position:relative;
  padding:6px 2px;
  color:var(--white);
  transition:color .25s ease, transform .25s ease;
}
nav a:hover{color:var(--turquoise); transform:scale(1.12);}
nav a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:2px;
  background:var(--orange);
  transition:width .25s ease;
}
nav a:hover::after{width:100%;}
nav a.active{color:var(--turquoise);}
nav a.active::after{width:100%; background:var(--turquoise);}
#nav-toggle{display:none;}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer;}
.burger span{width:24px; height:2px; background:var(--white);}

@media (max-width:880px){
  nav{
    position:absolute; top:100%; right:0; left:0;
    flex-direction:column; align-items:center; gap:0;
    background:var(--charcoal);
    max-height:0; overflow:hidden;
    transition:max-height .35s ease;
    border-bottom:1px solid rgba(42,217,198,.18);
  }
  nav a{padding:14px 0; width:100%; text-align:center;}
  #nav-toggle:checked ~ nav{max-height:400px;}
  .burger{display:flex;}
}

/* ---------- PAGE HERO ---------- */
.page-hero{
  position:relative;
  padding:6rem 6vw 4rem;
  text-align:center;
  overflow:hidden;
  border-bottom:1px solid rgba(42,217,198,.12);
}
.page-hero::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(42,217,198,.14), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(242,118,46,.13), transparent 45%);
  pointer-events:none;
}
.page-hero h1{
  position:relative;
  font-family:'Orbitron', sans-serif;
  font-weight:800;
  font-size:clamp(2rem, 5vw, 3.2rem);
  letter-spacing:.03em;
}
.page-hero h1 span{color:var(--orange);}
.page-hero p{
  position:relative;
  margin:1rem auto 0;
  max-width:620px;
  color:#B9C4C2;
  font-size:clamp(1rem, 2vw, 1.2rem);
}

/* ---------- SECTIONS ---------- */
section{padding:5rem 6vw;}
section.alt{background:var(--charcoal); border-top:1px solid rgba(42,217,198,.12); border-bottom:1px solid rgba(42,217,198,.12);}
.section-head{max-width:1100px; margin:0 auto 2.5rem;}
.eyebrow-mark{
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--orange); font-weight:700; font-size:.95rem; margin-bottom:.6rem;
}
.eyebrow-mark svg{width:18px; height:18px; animation:spin 6s linear infinite;}
.section-head h2{
  font-family:'Orbitron', sans-serif;
  font-weight:800;
  font-size:clamp(1.5rem, 3vw, 2.2rem);
}
.section-head p{margin-top:.8rem; color:#B9C4C2; font-size:1.05rem; max-width:620px;}

/* Generic card grid */
.card-grid{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.6rem;
}
.card{
  background:var(--charcoal);
  border:1px solid rgba(42,217,198,.15);
  padding:1.6rem 1.4rem;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
section.alt .card{background:var(--black);}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--turquoise);
  box-shadow:0 14px 30px -18px rgba(42,217,198,.55);
}
.card h3{font-family:'Orbitron', sans-serif; font-size:1.05rem; margin-bottom:.4rem;}
.card .meta{color:var(--orange); font-size:.88rem; font-weight:600; margin-bottom:.7rem;}
.card p{color:#C7D0CE; font-size:1rem;}
.card a.link{display:inline-block; margin-top:.9rem; color:var(--turquoise); font-weight:700;}
.card a.link:hover{color:var(--orange);}

.placeholder-note{
  max-width:1100px; margin:1.5rem auto 0;
  font-size:.85rem; color:#7C8B88; text-align:center;
}

.btn{
  display:inline-block;
  font-family:'Rajdhani', sans-serif;
  font-weight:700;
  font-size:1rem;
  padding:.85rem 1.8rem;
  border-radius:2px;
  border:1.5px solid var(--turquoise);
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.btn:hover{transform:translateY(-3px);}
.btn.solid{background:var(--turquoise); color:var(--black);}
.btn.solid:hover{background:var(--orange); border-color:var(--orange); color:var(--black);}
.btn.ghost:hover{background:rgba(42,217,198,.12);}

/* ---------- FOOTER ---------- */
footer{
  padding:3rem 6vw;
  border-top:1px solid rgba(42,217,198,.15);
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between;
  font-size:.9rem; color:#8A9895;
}
footer .domain{color:var(--turquoise); font-weight:600;}
footer a:hover{color:var(--turquoise);}

@media (max-width:600px){
  section{padding:4rem 6vw;}
  .page-hero{padding:4.5rem 6vw 3rem;}
}

@media (prefers-reduced-motion: reduce){
  .eyebrow-mark svg{animation:none;}
  .brand img, .card, nav a, .btn{transition:none;}
}