/* tarfket — Creator landing, below-hero redesign (2026)
 * --------------------------------------------------------------------------
 * Scope: index.html ONLY, below the unchanged hero. Every selector below is
 * prefixed `.cflow-` so it cannot collide with or override shared/legacy
 * classes in css/home-v2.css, or anything used by brand.html.
 *
 * File map:
 *   1. Shared section rhythm
 *   2. Ako to funguje (4-step journey)
 *   3. Short selling section
 *   4. Product experience preview
 *   5. Final CTA
 *   6. Responsive rules
 *   7. Hero dashboard illustration — mobile-only fix (desktop untouched)
 */

/* ---------- 1. Shared section rhythm ---------- */
.cflow-section {
  background: #fff;
}
.cflow-section + .cflow-section {
  border-top: 1px solid #edf2f8;
}
.cflow-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---------- Live campaign showcase ---------- */
.landing-campaigns-section {
  position: relative;
  overflow: hidden;
  border-top: 1px solid #eee9fb;
  border-bottom: 1px solid #eee9fb;
  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(168, 85, 247, 0.11),
      transparent 30%
    ),
    linear-gradient(180deg, #fff 0%, #faf8ff 100%);
}
.landing-campaigns-head {
  margin-bottom: 30px;
}
.landing-campaigns-head .section-head {
  max-width: 820px;
  margin: 0;
}
.landing-campaigns-kicker-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.landing-campaigns-kicker-row .eyebrow {
  margin: 0;
}
.landing-campaigns-head .section-head p {
  max-width: 650px;
  margin-top: 14px;
  color: var(--copy);
  font-size: 0.96rem;
  line-height: 1.65;
}
.landing-campaigns-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #e2d9f7;
  border-radius: 999px;
  color: #6d28d9;
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.landing-campaigns-count::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #a855f7;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.11);
}
.landing-campaigns-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.landing-campaign-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 330px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e7e0f3;
  border-radius: 22px;
  color: #0b0b12;
  background: #fff;
  box-shadow: 0 18px 48px rgba(57, 40, 89, 0.08);
  text-decoration: none;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.landing-campaign-card:hover {
  transform: translateY(-5px);
  border-color: #c4b5fd;
  box-shadow: 0 26px 58px rgba(76, 47, 124, 0.14);
}
.landing-campaign-card:focus-visible {
  outline: 3px solid rgba(109, 40, 217, 0.24);
  outline-offset: 3px;
}
.landing-campaign-cover {
  position: relative;
  display: flex;
  min-height: 132px;
  align-items: flex-end;
  padding: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.2), transparent 28%),
    linear-gradient(135deg, #160b2c, #6d28d9 58%, #a855f7);
}
.landing-campaign-cover::after {
  content: "";
  position: absolute;
  right: -38px;
  top: -52px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}
.landing-campaign-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.landing-campaign-cover img + .landing-campaign-cover-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 12%, rgba(11, 11, 18, 0.76));
}
.landing-campaign-type {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  color: #fff;
  background: rgba(11, 11, 18, 0.34);
  backdrop-filter: blur(10px);
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.landing-campaign-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}
.landing-campaign-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #716d7b;
  font-size: 0.74rem;
  font-weight: 700;
}
.landing-campaign-brand-mark {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e6ddf8;
  border-radius: 9px;
  color: #6d28d9;
  background: #f7f4ff;
  font-size: 0.72rem;
  font-weight: 800;
}
.landing-campaign-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.landing-campaign-card h3 {
  margin: 17px 0 10px;
  overflow: hidden;
  color: #0b0b12;
  font-size: 1.14rem;
  line-height: 1.24;
  letter-spacing: -0.025em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.landing-campaign-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
}
.landing-platform-chip {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid #eee9f6;
  border-radius: 999px;
  color: #666170;
  background: #fbfaff;
  font-size: 0.66rem;
  font-weight: 700;
}
.landing-platform-mark {
  position: relative;
  display: inline-grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border-radius: 4px;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
}
.landing-platform-chip.is-instagram .landing-platform-mark {
  color: #fff;
  background: linear-gradient(135deg, #ff7a00, #ff0169 48%, #7638fa);
}
.landing-platform-chip.is-tiktok .landing-platform-mark {
  color: #fff;
  background: #111;
}
.landing-platform-chip.is-youtube .landing-platform-mark {
  width: 17px;
  color: #fff;
  background: #ff0033;
}
.landing-campaign-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #f0ecf6;
}
.landing-campaign-reward small,
.landing-campaign-deadline small {
  display: block;
  margin-bottom: 4px;
  color: #8a8591;
  font-size: 0.62rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}
