/* css/header.css */

:root{
  --bg0: #070a12;
  --bg1: #0b1020;
  --card: rgba(255,255,255,0.06);
  --line: rgba(255,255,255,0.12);

  --text: rgba(245,248,255,0.92);
  --muted: rgba(245,248,255,0.68);

  --accent: rgba(120, 210, 255, 0.95);
  --accent2: rgba(255, 170, 70, 0.95);

  --shadow: 0 18px 45px rgba(0,0,0,0.45);
  --radius: 18px;
}

*{ box-sizing: border-box; }

html, body{
  height:100%;
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 900px at 20% 10%, rgba(120,210,255,0.10), transparent 55%),
    radial-gradient(900px 700px at 85% 20%, rgba(255,170,70,0.08), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* accessibility skip link */
.skipLink{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.skipLink:focus{
  left:14px;
  top:14px;
  width:auto;
  height:auto;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(10,14,28,0.9);
  border: 1px solid var(--line);
  z-index:9999;
}

/* HEADER – always visible */
.siteHeader{
  position: fixed;
  top:0;
  left:0;
  right:0;
  z-index:1200;

  background: rgba(7,10,18,0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* header height */
.headerInner{
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:14px;
}

/* BRAND */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color: var(--text);
  min-width:220px;
}

.brandLogo{
  width:46px;
  height:46px;
  border-radius:14px;
  object-fit:contain;
  display:block;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}

.brandMark{
  width:46px;
  height:46px;
  border-radius:14px;
  background:
    radial-gradient(16px 16px at 30% 30%, rgba(255,255,255,0.22), transparent 60%),
    linear-gradient(135deg, rgba(120,210,255,0.35), rgba(255,170,70,0.25));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  position: relative;
  overflow:hidden;
}

.brandMark::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 55%);
  transform: rotate(12deg);
}

.brandText{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.brandName{
  font-weight:800;
  letter-spacing:0.6px;
  font-size:14px;
  text-transform:uppercase;
  white-space: nowrap;
}

.brandTag{
  font-size:12px;
  color: var(--muted);
  margin-top:3px;
}

/* NAV */
.nav{
  display:flex;
  align-items:center;
  gap:10px;
}

.navLink{
  color: var(--text);
  text-decoration:none;
  font-size:14px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background: transparent;
  cursor:pointer;
}

.navLink:hover{
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

.navCta{
  margin-left:6px;
  text-decoration:none;
  color: rgba(10,14,28,0.95);
  background: linear-gradient(135deg, rgba(120,210,255,0.95), rgba(255,170,70,0.85));
  padding:10px 14px;
  border-radius:14px;
  font-weight:800;
  box-shadow: 0 20px 45px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.12);
}

/* dropdown */
.navGroup{ position: relative; }

.navLinkBtn{
  display:flex;
  align-items:center;
  gap:8px;
}

.chev{
  width:10px;
  height:10px;
  border-right:2px solid rgba(245,248,255,0.75);
  border-bottom:2px solid rgba(245,248,255,0.75);
  transform: rotate(45deg);
  margin-top:-2px;
  transition: transform 180ms ease;
}

.navGroup[data-open="true"] .chev{
  transform: rotate(225deg);
  margin-top:2px;
}

.navDropdown{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width:240px;
  padding:10px;
  border-radius:16px;
  background: rgba(7,10,18,0.92);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
  display:none;
}

.navGroup[data-open="true"] .navDropdown{
  display:block;
}

.navDropdown a{
  display:block;
  padding:10px;
  border-radius:12px;
  color: var(--text);
  text-decoration:none;
  font-size:14px;
  border:1px solid transparent;
}

.navDropdown a:hover{
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}

/* MOBILE */
.navToggle{
  display:none;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  padding:10px 12px;
  color: var(--text);
  cursor:pointer;
}

.navToggleBars{
  display:block;
  width:22px;
  height:14px;
  position: relative;
}

.navToggleBars::before,
.navToggleBars::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background: rgba(245,248,255,0.85);
  border-radius:2px;
}

.navToggleBars::before{ top:2px; }
.navToggleBars::after{ bottom:2px; }

@media (max-width: 920px){
  .navToggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .nav{
    position: fixed;
    left:16px;
    right:16px;
    top:88px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:12px;
    border-radius:18px;
    background: rgba(7,10,18,0.94);
    border:1px solid rgba(255,255,255,0.12);
    box-shadow: var(--shadow);
  }

  body.navOpen .nav{
    display:flex;
  }

  .navCta{
    width:100%;
    text-align:center;
  }

  .navGroup{
    width:100%;
  }

  .navDropdown{
    position: static;
    margin-top:8px;
    display:none;
  }

  .navGroup[data-open="true"] .navDropdown{
    display:block;
  }
}
@media (max-width: 420px){
  .brandName{
    font-size: 13px;
    letter-spacing: 0.4px;
  }
}