:root{
  --ink:#0f2a6b; --ink-2:#1b3c8b; --muted:#5e6e97; --link:#113aa7; --accent:#1ecf7a;
  --bg:#ffffff; --bg-soft:#f6f8fe; --stroke:#e6ecf5; --shadow:0 10px 30px rgba(16,32,64,.12);
  --radius:14px; --radius-lg:18px; --radius-xl:22px; --maxw:1240px; --hdr-h:64px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg)}
a{color:var(--link); text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:var(--maxw); margin-inline:auto; padding-inline:24px}

/* Header */
.hdr{position:sticky; top:0; z-index:200; background:#fff; border-bottom:1px solid var(--stroke)}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; height:var(--hdr-h)}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:26px}
.menus{display:flex; align-items:center; gap:22px}
.nav-item{position:relative}
.nav-link{padding:14px 0; color:var(--ink); font-weight:700; border:0; background:transparent}
.nav-link:hover{color:#0d2f7e}
.nav-item.open>.nav-link{color:#0d2f7e}
.nav-item.open>.nav-link::after{content:""; position:absolute; left:0; right:0; bottom:-14px; height:3px; background:#0d2f7e; border-radius:2px}
.hdr-right{display:flex; align-items:center; gap:14px}

/* Mega */
.mega{position:fixed; left:0; right:0; top:var(--hdr-h); display:none; z-index:210; background:rgba(255,255,255,.98); border-bottom:1px solid var(--stroke); box-shadow:var(--shadow)}
.mega .panel{padding:24px 0; display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.mega .col{grid-column:span 3}
.mega h6{margin:4px 0 8px; font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:#6879a6}
.mega a{display:block; padding:8px 10px; border-radius:8px; color:var(--ink); font-weight:600}
.mega a:hover{background:var(--bg-soft)}
.mega .illustration{grid-column:span 3; border-left:1px solid var(--stroke); padding-left:18px; display:flex; align-items:center; justify-content:center}
.mega .illustration img{max-width:100%; height:auto; border-radius:12px}
.mega-backdrop{position:fixed; left:0; right:0; top:var(--hdr-h); bottom:0; background:rgba(0,0,0,.28); backdrop-filter:blur(2px); display:none; z-index:180}

/* Hero */
.hero{position:relative; min-height:64vh; overflow:hidden}
.hero .accent{position:absolute; left:calc((100vw - var(--maxw))/2 + 24px); top:18vh; width:10px; height:56px; border-radius:6px; background:linear-gradient(180deg,#ff54d8,#7ac5ff)}
.slides{position:absolute; inset:0}
.slides img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease}
.slides img.active{opacity:1}
.hero-caption{position:absolute; left:max(24px,calc((100vw - var(--maxw))/2 + 40px)); bottom:22vh; color:#fff;}
.hero-caption h1{font-size:54px; line-height:1.05; margin:0 0 10px; text-shadow:0 2px 20px rgba(0,0,0,.25)}
.hero-caption p{font-size:20px; max-width:700px; margin:0 0 16px; text-shadow:0 2px 16px rgba(0,0,0,.25)}
.hero .cta{background:#fff; color:var(--ink); font-weight:700; padding:10px 14px; border-radius:10px; display:inline-block}

/* Progress bars */
.hero-progress{position:absolute; left:max(24px,calc((100vw - var(--maxw))/2 + 24px)); bottom:14vh; display:flex; gap:8px}
.bar{width:56px; height:6px; background:rgba(255,255,255,.38); border-radius:6px; overflow:hidden; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.2)}
.bar > i{display:block; height:100%; width:0; background:#fff}

/* Booking strip */
.book{position:relative; z-index:2; width:min(100%, var(--maxw)); margin:-60px auto 0}
.book-card{background:#fff; border:1px solid var(--stroke); border-radius:22px; box-shadow:var(--shadow); padding:14px}
.title{display:flex; align-items:center; gap:10px; font-weight:800; margin:12px 0 6px}
.fgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:10px}
.field{background:#fff; border:1px solid var(--stroke); border-radius:12px; padding:10px 12px}
.field label{display:block; font-size:12px; color:#7d8db3; letter-spacing:.3px; margin-bottom:2px}
.field button, .field input{width:100%; padding:4px 0 0; background:transparent; border:0; outline:0; color:var(--ink); font-size:16px; text-align:left}
.search-col .btn{width:100%; padding:14px 22px; font-size:16px; background:var(--accent); color:#04351f; border-radius:12px; font-weight:900; border:0}
@media (max-width: 860px){.fgrid{grid-template-columns:1fr}}

/* Promo + ribbons + deals */
.promo-strip{background:#fff; padding:24px 0}
.promo-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.promo-bar strong{font-size:20px}
.sel button{border:0;background:transparent;font-weight:800;color:var(--ink)}
.ribbons{display:grid; grid-template-columns:repeat(12,1fr); gap:18px; margin:36px auto}
.rib{grid-column:span 4; background:#fff; border:1px solid var(--stroke); border-radius:14px; padding:18px; box-shadow:var(--shadow)}
.rib h4{margin:0 0 6px; font-size:18px} .rib p{margin:0; color:#51608a}
@media (max-width: 960px){.rib{grid-column:span 6}} @media (max-width: 640px){.rib{grid-column:span 12}}
.deals.container{margin-bottom:40px}
.deal-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.deal{grid-column:span 3; border:1px solid var(--stroke); border-radius:16px; overflow:hidden; background:#fff; box-shadow:var(--shadow)}
.deal img{width:100%; height:180px; object-fit:cover}
.deal .pad{padding:12px 14px}
.deal .city{font-weight:800} .deal .price{font-weight:900; color:#0f2a6b}
@media (max-width: 1120px){.deal{grid-column:span 4}} @media (max-width: 820px){.deal{grid-column:span 6}} @media (max-width: 560px){.deal{grid-column:span 12}}

/* Feature banner (wide card) */
.feature-wrap{width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding-inline:24px}
.feature{max-width:var(--maxw); margin:24px auto 32px}
.feature-card{display:grid; grid-template-columns:1.05fr 0.95fr; gap:18px; background:#fff; border:1px solid var(--stroke); border-radius:22px; box-shadow:var(--shadow); overflow:hidden}
.feature-body{padding:26px 28px}
.feature-body .badge{display:inline-block; padding:6px 12px; border-radius:999px; font-weight:800; font-size:13px; background:#dff7ee; color:#0a7a4b; letter-spacing:.2px; margin-bottom:12px}
.feature-body h2{margin:4px 0 10px; font-size:32px; line-height:1.15; color:var(--ink)}
.feature-body p{margin:0 0 16px; color:#4a5a86}
.feature-body .cta{display:inline-flex; align-items:center; gap:8px; font-weight:800; color:#113aa7; text-decoration:none}
.feature-body .cta:hover{text-decoration:underline}
.feature-media{position:relative; min-height:220px}
.feature-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
@media (max-width:1000px){.feature-card{grid-template-columns:1fr} .feature-media{min-height:200px}}

/* Footer */
.ftr{background:#eef3ff; border-top:1px solid var(--stroke); padding:40px 0}
.fcols{display:grid; grid-template-columns:repeat(12,1fr); gap:20px}
.col{grid-column:span 3} .col h5{margin:0 0 10px; color:var(--ink-2)} .col a{display:block; padding:6px 0; color:var(--ink)}
.subscribe{grid-column:span 3;}
.subscribe input{padding:10px 12px;border:1px solid var(--stroke);border-radius:10px}
.social{display:flex; gap:10px; margin-top:12px}
.social a{width:36px; height:36px; border:1px solid var(--stroke); display:grid; place-items:center; border-radius:999px}
@media (max-width: 960px){.col,.subscribe{grid-column:span 6}} @media (max-width: 640px){.col,.subscribe{grid-column:span 12}}
.ftr-meta{margin-top:18px; color:#6b7baa; display:flex; gap:16px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--stroke)}

/* Modal (airport) */
.modal{display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:320}
.modal .sheet{width:min(92vw, 760px); margin:10vh auto; background:#fff; border-radius:14px; box-shadow:var(--shadow); border:1px solid var(--stroke)}
.modal header{padding:16px 18px; border-bottom:1px solid var(--stroke); display:flex; align-items:center; justify-content:space-between}
.modal header h3{margin:0; font-size:18px; color:var(--ink)}
.modal .body{padding:12px 18px}
.modal .search{display:flex; gap:10px; align-items:center; border:1px solid var(--stroke); border-radius:10px; padding:8px 12px; margin-bottom:12px}
.modal .search input{flex:1; border:0; outline:0; font-size:16px}
.modal .list{max-height:360px; overflow:auto; border:1px solid var(--stroke); border-radius:12px}
.modal .list .row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--stroke); cursor:pointer}
.modal .list .row .meta{color:#7d8db3}
.modal .list .row .code{font-weight:900}