@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
/* VizyReport shared nav + footer component styles. Requires theme.css tokens. */

/* Browser baseline — homepage has a universal * reset; SSR pages don't, so these
   rules make the nav render identically on both rendering paths. */
body { margin: 0; transition: background .4s, color .4s; }
nav, .nav-inner { box-sizing: border-box; }

/* ══════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════ */
nav { position:sticky; top:0; z-index:40; height:72px; background:var(--nav-bg); border-bottom:1px solid var(--nav-border); transition:background .4s,border-color .4s; }
.nav-inner { max-width:1200px; margin:0 auto; height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo svg { height:30px; width:30px; overflow:visible; }
.nav-wordmark { font-family:'Manrope',sans-serif; font-weight:800; font-size:21px; letter-spacing:-.5px; color:var(--logo-ink); }
.nav-links { display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.nav-links a { color:var(--text-muted); text-decoration:none; font-size:14px; }
.nav-links a:hover { color:var(--text); }
.nav-cta { display:flex; align-items:center; gap:10px; }
.btn-ghost { background:none; border:1px solid var(--border-light); color:var(--text-muted); padding:8px 18px; border-radius:7px; font-size:13px; cursor:pointer; text-decoration:none; }
.btn-ghost:hover { border-color:var(--purple-mid); color:var(--text); }
.btn-primary { background:linear-gradient(90deg,var(--purple-mid),var(--teal)); border:none; color:#fff; padding:9px 20px; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; }
.btn-primary:hover { opacity:.92; }

/* theme toggle (fixed bottom-left) */
.theme-toggle { position:fixed; bottom:22px; left:22px; z-index:50; display:flex; align-items:center; gap:8px; background:var(--bg2); border:1px solid var(--border-light); padding:8px 14px; border-radius:100px; cursor:pointer; font-size:13px; font-weight:600; color:var(--text-muted); font-family:'Inter',sans-serif; box-shadow:0 4px 20px rgba(0,0,0,.08); transition:all .2s; }
.theme-toggle:hover { color:var(--text); border-color:var(--purple-mid); }

/* Mobile nav */
.mobile-menu-btn { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.mobile-menu-btn span { display:block; width:22px; height:2px; background:var(--text-muted); border-radius:2px; transition:all 0.3s; }
.mobile-menu { display:none; position:fixed; top:80px; left:0; right:0; background:var(--bg2); backdrop-filter:blur(16px); border:1px solid var(--border-light); padding:16px 24px 24px; z-index:99; flex-direction:column; gap:4px; }
.mobile-menu.open { display:flex; }
.mobile-menu a { color:var(--text-muted); text-decoration:none; font-size:16px; padding:12px 0; border-bottom:1px solid var(--border); transition:color 0.2s; }
.mobile-menu a:last-of-type { border-bottom:none; }
.mobile-menu a:hover { color:var(--text); }
.mobile-menu-cta { background:linear-gradient(90deg,var(--purple-mid),var(--teal)) !important; color:#fff !important; text-align:center; border-radius:9px; margin-top:8px; padding:13px !important; font-weight:600; border-bottom:none !important; }
.mobile-menu-divider { height:1px; background:var(--border-light); margin:6px 0; pointer-events:none; }
.mobile-menu-ghost { border:1px solid var(--border-light) !important; border-radius:7px; text-align:center; padding:10px 0 !important; font-size:14px !important; }
.mobile-menu-ghost:hover { border-color:var(--purple-mid) !important; color:var(--text) !important; }

@media (max-width:900px) {
  .nav-inner { padding:0 20px; }
  .nav-links { display:none; }
  .nav-cta { display:none; }
  .mobile-menu-btn { display:flex; }
  .nav-logo img { height:52px; background:transparent; }
}

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
.site-footer { position:relative; overflow:hidden; padding-bottom:12vw; }
.sf-inner { max-width:1200px; margin:0 auto; padding:0 48px; }

/* Band 1 */
.sf-band1 { background:var(--bg); position:relative; z-index:1; }
.sf-band1 .sf-inner { padding-top:64px; padding-bottom:56px; display:grid; grid-template-columns:220px 1fr; gap:64px; align-items:start; }
.sf-logo-img { height:40px; width:auto; display:block; margin-bottom:20px; }
[data-theme="dark"] .sf-logo-img { filter:invert(1); }
.sf-contact { display:flex; flex-direction:column; gap:10px; }
.sf-contact-line { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); text-decoration:none; transition:color 0.18s; line-height:1.4; }
.sf-contact-line:hover { color:var(--text); }
.sf-contact-line svg { width:14px; height:14px; flex-shrink:0; opacity:0.5; }

/* Columns */
.sf-cols { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.sf-col-head { font-size:11px; font-weight:300; letter-spacing:1.8px; text-transform:uppercase; color:var(--text-dim); margin-bottom:16px; }
.sf-col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.sf-col ul li a { font-size:14px; color:var(--text-muted); text-decoration:none; transition:color 0.18s; line-height:1.4; }
.sf-col ul li a:hover { color:var(--text); }

/* Band 2 — grey bar */
.sf-band2 { background:var(--bg2); border-top:1px solid var(--border); position:relative; z-index:1; }
.sf-band2 .sf-inner { padding-top:20px; padding-bottom:20px; }
.sf-band2-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.sf-legal { display:flex; gap:20px; }
.sf-legal a { font-size:12px; color:var(--text-dim); text-decoration:none; transition:color 0.18s; white-space:nowrap; }
.sf-legal a:hover { color:var(--text-muted); }

/* Copyright zone */
.sf-copy-zone { position:relative; z-index:2; padding-top:14px; padding-bottom:18px; }
.sf-copy { font-size:12px; color:var(--text-dim); }

/* Watermark — contained horizontally, faint outline via --watermark-stroke */
.sf-watermark { position:absolute; left:0; right:0; bottom:-0.25em; font-family:'Michroma',sans-serif; font-size:18vw; letter-spacing:0; text-align:center; color:transparent; -webkit-text-stroke:1.5px var(--watermark-stroke); opacity:0.12; pointer-events:none; user-select:none; white-space:nowrap; line-height:1; z-index:0; transform:scaleX(1.7); transform-origin:center center; }

/* Responsive */
@media (max-width:1024px) {
  .sf-band1 .sf-inner { grid-template-columns:1fr; gap:40px; padding-top:48px; padding-bottom:44px; }
}
@media (max-width:768px) {
  .sf-inner { padding:0 20px; }
  .sf-band1 .sf-inner { padding-top:40px; padding-bottom:36px; gap:28px; }
  .sf-cols { grid-template-columns:repeat(2,1fr); gap:28px 20px; }
  .sf-band2-row { flex-wrap:wrap; gap:10px; }
  .sf-legal { flex-wrap:wrap; gap:10px 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .sf-col ul li a, .sf-contact-line, .sf-legal a { transition:none; }
}

/* egrid — background grid shared across all pages. Tokens (--cell/--sparkle/--px) from theme.css. */
.egrid { position:fixed; inset:0; z-index:0; pointer-events:none; }
.ecol { position:absolute; top:0; bottom:0; width:96px; }
.ecol.l { left:0; border-right:1px solid var(--cell); }
.ecol.r { right:0; border-left:1px solid var(--cell); }
.ecol .ecell { position:absolute; left:8px; right:8px; border:1px solid var(--cell); border-radius:3px; }
.eline { position:absolute; left:0; right:0; height:1px; background:var(--cell); }
.spk { display:none; position:absolute; width:11px; height:11px; color:var(--sparkle); }
.spk svg { width:100%; height:100%; display:block; fill:currentColor; }
@keyframes spkTw { 0%,100%{opacity:1} 50%{opacity:.3} }
.spk.tw { animation:spkTw 4s ease-in-out infinite; }
.spk.tw2 { animation:spkTw 5.2s ease-in-out infinite; animation-delay:2.1s; }
.pxc { position:absolute; left:12px; display:grid; grid-template-columns:repeat(4,9px); gap:4px; }
.pxc i { width:9px; height:9px; background:var(--px); }
.pxc i.o { background:transparent; }
@media(max-width:900px) { .ecol, .pxc { display:none; } }

/* ascii-cloud.js canvases — absolute inside #cloud-host (position:relative at page top).
   Scrolls away with page content. Homepage inline <style> overrides z-index to 1. */
.ascii-fx { position:absolute; z-index:1; pointer-events:none; }
@media(max-width:600px) { .ascii-fx { display:none; } }

/* ══════════════════════════════════════════════════
   HERO FX — mobile ascii-noise canvas + desktop glow
══════════════════════════════════════════════════ */
.vz-hero-fx { position:relative; }
.vz-hero-fx::before { content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%); width:800px; height:500px; background:radial-gradient(ellipse, rgba(109,40,217,0.08) 0%, transparent 68%); pointer-events:none; }
.ascii-bg { display:none; position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ascii-bg canvas { position:absolute; width:100%; height:100%; left:0; top:0; }
@media(max-width:600px) { .ascii-bg { display:block; } }