/* Figma 173:1133. Native design canvas: 1920 × 1080. */
:root {
  color-scheme: dark;
  --bg: #0c0c0d;
  --text: #fff;
  --muted: rgba(255, 255, 255, 0.6);
  --line: rgba(255, 255, 255, 0.1);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); font-family: var(--font); font-weight: 500; }
h1, h2, p { margin: 0; }
img { display: block; }
.hero { overflow: hidden; background: var(--bg); }
.stage {
  position: relative;
  width: 100%;
  min-height: 720px;
  min-height: max(720px, 100vh, 56.25vw);
}
.scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scene img { position: absolute; max-width: none; object-fit: cover; }
.scene-base { left: 14.322917%; top: 12.5%; width: 100%; height: 100.053148%; }
.scene-overlay {
  right: -4.479167%;
  top: calc(50% + 0.5px);
  width: 99.479167%;
  height: 99.537037%;
  transform: translateY(-50%);
}
.scene-fade { left: 14.322917%; top: -3.981481%; width: 65.9375%; height: 103.981481%; }
.brand { position: absolute; left: 4.981198%; top: 4.814815%; width: 9.902188%; height: 10.185185%; }
.brand img { width: 100%; height: 100%; object-fit: contain; }
.copy { position: absolute; left: 6.25%; top: 30.925926%; width: 38.541667%; }
h1 {
  font-size: 90px;
  font-size: clamp(56px, 4.6875vw, 110px);
  font-weight: 700;
  line-height: 1.111111;
}
.details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 96.486486%;
  margin-top: 26px;
  color: var(--muted);
  font-size: 16px;
  font-size: clamp(14px, 0.833333vw, 20px);
  line-height: 1.5;
}
.rule { width: 80px; height: 1px; flex-shrink: 0; background: var(--line); }
.next {
  display: flex;
  align-items: center;
  gap: 24px;
  position: absolute;
  left: 6.25%;
  right: 6.25%;
  bottom: 8.333333%;
  font-size: 16px;
  font-size: clamp(14px, 0.833333vw, 20px);
  line-height: 1.5;
}
.label { flex-shrink: 0; font-size: inherit; font-weight: 500; letter-spacing: 0.32em; white-space: nowrap; color: #62eaf9; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .label {
    background: linear-gradient(88.106614deg, #62eaf9 0.25463%, #c2f71c 233.51%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.next-divider { width: 1px; height: 40px; flex-shrink: 0; background: var(--line); }
.ces { color: var(--muted); }
.ces-intro, .ces-description { display: block; }
.ces strong { font-size: 1.25em; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, 0.9); }
/* Keep copy readable on smaller desktops rather than scaling the entire canvas. */
@media (min-width: 1101px) and (max-width: 1599px) {
  .details { gap: 24px; margin-top: 24px; }
}
/* Tablets and phones use document flow, including short landscape screens and zoom. */
@media (max-width: 1100px), (orientation: portrait) {
  .stage {
    --page-gutter: max(24px, 6.25vw);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding: 28px var(--page-gutter) 48px;
  }
  /* A landscape photograph cannot fill a portrait screen without cropping.
     Put the complete image in flow and let its intrinsic ratio set the height. */
  .scene {
    order: 2;
    position: relative;
    inset: auto;
    flex-shrink: 0;
    width: calc(100% + var(--page-gutter) * 2);
    margin: 32px calc(var(--page-gutter) * -1) 0;
  }
  .scene-base, .scene-fade { display: none; }
  .scene .scene-overlay {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    height: auto;
    transform: none;
    object-fit: contain;
  }
  .brand, .copy, .next { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
  .brand { order: 0; width: 152px; height: 88px; margin-left: -19px; }
  .copy { order: 1; width: 100%; max-width: 640px; margin-top: clamp(64px, 12vh, 160px); }
  h1 { font-size: 64px; font-size: clamp(36px, 6.8vw, 72px); }
  .details { width: 100%; max-width: 600px; gap: 28px; margin-top: 26px; font-size: 16px; line-height: 1.6; }
  .next { order: 3; flex-wrap: wrap; gap: 20px; padding-top: 32px; margin-top: auto; font-size: 15px; }
  .label { font-size: 14px; }
  .ces { flex: 1; min-width: 240px; }
}
@media (max-width: 600px) {
  .stage { padding-top: 20px; padding-bottom: max(36px, env(safe-area-inset-bottom)); }
  .brand { width: 130px; height: 75px; margin-left: -16px; }
  .copy { margin-top: 72px; }
  h1 { font-size: 40px; font-size: clamp(32px, 9.5vw, 56px); line-height: 1.16; }
  .details { gap: 24px; margin-top: 24px; font-size: 15px; }
  .next { display: block; padding-top: 32px; }
  .next-divider { width: 48px; height: 1px; margin: 20px 0; }
  .ces { min-width: 0; font-size: 14px; line-height: 1.65; }
  .ces-intro { margin-bottom: 4px; }
}
@media (forced-colors: active) {
  .label { color: CanvasText; background: none; }
  .rule, .next-divider { background: CanvasText; }
}