/* Page sections after the hero, and the background lines shared with the hero. */

/* ---- Background lines ----------------------------------------------------------------------------------
   .stage spans the hero + the problem section. .bg-arcs fills it; its sticky child keeps the lines pinned to
   the viewport while the hero scrolls by, and docks them at the top of .problem (the sticky box is as tall
   as .problem, so they land exactly on its frame), after which they scroll away with it. */
.stage { position: relative; }
.bg-arcs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bg-arcs__stick {
  position: sticky;
  top: 0;
  height: 912px;
  overflow: hidden;
}
.bg-arcs .hero__arcs { transition: opacity 0.9s ease; }
.bg-arcs__color {
  position: absolute;
  top: 0;
  width: 646px;
  height: 912px;
  max-width: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.bg-arcs__color--left { left: -374px; }
.bg-arcs__color--right { left: calc(50% + 439px); }
/* Near the problem section the white lines give way to the blue / brown ones */
.bg-arcs--color .hero__arcs { opacity: 0; }
.bg-arcs--color .bg-arcs__color { opacity: 1; }

/* ---- The problem -------------------------------------------------------------------- */
.problem {
  position: relative;
  height: 912px;               /* the lines dock to this height */
  padding-top: 236px;
}
.problem__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(712px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  text-align: center;
}
.problem .eyebrow { font-weight: 400; }
.problem__title {
  margin-top: 24px;
  font: 400 56px/56px var(--font-serif);
  color: var(--color-text);
}
.problem__lead {
  max-width: 620px;
  margin-top: 32px;
  font-size: 18px;
  line-height: 28px;
  opacity: 0.64;
}
/* ---- Three feature rows (text + photo card, alternating sides) ----------------------------------- */
.feature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 912px;
  padding-inline: 80px;
}
.feature--media-left { flex-direction: row-reverse; }   /* text comes first in the markup */
.feature__text { flex: none; width: 548px; }
.feature .eyebrow { font-weight: 400; }
.feature__title {
  margin-top: 24px;
  font: 400 48px/48px var(--font-serif);
  color: var(--color-text);
}
.feature__lead { margin-top: 24px; line-height: normal; }
.feature__media {
  flex: none;
  width: 624px;
  height: 752px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--color-white);
}
.feature__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- The solution (dark panel in both themes) -------------------------------------------------- */
.how {
  position: relative;
  height: 1864px;
  overflow: hidden;
  background: var(--color-dark-blue);
  color: var(--color-beige);
}
.how__header {
  position: absolute;
  top: 163px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(640px, calc(100% - 2 * var(--gutter)));
  text-align: center;
}
.how .eyebrow { font-weight: 400; color: var(--color-light-blue); }
.how__title {
  margin-top: 24px;
  font: 400 56px/64px var(--font-serif);
}
.how__lead {
  margin-top: 32px;
  font-size: 24px;
  line-height: 32px;
}

/* The oval ring behind the steps: two halves (the Figma export rotates each by 90deg) */
.how__ring {
  position: absolute;
  top: 546px;
  left: 0;
  right: 0;
  height: 1168px;
  pointer-events: none;
}
.how__half {
  position: absolute;
  top: 0;
  width: 824.334px;
  height: 1168px;
}
.how__half--left { right: 50%; }
.how__half--right { left: 50%; }
.how__half img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1168px;
  height: 824.334px;
  max-width: none;
  translate: -50% -50%;
}
.how__half--left img { rotate: 90deg; }
.how__half--right img { rotate: -90deg; }

.how__steps {
  position: absolute;
  top: 580px;
  left: 50%;
  translate: -50% 0;
  width: min(600px, calc(100% - 2 * var(--gutter)));
}
.how__step { position: relative; }
.how__step + .how__step { padding-top: 72px; }        /* 16 + 56 (arrow) */
.how__arrow {
  position: absolute;
  top: 0;
  left: calc(50% - 12px);
  width: 24px;
  height: 56px;
  transform-origin: top;
}
.how__arrow img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  translate: -50% -50%;
  rotate: 90deg;
}
.how__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 40px;
  background: var(--color-dark-blue);
  border: 1px solid var(--color-medium-blue);
}
.how__num { font: 400 32px/normal var(--font-serif); color: var(--color-light-blue); }
.how__name { font-size: 18px; line-height: normal; text-transform: uppercase; color: var(--color-light-blue); }
.how__text { line-height: 24px; color: var(--color-white); }

/* ---- Why Patomy: comparison table ------------------------------------------------------------------------- */
.compare {
  position: relative;
  height: 940px;
  padding-top: 116px;
}
.compare__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(848px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  text-align: center;
}
.compare .eyebrow { font-weight: 400; color: var(--color-accent); }
.compare__title {
  margin-top: 24px;
  font: 400 56px/64px var(--font-serif);
  color: var(--color-text);
}
.compare__lead {
  max-width: 620px;
  margin-top: 32px;
  font-size: 18px;
  line-height: 28px;
  opacity: 0.64;
}
.compare__scroll {
  position: absolute;
  top: 456px;
  left: 212px;
  width: 1116px;
}
.compare__table {
  width: 100%;
  border-collapse: collapse;
  color: #000;
  line-height: 28px;
}
.compare__table th,
.compare__table td {
  height: 49px;
  padding: 0 0 0 64px;
  text-align: left;
  font-weight: 400;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-beige);
}
.compare__table thead { background: var(--color-dark-blue); }
.compare__table thead th,
.compare__table thead td {
  height: 48px;
  font-weight: 500;
  color: var(--color-white);
  background: var(--color-dark-blue);
  border-bottom: 1px solid var(--color-gray);
}
.compare__table tbody th {
  width: 228px;
  padding-left: 24px;
  font-weight: 500;
  border-right: 1px solid var(--color-beige);
}
.compare__table thead td { width: 228px; }
.compare__table th:nth-child(2),
.compare__table td:nth-child(2) { width: 400px; }
.compare__table tbody td:last-child {
  position: relative;
  background: #c0dffe;
}
.compare__table tbody td:last-child img {
  position: absolute;
  top: 50%;
  left: 24px;
  translate: 0 -50%;
}

/* ---- Automated scouting: dotted world map (dark in both themes) ---------------------------------------------- */
.scout {
  position: relative;
  height: 827px;
  overflow: hidden;
  background: var(--color-dark-blue);
  color: var(--color-beige);
}
.scout__header {
  position: absolute;
  top: 68px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 720px;
  text-align: center;
}
.scout__eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-light-blue);
}
.scout__title {
  margin-top: 16px;
  font: 400 52px/52px var(--font-serif);
}
.scout__lead {
  max-width: 660px;
  margin-top: 24px;
  font-size: 16px;
  line-height: 25px;
  opacity: 0.72;
}
.scout__map {
  position: absolute;
  top: 315px;
  left: 140px;
  width: 1160px;
  height: 430px;
}
.scout__map img { display: block; width: 100%; height: 100%; max-width: none; }
.scout__pin {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #afd0f7;
}
.scout__pin--ring::before,
.scout__pin--ring::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
}
.scout__pin--ring::before { width: 26px; height: 26px; border: 2px solid rgba(169, 211, 253, 0.55); }
.scout__pin--ring::after {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}
.scout__pin--match {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--color-white);
  border: 3px solid var(--color-medium-brown);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.06);
}
.scout__tip {
  position: absolute;
  top: 70px;
  left: 359px;
  width: 230px;
  height: 48px;
  padding: 8px 0 0 13px;
  background: var(--color-beige);
  border-radius: 4px;
  box-shadow: -3px 0 0 var(--color-medium-brown), 0 8px 24px rgba(0, 0, 0, 0.3);
  color: var(--color-dark-blue);
}
.scout__tip-label {
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c6270;
  white-space: nowrap;
}
.scout__tip-text { font-size: 13px; font-weight: 500; line-height: 16px; white-space: nowrap; }
.scout__legend {
  position: absolute;
  top: 788px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  gap: 24px;
  font-size: 12px;
  line-height: 20px;
  color: #c4c8d1;
  white-space: nowrap;
}
.scout__legend li { display: flex; align-items: center; gap: 10px; }
.scout__key { width: 8px; height: 8px; border-radius: 50%; background: #afd0f7; }
.scout__key--match { width: 10px; height: 10px; background: var(--color-white); border: 2px solid var(--color-medium-brown); }

/* ---- Heading before the three feature rows ----------------------------------------------------------------- */
.hands {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 488px;
  padding-top: 188px;
  text-align: center;
}
.hands .eyebrow { font-weight: 400; color: var(--color-accent); }
.hands__title {
  margin-top: 24px;
  font: 400 56px/64px var(--font-serif);
  color: var(--color-text);
}

/* ---- Security & control ------------------------------------------------------------------------- */
.security {
  position: relative;
  height: 1099px;
  overflow: hidden;
}
.security__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 380px;
}
.security__intro {
  position: absolute;
  top: 160px;
  left: 60px;
  width: 470px;
}
.security .eyebrow { font-weight: 400; }
.security__title {
  margin-top: 24px;
  font: 400 56px/56px var(--font-serif);
  color: var(--color-text);
}
.security__badges {
  position: absolute;
  top: 245px;
  right: 63.83px;
  display: flex;
  gap: 51.2px;
}
.security__badge { display: block; width: 64px; height: 64px; }

.security__strip {
  position: absolute;
  top: 388px;
  left: 0;
  right: 0;
  display: flex;
}
.security__col {
  flex: 1;
  padding: 32px 40px;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-right: 0;
}
.security__col:first-child { padding-left: 64px; }
.security__col:last-child { padding-right: 64px; border-right: 1px solid var(--color-card-border); }
.security__col h3 {
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-accent);
}
.security__col p { margin-top: 16px; line-height: 24px; }

.security__band {
  position: absolute;
  top: 542px;
  left: 0;
  right: 0;
  height: 557px;
  overflow: hidden;
  background: var(--color-white);
}
.security__band img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- Closing call to action (dark in both themes) ---------------------------------------------------------- */
.cta {
  position: relative;
  height: 380px;
  overflow: hidden;
  background: var(--color-dark-blue);
  color: var(--color-beige);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cta__text {
  position: absolute;
  top: calc(50% + 1px);
  left: 72px;
  width: 616px;
  translate: 0 -50%;
}
.cta__title { font: 400 56px/56px var(--font-serif); }
.cta__lead { margin-top: 16px; font-size: 16px; line-height: 28px; opacity: 0.64; }
.cta__action { position: absolute; top: 121px; right: 80px; }
.cta .btn--primary { border-color: transparent; }
.cta .btn--primary:hover,
.cta .btn--primary:active { border-color: rgba(255, 255, 255, 0.6); }

/* ---- Footer (dark in both themes) --------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  height: 589px;
  overflow: hidden;
  background: var(--color-dark-blue);
  color: var(--color-beige);
}
.site-footer__top { position: absolute; inset: 0 0 auto 0; height: 200px; }
.site-footer__tagline {
  position: absolute;
  top: 48px;
  left: 72px;
  width: 347px;
  font: 400 24px/28px var(--font-serif);
}
.site-footer__links {
  position: absolute;
  top: 48px;
  right: 72px;
  display: flex;
  gap: 104px;
}
.site-footer__col { display: flex; flex-direction: column; gap: 16px; }
.site-footer a { color: var(--color-white); font-size: 14px; white-space: nowrap; text-underline-offset: 3px; }
.site-footer a:hover { text-decoration: underline; }
.site-footer a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.site-footer__mark { position: absolute; inset: 240px 0 0 0; }
.fw { display: block; width: 100%; height: auto; overflow: visible; }
.site-footer__legal {
  position: absolute;
  bottom: 24px;
  display: flex;
  gap: 16px;
  font-size: 14px;
  line-height: normal;
  opacity: 0.48;
}
.site-footer__legal--left { left: 72px; }
.site-footer__legal--right { right: 72px; }

/* Security in dark mode (Figma "Seventh_section_dark_mode") */
:root[data-theme="dark"] .security .eyebrow { color: var(--color-accent); }
:root[data-theme="dark"] .security__title { color: var(--color-white); }
:root[data-theme="dark"] .security__col { border-color: rgba(242, 242, 242, 0.12); }
:root[data-theme="dark"] .security__col p { color: var(--color-white); }

/* ---- Slide-over: a dark section slides up over the light section before it --------------------------------- */
/* The light section is held with its bottom at the bottom of the screen (js/components/slide-over.js sets
   --slide-top) while the dark one scrolls over it; it dims a little as it gets covered (--cover, 0 to 1). */
@media (prefers-reduced-motion: no-preference) {
  .slide { position: relative; }
  [data-slide-prev] {
    position: sticky;
    top: var(--slide-top, 0px);
  }
  [data-slide-prev]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--color-dark-blue);
    opacity: calc(var(--cover, 0) * 0.28);
    pointer-events: none;
  }
  .slide > .how {
    z-index: 4;
    box-shadow: 0 -24px 60px rgba(24, 30, 43, 0.16);
  }
}

/* ---- Reveal when a [data-reveal] block is reached (js/components/reveal.js adds .is-revealed) ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] .line > span {
    transform: translateY(110%);
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--d, 0) * 1ms);
  }
  .js [data-reveal].is-revealed .line > span { transform: none; }
  /* Features: text staggers in like elsewhere; the photo card rises and its image settles from slightly zoomed */
  .js .feature__media {
    opacity: 0;
    transform: translateY(56px);
    transition: opacity 1s ease 150ms, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 150ms;
  }
  .js .feature__media img {
    transform: scale(1.18);
    transition: transform 2.2s cubic-bezier(0.22, 1, 0.36, 1) 150ms;
  }
  .js [data-reveal].is-revealed .feature__media,
  .js [data-reveal].is-revealed .feature__media img { opacity: 1; transform: none; }
  /* Solution: the ring closes in from both sides; each step reveals on its own as you scroll to it */
  .js .how__half { opacity: 0; transition: opacity 1.4s ease, transform 2s cubic-bezier(0.22, 1, 0.36, 1); }
  .js .how__half--left { transform: translateX(-120px) scale(0.96); }
  .js .how__half--right { transform: translateX(120px) scale(0.96); }
  .js .how__arrow { transform: scaleY(0); transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
  .js .how__card {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s ease 250ms, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 250ms;
  }
  .js [data-reveal].is-revealed .how__half,
  .js [data-reveal].is-revealed .how__arrow,
  .js [data-reveal].is-revealed .how__card { opacity: 1; transform: none; }
  /* Security: badges stamp in one by one, the strip wipes open, the photo band drops in */
  .js .security__badge {
    opacity: 0;
    transform: scale(0.7) rotate(-14deg);
    transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(450ms + var(--i, 0) * 110ms);
  }
  .js .security__strip {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.3s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .js .security__band {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.6s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .js .security__band img {
    transform: scale(1.18);
    transition: transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js [data-reveal].is-revealed .security__badge { opacity: 1; transform: none; }
  .js [data-reveal].is-revealed.security__strip,
  .js [data-reveal].is-revealed.security__band { clip-path: inset(0 0 0 0); }
  .js [data-reveal].is-revealed .security__band img,
  .js [data-reveal].is-revealed.security__band img { transform: none; }
  /* Closing CTA + footer: the wordmark builds the way the intro logo did (the mark, then the letters, rise
     through masks) */
  .js .cta__action {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--d, 0) * 1ms);
  }
  .js .site-footer__col li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--d, 0) * 1ms);
  }
  .js .fw__letter,
  .js .fw__mark {
    transform: translateY(262px);
    transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--d, 0) * 1ms);
  }
  .js .fw__mark { transform: translateY(360px); }
  .js .site-footer__legal { opacity: 0; transition: opacity 1s ease 1000ms; }

  .js [data-reveal].is-revealed .cta__action,
  .js [data-reveal].is-revealed .site-footer__col li { opacity: 1; transform: none; }
  .js [data-reveal].is-revealed .fw__letter,
  .js [data-reveal].is-revealed .fw__mark { transform: none; }
  .js [data-reveal].is-revealed .site-footer__legal { opacity: 0.48; }
  /* Comparison table rows rise one after another; the map fades in and its markers pulse */
  .js .compare__table tbody tr {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--d, 0) * 1ms);
  }
  .js .scout__map img,
  .js .scout__tip,
  .js .scout__legend { opacity: 0; transition: opacity 1.4s ease 500ms; }
  .js .scout__pin { opacity: 0; transition: opacity 0.8s ease 1000ms; }
  .js [data-reveal].is-revealed .compare__table tbody tr,
  .js [data-reveal].is-revealed .scout__map img,
  .js [data-reveal].is-revealed .scout__tip,
  .js [data-reveal].is-revealed .scout__legend,
  .js [data-reveal].is-revealed .scout__pin { opacity: 1; transform: none; }
  .scout__pin--ring::before { animation: scout-ring 3.2s ease-out infinite; }
  .scout__pin--ring:nth-of-type(3n)::before { animation-delay: -1.1s; }
  .scout__pin--ring:nth-of-type(3n+1)::before { animation-delay: -2.2s; }
  @keyframes scout-ring {
    0% { scale: 0.7; opacity: 0.9; }
    70%, 100% { scale: 1.25; opacity: 0; }
  }
}