:root{
  --bg:#0b0a13; --card:#121023cc; --text:#e8e5ff; --muted:#b6b0d8;
  --primary:#8a2be2; --accent:#ff3e6e;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Outfit",system-ui,Segoe UI,Arial,sans-serif;color:var(--text);
  background: radial-gradient(80% 60% at 10% 10%, #1a1730 0%, rgba(26,23,48,0) 60%),
              radial-gradient(60% 40% at 90% 10%, #1b1029 0%, rgba(27,16,41,0) 60%),
              var(--bg); overflow-x:hidden}
canvas#bg{position:fixed;inset:0;z-index:-1}

.glass{backdrop-filter:blur(12px) saturate(140%);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 40px rgba(0,0,0,.35)}

.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;gap:12px;align-items:center}
.brand h1{margin:0;font-weight:800;letter-spacing:.5px}
.brand h1 span{background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{margin:0;color:var(--muted);margin-top:-2px;font-size:.9rem}

.nav{display:flex;align-items:center;gap:8px}
.nav-btn{background:transparent;border:1px solid rgba(255,255,255,.08);color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer;transition:.25s transform,.25s background,.25s border-color}
.nav-btn:hover{transform:translateY(-2px);border-color:var(--primary)}.nav-btn.active{background:linear-gradient(135deg, rgba(138,43,226,.25), rgba(255,62,110,.15));border-color:var(--primary)}
.toggle{width:46px;height:28px;border-radius:999px;display:inline-block;position:relative;cursor:pointer;background:linear-gradient(90deg,#2a233d,#261e37);border:1px solid rgba(255,255,255,.1)}
.theme input{display:none}.toggle::after{content:"";width:20px;height:20px;border-radius:50%;position:absolute;top:50%;left:4px;transform:translateY(-50%);background: radial-gradient(circle at 30% 30%, #fff, #c9c9ff);transition:.25s left}
input:checked + .toggle::after{left:22px}

main{width:min(1200px, 92vw); margin:30px auto}
.section{display:none}.section.visible{display:block}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.card{border-radius:16px;padding:24px}
.grad{background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.quick-links{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 6px}
.chip{border:1px solid rgba(255,255,255,.12);padding:8px 12px;border-radius:999px;font-weight:600;cursor:pointer;text-decoration:none;color:var(--text);
  background:linear-gradient(135deg, rgba(138,43,226,.15), rgba(255,62,110,.08));transition:.25s transform,.25s border-color,.25s background}
.chip:hover{transform:translateY(-2px);border-color:var(--accent)}
.search{margin-top:10px}.search input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.25);color:var(--text);outline:none}

/* ===== Emblem styles ===== */
.emblem-wrap{ position:relative; transform-style:preserve-3d; animation: emblem-float 6s ease-in-out infinite }
.emblem{ width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; filter: drop-shadow(0 10px 18px rgba(0,0,0,.65)) contrast(122%) brightness(110%); }

/* Header emblem (kept original) */
.emblem-wrap--header{ width: 200px; height: 64px; margin-right: 10px; }
.emblem-wrap--header .emblem-glow{ filter: blur(10px); mix-blend-mode: screen; background:
  radial-gradient(60% 50% at 50% 52%, rgba(124,82,255,.45), rgba(124,82,255,0) 60%),
  radial-gradient(42% 42% at 50% 50%, rgba(0,198,255,.30), rgba(0,198,255,0) 70%); }
.emblem-wrap--header .emblem-ring{ border-radius:999px; box-shadow: 0 0 0 1px rgba(138,43,226,.35) inset, 0 0 22px rgba(138,43,226,.30), 0 0 36px rgba(0,200,255,.18); opacity:.75; }

/* Hero emblem (gold glow removed) + 3 effects */
.emblem-wrap--hero{ width: 520px; max-width: 38vw; height: 300px; margin-left:auto; }
.emblem-wrap--hero .pulse{
  position:absolute; inset:-4%; border-radius:999px;
  box-shadow: 0 0 0 1px rgba(148,0,255,.35) inset, 0 0 35px rgba(140,0,255,.3), 0 0 80px rgba(0,180,255,.22);
  animation: pulse-ring 3.8s ease-in-out infinite;
}
.emblem-wrap--hero .nebula{
  position:absolute; inset:0; filter: blur(24px);
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(96, 0, 255, .30), rgba(96, 0, 255, 0) 70%),
    radial-gradient(50% 40% at 55% 45%, rgba(0, 180, 255, .35), rgba(0, 180, 255, 0) 75%),
    radial-gradient(40% 35% at 48% 56%, rgba(185, 0, 255, .25), rgba(185, 0, 255, 0) 70%);
  mix-blend-mode: screen;
  animation: nebula-move 14s ease-in-out infinite;
  opacity:.9;
}
.emblem-wrap--hero .sparks{ position:absolute; inset:0; overflow:hidden; pointer-events:none }
.emblem-wrap--hero .sparks span{
  position:absolute; bottom:-8%; width:2px; height:8px; border-radius:2px;
  background: radial-gradient(circle, #c3a6ff 0%, #8a2be2 60%, rgba(255,255,255,0) 100%);
  box-shadow: 0 0 8px rgba(195,166,255,.75);
  animation: spark-float linear infinite;
  opacity:.8;
}
/* Place a dozen sparks at different paths */
.emblem-wrap--hero .sparks span:nth-child(1){ left:6%;  animation-duration:6s; animation-delay:0s; }
.emblem-wrap--hero .sparks span:nth-child(2){ left:18%; animation-duration:7s; animation-delay:.5s; }
.emblem-wrap--hero .sparks span:nth-child(3){ left:28%; animation-duration:8s; animation-delay:.2s; }
.emblem-wrap--hero .sparks span:nth-child(4){ left:38%; animation-duration:6.5s; animation-delay:1s; }
.emblem-wrap--hero .sparks span:nth-child(5){ left:48%; animation-duration:7.5s; animation-delay:.8s; }
.emblem-wrap--hero .sparks span:nth-child(6){ left:58%; animation-duration:8.5s; animation-delay:.3s; }
.emblem-wrap--hero .sparks span:nth-child(7){ left:68%; animation-duration:6.8s; animation-delay:1.2s; }
.emblem-wrap--hero .sparks span:nth-child(8){ left:76%; animation-duration:7.8s; animation-delay:.6s; }
.emblem-wrap--hero .sparks span:nth-child(9){ left:84%; animation-duration:8.3s; animation-delay:1.1s; }
.emblem-wrap--hero .sparks span:nth-child(10){ left:12%; animation-duration:7.2s; animation-delay:1.6s; }
.emblem-wrap--hero .sparks span:nth-child(11){ left:32%; animation-duration:6.9s; animation-delay:1.9s; }
.emblem-wrap--hero .sparks span:nth-child(12){ left:72%; animation-duration:7.7s; animation-delay:1.3s; }

/* Keyframes for the 3 effects */
@keyframes pulse-ring{
  0%,100%{ transform: scale(0.98); opacity:.75 }
  50%{ transform: scale(1.02); opacity:1 }
}
@keyframes nebula-move{
  0%{ transform: translate(0,0) scale(1) }
  50%{ transform: translate(-2%, 2%) scale(1.04) }
  100%{ transform: translate(0,0) scale(1) }
}
@keyframes spark-float{
  0%{ transform: translateY(0) scaleY(1) translateX(0); opacity:.9 }
  70%{ transform: translateY(-85%) scaleY(1.6) translateX(8px); opacity:.7 }
  100%{ transform: translateY(-110%) scaleY(2.2) translateX(12px); opacity:0 }
}

/* Parallax float baseline */
@keyframes emblem-float { 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(-6px) } }

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cardItem{position:relative;overflow:hidden;padding:18px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1)}
.cardItem::before{content:"";position:absolute;inset:-2px;border-radius:18px;background:conic-gradient(from var(--angle), var(--primary), transparent 30%, var(--accent), transparent 60%, var(--primary));filter:blur(14px);z-index:-1;animation:glow 6s linear infinite; --angle: 0deg}
@keyframes glow{to{--angle:360deg}} .cardItem h4{margin:4px 0 8px}.cardItem p{margin:0;color:var(--muted)}
.badge{font-size:.75rem;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.2);margin-right:8px}
.paginator{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:14px}
.page-btn{background:transparent;border:1px solid rgba(255,255,255,.12);padding:8px 12px;border-radius:10px;color:var(--text);cursor:pointer}
.page-info{color:var(--muted)}

.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px}
.filters{display:flex;gap:8px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.article{border-radius:16px;padding:18px;margin:14px 0}
.two-col{columns:2;gap:18px}
.scroll-table{max-height:360px;overflow:auto;border-radius:12px;border:1px solid rgba(255,255,255,.08)}
table{width:100%;border-collapse:collapse}
thead th{position:sticky;top:0;background:#141227;padding:10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.1)}
tbody td{padding:10px;border-bottom:1px dashed rgba(255,255,255,.06);color:var(--muted)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.t-item{padding:18px;border-radius:16px}
.site-footer{margin:40px auto 24px;width:min(1200px,92vw);display:flex;align-items:center;justify-content:center;padding:16px;border-radius:14px}

@media (max-width:980px){.hero{grid-template-columns:1fr}.grid,.cards{grid-template-columns:repeat(2,1fr)}.timeline{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid,.cards{grid-template-columns:1fr}.two-col{columns:1}}


/* --- Accessibility & motion --- */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
@media (prefers-reduced-motion: reduce){
  .emblem-wrap{animation:none}
  .sparks span,.nebula{animation:none}
}

/* --- Mobile nav --- */
.hamburger{display:none;cursor:pointer}
@media (max-width: 780px){
  .hamburger{display:block;background:transparent;border:1px solid rgba(255,255,255,.15);padding:8px 10px;border-radius:10px}
  .nav{position:absolute;right:12px;top:56px;display:none;flex-direction:column;gap:6px;background:var(--card);padding:10px;border-radius:12px}
  .nav.open{display:flex}
}

/* --- Readability & hierarchy --- */
body{line-height:1.6}
.article p{max-width:68ch}
.hero h2{font-size: clamp(28px, 4vw, 40px)}
.tag{opacity:.85}

/* --- Card polish --- */
.cardItem{transition:transform .25s ease, box-shadow .25s ease}
.cardItem:hover{transform:translateY(-4px);box-shadow:0 14px 38px rgba(0,0,0,.35)}

/* --- Buttons --- */
.btn{display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));font-weight:700;text-decoration:none;color:var(--text)}
.btn--primary{border-color:transparent;background:linear-gradient(90deg,var(--primary),var(--accent));color:white}
.btn--primary:hover{filter:brightness(1.05)}

/* --- Chips --- */
.chip{backdrop-filter: blur(8px);font-weight:600}
.chip:hover{background:linear-gradient(135deg, rgba(138,43,226,.22), rgba(255,62,110,.18))}


/* ===== Extra Visual Upgrades ===== */

/* Shadows scale */
:root{
  --shadow-1: 0 4px 16px rgba(0,0,0,.25);
  --shadow-2: 0 10px 28px rgba(0,0,0,.32);
  --shadow-3: 0 18px 48px rgba(0,0,0,.45);
}

/* Subtle noise texture */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:-1;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQoU2NkYGD4z0ACwDiqQGQGQw0AAChcA1dGm0orAAAAAElFTkSuQmCC');
  background-size: 8px 8px;
}

/* Card glass edge light */
.card,.glass{
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-1);
  position: relative;
}
.card::before,.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;background:linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}

/* Nav hover glow */
.nav-btn:hover{ text-shadow: 0 0 10px rgba(138,43,226,.6) }
.nav-btn.active{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.15) ; border-radius:10px}

/* Animated gradient text shimmer on .grad headings */
.grad{ position:relative; background-clip:text; -webkit-background-clip:text; color:transparent;
  background-image: linear-gradient(90deg, var(--primary), var(--accent));
}


/* Section dividers */
.section{ position:relative; }
.section:not(:first-child){ margin-top: 48px }
.section:not(:first-child)::before{
  content:""; position:absolute; left:0; right:0; top:-24px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}

/* Fancy underline on links (non-buttons) */
a:not(.btn){ position:relative; text-decoration:none }
a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: right .25s ease;
}
a:not(.btn):hover::after{ right:0 }

/* Primary button animated border */
.btn--primary{
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)), 
                    linear-gradient(90deg, var(--primary), var(--accent));
  border: 1px solid transparent;
}
.btn--primary:hover{ transform: translateY(-1px) }
.btn,.nav-btn{ transition: transform .2s ease, box-shadow .2s ease, filter .2s ease }

/* Tilt effect on cards */
.cardItem{ will-change: transform }
.cardItem:hover{ transform: translateY(-4px) rotateX(2deg) rotateY(-2deg) }

