/* =====================================================================
   Homepage only. Sections in the order they appear on the page.
   ===================================================================== */

/* ---------- 1. Hero ---------- */
.hero { padding-top: clamp(40px, 3rem + 3vw, 96px); text-align: center; }
.hero-inner { max-width: 900px; }
.hero-eyebrow { margin-bottom: var(--s-3); }
.hero-title { margin-inline: auto; }
.hero-lead { max-width: 40ch; margin: var(--s-5) auto 0; }
.hero-actions { justify-content: center; margin-top: var(--s-7); }

.hero-stage {
  margin-top: clamp(32px, 2rem + 3vw, 72px);
  border-radius: var(--radius-l);
  background:
    radial-gradient(60% 70% at 50% 100%, #e9edf5 0%, rgba(233, 237, 245, 0) 70%),
    var(--c-bg-alt);
  overflow: hidden;
}
.hero-stage img { width: 100%; height: auto; aspect-ratio: 1200 / 560; }
@media (max-width: 640px) {
  .hero-stage { border-radius: var(--radius-m); }
  .hero-stage img { aspect-ratio: 1200 / 700; object-fit: cover; object-position: 58% 50%; }
}

/* ---------- 2. Category rail ---------- */
.cat-rail {
  display: flex;
  gap: clamp(var(--s-2), 1.5vw, var(--s-5));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  margin: 0 calc(var(--gutter) * -1);
  padding: var(--s-2) var(--gutter);
  list-style: none;
}
.cat-rail::-webkit-scrollbar { display: none; }
/* centred when everything fits, scrollable when it doesn't */
.cat-rail > :first-child { margin-left: auto; }
.cat-rail > :last-child  { margin-right: auto; }

.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  width: 104px;
  flex-shrink: 0;
  scroll-snap-align: start;
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.25;
  text-align: center;
}
.cat-tile:hover { text-decoration: none; color: var(--c-accent); }
.cat-icon {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  border-radius: 20px;
  background: var(--c-bg-alt);
  color: var(--c-text);
  transition: background-color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-out);
}
.cat-tile:hover .cat-icon { background: #ebebf0; transform: translateY(-2px); }
.cat-icon svg { width: 32px; height: 32px; }
.cat-tile .skeleton.cat-icon { background: none; }

/* ---------- 3. Product shelves ---------- */
.shelf-head-actions { display: flex; align-items: center; gap: var(--s-5); }

/* ---------- 4. Repair band (dark) ---------- */
.repair-band {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(var(--s-7), 4vw, var(--s-10));
  padding: clamp(32px, 2rem + 4vw, 88px);
  border-radius: var(--radius-l);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(77, 141, 255, 0.18) 0%, rgba(77, 141, 255, 0) 60%),
    var(--c-ink);
  color: var(--c-on-ink);
}
.repair-band .eyebrow { color: var(--c-on-ink-2); margin-bottom: var(--s-3); }
.repair-band .lead { color: var(--c-on-ink-2); margin-top: var(--s-5); max-width: 42ch; }
.repair-band .btn-row { margin-top: var(--s-7); }

.device-list { list-style: none; margin: 0; padding: 0; }
.device-link {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--c-on-ink);
  font-weight: var(--fw-medium);
}
.device-link:hover { text-decoration: none; color: #fff; }
.device-link svg:first-child { width: 22px; height: 22px; color: var(--c-on-ink-2); }
.device-link .chev { margin-left: auto; width: 16px; height: 16px; color: var(--c-on-ink-2); transition: transform var(--dur-1) var(--ease); }
.device-link:hover .chev { transform: translateX(3px); }

.steps { list-style: none; counter-reset: step; margin: var(--s-7) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.steps li { counter-increment: step; display: flex; gap: var(--s-3); align-items: baseline; color: var(--c-on-ink-2); font-size: var(--fs-sm); }
.steps li::before {
  content: counter(step);
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 11px; color: var(--c-on-ink);
}

@media (max-width: 860px) {
  .repair-band { grid-template-columns: 1fr; }
}

/* ---------- 5. Why DARKSTORE ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}
.why-card {
  padding: var(--s-7) var(--s-6);
  border-radius: var(--radius-l);
  background: var(--c-bg-alt);
}
.why-card svg { width: 30px; height: 30px; color: var(--c-accent); margin-bottom: var(--s-6); }
.why-card .h3 { font-size: 1.1875rem; margin-bottom: var(--s-2); }
.why-card p { color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 980px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------- 6. Reviews (only when you publish some) ---------- */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-4); }
.review {
  padding: var(--s-7);
  border-radius: var(--radius-l);
  border: 1px solid var(--c-line-soft);
}
.review blockquote { font-size: var(--fs-md); line-height: 1.45; letter-spacing: var(--tracking-tight); }
.review figcaption { margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--c-text-3); }
.stars { color: var(--c-text); letter-spacing: 2px; font-size: var(--fs-sm); margin-bottom: var(--s-3); }

/* ---------- 7. Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
.contact-copy .lead { margin-top: var(--s-4); }
.contact-facts { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.contact-facts li { display: flex; gap: var(--s-3); color: var(--c-text-2); }
.contact-facts svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--c-text-3); }

.action-list { list-style: none; margin: 0; padding: 0; border-radius: var(--radius-l); background: var(--c-bg-alt); overflow: hidden; }
.action-list li + li { border-top: 1px solid var(--c-line-soft); }
.action {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  color: var(--c-text);
  transition: background-color var(--dur-1) var(--ease);
}
.action:hover { text-decoration: none; background: #ebebf0; }
.action > svg { width: 22px; height: 22px; color: var(--c-accent); flex-shrink: 0; }
.action-title { display: block; font-weight: var(--fw-semibold); }
.action-sub { display: block; font-size: var(--fs-sm); color: var(--c-text-3); }
.action .chev { margin-left: auto; width: 16px; height: 16px; color: var(--c-text-3); }

@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }