/* ==========================================================================
   Home page — hero carousel, overlapping category cards, product rows,
   ordering steps, value props and quote CTA. Builds on app.css tokens.
   ========================================================================== */

.page-home {
  --hero-overlap: 250px;   /* how far the category cards ride up over the hero */
  --hero-visible: 330px;   /* hero area kept clear above the cards */
}

/* Hero carousel ---------------------------------------------------------- */
.home-hero {
  --carousel-arrow-h: calc(100% - var(--hero-overlap) - 40px);
  --carousel-dots-bottom: calc(var(--hero-overlap) + 50px);
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  background: var(--ts-navy-900);
}
.home-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: calc(var(--hero-overlap) + 40px);
  background: linear-gradient(180deg, rgba(234, 237, 237, 0) 0%, rgba(234, 237, 237, .78) 52%, var(--ts-bg) 100%);
  pointer-events: none;
}
.home-hero .carousel-dots { padding: 4px 8px; border-radius: 999px; background: rgba(5, 16, 31, .28); }

.hero-slide {
  position: relative;
  display: flex;
  min-height: calc(var(--hero-visible) + var(--hero-overlap));
  color: #fff;
  background-color: var(--ts-navy-900);
  background-repeat: no-repeat;
  isolation: isolate;
}
.hero-slide::before {
  /* subtle circuit-grid texture */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 45%, #000 70%, transparent 100%);
  mask-image: linear-gradient(100deg, transparent 0%, #000 45%, #000 70%, transparent 100%);
}
.hero-slide-ai {
  background-image:
    radial-gradient(ellipse at 82% 18%, rgba(123, 97, 255, .55), transparent 55%),
    linear-gradient(115deg, #0b1726 0%, #12306f 46%, #3b4fd8 78%, #6a4fe0 100%);
}
.hero-slide-gpu {
  background-image:
    radial-gradient(ellipse at 80% 20%, rgba(118, 185, 237, .35), transparent 55%),
    linear-gradient(115deg, #060d18 0%, #13233a 42%, #24496d 74%, #3f6f96 100%);
}
.hero-slide-managed {
  background-image:
    radial-gradient(ellipse at 82% 18%, rgba(255, 167, 38, .40), transparent 55%),
    linear-gradient(115deg, #17131f 0%, #3b1d17 40%, #8a3510 72%, #c2410c 100%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: start;
  gap: 40px;
  width: 100%;
  padding: 40px 88px calc(var(--hero-overlap) + 72px);
}
.hero-copy { max-width: 640px; min-width: 0; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .12);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
}
.hero-title {
  margin: 0 0 12px;
  font-size: clamp(30px, 2.9vw, 42px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}
.hero-text {
  max-width: 580px;
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .86);
}
.hero-price { margin: 0 0 18px; font-size: 15px; color: rgba(255, 255, 255, .82); }
.hero-price strong { font-size: 19px; color: #fff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .btn-cart { --btn-shadow: 0 6px 18px rgba(0, 0, 0, .25); font-weight: 600; }

.hero-visual { justify-self: end; width: 100%; max-width: 500px; padding-top: 4px; perspective: 1400px; }
.hero-art {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .16);
  transform: rotateY(-9deg) rotateX(3deg);
  transform-origin: 60% 50%;
}
.hero-art .art { width: 100%; }

/* Body sits on top of the faded hero bottom */
.home-body { position: relative; z-index: 3; }
.home-cards { margin-top: calc(-1 * var(--hero-overlap)); }
.home-body-flat .home-cards { margin-top: 24px; }

/* Shop-by-category cards ------------------------------------------------- */
.home-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-card {
  position: relative; /* contains visually-hidden text when the row scrolls on phones */
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 20px 16px;
  border-radius: var(--radius);
  background-color: var(--ts-surface);
  background-image: linear-gradient(90deg, var(--c1, var(--ts-steel)), var(--c2, var(--ts-navy-700)));
  background-repeat: no-repeat;
  background-size: 100% 4px;
  box-shadow: var(--shadow-1);
}
.home-card-title { margin: 0 0 14px; font-size: 19px; font-weight: 700; line-height: 1.25; }
.home-card-quad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 14px 12px;
  flex: 1;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.home-card-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ts-text);
  font-size: 12.5px;
  line-height: 1.3;
}
.home-card-item:hover { color: #c7511f; text-decoration: none; }
.home-card-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: #dfe3e6;
}
.home-card-thumb .art { width: 100%; height: 100%; aspect-ratio: auto; transition: transform .35s var(--ease); }
.home-card-item:hover .home-card-thumb .art { transform: scale(1.06); }
.home-card-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-card-thumb-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  color: #fff;
  text-align: center;
  background: linear-gradient(140deg, var(--c1, var(--ts-steel)), var(--c2, var(--ts-navy-700)));
}
.home-card-more-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .18); }
.home-card-more-text { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.home-card-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 2px;
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 600;
}