/* Sticky header elevation on scroll */
.site-header{ transition: box-shadow .25s ease, background .25s ease, backdrop-filter .25s ease }
.site-header.scrolled{ box-shadow: var(--shadow-2); backdrop-filter: blur(10px); background: rgba(18,16,35,.55) }

/* Back-to-top button */
#toTop{
  position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items:center; border:1px solid rgba(255,255,255,.15);
  background: var(--card); box-shadow: var(--shadow-2); cursor: pointer; opacity:0; pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
}
#toTop.show{ opacity:1; pointer-events:auto; transform: translateY(0) }
#toTop:hover{ transform: translateY(-2px) }

/* Text selection color */
::selection{ background: rgba(138,43,226,.35) }


/* ===== Round 3: 20 More Visual/UX Upgrades ===== */

/* 1) Section title accent dot and underline */
.section .section-title,
.section > h2, .section > h3 {
  position: relative;
  padding-bottom: 6px;
}
.section .section-title::after,
.section > h2::after, .section > h3::after{
  content:""; position:absolute; left:0; bottom:0; width:56px; height:2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius:2px;
}
.section .section-title::before,
.section > h2::before, .section > h3::before{
  content:""; position:absolute; left:-10px; bottom:-3px; width:6px; height:6px; border-radius:50%;
  background: var(--accent); filter: blur(0.5px);
}

