/* =============================================
   LAVIJU PRADINIS PUSLAPIS — landing layer
   Builds on /styles.css (tokens, nav, buttons, phone mockup, footer)
   and the editorial layer in /blog/blog.css (pastels, stickers,
   reveals, hero stage, notes, numbers, CTA). Only what the
   landing page adds lives here.
   ============================================= */

.pill--sky { background: var(--sky-2); color: var(--sky-ink); }
.pill--peach { background: var(--peach-2); color: var(--peach-ink); }
.pill--butter { background: var(--butter-2); color: var(--butter-ink); }
.pill--sage { background: var(--sage-2); color: var(--sage-ink); }
.pill--lilac { background: var(--lilac-2); color: var(--lilac-ink); }

/* =============================================
   HERO
   ============================================= */
.h-hero .b-hero__title {
  font-size: clamp(36px, 9.4vw, 70px);
}

@media (min-width: 901px) {
  .h-hero .b-hero__title {
    font-size: clamp(46px, 5.2vw, 76px);
  }
}

.h-hero .b-hero__lede strong {
  color: var(--text);
  font-weight: 700;
}

/* The old centred hero rules in styles.css still target .store-links */
.h-hero .store-links {
  justify-content: flex-start;
}

.h-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 22px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  list-style: none;
}

.h-trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.h-trust svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  padding: 4px;
  border-radius: 50%;
  background: var(--sage-2);
  fill: none;
  stroke: var(--sage-ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.js .h-trust {
  opacity: 0;
  transform: translateY(18px);
  animation: fadeInUp 0.9s var(--ease-out) 1.1s forwards;
}

/* Stage: the real app screen, surrounded by the blog's watercolor stickers */
.layer--phone {
  z-index: 2;
}

.h-phone {
  position: relative;
  width: 100%;
  aspect-ratio: 304 / 608;
  container-type: inline-size;
  rotate: -2.5deg;
}

.h-phone .phone-mockup {
  --phone-s: 0.73;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--phone-s));
  transform-origin: 0 0;
}

/* Scale the fixed 304px mockup to whatever width its layer gets */
@supports (width: calc(100cqw * tan(atan2(1px, 1px)))) {
  .h-phone .phone-mockup {
    --phone-s: tan(atan2(100cqw, 304px));
  }
}

.h-phone .phone-mockup__frame {
  box-shadow:
    0 50px 90px -30px rgba(23, 39, 62, 0.45),
    0 12px 34px rgba(23, 39, 62, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.36),
    inset 0 0 0 3px rgba(6, 12, 20, 0.88);
}

.float-card__avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 11px;
  background: linear-gradient(145deg, #6f9ed8, #4a7fd4);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.h-stage .float-card,
.h-stage .talk-bubble {
  transform-origin: 0 50%;
}

@media (max-width: 1180px) {
  .h-stage .float-card,
  .h-stage .talk-bubble {
    transform: scale(0.88);
  }
}

/* Narrow desktops: the stage shrinks, keep the right-hand card on screen */
@media (min-width: 901px) and (max-width: 1060px) {
  .hero-stage .h-float-note {
    --x: 55% !important;
  }
}

/* ---------- Phone screen: mirrors the parent home screen of the app ---------- */
.h-phone .mockup-app-header {
  margin-bottom: 11px;
}

.h-phone .mockup-greeting {
  font-size: 17px;
}

.mockup-tagline {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 7.5px;
  font-weight: 600;
}

.mockup-daily {
  margin-bottom: 9px;
  padding: 12px 13px 13px;
}

.mockup-daily__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.16);
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.mockup-daily__pill svg {
  width: 7px;
  height: 7px;
}

.mockup-daily__title {
  max-width: 68%;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
}

.mockup-daily__sub {
  margin: 5px 0 9px;
  font-size: 7.5px;
  opacity: 0.86;
}

.mockup-daily__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--primary-dark);
  font-size: 7.5px;
  font-weight: 800;
}

.mockup-daily__icon {
  position: absolute;
  top: 30px;
  right: 13px;
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.9);
}

.mockup-card-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(212, 224, 239, 0.72);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(48, 70, 101, 0.055);
}

.mockup-card-row__icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--primary-ultralight);
  color: var(--primary);
}

.mockup-card-row__icon svg {
  width: 15px;
  height: 15px;
}

.mockup-card-row__copy {
  flex: 1;
  min-width: 0;
}

.mockup-card-row__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  color: var(--text);
  font-size: 8.5px;
  line-height: 1.3;
}

.mockup-card-row__line b {
  font-weight: 800;
}

.mockup-card-row__line span {
  color: var(--primary);
  font-size: 7px;
  font-weight: 800;
}

.mockup-card-row__line strong {
  color: var(--primary);
  font-size: 9px;
  font-weight: 800;
}

.mockup-card-row__line--sub {
  margin-top: 1px;
}

.mockup-card-row__line--sub span {
  color: var(--text-secondary);
  font-weight: 600;
}

