:root {
  --t-bg: #061014;
  --t-panel: #0a1b20;
  --t-line: rgba(100, 239, 229, 0.24);
  --t-cyan: #67eee4;
  --t-green: #75f29c;
  --t-yellow: #f8d250;
  --t-text: #eaf8f8;
  --t-muted: #8faeb2;
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-width: 320px; background: var(--t-bg); color: var(--t-text); font-family: "JetBrains Mono", monospace; line-height: 1.6; }
a { color: inherit; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--t-yellow); outline-offset: 3px; }

.tracker-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 0, rgba(103, 238, 228, 0.25), transparent 30%),
    radial-gradient(circle at 92% 32%, rgba(117, 242, 156, 0.18), transparent 26%),
    linear-gradient(rgba(103, 238, 228, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 238, 228, 0.055) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}

.tracker-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  width: min(100% - 3rem, 1160px);
  margin-inline: auto;
  padding: 1.4rem 0;
}

.tracker-logo { font-family: "Orbitron", sans-serif; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.18em; text-decoration: none; text-transform: uppercase; }
.tracker-header nav { display: flex; gap: 2rem; }
.tracker-header nav a { color: var(--t-muted); font-size: 0.58rem; letter-spacing: 0.28em; text-decoration: none; text-transform: uppercase; }
.tracker-version { justify-self: end; border: 1px solid rgba(117, 242, 156, 0.55); border-radius: 999px; color: var(--t-green); font-size: 0.64rem; letter-spacing: 0.15em; padding: 0.32rem 0.7rem; box-shadow: 0 0 16px rgba(117, 242, 156, 0.26); text-transform: uppercase; }
.tracker-version i, .preview-panel__header i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--t-green); }

