:root { --page-bg:#fbf7ed; --surface:#fffaf2; --text-main:#123c52; --text-muted:#586871; --gold:#dfa01b; --gold-dark:#ad6810; --teal:#087d79; --teal-dark:#075d63; --line-gold:#d5a04b; --border-soft:#e8dfcf; }
* { box-sizing:border-box; }
html { color-scheme:light; scroll-behavior:smooth; }
body { margin:0; background:var(--page-bg); color:var(--text-main); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:16px; line-height:1.55; }
button, a { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
.wrap, .header-inner { width:min(100% - 40px, 1440px); margin-inline:auto; }
.site-header { background:var(--surface); border-bottom:1px solid var(--border-soft); }
.header-inner { min-height:0; display:flex; align-items:center; justify-content:center; padding:14px 0 12px; }
.brand-banner { display:block; width:min(100%, 640px); color:inherit; text-decoration:none; }
.brand-banner img { display:block; width:100%; height:auto; }
:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.intro { width:min(100% - 40px, 1440px); padding:70px 0 42px; margin:0 auto; }.city-kicker { margin:0 0 8px; color:var(--gold-dark); font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em; }.intro h1 { max-width:900px; margin:0; font-family:Georgia, "Times New Roman", serif; font-size:clamp(2.5rem, 5vw, 4.9rem); line-height:1; letter-spacing:-.05em; }.lead { max-width:760px; margin:22px 0 30px; color:var(--text-muted); font-size:1.12rem; }
.city-tabs { display:grid; grid-template-columns:1fr 1fr; gap:18px; width:min(100%, 760px); margin:38px auto 0; }.city-tabs button { position:relative; min-height:82px; overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:18px; background:linear-gradient(135deg,#12181d 0%,#293238 45%,#0e1418 100%); color:#fffaf0; font-weight:850; font-size:1.23rem; letter-spacing:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -18px 34px rgba(0,0,0,.22), 0 18px 38px rgba(18,60,82,.2); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }.city-tabs button::before { content:""; position:absolute; inset:-42% -26%; background:linear-gradient(115deg,transparent 26%,rgba(255,255,255,.16) 38%,rgba(223,160,27,.18) 48%,transparent 62%); transform:translateX(-36%) rotate(3deg); animation:liquidSweep 5.8s ease-in-out infinite; pointer-events:none; }.city-tabs button::after { content:""; position:absolute; inset:1px; border-radius:17px; background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 44%,rgba(255,255,255,.05)); pointer-events:none; }.city-tabs button:hover { transform:translateY(-2px); border-color:rgba(223,160,27,.48); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 -18px 34px rgba(0,0,0,.2), 0 24px 48px rgba(18,60,82,.26); }.city-tabs button[aria-selected="true"] { background:linear-gradient(135deg,#08151b 0%,#0d5155 48%,#10161a 100%); border-color:rgba(223,160,27,.72); color:white; box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 -5px 0 var(--gold), inset 0 -22px 36px rgba(0,0,0,.2), 0 24px 52px rgba(7,93,99,.28); }@keyframes liquidSweep { 0%,100% { transform:translateX(-42%) rotate(3deg); opacity:.45; } 45% { transform:translateX(34%) rotate(3deg); opacity:.8; } 70% { transform:translateX(44%) rotate(3deg); opacity:.25; } }
.city-panel { padding:20px 0 92px; }.js .city-panel:not(.is-active) { display:none; }.city-hero { display:grid; grid-template-columns:minmax(0, .95fr) minmax(420px, 1.05fr); align-items:stretch; overflow:hidden; background:#e4eee7; border:1px solid var(--border-soft); border-radius:22px; }.city-hero-copy { padding:clamp(30px, 5vw, 74px); }.city-hero h2,.catalog h2 { margin:0; font-family:Georgia, "Times New Roman", serif; font-size:clamp(2rem, 3.5vw, 3.35rem); line-height:1.08; letter-spacing:-.04em; }.city-hero-copy > p:not(.city-kicker) { color:var(--text-muted); }.hero-image { min-height:500px; }.hero-image img { width:100%; height:100%; display:block; object-fit:cover; }
.catalog { padding-top:78px; }.catalog-heading { max-width:850px; margin-bottom:34px; }.catalog-heading h2 { font-size:clamp(2rem, 3.5vw, 3rem); }.catalog-heading > p:last-child { color:var(--text-muted); max-width:690px; }.tour-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:23px; }.tour-card { overflow:hidden; background:var(--surface); border:1px solid var(--border-soft); border-radius:14px; }.tour-card picture { display:block; height:235px; overflow:hidden; }.tour-card picture img { width:100%; height:100%; display:block; object-fit:cover; }.card-catamaran picture img { object-position:66% center; }.card-jetski picture img { object-position:18% 77%; }.card-dive picture img { object-position:88% center; }.card-fishing picture img { object-position:45% 25%; }.card-speedboat picture img { object-position:10% bottom; }.card-similan picture img { object-position:55% center; }.card-phangnga picture img { object-position:30% center; }.card-hong picture img { object-position:79% 70%; }.tour-card > div { padding:25px; }.tour-card h3 { margin:0 0 8px; font-family:Georgia, "Times New Roman", serif; font-size:1.55rem; line-height:1.12; letter-spacing:-.025em; }.tour-card p { margin:0; color:var(--text-muted); font-size:.94rem; }.land-catalog { padding-top:78px; }.land-grid { align-items:start; }.land-card { border-top:3px solid var(--gold); }.land-card > div { padding-top:27px; }
.site-footer { padding:10px 0 56px; background:var(--page-bg); }.footer-contact { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:16px 22px; padding-top:20px; border-top:1px solid var(--border-soft); }.footer-contact p { margin:0; color:var(--text-main); font-size:1.15rem; font-weight:800; }.footer-contact-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 22px; }.footer-choice { display:inline-flex; align-items:center; gap:8px; background:transparent; font-size:1.18rem; font-weight:850; line-height:1.1; text-decoration:none; }.footer-choice:hover { text-decoration:underline; text-underline-offset:4px; }.footer-choice.whatsapp { background:transparent; color:#149646; }.footer-choice.telegram { background:transparent; color:#1d88c6; }.footer-choice.max { background:transparent; color:#8b49ee; }.footer-service-icon { display:grid; place-items:center; width:32px; height:32px; flex:0 0 auto; border-radius:9px; color:white; box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 4px 8px rgba(18,60,82,.15); }.footer-choice.whatsapp .footer-service-icon { background:#28a763; }.footer-choice.telegram .footer-service-icon { background:#278ecb; }.footer-choice.max .footer-service-icon { background:linear-gradient(145deg,#f14f8e,#813ddc); font-size:9px; letter-spacing:0; }.footer-service-icon svg { width:21px; fill:currentColor; }
@media (max-width:1050px) { .tour-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.city-hero { grid-template-columns:1fr 1fr; }.hero-image { min-height:440px; } }
@media (max-width:720px) { .wrap,.header-inner { width:min(100% - 28px, 1440px); }.header-inner { padding:9px 0 8px; }.brand-banner { width:min(100%, 300px); }.intro { width:min(100% - 28px, 1440px); margin:0 auto; padding:43px 0 30px; }.intro h1 { font-size:clamp(2.45rem, 12vw, 3.4rem); }.lead { margin:17px 0 23px; font-size:1rem; }.city-tabs { gap:12px; margin-top:27px; }.city-tabs button { min-height:66px; border-radius:15px; font-size:1rem; }.city-tabs button::after { border-radius:14px; }.city-panel { padding:9px 0 62px; }.city-hero { grid-template-columns:1fr; border-radius:15px; }.city-hero-copy { padding:31px 23px; }.city-hero h2 { font-size:2rem; }.hero-image { min-height:280px; order:-1; }.catalog { padding-top:53px; }.land-catalog { padding-top:53px; }.catalog-heading { margin-bottom:24px; }.tour-grid { grid-template-columns:1fr; gap:16px; }.tour-card picture { height:235px; }.tour-card > div { padding:22px; }.site-footer { padding-bottom:42px; }.footer-contact { align-items:flex-start; justify-content:flex-start; }.footer-contact-links { justify-content:flex-start; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.city-tabs button { transition:none; }.city-tabs button::before { animation:none; } }