:root{
  /* CheezieTech palette */
  --bg: #0B0712;          /* near-black */
  --panel: #120B1D;       /* raised surfaces */
  --panel2:#0F0918;
  --purple:#7B4AE2;       /* primary purple */
  --purple2:#9A7BFF;
  --gold:#E6B85C;         /* highlight only */
  --gold2:#FFD77A;
  --red:#B84A55;          /* supporting */
  --text:#EDE7FF;
  --muted:#B9A9E6;

  --stroke: rgba(255,255,255,.08);
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --radius: 22px;

  /* Background scroll hook (used by optional JS) */
  --bg-y: 50%;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}
img{ max-width: 100%; height: auto; }

/* =========================================================
   FLOATING HEADER
   Icon LEFT · Wordmark CENTER · Nav RIGHT
   ========================================================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 18px;
  backdrop-filter: blur(12px);
}

.topbar__inner{
  max-width: 1500px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: auto 1fr auto;   /* icon | centered wordmark | nav */
  align-items: center;
  gap: 20px;

  padding: 14px 22px;
  background: linear-gradient(180deg, rgba(18,11,29,.78), rgba(12,7,18,.62));
  border: 1px solid var(--stroke);
  border-radius: 999px;
  box-shadow: var(--shadow);
}

/* Treat brand children as separate grid items */
.brand{ display: contents; }

.brand__icon{
  grid-column: 1;
  justify-self: start;
  height: 96px;
  width: 96px;
  display:block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.65));
}

.brand__wordmark{
  grid-column: 2;
  justify-self: center;
  width: 250px;          /* requested */
  height: auto;
  display:block;
  max-width: 100%;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.65));
}

/* Nav */
.nav{
  grid-column: 3;
  justify-self: end;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.nav a{
  text-decoration:none;
  color: var(--muted);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all .12s ease-in-out;
}
.nav a:hover{
  color: var(--gold2);
  border-color: rgba(214,177,94,.22);
  background: rgba(255,255,255,.04);
}
.nav a.is-active{
  color: var(--gold2);
  border-color: rgba(214,177,94,.35);
  background: rgba(214,177,94,.08);
}
.nav__cta{
  color: #0b0712 !important;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold), var(--gold2)) !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  box-shadow: 0 10px 18px rgba(214,177,94,.16);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ position: relative; overflow: hidden; padding: 44px 16px 28px; }
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(139,92,246,.25) 0%, rgba(11,7,18,0) 60%),
    radial-gradient(700px 520px at 85% 15%, rgba(214,177,94,.16) 0%, rgba(11,7,18,0) 58%),
    url("hero-stars.png") repeat;
  opacity: .85;
}
.hero__inner{
  position:relative;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 18px 26px;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(214,177,94,.20);
  background: linear-gradient(180deg, rgba(20,16,36,.78), rgba(18,10,30,.62));
  box-shadow: var(--shadow);
}
.hero__mark{
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(214,177,94,.20);
  background: rgba(255,255,255,.03);
  padding: 10px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}
.hero__title{ margin: 14px 0 6px; font-size: 44px; letter-spacing: .2px; font-weight: 950; }
.gold{ color: var(--gold2); text-shadow: 0 0 20px rgba(240,208,122,.20); }
.hero__tag{ margin: 0; color: var(--muted); font-size: 14px; }
.hero__blurb{ margin: 12px auto 0; max-width: 56ch; color: rgba(233,230,243,.90); }

