/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    --primary: #1a2744;
    --primary-dark: #111c33;
    --primary-light: #243558;
    --accent: #b89848;
    --accent-hover: #caa850;
    --white: #fff;
    --gray-50: #f8f9fb;
    --gray-100: #f1f3f5;
    --gray-200: #e1e4e8;
    --gray-300: #d0d4da;
    --gray-400: #a0a7b2;
    --gray-500: #6c7585;
    --gray-600: #4a5262;
    --gray-700: #333b48;
    --text: #2c3340;
    --text-light: #5a6270;
    --radius: 4px;
    --radius-md: 8px;
    --shadow: 0 2px 8px rgba(0,0,0,.06);
    --shadow-md: 0 4px 20px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 40px rgba(0,0,0,.10);
}

html { scroll-behavior:smooth; }
body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text);
    line-height: 1.6;
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }

.container { max-width:1180px; margin:0 auto; padding:0 20px; }

/* ===== HEADER ===== */
.header {
    position: fixed; top:0; left:0; right:0; z-index:100;
    background: var(--primary);
    height: 64px;
}
.header-inner {
    display: flex; align-items:center; justify-content:space-between; height:64px;
}

/* Logo */
.logo { display:flex; align-items:center; gap:10px; }
.logo-mark {
    width:36px; height:36px; background:var(--accent);
    display:flex; align-items:center; justify-content:center;
    font-family:'DM Serif Display',serif; font-size:20px; color:var(--primary);
    border-radius:6px; font-weight:400;
}
.logo-text { display:flex; flex-direction:column; line-height:1.15; }
.logo-brand {
    font-size:16px; font-weight:700; color:var(--white); letter-spacing:.3px;
}
.logo-vip {
    color:var(--accent); margin-left:3px; font-weight:600;
}
.logo-sub {
    font-size:10px; color:var(--gray-400); letter-spacing:1.5px;
    text-transform:uppercase; font-weight:500;
}

/* Nav */
.nav-main { display:flex; gap:2px; }
.nav-main a {
    padding:8px 14px; font-size:13.5px; font-weight:500;
    color:rgba(255,255,255,.72); border-radius:var(--radius);
    transition:color .2s, background .2s;
}
.nav-main a:hover, .nav-main a.active {
    color:var(--white); background:rgba(255,255,255,.08);
}

/* Header right */
.header-right { display:flex; align-items:center; gap:10px; }

/* Lang switch */
.lang-switch { position:relative; }
.lang-current {
    display:flex; align-items:center; gap:4px;
    padding:6px 12px; background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
    color:var(--white); font-size:12.5px; font-weight:600;
    cursor:pointer; font-family:inherit;
}
.lang-list {
    position:absolute; top:calc(100% + 6px); right:0;
    background:var(--white); border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg); min-width:150px;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:all .15s ease; overflow:hidden;
}
.lang-switch.open .lang-list {
    opacity:1; visibility:visible; transform:translateY(0);
}
.lang-list a {
    display:block; padding:10px 16px; font-size:13px; font-weight:500;
    color:var(--text); transition:background .1s;
}
.lang-list a:hover { background:var(--gray-50); }
.lang-list a.active { color:var(--accent); }

/* Header WhatsApp button */
.btn-header {
    display:flex; align-items:center; gap:6px;
    padding:7px 16px; background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.15); border-radius:var(--radius);
    color:var(--white); font-size:13px; font-weight:600;
    transition:background .2s;
}
.btn-header:hover { background:rgba(255,255,255,.16); }

/* Mobile menu button */
.mobile-menu-btn {
    display:none; flex-direction:column; gap:4px;
    background:none; border:none; padding:6px; cursor:pointer;
}
.mobile-menu-btn span {
    width:20px; height:2px; background:var(--white); border-radius:2px;
}

