/* PLANKA — Narrative styles
   Stack: Vanilla CSS (grid + flex), minimal JS. Light theme. */

:root {
  color-scheme: light;
  --base-width: 1440px;
  --grid-columns: 12;
  --space-0: 0;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --radius-1: 8px;
  --radius-2: 16px;
  --dur-1: 500ms;
  --dur-2: 800ms;
  --ease: cubic-bezier(.2,.7,.2,1);
  /* Colors — minimal palette */
  --bg: #f4f8fc;
  --bg-2: #eaf1f8;
  --fg: #1f2b37;
  --muted: #5f6f81;
  --line: #d4deea;
  --accent: #2f8d68; /* used sparingly */
  --hero-min-h: 100svh;
  --hero-pad: clamp(16px, 4vw, 56px);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--bg); color: var(--fg); }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.narrative { width: 100%; }

.section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  --section-bg: linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
  background: var(--section-bg);
}
.section + .section { border-top: 1px solid var(--line); }
.container {
  width: min(100%, var(--base-width));
  margin-inline: auto;
  padding: clamp(var(--space-3), 2.5vw, var(--space-6));
  display: block;
}
.v-center { display: grid; place-content: center; text-align: left; }
.row { margin-top: var(--space-4); }

.title, .display, .kicker, .word { text-transform: uppercase; letter-spacing: 0.04em; }
.kicker { color: var(--muted); font-size: 0.9rem; margin: 0 0 var(--space-2); }
.title { font-size: clamp(24px, 3vw, 40px); margin: 0 0 var(--space-3); }
.display { font-size: clamp(28px, 5vw, 64px); margin: 0; line-height: 1.1; }
.subtitle { color: var(--muted); margin: 0 0 var(--space-3); }
.lead { font-size: clamp(18px, 2.2vw, 24px); color: var(--fg); margin: var(--space-3) 0; }
.center { text-align: center; }

/* =======================================
   AUTHOR RHYTHM BLOCK
   ======================================= */

.slide-point {
  margin-top: clamp(36px, 6vw, 72px);
  padding: 20px 24px;
  border-left: 2px solid rgba(30, 40, 48, .6);
  background: rgba(30, 40, 48, .035);
}

.slide-point__label {
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 8px;
}

.slide-point__text {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4;
  font-weight: 600;
}

/* Grid 12 */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-3);
}
.gap { gap: var(--space-4); }
.col-span-12 { grid-column: span 12; }
.col-span-8  { grid-column: span 8; }
.col-span-7  { grid-column: span 7; }
.col-span-6  { grid-column: span 6; }
.col-span-5  { grid-column: span 5; }
.col-span-4  { grid-column: span 4; }
.col-span-3  { grid-column: span 3; }

@media (max-width: 1024px) {
  .grid-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .col-span-7 { grid-column: span 6; }
  .col-span-5 { grid-column: span 6; }
  .col-span-4 { grid-column: span 6; }
  .col-span-3 { grid-column: span 3; }
}
@media (max-width: 640px) {
  .grid-12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [class*="col-span-"] { grid-column: span 2; }
}

