/* ============================================================
   Denlever Services — shared stylesheet
   Single source of truth for design tokens + common components.
   Page-specific rules stay in each page's inline <style> block,
   but should reference the tokens defined here.
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

/* ---------- Design tokens ---------- */
:root{
  /* Brand palette (identical across all pages) */
  --cyan:#00e5ff; --magenta:#ff2bd6; --violet:#b14bff; --lime:#a8ff3e;
  --deep:#03030a;

  /* Text colors — unified. muted2 raised to pass WCAG AA on --deep. */
  --text:#e8eaf2;
  --muted:rgba(255,255,255,.75);
  --muted2:rgba(255,255,255,.60);
  --border:rgba(255,255,255,.08);
  --borderH:rgba(0,229,255,.4);

  /* Per-page accent. Pages override (e.g. --accent:var(--lime)). Default cyan. */
  --accent:var(--cyan);

  /* Type scale (rem so it respects user font-size preferences).
     Rationalized from ~38 ad-hoc sizes. */
  --fs-3xs:.625rem;   /* 10px — micro mono labels */
  --fs-2xs:.6875rem;  /* 11px — mono labels (eyebrow, back, chips) */
  --fs-xs:.75rem;     /* 12px */
  --fs-sm:.875rem;    /* 14px — small body / captions */
  --fs-base:1rem;     /* 16px — body */
  --fs-md:1.125rem;   /* 18px */
  --fs-lg:1.25rem;    /* 20px */
  --fs-xl:1.5rem;     /* 24px */
  --fs-2xl:2rem;      /* 32px */

  /* Radius scale — rationalized from 14 values. */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-pill:999px;

  /* Spacing scale (4px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* Layout / motion */
  --container:1100px;   /* per-page override allowed (e.g. legal = 880px) */
  --lh:1.6;             /* per-page override allowed (e.g. legal = 1.7) */
  --t-fast:.25s; --t:.3s; --t-slow:.4s;
}

/* ---------- Base ---------- */
html,body{
  background:var(--deep);
  color:var(--text);
  font-family:'Space Grotesk',system-ui,sans-serif;
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--cyan); text-decoration:none; transition:color var(--t); }
a:hover{ color:var(--magenta); }

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--sp-6); }

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(3,3,10,.85);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--border);
}
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:var(--sp-3); }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-text b{ font-size:1.1rem; letter-spacing:.15em; }
.brand-text span{ font-family:'JetBrains Mono',monospace; font-size:var(--fs-3xs); letter-spacing:.3em; color:rgba(0,229,255,.7); margin-top:3px; }

.back{
  font-family:'JetBrains Mono',monospace; font-size:var(--fs-2xs); letter-spacing:.2em;
  color:var(--cyan); text-transform:uppercase; padding:8px 16px;
  border:1px solid rgba(0,229,255,.3); border-radius:var(--r-pill); transition:var(--t);
}
.back:hover{ background:rgba(0,229,255,.08); }

/* ---------- Language switcher ---------- */
.lsmini{ display:inline-flex; gap:3px; padding:3px; border-radius:var(--r-pill); border:1px solid rgba(0,229,255,.25); background:rgba(255,255,255,.03); font-family:'JetBrains Mono',monospace; margin-right:var(--sp-2); }
.lsmini button{ background:none; border:none; padding:5px 9px; border-radius:var(--r-pill); font-size:var(--fs-3xs); letter-spacing:.18em; color:rgba(255,255,255,.6); cursor:pointer; transition:var(--t-fast); font-family:inherit; font-weight:600; }
.lsmini button:hover{ color:#fff; background:rgba(0,229,255,.08); }
.lsmini button.on{ background:linear-gradient(90deg, rgba(0,229,255,.3), rgba(255,43,214,.2)); color:#fff; box-shadow:0 0 10px rgba(0,229,255,.3); }

/* ---------- Common type ---------- */
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:var(--fs-2xs); letter-spacing:.4em; color:var(--accent); text-transform:uppercase; margin-bottom:var(--sp-4); }

/* ---------- Canonical primary CTA ---------- */
.btn-cyber{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 32px; font-weight:600; letter-spacing:.04em; font-size:var(--fs-sm);
  background:linear-gradient(90deg, rgba(0,229,255,.15), rgba(177,75,255,.15), rgba(255,43,214,.15));
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius:var(--r-pill); color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 10px 40px -10px color-mix(in srgb, var(--accent) 50%, transparent);
  overflow:hidden; isolation:isolate; transition:all var(--t) ease;
}
.btn-cyber::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform:translateX(-110%); transition:transform .6s ease;
}
.btn-cyber:hover{ transform:translateY(-2px); border-color:var(--magenta); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 20px 60px -10px rgba(255,43,214,.5); }
.btn-cyber:hover::before{ transform:translateX(110%); }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 32px; border-radius:var(--r-pill); border:1px solid var(--border);
  font-size:var(--fs-sm); letter-spacing:.04em; color:var(--text); transition:var(--t);
}
.btn-ghost:hover{ border-color:var(--borderH); background:rgba(255,255,255,.04); }

/* ---------- Footer ---------- */
.footer{ padding:var(--sp-10) 0; border-top:1px solid var(--border); font-family:'JetBrains Mono',monospace; font-size:var(--fs-3xs); letter-spacing:.15em; color:var(--muted2); text-align:center; text-transform:uppercase; }
.footer a{ color:var(--muted); }

/* ---------- Accessibility ---------- */
.skip-to-content{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; background:var(--deep); color:#fff; padding:10px 18px; border:2px solid var(--cyan); border-radius:var(--r-sm); font-family:'JetBrains Mono',monospace; font-size:var(--fs-xs); letter-spacing:.15em; text-transform:uppercase; z-index:9999; }
.skip-to-content:focus,.skip-to-content:focus-visible{ position:fixed; left:16px; top:16px; width:auto; height:auto; overflow:visible; box-shadow:0 0 18px rgba(0,229,255,.5); outline:none; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:var(--r-xs); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

@media(max-width:640px){
  .lsmini button{ padding:4px 7px; font-size:9px; }
  .lsmini{ margin-right:4px; }
  .topbar-inner{ flex-wrap:wrap; gap:8px; }
}