:root{
  /* Color tokens */
  --bg:#0b1020;
  --surface:#0f152b;
  --card:#121a36;
  --text:#e8ecff;
  --muted:#a9b4dd;
  /* Accessible brand colors with >=4.5:1 contrast on dark */
  --brand-1:#7dd3fc; /* cyan-300 */
  --brand-2:#a78bfa; /* violet-300 */
  --brand-strong:#e0f2fe; /* text on brand */
  --danger:#ef4444;
  --success:#22c55e;
  --focus:#93c5fd;

  /* Gradient & shadow */
  --grad: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  /* Radius & spacing (8pt scale) */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px;
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:40px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 700px at 20% -10%, #1a2450 0%, var(--bg) 40%) fixed;
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:16px}
.grid{display:grid;gap:16px}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  box-shadow: var(--shadow);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow: 0 18px 50px rgba(0,0,0,.45); border-color: rgba(255,255,255,.18)}
.card .thumb{display:block; aspect-ratio: 16/9; background:#0b1020; position:relative}
.card .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.card .body{padding:12px}
.card .title{font-weight:650; font-size:1.05rem; line-height:1.25; margin:0 0 6px}
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:#1c254d; color:#c7d2fe; font-size:.75rem; border:1px solid rgba(255,255,255,.08)}
.price{font-weight:700; letter-spacing:.2px}
.rating{color:#fbbf24}
.btn{ /* replaced below */ }
.btn:active{transform: translateY(1px)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.1)}
.btn.block{width:100%}
input, select, textarea{
  background:#0e1533; color:var(--text); border:1px solid rgba(255,255,255,.12);
  padding:10px 12px; border-radius:12px; width:100%;
}
label{font-size:.9rem; color:var(--muted)}
nav{
  position:sticky; top:0; z-index:20; backdrop-filter: blur(14px);
  background: rgba(7, 10, 25, .6); border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{display:flex; align-items:center; gap:14px; padding:10px 16px}
nav .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px}
nav .brand img{width:28px;height:28px}
nav .spacer{flex:1}
.footer{opacity:.8; font-size:.9rem; border-top:1px solid rgba(255,255,255,.06); margin-top:24px; padding:24px 0}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:#091024; border:1px solid rgba(255,255,255,.12); padding:2px 6px; border-radius:6px}
.flex{display:flex; gap:12px;align-items:center}
.row{display:flex; gap:16px; flex-wrap:wrap}
.col{flex:1 1 280px}
.hero{
  padding:40px 0 6px;
}
.hero h1{font-size:clamp(1.8rem, 3.5vw, 3rem); line-height:1.05; margin:0 0 8px}
.hero p{color:var(--muted); margin:0 0 18px}
.searchbar{display:flex; gap:10px; flex-wrap:wrap}
hr{border:0; border-top:1px solid rgba(255,255,255,.09); margin:18px 0}
.toast{position:fixed; right:16px; bottom:16px; background:#111a3b; border:1px solid rgba(255,255,255,.1); padding:12px 14px; border-radius:12px; box-shadow:var(--shadow); display:none}
.show{display:block}
.table{width:100%; border-collapse:separate; border-spacing:0 10px}
.table th{text-align:left; color:#cbd5ff; font-weight:600; font-size:.9rem}
.table td{background:#0e1533; padding:12px; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08)}
.table tr td:first-child{border-left:1px solid rgba(255,255,255,.08); border-radius:10px 0 0 10px}
.table tr td:last-child{border-right:1px solid rgba(255,255,255,.08); border-radius:0 10px 10px 0}
.small{font-size:.85rem; color:var(--muted)}
.code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; background:#0a1027; padding:8px 10px; border:1px solid rgba(255,255,255,.12); border-radius:10px}
footer a{color:var(--primary)}

/* --- Micro-interactions and bounce --- */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
  60% { transform: translateY(-3px); }
}
.btn.bounce:hover { animation: bounce 0.9s ease; }
.btn{ /* replaced below */ }
.card:hover{ transform: translateY(-4px) scale(1.01); }
.hero{ padding:32px 0 0; } /* tighter */
.container{ padding:12px; } /* reduce padding to avoid empty space */
.grid.cards{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
h2{ margin:10px 0; }
.row{ gap:10px; }
.card .body{ padding:10px; }
.badge{ transform: translateZ(0); }

/* ==== AMP Visual Refresh ==== */

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; padding:10px 16px; border-radius:var(--r-md); border:1px solid transparent;
  cursor:pointer; transition:transform .04s ease, filter .2s ease, background-color .2s ease, border-color .2s ease;
  line-height:1; user-select:none; position:relative; overflow:hidden;
}
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

.btn--primary{ background:var(--grad); color:#0b1020; }
.btn--primary:hover{ filter:brightness(1.05); }
.btn--primary:disabled{ opacity:.6; cursor:not-allowed; }

.btn--secondary{ background:#0f1b45; color:var(--text); border-color:rgba(255,255,255,.12); }
.btn--secondary:hover{ background:#132055; }
.btn--secondary:disabled{ opacity:.6; cursor:not-allowed; }

.btn--ghost{ background:transparent; color:var(--text); border-color:rgba(255,255,255,.18); }
.btn--ghost:hover{ background:rgba(255,255,255,.05); }

/* Ripple (JS adds .rippling span) */
.btn .rippling{
  position:absolute; border-radius:50%; transform:translate(-50%,-50%);
  animation:ripple .6s ease-out; pointer-events:none; background:rgba(255,255,255,.35);
}
@keyframes ripple{ from{width:0;height:0;opacity:.35} to{width:320px;height:320px;opacity:0} }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-lg);
  box-shadow: var(--shadow);
  overflow:hidden;
  transform: perspective(800px) translateZ(0);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
}
.card:hover{ transform: perspective(800px) rotateX(1deg) rotateY(-1deg) translateY(-3px); box-shadow: 0 18px 50px rgba(0,0,0,.45); border-color: rgba(255,255,255,.18) }

.container{max-width:1200px;margin:0 auto;padding:var(--sp-2)}
.grid{display:grid;gap:var(--sp-2)}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.hero{ padding:var(--sp-4) 0 var(--sp-2); }
h1{ margin:0 0 var(--sp-1); }
h2{ margin:var(--sp-2) 0 var(--sp-1); }
.row{display:flex; gap:var(--sp-2); flex-wrap:wrap}
.col{flex:1 1 280px}
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:#1c254d; color:#c7d2fe; font-size:.8rem; border:1px solid rgba(255,255,255,.12)}

/* Tabs strip under navbar */
.tabs-wrap{ position:sticky; top:52px; z-index:19; background: rgba(7,10,25,.55); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.06) }
.tabs{ display:flex; flex-wrap:wrap; gap:8px; padding:8px 0 }
.tab{ padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.08); color:var(--text); font-weight:600; }
.tab:hover{ background:rgba(255,255,255,.06) }
.tab.active{ background:var(--brand-1); color:#0b1020; border-color:transparent }

/* Prev/Next floating panel */
.prevnext{ position:fixed; left:16px; bottom:16px; display:flex; gap:8px; z-index:30 }
.placeholder .thumb{ background:repeating-linear-gradient( 45deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 10px, rgba(255,255,255,.02) 10px, rgba(255,255,255,.02) 20px ); }

.grad-header{ 
  background: linear-gradient(90deg, var(--brand-2), var(--brand-1));
  padding: 24px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.center{ text-align:center }
.brand-title{ margin:0; font-size:clamp(22px,3vw,34px); font-weight:800; color:white }
.subtitle{ color: rgba(255,255,255,.9); margin-top:4px; font-weight:600 }
.main-menu{ margin-top:12px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px }


.menu-link{
  color:white; font-weight:700; padding:10px 14px; border-radius:14px;
  border:1px solid rgba(255,255,255,.35);
  background: transparent;
  transition: all .25s ease;
}
.menu-link:hover{
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,.55);
  transform: translateY(-2px);
}
.menu-link.on{
  background: rgba(255,255,255,0.25);
  color: white;
  border-color: rgba(255,255,255,0.55);
}


@keyframes nav-bounce { 0%,20%,50%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-4px)} 60%{transform:translateY(-2px)} }
.menu-link:hover{ animation: nav-bounce .7s ease; }

@media (max-width:640px){
  .main-menu{ margin-top:12px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px }
  .menu-link{ padding:6px 10px; font-size:.9rem }
}


/* === FORCE OVERRIDES v20250808-161856 === */
:root {
  --brand-1:#6fd3ff; /* adjusted cyan */
  --brand-2:#9b84ff; /* adjusted violet */
}
.grad-header{
  background: linear-gradient(90deg, var(--brand-2), var(--brand-1)) !important;
}
.main-menu{ gap:12px !important }
.menu-link{
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
}
.menu-link:hover{
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.65) !important;
  transform: translateY(-2px) !important;
}
.menu-link.on{
  background: rgba(255,255,255,0.28) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.75) !important;
}