/* ===== HERO ===== */
.hero {
    padding: 130px 0 80px;
    background: linear-gradient(170deg, var(--primary) 0%, var(--primary-dark) 100%);
    position:relative; overflow:hidden;
}
.hero::after {
    content:''; position:absolute; bottom:-1px; left:0; right:0;
    height:80px; background:linear-gradient(to top, var(--white), transparent);
    pointer-events:none;
}
.hero-text {
    max-width:600px; margin-bottom:48px;
}
.hero h1 {
    font-family:'DM Serif Display', Georgia, serif;
    font-size:clamp(28px, 4vw, 44px); font-weight:400;
    color:var(--white); line-height:1.2; margin-bottom:16px;
}
.hero p {
    font-size:16px; color:rgba(255,255,255,.55); line-height:1.7; max-width:480px;
}

/* ===== SEARCH BOX ===== */
.search-box {
    background:var(--white); border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg); position:relative; z-index:10;
}
.search-tabs {
    display:flex; border-bottom:1px solid var(--gray-200);
}
.search-tab {
    padding:14px 24px; font-size:13.5px; font-weight:600;
    color:var(--gray-500); cursor:pointer; border:none; background:none;
    border-bottom:2px solid transparent; font-family:inherit;
    transition:color .2s;
}
.search-tab:hover { color:var(--text); }
.search-tab.active {
    color:var(--primary); border-bottom-color:var(--accent);
}

/* Search form */
.search-form { padding:24px; display:none; }
.search-form.active { display:block; }

.search-row {
    display:flex; gap:12px; align-items:end;
}
.search-field { flex:1; }
.search-field label {
    display:block; font-size:11.5px; font-weight:600;
    color:var(--gray-500); text-transform:uppercase;
    letter-spacing:.8px; margin-bottom:6px;
}
.search-field select,
.search-field input {
    width:100%; padding:10px 12px;
    border:1px solid var(--gray-200); border-radius:var(--radius);
    font-size:14px; font-family:inherit; color:var(--text);
    background:var(--white); transition:border-color .2s;
}
.search-field select:focus,
.search-field input:focus {
    outline:none; border-color:var(--accent);
}

/* Trip type toggle */
.trip-toggle {
    display:flex; gap:0; margin-bottom:16px;
}
.trip-toggle label {
    padding:8px 18px; font-size:13px; font-weight:500;
    color:var(--gray-500); cursor:pointer;
    border:1px solid var(--gray-200); background:var(--white);
    transition:all .15s;
}
.trip-toggle label:first-child { border-radius:var(--radius) 0 0 var(--radius); }
.trip-toggle label:last-child { border-radius:0 var(--radius) var(--radius) 0; border-left:0; }
.trip-toggle input { display:none; }
.trip-toggle input:checked + label {
    background:var(--primary); color:var(--white); border-color:var(--primary);
}

/* Search button */
.btn-search {
    padding:10px 28px; background:var(--accent); color:var(--primary);
    border:none; border-radius:var(--radius); font-size:14px;
    font-weight:600; cursor:pointer; font-family:inherit;
    white-space:nowrap; transition:background .2s;
}
.btn-search:hover { background:var(--accent-hover); }

/* ===== SECTION COMMON ===== */
.section { padding:80px 0; }
.section-alt { background:var(--gray-50); }

.section-head {
    margin-bottom:48px;
}
.section-head h2 {
    font-family:'DM Serif Display',serif;
    font-size:clamp(24px, 3vw, 34px); font-weight:400;
    margin-bottom:10px;
}
.section-head p {
    font-size:15px; color:var(--text-light); max-width:520px;
}
.section-head-center { text-align:center; }
.section-head-center p { margin:0 auto; }

