/* =========================================
   HOME PAGE — page-specific styles
   (base/header/footer live in css/common.css)
========================================= */

/* HERO */
.hero{
    min-height:390px;
    position:relative;
    overflow:hidden;
    background:
      linear-gradient(90deg,rgba(230,243,255,.97) 0%,rgba(230,243,255,.92) 36%,rgba(230,243,255,.15) 68%),
      url("https://images.unsplash.com/photo-1539037116277-4db20889f2d4?auto=format&fit=crop&w=1800&q=85")
      center/cover;
}
.hero-content{
    max-width:1250px;
    margin:auto;
    padding:65px 5%;
}
.hero h1{
    max-width:560px;
    font-size:36px;
    line-height:1.15;
    margin:0 0 18px;
    color:var(--blue);
}
.hero p{
    max-width:520px;
    line-height:1.6;
    color:#172238;
}
.hero button.yellow-btn{
    border:0;
    padding:15px 25px;
    margin-top:8px;
}

/* CARDS */
.services{
    max-width:1250px;
    margin:-55px auto 0;
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    padding:0 20px;
}
.card{
    background:white;
    border-radius:16px;
    padding:23px 20px 18px;
    box-shadow:0 5px 25px rgba(30,55,90,.13);
    min-height:300px;
    display:flex;
    flex-direction:column;
}
.card-icon{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#eef5ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    margin-bottom:10px;
}
.card h3{
    margin:0 0 12px;
    font-size:18px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.card p{
    color:#505b6d;
    font-size:13px;
    line-height:1.5;
}
.card ul{
    padding-left:18px;
    margin:5px 0 15px;
    font-size:12px;
    line-height:1.9;
    color:#333d4e;
    flex:1;
}
.card li::marker{color:#4c83c8}
.card button{
    border:0;
    border-radius:8px;
    padding:12px;
    background:#edf4ff;
    color:var(--blue);
    font-weight:bold;
}
.card button:hover{background:#dceaff}
.card-link{
    display:block;
    text-align:center;
    text-decoration:none;
    border-radius:8px;
    padding:12px;
    background:#edf4ff;
    color:var(--blue);
    font-weight:bold;
}
.card-link:hover{background:#dceaff}

.card:nth-child(2) .card-icon{background:#fff5d9}
.card:nth-child(2) .card-link{background:#fff0c9}
.card:nth-child(3) .card-icon{background:#e7f7e6}
.card:nth-child(3) .card-link{background:#e5f5e1}
.card:nth-child(4) .card-icon{background:#f0edff}
.card:nth-child(4) .card-link{background:#e9e4fa}

/* TRUST */
.trust{
    max-width:1200px;
    margin:18px auto;
    background:#f3f7fc;
    border-radius:12px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:13px;
}
.trust-item{
    text-align:center;
    padding:8px;
    border-right:1px solid #d8dfeb;
    font-size:12px;
    line-height:1.4;
}
.trust-item:last-child{border:0}

/* ABOUT */
.about{
    max-width:1200px;
    margin:45px auto;
    display:grid;
    grid-template-columns:310px 1fr;
    gap:35px;
    align-items:center;
    padding:0 20px;
}
.about-img{
    width:100%;
    height:190px;
    object-fit:cover;
    border-radius:14px;
}
.about h2{
    margin-top:0;
    font-size:25px;
}
.features{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.feature{
    font-size:12px;
    line-height:1.5;
}
.feature-icon{
    font-size:27px;
    margin-bottom:8px;
}


/* REVIEWS */
.reviews{
    max-width:1200px;
    margin:40px auto;
    padding:0 20px;
}
.reviews h2{text-align:center}
.review-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.review{
    border:1px solid #e1e5ec;
    border-radius:15px;
    padding:20px;
    box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.review-top{
    display:flex;
    align-items:center;
    gap:10px;
}
.avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#dce8f6;
    display:flex;
    align-items:center;
    justify-content:center;
}
.stars{color:#e6b52e}
.review p{
    font-size:13px;
    line-height:1.55;
}

/* CTA */
.cta{
    max-width:1200px;
    margin:40px auto 0;
    background:#fff4df;
    border-radius:14px 14px 0 0;
    padding:24px 30px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    row-gap:18px;
    column-gap:24px;
}
.whatsapp-btn{
    border:0;
    border-radius:8px;
    padding:13px 23px;
    background:var(--blue);
    color:#fff;
    font-weight:bold;
}
.whatsapp-btn:hover{background:#1c4782}

.cta-contacts{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    column-gap:22px;
    row-gap:8px;
    width:100%;
    padding-top:16px;
    border-top:1px solid rgba(16,43,88,.12);
    font-size:13px;
}
.cta-contacts a{
    color:var(--blue);
    text-decoration:none;
    font-weight:700;
}
.cta-contacts a:hover{text-decoration:underline}
.cta-contacts span{color:#5a5040}

/* MODAL */
.modal{
    position:fixed;
    inset:0;
    background:rgba(5,20,40,.65);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:20px;
}
.modal.show{display:flex}
.modal-box{
    width:100%;
    max-width:500px;
    background:#fff;
    border-radius:18px;
    padding:30px;
    position:relative;
    animation:modal .2s ease;
}
@keyframes modal{
    from{transform:translateY(20px);opacity:0}
    to{transform:translateY(0);opacity:1}
}
.close{
    position:absolute;
    top:12px;
    right:16px;
    border:0;
    background:none;
    font-size:28px;
    color:#777;
}
.modal h2{
    margin-top:0;
    color:var(--blue);
}
.form-group{margin-bottom:14px}
.form-group label{
    display:block;
    font-size:13px;
    margin-bottom:5px;
    font-weight:bold;
}
.form-group input,
.form-group textarea,
.form-group select{
    width:100%;
    border:1px solid #d8dfeb;
    border-radius:8px;
    padding:12px;
    font-size:14px;
    outline:none;
}
.form-group textarea{
    min-height:90px;
    resize:vertical;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
    border-color:#477dbb;
}
.submit{
    width:100%;
    border:0;
    border-radius:9px;
    padding:14px;
    background:var(--blue);
    color:white;
    font-weight:bold;
}
.success{
    display:none;
    text-align:center;
    padding:20px 0;
}
.success-icon{
    font-size:50px;
}

/* LEAVE A REVIEW */
.leave-review{
    max-width:640px;
    margin:38px auto 0;
    background:#f7f9fc;
    border:1px solid var(--line);
    border-radius:16px;
    padding:26px 24px;
}
.leave-review h3{
    margin:0 0 16px;
    font-size:19px;
    color:var(--blue);
}
.alert-box{
    padding:13px 16px;
    border-radius:9px;
    font-size:13px;
    margin-bottom:16px;
}
.alert-success{background:#eaf7ea;color:#24652a}
.alert-error{background:#fff0f0;color:#9a2e2e}

/* Honeypot: kept in the document flow but visually hidden without
   moving it far outside the viewport (a large negative offset like
   left:-9999px can expand the page's scrollable width — that's what
   broke the mobile layout). This "clip" pattern is the safe standard. */
.hp-field{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.review-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.review-form .form-group.full{grid-column:1/-1}
.review-form .form-group label{
    display:block;
    font-size:12px;
    font-weight:700;
    margin-bottom:6px;
    color:#26364e;
}
.review-form .form-group input,
.review-form .form-group select,
.review-form .form-group textarea{
    width:100%;
    border:1px solid #d8dfeb;
    border-radius:8px;
    padding:11px 12px;
    font-size:13px;
    outline:none;
    background:#fff;
}
.review-form .form-group textarea{
    min-height:90px;
    resize:vertical;
}
.review-form .form-group input:focus,
.review-form .form-group select:focus,
.review-form .form-group textarea:focus{
    border-color:#477dbb;
}
.review-form .submit{
    width:100%;
    border:0;
    border-radius:9px;
    padding:13px;
    margin-top:16px;
    background:var(--blue);
    color:#fff;
    font-weight:800;
    font-size:14px;
}
.review-form .submit:hover{background:#1a437a}
.review-note{
    margin:10px 0 0;
    font-size:11px;
    color:#69758a;
    text-align:center;
}

/* MOBILE */
@media(max-width:950px){
    .services{grid-template-columns:repeat(2,1fr)}
    .features{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
    .hero{min-height:470px;background-position:60% center}
    .hero-content{padding:45px 25px}
    .hero h1{font-size:29px}
    .services{grid-template-columns:1fr;margin-top:-35px}
    .trust{grid-template-columns:repeat(2,1fr);margin:12px}
    .trust-item:nth-child(2){border:0}
    .about{grid-template-columns:1fr}
    .features{grid-template-columns:1fr 1fr}
    .review-grid{grid-template-columns:1fr}
    .cta{margin:20px 12px 0;flex-direction:column;gap:15px;text-align:center}
    .cta-contacts{justify-content:center;padding-top:14px}
    .leave-review{margin:28px 16px 0;padding:20px}
    .review-form-grid{grid-template-columns:1fr}
    .review-form .form-group input,
    .review-form .form-group select,
    .review-form .form-group textarea{font-size:16px}
}