/* site.css - контент страниц Winhero FR. Мобайл-фёрст, расширения через min-width. */

/* ===================== Типографика ===================== */
main h1, main h2, main h3{ font-family:var(--whr-font-display); font-weight:400; color:var(--whr-text); line-height:1.15; letter-spacing:.01em; }
main h1{ font-size:clamp(30px, 7.2vw, 54px); margin:0 0 18px; text-wrap:balance; }
main h2{ font-size:clamp(25px, 4.6vw, 38px); margin:0 0 18px; text-wrap:balance; }
main h3{ font-size:clamp(19px, 3vw, 23px); margin:0 0 10px; }
main p{ margin:0 0 14px; }
main p:last-child{ margin-bottom:0; }
main strong{ color:var(--whr-text); font-weight:700; }
.whr-prose a, .whr-link{ color:var(--whr-gold); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.whr-prose a:hover, .whr-link:hover{ color:var(--whr-lemon); }
.whr-prose{ max-width:72ch; }
.whr-prose ul, .whr-list{ list-style:none; display:grid; gap:8px; margin:0 0 16px; }
.whr-prose ul li, .whr-list li{ position:relative; padding-left:24px; }
.whr-prose ul li::before, .whr-list li::before{ content:""; position:absolute; left:2px; top:.62em; width:9px; height:9px; background:var(--whr-amber); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.whr-prose ol{ padding-left:22px; margin:0 0 16px; display:grid; gap:8px; }
.whr-prose ol li::marker{ color:var(--whr-gold); font-weight:700; }
.whr-note{ font-size:14px; color:var(--whr-muted); }
.whr-gradtext{ background:var(--whr-grad-h); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===================== Секции ===================== */
.whr-section{ padding:56px 0; position:relative; }
.whr-section--alt{ --whr-ghost-bg:var(--whr-bg-alt); background:var(--whr-bg-alt); }
.whr-section--hex{ --whr-ghost-bg:var(--whr-bg-alt); background:var(--whr-bg-alt) var(--whr-hex); }
.whr-section__head{ margin-bottom:28px; max-width:780px; }
.whr-chapter{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:12px;
  font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--whr-amber);
}
.whr-chapter::before{ content:""; width:28px; height:2px; background:var(--whr-grad-h); }
.whr-section__lead{ color:var(--whr-text-soft); font-size:18px; }
.whr-sub{ margin-top:40px; }
.whr-sub > p{ max-width:78ch; }
.whr-sub:first-child{ margin-top:0; }
@media (min-width:900px){ .whr-section{ padding:80px 0; } }

/* ===================== Hero ===================== */
.whr-hero{ position:relative; overflow:hidden; padding:36px 0 48px; background:
  radial-gradient(60% 70% at 85% 30%, rgba(255,149,0,.20), transparent 70%),
  radial-gradient(40% 50% at 10% 90%, rgba(255,50,70,.10), transparent 70%),
  var(--whr-hex), var(--whr-bg); }
.whr-hero__grid{ display:grid; gap:32px; align-items:center; }
.whr-hero__eyebrow{ display:inline-flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; list-style:none; }
.whr-tag{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--whr-text); background:var(--whr-surface-3); clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.whr-tag--hot{ background:var(--whr-red); color:var(--whr-ink); }
.whr-hero__lead{ font-size:18px; max-width:56ch; }
.whr-hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.whr-hero__media{ margin:0; }
.whr-hero__media img{ border:1px solid var(--whr-surface-3); clip-path:polygon(var(--whr-cut) 0,100% 0,100% calc(100% - var(--whr-cut)),calc(100% - var(--whr-cut)) 100%,0 100%,0 var(--whr-cut)); }
@media (min-width:960px){
  .whr-hero{ padding:64px 0 80px; }
  .whr-hero__grid{ grid-template-columns:1.15fr .85fr; gap:56px; }
}

/* купон пакета приветствия */
.whr-coupon{
  position:relative; padding:28px 24px 24px; color:var(--whr-text);
  background:linear-gradient(160deg, var(--whr-surface-2), var(--whr-surface) 60%);
  border:1px solid rgba(254,181,16,.35);
  clip-path:polygon(var(--whr-cut) 0,calc(100% - var(--whr-cut)) 0,100% var(--whr-cut),100% calc(100% - var(--whr-cut)),calc(100% - var(--whr-cut)) 100%,var(--whr-cut) 100%,0 calc(100% - var(--whr-cut)),0 var(--whr-cut));
}
.whr-coupon::after{ content:""; position:absolute; left:18px; right:18px; top:66%; border-top:2px dashed rgba(254,181,16,.4); }
.whr-coupon__label{ margin:0 0 8px; font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--whr-amber); }
.whr-coupon__value{ margin:0; font-family:var(--whr-font-display); font-size:clamp(52px, 13vw, 76px); line-height:1; }
.whr-coupon__sub{ margin:6px 0 0; font-size:20px; font-weight:700; }
.whr-coupon__levels{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:22px 0 34px; }
.whr-coupon__levels li{ padding:8px 4px; text-align:center; font-size:13px; line-height:1.3; background:rgba(255,255,255,.04); border-top:2px solid var(--whr-amber); }
.whr-coupon__levels strong{ display:block; font-family:var(--whr-font-display); font-weight:400; font-size:17px; color:var(--whr-gold); }
.whr-coupon .whr-cta{ width:100%; }
.whr-coupon__fine{ margin:12px 0 0; font-size:13px; color:var(--whr-muted); }

/* ===================== Плитки-цифры (bento) ===================== */
.whr-stats{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:0 0 28px; }
.whr-stat{ padding:18px 16px; background:var(--whr-surface); border:1px solid var(--whr-surface-3); clip-path:polygon(0 0,calc(100% - var(--whr-cut)) 0,100% var(--whr-cut),100% 100%,0 100%); }
.whr-stat__num{ display:block; font-family:var(--whr-font-display); font-size:clamp(28px, 6vw, 40px); line-height:1.05; color:var(--whr-gold); font-variant-numeric:tabular-nums; }
.whr-stat__label{ display:block; margin-top:6px; font-size:15px; color:var(--whr-text-soft); }
.whr-stat--wide{ grid-column:span 2; background:linear-gradient(120deg, rgba(255,149,0,.16), var(--whr-surface) 60%); }
@media (min-width:860px){ .whr-stats{ grid-template-columns:repeat(4,1fr); } .whr-stat--wide{ grid-column:span 2; } }

/* ===================== Таблицы ===================== */
.whr-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 16px; border:1px solid var(--whr-surface-3); background:var(--whr-surface); }
.whr-table-wrap table{ width:100%; border-collapse:collapse; min-width:520px; font-size:16px; }
.whr-table-wrap--narrow table{ min-width:0; }
.whr-table-wrap caption{ caption-side:top; text-align:left; padding:14px 16px; font-weight:700; color:var(--whr-text); background:var(--whr-surface-2); border-bottom:2px solid var(--whr-amber); }
.whr-table-wrap th, .whr-table-wrap td{ padding:12px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--whr-surface-3); }
.whr-table-wrap thead th{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--whr-amber); background:var(--whr-surface-2); }
.whr-table-wrap tbody th{ color:var(--whr-text); font-weight:600; }
.whr-table-wrap tbody tr:nth-child(even){ background:rgba(255,255,255,.02); }
.whr-table-wrap tbody tr:last-child > *{ border-bottom:0; }

/* ===================== Трек уровней (пакет на 4 депозита) ===================== */
.whr-track{ list-style:none; display:grid; gap:14px; counter-reset:lvl; margin:0 0 24px; position:relative; }
.whr-track__step{
  position:relative; padding:20px 18px 18px 72px; background:var(--whr-surface); border:1px solid var(--whr-surface-3);
  clip-path:polygon(0 0,calc(100% - var(--whr-cut)) 0,100% var(--whr-cut),100% 100%,var(--whr-cut) 100%,0 calc(100% - var(--whr-cut)));
}
.whr-track__step::before{
  counter-increment:lvl; content:counter(lvl);
  position:absolute; left:16px; top:18px; width:40px; height:46px;
  display:grid; place-items:center; font-family:var(--whr-font-display); font-size:20px; color:var(--whr-ink);
  background:var(--whr-grad); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.whr-track__lvl{ display:block; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--whr-muted); }
.whr-track__value{ display:block; margin:2px 0 4px; font-family:var(--whr-font-display); font-size:24px; color:var(--whr-text); }
.whr-track__detail{ display:block; font-size:15px; color:var(--whr-text-soft); }
@media (min-width:900px){
  .whr-track{ grid-template-columns:repeat(4,1fr); gap:16px; }
  .whr-track::before{ content:""; position:absolute; left:6%; right:6%; top:41px; height:2px; background:repeating-linear-gradient(90deg,var(--whr-amber) 0 10px,transparent 10px 18px); z-index:0; }
  .whr-track__step{ padding:78px 18px 20px; text-align:left; z-index:1; }
  .whr-track__step::before{ left:18px; top:18px; }
}

