/* Customer homepage with a Trex X artwork and catalogue panel. */
body[data-page="index"] {
  --home-ink: var(--bg);
  --home-line: #c0b1ff28;
  --home-accent: #dacbff;
  --home-ease: var(--ease);
}

.offer-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--home-line);
  background:
    radial-gradient(ellipse at 82% 26%, #252043 0%, transparent 55%),
    radial-gradient(ellipse at 10% 0%, #16233a 0%, transparent 52%),
    var(--home-ink);
}

.offer-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px 28px;
  padding-block: calc(var(--header-h) + clamp(43px, 4.5vw, 72px)) clamp(42px, 4.5vw, 65px);
}

.offer-hero-copy {
  position: relative;
  z-index: 1;
}

.offer-hero .offer-label {
  width: fit-content;
  padding: 7px 13px;
  margin-bottom: 23px;
  border: 1px solid #b79bef45;
  border-radius: 99px;
  background: #b5a0f512;
  font-size: 10px;
  letter-spacing: .14em;
}

.offer-hero .offer-label span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.offer-label {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--home-accent);
  text-transform: uppercase;
  margin-bottom: 17px;
}

.offer-label span {
  width: 20px;
  height: 2px;
  background: #b595ff;
  box-shadow: 0 0 10px #ae8eff85;
}

.offer-hero h1 {
  font-size: clamp(47px, 5.55vw, 86px);
  letter-spacing: -.073em;
  line-height: .99;
  margin: 0 0 24px;
}

.offer-hero h1 span,
.offer-hero h1 em {
  display: block;
}

.offer-hero h1 em {
  color: #c5adff;
  font-style: normal;
}

:lang(pl) .offer-hero h1 {
  font-size: clamp(44px, 5.05vw, 76px);
}

.offer-hero-copy > p:not(.offer-label) {
  max-width: 47ch;
  color: #d5d9e9;
  font-size: 17px;
  line-height: 1.75;
}

.offer-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 26px;
  justify-content: flex-start;
  margin-top: 27px;
}

.offer-hero-art {
  position: relative;
  width: min(100%, 586px);
  justify-self: end;
  pointer-events: none;
}

.offer-hero-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 620 / 490;
}

.offer-art-stage {
  position: relative;
  isolation: isolate;
}

