/* ============================================================
   West Star — Cosmic design layer (shared, site-wide)
   Token system + keyframes + background canvas layers +
   header / footer. Page-specific styles (hero,
   marquee, service sections) live in each template's
   {% block extra_css %}.

   Tokens: cosmic names are canonical (--bg, --fg, --accent...).
   Legacy names (--bg-primary, --text-primary...) are aliased to
   them so not-yet-migrated pages keep rendering. The theme is
   dark-only (palette and light mode were removed).
   ============================================================ */

:root {
  /* cosmic canonical */
  --bg:#05030f; --bg-elev:#0e0b1e; --bg-elev2:#13102a;
  --fg:#eef0fb; --fg-muted:#a3a6c4; --fg-dim:#646a8f;
  --border:rgba(255,255,255,0.10); --border-strong:rgba(255,255,255,0.18);
  --accent:#34d399; --accent-2:#a3e635; --accent-press:#2bb583;
  --glow1:rgba(52,211,153,0.34); --glow2:rgba(163,230,53,0.22);
  --grid:rgba(255,255,255,0.045);
  --shadow:0 24px 60px -28px rgba(0,0,0,0.7);
  --chip:rgba(255,255,255,0.045);
  --mark-filter:none;
  --bg-image:linear-gradient(rgba(5,3,15,0.55),rgba(5,3,15,0.68)), url("cosmos_bg.b38eaad4a7b9.jpg");

  /* ── legacy aliases (resolve to the canonical dark tokens) ── */
  --bg-primary:var(--bg);
  --bg-secondary:var(--bg-elev);
  --bg-card:var(--bg-elev);
  --bg-card-hover:var(--bg-elev2);
  --border-light:var(--border-strong);
  --text-primary:var(--fg);
  --text-secondary:var(--fg-muted);
  --text-muted:var(--fg-dim);
  --accent-light:var(--accent-2);
  --accent-glow:rgba(52,211,153,0.15);
  --green:#34d399;
  --green-glow:rgba(52,211,153,0.14);
  --orange:#fbbf24;
  --radius:16px;
  --radius-sm:9px;
  --font:'Space Grotesk',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
}

