:root {
  color-scheme: dark;
  --background: #070b15;
  --green: #59f477;
  --muted: #a5adbd;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--background);
  color: #f5f7fc;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 7px; border-radius: 3px; }
.page { max-width: 1920px; min-height: 100svh; margin: auto; display: flex; flex-direction: column; overflow: hidden; }
.header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 36px 6%; }
.brand { display: inline-flex; }
.brand img { width: 168px; height: auto; }
.hero { position: relative; flex: 1; min-height: 660px; display: flex; align-items: center; isolation: isolate; }
.visual { position: absolute; inset: -70px 0 -10px; z-index: -1; }
.visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #070b15 0%, rgba(7,11,21,.72) 22%, transparent 54%), linear-gradient(0deg, #070b15 0%, transparent 22%, transparent 80%, #070b15 100%); }
.product { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
.hero-copy { padding: 25px 0 85px; margin-left: 10%; animation: arrive 1s ease-out both; }
.eyebrow { display: flex; gap: 11px; align-items: center; margin: 0 0 30px; text-transform: uppercase; letter-spacing: .25em; font-size: 11px; font-weight: 600; color: var(--green); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px #59f47770; }
h1 { margin: 0; font-size: clamp(56px, 5.65vw, 100px); font-weight: 600; line-height: 1.035; letter-spacing: -.065em; }
h1 span { color: var(--green); }
.description { font-size: clamp(17px, 1.4vw, 22px); line-height: 1.55; font-weight: 400; color: #b9c1d0; margin: 25px 0 0; letter-spacing: -.025em; }
.tagline { font-size: 13px; color: #a5adbd; margin: 29px 0 0; letter-spacing: .015em; }
.tagline strong { color: #e7ebf1; font-weight: 600; }
.hero-caption { position: absolute; right: 6%; bottom: 28px; display: flex; gap: 14px; align-items: center; font-size: 10px; letter-spacing: .1em; color: #8d99ac; }
.caption-line { height: 1px; width: 30px; background: #59f47770; }
.footer { position: relative; margin: 0 6%; padding: 24px 0 28px; border-top: 1px solid #ffffff12; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.backing { display: flex; align-items: center; gap: 12px; }
.backing span { color: #8993a5; font-size: 10px; }
.backing strong { font-size: 16px; font-weight: 600; letter-spacing: .16em; }
.footer-note, .copyright { color: #8993a5; font-size: 10px; }
@keyframes arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1600px) { .hero { min-height: 760px; } }
@media (max-width: 760px) {
  .header { padding: 25px 7%; }
  .brand img { width: 134px; }
  .hero { min-height: auto; display: block; }
  .hero-copy { text-align: center; margin: 0; padding: 39px 20px 0; }
  .eyebrow { justify-content: center; margin-bottom: 23px; font-size: 10px; }
  h1 { font-size: clamp(48px, 10.5vw, 76px); }
  .description { margin-top: 20px; font-size: 17px; }
  .tagline { margin-top: 19px; font-size: 12px; }
  .visual { position: relative; inset: auto; height: clamp(330px, 80vw, 510px); margin-top: 10px; z-index: 0; }
  .hero { display: flex; flex-direction: column; }
  .hero-copy { order: -1; }
  .product { object-fit: cover; object-position: 88% center; }
  .visual { width: 100%; }
  .visual::after { background: linear-gradient(0deg, #070b15 0%, transparent 24%, transparent 75%, #070b15 100%), linear-gradient(90deg, #070b15 0%, transparent 25%, transparent 90%, #070b1530 100%); }
  .hero-caption { position: relative; right: auto; bottom: auto; justify-content: center; margin: -5px 20px 27px; font-size: 9px; }
  .footer { margin: 0 7%; padding: 21px 0 25px; }
  .backing { gap: 8px; }
  .backing strong { font-size: 13px; }
  .footer-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-copy { animation: none; } }