*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
--navy:#0D0E2B;
--teal:#00C2C7;
--midnight:#1E2050;
--mist:#B4B6C8;
--white:#FFFFFF;
--font-display:'Bebas Neue',sans-serif;
--font-body:'Inter',sans-serif;
--font-mono:'JetBrains Mono',monospace
}
html,body{height:100%}
body{
background:var(--navy);
color:var(--white);
font-family:var(--font-body);
display:flex;flex-direction:column;align-items:center;
justify-content:center;min-height:100vh;min-height:100dvh;
padding:40px 24px;position:relative;overflow-x:hidden;overflow-y:auto
}
.bg{
position:fixed;inset:0;z-index:0;
background: linear-gradient(135deg, #0D0E2B 0%, #1E2050 25%, #0D0E2B 50%, #1a1c4a 75%, #0D0E2B 100%);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite
}
@keyframes gradientShift{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.bg::after{
content:'';position:fixed;inset:0;
background:linear-gradient(180deg,rgba(13,14,43,0.3) 0%,rgba(13,14,43,0.6) 50%,rgba(13,14,43,0.9) 100%);
pointer-events:none
}
.container{
position:relative;z-index:1;
width:100%;max-width:380px;
display:flex;flex-direction:column;align-items:center;
gap:16px;text-align:center
}
.logo{
font-family:var(--font-display);
font-size:2rem;letter-spacing:0.02em;
color:var(--white);text-decoration:none;
margin-bottom:4px
}
.logo span{color:var(--teal)}
.blink-underscore{animation:blink 1s step-end infinite;font-weight:400}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.tagline{
font-size:12px;color:var(--mist);
font-family:var(--font-mono);margin-bottom:12px;
opacity:0.5
}
.gallery-strip{
width:100%;overflow:hidden;
padding:4px 0 12px;margin-bottom:4px;
cursor:grab
}
.gallery-strip-inner{
display:flex;gap:8px;width:fit-content;
animation: galleryScroll 20s linear infinite
}
.gallery-strip-inner.paused{animation-play-state:paused}
@keyframes galleryScroll{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
.gallery-strip-inner img{
flex-shrink:0;width:72px;height:72px;
border-radius:10px;object-fit:cover;
transition:transform 0.3s;cursor:pointer
}
.gallery-strip-inner img:hover{transform:scale(1.08)}
.links{display:flex;flex-direction:column;gap:12px;width:100%}
.links a{
display:flex;align-items:center;justify-content:flex-start;gap:14px;
width:100%;padding:16px 20px;border-radius:12px;
text-decoration:none;font-size:15px;font-weight:500;
font-family:var(--font-body);transition:all 0.3s;
border:1px solid transparent
}
.links a:hover{transform:translateY(-2px)}
.links a .icon{
flex-shrink:0;width:22px;height:22px;
display:flex;align-items:center;justify-content:center
}
.links a .icon svg{width:22px;height:22px;display:block}
.links a.secondary{
background:rgba(30,32,80,0.5);color:var(--white);
border-color:rgba(0,194,199,0.12)
}
.links a.secondary:hover{
border-color:var(--teal);background:rgba(30,32,80,0.7)
}
.footer{
margin-top:28px;font-family:var(--font-mono);
font-size:11px;color:var(--mist);opacity:0.25
}
.footer a{color:var(--teal);text-decoration:none;opacity:0.5;transition:opacity 0.3s}
.footer a:hover{opacity:1}