.home-card-info { background-image: linear-gradient(90deg, var(--ts-blue), #7b61ff); }
.home-card-pay { background-image: linear-gradient(90deg, var(--ts-orange), #fa8900); }
.home-card-text { margin: -4px 0 14px; font-size: 14px; color: var(--ts-text-2); line-height: 1.5; }

.term-ladder { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.term-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--ts-border-2);
  border-radius: var(--radius);
  background: var(--ts-surface-2);
  font-size: 14px;
}
.term-step-label { font-weight: 600; }
.term-step-value { font-size: 12.5px; color: var(--ts-text-2); white-space: nowrap; }
.term-step.has-discount { background: #fff; }
.term-step.has-discount .term-step-value {
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--ts-green-50);
  color: #0d652d;
  font-weight: 700;
}

.pay-list { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; font-size: 14px; }
.pay-list li { display: flex; align-items: center; gap: 10px; }
.pay-list .icon {
  box-sizing: content-box;
  padding: 7px;
  border-radius: 50%;
  background: var(--ts-blue-50);
  color: var(--ts-blue);
}

/* White panels (rows) ---------------------------------------------------- */
.home-panel {
  margin: 20px 0;
  padding: 20px 20px 12px;
  border-radius: var(--radius);
  background: var(--ts-surface);
  box-shadow: var(--shadow-1);
}
.home-panel .product-card { box-shadow: none; border: 1px solid var(--ts-border-2); }
.home-panel .product-card:hover { box-shadow: var(--shadow-2); }
.home-panel .scroller-prev { left: -12px; }
.home-panel .scroller-next { right: -12px; }

/* Category rows */
.home-cat {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
}
.home-cat-promo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(160deg, var(--c1, var(--ts-steel)), var(--c2, var(--ts-navy-700)));
}
.home-cat-art { flex-shrink: 0; line-height: 0; }
.home-cat-art .art { width: 100%; }
.home-cat-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1; padding: 16px 20px 20px; }
.home-cat-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.home-cat-title { margin: 0; font-size: 22px; line-height: 1.2; color: #fff; }
.home-cat-text { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.home-cat-price { margin: 2px 0 8px; font-size: 14px; color: rgba(255, 255, 255, .88); }
.home-cat-price strong { color: #fff; font-size: 16px; }
.home-cat-btn { margin-top: auto; font-weight: 600; }
.home-cat-scroller { min-width: 0; }
.home-cat-scroller .scroller-track { padding-bottom: 6px; }

/* How ordering works ----------------------------------------------------- */
.home-steps { padding: 32px 32px 24px; }
.home-steps-head { max-width: 760px; }
.home-steps-head .section-title { font-size: 24px; }
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 28px 0 8px;
  padding: 0;
  list-style: none;
}
.step { position: relative; min-width: 0; }
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 74px;
  right: -14px;
  height: 2px;
  background: repeating-linear-gradient(90deg, #aecbfa 0 6px, transparent 6px 12px);
}
.step-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--ts-blue-50);
  color: var(--ts-blue);
}
.step-num {
  position: absolute;
  top: -4px;
  left: 40px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ts-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.step-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.step-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ts-text-2); }
.home-steps-foot { margin: 18px 0 4px; font-size: 14px; font-weight: 600; }
.home-steps-foot a { display: inline-flex; align-items: center; gap: 2px; }

/* Value props ------------------------------------------------------------ */
.home-values { margin: 28px 0; }
.values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.value {
  min-width: 0;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--ts-surface);
  box-shadow: var(--shadow-1);
}
.value .feature-title { font-size: 15px; line-height: 1.35; }
.value .feature-text { line-height: 1.5; }

