/* ==========================================================================
   Flame Club — landing
   Вёрстка 1:1 по макету Figma (frame «Landing», 1440×5253)
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{
  font-family:'Druk Cyr';
  src:url('../fonts/DrukCyr-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Gilroy';
  src:url('../fonts/Gilroy-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Gilroy';
  src:url('../fonts/Gilroy-SemiBold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Krona One';
  src:url('../fonts/KronaOne-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --orange:#FE4F02;
  --ink:#342F2D;
  --white:#fff;
  --page-w:1440px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:'Gilroy',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-weight:600;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,p{margin:0}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

.page{
  position:relative;
  width:var(--page-w);
  margin:0 auto;
  overflow:hidden;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 24px;
  border-radius:12px;
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:14px;
  line-height:16.69px;
  white-space:nowrap;
  cursor:pointer;
  border:0;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
.btn--ghost-dark{background:rgba(52,47,45,.05);color:var(--ink)}
.btn--ghost-dark:hover{background:rgba(52,47,45,.1)}
.btn--white{background:var(--white);color:var(--orange)}
.btn--white:hover{background:#FFF1EA}
.btn--glass{background:rgba(255,255,255,.2);color:var(--white)}
.btn--glass:hover{background:rgba(255,255,255,.32)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  display:flex;
  align-items:center;
  height:87px;
  padding:3px 35px 0;
}
.logo{
  font-family:'Krona One',sans-serif;
  font-weight:400;
  font-size:20px;
  line-height:20px;
  letter-spacing:-2.6px;
  color:var(--ink);
  white-space:nowrap;
  width:123px;
}
.nav{
  display:flex;
  align-items:center;
  gap:37px;
  margin-left:222px;
}
.nav a{
  font-size:16px;
  line-height:22.4px;
  color:rgba(52,47,45,.5);
  transition:color .2s ease;
}
.nav a:hover{color:var(--ink)}
/* ширины пунктов зафиксированы по макету, чтобы позиции совпадали 1:1 */
.nav a:nth-child(1){width:141px}
.nav a:nth-child(2){width:114px}
.nav a:nth-child(3){width:66px}
.nav a:nth-child(4){width:86px}
.nav a:nth-child(5){width:58px}
.nav a:nth-child(6){width:31px}
.header__cta{
  margin-left:auto;
  margin-bottom:1px;
  width:194px;
  height:45px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  width:1370px;
  height:696px;
  margin:0 auto;
  background:var(--orange);
  border-radius:50px;
}

/* --- фотографии --- */
.hero__photo{
  position:absolute;
  transform-origin:0 0;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  border-radius:22px;
  box-shadow:0 0 0 5px #fff;
  z-index:3;
}
.hero__photo--1{left:49.0003px;  top:7.5596px;   width:148.04px; height:139.49px; transform:rotate(34.53deg)}
.hero__photo--2{left:1026.5388px;top:-16px;      width:191px;    height:201px;    transform:rotate(17.53deg)}
.hero__photo--3{left:174px;      top:234.7722px; width:187.66px; height:259.74px; transform:rotate(-14.43deg)}
.hero__photo--4{left:466.4327px; top:187px;      width:80.67px;  height:80.56px;  transform:rotate(31.78deg);
                border-radius:17px; z-index:1}