.mockup-streak {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.mockup-streak svg {
  width: 7px;
  height: 7px;
  color: var(--primary);
}

.mockup-card-row .mockup-progress {
  height: 4px;
  margin-top: 5px;
  background: var(--primary-ultralight);
}

.mockup-card-row .mockup-progress span {
  box-shadow: none;
}

.mockup-progress--level span {
  width: 58%;
  background: var(--primary);
}

.mockup-progress--child span {
  width: 72%;
  background: linear-gradient(90deg, var(--primary), #79A9DE);
}

.h-phone .mockup-activity {
  margin-bottom: 7px;
}

.mockup-activity-done {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #18794E;
  color: #fff;
}

.mockup-activity-done svg {
  width: 10px;
  height: 10px;
}

.js .mockup-activity-done {
  scale: 0;
  animation: popIn 0.6s var(--ease-spring) 2.2s forwards;
}

.mockup-tabbar--five {
  grid-template-columns: repeat(5, 1fr);
  padding: 9px 8px 13px;
}

/* =============================================
   FEATURES — bento of product cards
   ============================================= */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.feat {
  min-width: 0;
}

.feat--wide {
  grid-column: span 2;
}

.feat--banner {
  grid-column: 1 / -1;
}

.feat__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}

.feat__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 60px -30px rgba(30, 42, 58, 0.32);
}

/* Non-link cards get the same sticker hover as the blog's linked cards */
.feat__card:hover .art__blob {
  transform: rotate(8deg) scale(1.04);
  border-radius: 54% 46% 42% 58% / 52% 58% 42% 48%;
}

.feat__card:hover .art__stk:nth-of-type(odd) { translate: 0 -6px; scale: 1.04; }
.feat__card:hover .art__stk:nth-of-type(even) { translate: 0 -3px; scale: 1.06; }

.feat__media {
  aspect-ratio: 4 / 3;
}

.feat__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 26px;
}

.feat__title {
  color: var(--text);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
}

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

.feat--wide .feat__card,
.feat--banner .feat__card {
  flex-direction: row;
}

.feat--wide .feat__media {
  flex: 1.4;
  min-height: 360px;
  aspect-ratio: auto;
}

.feat--wide .feat__body {
  flex: 1;
  justify-content: center;
  padding: 32px;
}

.feat--wide .feat__title,
.feat--banner .feat__title {
  font-size: clamp(24px, 2.4vw, 32px);
}

.feat--wide .feat__text,
.feat--banner .feat__text {
  font-size: 16px;
}

.feat__list {
  display: grid;
  gap: 9px;
  margin-top: 8px;
  list-style: none;
}

.feat__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.feat__list li::before {
  content: '';
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--butter-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23775800' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- Little product UIs painted into the art ---------- */
.mini-act,
.mini-steps,
.mini-msg,
.mini-media,
.mini-chip {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
}

.mini-act {
  display: flex;
  align-items: center;
  gap: 2.6cqmin;
  width: 70%;
  padding: 2.4cqmin 3cqmin 2.4cqmin 2.4cqmin;
  border: 1px solid rgba(213, 225, 240, 0.86);
  border-radius: 4.6cqmin;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 40px -18px rgba(39, 62, 94, 0.35);
}

.mini-act--second {
  width: 66%;
}

.mini-act__icon {
  display: grid;
  place-items: center;
  width: 9.5cqmin;
  height: 9.5cqmin;
  flex-shrink: 0;
  border-radius: 3cqmin;
  background: #e8f0fb;
  color: #3f73c2;
}

.mini-act__icon--teal {
  background: #e5f3f5;
  color: #438f9f;
}

.mini-act__icon svg,
.h-act__icon svg {
  width: 55%;
  height: 55%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-act__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.mini-act__copy small {
  color: var(--text-tertiary);
  font-size: clamp(8px, 2.7cqmin, 12px);
  font-weight: 700;
  white-space: nowrap;
}

.mini-act__copy b {
  color: var(--text);
  font-size: clamp(10px, 3.7cqmin, 15px);
  font-weight: 800;
  white-space: nowrap;
}

.mini-act__done {
  display: grid;
  place-items: center;
  width: 7.5cqmin;
  height: 7.5cqmin;
  margin-left: auto;
  flex-shrink: 0;
  border-radius: 50%;
  background: #18794E;
  color: #fff;
}

.mini-act__done svg {
  width: 58%;
  height: 58%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mini-steps {
  display: grid;
  gap: 2.8cqmin;
  width: 58%;
  padding: 3.4cqmin;
  border-radius: 4.6cqmin;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 40px -18px rgba(39, 62, 94, 0.35);
}

.mini-steps__row {
  display: grid;
  gap: 1.3cqmin;
}

.mini-steps__row b {
  color: var(--text);
  font-size: clamp(9px, 3.1cqmin, 13px);
  font-weight: 800;
  line-height: 1.2;
}

/* Six segments, filled up to --v */
.mini-steps__row i {
  position: relative;
  display: block;
  height: max(7px, 2.6cqmin);
  overflow: hidden;
  background: color-mix(in srgb, var(--c) 16%, #fff);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 6 - 3px), transparent 0 calc(100% / 6));
  mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 6 - 3px), transparent 0 calc(100% / 6));
}

.mini-steps__row i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c);
  transform: scaleX(calc(var(--v) / 6));
  transform-origin: 0 50%;
  transition: transform 0.9s var(--ease-out) calc(0.45s + var(--d) * 0.15s);
}

