/* VStack5 — Shared Styles
   Used by: troubleshooting.html, updates.html, aacp-dongle-reset.html, privacy-policy.html
*/

/* ── DESIGN TOKENS ───────────────────────── */
:root {
  --bg0: #030303; --bg1: #080808;
  --panel: rgba(255,255,255,0.06);
  --panel2: rgba(255,255,255,0.04);
  --line: rgba(255,255,255,0.12);
  --text: #eef4ff;
  --muted: rgba(238,244,255,0.72);
  --blue: #39a8ff; --blue2: #79c8ff;
  --yellow: #f3d348; --yellow2: #ffdf66;
  --shadow: 0 20px 60px rgba(0,0,0,0.45);
  --radius: 24px; --radius2: 30px;
  --maxw: 980px;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ── RESET ───────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0; min-height: 100vh;
  font-family: var(--sans); color: var(--text);
  background:
    radial-gradient(circle, rgba(255,255,255,0.022) 1px, transparent 1px) 0 0 / 36px 36px,
    radial-gradient(1100px 620px at 50% -10%, rgba(57,168,255,0.16), transparent 60%),
    radial-gradient(800px 460px at 100% 12%, rgba(243,211,72,0.1), transparent 60%),
    radial-gradient(800px 420px at 0% 30%, rgba(57,168,255,0.08), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 38%, #040404 100%);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
.page { position: relative; isolation: isolate; }

/* ── BACKGROUND GLOW ─────────────────────── */
.bgGlow {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1200px,94vw); height: 700px;
  pointer-events: none; z-index: -1;
  background:
    radial-gradient(circle at 28% 22%, rgba(57,168,255,0.18), transparent 36%),
    radial-gradient(circle at 72% 18%, rgba(243,211,72,0.12), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(57,168,255,0.08), transparent 42%);
  filter: blur(40px);
}

/* ── LAYOUT ──────────────────────────────── */
.wrap { width: min(var(--maxw), calc(100% - 28px)); margin: 0 auto; }
.section { padding: 14px 0 0; }
.content { display: grid; gap: 14px; }

/* ── TOPBAR ──────────────────────────────── */
.topbar { padding: 18px 0 0; }
.topbarInner { display: flex; justify-content: center; }

.brandChip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 15px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04); backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(238,244,255,0.86);
}
.brandChip .dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--yellow), var(--blue));
  box-shadow: 0 0 0 4px rgba(57,168,255,0.12);
}

/* ── HERO & CARDS ────────────────────────── */
.hero { padding: 26px 0 16px; }

.heroCard, .card {
  position: relative; overflow: hidden;
  border-radius: 30px; border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.03));
  box-shadow: var(--shadow); backdrop-filter: blur(12px);
}
.heroCard::after, .card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14) 50%, transparent);
  pointer-events: none;
}
.card::before {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.048) 50%, transparent 70%);
  transition: left 0.7s ease; pointer-events: none; z-index: 2;
}
.card:hover::before { left: 150%; }

.heroContent, .cardInner { padding: 28px; }

/* ── TYPOGRAPHY ──────────────────────────── */
h1 {
  margin: 0 0 14px;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 0.96; font-weight: 950; letter-spacing: -0.04em;
}

.lead { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.85; }