.offer-art-stage::before,
.offer-art-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.offer-art-stage::before {
  z-index: -1;
  inset: -8% -14%;
  /* closest-side keeps both glows fading out before the box edge. */
  background:
    radial-gradient(closest-side at 55% 48%, #8258f145, transparent),
    radial-gradient(closest-side at 70% 72%, #5479df31, transparent);
}

.offer-art-stage::after {
  inset: 10% 7%;
  background: linear-gradient(116deg, transparent 35%, #c4a8ff66 50%, transparent 65%);
  mask-image: radial-gradient(ellipse, #000 4%, transparent 72%);
  opacity: 0;
}

body[data-page="index"] .hero-plan-button {
  min-height: 52px;
  padding-inline: 26px;
}

/* Perspective floor: a faint grid receding toward the horizon behind the art. */
.offer-hero-floor {
  position: absolute;
  inset: auto -20% 0;
  z-index: -1;
  height: 62%;
  pointer-events: none;
  background:
    linear-gradient(90deg, #b9a2ff30 1px, transparent 1px) 50% 0 / 64px 100%,
    linear-gradient(#b9a2ff30 1px, transparent 1px) 0 0 / 100% 44px;
  transform: perspective(520px) rotateX(62deg);
  transform-origin: 50% 100%;
  mask-image: radial-gradient(ellipse 60% 85% at 62% 100%, #000 10%, transparent 72%);
}
.offer-hero::after {
  /* Soft horizon glow where the floor meets the art. */
  content: "";
  position: absolute;
  z-index: -1;
  left: 35%;
  right: -10%;
  bottom: 22%;
  height: 180px;
  pointer-events: none;
  background: radial-gradient(closest-side, #7a55e84d, transparent);
  filter: blur(10px);
}

.hero-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  color: #c3c8dc;
  font-size: 13px;
  font-weight: 500;
}
.hero-assurances li { display: inline-flex; align-items: center; gap: 8px; }
.hero-assurances svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: #9874ff2e;
  fill: none;
  stroke: #d7c6ff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Glass chips floating around the X. */
.hero-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 15px;
  border: 1px solid #d6c6ff2e;
  border-radius: 16px;
  background: linear-gradient(150deg, #2a2546d9, #141a30cc);
  box-shadow: inset 0 1px #f2e9ff26, 0 18px 40px #05061280;
  backdrop-filter: blur(14px);
  white-space: nowrap;
}
.hero-chip strong { display: block; color: #f6f0ff; font-size: 14px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.hero-chip small { display: block; color: #c1bcd6; font-size: 11px; line-height: 1.35; }
.hero-chip-live { top: 12%; left: -4%; }
.hero-chip-quality { top: 46%; right: -2%; display: block; text-align: right; }
.hero-chip-catchup { bottom: 6%; left: 6%; }
.hero-chip-catchup svg { width: 20px; height: 20px; fill: none; stroke: #cdb6ff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-chip-catchup small { color: #e8e0fb; font-size: 12px; font-weight: 600; }
.live-dot {
  position: relative;
  flex: 0 0 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff7a9a;
  box-shadow: 0 0 10px #ff7a9acc;
}

/* Slim stats strip: label, then three figures, in a two-layer glass shell. */
.offer-catalogue {
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid #c9b7ff1f;
  border-radius: 26px;
  background: #ffffff06;
  box-shadow: 0 24px 60px #05061266;
}
.offer-catalogue::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: 20px;
  background: radial-gradient(ellipse at 0% 0%, #3a2d66b3, transparent 60%), linear-gradient(150deg, #1d1f3af2, #121629f2);
  box-shadow: inset 0 1px #ede4ff1f;
}
.catalogue-title {
  align-self: stretch;
  display: flex;
  align-items: center;
  width: 12.5rem;
  padding: 16px 26px;
  text-wrap: balance;
  border-inline-end: 1px solid var(--home-line);
  color: #d9ccff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.6;
  text-transform: uppercase;
}

.offer-catalogue-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
}

.offer-catalogue-list > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  min-width: 0;
  padding: 16px clamp(14px, 2.4vw, 32px);
}

.offer-catalogue-list > div + div { border-left: 1px solid var(--home-line); }

.offer-catalogue-list dt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #bfbad3;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.offer-catalogue-list dt svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #c5a5ff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.offer-catalogue-list dd {
  margin: 0;
  color: #f4eeff;
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

/* One vertical rhythm for every home section. */
.offer-section { padding-block: var(--home-gap); }
body[data-page="index"] { --home-gap: clamp(64px, 8vw, 112px); }
body[data-page="index"] #free-trial,
body[data-page="index"] .premium-section { padding-block: var(--home-gap) 0; }


.offer-plan-band {
  background: radial-gradient(ellipse at 70% 0%, #292043 0%, #13172b 55%, #0e1325 100%);
  border-block: 1px solid var(--home-line);
  scroll-margin-top: 15px;
}

.offer-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.offer-plan {
  padding: 24px 19px 20px;
  display: flex;
  flex-direction: column;
}

.offer-plan h3 { font-size: 23px; margin-bottom: 15px; }
.offer-plan small { display: block; color: #bdc3d7; font-size: 11px; margin-block: 8px 20px; }
.offer-plan .button { margin-top: auto; justify-content: space-between; gap: 6px; }
.offer-plan-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px 20px;
  margin-top: 17px;
}
.offer-plan-note p { color: #c6cadb; font-size: 13px; }

.next-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Apps / FAQ link cards. */
.next-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  min-height: 240px;
  padding: clamp(26px, 3.4vw, 42px);
  border-radius: 24px;
}
.next-step:hover { color: inherit; }
.next-step .mini-label { grid-column: 1; color: #d3c4f5; }
.next-step h2, .next-step p { grid-column: 1 / -1; }
.next-step h2 {
  align-self: end;
  margin: 56px 0 10px;
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 800;
  letter-spacing: -.05em;
}
.next-step p { max-width: 40ch; margin: 0; }
.next-step-arrow {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #c9b5ff4d;
  border-radius: 50%;
  color: #e7dcff;
  background: #ffffff0a;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.next-step-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.next-step:hover .next-step-arrow { background: var(--control-fill); border-color: #e8dfff; color: #1d1232; }
.next-step:hover .next-step-arrow svg { transform: translate(2px, -2px); }

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

@media (max-width: 760px) {
  .offer-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .offer-hero-art {
    position: absolute;
    top: 7px;
    right: -9%;
    width: min(76%, 440px);
    opacity: .38;
    mask-image: linear-gradient(90deg, transparent 1%, #000 57%);
  }
}

@media (max-width: 650px) {
  .offer-hero-inner { gap: 29px; padding-block: calc(var(--header-h) + 46px) 43px; }
  .offer-hero h1, :lang(pl) .offer-hero h1 { font-size: clamp(42px, 8.9vw, 61px); margin-bottom: 17px; }
  .offer-hero-copy > p:not(.offer-label) { font-size: 15px; }
  .offer-actions { gap: 12px 15px; margin-top: 22px; }
  .next-steps { grid-template-columns: 1fr; }
  .next-step { min-height: 200px; }
  .offer-plan { padding: 17px 12px 14px; }
  .offer-plan h3 { font-size: 20px; }
}

@media (max-width: 460px) {
  .offer-plan-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 901px) and (max-height: 820px) {
  .offer-hero-inner { padding-block: 34px 42px; }
  .offer-hero-art { max-width: 490px; justify-self: center; }
}
@media (max-width: 1100px) {
  .hero-chip-live { left: 0; }
  .hero-chip-quality { right: 0; }
}
@media (max-width: 760px) {
  .offer-hero-art { top: calc(var(--header-h) + 7px); }
  .hero-chip { display: none; }
  .offer-hero-floor { height: 45%; }
}
@media (max-width: 900px) {
  .offer-catalogue { grid-template-columns: minmax(0, 1fr); }
  .catalogue-title { width: auto; padding: 14px 20px 4px; border: 0; font-size: 11px; }
}
@media (max-width: 560px) {
  .hero-assurances { gap: 8px 16px; margin-top: 24px; font-size: 12px; }
  .offer-catalogue-list { grid-template-columns: minmax(0, 1fr); }
  .offer-catalogue-list > div {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px;
  }
  .offer-catalogue-list > div + div { border-left: 0; border-top: 1px solid var(--home-line); }
  .offer-catalogue-list dd { font-size: 24px; }
}

@media (prefers-reduced-motion: no-preference) {
  .offer-catalogue { animation: trex-hero-arrive 800ms var(--home-ease) 260ms both; }
  .offer-hero-art { animation: trex-art-arrive 900ms var(--home-ease) both; }
  .offer-art-stage::after { animation: trex-art-light 1.4s var(--home-ease) 180ms both; }
  /* Slow idle float once the arrival finishes. */
  .offer-hero-art img { animation: trex-art-float 9s ease-in-out 1s infinite; }
  .offer-hero-copy > * { animation: trex-hero-arrive 800ms var(--home-ease) both; }
  .offer-hero-copy > :nth-child(2) { animation-delay: 60ms; }
  .offer-hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .offer-hero-copy > :nth-child(4) { animation-delay: 180ms; }
  .hero-chip { animation: trex-chip-in 900ms var(--home-ease) both, trex-chip-float 7s ease-in-out infinite; }
  .hero-chip-live { animation-delay: 450ms, 1.4s; }
  .hero-chip-quality { animation-delay: 600ms, 2.6s; }
  .hero-chip-catchup { animation-delay: 750ms, 3.8s; }
  .live-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #ff7a9a;
    animation: trex-live-pulse 1.8s var(--home-ease) infinite;
  }
  .offer-hero-copy > :nth-child(5) { animation-delay: 240ms; }
  @keyframes trex-chip-in { from { opacity: 0; transform: translateY(14px) scale(.94); } }
  @keyframes trex-chip-float { 50% { translate: 0 -8px; } }
  @keyframes trex-live-pulse { to { transform: scale(2.8); opacity: 0; } }
  @keyframes trex-art-float {
    50% { transform: translateY(-12px) rotate(-.6deg); }
  }
  @keyframes trex-hero-arrive {
    from { opacity: 0; transform: translateY(12px); }
  }
  @keyframes trex-art-arrive {
    from { opacity: 0; transform: translate(12px, 8px) scale(.975); }
  }
  @keyframes trex-art-light {
    0% { opacity: 0; transform: translateX(-12%) scale(.97); }
    30% { opacity: .72; }
    100% { opacity: 0; transform: translateX(16%) scale(1.03); }
  }
}

@supports (animation-timeline: scroll(root block)) {
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .offer-art-stage {
      animation: trex-art-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 540px;
    }
    @keyframes trex-art-drift {
      to { transform: translateY(42px) scale(.985); opacity: .62; }
    }
  }
}