/* sections.css — page sections. Colors, fonts, spacing and shadows come only from variables.css. */

/* ==========================================================================
   Header (sticky)
   Mobile-first: below 1024px the menu and the language switcher live in a
   dropdown panel opened by the burger; from 1024px everything sits in one row.
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-overlay);
  border-bottom: var(--border-width) solid var(--color-divider);
  backdrop-filter: blur(10px);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--header-h);
}

/* Brand */
.header__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin-right: auto;
}

.header__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-accent);
  text-shadow: 0 0 14px var(--glow);
  overflow-wrap: anywhere;
}

.header__role {
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

/* Right-hand group: social icons, "Start" button, burger */
.header__actions {
  display: flex;
  align-items: center;
  flex: none;
  gap: 8px;
}

.header__socials {
  display: flex;
  gap: 8px;
}

.header__cta {
  display: none;
  min-height: 0;
  padding: 13px 26px;
  font-size: 15px;
}

/* Burger */
.burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
  width: 36px;
  height: 36px;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-round);
  transition:
    color .2s var(--ease-out),
    border-color .2s var(--ease-out);
}

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

.burger__bar {
  width: 18px;
  height: 2px;
  background: currentColor;
  transition:
    transform .25s var(--ease-out),
    opacity .2s var(--ease-out);
}

.burger[aria-expanded="true"] {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.burger[aria-expanded="true"] .burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__bar:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] .burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Dropdown panel (mobile): closed = invisible and out of the tab order */
.header__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding-inline: var(--gutter); /* below 1024px the viewport is narrower than the container */
  background: var(--color-bg-alt);
  border-bottom: var(--border-width) solid var(--color-divider);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity .2s var(--ease-out),
    transform .2s var(--ease-out),
    visibility 0s linear .2s;
}

.header--open .header__panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

/* Menu */
.nav__list {
  display: flex;
  flex-direction: column;
}

.nav__link {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-divider);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--color-accent);
}

/* Language switcher: RU · EN · UK · FI */
.lang {
  padding-block: 16px;
}

.lang__list {
  margin-left: -12px; /* aligns "RU" with the menu text despite the link padding */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.lang__item + .lang__item::before {
  content: "·";
  color: var(--color-text-dim);
}

.lang__item {
  display: flex;
  align-items: center;
}

.lang__link {
  display: block;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.lang__link:hover,
.lang__link:focus-visible,
.lang__link[aria-current="true"] {
  color: var(--color-accent);
}

.lang__link[aria-current="true"] {
  text-shadow: 0 0 12px var(--glow);
}

@media (min-width: 640px) {
  .header__name {
    font-size: 18px;
  }

  .header__actions,
  .header__socials {
    gap: 12px;
  }

  .header__cta {
    display: inline-flex;
  }

  .burger {
    width: 40px;
    height: 40px;
  }
}

@media (min-width: 1024px) {
  .header__inner {
    gap: clamp(12px, 1.6vw, 28px);
  }

  .header__brand {
    margin-right: 0;
  }

  .header__name {
    font-size: 18px;
  }

  .burger {
    display: none;
  }

  /* The panel becomes an ordinary flex row between the brand and the actions */
  .header__panel {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: clamp(12px, 1.6vw, 28px);
    min-width: 0;
    max-height: none;
    overflow: visible;
    padding-inline: 0;
    background: none;
    border-bottom: 0;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nav__list {
    flex-direction: row;
    gap: clamp(12px, 1.4vw, 20px);
  }

  .nav__link {
    padding: 8px 0;
    border-bottom: 0;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }

  .lang {
    padding-block: 0;
  }

  .lang__list {
    flex-wrap: nowrap;
    margin-left: 0;
  }

  .lang__link {
    padding: 8px 6px;
  }
}

/* From 1280px the header gets the look of the mockup (big name, uppercase menu).
   Sizes are one step smaller than the mockup (13px, 0.5px) because the language switcher shares the row. */
@media (min-width: 1280px) {
  .header__name {
    font-size: 22px;
  }

  .nav__link {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
  }
}

/* ==========================================================================
   Hero #top
   Mobile-first: one column, photo under the text; from 1024px two columns.
   ========================================================================== */

.hero {
  padding-block: 56px 72px;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  min-width: 0;
}

.hero__eyebrow {
  color: var(--color-text-soft);
}

.hero__title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  line-height: .95;
  text-transform: uppercase;
  overflow-wrap: break-word; /* long words at 320px in uk / fi */
  max-width: 100%;
}

.hero__line--lead {
  font-size: clamp(20px, 6vw, 44px);
}

.hero__line--main {
  font-size: clamp(48px, 16vw, 96px);
  text-shadow: 0 0 28px var(--glow), 0 0 60px var(--glow-soft);
}

.hero__line--sub {
  font-size: clamp(16px, 4.6vw, 28px);
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--color-white);
}

.hero__text {
  max-width: 520px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

.hero__media {
  min-width: 0;
}

/* Photo: one rounded frame with a 1px green border and a soft glow */
.hero__photo {
  width: 100%;
  max-width: 470px;
  margin-inline: auto;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-photo);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 40px var(--glow-soft), 0 0 2px var(--color-accent);
}

.hero__img {
  width: 100%;
  height: auto;
  aspect-ratio: 961 / 1280;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 56px;
  }

  .hero__line--lead {
    font-size: clamp(26px, 3.6vw, 44px);
  }

  .hero__line--main {
    font-size: clamp(64px, 10vw, 128px);
  }

  .hero__line--sub {
    font-size: clamp(18px, 2.2vw, 28px);
    letter-spacing: 3px;
  }
}

/* ==========================================================================
   Results #results
   Heading row with the arrows, then a Swiper (fade effect: Swiper only cross-fades the slides,
   the movement is done here in CSS on .swiper-slide-active). Each slide is a grid: photos 2 : card 1
   on a wide slide, the card under the photos on a narrow one (the card takes the spare height, so
   its bottom edge is the bottom of the slide and the dots can sit over it).
   ========================================================================== */

.results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}

.results__title {
  min-width: 0; /* lets the heading shrink to the screen instead of widening the row */
  margin-bottom: 0;
}

/* "Трансформации" / "Трансформації" is a 13-letter word: at 34px it does not fit 280px (320px screen) */
.results__title h2 {
  font-size: clamp(28px, 8.5vw, 34px);
}

@media (min-width: 640px) {
  .results__title h2 {
    font-size: clamp(34px, 5vw, 60px); /* same as the other section headings */
  }
}

.results__nav {
  display: flex;
  gap: 10px;
}

/* Swiper clips its content: padding gives the glow of the "After" photo room, the negative
   margin takes the space back, so the section spacing stays as designed. */
.results__slider {
  --results-bleed: 32px;
  --results-card-pad: 28px;
  --slide-dir: 1; /* 1 = forward (slides in from the right), -1 = backward; set by data-direction */

  padding-block: var(--results-bleed);
  margin-block: calc(var(--results-bleed) * -1);
}

.results__slider[data-direction="prev"] {
  --slide-dir: -1;
}

.swiper-slide.result {
  height: auto; /* Swiper's height: 100% would stop a shorter slide from stretching to the tallest one */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 24px;
}

.result__photos {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.result__figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* Photo tile: placeholder until the real photos exist; a real <img> just fills it */
.result__photo {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 260px; /* lower on phones so both photos fit side by side at 320px */
  padding: 8px;
  background:
    radial-gradient(70% 70% at 50% 40%, var(--glow-card), transparent 70%),
    var(--color-surface);
  border: var(--border-width) dashed var(--color-border-input);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--color-text-dim);
}

.result__photo--after {
  border-style: solid;
  border-color: var(--color-border-accent);
  box-shadow: 0 0 24px var(--glow-soft);
}

.result__ph-name {
  font-size: 12px;
}

.result__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Neon band: parked outside the photo, swept across it on slide change (see the animations) */
.result__flash {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, var(--glow-flash), transparent);
  opacity: 0;
  transform: translateX(-130%) skewX(-20deg);
  pointer-events: none;
}

.result__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

.result__caption--after {
  color: var(--color-accent);
  text-shadow: 0 0 12px var(--glow);
}

/* Client card. The dots (.results__dots) sit over its bottom edge, hence the extra bottom padding. */
.result__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: var(--results-card-pad);
  padding-bottom: calc(var(--results-card-pad) + 32px);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
}

.result__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 2px;
  color: var(--color-accent);
}

.result__name {
  font-size: 32px;
  font-weight: 900;
}

.result__facts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.result__fact {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: var(--border-width) solid var(--color-border);
}

.result__fact:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.result__label {
  flex: none;
  color: var(--color-text-dim);
}

.result__value {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.result__value--accent {
  font-weight: 700;
  color: var(--color-accent);
}

.result__quote {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Dots: Swiper's pagination element lives inside .swiper (outside the slides), so it is
   positioned over the bottom-left corner of the card. */
.results__dots.swiper-pagination {
  right: auto;
  left: var(--results-card-pad);
  width: auto;
  bottom: calc(var(--results-bleed) + var(--results-card-pad) - 10px); /* 10px = the button's padding around the 8px pill */
  display: flex;
  align-items: center;
  text-align: left;
}

@media (min-width: 640px) {
  .result__photo {
    height: 340px;
  }
}

/* From ≈ 800px of slide width (+ the 2 × 20px gutter) the card sits beside the photos: columns 2fr 1fr
   with a 24px gap, so the card starts at 2/3 of the width + 8px and the dots at that + the card padding. */
@media (min-width: 844px) {
  .swiper-slide.result {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .results__dots.swiper-pagination {
    left: calc(100% * 2 / 3 + 8px + var(--results-card-pad));
  }
}

@media (min-width: 1024px) {
  .result__photo {
    height: 420px;
  }
}

/* Slide change animations. They run on .swiper-slide-active, which Swiper moves to the new slide,
   so nothing has to be restarted by hand. --slide-dir (from data-direction) flips the side.
   .results__slider--animated is added by main.js on the first slide change: nothing plays on page load.
   With prefers-reduced-motion nothing moves at all (and main.js sets speed: 0). */
@media (prefers-reduced-motion: no-preference) {
  .results__slider--animated .swiper-slide-active .result__photo {
    animation: result-photo-in .7s var(--ease-out) both;
  }

  .results__slider--animated .swiper-slide-active .result__photo--after {
    animation-delay: .1s;
  }

  .results__slider--animated .swiper-slide-active .result__flash {
    animation: result-flash-next .9s .15s ease-out both;
  }

  .results__slider--animated[data-direction="prev"] .swiper-slide-active .result__flash {
    animation-name: result-flash-prev;
  }

  .results__slider--animated .swiper-slide-active .result__num,
  .results__slider--animated .swiper-slide-active .result__name,
  .results__slider--animated .swiper-slide-active .result__facts,
  .results__slider--animated .swiper-slide-active .result__quote {
    animation: result-rise .55s var(--ease-out) both;
  }

  .results__slider--animated .swiper-slide-active .result__name {
    animation-delay: .12s;
  }

  .results__slider--animated .swiper-slide-active .result__facts {
    animation-delay: .2s;
  }

  .results__slider--animated .swiper-slide-active .result__quote {
    animation-delay: .28s;
  }
}

@keyframes result-photo-in {
  from {
    opacity: 0;
    transform: translateX(calc(70px * var(--slide-dir))) skewX(calc(-8deg * var(--slide-dir))) scale(.96);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes result-flash-next {
  0% { opacity: 0; transform: translateX(-130%) skewX(-20deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(340%) skewX(-20deg); }
}

@keyframes result-flash-prev {
  0% { opacity: 0; transform: translateX(340%) skewX(-20deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-130%) skewX(-20deg); }
}

@keyframes result-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Gallery
   Mobile-first: 1 column, 2 from 640px, 4 from 1024px. Photos 1 and 4 span two rows;
   with 6 tiles this fills the 2-column and 4-column grids without holes.
   ========================================================================== */

.gallery__head {
  margin-bottom: 32px;
}

.gallery__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 220px;
  gap: 12px;
}

.gallery__item {
  min-width: 0;
}

.gallery__item:nth-child(1),
.gallery__item:nth-child(4) {
  grid-row: span 2;
}

/* Tile without a photo yet */
.gallery__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background:
    radial-gradient(70% 70% at 50% 50%, var(--glow-card), transparent 75%),
    var(--color-surface);
  border: var(--border-width) dashed var(--color-border-input);
  border-radius: var(--radius-md);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-dim);
}

/* Real photo: a link that opens the lightbox */
.gallery__link {
  display: block;
  height: 100%;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color .2s var(--ease-out),
    box-shadow .2s var(--ease-out);
}

.gallery__link:hover,
.gallery__link:focus-visible {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-card-hover);
}

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 640px) {
  .gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .gallery__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   About #about
   Two flex columns that wrap into one (photo on top) below ~840px.
   ========================================================================== */

.about__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}

.about__media {
  flex: 1 1 360px;
  min-width: 0;
}

.about__content {
  flex: 1 1 440px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.about__content .section__head {
  margin-bottom: 0;
}

.about__img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: 50% 28%;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 34px var(--glow-soft);
}

.about__text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* Narrow screens: 2 columns, the third card takes the full row instead of sitting alone */
.about__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.about__stats .stat:last-child {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .about__stats {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .about__stats .stat:last-child {
    grid-column: auto;
  }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: var(--radius-md);
}

.stat__value {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 38px;
  line-height: 1;
  color: var(--color-accent);
  text-shadow: 0 0 18px var(--glow);
}

.stat__label {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* ==========================================================================
   How it works #how
   1 column, 2 from 640px, 4 from 1024px.
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 28px;
}

.step__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 56px;
  line-height: 1;
  color: var(--color-accent);
  text-shadow: 0 0 18px var(--glow);
}

.step__title {
  font-size: 24px;
}

.step__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Plans #plans
   auto-fit grid: 3 columns on desktop, wraps below. The highlighted card carries a badge
   that sticks out above the border, so the cards must not clip their overflow.
   ========================================================================== */

.plans__head {
  margin-bottom: 44px;
}

/* 1 column on mobile; 2 from 640px with the highlighted card on its own row on top
   (so no card sits alone); 3 from 1024px in DOM order. */
.plans__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 22px;
}

@media (min-width: 640px) {
  .plans__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px; /* room for the badge sticking out above the highlighted card */
  }

  .plan--featured {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (min-width: 1024px) {
  .plans__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 22px;
  }

  .plan--featured {
    grid-column: auto;
    order: 0;
  }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  padding: 32px;
  border-radius: var(--radius-lg);
}

.plan__title {
  font-size: 28px;
}

.plan__price {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 46px;
  line-height: 1;
  overflow-wrap: break-word;
}

.plan__period {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text-muted);
  text-shadow: none;
}

.plan__cta {
  margin-top: auto;
}

/* Highlighted card: strong lime border and a wide glow instead of a hard shadow */
.plan--featured,
.plan--featured:hover {
  background: var(--color-surface-highlight);
  border: var(--border-width-strong) solid var(--color-accent);
  box-shadow: 0 0 40px var(--glow-soft);
}

.plan--featured .plan__price {
  color: var(--color-accent);
  text-shadow: 0 0 18px var(--glow);
}

.plan__badge {
  position: absolute;
  top: -15px;
  left: 28px;
  padding: 5px 14px;
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 18px var(--glow);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-on-accent);
}

/* ==========================================================================
   Contact #contact
   Two flex columns that wrap into one below ~900px: contacts, then the form card.
   ========================================================================== */

.contact__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
}

.contact__info {
  flex: 1 1 360px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.contact__info .section__head {
  margin-bottom: 0;
}

.contact__card {
  flex: 1 1 440px;
  min-width: 0;
}

.contact__text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.contact__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact__link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-text);
}

.contact__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  color: var(--color-accent);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-round);
  transition:
    color .2s var(--ease-out),
    background-color .2s var(--ease-out),
    border-color .2s var(--ease-out),
    box-shadow .2s var(--ease-out);
}

.contact__link:hover .contact__icon,
.contact__link:focus-visible .contact__icon {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 16px var(--glow);
}

.contact__svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact__svg-dot {
  fill: currentColor;
  stroke: none;
}

/* Form card */
.form-card {
  padding: 24px;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 36px var(--glow-card);
}

@media (min-width: 640px) {
  .form-card {
    padding: 32px;
  }
}

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

/* Fields inside a grid row must be able to shrink below their content */
.form__row .field {
  min-width: 0;
}

.form__error {
  padding: 12px 14px;
  border: var(--border-width) solid var(--color-border-accent);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

.form__submit {
  padding: 18px 24px;
}

/* Success state: replaces the form inside the same card */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 360px;
  text-align: center;
}

.form-success:focus {
  outline: none; /* focus is moved here for screen readers; it is not an interactive control */
}

.form-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  background: var(--color-accent);
  border-radius: var(--radius-round);
  box-shadow: 0 0 28px var(--glow);
}

.form-success__svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--color-on-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form-success__title {
  font-size: 28px;
}

.form-success__text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.form-success__again {
  margin-top: 8px;
}

/* ==========================================================================
   Footer
   One row that wraps: copyright, social text links, language links.
   ========================================================================== */

.footer {
  background: var(--color-bg);
  border-top: var(--border-width) solid var(--color-divider);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-dim);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-block: 28px;
}

.footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer__link {
  color: var(--color-text-soft);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--color-accent);
}

/* The language links reuse .lang, without the header panel's paddings */
.footer__lang {
  padding-block: 0;
}

.footer__lang .lang__list {
  margin-left: -12px; /* aligns the first link with the text above despite the link padding */
}

@media (min-width: 640px) {
  .footer__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  .footer__copy {
    flex: 1 1 360px;
  }

  .footer__lang .lang__list {
    margin-left: 0;
  }
}