:root{
  --bg:#000;
  --fg:#fff;
  --muted:#bfbfbf;
  --accent:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-serif, Georgia, 'Times New Roman', serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--fg);text-decoration:none}
.section{padding:64px 24px}
.container{max-width:1100px;margin:0 auto}

.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 24px;background:rgba(0,0,0,.7);backdrop-filter:saturate(140%) blur(4px);
  border-bottom:1px solid #111;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:36px;height:36px}
.han{letter-spacing:2px; font-weight:700}
.site-header h1{margin:0;font-size:24px}
.cta{display:flex;gap:12px}
.btn{
  padding:10px 16px;border:1px solid var(--fg);border-radius:999px;
  transition:.2s ease; font-weight:600;
}
.btn:hover{transform:translateY(-1px);background:var(--fg);color:var(--bg)}
.btn.ghost{background:transparent;color:var(--fg)}
.hero{
  display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;
  padding:80px 24px 48px;min-height:70vh;border-bottom:1px solid #111;
  background: radial-gradient(1200px 500px at 15% 30%, rgba(255,255,255,.08), transparent);
}
.hero-text h2{font-size:48px;margin:.2em 0}
.hero-text .sub{color:var(--muted)}
.overline{letter-spacing:.2em;color:var(--muted);text-transform:uppercase;font-size:12px}
.actions{display:flex;gap:12px;margin:16px 0 6px}
.ca{color:var(--muted);font-size:14px}
.hero-art{filter:contrast(115%);}
.hero-art img{border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.6)}

.about .features{display:grid;gap:6px;margin-top:16px}
.memes .grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.memes figure{margin:0;overflow:hidden;border-radius:14px;border:1px solid #111}
.memes img{transform:scale(1.02);transition:.3s ease;filter:grayscale(100%) contrast(110%)}
.memes img:hover{transform:scale(1.06)}

.site-footer{border-top:1px solid #111;padding:24px;text-align:center;color:var(--muted)}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr; padding-top:48px}
  .hero-text h2{font-size:36px}
  .memes .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 520px){
  .memes .grid{grid-template-columns:1fr}
}


/* Loading Screen */
#loading-screen {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: #000; display: flex; justify-content: center; align-items: center;
  z-index: 9999; transition: opacity 0.6s ease;
}
.spinner {
  border: 4px solid #222;
  border-top: 4px solid white;
  border-radius: 50%;
  width: 60px; height: 60px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
body.loaded #loading-screen {
  opacity: 0; pointer-events: none;
}

/* Animated buttons */
.btn {
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover {
  transform: scale(1.05);
  background: white; color: black;
}
.btn:active {
  transform: scale(0.95);
  background: #222; color: white;
}

/* X Logo */
.x-logo img {
  width: 24px;
  height: 24px;
  filter: invert(1);
  margin-left: 8px;
  transition: transform 0.2s ease;
}
.x-logo img:hover {
  transform: scale(1.15);
}