:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface2: #f0f0f2;
  --border: rgba(0,0,0,0.08);
  --text: #1a1a1a;
  --text2: #555;
  --text3: #888;
  --accent: #4d94ff;
  --accent-hover: #6aaaff;
  --shadow: 0 2px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.13), 0 0 0 1px rgba(0,0,0,0.06);
  --radius: 16px;
  --win-bg: #0078d4;
  --mint-bg: #87cf3e;
  --mint-bg2: #6db52e;
  --arch-bg: #1793d1;
  --rpm-bg: #cc0000;
  --rpm-color: #cc0000;

  /* animazione monitor */
  --mon-body: #d0d4db;
  --mon-screen: #1a2233;
  --mon-win-a: #2a6fff;
  --mon-win-b: #223355;
  --mon-stand: #b0b4bb;
  --conn-stroke: #2a6fff;
  --ping-r: #2a6fff;
  --ping-l: #2a6fff;
  --live-bg: #cc2200;
  --cursor-fill: #ffffff;
}

[data-theme="dark"] {
  --bg: #111113;
  --surface: #1c1c1e;
  --surface2: #2c2c2e;
  --border: rgba(255,255,255,0.07);
  --text: #f2f2f7;
  --text2: #ababab;
  --text3: #666;
  --shadow: 0 2px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08);
  --win-bg: #1a8fe8;
  --mint-bg: #72b833;
  --mint-bg2: #5a9428;
  --rpm-bg: #e8001c;
  --rpm-color: #ff6666;

  --mon-body: #3f4244;
  --mon-screen: #0d1520;
  --mon-win-a: #0077ee;
  --mon-win-b: #162040;
  --mon-stand: #3d3e43;
  --conn-stroke: #0077ee;
  --ping-r: #0077ee;
  --ping-l: #0077ee;
  --cursor-fill: #ccddff;
}

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

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 60px;
  transition: background 0.3s, color 0.3s;
  user-select: none;
}

/* ── Nav ── */
nav {
  width: 100%;
  max-width: 760px;
  display: flex;
  justify-content: flex-end;
  padding: 20px 0 0;
}

.theme-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 7px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text2);
  font-family: inherit;
  box-shadow: var(--shadow);
  transition: all 0.2s;
}
.theme-btn:hover { color: var(--text); box-shadow: var(--shadow-hover); }
.theme-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Hero ── */
.hero {
  margin-top: 60px;
  display: flex;
  align-items: center;
  gap: 52px;
  max-width: 760px;
  width: 100%;
}

.hero-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.briq-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 10px;
}

.hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(52px, 9vw, 80px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--text2);
}

.hero-title span { color: var(--accent); }

.hero-sub {
  margin-top: 18px;
  font-size: 15px;
  color: var(--text2);
  line-height: 1.6;
  max-width: 320px;
}

/* ── Remote animation ── */
.anim-wrap {
  flex-shrink: 0;
  width: clamp(280px, 35vw, 380px);
  perspective: 600px;
}

.remote-anim {
  width: 100%;
  height: auto;
  overflow: visible;
  transform: rotateX(8deg) rotateY(-12deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.18));
  animation: float3d 4s ease-in-out infinite;
}

@keyframes float3d {
  0%, 100% { transform: rotateX(8deg) rotateY(-12deg) translateY(0px); }
  50%       { transform: rotateX(8deg) rotateY(-12deg) translateY(-8px); }
}

/* monitor shapes */
.monitor-body {
  fill: var(--mon-body);
  filter: drop-shadow(3px 6px 0px rgba(0,0,0,0.25));
}
[data-theme="dark"] .monitor-body {
  filter: drop-shadow(3px 6px 0px rgba(80, 78, 78, 0.55));
}
.monitor-screen {
  fill: var(--mon-screen);
  filter: drop-shadow(inset 0 0 8px rgba(0,0,0,0.5));
}
.monitor-stand  { fill: var(--mon-stand); }
.win-a { fill: var(--mon-win-a); opacity: 0.9; }
.win-b { fill: var(--mon-win-b); }

