/* ============================================================
   🎨 COSMIC PASTA GAMES — NEWS PAGE THEME
   🔧 CHANGE ALL COLORS FROM THIS SINGLE SECTION.
   ============================================================ */
:root {
  --color-bg: #071A2B;
  --color-bg-deep: #04111D;
  --color-surface: #0A2238;
  --color-surface-2: #0D2D4A;
  --color-primary: #2196F3;
  --color-primary-dark: #0D47A1;
  --color-primary-light: #90CAF9;
  --color-highlight: #E3F2FD;
  --color-text: #F4FAFF;
  --color-text-soft: #D6E8F7;
  --color-muted: #8FAFC8;
  --color-line: rgba(144,202,249,.18);
  --color-line-strong: rgba(144,202,249,.38);
  --color-shadow: rgba(4,71,161,.34);
  --color-shadow-strong: rgba(33,150,243,.28);
  --color-overlay: rgba(4,17,29,.78);
  --color-accent-warm: #B3E5FC;
  --scroll-bg-blur: 75px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-bg-deep); }
body {
  margin: 0; min-width: 320px; overflow-x: hidden; color: var(--color-text);
  background: radial-gradient(circle at 50% -10%, rgba(33,150,243,.13), transparent 38%), var(--color-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.page-shell { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }

body::before, body::after {
  content: ""; position: fixed; z-index: -3; pointer-events: none;
  width: 45vw; height: 45vw; border-radius: 50%; filter: blur(var(--scroll-bg-blur));
  will-change: transform;
}
body::before {
  top: -18vw; left: -12vw;
  background: radial-gradient(circle, rgba(33,150,243,.25), rgba(33,150,243,.05) 38%, transparent 70%);
  transform: translate3d(0, calc(var(--scroll-y,0px) * .12), 0);
}
body::after {
  right: -14vw; bottom: -20vw;
  background: radial-gradient(circle, rgba(144,202,249,.18), rgba(13,71,161,.08) 42%, transparent 72%);
  transform: translate3d(0, calc(var(--scroll-y,0px) * -.08), 0);
}

/* HEADER */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px; border-bottom: 1px solid transparent; transition: .35s ease;
}
.site-header.scrolled {
  padding-block: 14px; background: rgba(4,17,29,.76);
  border-bottom-color: var(--color-line); backdrop-filter: blur(18px);
  box-shadow: 0 14px 50px rgba(4,17,29,.25);
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-symbol {
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--color-primary); background:rgba(33,150,243,.12);
  color:var(--color-highlight); font-size:12px; font-weight:900;
}
.brand-copy { display:grid; line-height:.9; }
.brand-copy strong { font-size:12px; letter-spacing:.13em; }
.brand-copy small { margin-top:5px; color:var(--color-primary-light); font-size:8px; letter-spacing:.35em; }
.desktop-nav { display:flex; gap:28px; }
.desktop-nav a {
  position:relative; padding:8px 0; color:var(--color-muted);
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.desktop-nav a::after {
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--color-primary-light); transition:right .25s;
}
.desktop-nav a:hover, .desktop-nav a.active { color:var(--color-highlight); }
.desktop-nav a:hover::after, .desktop-nav a.active::after { right:0; }
.menu-toggle {
  display:none; width:42px; height:42px; border:1px solid var(--color-line);
  background:rgba(10,34,56,.72); color:var(--color-text); cursor:pointer;
}
.menu-toggle span { display:block; width:16px; height:1px; margin:5px auto; background:currentColor; }
.mobile-menu {
  position:fixed; inset:74px 16px auto; z-index:49; display:none; padding:14px;
  border:1px solid var(--color-line); background:rgba(4,17,29,.96); backdrop-filter:blur(20px);
}
.mobile-menu.open { display:grid; }
.mobile-menu a {
  padding:15px 12px; border-bottom:1px solid var(--color-line);
  color:var(--color-text-soft); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}

/* HERO */
.news-hero {
  min-height:68svh; position:relative; display:flex; align-items:end; overflow:hidden;
  padding:0 0 92px; border-bottom:1px solid var(--color-line);
  background:radial-gradient(circle at 70% 30%,rgba(33,150,243,.22),transparent 18%),linear-gradient(145deg,var(--color-bg-deep),var(--color-surface));
}
.hero-grid {
  position:absolute; inset:0; opacity:.20;
  background-image:linear-gradient(rgba(144,202,249,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(144,202,249,.09) 1px,transparent 1px);
  background-size:80px 80px;
  transform:translate3d(0,calc(var(--scroll-y,0px)*-.03),0);
}
.hero-grid::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 45%,transparent 0 11%,rgba(33,150,243,.12) 11.2%,transparent 11.6% 20%,rgba(144,202,249,.08) 20.2%,transparent 20.7%);
}
.hero-content { position:relative; }
.eyebrow { margin:0 0 18px; color:var(--color-primary-light); font-size:10px; font-weight:800; letter-spacing:.2em; }
.news-hero h1 {
  margin:0; font-size:clamp(5rem,12vw,12rem); line-height:.78; letter-spacing:-.08em;
}
.news-hero h1 span { color:transparent; -webkit-text-stroke:1px rgba(227,242,253,.72); }
.hero-copy { max-width:470px; margin:34px 0 0; color:var(--color-text-soft); line-height:1.75; font-size:15px; }
.hero-code { position:absolute; right:32px; bottom:30px; color:var(--color-muted); font-size:8px; font-weight:800; letter-spacing:.17em; }

