/* ==== GLOBAL ==== */
:root {
--bg: #06121f;
--bg-light: #0b1f33;


--accent: #2563eb;
--accent2: #22c55e;

--text: #e6f0ff;
--text-muted: #94a3b8;

--card-bg: #081826;
--border: #1e293b;

}

/* RESET */
*{
margin:0;
padding:0;
box-sizing:border-box;
}



body{
font-family:system-ui;
background: radial-gradient(
circle at top,
#0f172a 0%,
#0b1f33 40%,
#020617 100%
);
color: var(--text);
}

/* CONTAINER */
.container{
max-width:1120px;
margin:auto;
padding:0 20px;
}

/* ===== HEADER ===== */
.header{
position:sticky;
top:0;
z-index:50;
backdrop-filter:blur(16px);


background: linear-gradient(
    to bottom,
    rgba(6, 18, 31, 0.85),
    rgba(14, 116, 144, 0.6),
    transparent
);

border-bottom:1px solid var(--border);


}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
min-height:70px;
}

.logo-block{
display:flex;
align-items:center;
gap:12px;
   max-width: 60%;
}

.logo-img{
height:40px;
}

.brand-name{
font-size:14px;
font-weight:600;
 white-space: normal; 
}


/* MENU */
.navbar{
display:flex;
gap:20px;
}

.navbar a{
color:var(--text-muted);
text-decoration:none;
position:relative;
}

.navbar a::after{
content:"";
position:absolute;
left:0;
bottom:-3px;
width:0%;
height:2px;
background:linear-gradient(to right,var(--accent),var(--accent2));
transition:0.3s;
}

.navbar a:hover{
color:var(--accent);
}

.navbar a:hover::after{
width:100%;
}

/* MOBILE MENU */
.nav-toggle{
display:none;
font-size:26px;
background:none;
border:none;
color:white;
cursor:pointer;
}

@media(max-width:768px){


.nav-toggle{
    display:block;
}

.navbar{
    position:absolute;
    top:70px;
    left:0;
    width:100%;
    background:rgba(6,18,31,0.98);
    backdrop-filter:blur(10px);
    flex-direction:column;
    gap:15px;
    padding:20px;

    transform:scaleY(0);
    transform-origin:top;
    opacity:0;
    pointer-events:none;
    transition:0.25s;
}

.navbar.open{
    transform:scaleY(1);
    opacity:1;
    pointer-events:auto;
}


}





/* BUTTON */
.btn{
padding:12px 22px;
border-radius:999px;
text-decoration:none;
display:inline-block;
font-weight:500;
}

.btn.primary{
background:linear-gradient(to right,var(--accent),var(--accent2));
color:white;
box-shadow:0 10px 30px rgba(37,99,235,0.4);
}

.btn.primary:hover{
box-shadow:0 15px 40px rgba(34,197,94,0.5);
}

/* ===== SECTIONS ===== */
.section{
padding:80px 0;
}

/* FEATURES */
.features-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.feature-card{
background:var(--card-bg);
padding:20px;
border-radius:14px;
border:1px solid var(--border);
transition:0.3s;
}

.feature-card:hover{
transform:translateY(-5px);
border-color:var(--accent2);
box-shadow:0 20px 40px rgba(34,197,94,0.2);
}



.screens-grid img {
    width: 98%;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* десктоп zoom */
.screens-grid img.active {
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    max-width: 80vw;
    max-height: 80vh;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

/* 📱 MOBILE */
@media(max-width:768px){

    /* отключаем fixed поведение */
    .screens-grid img.active {
        position: static;
        transform: none;
        max-width: 100%;
        max-height: none;
    }

    /* лёгкий эффект вместо клика */
    .screens-grid img:active {
        transform: scale(1.05);
    }
}












/* CONTACT */
.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}

.contact-form{
display:flex;
flex-direction:column;
gap:10px;
}

input,textarea{
padding:10px;
border-radius:8px;
border:1px solid var(--border);
background:var(--card-bg);
color:var(--text);
}

/* FOOTER */
.footer{
padding:20px;
text-align:center;
color:var(--text-muted);
}

/* ===== RESPONSIVE ===== */



/* ==== SCREEN MOCKUP ==== */

.screen-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;

    perspective:1200px; /* глубина */
    margin-top:40px;
}

