@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@300;500;800&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Inter, system-ui, sans-serif;
  background: #000 radial-gradient(1200px 600px at 80% 20%, #0a0a0a 0%, #000 60%);
  color: #fff;
  overflow-x: hidden;
}

/* subtle CRT scanlines */
body::after{
  content:"";
  position: fixed; inset:0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
  pointer-events:none; mix-blend-mode: overlay; opacity:.15;
}

/* top bar */
.topbar{
  position: fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 28px; background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.logo img {
  width: 70px;         /* adjust the size if needed */
  height: auto;
  filter: drop-shadow(0 0 10px #00ffee);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.logo img:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 18px #00ffee);
}

.lang a{ color:#aaa; text-decoration:none; font-size:12px }

/* socials column */
.socials{
  position: fixed; left:18px; top:50%; transform:translateY(-50%);
  display:flex; gap:16px; flex-direction:column; z-index:3;
}
.socials a{
  width:34px; height:34px; border:1px solid #222; border-radius:50%;
  display:grid; place-items:center; text-decoration:none; color:#bbb; font-weight:700;
  transition: .25s ease; backdrop-filter: blur(4px);
}
.socials a:hover{ border-color:#f00; color:#fff; text-shadow:0 0 12px #f00; }

/* hero split */
.hero{
  min-height:100dvh; max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:48px;
  padding:100px 6vw 60px;
}
.copy h1{
  font-family:"Archivo Black", system-ui; font-size: clamp(40px, 7vw, 110px);
  line-height:.9; letter-spacing:.02em;
}
.tag{ margin-top:16px; color:#a9a9a9; letter-spacing:.08em }
.tag span{ color:#fff }
.cta{
  display:inline-block; margin-top:28px; padding:10px 16px;
  border-left:3px solid #fff; color:#bbb; text-decoration:none;
}
.cta:hover{ color:#f00; }

/* Glitch effect */
.glitch { position: relative; }
.glitch::before, .glitch::after{
  content: attr(data-text);
  position:absolute; left:0; top:0; overflow:hidden; pointer-events:none;
}
.glitch::before{ text-shadow: -2px 0 #f00; animation:glitch 2.2s infinite linear alternate-reverse; }
.glitch::after{ text-shadow: 2px 0 #00e5ff; animation:glitch 1.8s infinite linear alternate; opacity:.8 }
@keyframes glitch{
  0%{ clip-path: inset(0 0 85% 0); transform: translate(0,0)}
  20%{ clip-path: inset(15% 0 60% 0); transform: translate(-2px,-1px)}
  40%{ clip-path: inset(40% 0 35% 0); transform: translate(2px,1px)}
  60%{ clip-path: inset(60% 0 18% 0); transform: translate(-1px,2px)}
  80%{ clip-path: inset(80% 0 5% 0); transform: translate(1px,-2px)}
  100%{ clip-path: inset(0 0 0 0); transform: translate(0,0)}
}

/* circle visual (uses fallback pattern if no image) */
.circle{
  --hero: none; /* set to url('assets/alk-hero.jpg') after upload */
  width: min(48vw, 520px); aspect-ratio:1/1; margin-left:auto;
  border-radius:50%; position:relative; isolation:isolate;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,0,0,.25), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(0,229,255,.18), transparent 45%),
    var(--hero), /* your image when set */
    repeating-linear-gradient(90deg, #111 0 3px, #0b0b0b 3px 6px);
  background-size: cover, cover, cover, auto;
  filter: grayscale(.9) contrast(1.2) brightness(.9);
  box-shadow: 0 0 0 2px #0e0e0e, 0 0 60px rgba(255,0,0,.08), inset 0 0 80px rgba(0,229,255,.08);
}
.circle::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid #151515; box-shadow: inset 0 0 120px rgba(0,0,0,.6);
}

/* marquee */
.marquee{ border-top:1px solid #111; border-bottom:1px solid #111; overflow:hidden }
.marquee p{
  white-space:nowrap; padding:14px 0; color:#9b9b9b; letter-spacing:.3em; font-weight:700;
  animation: slide 20s linear infinite;
}
@keyframes slide{ to{ transform: translateX(-50%) } }

/* responsive */
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; gap:36px; padding-top:120px }
  .circle{ margin:0 auto }
  .socials{ left:10px }
}