/* Homepage — product-first rebuild. Category-standard professional lighting
   site (quality bar: Astera, Aputure): dark ground, full-bleed photography,
   name-first product grid, real figures over adjectives. */

html, body { background: #0a0a0b; }
.hx { background: #0a0a0b; color: #fff; }
.hx a { color: inherit; text-decoration: none; }
.hx a:focus-visible { outline: 2px solid #f8b62b; outline-offset: 3px; border-radius: 2px; }
.hx .w { width: 100%; max-width: 1256px; margin: 0 auto; padding: 0 28px; }  /* content edge == CMS .w (1200px) */

/* --- hero ------------------------------------------------------------- */
.hx-hero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; overflow: hidden; }
.hx-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hx-hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(5,5,6,.72) 0%, rgba(5,5,6,.38) 42%, rgba(5,5,6,0) 62%),
              linear-gradient(to top, rgba(5,5,6,.90) 0%, rgba(5,5,6,.60) 30%, rgba(5,5,6,.22) 62%, rgba(5,5,6,.40) 100%); }
.hx-hero .w { position: relative; z-index: 1; padding-bottom: 72px; padding-top: 140px; }
.hx-hero h1 { font-size: clamp(2.9rem, 6.2vw, 5.4rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 14px; text-wrap: balance; }
.hx-hero .sub { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; color: rgba(255,255,255,.88); max-width: 46ch; margin: 0 0 30px; }
.hx-cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hx a.hx-btn { display: inline-block; background: #f8b62b; color: #131313; font-size: 16px; font-weight: 600; padding: 15px 34px; border-radius: 4px; transition: background .18s ease-out, transform .18s ease-out; }
.hx-btn:hover { background: #ffc95a; transform: translateY(-1px); }
.hx a.hx-link { font-size: 16px; color: rgba(255,255,255,.85); display: inline-block; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 2px; transition: color .18s ease-out, border-color .18s ease-out; }
.hx a.hx-link:hover, .hx a.hx-link:focus-visible { color: #f8b62b; border-color: #f8b62b; }

/* --- proof ribbon ------------------------------------------------------ */
.hx-proof { border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); background: #0d0d0f; }
.hx-proof .w { display: flex; flex-wrap: wrap; }
.hx-proof div { flex: 1 1 160px; padding: 26px 18px; text-align: center; }
.hx-proof div + div { border-left: 1px solid rgba(255,255,255,.1); }
.hx-proof strong { display: block; font-size: 21px; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.hx-proof span { display: block; margin-top: 6px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* --- sections ---------------------------------------------------------- */
.hx-section { padding: 92px 0 24px; }
.hx-section:last-of-type { padding-bottom: 96px; }
.hx-section h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 10px; }
.hx-section .lede { color: rgba(255,255,255,.62); font-size: 16.5px; line-height: 1.6; max-width: 62ch; margin: 0 0 44px; }

/* --- series grid -------------------------------------------------------- */
.hx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding-bottom: 66px; }
.hx-card { display: block; }
.hx-card .pic { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #131316; }
.hx-card .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.hx-card:hover .pic img { transform: scale(1.035); }
.hx-card h3 { font-size: 19px; font-weight: 600; margin: 16px 0 4px; transition: color .18s ease-out; }
.hx-card:hover h3, .hx-card:focus-visible h3 { color: #f8b62b; }
.hx-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.58); text-wrap: pretty; }

/* --- MAX model index ---------------------------------------------------- */
.hx-row.hx-head { border-bottom-color: rgba(255,255,255,.25); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.hx-row.hx-head:hover { background: none; }
.hx-row.hx-head span { font-size: inherit !important; font-weight: 500 !important; color: inherit !important; }
.hx-models { display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; padding-bottom: 66px; }
.hx-row { display: flex; align-items: baseline; gap: 14px; padding: 13px 6px; border-bottom: 1px solid rgba(255,255,255,.12); break-inside: avoid; transition: background .15s ease-out; }
.hx-row:hover { background: rgba(255,255,255,.045); }
.hx-row .model { font-size: 16.5px; font-weight: 600; flex: 0 0 8.2em; }
.hx-row .size { font-size: 15px; color: rgba(255,255,255,.6); flex: 1; }
.hx-row .watt { font-size: 15px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.hx-row .go { color: #f8b62b; opacity: 0; transition: opacity .15s ease-out; align-self: center; display: inline-flex; }
.hx-row:hover .go, .hx-row:focus-visible .go { opacity: 1; }
.hx-chev { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; vertical-align: -2px; }

/* --- authored moment: hero settle-in ------------------------------------ */
@keyframes hx-rise { from { transform: translateY(14px); } to { transform: none; } }
.hx-hero h1 { animation: hx-rise .7s cubic-bezier(.16,1,.3,1) both; }
.hx-hero .sub { animation: hx-rise .7s .12s cubic-bezier(.16,1,.3,1) both; }
.hx-hero .hx-cta { animation: hx-rise .7s .24s cubic-bezier(.16,1,.3,1) both; }

/* --- showcase ----------------------------------------------------------- */
.hx-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding-bottom: 66px; }
.hx-case { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; display: block; background: #131316; }
.hx-case img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.hx-case:hover img { transform: scale(1.03); }
.hx-case figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 42px 22px 18px; font-size: 15.5px; font-weight: 500;
  background: linear-gradient(to top, rgba(5,5,6,.85), transparent); }

/* --- support band -------------------------------------------------------- */
.hx-support { border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); margin-top: 8px; }
.hx-support .w { display: flex; flex-wrap: wrap; }
.hx-support a { flex: 1 1 180px; padding: 30px 18px; font-size: 16.5px; font-weight: 600; text-align: center; transition: color .18s ease-out; }
.hx-support a + a { border-left: 1px solid rgba(255,255,255,.1); }
.hx a.hx-support-link:hover, .hx-support a:hover { color: #f8b62b; }
.hx-support a small { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 400; letter-spacing: .05em; color: rgba(255,255,255,.5); text-transform: uppercase; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1023px) {
  .hx-grid { grid-template-columns: repeat(2, 1fr); }
  .hx-models { grid-template-columns: 1fr; }
  .hx-head-b { display: none; }
}
@media (max-width: 700px) {
  .hx-hero { min-height: 76vh; }
  .hx-hero .w { padding-bottom: 52px; }
  .hx-section { padding-top: 64px; }
  .hx-grid, .hx-cases { grid-template-columns: 1fr; gap: 20px; padding-bottom: 48px; }
  .hx-models { padding-bottom: 48px; }
  .hx-proof div { flex: 1 1 50%; }
  .hx-proof div + div { border-left: 0; }
  .hx-proof div:nth-child(even) { border-left: 1px solid rgba(255,255,255,.1); }
  .hx-proof div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
  .hx-support .w { display: block; }
  .hx-support a { display: block; text-align: left; padding: 18px 4px; }
  .hx-support a + a { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .hx-support a small { margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx * { transition: none !important; animation: none !important; }
}
.hx a.hx-btn:focus-visible { outline-color: #fff; }

/* skip link for keyboard users */
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 200; background: #f8b62b; color: #131313; font-weight: 600; padding: 11px 18px; border-radius: 4px; }
.skip-link:focus { left: 12px; }

/* --- seller band --------------------------------------------------------- */
.hx-seller { border-top: 1px solid rgba(255,255,255,.12); }
.hx-seller .w { display: flex; align-items: center; gap: 18px; padding-top: 34px; padding-bottom: 38px; }
.hx-seller img { height: 40px; width: auto; flex: 0 0 auto; }
.hx-seller p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.62); max-width: 62ch; }
.hx-seller strong { color: #fff; }
.hx-seller a { color: #f8b62b; }
.hx-seller a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .hx-seller .w { align-items: flex-start; }
  .hx-seller img { height: 32px; margin-top: 3px; }
}