.home-wrap { min-height: 100vh; display: flex; flex-direction: column; }

.home-head { padding: 26px clamp(20px, 5vw, 64px) 0; }
.home-logo { font-size: 19px; }

.hero {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(320px, 560px) 1fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  padding: clamp(24px, 6vh, 64px) clamp(20px, 5vw, 64px);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.hero-copy h1 {
  font-size: clamp(38px, 5.4vw, 58px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}
.hero-sub { font-size: clamp(17px, 2vw, 20px); color: var(--sub); margin: 0 0 14px; font-weight: 500; }
.hero-desc { font-size: 15px; color: var(--muted); line-height: 1.65; max-width: 460px; margin: 0 0 26px; }
.hero-trust-mini { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--sub); font-weight: 600; }
.hero-trust-mini .ico { color: var(--blue); flex: none; }

.hero-art { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; }
.hero-art-glow {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(50% 50% at 60% 35%, rgba(79, 110, 247, 0.32), transparent 70%),
    radial-gradient(45% 45% at 85% 65%, rgba(155, 92, 246, 0.28), transparent 70%);
  filter: blur(10px);
  z-index: 0;
}
.hero-art img { position: absolute; max-width: none; }

.art-preview {
  position: relative;
  width: min(74%, 560px);
  z-index: 1;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
  animation: floatY 7s ease-in-out infinite;
}
.art-strip {
  width: min(62%, 480px);
  left: -6%;
  bottom: -6%;
  z-index: 2;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  animation: floatY 8s ease-in-out infinite 0.6s;
}
.art-panel {
  width: min(46%, 360px);
  right: -8%;
  top: 6%;
  z-index: 3;
  filter: drop-shadow(0 24px 46px rgba(0, 0, 0, 0.5));
  animation: floatY 6.5s ease-in-out infinite 1.1s;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .art-preview, .art-strip, .art-panel { animation: none; }
}

.trust-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 20px 34px;
  color: var(--sub);
  font-size: 14px;
}
.trust-line .ico { color: var(--blue); flex: none; }

/* Large-desktop scale-up (M's own 125%-zoom reference, ~2048px viewport). Every clamp() above
   caps out well before this width (e.g. h1's 5.4vw hits its 58px ceiling past ~1074px), so a
   wide monitor at real 100% zoom was just getting more empty margin, not a bigger layout -
   "underscaled... much wasted space." Scoped to min-width:1680px specifically so normal
   1440-1600px laptop/desktop screens (where the base sizing above is already the intended look)
   are untouched - this only kicks in for genuinely large monitors. Values are the base upper
   bounds scaled up ~20-25%, per spec, not arbitrary. */
@media (min-width: 1680px) {
  .hero {
    max-width: 1800px;
    grid-template-columns: minmax(320px, 640px) 1fr;
    gap: 56px;
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .hero-copy h1 { font-size: 72px; }
  .hero-sub { font-size: 24px; }
  .hero-desc { font-size: 18px; max-width: 560px; }
  .hero-trust-mini { font-size: 16.5px; gap: 11px; }
  .hero-trust-mini .ico { width: 19px; height: 19px; }

  /* Sized to actually fill the wider 1fr column at this breakpoint, not just scaled off the old
     560px-column caps - the gap between text and art was still reading as dead space otherwise,
     since the art cluster's own footprint (~74%/62%/46% of .hero-art) hadn't grown to match how
     much wider its column just became. */
  .hero-art { min-height: 560px; }
  .art-preview { width: min(78%, 760px); }
  .art-strip { width: min(64%, 640px); }
  .art-panel { width: min(48%, 480px); }

  /* "Slightly" - a smaller bump than the hero content above, just enough that the header/footer
     don't read as tiny next to the now-larger hero. home.css is only ever loaded on this page, so
     these selectors (matching pageShell's shared header/footer markup) can't affect any other
     page. */
  .home-head { padding-top: 32px; }
  .home-logo { font-size: 22px; }
  .home-logo svg { width: 34px; height: 34px; }
  .site-footer { min-height: 76px; padding-top: 16px; padding-bottom: 16px; }
  .site-footer .wordmark { font-size: 18px; }
  .site-footer .wordmark svg { width: 24px; height: 24px; }
  .site-footer .footer-version { font-size: 12.5px; }
  .site-footer .footer-part { font-size: 14.5px; }
}

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-trust-mini { justify-content: center; }
  .hero-art { min-height: 360px; margin-top: 12px; }
  .art-preview { width: min(80%, 460px); }
}

@media (max-width: 640px) {
  .hero-copy h1 { font-size: 34px; }
  .hero-art { min-height: 280px; transform: scale(0.92); }
  .art-strip { display: none; }
  .art-panel { width: 56%; right: 2%; top: 2%; }
  .art-preview { width: 82%; }
}