/* ==================================================
   COOKIE DEVS
   HERO
   ================================================== */

/* ==================================================
   HERO SECTION
   ================================================== */

.hero {
  position: relative;

  display: flex;

  min-height: 100svh;

  padding-top: 84px;

  background: var(--color-background);

  overflow: hidden;
}

/* ==================================================
   HERO CONTAINER
   ================================================== */

.hero-container {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(420px, 0.95fr);

  align-items: center;

  gap: clamp(64px, 7vw, 120px);

  width: min(calc(100% - (var(--page-padding) * 2)), var(--container-width));

  margin-inline: auto;

  padding-block: clamp(100px, 12vh, 160px) clamp(80px, 10vh, 140px);
}

/* ==================================================
   HERO CONTENT
   ================================================== */

.hero-content {
  max-width: 760px;
}

/* ==================================================
   EYEBROW
   ================================================== */

.hero-eyebrow {
  margin-bottom: 28px;

  color: var(--color-text-secondary);

  font-size: 13px;
  font-weight: 700;

  line-height: 1.2;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

/* ==================================================
   HEADING
   ================================================== */

.hero h1 {
  max-width: 760px;

  font-size: clamp(56px, 6.4vw, 104px);

  line-height: 0.94;

  letter-spacing: -0.065em;
}

.hero h1 span {
  display: block;

  color: var(--color-text-secondary);
}

/* ==================================================
   DESCRIPTION
   ================================================== */

.hero-description {
  max-width: 620px;

  margin-top: 32px;

  font-size: clamp(18px, 1.35vw, 21px);

  line-height: 1.6;
}

/* ==================================================
   ACTIONS
   ================================================== */

.hero-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 24px;

  margin-top: 40px;
}

/* ==================================================
   PRIMARY CTA
   ================================================== */

.hero-primary-cta {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 56px;

  padding-inline: 26px;

  background: var(--color-text);
  color: var(--color-background);

  border: 1px solid var(--color-text);

  border-radius: 999px;

  font-size: 15px;
  font-weight: 700;

  line-height: 1;

  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.hero-primary-cta:hover {
  background: transparent;
  color: var(--color-text);

  transform: translateY(-2px);
}

/* ==================================================
   SECONDARY CTA
   ================================================== */

.hero-secondary-cta {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: var(--color-text);

  font-size: 15px;
  font-weight: 700;

  line-height: 1;
}

.hero-secondary-cta span {
  transition: transform var(--transition-fast);
}

.hero-secondary-cta:hover span {
  transform: translateX(4px);
}

/* ==================================================
   OWNERSHIP STATEMENT
   ================================================== */

.hero-ownership {
  margin-top: 38px;

  color: var(--color-text-muted);

  font-size: 14px;
  font-weight: 600;
}

/* ==================================================
   HERO VISUAL
   ================================================== */

.hero-visual {
  position: relative;

  width: 100%;

  max-width: 560px;

  justify-self: end;

  border: 1px solid var(--color-border);

  border-radius: 24px;

  background: linear-gradient(145deg, #ffffff 0%, #f8f8f6 100%);

  box-shadow: 0 30px 80px rgba(17, 17, 17, 0.08);

  overflow: hidden;
}

/* ==================================================
   BROWSER TOP BAR
   ================================================== */

.hero-visual-top {
  display: flex;

  align-items: center;

  gap: 18px;

  min-height: 58px;

  padding-inline: 22px;

  border-bottom: 1px solid var(--color-border);
}

.hero-browser-controls {
  display: flex;

  gap: 7px;
}

.hero-browser-controls span {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--color-border-strong);
}

.hero-browser-domain {
  color: var(--color-text-muted);

  font-size: 12px;
  font-weight: 600;
}

/* ==================================================
   VISUAL CONTENT
   ================================================== */

.hero-visual-content {
  padding: clamp(34px, 5vw, 60px);
}

.hero-visual-label {
  margin-bottom: 34px;

  color: var(--color-text);

  font-size: clamp(30px, 3.2vw, 48px);

  font-weight: 700;

  line-height: 1;

  letter-spacing: -0.05em;
}

/* ==================================================
   ABSTRACT CODE LINES
   ================================================== */

.hero-code-line {
  height: 10px;

  margin-bottom: 12px;

  background: var(--color-border);

  border-radius: 999px;
}

.hero-code-line-large {
  width: 88%;
}

.hero-code-line-medium {
  width: 66%;
}

.hero-code-line-small {
  width: 42%;
}

/* ==================================================
   METRICS
   ================================================== */

.hero-metrics {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  margin-top: 52px;

  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.hero-metric {
  display: flex;

  flex-direction: column;

  gap: 10px;

  min-height: 118px;

  padding: 22px;

  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.hero-metric-number {
  color: var(--color-text-muted);

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.08em;
}

.hero-metric-label {
  margin-top: auto;

  color: var(--color-text);

  font-size: 17px;
  font-weight: 700;
}

/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 1024px) {
  .hero {
    padding-top: 76px;
  }

  .hero-container {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(360px, 0.85fr);

    gap: 56px;

    padding-block: 100px;
  }

  .hero h1 {
    font-size: clamp(54px, 7vw, 78px);
  }

  .hero-visual-content {
    padding: 38px;
  }
}

/* ==================================================
   STACK HERO
   ================================================== */

@media (max-width: 820px) {
  .hero {
    min-height: auto;

    padding-top: 72px;
  }

  .hero-container {
    grid-template-columns: 1fr;

    gap: 72px;

    padding-top: 96px;
    padding-bottom: 96px;
  }

  .hero-content {
    max-width: 720px;
  }

  .hero h1 {
    max-width: 680px;

    font-size: clamp(56px, 11vw, 84px);
  }

  .hero-description {
    max-width: 600px;
  }

  .hero-visual {
    max-width: 100%;

    justify-self: stretch;
  }
}

/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 640px) {
  .hero-container {
    gap: 56px;

    padding-top: 72px;
    padding-bottom: 72px;
  }

  .hero-eyebrow {
    margin-bottom: 22px;

    font-size: 11px;
  }

  .hero h1 {
    font-size: clamp(46px, 13vw, 64px);

    line-height: 0.96;

    letter-spacing: -0.055em;
  }

  .hero-description {
    margin-top: 26px;

    font-size: 17px;
  }

  .hero-actions {
    align-items: stretch;

    flex-direction: column;

    gap: 18px;

    margin-top: 34px;
  }

  .hero-primary-cta {
    width: 100%;

    min-height: 54px;
  }

  .hero-secondary-cta {
    justify-content: center;

    min-height: 44px;
  }

  .hero-ownership {
    margin-top: 28px;

    text-align: center;
  }

  .hero-visual {
    border-radius: 18px;
  }

  .hero-visual-top {
    min-height: 52px;

    padding-inline: 18px;
  }

  .hero-visual-content {
    padding: 28px 22px;
  }

  .hero-visual-label {
    margin-bottom: 28px;

    font-size: 34px;
  }

  .hero-metrics {
    margin-top: 40px;
  }

  .hero-metric {
    min-height: 102px;

    padding: 18px;
  }

  .hero-metric-label {
    font-size: 15px;
  }
}

/* ==================================================
   VERY SMALL MOBILE
   ================================================== */

@media (max-width: 400px) {
  .hero-metrics {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 44px;
  }
}

/* ==================================================
   REDUCED MOTION
   ================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero-primary-cta,
  .hero-secondary-cta span {
    transition: none;
  }

  .hero-primary-cta:hover,
  .hero-secondary-cta:hover span {
    transform: none;
  }
}