.hero__photo--5{left:1204px;     top:285.3523px; width:147.07px; height:154.77px; transform:rotate(-22.95deg)}
.hero__photo--6{left:15.8856px;  top:463.8124px; width:111.79px; height:131.56px; transform:rotate(13.82deg)}
.hero__photo--7{left:1096.5883px;top:463px;      width:85.62px;  height:90.11px;  transform:rotate(11.26deg);
                box-shadow:0 0 0 5px #fff, 0 4px 90px #EB4F3E}

/* --- заголовок --- */
.hero__title{
  position:absolute;
  left:379px;
  top:27px;
  width:700.09px;
  height:370.84px;
  margin:0;
  z-index:2;
  font-family:'Druk Cyr',sans-serif;
  font-weight:700;
  font-size:125.92425px;
  line-height:159.43px;
  letter-spacing:2.51848px;
  text-transform:uppercase;
  white-space:nowrap;
}
.hero__title .ht{
  position:absolute;
  height:159.43px;
  color:var(--white);
}
.hero__title .ht--o{
  overflow:visible;
  width:1px;
  fill:none;
  stroke:var(--white);
  stroke-width:4.621px;   /* 2×2.3105 — половина срезается клипом по глифу */
}
.hero__title .ht--o text{
  font-family:'Druk Cyr',sans-serif;
  font-weight:700;
  font-size:125.92425px;
  letter-spacing:2.51848px;
}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.ht--1o{left:0;         top:0}
.ht--1f{left:147.874px; top:0}
.ht--2f{left:158.272px; top:105.129px}
.ht--2o{left:399.723px; top:105.129px}
.ht--3o{left:79.714px;  top:211.414px}
.ht--3f{left:189.464px; top:211.414px}

/* --- описание --- */
.hero__about{
  position:absolute;
  left:459px;
  top:398px;
  width:413px;
  height:92px;
  z-index:4;
}
.hero__about-icon{
  position:absolute;
  left:0; top:0;
  width:56px; height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.1);
}
.hero__about-name{
  position:absolute;
  left:76px; top:2px;
  width:123px; height:20px;
  font-family:'Krona One',sans-serif;
  font-weight:400;
  font-size:20px;
  line-height:20px;
  letter-spacing:-2.6px;
  color:var(--white);
}
.hero__about-text{
  position:absolute;
  left:77px; top:32px;
  width:336px; height:60px;
  display:flex;
  align-items:center;
  font-family:'Gilroy',sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:19.6px;
  color:var(--white);
}

/* --- кнопки --- */
.hero__actions{
  position:absolute;
  left:479px;
  top:562px;
  display:flex;
  align-items:center;
  gap:8px;
  z-index:4;
}
.hero__actions .btn{height:52px}
.hero__actions .btn--white{width:194px}
.hero__actions .btn--glass{width:210px}

/* ==========================================================================
   КАК ЭТО РАБОТАЕТ
   ========================================================================== */
.section-title{
  display:flex;
  align-items:center;
  justify-content:center;
  height:50px;
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:36px;
  line-height:50.4px;
  color:var(--ink);
  text-align:center;
}

.how{
  width:1200px;
  margin:100px auto 0;
}
.how__cards{
  display:flex;
  gap:16px;
  margin-top:32px;
}

.card{
  position:relative;
  width:592px;
  height:674px;
  border-radius:40px;
  overflow:hidden;
}
/* обводка внутренняя (как в макете) — inset-тенью, чтобы не сдвигать контент */
.card--orange{background:rgba(254,79,2,.05); box-shadow:inset 0 0 0 1px rgba(254,79,2,.5)}
.card--blue  {background:rgba(102,146,253,.05); box-shadow:inset 0 0 0 1px rgba(102,146,253,.5)}

