/* ===========================================================================
   Mobile layout  (loaded below 1024px) — a distinct design, not a reflow.

   Structure: a horizontally swiped deck. The logo is pinned top-left, a
   progress rail tracks how far through the deck you are, and each panel is
   a full-height vertical column you scroll inside.
   =========================================================================== */

html, body { height: 100%; }

body {
  overflow: hidden;               /* the deck scrolls, the page does not */
  overscroll-behavior: none;
}

:root {
  --m-bar-h: 58px;                /* pinned top bar */
  --m-foot-h: 62px;               /* bottom rail: counter + dots */
  --m-pad: 22px;
}

.wrap { width: 100%; padding-inline: var(--m-pad); }

/* Desktop-only chrome is removed entirely */
.d-only { display: none !important; }

/* ========================================================== top bar ======= */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  /* Must sit ABOVE .deck-menu (80) — the menu covers the whole viewport, and
     if the bar were underneath it the close button would be untappable. */
  z-index: 90;
  height: var(--m-bar-h);
  display: flex;
  align-items: center;
  background: rgba(8, 8, 8, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.nav__inner {
  width: 100%;
  padding-inline: var(--m-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.nav__logo img { height: 19px; width: auto; }

/* The desktop anchor row has no place in the deck */
.nav__links { display: none; }

.nav__actions { display: flex; align-items: center; gap: 0.9rem; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
}
.lang-switch__flag { width: 18px; }

.menu-btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  color: var(--fg);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background-color 0.25s var(--ease);
}

/* Both icons occupy the same grid cell and cross-fade with a quarter turn. */
.menu-btn__icon {
  grid-area: 1 / 1;
  width: 16px;
  height: auto;
  fill: currentColor;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.menu-btn__icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); }

body.menu-open .menu-btn {
  color: var(--c-neon);
  border-color: rgba(0, 253, 146, 0.45);
  background: rgba(0, 253, 146, 0.08);
}
body.menu-open .menu-btn__icon--bars  { opacity: 0; transform: rotate(90deg) scale(0.6); }
body.menu-open .menu-btn__icon--close { opacity: 1; transform: none; }

/* Progress rail sits on the bottom edge of the bar */
.nav__progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 3px;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--c-green), var(--c-neon));
  transition: transform 0.35s var(--ease-out);
  box-shadow: 0 0 12px rgba(0, 253, 146, 0.5);
}

/* ============================================================= deck ======= */

.shell {
  position: fixed;
  top: calc(var(--m-bar-h) + env(safe-area-inset-top));
  bottom: calc(var(--m-foot-h) + env(safe-area-inset-bottom));
  left: 0; right: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.shell::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .shell { scroll-behavior: auto; }
}

.section {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-block: 30px 44px;
  position: relative;
  scrollbar-width: none;
}
.section::-webkit-scrollbar { display: none; }

/* Every panel opens with its own label so swiping stays oriented */
.section__head { display: grid; gap: 1.4rem; margin-bottom: 3rem; max-width: none; }
.section-title { font-size: clamp(2.8rem, 8.4vw, 4rem); }
.lead { font-size: 1.55rem; max-width: none; }

/* ============================================================= hero ======= */

.hero { padding-block: 0; display: block; min-height: 0; }
.hero__inner {
  display: grid;
  gap: 2.4rem;
  padding-block: 34px 40px;
  align-content: center;
  min-height: 100%;
}

/*
 * The hero art is painted on the section itself, not on absolutely positioned
 * children as it is on desktop.
 *
 * Each panel is its own vertical scroll container here. An abs-positioned
 * child with `inset: 0` resolves against the padding box — the *visible*
 * height — so once the hero content is taller than the phone screen the
 * artwork scrolls away with it and everything below lands on flat black.
 * An element background is anchored to the element's box (background-attachment
 * defaults to `scroll`, which does NOT follow overflow scrolling), so it stays
 * put however far the panel is scrolled.
 *
 * Layers paint first-on-top: blooms, then a vignette that fades the grid out
 * toward the edges (standing in for the mask-image the desktop layer uses,
 * which cannot apply to a single background layer), then the grid, then the base.
 */
