*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#02070b}
body{color:#edfaff;font-family:Arial,Helvetica,sans-serif}
.filter-defs{position:absolute;width:0;height:0;overflow:hidden}
.landing{--mark:min(49vh,420px,72vw);position:relative;isolation:isolate;min-height:600px;height:100vh;height:100svh;overflow:hidden}
.water{position:absolute;inset:0;z-index:-2;background:url('assets/water.png') center center/100% 100% no-repeat}
.water:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 65%,rgba(0,3,7,.48)),radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.3) 100%)}
.mark-wrap{position:absolute;width:var(--mark);height:var(--mark);left:50%;top:calc(50% - var(--mark) + 12px);transform:translateX(-50%);z-index:2}
.hover-scale,.breathing{width:100%;height:100%}
.hover-scale{transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .8s;filter:drop-shadow(0 0 2px #48c5ff88)}
.mark-wrap:hover .hover-scale{transform:scale(1.10);filter:drop-shadow(0 0 4px #6adfffbb) drop-shadow(0 0 8px #008bff55)}
.breathing{animation:breathe 6s ease-in-out infinite}
.mark{display:block;width:100%;height:100%;object-fit:contain;filter:url(#neon-core)}
.reflection{position:absolute;left:50%;top:50%;width:var(--mark);height:calc(var(--mark)*.55);transform:translateX(-50%);opacity:.24;filter:blur(3px);mask-image:linear-gradient(#0009,transparent 90%);pointer-events:none;animation:water-light 6s ease-in-out infinite}
.reflection img{display:block;width:100%;height:100%;transform:scaleY(-1);filter:url(#neon-core)}
.identity{position:absolute;top:74%;left:0;width:100%;text-align:center;padding:0 18px;text-shadow:0 2px 14px #000,0 0 28px #000}
h1{margin:0;font-size:clamp(20px,2.1vw,30px);font-weight:300;letter-spacing:.45em;padding-left:.45em;line-height:1.3}
p{margin:18px 0 0;font-size:clamp(10px,.85vw,12px);letter-spacing:.46em;padding-left:.46em;color:#b1c8d5}
@keyframes breathe{0%,100%{transform:scale(.97);opacity:.90}50%{transform:scale(1.12);opacity:1}}
@keyframes water-light{0%,100%{opacity:.16}50%{opacity:.29}}
@media(max-width:600px){.landing{--mark:min(45vh,78vw);min-height:500px}.water{background-size:100% 100%}h1{font-size:21px;letter-spacing:.28em;padding-left:.28em}p{letter-spacing:.33em;padding-left:.33em}.identity{top:76%}}
@media(max-height:550px) and (min-width:601px){.landing{min-height:360px;--mark:48vh}.identity{top:75%}h1{font-size:20px}p{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.breathing,.reflection{animation:none}.hover-scale{transition:none}}

/* Reference composition: floating blue neon above a low wet horizon. */
.landing{--mark:min(49vh,430px,78vw)}
.mark-wrap{top:5%}
.mark{filter:url(#neon-core) drop-shadow(0 0 3px #9bd4ff) drop-shadow(0 0 8px #4187ffbb) drop-shadow(0 0 16px #3672ff66)}
.hover-scale{filter:none}
.mark-wrap:hover .hover-scale{filter:drop-shadow(0 0 7px #639dff88)}
.identity{top:56%;left:50%;width:min(540px,88vw);transform:translateX(-50%);padding:0}
h1{font-size:clamp(21px,2.1vw,30px);letter-spacing:.48em;padding-left:.48em;font-weight:300;color:#e8f5ff;text-shadow:0 0 3px #99cfff88,0 0 10px #528dff77,0 0 22px #367bff44}
p{display:flex;justify-content:space-between;width:88%;margin:19px auto 0;padding:0;font-size:clamp(10px,.85vw,12px);letter-spacing:0;color:#b8c8dd}
.reflection{top:79%;height:calc(var(--mark)*.42);opacity:.15;filter:blur(5px);animation:none}
.reflection img{filter:url(#neon-core) drop-shadow(0 0 6px #478aff)}
.water:after{background:linear-gradient(transparent 75%,#0002)}
@media(max-width:600px){.landing{--mark:min(46vh,83vw)}.mark-wrap{top:10%}.identity{top:56%;width:88vw}h1{font-size:21px;letter-spacing:.3em;padding-left:.3em}p{width:90%;margin-top:17px}.reflection{top:79%}}
@media(max-height:550px) and (min-width:601px){.landing{--mark:49vh}.mark-wrap{top:2%}.identity{top:56%}h1{font-size:20px}p{margin-top:12px}}

.slogan-letters{display:flex;justify-content:space-between;width:100%}

/* A fine blue tube, with light outside rather than a wide white fill. */
.mark{filter:url(#neon-core) drop-shadow(0 0 2px #77baffcc) drop-shadow(0 0 6px #367cff99) drop-shadow(0 0 12px #2864ee44)}
.identity{width:max-content;max-width:90vw}
h1{color:#7fbaff40;-webkit-text-stroke:.6px #a6d9ff;text-shadow:0 0 2px #77baffcc,0 0 6px #367cff99,0 0 12px #2864ee66}
p{width:92%;max-width:100%;color:#9baec7;text-shadow:none}
@media(max-width:600px){.identity{width:max-content;max-width:90vw}p{width:92%}}

/* Single-line geometric lettering, shaped as luminous neon tubes. */
.mark{filter:url(#neon-core) drop-shadow(0 0 1px #d6f1ff) drop-shadow(0 0 4px #72b6ff) drop-shadow(0 0 9px #397fffaa) drop-shadow(0 0 17px #215be855)}
.identity{width:min(470px,86vw)}
h1{margin:0;padding:0;line-height:0;letter-spacing:0;text-shadow:none;-webkit-text-stroke:0}
.neon-wordmark{display:block;width:100%;height:auto;overflow:visible}
.letter-halo{stroke:#3985ff;stroke-width:3;filter:blur(4px);opacity:.85}
.letter-edge{stroke:#69b5ff;stroke-width:2.4;filter:drop-shadow(0 0 2px #559bff)}
.letter-core{stroke:#def5ff;stroke-width:1.05}
p{width:88%;margin-top:12px}
@media(max-width:600px){.identity{width:86vw}p{width:88%;margin-top:13px}}

/* Avatar restored exactly to the v3 glow; v5 lettering retained. */
.mark{filter:url(#neon-core) drop-shadow(0 0 3px #9bd4ff) drop-shadow(0 0 8px #4187ffbb) drop-shadow(0 0 16px #3672ff66)}

/* Both images contain their own glow, including on mobile Safari/Chrome. */
.mark,.reflection img{filter:none}
.mark-wrap{mix-blend-mode:screen}
.hover-scale,.mark-wrap:hover .hover-scale{filter:none}
.reflection{mix-blend-mode:screen;-webkit-mask-image:linear-gradient(#0009,transparent 90%)}
.neon-wordmark{height:auto;filter:none}