:root {
  --bg-page: #ebeff8;
  --white: #fff;
  --text: #2B2B2B;
  --muted: #A4A4AA;
  --brand: #3C5FC8;
  --brand-2: #6781CE;
  --good: #2FAF38;
  --mid: #FFAF2F;
  --bad: #E04444;
  --white-12: rgba(255,255,255,0.12);
  --white-92: rgba(255,255,255,0.92);
  --focus-white: rgba(255,255,255,0.85);
  --brand-08: rgba(60,95,200,0.08);
  --brand-92: rgba(60,95,200,0.92);
  --focus-brand: rgba(60,95,200,0.4);
  --hero-gradient: linear-gradient(180deg,var(--brand) 0%,var(--brand-2) 100%);
  --icon-gradient: linear-gradient(180deg,#EFF3FF 23%,#F5F8FF 100%);
  --chip-height: 40px;
  --border-radius: 8px;
}

* {box-sizing:border-box}
body{margin:0;background:var(--bg-page);font:Montserrat,sans-serif}

.page{width:100%;max-width:1400px;margin:24px auto;padding:0 24px}

.hero{width:100%;padding:56px 48px;background:var(--hero-gradient);border-radius:24px;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:28px;margin-bottom:32px;box-shadow:0 20px 40px rgba(60,95,200,0.15)}
.hero__content{width:100%;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:28px}
.hero__text{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:16px}
.hero__title,.hero__subtitle{margin:0;width:100%;display:flex;flex-direction:column;justify-content:center;color:var(--white);font-family:Montserrat,sans-serif;word-wrap:break-word}
.hero__title{font-size:52px;font-weight:700;line-height:60px;letter-spacing:-0.02em}
.hero__subtitle{opacity:.88;font-size:16px;font-weight:500;line-height:20px;max-width:600px}
.hero__badges{width:100%;align-self:stretch;display:flex;justify-content:flex-start;align-items:flex-start;gap:20px;flex-wrap:wrap}

.chip{height:var(--chip-height);min-height:var(--chip-height);padding:0 20px;border-radius:var(--border-radius);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--white);background:0 0;color:var(--white);font:600 16px/20px Montserrat,sans-serif;cursor:pointer;user-select:none;transition:background-color 200ms ease,box-shadow 200ms ease,color 200ms ease}
.chip:hover{background:var(--white-12)}
.chip:active{transform:translateY(1px)}
.chip[aria-pressed=true]{background:var(--white);color:var(--brand);border-color:var(--white)}
.chip[aria-pressed=true]:hover{background:var(--white-92)}
.chip:focus-visible{outline:2px solid var(--focus-white);outline-offset:2px}
.chip:disabled{opacity:.5;cursor:not-allowed}

.howto,.faq{width:100%;padding:48px;background:var(--white);display:flex;flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:24px;border-radius:20px;box-shadow:0 12px 32px rgba(0,0,0,0.1)}
.howto{border-radius:20px}
.faq{border-radius:20px}
.title,.howto__title{margin:0;width:100%;color:var(--text);font:700 28px/34px Montserrat,sans-serif;letter-spacing:-0.01em}
.howto__list{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px}
.howto__item{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:48px}
.howto__icon{width:99px;height:99px;border-radius:16px;background:var(--icon-gradient);display:flex;align-items:center;justify-content:center}
.howto__item:nth-child(1) .howto__icon{padding:16px 18px}
.howto__item:nth-child(2) .howto__icon{padding:16px 26px}
.howto__item:nth-child(3) .howto__icon{padding:17px 10px}
.howto__img{display:block;max-width:99px;height:auto}
.howto__content{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}
.howto__item-title{color:var(--text);font:600 24px/28.8px Montserrat,sans-serif}
.howto__item-text{color:var(--muted);font:500 14px/16.8px Montserrat,sans-serif;max-width:520px}

