/* =====================================================
   RE:BOOT Landing Page
   Dark workshop universe — precise, quiet, confident
===================================================== */

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

:root {
  --teal:       #1d9e75;
  --teal-dim:   #0f6e56;
  --teal-ghost: #1d9e7515;
  --dark-bg:    #080a0d;
  --card-bg:    #0d1117;
  --win-bg:     #0a0a0c;
  --border-live:#1d9e7540;
  --border-dead:#221a33;
  --text-main:  #f0f6fc;
  --text-dim:   #7d8590;
  --text-ghost: #3d3456;
  --purple-dim: #4a3d6a;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--dark-bg);
  color: var(--text-main);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---- NAV ---- */
.nav {
  padding: 20px 0;
  border-bottom: 1px solid #ffffff08;
}
.nav-inner {
  max-width: 860px; margin: auto; padding: 0 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.nav-logo {
  font-size: 18px; font-weight: 700; letter-spacing: 2px;
  color: var(--text-main);
}
.nav-version {
  font-size: 11px; color: var(--text-dim);
  letter-spacing: 1px; font-weight: 500;
}

/* ---- HERO ---- */
.hero {
  padding: 80px 24px 60px;
  max-width: 860px; margin: auto;
}
.hero-eyebrow {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--teal); font-weight: 600; margin-bottom: 20px;
}
.hero-h1 {
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 700; line-height: 1.08;
  letter-spacing: -2px; color: var(--text-main);
  margin-bottom: 24px;
}
.hero-sub {
  font-size: 16px; color: var(--text-dim);
  line-height: 1.7; max-width: 520px;
}

/* ---- CARDS ---- */
.cards-section { padding: 0 24px 80px; }
.cards-inner {
  max-width: 860px; margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

/* SHARED CARD */
.card {
  border-radius: 20px;
  padding: 32px 28px 28px;
  position: relative;
  overflow: visible;
  display: block;
  text-decoration: none;
}

/* ANDROID */
.card-android {
  background: var(--card-bg);
  border: 1px solid var(--border-live);
  cursor: pointer;
  transition: border-color .35s ease, transform .28s ease;
}
.card-android::before {
  content: '';
  position: absolute; inset: 0; border-radius: 20px;
  background: radial-gradient(ellipse at 30% 0%, #1d9e7512 0%, transparent 60%);
  pointer-events: none;
}
.card-android:hover {
  border-color: var(--teal);
  transform: translateY(-5px);
}

/* WINDOWS */
.card-windows {
  background: var(--win-bg);
  border: 1px solid var(--border-dead);
  overflow: visible;
}

/* ---- STATUS ROW ---- */
.card-status {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 26px;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.dot-live {
  background: var(--teal);
  animation: pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; box-shadow: 0 0 0 0 #1d9e7566; }
  50%      { opacity:.7; box-shadow: 0 0 0 6px #1d9e7500; }
}
.dot-dead {
  background: transparent;
  border: 1px solid var(--border-dead);
}
.status-label {
  font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; font-weight: 600;
  color: var(--teal);
}
.dormant-label { color: var(--purple-dim); }

/* ---- DEVICE FRAME ---- */
.device-frame {
  width: 80px; height: 136px;
  border-radius: 14px;
  margin: 0 auto 22px;
  position: relative;
  overflow: hidden;
}
.android-frame {
  border: 2px solid #1d9e7550;
  background: #080c10;
}
.windows-frame {
  border: 2px solid #221a33;
  background: #070709;
}
.device-screen {
  position: absolute; inset: 6px;
  border-radius: 9px;
  background: #0a0f14;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden; gap: 4px;
}
.windows-screen { background: #09090c; }
.scan-line {
  width: 80%; height: 1px;
  background: linear-gradient(90deg, transparent, #1d9e7544, transparent);
  animation: scan 2.2s linear infinite;
}
@keyframes scan {
  0%   { transform: translateY(-22px); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(22px); opacity: 0; }
}
.health-readout {
  font-size: 9px; color: var(--teal);
  letter-spacing: 1px; font-weight: 700;
  position: relative; z-index: 2;
}
.dead-readout {
  font-size: 11px; color: var(--border-dead);
  letter-spacing: 2px; font-weight: 600;
}

/* ---- EKG / FLATLINE ---- */
.ekg-wrap, .flatline-wrap {
  width: 100%; height: 34px; margin-bottom: 20px;
  overflow: hidden;
}
.ekg-svg, .flat-svg { width: 100%; height: 34px; }
.ekg-path {
  stroke: var(--teal); stroke-width: 1.5; fill: none;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: draw-ekg 1.4s ease forwards .4s;
}
@keyframes draw-ekg { to { stroke-dashoffset: 0; } }
.flat-line {
  stroke: #221a33; stroke-width: 1.5;
}

/* ---- CARD TEXT ---- */
.card-title {
  font-size: 20px; font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px; letter-spacing: -.3px;
}
.windows-title { color: var(--text-ghost); }
.card-desc {
  font-size: 13px; color: var(--text-dim);
  line-height: 1.65; margin-bottom: 22px;
}
.windows-desc { color: #3d3050; }

/* ---- CTA ---- */
.card-cta {
  display: block; width: 100%;
  padding: 12px; border-radius: 11px;
  font-size: 13px; font-weight: 600;
  letter-spacing: .4px; text-align: center;
}
.android-cta {
  background: var(--teal); color: #fff;
  transition: background .2s ease, transform .15s ease;
}
.card-android:hover .android-cta {
  background: var(--teal-dim);
  transform: translateY(-1px);
}
.windows-cta {
  background: transparent;
  border: 1px solid var(--border-dead);
  color: var(--purple-dim);
  cursor: default;
}

/* ---- SPIDERWEBS ---- */
.webs {
  position: absolute;
  top: -12px; left: -12px;
  width: calc(100% + 24px);
  pointer-events: none;
  z-index: 10;
}
.web-line  { stroke: #4a3d6a; stroke-width: .7;  fill: none; opacity: .75; }
.web-arc   { stroke: #4a3d6a; stroke-width: .35; fill: none; opacity: .45; }
.spider-dot { fill: #3d3060; opacity: .85; }

.sway-left {
  transform-origin: 5px 0px;
  animation: sway-l 5.5s ease-in-out infinite;
}
.sway-right {
  transform-origin: 319px 0px;
  animation: sway-r 7s ease-in-out infinite;
}
.sway-mid {
  transform-origin: 143px 0px;
  animation: sway-l 8.5s ease-in-out infinite;
}
@keyframes sway-l {
  0%,100% { transform: rotate(0deg); }
  40%     { transform: rotate(2.5deg); }
  70%     { transform: rotate(-1.5deg); }
}
@keyframes sway-r {
  0%,100% { transform: rotate(0deg); }
  35%     { transform: rotate(-2deg); }
  65%     { transform: rotate(1deg); }
}

/* ---- FOOTER ---- */
.footer {
  text-align: center; padding: 32px 24px;
  border-top: 1px solid #ffffff06;
  font-size: 12px; color: var(--text-dim);
  letter-spacing: .5px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 680px) {
  .hero-h1 { font-size: 38px; }
  .cards-inner { grid-template-columns: 1fr; }
}