/**
 * Write Guide PRO — только палитра.
 *
 * Вёрстка, шрифты, размеры и блоки берутся из wg2026.css: страницы намеренно
 * выглядят как один продукт. Здесь переопределяются лишь цвета — деловая
 * изумрудно-золотая гамма вместо синей.
 */

.wg26--pro {
  --b: #0E9F6E;   /* изумруд — основной */
  --v: #0B7C8A;   /* глубокая бирюза    */
  --t: #17B8A6;   /* мятная             */
  --a: #C9971F;   /* золото             */
  --r: #B26234;   /* бронза             */
  --g: #1E8E4F;   /* зелёный            */
}

/* Плашки-иконки: в общем файле фон задан готовым rgba, поэтому повторяем. */
.wg26--pro .wg26-card--blue   .wg26-ic,
.wg26--pro .wg26-card--blue   .wg26-check { background: rgba(14,159,110,.13);  color: var(--b); }
.wg26--pro .wg26-card--violet .wg26-ic,
.wg26--pro .wg26-card--violet .wg26-check { background: rgba(11,124,138,.13);  color: var(--v); }
.wg26--pro .wg26-card--teal   .wg26-ic,
.wg26--pro .wg26-card--teal   .wg26-check { background: rgba(23,184,166,.15);  color: #0e8e80; }
.wg26--pro .wg26-card--amber  .wg26-ic,
.wg26--pro .wg26-card--amber  .wg26-check { background: rgba(201,151,31,.15);  color: #9c7412; }
.wg26--pro .wg26-card--rose   .wg26-ic,
.wg26--pro .wg26-card--rose   .wg26-check { background: rgba(178,98,52,.13);   color: var(--r); }
.wg26--pro .wg26-card--green  .wg26-ic,
.wg26--pro .wg26-card--green  .wg26-check { background: rgba(30,142,79,.14);   color: var(--g); }

/* Цветная строка заголовка и кнопка. */
.wg26--pro .wg26-grad {
  /* Только background-image: сокращённое `background` сбросило бы
     background-clip и градиент лёг бы плашкой поверх текста. */
  background-image: linear-gradient(96deg, #45F0B8 0%, #52E3D4 46%, #FFD86B 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  filter: none;
}
.wg26--pro .wg26-btn--primary { background: var(--b); }
.wg26--pro .wg26-btn--primary:hover { background: #0c8a5f; }

/* Вуали на фото — с тёплым зелёным подтоном, чтобы фотографии те же,
   а настроение другое. */
.wg26--pro .wg26-hero__veil {
  background: linear-gradient(180deg, rgba(4,26,20,.82) 0%, rgba(5,30,24,.74) 42%, rgba(3,18,14,.92) 100%);
}
.wg26--pro .wg26-final__veil {
  background: linear-gradient(180deg, rgba(4,26,20,.8), rgba(3,18,14,.92));
}
.wg26--pro .wg26-prog { background: #06231b; }
/* Фотография в блоке программы тёплая — на зелёной странице она спорила
   с палитрой. Приглушаем и уводим в зелёный, оставляя фактуру. */
.wg26--pro .wg26-prog__bg {
  opacity: .22;
  filter: saturate(.35) hue-rotate(105deg) brightness(.9);
}

.wg26--pro .wg26-editbar { background: rgba(14,159,110,.94); }
.wg26--pro .wg26-pen { background: var(--b); }
.wg26--pro .wg26--edit .wg26-ed:hover,
.wg26--pro.wg26--edit .wg26-ed:hover { outline-color: rgba(14,159,110,.5); }

/* Кнопка на первый курс: синяя гамма основного лендинга — по цвету сразу
   понятно, что ведёт в другой курс. */
.wg26--pro .wg26-btn--base {
  border: 1px solid rgba(100,190,255,.5);
  background: rgba(10,132,255,.12);
  color: #8FD0FF;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.wg26--pro .wg26-btn--base:hover {
  border-color: rgba(100,190,255,.85);
  background: rgba(10,132,255,.2);
  color: #BBE4FF;
}

/* Финальный экран: фотография там тёплая, на зелёной странице она уводила
   палитру в коричневый. Тот же приём, что и в блоке программы: уводим
   фото в изумруд, фактура остаётся, настроение — своё. */
.wg26--pro .wg26-final__bg {
  filter: saturate(.6) hue-rotate(112deg) brightness(1.02);
}
.wg26--pro .wg26-final__veil {
  background: linear-gradient(180deg, rgba(3,26,20,.72) 0%, rgba(4,32,25,.62) 45%, rgba(2,16,12,.9) 100%);
}