/* ARCHIVE */
.section { padding:110px 0; }
.news-archive { border-bottom:1px solid var(--color-line); }
.archive-head {
  display:flex; justify-content:space-between; gap:40px; align-items:end;
  padding-bottom:35px; border-bottom:1px solid var(--color-line);
}
.archive-head h2 {
  margin:0; font-size:clamp(3.5rem,7vw,7rem); line-height:.8; letter-spacing:-.07em;
}
.archive-tools { display:grid; gap:18px; justify-items:end; }
.archive-tools > span { color:var(--color-primary-light); font-size:25px; font-weight:800; letter-spacing:-.04em; }
.filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.filter {
  padding:9px 12px; border:1px solid var(--color-line); background:transparent;
  color:var(--color-muted); font-size:8px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; cursor:pointer; transition:.25s;
}
.filter:hover, .filter.active {
  border-color:var(--color-primary); background:rgba(33,150,243,.12);
  color:var(--color-highlight); box-shadow:0 8px 28px rgba(33,150,243,.10);
}

.news-list { margin-top:20px; }
.news-item {
  display:grid; grid-template-columns:170px minmax(0,1fr) 90px; gap:32px;
  align-items:center; padding:28px 0; border-bottom:1px solid var(--color-line);
  transition:.3s ease;
}
.news-item:hover { padding-inline:14px; background:rgba(33,150,243,.045); }
.news-date { color:var(--color-muted); font-size:9px; font-weight:800; letter-spacing:.12em; }
.news-type { display:block; margin-top:8px; color:var(--color-primary-light); font-size:7px; letter-spacing:.14em; text-transform:uppercase; }
.news-body h3 { margin:0; font-size:clamp(1.4rem,2.7vw,2.5rem); letter-spacing:-.04em; }
.news-body p { max-width:700px; margin:10px 0 0; color:var(--color-muted); font-size:12px; line-height:1.7; }
.news-arrow {
  justify-self:end; width:45px; height:45px; display:grid; place-items:center;
  border:1px solid var(--color-line); color:var(--color-primary-light); transition:.25s;
}
.news-item:hover .news-arrow { background:var(--color-primary); color:var(--color-highlight); border-color:var(--color-primary); transform:translateX(5px); }
.empty-state { padding:60px 0; text-align:center; color:var(--color-muted); }

/* CTA */
.news-cta { padding-top:140px; padding-bottom:150px; }
.cta-panel {
  display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:end;
  padding:55px; border:1px solid var(--color-line);
  background:radial-gradient(circle at 80% 20%,rgba(33,150,243,.14),transparent 25%),var(--color-surface);
  box-shadow:0 35px 100px rgba(4,17,29,.3);
}
.cta-panel h2 { margin:0; font-size:clamp(3.5rem,7vw,7rem); line-height:.8; letter-spacing:-.07em; }
.cta-panel h2 span { color:transparent; -webkit-text-stroke:1px rgba(227,242,253,.7); }
.cta-copy p { max-width:450px; color:var(--color-text-soft); line-height:1.75; font-size:13px; }
.cta-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.button {
  display:inline-flex; align-items:center; gap:12px; min-height:45px; padding:0 16px;
  border:1px solid var(--color-line-strong); color:var(--color-text-soft);
  font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; transition:.25s;
}
.button:hover { border-color:var(--color-primary-light); color:var(--color-highlight); transform:translateY(-2px); }
.button-primary { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-highlight); box-shadow:0 14px 40px var(--color-shadow-strong); }
.button-primary:hover { background:var(--color-highlight); border-color:var(--color-highlight); color:var(--color-primary-dark); }