/* ── EYEBROW PILL ────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 8px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(238,244,255,0.84);
  transition: border-color 0.2s ease, background 0.2s ease; cursor: default;
}
.eyebrow:hover { border-color: rgba(57,168,255,0.26); background: rgba(57,168,255,0.07); }
.eyebrow .pulse, .eyebrow .dot {
  width: 9px; height: 9px; border-radius: 999px;
  background: linear-gradient(90deg, var(--yellow), var(--blue));
}

/* ── BACK LINK ───────────────────────────── */
.backLink {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  position: relative; overflow: hidden; min-height: 48px; padding: 12px 18px;
  border-radius: 16px; font-weight: 800; font-size: 14px; color: #08121a;
  background: linear-gradient(135deg, var(--yellow), var(--blue));
  box-shadow: 0 14px 36px rgba(57,168,255,0.18), 0 0 30px rgba(243,211,72,0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.backLink:hover {
  transform: translateY(-3px); filter: brightness(1.08);
  box-shadow: 0 20px 48px rgba(57,168,255,0.28), 0 0 48px rgba(243,211,72,0.16);
}

/* ── FOOTER ──────────────────────────────── */
.footer { padding: 20px 0 44px; }

.footerCard {
  position: relative; padding: 20px; border-radius: 24px;
  text-align: center; color: rgba(238,244,255,0.72);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
}
.footerCard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--yellow) 30%, var(--blue) 70%, transparent);
  opacity: 0.65;
}
.footerBrand { margin-bottom: 14px; }
.footerBottom { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.footerCopyright { font-size: 13px; color: rgba(238,244,255,0.6); text-align: center; }
.footerLinks { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.footerLink {
  font-size: 13px; font-weight: 700; color: rgba(238,244,255,0.9);
  position: relative; transition: 0.18s ease;
}
.footerLink::after {
  content: ""; position: absolute; left: 50%; bottom: -3px;
  width: 0%; height: 1px;
  background: linear-gradient(90deg, var(--yellow), var(--blue));
  transform: translateX(-50%); transition: 0.2s ease;
}
.footerLink:hover { color: #fff; }
.footerLink:hover::after { width: 100%; }

/* ── STICKY NAV ──────────────────────────── */
.stickyNav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  transform: translateY(-110%); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}
.stickyNav.visible { transform: translateY(0); pointer-events: auto; }
.stickyNavInner {
  display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  background: rgba(3,3,3,0.9); backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 4px 28px rgba(0,0,0,0.55);
}
.navBrand {
  font-family: var(--mono); font-size: 13px; font-weight: 800;
  color: var(--text); letter-spacing: 0.03em; flex-shrink: 0;
  transition: opacity 0.18s;
}
.navBrand:hover { opacity: 0.7; }
.navCta {
  display: inline-flex; align-items: center; padding: 8px 18px;
  border-radius: 12px; font-size: 13px; font-weight: 800; color: #08121a;
  background: linear-gradient(135deg, var(--yellow), var(--blue));
  flex-shrink: 0; box-shadow: 0 4px 16px rgba(57,168,255,0.22);
  transition: transform 0.18s ease, filter 0.18s ease; margin-left: auto;
}
.navCta:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* ── SCROLL PROGRESS ─────────────────────── */
.scrollProgress {
  position: fixed; top: 0; left: 0; width: 0%; height: 3px;
  background: linear-gradient(90deg, var(--yellow), var(--blue));
  z-index: 10001; pointer-events: none; transition: width 0.08s linear;
  box-shadow: 0 0 10px rgba(57,168,255,0.5);
}

/* ── FLOATING HOME BUTTON ────────────────── */
.floatHome {
  position: fixed; bottom: 22px; right: 20px; z-index: 800;
  display: flex; align-items: center; gap: 8px; padding: 12px 20px;
  border-radius: 50px; background: linear-gradient(135deg, var(--yellow), var(--blue));
  color: #08121a; font-weight: 800; font-size: 13px;
  box-shadow: 0 8px 28px rgba(57,168,255,0.35), 0 2px 8px rgba(0,0,0,0.3);
  text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.floatHome:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 40px rgba(57,168,255,0.45), 0 2px 8px rgba(0,0,0,0.3); }

/* ── REVEAL ANIMATION ────────────────────── */
.reveal {
  opacity: 0; transform: translateY(28px) scale(0.975); filter: blur(3px);
  transition: opacity 0.78s cubic-bezier(0.22,1,0.36,1),
              transform 0.78s cubic-bezier(0.22,1,0.36,1),
              filter 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible { opacity: 1; transform: none; filter: none; }
.reveal-d1 { transition-delay: 0.09s; }
.reveal-d2 { transition-delay: 0.18s; }
.reveal-d3 { transition-delay: 0.27s; }

/* ── KEYFRAMES ───────────────────────────── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
.page { animation: pageIn 0.65s cubic-bezier(0.22,1,0.36,1) both; }

@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(57,168,255,0.55); transform: scale(1); }
  55% { box-shadow: 0 0 0 7px rgba(57,168,255,0); transform: scale(1.15); }
}
.brandChip .dot, .eyebrow .pulse, .eyebrow .dot { animation: dotPulse 2.6s ease-in-out infinite; }

h1 .blue {
  background: linear-gradient(90deg, #60c8ff 0%, #39a8ff 28%, #8fd5ff 58%, #39a8ff 82%, #60c8ff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShift 9s linear infinite;
}
h1 .yellow {
  background: linear-gradient(90deg, #f3d348 0%, #ffdf66 28%, #ffc107 58%, #f3d348 82%, #ffdf66 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShift 9s linear infinite 1.5s;
}
@keyframes gradShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 260% 50%; }
}

/* ── ACCESSIBILITY ───────────────────────── */
.skipLink {
  position: absolute; top: -100%; left: 16px; z-index: 99999;
  background: #39a8ff; color: #000; font-size: 13px; font-weight: 800;
  padding: 8px 16px; border-radius: 0 0 10px 10px; text-decoration: none;
  transition: top 0.15s ease;
}
.skipLink:focus { top: 0; }
:focus-visible { outline: 2px solid #39a8ff; outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* ── COOKIE BANNER ───────────────────────── */
.cookieBanner { position:fixed;bottom:0;left:0;right:0;z-index:9999;background:rgba(6,12,24,.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.08);padding:14px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;transform:translateY(100%);transition:transform .35s cubic-bezier(.22,1,.36,1); }
.cookieBanner.show { transform:translateY(0); }
.cookieBannerText { flex:1;font-size:13px;color:rgba(238,244,255,.7);line-height:1.6;min-width:200px; }
.cookieBannerText a { color:#39a8ff;text-decoration:underline; }
.cookieBannerBtns { display:flex;gap:8px;flex-shrink:0; }
.cookieAccept { padding:8px 18px;border-radius:10px;background:#39a8ff;color:#000;font-size:13px;font-weight:800;border:none;cursor:pointer;transition:opacity .15s ease; }
.cookieAccept:hover { opacity:.85; }
.cookieDecline { padding:8px 14px;border-radius:10px;background:transparent;color:rgba(238,244,255,.5);font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:opacity .15s ease; }
.cookieDecline:hover { opacity:.7; }

/* ── SCROLL TO TOP ───────────────────────── */
.scrollTop { position:fixed;bottom:22px;left:20px;z-index:800;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(238,244,255,.7);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease,background .15s ease;-webkit-tap-highlight-color:transparent; }
.scrollTop.show { opacity:1;pointer-events:auto;transform:translateY(0); }
.scrollTop:hover { background:rgba(255,255,255,.13); }

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width: 640px) {
  .heroContent, .cardInner, .footerCard { padding: 16px; }
  h1 { font-size: clamp(30px, 10vw, 46px); }
  .lead { font-size: 14px; }
}

/* ── REDUCED MOTION ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .page { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}