/* Media placeholders */
.ph {
  display: grid; place-items: center; text-align: center;
  border-radius: var(--radius-2);
  border: 1px dashed #c9d4e2;
  background: linear-gradient(180deg, #fbfdff 0%, #eef4fb 100%);
  color: #7a8898;
  font-size: 12px;
  letter-spacing: 0.08em;
  min-height: 280px;
  padding: var(--space-3);
}
.ph-photo { background: radial-gradient(1200px 400px at 40% 20%, #f6faff, #e7eef7); }
.ph-video { background: radial-gradient(1200px 400px at 40% 20%, #f5f9ff, #e5edf8); }
.ph-screen { background: radial-gradient(1200px 400px at 40% 20%, #f3f8ff, #e6eef9); }
.ph-wire  { background: repeating-linear-gradient(45deg, #eef3fa, #eef3fa 10px, #e7edf6 10px, #e7edf6 20px); }
.ph-render{ background: linear-gradient(135deg, #f5f9ff, #e7eef8); }
.ph-diagram{ background: linear-gradient(135deg, #f4f8ff, #e8eef7); }
.media-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-2);
  border: 1px solid #cfd9e6;
  background: #f7fbff;
  box-shadow: 0 10px 28px rgba(31, 43, 55, 0.08);
}

figure { margin: 0; }
figcaption {
  margin-top: calc(var(--space-2) + 4px);
  color: #4a5f74;
  font-size: 1.08rem;
  line-height: 1.42;
}

/* =========================
   HERO (#intro) — FIX v5
   full‑bleed + absolute bg + fades
   ========================= */

:root{
  --hero-min-h: 100svh;
  --hero-pad: clamp(16px, 4vw, 56px);
  --hero-fg: #1f2a33;
  --hero-bg: #ffffff;
}

/* 0) FULL‑BLEED: вырываем hero из общего max-width контейнера */
#intro.planka-hero{
  position: relative;
  min-height: var(--hero-min-h);
  min-height: 100vh;            /* fallback для старых iOS */
  overflow: hidden;
  background: var(--hero-bg);

  /* full‑bleed hack */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 1) фон ВСЕГДА cover и ВСЕГДА на всю секцию */
.planka-hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;

  background-image: url("./assets/img/planka_hero_desktop_final.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right center;

  transform: translateZ(0);
  will-change: background-position;
}

.planka-hero__bg-print {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* 2) ЛЕВЫЙ FADE (desktop/landscape) — в ноль */
.planka-hero__bg::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background: linear-gradient(
    90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 34%,
    rgba(255,255,255,0.85) 44%,
    rgba(255,255,255,0.0) 60%
  );
}

/* 3) НИЖНИЙ SCRIM (portrait) — по умолчанию OFF */
.planka-hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;

  background: linear-gradient(
    0deg,
    rgba(255,255,255,0.98) 0%,
    rgba(255,255,255,0.72) 18%,
    rgba(255,255,255,0.0) 46%
  );
}

/* 4) Текст — ТОЛЬКО overlay, никакого белого блока */
.planka-hero__content{
  position: relative;
  z-index: 1;
  min-height: var(--hero-min-h);
  min-height: 100vh;            /* fallback */
  padding: var(--hero-pad);

  display: flex;
  flex-direction: column;
  justify-content: center;

  max-width: min(52ch, 48vw);
  background: transparent !important;
}

.planka-hero__title{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .96;
  color: var(--hero-fg);
  font-size: clamp(40px, 5.4vw, 82px);
}

.planka-hero__title-nowrap{
  white-space: nowrap;
}

.planka-hero__subtitle{
  margin: 14px 0 0 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(31,42,51,.78);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.35;
}

/* ====== PORTRAIT (телефоны) ====== */
@media (max-width: 768px) and (orientation: portrait){
  .planka-hero__bg{
    background-image: url("./assets/img/planka_hero_mobile_final.png");
    background-position: center top;
  }

  /* portrait: bottom scrim ON, left fade OFF */
  .planka-hero__bg::before{ opacity:0; }
  .planka-hero__bg::after{ opacity:1; }

  .planka-hero__content{
    justify-content: flex-end;
    padding-bottom: calc(var(--hero-pad) + 12px);
    max-width: min(32ch, 70vw);
  }

  .planka-hero__title{
    font-size: clamp(34px, 9.2vw, 52px);
  }
}

/* ====== iPad portrait (как mobile) ====== */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait){
  .planka-hero__bg{
    background-image: url("./assets/img/planka_hero_mobile_final.png");
    background-position: center top;
  }

  .planka-hero__bg::before{ opacity:0; }
  .planka-hero__bg::after{ opacity:1; }

  .planka-hero__content{
    justify-content: flex-end;
    max-width: min(46ch, 64vw);
    padding-bottom: calc(var(--hero-pad) + 18px);
  }

  .planka-hero__title{
    font-size: clamp(40px, 5.5vw, 56px);
  }
}

/* ====== low-height landscape (iPhone landscape) ====== */
@media (max-height: 520px) and (orientation: landscape){
  /* оставляем левый fade ON */
  .planka-hero__bg::before{ opacity:1; }
  .planka-hero__bg::after{ opacity:0; }

  .planka-hero__content{
    padding: clamp(10px, 3vw, 28px);
    max-width: min(52ch, 52vw);
  }

  .planka-hero__title{
    font-size: clamp(28px, 4.2vw, 44px);
    line-height: .98;
  }

  .planka-hero__subtitle{
    margin-top: 8px;
    font-size: 14px;
  }
}

/* Screens stack inside a section */
.screens { display: grid; gap: var(--space-4); }

/* Stage sections (evolution + requirements) */
.evolution-stages,
.req-stages {
  display: grid;
  gap: var(--space-4);
}
.evolution-stage,
.requirements .stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#requirements .stage > .slide-point {
  flex: 0 0 100%;
  width: 100%;
}
.stage-grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--space-4);
  align-items: center;
  width: 100%;
}
.stage-media {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.stage-media .media-image {
  max-height: min(62vh, 560px);
}
.stage-media-placeholder {
  min-height: min(62vh, 560px);
  border: 1px dashed #b9c7d7;
  border-radius: var(--radius-2);
  background: linear-gradient(180deg, #f4f8fd 0%, #e4ecf5 100%);
  color: #61758a;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stage-copy {
  display: grid;
  gap: var(--space-2);
  align-content: center;
}
.stage-name {
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.34rem);
  font-weight: 620;
  line-height: 1.28;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #31485d;
}
.stage-summary,
.stage-strong,
.stage-but,
.stage-need {
  margin: 0;
  max-width: 40ch;
}
.stage-summary { font-size: clamp(1rem, 1.4vw, 1.2rem); }
.stage-strong { font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.45; }
.stage-strong span {
  display: block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.stage-but {
  font-size: clamp(0.98rem, 1.22vw, 1.12rem);
  color: #445a70;
}
.stage-but span {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 6px;
}
.stage-need {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.4;
}
.stage-need span {
  display: block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.is-reverse .stage-media { order: 2; }
.is-reverse .stage-copy { order: 1; }

.section-sticky,
.req-sticky {
  position: sticky;
  top: 0;
  z-index: 6;
  min-height: 96px;
  display: grid;
  align-content: end;
  gap: var(--space-1);
  margin-inline: calc(var(--space-2) * -1);
  padding: calc(var(--space-2) + env(safe-area-inset-top)) var(--space-2) var(--space-2);
  border-bottom: 1px solid rgba(171, 186, 203, 0.62);
  border-radius: 0 0 14px 14px;
  background:
    linear-gradient(
      180deg,
      rgba(248, 251, 255, 0.96) 0%,
      rgba(244, 248, 252, 0.9) 78%,
      rgba(244, 248, 252, 0.82) 100%
    );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 24px rgba(30, 42, 56, 0.07);
}
.section-sticky .title,
.req-sticky .title { margin-bottom: var(--space-1); }
.section-sticky .subtitle,
.req-sticky .subtitle {
  margin-bottom: 0;
  max-width: 68ch;
}
.requirements .stage {
  border-top: 1px solid #d4deea;
  padding-top: var(--space-4);
}
#requirements .requirements-intro {
  margin: clamp(20px, 3vh, 32px) 0 0;
  max-width: 68ch;
  color: #445a70;
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  line-height: 1.5;
}

#designing .designing-rationale {
  display: grid;
  gap: var(--space-2);
  max-width: 74ch;
}

#designing .designing-rationale p {
  margin: 0;
  color: #445a70;
  font-size: clamp(1rem, 1.24vw, 1.16rem);
  line-height: 1.45;
}

/* Reveal rhythm inside stage */
.stage-step-1 { transition-delay: 40ms; }
.stage-step-2 { transition-delay: 200ms; }
.stage-step-3 { transition-delay: 340ms; }
.stage-step-4 { transition-delay: 480ms; }

/* Gesture stage */
#gesture .stage {
  border-top: 1px solid var(--line);
  padding-top: clamp(36px, 5.8vh, 68px);
  margin-top: clamp(36px, 5.8vh, 68px);
}
#gesture .stage-title {
  font-weight: 650;
  font-size: 1.15rem;
  color: #3b5268;
  opacity: 1;
  margin-bottom: calc(var(--space-2) + 2px);
  text-transform: uppercase;
  letter-spacing: .06em;
}
#gesture .media-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(18px, 2.8vw, 40px);
  align-items: center;
}
#gesture .gesture-visual {
  margin: 0;
  position: relative;
}
#gesture .gesture-visual .media-image {
  max-height: min(58vh, 560px);
  object-fit: contain;
}
#gesture .before-after {
  --before-after-pos: 16%;
  position: relative;
  width: 100%;
  max-height: min(58vh, 560px);
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-2);
  border: 1px solid #cfd9e6;
  background: #f7fbff;
  box-shadow: 0 10px 28px rgba(31, 43, 55, 0.08);
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
  isolation: isolate;
}
#gesture .before-after__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #f7fbff;
}
#gesture .before-after__overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--before-after-pos)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--before-after-pos)) 0 0);
  pointer-events: none;
  z-index: 1;
}
#gesture .before-after__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--before-after-pos);
  width: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: ew-resize;
  z-index: 3;
}
#gesture .before-after__divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(22, 33, 45, 0.2), rgba(22, 33, 45, 0.58), rgba(22, 33, 45, 0.2));
}
#gesture .before-after__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: rgba(246, 250, 255, 0.95);
  border: 1px solid rgba(33, 49, 66, 0.24);
  box-shadow: 0 5px 14px rgba(23, 36, 50, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#gesture .before-after__arrow {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
#gesture .before-after__arrow--left {
  border-right: 6px solid rgba(31, 47, 64, 0.85);
}
#gesture .before-after__arrow--right {
  border-left: 6px solid rgba(31, 47, 64, 0.85);
}
#gesture .before-after__divider:focus-visible {
  outline: none;
}
#gesture .before-after__divider:focus-visible .before-after__knob {
  box-shadow: 0 0 0 3px rgba(66, 136, 214, 0.28), 0 5px 14px rgba(23, 36, 50, 0.18);
}
#gesture .before-after.is-hinting .before-after__divider {
  animation: gestureBeforeAfterHint 860ms var(--ease) 1;
}
@keyframes gestureBeforeAfterHint {
  0%, 100% {
    transform: translateX(-50%);
  }
  35% {
    transform: translateX(calc(-50% + 11px));
  }
  70% {
    transform: translateX(calc(-50% - 6px));
  }
}
#gesture .gesture-copy {
  display: grid;
  gap: clamp(10px, 1.6vw, 14px);
  align-content: center;
  max-width: 34ch;
}
#gesture .gesture-copy p {
  margin: 0;
  color: #31485d;
  font-size: clamp(1.02rem, 1.26vw, 1.16rem);
  line-height: 1.52;
  text-wrap: pretty;
}
#gesture .gesture-reaction {
  display: inline-block;
  max-width: min(72%, 320px);
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid #c8d4e1;
  background: #fbfdff;
  color: #334a60;
  font-size: clamp(0.88rem, 1.02vw, 0.98rem);
  line-height: 1.35;
  box-shadow: 0 8px 18px rgba(25, 40, 56, 0.12);
}
#gesture .gesture-reaction--overlay {
  position: absolute;
  right: clamp(12px, 1.4vw, 20px);
  bottom: clamp(12px, 1.4vw, 20px);
  z-index: 4;
}
#gesture .gesture-reaction--overlay::before {
  content: "";
  position: absolute;
  right: 16px;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 8px 0 8px;
  border-color: #c8d4e1 transparent transparent transparent;
}
#gesture .gesture-reaction--overlay::after {
  content: "";
  position: absolute;
  right: 17px;
  top: calc(100% - 1px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 7px 0 7px;
  border-color: #fbfdff transparent transparent transparent;
}
#gesture .gesture-reaction--print {
  margin-top: var(--space-2);
}
#gesture .alt { margin-top: var(--space-2); }
#gesture .gesture-print-secondary { margin-top: var(--space-2); }

