*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#0b0f0c;
color:white;
margin:0;
}

.container{
width:1400px;
max-width:90%;
margin:auto;
}

.header{
padding:20px 0;
position:relative;
z-index:100;
}

/* NAV */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu{
  display:flex;
  gap:20px;
}

.menu a{
  text-decoration:none;
  color:#ccc;
}

.burger{
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
z-index:101;
}

.burger span{
width:25px;
height:3px;
background:#fff;
transition:0.3s;
}

@media (max-width:768px){
  .burger{
    display:flex;
  }
}

/* ✖ анимация */
.burger.active span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}

.burger.active span:nth-child(2){
opacity:0;
}

.burger.active span:nth-child(3){
transform:rotate(-45deg) translate(5px,-5px);
}

/* мобилка */
@media (max-width:768px){

  .menu{
    position:absolute;
    top:100%;
    left:0;
    width:100%;

    background:#0b0f0c;

    flex-direction:column;
    align-items:center;
    gap:15px;

    padding:20px 0;

    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:0.3s;
  }

  .menu.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

}

.logo{
font-weight:bold;
letter-spacing:2px;
}

.logo img{
height: 80px;
width:auto;
display:block;
}

.hero-btn{
    margin-top: 20px;
    border-radius: 10px;
}

.more-btn{
background:#c6d300;
border:none;
padding:10px 20px;
cursor:pointer;
font-weight:bold;
border-radius:10px;  
}


/* HERO */

.hero{
padding:80px 0;
background:url("images/Фото/background-hero.jpg") center/cover;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

.hero-text h1{
font-size:48px;
margin-bottom:20px;
}

.hero-text p{
color:#aaa;
}


.hero-cards{
display:grid;
grid-template-columns:repeat(2,1fr);
grid-gap:15px;
}

.card{
background:#111;
padding:40px;
border-radius:8px;
color:white;
}

.card.green{
background:#c4ff2f;
color:black;
font-weight:bold;
}

.card.image{
background:url("images/Фото/pixta_80797973_L-scaled.jpg") center/cover;
min-height:120px;
}


/* SERVICES */

.services{
background:#e7e7f2;
color:#111;
padding:80px 0;
}

.services h2{
font-size:36px;
margin-bottom:40px;
}

.cards{
display:grid;
gap:20px;
}

.card{
position:relative;
border-radius:10px;
overflow:hidden;
cursor:pointer;
color:white;
background-size:cover;
background-position:center;
}

.card-header,
.card-body{
position:relative;
z-index:2;
}

.card-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:30px;
}

.card-header h3{
font-size:30px;
color: #c6d300;
}

.icon{
font-size:28px;
transition:0.3s;
}

.card-body{
max-height:0;
overflow:hidden;
padding:0 30px;
transition:0.4s;
font-size: 25px;
}

.card.active .card-body{
max-height:200px;
padding:0 30px 30px 30px;
}

.card.active .icon{
transform:rotate(45deg);
}

.card1{
background-image:url("images/Фото/conersionnie_operacii.jpg");
}

.card2{
background-image:url("images/Фото/Market-making.jpg");
}

.card3{
background-image:url("images/Фото/predostavlenie_likvidnosti.jpg");
}

.card4{
background-image:url("images/Фото/Sopr_CFA.jpg");
}

.card5{
background-image:url("images/Фото/Structurirovanie_sdelok.jpg");
}

/* ADVANTAGES */

.process{
padding:80px 0;
background-image: url("images/Фото/advantages-bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}


.process h2{
margin-bottom:40px;
font-size: 23px;
}

.steps{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.step{
display:flex;
align-items:center;
padding:20px;
border-radius:10px;
background:#e7e7f2;
color:black
}

.step span{
font-size:40px;
font-weight:bold;
margin-right:20px;
}

.step.green{
background:#c6d300;
}

.step-icon{
width:50px;
margin-right:20px;
}

@media (max-width:768px){

.step{
flex-direction:column;
align-items:flex-start;
}

.step-icon{
margin-bottom:10px;
}

}

/*SOLUTIONS*/
.solutions{
padding:30px 0;
background:#e7e7f2;
}

.section-title{
font-size:23px;
font-weight:600;
margin-bottom:20px;
color:black;
}

.section-ps{
font-size:20px;
margin-top:20px;
color:black;
font-weight: normal;
}
.contact-btn{
background:#c6d300;
border:none;
padding:10px 20px;
cursor:pointer;
font-weight:bold;
margin-top: 10px;
margin-bottom: 30px;
border-radius:10px;
}

.solutions-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:60px;
}

.solutions-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
background-color:#e7e7f2 ;
}

.solution-card{
background:white;
border-radius:10px;
overflow:hidden;
transition:0.3s;
}

.solution-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 35px rgba(0,0,0,0.1);
}

.card-image{
position:relative;
height:150px;
overflow:visible;
}

.card-image img{
width:100%;
height:100%;
object-fit:cover;
}


.icon-box{
position:absolute;
bottom:-25px;
left:25px;

width:55px;
height:55px;

background:#c6d300;

display:flex;
align-items:center;
justify-content:center;

border-radius:8px;

z-index:10;
}

.icon-box img{
width:24px;
height:24px;
}

.card-content{
background:white;
padding:45px 20px 25px 20px;
position:relative;
z-index:1;
color: black;
}

.card-content h3{
margin-bottom:16px;
}

.card-content p{
color:#666;
font-size:16px;
margin-bottom:15px;
}


@media (max-width:1200px){

.solutions-grid{
grid-template-columns:repeat(3,1fr);
}

}