/* сам экран */
.screen-img{
    width:100%;
    max-width:900px;

    border-radius:12px;

    /* 🔥 рамка */
    border:2px solid #111;
    
    /* 🔥 тень */
    box-shadow:
        0 30px 80px rgba(0,0,0,0.6),
        0 0 0 1px rgba(255,255,255,0.05) inset;

    /* 🔥 3D наклон */
    transform: rotateX(8deg) rotateY(-10deg);

    transition:0.4s;
}

/* hover эффект */
.screen-img:hover{
    transform: rotateX(0deg) rotateY(0deg) scale(1.02);
}


/* GRID */

/* TEXT LEFT */
.hero-text{
    text-align:left;
}

/* SCREEN RIGHT */
.hero-screen{
    display:flex;
    justify-content:center;
}

/* SCREEN STYLE */
.screen-img{
    width:100%;
    max-width:700px;

    border-radius:12px;
    border:2px solid #111;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.6);

    transform: rotateX(6deg) rotateY(-12deg);
    transition:0.4s;
}

.screen-img:hover{
    transform: rotateX(0deg) rotateY(0deg) scale(1.02);
}

/* MOBILE */
@media(max-width:768px){
    .hero-grid{
        grid-template-columns:1fr;
    }

    .hero-text{
        text-align:center;
    }
}





/* ОБЁРТКА */
.screen-wrapper{
    flex:1;
    display:flex;
}

/* КАРТИНКА */
.screen-img{
    width:100%;
    height:100%;           /* 🔥 одинаковая высота */
    object-fit:cover;      /* 🔥 не ломает пропорции */

    border-radius:12px;
    border:2px solid #111;

    box-shadow:
        0 30px 80px rgba(0,0,0,0.6);

    transform: rotateX(6deg) rotateY(-10deg);
    transition:0.4s;
}

.screen-img:hover{
    transform: rotateX(0deg) rotateY(0deg) scale(1.02);
}




/* ОБЩИЙ НАКЛОН */
.screen-main img{

    border:2px solid #111;
    box-shadow:0 40px 100px rgba(0,0,0,0.7);

    transform: perspective(1200px) rotateY(-12deg); /* 🔥 ОДИН НАКЛОН */
}


.screen-side img{

    border:2px solid #111;
    box-shadow:0 40px 100px rgba(0,0,0,0.7);

    transform: perspective(1200px) rotateY(-22deg); /* 🔥 ОДИН НАКЛОН */
}




@media (max-width: 768px){

    .screens-row{
        flex-direction:column;   /* 🔥 в колонку */
        gap:20px;
    }

    .screen-main img{
        width:100%;              /* 🔥 на всю ширину */
        transform:none;          /* 🔥 убираем наклон (важно!) */
    }

    .screen-side img{
        height:auto;
        width:80%;               /* чуть меньше */
        transform:none;          /* 🔥 убираем наклон */
        opacity:1;
    }

}


/* ПЛАВНОСТЬ */


/* HOVER – ВЫПРЯМЛЯЕТСЯ */
.screen-main img:hover,
.screen-side img:hover{
    transform: perspective(1200px) rotateY(0deg) scale(1.05);
    box-shadow: 0 50px 120px rgba(0,0,0,0.9);
}




/* ЭКРАН */
.main-screen{
    width:650px;

    border-radius:14px;
    border:2px solid #111;
    box-shadow:0 40px 100px rgba(0,0,0,0.7);

    transform: perspective(1200px) rotateY(-12deg);
    z-index:2;
}

.screens-row{

    margin-top: 50px;
    display:grid;

    grid-template-columns: auto auto;
    grid-template-areas:
        "main side"
        "keyboard .";

    column-gap:40px;
    row-gap:50px; /* 🔥 было слишком большое */
  

    justify-content:center;
    align-items:center;
}



/* КЛАВИАТУРА */
.keyboard{
    width:420px;

    transform: perspective(1200px)
               rotateY(-20deg)
               rotateX(65deg)
               rotateZ(5deg);

    opacity:0.9;
    transition:0.4s;
   
}