.hero {
  background-color: #0b0b0b;
  background-image:
    radial-gradient(30rem 26rem at 84% 8%, rgba(0, 253, 146, 0.20), transparent 66%),
    radial-gradient(28rem 26rem at 0% 96%, rgba(0, 158, 96, 0.16), transparent 70%),
    radial-gradient(78% 52% at 50% 34%, rgba(14, 16, 19, 0) 20%, #0e1013 100%),
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, #0b0b0b, #111315);
  background-size: auto, auto, auto, 54px 54px, 54px 54px, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
}
.hero__bg,
.hero__grid { display: none; }

.hero__badge {
  justify-self: start;
  /* Sized so the longer Turkish string ("… · SALON 2 · STANT H2-C40")
     still sits on one line at 360px. */
  font-size: 1rem;
  letter-spacing: 0.08em;
  padding: 0.7rem 1.2rem;
  gap: 0.8rem;
}
.hero__title {
  font-size: clamp(4.4rem, 15vw, 7.2rem);
  line-height: 0.9;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 0.6rem;
}
.hero__title span { display: block; }
.hero__title .l3 { color: var(--c-neon); font-style: italic; }
.hero__lead { margin-top: 0; font-size: 1.5rem; }
.hero__cta { margin-top: 0.6rem; display: grid; gap: 1rem; }
.hero__cta .btn { width: 100%; }
.hero__aside { display: grid; gap: 1.6rem; margin-top: 0.6rem; justify-items: start; }
/* Full-width tap target on a phone rather than a floating pill */
.hero__team { width: 100%; border-radius: var(--radius-card); padding: 1.3rem 1.6rem; }
.hero__team__body { flex: 1 1 auto; }
.hero__team__body strong { font-size: 1.6rem; }
.hero__team__disc { width: 3.2rem; height: 3.2rem; font-size: 1.15rem; }
.hero__team__disc + .hero__team__disc { margin-left: -1rem; }

/* The desktop scroll cue is replaced by the swipe cue in the footer rail */
.hero__scroll { display: none; }

/* ========================================================== content ======= */

/* All multi-column desktop grids collapse to a single vertical column. */
.stat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.stat-cell { background: var(--bg); padding: 2.4rem 0; display: grid; gap: 1rem; }
.stat-cell,
.logo-wall__item { padding-inline: var(--m-pad); }
.stat-value { font-size: 4.4rem; }

.source-note { margin-top: 2rem; font-size: 1.2rem; color: var(--fg-faint); }

.problem-block { margin-top: 4.4rem; }
.problem-grid { display: grid; gap: 1.4rem; margin-top: 2.4rem; }
.problem-close {
  margin-top: 2.8rem;
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1.2;
  text-transform: uppercase;
  border-left: 2px solid var(--c-neon);
  padding-left: 1.6rem;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.kpi { background: var(--inv-bg); padding: 2.2rem 1.8rem; display: grid; gap: 0.8rem; }
.kpi__value { font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; line-height: 0.9; color: var(--c-black); letter-spacing: -0.02em; }
.kpi__label { font-size: 1.3rem; line-height: 1.35; color: rgba(0, 0, 0, 0.72); }

.glasswing {
  margin-top: 2.4rem;
  display: grid;
  gap: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-lg);
  padding: 2rem;
  background: rgba(0, 0, 0, 0.06);
}
.glasswing__label {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-black);
  border: 0;
  padding: 0;
}
.glasswing__text { font-size: 1.45rem; color: rgba(0, 0, 0, 0.78); }

/* Logo walls become two-column tiles */
.logo-wall {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: var(--radius-lg);
}
.logo-wall__item { min-height: 8.6rem; padding-block: 1.8rem; }
.logo-mark { font-size: 1.5rem; }

.eco-split { display: grid; gap: 3rem; }
.pillars { display: grid; gap: 0; }
.pillar { grid-template-columns: auto 1fr; gap: 1.4rem; padding: 1.8rem 0; }
.pillar__title { font-size: 1.7rem; }
.pillar__text { font-size: 1.4rem; }

.stages { display: grid; gap: 2.4rem; }
.stage { gap: 1rem; }
.stage__title { font-size: 2.2rem; }
.stage__text { font-size: 1.45rem; }

.maestro {
  margin-top: 4rem;
  border: 1px solid rgba(0, 253, 146, 0.22);
  border-radius: 16px;
  background:
    radial-gradient(30rem 20rem at 20% 0%, rgba(0, 253, 146, 0.12), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  padding: 2.4rem;
}
.maestro__title { font-size: 3.6rem; line-height: 0.94; text-transform: uppercase; font-weight: 700; margin-top: 0.8rem; }
.maestro__lead { margin-top: 1.6rem; }
.maestro__pitch { margin-top: 1.8rem; font-family: var(--font-display); font-size: 1.8rem; text-transform: uppercase; color: var(--c-neon); line-height: 1.22; }

.traits {
  margin-top: 2.6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.trait { background: rgba(10, 12, 14, 0.8); padding: 2rem; display: grid; gap: 0.7rem; }
.trait__title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-neon); }
.trait__text { font-size: 1.4rem; color: var(--fg-muted); }

