/* ==========================================================================
   LUCKYCARDSPIN — DOWNLOAD PAGE STYLES
   ========================================================================== */

/* ---------------------------------------------------------------------- *
 * HERO
 * ---------------------------------------------------------------------- */
.dl-hero{
  position:relative;
  padding-top: calc(var(--nav-h) + 3.5rem);
  padding-bottom: 4rem;
  isolation:isolate;
  overflow:clip;
}
.dl-hero .hero__glow{ position:absolute; top:0; left:-10%; width:min(55vw,650px); height:min(55vw,650px); z-index:1; pointer-events:none; }
.dl-hero__inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items:center;
}
.dl-hero__content h1{ font-size: var(--fs-3xl); margin-top:0.5em; margin-bottom:0.55em; }
.dl-hero__content > p{ font-size: var(--fs-md); max-width:50ch; margin-bottom: var(--sp-7); }
.dl-hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.dl-hero__meta{ font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted-dim); letter-spacing:0.03em; }

.dl-hero__art{ position:relative; display:flex; justify-content:center; }

/* ---------------------------------------------------------------------- *
 * APP HIGHLIGHTS
 * ---------------------------------------------------------------------- */
.highlights-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.preview-card{
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, var(--pc1) 0%, var(--pc2) 100%);
  overflow:hidden;
  transition: transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base);
}
.preview-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.preview-card__bar{
  display:flex; gap:6px;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(246,239,227,0.1);
}
.preview-card__bar span{ width:8px; height:8px; border-radius:50%; background: rgba(246,239,227,0.25); }
.preview-card__body{ padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.preview-card .icon-tile{ background: rgba(11,7,16,0.35); }
.preview-card h3{ font-size: var(--fs-md); margin-bottom:0.4em; }
.preview-card p{ font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------- *
 * APP BENEFITS
 * ---------------------------------------------------------------------- */
.app-benefits__grid{
  display:grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.benefit-list{ display:flex; flex-direction:column; gap: var(--sp-5); }
.benefit-list li{
  display:grid; grid-template-columns:58px 1fr; gap: var(--sp-5);
  align-items:start;
  padding: var(--sp-5);
  border-radius: var(--radius-md);
  background: rgba(246,239,227,0.025);
  border: 1px solid var(--line-soft);
}
.benefit-list h3{ font-size: var(--fs-md); margin-bottom:0.3em; }
.benefit-list p{ font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------- *
 * REQUIREMENTS PANEL
 * ---------------------------------------------------------------------- */
.requirements{ margin-top: var(--sp-9); padding: clamp(1.75rem, 3vw, 2.75rem); }
.requirements h3{ font-size: var(--fs-lg); margin-bottom: var(--sp-5); }
.requirements__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
.requirements__grid > div{
  display:flex; flex-direction:column; gap:0.4rem;
  padding-top: var(--sp-4);
  border-top: 2px solid var(--line);
}
.requirements__grid span{ font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing:0.06em; text-transform:uppercase; color: var(--muted-dim); }
.requirements__grid strong{ font-size: var(--fs-base); color: var(--ivory); font-weight:600; }

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 1180px){
  .highlights-grid{ grid-template-columns: repeat(2, 1fr); }
  .requirements__grid{ grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-5); }
}

@media (max-width: 900px){
  .dl-hero__inner{ grid-template-columns:1fr; }
  .dl-hero__art{ order:-1; margin-bottom: var(--sp-6); }
  .app-benefits__grid{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .highlights-grid{ grid-template-columns: 1fr; }
  .benefit-list li{ grid-template-columns:48px 1fr; gap: var(--sp-4); }
  .dl-hero__cta{ flex-direction:column; align-items:stretch; }
  .dl-hero__cta .btn{ width:100%; justify-content:center; }
  .dl-hero__meta{ text-align:center; }
}