/* ============================================================
   MARQUE — Homepage page-specific styles
   Loads AFTER /assets/brand.css. Section styles only.
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 5vw, 80px);
  overflow: hidden;
}
.hero-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  position: relative;
  z-index: 2;
}
.hero-meta { grid-column: 1 / -1; }

.hero-headline {
  grid-column: 1 / -1;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--t-display);
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--c-blue);
}
.hero-headline .line { display: block; }
.hero-headline .italic-accent {
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.hero-sub {
  grid-column: 1 / -1;
  max-width: 680px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero-sub .lede { max-width: 100%; }
.cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

.hero-visual { grid-column: 1 / -1; margin-top: 16px; }
.hero-visual-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-xl);
  background: var(--c-beige);
  overflow: visible; /* let shape whispers peek beyond image edges */
  isolation: isolate;
}
.hero-skyline { width: 100%; height: 100%; }

/* v1.5: real hero photo + brand-shape accents */
.hero-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 38%;
  border-radius: var(--r-xl);
  box-shadow: 0 1px 0 rgba(0,18,32,0.06), 0 30px 60px -30px rgba(0,18,32,0.22);
}
.hv-shape {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.hv-shape-peach {
  width: 26%;
  aspect-ratio: 1 / 1;
  left: -6%;
  bottom: -7%;
  background: var(--c-peach);
  border-radius: 50% 0 0 0;
  transform: rotate(180deg);
}
.hv-shape-lime {
  width: 14%;
  aspect-ratio: 1 / 1;
  right: -5%;
  top: 10%;
  background: var(--c-lime);
  border-radius: 4px;
}
.hv-shape-pink {
  width: 8%;
  aspect-ratio: 1 / 1;
  left: -3%;
  top: 14%;
  background: var(--c-pastel-pink);
  border-radius: 50%;
}

/* Marquee strip */
.hero-strip {
  grid-column: 1 / -1;
  border-block: 1.5px solid var(--c-charcoal);
  padding-block: 18px;
  margin-top: clamp(8px, 1.5vw, 24px);
}
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  white-space: nowrap;
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-charcoal);
  animation: marquee 38s linear infinite;
}
.marquee-track span { flex-shrink: 0; }
.marquee-track .dot { color: var(--c-rose); }
.marq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-rose);
  flex-shrink: 0;
}
.marq-icon svg { display: block; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (min-width: 900px) {
  /* v1.1: tightened hero grid so sub-copy/CTA sit immediately under the headline
     on the left, with the visual spanning the right column. Headline still spans
     full width so the display type can break naturally. */
  .hero-grid {
    grid-template-columns: 1.15fr 1fr;
    grid-template-areas:
      "meta   visual"
      "head   visual"
      "sub    visual"
      "strip  strip";
    column-gap: 64px;
    row-gap: 0;
  }
  .hero-meta { grid-area: meta; align-self: end; margin-bottom: 0; }
  .hero-headline { grid-area: head; margin-top: 16px; }
  .hero-sub {
    grid-area: sub;
    align-self: start;
    margin-top: clamp(32px, 3vw, 48px); /* tight gap from headline */
    padding-bottom: 16px;
  }
  .hero-visual { grid-area: visual; margin-top: 0; align-self: center; }
  .hero-visual-frame { aspect-ratio: 1 / 1; }
  .hero-photo { aspect-ratio: 1 / 1; }
  .hero-strip { grid-area: strip; margin-top: clamp(32px, 4vw, 56px); }
}
@media (min-width: 1200px) {
  .hero-headline { font-size: clamp(110px, 11vw, 200px); }
}

/* ============================================================
   INTRO BAND
   ============================================================ */
.intro-band {
  position: relative;
  padding: clamp(80px, 10vw, 160px) 0;
  overflow: hidden;
}
.intro-band .display-h { max-width: 18ch; }
.intro-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 920px;
  margin-top: clamp(24px, 3vw, 40px);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
}
.intro-cols p strong { color: var(--c-blue); font-weight: 700; }
@media (min-width: 760px) {
  .intro-cols { grid-template-columns: 2fr 1fr; gap: 64px; }
}

.floater {
  position: absolute;
  border-radius: 0;
  opacity: 0.9;
  pointer-events: none;
}
.f-1 {
  width: clamp(160px, 18vw, 280px);
  aspect-ratio: 1;
  top: 8%; right: -80px;
  background: var(--c-pastel-pink);
  border-radius: 0 0 0 100%;
}
.f-2 {
  width: clamp(80px, 8vw, 140px);
  aspect-ratio: 1;
  bottom: 14%; left: -30px;
  background: var(--c-lime);
  border-radius: 999px;
}

/* ============================================================
   PILLARS
   ============================================================ */
.pillars {
  position: relative;
  padding: clamp(64px, 8vw, 128px) 0;
  background: var(--c-white);
  border-block: 1px solid rgba(0,18,32,0.06);
}
.pillars-head {
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 80px);
}
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
}
@media (min-width: 700px) { .pillar-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pillar-grid { grid-template-columns: repeat(4, 1fr); } }

.pillar {
  position: relative;
  padding: 32px 28px;
  background: var(--c-beige);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
}
.pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px -25px rgba(0,18,32,0.18);
}
.pillar-mark {
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center; justify-content: center;
}
.pillar h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-blue);
}
.pillar p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-charcoal);
}
.pillar-cta {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  justify-content: flex-start;
}

/* ============================================================
   AUDIENCE — Blue section
   ============================================================ */
.section-blue {
  background: var(--c-blue);
  color: var(--c-beige);
  position: relative;
  overflow: hidden;
}

.audience { padding: clamp(80px, 10vw, 160px) 0; }
.audience-head { max-width: 980px; margin-bottom: clamp(48px, 6vw, 96px); }
.audience .display-h { color: var(--c-white); }
.audience-head .lede { margin-top: 24px; }
.works-with {
  margin-top: clamp(32px, 4vw, 56px);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-beige);
  opacity: 0.7;
}

.audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(247,237,237,0.18);
}
.aud-tile {
  position: relative;
  padding: 28px 0;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  border-bottom: 1px solid rgba(247,237,237,0.18);
  transition: padding-left 360ms var(--ease-out);
}
.aud-tile:hover { padding-left: 16px; }
.aud-mark { width: 56px; height: 56px; flex-shrink: 0; }
.aud-tile h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.015em;
  color: var(--c-white);
  line-height: 1.15;
}
.aud-tile p {
  margin-top: 4px;
  font-size: 15px;
  color: var(--c-beige);
  opacity: 0.85;
}
@media (min-width: 700px) {
  .audience-grid { grid-template-columns: 1fr 1fr; column-gap: 64px; }
}
@media (min-width: 1100px) {
  .aud-tile { grid-template-columns: 96px minmax(0, 1fr); padding: 36px 0; }
  .aud-mark { width: 72px; height: 72px; }
}

/* Bottom skyline composition */
/* v1.6: blue-skyline kept on mobile (looks good there), hidden on desktop
   where the wider canvas made the shapes feel oversized. */
.blue-skyline {
  position: relative;
  height: clamp(100px, 12vw, 180px);
  margin-top: clamp(48px, 6vw, 96px);
  margin-inline: var(--gutter);
  max-width: calc(var(--container) - var(--gutter) * 2);
}
.bs { position: absolute; bottom: 0; display: block; }
.bs-1 {
  background: var(--c-pastel-pink);
  border-radius: 100% 0 0 0;
  width: clamp(80px, 10vw, 160px);
  aspect-ratio: 1;
  left: 4%;
}
.bs-2 {
  background: var(--c-rose);
  width: clamp(60px, 7vw, 100px);
  aspect-ratio: 1;
  border-radius: 999px;
  left: 22%;
}
.bs-3 {
  background: var(--c-lime);
  width: clamp(90px, 12vw, 160px);
  aspect-ratio: 1;
  left: 40%;
}
.bs-4 {
  background: var(--c-peach);
  width: clamp(120px, 14vw, 200px);
  aspect-ratio: 1;
  border-radius: 0 100% 0 0;
  right: 4%;
}
@media (min-width: 900px) {
  .blue-skyline { display: none; }
}

/* ============================================================
   STRESS-REMOVAL
   ============================================================ */
.stress {
  padding: clamp(80px, 10vw, 160px) 0;
  background: var(--c-beige);
}
.stress-head { max-width: 800px; margin-bottom: clamp(56px, 7vw, 96px); }
.stress-list {
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(0,18,32,0.12);
}
.stress-row {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  align-items: start;
  gap: 24px;
  padding: clamp(32px, 4vw, 56px) 0;
  border-bottom: 1px solid rgba(0,18,32,0.12);
  transition: background 360ms var(--ease-out);
}
.stress-row:hover { background: rgba(0,18,32,0.025); }
.stress-num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(14px, 1.2vw, 16px);
  letter-spacing: 0.05em;
  color: var(--c-blue);
  padding-top: 8px;
}
.stress-body h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-blue);
  margin-bottom: 12px;
  max-width: 22ch;
}
.stress-body p {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  max-width: 60ch;
  color: var(--c-charcoal);
}
.stress-shape { width: 80px; height: 80px; justify-self: end; }
@media (max-width: 760px) {
  .stress-row { grid-template-columns: 56px 1fr; gap: 16px; }
  .stress-shape {
    grid-column: 1 / -1;
    width: 56px; height: 56px;
    justify-self: start;
    order: 3;
    margin-top: 8px;
  }
}

/* ============================================================
   CLOSER LINE
   ============================================================ */
.closer {
  padding: clamp(80px, 10vw, 160px) 0;
  background: var(--c-beige);
  position: relative;
  text-align: center;
}
.closer-h {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(36px, 5.5vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--c-blue);
  margin-bottom: 40px;
  max-width: 24ch;
  margin-inline: auto;
}
.closer-cta {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   SOLUTIONS GRID
   ============================================================ */
.solutions { padding: clamp(80px, 10vw, 160px) 0; background: var(--c-white); }
.solutions-head { max-width: 880px; margin-bottom: clamp(48px, 6vw, 80px); }
.solutions-head .lede { margin-top: 16px; }

.solution-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 700px) { .solution-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .solution-grid { grid-template-columns: repeat(4, 1fr); } }
/* 6-item variant: 2 cols on tablet, 3 cols on desktop — clean 2x3 layout. */
@media (min-width: 1100px) { .solution-grid--6 { grid-template-columns: repeat(3, 1fr); } }

.sol-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 420ms var(--ease-out);
}
.sol-card:hover { transform: translateY(-6px); }
.sol-img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-beige);
}
.sol-img svg { width: 100%; height: 100%; }
.sol-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); }
.sol-card:hover .sol-img img { transform: scale(1.04); }
/* v1.1: placeholder tags are now tiny low-key corner badges so they read as
   build metadata, not as a debug feature shouting at investors. */
.ph-tag {
  position: absolute;
  bottom: 8px; right: 8px;
  top: auto; left: auto;
  background: rgba(0, 18, 32, 0.5);
  color: var(--c-beige);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.7;
}
/* Hide every placeholder badge entirely when production flag is set on <body>. */
body[data-placeholder-mode="prod"] .ph-tag,
body[data-placeholder-mode="prod"] .placeholder-label { display: none; }
.sol-card { height: 100%; }
.sol-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sol-body h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(19px, 1.4vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--c-blue);
}
.sol-body p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-charcoal);
}
.sol-body .link-arrow { margin-top: auto; padding-top: 8px; align-self: start; }

/* ============================================================
   MANIFESTO — Blue section
   ============================================================ */
.manifesto { padding: clamp(80px, 10vw, 160px) 0; position: relative; }
.manifesto-h {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(44px, 8vw, 128px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--c-white);
  margin-bottom: clamp(40px, 5vw, 72px);
  max-width: 14ch;
}
.manifesto-body {
  max-width: 760px;
  display: flex; flex-direction: column;
  gap: 24px;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--c-beige);
}
.manifesto-body p:first-child { font-weight: 500; color: var(--c-white); }

/* v1.5: manifesto grid — copy left, team photo right with brand-shape whispers
   peeking out from behind the image's bottom-left corner. */
.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (min-width: 960px) {
  .manifesto-grid {
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(56px, 6vw, 96px);
  }
  .manifesto-h { margin-bottom: clamp(28px, 3vw, 48px); }
}
.manifesto-copy { min-width: 0; }
.manifesto-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  isolation: isolate;
  max-width: 560px;
  justify-self: center;
}
@media (min-width: 960px) {
  .manifesto-visual { justify-self: end; max-width: none; }
}
.manifesto-photo {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 40%;
  border-radius: var(--r-xl);
  box-shadow: 0 1px 0 rgba(0,18,32,0.18), 0 40px 80px -30px rgba(0,18,32,0.45);
}
.mv-shape {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 1;
}
.mv-shape-peach {
  width: 38%;
  aspect-ratio: 1 / 1;
  left: -14%;
  bottom: -10%;
  background: var(--c-peach);
  border-radius: 50%;
  opacity: 0.95;
}
.mv-shape-lime {
  width: 16%;
  aspect-ratio: 1 / 1;
  left: -6%;
  bottom: 18%;
  background: var(--c-lime);
  border-radius: 4px;
  transform: rotate(-6deg);
}
.mv-shape-rose {
  width: 10%;
  aspect-ratio: 1 / 1;
  left: 8%;
  bottom: -6%;
  background: var(--c-rose);
  border-radius: 50%;
  mix-blend-mode: screen;
}

/* v1.1: decorative shapes pinned to z-index 0 sitting BEHIND the .container,
   which is now z-index 1. Shapes also pushed further into the right margin
   so they never cross body copy. Previously the lime square overlapped the
   second manifesto paragraph and the peach quarter-circle drifted into the
   text column. */
.manifesto .container { position: relative; z-index: 1; }
.manifesto-shape { position: absolute; display: block; pointer-events: none; z-index: 0; }
.ms-1 {
  width: clamp(140px, 14vw, 220px);
  aspect-ratio: 1;
  background: var(--c-lime);
  border-radius: 999px;
  top: 8%; right: 4%;
  opacity: 0.95;
}
.ms-2 {
  width: clamp(180px, 18vw, 280px);
  aspect-ratio: 1;
  background: var(--c-peach);
  border-radius: 0 0 100% 0;
  bottom: -40px; right: -2%;
  mix-blend-mode: screen;
}
.ms-3 {
  width: clamp(80px, 8vw, 140px);
  aspect-ratio: 1;
  background: var(--c-lime);
  bottom: 18%; right: 6%;
  mix-blend-mode: screen;
}
@media (max-width: 760px) {
  .ms-1 { right: -40px; top: 4%; }
  .ms-2, .ms-3 { display: none; }
}

/* ============================================================
   v1.1 — GLOBAL decorative-shape discipline
   Every section that floats decorative shapes anchors its content
   above them. Keeps copy fully readable regardless of how shapes drift.
   ============================================================ */
.intro-band .container,
.audience .container,
.stress .container,
.closer .container,
.solutions .container,
.faqs .container,
.final-cta .container { position: relative; z-index: 1; }
.floater, .blue-skyline, .cta-skyline, .hero-anchor-shapes { z-index: 0; }

/* ============================================================
   FAQs
   ============================================================ */
.faqs { padding: clamp(80px, 10vw, 160px) 0; background: var(--c-beige); }
.faqs-head { max-width: 1100px; margin-bottom: clamp(48px, 6vw, 80px); }
.faqs-headline { font-size: clamp(36px, 5.2vw, 76px); line-height: 1.04; }
.faqs-subline { display: inline-block; font-size: 0.78em; font-weight: 700; opacity: 0.92; }

.faq-list { border-top: 1.5px solid var(--c-charcoal); }
.faq { border-bottom: 1.5px solid var(--c-charcoal); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(20px, 2.4vw, 32px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: color 220ms;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-q {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--c-blue);
}
.faq summary:hover .faq-q { color: var(--c-charcoal); }
.faq-icon {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--c-blue);
  flex-shrink: 0;
  transition: transform 320ms var(--ease-out), background 220ms;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--c-beige);
  transform: translate(-50%, -50%);
  transition: transform 320ms var(--ease-out);
}
.faq-icon::before { width: 12px; height: 1.75px; }
.faq-icon::after  { width: 1.75px; height: 12px; }
.faq[open] .faq-icon { background: var(--c-rose); transform: rotate(180deg); }
.faq[open] .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }

.faq-a {
  padding-bottom: clamp(20px, 2.4vw, 32px);
  padding-right: 64px;
  max-width: 80ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-charcoal);
  animation: faqOpen 380ms var(--ease-out);
}
.faq-a > * + * { margin-top: 12px; }
.faq-steps {
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.faq-foot {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: start;
  max-width: 720px;
}
.faq-foot p {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
  color: var(--c-charcoal);
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  padding: clamp(100px, 12vw, 180px) 0 clamp(120px, 14vw, 220px);
  position: relative;
  text-align: center;
  overflow: hidden;
}
.final-h {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(56px, 12vw, 200px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--c-white);
  margin-bottom: 32px;
}
.final-cta .lede { max-width: 60ch; margin: 0 auto 40px; }
.final-cta-row {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.final-cta .btn-light {
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 30px 60px -30px rgba(0,0,0,0.4);
}

.cta-skyline {
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(80px, 10vw, 140px);
  pointer-events: none;
}
.cs { position: absolute; bottom: 0; display: block; }
.cs-1 {
  left: 4%;
  width: clamp(80px, 9vw, 160px);
  aspect-ratio: 1;
  background: var(--c-pastel-pink);
  border-radius: 100% 0 0 0;
}
.cs-2 {
  left: 20%;
  width: clamp(60px, 7vw, 110px);
  aspect-ratio: 1;
  background: var(--c-rose);
  border-radius: 999px;
  bottom: 20px;
}
.cs-3 {
  left: 36%;
  width: clamp(100px, 11vw, 180px);
  aspect-ratio: 1;
  background: var(--c-lime);
}
.cs-4 {
  right: 24%;
  width: clamp(60px, 7vw, 110px);
  aspect-ratio: 1;
  background: var(--c-peach);
  border-radius: 999px;
  bottom: 30px;
}
.cs-5 {
  right: 3%;
  width: clamp(110px, 13vw, 200px);
  aspect-ratio: 1;
  background: var(--c-violet);
  border-radius: 0 100% 0 0;
}

/* ============================================================
   MOBILE TUNING (homepage-specific overrides)
   ============================================================ */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero-headline { letter-spacing: -0.035em; font-size: clamp(54px, 14vw, 96px); }
  .cta-row { width: 100%; }
  .cta-row .btn { width: 100%; justify-content: center; white-space: normal; }
  .cta-row .link-arrow { margin-top: 4px; }
  .closer-cta .btn { flex: 1 1 100%; justify-content: center; }
}