:root{--gold:#f3c45a;--gold2:#ffe39a;--sea:#0b1f3a;--deep:#050b16;--glow:#3db8ff;--text:#eaf3ff;--muted:#9fb6d3;--card:rgba(9,22,44,.78);--line:rgba(120,190,255,.25)}
*{box-sizing:border-box}html{background:var(--deep)}
body{margin:0;min-height:100vh;color:var(--text);font:16px/1.55 "Segoe UI",system-ui,sans-serif;background:radial-gradient(1200px 600px at 50% -10%,#14467a 0%,transparent 60%),linear-gradient(180deg,#071428 0%,#050b16 70%)}
.hero{position:relative;min-height:340px;background:url(/buy-banner.webp) center/cover no-repeat;display:flex;align-items:flex-end;justify-content:center;padding:0 16px}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,11,22,.1) 40%,var(--deep) 100%)}
.hero img{position:relative;z-index:1;width:150px;height:150px;border-radius:50%;margin-bottom:-60px;box-shadow:0 0 0 3px rgba(61,184,255,.6),0 0 45px rgba(61,184,255,.55)}
main{max-width:760px;margin:0 auto;padding:80px 16px 40px}
h1{font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,serif;font-weight:800;text-align:center;font-size:clamp(30px,6vw,48px);margin:0;background:linear-gradient(180deg,#fff7d6,var(--gold) 55%,#b9822a);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 30px rgba(243,196,90,.25)}
.tag{text-align:center;color:var(--muted);margin:6px 0 22px;letter-spacing:.04em}
.notice{border:1px solid rgba(243,196,90,.45);background:rgba(60,40,8,.55);color:var(--gold2);padding:12px 16px;border-radius:12px;font-size:14px;text-align:center}
.card{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;backdrop-filter:blur(8px);box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.step{color:var(--glow);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
h2{font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,serif;font-size:21px;margin:12px 0 14px;color:var(--gold2)}
.packages{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.packages button{cursor:pointer;border-radius:16px;padding:18px 8px;background:linear-gradient(180deg,#12345e,#0b1f3a);border:1px solid var(--line);color:var(--text);font:800 30px "Cinzel","Trajan Pro","Palatino Linotype",Georgia,serif;transition:.15s}
.packages button small{display:block;font:600 13px "Segoe UI",system-ui,sans-serif;color:var(--muted);margin-top:4px}
.packages button:hover{border-color:var(--glow);transform:translateY(-2px)}
.packages .selected{border:2px solid var(--gold);background:linear-gradient(180deg,#4a3410,#241806);box-shadow:0 0 24px rgba(243,196,90,.35)}
.packages .selected small{color:var(--gold2)}
label{display:block;color:var(--muted);font-size:14px}
input[type=email]{display:block;width:100%;margin-top:8px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#06122a;color:var(--text);font:inherit;outline:none}
input[type=email]:focus{border-color:var(--glow);box-shadow:0 0 0 3px rgba(61,184,255,.2)}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px}.consent input{margin-top:4px;accent-color:var(--gold)}
.pay{width:100%;margin-top:22px;padding:16px;border:0;border-radius:14px;cursor:pointer;font:800 17px "Cinzel","Trajan Pro","Palatino Linotype",Georgia,serif;letter-spacing:.05em;color:#2a1a02;background:linear-gradient(180deg,#ffe8a3,var(--gold) 50%,#c58a22);box-shadow:0 8px 30px rgba(243,196,90,.35)}
.pay:disabled{opacity:.45;cursor:default;box-shadow:none}
.account{background:#06122a;border:1px solid var(--line);border-radius:14px;padding:16px}.account span{display:block;color:var(--muted);font-size:13px}.account strong{display:block;margin:6px 0;overflow-wrap:anywhere;font-size:18px}
.success{color:#9dffb0!important}.error{color:#ffb3b3}
#status{min-height:24px;margin:14px 0 0;text-align:center}
.pirate{display:grid;grid-template-columns:1fr 1.1fr;gap:20px;align-items:center;margin-top:34px}
.pirate img{width:100%;border-radius:18px;border:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.5)}
.pirate h3{font-family:"Cinzel","Trajan Pro","Palatino Linotype",Georgia,serif;color:var(--gold2);margin:0 0 8px;font-size:22px}.pirate p{color:var(--muted);margin:0}
.footer{margin-top:34px;text-align:center;color:#6f86a6;font-size:13px}
[hidden]{display:none!important}
@media(max-width:560px){.hero{min-height:220px}.hero img{width:110px;height:110px;margin-bottom:-45px}main{padding-top:60px}.packages button{font-size:24px}.pirate{grid-template-columns:1fr}.card{padding:20px}}
body{background:linear-gradient(180deg,rgba(5,11,22,.55),rgba(5,11,22,.92) 60%,#050b16),url(/buy-hero.webp) center top/cover fixed,#050b16}
.side{position:fixed;top:0;bottom:0;width:calc((100vw - 820px)/2);min-width:0;background:url(/buy-pirate.webp) 18% center/cover no-repeat;opacity:.55;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent);mask-image:linear-gradient(90deg,#000 40%,transparent)}
.side-l{left:0}.side-r{right:0;transform:scaleX(-1)}
main,.hero{position:relative;z-index:1}
.seller p{color:var(--muted);font-size:14px;margin:6px 0}.seller a{color:var(--gold2)}
@media(max-width:1100px){.side{display:none}}

body{isolation:isolate;background:linear-gradient(#050b1660,#050b16 95%),url(/buy-art/6e69c3747c0d43cec395ec2fd7fc7d36e70be1fa3323124562a1b087738e233b.webp) center top/cover fixed}
.hero{min-height:0;padding:30px 16px 0;background:none}.hero::after{display:none}
.hero img{width:96px;height:96px;margin:0}
main{padding-top:18px}
.side{top:42px;bottom:0;width:min(29vw,550px);background-size:contain;background-position:center top;opacity:.86;mask-image:none;-webkit-mask-image:none}
.side-l{background-image:url(/buy-art/f5a57323a108fee5234bdf138de1f628f5c9fddf54cf8d6493e89202cad47e3a.webp)}.side-r{background-image:url(/buy-art/86a92cf6d673f53598c779e58ff37e440d32a875ed5a96be44dd638a8ae488fd.webp);transform:none}
.bubbles{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bubbles i{position:absolute;bottom:-32px;width:var(--s);height:var(--s);border:1px solid #82daffa0;border-radius:50%;background:radial-gradient(circle at 28% 24%,#d4f8ffaf,transparent 26%);box-shadow:inset 0 0 5px #5bc9ff55;animation:ascend var(--t) linear infinite;animation-delay:var(--d)}
@keyframes ascend{from{transform:translate(0,0);opacity:0}12%,85%{opacity:.65}to{transform:translate(30px,-115vh);opacity:0}}
@media(prefers-reduced-motion:reduce){.bubbles{display:none}}
@media(max-width:560px){main{padding-top:14px}.hero img{width:72px;height:72px}}
.relief-grid,.relief-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.relief-gallery h3{color:var(--gold2);margin:4px 0 8px}.relief-pair figure{margin:0;min-width:0;text-align:center;color:var(--muted);font-size:13px}.relief-pair img{display:block;width:100%;height:220px;object-fit:contain;background:#050b16;border-radius:8px}
@media(max-width:560px){.relief-grid{grid-template-columns:1fr}.relief-pair img{height:205px}}

.fish-water{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fish-track{position:absolute;top:var(--y);left:-155px;display:flex;gap:7px;color:#6fc3d6;opacity:.28;animation:fish-cross var(--t) linear infinite var(--dir);animation-delay:var(--d)}
.fish-track svg{width:42px}.fish-track svg:nth-child(2){width:28px;transform:translateY(13px)}.fish-track svg:nth-child(3){width:33px;transform:translateY(-9px)}
.fish-track:nth-child(even) svg{scale:-1 1}
@keyframes fish-cross{0%{transform:translate(0,0)}50%{transform:translate(calc(50vw + 80px),18px)}100%{transform:translate(calc(100vw + 160px),0)}}
@media(prefers-reduced-motion:reduce){.fish-water{display:none}}
.bubbles i{background:radial-gradient(circle at 28% 22%,#e8fbffd9 0%,transparent 24%),radial-gradient(circle at 70% 78%,#7ddcf04d,transparent 42%);border-color:#97eaff88}

.reef-motion-0{--y:13%;--t:26s;--d:-0s;--dir:normal}
.reef-motion-1{--y:27%;--t:31s;--d:-9s;--dir:reverse}
.reef-motion-2{--y:41%;--t:36s;--d:-18s;--dir:normal}
.reef-motion-3{--y:55%;--t:41s;--d:-27s;--dir:reverse}
.reef-motion-4{--y:69%;--t:46s;--d:-36s;--dir:normal}
.reef-bubble-0{left:0%;--s:7px;--t:13s;--d:-0s}
.reef-bubble-1{left:37%;--s:18px;--t:20s;--d:-5s}
.reef-bubble-2{left:74%;--s:29px;--t:27s;--d:-10s}
.reef-bubble-3{left:11%;--s:17px;--t:18s;--d:-15s}
.reef-bubble-4{left:48%;--s:28px;--t:25s;--d:-20s}
.reef-bubble-5{left:85%;--s:16px;--t:16s;--d:-2s}
.reef-bubble-6{left:22%;--s:27px;--t:23s;--d:-7s}
.reef-bubble-7{left:59%;--s:15px;--t:14s;--d:-12s}
.reef-bubble-8{left:96%;--s:26px;--t:21s;--d:-17s}
.reef-bubble-9{left:33%;--s:14px;--t:28s;--d:-22s}
.reef-bubble-10{left:70%;--s:25px;--t:19s;--d:-4s}
.reef-bubble-11{left:7%;--s:13px;--t:26s;--d:-9s}
.reef-bubble-12{left:44%;--s:24px;--t:17s;--d:-14s}
.reef-bubble-13{left:81%;--s:12px;--t:24s;--d:-19s}
.reef-bubble-14{left:18%;--s:23px;--t:15s;--d:-1s}
.reef-bubble-15{left:55%;--s:11px;--t:22s;--d:-6s}
.reef-bubble-16{left:92%;--s:22px;--t:13s;--d:-11s}
.reef-bubble-17{left:29%;--s:10px;--t:20s;--d:-16s}
.reef-bubble-18{left:66%;--s:21px;--t:27s;--d:-21s}
.reef-bubble-19{left:3%;--s:9px;--t:18s;--d:-3s}
.reef-bubble-20{left:40%;--s:20px;--t:25s;--d:-8s}
.reef-bubble-21{left:77%;--s:8px;--t:16s;--d:-13s}
.reef-bubble-22{left:14%;--s:19px;--t:23s;--d:-18s}
.reef-bubble-23{left:51%;--s:7px;--t:14s;--d:-0s}
.reef-zoom{display:block;cursor:zoom-in}
.reef-view{box-sizing:border-box;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:60px 48px;border:0;background:#050c17;color:white}
.reef-view[open]{display:grid;place-items:center}
.reef-view img{width:100%;height:100%;max-height:calc(100dvh - 120px);object-fit:contain;touch-action:pan-y pinch-zoom}
.reef-view button{position:absolute;min-width:44px;min-height:44px;background:#183451;color:white;border:0;border-radius:12px;font-size:24px;cursor:pointer}
.reef-view form button{right:12px;top:12px}.reef-view [data-prev]{left:2px;top:48%}.reef-view [data-next]{right:2px;top:48%}.reef-view output{position:absolute;bottom:18px}

.reef-swimmers>div{position:absolute;left:-270px;background:center/contain no-repeat;width:clamp(105px,18vw,240px);aspect-ratio:2.35;opacity:.56}
.reef-swimmers .reef-school{top:14%;background-image:url(/buy-art/school.webp);animation:reef-swim 36s -9s linear infinite}
.reef-swimmers .reef-return{top:66%;scale:-1 1;opacity:.4;animation:reef-swim 49s -26s linear infinite reverse}
.reef-swimmers .reef-shark{top:26%;aspect-ratio:3;background-image:url(/buy-art/shark.webp);opacity:.57;animation:reef-shark 130s -19s linear infinite}
@keyframes reef-swim{0%{transform:translate(0,0)}50%{transform:translate(calc(50vw + 140px),24px)}100%{transform:translate(calc(100vw + 285px),0)}}
@keyframes reef-shark{0%{transform:translate(0,0)}20%,100%{transform:translate(calc(100vw + 285px),32px)}}