*{box-sizing:border-box}
body{
margin:0;
font-family:"Comic Sans MS","Trebuchet MS",sans-serif;
background:#eee7da url("assets/bg.png") center/cover fixed;
color:#222;
}
.topbar{
position:sticky;top:0;z-index:5;
display:flex;justify-content:space-between;
padding:20px 40px;
background:#f7f0e4cc;
backdrop-filter:blur(8px);
border-bottom:2px solid #222;
}
.ticker{
font-weight:900;font-size:28px;
}
nav a,.join a,button{
display:inline-block;
padding:15px 28px;
margin:5px;
border:2px solid #222;
background:#f5ecdc;
color:#111;
text-decoration:none;
border-radius:18px;
font-weight:bold;
}
.hero,.paper,.join{
max-width:1100px;
margin:60px auto;
padding:50px;
background:#f8f1e5dd;
border:2px solid #222;
border-radius:35px;
box-shadow:0 15px 40px #0002;
}
.hero{text-align:center}
.hero-logo{max-width:600px;width:90%}
.robot{max-width:520px;width:80%;display:block;margin:30px auto}
.tagline{font-size:28px}
h2{font-size:48px}
.cards{display:grid;gap:20px}
.cards div{
padding:25px;
border:2px dashed #222;
border-radius:20px;
font-size:24px;
}
.join{
background:linear-gradient(#0008,#0008),url("assets/bg.png") center/cover;
color:white;text-align:center;
}
.join a{background:#fff;color:#111}
iframe{width:100%;height:600px;border-radius:20px}
footer{text-align:center;padding:40px;font-size:18px}
@media(max-width:700px){
.topbar{padding:15px;flex-direction:column}
h2{font-size:34px}
.hero,.paper,.join{margin:25px 15px;padding:25px}
}

#copy-ca.copied{transform:translateY(-2px);box-shadow:3px 4px 0 #222}