/* «водяной знак» на фоне карточки */
.card__ghost{
  position:absolute;
  font-family:'Druk Cyr',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  opacity:.3;
  white-space:nowrap;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  z-index:1;
}
.card--orange .card__ghost{
  left:55px; top:320px; width:481px; height:176px;
  font-size:139px; line-height:176.391px; letter-spacing:2.78px;
  background-image:linear-gradient(to left,#FFD2BF,#FE4F02);
}
.card--blue .card__ghost{
  left:50px; top:303px; width:500px; height:214px;
  font-size:169px; line-height:214.461px; letter-spacing:3.38px;
  background-image:linear-gradient(to left,#D3DFF9,#CFDDFF);
}

/* размытое пятно-подсветка */
.card__glow{
  position:absolute;
  width:346px; height:346px;
  border-radius:50%;
  filter:blur(67px);
}
.card--orange .card__glow{left:10px; top:396px; background:#FE4F02; opacity:.2; z-index:3}
.card--blue   .card__glow{left:240px; top:406px; background:#6692FD; opacity:.3; z-index:1}

/* текстовая часть */
.card__head{
  position:absolute;
  left:50px; top:50px;
  z-index:2;
}
.card--blue .card__head{z-index:3}
.card--orange .card__head{width:474px}
.card--blue   .card__head{width:492px}

.card__title{
  display:flex;
  align-items:center;
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:24px;
  color:var(--ink);
}
.card--orange .card__title{height:34px; line-height:33.6px}
.card--blue   .card__title{height:29px; line-height:28.8px; transform:translateY(1px)}

.steps{
  margin:24px 0 0;
  padding:0;
  list-style:none;
}
.steps__item{
  display:flex;
  align-items:center;
  gap:16px;
  height:40px;
}
.steps__item--tall{height:46px}
.steps__item + .steps__item{margin-top:16px}

/* Figma сажает базовую линию 18px-текста на 2px ниже, чем это делает браузер
   при тех же размерах бокса и line-height. Компенсация замерена по эталонному рендеру. */
.steps__num,
.steps__text{transform:translateY(2px)}
.steps__item--tall .steps__text{transform:translateY(1px)}

.steps__num{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:50%;
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:25.2px;
}
.card--orange .steps__num{background:rgba(254,79,2,.11); color:#FE4F02}
.card--blue   .steps__num{background:rgba(102,146,253,.11); color:#6692FD}

.steps__text{
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:23.4px;
  color:var(--ink);
}
/* ширины текстовых боксов зафиксированы по макету — от них зависят переносы */
.steps__text--w212{width:212px}
.steps__text--w223{width:223px}
.steps__text--w299{width:299px}
.steps__text--w418{width:418px}

/* скриншоты интерфейса */
.card__shot{
  position:absolute;
  transform-origin:0 0;
  border-radius:9px;
  object-fit:cover;
  z-index:4;
}
.card__shot--a{
  left:60px; top:465.0383px;
  width:498.29px; height:357.8px;
  transform:rotate(-10.53deg);
}
.card__shot--b{
  left:57.1356px; top:397.8171px;
  width:513.14px; height:296.84px;
  transform:rotate(7.32deg);
}

/* ==========================================================================
   ПРЕИМУЩЕСТВА (бенто-сетка)
   ========================================================================== */
.benefits{
  width:1200px;
  margin:100px auto 0;
}
.benefits__title{
  display:flex;
  align-items:center;
  justify-content:center;
  height:88px;
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:36px;
  line-height:43.56px;
  color:var(--ink);
  text-align:center;
}

.bento{
  position:relative;
  height:431px;
  margin-top:32px;
}
.bento__card{
  position:absolute;
  border-radius:40px;
  overflow:hidden;
}
.bento__card--money    {left:0;    top:0;   width:429px; height:219px; background:#6692FD}
.bento__card--formats  {left:445px;top:0;   width:466px; height:219px; background:#FE4F03}
.bento__card--analytics{left:927px;top:0;   width:273px; height:429px; background:rgba(146,5,254,.1)}
.bento__card--direct   {left:0;    top:238px;width:372px;height:193px; background:rgba(102,146,253,.1)}
.bento__card--safety   {left:387px;top:238px;width:524px;height:190px; background:rgba(102,146,253,.1)}


/* декоративная 3D-графика */
.art{
  position:absolute;
  transform-origin:0 0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}
.art--money-1{left:206.5px; top:48px;      width:344px;    height:344px;    background-image:url(../img/3833134a9e.png); filter:blur(22px); opacity:.5}
.art--money-2{left:217px;   top:18px;      width:272px;    height:273px;    background-image:url(../img/3833134a9e.png)}
.art--money-3{left:417.1455px;top:-83.3287px;width:191.93px;height:192.64px;background-image:url(../img/3833134a9e.png); transform:rotate(54.04deg); filter:blur(3.5px)}

.art--formats-1{left:267.1552px;top:-15.4537px;width:379.75px;height:379.75px;background-image:url(../img/1b97dc0dc8.png); transform:rotate(15.96deg); filter:blur(37px); opacity:.5}
.art--formats-2{left:247.1552px;top:-35.4537px;width:300.05px;height:300.05px;background-image:url(../img/1b97dc0dc8.png); transform:rotate(15.96deg)}

.art--analytics-1{left:267.1552px;top:-15.4537px;width:379.75px;height:379.75px;background-image:url(../img/1b97dc0dc8.png); transform:rotate(15.96deg); filter:blur(37px); opacity:.5}
.art--analytics-2{left:-25.1857px;top:57.8654px; width:225.71px;height:225.71px;background-image:url(../img/b013a2bd86.png); transform:rotate(-21.58deg); filter:blur(7px)}
.art--analytics-3{left:47px;      top:-1px;      width:284px;   height:284px;   background-image:url(../img/b013a2bd86.png); filter:blur(32px); opacity:.5}
.art--analytics-4{left:129.441px; top:-131.9281px;width:306.41px;height:306.41px;background-image:url(../img/b013a2bd86.png); transform:rotate(29.1deg)}

.art--direct-1{left:415.0752px;top:-9.8289px;width:214.15px;height:244.55px;background-image:url(../img/4903866d65.png); background-size:214.15px 197.34px; background-position:0px -19.23px; transform:rotate(70.55deg)}

.art--safety-1{left:408.5137px;top:-73.5332px;width:141.99px;height:178.07px;background-image:url(../img/260413f037.png); transform:rotate(25.6deg)}
.art--safety-2{left:304.1895px;top:66.8113px; width:181px;   height:227px;   background-image:url(../img/260413f037.png); transform:rotate(-16.71deg)}

/* заголовки и тексты карточек */
.bento__title,
.bento__text{
  position:absolute;
  display:flex;
  align-items:center;
  font-family:'Gilroy',sans-serif;
  font-weight:600;
}
.bento__title{font-size:24px; line-height:28.8px}
.bento__text {font-size:18px; line-height:23.4px}

.bento__card--money    .bento__title{left:29px; top:27px;  width:229px; height:29px; color:#fff}
.bento__card--formats  .bento__title{left:29px; top:27px;  width:339px; height:29px; color:#fff}
.bento__card--analytics .bento__title{left:32px; top:269px; width:156px; height:58px; color:var(--ink)}
.bento__card--analytics .bento__text {left:32px; top:343px; width:188px; height:36px; color:var(--ink)}
.bento__card--direct   .bento__title{left:40px; top:30px;  width:203px; height:58px; color:var(--ink)}
.bento__card--direct   .bento__text {left:40px; top:104px; width:292px; height:59px; color:var(--ink)}
.bento__card--safety   .bento__title{left:40px; top:40px;  width:284px; height:58px; color:var(--ink)}
.bento__card--safety   .bento__text {left:40px; top:114px; width:444px; height:36px; color:var(--ink)}

/* «теги» форматов и способов оплаты */
.chips{
  position:absolute;
  left:29px; top:70px;
  width:371px;
  margin:0; padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.chips__row{display:flex; gap:4px}
.chip{
  display:flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:10px 12px 13px 9px;
  border-radius:12px;
  background:rgba(255,255,255,.15);
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:23.4px;
  color:#fff;
  white-space:nowrap;
}
.chip > span{transform:translateY(2px)}
.chips--formats{width:408px}
.chips--formats .chip{height:38px; padding:12px 10px 13px 9px}

/* ширины «тегов» зафиксированы по макету */
.bento__card--money   .chip:nth-child(1){width:103px}
.bento__card--money   .chip:nth-child(2){width:172px}
.bento__card--money   .chip:nth-child(3){width:85px}
.chips__row{width:146px}
.chips__row .chip:nth-child(1){width:70px}
.chips__row .chip:nth-child(2){width:72px}
.chips--formats > .chip:nth-child(2){width:197px}
.chips--formats > .chip:nth-child(3){width:101px}

.benefits__cta{
  display:flex;
  width:194px;
  height:52px;
  margin:32px auto 0;
}
.btn--orange{background:#FE4F03; color:#fff}
.btn--orange:hover{background:#E64602}

/* ==========================================================================
   КОМУ ПОДХОДИТ
   ========================================================================== */
.who{
  width:1200px;
  margin:100px auto 0;
}
.who__title{
  display:flex;
  align-items:center;
  justify-content:center;
  height:44px;
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:36px;
  line-height:43.56px;
  color:var(--ink);
  text-align:center;
}
.who__list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-content:flex-start;
  gap:8px;
  width:1200px;
  margin:32px 0 0;
  padding:0;
  list-style:none;
}
.who__card{
  display:flex;
  align-items:center;
  gap:12px;
  height:104px;
  padding:40px 30px 40px 20px;
  border-radius:30px;
  overflow:hidden;
}
.who__sticker{
  flex:none;
  width:71px;
  height:71px;
  background-repeat:no-repeat;
}
/* размер/положение картинки внутри стикера — из imageTransform фигмы (STRETCH ≠ 1:1) */
.who__card--art     .who__sticker{background-size:71px 72.05px;   background-position:0px -4.89px}
.who__card--music   .who__sticker{background-size:77.72px 77.72px;background-position:1.92px 0.48px}
.who__card--podcast .who__sticker{background-size:70.46px 71px;   background-position:2.65px -4.8px}
.who__card--writer  .who__sticker{background-size:89.23px 89.23px;background-position:-11.99px -8.64px}
.who__card--video   .who__sticker{background-size:71px 71px;      background-position:-0.96px -4.8px}
.who__card--gamedev .who__sticker{background-size:73.88px 73.88px;background-position:-6.24px 2.88px}
.who__card--school  .who__sticker{background-size:cover}
.who__text{
  display:flex;
  align-items:center;
  height:44px;
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:21.6px;
  color:var(--ink);
  transform:translateY(2px);
}
/* размеры и цвета карточек — по макету */
.who__card--art    {width:276px; background:rgba(3,254,11,.10)}
.who__card--music  {width:260px; background:rgba(102,146,253,.10)}
.who__card--podcast{width:242px; background:rgba(254,79,3,.10)}
.who__card--writer {width:296px; background:rgba(146,5,254,.08)}
.who__card--video  {width:258px; background:rgba(255,181,10,.10)}
.who__card--gamedev{width:287px; background:rgba(10,202,255,.10)}
.who__card--school {width:281px; background:rgba(255,10,144,.10)}

.who__card--art     .who__sticker{height:72.01px}
.who__card--podcast .who__sticker{width:70px}

.who__card--art     .who__text{width:143px}
.who__card--music   .who__text{width:127px}
.who__card--podcast .who__text{width:110px}
.who__card--writer  .who__text{width:163px}
.who__card--video   .who__text{width:125px}
.who__card--gamedev .who__text{width:154px; height:22px}
.who__card--school  .who__text{width:148px}

/* ==========================================================================
   СРАВНЕНИЕ С ДРУГИМИ ПЛАТФОРМАМИ
   ========================================================================== */
.compare{
  width:1200px;
  margin:100px auto 0;
}
.section-title--tight{height:44px}

.cmp{
  position:relative;
  margin-top:32px;
}
.cmp__head{
  position:relative;
  height:18px;
}
.cmp__h{
  position:absolute;
  top:0;
  display:flex;
  align-items:center;
  height:18px;
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:14px;
  line-height:18.2px;
  color:var(--ink);
  opacity:.5;
}
.cmp__h--platform{left:50px;  width:77px}
.cmp__h--formats {left:217px; width:127px}
.cmp__h--monet   {left:675px; width:141px}
.cmp__h--aud     {left:1004px;width:141px}

.cmp__rows{
  position:relative;
  margin:10px 0 0;
  padding:0;
  list-style:none;
  height:552px;
}
.cmp__row{
  position:absolute;
  left:0;
  width:1200px;
  height:104px;
  border-radius:30px;
  background:rgba(102,146,253,.05);
}
.cmp__row--us{
  background:rgba(254,79,3,.05);
  box-shadow:inset 0 0 0 1px rgba(254,79,3,.4);
}
.cmp__row:nth-child(1){top:0}
.cmp__row:nth-child(2){top:112px}
.cmp__row:nth-child(3){top:224px}
.cmp__row:nth-child(4){top:336px}
.cmp__row:nth-child(5){top:448px}

.cmp__logo{position:absolute}
.cmp__logo--flame{
  left:40px; top:42px;
  display:flex; align-items:center;
  height:20px;
  font-family:'Krona One',sans-serif;
  font-weight:400;
  font-size:20px;
  line-height:20px;
  letter-spacing:-2.6px;
  color:#FE4F02;
  white-space:nowrap;
}
.cmp__logo--img{opacity:.4; object-fit:contain}
.cmp__logo--patreon {left:24px; top:-28px; width:162px; height:162px}
.cmp__logo--onlyfans{left:34px; top:-19.5px;width:141px; height:141px; filter:brightness(.2)}
.cmp__logo--boosty  {left:41px; top:31px; width:115.15px;height:38px; filter:grayscale(1) brightness(.15)}
.cmp__logo--kofi    {left:38px; top:50px; width:115px;  height:32px}

.cmp__tags{
  position:absolute;
  left:217px;
  display:flex;
  align-items:center;
  gap:4px;
  height:42px;
}
.cmp__row:nth-child(1) .cmp__tags{top:31px}
.cmp__row:nth-child(2) .cmp__tags{top:31px}
.cmp__row:nth-child(3) .cmp__tags{top:31px}
.cmp__row:nth-child(4) .cmp__tags{top:31px}
.cmp__row:nth-child(5) .cmp__tags{top:31px}

.tag{
  display:flex;
  align-items:center;
  gap:6px;
  height:42px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(102,146,253,.10);
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:14px;
  line-height:16.8px;
  color:var(--ink);
  white-space:nowrap;
}
.cmp__row--us .tag{background:rgba(254,79,3,.10)}
.tag__icon{width:18px; height:18px; flex:none}
.tag > span{transform:translateY(0.5px)}

.cmp__text{
  position:absolute;
  display:flex;
  align-items:center;
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:21.6px;
  color:var(--ink);
  width:275px;
}
.cmp__text--aud{width:168px}
.cmp__text--monet{left:675px}
.cmp__text--aud{left:1004px}
.cmp__row:nth-child(1) .cmp__text{top:30px; height:44px}
.cmp__row:nth-child(2) .cmp__text--monet{top:41px; height:22px}
.cmp__row:nth-child(2) .cmp__text--aud{top:30px; height:44px}
.cmp__row:nth-child(3) .cmp__text{top:41px; height:22px}
.cmp__row:nth-child(4) .cmp__text{top:41px; height:22px}
.cmp__row:nth-child(5) .cmp__text{top:41px; height:22px}

/* ==========================================================================
   ОТЗЫВЫ
   ========================================================================== */
.reviews{
  position:relative;
  width:1200px;
  margin:100px auto 0;
}
.reviews__wrap{
  position:relative;
  margin-top:32px;
  height:201px;
}
.reviews__track{
  display:flex;
  align-items:center;
  gap:8px;
  height:201px;
}
.review{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  width:394.67px;
  height:201px;
  padding:24px;
  border-radius:30px;
  background:rgba(102,146,253,.05);
}
.review__text{
  width:346.67px;
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:23.4px;
  color:var(--ink);
}
.review__divider{
  width:346.67px;
  height:1px;
  background:rgba(0,0,0,.05);
}
.review__author{
  display:flex;
  align-items:center;
  gap:10px;
  width:329px;
}
.review__avatar{
  flex:none;
  width:44px; height:44px;
  border-radius:50%;
  object-fit:cover;
  background:#D9D9D9;
}
.review__who{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.review__name{
  width:275px;
  height:21px;
  display:flex;
  align-items:center;
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:16px;
  line-height:20.8px;
  color:var(--ink);
}
.review__date{
  width:275px;
  height:18px;
  display:flex;
  align-items:center;
  font-family:'Gilroy',sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:18.2px;
  color:var(--ink);
  opacity:.4;
}

.reviews__arrow{
  position:absolute;
  top:75px;
  width:44px; height:44px;
  border:0;
  padding:0;
  background:none;
  cursor:pointer;
}
.reviews__arrow--prev{left:-22px}
.reviews__arrow--next{right:-23px}
.reviews__arrow img{display:block; width:44px; height:44px}

.reviews__dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin-top:16px;
}
.dot{
  width:8px; height:8px;
  border-radius:50%;
  background:#6692FD;
  opacity:.3;
}
.dot--active{opacity:1}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{
  width:1200px;
  margin:100px auto 0;
}
.faq__list{
  width:824px;
  margin:32px auto 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.faq__item{
  border-radius:30px;
  box-shadow:inset 0 0 0 2px rgba(102,146,253,.2);
  overflow:hidden;
}
.faq__item--open{
  box-shadow:inset 0 0 0 2px #6692FD;
}
.faq__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  padding:24px 34px;
  cursor:pointer;
}
.faq__item--open .faq__row{align-items:flex-start}
.faq__content{
  display:flex;
  flex-direction:column;
  width:686px;
}
.faq__q{
  display:flex;
  align-items:center;
  width:686px;
  height:31px;
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:24px;
  line-height:31.2px;
  color:var(--ink);
}
.faq__toggle{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px; height:50px;
  border-radius:16px;
  background:rgba(102,146,253,.10);
  transition:background-color .2s ease;
}
.faq__row:hover .faq__toggle{background:rgba(102,146,253,.18)}
.faq__icon-plus,.faq__icon-minus{
  position:relative;
  width:18px; height:18px;
}
.faq__icon-plus::before,.faq__icon-plus::after,
.faq__icon-minus::before{
  content:"";
  position:absolute;
  background:#648FF5;
  border-radius:2px;
}
.faq__icon-plus::before{left:8px; top:0; width:2px; height:18px; transition:transform .25s ease}
.faq__icon-plus::after{left:0; top:8px; width:18px; height:2px}
.faq__icon-minus::before{left:0; top:8px; width:18px; height:2px}
/* при закрытии крутим вертикальную палочку плюса в минус, чтобы переход был плавным */
.faq__item--open .faq__icon-plus::before{transform:rotate(90deg)}

.faq__answer{
  display:grid;
  grid-template-rows:0fr;
  width:686px;
  margin-top:0;
  opacity:0;
  overflow:hidden;
  transition:grid-template-rows .3s ease, opacity .25s ease, margin-top .3s ease;
}
.faq__answer > div{
  min-height:0;
  overflow:hidden;
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:23.4px;
  color:var(--ink);
}
.faq__item--open .faq__answer{
  grid-template-rows:1fr;
  margin-top:12px;
  opacity:1;
}

/* ==========================================================================
   ФУТЕР
   ========================================================================== */
.footer{
  position:relative;
  width:1370px;
  height:297px;
  margin:96.41px auto 35px; /* -3.59px компенсация каскадного нарастания высоты FAQ-ответа */
  background:rgba(102,146,253,.10);
  border-radius:50px;
}
.footer__logo{
  position:absolute;
  left:50px; top:53px;
  width:123px; height:20px;
  font-family:'Krona One',sans-serif;
  font-weight:400;
  font-size:20px;
  line-height:20px;
  letter-spacing:-2.6px;
  color:var(--ink);
  white-space:nowrap;
}
.footer__desc{
  position:absolute;
  left:50px; top:91px;
  width:213px; height:68px;
  font-family:'Gilroy',sans-serif;
  font-weight:500;
  font-size:12px;
  line-height:16.8px;
  color:var(--ink);
  opacity:.4;
}
.footer__copy{
  position:absolute;
  left:50px; top:230px;
  width:213px; height:17px;
  font-family:'Gilroy',sans-serif;
  font-weight:500;
  font-size:12px;
  line-height:16.8px;
  color:var(--ink);
  opacity:.4;
}
.footer__col{
  position:absolute;
  top:50px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footer__col--main{left:395px; width:124px}
.footer__col--links{left:621px; width:209px}
.footer__title{
  display:flex;
  align-items:center;
  height:25px;
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:25.2px;
  color:var(--ink);
}
.footer__list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.footer__list a{
  display:flex;
  align-items:center;
  height:20px;
  font-family:'Gilroy',sans-serif;
  font-weight:600;
  font-size:14px;
  line-height:19.6px;
  color:var(--ink);
  opacity:.5;
  transition:opacity .2s ease;
}
.footer__list a:hover{opacity:.8}

.footer__actions{
  position:absolute;
  left:915px; top:50px;
  display:flex;
  gap:2px;
}
.footer__actions .btn{width:194px; height:52px}
.btn--blue{background:#6692FD; color:#fff}
.btn--blue:hover{background:#4F7EF0}

.footer__socials{
  position:absolute;
  left:1188px; top:211px;
  display:flex;
  align-items:center;
  gap:18px;
}
.footer__social{
  display:block;
  width:32px; height:32px;
}
.footer__social img{width:32px; height:32px}

/* ==========================================================================
   ФОНОВЫЕ ПЯТНА (декор возле FAQ/футера)
   ========================================================================== */
.bg-blob{
  position:absolute;
  transform-origin:0 0;
  background-image:url(../img/190f04bcd8.png);
  background-size:cover;
  z-index:0;
  pointer-events:none;
}
.bg-blob--1{
  left:-6px; top:4518.31px;
  width:213.07px; height:220.62px;
  transform:rotate(-35.03deg);
  filter:blur(24px);
  opacity:.2;
}
.bg-blob--2{
  left:1299.9px; top:4033.85px;
  width:275.33px; height:285.09px;
  transform:rotate(35.83deg);
  filter:blur(15px);
  opacity:.3;
}

/* ==========================================================================
   АНИМАЦИИ И HOVER-ВЗАИМОДЕЙСТВИЯ
   ========================================================================== */
html{scroll-behavior:smooth}

/* GSAP управляет opacity/transform через inline style только после
   успешной загрузки — эти правила лишь дополняют её transition для
   hover-состояний, к появлению блоков отношения не имеют. */

/* --- карточки: лёгкий подъём + тень при наведении (только устройства с мышью) --- */
@media (hover:hover) and (pointer:fine){
  .card,
  .bento__card,
  .who__card,
  .review,
  .faq__item{
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  }
  .card:hover{transform:translateY(-6px)}
  .bento__card:hover{transform:translateY(-6px) scale(1.01)}
  .who__card:hover{transform:translateY(-4px)}
  .review:hover{transform:translateY(-6px); box-shadow:0 24px 48px -24px rgba(52,47,45,.25)}
  .faq__item:hover{box-shadow:0 16px 32px -20px rgba(102,146,253,.35)}

  .hero__photo{transition:transform .4s ease, filter .4s ease}
  .hero__photo:hover{filter:brightness(1.06)}

  .cmp__row{transition:transform .3s ease, box-shadow .3s ease}
  .cmp__row:hover{transform:translateX(4px)}

  .footer__social{transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s ease}
  .footer__social:hover{transform:translateY(-3px) scale(1.12)}

  .chip{transition:transform .25s ease, background-color .25s ease}
  .chip:hover{transform:translateY(-2px)}
}

/* --- кнопки: во всех режимах ввода, чуть мягче на touch --- */
.btn{transition:background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .3s ease}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn--white:hover,
  .btn--orange:hover,
  .btn--blue:hover{box-shadow:0 12px 28px -12px rgba(254,79,2,.45)}
  .btn--blue:hover{box-shadow:0 12px 28px -12px rgba(102,146,253,.5)}
}
.btn:active{transform:translateY(0) scale(.98)}

/* --- навигация: анимированное подчёркивание --- */
.nav a{position:relative}
.nav a::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:-4px;
  height:2px;
  background:var(--orange);
  border-radius:2px;
  transition:right .3s cubic-bezier(.2,.8,.2,1);
}
.nav a:hover::after{right:0}

/* --- бургер и мобильное меню уже анимированы через transform/grid-template-rows --- */

/* --- уважение к prefers-reduced-motion: гасим все переходы и плавный скролл --- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}