:root{
  --lagoon:#0d5c6b; --deep:#08303a; --sky:#e3f3f4; --sun:#f3b73a; --coral:#e8604c;
  --bg:#fbfdfd; --surface:#ffffff; --text:#12303a; --muted:#4d6a72; --line:#cfe3e5;
  --hero-text:#ffffff;
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --body:"Figtree","Segoe UI",system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a1c22; --surface:#10303a; --text:#e6f3f4; --muted:#9fc0c6; --line:#1f4651; --sky:#10303a;
    color-scheme:dark;
  }
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.6 var(--body)}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.wrap{width:min(1120px,92%);margin-inline:auto}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0}
h2{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:800;letter-spacing:-.02em}
p{margin:0}

/* header */
header{position:absolute;inset:0 0 auto 0;z-index:5;padding-top:env(safe-area-inset-top,0px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0;color:var(--hero-text)}
.logo{font:800 1.6rem var(--display);text-decoration:none;letter-spacing:-.02em}
.logo span{color:var(--sun)}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;font-weight:500}
.nav ul a:hover{text-decoration:underline;text-underline-offset:6px}
.btn{display:inline-block;padding:13px 26px;border-radius:999px;background:var(--sun);color:#1c2a10;font-weight:600;text-decoration:none;border:0;cursor:pointer;font-size:1rem;font-family:var(--body)}
.btn:hover{background:#ffc94f}
.btn.sm{padding:9px 20px}

/* hero */
.hero{position:relative;background:linear-gradient(180deg,#f7c978 0%,#f3b73a 28%,#e8604c 62%,#0d5c6b 62.1%,#08303a 100%);color:var(--hero-text);overflow:hidden;padding:150px 0 0;min-height:700px}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(2.8rem,8vw,6rem);font-weight:800;letter-spacing:-.035em;max-width:11ch}
.hero p.lead{margin-top:22px;max-width:44ch;font-size:1.2rem;color:#fff;text-shadow:0 1px 12px rgba(8,48,58,.35)}
.scene{position:absolute;inset:auto 0 0 0;width:100%;height:46%;z-index:1}
.sun{position:absolute;right:12%;top:120px;width:clamp(120px,20vw,260px);aspect-ratio:1;border-radius:50%;background:#fff3cf;box-shadow:0 0 0 22px rgba(255,243,207,.25),0 0 0 54px rgba(255,243,207,.12)}
.finder{position:relative;z-index:3;margin:56px auto -48px;background:var(--surface);color:var(--text);border-radius:22px;padding:22px;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:16px;align-items:end;box-shadow:0 18px 50px rgba(8,48,58,.28)}
.finder label{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:6px}
.finder select,.finder input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);font:inherit}

/* sections */
section{padding:96px 0}
.intro{padding-top:150px}
.head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.head p{max-width:42ch;color:var(--muted)}

.dest{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-auto-rows:240px;gap:18px}
.card{position:relative;border-radius:20px;overflow:hidden;color:#fff;display:flex;align-items:flex-end;padding:22px;text-decoration:none;isolation:isolate}
.card:first-child{grid-row:span 2}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,25,31,.65));z-index:-1}
.card svg{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.card h3{font-size:1.5rem;font-weight:700}
.card small{display:block;opacity:.9;font-size:.95rem;margin-top:2px}

.why{background:var(--sky)}
.why .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.why h3{font-size:1.35rem;font-weight:700;margin-bottom:8px}
.why p{color:var(--muted)}
.why .ico{width:52px;height:52px;border-radius:16px;background:var(--lagoon);display:grid;place-items:center;margin-bottom:18px}
.why .ico svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.pack{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plan{background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:14px}
.plan.best{border-color:var(--lagoon);box-shadow:0 14px 40px rgba(13,92,107,.18)}
.plan h3{font-size:1.4rem;font-weight:700}
.price{font:800 2.3rem var(--display);letter-spacing:-.02em}
.price small{font:500 .95rem var(--body);color:var(--muted)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--muted);flex:1}
.plan li::before{content:"✓";color:var(--lagoon);font-weight:700;margin-right:10px}
.plan .btn{text-align:center;background:var(--lagoon);color:#fff}
.plan .btn:hover{background:var(--deep)}
.tag{align-self:flex-start;background:var(--sun);color:#1c2a10;font-size:.85rem;font-weight:600;padding:4px 12px;border-radius:999px}

.quote{background:var(--deep);color:#fff}
.quote blockquote{margin:0;font:700 clamp(1.6rem,3.6vw,2.6rem)/1.2 var(--display);letter-spacing:-.015em;max-width:28ch}
.quote cite{display:block;margin-top:24px;font-style:normal;color:#b9d8dc}

.cta{text-align:center}
.cta h2{max-width:16ch;margin:0 auto 18px}
.cta p{color:var(--muted);margin-bottom:28px}

footer{background:var(--deep);color:#b9d8dc;padding:48px 0 32px;font-size:.95rem}
footer .row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
footer .logo{color:#fff}
.copy{margin-top:28px;font-size:.85rem;opacity:.8}

/* one page-load moment */
@media (prefers-reduced-motion:no-preference){
  .sun{animation:rise 1.6s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{transform:translateY(90px);opacity:0}to{transform:none;opacity:1}}
}

@media (max-width:900px){
  .nav ul{display:none}
  .finder{grid-template-columns:1fr 1fr}
  .dest{grid-template-columns:1fr 1fr;grid-auto-rows:200px}
  .card:first-child{grid-column:span 2;grid-row:auto}
  .why .grid,.pack{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero{padding-top:120px}
  .finder{grid-template-columns:1fr}
  .dest{grid-template-columns:1fr}
  .card:first-child{grid-column:auto}
  section{padding:70px 0}
  .intro{padding-top:200px}
}