:root {
  --paper: #171314;
  --ink: #e8d9ce;
  --muted: #c5b2a6;
  --line: #59443f;
  --red: #ff8175;
  --panel: #241b1b;
  --panel-soft: #2d2020;
  --panel-gradient: radial-gradient(ellipse at 85% 10%, #612b26 0, transparent 57%),
    linear-gradient(135deg, #211d1d, #141213 70%);
  --panel-radius: clamp(18px, 3vw, 34px);
  --panel-padding: clamp(20px, 4vw, 54px);
}

html, body {
  background: var(--panel-gradient);
  color: var(--ink);
}

body {
  min-height: 100vh;
}

.top, .footer {
  padding-inline: clamp(12px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--panel-gradient);
}

.logo img {
  filter: url("#herobox-logo-contrast");
}

.top {
  margin-bottom: 20px;
}

nav a, .header-cta, .footer, .footer a, .contact>a:not(.button) {
  color: var(--ink);
}

.header-cta {
  border-color: var(--line);
  border-radius: 12px;
  background: #2a2020;
}

.header-cta:hover {
  border-color: var(--red);
}

.hero {
  padding: var(--panel-padding);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  color: var(--ink);
  background: var(--panel-gradient);
}

.hero h1 {
  font-size: clamp(39px, 6vw, 88px);
  text-wrap: balance;
}

.hero h1 em {
  color: var(--red);
}

h1, h2, h3 {
  font-style: normal;
  font-weight: 850;
  letter-spacing: -.055em;
}

.hero .lead, .hero .eyebrow, .hero-note,
.product-copy p, .directions p,
.benefit-grid p, .support p:not(.eyebrow),
.support .eyebrow, .contact small, .footer {
  color: var(--muted);
}

.eyebrow {
  color: var(--muted);
}

.hero-image, .product-photo, .location figure {
  border: 1px solid #76544d;
  border-radius: clamp(12px, 2vw, 22px);
}

figcaption {
  color: #e8d9ce;
}

.button {
  color: #261918;
  background: #e66a5e;
  border-radius: 12px;
}

.button:hover {
  color: #261918;
  background: #f07a6d;
}

main > section + section {
  margin-top: clamp(16px, 3vw, 36px);
}

#sortiment, #lokalita, .benefits > .section, .support {
  padding: var(--panel-padding);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  color: var(--ink);
  background: var(--panel-gradient);
}

.product-copy article, .benefits .benefit-grid article, .contact {
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid #59423d;
  border-radius: 14px;
  background: linear-gradient(145deg, #302323, #21191a);
}

.product-copy article {
  margin-bottom: 10px;
}

.product-copy h3, .benefit-grid h3 {
  font-size: clamp(24px, 2.6vw, 34px);
  color: #e8d9ce;
}

.product-copy article small, .benefit-grid span {
  color: #ef8779;
}

.benefits {
  background: transparent;
  color: var(--ink);
}

.benefit-grid article {
  border-top: 1px solid #59423d;
}

.benefits .benefit-grid p {
  color: var(--muted);
}

.directions {
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: var(--panel-gradient);
}

.directions .button {
  white-space: normal;
}

.arrow {
  flex-shrink: 0;
}

.contact {
  justify-self: stretch;
  min-width: 0;
  overflow-wrap: anywhere;
}

.footer {
  margin-bottom: 24px;
}

@media (max-width: 699px) {
  .top {
    gap: 12px;
  }

  nav {
    display: none;
  }
}