/* ===================== Карточки ===================== */
.whr-cards{ list-style:none; display:grid; gap:16px; }
.whr-card{
  display:flex; flex-direction:column; padding:20px; background:var(--whr-surface); border:1px solid var(--whr-surface-3);
  clip-path:polygon(0 0,calc(100% - var(--whr-cut)) 0,100% var(--whr-cut),100% 100%,0 100%);
}
.whr-card > h3{ display:flex; align-items:center; gap:10px; }
.whr-card__icon{ width:26px; height:26px; flex-shrink:0; color:var(--whr-gold); }
.whr-card__media{ margin:-20px -20px 16px; }
.whr-card__media img{ width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top left; }
.whr-card__figure{ font-family:var(--whr-font-display); font-size:22px; color:var(--whr-gold); margin:0 0 6px; }
.whr-card p{ font-size:16px; }
.whr-card .whr-list{ font-size:16px; }
.whr-card__foot{ margin-top:auto; padding-top:12px; }
@media (min-width:700px){ .whr-cards--2, .whr-cards--3, .whr-cards--4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .whr-cards--3{ grid-template-columns:repeat(3,1fr); } .whr-cards--4{ grid-template-columns:repeat(4,1fr); } }

/* ===================== Календарь недели ===================== */
.whr-week{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:0 0 20px; }
.whr-week__day{ padding:14px; background:var(--whr-surface); border:1px solid var(--whr-surface-3); min-height:120px; }
.whr-week__name{ display:block; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--whr-muted); }
.whr-week__offer{ display:block; margin:6px 0 4px; font-family:var(--whr-font-display); font-size:17px; line-height:1.2; color:var(--whr-text); }
.whr-week__detail{ display:block; font-size:14px; color:var(--whr-text-soft); }
.whr-week__day--on{ border-color:rgba(254,181,16,.6); background:linear-gradient(180deg, rgba(255,149,0,.14), var(--whr-surface) 70%); }
.whr-week__day--on .whr-week__name{ color:var(--whr-amber); }
@media (min-width:700px){ .whr-week{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:1080px){ .whr-week{ grid-template-columns:repeat(7,1fr); } }

/* ===================== Ступени VIP ===================== */
.whr-ladder{ list-style:none; display:grid; gap:8px; }
.whr-ladder__tier{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; padding:12px 16px; background:var(--whr-surface); border-left:4px solid var(--whr-amber); }
.whr-ladder__name{ font-family:var(--whr-font-display); color:var(--whr-text); }
.whr-ladder__perk{ grid-column:1/-1; font-size:14px; color:var(--whr-text-soft); }
.whr-ladder__lvl{ font-size:13px; color:var(--whr-muted); }
@media (min-width:860px){
  .whr-ladder{ grid-template-columns:repeat(5,1fr); align-items:end; }
  .whr-ladder__tier{ grid-template-columns:1fr; border-left:0; border-top:4px solid var(--whr-amber); }
  .whr-ladder__tier:nth-child(1){ min-height:120px; } .whr-ladder__tier:nth-child(2){ min-height:140px; }
  .whr-ladder__tier:nth-child(3){ min-height:160px; } .whr-ladder__tier:nth-child(4){ min-height:180px; }
  .whr-ladder__tier:nth-child(5){ min-height:200px; background:linear-gradient(180deg, rgba(255,149,0,.18), var(--whr-surface) 70%); }
}

/* ===================== Текст + картинка ===================== */
.whr-split{ display:grid; gap:24px; align-items:center; }
.whr-figure{ margin:0; }
.whr-figure img{ width:100%; border:1px solid var(--whr-surface-3); background:var(--whr-surface); }
.whr-figure figcaption{ margin-top:8px; font-size:14px; color:var(--whr-muted); }
@media (min-width:900px){
  .whr-split{ grid-template-columns:1fr 1fr; gap:48px; }
  .whr-split--rev > :first-child{ order:2; }
}

/* ===================== Шаги ===================== */
.whr-steps{ list-style:none; counter-reset:step; display:grid; gap:14px; margin:0 0 20px; }
.whr-steps > li{ position:relative; padding:16px 16px 16px 64px; background:var(--whr-surface); border:1px solid var(--whr-surface-3); }
.whr-steps > li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:14px; top:14px; width:36px; height:36px; display:grid; place-items:center;
  font-family:var(--whr-font-display); color:var(--whr-ink); background:var(--whr-grad);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.whr-steps .whr-figure{ margin-top:12px; max-width:420px; }
.whr-steps--compact > li{ padding:12px 12px 12px 56px; font-size:16px; }
.whr-steps--compact > li::before{ width:30px; height:30px; top:11px; left:12px; font-size:15px; }

/* ===================== Плюсы / минусы ===================== */
.whr-pc{ display:grid; gap:16px; }
.whr-pc__col{ padding:20px; background:var(--whr-surface); border-top:3px solid var(--whr-gold); }
.whr-pc__col--cons{ border-top-color:var(--whr-red); }
.whr-pc__list{ list-style:none; display:grid; gap:10px; }
.whr-pc__list li{ display:flex; gap:10px; align-items:flex-start; font-size:16px; }
.whr-pc__list svg{ width:20px; height:20px; flex-shrink:0; margin-top:3px; }
.whr-pc__col--pros svg{ color:var(--whr-gold); }
.whr-pc__col--cons svg{ color:var(--whr-red); }
@media (min-width:760px){ .whr-pc{ grid-template-columns:1fr 1fr; } }

/* ===================== Врезка ===================== */
.whr-callout{ display:grid; grid-template-columns:auto 1fr; gap:14px; padding:18px 20px; background:var(--whr-surface-2); border-left:4px solid var(--whr-red); margin:0 0 20px; }
.whr-callout svg{ width:26px; height:26px; color:var(--whr-red); }
.whr-callout p{ font-size:16px; }
.whr-callout--gold{ border-left-color:var(--whr-gold); }
.whr-callout--gold svg{ color:var(--whr-gold); }

/* ===================== Чипы ===================== */
.whr-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.whr-chips li{ padding:6px 12px; font-size:15px; font-weight:600; background:var(--whr-surface-2); border:1px solid var(--whr-surface-3); }

/* ===================== FAQ (светлая подложка) ===================== */
.whr-faq{ background:var(--whr-light); color:#23232f; }
.whr-faq h2{ color:var(--whr-ink); }
.whr-faq .whr-chapter{ color:#7a4a00; }
.whr-faq__list{ display:grid; gap:10px; }
.whr-faq__item{ background:#fff; border:1px solid #c0c0c7; }
.whr-faq__item summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center;
  min-height:56px; padding:14px 18px; font-weight:700; font-size:17px; color:var(--whr-ink);
}
.whr-faq__item summary::-webkit-details-marker{ display:none; }
.whr-faq__item summary::after{ content:""; flex-shrink:0; width:12px; height:12px; border-right:3px solid #ce7900; border-bottom:3px solid #ce7900; transform:rotate(45deg) translateY(-3px); transition:transform .2s var(--whr-ease); }
.whr-faq__item[open] summary::after{ transform:rotate(-135deg) translateY(-3px); }
.whr-faq__item[open]{ border-color:#ce7900; }
.whr-faq__a{ padding:0 18px 16px; font-size:16px; color:#2e2f3c; }
.whr-faq__a a{ color:#7a4a00; text-decoration:underline; }
.whr-faq :focus-visible{ outline-color:#7a4a00; }
@media (min-width:960px){ .whr-faq__list{ grid-template-columns:1fr 1fr; align-items:start; } }

/* ===================== Финальный CTA ===================== */
.whr-band{ --whr-ghost-bg:var(--whr-surface); position:relative; padding:32px 24px; text-align:center; background:var(--whr-surface) var(--whr-hex); border:1px solid rgba(254,181,16,.45);
  clip-path:polygon(var(--whr-cut) 0,calc(100% - var(--whr-cut)) 0,100% var(--whr-cut),100% calc(100% - var(--whr-cut)),calc(100% - var(--whr-cut)) 100%,var(--whr-cut) 100%,0 calc(100% - var(--whr-cut)),0 var(--whr-cut)); }
.whr-band h2, .whr-band h3{ margin-bottom:10px; }
.whr-band p{ margin:0 auto 20px; max-width:60ch; }
.whr-band__ctas{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.whr-pc h4{ margin:0 0 12px; font-family:var(--whr-font-display); font-weight:400; font-size:18px; color:var(--whr-text); }