/* ==========================================================================
   Component: Hero
   ========================================================================== */

.hero {
  background: linear-gradient(180deg, var(--color-bg-light) 0%, var(--color-white) 100%);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  gap: var(--space-9);
  align-items: center;
}

@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-7);
  }
}

.hero__heading {
  font-size: var(--fs-display);
  letter-spacing: -0.02em;
  color: var(--color-text);
  max-width: 15ch;
}

.hero__sub {
  margin-top: var(--space-5);
  font-size: var(--fs-body-lg);
  color: var(--color-text-secondary);
  max-width: 46ch;
}

.hero__trust {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Upload panel ------------------------------------------------------------ */

.hero__upload-wrap { position: relative; }

.hero__dropzone {
  position: relative;
  background: var(--color-white);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-out-soft);
}

.hero__dropzone:hover,
.hero__dropzone:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
}

.hero__dropzone.is-dragover {
  border-color: var(--color-primary);
  border-style: solid;
  background: var(--color-primary-tint-10);
  transform: scale(1.015);
}

/* Signature element: a small stack of pages that fans out on hover/drag,
   suggesting "this is where your document comes to life" without
   borrowing any third-party iconography. */
.hero__stack {
  position: relative;
  width: 64px;
  height: 6px;
  margin: 0 auto var(--space-5);
}

.hero__page {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 52px;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-slow) var(--ease-out-soft);
}

.hero__page--1 { transform: rotate(0deg) translate(0, 0); z-index: 3; }
.hero__page--2 { transform: rotate(0deg) translate(0, 0); z-index: 2; }
.hero__page--3 { transform: rotate(0deg) translate(0, 0); z-index: 1; }

.hero__dropzone:hover .hero__page--1,
.hero__dropzone.is-dragover .hero__page--1 { transform: rotate(-8deg) translate(-14px, 2px); }
.hero__dropzone:hover .hero__page--2,
.hero__dropzone.is-dragover .hero__page--2 { transform: rotate(0deg) translate(0, -4px); }
.hero__dropzone:hover .hero__page--3,
.hero__dropzone.is-dragover .hero__page--3 { transform: rotate(8deg) translate(14px, 2px); }

.hero__upload-icon { margin: 0 auto var(--space-4); }

.hero__dropzone-title {
  font-weight: 700;
  font-size: var(--fs-body-lg);
  color: var(--color-text);
}

.hero__dropzone-hint {
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.hero__browse-btn {
  margin-top: var(--space-5);
  pointer-events: none;
}

.hero__formats {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}

.hero__formats strong { color: var(--color-text); font-weight: 600; }

.hero__dropzone-error {
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: #dc2626;
}