main { width: min(100% - 3rem, 1160px); margin-inline: auto; }
.tracker-hero { display: grid; min-height: 650px; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; padding: 4.5rem 0; }
.tracker-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tracker-tags span { border: 1px solid rgba(117, 242, 156, 0.5); border-radius: 999px; color: var(--t-green); font-size: 0.58rem; letter-spacing: 0.16em; padding: 0.35rem 0.7rem; text-transform: uppercase; }
.tracker-tags span:last-child { border-color: rgba(248, 210, 80, 0.55); color: var(--t-yellow); }
.tracker-hero h1 { margin: 1.5rem 0 1rem; font-family: "Orbitron", sans-serif; font-size: clamp(3.1rem, 7vw, 5.5rem); font-weight: 900; letter-spacing: 0.04em; line-height: 0.94; text-transform: uppercase; }
.tracker-hero h1 em { background: linear-gradient(90deg, var(--t-cyan), var(--t-green), var(--t-yellow)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
.tracker-hero__copy > p { max-width: 600px; color: var(--t-muted); font-size: 0.88rem; }

.token-panel { margin-top: 1.7rem; border: 1px solid rgba(103, 238, 228, 0.56); border-radius: 14px; background: rgba(6, 18, 22, 0.78); box-shadow: inset 0 0 30px rgba(103, 238, 228, 0.03); padding: 1.5rem; }
.token-panel label { display: block; margin-bottom: 0.75rem; color: var(--t-cyan); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.token-panel > div { display: grid; grid-template-columns: 1fr auto; gap: 0.7rem; }
.token-panel input { min-width: 0; border: 1px solid #163038; border-radius: 7px; background: #050d11; color: var(--t-text); padding: 0.85rem 1rem; }
.token-panel button { border: 0; border-radius: 7px; background: linear-gradient(90deg, var(--t-cyan), var(--t-green)); color: #051013; cursor: pointer; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; padding: 0.85rem 1.35rem; text-transform: uppercase; box-shadow: 0 0 22px rgba(103, 238, 228, 0.32); }
.token-panel small { display: block; margin-top: 0.85rem; color: var(--t-muted); font-size: 0.62rem; }
.token-status { min-height: 1.3rem; margin-top: 0.55rem; color: var(--t-yellow); font-size: 0.68rem; }
.tracker-trust { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1rem; color: var(--t-muted); font-size: 0.64rem; }
.tracker-trust span:last-child { color: var(--t-yellow); }

.preview-panel { overflow: hidden; border: 1px solid rgba(117, 242, 156, 0.65); border-radius: 15px; background: #071116; box-shadow: 0 0 45px rgba(117, 242, 156, 0.2); }
.preview-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem; color: var(--t-muted); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; }
.preview-panel__header span:last-child { display: flex; align-items: center; gap: 0.5rem; color: var(--t-green); }
.preview-panel video { display: block; width: calc(100% - 1.5rem); aspect-ratio: 16 / 9; margin: 0 0.75rem; border: 1px solid rgba(103, 238, 228, 0.2); border-radius: 7px; background: #000; object-fit: cover; }
.preview-panel__caption { color: rgba(143, 174, 178, 0.72); font-size: 0.58rem; padding: 0.7rem 1rem 0.9rem; text-align: center; }

.install-section, .feature-section { padding: 6rem 0 2rem; }
.install-section > header, .feature-section > header { max-width: 700px; margin-bottom: 2.6rem; }
.install-section > header > span, .feature-section > header > span { color: var(--t-green); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; }
.install-section h2, .feature-section h2 { margin-top: 0.55rem; font-family: "Orbitron", sans-serif; font-size: clamp(1.7rem, 4vw, 2.6rem); text-transform: uppercase; }
.install-section header p, .feature-section header p { margin-top: 0.6rem; color: var(--t-muted); font-size: 0.82rem; }

.install-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.install-grid article, .feature-grid article { border: 1px solid var(--t-line); border-radius: 12px; background: rgba(7, 20, 25, 0.8); padding: 1.4rem; }
.install-grid article > span { color: rgba(103, 238, 228, 0.5); font-family: "Orbitron", sans-serif; font-size: 1.7rem; font-weight: 900; }
.install-grid h3, .feature-grid h3 { margin: 0.65rem 0 0.45rem; color: var(--t-text); font-size: 0.82rem; }
.install-grid p, .feature-grid p { color: var(--t-muted); font-size: 0.72rem; }
.install-warning { margin-top: 1rem; border: 1px solid rgba(248, 210, 80, 0.28); border-radius: 10px; background: rgba(248, 210, 80, 0.05); color: var(--t-muted); font-size: 0.72rem; padding: 1rem 1.2rem; }
.install-warning strong { color: var(--t-yellow); }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.feature-grid article b { color: var(--t-cyan); font-size: 1.3rem; }

.tracker-contact { margin: 6rem 0 3rem; border: 1px solid var(--t-line); border-radius: 14px; background: rgba(7, 20, 25, 0.85); padding: 2.5rem; text-align: center; }
.tracker-contact h2 { font-family: "Orbitron", sans-serif; text-transform: uppercase; }
.tracker-contact p { margin: 0.6rem 0 1.2rem; color: var(--t-muted); font-size: 0.8rem; }
.tracker-contact a { display: inline-flex; border: 1px solid rgba(103, 238, 228, 0.45); border-radius: 7px; color: var(--t-cyan); font-size: 0.68rem; letter-spacing: 0.1em; padding: 0.7rem 1rem; text-decoration: none; text-transform: uppercase; }
footer { border-top: 1px solid var(--t-line); color: var(--t-muted); font-size: 0.6rem; letter-spacing: 0.08em; padding: 2rem; text-align: center; text-transform: uppercase; }

@media (max-width: 900px) {
  .tracker-header { grid-template-columns: 1fr auto; }
  .tracker-header nav { display: none; }
  .tracker-hero { grid-template-columns: 1fr; }
  .install-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .tracker-header, main { width: min(100% - 2rem, 1160px); }
  .tracker-hero { padding-top: 2.5rem; }
  .tracker-hero h1 { font-size: 2.8rem; }
  .token-panel > div, .install-grid, .feature-grid { grid-template-columns: 1fr; }
  .tracker-version { font-size: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }