/* ═══════════════════════════════════════════════════════
   SymTalk — Shared Styles
   Tier A: global (all 5 pages)
   Tier B: install pages (linux / mac / windows)
   ═══════════════════════════════════════════════════════ */

/* ─── TIER A — Tokens ─── */
:root {
  --bg:       #08080F;
  --bg1:      #0F0F1A;
  --bg2:      #141422;
  --surface:  rgba(255,255,255,.05);
  --surface2: rgba(255,255,255,.08);
  --border:   rgba(255,255,255,.09);
  --border2:  rgba(255,255,255,.15);
  --p:        #7C7CFF;
  --p2:       #9D9DFF;
  --p-dim:    rgba(124,124,255,.18);
  --p-glow:   rgba(124,124,255,.35);
  --text:     #EEEEFF;
  --text2:    rgba(238,238,255,.65);
  --text3:    rgba(238,238,255,.38);
  --green:    #4ADE80;
  --green-dim:rgba(74,222,128,.15);
  --r:        12px;
  --r2:       18px;
  --r3:       24px;
}

/* ─── TIER A — Reset ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── TIER A — Grain texture ─── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:999; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .028;
}

/* ═══════════════════════════════════════════════════════
   TIER B — Install pages (linux / mac / windows)
   ═══════════════════════════════════════════════════════ */

/* ─── Nav ─── */
nav {
  position: fixed; inset: 0 0 auto; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; height: 58px;
  background: rgba(8,8,15,.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-logo { display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.nav-logo img { height:30px; width:auto; display:block; }
.nav-logo-name {
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:1.1rem; color:var(--text); letter-spacing:-.03em;
}
.nav-back {
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--text2); text-decoration:none; font-size:.875rem; font-weight:500;
  transition: color .18s;
}
.nav-back:hover { color:var(--text); }
.nav-back svg { opacity:.6; }
.nav-actions,
.nav-right {
  display:flex;
  align-items:center;
  gap:1rem;
}
.lang-switcher {
  display:inline-flex;
  align-items:center;
  gap:.2rem;
  padding:.22rem;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
}
.lang-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.2rem;
  padding:.34rem .55rem;
  border-radius:999px;
  color:var(--text3);
  text-decoration:none;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background .18s, color .18s, border-color .18s;
}
.lang-link:hover {
  color:var(--text);
  background:rgba(255,255,255,.05);
}
.lang-link.active {
  color:var(--p2);
  background:var(--p-dim);
  box-shadow:inset 0 0 0 1px rgba(124,124,255,.3);
}

/* ─── Layout ─── */
.page { padding-top:58px; }
.container { max-width:760px; margin:0 auto; padding:0 2rem; }

/* ─── Hero ─── */
.hero {
  position:relative; padding:5rem 2rem 4rem;
  overflow:hidden;
  border-bottom: 1px solid var(--border);
}
.hero-mesh {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 60% at 60% 50%, rgba(100,80,255,.13) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 85% 15%, rgba(160,100,255,.09) 0%, transparent 60%);
  animation: meshMove 8s ease-in-out infinite alternate;
}
@keyframes meshMove {
  0%   { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.04) translate(1%, -1.5%); }
}
.hero-grid {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
.hero-inner { position:relative; z-index:2; max-width:760px; margin:0 auto; }

.os-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(124,124,255,.1); border:1px solid rgba(124,124,255,.25);
  border-radius:100px; padding:.3rem .9rem;
  font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--p2); margin-bottom:1.5rem;
}
.os-badge svg { width:14px; height:14px; opacity:.8; }

h1 {
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:clamp(2.2rem,6vw,3.8rem);
  line-height:1.05; letter-spacing:-.05em;
  color:var(--text); margin-bottom:1rem;
}
.hero-sub {
  font-size:1.05rem; color:var(--text2); line-height:1.7;
  margin-bottom:2.5rem; max-width:560px;
}

/* ─── Download card ─── */
.download-card {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  background: var(--bg1);
  border: 1px solid var(--border2);
  border-radius:var(--r2);
  padding:1.4rem 1.75rem;
  flex-wrap:wrap;
}
.dl-info { display:flex; align-items:center; gap:1rem; }
.dl-icon {
  width:44px; height:44px; border-radius:10px;
  background: var(--p-dim); border:1px solid rgba(124,124,255,.2);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.dl-icon svg { width:22px; height:22px; color:var(--p2); }
.dl-name { font-weight:700; font-size:.95rem; color:var(--text); line-height:1.3; }
.dl-meta { font-size:.8rem; color:var(--text3); margin-top:.15rem; }

.btn-dl {
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--p); color:#fff;
  padding:.7rem 1.6rem; border-radius:var(--r);
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:.9rem;
  text-decoration:none; border:none; cursor:pointer; letter-spacing:-.01em;
  transition: background .18s, transform .15s, box-shadow .18s;
  position: relative; overflow: hidden; white-space:nowrap; flex-shrink:0;
}
.btn-dl::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
  pointer-events:none;
}
.btn-dl:hover { background:#9090ff; transform:translateY(-1px); box-shadow:0 8px 28px var(--p-glow); }
.btn-dl svg { width:17px; height:17px; }

/* ─── Content ─── */
.content { padding:4rem 2rem 6rem; }
.content .container { display:flex; flex-direction:column; gap:3rem; }

.section-title {
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size:1.5rem; letter-spacing:-.04em; color:var(--text);
  margin-bottom:1.25rem;
}

/* ─── Steps ─── */
.steps { display:flex; flex-direction:column; gap:1rem; }
.step {
  display:flex; gap:1.25rem;
  background: var(--bg1); border:1px solid var(--border);
  border-radius:var(--r2); padding:1.25rem 1.5rem;
  transition: border-color .2s;
}
.step:hover { border-color: var(--border2); }
.step-num {
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background: var(--p-dim); border:1px solid rgba(124,124,255,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:800; color:var(--p2);
  margin-top:.1rem;
}
.step-body { flex:1; min-width:0; }
.step-label { font-weight:700; color:var(--text); font-size:.95rem; margin-bottom:.35rem; }
.step-desc { color:var(--text2); font-size:.9rem; line-height:1.6; margin-bottom:.75rem; }
.step-desc:last-child { margin-bottom:0; }

/* ─── Code blocks ─── */
.code-block {
  background: #0A0A14;
  border: 1px solid var(--border2);
  border-radius:var(--r);
  overflow:hidden;
}
.code-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem 1rem;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--border);
}
.code-lang { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); }
.copy-btn {
  display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:none; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:.75rem; font-weight:500;
  color:var(--text3); padding:.2rem .5rem; border-radius:6px;
  transition: color .15s, background .15s;
}
.copy-btn:hover { color:var(--text2); background:rgba(255,255,255,.06); }
.copy-btn svg { width:13px; height:13px; }
.copy-btn.copied { color:var(--green); }
pre {
  padding:1rem 1.25rem; margin:0;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size:.83rem; line-height:1.7;
  color: #C4B5FD;
  overflow-x:auto;
}
pre .comment { color:var(--text3); font-style:italic; }
pre .cmd { color:#A5F3FC; }
pre .flag { color:#FDE68A; }
pre .path { color:var(--p2); }

/* ─── Command grid ─── */
.cmd-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:.75rem;
}
.cmd-item {
  background:var(--bg1); border:1px solid var(--border);
  border-radius:var(--r); padding:1rem 1.25rem;
}
.cmd-item-label { font-size:.75rem; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.4rem; }
.cmd-item code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size:.82rem; color:var(--p2);
}

/* ─── Info card ─── */
.info-card {
  display:flex; gap:1rem; align-items:flex-start;
  background: var(--p-dim); border:1px solid rgba(124,124,255,.2);
  border-radius:var(--r2); padding:1.1rem 1.4rem;
}
.info-card-icon { flex-shrink:0; margin-top:.05rem; }
.info-card-icon svg { width:18px; height:18px; color:var(--p2); }
.info-card-text { font-size:.9rem; color:var(--text2); line-height:1.6; }
.info-card-text strong { color:var(--text); }
.info-card-text a { color:var(--p2); text-decoration:none; }
.info-card-text a:hover { text-decoration:underline; }
.info-card > svg { width:18px; height:18px; color:var(--p2); flex-shrink:0; margin-top:.05rem; }
.info-card > p { font-size:.9rem; color:var(--text2); line-height:1.6; }
.info-card > p strong { color:var(--text); }
.info-card > p a { color:var(--p2); text-decoration:none; }
.info-card > p a:hover { text-decoration:underline; }

/* ─── Warning card ─── */
.warning-card {
  display:flex; gap:1rem; align-items:flex-start;
  background: rgba(251,191,36,.07); border:1px solid rgba(251,191,36,.2);
  border-radius:var(--r2); padding:1.1rem 1.4rem;
}
.warning-card-icon { flex-shrink:0; margin-top:.05rem; }
.warning-card-icon svg { width:18px; height:18px; color:#FBD43C; }
.warning-card-text { font-size:.9rem; color:var(--text2); line-height:1.6; }
.warning-card-text strong { color:var(--text); }
.warning-card > svg { width:18px; height:18px; color:#FBD43C; flex-shrink:0; margin-top:.05rem; }
.warning-card > p { font-size:.9rem; color:var(--text2); line-height:1.6; }
.warning-card > p strong { color:var(--text); }

/* ─── Troubleshooting ─── */
.trouble-list { display:flex; flex-direction:column; gap:.75rem; }
.trouble-item {
  background:var(--bg1); border:1px solid var(--border);
  border-radius:var(--r2); padding:1.1rem 1.4rem;
}

/* ─── Fade up ─── */
.fade-up { opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease; }
.fade-up.visible { opacity:1; transform:none; }

/* ─── Responsive ─── */
@media(max-width:580px) {
  .download-card { flex-direction:column; align-items:stretch; }
  .btn-dl { justify-content:center; }
  .nav-actions,
  .nav-right { gap:.6rem; }
  .lang-switcher { padding:.18rem; }
  .lang-link {
    min-width:1.9rem;
    padding:.32rem .42rem;
    font-size:.68rem;
  }
}