:root{
  --sand:#fff6e7;
  --cream:#fffaf1;
  --teal:#087c7c;
  --deep:#063d47;
  --coral:#f36f45;
  --sun:#ffbf3f;
  --leaf:#2f7d32;
  --ink:#1b2a2f;
  --muted:#61777c;
  --card:#ffffff;
  --shadow:0 14px 40px rgba(6,61,71,.14);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(255,191,63,.25), transparent 28rem),
    radial-gradient(circle at 90% 10%, rgba(8,124,124,.18), transparent 26rem),
    var(--sand);
  line-height:1.55;
}
a{color:inherit}
.container{width:min(1120px, calc(100% - 36px)); margin:auto}
.topbar{
  background:var(--deep);
  color:white;
  font-size:.92rem;
  text-align:center;
  padding:.45rem 1rem;
}
.nav{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(14px);
  background:rgba(255,250,241,.88);
  border-bottom:1px solid rgba(6,61,71,.12);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0}
.logo{display:flex; align-items:center; gap:.65rem; text-decoration:none; font-weight:900; letter-spacing:.2px}
.logo-mark{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal),var(--coral));
  color:white;font-size:1.3rem; box-shadow:var(--shadow)
}
.logo small{display:block; font-weight:700; color:var(--muted); margin-top:-3px}
.links{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; justify-content:flex-end}
.links a{
  text-decoration:none; font-weight:800; color:var(--deep);
  padding:.45rem .65rem; border-radius:999px;
}
.links a:hover{background:rgba(8,124,124,.1)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:0; border-radius:999px; padding:.85rem 1.15rem;
  background:var(--coral); color:white; text-decoration:none; font-weight:900;
  box-shadow:0 10px 24px rgba(243,111,69,.25);
}
.btn.secondary{background:var(--teal); box-shadow:0 10px 24px rgba(8,124,124,.22)}
.btn.light{background:white;color:var(--deep)}
.hero{padding:5rem 0 3rem}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:2rem; align-items:center}
.kicker{
  display:inline-flex; gap:.45rem; align-items:center;
  background:rgba(255,255,255,.78); border:1px solid rgba(6,61,71,.12);
  padding:.45rem .75rem; border-radius:999px; color:var(--deep); font-weight:900;
}
h1{font-size:clamp(2.35rem, 6vw, 5rem); line-height:.98; margin:.9rem 0 1rem; letter-spacing:-2px; color:var(--deep)}
h2{font-size:clamp(1.8rem, 3.5vw, 3rem); line-height:1.05; margin:0 0 1rem; color:var(--deep)}
h3{font-size:1.25rem;margin:.5rem 0;color:var(--deep)}
.lead{font-size:1.2rem;color:#38565d;max-width:68ch}
.hero-card{
  background:linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.72));
  border:1px solid rgba(6,61,71,.12); border-radius:32px;
  padding:1.2rem; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.postcard{
  min-height:430px; border-radius:26px; padding:1.5rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.45)),
    linear-gradient(135deg,#0f91a1,#ffd06c 50%,#f36f45);
  display:flex; flex-direction:column; justify-content:space-between;
  color:white; text-shadow:0 2px 12px rgba(0,0,0,.2);
}
.postcard .stamp{
  align-self:flex-end; width:96px;height:96px;border:4px dashed rgba(255,255,255,.8);
  border-radius:18px; display:grid; place-items:center; font-size:2.2rem; transform:rotate(7deg)
}
.postcard strong{font-size:2.1rem;line-height:1}
.wave{
  height:38px; background:
   radial-gradient(28px at 50% 0, transparent 94%, rgba(8,124,124,.18) 96%) 0 0/56px 100%;
}
.section{padding:3.5rem 0}
.section.alt{background:rgba(255,255,255,.48)}
.center{text-align:center}
.grid{display:grid; gap:1.1rem}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}
.card{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(6,61,71,.1);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:0 8px 24px rgba(6,61,71,.08);
}
.card .emoji{font-size:2.1rem}
.destination{
  min-height:260px; display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; position:relative;
}
.destination:after{
  content:""; position:absolute; inset:auto -40px -70px auto;
  width:150px;height:150px;border-radius:50%; background:rgba(255,191,63,.18);
}
.destination a{position:relative; z-index:2; margin-top:1rem; width:max-content}
.product{
  display:flex; flex-direction:column; gap:.55rem; min-height:220px
}
.product-icon{
  height:94px; border-radius:18px; background:linear-gradient(135deg, rgba(8,124,124,.16), rgba(243,111,69,.16));
  display:grid; place-items:center; font-size:2.7rem;
}
.badge{display:inline-block; width:max-content; padding:.28rem .62rem; border-radius:999px; background:rgba(47,125,50,.12); color:var(--leaf); font-weight:900; font-size:.82rem}
.notice{
  background:var(--deep); color:white; border-radius:30px; padding:2rem;
  display:grid; grid-template-columns:1.3fr .7fr; gap:1rem; align-items:center;
}
.notice h2{color:white}
.footer{background:#052f37;color:white;padding:2.2rem 0;margin-top:2rem}
.footer a{color:white}
.page-hero{padding:4rem 0 2rem; background:linear-gradient(135deg, rgba(8,124,124,.14), rgba(255,191,63,.18))}
.breadcrumb{font-weight:900;color:var(--teal);text-decoration:none}
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
.mockup{
  border-radius:28px; min-height:320px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--teal), var(--sun), var(--coral));
  box-shadow:var(--shadow); color:white; font-size:5rem;
}
.checklist{padding-left:1.1rem}
.checklist li{margin:.45rem 0}
.socials{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
@media(max-width:850px){
  .hero-grid,.split,.notice{grid-template-columns:1fr}
  .grid.three,.grid.four{grid-template-columns:1fr 1fr}
  .links{font-size:.92rem; gap:.25rem}
  .hero{padding-top:3rem}
}
@media(max-width:560px){
  .grid.three,.grid.four{grid-template-columns:1fr}
  .nav-inner{align-items:flex-start; flex-direction:column}
  .links{justify-content:flex-start}
  h1{letter-spacing:-1px}
}