/* 🔥 HOVER */
.keyboard:hover{
    transform: perspective(1200px) rotateY(-20deg) rotateX(65deg) rotateZ(0deg);
}

.main-screen{
    position:relative;
    z-index:2; /* 🔥 экран всегда сверху */
}



/* ПЛАВНОСТЬ */
.screen-main img,
.keyboard{
    transition: 0.4s ease;
}



@media (max-width: 768px){
    .screen-keyboard{
        display:none;
    }
}











/* 🔥 если навели на экран ИЛИ keyboard → двигаются ОБА */
.screen-main:hover img,
.screen-keyboard:hover ~ .screen-main img{
    transform: perspective(1200px) rotateY(0deg) scale(1.03);
}

/* keyboard двигается вместе с экраном */
.screen-main:hover + .screen-keyboard .keyboard,
.screen-keyboard:hover .keyboard{
    transform: perspective(1200px)
               rotateY(0deg)
               rotateX(65deg)
               rotateZ(0deg)
               scale(1.05);
}

/* второй экран отдельно */
.screen-side:hover img{
    transform: perspective(1200px) rotateY(0deg) scale(1.03);
}


@media (max-width:768px){

    /* 🔥 меняем layout */
    .screens-row{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:20px;
    }

    /* 🔥 ПЕРВЫЙ ЭКРАН */
    .screen-main img{
        width:90%;        /* почти весь экран */
        max-width:100%;
        transform:none;   /* убираем наклон */
    }

    /* 🔥 ВТОРОЙ ЭКРАН */
    .screen-side img{
        width:40%;        /* меньше первого */
        height:auto;
        transform:none;   /* убираем наклон */
        opacity:1;
    }

    /* 🔥 КЛАВИАТУРА */
    .screen-keyboard{
        display:none;
    }
}


/* ===== CONTACT ===== */

.section-title{
    font-size:28px;
    margin-bottom:30px;
}

.section-subtitle{
    color:var(--text-muted);
    margin-bottom:25px;
    line-height:1.6;
}

/* GRID */
.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:flex-start;
}

/* LEFT SIDE */
.contact-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.contact-list li{
    color:var(--text-muted);
    font-size:14px;
}

.contact-list strong{
    color:var(--text);
}

/* FORM */
.contact-form{
    background:var(--card-bg);
    padding:25px;
    border-radius:14px;
    border:1px solid var(--border);

    box-shadow:0 20px 50px rgba(0,0,0,0.4);

    display:flex;
    flex-direction:column;
    gap:15px;
}

/* FORM ROW */
.form-row{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.form-row label{
    font-size:13px;
    color:var(--text-muted);
}

/* INPUTS */
input,
textarea{
    padding:10px 12px;
    border-radius:8px;
    border:1px solid var(--border);

    background:#020617;
    color:var(--text);

    outline:none;
    transition:0.25s;
}

input:focus,
textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(37,99,235,0.2);
}

/* BUTTON FULL */
.full-width{
    width:100%;
    text-align:center;
}

/* NOTE */
.form-note{
    font-size:13px;
    color:var(--text-muted);
    text-align:center;
    min-height:16px;
}

/* LINKS */
.contact-list a{
    color:var(--accent);
    text-decoration:none;
}

.contact-list a:hover{
    text-decoration:underline;
}

/* ===== MOBILE ===== */
@media(max-width:768px){

    .contact-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .contact-form{
        padding:20px;
    }

    .section-title{
        font-size:22px;
    }
}



/* ===== HERO как в PSS ===== */

.hero{
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
}

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

.hero-text h1{
    font-size: 42px;
    margin-bottom: 10px;
}

.hero-text h2{
    font-size: 20px;
    color: var(--accent2);
    margin-bottom: 15px;
}

.hero-text p{
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

.hero-actions{
    margin-bottom: 15px;
   
}

.hero-bullets{
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
}

.hero-bullets li{
    background: rgba(255,255,255,0.05);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
}

/* VIDEO */
.bg-video{
    position: absolute;
    top: 50%;
    left: 50%;

    min-width: 100%;
    min-height: 100%;

    width: auto;
    height: auto;

    transform: translate(-50%, -50%);
    object-fit: cover;

    z-index: 0;
}

.video-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(2,6,23,0.6),
        rgba(2,6,23,0.9)
    );
    z-index:1;
}