/* 2) Smooth section switching (fade) */
.section{ opacity:0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
.section.visible{ opacity:1; transform: translateY(0); }

/* 3) Elevate mobile nav dropdown more */
@media (max-width: 780px){
  .nav{ box-shadow: 0 18px 40px rgba(0,0,0,.45); backdrop-filter: blur(8px); }
}

/* 4) Tables: zebra, rounded and sticky header */
table{ width:100%; border-collapse: separate; border-spacing:0 6px; }
table thead th{ position: sticky; top:0; z-index:1; background: rgba(18,16,35,.85); backdrop-filter: blur(8px); }
table tbody tr{ background: rgba(255,255,255,.04); }
table tbody tr:nth-child(2n){ background: rgba(255,255,255,.06); }
table th, table td{ padding:10px 12px; }
table tbody tr{ border-radius:12px; }
table tbody tr td:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px; }
table tbody tr td:last-child{ border-top-right-radius:12px; border-bottom-right-radius:12px; }

/* 5) Better images inside content */
.article img{ display:block; max-width:100%; height:auto; border-radius:14px; box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .25s ease; }
.article img:hover{ transform: scale(1.02); }

/* 6) Active nav indicator line */
.nav-btn{ position:relative }
.nav-btn.active::after{
  content:""; position:absolute; left:8px; right:8px; bottom:-6px; height:2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius:2px;
}

/* 7) Scrollbar styling */
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, var(--primary), var(--accent)); border-radius:10px }
*::-webkit-scrollbar-track{ background: rgba(255,255,255,.05) }

/* 8) Inputs / search field */
input[type="text"], input[type="search"]{
  border-radius:12px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  padding:10px 12px; color: var(--text); outline:none; transition: box-shadow .2s ease, border-color .2s ease;
}
input[type="text"]:focus, input[type="search"]:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(138,43,226,.25) }

/* 9) Tag / badge variants */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-weight:700; letter-spacing:.2px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12)
}
.badge--new{ background: linear-gradient(90deg, rgba(124,58,237,.25), rgba(244,63,94,.25)); border-color: transparent }
.badge--hot{ background: linear-gradient(90deg, rgba(244,63,94,.3), rgba(249,115,22,.25)); border-color: transparent }

/* 10) Page buttons */
.page-btn{ border-radius:12px; padding:10px 12px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); }
.page-btn:hover{ transform: translateY(-2px) }

/* 11) List bullets -> subtle glowing dots */
.article ul{ list-style:none; padding-left:18px }
.article ul li{ position:relative; padding-left:14px }
.article ul li::before{
  content:""; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--accent) 0%, var(--primary) 100%);
}

/* 12) CTA pulse ring (optional usage: .btn--ring) */
.btn--ring{ position:relative; overflow:visible }
.btn--ring::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit; border:2px solid rgba(138,43,226,.35); opacity:.0;
  animation: ring 2.2s ease-in-out infinite;
}
@keyframes ring{ 0%{transform:scale(.9); opacity:.0} 40%{opacity:.6} 100%{transform:scale(1.1); opacity:0} }

/* 13) Section content reveal utility */
.reveal{ opacity:0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease }
.reveal.inview{ opacity:1; transform: translateY(0) }