/* Quote CTA band --------------------------------------------------------- */
.home-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  margin: 28px 0 0;
  padding: 36px 40px;
  border-radius: var(--radius-lg);
  color: #fff;
  background:
    radial-gradient(circle at 88% 15%, rgba(91, 137, 173, .5), transparent 45%),
    radial-gradient(circle at 10% 110%, rgba(26, 115, 232, .35), transparent 40%),
    linear-gradient(120deg, var(--ts-navy-900), var(--ts-navy-700));
  box-shadow: var(--shadow-2);
}
.home-cta-copy { min-width: 0; }
.home-cta-title { margin: 0 0 6px; font-size: 26px; color: #fff; }
.home-cta-text { max-width: 640px; margin: 0; font-size: 16px; color: rgba(255, 255, 255, .84); }
.home-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
.home-cta .btn-cart { font-weight: 600; }
.home-cta :focus-visible { outline-color: #8ab4f8; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1279px) {
  .hero-inner { padding-left: 76px; padding-right: 76px; gap: 32px; }
  .hero-visual { max-width: 420px; }
  .home-cat { grid-template-columns: 250px minmax(0, 1fr); }
}

@media (min-width: 768px) {
  /* Few items per category: stretch the cards to fill the row instead of scrolling. */
  .home-cat-scroller .scroller-track { grid-auto-columns: minmax(210px, 1fr); }
}

@media (max-width: 1023px) {
  .page-home { --hero-overlap: 120px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; padding: 32px 60px calc(var(--hero-overlap) + 64px); }
  .hero-text { font-size: 16px; }
  .hero-visual { max-width: 260px; padding-top: 24px; }
  .home-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .home-card-thumb { aspect-ratio: 16 / 9; }
  .home-cat { grid-template-columns: minmax(0, 1fr); }
  .home-cat-promo { flex-direction: row; }
  .home-cat-art { width: 220px; }
  .home-cat-art .art { height: 100%; aspect-ratio: auto; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .step:not(:last-child)::after { display: none; }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 899px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { display: none; }
  .hero-copy { max-width: 600px; }
}

@media (max-width: 767px) {
  .page-home { --hero-overlap: 44px; }
  .home-hero { --carousel-dots-bottom: calc(var(--hero-overlap) + 12px); }
  .home-hero::after { height: calc(var(--hero-overlap) + 24px); }
  .hero-slide { min-height: 0; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); padding: 22px 20px calc(var(--hero-overlap) + 48px); }
  .hero-visual { display: none; }
  .hero-eyebrow { margin-bottom: 10px; font-size: 12px; }
  .hero-title { font-size: 24px; margin-bottom: 8px; }
  .hero-text {
    font-size: 14.5px;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero-price { margin-bottom: 14px; font-size: 14px; }
  .hero-price strong { font-size: 16px; }
  .hero-secondary { display: none; }
  .hero-actions .btn-lg { min-height: 42px; padding: 0 20px; font-size: 15px; }
  .home-hero .carousel-prev, .home-hero .carousel-next { display: none; }

  .home-panel { margin: 16px 0; padding: 16px 16px 8px; }
  .home-cat { padding: 16px; gap: 16px; }
  .home-cat-art { width: 140px; }
  .home-cat-copy { padding: 14px 16px 16px; }
  .home-cat-title { font-size: 19px; }
  .home-cat-text { font-size: 13.5px; }
  .home-steps { padding: 22px 18px 16px; }
  .home-steps-head .section-title { font-size: 21px; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 18px; }
  .step {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--ts-border-2);
  }
  .step:first-child { border-top: 0; }
  .step-icon { grid-row: 1 / span 2; margin: 0; }
  .step-num { top: 10px; left: 38px; }
  .step-title { align-self: end; margin-bottom: 2px; }
  .values { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .value { padding: 16px; }
  .home-cta { padding: 26px 20px; }
  .home-cta-title { font-size: 22px; }
  .home-cta-text { font-size: 15px; }
  .home-cta-actions, .home-cta-actions .btn { width: 100%; }
  .home-cta-actions .btn { white-space: normal; }
}

@media (max-width: 599px) {
  .home-cards-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 12px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .home-cards-grid::-webkit-scrollbar { display: none; }
  .home-card { scroll-snap-align: start; padding: 16px 16px 14px; }
  .home-card-thumb { aspect-ratio: 4 / 3; }
  .home-card-title { font-size: 17px; }
  .home-cat-promo { flex-direction: column; }
  .home-cat-art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art { transform: none; }
}