/* Principles */
.principles { gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-2) 0 0; }
#principles .pill {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 10px 16px 10px 36px;
  background: #fcfeff;
  border: 1px solid #c8d4e2;
  border-radius: 999px 0 0 999px;
  color: #263a4f;
  text-align: left;
  font-size: clamp(0.95rem, 1.06vw, 1.02rem);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
#principles .pill::before {
  content: "";
  position: absolute;
  left: 14px;
  width: 9px;
  height: 9px;
  border: 1.5px solid #879aaf;
  border-radius: 50%;
  background: transparent;
}
#principles .pill--caps .pill__caps {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 650;
}

/* Object */
.screens .screen { }
#object .section-sticky {
  padding-bottom: var(--space-2);
}
#object .object-subtitle {
  margin: var(--space-2) 0 0;
  max-width: 44ch;
  font-size: clamp(1rem, 1.38vw, 1.2rem);
  line-height: 1.46;
}
#object .object-layout {
  margin-top: var(--space-2);
  display: grid;
  gap: clamp(36px, 4.6vw, 68px);
}
#object .object-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.2vw, 48px);
  align-items: center;
}
#object .object-pair.is-reverse .object-media { order: 2; }
#object .object-pair.is-reverse .object-copy { order: 1; }
#object .object-media {
  margin: 0;
}
#object .object-media--render {
  position: relative;
}
#object .object-media .media-image {
  max-height: min(56vh, 520px);
  object-fit: contain;
}
#object .object-render {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 3.6vh, 30px);
  transform: translateX(-50%);
  margin: 0;
  width: min(82%, 360px);
  padding: clamp(8px, 1.2vw, 14px) clamp(10px, 1.8vw, 18px);
  border-radius: 14px;
  border: 1px solid rgba(31, 50, 68, 0.22);
  background: linear-gradient(180deg, rgba(241, 247, 253, 0.95) 0%, rgba(228, 238, 248, 0.9) 100%);
  box-shadow: 0 10px 22px rgba(22, 34, 46, 0.16);
  display: grid;
  gap: 4px;
  pointer-events: none;
}
#object .object-render__line {
  display: block;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #3a4f63;
  font-size: clamp(0.74rem, 1vw, 0.96rem);
  line-height: 1.18;
  font-weight: 620;
}
#object .object-render__line--focus {
  color: #1f3347;
  font-weight: 760;
}
#object .object-copy {
  display: grid;
  gap: var(--space-2);
  align-content: center;
  max-width: 46ch;
}
#object .object-title {
  margin: 0;
  color: #24394d;
  font-size: clamp(1.24rem, 1.9vw, 1.68rem);
  font-weight: 650;
  line-height: 1.34;
  text-wrap: balance;
}
#object .object-text {
  margin: 0;
  color: #3d5368;
  font-size: clamp(1.02rem, 1.28vw, 1.18rem);
  line-height: 1.54;
  text-wrap: pretty;
}

/* Layers */
#layers .section-sticky {
  padding-bottom: var(--space-2);
}
#layers .layers-stages {
  margin-top: var(--space-2);
  display: grid;
  gap: clamp(34px, 5.2vh, 64px);
}
#layers .layer-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid #d4deea;
  padding-top: var(--space-4);
}
#layers .layer-stage-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: center;
}
#layers .layer-media {
  margin: 0;
}
#layers .layer-media .media-image {
  max-height: min(60vh, 560px);
  object-fit: contain;
}
#layers .layer-copy {
  display: grid;
  gap: clamp(10px, 1.4vw, 16px);
  align-content: center;
  max-width: 44ch;
}
#layers .layer-name {
  margin: 0;
  color: #2c4358;
  font-size: clamp(1.14rem, 1.62vw, 1.38rem);
  font-weight: 620;
  line-height: 1.32;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#layers .layer-note {
  margin: 0;
  color: #344b61;
  font-size: clamp(1.02rem, 1.24vw, 1.16rem);
  font-weight: 400;
  line-height: 1.54;
  text-wrap: pretty;
}
#layers .layer-stage.is-reverse .layer-media { order: 2; }
#layers .layer-stage.is-reverse .layer-copy { order: 1; }
#layers .slide-point {
  margin-top: clamp(24px, 4vh, 44px);
}
#layers .layer-stage > .slide-point {
  flex: 0 0 100%;
  width: 100%;
}

/* Word field */
.word-field {
  position: relative;
  width: 100%;
  min-height: clamp(500px, 68vh, 760px);
  display: grid;
  place-items: center;
  padding: clamp(22px, 3.2vw, 42px) clamp(16px, 3vw, 36px);
  isolation: isolate;
}
.word-field::before {
  content: "";
  position: absolute;
  inset: 10% 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 52%, rgba(196, 208, 223, 0.22) 0%, rgba(196, 208, 223, 0.1) 42%, transparent 74%),
    radial-gradient(circle at 50% 52%, rgba(220, 228, 238, 0.12) 0%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}
.word-field .word {
  position: absolute;
  font-weight: 600;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.word.center {
  font-size: clamp(14px, 2vw, 24px);
  color: #1f3347;
  opacity: 0.96;
  text-shadow: 0 1px 2px rgba(245, 249, 253, 0.8);
  animation: pulse 7.4s var(--ease) infinite both;
}
.word.periphery {
  font-size: clamp(11px, 1.2vw, 14px);
  color: #3c5268;
  opacity: 0.74;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 1px rgba(245, 249, 253, 0.72);
  animation: pulse 9.6s var(--ease) infinite both;
}

.center-1 { top: 49%; left: 50%; font-size: clamp(23px, 3.15vw, 36px); font-weight: 700; opacity: 1; z-index: 2; }
.center-2 { top: 33%; left: 36%; }
.center-3 { top: 35%; left: 66%; }
.center-4 { top: 65%; left: 32%; }
.center-5 { top: 68%; left: 69%; }
.center-6 { top: 20%; left: 52%; }
.center-7 { top: 49%; left: 20%; }
.center-8 { top: 50%; left: 77%; }

.periphery-1 { top: 11%; left: 16%; }
.periphery-2 { top: 89%; left: 21%; }
.periphery-3 { top: 12%; left: 84%; }
.periphery-4 { top: 88%; left: 80%; }

.word.center:nth-of-type(2) { animation-delay: 0.2s; }
.word.center:nth-of-type(3) { animation-delay: 0.4s; }
.word.center:nth-of-type(4) { animation-delay: 0.6s; }
.word.center:nth-of-type(5) { animation-delay: 0.8s; }
.word.center:nth-of-type(6) { animation-delay: 1s; }
.word.center:nth-of-type(7) { animation-delay: 1.2s; }
.word.center:nth-of-type(8) { animation-delay: 1.4s; }
.word.periphery:nth-of-type(9) { animation-delay: 0.3s; }
.word.periphery:nth-of-type(10) { animation-delay: 0.9s; }
.word.periphery:nth-of-type(11) { animation-delay: 1.5s; }
.word.periphery:nth-of-type(12) { animation-delay: 2.1s; }

@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - 1.5px)); }
}

/* Final */
.section-9a .v-center { min-height: 100vh; }
.section-9a .stack {
  --final-track-width: min(14ch, 100%);
  justify-items: center;
}
.final-message {
  margin: 0;
  font-size: clamp(34px, 5.8vw, 74px);
  line-height: 1.06;
  letter-spacing: 0.02em;
  width: var(--final-track-width);
  max-width: var(--final-track-width);
  text-wrap: balance;
  white-space: nowrap;
  text-align: center;
}
.final-accent {
  position: relative;
  width: var(--final-track-width);
  height: 1px;
  margin: clamp(8px, 1.6vh, 16px) auto clamp(2px, 0.7vh, 8px);
  background: linear-gradient(90deg, transparent 0%, #c6d0dc 18%, #c6d0dc 82%, transparent 100%);
  opacity: 0.76;
  overflow: hidden;
  display: none;
}
.final-accent::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58) 50%, transparent);
  transform: translateX(-130%);
  animation: finalAccentSweep 5.6s ease-in-out infinite;
}
.final-reflection {
  width: var(--final-track-width);
  /* aspect-ratio: 1151 / 233; */
  margin: 0 auto clamp(8px, 1.6vh, 16px);
  pointer-events: none;
  position: relative;
  overflow: hidden;
  font-size: clamp(34px, 5.8vw, 74px);
  height: 100px;
}
.final-reflection::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(to top, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 100%); */
  background: linear-gradient(to top, rgba(244, 248, 252, 100) 0%, rgba(244, 248, 252, 20) 20%, rgba(244, 248, 252, 0) 100%);
  pointer-events: none;
}
.final-reflection-image {
  display: block;
  width: 100%;
  /* height: 100%; */
  transform: scaleY(-1);
  transform-origin: center;
  opacity: 0.3;
  /* filter: blur(0.6px); */
  aspect-ratio: 1151 / 533;
}
.final-support {
  margin: 0 auto;
  max-width: 56ch;
  font-size: clamp(16px, 1.7vw, 22px);
  color: var(--muted);
  text-wrap: pretty;
}
@keyframes finalAccentSweep {
  0%, 32% { transform: translateX(-130%); }
  58% { transform: translateX(0); }
  100% { transform: translateX(130%); }
}

