/* TaskTank — a dive from the harbour to the seabed */
:root{
  --ink:#0b2236; --ink-2:#3b5469; --paper:#fbf7ec; --paper-line:#e9e1cc;
  --sky:#bfe6ff;
  --sea-1:#2aa7d6; --sea-2:#167fbd; --sea-3:#0d5794; --sea-4:#0a356a; --abyss:#06203f;
  --foam:#ecf9ff; --mist:rgba(236,249,255,.72); --glass:rgba(255,255,255,.08); --glass-line:rgba(255,255,255,.16);
  --sun:#ffc85c; --sun-2:#ff9f43; --plastic:#4cb8ff; --coral:#ff7a5c; --mangrove:#3fc282; --check:#5cc96b;
  --sand-1:#f1dcae; --sand-2:#dcbf86;
  --display:"Fraunces",ui-serif,Georgia,serif;
  --body:"Figtree",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:22px; --wrap:1160px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.6 var(--body);color:var(--foam);background:var(--abyss);overflow-x:hidden;min-height:100svh;display:flex;flex-direction:column}
body>main{flex:1}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-optical-sizing:auto;font-variation-settings:"SOFT" 100,"WONK" 0;line-height:1.05;margin:0;letter-spacing:-.015em}
h1{font-size:clamp(44px,7.4vw,88px);font-weight:700}
h2{font-size:clamp(34px,5vw,58px);font-weight:650}
h3{font-size:24px;font-weight:650}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(18px,4vw,40px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--sun)}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}
.lead{font-size:clamp(18px,2vw,21px);color:var(--mist);max-width:36ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- nav ---------- */
.nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:calc(env(safe-area-inset-top,0px) + 18px) 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 22px/1 var(--display);color:var(--ink)}
.brand img{width:38px;height:38px;border-radius:11px;box-shadow:0 4px 14px rgba(11,34,54,.25)}
.nav-links{display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:rgba(255,255,255,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 6px 24px rgba(11,34,54,.12)}
.nav-links a{font-weight:650;font-size:15px;color:var(--ink);text-decoration:none;padding:9px 15px;border-radius:999px;transition:background .2s}
.nav-links a:hover{background:rgba(11,34,54,.07)}
.nav-links a.cta{background:var(--ink);color:#fff}
.nav-links a.cta:hover{background:#163a57}
@media (max-width:760px){.nav-links a:not(.cta):not(.keep){display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 16px/1 var(--body);padding:16px 24px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s}
.btn:active{transform:scale(.97)}
.btn-sun{background:linear-gradient(180deg,#ffd77d,var(--sun) 55%,#f4ad3d);color:#3b2400;box-shadow:0 2px 0 #c9851f,0 10px 26px rgba(255,170,60,.38)}
.btn-sun:hover{box-shadow:0 2px 0 #c9851f,0 14px 34px rgba(255,170,60,.5)}
.btn-ink{background:var(--ink);color:#fff}
.btn-glass{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn-glass:hover{background:rgba(255,255,255,.22)}
.store{display:inline-flex;align-items:center;gap:12px;padding:11px 20px 11px 16px;border-radius:14px;background:#000;color:#fff;text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.store svg{width:26px;height:26px;fill:#fff}
.store small{display:block;font-size:11px;opacity:.75;line-height:1.1}
.store b{display:block;font-size:19px;line-height:1.1;font-weight:650;letter-spacing:-.01em}

/* ---------- hero (harbour) ---------- */
.hero{position:relative;background:var(--sky) url(/img/harbour-day.webp) center 62%/cover no-repeat;color:var(--ink);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 80% at 18% 42%,rgba(240,250,255,.82),rgba(240,250,255,.35) 55%,rgba(240,250,255,0) 75%),linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 40%)}
.hero .eyebrow{color:#b5651d}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:56px 150px}
.hero h1{color:var(--ink);text-wrap:balance}
.hero h1 em{font-style:italic;font-weight:600;color:#0d6aa8}
.hero .lead{color:var(--ink-2);margin-top:22px;max-width:30ch;text-shadow:0 1px 12px rgba(255,255,255,.7)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:34px}
.hero-note{margin-top:16px;font-size:14px;font-weight:600;color:var(--ink-2)}
.waterline{position:absolute;left:0;right:0;bottom:-1px;height:120px;z-index:2;pointer-events:none}
.waterline svg{width:100%;height:100%;display:block}
.waterline .w1{animation:wave 9s ease-in-out infinite alternate}
.waterline .w2{animation:wave 13s ease-in-out infinite alternate-reverse}
@keyframes wave{from{transform:translateX(-40px)}to{transform:translateX(40px)}}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;padding-block:36px 140px;gap:48px}
  .hero{background-position:62% 70%}
  .hero::before{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.2) 45%,rgba(255,255,255,0) 60%)}
}

/* phone mock */
.phone{position:relative;justify-self:center;width:min(300px,78vw);aspect-ratio:9/19.3;border-radius:46px;padding:11px;background:linear-gradient(145deg,#2c3a48,#0c141c);box-shadow:0 40px 80px -20px rgba(6,32,63,.6),0 0 0 2px rgba(255,255,255,.12) inset;transform:rotate(3deg)}
.screen{position:relative;height:100%;border-radius:36px;overflow:hidden;background:#0d5794 url(/img/reef.webp) center bottom/cover}
.screen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,32,63,.55),rgba(6,32,63,0) 46%);pointer-events:none}
.island{position:absolute;top:10px;left:50%;translate:-50% 0;width:88px;height:25px;border-radius:20px;background:#000;z-index:4}
.app-head{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:baseline;padding:48px 18px 10px;color:#fff}
.app-head b{font:700 22px/1 var(--display)}
.app-head span{font-size:12px;font-weight:700;opacity:.85}
.coins{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:99px;background:rgba(0,0,0,.28);font-size:12px;font-weight:800;color:#ffe08a}
.coins i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#ffc23d 55%,#d98a12)}
.tasks{position:relative;z-index:3;display:grid;gap:7px;padding:0 12px}
.task{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:15px;background:rgba(255,255,255,.92);color:var(--ink);font-size:13px;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.task em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;color:var(--ink-2);padding:3px 7px;border-radius:8px;background:rgba(11,34,54,.07)}
.task .cat{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:13px}
.chk{position:relative;width:20px;height:20px;border-radius:50%;border:2px solid #b8c6d1;flex:none}
.t1 .chk{animation:check 7s infinite}
.t1 .chk::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;rotate:45deg;opacity:0;animation:tick 7s infinite}
.t1 .ttl{animation:strike 7s infinite;background:linear-gradient(currentColor,currentColor) left 55%/0 2px no-repeat}
@keyframes check{0%,28%{background:transparent;border-color:#b8c6d1}32%,88%{background:var(--check);border-color:var(--check)}100%{background:transparent;border-color:#b8c6d1}}
@keyframes tick{0%,30%{opacity:0}34%,88%{opacity:1}100%{opacity:0}}
@keyframes strike{0%,32%{background-size:0 2px;opacity:1}40%,88%{background-size:100% 2px;opacity:.5}100%{background-size:0 2px;opacity:1}}
.pop{position:absolute;z-index:5;top:118px;right:28px;font:800 15px/1 var(--body);color:#ffe08a;text-shadow:0 2px 6px rgba(0,0,0,.4);opacity:0;animation:pop 7s infinite}
@keyframes pop{0%,32%{opacity:0;transform:translateY(8px) scale(.6)}38%{opacity:1;transform:translateY(-4px) scale(1.15)}55%{opacity:1;transform:translateY(-14px) scale(1)}66%,100%{opacity:0;transform:translateY(-26px)}}
.pellet{position:absolute;z-index:3;left:56%;top:46%;width:7px;height:7px;border-radius:50%;background:#c46a2b;opacity:0;animation:pellet 7s infinite}
@keyframes pellet{0%,36%{opacity:0;transform:translateY(-60px)}40%{opacity:1}62%{opacity:1;transform:translateY(40px)}66%,100%{opacity:0;transform:translateY(44px)}}
.tank-fish{position:absolute;z-index:2;filter:drop-shadow(0 6px 6px rgba(0,0,0,.25))}
.tf1{width:74px;left:8%;top:60%;animation:tf1 7s ease-in-out infinite}
.tf2{width:62px;right:6%;top:74%;animation:tf2 11s ease-in-out infinite}
.tf3{width:44px;left:30%;top:84%;animation:tf3 9s ease-in-out infinite}
@keyframes tf1{0%,30%{transform:translate(0,0) scaleX(-1)}60%{transform:translate(78px,-36px) scaleX(-1)}70%{transform:translate(84px,-30px) scaleX(-1)}100%{transform:translate(0,0) scaleX(-1)}}
@keyframes tf2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,-14px)}}
@keyframes tf3{0%,100%{transform:translate(0,0) scaleX(-1)}50%{transform:translate(30px,6px) scaleX(-1)}}

/* ---------- the ocean ---------- */
.ocean{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--sea-1) 0,var(--sea-2) 900px,var(--sea-3) 1900px,var(--sea-4) 3000px,var(--abyss) 4200px)}
.ocean.short{background:linear-gradient(180deg,var(--sea-1) 0,var(--sea-2) 420px,var(--sea-3) 1000px,var(--sea-4) 1700px,var(--abyss) 2400px)}
.rays{position:absolute;inset:0 0 auto;height:900px;z-index:-1;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(100deg,rgba(255,255,255,0) 0 60px,rgba(255,255,255,.13) 80px,rgba(255,255,255,0) 120px 190px);
  -webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent);animation:rays 18s ease-in-out infinite alternate}
@keyframes rays{from{transform:translateX(-60px) skewX(-4deg)}to{transform:translateX(60px) skewX(4deg)}}
.section{position:relative;padding-block:clamp(56px,7vw,96px)}
.section:first-of-type{padding-top:clamp(70px,9vw,120px)}
.blur{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.section-head{display:grid;gap:18px;margin-bottom:clamp(40px,6vw,64px)}
.section-head h2{text-wrap:balance;max-width:16ch}
.depth{position:absolute;left:clamp(8px,1.6vw,20px);top:clamp(84px,11vw,144px);display:flex;flex-direction:column;align-items:center;gap:8px;font:700 11px/1 var(--body);letter-spacing:.12em;color:rgba(236,249,255,.45);writing-mode:vertical-rl}
.depth::after{content:"";width:1px;height:70px;background:linear-gradient(rgba(236,249,255,.4),transparent)}
@media (max-width:1280px){.depth{display:none}}

/* swimming fish across sections */
@keyframes swim-r{from{transform:translateX(-200px)}to{transform:translateX(calc(100vw + 40px))}}
@keyframes swim-l{from{transform:translateX(calc(100vw + 40px))}to{transform:translateX(-200px)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes scoot{0%,100%{translate:0 0}50%{translate:0 -2px}}
.bubbles{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bubbles i{position:absolute;bottom:-20px;width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.7) 0 2px,transparent 3px);animation:rise linear infinite}
@keyframes rise{from{transform:translate(0,0)}50%{transform:translate(10px,-55vh)}to{transform:translate(-6px,-115vh);opacity:0}}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.step{position:relative;padding:30px 28px 32px;border-radius:var(--r);background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.step .art{height:132px;margin:-6px -6px 22px;border-radius:16px;background:rgba(6,32,63,.28);display:grid;place-items:center;position:relative;overflow:hidden}
.step h3{display:flex;align-items:baseline;gap:12px}
.step h3::before{counter-increment:s;content:counter(s);font:800 14px/1 var(--body);width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--sun);color:#3b2400;translate:0 -3px}
.step p{margin-top:10px;color:var(--mist)}
.say{display:grid;gap:8px;justify-items:center}
.say q{quotes:none;font:600 15px/1.3 var(--body);padding:10px 14px;border-radius:16px 16px 16px 4px;background:#fff;color:var(--ink);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.wave-bars{display:flex;gap:4px;height:26px;align-items:center}
.wave-bars i{width:4px;border-radius:3px;background:var(--sun);animation:bar 1.1s ease-in-out infinite}
.wave-bars i:nth-child(2n){animation-delay:-.3s}.wave-bars i:nth-child(3n){animation-delay:-.6s}.wave-bars i:nth-child(5n){animation-delay:-.8s}
@keyframes bar{0%,100%{height:6px}50%{height:24px}}
.ring{--p:68;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--sun) calc(var(--p)*1%),rgba(255,255,255,.14) 0);animation:ring 6s linear infinite}
.ring b{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:#0b3a66;font:700 20px/1 var(--body)}
@property --p{syntax:"<number>";inherits:true;initial-value:68}
@keyframes ring{from{--p:100}to{--p:0}}
.grow{display:flex;align-items:flex-end;gap:10px}
.grow>:nth-child(1){width:40px}.grow>:nth-child(2){width:66px}.grow>:nth-child(3){width:96px}
.grow>*{transform:scaleX(-1);animation:bob 3s ease-in-out infinite}
.grow>:nth-child(2){animation-delay:-1s}.grow>:nth-child(3){animation-delay:-2s}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

/* features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;grid-template-columns:76px 1fr;gap:18px;align-items:start;padding:24px;border-radius:var(--r);background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-line)}
.feature .pic{width:76px;height:76px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.04))}
.feature .pic img{max-width:62px;max-height:56px;object-fit:contain}
.feature h3{font-size:20px}
.feature p{margin-top:6px;font-size:15.5px;color:var(--mist)}
@media (max-width:980px){.features{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.features{grid-template-columns:1fr}}

/* causes */
.causes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cause{position:relative;display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:#fff;color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.5);transition:transform .25s}
.cause:hover{transform:translateY(-6px)}
.cause .scene{position:relative;height:210px;display:grid;place-items:center;overflow:hidden}
.cause .scene img{position:relative;z-index:1;max-height:150px;width:auto;filter:drop-shadow(0 14px 14px rgba(0,0,0,.22));animation:bob 4s ease-in-out infinite}
.cause .body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.cause p{color:var(--ink-2);font-size:16px}
.cause .rate{margin-top:auto;padding-top:16px;border-top:1px dashed var(--paper-line);display:flex;align-items:baseline;gap:8px;font-weight:700;font-size:15px;color:var(--ink-2)}
.cause .rate b{font:700 34px/1 var(--display);color:var(--c)}
.cause.plastic{--c:#1588d6}.cause.coral{--c:#e5553a}.cause.mangrove{--c:#1f9a5d}
.plastic .scene{background:radial-gradient(120% 90% at 50% 110%,#0f6fb4,#55c3f2 60%,#bdeaff)}
.coral .scene{background:radial-gradient(120% 90% at 50% 110%,#c4433f,#ff9b78 60%,#ffd9c2)}
.mangrove .scene{background:radial-gradient(120% 90% at 50% 110%,#11724a,#57c98a 60%,#c9f2d9)}
.scene .ripple{position:absolute;inset:auto 0 0;height:70px;background:repeating-radial-gradient(ellipse at 50% 120%,rgba(255,255,255,.18) 0 2px,transparent 3px 18px)}
.tag{align-self:flex-start;font:800 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:99px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c)}
@media (max-width:900px){.causes{grid-template-columns:1fr}.cause .scene{height:180px}}

/* calculator */
.calc{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);margin-top:28px;display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:center;padding:clamp(24px,4vw,40px);border-radius:28px;background:rgba(6,32,63,.42);box-shadow:inset 0 0 0 1px var(--glass-line)}
.calc h3{font-size:clamp(24px,3vw,32px)}
.seg{display:inline-flex;gap:4px;padding:4px;margin-top:18px;border-radius:99px;background:rgba(255,255,255,.1)}
.seg button{font:700 14px/1 var(--body);color:var(--foam);background:none;border:0;padding:10px 14px;border-radius:99px;cursor:pointer}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.slider{margin-top:26px}
.slider label{display:flex;justify-content:space-between;font-weight:700;color:var(--mist);font-size:15px}
.slider output{color:#fff}
input[type=range]{width:100%;margin-top:12px;accent-color:var(--sun);height:28px}
.result{text-align:center}
.result .num{font:700 clamp(54px,8vw,92px)/1 var(--display);color:var(--sun);font-variant-numeric:tabular-nums}
.result .unit{margin-top:6px;font-weight:700;font-size:18px}
.dots{display:grid;grid-template-columns:repeat(20,1fr);gap:5px;max-width:380px;margin:22px auto 0}
.dots i{aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.12);transition:background .3s,transform .3s}
.dots i.on{background:var(--dot,var(--mangrove));transform:scale(1.08)}
.fine{margin-top:18px;font-size:13px;color:rgba(236,249,255,.55);max-width:60ch}
@media (max-width:860px){.calc{grid-template-columns:1fr}}

/* reef keeper */
.keeper{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:start}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.plan{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:relative;padding:28px;border-radius:26px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-line)}
.plan.best{background:linear-gradient(170deg,#fff,#eaf6ff);color:var(--ink);box-shadow:0 30px 60px -28px rgba(0,0,0,.6)}
.plan .flag{position:absolute;top:-12px;right:22px;font:800 12px/1 var(--body);padding:7px 11px;border-radius:99px;background:var(--sun);color:#3b2400}
.plan .name{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:13px;opacity:.75}
.plan .price{font:700 52px/1 var(--display);margin-top:12px}
.plan .per{font-size:15px;font-weight:600;opacity:.7}
.plan .give{display:flex;align-items:center;gap:10px;margin-top:18px;padding:12px 14px;border-radius:14px;background:rgba(63,194,130,.16);font-weight:700;font-size:15px}
.plan.best .give{background:#dcf5e7;color:#14653f}
.give .leaf{font-size:20px}
.perks{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(6,32,63,.25);margin-top:26px;display:grid;gap:0;border-radius:22px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--glass-line)}
.perk{display:grid;grid-template-columns:1fr 90px 120px;align-items:center;gap:10px;padding:13px 18px;font-size:15px}
.perk:nth-child(odd){background:rgba(255,255,255,.05)}
.perk.head{font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(236,249,255,.6);background:rgba(6,32,63,.35)!important}
.perk span{text-align:center;color:rgba(236,249,255,.6)}
.perk span+span{color:#fff;font-weight:700}
.yes{color:var(--mangrove)!important;font-size:18px}
@media (max-width:980px){.keeper{grid-template-columns:1fr}}
@media (max-width:560px){.plans{grid-template-columns:1fr}.perk{grid-template-columns:1fr 64px 92px;padding:12px 14px;font-size:14px}}

/* certificate */
.cert{position:relative;padding:34px 30px 28px;border-radius:10px;background:var(--paper);color:var(--ink);text-align:center;box-shadow:0 40px 70px -30px rgba(0,0,0,.65);rotate:-2deg;
  background-image:radial-gradient(circle at 0 0,transparent 14px,var(--paper) 15px),radial-gradient(circle at 100% 0,transparent 14px,var(--paper) 15px),radial-gradient(circle at 0 100%,transparent 14px,var(--paper) 15px),radial-gradient(circle at 100% 100%,transparent 14px,var(--paper) 15px);
  background-size:51% 51%;background-repeat:no-repeat;background-position:0 0,100% 0,0 100%,100% 100%}
.cert::before{content:"";position:absolute;inset:12px;border:1.5px solid #cdbf9a;border-radius:6px;pointer-events:none}
.cert .kicker{font:800 11px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:#9b8456}
.cert .who{font:italic 600 34px/1.1 var(--display);margin-top:14px}
.cert .what{margin-top:10px;font-size:16px;color:var(--ink-2)}
.cert .big{font:700 64px/1 var(--display);color:#1f9a5d;margin-top:8px}
.cert .tree-row{display:flex;justify-content:center;gap:6px;margin-top:10px}
.cert .foot{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:12px;color:#8a7a58;font-weight:700}
.seal{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#2fa66b 0 52%,#1f8a55 53% 60%,#2fa66b 61%);color:#fff;font:800 9px/1.1 var(--body);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 4px 10px rgba(31,138,85,.4)}
.cert-note{margin-top:22px;font-size:13px;color:rgba(236,249,255,.55);text-align:center}

/* medals */
.medals{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,3vw,34px)}
.medal{display:grid;justify-items:center;gap:12px;font-weight:700}
.coin{position:relative;width:clamp(84px,11vw,112px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font:700 clamp(20px,2.4vw,26px)/1 var(--display);color:rgba(0,0,0,.62);background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.75),transparent 34%),var(--m);box-shadow:inset 0 -6px 0 rgba(0,0,0,.15),inset 0 0 0 6px rgba(255,255,255,.25),0 16px 30px -10px rgba(0,0,0,.5)}
.coin::after{content:"";position:absolute;inset:12px;border-radius:50%;border:2px dashed rgba(0,0,0,.14)}
.medal small{display:block;font-size:13px;color:rgba(236,249,255,.6);font-weight:600;text-align:center}
.m-bronze{--m:linear-gradient(160deg,#f3b07a,#b8682f)}
.m-silver{--m:linear-gradient(160deg,#f4f7fa,#9aa8b5)}
.m-gold{--m:linear-gradient(160deg,#ffe58a,#e0a21c)}
.m-coral{--m:linear-gradient(160deg,#ffb2a0,#e5553a)}
.m-whale{--m:linear-gradient(160deg,#7fd3ff,#1d5fa8);color:rgba(255,255,255,.92)!important}

/* closing CTA */
.closer{text-align:center;display:grid;justify-items:center;gap:22px}
.closer h2{max-width:18ch;text-wrap:balance}

/* ---------- seabed footer ---------- */
.seabed{position:relative;color:#4a3a1c;background:linear-gradient(180deg,var(--sand-1),var(--sand-2));padding-block:70px calc(env(safe-area-inset-bottom,0px) + 34px);isolation:isolate}
.seabed::before{content:"";position:absolute;left:0;right:0;top:-69px;height:70px;background:var(--sand-1);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40C140 54 260 30 400 22S640 52 800 48 1080 10 1200 34V70H0Z'/%3E%3C/svg%3E") 0 0/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40C140 54 260 30 400 22S640 52 800 48 1080 10 1200 34V70H0Z'/%3E%3C/svg%3E") 0 0/100% 100%}
.seabed .orn{position:absolute;z-index:1;filter:drop-shadow(0 8px 6px rgba(80,55,10,.25))}
.o-coral{width:150px;left:3%;top:-110px}
.o-fan{width:150px;right:4%;top:-130px}
.o-star{width:62px;left:22%;top:-20px;rotate:-14deg}
.o-shell{width:54px;right:26%;top:-8px}
.o-chest{width:96px;right:15%;top:-70px}
.o-conch{width:58px;left:14%;top:-6px;rotate:8deg}
.foot-grid{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-end}
.foot-brand{display:flex;align-items:center;gap:12px;font:700 24px/1 var(--display);color:#3b2a10}
.foot-brand img{width:44px;height:44px;border-radius:12px}
.foot-tag{margin-top:10px;font-size:15px;max-width:34ch}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px;font-weight:700;font-size:15px}
.foot-links a{text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.copy{margin-top:30px;font-size:13px;opacity:.7}
@media (max-width:700px){.o-star,.o-shell,.o-conch{display:none}.o-coral{width:110px}.o-fan{width:110px}.o-chest{width:74px;right:30%}}

/* ---------- subpages ---------- */
.sub-hero{position:relative;color:#fff;background:#1d4f7a center 58%/cover no-repeat;overflow:hidden;isolation:isolate}
.sub-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,32,63,.15),rgba(6,32,63,.35))}
.sub-hero .brand,.sub-hero .brand{color:#fff}
.sub-hero.light{color:var(--ink)}
.sub-hero.light::before{background:radial-gradient(60% 90% at 20% 50%,rgba(240,250,255,.85),rgba(240,250,255,.3) 60%,rgba(240,250,255,0) 80%),linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 50%)}
.sub-hero.light .eyebrow{color:#a4520f}
.sub-hero.light .brand{color:var(--ink)}
.sub-title{padding-block:60px 150px;display:grid;gap:16px}
.sub-title h1{font-size:clamp(42px,6.4vw,76px);text-wrap:balance;max-width:14ch;text-shadow:0 2px 24px rgba(6,32,63,.35)}
.sub-hero.light .sub-title h1{text-shadow:0 1px 18px rgba(255,255,255,.6)}
.sub-title .lead{color:inherit;opacity:.92;max-width:40ch}
.bg-day{background-image:url(/img/harbour-day.webp)}
.bg-golden{background-image:url(/img/harbour-golden.webp)}
.bg-dusk{background-image:url(/img/harbour-dusk.webp)}
.bg-night{background-image:url(/img/harbour-night.webp)}
@media (max-width:700px){
  .hero{background-image:url(/img/harbour-day-sm.webp)}
  .bg-day{background-image:url(/img/harbour-day-sm.webp)}.bg-golden{background-image:url(/img/harbour-golden-sm.webp)}
  .bg-dusk{background-image:url(/img/harbour-dusk-sm.webp)}.bg-night{background-image:url(/img/harbour-night-sm.webp)}
}

/* notepad (legal + support) */
.notepad{position:relative;max-width:820px;margin:0 auto;padding:64px clamp(22px,5vw,64px) 56px;border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
  background-image:linear-gradient(transparent 31px,var(--paper-line) 32px);background-size:100% 32px;background-position:0 52px}
.notepad::before{content:"";position:absolute;top:-16px;left:8%;right:8%;height:36px;background:radial-gradient(circle at 50% 70%,#c9ced3 0 5px,#8e98a2 6px 7px,transparent 8px) 0 0/48px 36px repeat-x,
  linear-gradient(90deg,transparent 21px,#a6b0ba 21px 27px,transparent 27px) 0 0/48px 26px repeat-x;
  -webkit-mask:none}
.notepad h1{font-size:clamp(34px,5vw,48px)}
.notepad h2{font-size:24px;margin:34px 0 10px;color:#0d4e80}
.notepad p,.notepad li{color:#2a4155;line-height:32px}
.notepad p+p{margin-top:16px}
.notepad ul{padding-left:20px;margin:6px 0}
.notepad a{color:#0d6aa8}
.updated{font-size:14px;font-weight:700;color:#8a7a58;margin-top:10px}
.table-scroll{overflow-x:auto;margin:8px 0}
.notepad table{border-collapse:collapse;width:100%;min-width:480px;background:var(--paper);font-size:15px}
.notepad th,.notepad td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--paper-line);vertical-align:top;line-height:1.45}
.notepad th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8a7a58}
.faq{display:grid;gap:12px;margin-top:10px}
.faq details{border-radius:14px;background:#fff;box-shadow:0 1px 0 var(--paper-line),0 6px 16px -10px rgba(11,34,54,.2)}
.faq summary{cursor:pointer;list-style:none;padding:16px 50px 16px 18px;font-weight:700;position:relative;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;translate:0 -50%;font:600 24px/1 var(--body);color:#0d6aa8;transition:rotate .2s}
.faq details[open] summary::after{rotate:45deg}
.faq details p{padding:0 18px 16px;line-height:1.6}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:14px;padding:18px 20px;border-radius:16px;background:#e6f4fd}
.mail b{font-size:19px;color:#0b4a7a;user-select:all}

/* impact page */
.totals{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.total{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:24px;border-radius:22px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-line)}
.total .n{font:700 clamp(38px,4.6vw,54px)/1 var(--display);font-variant-numeric:tabular-nums}
.total .l{margin-top:8px;font-weight:700;color:var(--mist);font-size:15px}
@media (max-width:860px){.totals{grid-template-columns:1fr 1fr}}
.meter{height:12px;border-radius:99px;background:rgba(11,34,54,.08);overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;width:var(--w,2%);border-radius:inherit;background:var(--c)}
.goal{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--ink-2)}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;align-items:stretch;counter-reset:f}
.hop{position:relative;padding:22px 18px;text-align:center;display:grid;justify-items:center;gap:10px}
.hop .ic{width:74px;height:74px;border-radius:24px;display:grid;place-items:center;font-size:32px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px var(--glass-line)}
.hop .ic img{width:52px}
.hop b{font-size:17px}
.hop span{font-size:14px;color:var(--mist);line-height:1.45}
.hop+.hop::before{content:"";position:absolute;left:-14px;top:57px;width:28px;height:2px;background:repeating-linear-gradient(90deg,var(--sun) 0 6px,transparent 6px 10px)}
@media (max-width:860px){.flow{grid-template-columns:1fr}.hop{grid-template-columns:74px 1fr;text-align:left;justify-items:start;align-items:center;column-gap:16px}.hop .ic{grid-row:span 2}.hop+.hop::before{left:54px;top:-10px;width:2px;height:20px;background:repeating-linear-gradient(180deg,var(--sun) 0 6px,transparent 6px 10px)}}
.reports{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;padding:30px;border-radius:26px;background:rgba(6,32,63,.42);box-shadow:inset 0 0 0 1px var(--glass-line)}
.reports img{width:130px;animation:bob 4s ease-in-out infinite}
.reports p{color:var(--mist);margin-top:8px;max-width:52ch}
@media (max-width:600px){.reports{grid-template-columns:1fr;justify-items:center;text-align:center}}

/* donate page */
.picker{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pick{position:relative;cursor:pointer;display:grid;gap:12px;justify-items:center;text-align:center;padding:22px 18px 20px;border-radius:24px;background:#fff;color:var(--ink);transition:transform .2s,box-shadow .2s;box-shadow:0 0 0 3px transparent}
.pick input{position:absolute;opacity:0}
.pick .scene{width:100%;height:120px;border-radius:16px;display:grid;place-items:center}
.pick .scene img{max-height:96px;width:auto}
.pick b{font:700 21px/1.1 var(--display)}
.pick small{font-size:14px;color:var(--ink-2)}
.pick:has(input:checked){box-shadow:0 0 0 4px var(--sun),0 20px 40px -20px rgba(0,0,0,.5);transform:translateY(-4px)}
.pick:has(input:focus-visible){outline:3px solid #fff;outline-offset:3px}
@media (max-width:760px){.picker{grid-template-columns:1fr}.pick{grid-template-columns:110px 1fr;text-align:left;justify-items:start;align-items:center}.pick .scene{grid-row:span 2;height:90px}.pick .scene img{max-height:70px}}
.amounts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.amounts button{font:700 18px/1 var(--body);padding:14px 22px;border-radius:16px;border:0;cursor:pointer;background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1.5px var(--glass-line)}
.amounts button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.give-panel{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;margin-top:30px;padding:clamp(22px,4vw,38px);border-radius:28px;background:rgba(6,32,63,.42);box-shadow:inset 0 0 0 1px var(--glass-line)}
.give-out{text-align:center}
.give-out .num{font:700 clamp(48px,7vw,76px)/1 var(--display);color:var(--sun)}
.give-out .unit{font-weight:700;font-size:17px;margin-top:6px}
.give-out .medal-line{margin-top:14px;font-size:14px;color:var(--mist)}
.btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.promise{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.promise span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;background:rgba(255,255,255,.08);font-weight:700;font-size:14px}
@media (max-width:860px){.give-panel{grid-template-columns:1fr}}

/* 404 */
.lost{min-height:100svh;display:grid;align-content:space-between}
.lost .sub-title{padding-block:12vh 18vh}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- hero phone tab bar (real app icons) ---------- */
.tabbar{position:absolute;z-index:4;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-around;align-items:center;padding:7px 8px;border-radius:26px;background:rgba(255,255,255,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 6px 16px rgba(0,0,0,.18)}
.tabbar img{width:24px;height:24px;object-fit:contain}
.tabbar b{display:grid;place-items:center;width:40px;height:30px;border-radius:14px;background:rgba(255,255,255,.75)}
.tabbar .menu{font-size:17px;color:#2a3b4a;width:24px;text-align:center}

/* ---------- feature tour ---------- */
.tour{display:grid;gap:clamp(56px,8vw,96px)}
.tour-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.tour-row.flip .shot{order:2}
.tour-text h3{font-size:clamp(28px,3.4vw,40px);margin-top:14px;text-wrap:balance}
.tab-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:99px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px var(--glass-line);font-weight:800;font-size:13px;letter-spacing:.04em}
.tab-pill img{width:24px;height:24px;object-fit:contain}
.how{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px}
.how li{position:relative;padding-left:30px;color:var(--mist);font-size:16.5px;line-height:1.55}
.how li::before{content:"";position:absolute;left:2px;top:6px;width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.8) 0 2px,transparent 3px)}
.how b{color:#fff}
.shot{display:grid;place-items:center}
.shot .phone{transform:none;width:min(290px,72vw)}
.shot .phone .screen{background:#000}
.shot .phone .screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.shot .phone .screen::after{display:none}
.also{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(48px,7vw,80px)}
.also span{padding:10px 16px;border-radius:99px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--glass-line);font-weight:700;font-size:14.5px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media (max-width:860px){.tour-row{grid-template-columns:1fr}.tour-row.flip .shot{order:0}}

/* diagrams: explain how a feature works, drawn with the app's own pieces */
.dia{width:100%;max-width:440px;padding:26px;border-radius:30px;background:rgba(6,32,63,.38);box-shadow:inset 0 0 0 1px var(--glass-line),0 30px 60px -30px rgba(0,0,0,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.chip{display:inline-flex;align-items:center;padding:5px 10px;border-radius:99px;font-size:13px;font-weight:800}
.chip.t{background:#dff1ff;color:#0d5a96}.chip.d{background:#ffe9cf;color:#9a4f06}.chip.a{background:#ffe0e0;color:#a32b2b}.chip.r{background:#e3f8e6;color:#1d7a3a}
.dia-talk .you{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:20px 20px 20px 6px;background:#fff;color:var(--ink);font:600 19px/1.35 var(--display)}
.mic{flex:none;width:30px;height:30px;border-radius:50%;background:#ff5b5b;box-shadow:0 0 0 0 rgba(255,91,91,.6);animation:mic 1.6s infinite;margin-top:2px}
@keyframes mic{70%{box-shadow:0 0 0 12px rgba(255,91,91,0)}100%{box-shadow:0 0 0 0 rgba(255,91,91,0)}}
.dia .arrow{text-align:center;font-size:24px;color:var(--sun);margin:10px 0}
.parsed{display:grid;gap:10px}
.ptask{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.94);color:var(--ink)}
.ptask b{font-size:16px;margin-right:4px}
.lock{position:relative;border-radius:26px;padding:22px 16px 18px;background:linear-gradient(170deg,#25507f,#0d2d52);display:grid;gap:10px}
.lock .clock{text-align:center;font:600 54px/1 var(--body);letter-spacing:-.02em;color:rgba(255,255,255,.92);margin-bottom:6px}
.siri-say{justify-self:end;max-width:80%;padding:9px 13px;border-radius:16px 16px 4px 16px;background:#3b82f6;color:#fff;font-weight:600;font-size:15px}
.siri-say:first-of-type{justify-self:center;background:rgba(255,255,255,.14);border-radius:99px}
.siri-card{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.18);font-weight:600;font-size:15px}
.siri-card.ok{background:rgba(92,201,107,.25)}
.orb{width:22px;height:22px;border-radius:50%;background:conic-gradient(#ff5ec4,#7a6bff,#3fd3ff,#ffc85c,#ff5ec4);animation:spin 3s linear infinite}
@keyframes spin{to{rotate:360deg}}
.dia-today .sec{font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(236,249,255,.6);margin:4px 0 8px}
.dia-today .sec+.tiles+.sec{margin-top:16px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{display:grid;gap:2px;padding:12px;border-radius:18px;background:color-mix(in srgb,var(--c) 85%,#fff);color:var(--ink);min-height:84px;align-content:end}
.tile i{font-style:normal;font-size:20px}
.tile b{font-size:15px;line-height:1.15}
.tile span{font-size:12px;font-weight:700;opacity:.65}
.tile.big{grid-row:span 2;min-height:176px}
.tile.wide{grid-column:span 2}
.tile.done{opacity:.55}
.tile.done b{text-decoration:line-through}
.dia-plan{display:grid;grid-template-columns:52px 1fr;gap:10px}
.hours{display:flex;flex-direction:column;justify-content:space-between;font-size:12px;font-weight:700;color:rgba(236,249,255,.6);padding:4px 0}
.track{position:relative;height:320px;border-radius:18px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,transparent 1px 53px),rgba(255,255,255,.04)}
.blk{position:absolute;left:8px;right:8px;padding:8px 12px;border-radius:12px;background:var(--c);color:var(--ink);font-weight:800;font-size:14px;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.blk.drag{animation:dragblk 5s ease-in-out infinite}
@keyframes dragblk{0%,20%{transform:none}45%,75%{transform:translate(6px,-62px) rotate(-1.5deg) scale(1.03);box-shadow:0 14px 26px rgba(0,0,0,.35)}100%{transform:none}}
.hand{position:absolute;right:26px;top:68%;font-size:28px;animation:hand 5s ease-in-out infinite}
@keyframes hand{0%,20%{transform:none}45%,75%{transform:translateY(-62px)}100%{transform:none}}
.pool{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;border:1.5px dashed rgba(255,255,255,.3)}
.pool span{font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(236,249,255,.6)}
.blk.mini{position:static}
.la{padding:14px;border-radius:22px;background:rgba(20,24,30,.78);display:grid;gap:10px}
.la-top{display:flex;align-items:center;gap:10px}
.la-fish{width:34px;height:34px;border-radius:10px;background:#1d7fb8;display:grid;place-items:center}
.la-fish>*{width:28px;transform:scaleX(-1)}
.la-top b{font-size:16px}
.la-time{margin-left:auto;font:700 26px/1 var(--body);color:var(--sun);font-variant-numeric:tabular-nums}
.la-bar{height:6px;border-radius:9px;background:rgba(255,255,255,.15);overflow:hidden}
.la-bar i{display:block;height:100%;width:40%;background:var(--sun);animation:labar 12s linear infinite}
@keyframes labar{from{width:72%}to{width:8%}}
.la-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.la-btns span{text-align:center;padding:9px 6px;border-radius:12px;background:rgba(255,255,255,.14);font-weight:700;font-size:13px}
.la-btns span:nth-child(2){background:#2f9e5b}
.shield{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.1)}
.shield span{grid-row:span 2;font-size:26px}
.shield small{color:rgba(236,249,255,.65)}
.tankwin{position:relative;height:260px;border-radius:22px;overflow:hidden;background:url(/img/reef.webp) center 75%/cover;box-shadow:inset 0 0 0 4px rgba(255,255,255,.18)}
.tw-f{position:absolute}
.tw-f.a{width:90px;left:12%;top:16%;animation:tf2 9s ease-in-out infinite}
.tw-f.b{width:96px;right:10%;top:36%;animation:tf2 12s ease-in-out infinite reverse}
.tw-f.c{width:40px;left:44%;top:24%;transform:scaleX(-1);animation:tf3 7s ease-in-out infinite}
.tw-f.d{width:36px;left:52%;top:30%;transform:scaleX(-1);animation:tf3 8s ease-in-out infinite}
.tw-f.e{width:64px;left:30%;bottom:8%}
.pel{position:absolute;top:-10px;width:8px;height:8px;border-radius:50%;background:#b8652a;animation:fall 4s linear infinite}
.pel.p1{left:40%}.pel.p2{left:47%;animation-delay:-1.6s}
@keyframes fall{to{transform:translateY(200px)}}
.care{display:flex;justify-content:center;gap:10px;margin-top:14px}
.care span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:99px;background:rgba(255,255,255,.12);font-weight:800;font-size:14px}
.care img{width:30px;height:30px;object-fit:contain}
.pier-scene{position:relative;height:260px;border-radius:22px;overflow:hidden;background:url(/img/harbour-golden-sm.webp) center 60%/cover}
.pier-scene .line{position:absolute;left:62%;top:0;width:2px;height:58%;background:rgba(255,255,255,.85);transform-origin:top;animation:tug 2.4s ease-in-out infinite}
@keyframes tug{0%,100%{rotate:0deg}50%{rotate:4deg}}
.pier-scene .hook{position:absolute;left:calc(62% - 46px);top:54%;width:90px;rotate:-70deg;animation:tug 2.4s ease-in-out infinite;transform-origin:50% 0}
.reel{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:rgba(6,32,63,.7);font-weight:800;font-size:14px}
.reel i{flex:1;height:10px;border-radius:9px;background:linear-gradient(90deg,var(--mangrove) 0 30%,var(--sun) 30% 70%,var(--coral) 70%);position:relative}
.reel i::after{content:"";position:absolute;top:-4px;width:6px;height:18px;border-radius:3px;background:#fff;left:20%;animation:needle 2.4s ease-in-out infinite}
@keyframes needle{50%{left:56%}}
.stalls{display:flex;justify-content:center;gap:10px;margin-top:14px}
.stalls span{padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.12);font-weight:800;font-size:14px}
.dia-breed .pair{display:flex;justify-content:center;align-items:center;gap:6px}
.dia-breed .pair>:not(.heart){width:110px}
.heart{font-size:30px;color:#ff6b8a;animation:beat 1.2s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.25)}}
.dia-breed .fry{display:flex;justify-content:center;gap:14px;margin-top:6px}
.dia-breed .fry>*{width:36px;animation:bob 2.4s ease-in-out infinite}
.dia-breed .fry>:nth-child(2){animation-delay:-.8s}.dia-breed .fry>:nth-child(3){animation-delay:-1.6s}
.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;height:120px;margin-top:20px;padding:12px;border-radius:18px;background:rgba(255,255,255,.06)}
.bars div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.bars i{width:100%;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,var(--sun),#f4a13d)}
.bars span{font-size:11px;font-weight:800;color:rgba(236,249,255,.6)}
.ocean h2,.ocean h3,.ocean .lead,.ocean .how li,.ocean .eyebrow{text-shadow:0 2px 14px rgba(6,32,63,.55)}
.ocean .cause h3,.ocean .plan.best *,.ocean .notepad *,.ocean .cert *{text-shadow:none}

/* canvas fish (swim.js) */
.fishtank{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
.ocean{cursor:default}
canvas.inplace{display:block;height:auto}
.seabed canvas.crawlers{position:absolute;left:0;top:-70px;width:100%;height:150px;z-index:2;pointer-events:none}