/* HERO – Section 1 */
.hero {
  background: radial-gradient(1200px 800px at 50% -200px, #fff6fb 0%, #ffffff 45%, #ffffff 100%);
  overflow: clip;
}

#confetti-canvas {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}

/* Grid layout: left images | center copy | right images */
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr minmax(260px, 560px) 1fr; gap: clamp(16px, 4vw, 32px);
  align-items: center;
}

.hero-title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.12;
  letter-spacing: 0.2px;
  margin: 0 0 12px 0;
  color: #0b0f14;
}

.hero-sub {
  margin: 0 0 10px 0;
  color: #2b3340;
}
.hero-kicker { color: #6c7a8a; margin: 0 0 22px 0; }

.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Image ribbons */
.hero-ribbon {
  display: grid;
  gap: clamp(10px, 2.2vw, 16px);
  align-content: center;
}
.hero-ribbon.left { justify-items: end; }
.hero-ribbon.right { justify-items: start; }

.hero-photo {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(20, 16, 30, .12);
  transform-origin: center;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.hero-photo:hover {
  transform: translateY(-4px) rotateZ(-0.5deg) scale(1.02);
  box-shadow: 0 16px 40px rgba(20, 16, 30, .18);
  filter: saturate(1.05);
}
.hero-photo img {
  display: block; width: 100%; height: auto; max-width: 350px; /* hard cap */
  aspect-ratio: 5/4; object-fit: cover;
}

/* Subtle entrance animation */
.hero-photo,
.hero-title,
.hero-sub,
.hero-kicker,
.hero-cta { opacity: 0; transform: translateY(10px); }
.in-view .hero-photo,
.in-view .hero-title,
.in-view .hero-sub,
.in-view .hero-kicker,
.in-view .hero-cta { opacity: 1; transform: translateY(0); transition: opacity .7s ease, transform .7s ease; }
.in-view .hero-photo:nth-child(1) { transition-delay: .05s; }
.in-view .hero-photo:nth-child(2) { transition-delay: .12s; }
.in-view .hero-photo:nth-child(3) { transition-delay: .18s; }
.in-view .hero-cta { transition-delay: .2s; }

/* Responsive */
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero-ribbon.left { order: 1; }
  .hero-copy { order: 2; text-align: center; }
  .hero-ribbon.right { order: 3; }
  .hero-cta { justify-content: center; }
}
@media (max-width: 720px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-ribbon.left,
  .hero-ribbon.right { justify-items: center; grid-auto-flow: row; grid-auto-rows: auto; }
  .hero { padding-top: 96px; } /* a bit more space below sticky header */
}
/* ===== Responsive: text first, then images ===== */
@media (max-width: 1040px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    /* сначала копирайт, затем две колонки с лентами изображений */
    grid-template-areas:
      "copy copy"
      "left right";
    gap: clamp(16px, 4vw, 28px);
  }

  /* Привязываем элементы к именованным областям */
  .hero-ribbon.left  { grid-area: left;  justify-items: center; }
  .hero-copy         { grid-area: copy;  text-align: center; }
  .hero-ribbon.right { grid-area: right; justify-items: center; }

  .hero-cta { justify-content: center; }
}

@media (max-width: 720px) {
  .hero-grid {
    grid-template-columns: 1fr;
    /* строго сверху вниз: текст → левая лента → правая лента */
    grid-template-areas:
      "copy"
      "left"
      "right";
  }
  .hero { padding-top: 96px; } /* запас под фикс-хедер */
}
/* ============ Section 2: Signature Styles ============ */
.signature-styles {
  background: radial-gradient(900px 500px at 10% -200px, #fff0f7 0%, #ffffff 45%, #ffffff 100%);
}
.section-title {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(22px, 4vw, 36px);
  margin: 0 0 .4rem 0;
  color: #0b0f14;
}
.section-lead { color: #334054; max-width: 62ch; margin: 0 0 1rem 0; }
.section-note { color: #5a6677; max-width: 72ch; margin-top: 1rem; }

.snap-wrap { position: relative; margin-top: .5rem; }
.snap-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 16px;
  padding: 8px 4px 8px 4px;
  -webkit-overflow-scrolling: touch;
}
.style-card {
  scroll-snap-align: start;
  width: clamp(220px, 30vw, 340px);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(16, 20, 30, .08);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  will-change: transform;
}
.style-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(16, 20, 30, .12); filter: saturate(1.05); }
.style-card img { width: 100%; height: auto; max-width: 350px; aspect-ratio: 5/4; object-fit: cover; border-top-left-radius: 20px; border-top-right-radius: 20px; }
.style-card figcaption { padding: .7rem .9rem 1rem; font-weight: 600; }

/* ============ Section 3: Joy Blueprint ============ */
.joy-blueprint { background: #fafbff; }
.blueprint-grid { display: grid; grid-template-columns: 360px 1fr; gap: clamp(16px, 4vw, 36px); }
.blueprint-sticky { position: sticky; top: 92px; align-self: start; }
.pill-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.pill-list li {
  padding: .35rem .6rem; border-radius: 999px; background: #eef6ff; color: #2a4a72; font-size: .9rem; border: 1px solid #d7e7ff;
}

.blueprint-steps { counter-reset: step; display: grid; gap: 18px; }
.step {
  background: #ffffff; border-radius: 16px; padding: 1rem; box-shadow: 0 10px 28px rgba(16, 20, 30, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.step:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(16, 20, 30, .10); }
.step-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .25rem; }
.step-num { font-weight: 700; color: #ff8ec3; }
.step h3 { margin: 0; font-size: 1.05rem; }
.step p { margin: .25rem 0 .6rem; color: #334054; }
.step-image img { border-radius: 12px; }

@media (max-width: 960px) {
  .blueprint-grid { grid-template-columns: 1fr; }
  .blueprint-sticky { position: static; }
}

/* entrance */
.joy-blueprint .step,
.signature-styles .style-card,
.cities .strip-card { opacity: 0; transform: translateY(10px); }
.in-view .step,
.in-view .style-card,
.in-view .strip-card { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }

/* ============ Section 4: Cities & Venues ============ */
.cities { background: linear-gradient(180deg, #0b0f14 0%, #101826 100%); color: #cfe9ff; }
.cities .light { color: #eaf7ff; }

.marquee {
  overflow: hidden; position: relative; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
  margin: .5rem 0 1.25rem 0;
}
.marquee-track {
  display: inline-flex; gap: 32px; padding: .6rem 0;
  animation: marquee 18s linear infinite;
  white-space: nowrap;
}
.marquee-track span {
  letter-spacing: .6px; font-weight: 600; opacity: .9;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.photo-strip {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
}
.strip-card {
  border-radius: 18px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,.25);
  transform: rotateZ(-1.2deg);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  will-change: transform;
}
.strip-card:nth-child(2) { transform: rotateZ(0.6deg); }
.strip-card:nth-child(3) { transform: rotateZ(-0.4deg); }
.strip-card:nth-child(4) { transform: rotateZ(1.1deg); }
.strip-card:hover { transform: rotateZ(0deg) translateY(-4px); filter: saturate(1.05); box-shadow: 0 18px 42px rgba(0,0,0,.35); }
.strip-card img { display: block; width: 100%; height: auto; max-width: 350px; aspect-ratio: 4/3; object-fit: cover; }
/* ============ Section 5: Services (mosaic + masks) ============ */
.services { background: radial-gradient(900px 600px at 100% -220px, #fff7ee 0%, #ffffff 40%, #ffffff 100%); }
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 4vw, 36px); align-items: start; }
.services-copy p { color: #334054; }
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1rem; }
.badge { padding: .4rem .7rem; border-radius: 999px; background: #f2fbff; border: 1px solid #cfeaff; color: #28567d; font-weight: 600; }

.services-mosaic {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start;
}
.mosaic-card {
  position: relative; overflow: hidden; background: #fff; box-shadow: 0 12px 32px rgba(16,20,30,.08);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.mosaic-card:hover { transform: translateY(-4px); filter: saturate(1.05); box-shadow: 0 18px 42px rgba(16,20,30,.14); }
.mosaic-card img { width: 100%; height: auto; max-width: 350px; aspect-ratio: 5/4; object-fit: cover; display: block; }
.mosaic-title { position: absolute; left: 12px; bottom: 10px; color: #0b0f14; background: rgba(255,255,255,.85); padding: .35rem .6rem; border-radius: 10px; font-weight: 700; }

/* organic masks */
.mask-arch img   { clip-path: path("M0,40 Q0,0 40,0 H310 Q350,0 350,40 V280 Q350,320 310,320 H40 Q0,320 0,280 Z"); }
.mask-wave img   { clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%); }
.mask-leaf img   { clip-path: ellipse(96% 76% at 50% 46%); }
.mask-burst img  { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

@media (max-width: 960px) {
  .services-grid { grid-template-columns: 1fr; }
  .services-mosaic { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .services-mosaic { grid-template-columns: 1fr; }
}

/* entrance */
.services .mosaic-card { opacity: 0; transform: translateY(10px); }
.in-view.services .mosaic-card { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }

/* ============ Section 6: Budget (meters + side photos) ============ */
.budget { background: #fbfdff; }
.budget-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(16px,4vw,36px); align-items: start; }
.kpi-row { display: flex; flex-wrap: wrap; gap: 1rem; margin: .75rem 0 1rem; color: #2b3b54; }
.kpi-row .countup { font-weight: 800; font-size: 1.4rem; margin-right: .25rem; color: #0b0f14; }

.meter-list { display: grid; gap: 10px; margin-top: .5rem; }
.meter-item { display: grid; grid-template-columns: 180px 1fr auto; gap: .6rem; align-items: center; background: #ffffff; padding: .6rem .7rem; border-radius: 12px; box-shadow: 0 8px 24px rgba(16,20,30,.06); }
.meter-label { font-weight: 600; color: #2b3340; }
.meter-track { position: relative; height: 10px; background: #ecf3ff; border-radius: 999px; overflow: hidden; }
.meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #9ee0ff, #ffd36e, #ff8ec3); border-radius: 999px; transition: width .9s ease; }
.meter-val { font-weight: 700; color: #2b3340; }

/* targets */
.in-view .meter-fill.pct-72 { width: 72%; }
.in-view .meter-fill.pct-58 { width: 58%; }
.in-view .meter-fill.pct-44 { width: 44%; }
.in-view .meter-fill.pct-30 { width: 30%; }

.budget-side { display: grid; gap: 12px; justify-items: center; }
.budget-photo { border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(16,20,30,.10); }
.budget-photo img { display: block; width: 100%; height: auto; max-width: 350px; aspect-ratio: 4/3; object-fit: cover; }
.aside-note { color: #5a6677; text-align: center; margin: 4px 0 0; font-size: .95rem; }

@media (max-width: 960px) {
  .budget-grid { grid-template-columns: 1fr; }
  .meter-item { grid-template-columns: 1fr; gap: .35rem; text-align: left; }
}

/* ============ Section 7: Case Study ============ */
.case-study { background: radial-gradient(900px 600px at 0% -220px, #eef9ff 0%, #ffffff 45%, #ffffff 100%); }
.cs-grid { display: grid; grid-template-columns: 360px 1fr; gap: clamp(16px,4vw,36px); }
.cs-sticky { position: sticky; top: 92px; align-self: start; }
.cs-frames { display: grid; gap: 14px; }
.cs-frame { border-radius: 16px; overflow: hidden; box-shadow: 0 12px 32px rgba(16,20,30,.10); transform: translateY(8px); opacity: 0; }
.cs-frame img { width: 100%; height: auto; max-width: 350px; aspect-ratio: 4/3; object-fit: cover; }

.in-view.case-study .cs-frame { transform: translateY(0); opacity: 1; transition: transform .6s ease, opacity .6s ease; }
.in-view.case-study .cs-frame:nth-child(2) { transition-delay: .08s; }

@media (max-width: 960px) {
  .cs-grid { grid-template-columns: 1fr; }
  .cs-sticky { position: static; }
}
/* ============ Section 8: Crew ============ */
.crew { background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); }
.crew-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,4vw,36px); align-items: start; }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1rem; }
.chip { padding: .4rem .7rem; border-radius: 999px; background: #eef6ff; border: 1px solid #d7e7ff; color: #2a4a72; font-weight: 600; }

.crew-rail { display: grid; gap: 14px; align-content: start; }
.crew-card { border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px rgba(16,20,30,.10);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.crew-card img { width: 100%; height: auto; max-width: 350px; aspect-ratio: 4/3; object-fit: cover; }
.crew-card:hover { transform: translateY(-4px); filter: saturate(1.05); box-shadow: 0 18px 42px rgba(16,20,30,.16); }
.skew-a { transform: rotateZ(-0.8deg); }
.skew-b { transform: rotateZ(0.6deg); }
.skew-c { transform: rotateZ(-0.4deg); }

/* entrance */
.crew .crew-card { opacity: 0; transform: translateY(10px); }
.in-view.crew .crew-card { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }
.in-view.crew .crew-card:nth-child(2) { transition-delay: .07s; }
.in-view.crew .crew-card:nth-child(3) { transition-delay: .12s; }

@media (max-width: 960px) {
  .crew-grid { grid-template-columns: 1fr; }
}

/* ============ Section 9: Design Lab ============ */
.lab { background: radial-gradient(900px 600px at 100% -240px, #fff6f8 0%, #ffffff 45%, #ffffff 100%); }
.lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,4vw,36px); align-items: center; }

.lab-spheres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; justify-items: center; }
.sphere {
  width: min(100%, 350px); aspect-ratio: 1/1; border-radius: 50%;
  display: grid; place-items: center; position: relative; overflow: hidden;
  border: 10px solid transparent; background: linear-gradient(#fff,#fff) padding-box,
  conic-gradient(#ff8ec3, #ffd36e, #9ee0ff, #ff8ec3) border-box;
  transition: transform .35s ease, filter .35s ease, box-shadow .35s ease;
  box-shadow: 0 12px 32px rgba(16,20,30,.08);
}
.sphere:hover { transform: translateY(-6px) rotateZ(1deg); filter: saturate(1.06); box-shadow: 0 18px 46px rgba(16,20,30,.14); }
.sphere img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

@media (max-width: 960px) {
  .lab-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lab-spheres { grid-template-columns: 1fr; }
}

/* entrance */
.lab .sphere { opacity: 0; transform: translateY(10px); }
.in-view.lab .sphere { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }
.in-view.lab .sphere:nth-child(2) { transition-delay: .06s; }
.in-view.lab .sphere:nth-child(3) { transition-delay: .12s; }

/* ============ Section 10: Sustainability ============ */
.sustain { background: linear-gradient(180deg, #0b0f14 0%, #111b29 100%); color: #cfe9ff; }
.sustain .light { color: #eaf7ff; }
.sustain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,4vw,36px); align-items: start; }

.pledge-points { margin: .6rem 0 1rem; display: grid; gap: .35rem; }
.pledge-points li { position: relative; padding-left: 1.5rem; }
.pledge-points li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: #baffc9; font-weight: 700;
}

/* animated progress badges */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.prog-row { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 12px; margin-top: 10px; }
.prog-badge {
  --p: 0;
  --accent: #ffd36e;
  width: 120px; height: 120px; border-radius: 16px; padding: 10px;
  background: #0f1622; display: grid; place-items: center; gap: 6px;
  transition: --p 1s ease;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 12px 32px rgba(0,0,0,.3);
}
.prog-badge::before {
  content: ""; width: 88px; height: 88px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p)*1%), #1b2739 0);
  display: block;
}
.prog-num { position: absolute; font-weight: 800; }
.prog-label { font-size: .85rem; text-align: center; color: #cfe9ff; }

.in-view.sustain .prog-85 { --p: 85; }
.in-view.sustain .prog-70 { --p: 70; }
.in-view.sustain .prog-60 { --p: 60; }

.sustain-photos { display: grid; gap: 12px; justify-items: center; }
.sustain-card { border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.sustain-card img { display: block; width: 100%; height: auto; max-width: 350px; aspect-ratio: 4/3; object-fit: cover; }

@media (max-width: 960px) {
  .sustain-grid { grid-template-columns: 1fr; }
  .prog-row { grid-template-columns: repeat(3, 1fr); justify-items: center; }
}
@media (max-width: 560px) {
  .prog-row { grid-template-columns: 1fr; }
}
/* ============ Section 11: Cultural Compass ============ */
.compass { background: radial-gradient(900px 600px at 10% -240px, #fff4f0 0%, #ffffff 45%, #ffffff 100%); }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,4vw,36px); align-items: start; }
.guide-intro p { color: #334054; }
.ribbon-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.ribbon-pills li { padding: .4rem .7rem; border-radius: 999px; background: #f2fbff; border: 1px solid #cfeaff; color: #28567d; font-weight: 600; }

.guide-accordions { display: grid; gap: 10px; }
.acc { border-radius: 14px; background: #ffffff; box-shadow: 0 10px 28px rgba(16,20,30,.06); overflow: hidden; }
.acc > summary { list-style: none; cursor: pointer; padding: .9rem 1rem; font-weight: 700; display: flex; align-items: center; gap: .6rem; }
.acc > summary::-webkit-details-marker { display: none; }
.acc[open] > summary { background: #f8fbff; }
.acc-body { padding: .8rem 1rem 1rem; color: #2b3340; }
.acc-body p + p { margin-top: .5rem; }

@media (max-width: 960px) {
  .guide-grid { grid-template-columns: 1fr; }
}

/* entrance */
.compass .acc, .compass .guide-intro { opacity: 0; transform: translateY(10px); }
.in-view.compass .acc, .in-view.compass .guide-intro { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }

/* ============ Section 12: SOPs & Risk Matrix ============ */
.sops { background: #fbfdff; }
.sops-grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px,4vw,24px); }
.sops-copy p { color: #334054; }
.sop-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.sop-tags li { padding: .35rem .65rem; border-radius: 999px; background: #eef6ff; border: 1px solid #d7e7ff; color: #2a4a72; font-weight: 600; }

.risk-table { display: grid; gap: 8px; }
.risk-row { display: grid; grid-template-columns: 1.1fr .9fr 1.6fr .8fr; gap: .6rem; padding: .7rem; background: #ffffff; border-radius: 12px; box-shadow: 0 8px 24px rgba(16,20,30,.06); }
.risk-head { background: #f4f7ff; font-weight: 700; }
.risk-row div { color: #2b3340; }
.sla-note { color: #5a6677; }

@media (max-width: 960px) {
  .risk-row { grid-template-columns: 1fr; }
}

/* entrance */
.sops .risk-row, .sops .sops-copy { opacity: 0; transform: translateY(10px); }
.in-view.sops .risk-row, .in-view.sops .sops-copy { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }

/* ============ Section 13: Client Letters ============ */
.letters { background: linear-gradient(180deg, #0b0f14 0%, #101826 100%); color: #cfe9ff; }
.letters .light { color: #eaf7ff; }

.quote-wrap { margin-top: .5rem; }
.quote-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 16px;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.quote-card {
  scroll-snap-align: start;
  background: #0f1622;
  color: #d7edff;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  min-height: 180px;
}
.quote-card p { margin: 0 0 .6rem; }
.quote-card footer { color: #9cc8ff; font-weight: 600; }

.quote-dots { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: #31445f; border: 0; cursor: pointer; }
.dot.is-active { background: #ffd36e; }
/* ============ Section 14: Partners ============ */
.partners { background: radial-gradient(900px 600px at 100% -240px, #f3fbff 0%, #ffffff 45%, #ffffff 100%); }
.partners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,4vw,36px); align-items: center; }
.partners-copy p { color: #334054; }
.tagline-list { display: grid; gap: .35rem; margin: .6rem 0 1rem; color: #2b3340; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }

.partners-frames { display: grid; gap: 14px; justify-items: center; }
.partner-card { border-radius: 18px; overflow: hidden; box-shadow: 0 12px 32px rgba(16,20,30,.10); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.partner-card img { display: block; width: 100%; height: auto; max-width: 350px; aspect-ratio: 4/3; object-fit: cover; }
.partner-card:hover { transform: translateY(-4px); filter: saturate(1.05); box-shadow: 0 18px 42px rgba(16,20,30,.16); }
.angle-a { transform: rotateZ(-0.6deg); }
.angle-b { transform: rotateZ(0.8deg); }

/* entrance */
.partners .partner-card, .partners .partners-copy { opacity: 0; transform: translateY(10px); }
.in-view.partners .partner-card, .in-view.partners .partners-copy { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }
.in-view.partners .partner-card.angle-b { transition-delay: .08s; }

@media (max-width: 960px) {
  .partners-grid { grid-template-columns: 1fr; }
}

/* ============ Section 15: CTA Final ============ */
.cta-final { background: linear-gradient(180deg, #0b0f14 0%, #101826 100%); color: #cfe9ff; }
.cta-final .light { color: #eaf7ff; }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(12px,3.5vw,24px); align-items: center; }

.cta-photo { justify-self: center; border-radius: 999px; overflow: hidden; box-shadow: 0 16px 42px rgba(0,0,0,.35); width: min(100%, 280px); aspect-ratio: 1/1; }
.cta-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.bubble-left { border: 10px solid transparent; background: linear-gradient(#0f1622,#0f1622) padding-box, conic-gradient(#ff8ec3,#ffd36e,#9ee0ff,#ff8ec3) border-box; }
.bubble-right { border: 10px solid transparent; background: linear-gradient(#0f1622,#0f1622) padding-box, conic-gradient(#9ee0ff,#ffd36e,#ff8ec3,#9ee0ff) border-box; }

.cta-copy { text-align: center; }
.btn-row.center { justify-content: center; }

@media (max-width: 960px) {
  .cta-grid { grid-template-columns: 1fr; }
  .bubble-left, .bubble-right { justify-self: center; }
}

/* entrance */
.cta-final .cta-photo, .cta-final .cta-copy { opacity: 0; transform: translateY(10px); }
.in-view.cta-final .cta-photo, .in-view.cta-final .cta-copy { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }
.in-view.cta-final .cta-photo.bubble-right { transition-delay: .08s; }
.hero { 
  background: radial-gradient(1200px 800px at 50% -200px, #fff6fb 0%, #ffffff 45%, #ffffff 100%);
  overflow: hidden;  /* было: overflow: clip; */
}
#confetti-canvas { 
  position: absolute; inset: 0; 
  width: 100%; height: 100%; /* гарантируем полное покрытие секции */
}