/* 14) Footer band polish */
footer{ border-top:1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.04)); }

/* 15) Spotlight cursor overlay (disabled on reduced motion) */

@media (prefers-reduced-motion: reduce){  }

/* 16) Hero subtext softness */
.tag{ text-shadow: 0 1px 0 rgba(0,0,0,.1) }

/* 17) Card border radiance on hover */
.card:hover,.glass:hover{ box-shadow: 0 18px 50px rgba(0,0,0,.45) }

/* 18) Safer focus ring for dark backgrounds */
:focus-visible{ outline-color: var(--primary) }

/* 19) Align main container width for balance */
main{ width:min(1200px,92vw); margin: 32px auto }

/* 20) Gradient hr helper */
.hr-grad{ height:1px; border:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent) }


/* ===== Round 4: 25 More Visual & UX Enhancements ===== */

/* 1) Responsive type scale */
h1{font-size: clamp(32px, 6vw, 56px)}
h2{font-size: clamp(24px, 4.5vw, 40px)}
h3{font-size: clamp(20px, 3.5vw, 28px)}
p,li{font-size: clamp(15px, 1.7vw, 18px)}

/* 2) Hero halo (subtle, no sheen) */
.hero h2{position:relative}
.hero h2::before{content:"";position:absolute;inset:-8px -16px;z-index:-1;
  background: radial-gradient(60% 50% at 0% 50%, rgba(124,58,237,.15), transparent 70%);
  filter: blur(8px); border-radius:16px}

/* 3) Header bottom separator line */
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent)}

/* 4) Button ripple (opt-in: .btn--ripple) */
.btn--ripple{ position:relative; overflow:hidden }
.btn--ripple:after{ content:""; position:absolute; left:50%; top:50%; width:0; height:0; border-radius:50%;
  background: rgba(255,255,255,.25); transform: translate(-50%,-50%); opacity:0; }
.btn--ripple:active:after{ width:220%; height:220%; opacity:1; transition: width .35s ease, height .35s ease, opacity .6s ease }

/* 5) Button group utility */
.btn-group{ display:flex; flex-wrap:wrap; gap:10px }

/* 6) Icon button */
.icon-btn{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04) }
.icon-btn:hover{ transform: translateY(-2px) }

/* 7) Active chip glow */
.chip.active{ box-shadow: 0 0 0 2px rgba(124,58,237,.45) inset, 0 8px 22px rgba(124,58,237,.25) }

/* 8) Corner ribbon for cards */
.ribbon{ position:absolute; top:12px; left:-8px; padding:6px 14px; background:linear-gradient(90deg,var(--primary),var(--accent)); color:#fff;
  transform: skew(-12deg); border-radius:8px; font-weight:800; box-shadow:0 8px 18px rgba(0,0,0,.35) }
.ribbon span{ display:block; transform: skew(12deg) }

/* 9) Auto-fit grid utility */
.grid-autofit{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:14px }

/* 10) Code block styling + copy helper */
pre{ position:relative; background: #0f0d1d; color:#e8e5ff; padding:16px 18px; border-radius:12px; overflow:auto;
  box-shadow: 0 10px 22px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08) }
pre .copy{ position:absolute; right:10px; top:10px; border:1px solid rgba(255,255,255,.15); border-radius:8px; padding:4px 8px; font-size:12px; background: rgba(255,255,255,.06) }
code{ font-family: ui-monospace,SFMono-Regular,Consolas,Menlo,monospace }

/* 11) kbd styling */
kbd{ background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-bottom-width:2px; padding:2px 6px; border-radius:6px; font-weight:700 }

/* 12) Tooltip (attribute-driven) */
[data-tip]{ position:relative }
[data-tip]:hover::after{
  content: attr(data-tip); position:absolute; left:50%; transform:translateX(-50%); bottom: calc(100% + 8px);
  background: rgba(18,16,35,.9); color: var(--text); padding:8px 10px; border-radius:10px; white-space:nowrap; border:1px solid rgba(255,255,255,.12);
}

/* 13) Toast notifications */
#toast{ position: fixed; right: 16px; bottom: 16px; display:flex; flex-direction:column; gap:10px; z-index: 1000 }
.toast{ background: rgba(18,16,35,.9); color: var(--text); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:10px 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.4); animation: toast-in .2s ease }
@keyframes toast-in{ from{ transform: translateY(8px); opacity:0 } to{ transform: translateY(0); opacity:1 } }

