:root {
--c-indigo: #4426F6;
--c-violet: #9B33F8;
--c-pink: #FF1EA8;
--c-ink: #111827;
--c-muted: #6B7280;
--c-border: #E6EAF3;
--c-bg-soft: #F7F7FC;
}

* { box-sizing: border-box; }

body {
font-family: 'Inter', sans-serif;
color: #1F2430;
overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-display { font-family: 'Plus Jakarta Sans', sans-serif; }

.gradient-text {
background: linear-gradient(135deg, var(--c-indigo) 0%, var(--c-violet) 50%, var(--c-pink) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.gradient-bg { background: linear-gradient(135deg, var(--c-indigo) 0%, var(--c-violet) 50%, var(--c-pink) 100%); }
.gradient-bg-soft { }

.animate-gradient { background-size: 200% 200%; animation: gradient-x 4s ease infinite; }
@keyframes gradient-x { 0%, 100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }

@keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0deg) } 50% { transform: translateY(-6px) rotate(-1deg) } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: 0.5; transform: scale(1.5) } }
@keyframes route-dash { to { stroke-dashoffset: -1000; } }
@keyframes wave-shift { from { transform: translateX(0); } to { transform: translateX(-200px); } }
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-30px) } to { opacity: 1; transform: translateX(0) } }

.animate-float { animation: float 3s ease-in-out infinite; }
.animate-float-delay { animation: float 3s ease-in-out 1s infinite; }
.animate-float-delay2 { animation: float 3s ease-in-out 2s infinite; }
.animate-bob { animation: bob 4s ease-in-out infinite; }
.animate-pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }
.animate-route { animation: route-dash 8s linear infinite; }
.animate-wave { animation: wave-shift 6s linear infinite; }

@media (prefers-reduced-motion: reduce) {
.animate-float, .animate-float-delay, .animate-float-delay2, .animate-bob,
.animate-pulse-dot, .animate-route, .animate-gradient, .animate-wave { animation: none !important; }
}

.section-fade { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.section-fade.visible { opacity: 1; transform: translateY(0); }

.card-hover { transition: transform .3s ease, box-shadow .3s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(68, 38, 246, 0.15); }

.btn-gradient {
background: linear-gradient(135deg, var(--c-indigo) 0%, var(--c-violet) 50%, var(--c-pink) 100%);
color: #fff; border: none; font-weight: 600; transition: all .3s ease;
box-shadow: 0 8px 30px rgba(68, 38, 246, 0.25);
}
.btn-gradient:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(68, 38, 246, 0.4); }

.btn-outline-soft { border: 2px solid var(--c-border); font-weight: 600; transition: all .3s ease; color: #1F2430; }
.btn-outline-soft:hover { border-color: rgba(68, 38, 246, 0.4); background: #F7F2FC; color: #1F2430; }

.badge-pill {
display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem; border-radius: 999px;
border: 1px solid #E9D9FB; background: #F8F2FE; font-size: .75rem; font-weight: 600; color: var(--c-indigo);
}

.glass { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

.rounded-4xl { border-radius: 1.75rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-2xl { border-radius: 1rem; }
.text-muted-soft { color: var(--c-muted); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 3px; }

.icon-chip { width: 48px; height: 48px; border-radius: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-chip-lg { width: 56px; height: 56px; }
.icon-chip i { font-size: 1.3rem; }
.grad-icon {
background: linear-gradient(135deg, var(--c-indigo), var(--c-violet), var(--c-pink));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Hero text readability over a brighter photo */
.hero-shadow-text { text-shadow: 0 2px 18px rgba(13, 17, 23, 0.55); }

/* ── Decorative nautical icons: %-based position so they hold their
place relative to the hero on every screen size, no image-crop issues ── */
.hero-deco {
position: absolute;
z-index: 0;
opacity: 0.55;
pointer-events: none;
width: clamp(28px, 5vw, 64px);
}
.hero-deco svg { width: 100%; height: auto; display: block; }

.hero-deco-anchor  { top: 16%; left: 6%;  animation: deco-float-a 7s ease-in-out infinite; }
.hero-deco-ring    { top: 46%; left: 9%;  width: clamp(40px, 7vw, 90px); animation: deco-float-b 9s ease-in-out infinite; }
.hero-deco-ship    { top: 12%; right: 6%; width: clamp(46px, 8vw, 110px); animation: deco-float-c 8s ease-in-out infinite; }
.hero-deco-compass { top: 42%; right: 8%; width: clamp(36px, 6vw, 78px); animation: deco-float-d 10s ease-in-out infinite; }

@keyframes deco-float-a { 0%,100% { transform: translate(0,0); } 25% { transform: translate(6px,-8px); } 50% { transform: translate(2px,4px); } 75% { transform: translate(-5px,6px); } }
@keyframes deco-float-b { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-7px,6px); } 50% { transform: translate(-2px,-5px); } 75% { transform: translate(6px,-3px); } }
@keyframes deco-float-c { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-6px,5px); } 50% { transform: translate(4px,-6px); } 75% { transform: translate(6px,3px); } }
@keyframes deco-float-d { 0%,100% { transform: translate(0,0); } 25% { transform: translate(5px,6px); } 50% { transform: translate(-4px,-3px); } 75% { transform: translate(-6px,5px); } }

@media (prefers-reduced-motion: reduce) {
.hero-deco { animation: none !important; }
}
/* Keep icons out of the way of the headline/search bar on small screens */
@media (max-width: 767.98px) {
.hero-deco { opacity: 0.35; }
.hero-deco-anchor  { top: 6%;  left: 4%; }
.hero-deco-ring    { top: 72%; left: 4%; }
.hero-deco-ship    { top: 6%;  right: 4%; }
.hero-deco-compass { top: 72%; right: 4%; }
}
@media (max-width: 480px) {
.hero-deco { display: none; }
}

/* ── Booking widget (horizontal, professional) ─────────────── */
.booking-widget {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 1rem;
box-shadow: 0 12px 40px rgba(17, 24, 39, 0.08);
}
.booking-widget-inner {
display: flex;
align-items: stretch;
flex-wrap: nowrap;
}
.booking-field {
border-right: 1px solid var(--c-border);
padding: .85rem 1.25rem;
background: #fff;
transition: background-color .15s ease;
flex: 1 1 0;
min-width: 0;
}
.booking-field:hover, .booking-field:focus-within { background: var(--c-bg-soft); }
.booking-field label {
font-size: .68rem; font-weight: 600; color: var(--c-muted); display: block; margin-bottom: .2rem;
text-transform: uppercase; letter-spacing: .04em;
}
.booking-field select, .booking-field input {
border: none; outline: none; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
font-size: .92rem; width: 100%; padding: 0; color: var(--c-ink); background: transparent;
}
.booking-field-pax { flex: 0 0 150px; }
.swap-btn {
width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--c-border); background: #fff;
display: flex; align-items: center; justify-content: center; color: var(--c-indigo); flex-shrink: 0;
transition: transform .2s ease; position: relative; z-index: 2; margin: 0 -14px;
align-self: center;
}
.swap-btn:hover { transform: rotate(180deg); background: #F7F2FC; }

.pax-stepper { display: flex; align-items: center; gap: .5rem; }
.pax-stepper button {
width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--c-border); background: #fff;
display: flex; align-items: center; justify-content: center; color: var(--c-indigo); font-weight: 700; line-height: 1;
font-size: .85rem;
}
.btn-search-pro {
background: var(--c-indigo);
color: #fff; border: none; font-weight: 600; border-radius: .75rem;
transition: background-color .2s ease;
white-space: nowrap;
}
.btn-search-pro:hover { background: #3720C9; color: #fff; }

@media (max-width: 991.98px) {
.booking-widget-inner { flex-wrap: wrap; }
.booking-field { flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--c-border); }
.booking-field-pax { flex: 1 1 45%; }
.swap-btn { display: none; }
}
.route-card-img {
position: relative;
height: 190px;
overflow: hidden;
background: linear-gradient(135deg, #e0e7ff, #cffafe); /* fallback if an image is missing */
}
.route-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.card-hover:hover .route-card-img img {
transform: scale(1.06);
}
.route-card-img .badge-pill {
position: absolute;
top: 12px;
left: 12px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(6px);
}