.section-9b {
  background: linear-gradient(180deg, #0b1522 0%, #050d16 100%);
  color: #e7ecf4;
}
.section-9b .container {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.final-b-layout {
  padding-top: clamp(var(--space-5), 8vh, var(--space-8));
  padding-bottom: clamp(var(--space-4), 7vh, var(--space-8));
}
.final-anchor {
  width: min(82vw, 560px);
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}
.final-logo {
  display: block;
  width: clamp(128px, 20vw, 210px);
  max-width: 100%;
  height: auto;
}
.final-line {
  margin: 0;
  width: 100%;
  display: grid;
  gap: var(--space-1);
  justify-items: start;
}
.plank {
  width: 100%;
  max-width: 340px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #9faec3 18%, #9faec3 82%, transparent);
  opacity: 0.68;
}
.keys-rhythm {
  width: 100%;
  max-width: 340px;
  height: 7px;
  background: repeating-linear-gradient(90deg, #b7c2d3 0 8px, #d3dbe8 8px 16px);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  animation: rhythm 2.8s linear infinite;
  opacity: 0.64;
}
@keyframes rhythm { to { background-position-x: -32px; } }
.footnote {
  color: #afbccd;
  margin: var(--space-1) 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Reveal animations — opacity + translate only */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); will-change: opacity, transform; }
.reveal.slide { transform: translateX(16px); }
.reveal.in-view { opacity: 1; transform: translate(0, 0); }

/* Utilities */
.only-print {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.only-screen { display: block; }
.stack { display: grid; gap: var(--space-3); }

@media (max-width: 1024px) {
  .stage-grid { grid-template-columns: 1fr; }
  .is-reverse .stage-media,
  .is-reverse .stage-copy { order: initial; }
  .evolution-stage,
  .requirements .stage {
    min-height: auto;
    padding-block: var(--space-4);
  }
  #requirements .stage,
  #layers .layer-stage {
    display: block;
  }
  #requirements .stage > .slide-point,
  #layers .layer-stage > .slide-point {
    width: 100%;
  }
  .stage-media .media-image,
  .stage-media-placeholder {
    max-height: none;
    min-height: 320px;
  }

  #object .object-copy {
    max-width: 42ch;
  }

  #layers .layer-stage {
    min-height: auto;
    padding-block: var(--space-4);
  }
  #layers .layer-stage-grid {
    grid-template-columns: 1fr;
    gap: clamp(14px, 3vw, 24px);
  }
  #layers .layer-stage.is-reverse .layer-media,
  #layers .layer-stage.is-reverse .layer-copy {
    order: initial;
  }
  #layers .layer-copy {
    max-width: none;
  }
  #layers .layer-media .media-image {
    max-height: clamp(260px, 48vh, 420px);
  }
}

@media (max-width: 768px) {
  .section-sticky,
  .req-sticky {
    min-height: 72px;
    margin-inline: -12px;
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
    border-radius: 0 0 12px 12px;
  }
  .section-sticky .title,
  .req-sticky .title {
    margin-bottom: 0;
    font-size: clamp(20px, 6vw, 28px);
  }
  #requirements .requirements-intro {
    margin-top: 14px;
  }

  .slide-point {
    padding: 16px;
  }

  .slide-point__text {
    font-size: clamp(16px, 4.8vw, 20px);
  }

  #principles .pill {
    min-height: auto;
    padding: 10px 14px 10px 34px;
  }

  #gesture .stage {
    padding-top: clamp(30px, 8vw, 44px);
    margin-top: clamp(30px, 8vw, 44px);
  }
  #gesture .media-row {
    gap: clamp(12px, 4.2vw, 20px);
  }
  #gesture .gesture-copy {
    max-width: none;
  }
  #gesture .gesture-copy p {
    font-size: clamp(1rem, 4.2vw, 1.1rem);
    line-height: 1.5;
  }

  #object .object-layout {
    gap: clamp(34px, 8vw, 56px);
  }
  #object .object-pair {
    grid-template-columns: 1fr;
    gap: clamp(14px, 3.8vw, 22px);
  }
  #object .object-pair.is-reverse .object-media,
  #object .object-pair.is-reverse .object-copy {
    order: initial;
  }
  #object .object-media .media-image {
    max-height: clamp(220px, 46vh, 360px);
  }
  #object .object-render {
    width: min(86%, 320px);
    bottom: clamp(12px, 3vh, 20px);
    padding: 8px 10px;
  }
  #object .object-render__line {
    font-size: clamp(0.68rem, 2.5vw, 0.86rem);
    letter-spacing: 0.048em;
  }
  #object .object-copy,
  #object .object-subtitle {
    max-width: none;
  }

  #layers .layers-stages {
    gap: clamp(28px, 8vw, 44px);
  }
  #layers .layer-stage {
    padding-top: clamp(30px, 8vw, 44px);
  }
}

