/* ==========================
   RESET
========================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family: Inter, Arial, sans-serif;
    color:#1a1a1a;
    background:#ececec;
    min-height:100vh;
    overflow-x:hidden;
}


/* ==========================
BACKGROUND
========================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
            radial-gradient(circle at 70% 35%,rgba(255,205,145,.55),transparent 35%),
            radial-gradient(circle at 25% 15%,rgba(255,255,255,.9),transparent 45%),
            linear-gradient(135deg,#d9d9dc,#f2f2f2);

    filter:blur(30px);

    transform:scale(1.1);

    z-index:-1;

}

.survey__logo img{max-width:150px;}
/* ==========================
LAYOUT
========================== */

.survey{

    padding:70px 30px;

}

.survey__container{

    max-width:1100px;

    margin:auto;

}


/* ==========================
HEADER
========================== */

.survey__header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:100px;

}

.survey__logo{

    font-size:32px;

    font-weight:300;

}

.survey__logo strong{

    font-weight:700;

}

.survey__counter{

    font-size:18px;

    letter-spacing:2px;

}

#surveyForm .survey-block:first-child{
   max-width:520px;
}
#surveyForm .survey-block:last-child{
    max-width:70px;
}
/* ==========================
INTRO
========================== */

.survey__intro{
 

    margin-bottom:70px;

}

.survey__intro h1{

    font-size:36px;

    line-height:1.1;

    font-weight:300;

    margin-bottom:40px;

}

.survey__intro p{

    color:#555;

    line-height:1.7;

    font-size:18px;

}


/* ==========================
QUESTIONS
========================== */

.questions{

    border:1px solid rgba(0,0,0,.15);

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(20px);

}


.question{

    border-bottom:1px solid rgba(0,0,0,.12);

    transition:.3s;

}

.question:last-child{

    border-bottom:none;

}


/* ==========================
QUESTION HEADER
========================== */

.question__head{

    display:grid;

    grid-template-columns:80px 1fr 40px;

    align-items:center;

    gap:20px;

    cursor:pointer;

    padding:35px;

    transition:.3s;

}

.question__head:hover{

    background:rgba(255,255,255,.3);

}

.question__number{

    font-size:34px;

    color:#666;

}

.question__title{

    font-size:30px;

    line-height:1.3;

    font-weight:300;

}
.footer__msger {
    color: red;
    font-size: 14px;
    position: absolute;
    top: -25px;
}
.footer__right{
    position:relative;
}
.question__toggle{

    font-size:42px;

    text-align:center;

    transition:.3s;

}

.question.active .question__toggle{

    transform:rotate(0deg);

}


/* ==========================
BODY
========================== */
.question.active .question__body{
    display:block;
}

.question:not(.active) .question__body{
    display:none;
}
.question__body{
 

    padding:0 35px 35px 135px;

}


/* ==========================
ANSWERS
========================== */

.answer{

    position:relative;

    border:1px solid rgba(0,0,0,.15);

    padding:22px 28px;

    margin-bottom:14px;

    font-size:18px;

    cursor:pointer;

    transition:.25s;

    background:rgba(255,255,255,.45);

}

.answer:last-child{

    margin-bottom:0;

}

.answer:hover{

    background:#fff;

    transform:translateX(8px);

}

.answer.selected{

    background:#f4dcc1;

    border-color:#d2b38a;

    padding-right:70px;

}

.answer.selected::after{

    content:"→";

    position:absolute;

    right:28px;

    top:50%;

    transform:translateY(-50%);

    font-size:24px;

}


/* ==========================
ERROR
========================== */

.question.error{

    border-left:5px solid #d80027;

}

input.error{

    border-color:#d80027!important;

}


/* ==========================
FOOTER
========================== */

.survey__content{padding:35px;}
.survey__footer{

    display:grid;

    grid-template-columns:340px 1fr;

    gap:60px;

    margin-top:35px;

}

.footer__left h3{

  font-size: 16px;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 18px;
    color:#444444;

}

.footer__left p{

    color:#666;

    line-height:1.6;

}

.msgsuccesssend{
        font-size: 24px;
    text-align: center;
    width: 100%;
    display: block;
    color: #16a316;
    font-weight: 600;
}
/* ==========================
FORM
========================== */

#surveyForm{

    display:flex;
 
    gap:20px;
justify-content: space-between;
    

}


.checkbox input:focus {
    outline: unset;
}
.checkbox input {
    appearance: none;
    -webkit-appearance: none;
    min-width: 18px;
    width: 18px;
    height: 18px;
    border: 2px solid #000;
    border-radius: 4px;
    margin-top: 2px;
    cursor: pointer;
    position: relative;
    top: 0px;
    margin-left: 0; 
}
.checkbox input:checked {
    background: #000;
    outline: unset;
}
.checkbox input:checked::after {
    content: "✓";
    position: absolute;
    color: #fff;
    font-size: 14px;
    left: 2px;
    top: -2px;
}
#email{

    flex:1;

    min-width:280px;

    border:none;

    border-bottom:2px solid rgba(0,0,0,.2);

    background:none;
        width: 100%;

    font-size:22px;

    padding:15px 5px;

    outline:none;

    transition:.3s;

}

