/* ==================================================================
   WTFCS — SHARED CHROME
   Design tokens, base resets, and the header/nav/dropdown/footer
   markup shared verbatim across every page on the site. If the nav
   or footer needs to change, it changes once, here — every page
   that links this file picks it up automatically.

   Deliberately NOT included here: anything page-specific (the
   single-viewport no-scroll rule on the homepage, the hero split
   panels, the video background, the server grid/filters/modal).
   Those stay in each page's own stylesheet.
   ================================================================== */

:root{
  --bg-0:#0b0c0e;
  --bg-1:#141519;
  --bg-2:#1a1c21;
  --bg-3:#212329;

  --accent:#c9a15c;
  --accent-dim: rgba(201,161,92,0.14);
  --accent-line: rgba(201,161,92,0.35);

  --text-0:#f2f1ed;
  --text-1:#8b8f98;
  --text-2:#4a4d56;

  --border:#26282f;
  --border-soft:#1b1d23;

  --font-display:'Rajdhani', sans-serif;
  --font-body:'Rajdhani', sans-serif;
  --font-mono:'Rajdhani', sans-serif;

  --radius-s:4px;
  --radius-m:8px;
  --radius-l:14px;

  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast: 170ms;
  --dur-med: 320ms;
  --dur-panel: 420ms;
}

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

body{
  font-family:var(--font-body);
  color:var(--text-0);
  background:var(--bg-0);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
ul{ list-style:none; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:3px;
}

.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ==================================================================
   HEADER / NAV — identical on every page
   ================================================================== */
header{
  position:relative;
  z-index:100;
  height:72px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  padding:0 32px;
  border-bottom:1px solid var(--border-soft);
  background:rgba(11,12,14,0.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.nav-grid{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}

.nav-cluster{
  display:flex;
  align-items:center;
  gap:4px;
}

.nav-cluster.right{ justify-content:flex-end; }

.nav-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  padding:9px 13px;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:500;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-1);
  border-radius:var(--radius-s);
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.nav-item:hover, .nav-item[aria-expanded="true"], .nav-item.is-active{
  color:var(--text-0);
  background:rgba(255,255,255,0.032);
}

.nav-item .chevron{
  width:9px; height:9px;
  transition:transform var(--dur-fast) var(--ease);
  opacity:0.6;
}

.nav-item[aria-expanded="true"] .chevron{ transform:rotate(180deg); }

.nav-item::after{
  content:"";
  position:absolute;
  left:13px; right:13px; bottom:1px;
  height:1.5px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-fast) var(--ease);
}

.nav-item:hover::after, .nav-item.is-active::after{ transform:scaleX(1); }

/* dropdown panels — click controlled via .open class */
.dropdown-wrap{ position:relative; }

.dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:230px;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  box-shadow:0 20px 40px -12px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.35);
  padding:8px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index:50;
}

.dropdown-wrap.open .dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.dropdown a{
  display:block;
  padding:9px 12px;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0.01em;
  color:var(--text-1);
  border-radius:var(--radius-s);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.dropdown a:hover{
  background:var(--accent-dim);
  color:var(--text-0);
}

.dropdown-divider{
  height:1px;
  background:var(--border-soft);
  margin:6px 4px;
}

.dropdown-label{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-2);
  padding:8px 12px 4px;
}

/* logo */
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  justify-self:center;
}

.logo-mark{
  width:30px; height:30px;
  border-radius:7px;
  background:linear-gradient(155deg, var(--bg-3), var(--bg-1));
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:breathe 5s ease-in-out infinite;
}

.logo-mark svg{ width:15px; height:15px; }

@keyframes breathe{
  0%, 100%{ box-shadow:0 0 0 0 rgba(201,161,92,0); }
  50%{ box-shadow:0 0 0 6px rgba(201,161,92,0.07); }
}

.logo-text{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--text-0);
}

.logo-text span{ color:var(--accent); }

/* ==================================================================
   FOOTER — identical on every page
   ================================================================== */
footer{
  position:relative;
  z-index:10;
  flex-shrink:0;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  border-top:1px solid var(--border-soft);
  background:var(--bg-0);
}

footer p{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-2);
  letter-spacing:0.03em;
}

@media (max-width: 860px){
  header{ height:60px; padding:0 20px; }
  .nav-grid{ grid-template-columns:auto 1fr auto; }
  .nav-item{ padding:8px 9px; font-size:12px; }
  .logo-text{ font-size:15px; }
}

@media (max-width: 480px){
  .nav-item{ padding:8px; }
}