
:root{
  --bg:#0b0b0f; --fg:#f4f4f5; --muted:#a1a1aa; --primary:#e11d48;
  --card:#14141a; --border:#2a2a2f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial}
a{color:#60a5fa;text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:none;margin:0;padding:0 20px}

/* Header */
.header{position:sticky;top:0;z-index:60;background:#0b0b0f;border-bottom:1px solid var(--border)}
.navbar{display:grid;grid-template-columns:240px 1fr auto;align-items:center;min-height:86px;gap:10px}
.logo-wrap{display:flex;justify-content:flex-start;align-items:center;height:86px}
.logo-wrap img{height:85px;object-fit:contain;display:block;width:auto;margin-left:10px;margin-right:20px}
.menu-toggle{display:flex;justify-content:center;align-items:center;width:44px;height:44px;border:1px solid var(--border);border-radius:10px;background:#121217;cursor:pointer}
.menu-toggle span{width:18px;height:2px;background:#e5e7eb;display:block;position:relative}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#e5e7eb}
.menu-toggle span::before{top:-6px}.menu-toggle span::after{top:6px}

/* Desktop menu */
.menu-desktop{display:flex;gap:16px;justify-content:center;align-items:center}
.menu-desktop a{padding:8px 10px;border-radius:10px}
.menu-desktop a:hover{background:var(--card)}
.cta{justify-self:end}
.btn{display:inline-block;background:var(--primary);color:#fff;padding:10px 20px;border-radius:999px;font-weight:700;border:0}
.btn:hover{filter:brightness(1.08)}

/* Mobile drawer */
.drawer{position:fixed;inset:0 0 0 auto;width:100%;max-width:420px;background:#0f0f14;transform:translateX(100%);transition:transform .25s ease;box-shadow:-8px 0 24px rgba(0,0,0,.4);z-index:70}
.drawer.open{transform:translateX(0)}
.drawer .head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.drawer .links{display:flex;flex-direction:column;padding:10px 16px}
.drawer .links a{padding:14px 8px;border-bottom:1px solid #1f1f25;text-decoration:none;color:#f4f4f5}
.drawer .links a:last-child{border-bottom:0}
.drawer .cta-wrap{padding:16px}
.drawer .cta-wrap .btn{display:block;text-align:center;width:100%}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .2s ease;z-index:65}
.backdrop.show{opacity:1;visibility:visible}
.hide-mobile{display:block}
.show-mobile{display:none}

/* Footer */
.footer{border-top:1px solid var(--border);margin-top:40px;background:#0d0d12}
.footer .container{padding:18px 20px}
.footer .links{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:8px}
.footer .note{color:#a1a1aa;font-size:.9rem}

/* Responsive */
@media (min-width: 980px){
  .menu-toggle{display:none}
  .menu-desktop{display:flex}
  .cta{display:block}
  .hide-mobile{display:block}
  .show-mobile{display:none}
}
@media (max-width: 979.98px){
  .navbar{grid-template-columns:48px 1fr 48px}
  .logo-wrap{justify-content:center}
  .logo-wrap img{height:70px;margin:0 auto}
  .menu-desktop{display:none}
  .cta{display:none}
  .show-mobile{display:block}
  .hide-mobile{display:none}
}

/* Cookie UI */
#cookie-banner{position:fixed;inset:auto 0 0 0;background:#0d0d12;border-top:1px solid var(--border);padding:16px;z-index:1000;display:none}
#cookie-banner .row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.btn.secondary{background:#3f3f46}
#cookie-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:1001}
#cookie-modal .panel{background:#0f0f14;border:1px solid var(--border);border-radius:16px;max-width:720px;width:95%;padding:18px}
.note{color:#a1a1aa}


/* Fallback logo sizing */
.site-logo-fallback{height:85px;width:auto;display:block}


/* === v5.5 Unified drawer menu (desktop + mobile) === */
.menu-desktop{display:none !important}
.menu-toggle{display:flex !important}
.navbar{grid-template-columns: 60px 1fr !important}
.logo-wrap{justify-content:flex-start !important}

.drawer{max-width:520px}
.drawer .links{display:flex;flex-direction:column;padding:16px}
.drawer .links ul{list-style:none;margin:0;padding:0}
.drawer .links li{margin:8px 0}
.drawer .links a{
  display:block;
  padding:16px 18px;
  background:#15151b;
  border:1px solid #26262d;
  border-radius:14px;
  color:#f5f5f7;
  font-weight:800;
  letter-spacing:.2px;
  text-align:center;
}
.drawer .links a:hover{background:#1b1b22;border-color:#2e2e36;text-decoration:none}
.drawer .links a:active{transform:translateY(1px)}

/* Remove CTA (if any) */
.cta{display:none !important}
