:root{--navy:#0b2545;--navy2:#13315c;--turq:#00a6a6;--turq-d:#007a7a;--coral:#ff6b5b;--coral-d:#d9412f;--sun:#ffd23f;--foam:#f4fbfb;--ink:#1a2a3a;--muted:#4c5f70}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.65 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--foam)}
h1,h2,h3,.sec{font-family:Fraunces,Georgia,serif;line-height:1.15;color:var(--navy)}
a{color:var(--turq-d)}img{max-width:100%;display:block}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.5rem 1rem;border-radius:8px}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.top{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:space-between;align-items:center;padding:.6rem clamp(1rem,4vw,2.5rem);background:rgba(11,37,69,.92);backdrop-filter:blur(10px)}
.top nav a{color:#fff;text-decoration:none;margin-left:1.1rem;font-weight:600;font-size:.95rem;opacity:.92}.top nav a:hover{color:var(--sun)}
.navcta{background:var(--coral-d);padding:.4rem .9rem;border-radius:99px;opacity:1!important}.navcta:hover{background:var(--coral);color:#fff!important}
.logo{display:flex;align-items:center;gap:.55rem;color:#fff;text-decoration:none;font-family:Pacifico,cursive;font-size:1.45rem;line-height:1}
.logo b{font-weight:400;color:var(--sun)}.mark{width:38px;height:38px;transition:transform .5s}.logo:hover .mark{transform:rotate(-14deg)}
main{max-width:1120px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem) 3rem}
.hero{position:relative;margin:0 calc(50% - 50vw);color:#fff;background:linear-gradient(120deg,rgba(11,37,69,.88) 0%,rgba(11,37,69,.55) 45%,rgba(0,166,166,.15) 100%),var(--img,linear-gradient(135deg,var(--turq),var(--navy2))) center/cover;padding:clamp(4rem,10vw,7.5rem) 0 clamp(5rem,10vw,8rem)}
.hero.slim{background:linear-gradient(120deg,var(--navy) 0%,var(--navy2) 45%,var(--turq-d) 100%);padding:3rem 0 5rem}
.hin{max-width:1120px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem);position:relative;z-index:1}
.hero h1{color:#fff;font-size:clamp(2.3rem,6vw,4.4rem);font-weight:800;margin:.2rem 0 .8rem;max-width:15ch;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero.slim h1{font-size:clamp(2rem,5vw,3.2rem);max-width:none}.hero h1 small{display:block;font:600 1.05rem Inter,sans-serif;color:var(--sun);margin-top:.4rem;letter-spacing:.02em}
.kicker{display:inline-block;margin:0;font-family:Pacifico,cursive;color:var(--sun);font-size:1.3rem}
.lede{font-size:clamp(1.05rem,2vw,1.25rem);max-width:40rem;opacity:.95}
.ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.wave{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(40px,7vw,100px)}
.btn{display:inline-block;background:var(--coral-d);color:#fff;border:0;border-radius:99px;padding:.8rem 1.5rem;font:700 1rem Inter,sans-serif;cursor:pointer;text-decoration:none;box-shadow:0 6px 20px rgba(217,65,47,.35);transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(217,65,47,.45);background:#c5321f}
.btn.ghost{background:rgba(255,255,255,.12);border:2px solid #fff;box-shadow:none;backdrop-filter:blur(4px)}.btn.ghost:hover{background:#fff;color:var(--navy)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:-2.5rem 0 2.5rem;position:relative;z-index:2;background:#fff;border-radius:20px;padding:1.4rem;box-shadow:0 18px 40px rgba(11,37,69,.12)}
.stats div{text-align:center;border-right:1px solid #e3eef0}.stats div:last-child{border:0}
.stats b{display:block;font:800 clamp(1.5rem,3.5vw,2.3rem) Fraunces,serif;color:var(--turq-d)}.stats div:nth-child(2) b{color:var(--coral-d)}.stats div:nth-child(3) b{color:var(--navy2)}
.stats span{font-size:.88rem;color:var(--muted);font-weight:600}
.sec{font-size:clamp(1.7rem,3.5vw,2.4rem);margin:3rem 0 1.2rem;position:relative}
.sec::after{content:"";display:block;width:64px;height:6px;border-radius:6px;margin-top:.5rem;background:linear-gradient(90deg,var(--turq),var(--sun),var(--coral))}
.how ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;counter-reset:s}
.how li{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 4px 18px rgba(11,37,69,.07);position:relative;counter-increment:s}
.how li::before{content:counter(s);position:absolute;top:1rem;right:1.2rem;font:800 2.6rem Fraunces,serif;color:#e1f4f4}
.how h3{margin:.6rem 0 .3rem;font-size:1.3rem}.how p{margin:0;color:var(--muted)}
.em{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:14px;background:linear-gradient(135deg,#fff4c2,#ffe0db);font-size:1.35rem;margin-right:.6rem;vertical-align:middle}
.how .em{margin:0;width:3.2rem;height:3.2rem;font-size:1.6rem}
.lg{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.lg div{background:#fff;border-radius:18px;padding:1.2rem 1.4rem}.lg p{margin:.6rem 0 0;color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;gap:.7rem;margin:1rem 0 1.4rem;align-items:center}
#q{flex:1;min-width:220px;padding:.8rem 1.1rem;border:2px solid #cfe7e8;border-radius:99px;font:1rem Inter,sans-serif;background:#fff}#q:focus{border-color:var(--turq);outline:none;box-shadow:0 0 0 4px #00a6a633}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}.chip{border:2px solid var(--turq-d);background:#fff;color:var(--turq-d);border-radius:99px;padding:.45rem 1rem;cursor:pointer;font:700 .92rem Inter,sans-serif;transition:.2s}
.chip:hover{background:#e3f6f6}.chip.on{background:var(--turq-d);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.4rem}
.card{background:#fff;border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 4px 18px rgba(11,37,69,.08);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(11,37,69,.18)}.card[hidden]{display:none}
.ph{aspect-ratio:16/10;overflow:hidden;background:#cfe7e8}.ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.card:hover .ph img{transform:scale(1.07)}
.cb{padding:1rem 1.2rem 1.2rem}.card h3{margin:0;font-size:1.35rem}.card .muted{margin:.15rem 0 .7rem}
.muted{color:var(--muted);font-size:.9rem}
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .8rem .3rem .55rem;border-radius:99px;font:700 .82rem Inter,sans-serif;background:#ddd;color:var(--ink)}
.badge svg{width:1.05em;height:1.05em}
.easy{background:#c9f2df;color:#0b5a34}.mod{background:#ffe48a;color:#5f4300}.tour{background:#ffd9d3;color:#8f1d10}
.port-hero{padding-top:clamp(3rem,8vw,6rem);min-height:clamp(380px,48vw,600px);display:flex;flex-direction:column;justify-content:flex-end}.port-hero .hin{width:100%}.crumbs{margin:0;font-weight:600}.crumbs a{color:var(--sun)}
.chk{font-size:.9rem;opacity:.9;margin-left:.4rem}.pcred{position:absolute;right:1rem;bottom:clamp(44px,7.5vw,104px);margin:0;font-size:.72rem;opacity:.85;z-index:1}.pcred a{color:#fff}
.port{max-width:1000px;margin:0 auto}.two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.box{background:#fff;border-radius:20px;padding:.8rem 1.6rem 1rem;margin:1.2rem 0;box-shadow:0 4px 18px rgba(11,37,69,.06)}
.box h2{font-size:1.4rem;display:flex;align-items:center}.box li{margin:.3rem 0}.box ul{padding-left:1.2rem}
.rate-easy{border-left:8px solid #2bb673}.rate-mod{border-left:8px solid #f5b700}.rate-tour{border-left:8px solid var(--coral)}
.back{background:linear-gradient(135deg,#fff7d6,#ffe7e2);border:2px solid #ffc9bf}
.slot{border:2px dashed #8fc9cb;background:#fffbea;padding:1rem 1.4rem;border-radius:18px;margin:1.4rem 0}
.addrow{text-align:center;margin:2rem 0}.sources a{word-break:break-all;font-size:.9rem}
.narrow{max-width:780px;margin:1.5rem auto}
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem;background:#fff;padding:1.2rem;border-radius:18px;box-shadow:0 4px 18px rgba(11,37,69,.06)}
.picker label{padding:.45rem .7rem;border-radius:10px;cursor:pointer}.picker label:hover{background:#e3f6f6}.picker input{accent-color:var(--turq-d);width:1.05rem;height:1.05rem}
.planport{background:#fff;border-radius:18px;padding:.6rem 1.4rem;margin:1rem 0;border-top:6px solid var(--turq)}
.news{display:flex;flex-wrap:wrap;gap:.6rem;padding:1rem 0}.news input{padding:.8rem 1.1rem;border-radius:99px;border:2px solid #cfe7e8;min-width:240px;flex:1;font:1rem Inter,sans-serif}.news p{flex-basis:100%}
.credits{list-style:none;padding:0}.credits li{display:flex;gap:1rem;align-items:center;padding:1rem;font-size:.92rem}.credits img{width:120px;height:75px;object-fit:cover;border-radius:10px;flex:none}.credits a{word-break:break-word}
footer{position:relative;background:var(--navy);color:#cfe0ea;margin-top:4rem;font-size:.9rem}footer .wave{top:-1px;bottom:auto;transform:rotate(180deg);height:60px}
.fin{max-width:1120px;margin:0 auto;padding:5rem 1.5rem 2.5rem;text-align:center}.fin .logo{justify-content:center;margin-bottom:.8rem}footer a{color:#9fe3e3}
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}.js .reveal.in{opacity:1;transform:none}
@media (max-width:820px){.how ol,.lg,.two{grid-template-columns:1fr}.two{gap:0}.stats{grid-template-columns:1fr 1fr}.stats div:nth-child(2){border:0}}
@media (max-width:560px){.top{justify-content:center}.top nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem .9rem}.top nav a{margin:0}.box{padding:.6rem 1.1rem .9rem}.pcred{position:static;padding:0 1rem;margin-top:.5rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.top,footer,.picker,.btn,.slot,.hero{display:none!important}body{background:#fff}.planport{break-inside:avoid;border:1px solid #ccc}}
.logo span{white-space:nowrap}.logo i{font-style:normal;font-size:.8em;opacity:.9}
@media(max-width:560px){.top .logo{font-size:1.15rem;gap:.4rem}.top .mark{width:30px;height:30px}}
@media(max-width:380px){.top .logo{font-size:1rem}}