.hero-section { display: flex; flex-direction: column; gap: var(--fluid-hero-gap); padding-block: var(--fluid-stack) 0; position: relative; isolation: isolate; }
.hero-section h1 { margin: 0; font-size: var(--fluid-text-hero); line-height: 1.04; font-weight: 600; letter-spacing: -.065em; color: var(--color-primary-hover);
  text-shadow: 0 .012em 0 color-mix(in oklch, var(--color-bg) 90%, transparent), 0 .03em .06em color-mix(in oklch, var(--color-primary) 10%, transparent),
    0 .12em .28em color-mix(in oklch, var(--color-primary) 13%, transparent), 0 .3em .7em color-mix(in oklch, var(--color-primary) 6%, transparent); }
.hero-section::before {
  content: ""; position: absolute; inset-block: 0 auto; inset-inline: 0; block-size: min(980px, 100%); z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--hero-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid-line) 1px, transparent 1px);
  background-size: 32px 32px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 85% 10%, #1a1f1c, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 85% 10%, #1a1f1c, transparent 75%);
}
.hero-head > * + .hero-bottom { margin-block-start: 48px; }
.hero-bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fluid-hero-columns); align-items: start; }
.hero-summary { max-inline-size: 40ch; font-size: 18px; line-height: 1.6; }
.hero-copy > * + * { margin-block-start: 12px; }
.hero-copy > * + .action-group { margin-block-start: 32px; }
.hero-terms { max-inline-size: 52ch; font-size: 15px; line-height: 1.6; color: var(--color-text-secondary); }
.shot-center { align-self: center; }
@media (max-width: 1399px) {
  .browser img { mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent), linear-gradient(to bottom, #000 calc(100% - 32px), transparent); mask-composite: intersect; }
}
@media (max-width: 900px) {
  .hero-section h1 { font-size: var(--fluid-text-hero-tablet); }
}
@media (max-width: 640px) {
  .hero-section { padding-block: 44px 0; }
  .hero-section h1 { font-size: var(--fluid-text-hero-phone); letter-spacing: -.055em; }
  .hero-bottom { grid-template-columns: 1fr; gap: 32px; }
  .hero-head > * + .hero-bottom { margin-block-start: 32px; }
  .hero-summary { font-size: 17px; }
  .hero-section::before {
    -webkit-mask-image: radial-gradient(ellipse 70% 30% at 100% 0%, #1a1f1c, transparent 80%);
    mask-image: radial-gradient(ellipse 70% 30% at 100% 0%, #1a1f1c, transparent 80%);
  }
}