#email:focus{

    border-color:#000;

}


/* ==========================
CHECKBOX
========================== */

.checkbox{

    width:100%;

    display:flex;

    gap:12px;

    align-items:center;

    font-size:14px;
margin-top:20px;
    color:#555;

}
 
/* ==========================
BUTTON
========================== */

button{

    width:72px;

    height:72px;

    border:none;

    background:#111;

    color:#fff;

    cursor:pointer;

    font-size:32px;

    transition:.3s;

}

button:hover{

    background:#333;

    transform:translateY(-3px);

}


/* ==========================
ANIMATION
========================== */

.question{

    transition:.35s ease;

}

.answer{

    transition:.25s ease;

}

button{

    transition:.25s ease;

}


/* ==========================
TABLET
========================== */

@media(max-width:992px){
.survey__content {
    padding: 25px;
}
#surveyForm .survey-block:first-child{
    flex:10;
}
#surveyForm .survey-block:last-child{
    flex:2;
}
    .survey{

        padding:40px 20px;

    }
 

    .question__head{

        padding:25px;

    }

    .question__body{

        padding:0 25px 25px 90px;

    }

    .question__title{

        font-size:24px;

    }

    .survey__footer{

        grid-template-columns:1fr;

        gap:40px;

    }

}


/* ==========================
MOBILE
========================== */

@media(max-width:768px){
.msgsuccesssend{
font-size:16px;
}
    .survey__header{

        margin-bottom:50px;

    }

    .survey__intro{

        margin-bottom:40px;

    }

    .survey__intro h1{

        font-size:24px;

    }

    .survey__intro p{

        font-size:16px;

    }

    .question__head{

        grid-template-columns:45px 1fr 30px;

        gap:15px;

        padding:20px;

    }
button{
    width:60px;height:60px;
}
    .question__number{

        font-size:22px;

    }

    .question__title{

        font-size:16px;

    }

    .question__toggle{

        font-size:28px;

    }

    .question__body{

        padding:0 20px 20px 20px;

    }

    .answer{

        font-size:14px;

        padding:18px;

    }

    .footer__left h3{

        font-size:16px;

    }
#surveyForm .survey-block:first-child{
    flex:10;
}
#surveyForm .survey-block:last-child{
    flex:2;
}
    #email{

        width:100%;

        min-width:100%;

        font-size:18px;

    }

   

}


.legal-strip {
    width: 100%; margin-top: 100px;
}

.legal-strip__wrap {
    max-width: 1440px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
.legal-strip__wrap .legal-block:last-child{
    display:flex;
    gap:20px;    flex-wrap: wrap;    justify-content: center;
}
.legal-strip__item {
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 16px;
    font-weight: 400;
    color: #777;

    text-decoration: none;
    white-space: nowrap;

    transition: color .2s ease;
}

.legal-strip__item:hover {
    color: #222;
}


/* Планшеты */
@media (max-width: 768px) {

    .legal-strip {
        padding: 20px;
    }

    .legal-strip__wrap {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        text-align: center;
    }

    .legal-strip__item {
        font-size: 12px;
    }

}


/* Мобильные */
@media (max-width: 420px) {

    .legal-strip {
        padding: 18px 15px;
    }

    .legal-strip__item {
        white-space: normal;
        text-align: center;
    }

}
 
 

.maf-release-announcement__title {
  margin: 0;
    max-width: 980px;
    font-family: "Inter", sans-serif;
    font-size: 34px;
    line-height: 1.18;
    font-weight: 500;
    color: #444444;
    letter-spacing: -0.03em;
}
section.maf-release-announcement {
    margin: 15px 0 50px 0;
}
.maf-release-announcement__text {
    margin: 36px 0 0;

    font-family: "Inter", sans-serif;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
    color: #8d8d8d;
}

/* Планшеты */
@media (max-width: 1024px) {
 

    .maf-release-announcement__title {
        font-size: 36px;
    }

    .maf-release-announcement__text {
        margin-top: 28px;
        font-size: 17px;
    }
}

/* Мобильные */
@media (max-width: 768px) {
 
    .maf-release-announcement__title {
        font-size: 28px;
        line-height: 1.25;
        letter-spacing: -0.02em;
    }

    .maf-release-announcement__text {
        margin-top: 22px;
        font-size: 16px;
        line-height: 1.55;
    }
}

/* Маленькие смартфоны */
@media (max-width: 480px) {
    .maf-release-announcement__title {
        font-size: 18px;
    }

    .maf-release-announcement__text {
        font-size: 15px;
    }
}