:root {--bg: #f4f7fb;--bg2: #ffffff;--text: #1a2433;--muted: #5c6a7a;--primary: #1e6fb8;--primary2: #0f4a7f;--accent: #f5c451;--accent2: #f2994a;--glass: rgba(255,255,255,0.92);--border: rgba(16,24,40,0.12);--success: #34d399}
* {box-sizing: border-box}
html, body {height: 100%}
body {margin: 0;background: var(--bg);color: var(--text);font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;line-height: 1.6;-webkit-font-smoothing: antialiased}
.bg {position: fixed;inset: 0;pointer-events: none;background: radial-gradient(1200px 600px at 12% 12%, rgba(30,111,184,0.18), transparent 70%), radial-gradient(1000px 500px at 88% 18%, rgba(245,196,81,0.16), transparent 70%), linear-gradient(180deg, var(--bg), var(--bg2));animation: hue 20s linear infinite}
@keyframes hue {0% {filter: hue-rotate(0deg)} 100% {filter: hue-rotate(30deg)}}
.header {position: sticky;top: 0;z-index: 50;display: flex;align-items: center;justify-content: space-between;padding: 16px 24px;background: rgba(255,255,255,0.85);backdrop-filter: saturate(140%) blur(10px);border-bottom: 1px solid var(--border)}
.brand-wrap {display: flex;align-items: center;gap: 10px}
.brand-logo {width: 40px;height: 40px;border-radius: 50%;object-fit: cover;border: 2px solid var(--accent);box-shadow: 0 6px 16px rgba(16,24,40,0.12)}
.brand {font-weight: 700;letter-spacing: 0.08em;text-decoration: none;color: var(--text)}
.nav {display: flex;gap: 20px;align-items: center}
.nav a {color: var(--muted);text-decoration: none;transition: color .2s ease}
.nav a:hover {color: var(--text)}
.cta {padding: 10px 16px;border-radius: 999px;background: linear-gradient(90deg, var(--accent), var(--accent2));color: #1a2433}
.hamburger {display: none;gap: 6px;background: transparent;border: 0}
.hamburger span {display: block;width: 22px;height: 2px;background: var(--text)}
.hero {display: grid;grid-template-columns: 1.3fr 1fr;gap: 24px;align-items: center;min-height: 76vh;padding: 64px 24px}
.hero-content {max-width: 760px}
.title {font-family: 'Playfair Display', serif;font-size: clamp(32px, 6vw, 64px);line-height: 1.05;letter-spacing: -0.01em}
.subtitle {font-size: clamp(16px, 2.2vw, 20px);color: var(--muted);margin-top: 14px}
.actions {display: flex;gap: 12px;margin-top: 24px}
.about {margin-top: 24px;display: grid;gap: 12px;background: var(--glass);border: 1px solid var(--border);padding: 16px;border-radius: 16px}
.btn {display: inline-flex;align-items: center;justify-content: center;padding: 12px 18px;border-radius: 12px;text-decoration: none;font-weight: 600;border: 1px solid var(--border);transition: transform .2s ease, box-shadow .2s ease}
.btn.primary {background: linear-gradient(90deg, var(--primary), var(--primary2));border: 0;color: #fff;box-shadow: 0 8px 24px rgba(30,111,184,0.3)}
.btn.ghost {background: #fff;color: var(--text)}
.btn:hover {transform: translateY(-2px)}
.hero-visual {position: relative;height: 420px}
.orb {position: absolute;border-radius: 50%;filter: blur(8px);opacity: 0.9}
.orb-1 {width: 220px;height: 220px;background: radial-gradient(circle at 30% 30%, #2c7ec6, #165995 60%, transparent 70%);top: 18%;left: 10%;animation: float 7s ease-in-out infinite}
.orb-2 {width: 160px;height: 160px;background: radial-gradient(circle at 40% 40%, #f5c451, #e6a22f 60%, transparent 70%);top: 54%;left: 36%;animation: float 9s ease-in-out infinite reverse}
.orb-3 {width: 120px;height: 120px;background: radial-gradient(circle at 50% 50%, #f2994a, #d97706 60%, transparent 70%);top: 24%;left: 68%;animation: float 6s ease-in-out infinite}
@keyframes float {0% {transform: translateY(0)} 50% {transform: translateY(-16px)} 100% {transform: translateY(0)}}
.section {padding: 80px 24px}
.section.alt {background: rgba(16,24,40,0.04)}
.section-title {font-size: clamp(24px, 4vw, 36px);margin-bottom: 24px}
.cards {display: grid;grid-template-columns: repeat(3, 1fr);gap: 18px}
.card {background: var(--glass);border: 1px solid var(--border);border-radius: 16px;padding: 20px;box-shadow: 0 8px 24px rgba(16,24,40,0.08);transition: transform .25s ease, box-shadow .25s ease}
.card:hover {transform: translateY(-6px);box-shadow: 0 16px 36px rgba(16,24,40,0.12)}
.card .icon {width: 42px;height: 42px;border-radius: 10px;background: rgba(255,255,255,0.06);display: grid;place-items: center;margin-bottom: 12px}
.card .icon svg {width: 24px;height: 24px;fill: var(--accent)}
.timeline {display: grid;gap: 16px}
.step {display: grid;grid-template-columns: 60px 1fr;gap: 16px;align-items: start;background: var(--glass);border: 1px solid var(--border);border-radius: 16px;padding: 16px}
.badge {display: grid;place-items: center;width: 42px;height: 42px;border-radius: 50%;background: linear-gradient(90deg, var(--accent), var(--accent2));color: #1a2433;font-weight: 700}
.checklist {list-style: none;margin: 0;padding: 0;display: grid;gap: 10px}
.checklist li {display: flex;align-items: center;gap: 10px;background: var(--glass);border: 1px solid var(--border);border-radius: 12px;padding: 12px}
.tick {display: inline-grid;place-items: center;width: 22px;height: 22px;border-radius: 50%;background: #34d399;color: #0b1b2c;font-weight: 700}
.faq {display: grid;gap: 10px}
.faq-item {background: var(--glass);border: 1px solid var(--border);border-radius: 12px;overflow: hidden}
.faq-q {width: 100%;text-align: left;padding: 14px 16px;background: transparent;border: 0;color: var(--text);font-weight: 600;display: flex;align-items: center;justify-content: space-between}
.faq-a {padding: 0 16px 14px 16px;color: var(--muted);display: none}
.faq-item.open .faq-a {display: block}
.chev {opacity: 0.7}
.cta-wide {display: grid;gap: 10px;align-items: center;justify-items: start;background: linear-gradient(90deg, var(--primary), var(--primary2));color: #fff;border-radius: 16px;padding: 18px}
.destinations {display: flex;flex-wrap: wrap;gap: 12px}
.dest-controls {display: flex;align-items: center}
.search {width: 100%;max-width: 520px;padding: 12px 14px;border-radius: 12px;border: 1px solid var(--border);background: #fff;color: var(--text);outline: none}
.dest-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 18px;margin-top: 18px}
.dest-card {background: var(--glass);border: 1px solid var(--border);border-radius: 16px;padding: 18px;display: grid;gap: 12px}
.dest-card header {display: flex;align-items: center;gap: 10px}
.dest-card h3 {margin: 0}
.facts {list-style: none;padding: 0;margin: 0;display: grid;gap: 8px}
.facts li {display: grid;grid-template-columns: 1fr 1.4fr;gap: 8px}
.facts .label {color: var(--muted)}
.tags {display: flex;flex-wrap: wrap;gap: 8px}
.tags span {padding: 6px 10px;border-radius: 999px;background: #fff;border: 1px solid var(--border);font-size: 12px}
@media (max-width: 960px) {.dest-grid {grid-template-columns: 1fr 1fr}}
@media (max-width: 560px) {.dest-grid {grid-template-columns: 1fr}}
.chip {display: inline-flex;align-items: center;padding: 10px 14px;border-radius: 999px;background: #fff;border: 1px solid var(--border);gap: 8px}
.flag-img {width: 22px;height: 22px;border-radius: 50%;object-fit: cover;border: 1px solid var(--border);background: #fff;box-shadow: 0 2px 6px rgba(16,24,40,0.12)}
.contact-grid {display: grid;grid-template-columns: 1.2fr 1fr;gap: 18px}
.fields {display: grid;gap: 12px}
input, textarea {width: 100%;padding: 12px 14px;border-radius: 12px;background: #fff;border: 1px solid var(--border);color: var(--text);outline: none}
.note {margin-top: 10px;color: var(--muted);font-size: 12px}
.map {margin-top: 12px;border-radius: 16px;overflow: hidden;border: 1px solid var(--border);background: rgba(255,255,255,0.04)}
.map iframe {width: 100%;height: 320px}
.footer {padding: 24px;border-top: 1px solid var(--border);background: rgba(255,255,255,0.9);backdrop-filter: blur(8px)}
.footer-inner {display: grid;grid-template-columns: 1fr auto auto;gap: 12px;align-items: center}
.footer .links {display: flex;gap: 12px}
.footer .links a {color: var(--muted);text-decoration: none}
.footer .links a:hover {color: var(--text)}
.reveal {opacity: 0;transform: translateY(18px);transition: opacity .8s ease, transform .8s ease}
.reveal.show {opacity: 1;transform: translateY(0)}
@media (max-width: 960px) {.hero {grid-template-columns: 1fr;min-height: auto}.hero-visual {height: 320px}.cards {grid-template-columns: 1fr 1fr}.contact-grid {grid-template-columns: 1fr}.footer-inner {grid-template-columns: 1fr;gap: 6px}.nav {display: none}.hamburger {display: inline-flex}}
@media (max-width: 560px) {.cards {grid-template-columns: 1fr}.actions {flex-wrap: wrap}.title {font-size: 36px}}