*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{background:#FDFCF0;font-family:'Space Grotesk',sans-serif;color:#111111;height:100vh;display:flex;flex-direction:column}

nav{padding:16px 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #111111;background:#FDFCF0;z-index:10;flex-shrink:0}
.logo{font-family:'Instrument Serif',serif;font-size:24px;font-weight:900}
.logo span{color:#FF2A4D;font-style:italic}
.nav-right{font-size:12px;font-weight:600;color:#777}
.github-link{text-decoration:none;display:flex;align-items:center;gap:4px;font-family:'Instrument Serif',serif;font-size:16px;font-weight:600;color:#111111;transition:all 0.2s ease}
.github-link svg{width:14px;height:14px;transition:transform 0.2s ease}
.github-link:hover{color:#FF2A4D}
.github-link:hover svg{transform:translate(2px,-2px);stroke:#FF2A4D}

main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;padding:24px 48px 16px}

.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;animation:drift 10s ease-in-out infinite}
.orb1{width:340px;height:340px;background:#FF2A4D;opacity:0.06;top:-100px;left:-80px;animation-delay:0s}
.orb2{width:260px;height:260px;background:#62CDFF;opacity:0.09;bottom:-70px;right:-50px;animation-delay:-4.5s}
.orb3{width:180px;height:180px;background:#FFD700;opacity:0.10;top:30%;left:55%;animation-delay:-7s}
@keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(18px,-20px)}66%{transform:translate(-14px,16px)}}

.content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%}
h1{font-family:'Instrument Serif',serif;font-size:clamp(36px,5vw,60px);line-height:1.06;letter-spacing:-1px;margin-bottom:10px;animation:fadeUp 0.75s ease both}
h1 em{color:#FF2A4D;font-style:italic}
p{font-size:15px;color:#666;margin-bottom:26px;max-width:320px;line-height:1.8;animation:fadeUp 0.75s 0.13s ease both}
.buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:30px;animation:fadeUp 0.75s 0.24s ease both}
.btn{padding:11px 28px;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;border:2px solid #111111;cursor:pointer;text-decoration:none;display:inline-block;transition:all 0.08s}
.btn-primary{background:#FF2A4D;color:#fff;box-shadow:4px 4px 0 #111111}
.btn-primary:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #111111}
.btn-secondary{background:#FDFCF0;color:#111111;box-shadow:4px 4px 0 #111111}
.btn-secondary:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #111111;background:#62CDFF}

.app-preview{width:100%;max-width:680px;aspect-ratio:16/9;border:2px solid #111111;box-shadow:4px 4px 0 #111111;background:#F0EFE3;display:flex;align-items:center;justify-content:center;overflow:hidden;animation:fadeUp 0.75s 0.35s ease both;flex-shrink:0}
.app-preview img{width:100%;height:100%;object-fit:cover;display:block}
.placeholder-inner{display:flex;flex-direction:column;align-items:center;gap:10px}
.placeholder-icon{width:40px;height:40px;border:2px solid #ddd;display:flex;align-items:center;justify-content:center}
.placeholder-icon svg{width:20px;height:20px;stroke:#ccc;fill:none}
.placeholder-text{font-size:11px;font-weight:700;color:#ccc;letter-spacing:1.5px;text-transform:uppercase}

footer{border-top:2px solid #111111;padding:0 48px;display:flex;align-items:center;justify-content:space-between;background:#FDFCF0;position:relative;z-index:10;flex-shrink:0;height:120px;overflow:hidden}
.footer-logo{font-family:'Instrument Serif',serif;font-size:17px;position:relative;z-index:2;background:#FDFCF0;padding-right:10px}
.footer-logo span{color:#FF2A4D;font-style:italic}
.footer-copy{font-size:11px;color:#999;font-weight:600;position:relative;z-index:2;background:#FDFCF0;padding-left:10px}
#catCanvas{position:fixed;left:0;bottom:0;width:100%;height:120px;pointer-events:none;z-index:9999}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all 0.3s ease}
.modal-overlay.active{opacity:1;visibility:visible}
.modal{background:#FDFCF0;border:2px solid #111111;box-shadow:4px 4px 0 #111111;padding:40px;max-width:400px;width:90%;text-align:center;transform:scale(0.9);transition:transform 0.3s ease}
.modal-overlay.active .modal{transform:scale(1)}
.modal h2{font-family:'Instrument Serif',serif;font-size:28px;margin-bottom:16px;color:#111111}
.modal p{font-size:14px;color:#666;margin-bottom:24px;line-height:1.6}
.modal-close{padding:10px 24px;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;border:2px solid #111111;background:#FF2A4D;color:#fff;cursor:pointer;box-shadow:4px 4px 0 #111111;transition:all 0.08s}
.modal-close:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #111111}