@media (max-width: 640px) {
  #gesture .media-row { grid-template-columns: 1fr; }
  #gesture .gesture-visual .media-image {
    max-height: clamp(220px, 48vh, 360px);
  }
  #gesture .before-after {
    max-height: clamp(220px, 48vh, 360px);
  }
  #gesture .before-after__divider {
    width: 54px;
  }
  #gesture .before-after__knob {
    width: 38px;
    height: 38px;
  }
  #gesture .gesture-reaction {
    max-width: min(78%, 284px);
    padding: 8px 10px;
    font-size: clamp(0.84rem, 3.5vw, 0.96rem);
  }
  #gesture .gesture-reaction--overlay {
    right: 10px;
    bottom: 10px;
  }
  #growth .word-field {
    min-height: clamp(420px, 70svh, 540px);
    padding: clamp(6px, 2.2vw, 10px) clamp(6px, 2.6vw, 12px);
  }
  #growth .word-field::before {
    inset: 4% 5% 5%;
    border-radius: 44% / 58%;
  }
  #growth .word {
    max-width: clamp(110px, 34vw, 170px);
    text-align: center;
    line-height: 1.15;
  }
  #growth .word.center {
    font-size: clamp(10px, 3.5vw, 15px);
    letter-spacing: 0.028em;
  }
  #growth .word.periphery {
    font-size: clamp(8px, 2.7vw, 11px);
    letter-spacing: 0.045em;
    opacity: 0.68;
  }
  #growth .center-1 { top: 50%; left: 50%; font-size: clamp(25px, 7.2vw, 34px); font-weight: 780; opacity: 1; z-index: 3; }
  #growth .center-6 { top: 11%; left: 50%; }
  #growth .center-2 { top: 24%; left: 27%; }
  #growth .center-3 { top: 31%; left: 76%; }
  #growth .center-7 { top: 39%; left: 27%; }
  #growth .center-8 { top: 40%; left: 73%; }
  #growth .center-4 { top: 63%; left: 34%; }
  #growth .center-5 { top: 64%; left: 68%; }
  #growth .periphery-1 { top: 19%; left: 23%; }
  #growth .periphery-3 { top: 76%; left: 78%; }
  #growth .periphery-2 { top: 88%; left: 30%; }
  #growth .periphery-4 { top: 89%; left: 72%; }
  #growth .slide-point {
    margin-top: clamp(18px, 6vw, 32px);
  }
  .section-9a .stack {
    --final-track-width: min(20ch, 100%);
    width: 100%;
    justify-items: center;
  }
  .final-message {
    font-size: clamp(28px, 9vw, 44px);
    width: min(14ch, 100%);
    max-width: min(14ch, 100%);
    margin-inline: auto;
    text-align: center;
  }
  .final-support { font-size: clamp(14px, 4.4vw, 18px); }
  .section-9b .container {
    align-items: center;
    justify-content: center;
    min-height: 100svh;
  }
  .final-b-layout {
    padding-top: clamp(var(--space-4), 11vh, var(--space-6));
    padding-bottom: calc(clamp(var(--space-3), 8vh, var(--space-6)) + env(safe-area-inset-bottom));
  }
  .final-anchor {
    width: min(100%, 420px);
    justify-items: center;
    text-align: center;
  }
  .final-logo { width: clamp(126px, 46vw, 178px); }
  .footnote {
    margin-top: var(--space-2);
    max-width: 32ch;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .final-accent::after { animation: none; opacity: 0; }
  #gesture .before-after.is-hinting .before-after__divider { animation: none; }
}

/* ==========================================================
   HERO PATCH v7 — drop-in override (paste at END of styles.css)
   ========================================================== */

:root{
  --hero-pad: clamp(16px, 4vw, 56px);
  --hero-fg: #1f2a33;
  --hero-bg: #fff;
}

/* 0) hero always full height */
#intro.planka-hero{
  min-height: 100svh !important;
  background: var(--hero-bg) !important;
  overflow: hidden !important;
}

/* 1) bg is the only "image layer" */
#intro.planka-hero .planka-hero__bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: right center !important;
}

/* 2) content is overlay, never a separate white block */
#intro.planka-hero .planka-hero__content{
  position: relative !important;
  z-index: 1 !important;

  min-height: 100svh !important;

  padding: var(--hero-pad) !important;
  padding-bottom: calc(var(--hero-pad) + env(safe-area-inset-bottom)) !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  max-width: min(52ch, 48vw) !important;
  background: transparent !important;
}

#intro.planka-hero .planka-hero__title{
  margin: 0 !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
  line-height: .96 !important;
  color: var(--hero-fg) !important;
  font-size: clamp(40px, 5.4vw, 82px) !important;
}

#intro.planka-hero .planka-hero__title-nowrap{
  white-space: nowrap !important;
}

#intro.planka-hero .planka-hero__subtitle{
  margin: 14px 0 0 0 !important;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: rgba(31,42,51,.78) !important;
  font-size: clamp(16px, 1.4vw, 20px) !important;
  line-height: 1.35 !important;
}

/* 3) fades/scrims on BG layer */
#intro.planka-hero .planka-hero__bg::before,
#intro.planka-hero .planka-hero__bg::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
}

/* left fade (desktop/landscape) */
#intro.planka-hero .planka-hero__bg::before{
  opacity: 1 !important;
  /* background: linear-gradient(
    90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 34%,
    rgba(255,255,255,0.85) 44%,
    rgba(255,255,255,0.0) 62%
  ) !important; */
  background: linear-gradient(
    90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 30%,
    rgba(255,255,255,0.85) 37%,
    rgba(255,255,255,0.0) 50%
  ) !important;
}

/* bottom scrim (portrait) default OFF, включим в portrait */
#intro.planka-hero .planka-hero__bg::after{
  opacity: 0 !important;
  /* background: linear-gradient(
    0deg,
    rgba(255,255,255,0.98) 0%,
    rgba(255,255,255,0.86) 22%,
    rgba(255,255,255,0.55) 40%,
    rgba(255,255,255,0.20) 58%,
    rgba(255,255,255,0.00) 78%
  ) !important; */
  background: linear-gradient(
    0deg,
    rgba(255,255,255,1) 25%,
    rgba(255,255,255,0.87) 35%,
    rgba(255,255,255,0.75) 40%,
    rgba(255,255,255,0.2) 60%,
    rgba(255,255,255,0.00) 88%
  ) !important;
}

