/* Product-photo variants: retain the site's existing palette and typography. */
.hero { padding: 72px 0 80px; }
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.hero-copy, .hero-visual { min-width: 0; }
.hero-layout h1 { font-size: clamp(46px, 4.8vw, 64px); }
.hero-layout .hero-tag { font-size: 11px; letter-spacing: .02em; }
.hero-layout .hero-sub { font-size: 18px; }
.hero-layout .hero-promise { align-items: flex-start; font-size: 13px; margin-bottom: 28px; }
.hero-layout .hero-promise svg { margin-top: 3px; }
.hero-layout .btn { padding: 14px 22px; font-size: 15px; }
.product-photo {
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
}
.product-photo img { display: block; width: 100%; height: auto; }
.hero-visual .terminal { margin-top: 24px; font-size: 12px; }
.hero-visual .terminal-body { padding: 18px 20px; overflow-wrap: anywhere; }
.hero-visual .terminal-title { font-size: 11px; }
@media (max-width: 980px) {
  .hero-layout { grid-template-columns: 1fr; gap: 36px; }
  .hero-copy { max-width: 720px; }
  .hero-visual { width: 100%; max-width: 720px; }
  .hero-layout h1 { font-size: clamp(44px, 7vw, 76px); }
  .hero-layout .hero-sub { font-size: 20px; }
}
@media (max-width: 520px) {
  .hero { padding: 42px 0 56px; }
  .hero-layout .hero-tag { font-size: 10px; padding: 6px 10px; flex-wrap: wrap; }
  .hero-layout .hero-sub { font-size: 17px; }
  .hero-layout .hero-promise { font-size: 12px; }
  .hero-layout .hero-ctas { gap: 10px; }
  .hero-layout .btn { padding: 13px 16px; font-size: 14px; }
  .hero-visual .terminal-body { padding: 16px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-layout *, .hero-layout *::before { animation: none !important; }
}