.mini-msg {
  display: flex;
  align-items: center;
  gap: 2cqmin;
  max-width: 58%;
  padding: 2.4cqmin 3.4cqmin 2.4cqmin 2.4cqmin;
  border-radius: 4.6cqmin 4.6cqmin 4.6cqmin 1.4cqmin;
  background: #fff;
  color: var(--text);
  font-size: clamp(10px, 3.4cqmin, 14px);
  font-weight: 800;
  line-height: 1.25;
  box-shadow: 0 18px 36px -18px rgba(39, 62, 94, 0.4);
}

.mini-msg__ava {
  display: grid;
  place-items: center;
  width: 8cqmin;
  height: 8cqmin;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #6f9ed8, #4a7fd4);
  color: #fff;
  font-size: clamp(7px, 2.5cqmin, 11px);
}

.mini-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6cqmin;
  width: 34%;
  padding: 2.2cqmin 2.2cqmin 2.8cqmin;
  border-radius: 3cqmin;
  background: #fff;
  box-shadow: 0 18px 36px -18px rgba(39, 62, 94, 0.45);
  rotate: 6deg;
}

.mini-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: 10%;
  object-fit: contain;
  border-radius: 2cqmin;
  background: var(--peach-1);
}

.mini-media b {
  color: var(--peach-ink);
  font-size: clamp(8px, 2.8cqmin, 12px);
  font-weight: 800;
}

.mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 1.8cqmin;
  padding: 2cqmin 3.4cqmin 2cqmin 2.2cqmin;
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--lilac-ink);
  font-size: clamp(10px, 3.4cqmin, 14px);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 12px 26px -14px rgba(84, 71, 158, 0.45);
}

.mini-chip::before {
  content: '';
  width: 5.2cqmin;
  height: 5.2cqmin;
  min-width: 14px;
  min-height: 14px;
  border-radius: 50%;
  background: var(--lilac-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354479E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% no-repeat;
}

/* The painted UIs arrive once their card has scrolled in */
.js .feat .mini-act,
.js .feat .mini-msg,
.js .feat .mini-media,
.js .feat .mini-chip {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.6s var(--ease-out), translate 0.7s var(--ease-spring);
}

.js .feat.is-in .mini-act,
.js .feat.is-in .mini-msg,
.js .feat.is-in .mini-media,
.js .feat.is-in .mini-chip {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(0.4s + var(--d, 0) * 0.16s);
}

.js .feat:not(.is-in) .mini-steps__row i::after {
  transform: scaleX(0);
}

.js .feat .mini-act__done {
  scale: 0;
  transition: scale 0.5s var(--ease-spring);
}

.js .feat.is-in .mini-act__done {
  scale: 1;
  transition-delay: 1.1s;
}

/* Banner: "Su meile Lietuvai" */
.feat--banner .feat__card {
  border-color: transparent;
  background: linear-gradient(115deg, #F4FAF6, var(--sage-2) 52%, #FFF4D6);
}

.feat__media--banner {
  --blob: #C0E1CB;
  position: relative;
  flex: 0 0 42%;
  min-height: 270px;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: auto;
}

.feat__media--banner .art__blob {
  left: 22%;
  top: 6%;
  width: 52%;
  opacity: 0.8;
}

.feat__stork,
.feat__oak,
.feat__heart {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 12px 14px rgba(30, 42, 58, 0.16));
}

.feat__stork {
  left: 34%;
  bottom: -5%;
  width: auto;
  height: 104%;
  transform-origin: 50% 100%;
}

.feat__oak {
  left: 10%;
  top: 16%;
  width: 15%;
  rotate: -18deg;
}

.feat__heart {
  left: 66%;
  top: 14%;
  width: 11%;
}

.feat--banner .feat__body {
  justify-content: center;
  max-width: 600px;
  padding: clamp(24px, 3.4vw, 44px);
}

/* =============================================
   PRINCIPLES — the blog's fridge notes, with stickers
   ============================================= */
.h-principles .note {
  padding-top: 28px;
}

.note__num {
  position: absolute;
  top: 18px;
  right: 22px;
  color: var(--note-ink);
  font-family: var(--serif);
  font-size: 30px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  opacity: 0.8;
}

.note__stk {
  width: auto;
  max-width: 112px;
  height: 78px;
  margin: 0 0 20px;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 10px 12px rgba(30, 42, 58, 0.14));
  transform-origin: 30% 90%;
  transition: transform 0.6s var(--ease-spring);
}

.note:hover .note__stk {
  transform: rotate(-6deg) scale(1.08);
}

/* =============================================
   HOW IT WORKS — the blog's sticky story, sky-toned
   ============================================= */
.h-how .why__stage {
  container-type: size;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.92), transparent 58%),
    linear-gradient(165deg, #F5F9FE, #D6E6F9);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    0 50px 90px -50px rgba(53, 101, 176, 0.5);
}

.h-how .why__steps::before {
  background: rgba(42, 85, 153, 0.15);
}

.h-how .why__steps::after {
  background: var(--sky-ink);
}

.h-how .why-step__num {
  color: var(--sky-ink);
}

.h-how .why-step mark {
  background-image: linear-gradient(transparent 58%, var(--sky-3) 58%);
}

.h-how .why-step__hint {
  border-left-color: var(--sky-3);
}

.h-scene {
  font-size: clamp(11px, 2.6cqw, 15px);
}

.h-scene__stk {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 16px 18px rgba(30, 42, 58, 0.16));
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.9s var(--ease-spring);
}

.why-scene.is-active .h-scene__stk {
  opacity: 1;
}

.h-ava {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #d5e6fa, #8fbae8);
  color: var(--primary-darker);
  font-size: 0.82em;
  font-weight: 800;
}

.h-ava--teal {
  background: linear-gradient(145deg, #6f9ed8, #4a7fd4);
  color: #fff;
}

.h-ava--peach {
  background: linear-gradient(145deg, #FCE3D8, #F6C4AE);
  color: var(--peach-ink);
}

.h-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76%;
  padding: 4.4cqw;
  border-radius: 6cqw;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 30px 60px -34px rgba(30, 42, 58, 0.45);
  translate: -50% -50%;
  opacity: 0;
  scale: 0.94;
  transition: opacity 0.5s var(--ease-out), scale 0.7s var(--ease-spring);
}

.why-scene.is-active .h-panel {
  opacity: 1;
  scale: 1;
  transition-delay: 0.12s;
}

.h-panel__head {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin-bottom: 0.9em;
  padding-bottom: 0.9em;
  border-bottom: 1px solid var(--border-light);
}

.h-panel__head img {
  width: 3.6em;
  height: auto;
  flex-shrink: 0;
}

.h-panel__head > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.h-panel__head small {
  color: var(--text-tertiary);
  font-size: 0.74em;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.h-panel__head b {
  color: var(--text);
  font-size: 1.12em;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Scene 1 — invitations */
.h-scene__stk--house {
  left: 5%;
  top: 4%;
  width: 20%;
  transform: translateY(12px) scale(0.9) rotate(-4deg);
}

.why-scene.is-active .h-scene__stk--house {
  transform: rotate(-4deg);
  transition-delay: 0.1s;
}

.h-scene__label {
  position: absolute;
  left: 27%;
  top: 8%;
  display: flex;
  flex-direction: column;
  padding: 0.6em 1em;
  border-radius: 1.2em 1.2em 1.2em 0.4em;
  background: #fff;
  color: var(--text);
  font-size: 1.02em;
  font-weight: 800;
  line-height: 1.25;
  box-shadow: 0 14px 30px -16px rgba(30, 42, 58, 0.35);
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.5s var(--ease-out), translate 0.6s var(--ease-spring);
}

.h-scene__label small {
  color: var(--text-tertiary);
  font-size: 0.8em;
  font-weight: 700;
}

.why-scene.is-active .h-scene__label {
  opacity: 1;
  translate: 0 0;
  transition-delay: 0.3s;
}

.h-invite {
  top: 55%;
}

.h-invite__list {
  display: grid;
  gap: 0.55em;
  list-style: none;
}

.h-invite__list li {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.55em 0.7em;
  border-radius: 1.1em;
  background: var(--bg);
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.45s var(--ease-out), translate 0.6s var(--ease-spring);
}

.why-scene.is-active .h-invite__list li {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(0.45s + var(--d) * 0.3s);
}

.h-invite__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.h-invite__who b {
  color: var(--text);
  font-size: 1em;
  font-weight: 800;
}

.h-invite__who small {
  color: var(--text-tertiary);
  font-size: 0.82em;
  font-weight: 600;
}

/* "Pakviesta" turns into "Prisijungė" */
.h-status {
  display: grid;
  margin-left: auto;
  font-size: 0.78em;
  font-weight: 800;
}

.h-status > span {
  grid-area: 1 / 1;
  justify-self: end;
  padding: 0.35em 0.75em;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: opacity 0.35s ease, scale 0.5s var(--ease-spring);
}

.h-status > span:first-child {
  background: rgba(30, 42, 58, 0.07);
  color: var(--text-tertiary);
}

.h-status > span:last-child {
  background: var(--sage-2);
  color: var(--sage-ink);
  opacity: 0;
  scale: 0.8;
}

.why-scene.is-active .h-status > span:first-child {
  opacity: 0;
  transition-delay: calc(1.4s + var(--d) * 0.45s);
}

.why-scene.is-active .h-status > span:last-child {
  opacity: 1;
  scale: 1;
  transition-delay: calc(1.4s + var(--d) * 0.45s);
}

.h-lock {
  position: absolute;
  left: 50%;
  bottom: 5.5%;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.65em 1.1em;
  border-radius: var(--radius-full);
  background: var(--text);
  color: #fff;
  font-size: 0.9em;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 12px;
  transition: opacity 0.5s var(--ease-out), translate 0.6s var(--ease-spring);
}

.h-lock svg {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: #aaf2cb;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.why-scene.is-active .h-lock {
  opacity: 1;
  translate: -50% 0;
  transition-delay: 2.5s;
}

/* Scene 2 — an activity, done together */
.h-act {
  left: 45%;
  top: 50%;
  width: 70%;
}

.h-act__icon {
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  flex-shrink: 0;
  border-radius: 0.95em;
  background: #e5f3f5;
  color: #438f9f;
}

.h-act__rows {
  display: grid;
  gap: 0.5em;
  list-style: none;
}

.h-act__rows li {
  display: grid;
  gap: 0.1em;
  padding: 0.55em 0.8em;
  border-radius: 0.95em;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 0.9em;
  line-height: 1.4;
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.45s var(--ease-out), translate 0.6s var(--ease-spring);
}

.h-act__rows b {
  color: var(--text);
  font-weight: 800;
}

.why-scene.is-active .h-act__rows li {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(0.4s + var(--d) * 0.22s);
}

.h-done {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.85em;
  padding: 0.5em 1em 0.5em 0.5em;
  border-radius: var(--radius-full);
  background: var(--primary-ultralight);
  color: var(--primary-dark);
  font-size: 0.92em;
  font-weight: 800;
  transition: background 0.4s ease, color 0.4s ease;
}

.h-done__box {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: #fff;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.h-done__box svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.5s var(--ease-out);
}

.why-scene.is-active .h-done {
  background: var(--sage-2);
  color: var(--sage-ink);
  transition-delay: 1.5s;
}

.why-scene.is-active .h-done__box {
  border-color: #18794E;
  background: #18794E;
  transition-delay: 1.5s;
}

.why-scene.is-active .h-done__box svg {
  stroke-dashoffset: 0;
  transition-delay: 1.6s;
}

.h-scene__stk--basket {
  right: 3%;
  bottom: 4%;
  width: 22%;
  transform: translateY(14px) rotate(6deg);
}

.why-scene.is-active .h-scene__stk--basket {
  transform: rotate(6deg);
  transition-delay: 0.3s;
}

.h-bubble {
  position: absolute;
  right: 5%;
  top: 5%;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 1em 0.5em 0.5em;
  border-radius: 1.4em 1.4em 0.4em 1.4em;
  background: #fff;
  color: var(--text);
  font-weight: 800;
  box-shadow: 0 14px 30px -16px rgba(30, 42, 58, 0.35);
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.5s var(--ease-out), translate 0.6s var(--ease-spring);
}

.why-scene.is-active .h-bubble {
  opacity: 1;
  translate: 0 0;
  transition-delay: 2.1s;
}

.h-news {
  position: absolute;
  left: 5%;
  bottom: 6%;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1em;
  border-radius: var(--radius-full);
  background: var(--butter-2);
  color: var(--butter-ink);
  font-size: 0.9em;
  font-weight: 800;
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.5s var(--ease-out), translate 0.6s var(--ease-spring);
}

.h-news svg {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.why-scene.is-active .h-news {
  opacity: 1;
  translate: 0 0;
  transition-delay: 2.6s;
}

/* Scene 3 — achievement steps fill in */
.h-grow {
  top: 48%;
}

.h-grow__list {
  display: grid;
  gap: 0.8em;
  list-style: none;
}

.h-grow__list li {
  display: grid;
  gap: 0.4em;
  counter-reset: v var(--v);
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.45s var(--ease-out), translate 0.6s var(--ease-spring);
}

.why-scene.is-active .h-grow__list li {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(0.3s + var(--d) * 0.15s);
}

.h-grow__list b {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  color: var(--text);
  font-size: 0.95em;
  font-weight: 800;
}

.h-grow__list b::after {
  content: counter(v) ' / 6';
  color: var(--c);
  font-variant-numeric: tabular-nums;
}

.h-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.h-steps i {
  position: relative;
  height: 0.62em;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--c) 14%, #fff);
}

.h-steps i::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.35s var(--ease-out);
}

.h-steps i:nth-child(1) { --k: 1; }
.h-steps i:nth-child(2) { --k: 2; }
.h-steps i:nth-child(3) { --k: 3; }
.h-steps i:nth-child(4) { --k: 4; }
.h-steps i:nth-child(5) { --k: 5; }
.h-steps i:nth-child(6) { --k: 6; }

/* filled when k <= v */
.why-scene.is-active .h-steps i::after {
  transform: scaleX(clamp(0, var(--v) - var(--k) + 1, 1));
  transition-delay: calc(0.6s + var(--d) * 0.15s + var(--k) * 0.12s);
}

.h-scene__stk--seedling {
  left: 4%;
  bottom: 3%;
  width: 15%;
  transform: scale(0.55);
  transform-origin: 50% 100%;
  transition: opacity 0.5s ease, transform 1.4s var(--ease-spring);
}

.why-scene.is-active .h-scene__stk--seedling {
  transform: scale(1);
  transition-delay: 0.5s;
}

.h-scene__stk--heart {
  right: 7%;
  top: 6%;
  width: 10%;
}

.why-scene.is-active .h-scene__stk--heart {
  animation: stkBeat 2.8s ease-in-out 1.6s infinite;
}

.h-cheer {
  position: absolute;
  right: 6%;
  bottom: 6%;
  padding: 0.6em 1.1em;
  border-radius: 1.2em 1.2em 0.4em 1.2em;
  background: #FFE9A8;
  color: var(--text);
  font-size: 1.05em;
  font-weight: 800;
  box-shadow: 0 14px 30px -16px rgba(30, 42, 58, 0.35);
  opacity: 0;
  scale: 0.7;
  rotate: -4deg;
  transition: opacity 0.4s ease, scale 0.6s var(--ease-spring);
}

.why-scene.is-active .h-cheer {
  opacity: 1;
  scale: 1;
  transition-delay: 1.9s;
}

.is-idle .h-scene__stk--heart {
  animation-play-state: paused;
}

/* =============================================
   QUOTE
   ============================================= */
.h-quote__stk {
  width: clamp(80px, 8vw, 108px);
  margin: 0 auto 26px;
}

.h-quote__stk img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 18px rgba(30, 42, 58, 0.15));
}

.h-quote .quote__text {
  max-width: 13em;
  margin: 0 auto;
}

.h-quote + .numbers {
  padding-top: 0;
}

/* =============================================
   NUMBERS — extra visualisations
   ============================================= */
.stat__viz--age {
  position: relative;
  display: block;
}

.stat__viz--age i {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
}

.stat__viz--age i::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #FFE9A8, #A9D8B8 55%, #BCD6F4);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.numbers__card.is-in .stat__viz--age i::after {
  animation: waitFill 1.6s var(--ease-out) 0.3s forwards;
}

.stat__viz--age b {
  position: absolute;
  top: 18px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 700;
}

.stat__viz--age b:first-of-type { left: 0; }
.stat__viz--age b:last-of-type { right: 0; }

.stat__viz--grid {
  display: grid;
  grid-template-columns: repeat(9, 14px);
  gap: 4px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--ease-out) 0.3s;
}

.stat__viz--grid i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: #BCD6F4;
}

.stat__viz--grid i:nth-child(3n + 2) { background: #FFE39A; }
.stat__viz--grid i:nth-child(3n) { background: #A9D8B8; }

.numbers__card.is-in .stat__viz--grid {
  clip-path: inset(0 0 0 0);
}

/* The blog hides these small charts on phones; the landing keeps them */
.h-numbers .stat__viz--dots,
.h-numbers .stat__viz--stairs {
  display: flex;
}

.stat__viz--stairs {
  align-items: flex-end;
  gap: 4px;
  height: 34px;
}

.stat__viz--stairs i {
  width: 16px;
  height: calc(var(--k) * 100% / 6);
  border-radius: 4px 4px 2px 2px;
  background: #FFE9A8;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--ease-spring);
  transition-delay: calc(0.3s + var(--k) * 0.1s);
}

.stat__viz--stairs i:nth-child(1) { --k: 1; }
.stat__viz--stairs i:nth-child(2) { --k: 2; }
.stat__viz--stairs i:nth-child(3) { --k: 3; }
.stat__viz--stairs i:nth-child(4) { --k: 4; }
.stat__viz--stairs i:nth-child(5) { --k: 5; }
.stat__viz--stairs i:nth-child(6) { --k: 6; background: #A9D8B8; }

.numbers__card.is-in .stat__viz--stairs i {
  transform: scaleY(1);
}

.h-numbers__source {
  position: relative;
  display: inline-block;
  margin-top: 24px;
}

/* =============================================
   EDUCATION AREAS
   ============================================= */
.h-domains .b-head__aside .framework-source {
  display: inline-flex;
  margin-top: 14px;
  color: var(--primary);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(53, 101, 176, 0.35);
  text-underline-offset: 4px;
}

.h-domains .b-head__aside .framework-source:hover {
  text-decoration-color: currentColor;
}

.areas {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
}

.area {
  display: flex;
  grid-column: span 2;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(30, 42, 58, 0.04), 0 24px 50px -34px rgba(30, 42, 58, 0.35);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.area:nth-child(n + 4) {
  grid-column: span 3;
}

.js .area[data-reveal] {
  transition:
    opacity 0.9s var(--ease-out),
    translate 0.9s var(--ease-out),
    scale 0.9s var(--ease-out),
    transform 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out);
  transition-delay: var(--rd, 0s), var(--rd, 0s), var(--rd, 0s), 0s, 0s;
}

.area:hover {
  transform: translateY(-6px);
  box-shadow: 0 1px 0 rgba(30, 42, 58, 0.04), 0 34px 60px -30px rgba(30, 42, 58, 0.35);
}

.area:hover .art__blob {
  transform: rotate(8deg) scale(1.04);
  border-radius: 54% 46% 42% 58% / 52% 58% 42% 48%;
}

.area:hover .art__stk:nth-of-type(odd) { translate: 0 -6px; scale: 1.04; }
.area:hover .art__stk:nth-of-type(even) { translate: 0 -3px; scale: 1.06; }

.area__art {
  height: 190px;
}

.area__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 24px;
}

.area__title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.area__title::before {
  content: '';
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--area);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--area) 16%, transparent);
}