/* ==========================================================
   PORTRAIT (iPhone)
   ========================================================== */
@media (max-width: 768px) and (orientation: portrait){
  #intro.planka-hero{
    min-height: 100svh !important;
    /* можно ещё добавить dvh как более современное:
       min-height: 100dvh !important; */
  }

  #intro.planka-hero .planka-hero__content{
    padding-bottom: calc(var(--hero-pad) + env(safe-area-inset-bottom)) !important;
    /* без +14px */
  }

  #intro.planka-hero .planka-hero__bg{
    background-image: url("./assets/img/planka_hero_mobile_final.png") !important;

    /* ты уже подобрал удачно — оставляем как “боевую” основу */
    background-size: 220% auto !important;
    background-position: 70% top !important;
  }

  /* portrait: bottom scrim ON, left fade OFF */
  #intro.planka-hero .planka-hero__bg::before{ opacity: 0 !important; }
  #intro.planka-hero .planka-hero__bg::after{ opacity: 1 !important; }

  /* текст вниз */
  #intro.planka-hero .planka-hero__content{
    justify-content: flex-end !important;
    max-width: min(32ch, 70vw) !important;
    padding-bottom: calc(var(--hero-pad) + 14px + env(safe-area-inset-bottom)) !important;
  }

  #intro.planka-hero .planka-hero__title{
    font-size: clamp(34px, 9.2vw, 52px) !important;
  }
}

/* ==========================================================
   iPad portrait — тоже как mobile, но zoom помягче
   ========================================================== */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait){
  #intro.planka-hero .planka-hero__bg{
    background-image: url("./assets/img/planka_hero_mobile_final.png") !important;
    background-size: 170% auto !important;
    background-position: 62% top !important;
  }

  #intro.planka-hero .planka-hero__bg::before{ opacity: 0 !important; }
  #intro.planka-hero .planka-hero__bg::after{ opacity: 1 !important; }

  #intro.planka-hero .planka-hero__content{
    justify-content: flex-end !important;
    max-width: min(46ch, 64vw) !important;
    padding-bottom: calc(var(--hero-pad) + 18px + env(safe-area-inset-bottom)) !important;
  }

  #intro.planka-hero .planka-hero__title{
    font-size: clamp(40px, 5.5vw, 56px) !important;
  }
}

/* ==========================================================
   iPhone landscape / low height
   ========================================================== */
@media (max-height: 520px) and (orientation: landscape){
  #intro.planka-hero .planka-hero__bg{
    background-image: url("./assets/img/planka_hero_desktop_final.png") !important;
    background-size: cover !important;
    background-position: right center !important;
  }

  /* тут нужен левый fade, bottom scrim OFF */
  #intro.planka-hero .planka-hero__bg::before{ opacity: 1 !important; }
  #intro.planka-hero .planka-hero__bg::after{ opacity: 0 !important; }

  #intro.planka-hero .planka-hero__content{
    padding: clamp(10px, 3vw, 28px) !important;
    max-width: min(52ch, 52vw) !important;
  }

  #intro.planka-hero .planka-hero__title{
    font-size: clamp(28px, 4.2vw, 44px) !important;
    line-height: .98 !important;
  }

  #intro.planka-hero .planka-hero__subtitle{
    margin-top: 8px !important;
    font-size: 14px !important;
  }
}

/* ===========================================
   iPhone landscape / low height — NO side gaps
   + push image further right
   + stronger left fade to white
   =========================================== */
@media (max-height: 520px) and (orientation: landscape){

  /* 1) Disable full-bleed 100vw hack here (iOS Safari landscape bug) */
  #intro.planka-hero{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 2) Keep hero full height, but safe for Safari */
  #intro.planka-hero{
    min-height: 100vh !important;
  }

  /* 3) Background: keep desktop asset, push subject to the right */
  #intro.planka-hero .planka-hero__bg{
    background-image: url("./assets/img/planka_hero_desktop_final.png") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: 92% 50% !important; /* more right than 'right center' */
  }

  /* 4) Landscape: left fade ON, bottom scrim OFF */
  #intro.planka-hero .planka-hero__bg::after{
    opacity: 0 !important;
  }

  #intro.planka-hero .planka-hero__bg::before{
    opacity: 1 !important;
    background: linear-gradient(
      90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 40%,
      rgba(255,255,255,0.85) 52%,
      rgba(255,255,255,0.0) 72%
    ) !important;
  }

  /* 5) Text sizing/padding for low height */
  #intro.planka-hero .planka-hero__content{
    padding: clamp(10px, 3vw, 28px) !important;
    max-width: min(52ch, 52vw) !important;
    justify-content: center !important;
  }

  #intro.planka-hero .planka-hero__title{
    font-size: clamp(28px, 4.2vw, 44px) !important;
    line-height: .98 !important;
  }

  #intro.planka-hero .planka-hero__subtitle{
    margin-top: 8px !important;
    font-size: 14px !important;
  }
}