/*
  HANZO2TEAM — Unified Design System
  RTL · dark · cyan / indigo / fuchsia
  Shared by every page alongside index.html's bespoke styles.
*/

@charset "UTF-8";

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

/* ---------- tokens ---------- */
:root {
  --bg: #05060a;
  --panel: rgba(255, 255, 255, .04);
  --panel2: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .18);
  --txt: #f4f6fb;
  --mut: #9aa4b8;
  --dim: #68707f;
  --c1: #22d3ee;
  --c2: #6366f1;
  --c3: #d946ef;
  --grad: linear-gradient(120deg, var(--c1), var(--c2), var(--c3));
  --rad: 20px;
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(34, 211, 238, .10), transparent 60%),
    radial-gradient(900px 560px at 100% 4%, rgba(99, 102, 241, .12), transparent 60%),
    radial-gradient(820px 620px at 50% 112%, rgba(217, 70, 239, .08), transparent 60%),
    var(--bg) !important;
  background-attachment: fixed !important;
  color: var(--txt);
  font-family: 'Cairo', 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--c1); color: #03151a; }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c1), var(--c2));
  border-radius: 10px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--c2), var(--c3)); }

/* ---------- shared buttons (unified brand) ---------- */
.cta:not(.ghost),
.b:not(.ghost),
.btn-dl,
.copy:not(.ghost),
.copy-btn,
.submit-btn {
  background: var(--grad) !important;
  color: #03151a !important;
  border-color: transparent !important;
  box-shadow: 0 12px 34px rgba(34, 211, 238, .26) !important;
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.cta:not(.ghost):hover,
.b:not(.ghost):hover,
.btn-dl:hover,
.copy:not(.ghost):hover,
.copy-btn:hover,
.submit-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 44px rgba(34, 211, 238, .38) !important;
}

.cta.ghost,
.b.ghost {
  background: transparent !important;
  color: var(--c1) !important;
  border: 1px solid rgba(34, 211, 238, .45) !important;
  box-shadow: none !important;
}
.cta.ghost:hover,
.b.ghost:hover {
  background: rgba(34, 211, 238, .10) !important;
}

/* ---------- back link (shared on inner pages) ---------- */
.back { transition: color .2s; }
.back:hover { color: var(--c1) !important; }

/* ---------- helpers ---------- */
.muted { color: var(--dim); }
.tag {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 7px;
  background: rgba(34, 211, 238, .08);
  border: 1px solid rgba(34, 211, 238, .25);
  color: var(--c1);
  font-family: 'Inter', sans-serif;
  direction: ltr;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}