:root{
  --ink:#0b1220; --muted:#6b7280; --line:#e5e7eb; --bg:#ffffff; --panel:#ffffff;
  --accent:#111827; --accent-2:#2563eb; --ok:#16a34a; --warn:#f59e0b;
  --radius:14px; --radius-lg:18px; --shadow:0 8px 28px rgba(17,24,39,.06);
  --container:1200px; --header-h:64px;
}
*{box-sizing:border-box}
body{margin:0; font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--ink); background:var(--bg);}
h1,h2,h3{letter-spacing:-.015em}
a{color:var(--accent-2); text-decoration:none}

/* Header */
.site-header{position:sticky; top:0; z-index:30; height:var(--header-h); background:#fff; border-bottom:1px solid var(--line)}
.hd{margin:0 auto; width:min(var(--container),100%); height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 20px}
.brand{display:flex; gap:10px; align-items:center; text-decoration:none}
.logo{width:34px; height:34px; border-radius:10px; border:1px solid var(--line); display:grid; place-items:center; font-weight:900; color:#fff; background:#111}
.name{font-weight:900; color:#111}
.nav{display:flex; gap:16px; align-items:center}
.nav .link{color:#111; padding:8px 10px; border-radius:10px; border:1px solid transparent}
.nav .link:hover{border-color:var(--line); background:#f8fafc}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:800; padding:10px 14px; border-radius:12px; border:1px solid #111}
.btn.primary{background:#111; color:#fff; border-color:#111}
.btn.ghost{background:#fff; color:#111}
.btn.thin{border-color:var(--line)}
.pill{border:1px solid var(--line); border-radius:999px; padding:6px 10px; color:#111; text-decoration:none;}
.agent-pill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:#fff; color:#334155; font-size:12px; font-weight:800}
.agent-dot{width:8px; height:8px; border-radius:50%; background:#94a3b8}
.agent-online{background:#22c55e}
.ml8{margin-left:8px}

/* Sections */
.section{width:min(var(--container),100%); margin:0 auto; padding:28px 20px}
.hero{display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:22px; padding-top:22px; padding-bottom:6px}
.hero h1{font-size:clamp(28px,4.5vw,46px); line-height:1.08; margin:.2rem 0 .5rem; font-weight:900}
.sub{color:var(--muted)}
.hero-card{border:1px solid var(--line); border-radius:var(--radius-lg); background:#var(--panel); overflow:hidden}
.hero-img{height:280px; width:100%; display:block; object-fit:cover; background:#f3f4f6}
.btnrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}

/* Quick search cards */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:980px){ .hero{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} }
.card{border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:16px}
.card h3{margin:.2rem 0 .6rem; font-weight:900}
.inputs{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.label{font-size:12px; color:var(--muted); margin-bottom:4px}
.input{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff}
.submit{margin-top:10px}

/* Featured Destinations */
.section-title{margin:.2rem 0 10px; font-weight:900}
.dest-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media (max-width:980px){ .dest-grid{grid-template-columns:repeat(2,1fr)} }
.dest{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff}
.dest img{width:100%; height:140px; object-fit:cover; display:block; background:#f1f5f9}
.dest .meta{display:flex; align-items:center; justify-content:space-between; padding:10px}
.dest .city{font-weight:900}
.dest .links a{text-decoration:underline}

/* Lists */
.list{margin:0; padding-left:18px; color:#374151}
.small{font-size:12px; color:#6b7280}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start}
.contact-grid .full{grid-column:1 / -1}
.note{margin-left:8px}
.success{color:#16a34a}

/* Footer */
.footer{border-top:1px solid var(--line); background:#fff; margin-top:28px}
.foot{width:min(var(--container),100%); margin:0 auto; padding:18px 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px}
.foot .left{display:flex; align-items:center; gap:10px}
.foot-links{display:flex; gap:14px; flex-wrap:wrap}
.foot-links a{color:#374151; text-decoration:none; border:1px solid transparent; padding:6px 8px; border-radius:8px}
.foot-links a:hover{border-color:var(--line); background:#f8fafc}

/* ===== AI Overlay ===== */
.overlay{position:fixed; inset:0; background:rgba(17,24,39,.55); display:none; z-index:60; align-items:center; justify-content:center; padding:20px}
.overlay.open{display:flex}
.ai{width:min(1120px,100%); background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); display:grid; grid-template-columns:1fr 380px; gap:18px; padding:16px}
@media (max-width:980px){ .ai{grid-template-columns:1fr} }
.ai-top{grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; padding:0 2px 6px 2px; border-bottom:1px solid var(--line)}
.ai-title{font-weight:900; margin:0}
.ai-top-right{display:flex; align-items:center; gap:10px}
.ai-close{border:1px solid var(--line); background:#fff; padding:8px 12px; border-radius:10px; cursor:pointer}

/* Chat */
.bw-chat{background:#fff; border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; min-height:62vh; max-height:70vh}
.bw-hd{display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line)}
.bw-badge{width:34px; height:34px; border-radius:10px; background:#111; color:#fff; display:grid; place-items:center; font-weight:900}
.bw-title{font-weight:900}
.bw-sub{color:#6b7280; font-size:13px}
.bw-log{padding:14px; overflow:auto; flex:1}
.bw-msg{display:flex; gap:10px; margin:10px 0}
.bw-msg .ava{flex:0 0 32px; width:32px; height:32px; border-radius:10px; background:#111; color:#fff; display:grid; place-items:center; font-weight:800}
.bw-user .ava{background:#111827}
.bw-bubble{background:#f9fafb; border:1px solid var(--line); padding:10px 12px; border-radius:12px; max-width:96%}
.bw-user .bw-bubble{background:#eef2ff; border-color:#dbe5ff}
.typing{display:inline-block; min-width:28px}
.dot{width:6px; height:6px; margin:0 2px; display:inline-block; border-radius:50%; background:#9ca3af; animation:blink 1.2s infinite alternate}
.dot:nth-child(2){animation-delay:.2s} .dot:nth-child(3){animation-delay:.4s}
@keyframes blink{to{opacity:.2; transform:translateY(-2px)}}
.bw-comp{display:flex; gap:10px; padding:12px; border-top:1px solid var(--line)}
.bw-comp .back,.bw-comp .reset{padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer}
.bw-comp input[type="text"]{flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#fafafa}
.bw-comp .send{padding:10px 14px; border-radius:10px; border:1px solid #111; background:#111; color:#fff; font-weight:800; cursor:pointer}

/* Chips/inputs inside chat */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.chip{border:1px solid var(--line); background:#fff; padding:8px 12px; border-radius:999px; cursor:pointer; font-size:14px}
.chip.selected{background:#e0ecff; border-color:#bcd7ff}
.inline{display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap}
.input-inline{padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff}
.small{font-size:12px; color:#6b7280}
.stepper{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:10px; padding:6px 8px; background:#fff}
.stepper button{border:1px solid var(--line); background:#fff; border-radius:8px; width:28px; height:28px; cursor:pointer}
.stepper input{width:36px; text-align:center; border:0; background:transparent}

/* Summary panel */
.side{border:1px solid var(--line); border-radius:14px; padding:14px}
.side-title{margin:0 0 6px 0;font-weight:900}
.progress{height:6px; background:#f3f4f6; border-radius:999px; overflow:hidden; margin:6px 0 12px}
.bar{height:100%; width:0%; background:#111827; transition:width .35s ease}
.kv{display:grid; grid-template-columns:130px 1fr; gap:6px 10px; font-size:14px}
.kv div{padding:6px 0; border-bottom:1px dashed var(--line)}
.kv div:nth-child(odd){color:#6b7280}

/* Results Modal */
.modal{position:fixed; inset:0; background:rgba(17,24,39,.55); display:none; align-items:flex-start; justify-content:center; padding:40px 16px; z-index:70}
.modal.open{display:flex}
.m-card{width:min(1100px,100%); background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden}
.m-hd{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line)}
.m-title{margin:0; font-weight:900}
.m-body{padding:16px; display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:16px}
@media (max-width:1024px){ .m-body{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .m-body{grid-template-columns:1fr} }
.m-ft{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-top:1px solid var(--line); background:#fafafa}
.lock{font-size:14px}
.link-btn{border:1px solid var(--line); background:#fff; padding:10px 14px; border-radius:10px; font-weight:800; cursor:pointer}
.secure{font-size:12px; color:#6b7280}
.m-actions{display:flex; align-items:center; gap:8px}

/* Package cards */
.pkg{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column; min-height:420px; position:relative}
.pkg .hero{height:140px; background:#f1f5f9; overflow:hidden; position:relative}
.pkg.featured .hero{height:180px}
.pkg .hero img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover;
  object-position:center;
  display:block;
}
.pkg .badge{position:absolute; top:10px; left:10px; background:#111; color:#fff; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:800}
.pkg .content{padding:14px; display:flex; flex-direction:column; gap:8px; flex:1}
.pkg h4{margin:.2rem 0 .1rem; font-weight:900}
.price{font-weight:900}
.row{display:block}
.meta{color:#475569; font-size:13px}
.bullets{margin:2px 0 0; padding-left:18px}
.bullets li{font-size:13px; margin:2px 0}
.links-label{font-size:12px; color:#6b7280; font-weight:800; margin-top:6px}
.links{display:flex; gap:12px; flex-wrap:wrap; font-size:14px}
.links a{text-decoration:underline}
.purchase{margin-top:auto; display:inline-block; padding:11px 14px; border-radius:12px; background:#111; color:#fff; font-weight:900; text-align:center}
.confidence{font-size:12px; color:#6b7280}

/* Airline strip */
.airline{display:flex; align-items:center; gap:8px; font-size:13px}
.airline-logo{width:22px; height:22px; border-radius:6px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:12px}
.logo-dl{background:#c81e2a} .logo-ua{background:#115293} .logo-aa{background:#0a2a66}

/* Featured bigger + gold CTA */
.pkg.featured{min-height:520px; border:2px solid #facc15}
.pkg.featured .purchase{background:#f59e0b}

/* Floating Chat */
.fab{position:fixed; right:18px; bottom:18px; width:52px; height:52px; border-radius:50%; border:1px solid var(--line); background:#111; color:#fff; font-size:22px; box-shadow:var(--shadow); cursor:pointer; z-index:85}
.help{position:fixed; right:18px; bottom:80px; width:320px; max-width:90vw; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; display:none; z-index:90}
.help.open{display:flex; flex-direction:column}
.help-hd{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--line); background:#111; color:#fff}
.help-body{padding:10px; height:280px; overflow:auto; background:#f9fafb}
.help-msg{background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin:6px 0; font-size:14px}
.help-ft{display:flex; gap:6px; padding:10px; border-top:1px solid var(--line)}
.help-ft input{flex:1; padding:10px; border:1px solid var(--line); border-radius:10px}
.help-ft .btn{padding:10px 12px}
.quick{display:none; padding:8px 10px; border-top:1px solid var(--line); background:#fff}
.offline-form{display:none; padding:10px; border-top:1px solid var(--line); background:#fff}
.offline-form .grid{display:grid; gap:8px}