@media (max-width:768px){

.solutions-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:500px){

.solutions-grid{
grid-template-columns:1fr;
}

}

/*ABOUT*/
.about{
padding:80px 0;
background:#e7e7f2;
}

.about-wrapper{
display:flex;
align-items:center;
gap:60px;
}

.about-image {
  width: 100%;
  max-width: 650px;
  height: 250px;
  overflow: hidden;
  border-radius: 8px;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-content{
position:relative;
max-width:650px;
}

.about-subtitle{
font-size:14px;
letter-spacing:1px;
margin-bottom:15px;
}

.about-bold{
font-weight:700;
margin-bottom:15px;
}

.about-content p{
color:black;
line-height:1.5;
font-weight:normal;
font-size: 23px;
}

.about-content h2{
font-size:23px;
margin-bottom:23px;
color: black;

}

.about-bold{
font-weight:700;
margin-bottom:15px;
}

.about-content p{
color:black;
line-height:1.5;
}

@media (max-width:900px){

.about-wrapper{
flex-direction:column;
}

.about-image,
.about-content{
width:100%;
}

.about-content{
padding:40px 20px;
background-position:center;
}

}
/*FAQ*/

.faq{
background:url("images/Фото/FAQ-BG.jpg") center/cover;
padding:80px 0;
}

.faq-title{
color:white;
font-size:28px;
font-weight:700;
margin-bottom:40px;
}

.faq-item{
border:2px solid #c6d300;
margin-bottom:20px;
cursor:pointer;
transition:0.3s;
}

.faq-question{
display:flex;
align-items:center;
justify-content:space-between;
padding:20px;
}

.faq-question p{
color:white;
font-weight:700;
margin:0;
flex:1;
font-size: 23px;
}

.bullet{
width:10px;
height:10px;
background:#c6d300;
margin-right:15px;
display:inline-block;
}

.arrow{
color:black;
background:#c6d300;
padding:15px 20px;
font-weight:bold;
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:0.4s;
color:white;
padding:0 20px;
font-size: 20px;
}

.faq-item.active .faq-answer{
max-height:200px;
padding:20px;
}

.faq-item.active .arrow{
transform:rotate(90deg);
}

.faq-contac-us{
    margin-top: 40px;
}
.faq-contact-btn{
background:#c6d300;
border:none;
padding:10px 20px;
cursor:pointer;
font-weight:bold;  
margin-top: 10px;
border-radius: 10px;
}

/*CONTACTS*/

.contacts{
padding:80px 0;
background:#e7e7f2;
}

.contacts-wrapper{
display:flex;
gap:60px;
align-items:center;
}

.contacts-info{
display:flex;
flex-direction:column;
gap:20px;
max-width:400px;
}

.contacts-info h2{
font-size:23px;
margin-bottom:20px;
color: black;
}

.contacts{
padding:80px 0;
background-color: black;
}

.contacts-wrapper{
display:flex;
gap:60px;
align-items:center;
}

.contacts-info{
display:flex;
flex-direction:column;
gap:20px;
max-width:400px;
}

.contacts-info h2{
font-size:23px;
margin-bottom:20px;
font-weight: bold;
color: white;
}

.contact-item{
display:flex;
align-items:center;
gap:15px;
font-weight: bold;
text-decoration:none;
color:white;
font-size:20px;

padding:12px 0;
border-bottom:1px solid #ccc;

transition:0.3s;
}

.contact-item img{
width:22px;
height:22px;
object-fit:contain;
}

.contact-item:hover{
color:#c6d300;
}
.contact-label{
font-size:20px;
color:Black;
margin-bottom:2px;
}

.contacts-map img{
width:100%;
max-width:750px;
height:auto;
border-radius:10px;
}

@media (max-width:768px){

  .contacts-wrapper{
    flex-direction:column;
    gap:30px;
  }

}

@media (max-width:768px){

  .contacts-map{
    width:100%;
  }

  .contacts-map img{
    width:100%;
    height:200px;             
    object-fit:cover;          
    border-radius:10px;
  }

}

/*FOOTER*/
.footer { 
    padding: 60px 0; 
    background: #050805; 
    line-height: 150%; 
}

/* ключевой блок */
.footer-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

/* компания слева */
.footer-row h4 {
    margin: 0;
}

/* дисклеймер по центру */
.footer-disclaimer {
    text-align: center;
    font-size: 14px;
    color: #888;
    margin: 0;
}

/* политика справа */
.policy-link { 
    cursor: pointer;
    text-decoration: underline;
    margin: 0;
    white-space: nowrap;
}

.pd-link{
color:#c6d300
}

@media (max-width: 768px) {
    .footer-row {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .policy-link {
        margin-top: 10px;
    }
}

.policy-link:hover{
color:#c6d300;
}

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

display:flex;
align-items:center;
justify-content:center;

opacity:0;
pointer-events:none;

transition:0.3s;

z-index:1000;
}

.modal.show{
opacity:1;
pointer-events:auto;
}

.modal-overlay{
position:absolute;
width:100%;
height:100%;

background:rgba(0,0,0,0.5);
backdrop-filter:blur(8px);
}

.modal-content{
position:relative;
background:white;

width:600px;
max-height:80vh;

padding:30px;
border-radius:12px;

overflow-y:auto;

transform:scale(0.8); 
transition:0.3s;

z-index:2;
}

.modal.show .modal-content{
transform:scale(1);
}


.modal-close{
position:absolute;
top:15px;
right:20px;
font-size:24px;
cursor:pointer;
}

.modal-text{
margin-top:15px;
line-height:1.5;
color:#333;
}

.modal-text p{
  font-weight: 700;

}