:root{--cyan:#12edf1;--green:#4cff2c;--text:#eef7f8;--muted:#c5d1d4}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#000;color:var(--text);overflow:hidden}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 50% 28%,rgba(0,255,220,.08),transparent 38%),#000}
.page{height:100svh;max-width:1040px;margin:auto;padding:8px 14px 7px;display:grid;grid-template-rows:auto auto auto auto auto;gap:5px;align-content:space-between;align-items:center}
.brand{justify-self:center;font-size:clamp(17px,2.7vh,26px);font-style:italic;font-weight:900;letter-spacing:-1px;line-height:1;color:#f4f6f7;text-shadow:0 0 12px rgba(255,255,255,.12)}
.brand b{color:var(--green);text-shadow:0 0 15px rgba(76,255,44,.48)}
.hero{width:100%;display:grid;place-items:center;overflow:visible;position:relative}
.hero:after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:18%;background:radial-gradient(ellipse,rgba(0,255,225,.20),transparent 68%);filter:blur(12px);pointer-events:none}
.hero img{width:min(122%,1120px);height:auto;display:block;transform:scale(1.08);transform-origin:center;filter:drop-shadow(0 0 12px rgba(0,239,220,.20));mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);animation:turtleFloat 4.4s ease-in-out infinite}
.intro{text-align:center;margin-top:-2px}
.intro h1{margin:0;color:#c9fbff;font-size:clamp(19px,2.75vh,29px);font-style:italic;line-height:1.05;text-shadow:0 0 14px rgba(18,237,241,.24)}
.badge{margin:5px auto 5px;width:max-content;max-width:92%;border:1.5px solid var(--cyan);border-radius:999px;padding:6px 18px;font-size:clamp(15px,2.05vh,21px);box-shadow:0 0 14px rgba(18,237,241,.10);background:rgba(0,12,12,.55)}
.badge span{margin-right:7px}.badge strong{color:var(--green);font-style:italic;margin-left:5px}
.intro p{max-width:850px;margin:0 auto;color:#e7ecee;font-size:clamp(12px,1.72vh,17px);line-height:1.42}
.terminal{width:min(100%,900px);justify-self:center;border:1px solid rgba(18,237,241,.85);border-radius:17px;background:rgba(0,8,10,.88);padding:clamp(8px,1.5vh,15px) clamp(12px,2.4vw,25px);font:500 clamp(9px,1.35vh,13px)/1.48 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#c4d5d9;box-shadow:0 0 18px rgba(18,237,241,.08);text-align:left}
.terminal i{font-style:normal;color:var(--green);margin-right:8px}.terminal b{color:var(--green)}
.progress-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin:7px 0 4px}.progress{height:9px;border:1px solid #54717a;border-radius:99px;background:#0b181c;overflow:hidden}.progress em{display:block;width:67%;height:100%;background:linear-gradient(90deg,#18ee70,#12e7e9,#45ff36);box-shadow:0 0 9px rgba(0,255,120,.65);animation:progressGlow 1.8s ease-in-out infinite}.progress-row strong{color:var(--green);font-size:clamp(13px,1.8vh,18px)}
.cmd{margin-top:3px;color:#61ff68}.cmd em{font-style:normal;color:#b7dadd}.cursor{color:var(--green);animation:blink .8s steps(2,end) infinite}
footer{width:min(100%,900px);justify-self:center;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;color:#8b9a9e;font-size:clamp(8px,1.1vh,11px);direction:ltr}footer span{height:1px;background:linear-gradient(90deg,transparent,var(--cyan))}footer span:last-child{background:linear-gradient(90deg,var(--cyan),transparent)}footer p{margin:0;white-space:nowrap}
@keyframes turtleFloat{0%,100%{transform:scale(1.12) translateY(0)}50%{transform:scale(1.12) translateY(-5px)}}
@keyframes progressGlow{0%,100%{opacity:.8}50%{opacity:1;filter:saturate(1.5)}}
@keyframes blink{50%{opacity:0}}
@media(max-width:520px){.page{padding:4px 14px 4px;grid-template-rows:auto auto auto auto auto;gap:2px;align-content:space-between}.brand{font-size:19px}.hero img{width:145%;max-width:none;transform:scale(1.18)}.intro h1{font-size:23px}.badge{padding:5px 15px;font-size:18px;margin:4px auto}.intro p{font-size:17px;line-height:1.35;font-weight:500;max-width:365px}.terminal{padding:6px 14px;font-size:8.4px;line-height:1.38;border-radius:15px}.progress-row{margin:4px 0 3px}.progress{height:8px}.progress-row strong{font-size:16px}footer{font-size:8px}.hero img{animation:turtleFloatMobile 4.4s ease-in-out infinite}}
@keyframes turtleFloatMobile{0%,100%{transform:scale(1.18) translateY(0)}50%{transform:scale(1.18) translateY(-4px)}}
@media(max-height:700px){.page{gap:2px}.brand{font-size:16px}.intro h1{font-size:14px}.badge{font-size:11px;padding:3px 10px}.intro p{font-size:8.6px}.terminal{font-size:7.8px;padding:6px 12px}.progress{height:7px}.progress-row strong{font-size:13px}footer{font-size:7px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}