/* FOOTER */
.site-footer { background:var(--color-bg-deep); }
.footer-main { display:flex; justify-content:space-between; gap:60px; padding:90px 0; }
.footer-line { margin-top:20px; color:var(--color-muted); font-size:12px; }
.footer-columns { display:grid; grid-template-columns:repeat(3,150px); gap:30px; }
.footer-columns > div { display:grid; align-content:start; gap:10px; }
.footer-label { margin-bottom:8px; color:var(--color-primary-light); font-size:8px; font-weight:900; letter-spacing:.18em; }
.footer-columns a { color:var(--color-muted); font-size:11px; transition:color .2s; }
.footer-columns a:hover { color:var(--color-highlight); }
.footer-bottom {
  display:flex; justify-content:space-between; padding:18px 0 24px;
  border-top:1px solid var(--color-line); color:var(--color-muted);
  font-size:8px; font-weight:800; letter-spacing:.14em;
}

/* REVEAL */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .75s ease,transform .75s ease; }
.reveal.visible { opacity:1; transform:none; }

/* 🔧 FULL NEWS ARCHIVE LINK */
.archive-link {
  display:inline-flex; align-items:center; width:max-content;
  padding:9px 12px; border:1px solid var(--color-line-strong);
  color:var(--color-primary-light); font-size:8px; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase; transition:.25s ease;
}
.archive-link:hover {
  border-color:var(--color-primary); background:rgba(33,150,243,.10);
  color:var(--color-highlight); transform:translateY(-2px);
}

@media(max-width:900px) {
  .desktop-nav { display:none; }
  .menu-toggle { display:block; }
  .page-shell { width:min(100% - 36px,720px); }
  .archive-head { display:block; }
  .archive-tools { justify-items:start; margin-top:35px; }
  .filters { justify-content:flex-start; }
  .cta-panel { grid-template-columns:1fr; padding:35px; }
}
@media(max-width:620px) {
  .site-header { padding:16px 18px; }
  .page-shell { width:calc(100% - 32px); }
  .news-hero { min-height:65svh; padding-bottom:70px; }
  .news-hero h1 { font-size:clamp(4.3rem,18vw,7rem); }
  .hero-code { right:18px; bottom:18px; font-size:7px; }
  .section { padding:80px 0; }
  .news-item { grid-template-columns:1fr 42px; gap:15px; }
  .news-date { grid-column:1/-1; }
  .news-body p { font-size:11px; }
  .cta-panel { padding:28px; }
  .footer-main { display:block; padding:70px 0; }
  .footer-columns { margin-top:50px; grid-template-columns:1fr 1fr; }
  .footer-columns > div:last-child { grid-column:1/-1; }
  .footer-bottom { display:block; line-height:2; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
}


/* ============================================================
   🔧 COSMIC PASTA GAMES LOGO
   The supplied 512x512 transparent logo is used unchanged.
   ============================================================ */
.brand-symbol {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 36px;
}
.brand-symbol img {
  display:block;
  width:30px;
  height:30px;
  max-width:30px;
  max-height:30px;
  object-fit:contain;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
}

/* 🔧 Brand text only — Google Font: Iceland */
.brand-copy,
.brand-copy strong,
.brand-copy small {
  font-family:"Iceland", sans-serif;
}

/* 🔧 Orbit-center logo: keep it small inside the 250px orbit. */
.orbit-core img {
  display:block;
  width:64px;
  height:64px;
  max-width:64px;
  max-height:64px;
  object-fit:contain;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
}


/* ============================================================
   🔧 NEWS SYSTEM — easy theme controls
   The main color variables live in the :root section above.
   Use those variables for future theme changes.
   ============================================================ */
.news-controls {
  display:flex; justify-content:space-between; gap:24px; align-items:center;
  padding:24px 0; border-bottom:1px solid var(--color-line);
}
.news-search { position:relative; display:flex; align-items:center; width:min(320px,100%); }
.news-search input {
  width:100%; height:40px; padding:0 38px 0 12px; border:1px solid var(--color-line);
  outline:none; background:rgba(4,17,29,.35); color:var(--color-text);
  font-size:9px; font-weight:800; letter-spacing:.13em;
}
.news-search input::placeholder { color:var(--color-muted); }
.news-search input:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(33,150,243,.08); }
.news-search > span { position:absolute; right:12px; color:var(--color-primary-light); }
.game-filter { display:flex; align-items:center; gap:10px; color:var(--color-muted); font-size:8px; font-weight:900; letter-spacing:.14em; }
.game-filter select {
  min-height:36px; border:1px solid var(--color-line); outline:none; background:var(--color-surface);
  color:var(--color-text-soft); padding:0 30px 0 10px; font-size:9px; font-weight:800; letter-spacing:.08em;
}
.game-filter select:focus { border-color:var(--color-primary); }
.featured-news { margin-top:32px; }
.featured-card {
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  min-height:430px; border:1px solid var(--color-line); background:var(--color-surface); overflow:hidden;
  box-shadow:0 30px 90px rgba(4,17,29,.26);
}
.featured-media {
  position:relative; min-height:430px; padding:0; border:0; overflow:hidden; background:var(--color-surface-2); cursor:pointer; text-align:left;
}
.featured-media img, .news-card-media img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .65s ease, filter .45s ease;
}
.featured-card:hover .featured-media img, .news-card:hover .news-card-media img { transform:scale(1.045); filter:saturate(1.08); }
.featured-overlay, .news-card-overlay {
  position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,17,29,.08),rgba(4,17,29,.80)); pointer-events:none;
}
.featured-label { position:absolute; left:22px; bottom:20px; padding:7px 9px; border:1px solid rgba(227,242,253,.28);
  background:rgba(4,17,29,.55); color:var(--color-highlight); font-size:8px; font-weight:900; letter-spacing:.15em; }