/* 14) Skeleton shimmer */
.skeleton{ position:relative; background: rgba(255,255,255,.06); overflow:hidden }
.skeleton::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: translateX(-100%); animation: sk 1.6s linear infinite }
@keyframes sk{ to{ transform: translateX(100%) } }
@media (prefers-reduced-motion: reduce){ .skeleton::after{ animation: none } }

/* 15) Lightbox overlay */
#lightbox{ position: fixed; inset:0; background: rgba(10,8,20,.85); display:none; place-items:center; z-index: 999 }
#lightbox img{ max-width:90vw; max-height:90vh; border-radius:14px; box-shadow: 0 20px 60px rgba(0,0,0,.55) }
#lightbox.show{ display:grid }

/* 16) Pagination polish */
.pagination{ display:flex; gap:8px; align-items:center }
.pagination .page-btn{ min-width:40px; text-align:center }

/* 17) Breadcrumb */
.breadcrumb{ display:flex; gap:8px; align-items:center; opacity:.9 }
.breadcrumb a{ opacity:.9 }
.breadcrumb .sep{ opacity:.5 }

/* 18) Styled select */
select{ border-radius:12px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); padding:10px 12px; color: var(--text) }
select:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(138,43,226,.25) }

/* 19) Form row spacing */
.form-row{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)) }

/* 20) Horizontal scroll shadows (apply class to container) */
.scroll-shadow{ position:relative; overflow:auto }
.scroll-shadow::before,.scroll-shadow::after{ content:""; position:absolute; top:0; bottom:0; width:28px; pointer-events:none }
.scroll-shadow::before{ left:0; background: linear-gradient(90deg, rgba(11,10,19,1), rgba(11,10,19,0)) }
.scroll-shadow::after{ right:0; background: linear-gradient(270deg, rgba(11,10,19,1), rgba(11,10,19,0)) }

/* 21) Divider with icon */
.divider{ display:flex; align-items:center; gap:12px; opacity:.85 }
.divider:before, .divider:after{ content:""; flex:1; height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent) }

/* 22) Badge position helpers on cards */
.badge-pos{ position:absolute; top:10px; right:10px }
.badge-pos.left{ left:10px; right:auto }

/* 23) Modal base (general use) */
.modal{ position:fixed; inset:0; display:none; place-items:center; background: rgba(10,8,20,.7); z-index: 1000 }
.modal .box{ background: rgba(18,16,35,.95); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:18px; width:min(560px,92vw) }
.modal.show{ display:grid }

/* 24) Table compact utility */
.table-compact th, .table-compact td{ padding:6px 8px }

/* 25) Gradient border utility */
.gborder{ position:relative; border-radius:14px; }
.gborder::before{ content:""; position:absolute; inset:0; padding:1px; border-radius:inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none }


/* ===== Page/Card Transition Overlay ===== */
#pagetransition{
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: radial-gradient(120% 120% at 50% 50%, rgba(11,10,19,0), rgba(11,10,19,.6) 60%, rgba(11,10,19,.9) 100%);
  opacity: 0; transform: scale(1.02); transition: opacity .28s ease, transform .28s ease;
}
#pagetransition.active{ opacity: 1; transform: scale(1.0) }
@media (prefers-reduced-motion: reduce){
  #pagetransition{ transition: none }
}

/* Neutralize old fade overlay */
#pagetransition{ opacity:0 !important; pointer-events:none !important; }

/* Remove active underline under nav/chips */
.nav-btn.active::after{ display:none !important }

/* ===== Cinematic page transition + card fall-in ===== */
.section{ will-change: transform, filter, opacity }
.section.entering{ transform: scale(1.02); filter: blur(10px); opacity: 0 }
.section.entering.entering-show{ transform: scale(1); filter: blur(0); opacity: 1; 
  transition: transform .45s ease, filter .45s ease, opacity .45s ease }
.section.leaving{ transform: scale(0.985); filter: blur(6px); opacity: 0; 
  transition: transform .35s ease, filter .35s ease, opacity .35s ease }

/* Staggered fall-in for cards */
.cardItem,.card{ transform-origin: 50% 20% }
.cardItem.fall-in, .card.fall-in{ opacity:0; transform: translateY(-8px) scale(.98) rotateX(2deg); filter: blur(4px) }
.cardItem.fall-in.in, .card.fall-in.in{ opacity:1; transform: translateY(0) scale(1) rotateX(0); filter: blur(0);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease, filter .5s ease;
  transition-delay: calc(var(--stagger, 0) * 25ms) }

