/* ============================================================
   B9NEW.PK — Download page styles
   Self-contained device mockup + download hero + steps.
   ============================================================ */

.dl-hero { position: relative; overflow: hidden; padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.dl-hero__inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.dl-hero__copy { max-width: 600px; }
.dl-hero__copy h1 { font-size: var(--fs-h1); margin: 1rem 0 1.1rem; }
.dl-hero__copy p.lead { max-width: 52ch; }
.dl-badges { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.dl-badge {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .75rem 1.1rem; border-radius: var(--r-md);
  border: 1px solid var(--glass-border); background: var(--glass);
  backdrop-filter: blur(10px);
}
.dl-badge svg { width: 26px; height: 26px; color: var(--accent); }
.dl-badge b { font-family: var(--font-display); font-size: .95rem; color: var(--text); display: block; }
.dl-badge small { font-size: .72rem; color: var(--text-muted); }

/* device stage (reused pattern) */
.dl-stage { position: relative; display: grid; place-items: center; min-height: 520px; }
.dl-halo { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(0,230,118,.28), transparent 62%); filter: blur(34px); z-index: 0; }
.dl-ring { position: absolute; width: 112%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(0,230,118,.2); animation: dl-spin 38s linear infinite; z-index: 0; }
@keyframes dl-spin { to { transform: rotate(360deg); } }

.dl-device {
  position: relative; z-index: 3;
  width: clamp(240px, 27vw, 314px); aspect-ratio: 497 / 947;
  border-radius: 42px; padding: 12px;
  background: linear-gradient(160deg, #1a3b28, #05130b);
  border: 1px solid rgba(0,230,118,.25);
  box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 60px rgba(0,230,118,.18), inset 0 1px 0 rgba(255,255,255,.12);
  animation: dl-float 6s var(--ease) infinite alternate;
}
@keyframes dl-float { from { transform: translateY(-10px) rotate(-1deg); } to { transform: translateY(10px) rotate(1deg); } }
.dl-device__screen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #0b0b0f; }
.dl-device__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dl-device__notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 38%; height: 20px; border-radius: 0 0 14px 14px; background: #05130b; z-index: 4; }
.dl-device__glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, transparent 30%, transparent 70%, rgba(255,255,255,.05) 100%); mix-blend-mode: screen; }

.dl-float {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1rem; border-radius: var(--r-md);
  background: rgba(8,24,15,.72); border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(12px); box-shadow: var(--shadow-md), var(--glow-soft);
  font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--text); white-space: nowrap;
}
.dl-float small { display: block; font-size: .68rem; color: var(--text-muted); font-weight: 500; font-family: var(--font-body); }
.dl-float .dot { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--grad-accent-soft); color: var(--accent); flex-shrink: 0; }
.dl-float .dot svg { width: 16px; height: 16px; }
.dl-float--1 { top: 14%; left: -5%; animation: dl-floaty 5s var(--ease) infinite alternate; }
.dl-float--2 { bottom: 16%; right: -6%; animation: dl-floaty 6.4s var(--ease) infinite alternate-reverse; }
@keyframes dl-floaty { from { transform: translateY(-8px); } to { transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) { .dl-device, .dl-ring, .dl-float { animation: none; } }

/* requirements table */
.req-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--glass-border); border-radius: var(--r-lg); overflow: hidden; }
.req-list div { background: var(--emerald-850); padding: 1.1rem 1.4rem; }
.req-list dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: .3rem; }
.req-list dd { font-family: var(--font-display); font-weight: 600; color: var(--text); }

@media (max-width: 980px) {
  .dl-hero__inner { grid-template-columns: 1fr; }
  .dl-hero__copy { max-width: 640px; margin-inline: auto; text-align: center; }
  .dl-badges { justify-content: center; }
  .dl-hero .btn-row { justify-content: center; }
  .dl-stage { min-height: 460px; }
}
@media (max-width: 560px) { .dl-float { display: none; } .req-list { grid-template-columns: 1fr; } }