:root {
  --accent-color: #a6f300;
  --accent-soft: rgba(166, 243, 0, 0.1);
  --bg: #000;
  --text: #fff;
  --border-color: rgba(255, 255, 255, 0.20);
  --border: 1px solid var(--border-color);

  --font-display: 'Khartiia', sans-serif;
  --font-sans: 'Inter Tight', system-ui, sans-serif;

  --u: clamp(6px, 1dvh, 10px);

  --space-2xs: calc(0.6 * var(--u));
  --space-xs: calc(1.2 * var(--u));
  --space-sm: calc(2 * var(--u));
  --space-md: calc(3 * var(--u));
  --space-lg: calc(4 * var(--u));
  --space-xl: calc(8 * var(--u));

  --fs-xs: calc(1.6 * var(--u));
  --fs-sm: calc(2 * var(--u));
  --fs-md: calc(2.4 * var(--u));
  --fs-lg: calc(3.2 * var(--u));
  --fs-heading: calc(3.5 * var(--u));

  --page-padding-x: 3rem;
  --section-gap: 40px;

  --transition: 0.2s ease;
  --focus-ring: 2px solid var(--accent-color);
  --focus-ring-offset: 2px;

  interpolate-size: allow-keywords;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@font-face {
  font-family: 'Khartiia';
  src: url('assets/fonts/khartiia_023-cond-regular.woff') format('woff');
  font-weight: 400;
  font-display: block;
}

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.page {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  user-select: none;
}

.header,
.subscribe,
.more,
.faq,
.footer {
  height: 100dvh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.header {
  margin: 0 auto;
  padding: 0 var(--page-padding-x);
  display: flex;
  flex-direction: column;
}

.logo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3rem 0 1rem 0;
}

.hero-bg {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(0deg, var(--accent-soft) 0%, var(--accent-soft) 100%),
    linear-gradient(180deg, #000 22.14%, rgba(0, 0, 0, 0) 61.57%),
    url('assets/images/leleka.webp') center 80% / 110% auto no-repeat;
  box-shadow: 0 0 180.8px 0 rgba(166, 243, 0, 0.23) inset;
}

.up-line {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: 2px;
  background: var(--text);
}

.up-line::before,
.up-line::after {
  content: '';
  position: absolute;
  top: 100%;
  width: 11px;
  height: 6px;
  background: var(--text);
}

.up-line::before {
  left: 0;
}

.up-line::after {
  right: 0;
}

.bottom-line {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: 2px;
  background: var(--text);
}

.bottom-line::before,
.bottom-line::after {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 11px;
  height: 6px;
  background: var(--text);
}

.bottom-line::before {
  left: 0;
}

.bottom-line::after {
  right: 0;
}

.hero-title {
  margin: 12dvh 0 auto;
  padding: 0 2rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(18vw, 34dvh);
  line-height: 70%;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scaleY(1.2);
  text-align: center;
}

@supports (text-box-trim: trim-both) {
  .hero-title {
    text-box: trim-both cap alphabetic;
  }
}

.hero-break {
  display: none;
}

.social-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-family: var(--font-sans);
  font-size: 2rem;
  padding-right: 2rem;
  padding-left: 2rem;
}

.social-links a {
  color: var(--text);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition);
}

.social-links a:hover {
  color: var(--accent-color);
}

.social-links a::before,
.social-links a::after {
  display: inline-block;
  transition: transform 0.25s ease-out;
}

.social-links a::before {
  content: "[";
  margin-right: 0.5ch;
}

.social-links a::after {
  content: "]";
  margin-left: 0.5ch;
}

.social-links a:active::before,
.social-links a:active::after {
  transition: transform 0.08s ease-in;
}

.social-links a:active::before {
  transform: translateX(0.5ch);
}

.social-links a:active::after {
  transform: translateX(-0.5ch);
}

.subscribe {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--section-gap);
  padding: var(--space-lg) var(--page-padding-x);
  background: var(--bg);
  font-family: var(--font-sans);
}

.subscribe-info {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.subscribe-info h2 {
  margin: 0 0 auto 0;
  font-size: var(--fs-lg);
  line-height: 150%;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text);
  letter-spacing: 0.01em;
}

