:root {
    --navy:        #081e52;
    --blue:        #1e5bff;
    --blue-dark:   #1040cc;
    --blue-pale:   #eef3ff;
    --white:       #ffffff;
    --bg:          #f4f6fb;
    --border:      #e4e9f5;
    --border-md:   #c8d3ef;
    --text-main:   #111827;
    --green-acc:   #0db57a;
    --orange:      #f59e0b;
    --ease:        cubic-bezier(0.4,0,0.2,1);
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Manrope',sans-serif; background:var(--bg); color:var(--text-main); -webkit-font-smoothing:antialiased; }

.container { max-width:1280px; margin:0 auto; padding:0 28px; }

.section-label {
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Outfit',sans-serif; font-size:0.72rem; font-weight:700;
    letter-spacing:0.12em; text-transform:uppercase;
    color:var(--blue); background:rgba(30,91,255,0.08);
    border:1px solid rgba(30,91,255,0.18); border-radius:100px; padding:5px 14px; margin-bottom:14px;
}
.section-label::before { content:''; width:6px; height:6px; background:var(--blue); border-radius:50%; }

.section-title {
    font-family:'Outfit',sans-serif;
    font-size:clamp(1.5rem,2.8vw,2.2rem); font-weight:800;
    color:var(--navy); line-height:1.18; letter-spacing:-0.03em;
}
.section-title span { color:var(--blue); }
.section-sub { font-family:'Manrope',sans-serif; font-size:0.92rem; color:#6b7a9f; margin-top:8px; line-height:1.65; }

.btn-outline {
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 22px; background:transparent; color:var(--blue);
    font-family:'Outfit',sans-serif; font-weight:700; font-size:0.88rem;
    border:2px solid var(--blue-pale); border-radius:12px; cursor:pointer;
    text-decoration:none; transition:all 0.22s ease;
}
.btn-outline:hover { background:rgba(30,91,255,0.06); border-color:var(--blue); }

.fade-up { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease,transform 0.6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

.breadcrumb-bar { background:var(--white); border-bottom:1px solid var(--border); padding:10px 0; }
.breadcrumb {
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    font-family:'Manrope',sans-serif; font-size:0.78rem; color:#6b7a9f;
}
.breadcrumb a:hover { color:var(--blue); }
.breadcrumb a { color:#576385; text-decoration:none; transition:color 0.15s; }
.breadcrumb-sep { color:#7c8ba1; }
.breadcrumb-current { color:var(--text-main); font-weight:600; }

.city-hero { position:relative; padding:64px 28px 128px; overflow:hidden; }
.city-hero-bg-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.city-hero-bg-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(8,30,82,0.85) 0%, rgba(8,30,82,0.62) 55%, rgba(8,30,82,0.78) 100%);
}
.city-hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    display: block;
}
.city-hero-bg::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(8,30,82,0.85) 0%,rgba(8,30,82,0.62) 55%,rgba(8,30,82,0.78) 100%);
}
.city-hero::before {
    content:''; position:absolute; inset:0; z-index:1;
    background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse 100% 100% at 50% 0%,black 0%,transparent 80%);
}
.city-hero-glow {
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
    radial-gradient(ellipse 60% 80% at 80% 50%,rgba(30,91,255,0.20) 0%,transparent 60%),
    radial-gradient(ellipse 40% 50% at 5% 80%,rgba(95,139,255,0.10) 0%,transparent 55%);
}
.city-hero-inner {
    position:relative; z-index:2;
    max-width:1280px; margin:0 auto;
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;
}
.city-hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Outfit',sans-serif; font-size:0.7rem; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase;
    color:rgba(255,255,255,0.65); background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.12); border-radius:100px; padding:5px 14px; margin-bottom:18px;
}
.hero-badge-dot { width:6px; height:6px; background:#7DDFB4; border-radius:50%; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.75)} }

.city-hero h1 {
    font-family:'Outfit',sans-serif;
    font-size:clamp(2rem,3.8vw,3.1rem); font-weight:900;
    color:#fff; line-height:1.08; letter-spacing:-0.04em; margin-bottom:16px;
}
.city-hero h1 em {
    font-style:normal; color:transparent;
    background:linear-gradient(90deg,#6FB3FF 0%,#A5C8FF 100%);
    -webkit-background-clip:text; background-clip:text;
}
.city-hero-desc {
    font-family:'Manrope',sans-serif; font-size:0.97rem;
    color:rgba(255,255,255,0.55); line-height:1.7; max-width:480px; margin-bottom:28px;
}
.city-hero-chips { display:flex; flex-wrap:wrap; gap:8px; }
.city-hero-chip {
    display:flex; align-items:center; gap:7px;
    padding:7px 14px; background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.12); border-radius:100px;
    font-family:'Manrope',sans-serif; font-size:0.78rem; font-weight:600; color:rgba(255,255,255,0.75);
}
.city-hero-chip svg { width:14px; height:14px; color:#7DDFB4; }

.city-info-card {
    background:rgba(255,255,255,0.07); backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.12); border-radius:24px; padding:28px;
}
.cic-top { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.cic-flag { font-size:2.8rem; line-height:1; flex-shrink:0; }
.cic-name { font-family:'Outfit',sans-serif; font-size:1.5rem; font-weight:900; color:#fff; letter-spacing:-0.03em; line-height:1.1; }
.cic-local { font-family:'Manrope',sans-serif; font-size:0.82rem; color:rgba(255,255,255,0.4); margin-top:3px; }
.cic-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.cic-stat { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); border-radius:14px; padding:14px 16px; }
.cic-stat-num { font-family:'Outfit',sans-serif; font-size:1.3rem; font-weight:900; color:#7DDFB4; letter-spacing:-0.02em; line-height:1; }
.cic-stat-label { font-family:'Manrope',sans-serif; font-size:0.7rem; color:rgba(255,255,255,0.42); margin-top:4px; }
.cic-divider { height:1px; background:rgba(255,255,255,0.08); margin:18px 0; }
.cic-cta {
    display:flex; align-items:center; justify-content:center; gap:8px;
    height:48px; width:100%;
    background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%);
    color:#fff; font-family:'Outfit',sans-serif; font-size:0.92rem; font-weight:800;
    border:none; border-radius:12px; cursor:pointer; text-decoration:none;
    transition:all 0.22s; box-shadow:0 4px 20px rgba(30,91,255,0.35); letter-spacing:0.01em;
    padding-left: 10px;
}
.cic-cta:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(30,91,255,0.45); }
.cic-cta svg { width:15px; height:15px; }

.trips-strip {
    background:var(--white); border-bottom:1.5px solid var(--border);
    padding:20px 0; overflow:hidden;
}
.trips-strip-inner { max-width:1280px; margin:0 auto; padding:0 28px; }
.trips-strip-label {
    font-family:'Manrope',sans-serif; font-size:0.7rem; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase; color:#576385;
    margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.trips-strip-label::before {
    content:''; width:6px; height:6px; background:var(--green-acc); border-radius:50%;
    animation:pulse 2s ease-in-out infinite;
}
.trips-strip-list { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; padding-top: 5px;}
.trips-strip-list::-webkit-scrollbar { display:none; }
.trip-chip {
    display:flex; align-items:center; gap:10px; flex-shrink:0;
    padding:10px 16px; background:var(--bg); border:1.5px solid var(--border);
    border-radius:14px; text-decoration:none; transition:all 0.18s;
}
.trip-chip:hover { border-color:var(--blue); box-shadow:0 4px 14px rgba(30,91,255,0.12); transform:translateY(-2px); }
.tc-flag { font-size:1.15rem; line-height:1; flex-shrink:0; }
.tc-dest { font-family:'Outfit',sans-serif; font-size:0.88rem; font-weight:800; color:var(--navy); white-space:nowrap; }
.tc-time { font-family:'Manrope',sans-serif; font-size:0.7rem; color:#6b7a9f; margin-top:2px; white-space:nowrap; }
.tc-price { font-family:'Outfit',sans-serif; font-size:0.9rem; font-weight:900; color:var(--green-acc); white-space:nowrap; flex-shrink:0; }
.tc-arrow { width:22px; height:22px; background:var(--blue-pale); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.18s; }
.trip-chip:hover .tc-arrow { background:var(--blue); }
.tc-arrow svg { width:9px; height:9px; color:var(--blue); transition:color 0.18s; }
.trip-chip:hover .tc-arrow svg { color:#fff; }

.stats-bar { background:var(--white); border-top:1.5px solid var(--border); border-bottom:1.5px solid var(--border); }
.stats-bar-inner { max-width:1280px; margin:0 auto; padding:0 28px; display:flex; align-items:stretch; }
.stat-item { flex:1; display:flex; align-items:center; gap:14px; padding:22px 24px; border-right:1px solid var(--border); transition:background 0.2s; }
.stat-item:last-child { border-right:none; }
.stat-item:hover { background:var(--bg); }
.stat-icon { width:44px; height:44px; background:rgba(30,91,255,0.08); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-icon svg { width:20px; height:20px; color:var(--blue); }
.stat-num { font-family:'Outfit',sans-serif; font-size:1.45rem; font-weight:900; color:var(--navy); letter-spacing:-0.03em; line-height:1; }
.stat-label { font-family:'Manrope',sans-serif; font-size:0.76rem; color:#576385; margin-top:3px; }

.routes-from-section { padding:64px 0; background:var(--white); }
.routes-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; gap:16px; }
.routes-from-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

.route-tile {
    background:var(--white); border:1.5px solid var(--border); border-radius:20px;
    overflow:hidden; text-decoration:none; transition:all 0.25s; display:flex; flex-direction:column;
}
.route-tile:hover { border-color:rgba(30,91,255,0.25); box-shadow:0 8px 32px rgba(8,30,82,0.10); transform:translateY(-4px); }
.route-tile-top { height:120px; position:relative; overflow:hidden; }
.rtop-bg { position:absolute; inset:0; background-size:cover; background-position:bottom; transition:transform 0.5s; }
.route-tile:hover .rtop-bg { transform:scale(1.06); }
.rtop-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,30,82,0.08) 0%,rgba(8,30,82,0.62) 100%); }
.rtop-flag { position:absolute; top:10px; right:10px; font-size:1.2rem; line-height:1; }
.route-tile-body { padding:16px; flex:1; display:flex; flex-direction:column; }
.rt-route { font-family:'Outfit',sans-serif; font-size:0.9rem; font-weight:800; color:var(--navy); margin-bottom:8px; line-height:1.3; }
.rt-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.rt-badge { display:flex; align-items:center; gap:4px; font-family:'Manrope',sans-serif; font-size:0.7rem; font-weight:600; color:#6b7a9f; }
.rt-badge svg { width:12px; height:12px; color:var(--blue); }
.rt-price-row { display:flex; align-items:baseline; gap:5px; margin-top:auto; }
.rt-from-label { font-family:'Manrope',sans-serif; font-size:0.7rem; color:#6b7a9f; }
.rt-price { font-family:'Outfit',sans-serif; font-size:1rem; font-weight:800; color:var(--navy); }
.rt-arrow { margin-left:auto; width:26px; height:26px; background:var(--blue-pale); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.route-tile:hover .rt-arrow { background:var(--blue); }
.rt-arrow svg { width:11px; height:11px; color:var(--blue); transition:color 0.2s; }
.route-tile:hover .rt-arrow svg { color:#fff; }

.intro-section { padding:64px 0 0; background:linear-gradient(180deg,var(--bg) 0%,var(--white) 100%); }
.intro-grid { display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start; margin-top:32px; padding-bottom: 24px;}

.intro-body { font-family:'Manrope',sans-serif; font-size:0.95rem; color:#374151; line-height:1.82; }
.intro-body p { margin-bottom:18px; }
.intro-body p:last-child { margin-bottom:0; }
.intro-body strong { color:var(--navy); }

.tips-card { background:var(--white); border:1.5px solid var(--border); border-radius:20px; padding:26px; position:sticky; top:85px; }
.tips-card-title {
    display:flex; align-items:center; gap:10px;
    font-family:'Outfit',sans-serif; font-size:0.95rem; font-weight:800; color:var(--navy);
    margin-bottom:16px; padding-bottom:14px; border-bottom:1.5px solid var(--border-md);
}
.tips-card-title svg { width:18px; height:18px; color:var(--blue); flex-shrink:0; }
.tip-item { display:flex; gap:10px; padding:10px 0; border-bottom:1px dashed var(--border); }
.tip-item:last-child { border-bottom:none; padding-bottom:0; }
.tip-num {
    width:22px; height:22px; background:var(--blue); border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    font-family:'Outfit',sans-serif; font-size:0.65rem; font-weight:900; color:#fff; margin-top:1px;
}
.tip-text { font-family:'Manrope',sans-serif; font-size:0.82rem; color:#6b7a9f; line-height:1.65; }

.related-section { padding:64px 0; background:var(--white); }
.related-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; gap:16px; }
.related-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

.city-tile {
    background:var(--white); border:1.5px solid var(--border); border-radius:20px;
    overflow:hidden; text-decoration:none; transition:all 0.25s; display:flex; flex-direction:column;
}
.city-tile:hover { border-color:rgba(30,91,255,0.25); box-shadow:0 8px 32px rgba(8,30,82,0.10); transform:translateY(-4px); }
.city-tile-top { height:110px; position:relative; overflow:hidden; }
.ctop-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 0.5s; }
.city-tile:hover .ctop-bg { transform:scale(1.06); }
.ctop-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,30,82,0.08) 0%,rgba(8,30,82,0.6) 100%); }
.ctop-flag { position:absolute; top:10px; left:10px; font-size:1.2rem; line-height:1; }
.city-tile-body { padding:14px 16px; flex:1; display:flex; flex-direction:column; }
.ct-name { font-family:'Outfit',sans-serif; font-size:0.88rem; font-weight:800; color:var(--navy); margin-bottom:6px; line-height:1.3; }
.ct-price-row { display:flex; align-items:baseline; gap:5px; margin-top:auto; }
.ct-from { font-family:'Manrope',sans-serif; font-size:0.68rem; color:#6b7a9f; }
.ct-price { font-family:'Outfit',sans-serif; font-size:0.95rem; font-weight:800; color:var(--navy); }
.ct-arrow { margin-left:auto; width:24px; height:24px; background:var(--blue-pale); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.city-tile:hover .ct-arrow { background:var(--blue); }
.ct-arrow svg { width:10px; height:10px; color:var(--blue); transition:color 0.2s; }
.city-tile:hover .ct-arrow svg { color:#fff; }


.tc-time-big { font-family:'Outfit',sans-serif; font-size:1.3rem; font-weight:900; color:var(--navy); letter-spacing:-0.03em; line-height:1; }
.tc-meta { flex:1; min-width:0; }
.tc-carrier-nm { font-family:'Manrope',sans-serif; font-size:0.72rem; font-weight:700; color:#4b5563; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-vtype { font-family:'Manrope',sans-serif; font-size:0.67rem; color:var(--blue); margin-top:2px; }
.tc-price-nm { font-family:'Outfit',sans-serif; font-size:0.92rem; font-weight:900; color:#097d53; white-space:nowrap; }
.tc-seats-nm { font-family:'Manrope',sans-serif; font-size:0.65rem; color:#ef4444; margin-top:2px; text-align:right; font-weight:600;}

.faq-section { padding:64px 0; background:linear-gradient(180deg,var(--bg) 0%,#e8eeff 100%); }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:40px; align-items: start;}

.faq-item {
    background:var(--white); border:1.5px solid var(--border); border-radius:18px;
    overflow:hidden; transition:border-color 0.2s,box-shadow 0.2s;
}
.faq-item:hover { border-color:rgba(30,91,255,0.22); box-shadow:0 4px 20px rgba(8,30,82,0.06); }
.faq-q {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:18px 20px; cursor:pointer; user-select:none;
}
.faq-q-text { font-family:'Outfit',sans-serif; font-size:0.93rem; font-weight:700; color:var(--navy); line-height:1.3; }
.faq-icon {
    width:28px; height:28px; flex-shrink:0; background:var(--blue-pale); border-radius:50%;
    display:flex; align-items:center; justify-content:center; transition:all 0.2s;
}
.faq-icon svg { width:13px; height:13px; color:var(--blue); transition:transform 0.2s; }
.faq-item.open .faq-icon { background:var(--blue); }
.faq-item.open .faq-icon svg { color:#fff; transform:rotate(45deg); }
.faq-a {
    display:none; padding:0 20px 18px;
    font-family:'Manrope',sans-serif; font-size:0.86rem; color:#6b7a9f; line-height:1.75;
    border-top:1px solid var(--border);
}
.faq-a.show { display:block; animation:fadeIn 0.2s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
.faq-a-inner { padding-top:14px; }

.faq-cta-bar {
    background: linear-gradient(135deg, var(--navy) 0%, #0a2466 100%);
    padding: 32px 0;
}
.faq-cta-inner {
    display: flex; align-items: center;
    justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.faq-cta-title {
    font-family: 'Outfit', 'Manrope', sans-serif; font-size: 1.3rem;
    font-weight: 800; color: #fff;
}
.faq-cta-sub {
    font-family: 'Manrope', sans-serif; font-size: 0.84rem;
    color: rgba(255,255,255,0.55); margin-top: 4px;
}

.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--blue);
    color: #fff !important;
    text-decoration: none;
    font-family: 'Outfit', 'Manrope', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    border-radius: 12px;
    transition: all 0.25s var(--ease);
    box-shadow: 0 4px 15px rgba(30, 91, 255, 0.4);
    white-space: nowrap;
}

.btn-cta-primary:hover {
    background: #fff;
    color: var(--navy) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.btn-cta-primary svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s;
}

.btn-cta-primary:hover svg {
    transform: scale(1.1);
}

.faq-cta-bar {
    background: linear-gradient(135deg, var(--navy) 0%, #0a2466 100%);
    padding: 40px 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.faq-cta-bar::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(30,91,255,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.faq-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .faq-cta-inner {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }
    
    .btn-cta-primary {
        width: 100%;
        justify-content: center;
    }
}

.seo-section { padding:64px 0; background:var(--white); }
.seo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 32px;
}

.seo-card {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 30px;
    transition: border-color 0.25s, box-shadow 0.25s;
    flex: 1 1 450px;
    max-width: 600px;
}
.seo-card:hover { border-color:rgba(30,91,255,0.22); box-shadow:0 8px 32px rgba(8,30,82,0.06); }
.seo-card-title {
    font-family:'Outfit',sans-serif; font-size:1.05rem; font-weight:800; color:var(--navy);
    margin-bottom:18px; padding-bottom:14px; border-bottom:1.5px solid var(--border-md);
    display:flex; align-items:center; gap:10px;
}
.seo-card-title svg { width:18px; height:18px; color:var(--blue); flex-shrink:0; }
.seo-list { list-style:none; display:flex; flex-direction:column; gap:11px; }
.seo-list li a {
    display:flex; align-items:center; gap:10px;
    font-family:'Manrope',sans-serif; font-size:0.9rem; font-weight:600;
    color:var(--text-main); text-decoration:none; transition:color 0.2s,transform 0.2s;
}
.seo-list li a:hover { color:var(--blue); transform:translateX(4px); }
.seo-list li a svg { width:13px; height:13px; color:#6b7a9f; transition:color 0.2s; flex-shrink:0; }
.seo-list li a:hover svg { color:var(--blue); }
.seo-dot { width:6px; height:6px; background:var(--border-md); border-radius:50%; flex-shrink:0; transition:background 0.2s; }
.seo-list li a:hover .seo-dot { background:var(--blue); }
.seo-price-tag { margin-left:auto; font-family:'Outfit',sans-serif; font-size:0.78rem; font-weight:800; color:var(--green-acc); background:rgba(13,181,122,0.08); padding:2px 8px; border-radius:6px; white-space:nowrap; }

.seo-article { padding:48px 0; background:var(--white); border-top:1.5px solid var(--border); }
.seo-article-inner { max-width:800px; margin:0 auto; }
.seo-article h2 { font-family:'Outfit',sans-serif; font-size:1.35rem; font-weight:800; color:var(--navy); margin:28px 0 12px; letter-spacing:-0.02em; }
.seo-article h2:first-child { margin-top:0; }
.seo-article p { font-family:'Manrope',sans-serif; font-size:0.9rem; color:#4b5563; line-height:1.82; margin-bottom:14px; }
.seo-article ul { margin:12px 0 14px 18px; }
.seo-article li { font-family:'Manrope',sans-serif; font-size:0.9rem; color:#4b5563; line-height:1.7; margin-bottom:6px; }

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

    .intro-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    }
    .tips-card {
    position: static;
    }

    .seo-grid {
    flex-direction: column;
    }
    .seo-card {
    max-width: 100%;
    }

    .rtop-bg { 
        background-position:center;
    }

    .ctop-bg { 
        background-position:center;
    }
}

@media (max-width: 768px) {
    .bk-section {
    margin-top: -25px;
    }

    .container {
    padding: 0 20px;
    }
    
    .city-hero {
    padding: 32px 20px 64px;
    }
    .routes-from-section, 
    .related-section, 
    .intro-section, 
    .faq-section, 
    .seo-section, 
    .seo-article {
    padding: 48px 0;
    }

    .city-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    }
    .city-hero h1 {
    font-size: 2.2rem;
    }
    .city-hero-desc {
    max-width: 100%;
    }
    .city-info-card {
    padding: 24px;
    }

    .trips-strip-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    overflow-x: visible;
    padding-bottom: 12px;
    padding-top: 8px;
    }
    
    .trip-chip {
    width: 100%;
    flex-shrink: 1;
    background: var(--white);
    box-shadow: 0 4px 12px rgba(8, 30, 82, 0.04);
    border-color: var(--border-md);
    }

    .routes-head, 
    .related-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    }
    .routes-head .btn-outline, 
    .related-head .btn-outline {
    width: 100%;
    justify-content: center;
    }

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

    .stats-bar-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
    }
    .stat-item {
    border-right: none;
    padding: 20px;
    }
    .stat-item:nth-child(1) { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .stat-item:nth-child(2) { border-bottom: 1px solid var(--border); }
    .stat-item:nth-child(3) { border-right: 1px solid var(--border); }
}

@media (max-width: 576px) {
    .container {
    padding: 0 16px;
    }
    .city-hero {
    padding: 24px 16px 48px;
    }

    .city-info-card {
    display: none;
    }
    
    .section-title {
    font-size: 1.6rem;
    }

    .routes-from-grid, 
    .related-grid {
    grid-template-columns: 1fr;
    }

    .trips-strip-list {
    grid-template-columns: 1fr;
    gap: 10px;
    }
    
    .trip-chip {
    padding: 16px;
    }

    .tc-time-big {
    font-size: 1.3rem; 
    }
    .tc-price-nm {
    font-size: 1.05rem;
    }

    .stat-item {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding: 16px 12px;
    }
    .stat-num {
    font-size: 1.25rem;
    }

    .faq-q {
    padding: 16px;
    gap: 12px;
    }
    .faq-a {
    padding: 0 16px 16px;
    }

    .seo-card {
    padding: 20px;
    }
    .seo-list li a {
    align-items: flex-start;
    line-height: 1.4;
    }
    .seo-dot {
    margin-top: 6px;
    }
    
    .breadcrumb {
    font-size: 0.7rem;
    }

    .cic-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    }

    .city-hero-chip-wifi {
        display: none;
    }

    .route-tile-top {
        height: 200px;
    } 
    .rtop-bg { 
        background-position:bottom !important;
    }

    .city-tile-top {
        height: 200px;
    } 
    .ctop-bg { 
        background-position:bottom !important;
    }
}

@media (max-width: 420px) {
    .seo-list li a {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    }

    .seo-route-wrapper {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    }

    .seo-arrow-inline {
    display: none;
    }

    .from-city .seo-origin {
    order: 1; 
    font-size: 0.8rem;
    color: #6b7a9f;
    font-weight: 600;
    }
    .from-city .seo-origin::after {
    content: " →";
    opacity: 0.6;
    }
    .from-city .seo-destination {
    order: 2;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--navy);
    }

    .to-city .seo-origin {
    order: 1;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--navy);
    }
    .to-city .seo-origin::after {
    content: " →";
    opacity: 0.6;
    }
    .to-city .seo-destination {
    order: 2;
    font-size: 0.8rem;
    color: #6b7a9f;
    font-weight: 600;
    }

    .seo-price-tag {
    align-self: center;
    }
    .seo-dot {
    align-self: center;
    }

    .route-tile-top {
        height: 145px;
    } 

    .city-tile-top {
        height: 145px;
    } 
}

@media (max-width: 375px) {
    .cic-stats {
    grid-template-columns: 1fr;
    }
    .trip-chip {
    width: 85vw;
    }
    .stat-item {
    padding: 12px 8px;
    }

    .route-tile-top {
        height: 130px;
    } 

    .city-tile-top {
        height: 130px;
    } 
}