/* --- Remove underline/indicator for nav buttons on hover and generally --- */
.nav-btn::after{ content: none !important; display: none !important; }
.nav-btn:hover::after{ content: none !important; display: none !important; }
.nav-btn.active::after{ content: none !important; display: none !important; }


/* --- Kill gradient underline for pill/CTA elements that are links --- */
a.nav-btn::after,
a.chip::after,
a.badge::after,
a.page-btn::after,
a.btn::after,
a[class*="btn"]::after,
a[role="button"]::after,
.chip::after,
.badge::after,
.page-btn::after {
  content: none !important;
  display: none !important;
}

/* Also disable on hover/focus for these */
a.nav-btn:hover::after,
a.chip:hover::after,
a.badge:hover::after,
a.page-btn:hover::after,
a.btn:hover::after,
a[class*="btn"]:hover::after,
a[role="button"]:hover::after,
.chip:hover::after,
.badge:hover::after,
.page-btn:hover::after,
a.nav-btn:focus::after,
a.chip:focus::after,
a.badge:focus::after,
a.page-btn:focus::after,
a.btn:focus::after,
a[class*="btn"]:focus::after,
a[role="button"]:focus::after,
.chip:focus::after,
.badge:focus::after,
.page-btn:focus::after {
  content: none !important;
  display: none !important;
}


/* ==== Galaxy background visible + MU-styled tables (safe override) ==== */
html, body { background: transparent; }
#bg{ position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: -1 !important; display:block !important; }

/* Remove opaque surfaces that might cover the galaxy on dedicated pages */
.page, .page-wrap, .container, .content, .surface, .rates-surface, main { background: transparent !important; box-shadow: none; }

/* MU rates table styling */
.rates-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 8px;
  font-weight:600;
  text-align:left;
  color:var(--text);
}
.rates-table th{
  background:linear-gradient(90deg,rgba(138,43,226,.3),rgba(255,62,110,.2));
  padding:12px 16px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.rates-table td{
  background:rgba(18,16,35,.7);
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.rates-table tr:hover td{
  background:linear-gradient(90deg,rgba(138,43,226,.25),rgba(255,62,110,.15));
  transition:.25s background;
}

/* ==== OVERRIDES: fix white / transparent look ==== */
html{
  background-color:#050716;
}
body{
  background-color:#050716;
  background:
    radial-gradient(80% 60% at 10% 10%, #1a1730 0%, rgba(26,23,48,0) 60%),
    radial-gradient(60% 40% at 90% 10%, #1b1029 0%, rgba(27,16,41,0) 60%),
    var(--bg);
}

/* Glass panels (header, hero card) */
.glass{
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  background: linear-gradient(180deg, rgba(6,8,24,0.98), rgba(3,5,18,0.98));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 28px 60px rgba(0,0,0,0.85);
}

/* Featured cards */
.cardItem{
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(164,120,255,0.16), transparent 55%),
    linear-gradient(145deg, rgba(10,12,40,0.98), rgba(8,10,32,0.98));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 40px rgba(0,0,0,0.75);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.cardItem::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background:
    conic-gradient(
      from var(--angle,0deg),
      transparent 0%,
      rgba(255,255,255,0.18) 10%,
      rgba(195,166,255,0.6) 25%,
      transparent 40%,
      transparent 60%,
      rgba(255,144,214,0.5) 75%,
      transparent 100%
    );
  mix-blend-mode: screen;
  opacity: .4;
  z-index: -1;
  animation: glow 6s linear infinite;
}

@keyframes glow { to { --angle: 360deg; } }

.cardItem h4{
  margin: 4px 0 8px;
}

.cardItem p{
  margin: 0;
  color: var(--muted);
}

.cardItem:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0,0,0,0.9);
  border-color: rgba(224,210,255,0.9);
}


/* Search dropdown */
.search-results{
  margin-top:6px;
  border-radius:12px;
  background:rgba(5,5,15,.95);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 30px rgba(0,0,0,.85);
  max-height:260px;
  overflow:auto;
  font-size:.9rem;
}
.search-result{
  display:block;
  padding:8px 12px;
  text-decoration:none;
  color:var(--text);
}
.search-result:hover{
  background:linear-gradient(90deg, rgba(138,43,226,.25), rgba(255,62,110,.2));
}