::selection { background:var(--accent); color:#fff; }

/* ============================ keyframes ============================ */
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.12)}66%{transform:translate(-30px,24px) scale(.92)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes lineIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes gridpan{from{background-position:0 0}to{background-position:48px 48px}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flowdash{to{stroke-dashoffset:-13}}
@keyframes gearspin{to{transform:rotate(360deg)}}
@keyframes aipulse{0%,100%{opacity:.45;transform:scale(.78)}50%{opacity:1;transform:scale(1.18)}}
@keyframes signdraw{0%{stroke-dashoffset:22}55%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}

/* ===================== fixed background layers ===================== */
.cz-bg {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-color:var(--bg);
  background-image:var(--bg-image);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.cz-canvas { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.cz-comet { position:fixed; top:0; left:0; z-index:0; pointer-events:none; opacity:0; will-change:transform,opacity; }
.cz-comet-tail { position:relative; width:190px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,rgba(150,180,255,0) 0%,rgba(190,205,255,0.35) 55%,rgba(235,240,255,0.95) 100%); }
.cz-comet-head { position:absolute; right:-3px; top:50%; width:7px; height:7px; border-radius:50%; background:#fff;
  box-shadow:0 0 12px 4px rgba(190,210,255,0.9),0 0 26px 8px rgba(120,150,255,0.5); transform:translateY(-50%); }

/* content sits above the canvas */
.cz-shell { position:relative; z-index:1; isolation:isolate; min-height:100vh; }

/* ============================ header ============================ */
.cz-header {
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  background:color-mix(in srgb, var(--bg) 76%, transparent);
  border-bottom:1px solid var(--border);
}
.cz-header-inner { max-width:1240px; margin:0 auto; padding:0 32px; height:70px; display:flex; align-items:center; gap:24px; }
.cz-logo { display:flex; align-items:center; text-decoration:none; color:var(--fg); }
.cz-logo img { height:34px; width:auto; display:block; filter:var(--mark-filter) drop-shadow(0 0 9px var(--glow1)); }

.cz-nav { display:flex; gap:2px; margin-left:2px; }
.cz-nav a {
  text-decoration:none; color:var(--fg-muted); font-size:14.5px; font-weight:500;
  padding:8px 13px; border-radius:9px; white-space:nowrap;
  transition:color .2s ease, background .2s ease;
}
.cz-nav a:hover { color:var(--fg); background:var(--chip); }
.cz-nav a.active { color:var(--fg); background:var(--chip); }

.cz-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }

.cz-lang { display:flex; align-items:center; border:1px solid var(--border); border-radius:9px; overflow:hidden;
  font-family:var(--mono); font-size:12px; font-weight:600; }
.cz-lang button {
  background:transparent; border:none; cursor:pointer; color:var(--fg-dim);
  padding:7px 11px; font-family:var(--mono); font-size:12px; font-weight:600;
  transition:color .2s ease, background .2s ease;
}
.cz-lang button:hover { color:var(--fg); }
.cz-lang button.active { color:var(--accent); background:var(--chip); }

.cz-icon-btn {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:var(--bg-elev); color:var(--fg);
  border-radius:9px; cursor:pointer; font-size:14px; text-decoration:none;
  transition:border-color .2s ease, transform .15s ease, color .2s ease;
}
.cz-icon-btn:hover { border-color:var(--border-strong); transform:translateY(-1px); color:var(--accent); }
.cz-logout-btn { background:rgba(239,68,68,0.10); border-color:rgba(239,68,68,0.22); color:#f87171; }
.cz-logout-btn:hover { background:rgba(239,68,68,0.18); color:#f87171; }

.cz-nav-toggle { display:none; }

/* ============================ footer ============================ */
.cz-footer { position:relative; border-top:1px solid var(--border); background:color-mix(in srgb, var(--bg) 92%, transparent); }
.cz-footer-grid { max-width:1240px; margin:0 auto; padding:60px 32px 40px;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.cz-footer-brand p { margin:16px 0 20px; font-size:14.5px; line-height:1.6; color:var(--fg-muted); max-width:300px; }
.cz-footer-logo img { height:34px; width:auto; display:block; filter:var(--mark-filter) drop-shadow(0 0 9px var(--glow1)); }
.cz-footer-col-title { font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-dim); margin-bottom:16px; }
.cz-footer-links { display:flex; flex-direction:column; gap:11px; }
.cz-footer-links a { text-decoration:none; color:var(--fg-muted); font-size:14.5px; transition:color .2s ease; }
.cz-footer-links a:hover { color:var(--fg); }
.cz-socials { display:flex; gap:8px; flex-wrap:wrap; }
.cz-social {
  text-decoration:none; display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:9px; border:1px solid var(--border); color:var(--fg-muted);
  font-family:var(--mono); font-size:12px; font-weight:700;
  transition:color .2s ease, border-color .2s ease, transform .15s ease;
}
.cz-social:hover { color:var(--fg); border-color:var(--border-strong); transform:translateY(-2px); }
.cz-footer-bottom { max-width:1240px; margin:0 auto; padding:22px 32px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cz-footer-bottom span, .cz-footer-bottom a { font-size:13.5px; color:var(--fg-dim); }
.cz-footer-bottom a { text-decoration:none; transition:color .2s ease; }
.cz-footer-bottom a:hover { color:var(--fg); }

/* ================= shared components (home + services) ================= */
.cz-mono { font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.16em;
  color:var(--accent); text-transform:uppercase; }

.cz-btn-primary {
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#fff; background:var(--accent);
  padding:14px 26px; border-radius:11px; font-size:15.5px; font-weight:600; border:none; cursor:pointer;
  box-shadow:0 0 0 1px var(--accent-press) inset, 0 14px 34px -14px var(--glow1);
  transition:transform .15s ease, filter .2s ease;
}
.cz-btn-primary:hover { transform:translateY(-2px); filter:brightness(1.06); color:#fff; }
.cz-btn-ghost {
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--fg);
  background:transparent; border:1px solid var(--border-strong); padding:14px 26px; border-radius:11px;
  font-size:15.5px; font-weight:600; cursor:pointer; transition:transform .15s ease, background .2s ease;
}
.cz-btn-ghost:hover { transform:translateY(-2px); background:var(--chip); }

.cz-badge { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  font-family:var(--mono); background:var(--chip); border:1px solid var(--border); padding:6px 12px; border-radius:100px; }
.cz-badge .dot { width:6px; height:6px; border-radius:50%; }

.cz-card { position:relative; background:var(--bg-elev); border:1px solid var(--border); border-radius:16px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.cz-card:hover { transform:translateY(-6px); border-color:var(--border-strong); box-shadow:0 22px 55px -22px var(--glow1); }

.cz-pill { text-decoration:none; display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:13px; font-weight:600; color:var(--fg); background:var(--bg-elev); border:1px solid var(--border);
  padding:10px 15px; border-radius:100px; transition:transform .15s ease, border-color .2s ease; }
.cz-pill:hover { transform:translateY(-2px); border-color:var(--border-strong); }
.cz-pill span { color:var(--accent); }

.cz-icon-box { width:54px; height:54px; border-radius:14px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent-2) 12%,transparent));
  border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 20px color-mix(in srgb,var(--accent) 16%,transparent); }

.cz-blob { position:absolute; filter:blur(20px); pointer-events:none; }

/* shared CTA card (home + services) */
.cz-cta-wrap { max-width:1240px; margin:0 auto; padding:24px 32px 90px; }
.cz-cta { position:relative; overflow:hidden; border-radius:22px; border:1px solid var(--border-strong);
  background:var(--bg-elev); padding:64px 48px; text-align:center; }
.cz-cta-glow { position:absolute; top:-120px; left:50%; transform:translateX(-50%); width:560px; height:360px;
  background:radial-gradient(circle,var(--glow1),transparent 65%); filter:blur(20px); pointer-events:none; }
.cz-cta-h2 { margin:0 0 14px; font-size:clamp(28px,4vw,44px); font-weight:700; letter-spacing:-0.02em; }
.cz-cta-sub { margin:0 auto 32px; max-width:540px; font-size:17.5px; line-height:1.6; color:var(--fg-muted); }
.cz-cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
@media (max-width:900px) { .cz-cta { padding:48px 28px; } }

/* ============================ reveal ============================ */
.cz-shell [data-reveal] { will-change:opacity, transform; }

/* ============================ responsive ============================ */
@media (max-width: 960px) {
  .cz-header-inner { gap:14px; }
  .cz-nav {
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:4px;
    padding:14px 24px;
    background:color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
  }
  .cz-nav.active { display:flex; }
  .cz-nav a { padding:12px 14px; min-height:44px; display:flex; align-items:center; }
  .cz-nav-toggle { display:flex; }
  .cz-footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width: 600px) {
  .cz-header-inner { padding:0 18px; }
  .cz-footer-grid { grid-template-columns:1fr; }
  .cz-footer-bottom { flex-direction:column; gap:12px; text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
  .cz-bg, .cz-canvas { }
  [style*="animation"] { animation:none !important; }
}