.landing-campaign-reward strong {
  color: #6d28d9;
  font-size: 1rem;
  line-height: 1.2;
}
.landing-campaign-deadline {
  text-align: right;
}
.landing-campaign-deadline strong {
  color: #393541;
  font-size: 0.76rem;
}
.landing-campaigns-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 26px;
}
.landing-campaigns-footer p {
  margin: 0;
  color: #777381;
  font-size: 0.8rem;
}
.landing-campaigns-status {
  padding: 32px;
  border: 1px solid #e7e0f3;
  border-radius: 20px;
  text-align: center;
  color: #696474;
  background: rgba(255, 255, 255, 0.82);
}
.landing-campaigns-status strong {
  display: block;
  margin-bottom: 7px;
  color: #17131d;
  font-size: 1rem;
}
.landing-campaigns-status .btn {
  margin-top: 16px;
}
.landing-campaign-skeleton {
  min-height: 330px;
  padding: 18px;
  border: 1px solid #ebe6f4;
  border-radius: 22px;
  background: #fff;
}
.landing-campaign-skeleton span,
.landing-campaign-skeleton i,
.landing-campaign-skeleton b {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, #f1edf8, #faf8ff, #f1edf8);
  background-size: 220% 100%;
  animation: landingCampaignPulse 1.4s ease-in-out infinite;
}
.landing-campaign-skeleton span {
  height: 124px;
  margin-bottom: 20px;
}
.landing-campaign-skeleton i {
  width: 34%;
  height: 12px;
  margin-bottom: 14px;
}
.landing-campaign-skeleton b {
  width: 76%;
  height: 22px;
  margin-bottom: 48px;
}
.landing-campaign-skeleton i:last-child {
  width: 54%;
  margin: 0;
}
@keyframes landingCampaignPulse {
  to {
    background-position: -220% 0;
  }
}

/* ---------- 2. Ako to funguje ---------- */
.cflow-steps-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 8px;
}
/* Icons are centered within their column via .cflow-step's align-items.
   With 3 equal columns and a 28px gap, icon-1's center sits at
   (100% - 56px)/6 from the left (half a column's width); icon-3's mirrors
   the same math two columns + two gaps further along. Exact calc(), not
   a naive 1/6-5/6 split, so the line always lands squarely on both. */
.cflow-steps-track::before {
  content: "";
  position: absolute;
  top: 27px;
  left: calc((100% - 56px) / 6);
  right: calc(100% - (2.5 * (100% - 56px) / 3) - 56px);
  height: 2px;
  background: #dde6f7;
  z-index: 0;
}
.cflow-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* All three steps share one look: white circle, purple outline, purple
   glyph. No step is singled out with a filled/glowing treatment. */
.cflow-step-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border: 1px solid rgba(139, 92, 246, 0.34);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 24px rgba(43, 72, 113, 0.08);
  color: var(--blue);
}
/* Glyph sizing for steps 01 and 03. Step 02 draws .platform-badge marks
   instead and is intentionally NOT affected by either variable below.
   ---> TO RESIZE THE ICONS, CHANGE ONLY THESE TWO VARIABLES (and their
        counterparts in the max-width:760px block near the end of this
        file). Nothing else needs touching. <---
   The step-03 banknote gets its own value because it is wide and short
   while the step-01 mark is nearly square, so matching box sizes would
   not look like matching icons. Do not push either past ~52px or the
   glyphs start crowding the ring. */
.cflow-step-icon {
  --cflow-glyph-size: 44px;
  --cflow-stroke: 1.6;
}
.cflow-step-icon.is-cash {
  --cflow-cash-size: 48px;
  --cflow-cash-stroke: 1.5;
  --cflow-euro-stroke: 1.05;
  --cflow-euro-opacity: 0.85;
}
.cflow-step-icon svg {
  width: var(--cflow-glyph-size);
  height: var(--cflow-glyph-size);
}
.cflow-step-icon.is-cash svg {
  width: var(--cflow-cash-size);
  height: var(--cflow-cash-size);
}
/* Stroke weight is set here, not on the SVG's stroke-width attribute,
   because that attribute is in viewBox units: enlarging the glyph scales
   the line thickness with it, which is what made these marks look heavy.
   Driving it from CSS lets the weight stay put while the glyph grows, and
   lets mobile keep its own value. Lower number = finer line. */
.cflow-step-icon:not(.is-platforms):not(.is-cash) svg > * {
  stroke-width: var(--cflow-stroke);
}
.cflow-step-icon.is-cash .cash-line {
  stroke-width: var(--cflow-cash-stroke);
}
.cflow-step-icon.is-cash .cash-euro path {
  stroke-width: var(--cflow-euro-stroke);
}
/* The euro sits inside the note, so it can be faded to read as an inner
   detail rather than competing with the note's outline. Lower = more
   transparent; below ~0.4 it starts to disappear against the white
   circle. */
.cflow-step-icon.is-cash .cash-euro {
  opacity: var(--cflow-euro-opacity);
}
/* Hovering a step grows its icon slightly. Steps 01/03 also deepen their
   ring; step 02 (.is-platforms) has no chrome of its own, so it just
   scales the floating badge cluster. */
.cflow-step-icon {
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.cflow-step:hover .cflow-step-icon {
  transform: scale(1.09);
}
.cflow-step:hover .cflow-step-icon:not(.is-platforms) {
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 16px 34px rgba(139, 92, 246, 0.24);
}
.cflow-step-num {
  display: block;
  margin-bottom: 14px;
  color: #a2adbd;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* Step 2 — a small floating trio of the real platform marks instead of
   a single icon tile: no circle chrome of its own, three shrunk badges
   arranged in a loose triangle. */
.cflow-step-icon.is-platforms {
  border: 0;
  background: none;
  box-shadow: none;
}
.platform-badge {
  position: absolute;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 14px rgba(43, 72, 113, 0.16);
}
.platform-badge svg {
  width: 100%;
  height: 100%;
  display: block;
}
.platform-ig {
  top: 0;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%) rotate(-4deg);
}
.platform-tt {
  bottom: 0;
  left: 2px;
  z-index: 2;
  transform: rotate(-8deg);
}
.platform-yt {
  bottom: 0;
  right: 2px;
  z-index: 1;
  transform: rotate(7deg);
}

.cflow-step h3 {
  margin-bottom: 8px;
  font-size: 1.08rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: #0b1220;
}
.cflow-step p {
  max-width: 250px;
  margin: 0 auto;
  color: var(--copy);
  font-size: 0.86rem;
  line-height: 1.6;
}
.cflow-steps-cta {
  display: flex;
  justify-content: center;
  margin-top: 52px;
}
.cflow-steps-cta[hidden] {
  display: none;
}

/* ---------- 3. Short selling section ---------- */
.cflow-why {
  position: relative;
  overflow: hidden;
  background: #f8fbff;
  border-top: 1px solid #edf2f8;
  border-bottom: 1px solid #edf2f8;
}
.cflow-why::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -160px;
  left: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(47, 103, 245, 0.08),
    transparent 70%
  );
  pointer-events: none;
}
.cflow-why-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: start;
}
.cflow-why-head {
  position: sticky;
  top: 96px;
}
.cflow-why-head h2 {
  margin-top: 10px;
}
.cflow-why-head p {
  margin-top: 18px;
  max-width: 420px;
  color: var(--copy);
  font-size: 0.95rem;
  line-height: 1.68;
}
.cflow-why-list {
  display: flex;
  flex-direction: column;
}
.cflow-why-point {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid #e6ebf2;
  transition: padding-left 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cflow-why-list .cflow-why-point:first-child {
  padding-top: 0;
}
.cflow-why-list .cflow-why-point:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.cflow-why-point:hover {
  padding-left: 6px;
}
.cflow-why-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--blue-soft);
  color: var(--blue);
}
.cflow-why-icon svg {
  width: 22px;
  height: 22px;
}
.cflow-why-point b {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
  font-weight: 750;
  color: #0b1220;
}
.cflow-why-point p {
  margin: 0;
  max-width: 460px;
  color: var(--copy);
  font-size: 0.86rem;
  line-height: 1.62;
}

/* ---------- 4. Product experience preview ---------- */
.cflow-preview-head {
  max-width: 640px;
  margin-inline: auto;
}
.cflow-preview-head p {
  margin-top: 14px;
  color: var(--copy);
  font-size: 0.94rem;
}
.cflow-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 18px;
  margin-top: 56px;
}
.cflow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b9c6dd;
  font-size: 1.1rem;
}
.cflow-panel {
  display: flex;
  flex-direction: column;
  min-height: 236px;
  padding: 20px;
  border: 1px solid #e0e7f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(43, 72, 113, 0.06);
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.cflow-panel:hover {
  transform: translateY(-6px);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 26px 54px rgba(109, 40, 217, 0.16);
}
.cflow-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cflow-panel-head b {
  font-size: 0.86rem;
  font-weight: 750;
  color: #0b1220;
}
.cflow-panel-badge {
  padding: 4px 9px;
  border-radius: 99px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cflow-panel-badge.success {
  background: #e7f8ee;
  color: #1f9d54;
}

/* Panel 1 — Kampane */
.cflow-campaign-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  background: #f8fbff;
}
.cflow-platform-tags {
  display: flex;
  gap: 6px;
}
.cflow-platform-tags span {
  padding: 3px 8px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e6ebf2;
  color: #556279;
  font-size: 0.62rem;
  font-weight: 700;
}
.cflow-campaign-row strong {
  font-size: 0.82rem;
  color: #0b1220;
}
.cflow-campaign-row small {
  color: #8a94a4;
  font-size: 0.7rem;
}
.cflow-mini-btn {
  align-self: flex-start;
  margin-top: auto;
  padding: 9px 14px;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 750;
}

/* Panel 2 — Môj obsah */
.cflow-content-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #ece4fb;
  border-radius: 12px;
  background: var(--blue-soft);
}
.cflow-content-thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--purple-electric), var(--blue));
}
.cflow-content-row div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cflow-content-row strong {
  font-size: 0.82rem;
  color: #0b1220;
}
.cflow-content-row small {
  color: #8a94a4;
  font-size: 0.68rem;
}
.cflow-tracking-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 60px;
  margin-top: auto;
  padding-top: 14px;
}
.cflow-tracking-bars i {
  flex: 1;
  height: 34%;
  border-radius: 3px 3px 1px 1px;
  background: #e5d9fb;
}
.cflow-tracking-bars i:nth-child(2) {
  height: 55%;
}
.cflow-tracking-bars i:nth-child(3) {
  height: 46%;
  background: var(--blue);
}
.cflow-tracking-bars i:nth-child(4) {
  height: 70%;
}
.cflow-tracking-bars i:nth-child(5) {
  height: 60%;
  background: var(--purple-mid);
}

/* Panel 3 — Výplata */
.cflow-payout-amount {
  display: flex;
  flex-direction: column;
  padding: 14px;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  background: #f8fbff;
}
.cflow-payout-amount small {
  color: #8a94a4;
  font-size: 0.68rem;
}
.cflow-payout-amount b {
  margin-top: 6px;
  color: #0b1220;
  font-size: 1.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cflow-payout-meter {
  height: 6px;
  margin-top: 14px;
  border-radius: 99px;
  background: #e6ebf2;
  overflow: hidden;
}
.cflow-payout-meter i {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--blue), #7ca1fb);
}
.cflow-payout-amount p {
  margin: auto 0 0;
  padding-top: 14px;
  color: #8a94a4;
  font-size: 0.72rem;
  line-height: 1.5;
}

/* The hero button was sized for text PLUS a trailing arrow: centred via
   justify-content: space-between, a fixed 180px width, and padding that
   is wider on the left (21px) than the right (18px) to balance the arrow.
   With the arrow gone all three fight the shorter label — it sat left of
   centre in a box far too wide for it. Let the button hug its text with
   even padding instead.
   Kept here rather than edited in home-v2.css because brand.html shares
   those rules, is also .blue-home, and still uses its arrow. */
.blue-home .hero-actions .btn-lg {
  justify-content: center;
  padding-inline: 24px;
}
@media (min-width: 761px) {
  .blue-home:not(.brand-home) .hero-copy .hero-actions .btn {
    width: auto;
    min-width: 0;
  }
}

/* ---------- 5. Final CTA (reuses .final-cta / .cta-orb) ----------
   .final-cta only appears on index.html, and this file loads after
   home-v2.css, so these override its .blue-home rules on equal
   specificity. The panel used to be one flat dark gradient with a plain
   white button; the button now carries the page's brand gradient, which
   also lights up the skewed shine sweep home-v2.css already defines on
   .blue-home .btn-primary::after. */
.blue-home .final-cta {
  position: relative;
  background:
    radial-gradient(
      68% 120% at 50% -12%,
      rgba(168, 85, 247, 0.26),
      transparent 62%
    ),
    radial-gradient(
      52% 95% at 10% 108%,
      rgba(109, 40, 217, 0.3),
      transparent 66%
    ),
    linear-gradient(135deg, #0b0b12, #1b1028 55%, #140c1e);
}
/* Hairline along the top edge, so the panel reads as a lit surface and
   gets a clean seam against the white section above it. */
.blue-home .final-cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(168, 85, 247, 0.6),
    transparent
  );
}
.blue-home .final-cta > .container {
  position: relative;
  z-index: 1;
}
/* The official mark replaces the old letter-in-a-tile. The mark is
   itself a purple gradient T, so it would disappear on the gradient tile
   this used to have — the tile is dropped and the mark carries a glow of
   its own instead, which also lets it sit larger. */
.blue-home .final-cta .cta-orb {
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 10px 26px rgba(139, 92, 246, 0.5));
}
.blue-home .final-cta .cta-orb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* The button wrapper is flex-direction: column at this breakpoint
   (home-v2.css), where justify-content governs the VERTICAL axis — so a
   button with an explicit width was left-aligned, not centred. Horizontal
   centring in a column flex needs align-items. */
