/* =====================================================================
   Клуб «Настоящий писатель» — страница «Как контролировать будущее?»
   Дизайн-система «Голубые полутона» (наследует токены/компоненты из styles.css).
   Подключать ПОСЛЕ styles.css. Префикс .sp-* — без конфликтов с сайтом.
   Слоты под изображения: images/support/*.webp. Нет файла → виден градиент.
   ===================================================================== */

/* Подстраховка: без JS контент виден (styles.css прячет .reveal безусловно). */
html.no-js .reveal { opacity:1 !important; transform:none !important; }

/* Плотнее вертикальный ритм на этой странице — меньше пустот между блоками. */
main > .section { padding:clamp(52px,7vw,100px) 0; }

/* ------------------------------ HERO --------------------------------- */
.sp-hero {
  position:relative; overflow:hidden; isolation:isolate;
  width:min(100% - 24px, 1480px); margin:18px auto 0;
  min-height:clamp(560px, 90vh, 900px);
  display:grid; align-items:end;
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-3);
  color:#fff;
  background:
    linear-gradient(180deg, rgba(13,25,45,0.52) 0%, rgba(13,25,45,0.16) 32%, rgba(11,22,41,0.82) 100%),
    url("images/support/hero.webp") center 30% / cover no-repeat,
    radial-gradient(1200px 700px at 78% 8%, rgba(127,193,222,0.45), transparent 60%),
    linear-gradient(155deg, #14294a, #0c1a31 55%, #0a1730);
}
.sp-hero::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 380px at 50% 116%, rgba(127,193,222,0.32), transparent 60%),
    radial-gradient(600px 300px at 14% 4%, rgba(198,165,112,0.16), transparent 60%);
}
.sp-hero-inner { width:min(100% - 2*var(--gutter), var(--content)); margin-inline:auto; padding:clamp(40px,7vw,96px) 0 clamp(44px,6vw,84px); }
.sp-hero .eyebrow { color:var(--sky); }
.sp-hero-title { color:#fff; font-size:clamp(2.7rem,7.4vw,6.2rem); line-height:0.98; letter-spacing:-0.02em; max-width:17ch; text-shadow:0 2px 30px rgba(7,16,31,0.5); }
.sp-hero-lead { max-width:54ch; margin-top:clamp(20px,2.6vw,30px); color:rgba(255,255,255,0.86); font-size:clamp(1.08rem,1.6vw,1.32rem); line-height:1.7; }
.sp-hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(28px,3.4vw,40px); }
.sp-hero .btn-ghost { color:#fff; background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.42); backdrop-filter:blur(6px); }
.sp-hero .btn-ghost:hover { background:rgba(255,255,255,0.18); border-color:#fff; }
.sp-hero-cue { margin-top:clamp(28px,4vw,48px); display:inline-flex; align-items:center; gap:12px; color:rgba(255,255,255,0.66); font-size:0.86rem; letter-spacing:0.04em; }
.sp-hero-cue .dot { width:9px; height:9px; border-radius:50%; background:var(--sky); box-shadow:0 0 0 6px rgba(127,193,222,0.18); }

/* ------------------------------ LEDE --------------------------------- */
.sp-lede { max-width:760px; }
.sp-lede p { color:var(--ink-soft); font-size:clamp(1.12rem,1.7vw,1.4rem); line-height:1.7; }
.sp-lede .turn { margin-top:22px; font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.85rem); line-height:1.4; color:var(--blue-700); }

/* --------------------------- MANIFESTO (datum) ----------------------- */
.sp-manifesto {
  position:relative; overflow:hidden; isolation:isolate;
  width:min(100% - 24px, 1480px); margin:clamp(40px,6vw,90px) auto;
  border-radius:var(--r-xl); color:#fff;
  background:
    linear-gradient(180deg, rgba(10,22,41,0.78), rgba(10,22,41,0.62)),
    url("images/support/manifesto.webp") center / cover no-repeat,
    radial-gradient(900px 520px at 80% 0%, rgba(127,193,222,0.4), transparent 60%),
    linear-gradient(150deg, #15294a, #0b1830);
}
.sp-manifesto-inner { width:min(100% - 2*var(--gutter), 1040px); margin-inline:auto; padding:clamp(64px,9vw,130px) 0; text-align:center; }
.sp-manifesto .eyebrow { color:var(--gold); }
.sp-quote-xl { font-family:var(--serif); font-size:clamp(2rem,5.2vw,4.1rem); line-height:1.08; letter-spacing:-0.01em; color:#fff; text-wrap:balance; }
.sp-quote-xl .em { background:linear-gradient(120deg, var(--sky), #cfe2f6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sp-quote-rule { width:78px; height:3px; margin:clamp(26px,3vw,40px) auto; border-radius:3px; background:linear-gradient(90deg, var(--gold), transparent); }
.sp-manifesto-sub { max-width:60ch; margin:0 auto; color:rgba(255,255,255,0.82); font-size:clamp(1.05rem,1.5vw,1.24rem); line-height:1.7; }

/* ------------------------------- SCALE ------------------------------- */
.sp-scale-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.4vw,28px); margin-top:clamp(28px,4vw,48px); }
.sp-stat { padding:clamp(24px,3vw,36px); border-radius:var(--r-lg); border:1px solid var(--line); background:var(--glass); box-shadow:var(--shadow-2); backdrop-filter:blur(14px); min-width:0; }
.sp-stat dt { font-family:var(--serif); font-size:clamp(2.2rem,4vw,3.4rem); line-height:1; white-space:nowrap; background:linear-gradient(120deg, var(--blue-600), var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sp-stat dd { margin:12px 0 0; color:var(--muted); font-size:0.96rem; line-height:1.5; }
.sp-scale-note { margin-top:clamp(24px,3vw,36px); max-width:66ch; color:var(--ink-soft); font-size:1.08rem; line-height:1.7; }

/* ------------------------------- ALLIES ------------------------------ */
.sp-allies { display:grid; gap:clamp(24px,3.4vw,40px); margin-top:clamp(28px,4vw,46px); }
.sp-ally-group h3 { display:flex; align-items:center; gap:14px; font-family:var(--sans); font-size:0.82rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color:var(--blue-700); }
.sp-ally-group h3::after { content:""; flex:1; height:1px; background:var(--line); }
.sp-plates { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.sp-plate { padding:14px 22px; border-radius:var(--pill); border:1px solid var(--line-strong); background:var(--glass); color:var(--ink); font-weight:700; font-size:0.98rem; box-shadow:var(--shadow-1); }
.sp-plate.is-gov { border-color:rgba(198,165,112,0.45); background:var(--gold-soft); color:#6f5526; }
.sp-jury { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,22px); margin-top:16px; }
.sp-allies-note { margin-top:clamp(26px,3.4vw,42px); max-width:70ch; color:var(--ink-soft); font-size:clamp(1.1rem,1.6vw,1.32rem); line-height:1.6; }
.sp-allies-note strong { color:var(--blue-700); }

/* ----------------------------- ANTHOLOGY ----------------------------- */
.sp-anthology { position:relative; overflow:hidden; display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch; border-radius:var(--r-xl); border:1px solid var(--gold-soft); box-shadow:var(--shadow-3); background:linear-gradient(150deg, rgba(255,255,255,0.95), rgba(246,240,228,0.7)); }
.sp-anthology::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--gold), transparent); z-index:2; }
.sp-anthology-copy { padding:clamp(34px,5vw,68px); display:flex; flex-direction:column; justify-content:center; }
.sp-anthology-copy .tag { align-self:flex-start; padding:6px 14px; border-radius:var(--pill); font-size:0.74rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:#8a6d36; background:var(--gold-soft); border:1px solid rgba(198,165,112,0.4); }
.sp-anthology-copy h2 { margin-top:20px; font-size:clamp(1.9rem,3.4vw,3rem); line-height:1.06; }
.sp-anthology-copy p { margin-top:18px; color:var(--ink-soft); font-size:1.1rem; line-height:1.7; max-width:46ch; }
.sp-anthology-media { position:relative; min-height:340px; background:linear-gradient(180deg, rgba(10,22,41,0.12), rgba(10,22,41,0.32)), url("images/support/anthology.webp") center / cover no-repeat, linear-gradient(150deg, #1c3357, #0f2440 90%, #0e2342); background-color:#12294a; }

/* ----------------------------- VISION 2031 --------------------------- */
.sp-vision {
  position:relative; overflow:hidden; isolation:isolate;
  width:min(100% - 24px, 1480px); margin:clamp(40px,6vw,90px) auto;
  border-radius:var(--r-xl); color:#fff;
  background:
    linear-gradient(180deg, rgba(9,20,38,0.62), rgba(9,20,38,0.82)),
    url("images/support/vision-2031.webp") center / cover no-repeat,
    radial-gradient(900px 500px at 20% 110%, rgba(198,165,112,0.28), transparent 60%),
    linear-gradient(150deg, #12294a, #0a1730);
  background-color:#0b1730;
}
.sp-vision-inner { width:min(100% - 2*var(--gutter), 980px); margin-inline:auto; padding:clamp(64px,9vw,130px) 0; }
.sp-vision .eyebrow { color:var(--gold); }
.sp-vision-hope { font-size:clamp(2rem,5vw,3.6rem); line-height:1.02; color:#fff; margin-top:14px; }
.sp-vision-hope .em { background:linear-gradient(120deg, var(--sky), #fff 60%, var(--gold-soft)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sp-vision-quote { margin-top:clamp(24px,3vw,38px); padding-left:clamp(20px,3vw,34px); border-left:3px solid var(--gold); font-family:var(--serif); font-size:clamp(1.4rem,2.8vw,2.3rem); line-height:1.32; color:rgba(255,255,255,0.94); text-wrap:pretty; }

/* ------------------------- SUPPORT CTA (финал) ----------------------- */
.sp-support { width:min(100% - 2*var(--gutter), var(--content)); margin-inline:auto; }
.sp-support-card { position:relative; overflow:hidden; isolation:isolate; border-radius:var(--r-xl); padding:clamp(38px,5.5vw,80px); border:1px solid var(--line); background:radial-gradient(700px 360px at 88% -10%, rgba(127,193,222,0.28), transparent 60%), radial-gradient(600px 360px at 4% 110%, rgba(198,165,112,0.18), transparent 60%), linear-gradient(150deg, rgba(255,255,255,0.96), rgba(234,244,252,0.92)); box-shadow:var(--shadow-3); }
.sp-support-head { max-width:760px; }
.sp-support-head h2 { font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.05; }
.sp-support-head p { margin-top:18px; color:var(--ink-soft); font-size:1.12rem; line-height:1.7; }
.sp-goal { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 26px; margin:clamp(30px,4vw,48px) 0 clamp(24px,3vw,36px); padding-bottom:clamp(24px,3vw,36px); border-bottom:1px solid var(--line); }
.sp-goal .amount { display:flex; align-items:flex-end; gap:8px; line-height:1; }
.sp-goal .num { font-family:var(--serif); font-size:clamp(3rem,8vw,5.4rem); line-height:1; white-space:nowrap; background:linear-gradient(120deg, var(--blue-700), var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sp-goal .cur { font-family:var(--serif); font-size:clamp(1.8rem,4vw,2.6rem); line-height:1; color:var(--blue-700); }
.sp-goal .label { align-self:flex-end; padding-bottom:8px; color:var(--muted); font-size:1rem; max-width:34ch; }
.sp-uses { display:flex; flex-wrap:wrap; gap:12px; }
.sp-uses span { display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:var(--pill); border:1px solid var(--line); background:var(--glass-soft); font-size:0.95rem; color:var(--ink-soft); }
.sp-uses span::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--blue-500); flex:none; }
.sp-closer { margin-top:clamp(34px,4.6vw,56px); padding-top:clamp(28px,3.4vw,40px); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,40px); }
.sp-closer .q { flex:1 1 360px; font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.35; color:var(--ink); max-width:22ch; }
.sp-closer .act { display:flex; flex-direction:column; gap:12px; }
.sp-closer .alt { color:var(--muted); font-size:0.92rem; }
.sp-closer .alt a { color:var(--blue-700); font-weight:700; }
.sp-signature { margin-top:clamp(30px,4vw,50px); display:flex; align-items:center; gap:16px; color:var(--muted); }
.sp-signature .line { flex:0 0 40px; height:1px; background:var(--line-strong); }
.sp-signature em { font-family:var(--serif); color:var(--ink-soft); font-size:1.04rem; }

/* ----------------------------- PIPELINE (годы) ----------------------- */
.sp-pipeline { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(14px,2vw,30px); margin-top:clamp(40px,5vw,68px); }
.sp-pipeline::before { content:""; position:absolute; left:6%; right:6%; top:13px; height:2px; background:linear-gradient(90deg, transparent, var(--blue-300) 6%, var(--sky) 50%, var(--blue-300) 94%, transparent); }
.sp-milestone { position:relative; padding-top:44px; }
.sp-milestone .node { position:absolute; top:3px; left:0; width:20px; height:20px; border-radius:50%; background:var(--blue-500); border:3px solid var(--paper-tint); animation:sp-twinkle 2.1s ease-in-out infinite; }
.sp-milestone:nth-child(2) .node { animation-delay:.5s; }
.sp-milestone:nth-child(3) .node { animation-delay:1s; }
.sp-milestone:nth-child(4) .node { animation-delay:1.5s; }
.sp-milestone:nth-child(5) .node { background:var(--gold); animation-name:sp-twinkle-gold; animation-delay:2s; }
.sp-milestone .yr { font-family:var(--serif); font-size:clamp(1.7rem,2.8vw,2.3rem); line-height:1; color:var(--blue-700); font-variant-numeric:tabular-nums; }
.sp-milestone:nth-child(5) .yr { color:var(--gold); }
.sp-milestone h3 { font-size:1.06rem; margin:12px 0 5px; line-height:1.2; text-wrap:balance; }
.sp-milestone p { font-size:0.96rem; color:var(--muted); line-height:1.45; text-wrap:balance; max-width:24ch; }
.sp-stat dt, .sp-goal .num { font-variant-numeric:tabular-nums; }
@keyframes sp-twinkle {
  0%,100% { box-shadow:0 0 0 2px var(--blue-300), 0 0 8px 1px rgba(127,193,222,.18); transform:scale(1); }
  50%     { box-shadow:0 0 0 3px var(--sky), 0 0 22px 8px rgba(127,193,222,.7); transform:scale(1.14); }
}
@keyframes sp-twinkle-gold {
  0%,100% { box-shadow:0 0 0 2px var(--gold-soft), 0 0 10px 1px rgba(198,165,112,.22); transform:scale(1); }
  50%     { box-shadow:0 0 0 3px var(--gold), 0 0 28px 11px rgba(198,165,112,.78); transform:scale(1.18); }
}
@keyframes sp-flow { to { background-position:20px 0; } }
@keyframes sp-shine { to { background-position:-200% center; } }

/* Мерцающий градиентный текст (ключевые слова в вопросах) */
.shine {
  background:linear-gradient(90deg, var(--sky) 0%, #fff 38%, var(--gold-soft) 50%, #fff 62%, var(--sky) 100%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sp-shine 4.5s linear infinite;
}

/* ===== БУДУЩЕЕ — форвард-таймлайн (продолжение линии в будущее) ===== */
.sp-future {
  position:relative; overflow:hidden; isolation:isolate; color:#fff;
  width:min(100% - 24px,1480px); margin:clamp(40px,6vw,90px) auto; border-radius:var(--r-xl);
  background:
    linear-gradient(180deg, rgba(9,20,38,0.84), rgba(9,20,38,0.9)),
    url("images/support/vision-2031.webp") center / cover no-repeat,
    radial-gradient(900px 520px at 50% -10%, rgba(127,193,222,0.32), transparent 60%),
    linear-gradient(150deg,#12294a,#0a1730);
  background-color:#0b1730;
}
.sp-future-inner { width:min(100% - 2*var(--gutter), var(--content)); margin-inline:auto; padding:clamp(64px,9vw,120px) 0; text-align:center; }
.sp-future .eyebrow { color:var(--gold); justify-content:center; }
.sp-future-title { font-size:clamp(2rem,5vw,3.8rem); line-height:1.04; color:#fff; margin-top:14px; text-wrap:balance; }
.sp-future-lead { max-width:60ch; margin:22px auto 0; color:rgba(255,255,255,0.84); font-family:var(--serif); font-style:italic; font-size:clamp(1.18rem,2vw,1.55rem); line-height:1.5; }
.sp-future-q { margin-top:clamp(44px,6vw,72px); font-family:var(--serif); font-size:clamp(1.8rem,4vw,3rem); line-height:1.2; color:#fff; }

.sp-pipeline-future { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(46px,6vw,76px); text-align:left; }
.sp-pipeline-future::before {
  border:0; height:2px; top:13px; left:8%; right:8%;
  background:repeating-linear-gradient(90deg, var(--sky) 0 7px, transparent 7px 20px);
  background-size:20px 2px; opacity:.65; animation:sp-flow 1.1s linear infinite;
}
.sp-pipeline-future .node { background:transparent; border:2px solid var(--sky); animation-name:sp-twinkle; animation-duration:1.6s; }
.sp-pipeline-future .yr { color:var(--sky); }
.sp-pipeline-future h3 { color:#fff; }
.sp-pipeline-future p { color:rgba(255,255,255,0.74); }

@media (prefers-reduced-motion:reduce){
  .sp-milestone .node { animation:none; box-shadow:0 0 0 2px var(--blue-300); transform:none; }
  .sp-pipeline-future::before, .shine { animation:none; }
}

/* ---------------------------- MESSAGE BANNER ------------------------- */
.sp-message {
  width:min(100% - 24px, 1480px); margin:clamp(40px,6vw,90px) auto;
  border-radius:var(--r-xl); padding:clamp(54px,8vw,110px) clamp(28px,5vw,80px);
  text-align:center; color:#fff; position:relative; overflow:hidden; isolation:isolate;
  background:
    linear-gradient(180deg, rgba(10,22,41,0.72), rgba(10,22,41,0.86)),
    url("images/support/message.webp") center / cover no-repeat,
    radial-gradient(800px 400px at 50% -20%, rgba(127,193,222,0.4), transparent 60%),
    linear-gradient(150deg, #16294a, #0c1a31 70%, #0a1730);
}
.sp-message .eyebrow { color:var(--sky); }
.sp-message h2 { color:#fff; font-size:clamp(2.4rem,7vw,5rem); line-height:1.0; }
.sp-message h2 .em { background:linear-gradient(120deg, var(--sky), #fff 60%, var(--gold-soft)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sp-message p { max-width:64ch; margin:clamp(22px,3vw,34px) auto 0; color:rgba(255,255,255,0.86); font-size:clamp(1.05rem,1.5vw,1.22rem); line-height:1.72; }

/* подпись автора */
.sp-signature { align-items:center; gap:18px; }
.sp-signature .who { color:var(--muted); font-size:1rem; }
.sp-signature .who strong { display:block; font-family:var(--serif); font-weight:600; font-size:1.3rem; color:var(--ink); margin-bottom:2px; }
.sp-portrait { width:78px; height:78px; border-radius:50%; object-fit:cover; object-position:center top; flex:none; border:2px solid #fff; box-shadow:0 0 0 1px var(--line-strong), var(--shadow-2); }

/* финал-строка + блок доната с QR */
.sp-closer .q-call { display:block; margin-top:14px; font-style:normal; background:linear-gradient(120deg, var(--blue-700), var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sp-donate { margin-top:clamp(34px,4.6vw,56px); padding-top:clamp(28px,3.4vw,40px); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:clamp(24px,4vw,48px); }
.sp-donate-copy { flex:1 1 320px; }
.sp-donate-copy .eyebrow { color:var(--blue-600); }
.sp-donate-copy p { margin-top:12px; color:var(--ink-soft); font-size:1.06rem; line-height:1.7; max-width:46ch; }
.sp-qr { flex:0 0 auto; margin:0; text-align:center; }
.sp-qr-box { display:block; width:180px; height:180px; border-radius:16px; background:#fff url("images/support/donate-qr.png") center / contain no-repeat; border:1px solid var(--line); box-shadow:var(--shadow-2); }
.sp-qr figcaption { margin-top:10px; font-size:0.82rem; color:var(--muted); }

/* ------------------------------ RESPONSIVE --------------------------- */
@media (max-width:1080px) {
  .sp-scale-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sp-jury { grid-template-columns:repeat(4,1fr); }
  .sp-anthology { grid-template-columns:1fr; }
  .sp-anthology-media { min-height:280px; order:-1; }
}
@media (max-width:900px) {
  /* Пайплайн — вертикальный, с линией слева */
  .sp-pipeline { grid-template-columns:1fr; gap:0; padding-left:6px; }
  .sp-pipeline::before { left:13px; right:auto; top:16px; bottom:16px; width:2px; height:auto; background:linear-gradient(180deg, var(--blue-300), var(--sky), transparent); }
  .sp-pipeline-future { grid-template-columns:1fr; }
  .sp-pipeline-future::before { background:linear-gradient(180deg, var(--sky), transparent); background-size:auto; animation:none; }
  .sp-milestone { padding:0 0 26px 46px; }
  .sp-milestone .node { top:5px; left:4px; }
  .sp-milestone h3 { font-size:1.05rem; }
  .sp-milestone p { font-size:0.95rem; }
}
@media (max-width:760px) {
  .sp-scale-grid { grid-template-columns:1fr; }
  .sp-jury { grid-template-columns:repeat(2,1fr); }
  .sp-closer { flex-direction:column; align-items:flex-start; }
}