/* =========================================================
   PAGES.CSS — styles for service & city sub-pages
   Uses the same brand tokens as the homepage (style.min.css)
========================================================= */

:root{
    --brand: #0b5fff;
    --brand-2: #1aa7ff;
    --brand-dark: #063dbf;
    --ink: #0b1220;
    --muted: #4b5563;
    --panel: #f4f7ff;
    --line: rgba(11,95,255,.18);
    --shadow: 0 16px 45px rgba(11, 95, 255, .18);
    --shadow-sm: 0 8px 24px rgba(11, 95, 255, .10);
}

/* ---------- Footer fixes: brand-blue icons + aligned rows (no wrapping) ---------- */
.footer__link-img{
    filter: brightness(0) saturate(100%) invert(33%) sepia(99%) saturate(4900%) hue-rotate(218deg) brightness(101%) contrast(101%);
}
.footer__link{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap;
    color: #fff !important;
}
.footer__link-img{
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}
.footer__item{ margin-bottom: 12px !important; }
.footer__item-text{ color: #fff; line-height: 1.5; }
@media (max-width: 480px){
    .footer__link{ white-space: nowrap !important; font-size: 14px !important; }
    .footer__link-img{ width: 18px; height: 18px; }
}
@media (max-width: 360px){
    .footer__link{ font-size: 13px !important; }
}

/* ---------- BRAND BLUE OVERRIDES for shared header/footer ---------- */
.header { background-color: #f7f9ff !important; }
.header__top-link:hover .header__top-title { color: var(--brand) !important; }
.header__top-link:hover svg path { fill: var(--brand) !important; }
.header__nav-item:hover .header__nav-title { color: var(--brand) !important; }
.header__top-btn{
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%) !important;
    box-shadow: var(--shadow) !important;
    color: #fff !important;
}
.header__top-btn:hover{
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%) !important;
}
.header__board-item{ transition: opacity .15s; }
.header__board-item:nth-child(2){
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%) !important;
}
.footer__link:hover{ color: var(--brand) !important; }
.footer__list-title{ color: var(--brand) !important; }

/* ---------- Page hero ---------- */
.page-hero{
    position:relative;
    padding:200px 0 80px;
    background: linear-gradient(135deg, #071238 0%, #0b1d56 50%, #0b3aa5 100%);
    color:#fff;
    overflow:hidden;
}
.page-hero::after{
    content:'';
    position:absolute;
    top:-200px; right:-200px;
    width:600px; height:600px;
    background: radial-gradient(circle, rgba(26,167,255,.25) 0%, transparent 70%);
    pointer-events:none;
}
.page-hero__inner{
    max-width:880px;
    margin:0 auto;
    text-align:center;
    position:relative;
    z-index:1;
}
.page-hero__title{
    font-family: Poppins-Bold, Poppins-Medium, sans-serif;
    font-size:46px;
    line-height:1.15;
    margin:0 0 20px;
    letter-spacing:-.5px;
}
.page-hero__subtitle{
    font-family: Poppins-Regular, sans-serif;
    font-size:20px;
    line-height:1.55;
    opacity:.92;
    margin:0 0 32px;
}
.page-hero__subtitle strong{ color:#fff; font-family: Poppins-Medium, sans-serif; }
.page-hero__cta{
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:16px 30px;
    border-radius:12px;
    font-family: Poppins-Medium, sans-serif;
    font-size:17px;
    font-weight:600;
    text-decoration:none;
    transition: transform .15s, box-shadow .15s, background .15s;
    border:none;
    cursor:pointer;
    line-height:1;
}
.btn-primary{
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    color:#fff;
    box-shadow: 0 14px 32px rgba(11,95,255,.32);
}
.btn-primary:hover{
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
    transform:translateY(-2px);
    box-shadow:0 18px 38px rgba(11,95,255,.4);
}
.btn-secondary{
    background: linear-gradient(135deg, #f37229 0%, #ff944d 100%);
    color:#fff;
    box-shadow: 0 14px 32px rgba(243,114,41,.32);
    border:none;
}
.btn-secondary:hover{
    background: linear-gradient(135deg, #e0631d 0%, #f37229 100%);
    transform:translateY(-2px);
    box-shadow:0 18px 38px rgba(243,114,41,.4);
}

/* ---------- Page sections ---------- */
.page-section{ padding:72px 0; }
.page-section--panel{ background: var(--panel); }
.page-section__title{
    font-family: Poppins-Bold, Poppins-Medium, sans-serif;
    font-size:34px;
    color:var(--ink);
    margin:0 0 16px;
    line-height:1.2;
}
.page-section__intro{
    font-family: Poppins-Regular, sans-serif;
    font-size:17px;
    color:var(--muted);
    line-height:1.7;
    margin:0 0 32px;
    max-width:780px;
}

/* ---------- Problem / Service cards ---------- */
.cards-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:20px;
    margin-top:28px;
}
.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:24px;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    text-decoration:none;
    color:var(--ink);
    display:block;
}
.card:hover{
    transform:translateY(-3px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(11,95,255,.4);
}
.card--problem{ border-left:4px solid var(--brand); background:#fff; }
.card__title{
    font-family: Poppins-Medium, sans-serif;
    font-size:18px;
    color:var(--ink);
    margin:0 0 10px;
    font-weight:600;
}
.card--service .card__title{
    color: var(--brand);
    display:flex; justify-content:space-between; align-items:center;
}
.card__text{
    font-family: Poppins-Regular, sans-serif;
    font-size:15px;
    color:var(--muted);
    line-height:1.55;
    margin:0;
}
.card__arrow{ color: var(--brand); font-size:22px; line-height:1; }

/* ---------- Process steps ---------- */
.process-steps{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:24px;
    margin-top:36px;
}
.step{ text-align:center; padding:24px 16px; }
.step__num{
    width:64px; height:64px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family: Poppins-Bold, Poppins-Medium, sans-serif;
    font-size:26px;
    font-weight:700;
    margin:0 auto 16px;
    box-shadow: var(--shadow);
}
.step__title{
    font-family: Poppins-Medium, sans-serif;
    font-size:18px;
    color:var(--ink);
    margin:0 0 8px;
    font-weight:600;
}
.step__text{
    font-family: Poppins-Regular, sans-serif;
    font-size:15px;
    color:var(--muted);
    line-height:1.55;
}

/* ---------- Brand pills ---------- */
.brand-block{
    font-family: Poppins-Regular, sans-serif;
    font-size:17px;
    color:var(--muted);
    line-height:1.9;
}
.brand-block strong{ color:var(--ink); font-family: Poppins-Medium, sans-serif; }

/* ---------- City links ---------- */
.city-links{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:8px;
}
.city-links__item{
    display:inline-flex;
    align-items:center;
    padding:12px 22px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    color: var(--brand);
    text-decoration:none;
    font-family: Poppins-Medium, sans-serif;
    font-weight:600;
    font-size:15px;
    transition: all .15s;
}
.city-links__item:hover{
    background: var(--brand);
    color:#fff;
    border-color: var(--brand);
    transform:translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* ---------- FAQ ---------- */
.faq-list{ max-width: 880px; margin:0 auto; }
.faq-item{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:0;
    margin-bottom:12px;
    overflow:hidden;
    transition: border-color .15s, box-shadow .15s;
}
.faq-item[open]{
    border-color: rgba(11,95,255,.5);
    box-shadow: var(--shadow-sm);
}
.faq-item summary{
    padding:20px 24px;
    font-family: Poppins-Medium, sans-serif;
    font-size:17px;
    font-weight:600;
    color:var(--ink);
    cursor:pointer;
    list-style:none;
    position:relative;
    padding-right:54px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
    content:'+';
    position:absolute;
    right:24px; top:50%;
    transform:translateY(-50%);
    width:28px; height:28px;
    background: var(--panel);
    color: var(--brand);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:700;
    transition: transform .15s;
}
.faq-item[open] summary::after{ content:'−'; transform:translateY(-50%) rotate(180deg); background: var(--brand); color:#fff; }
.faq-item__answer{
    padding:0 24px 22px;
    font-family: Poppins-Regular, sans-serif;
    font-size:16px;
    color:var(--muted);
    line-height:1.7;
    margin:0;
}

/* ---------- Trust strip ---------- */
.trust-strip{
    display:flex;
    justify-content:center;
    gap:32px;
    flex-wrap:wrap;
    margin-top:32px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.18);
}
.trust-strip__item{
    color:#fff;
    font-family: Poppins-Medium, sans-serif;
    font-size:15px;
    opacity:.92;
    display:flex;
    align-items:center;
    gap:8px;
}
.trust-strip__item span{ color:#1aa7ff; font-size:20px; }

/* ---------- Contact form ---------- */
.contact-cta{
    padding:80px 0;
    background: linear-gradient(180deg, #f4f7ff 0%, #fff 100%);
}
.contact-cta__inner{
    max-width:760px;
    margin:0 auto;
    text-align:center;
    padding:0 24px;
}
.contact-cta__title{
    font-family: Poppins-Bold, Poppins-Medium, sans-serif;
    font-size:36px;
    color:var(--ink);
    margin:0 0 14px;
}
.contact-cta__subtitle{
    font-family: Poppins-Regular, sans-serif;
    font-size:18px;
    color:var(--muted);
    line-height:1.5;
    margin:0 0 36px;
}
.contact-cta__form{ display:grid; gap:14px; text-align:left; }
.contact-cta__input{
    padding:16px 18px;
    border-radius:12px;
    border:1px solid #d6dbe6;
    font-family: Poppins-Regular, sans-serif;
    font-size:16px;
    background:#fff;
    transition: border-color .15s, box-shadow .15s;
}
.contact-cta__input:focus{
    outline:none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(11,95,255,.12);
}
.contact-cta__btn{
    padding:18px 30px;
    border:none;
    border-radius:12px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    color:#fff;
    font-family: Poppins-Medium, sans-serif;
    font-size:18px;
    font-weight:600;
    cursor:pointer;
    box-shadow: var(--shadow);
    transition: transform .15s;
}
.contact-cta__btn:hover{ transform:translateY(-2px); }
.contact-cta__phone-link{
    color: var(--brand);
    font-family: Poppins-Medium, sans-serif;
    font-weight:600;
    text-decoration:none;
}

/* ---------- Footer ---------- */
.footer__list-title{ color:#fff; font-family: Poppins-Medium, sans-serif; font-size:15px; margin-bottom:10px; opacity:.7; text-transform:uppercase; letter-spacing:.5px; }
.footer__copyright{
    text-align:center;
    padding:24px 0 0;
    color:#7b8499;
    font-size:14px;
    border-top:1px solid #2a3245;
    margin-top:32px;
    font-family: Poppins-Regular, sans-serif;
}
.footer__nav{
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-gap: 60px !important;
    align-items: flex-start;
}
@media (max-width: 768px){
    .footer__nav{ grid-template-columns: 1fr 1fr !important; grid-gap: 40px !important; }
}
@media (max-width: 480px){
    .footer__nav{ grid-template-columns: 1fr !important; grid-gap: 32px !important; }
}

/* ---------- Homepage: Services & Cities grids ---------- */
.home-services{ padding:80px 0; background:#fff; }
.home-services__inner{ max-width:1200px; margin:0 auto; padding:0 24px; }
.home-services__head{ text-align:center; margin-bottom:48px; }
.home-services__title{ font-family: Poppins-Bold, sans-serif; font-size:38px; color:var(--ink); margin:0 0 12px; }
.home-services__sub{ font-family: Poppins-Regular, sans-serif; font-size:18px; color:var(--muted); margin:0; }
.home-services__grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:22px;
}
.home-services__card{
    display:block;
    padding:32px 26px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    text-decoration:none;
    color:var(--ink);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.home-services__card:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--brand);
}
.home-cities{ padding:72px 0; background: linear-gradient(180deg, var(--panel) 0%, #fff 100%); }
.home-cities__inner{ max-width:1100px; margin:0 auto; padding:0 24px; text-align:center; }
.home-cities__title{ font-family: Poppins-Bold, sans-serif; font-size:34px; color:var(--ink); margin:0 0 12px; }
.home-cities__sub{ font-family: Poppins-Regular, sans-serif; font-size:17px; color:var(--muted); margin:0 0 36px; }
.home-cities__grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:14px;
    max-width:900px;
    margin:0 auto;
}
.home-cities__item{
    display:block;
    padding:18px 22px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    color:var(--ink);
    text-decoration:none;
    font-family: Poppins-Medium, sans-serif;
    font-weight:600;
    font-size:16px;
    transition: all .15s;
}
.home-cities__item:hover{
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    color:#fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: transparent;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px){
    .page-hero{ padding:150px 0 56px; }
    .page-hero__title{ font-size:32px; }
    .page-hero__subtitle{ font-size:17px; }
    .page-section{ padding:48px 0; }
    .page-section__title{ font-size:26px; }
    .home-services__title, .home-cities__title{ font-size:26px; }
    .contact-cta__title{ font-size:26px; }
    .btn{ padding:14px 22px; font-size:16px; }
    .trust-strip{ gap:18px; }
}