/* ===== KØOK — Styles with effects ===== */
:root { --bg:#0b0b0b; --ink:#ffffff; --muted:#bfb8ad; --accent:#ff007f; }
*{box-sizing:border-box} html,body{height:100%;margin:0}
body{
  font-family:"Manrope",system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}

/* Loader */
#loader{position:fixed; inset:0; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; transition:opacity .6s ease, visibility .6s ease}
#loader.hidden{opacity:0; visibility:hidden}
#loader .spinner{font-size:6rem; font-weight:900; color:var(--ink);
  animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}

/* Animated gradient background */
.background-anim{position:absolute; inset:0;
  background:linear-gradient(-45deg,#0b0b0b,#1c1c1c,#0b0b0b,#111);
  background-size:400% 400%; animation:gradientMove 18s ease infinite; z-index:0}
@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Neon lines canvas */
canvas.neon-lines{position:absolute; inset:0; z-index:1; pointer-events:none}

/* Content */
.wrap{text-align:center; position:relative; z-index:3}
.logo{font-weight:800; font-size:clamp(64px,12vw,180px); margin:0; text-transform:uppercase; color:var(--ink);
  opacity:0; animation:fadeIn 2s ease forwards, glitch 0.4s steps(1,end) infinite 7s;
  transition:transform .3s ease, text-shadow .3s ease}
.headline{font-size:clamp(20px,4vw,56px); margin:.5em 0; opacity:0;
  animation:fadeIn 2s ease forwards 1s, glitch 0.4s steps(1,end) infinite 9s;
  transition:transform .3s ease, text-shadow .3s ease}

@keyframes fadeIn{from{opacity:0; transform:translateY(20px) scale(0.98)} to{opacity:1; transform:translateY(0) scale(1)}}

/* Softer glitch */
@keyframes glitch{
  0%{text-shadow:none}
  8%{text-shadow:1px 0 var(--accent), -1px 0 cyan}
  16%{text-shadow:-1px 0 var(--accent), 1px 0 cyan}
  24%{text-shadow:1px 1px var(--accent), -1px -1px cyan}
  32%{text-shadow:none}
  100%{text-shadow:none}
}

/* Hover subtle */
.logo:hover,.headline:hover{transform:scale(1.05); text-shadow:0 0 15px rgba(255,255,255,0.5)}

/* Footer */
footer{position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  font-size:12px; color:var(--muted); letter-spacing:.15em; z-index:3}

/* Socials */
.socials{position:absolute; bottom:60px; left:50%; transform:translateX(-50%);
  display:flex; gap:18px; z-index:3}
.socials a{color:var(--ink); font-size:24px; transition:transform .3s ease, color .3s ease, text-shadow .3s ease}
.socials a:hover{color:var(--accent); transform:scale(1.2); text-shadow:0 0 10px var(--accent)}

/* Contact */
.contact-btn{position:absolute; top:20px; right:20px; padding:.6em 1.2em; background:#222; color:white;
  font-weight:600; border:none; border-radius:8px; cursor:pointer; box-shadow:0 0 8px rgba(0,0,0,.4);
  transition:background .3s ease; z-index:5}
.contact-btn:hover{background:#444}
.contact-modal{position:fixed; inset:0; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center;
  z-index:10; visibility:hidden; opacity:0; transition:opacity .3s ease}
.contact-modal.active{visibility:visible; opacity:1}
.contact-card{background:#111; padding:2rem; border-radius:16px; max-width:400px; width:90%;
  box-shadow:0 0 20px rgba(255,255,255,.6)}
.contact-card h3{margin-top:0; margin-bottom:1rem; color:var(--ink)}
.contact-card label{display:block; text-align:left; margin:.5rem 0 .2rem; font-size:.85rem; color:var(--muted)}
.contact-card input,.contact-card textarea{width:100%; padding:.6rem; border-radius:8px; border:none; margin-bottom:1rem; font-family:inherit}
.contact-card button{width:100%; padding:.8rem; background:var(--accent); color:white; border:none; border-radius:8px; font-weight:600; cursor:pointer}
.close-btn{position:absolute; top:20px; right:20px; font-size:1.5rem; color:white; cursor:pointer}