:root{--sea:#00a6c0;--deep:#0b3d6b;--pink:#ff3d9a;--sun:#ffc933;--lime:#7ed957;--grape:#7b4dff;--orange:#ff8a3d;--ink:#17324d;--bg:#fffdf7}
*{box-sizing:border-box}
body{margin:0;font:18px/1.7 "Trebuchet MS","Avenir Next",system-ui,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--grape);font-weight:600}
header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:4px solid transparent;border-image:linear-gradient(90deg,var(--sea),var(--lime),var(--sun),var(--orange),var(--pink),var(--grape)) 1;padding:10px 20px}
header .in{max-width:1000px;margin:auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;align-items:center}
header .logo{font:900 26px/1 "Trebuchet MS",system-ui,sans-serif;margin:0;color:var(--deep);letter-spacing:-.5px}
header .logo span{background:linear-gradient(90deg,var(--pink),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
header nav a{display:inline-block;margin-left:6px;padding:7px 14px;border-radius:99px;background:#fff3c4;color:var(--deep);text-decoration:none;font:800 14px system-ui;transition:transform .15s}
header nav a:nth-child(2){background:#d6f5ff}header nav a:nth-child(3){background:#ffe0f0}
header nav a:hover{transform:translateY(-2px) rotate(-2deg)}
main{max-width:800px;margin:auto;padding:28px 20px 60px}
.wide{max-width:1000px}
h1{font:900 40px/1.1 "Trebuchet MS",system-ui,sans-serif;color:var(--deep);letter-spacing:-1px}
main>h1:first-child{background:linear-gradient(120deg,#d6f5ff,#fff3c4 55%,#ffe0f0);border-radius:24px;padding:26px 24px;box-shadow:0 6px 0 var(--sea);margin-top:0}
h2{font:900 26px "Trebuchet MS",system-ui,sans-serif;margin-top:1.8em;color:var(--deep)}
h2::before{content:"";display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--pink);margin-right:10px;box-shadow:18px 0 0 -2px var(--sun)}
h2:nth-of-type(3n+2)::before{background:var(--sea)}h2:nth-of-type(3n)::before{background:var(--lime)}
h2{padding-left:0}h3{font:800 20px system-ui}
ul,ol{padding-left:24px}li{margin:6px 0}li::marker{color:var(--pink)}
.hero{position:relative;overflow:hidden;color:#fff;text-align:center;padding:70px 20px 110px;background:linear-gradient(180deg,#00c2d9 0%,#3ad1c0 45%,#ffd666 100%)}
.hero .in{max-width:800px;margin:auto;position:relative;z-index:2}
.hero h1{color:#fff;font-size:clamp(40px,9vw,76px);margin:0 0 12px;text-shadow:0 4px 0 rgba(11,61,107,.35);background:none;box-shadow:none;padding:0}
.hero p{font:700 clamp(18px,3.4vw,24px)/1.4 "Trebuchet MS",system-ui,sans-serif;margin:0 auto 22px;max-width:620px;text-shadow:0 2px 0 rgba(11,61,107,.3)}
.btn{display:inline-block;background:var(--pink);color:#fff;text-decoration:none;font:900 18px system-ui;padding:14px 28px;border-radius:99px;box-shadow:0 5px 0 #c01e72;transition:transform .15s}
.btn:hover{transform:translateY(-3px) rotate(-1.5deg)}
.float{position:absolute;font-size:clamp(34px,7vw,64px);z-index:1;animation:bob 4s ease-in-out infinite;filter:drop-shadow(0 4px 0 rgba(11,61,107,.2))}
.f1{left:5%;top:14%}.f2{right:6%;top:10%;animation-delay:.7s}.f3{left:12%;bottom:26%;animation-delay:1.3s}.f4{right:12%;bottom:24%;animation-delay:2s}.f5{left:44%;top:3%;animation-delay:2.6s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(6deg)}}
.wave{position:absolute;left:0;right:0;bottom:-1px;height:60px;z-index:2;background:var(--bg);-webkit-mask:radial-gradient(34px 22px at 50% 100%,#0000 98%,#000) 0 0/68px 100%;mask:radial-gradient(34px 22px at 50% 100%,#0000 98%,#000) 0 0/68px 100%;transform:scaleY(-1)}
.sun{position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#fff6b0,var(--sun) 60%,transparent 62%);opacity:.9}
.sec{max-width:1000px;margin:auto;padding:10px 20px 20px}
.sec h2{text-align:center;font-size:32px;margin-top:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:22px 0}
.card{display:block;position:relative;background:#fff;border-radius:24px;padding:22px 22px 24px;text-decoration:none;color:var(--ink);border:3px solid var(--c,var(--sea));box-shadow:0 7px 0 var(--c,var(--sea));transition:transform .18s,box-shadow .18s;font-weight:400}
.card:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:0 12px 0 var(--c,var(--sea))}
.card .em{display:flex;width:62px;height:62px;border-radius:50%;align-items:center;justify-content:center;font-size:34px;background:var(--bgc,#d6f5ff);margin-bottom:10px}
.card b{display:block;font:900 21px/1.25 "Trebuchet MS",system-ui,sans-serif;color:var(--deep);margin-bottom:6px}
.card span.d{font-size:16px;line-height:1.5}
.card:nth-child(1){--c:#00a6c0;--bgc:#d6f5ff}.card:nth-child(2){--c:#ff3d9a;--bgc:#ffe0f0}.card:nth-child(3){--c:#ffb300;--bgc:#fff3c4}
.card:nth-child(4){--c:#7b4dff;--bgc:#e8e0ff}.card:nth-child(5){--c:#ff8a3d;--bgc:#ffe6d2}.card:nth-child(6){--c:#4cc22a;--bgc:#e1f8d4}
.strip{background:var(--deep);color:#fff;text-align:center;font:900 20px system-ui;padding:14px 10px;margin:30px 0;overflow:hidden;white-space:nowrap;letter-spacing:1px}
.note{background:#fff;border:3px dashed var(--sea);padding:12px 16px;border-radius:16px;font:15px/1.5 system-ui}
.disc{font:14px/1.5 system-ui;color:#4a6272;background:#f1f9fb;border-radius:14px;margin-top:40px;padding:14px 16px}
footer{background:linear-gradient(180deg,#0b3d6b,#072a4d);color:#cfe8f5;padding:30px 20px;font:14px system-ui;text-align:center;border-top:6px solid var(--sun)}footer a{color:#fff}
footer .fe{display:block;font-size:30px;margin-bottom:6px;letter-spacing:8px}
table{border-collapse:collapse;width:100%;font:16px system-ui;border-radius:12px;overflow:hidden}td,th{border-bottom:1px solid #d9eaf0;padding:10px;text-align:left}th{background:#d6f5ff}
@media(max-width:560px){body{font-size:17px}h1{font-size:32px}header .in{justify-content:center}header nav a{margin:2px}.hero{padding:50px 16px 90px}}
@media(prefers-reduced-motion:reduce){.float{animation:none}}
@media(max-width:700px){.f5{display:none}.f1{left:2%;top:auto;bottom:70px}.f2{right:3%;top:auto;bottom:70px}.f3,.f4{display:none}.float{font-size:34px}.sun{width:140px;height:140px}}