.featured-copy { display:flex; flex-direction:column; justify-content:center; padding:48px; }
.featured-copy h2 { margin:12px 0 0; font-size:clamp(2rem,4vw,4.5rem); line-height:.9; letter-spacing:-.055em; }
.featured-copy > p { margin:22px 0; color:var(--color-text-soft); font-size:13px; line-height:1.8; }
.featured-meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.featured-meta span { padding:6px 8px; border:1px solid var(--color-line); color:var(--color-muted); font-size:7px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.news-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:20px; }
.news-card { border:1px solid var(--color-line); background:var(--color-surface); overflow:hidden; transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
.news-card:hover { transform:translateY(-4px); border-color:var(--color-line-strong); box-shadow:0 20px 60px rgba(4,17,29,.24); }
.news-card-media { position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; border:0; overflow:hidden; background:var(--color-surface-2); cursor:pointer; text-align:left; }
.news-card-type { position:absolute; left:14px; bottom:14px; color:var(--color-highlight); font-size:7px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.news-card-code { position:absolute; right:14px; top:14px; color:rgba(227,242,253,.7); font-size:7px; font-weight:900; letter-spacing:.12em; }
.news-card-content { padding:24px; }
.news-card-date { color:var(--color-primary-light); font-size:8px; font-weight:800; letter-spacing:.13em; }
.news-card h3 { margin:12px 0 0; font-size:clamp(1.3rem,2.3vw,2.1rem); line-height:.98; letter-spacing:-.04em; }
.news-card-content > p { margin:12px 0 20px; color:var(--color-muted); font-size:11px; line-height:1.7; }
.news-card-bottom { display:flex; justify-content:space-between; gap:15px; align-items:center; padding-top:16px; border-top:1px solid var(--color-line); }
.news-card-bottom > span { color:var(--color-muted); font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.read-link { padding:0; border:0; background:none; color:var(--color-primary-light); font-size:8px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; cursor:pointer; }
.read-link:hover { color:var(--color-highlight); }
.image-missing::after { content:"ADD NEWS ART"; position:absolute; inset:0; display:grid; place-items:center; color:var(--color-primary-light); font-size:9px; font-weight:900; letter-spacing:.18em; background:var(--color-surface-2); }
.news-reader { width:min(980px,calc(100% - 32px)); max-height:90svh; padding:0; border:1px solid var(--color-line-strong); background:var(--color-bg-deep); color:var(--color-text); box-shadow:0 40px 120px rgba(0,0,0,.55); }
.news-reader::backdrop { background:rgba(2,10,18,.78); backdrop-filter:blur(8px); }
.reader-close { position:absolute; right:14px; top:14px; z-index:4; width:40px; height:40px; border:1px solid rgba(227,242,253,.25); background:rgba(4,17,29,.65); color:var(--color-highlight); font-size:25px; cursor:pointer; }
.reader-media { height:300px; background:var(--color-surface-2); }
.reader-media img { width:100%; height:100%; object-fit:cover; }
.reader-content { padding:38px; overflow:auto; max-height:48svh; }
.reader-meta { color:var(--color-primary-light); font-size:8px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.reader-content h2 { margin:12px 0 0; font-size:clamp(2rem,5vw,4rem); line-height:.92; letter-spacing:-.055em; }
.reader-excerpt { color:var(--color-text-soft); font-size:16px; line-height:1.7; }
.reader-copy { color:var(--color-muted); font-size:14px; line-height:1.9; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body.reader-open { overflow:hidden; }
/* 🔧 FULL NEWS ARCHIVE LINK */
.archive-link {
  display:inline-flex; align-items:center; width:max-content;
  padding:9px 12px; border:1px solid var(--color-line-strong);
  color:var(--color-primary-light); font-size:8px; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase; transition:.25s ease;
}
.archive-link:hover {
  border-color:var(--color-primary); background:rgba(33,150,243,.10);
  color:var(--color-highlight); transform:translateY(-2px);
}

@media(max-width:900px) {
  .news-controls { align-items:flex-start; flex-direction:column; }
  .news-search { width:100%; }
  .game-filter { width:100%; justify-content:space-between; }
  .game-filter select { flex:1; }
  .featured-card { grid-template-columns:1fr; }
  .featured-media { min-height:320px; }
  .featured-copy { padding:34px; }
  .news-list { grid-template-columns:1fr; }
}
@media(max-width:620px) {
  .featured-media { min-height:240px; }
  .featured-copy { padding:26px; }
  .reader-media { height:220px; }
  .reader-content { padding:26px; }
  .news-card-bottom { align-items:flex-start; flex-direction:column; }
}


/* ============================================================
   🔧 GLOBAL NAVIGATION STANDARD — KEEP CONSISTENT ON ALL PAGES
   Change these values if you want to retheme the navigation.
   ============================================================ */
.site-header {
  height: 72px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}
.site-header .brand-symbol {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 36px;
}
.site-header .brand-symbol img {
  width: 30px;
  height: 30px;
  max-width: 30px;
  max-height: 30px;
  object-fit: contain;
  display: block;
}
.site-header .brand-copy {
  display: grid;
  line-height: .9;
  font-family: "Iceland", sans-serif;
}
.site-header .brand-copy strong {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .13em;
}
.site-header .brand-copy small {
  margin-top: 5px;
  font-size: 8px;
  letter-spacing: .35em;
}
.site-header .desktop-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  margin-left: auto;
}
.site-header .desktop-nav .nav-link {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  color: var(--color-muted, #7892a8);
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s ease;
}
.site-header .desktop-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: var(--color-primary-light, #90caf9);
  transition: right .25s ease;
}
.site-header .desktop-nav .nav-link:hover,
.site-header .desktop-nav .nav-link.active {
  color: var(--color-highlight, #e3f2fd);
}
.site-header .desktop-nav .nav-link:hover::after,
.site-header .desktop-nav .nav-link.active::after {
  right: 0;
}
.site-header .menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  padding: 9px;
  border: 1px solid var(--color-line, rgba(144,202,249,.18));
  background: transparent;
  color: var(--color-text, #e3f2fd);
  cursor: pointer;
}
.site-header .menu-toggle span {
  display: block;
  width: 16px;
  height: 1px;
  margin: 5px auto;
  background: currentColor;
}
.mobile-menu {
  position: fixed;
  top: 72px;
  left: 16px;
  right: 16px;
  z-index: 90;
  display: none;
  padding: 14px;
  border: 1px solid var(--color-line, rgba(144,202,249,.18));
  background: rgba(4,17,29,.97);
  backdrop-filter: blur(20px);
}
.mobile-menu.open { display: grid; }
.mobile-menu a {
  padding: 15px 12px;
  border-bottom: 1px solid var(--color-line, rgba(144,202,249,.18));
  color: var(--color-text-soft, #b9cee0);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mobile-menu a:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  .site-header .desktop-nav { display: none; }
  .site-header .menu-toggle { display: block; }
}
@media (min-width: 901px) {
  .mobile-menu { display: none !important; }
}


/* ============================================================
   🔧 GLOBAL NAVIGATION LOCK — IDENTICAL ON EVERY PAGE
   ============================================================ */
.site-header,
.site-header.scrolled {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  box-sizing: border-box !important;
  background: rgba(3,11,19,.78) !important;
  border-bottom: 1px solid rgba(144,202,249,.10) !important;
  box-shadow: 0 10px 36px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.site-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
}
.site-header .brand-symbol {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid var(--color-primary, #2196f3) !important;
  background: rgba(33,150,243,.08) !important;
}
.site-header .brand-symbol img {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  object-fit: contain !important;
  display: block !important;
}
.site-header .brand-copy,
.site-header .brand-copy strong,
.site-header .brand-copy small {
  font-family: "Iceland", sans-serif !important;
}
.site-header .brand-copy strong {
  color: var(--color-highlight, #e3f2fd) !important;
  font-size: 12px !important;
  line-height: .9 !important;
  font-weight: 400 !important;
  letter-spacing: .13em !important;
}
.site-header .brand-copy small {
  margin-top: 5px !important;
  color: var(--color-primary-light, #90caf9) !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .35em !important;
}
.site-header .desktop-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 26px !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}
.site-header .desktop-nav .nav-link {
  position: relative !important;
  display: inline-block !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  color: var(--color-muted, #7892a8) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transition: color .22s ease !important;
}
.site-header .desktop-nav .nav-link::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 100% !important;
  bottom: -4px !important;
  width: auto !important;
  height: 1px !important;
  background: var(--color-primary-light, #90caf9) !important;
  transform: none !important;
  transform-origin: left !important;
  transition: right .22s ease !important;
}
.site-header .desktop-nav .nav-link:hover,
.site-header .desktop-nav .nav-link.active {
  color: var(--color-highlight, #e3f2fd) !important;
}
.site-header .desktop-nav .nav-link:hover::after,
.site-header .desktop-nav .nav-link.active::after {
  right: 0 !important;
}
.site-header .menu-toggle {
  display: none !important;
  width: 38px !important;
  height: 38px !important;
  padding: 9px !important;
  border: 1px solid var(--color-line, rgba(144,202,249,.18)) !important;
  background: rgba(10,34,56,.72) !important;
  color: var(--color-highlight, #e3f2fd) !important;
  cursor: pointer !important;
}
.site-header .menu-toggle span {
  display: block !important;
  width: 16px !important;
  height: 1px !important;
  margin: 5px auto !important;
  background: currentColor !important;
}

/* ============================================================
   🌊 MORE NOTICEABLE SCROLL ATMOSPHERE
   ============================================================ */
.scroll-light {
  position: fixed;
  z-index: -4;
  top: 12vh;
  left: 50%;
  width: min(58vw, 820px);
  height: min(58vw, 820px);
  border-radius: 50%;
  pointer-events: none;
  opacity: .34;
  filter: blur(70px);
  background: radial-gradient(circle, rgba(33,150,243,.24), rgba(144,202,249,.08) 34%, transparent 70%);
  transform: translate3d(-50%, calc(var(--scroll-y, 0px) * -.10), 0) scale(calc(1 + var(--scroll-progress, 0) * .14));
  will-change: transform;
  transition: opacity .3s ease;
}
body.scroll-active .scroll-light { opacity: .52; }

@media (max-width: 900px) {
  .site-header,
  .site-header.scrolled { padding: 0 18px !important; }
  .site-header .desktop-nav { display: none !important; }
  .site-header .menu-toggle { display: block !important; }
}
@media (min-width: 901px) {
  .mobile-menu { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-light { transform: translate3d(-50%,0,0) !important; transition: none !important; }
}

/* ============================================================
   MOBILE NAVIGATION — FINAL SHARED FIX
   ============================================================ */
.site-header .menu-toggle {
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 6px !important;
  color: var(--color-highlight, #E3F2FD) !important;
}
.site-header .menu-toggle span {
  display: block !important;
  width: 18px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  flex: 0 0 1px !important;
  background: var(--color-highlight, #E3F2FD) !important;
  opacity: 1 !important;
}
.mobile-menu {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}
.mobile-menu.open {
  display: grid !important;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 900px) {
  .site-header .desktop-nav { display: none !important; }
  .site-header .menu-toggle { display: flex !important; }
}
@media (min-width: 901px) {
  .site-header .menu-toggle { display: none !important; }
  .mobile-menu { display: none !important; }
}