/* ZELTREX shared styles — extracted from all pages (SEO-089) */

/* VARIABLES */
:root {
  --bg: #03030a; --surface: #0c0c18; --panel: #111120;
  --accent: #00f5c4; --accent2: #8a6cb3; --accent3: #f5a623;
  --blue: #4fc3f7; --red: #ff6b6b;
  --text: #e8e8f0; --muted: #a0a0b8; --border: rgba(255,255,255,0.06);
}

/* SKIP LINK (WCAG 2.4.1) */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; z-index:10000; padding:8px 16px; background:var(--accent); color:#03030a; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:1px; text-decoration:none; border-radius:4px; }
.skip-link:focus { position:fixed; left:16px; top:16px; width:auto; height:auto; overflow:visible; outline:2px solid var(--accent); outline-offset:2px; }

/* RESET */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; overflow-x:hidden; line-height:1.6; }
body::before { content:''; position:fixed; inset:0; background-image:linear-gradient(rgba(0,245,196,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,245,196,0.02) 1px,transparent 1px); background-size:80px 80px; pointer-events:none; z-index:0; }
nav, main, footer { position:relative; z-index:1; }
a { color:var(--accent); text-decoration:none; transition:opacity 0.2s; }
a:hover { opacity:0.8; }

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; justify-content:space-between; align-items:center; padding:16px 48px; background:rgba(3,3,10,0.85); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
.logo { font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:5px; color:var(--accent); text-shadow:0 0 20px rgba(0,245,196,0.3); }
.nav-right { display:flex; gap:16px; align-items:center; }
.nav-link { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; padding:6px 12px; border:1px solid transparent; transition:all 0.2s; cursor:pointer; }
.nav-link:hover { color:var(--text); border-color:var(--border); }
.nav-link.active { color:var(--accent); border-color:rgba(0,245,196,0.3); }
.lang-btn { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:2px; padding:6px 14px; border:1px solid rgba(0,245,196,0.3); background:rgba(0,245,196,0.05); color:var(--accent); cursor:pointer; border-radius:2px; text-transform:uppercase; }
.lang-btn:hover { background:rgba(0,245,196,0.12); }

/* BUTTONS */
.btn { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:2px; padding:14px 28px; border:1px solid var(--accent); color:var(--accent); background:transparent; cursor:pointer; text-transform:uppercase; transition:all 0.25s; text-decoration:none; display:inline-block; text-align:center; }
.btn:hover { background:rgba(0,245,196,0.1); transform:translateY(-2px); opacity:1; }
.btn:active { transform:translateY(0); background:rgba(0,245,196,0.2); transition-duration:0.05s; }
.btn.filled { background:var(--accent); color:var(--bg); }
.btn.filled:hover { background:#00ddb3; }
.btn.filled:active { background:#00c9a0; transform:translateY(0); transition-duration:0.05s; }

/* FOOTER */
footer { padding:40px 48px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); }
.footer-logo { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:4px; color:var(--accent); }
.footer-links { display:flex; gap:24px; }
.footer-link { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; }
.footer-link:hover { color:var(--text); }
.footer-text { font-family:'Space Mono',monospace; font-size:9px; color:var(--muted); letter-spacing:2px; }

/* SKIP LINK & FOCUS */
.skip-link { position:absolute; top:-100%; left:16px; background:var(--accent); color:var(--bg); padding:12px 24px; z-index:200; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:1px; text-decoration:none; border-radius:0 0 4px 4px; transition:top 0.2s; }
.skip-link:focus { top:0; }
*:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* SCROLLBAR */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:2px; }

/* MOBILE MENU */
.menu-toggle { display:none; background:none; border:1px solid var(--border); color:var(--accent); font-size:18px; padding:4px 12px; cursor:pointer; font-family:'Space Mono',monospace; line-height:1; border-radius:2px; }
.menu-toggle:hover { background:rgba(0,245,196,0.08); }

/* STICKY CTA BAR */
.sticky-cta { position:fixed; bottom:0; left:0; right:0; z-index:98; background:rgba(3,3,10,0.95); backdrop-filter:blur(12px); border-top:1px solid rgba(0,245,196,0.15); padding:12px 48px; display:flex; justify-content:center; align-items:center; gap:16px; transform:translateY(100%); transition:transform 0.3s ease; }
.sticky-cta.visible { transform:translateY(0); }
.sticky-cta-text { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:1px; color:var(--muted); }
.sticky-cta .btn { padding:10px 24px; font-size:10px; margin:0; }

/* BACK TO TOP */
.back-to-top {
  position:fixed; bottom:24px; right:24px;
  width:44px; height:44px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  color:var(--accent); font-size:20px; cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity 0.3s;
  z-index:100;
}
.back-to-top.visible { opacity:1; pointer-events:auto; }
.back-to-top:hover { background:var(--panel); border-color:var(--accent); }

/* SHARED RESPONSIVE */
@media(max-width:960px) {
  .sticky-cta { padding:10px 16px; gap:12px; }
  .sticky-cta-text { display:none; }
  nav { padding:14px 24px; }
  .menu-toggle { display:block; }
  .nav-right { display:none; position:absolute; top:56px; left:0; right:0; background:#03030a; flex-direction:column; padding:16px 24px; border-bottom:1px solid var(--border); gap:4px; z-index:99; }
  .nav-right.open { display:flex; }
  .nav-link { position:static; width:auto; height:auto; padding:10px 12px; margin:0; overflow:visible; clip:auto; white-space:normal; font-size:12px; }
  footer { flex-direction:column; gap:16px; text-align:center; }
  .footer-links { justify-content:center; flex-wrap:wrap; }
}
@media(max-width:768px) {
  nav { padding:12px 16px; }
  footer { padding:32px 16px; }
}
@media(max-width:768px) {
  /* WB-014: ensure monospace labels are readable on mobile */
  .nav-link { font-size:12px; min-height:44px; display:flex; align-items:center; }
}
@media(max-width:360px) {
  .btn { padding:12px 20px; font-size:10px; }
  footer { padding:24px 12px; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } }