/* =========================================================
   Ecom Mode — Funnel Blueprint landing
   Source of truth: Figma "e-comm"
     • em_page_bridge_mob (390)  → base styles (mobile first)
     • em_page_bridge_des (1440) → @media (min-width: 1024px)
   Values are taken 1:1 from the frames. Desktop sizes ease down
   between 1440 → 1024 via clamp() and are exact at 1440.
   ========================================================= */

/* ---------- Fonts (self-hosted, latin + cyrillic) ---------- */
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/unbounded-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/unbounded-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/unbounded-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/unbounded-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/montserrat-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/montserrat-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/montserrat-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  --c-bg: #000;
  --c-text: #fff;
  --c-muted: #bbb;
  --c-accent: #d2fa7c;
  --c-card: #262626;
  --c-on-accent: #000;

  --f-display: "Unbounded", system-ui, sans-serif;
  --f-body: "Montserrat", system-ui, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
.accent { color: var(--c-accent); }
.nowrap { white-space: nowrap; }
.br-d { display: none; }

/* =========================================================
   MOBILE (Figma: em_page_bridge_mob, 390px)
   ========================================================= */
.page {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 560px;           /* mobile composition caps on tablets */
  margin: 0 auto;
  padding-bottom: 32px;
  overflow-x: clip;
}

/* Header */
.header {
  display: flex;
  justify-content: center;
  padding-top: 32px;
}
.logo { width: 72px; height: 24.317px; }

/* Hero */
.hero {
  position: relative;
  overflow: clip;
  padding: 76px 30px 10px;
  text-align: center;
}
.hero__art {
  position: absolute;
  z-index: 0;
  top: 14px;
  left: calc(100cqw * 1 / 390);
  width: calc(100cqw * 409 / 390);
  aspect-ratio: 409 / 592.646;
  overflow: hidden;
  pointer-events: none;
}
.hero__art picture { display: contents; }
.hero__img {
  position: absolute;
  left: -0.03%;
  top: 0;
  width: 100.06%;
  height: 100%;
  max-width: none;
}
.hero__bag {
  position: absolute;
  left: 68.460%;
  top: 33.214%;
  width: 10.184%;
  height: 7.183%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__bag-rot {
  position: relative;
  flex: none;
  width: 68.42%;
  height: 75.32%;
  transform: rotate(-34.53deg);
}
.hero__bag-rot img {
  position: absolute;
  left: 5.6%;
  top: 4.96%;
  width: 88.79%;
  height: 89.38%;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hero__heading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.eyebrow {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 11px;
  line-height: 14px;
  color: var(--c-muted);
  text-transform: uppercase;
}
.hero__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: min(23px, calc((100cqw - 60px) * 23 / 330));
  line-height: 30px;
  color: var(--c-text);
}
/* Empty "Visual Area" (228px @390) — grows with the artwork so the composition holds */
.hero__visual {
  width: 100%;
  height: calc(100cqw * 592.646 / 390 - 364.646px);
}
.hero__lead {
  width: 100%;
  font-weight: 600;
  font-size: min(16px, calc((100cqw - 60px) * 16 / 330));
  line-height: 21px;
}

/* CTA */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 7px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
  text-decoration: none;
  transition: filter .2s ease, transform .2s ease;
}
.btn__arrow { width: 10px; height: 10px; flex: none; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.cta__note {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: var(--c-muted);
  text-align: center;
}

/* Benefits */
.benefits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 43px 20px 0;
}
.benefits__heading {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  text-align: center;
}
.benefits__title {
  font-weight: 600;
  font-size: min(23px, calc((100cqw - 40px) * 23 / 350));
  line-height: 30px;
}
.benefits__sub {
  font-weight: 500;
  font-size: min(16px, calc((100cqw - 40px) * 16 / 350));
  line-height: 21px;
}
.cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  padding: 0 10px;
}
.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-height: 200px;
  padding: 16px;
  border-radius: 16px;
  background: var(--c-card);
}
.card__icon {
  width: 43px;
  height: 41px;
  border-radius: 9px;
  object-fit: fill;
}
.card__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.card__title {
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
}
.card__desc {
  font-weight: 400;
  font-size: min(16px, calc((100cqw - 92px) * 16 / 298));
  line-height: 21px;
}

/* Final CTA */
.final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 18px 22px 0;
  text-align: center;
}
.final__text {
  width: 100%;
  font-weight: 500;
  font-size: min(14.5px, calc((100cqw - 44px) * 14.5 / 346));
  line-height: 19px;
}

/* =========================================================
   DESKTOP (Figma: em_page_bridge_des, 1440px)
   ========================================================= */
@media (min-width: 1024px) {
  .br-m { display: none; }
  .br-d { display: inline; }

  .page {
    max-width: 1440px;
    padding-bottom: 55.8px;
    --pad: clamp(32px, calc(100cqw * 60 / 1440), 60px);
  }

  .header {
    justify-content: flex-start;
    padding: 56px 0 0 var(--pad);
  }
  .logo { width: 139px; height: 46.945px; }

  /* Hero: content left, artwork pinned to the right edge of the 1440 frame */
  .hero {
    position: static;
    overflow: visible;
    padding: 146.055px 0 0 var(--pad);   /* eyebrow top = 249px */
    text-align: left;
  }
  .hero__art {
    top: 28px;
    left: auto;
    right: 0;
    width: min(543px, calc(100cqw * 543 / 1440));
    aspect-ratio: 543 / 710;
  }
  .hero__img {
    left: -0.03%;
    top: -8.15%;
    width: 100.06%;
    height: 110.64%;
  }
  .hero__bag {
    left: 67.729%;
    top: 28.028%;
    width: 10.681%;
    height: 8.348%;
  }

  .hero__content {
    align-items: flex-start;
    gap: 0;
  }
  .hero__heading { gap: 24.2px; }
  .eyebrow { font-size: 20px; line-height: 1.3; }
  .hero__title {
    font-size: clamp(28px, calc(100cqw * 36 / 1440), 36px);
    line-height: 1.3;
  }
  .hero__visual { display: none; }
  .hero__lead {
    margin-top: 32px;
    font-weight: 500;
    font-size: clamp(20px, calc(100cqw * 24 / 1440), 24px);
    line-height: 1.3;
  }
  .hero .cta {
    align-items: flex-start;
    margin-top: 31.8px;
  }

  .cta { gap: 7.8px; }
  .btn {
    width: 310px;
    height: 52px;
    padding: 0;
    border-radius: 9px;
    font-size: 18px;
    line-height: 1.3;
  }
  .btn__arrow { display: none; }   /* desktop frame has no arrow */  .cta__note { font-size: 18px; line-height: 1.3; }
  .hero .cta__note { text-align: left; }

  /* Benefits */
  .benefits {
    gap: 0;
    padding: 166px 0 0;                  /* H2 top = 768.2px */
  }
  .benefits__heading { gap: 16.1px; }
  .benefits__title {
    font-size: clamp(26px, calc(100cqw * 32 / 1440), 32px);
    line-height: 1.3;
  }
  .benefits__sub {
    font-size: clamp(20px, calc(100cqw * 24 / 1440), 24px);
    line-height: 1.3;
  }
  .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, calc(100cqw * 24 / 1440), 24px);
    margin-top: 39.9px;
    padding: 0 clamp(32px, calc(100cqw * 96 / 1440), 96px);
  }
  .card {
    gap: 16.2px;
    min-height: 224px;
    padding: 20px;
    border-radius: 20px;
  }
  .card__icon { width: 48px; height: 48px; border-radius: 10px; }
  .card__text { gap: 7.8px; }
  .card__title {
    font-size: clamp(20px, calc(100cqw * 22 / 1440), 22px);
    line-height: 1.3;
  }
  .card__desc {
    font-size: clamp(16px, calc(100cqw * 18 / 1440), 18px);
    line-height: 1.3;
  }

  /* Final CTA */
  .final {
    gap: 31.8px;
    padding: 39.8px var(--pad) 0;
  }
  .final__text {
    font-size: clamp(20px, calc(100cqw * 24 / 1440), 24px);
    line-height: 1.3;
  }
}

/* Card copy uses Figma's hard line breaks except on narrow desktops,
   where the 3-column cards are too tight for them */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .br-c { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* =========================================================
   ENTRANCE ANIMATIONS
   Opacity + transform only (no layout impact). Start states apply
   only when JS is running (.js on <html>) and motion is allowed,
   so content stays visible without JS / with reduced motion.
   The hero artwork is never animated or delayed.
   ========================================================= */
:root {
  --ease-premium: cubic-bezier(0.2, 0.8, 0.2, 1);
  --reveal-duration: 700ms;
}

@keyframes em-rise-16 {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero — sequential on load, each element as one block */
  .js .eyebrow,
  .js .hero__title,
  .js .hero__lead,
  .js .hero .cta {
    animation: em-rise-16 var(--reveal-duration) var(--ease-premium) both;
  }
  .js .eyebrow      { animation-delay: 100ms; }
  .js .hero__title  { animation-delay: 300ms; }
  .js .hero__lead   { animation-delay: 650ms; }
  .js .hero .cta    { animation-delay: 900ms; }

  /* Benefit cards — revealed by IntersectionObserver (main.js) */
  .js .card {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity var(--reveal-duration) var(--ease-premium),
      transform var(--reveal-duration) var(--ease-premium);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js .card.is-visible {
    opacity: 1;
    transform: none;
  }
}