:root {
  --bg: #0b0f18;
  --bg-soft: #12172a;
  --surface: rgba(255,255,255,.06);
  --text: #f5f6fa;
  --muted: #b8c0d0;
  --radius: 14px;
  --gap: 1rem;
  --max: 1200px;
  --grad: linear-gradient(90deg, #1fb5ff, #5b57ff, #9f3cff, #ff3da1, #ff7a3d, #ffd141, #7bd66c);
}
html { scroll-behavior: smooth; }
html, body { margin:0; padding:0; }
body.site { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial; background: var(--bg); color: var(--text); line-height:1.65; }
body.site.wide .site-container, .footer-inner, .header-inner, .topbar, .hero > .hero-fallback, .above-footer { max-width: var(--max); margin:0 auto; }
body.boxed .site-container, body.boxed .footer-inner, body.boxed .header-inner, body.boxed .topbar, body.boxed .hero > .hero-fallback, body.boxed .above-footer { max-width: var(--max); margin:0 auto; background: var(--bg-soft); border:1px solid var(--surface); border-radius: var(--radius); }

/* Header */
.site-header { position: sticky; top:0; z-index: 1200; backdrop-filter: blur(8px); background: rgba(11,15,24,.75); border-bottom:1px solid var(--surface); }
.topbar { padding:.35rem var(--gap); font-size:.875rem; color:var(--muted); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:.6rem var(--gap); gap:1rem; }
.brand { display:flex; align-items:center; gap:.75rem; }
.brand img { height: var(--logo-h); width:auto; display:block; }
.brand-text { font-family: Montserrat, Inter, system-ui; font-weight:800; font-size:1.25rem; text-decoration:none; color:var(--text); }

/* Desktop nav */
.site-nav-desktop { margin-left:auto; }
.site-nav-desktop ul { list-style:none; display:flex; gap:.25rem; padding:0; margin:0; align-items:center; }
.site-nav-desktop li { position:relative; }
.site-nav-desktop > ul > li > a { color:var(--text); text-decoration:none; padding:.55rem .8rem; border-radius:.6rem; display:block; }
.site-nav-desktop > ul > li > a:hover, .site-nav-desktop > ul > li:hover > a { background: var(--surface); }
/* Dropdowns */
.site-nav-desktop li ul { display:none; position:absolute; top:100%; left:0; background: #0e1426; border:1px solid var(--surface); border-radius:.6rem; padding:.35rem; min-width: 220px; z-index: 1400; box-shadow: 0 12px 24px rgba(0,0,0,.4); }
.site-nav-desktop li:hover > ul, .site-nav-desktop li:focus-within > ul { display:block; }
.site-nav-desktop li ul li a { display:block; padding:.5rem .7rem; border-radius:.5rem; color:var(--text); text-decoration:none; white-space: nowrap; }
.site-nav-desktop li ul li a:hover { background: rgba(255,255,255,.06); }

/* Social links */
.social-links { display:flex; align-items:center; gap:.6rem; }
.social-links .social-link { color: var(--muted); line-height:1; }
.social-links .social-link:hover { color: var(--link, #86d5ff); }
.social-links svg { width:20px; height:20px; display:block; fill: currentColor; }

/* Hero */
.hero { background: radial-gradient(1200px 500px at 15% -10%, rgba(159,60,255,.25), transparent 60%), radial-gradient(1200px 600px at 85% 0%, rgba(31,181,255,.18), transparent 60%), var(--bg); border-bottom:1px solid var(--surface); }
.hero .hero-fallback { padding: 3.5rem var(--gap) 3rem; text-align: left; }
.hero h1 { font-family: Montserrat, Inter; font-weight:800; letter-spacing:.2px; font-size: clamp(2rem, 3.8vw, 3rem); margin:.25rem 0; }
.hero p { max-width: 60ch; color: var(--muted); margin:.5rem 0 1.25rem; }

/* Layout */
.site-container { display:grid; grid-template-columns: 1fr; gap: var(--gap); padding: 1.2rem var(--gap); }
@media (min-width: 992px) {
  body.has-sidebar .site-container { grid-template-columns: 1fr 320px; }
  body.no-sidebar .site-container { grid-template-columns: 1fr; }
}
.site-main { background: var(--bg-soft); border:1px solid var(--surface); border-radius: var(--radius); padding:1.2rem; box-shadow: 0 10px 30px rgba(0,0,0,.35) inset; }
.site-sidebar { background: rgba(255,255,255,.04); border:1px solid var(--surface); border-radius: var(--radius); padding:1.2rem; }

.content-top, .content-bottom, .above-footer { padding: .75rem var(--gap); }

/* Buttons */
.btn { display:inline-block; padding:.65rem 1rem; border-radius:.7rem; text-decoration:none; font-weight:600; }
.btn-gradient { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; border:2px solid transparent; border-image: var(--grad) 1; }
.btn-gradient:hover { background: var(--grad); -webkit-text-fill-color: #0b0f18; color:#0b0f18; border-color: transparent; box-shadow: 0 0 0 999px rgba(255,255,255,.12) inset; }

/* Footer */
.site-footer { border-top:1px solid var(--surface); margin-top:1rem; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 1rem var(--gap); color: var(--muted); }

/* Overlay for lightbox effect */
.nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 1100; }
body.nav-open .nav-overlay { opacity: 1; pointer-events: all; }

/* Burger */
.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; }
.nav-toggle { display:none; background:transparent; border:1px solid var(--surface); border-radius:.6rem; padding:.5rem .6rem; cursor:pointer; }
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { content:''; display:block; width:22px; height:2px; background:#fff; border-radius:2px; position: relative; }
.nav-toggle-bar::before { position:absolute; top:-7px; left:0; }
.nav-toggle-bar::after { position:absolute; top:7px; left:0; }

/* Off-canvas mobile nav (outside header) */
.site-nav { }
.mobile-nav { display:none; }
@media (max-width: 920px) {
  .header-inner { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; }
  .brand { grid-column: 2 / 3; justify-content:center; }
  .nav-toggle { display:block; grid-column: 3 / 4; justify-self:end; }
  .site-nav-desktop { display:none; }
  .mobile-nav { display:block; position: fixed; inset: 0 0 0 auto; width: 86%; max-width: 360px; background:#0e1426; border-left:1px solid var(--surface); padding:1rem; transform: translateX(100%); transition: transform .25s ease; overflow:auto; z-index: 1300; }
  body.nav-open .mobile-nav { transform: translateX(0); }
  .mobile-nav .mod-menu { list-style:none; display:flex; flex-direction:column; gap:.25rem; padding:0; margin:0; }
  .mobile-nav a { display:block; padding:.7rem .8rem; border-radius:.6rem; text-decoration:none; color:var(--text); }
  .mobile-nav a:hover { background: rgba(255,255,255,.06); }
  .site-header .social-links { display:none; }
  .social-mobile { margin-top: .75rem; border-top: 1px solid var(--surface); padding-top: .75rem; }
  .social-mobile svg { width:22px; height:22px; }
}

body.nav-open { overflow: hidden; touch-action: none; }
body.nav-open .nav-toggle-bar { background: transparent; }
body.nav-open .nav-toggle-bar::before { transform: rotate(45deg); top:0; }
body.nav-open .nav-toggle-bar::after { transform: rotate(-45deg); top:0; }

/* Component-only & error page */
body.component { background:#fff; color:#111; margin:0; padding:1rem; font-family: Inter, system-ui; }
body.error-page { background:#0b0f18; color:#fff; display:grid; place-items:center; min-height:100vh; }
.error-wrap h1 { font-family: Montserrat, Inter; font-size: 4rem; margin:0 0 .5rem; }

/* Accessibility */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left:0; width:auto; height:auto; background:#000; color:#fff; padding:.5rem 1rem; z-index:1000; }


/* v1.2.2 brand icons sizing/alignment */
.social-links img{ display:block; width:22px; height:22px; border-radius:4px; }
@media (max-width:920px){ .social-mobile img{ width:24px; height:24px; } }