.blue-home .final-cta > .container > div {
  align-items: center;
}
.blue-home .final-cta p {
  max-width: 460px;
  margin-inline: auto;
}
/* No description paragraph here anymore — keep the heading off the buttons. */
.blue-home .final-cta h2 {
  margin-bottom: 27px;
}
.blue-home .final-cta .btn-primary {
  width: 220px;
  background: linear-gradient(135deg, var(--blue), var(--purple-electric));
  box-shadow:
    0 14px 34px -10px rgba(139, 92, 246, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    background 0.25s ease;
}
.blue-home .final-cta .btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(
    135deg,
    var(--purple-mid),
    var(--purple-electric)
  );
  box-shadow:
    0 20px 44px -10px rgba(168, 85, 247, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
@media (prefers-reduced-motion: reduce) {
  .blue-home .final-cta .btn-primary {
    transition: none;
  }
  .blue-home .final-cta .btn-primary:hover {
    transform: none;
  }
}

/* ---------- 6. Responsive ---------- */
@media (max-width: 1000px) {
  .landing-campaigns-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 3 columns still have comfortable room down to the 760px mobile
     breakpoint, so no intermediate 2-up/1-alone tablet layout is needed. */
  .cflow-why-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cflow-why-head {
    position: static;
    max-width: 640px;
  }
  .cflow-flow {
    grid-template-columns: 1fr;
  }
  .cflow-arrow {
    transform: rotate(90deg);
    margin-block: -4px;
  }
}
@media (max-width: 760px) {
  .landing-campaigns-head {
    margin-bottom: 24px;
  }
  .landing-campaigns-kicker-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }
  .landing-campaigns-head .section-head p {
    font-size: 0.88rem;
  }
  .landing-campaigns-grid {
    grid-template-columns: 1fr;
  }
  .landing-campaign-card,
  .landing-campaign-skeleton {
    min-height: 310px;
  }
  .landing-campaigns-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .landing-campaigns-footer .btn {
    justify-content: center;
    width: 100%;
  }
  .cflow-steps-track {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .cflow-steps-track::before {
    display: none;
  }
  /* Mobile ring is 48px instead of 56px, so both glyphs scale down with
     it in the same proportion as the desktop values above.
     Line weight is deliberately left at the original heavier values: the
     glyphs are already smaller here, so the desktop's finer stroke would
     look washed out. Step 01 and the banknote are kept at a similar
     rendered weight so the row stays consistent — if you ever thin one on
     mobile, thin the other by the same amount. Only the euro is faded
     further, since at this size its arc and bars sit closer together. */
  .cflow-step-icon {
    width: 48px;
    height: 48px;
    --cflow-glyph-size: 36px;
    --cflow-stroke: 2.1;
  }
  .cflow-step-icon.is-cash {
    --cflow-cash-size: 40px;
    --cflow-cash-stroke: 1.9;
    --cflow-euro-stroke: 1.3;
    --cflow-euro-opacity: 0.85;
  }
  .platform-badge {
    width: 21px;
    height: 21px;
  }
  /* Dropping the 236px min-height also removes the slack that
     .cflow-mini-btn and .cflow-tracking-bars rely on: both are pinned to
     the panel's foot with margin-top:auto, which needs leftover space to
     resolve to anything. With the panel shrunk to its content that auto
     becomes 0 and they sit flush against the box above them, reading as
     an overlap. Give them a real gap at this breakpoint instead. */
  .cflow-panel {
    min-height: 0;
  }
  .cflow-mini-btn,
  .cflow-tracking-bars {
    margin-top: 16px;
  }
  .cflow-why::before {
    width: 320px;
    height: 320px;
    top: -100px;
    left: -100px;
  }
  .cflow-why-point {
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 20px 0;
  }
  .cflow-why-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .cflow-why-icon svg {
    width: 18px;
    height: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cflow-panel,
  .cflow-why-point,
  .cflow-step-icon,
  .landing-campaign-card {
    transition: none;
  }
  .landing-campaign-skeleton span,
  .landing-campaign-skeleton i,
  .landing-campaign-skeleton b {
    animation: none;
  }
  .cflow-step:hover .cflow-step-icon,
  .cflow-panel:hover {
    transform: none;
  }
}

/* ---------- 7. Hero dashboard illustration — MOBILE ONLY fix ----------
 * Desktop hero geometry in css/home-v2.css is untouched by this file.
 * Below 760px the embedded dashboard iframe (experiment/index.html) was
 * being stretched into a box far smaller than the 720x510 canvas its
 * layout is tuned for, so its sidebar/stat-card content reflowed into a
 * cramped, overlapping mess. Instead of resizing/reflowing that shared
 * iframe (which would also affect the Brand hero), we keep the iframe at
 * its native, desktop-proven 720x510 size and scale the whole thing down
 * with a CSS transform, centered inside the existing (untouched) mobile
 * shell box. The rendered dashboard is now always the same clean layout
 * as desktop, just shown as a smaller, sharp, fully interactive miniature.
 */
@media (max-width: 760px) {
  .hero-dashboard-shell {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-dashboard-shell iframe {
    flex-shrink: 0;
    width: 720px;
    height: 510px;
    transform-origin: center;
    transform: scale(0.65);
  }
}
@media (max-width: 480px) {
  .hero-dashboard-shell iframe {
    transform: scale(0.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-dashboard-shell iframe {
    transition: none;
  }
}