/* ===== SERVICES GRID ===== */
.services-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.service-card {
    padding:28px 24px; border:1px solid var(--gray-200);
    border-radius:var(--radius-md); transition:border-color .2s, box-shadow .2s;
}
.service-card:hover {
    border-color:var(--accent); box-shadow:var(--shadow);
}
.service-icon {
    width:44px; height:44px; margin-bottom:16px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(184,152,72,.08); border-radius:8px;
}
.service-icon svg {
    width:22px; height:22px; stroke:var(--accent); fill:none;
    stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.service-card h3 {
    font-size:16px; font-weight:600; margin-bottom:8px;
}
.service-card p {
    font-size:13.5px; color:var(--text-light); line-height:1.6; margin-bottom:16px;
}
.service-link {
    font-size:13px; font-weight:600; color:var(--accent);
    display:inline-flex; align-items:center; gap:4px;
}

/* ===== POPULAR ROUTES ===== */
.routes-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.route-card {
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 20px; border:1px solid var(--gray-200);
    border-radius:var(--radius-md); transition:border-color .2s;
}
.route-card:hover { border-color:var(--accent); }
.route-name {
    font-size:15px; font-weight:600;
}
.route-sub {
    font-size:12px; color:var(--gray-500); margin-top:2px;
}
.route-price {
    text-align:right;
}
.route-price .amount {
    font-size:18px; font-weight:700; color:var(--primary);
}
.route-price .unit {
    font-size:11px; color:var(--gray-500);
}

/* ===== WHY US ===== */
.why-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.why-card {
    padding:28px 24px; border-radius:var(--radius-md);
    border:1px solid var(--gray-200);
}
.why-card-icon {
    width:40px; height:40px; margin-bottom:14px;
    background:var(--primary); border-radius:8px;
    display:flex; align-items:center; justify-content:center;
}
.why-card-icon svg {
    width:20px; height:20px; stroke:var(--accent); fill:none;
    stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.why-card h3 {
    font-size:15px; font-weight:600; margin-bottom:6px;
}
.why-card p {
    font-size:13.5px; color:var(--text-light); line-height:1.6;
}

/* ===== ABOUT ===== */
.about-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
}
.about-content p {
    font-size:15px; line-height:1.75; margin-bottom:14px; color:var(--text-light);
}
.mv-cards { display:grid; gap:16px; margin-top:28px; }
.mv-card {
    padding:20px 24px; border-left:3px solid var(--accent);
    background:var(--gray-50); border-radius:0 var(--radius) var(--radius) 0;
}
.mv-card h4 { font-size:14px; font-weight:600; margin-bottom:4px; }
.mv-card p { font-size:13.5px; color:var(--text-light); margin:0; }

/* ===== BLOG GRID ===== */
.blog-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.blog-card {
    border:1px solid var(--gray-200); border-radius:var(--radius-md);
    overflow:hidden; transition:box-shadow .2s;
}
.blog-card:hover { box-shadow:var(--shadow-md); }
.blog-thumb {
    aspect-ratio:16/9; background:var(--gray-100);
    display:flex; align-items:center; justify-content:center;
    font-size:32px; color:var(--gray-300);
}
.blog-body { padding:20px; }
.blog-meta {
    font-size:11.5px; color:var(--gray-400); font-weight:500;
    margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px;
}
.blog-body h3 { font-size:16px; font-weight:600; margin-bottom:8px; line-height:1.35; }
.blog-body p { font-size:13.5px; color:var(--text-light); line-height:1.6; }

/* ===== CTA ===== */
.cta {
    padding:72px 0; background:var(--primary); text-align:center;
}
.cta h2 {
    font-family:'DM Serif Display',serif;
    font-size:clamp(24px,3vw,34px); color:var(--white); font-weight:400;
    margin-bottom:12px;
}
.cta p { font-size:15px; color:rgba(255,255,255,.5); margin-bottom:28px; }
.cta-btns { display:flex; gap:12px; justify-content:center; }
.btn-accent {
    display:inline-flex; align-items:center; gap:6px;
    padding:12px 28px; background:var(--accent); color:var(--primary);
    border-radius:var(--radius); font-size:14px; font-weight:600;
    transition:background .2s;
}
.btn-accent:hover { background:var(--accent-hover); }
.btn-ghost {
    display:inline-flex; align-items:center; gap:6px;
    padding:12px 28px; border:1px solid rgba(255,255,255,.2);
    color:var(--white); border-radius:var(--radius);
    font-size:14px; font-weight:500; transition:border-color .2s;
}
.btn-ghost:hover { border-color:rgba(255,255,255,.4); }

/* ===== FOOTER ===== */
.footer {
    background:var(--primary-dark); padding:56px 0 0;
    color:rgba(255,255,255,.5); font-size:13.5px;
}
.footer-top {
    display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;
    gap:36px; padding-bottom:40px;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.footer-brand-col p { margin-top:8px; line-height:1.7; }
.footer-social {
    display:flex; gap:12px; margin-top:16px;
}
.footer-social a {
    color:rgba(255,255,255,.4); transition:color .2s;
}
.footer-social a:hover { color:var(--accent); }

.footer h4 {
    font-size:12px; font-weight:600; color:var(--white);
    text-transform:uppercase; letter-spacing:1.2px; margin-bottom:16px;
}
.footer ul li { margin-bottom:8px; }
.footer ul a { transition:color .2s; }
.footer ul a:hover { color:var(--accent); }

.footer-contact-list li {
    display:flex; align-items:center; gap:8px;
}
.footer-contact-list svg { flex-shrink:0; stroke:var(--gray-400); }

.footer-bottom {
    padding:20px 0; text-align:center; font-size:12.5px;
}

/* ===== STATIC PAGES ===== */
.page-hero {
    padding:110px 0 40px; background:var(--primary); color:var(--white);
}
.page-hero h1 {
    font-family:'DM Serif Display',serif; font-size:clamp(24px,3vw,34px); font-weight:400;
}
.page-content { padding:48px 0 80px; }
.page-body {
    max-width:780px; font-size:15px; line-height:1.8; color:var(--text-light);
}
.page-body h2 {
    font-size:20px; font-weight:700; color:var(--text); margin:36px 0 12px;
    font-family:'DM Sans',sans-serif;
}
.page-body h2:first-child { margin-top:0; }
.page-body h3 {
    font-size:16px; font-weight:600; color:var(--text); margin:24px 0 8px;
}
.page-body p { margin-bottom:12px; }
.page-body ul { margin:8px 0 16px 20px; }
.page-body ul li { margin-bottom:6px; list-style:disc; }
.page-body a { color:var(--accent); font-weight:500; }
.page-body a:hover { text-decoration:underline; }
.page-body hr { border:none; border-top:1px solid var(--gray-200); margin:36px 0; }
.page-body strong { color:var(--text); }
.page-updated {
    font-size:13px; color:var(--gray-400); font-style:italic; margin-bottom:24px;
}

/* Policy tables */
.policy-table {
    width:100%; border-collapse:collapse; margin:16px 0 24px;
    font-size:14px;
}
.policy-table th {
    text-align:left; padding:10px 16px; background:var(--gray-50);
    border:1px solid var(--gray-200); font-weight:600; color:var(--text);
    font-size:13px;
}
.policy-table td {
    padding:10px 16px; border:1px solid var(--gray-200);
}
.policy-table tr:hover td { background:var(--gray-50); }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
    .services-grid { grid-template-columns:repeat(2,1fr); }
    .routes-grid { grid-template-columns:repeat(2,1fr); }
    .footer-top { grid-template-columns:1fr 1fr; gap:28px; }
}

@media (max-width:768px) {
    .nav-main {
        display:none; position:fixed; top:64px; left:0; right:0;
        background:var(--primary); flex-direction:column;
        padding:12px 20px; border-top:1px solid rgba(255,255,255,.08);
    }
    .nav-main.open { display:flex; }
    .nav-main a { padding:12px 16px; }
    .mobile-menu-btn { display:flex; }
    .btn-header { display:none; }

    .hero { padding:100px 0 60px; }
    .search-row { flex-direction:column; }
    .services-grid { grid-template-columns:1fr; }
    .why-grid { grid-template-columns:1fr; }
    .routes-grid { grid-template-columns:1fr; }
    .blog-grid { grid-template-columns:1fr; }
    .about-grid { grid-template-columns:1fr; gap:32px; }
    .footer-top { grid-template-columns:1fr; }
    .cta-btns { flex-direction:column; align-items:center; }
}
