/* ============================================================
   Orbuculum — Redesigned hero (first screen)

   Visual source of truth:
     Figma "Public Website | Orbuculum" (FNcRBpE9kZ7i79LaXASSwy)
     node 7126-21137 "Hero Container" — 1920x784, bg #f0f3fa,
     px:40 py:72, content centered, tablet image anchored bottom.

   Figma values used:
     bg                #f0f3fa
     eyebrow           Montserrat Medium 13 / 1.5, #4e5b76
     h1                Plus Jakarta Sans Bold 88 / 1, tracking -2.64px, #090909
     subtitle          Montserrat Medium 20 / 1.5, #494d65, w 700
     CTA               220x56, px 48, radius 999, #2aa7ee, Montserrat SemiBold 16, white
     pill              px 14 / py 8, radius 999, gap 7, text Montserrat SemiBold 13 #2d3141
     check icon        8x6 box, stroke #7FD282 (svg 9.8x7.8 incl. stroke overflow)
     tablet image      1399 wide, bottom-anchored, center +0.5px
   ============================================================ */

.hero-r {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 784px;                          /* Figma: Hero Container h=784 */
  padding: 72px 40px;                     /* Figma: px-[40px] py-[72px] */
  background: #f0f3fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;                       /* tablet image is clipped at node bounds, as in Figma render */
}

/* ---------- Tablet image (Figma: "Image", bottom-anchored, center +0.5px) ---------- */
.hero-r__image {
  position: absolute;
  bottom: 0;
  left: calc(50% + 0.5px);
  transform: translateX(-50%);
  width: 1399px;                          /* Figma: w-[1399px] */
  height: 566px;                          /* visible part of the 733px node (167px hangs below hero) */
  pointer-events: none;
}
.hero-r__image img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Text (Figma: "Text Container" gap 14 / "Text" gap 28 / heading gap 16) ---------- */
.hero-r__content {
  position: relative;                     /* above the image, as in Figma layer order */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 1400px;
}
.hero-r__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  text-align: center;
}
.hero-r__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.hero-r__eyebrow {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;                       /* Montserrat Medium */
  font-size: 13px;
  line-height: 1.5;
  color: #4e5b76;                         /* color/dark-gray-1 */
}
.hero-r__title {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;                       /* Plus Jakarta Sans Bold */
  font-size: 88px;                        /* Jakarta/H1 */
  line-height: 1;                         /* leading-none */
  letter-spacing: -2.64px;                /* -3% */
  color: #090909;
}
.hero-r__subtitle {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;                       /* Montserrat Medium */
  font-size: 20px;                        /* Subtitle Big */
  line-height: 1.5;
  color: #494d65;
  width: 700px;                           /* Figma: w-[700px] */
  max-width: 100%;
}

/* ---------- CTA (Figma: "Block|Buttons" py 24; Atom Button 220x56) ---------- */
.hero-r__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hero-r__cta-row {
  display: flex;
  justify-content: center;
  padding: 24px 0;                        /* Figma: py-[24px] */
  width: 100%;
}
.hero-r__cta {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;                           /* Figma: w-[220px] */
  height: 56px;                           /* Figma: h-[56px] */
  padding: 0 48px;                        /* Figma: px-[48px] */
  border-radius: 999px;                   /* radius/radius-full */
  background: var(--color-list-blue, #2aa7ee); /* color/interactive/color-interactive-primary */
  color: #ffffff;                         /* color/real-white */
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;                       /* Montserrat SemiBold */
  font-size: 16px;
  line-height: 1;                         /* leading-none */
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .4s cubic-bezier(.32, .72, 0, 1);
}
.hero-r__cta:hover { opacity: .9; }       /* hover not in Figma node */

/* ---------- Trust pills (Figma: "Trust variant 1 — Pills", pt 12) ---------- */
.hero-r__pills-row {
  display: flex;
  justify-content: center;
  padding-top: 12px;                      /* Figma: pt-[12px] */
  width: 100%;
}
.hero-r__pills {
  display: flex;
  align-items: center;
  gap: 12px;                              /* Figma: gap-[12px] */
}
.hero-r__pill {
  display: flex;
  align-items: center;
  gap: 7px;                               /* Figma: gap-[7px] */
  padding: 8px 14px;                      /* Figma: px-[14px] py-[8px] */
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;                       /* Montserrat SemiBold */
  font-size: 13px;
  line-height: normal;
  color: #2d3141;                         /* color/dark-gray-3 */
  white-space: nowrap;
}
.hero-r__check {                          /* Figma: check 8x6, svg overflows by stroke (9.8x7.8) */
  position: relative;
  width: 8px;
  height: 6px;
  flex-shrink: 0;
}
.hero-r__check img {
  position: absolute;
  top: -0.9px;
  left: -0.9px;
  width: 9.8px;
  height: 7.8px;
  display: block;
  max-width: none;
}

/* ---------- Fallback for narrow viewports (not in Figma —
     node is a 1920 desktop frame; minimal graceful degradation) ---------- */
@media (max-width: 1100px) {
  .hero-r { height: auto; min-height: 640px; padding: 56px 24px 420px; }
  .hero-r__title { font-size: 56px; letter-spacing: -1.68px; }
}
@media (max-width: 640px) {
  .hero-r { padding: 48px 20px 300px; }
  .hero-r__title { font-size: 38px; letter-spacing: -1.14px; }
  .hero-r__subtitle { font-size: 17px; }
  .hero-r__image { width: 900px; height: 364px; }
  .hero-r__pills { flex-wrap: wrap; justify-content: center; }
}