.accent {
  color: var(--accent-color);
}

.actions {
  display: flex;
  gap: var(--space-2xs);
}

.actions a {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-sm);
  border: var(--border);
  color: var(--text);
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.actions a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.subscribe-form fieldset {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

.subscribe-form input,
.subscribe-form textarea,
.subscribe-form button {
  font: inherit;
}

.subscribe-form {
  flex: 1.2 1 0;
  display: flex;
  flex-direction: column;
  gap: calc(2.8 * var(--u));
}

.subscribe-form legend {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-xs) 0;
  padding: 0;
  font-size: var(--fs-lg);
  line-height: 150%;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text);
}

.options {
  display: flex;
  gap: var(--space-xs);
  font-size: var(--fs-sm);
}

.options input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.options label {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border);
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  padding: var(--space-sm);
}

.options label:hover {
  border-color: var(--accent-color);
}

.options input[type="radio"]:checked+label {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--bg);
}

.options input[type="radio"]:focus-visible+label {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.subscribe-form fieldset:has(.form-group),
.subscribe-form fieldset:has(.custom-amount) {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.form-group {
  display: flex;
  gap: var(--space-xs);
}

.form-group input {
  flex: 1 1 0;
  font-size: var(--fs-sm);
}

.subscribe-form input[type="text"],
.subscribe-form input[type="email"],
.subscribe-form input[type="number"],
.subscribe-form textarea {
  width: 100%;
  padding: var(--space-sm);
  border: var(--border);
  background: transparent;
  color: var(--text);
}

.subscribe-form textarea {
  padding: calc(1.6 * var(--u));
  resize: vertical;
}

.subscribe-form ::placeholder {
  opacity: 1;
}

.subscribe-form input:focus-visible,
.subscribe-form textarea:focus-visible {
  outline: none;
  border-color: var(--accent-color);
}

.custom-amount input {
  font-size: var(--fs-sm);
  text-align: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.custom-amount input::-webkit-outer-spin-button,
.custom-amount input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.custom-amount input:hover {
  border-color: var(--text);
}

.custom-amount input:not(:placeholder-shown) {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--bg);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.consent input[type="checkbox"] {
  appearance: none;
  flex: 0 0 auto;
  width: calc(2.8 * var(--u));
  height: calc(2.8 * var(--u));
  margin: 0;
  border: var(--border);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.consent input[type="checkbox"]:checked {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.consent input[type="checkbox"]:hover {
  border-color: var(--accent-color);
}

.consent input[type="checkbox"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.consent label {
  cursor: pointer;
  color: var(--text);
}

.subscribe-form button[type="submit"] {
  margin-top: auto;
  width: 100%;
  border: 1px solid transparent;
  background: var(--text);
  color: var(--bg);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  font-size: var(--fs-md);
  padding: var(--space-md);
}

.subscribe-form button[type="submit"]:hover {
  background: #2c2c2c;
  color: var(--accent-color);
}

.subscribe-form button[type="submit"]:active {
  background: var(--accent-color);
  color: var(--bg);
}

.subscribe-form button[type="submit"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.subscribe-form button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: progress;
}

.form-error {
  margin: 0;
  color: var(--accent-color);
  font-size: var(--fs-xs);
  text-align: center;
}

.noscript {
  margin: 0;
  padding: var(--space-sm);
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  font-size: calc(1.8 * var(--u));
  line-height: 1.35;
  text-align: center;
}

.more {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--section-gap);
  padding: var(--space-lg) var(--page-padding-x);
  background: var(--bg);
  font-family: var(--font-sans);
}

.why-media {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--accent-soft);
  container-type: inline-size;
}

.why-media-frame {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.why-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.why-media h2,
.faq-title h2 {
  margin: var(--space-lg) 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(14cqw, 12dvh);
  line-height: 70%;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--accent-color);
  transform: scaleY(1.1);
}

@supports (text-box-trim: trim-both) {
  .why-media h2,
  .faq-title h2 {
    text-box: trim-both cap alphabetic;
  }
}

.why-content {
  flex: 1.2 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.why-content h3,
.why-content h2,
.why-content p {
  margin: 0;
}

.why-content h3,
.why-content h2 {
  font-size: var(--fs-heading);
  line-height: 120%;
  font-weight: 500;
  text-transform: uppercase;
}

.why-content > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.why-content p {
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.why-content .bigger,
.why-list li {
  font-size: var(--fs-heading);
  line-height: 120%;
  font-weight: 500;
}

.why-content .bold {
  font-weight: 600;
}

.why-list {
  counter-reset: why;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
}

.why-list li {
  counter-increment: why;
  display: flex;
  gap: calc(0.8 * var(--u));
}

.why-list li::before {
  content: "[" counter(why, decimal-leading-zero) "]";
  flex: 0 0 auto;
  color: var(--accent-color);
}

.faq {
  --faq-inset: var(--space-lg);

  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--section-gap);
  padding: var(--space-lg) var(--page-padding-x);
  background: var(--bg);
  font-family: var(--font-sans);
}

.faq-list {
  flex: 1.2 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-height: 0;
  overflow-y: auto;
}

.faq-title {
  flex: 1 1 0;
}

.faq-title h2 {
  margin: 0;
  font-size: min(8vw, 10dvh);
  line-height: 75%;
  text-align: left;
  transform-origin: top left;
}

.faq-item {
  border: var(--border);
}

.faq-question {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--faq-inset);
  font-size: var(--fs-heading);
  line-height: 120%;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: color var(--transition);
}

.faq-question::after {
  content: '';
  position: absolute;
  right: var(--faq-inset);
  bottom: 0;
  left: var(--faq-inset);
  height: 1px;
  background: transparent;
  transition: background var(--transition);
}

.faq-item[open] .faq-question::after {
  background: var(--border-color);
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  color: var(--accent-color);
}

.faq-question:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.faq-arrow {
  flex: 0 0 auto;
  transform: rotate(180deg);
  transition: transform 0.25s ease;
}

.faq-item[open] .faq-arrow {
  transform: rotate(0deg);
}

.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
}

.faq-item[open]::details-content {
  block-size: auto;
}

.faq-answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--faq-inset);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.faq-answer p {
  margin: 0;
}

.faq-answer a {
  color: var(--accent-color);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: opacity var(--transition);
}

.faq-answer a:hover {
  opacity: 0.7;
}

.faq-answer a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.faq-answer ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding-left: calc(2.5 * var(--u));
}

.footer {
  display: flex;
  flex-direction: column;
  padding: var(--space-xl) var(--page-padding-x);
  background: var(--bg);
  font-family: var(--font-sans);
}

.footer-brand {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
}

.footer-brand img {
  display: block;
  flex: 0 1 auto;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.footer-brand p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(11vw, 18.2dvh);
  line-height: 70%;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scaleY(1.2);
  text-align: center;
}

@supports (text-box-trim: trim-both) {
  .footer-brand p {
    text-box: trim-both cap alphabetic;
  }
}

@media (max-width: 768px) {
  :root {
    --u: clamp(8px, 2.2vw, 10px);

    --page-padding-x: 1.25rem;
    --section-gap: var(--space-md);
  }

  html {
    scroll-snap-type: none;
  }

  .header,
  .subscribe,
  .more,
  .faq,
  .footer {
    height: auto;
    overflow: visible;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  .subscribe,
  .more,
  .faq {
    padding-block: var(--space-lg);
  }

  .header {
    padding-bottom: var(--space-xs);
  }

  .logo-bar {
    gap: var(--space-sm);
    padding: 1.5rem 0 1rem 0;
  }

  .logo-bar img {
    width: auto;
    height: calc(2 * var(--u));
  }

  .logo-bar img:first-child,
  .logo-bar img:last-child {
    height: calc(1.4 * var(--u));
  }

  .up-line,
  .bottom-line {
    height: 1px;
  }

  .up-line::before,
  .up-line::after,
  .bottom-line::before,
  .bottom-line::after {
    width: 6px;
    height: 3px;
  }

  .hero-bg {
    position: relative;
    isolation: isolate;
    min-height: 55svh;
    background: none;
  }

  .hero-bg::before,
  .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .hero-bg::before {
    background: url('assets/images/leleka.webp') center 80% / 220% auto no-repeat;
    transform: scaleX(-1);
  }

  .hero-bg::after {
    background:
      linear-gradient(0deg, var(--accent-soft) 0%, var(--accent-soft) 100%),
      linear-gradient(180deg, #000 22.14%, rgba(0, 0, 0, 0) 61.57%);
  }

  .hero-break {
    display: inline;
  }

  .hero-title {
    margin: var(--space-lg) 0 auto;
    padding: 0 var(--space-sm);
    font-size: min(23vw, 7rem);
    line-height: 85%;
    white-space: normal;
    text-align: left;
  }

  .hero-bg .social-links {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2xs);
    padding: var(--space-sm);
    font-size: var(--fs-md);
  }

  .footer .social-links {
    flex-direction: column;
    align-self: stretch;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0;
    font-size: var(--fs-s);
    white-space: nowrap;
  }

  .footer .social-links a {
    line-height: 1;
  }

  @supports (text-box-trim: trim-both) {
    .footer .social-links a {
      text-box: trim-both cap alphabetic;
    }
  }

  .subscribe {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .subscribe-info,
  .subscribe-form,
  .why-media,
  .why-content,
  .why-media-frame,
  .faq-list,
  .faq-title,
  .footer-brand {
    flex: none;
  }

  .footer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--space-md);
    row-gap: var(--space-sm);
    padding-top: var(--space-lg);
  }

  .footer-brand {
    display: contents;
  }

  .footer .up-line,
  .footer .bottom-line,
  .footer-brand img {
    grid-column: 1 / -1;
  }

  .subscribe-info {
    display: contents;
  }

  .subscribe-info h2 {
    font-size: var(--fs-md);
    line-height: 120%;
  }

  .actions {
    flex-direction: column;
    order: 1;
  }

  .actions a {
    padding-block: var(--space-xs);
    font-size: var(--fs-sm);
  }

  .subscribe-form legend {
    font-size: var(--fs-md);
  }

  .form-group {
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .subscribe-form fieldset:has(.form-group),
  .subscribe-form fieldset:has(.custom-amount) {
    gap: var(--space-2xs);
  }

  .options {
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  .options label,
  .subscribe-form input[type="text"],
  .subscribe-form input[type="email"],
  .subscribe-form input[type="number"],
  .subscribe-form button[type="submit"] {
    padding-block: var(--space-xs);
  }

  .subscribe-form button[type="submit"] {
    font-size: var(--fs-sm);
  }

  .consent input[type="checkbox"] {
    width: var(--space-sm);
    height: var(--space-sm);
  }

  .more {
    flex-direction: column;
  }

  .why-media-frame {
    aspect-ratio: 1 / 1;
  }

  .why-media img {
    transform: scale(1.2);
    transform-origin: left top;
  }

  .why-media h2 {
    position: relative;
    z-index: 1;
    margin-bottom: calc(-8 * var(--space-2xs));
    font-size: min(18vw, 6rem);
    line-height: 85%;
    text-align: left;
    transform: scaleY(1.2);
    white-space: normal;
  }

  .why-content h3 {
    font-size: min(var(--fs-md), 4.2vw);
  }

  .why-content p {
    font-size: var(--fs-xs);
  }

  .why-content h2,
  .why-list li {
    font-size: var(--fs-sm);
  }

  .why-content .bigger {
    font-size: var(--fs-xs);
    font-weight: 400;
  }

  .faq {
    --faq-inset: var(--space-sm);

    flex-direction: column;
    gap: var(--space-md);
  }

  .faq-title {
    order: -1;
  }

  .faq-title h2 {
    font-size: min(15vw, 6rem);
    text-align: center;
  }

  .faq-list {
    overflow-y: visible;
  }

  .faq-question {
    font-size: var(--fs-md);
  }

  .faq-answer {
    font-size: var(--fs-xs);
  }

  .footer-brand p {
    font-size: min(14vw, 7rem);
    line-height: 85%;
    text-align: left;
    white-space: normal;
    transform: none;
  }
}