.area__count {
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 700;
}

.area__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  list-style: none;
}

.area__chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 5px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--area) 8%, #fff);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.area__chips b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--area);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

/* ---------- "Ką reiškia 6 žingsniai?" staircase ---------- */
.stairs {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 36px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 50px 90px -50px rgba(119, 88, 0, 0.35);
}

.stairs__title {
  color: var(--text);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.stairs__lede {
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.65;
}

.stairs .seg {
  margin-top: 22px;
  background: var(--butter-1);
}

.stairs__flight {
  position: relative;
  height: 250px;
}

.stairs__steps {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  height: 76%;
  list-style: none;
}

.stairs__steps li {
  display: flex;
  align-items: flex-end;
  height: 100%;
}

.stairs__step {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: calc(var(--n) * 100% / 6);
  padding-top: 8px;
  border: 0;
  border-radius: 12px 12px 6px 6px;
  background: var(--butter-2);
  box-shadow: inset 0 -3px 0 rgba(119, 88, 0, 0.1);
  color: var(--butter-ink);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out);
}

.stairs__step:hover {
  background: var(--butter-3);
  transform: translateY(-2px);
}

.stairs__step.is-past {
  background: color-mix(in srgb, var(--area, var(--primary)) 18%, #fff);
  color: var(--area, var(--primary));
}

.stairs__step.is-active {
  background: var(--area, var(--primary));
  box-shadow: none;
  color: #fff;
}

.stairs__climber {
  --col: calc((100% - 30px) / 6);
  position: absolute;
  z-index: 2;
  left: calc((var(--at) - 1) * (var(--col) + 6px) + var(--col) * 0.12);
  bottom: calc(var(--at) * 76% / 6 - 2px);
  width: calc(var(--col) * 0.76);
  height: auto;
  filter: drop-shadow(0 10px 10px rgba(30, 42, 58, 0.18));
  pointer-events: none;
  transition: left 0.6s var(--ease-in-out), bottom 0.6s var(--ease-spring), opacity 0.25s ease;
}

.stairs__climber.is-hopping {
  animation: climberHop 0.6s var(--ease-in-out);
}

.stairs__climber.is-swapping {
  opacity: 0;
}

@keyframes climberHop {
  0%, 100% { translate: 0 0; }
  45% { translate: 0 -26px; }
}

.stairs__panel {
  min-height: 170px;
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 22px;
  background: var(--butter-1);
}

.stairs__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 700;
}