/* connection lines */
.conn-line {
  stroke: var(--conn-stroke);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  opacity: 0.5;
}
.conn-arrow {
  stroke: var(--conn-stroke);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

/* ping dots */
.ping {
  opacity: 0;
  animation: ping-fade 1.6s ease-in-out infinite;
}
.ping-r { fill: var(--ping-r); filter: drop-shadow(0 0 4px var(--ping-r)); }
.ping-l { fill: var(--ping-l); filter: drop-shadow(0 0 4px var(--ping-l)); }

@keyframes ping-fade {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* cursor animation: starts on left monitor, glides to right monitor */
.cursor-group {
  animation: cursor-travel 3.2s ease-in-out infinite;
}
@keyframes cursor-travel {
  0%   { transform: translate(18px, 22px); opacity: 1; }
  35%  { transform: translate(18px, 22px); opacity: 1; }
  55%  { transform: translate(138px, 22px); opacity: 1; }
  80%  { transform: translate(138px, 22px); opacity: 1; }
  90%  { opacity: 0; }
  91%  { transform: translate(18px, 22px); opacity: 1; }
  100% { transform: translate(18px, 22px); opacity: 1; }
}

.cursor-shape {
  fill: var(--cursor-fill);
  filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.6));
}

/* ── Smart download ── */
.smart-btn-wrap {
  margin-top: 36px;
  max-width: 760px;
  width: 100%;
}

.smart-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 15px 26px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 18px rgba(0,153,204,0.28);
}
.smart-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(0,153,204,0.38);
}
.smart-btn:active { transform: scale(0.98); }
.smart-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.smart-btn--disabled {
  background: var(--surface2) !important;
  color: var(--text2) !important;
  box-shadow: none !important;
  cursor: default !important;
}

.smart-hint {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text3);
}

/* ── Divider ── */
.divider {
  max-width: 760px;
  width: 100%;
  margin: 52px 0 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.divider-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.divider-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── OS Cards ── */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 760px;
  width: 100%;
}

.os-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  text-decoration: none;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: transform 0.22s cubic-bezier(.22,.68,0,1.2), box-shadow 0.22s;
  cursor: pointer;
  height: fit-content;
}

.os-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.os-card:hover::before { opacity: 1; }
.os-card:active { transform: scale(0.98); }

.os-card-header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

.badge-beta {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #f0a500;
  color: #7a4e00;
  margin-left: 8px;
  vertical-align: middle;
  line-height: 1.6;
}

.os-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.os-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.os-logo.win  { background: var(--win-bg); }
.os-logo.mint { background: var(--mint-bg); }
.os-logo.arch { background: var(--arch-bg); }
.os-logo.rpm { background: var(--rpm-bg); }
.os-logo svg  { width: 28px; height: 28px; }

.os-info {
  flex: 1;
}

.os-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.os-sub {
  margin-top: 5px;
  font-size: 13px;
  color: var(--text2);
}

.os-dl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  width: 100%;
}
.os-dl.win  { color: var(--win-bg); }
.os-dl.mint { color: var(--mint-bg2); }
[data-theme="dark"] .os-dl.mint { color: var(--mint-bg); }
.os-dl svg { width: 15px; height: 15px; }
.os-dl.arch   { color: var(--arch-bg); }
[data-theme="dark"] .os-dl.arch { color: var(--arch-bg); }
.os-dl.rpm   { color: var(--rpm-color); }

/* ── Footer ── */
footer {
  margin-top: 64px;
  font-size: 12px;
  color: var(--text3);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .hero {
    flex-direction: column-reverse;
    gap: 28px;
    margin-top: 36px;
  }
  .anim-wrap { width: 240px; }
  .cards { grid-template-columns: 1fr; }
  .hero-sub { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-group, .ping, .live-bg { animation: none; }
  .ping { opacity: 0.6; }
  .os-card, .smart-btn { transition: none; }
}