.layer { margin-top: 2.6rem; display: grid; gap: 1.2rem; }
.layer__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.layer__chip {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 1.2rem 0.6rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.layer__bus {
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
  background: linear-gradient(90deg, var(--c-green), var(--c-neon));
  color: var(--c-black);
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.layer__caption { text-align: center; font-size: 1.3rem; color: var(--fg-faint); }

.outcomes { margin-top: 4rem; }
.outcomes__grid { display: grid; gap: 2rem; margin-top: 2.4rem; }
.outcome { border-top: 2px solid var(--c-neon); padding-top: 1.6rem; gap: 0.6rem; }
.outcome__title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; text-transform: uppercase; }
.outcome__text { font-size: 1.45rem; color: var(--fg-muted); }
.outcomes__note { margin-top: 2.4rem; font-size: 1.4rem; color: var(--fg-faint); }

/* ============================================================= team ======= */

.team-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.team-group + .team-group { margin-top: 3rem; }
.team-card { padding: 1.6rem; gap: 1.3rem; }
.team-card__avatar { width: 4rem; height: 4rem; font-size: 1.5rem; }
.team-card__name { font-size: 1.8rem; }
.team-card__role { font-size: 1.3rem; }
.team-card__mail { font-size: 1.25rem; }

/* ========================================================== contact ======= */

.contact__split { display: grid; gap: 2.8rem; }
.contact__panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  padding: 2.2rem;
}
.form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
.stand-card { margin-top: 2.4rem; padding: 1.8rem 2rem; }
.stand-card__value { font-size: 2.1rem; }

/* Keep the on-screen keyboard from zooming iOS Safari */
.input, .select, .textarea { font-size: 16px; }

/* =========================================================== footer ======= */

.footer { border-top: 0; padding-block: 30px 44px; }
.footer__top { display: grid; gap: 1.6rem; }
.footer__title { font-size: clamp(2.8rem, 8.4vw, 4rem); text-transform: uppercase; }
.footer__text { color: var(--fg-muted); font-size: 1.5rem; }
.footer__stand {
  margin-top: 1.4rem;
  display: inline-flex;
  gap: 0.8rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-neon);
}
.footer__bottom {
  margin-top: 3.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1.6rem;
}
.footer__logo img { height: 18px; width: auto; }
.footer__links { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.footer__links a { font-size: 1.3rem; color: var(--fg-muted); }
.footer__meta { font-size: 1.2rem; color: var(--fg-faint); }

/* ====================================================== bottom rail ======= */

.deck-rail {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 60;
  height: calc(var(--m-foot-h) + env(safe-area-inset-bottom));
  padding: 0 var(--m-pad) env(safe-area-inset-bottom);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  background: rgba(8, 8, 8, 0.94);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--line);
}

.deck-count {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.deck-count b { color: var(--c-neon); font-weight: 700; }

.deck-dots {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  justify-content: center;
}
.deck-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), width 0.3s var(--ease);
}
.deck-dot.is-active { background: var(--c-neon); width: 20px; border-radius: 4px; }

.deck-next {
  flex: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 253, 146, 0.4);
  background: rgba(0, 253, 146, 0.08);
  border-radius: 50%;
  color: var(--c-neon);
  cursor: pointer;
  transition: opacity 0.3s var(--ease), background-color 0.3s var(--ease);
}
.deck-next:disabled { opacity: 0.3; cursor: default; }
.deck-next svg { width: 16px; height: 16px; }

/* Swipe hint, shown once on the first panel */
.swipe-hint {
  position: absolute;
  right: var(--m-pad);
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.1rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-faint);
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.swipe-hint.is-hidden { opacity: 0; }
.swipe-hint svg { width: 22px; height: 10px; color: var(--c-neon); animation: nudge 1.8s var(--ease) infinite; }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* ============================================================= menu ======= */

.deck-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(8, 8, 8, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: calc(var(--m-bar-h) + env(safe-area-inset-top) + 30px) var(--m-pad) 40px;
  display: grid;
  align-content: start;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  /* visibility flips instantly on open (so the links are focusable straight
     away) and is held back until the fade finishes on close. Transitioning
     visibility itself would leave it `hidden` for the first frames, which
     silently breaks focusing into the overlay. */
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
              visibility 0s linear 0.3s;
  overflow-y: auto;
}
body.menu-open .deck-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
              visibility 0s linear 0s;
}

.deck-menu__title {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 1.6rem;
}
.deck-menu a {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fg);
}
.deck-menu a .idx {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-neon);
}
.deck-menu a.is-active { color: var(--c-neon); }

/* --------------------------------------------------- landscape phones ---- */
@media (max-height: 460px) and (orientation: landscape) {
  :root { --m-bar-h: 48px; --m-foot-h: 52px; }
  .hero__title { font-size: 3.6rem; }
  .section { padding-block: 20px 30px; }
}

/* -------------------------------------------------------------- tablet --- */
@media (min-width: 700px) {
  :root { --m-pad: 40px; }
  .stat-grid,
  .problem-grid,
  .stages,
  .outcomes__grid,
  .traits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid { gap: 1px; }
  .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__title { font-size: 7.4rem; }
  .glasswing { grid-template-columns: auto 1fr; align-items: center; gap: 2rem; }
  .glasswing__label { border-right: 1px solid rgba(0, 0, 0, 0.25); padding-right: 2rem; }
}