/* === FORCE MATCH HEADER + TABS TO MAIN BG === */
.grad-header {
  background: radial-gradient(1200px 700px at 20% -10%, #1a2450 0%, var(--bg) 40%) fixed !important;
}
.menu-link {
  background: radial-gradient(1200px 700px at 20% -10%, #1a2450 0%, var(--bg) 40%) fixed !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
}
.menu-link:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.55) !important;
  transform: translateY(-2px) !important;
}
.menu-link.on {
  background: rgba(255,255,255,0.25) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.65) !important;
}


/* === AMP Sidebar Navigation === */
:root{ --sidebar-w: 240px; }

/* Hide top menu now that we have a sidebar */
.grad-header .main-menu{ display:none !important; }

/* Shift layout to make room for sidebar */
body.sidebar-layout{ margin-left: var(--sidebar-w); }
@media (max-width: 900px){
  body.sidebar-layout{ margin-left: 0; }
}

.amp-sidebar{
  position: fixed; top:0; left:0; bottom:0; width: var(--sidebar-w);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border-right: 1px solid rgba(255,255,255,.12);
  padding: 12px;
  z-index: 40;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateX(0);
  transition: transform .25s ease;
  overflow-y: auto;
}
.amp-sidebar .brand{
  display:flex; align-items:center; gap:10px; margin: 6px 4px 10px;
  color: var(--text); font-weight: 800;
}
.amp-sidebar .brand img{ width:28px; height:28px }
.amp-sidebar nav{ display:flex; flex-direction:column; gap:8px; margin-top:8px }
.amp-sidebar .nav-link{
  display:block; padding:10px 12px; border-radius:12px;
  color: var(--text); text-decoration:none; font-weight:650;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  transition: background .2s ease, transform .08s ease, border-color .2s ease;
}
.amp-sidebar .nav-link:hover{ background: rgba(255,255,255,.12); transform: translateX(2px); border-color: rgba(255,255,255,.22); }
.amp-sidebar .nav-link.on{ background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); color:#0b1020; border-color: transparent; }
.amp-sidebar .section{ margin-top: 10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); color: var(--muted); font-size:.85rem; }

/* Mobile drawer behavior */
.sidebar-toggle{
  position: fixed; left:10px; top:10px; z-index: 50;
  display: none; /* only mobile */
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px; padding:8px 10px; color: var(--text); font-weight:700;
}
@media (max-width: 900px){
  .amp-sidebar{ transform: translateX(-100%); }
  .amp-sidebar.open{ transform: translateX(0); }
  .sidebar-toggle{ display:block; }
}

/* === Cookie Consent === */
.cookie-bar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:60;
  background:#0e1533; color:#e8ecff; border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:12px 14px; display:none; box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.cookie-bar.show{ display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap }
.cookie-bar .actions{ display:flex; gap:10px }


/* === Typography Upgrade === */
:root{
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body{ font-family: var(--font-body); }

/* Big title */
.brand-title, h1.hero, .hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Optional gradient ink for the main hero only */
.grad-header .brand-title{
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}