.hero .container{
    position:relative;
    z-index:2;
}


/* MOBILE */
@media(max-width:768px){
    .hero-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-media{
        order:-1;
    }
}


.hero-media{
    display: flex;
    flex-direction: row; /* ✅ важно */
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
}

/* главный экран */


.screen-main,
.screen-side{
    position: static; /* или просто ничего */
}


.screen-main img{
    width: 100%;
    max-width: 520px; /* 🔥 больше */

    transform: perspective(1200px) rotateY(-10deg);
    box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}

.screen-side img{
    width: 60%;        /* 🔥 меньше относительно блока */
    max-width: 260px;  /* 🔥 ограничение меньше main */
    opacity: 0.9;

    transform: perspective(1200px) rotateY(-25deg);
    box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}



.hero-title{
    margin-bottom: 40px;
}



/* чтобы текст слева был нормально */
.hero-text{
    max-width: 500px;
}




.hero-title h1{
    font-size: clamp(28px, 5vw, 48px);
}


@media (max-width: 768px){

    .hero-media{
        display: flex;
        justify-content: center;
        gap: 10px;

        width: 90%;        /* 🔥 главное */
        margin: 0 auto;    /* центрируем */
    }

    .screen-main{
        flex: 0 0 auto;
    }

    .screen-main img{
        width: 100%;
        max-width: 260px;  /* чуть уменьшили */
    }

    .screen-side{
        flex: 0 0 auto;
    }

    .screen-side img{
        width: 80px;       /* тоже чуть меньше */
        height: auto;
    }

}

@media (max-width: 768px){
    .hero-actions,
    .hero-bullets{
        display: flex;
        justify-content: center;
    }
}






@media (max-width: 768px){

    .logo-text{
        max-width: 85px; /* регулируй */
    }

    .brand-name{
        font-size: 10px; /* уменьшаем */
        line-height: 1.1;

        display: -webkit-box;
      
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

}


.screen-main img{
    border-radius: clamp(2px, 1vw, 4px);
}

.screen-side img{
    border-radius: clamp(10px, 2vw, 16px);
}

@media (max-width: 768px){

    .features-grid{
        grid-template-columns: 1fr; /* 🔥 всегда 1 колонка */
        gap: 15px;
    }

}


.screens-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

@media (max-width: 1024px){
    .screens-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px){
    .screens-grid{
        grid-template-columns: 1fr;
         gap: 30px;
    }
}





/* ===== FAQ (UPDATED) ===== */

.faq {
  padding: 80px 20px;
  background: linear-gradient(
    to bottom,
    rgba(2,6,23,0.9),
    rgba(2,6,23,1)
  );
}

.faq .container {
  max-width: 900px;
  margin: 0 auto;
}

.faq h2 {
  font-size: 32px;
  margin-bottom: 30px;
  text-align: center;
  color: var(--text);
}

/* 🔥 ВОПРОС */
.faq h3 {
  font-size: 17px;

  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);

  padding: 16px 20px;
  border-radius: 12px;

  margin-top: 15px;

  cursor: pointer;
  position: relative;

  color: var(--text);

  transition: all 0.25s ease;
}

/* hover */
.faq h3:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(37,99,235,0.2);
}

/* 🔥 ОТКРЫТЫЙ ВОПРОС */
.faq h3.active {
  border-color: var(--accent2);
  background: rgba(34,197,94,0.08);
}

/* 🔥 ОТВЕТ */
.faq p {
  background: rgba(0,0,0,0.3);

  margin: 5px 0 0 0;
  padding: 16px 20px;

  border-left: 3px solid var(--accent);

  border-radius: 0 0 12px 12px;

  display: none;

  color: var(--text-muted);

  line-height: 1.6;
}

/* 🔥 ИКОНКА */
.faq h3::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--accent);
  transition: 0.3s;
}

.faq h3.active::after {
  content: "−";
  color: var(--accent2);
}