.faq__list{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.faq__item{width:100%;padding-bottom:8px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.faq__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq__question{flex:1;display:flex;flex-direction:column;justify-content:center;color:var(--text);font:600 20px/24px Montserrat,sans-serif}
.faq__chevron{width:24px;height:24px;flex:0 0 24px;position:relative;overflow:hidden;background:url("../img/chevron.png") no-repeat center/contain;background-size:12px 6px;transition:transform 180ms ease;transform:rotate(180deg)}
.faq__item--open .faq__chevron{transform:rotate(0deg)}
.faq__answer{width:100%;max-width:1200px;color:var(--muted);font:500 14px/21px Montserrat,sans-serif;max-height:0;overflow:hidden;opacity:0;transition:max-height 220ms ease,opacity 180ms ease}
.faq__item--open .faq__answer{max-height:300px;opacity:1}

.offers{width:100%;margin-top:24px}
.offers__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
.offer-card{width:100%;padding:28px;background:var(--white);overflow:hidden;border-radius:20px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.offer-card__top{width:100%;display:flex;align-items:center;gap:12px}
.offer-card__logo{width:60px;height:60px;border-radius:12px;background:#fff;overflow:hidden;flex:0 0 50px;display:flex;align-items:center;justify-content:center}
.offer-card__logo img{width:100%;height:100%;object-fit:contain;display:block}
.offer-card__meta{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}
.offer-card__name{color:var(--text);font:500 18px/21.6px Montserrat,sans-serif}
.offer-card__rating{display:flex;align-items:center;gap:8px}
.offer-card__rating-left{display:flex;align-items:center;gap:4px}
.offer-card__rating-value{color:var(--text);font:500 14px/12px Montserrat,sans-serif}
.offer-card__reviews{color:var(--muted);font:500 12px/12px Montserrat,sans-serif}
.offer-card__terms{width:100%;display:flex;flex-direction:column;gap:8px}
.offer-card__terms-inner{width:100%;overflow:hidden;display:flex;flex-direction:column;gap:0}
.offer-card__row{width:100%;display:flex;justify-content:space-between;gap:16px;margin-bottom:8px}
.offer-card__label{color:var(--muted);font:400 12px/12px Montserrat,sans-serif}
.offer-card__value{text-align:right;color:var(--text);font:400 12px/12px Montserrat,sans-serif}
.offer-card__value--good{color:var(--good);font-weight:500}
.offer-card__value--mid{color:var(--mid);font-weight:500}
.offer-card__value--bad{color:var(--bad);font-weight:500}
.offer-card__btn{width:100%;height:var(--chip-height);min-height:var(--chip-height);padding:12px 20px;border:0;border-radius:var(--border-radius);background:var(--brand);display:inline-flex;align-items:center;justify-content:center;color:var(--white);font:700 16px/19.2px Montserrat,sans-serif;cursor:pointer;text-decoration:none;transition:background-color 200ms ease,box-shadow 200ms ease,transform 100ms ease}
.offer-card__btn:hover{filter:brightness(.9)}
.offer-card__btn:active{transform:translateY(1px)}
/* Warning ближе к кнопке */
.offer-card__warning{width:100%;font:500 11px/1.3 Montserrat,sans-serif;color:#A4A4AA!important;text-align:center;margin-top:0px;padding:4px 0px;border-top:1px solid #E0E0E0;opacity:.9}
.offer-card__star{width:13px;height:12px;display:inline-block;background:url("../img/icons/star.png") no-repeat center/contain}

.disclaimer{padding-top:16px}
.disclaimer__text,.disclaimer__textspisok{margin:0;font:400 14px/1.6 Montserrat,sans-serif;color:#8e8e92}
.disclaimer__textspisok{font-size:12px}

/* Media Queries */
@media (max-width:1024px){.offers__grid{grid-template-columns:repeat(3,minmax(0,2fr));gap:12px}}
@media (max-width:820px){.offers__grid{grid-template-columns:repeat(2,minmax(0,2fr));gap:12px}.offer-card__logo{flex:0 0 30px}}
@media (max-width:768px){
  .hero{border-radius:20px;margin-bottom:20px}
  .hero__title{font-size:40px;line-height:48px;max-width:560px}
  .faq__answer{max-width:100%}
  .offer-card__warning{font-size:10px;margin-top:6px;padding:2px 6px}
}
@media (max-width:580px){
  .hero{padding:36px 24px;gap:16px;border-radius:16px;margin-bottom:16px}
  .hero__content{gap:16px}
  .hero__text{gap:8px}
  .hero__title{font-size:32px;line-height:38.4px;max-width:400px}
  .hero__subtitle{font-size:16px;line-height:22px;max-width:400px;opacity:1}
  .hero__badges{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;padding:0;align-items:stretch;min-height:var(--chip-height)}
  .chip{font-size:15px;font-weight:600;line-height:18px;padding:0 14px;border-radius:var(--border-radius);justify-content:center;flex:1}
  
  .howto,.faq{padding:36px 24px;gap:16px;border-radius:12px}
  .title,.howto__title{font-size:20px;line-height:30px}
  .faq__question{font-size:14px;line-height:16.8px}
  .howto__item{gap:16px}
  .howto__icon{width:80px;height:80px;border-radius:12px}
  .howto__item-title{font:600 14px/16.8px Montserrat,sans-serif}
  .howto__img{max-width:80px}
  .offer-card{gap:12px}
  .offers__grid{grid-template-columns:1fr;gap:12px}
  .offer-card{padding:20px;gap:12px;border-radius:16px}
  .offer-card__rating-value,.offer-card__reviews{font-size:10px}
  .offer-card__logo{flex:0 0 44px;border-radius:10px}
  .offer-card__btn{padding:12px 20px}
}
@media (max-width:480px){
  .hero{padding:24px 16px;gap:12px;border-radius:12px}
  .hero__title{font-size:28px;line-height:33.6px;max-width:280px}
  .hero__subtitle{font-size:14px;line-height:19.2px;max-width:280px}
  .hero__badges{gap:8px}
  .chip{font-size:14px;line-height:16px;padding:0 12px;border-radius:var(--border-radius);flex:1}
  
  .faq{padding:24px 20px;border-radius:12px}
  .faq__question{font-size:12px;line-height:14.4px}
  .disclaimer__text{font-size:12px}
  .offer-card__warning{font-size:10px;margin-top:4px;padding:2px 4px}
  .offers__grid{grid-template-columns:1fr;gap:12px}
  .offer-card{padding:20px;gap:12px;border-radius:16px}
  .offer-card__rating-value,.offer-card__reviews{font-size:10px}
  .offer-card__logo{flex:0 0 44px;border-radius:10px}
  .offer-card__btn{padding:12px 20px}
}
@media (max-width:430px){
  .offers__grid{grid-template-columns:1fr;gap:12px}
  .offer-card{padding:20px;gap:12px;border-radius:16px}
  .offer-card__rating-value,.offer-card__reviews{font-size:10px}
  .offer-card__logo{flex:0 0 44px;border-radius:10px}
  .offer-card__btn{padding:12px 20px}
}