.stairs__kicker b {
  color: var(--text);
}

.stairs__code {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--area, var(--primary));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  transition: background 0.3s ease;
}

.stairs__desc {
  margin-top: 10px;
  color: var(--text);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.45;
}

.stairs__desc.is-fresh {
  animation: popWord 0.45s var(--ease-spring);
}

.stairs__home {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.stairs__home b {
  color: var(--butter-ink);
}

/* =============================================
   FROM THE BLOG
   ============================================= */
.h-blog__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--primary);
  font-size: 16px;
  font-weight: 700;
}

.h-blog__all svg {
  width: 18px;
  height: 18px;
  transition: transform 0.4s var(--ease-out);
}

.h-blog__all:hover svg,
.h-blog__all:focus-visible svg {
  transform: translateX(5px);
}

/* =============================================
   CTA
   ============================================= */
.h-cta .cta__title .serif-accent {
  color: #CFE0F6;
}

.h-cta__stork {
  --r: -3deg;
  left: -30px;
  bottom: -24px;
  width: clamp(78px, 9vw, 118px);
  transform-origin: 50% 100%;
  animation: stkSway 6s ease-in-out infinite;
}

.is-idle .h-cta__stork,
.is-idle .b-cta__stk--sun {
  animation-play-state: paused;
}

/* =============================================
   CONTACT
   ============================================= */
.h-contact {
  padding-top: clamp(64px, 8vw, 104px);
}

.h-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.h-contact__art {
  position: relative;
  height: 150px;
  margin-top: 30px;
}

.h-contact__envelope {
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 150px;
  height: auto;
  rotate: -8deg;
  filter: drop-shadow(0 14px 16px rgba(30, 42, 58, 0.14));
}

.h-contact__mug {
  position: absolute;
  left: 150px;
  bottom: 0;
  width: 104px;
}

.h-contact__mug img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 18px rgba(30, 42, 58, 0.15));
}

.h-contact__list {
  display: grid;
  gap: 14px;
  list-style: none;
}

.person {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 16px;
  padding: 18px 22px 18px 18px;
  border: 1px solid var(--border-light);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.3s ease;
}

.person:hover {
  border-color: var(--border);
  box-shadow: 0 26px 50px -30px rgba(30, 42, 58, 0.35);
  transform: translateY(-4px);
}

.person__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 800;
}

.person__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.person__icon--sky { background: var(--sky-2); color: var(--sky-ink); }
.person__icon--peach { background: var(--peach-2); color: var(--peach-ink); }
.person__icon--sage { background: var(--sage-2); color: var(--sage-ink); }

.person__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.person__who small {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.person__who b {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.person__mail {
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
}

.person__arrow {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s var(--ease-out);
}

.person:hover .person__arrow,
.person:focus-visible .person__arrow {
  transform: translate(3px, -3px);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1100px) {
  .person {
    grid-template-columns: 52px minmax(0, 1fr) 22px;
  }

  .person__mail {
    grid-column: 2;
    grid-row: 2;
    margin-top: -10px;
    font-size: 14px;
  }

  .person__arrow {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 1024px) {
  .feat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feat--wide {
    grid-column: 1 / -1;
  }

  .areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .area,
  .area:nth-child(n + 4) {
    grid-column: auto;
  }

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

  .stairs,
  .h-contact__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .h-how .why__stage-wrap {
    background: linear-gradient(180deg, var(--sky-1) 82%, transparent);
  }

  /* the stacked stage is shorter: give the scenes a little more height */
  .h-how .why__stage {
    aspect-ratio: 1.12 / 1;
    max-height: 44vh;
  }

  .h-contact__art {
    display: none;
  }
}

/* Short stages (stacked layout, small phones): compact scenes */
@container (max-height: 380px) {
  .h-scene {
    font-size: clamp(10px, 3.1cqh, 13px);
  }

  .h-scene__label,
  .h-lock,
  .h-news {
    display: none;
  }

  .h-invite {
    top: 57%;
    width: 72%;
  }

  .h-panel {
    padding: 3.4cqh 4cqw;
  }

  .h-panel__head {
    margin-bottom: 0.6em;
    padding-bottom: 0.6em;
  }

  .h-act__rows li:nth-child(3) {
    display: none;
  }

  .h-grow__list {
    gap: 0.55em;
  }

  .h-grow__list li:nth-child(4) {
    display: none;
  }

  .h-scene__stk--house {
    width: 16%;
  }
}

@media (max-width: 900px) {
  .h-hero .b-hero__visual {
    margin-top: 8px;
  }
}

@media (max-width: 768px) {
  .feat-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .feat--wide .feat__card,
  .feat--banner .feat__card {
    flex-direction: column;
  }

  .feat--wide .feat__media {
    flex: none;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .feat--wide .feat__body {
    padding: 22px 24px 26px;
  }

  .feat__media--banner {
    flex: none;
    min-height: 230px;
  }

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

  .area:last-child {
    grid-column: auto;
  }

  .area__art {
    height: 150px;
  }

  .stairs {
    border-radius: 30px;
  }

  .stairs__flight {
    height: 210px;
  }

  .h-cta__stork {
    left: -10px;
    bottom: -30px;
  }
}

@media (max-width: 640px) {
  .h-trust {
    gap: 8px 14px;
    font-size: 13px;
  }

  /* Narrow stage: the cards frame the phone instead of covering its screen */
  .hero-stage .layer--bubble {
    display: none;
  }

  .hero-stage .h-float-note {
    --x: -3% !important;
    --y: -2% !important;
  }

  .hero-stage .h-float-task {
    --x: -3% !important;
    --y: 82% !important;
  }

  .hero-stage .h-float-week {
    --x: 55% !important;
    --y: 91% !important;
  }

  .h-stage .float-card {
    transform: scale(0.8);
  }

  .float-card {
    padding: 8px 12px 8px 8px;
  }

  .float-card__icon,
  .float-card__avatar {
    width: 30px;
    height: 30px;
  }

  .note__stk {
    height: 64px;
  }

  .stairs__flight {
    height: 190px;
  }

  .stairs .seg {
    display: flex;
    border-radius: 24px;
  }

  .stairs .seg__btn {
    flex: 1 1 auto;
    padding: 9px 14px;
  }

  .stairs__step {
    padding-top: 6px;
    font-size: 13px;
  }

  .stairs__panel {
    min-height: 200px;
    padding: 16px;
  }

  .person {
    gap: 12px;
    padding: 14px 16px 14px 14px;
  }

  .person__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 14px;
  }

  .person {
    grid-template-columns: 44px minmax(0, 1fr) 20px;
  }

  .person__who b {
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  .h-hero .b-hero__title {
    font-size: 34px;
  }
}

/* =============================================
   REDUCED MOTION
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .js .h-trust,
  .js .feat .mini-act,
  .js .feat .mini-msg,
  .js .feat .mini-media,
  .js .feat .mini-chip,
  .js .feat .mini-act__done,
  .js .mockup-activity-done {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    animation: none !important;
  }

  .js .feat:not(.is-in) .mini-steps__row i::after {
    transform: scaleX(calc(var(--v) / 6));
  }

  .h-cta__stork,
  .stairs__climber,
  .stairs__climber.is-hopping,
  .why-scene.is-active .h-scene__stk--heart {
    animation: none !important;
  }

  /* Story scenes: each scene shows its end state at once */
  .h-scene *,
  .h-scene *::before,
  .h-scene *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }

  .stat__viz--age i::after {
    transform: none;
    animation: none !important;
  }

  .stat__viz--grid {
    clip-path: none;
  }

  .stat__viz--stairs i {
    transform: none;
  }
}