.pillrow{ margin-top: 20px; display:flex; gap: 10px; justify-content:center; flex-wrap: wrap; }
.pill{
  display:inline-flex; gap: 10px; align-items:center;
  padding: 10px 14px; border-radius: 999px;
  border: 1px solid rgba(214,177,94,.18);
  background: rgba(255,255,255,.04);
  color: var(--text); text-decoration:none;
  font-weight: 850; letter-spacing: .15px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.pill:hover{ transform: translateY(-1px); border-color: rgba(214,177,94,.40); background: rgba(214,177,94,.08); }
.pill__icon{ width: 22px; height: 22px; display:inline-grid; place-items:center; border-radius: 999px; background: rgba(214,177,94,.10); }
.pill--gold{ color: #0b0712; border-color: rgba(0,0,0,.14); background: linear-gradient(135deg, var(--gold), var(--gold2)); }

/* =========================================================
   CONTENT PANELS
   ========================================================= */
.wrap{
  max-width: 1120px;
  margin: 18px auto 0;
  padding: 0 16px 48px;
  display:flex;
  flex-direction: column;
  gap: 18px;
}
.panel{
  border-radius: var(--radius);
  border: 1px solid rgba(214,177,94,.14);
  background: linear-gradient(180deg, rgba(20,16,36,.82), rgba(18,10,30,.58));
  box-shadow: var(--shadow);
  padding: 18px;
}
.panel__head{ display:flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.h1{ margin: 0; font-size: 32px; font-weight: 950; }
.h2{ margin: 0 0 8px 0; font-size: 24px; font-weight: 950; color: var(--gold2); text-shadow: 0 0 18px rgba(240,208,122,.14); }
.muted{ color: var(--muted); }
.small{ font-size: 13px; }
code{ color: var(--gold2); }
.textlink{ color: var(--gold2); text-decoration:none; font-weight: 850; border-bottom: 1px dashed rgba(214,177,94,.28); }
.textlink:hover{ border-bottom-style: solid; }

/* Updates */
.updates{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.updates--full{ grid-template-columns: 1fr; }
.update{ border-radius: 16px; border: 1px solid rgba(214,177,94,.14); background: rgba(0,0,0,.16); padding: 14px; }
.update__date{ font-size: 12px; color: rgba(240,208,122,.85); letter-spacing: .4px; }
.update__title{ margin-top: 6px; font-weight: 950; }
.update__body{ margin: 8px 0 0; color: rgba(233,230,243,.90); font-size: 14px; line-height: 1.4; }

/* Social */
.social{ margin-top: 14px; display:flex; gap: 12px; flex-wrap: wrap; }
.soc{
  width: 52px; height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(214,177,94,.18);
  background: rgba(255,255,255,.04);
  display:grid; place-items:center;
  text-decoration:none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.soc:hover{ transform: translateY(-2px); border-color: rgba(214,177,94,.42); background: rgba(214,177,94,.09); }
.soc__icon{ font-size: 20px; }

/* Contact buttons */
.contact{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(214,177,94,.18);
  background: rgba(255,255,255,.04);
  color: var(--text);
  text-decoration:none;
  font-weight: 900;
  gap: 10px;
}
.btn:hover{ border-color: rgba(214,177,94,.38); background: rgba(214,177,94,.09); }
.btn--gold{ color: #0b0712; border-color: rgba(0,0,0,.14); background: linear-gradient(135deg, var(--gold), var(--gold2)); }

/* Footer */
.footer{
  border-top: 1px solid rgba(214,177,94,.18);
  background: rgba(11,7,18,.65);
  padding: 18px 16px;
}
.footer__inner{
  max-width: 1120px;
  margin: 0 auto;
  display:flex;
  gap: 10px;
  justify-content:center;
  align-items:center;
  flex-wrap: wrap;
}
.dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--gold2), var(--purple));
  box-shadow: 0 0 18px rgba(214,177,94,.25);
}

/* =========================================================
   BACKGROUND (Castle)
   ========================================================= */
html, body { height: 100%; }
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;

  background:
    radial-gradient(900px 500px at 20% 0%, rgba(123,74,226,.18), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(184,74,85,.10), transparent 55%),
    linear-gradient(180deg, rgba(11,7,18,.80), rgba(11,7,18,.55)),
    url('bg_starry_castle.png') center var(--bg-y) / cover no-repeat;

  filter:saturate(1.05) contrast(1.03);
}

/* Make sure wrapper doesn't paint over background */
.page, .wrap, main { background: transparent; }

/* =========================================================
   SECRETS (hover points)
   ========================================================= */
.secrets{position:fixed;inset:0;z-index:-2;pointer-events:none;}
.secret{
  position:absolute;
  width:14px;height:14px;border-radius:999px;
  border:1px solid rgba(177, 120, 255, .65);
  background: radial-gradient(circle at 30% 30%, rgba(255, 214, 122, .95), rgba(255, 214, 122, .0) 70%);
  box-shadow: 0 0 18px rgba(255, 214, 122, .28), 0 0 28px rgba(177,120,255,.18);
  opacity:.18;
  transform: translateZ(0);
}
.secret:hover{opacity:.9;}
.secret::after{
  content: attr(data-tip);
  position:absolute; left:18px; top:-6px;
  white-space:nowrap;
  font-size:12px;
  padding:6px 8px;
  border-radius:10px;
  color:rgba(245,245,255,.92);
  background:rgba(10,10,16,.78);
  border:1px solid rgba(255, 214, 122, .22);
  box-shadow: 0 10px 40px rgba(0,0,0,.55);
  opacity:0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.secret:hover::after{opacity:1; transform: translateY(0);}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 720px){
  .hero__title{ font-size: 34px; }

  .brand__icon{ height: 64px; width: 64px; }
  .brand__wordmark{ width: 180px; }

  /* keep nav usable */
  .nav{ gap: 8px; }
}