*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a1a;
  --bg-2:#12112a;
  --pink:#ff3ea5;
  --cyan:#00e0ff;
  --yellow:#ffe14d;
  --violet:#8b5cf6;
  --text:#f5f5ff;
  --muted:#9aa0c9;
}
html,body{height:100%}
body{
  font-family:"Cairo","Segoe UI",sans-serif;
  background:radial-gradient(ellipse at top,#1a0d3a 0%,var(--bg) 60%,#000 100%);
  color:var(--text);
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}

/* ---------- Backgrounds ---------- */
.bg-stars,.bg-grid,.bg-glow{position:fixed;inset:0;pointer-events:none;z-index:0}
.bg-stars{
  background-image:
    radial-gradient(2px 2px at 20% 30%,#fff,transparent),
    radial-gradient(1px 1px at 70% 60%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 40% 80%,#fff,transparent),
    radial-gradient(1px 1px at 85% 20%,#fff,transparent),
    radial-gradient(2px 2px at 10% 70%,#fff,transparent),
    radial-gradient(1px 1px at 55% 15%,#fff,transparent);
  background-size:100% 100%;
  animation:twinkle 4s infinite alternate;
}
@keyframes twinkle{from{opacity:.4}to{opacity:1}}
.bg-grid{
  background-image:
    linear-gradient(rgba(255,62,165,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,224,255,.08) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
}
.bg-glow{
  background:
    radial-gradient(600px circle at 15% 10%,rgba(255,62,165,.25),transparent 60%),
    radial-gradient(700px circle at 85% 90%,rgba(0,224,255,.2),transparent 60%),
    radial-gradient(500px circle at 50% 50%,rgba(139,92,246,.15),transparent 70%);
  animation:glowPulse 8s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{opacity:.9}50%{opacity:1;filter:hue-rotate(20deg)}}

/* ---------- Boot ---------- */
.boot{
  position:fixed;inset:0;z-index:9999;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s ease,visibility .8s ease;
}
.boot.hidden{opacity:0;visibility:hidden}
.boot-inner{text-align:center;position:relative;z-index:2}
.boot-logo{
  font-family:"Bangers",sans-serif;
  font-size:clamp(2rem,7vw,5rem);
  letter-spacing:.15em;
  color:#fff;
}
.boot-logo .glow{color:var(--pink);text-shadow:0 0 20px var(--pink),0 0 40px var(--pink)}
.boot-sub{
  font-family:"Press Start 2P",monospace;
  color:var(--cyan);
  margin-top:1rem;
  font-size:.85rem;
  animation:blink 1.2s infinite;
}
@keyframes blink{50%{opacity:.3}}
.enter-btn{
  margin-top:2.5rem;
  background:linear-gradient(135deg,var(--pink),var(--violet));
  border:2px solid #fff;
  color:#fff;
  padding:1rem 2.5rem;
  border-radius:999px;
  font-family:"Cairo",sans-serif;
  font-weight:900;
  font-size:1.2rem;
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  box-shadow:0 0 30px rgba(255,62,165,.6),0 0 60px rgba(139,92,246,.4);
  transition:transform .2s;
}
.enter-btn small{font-size:.7rem;opacity:.8;font-weight:400}
.enter-btn:hover{transform:scale(1.05)}
.scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 2px,transparent 2px 4px);
}

/* ---------- Header ---------- */
.site-header{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.5rem 2rem;
  flex-wrap:wrap;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.85rem}
.brand-mark{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,var(--pink),var(--cyan));
  display:grid;place-items:center;
  overflow:hidden;
  box-shadow:0 0 20px rgba(255,62,165,.5);
  animation:spin 8s linear infinite;
}
.brand-mark img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.brand-text h1{
  font-family:"Bangers",sans-serif;letter-spacing:.08em;
  font-size:1.8rem;color:#fff;
  text-shadow:0 0 10px rgba(0,224,255,.6);
}
.brand-text p{color:var(--muted);font-size:.85rem}
.controls{display:flex;gap:.6rem}
.ctrl-btn{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;padding:.65rem 1.1rem;border-radius:12px;
  font-family:"Cairo",sans-serif;font-weight:700;cursor:pointer;
  backdrop-filter:blur(10px);transition:all .2s;
}
.ctrl-btn:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)}
.ctrl-btn.accent{
  background:linear-gradient(135deg,var(--pink),var(--violet));
  border-color:transparent;
  box-shadow:0 0 20px rgba(255,62,165,.4);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;z-index:2;
  text-align:center;padding:2rem 1rem 3rem;
}
.hero-title{
  font-family:"Bangers",sans-serif;
  font-size:clamp(2.5rem,7vw,5rem);
  letter-spacing:.05em;line-height:1.05;
}
.hero-title .line-1{display:block;color:#fff;text-shadow:0 0 15px rgba(0,224,255,.5)}
.hero-title .line-2{
  display:block;
  background:linear-gradient(135deg,var(--pink),var(--yellow),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px rgba(255,62,165,.5));
}
.hero-sub{color:var(--muted);margin-top:1rem;font-size:1.05rem}
.hero-badges{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem}
.hero-badges span{
  border:1px dashed rgba(255,255,255,.25);
  padding:.35rem .9rem;border-radius:999px;
  font-size:.8rem;color:var(--cyan);
  font-family:"Press Start 2P",monospace;
}

/* ---------- Team grid ---------- */
.team-grid{
  position:relative;z-index:2;
  max-width:1200px;margin:0 auto;padding:1rem 1.5rem 4rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
}
.card{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1.5px solid rgba(255,255,255,.12);
  cursor:pointer;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
  aspect-ratio:3/4.2;
  isolation:isolate;
}
.card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 20px 50px rgba(255,62,165,.25),0 0 40px rgba(0,224,255,.15);
  border-color:rgba(255,62,165,.5);
}
.card .img-wrap{
  position:absolute;inset:0;
}
.card img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transition:opacity .5s ease,transform .5s ease,filter .5s ease;
}
.card img.anime{opacity:0}
.card.anime img.real{opacity:0}
.card.anime img.anime{opacity:1}

.card .overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:1rem 1.1rem;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));
  z-index:2;
}
.card .name{
  font-family:"Bangers",sans-serif;letter-spacing:.06em;
  font-size:1.5rem;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.card .role{color:var(--cyan);font-size:.85rem;margin-top:.1rem}
.card .tag{
  position:absolute;top:.8rem;inset-inline-end:.8rem;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  padding:.3rem .7rem;border-radius:999px;
  font-family:"Press Start 2P",monospace;font-size:.6rem;
  color:var(--yellow);
  border:1px solid rgba(255,225,77,.4);
  z-index:3;
}
.card.anime .tag{color:var(--pink);border-color:var(--pink)}
.card.anime .tag::before{content:"✦ "}

/* Transform effect */
.card.transforming{
  animation:shake .5s;
}
.card.transforming::before{
  content:"";position:absolute;inset:0;z-index:5;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.9) 0%,rgba(255,62,165,.6) 20%,rgba(0,224,255,.4) 40%,transparent 70%);
  animation:flash .7s ease-out;
  pointer-events:none;
}
.card.transforming::after{
  content:"✦";position:absolute;inset:0;z-index:6;
  display:grid;place-items:center;
  font-size:6rem;color:#fff;
  text-shadow:0 0 30px var(--pink),0 0 60px var(--cyan);
  animation:sparkle .7s ease-out;
  pointer-events:none;
}
@keyframes flash{
  0%{opacity:0;transform:scale(.2)}
  40%{opacity:1;transform:scale(1.2)}
  100%{opacity:0;transform:scale(2)}
}
@keyframes sparkle{
  0%{opacity:0;transform:scale(0) rotate(0deg)}
  40%{opacity:1;transform:scale(1.4) rotate(180deg)}
  100%{opacity:0;transform:scale(2) rotate(360deg)}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px) rotate(-1deg)}
  40%{transform:translateX(6px) rotate(1deg)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}

/* Speed lines burst */
.burst{
  position:fixed;z-index:9998;pointer-events:none;
  width:120px;height:120px;transform:translate(-50%,-50%);
}
.burst span{
  position:absolute;left:50%;top:50%;
  width:4px;height:40px;
  background:linear-gradient(180deg,#fff,transparent);
  transform-origin:50% 0;
  animation:burstOut .8s ease-out forwards;
}
@keyframes burstOut{
  from{opacity:1;height:0}
  to{opacity:0;height:180px}
}

/* Floating hearts/sparkles */
.floater{
  position:fixed;z-index:9997;pointer-events:none;
  font-size:2rem;
  animation:floatUp 1.4s ease-out forwards;
}
@keyframes floatUp{
  0%{transform:translate(-50%,0) scale(.4);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx,0px)),-160px) scale(1.4);opacity:0}
}

/* Footer */
.site-footer{
  position:relative;z-index:2;
  text-align:center;padding:2rem 1rem 3rem;
  color:var(--muted);font-size:.9rem;
  border-top:1px dashed rgba(255,255,255,.1);
}

@media (max-width:600px){
  .site-header{padding:1rem}
  .brand-text h1{font-size:1.4rem}
}

/* LinkedIn button + age chip + icon mute button */
.card .age-chip{
  position:absolute; top:.8rem; inset-inline-start:.8rem;
  background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
  padding:.3rem .6rem; border-radius:999px;
  font-family:"Press Start 2P",monospace; font-size:.55rem;
  color:#fff; border:1px solid rgba(255,255,255,.25);
  z-index:3; letter-spacing:.04em;
}
.card .li-btn{
  position:absolute; bottom:.9rem; inset-inline-end:.9rem;
  width:36px; height:36px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#0a66c2; color:#fff; text-decoration:none;
  box-shadow:0 6px 18px rgba(10,102,194,.45), 0 0 0 1px rgba(255,255,255,.15) inset;
  z-index:4; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.card .li-btn:hover{
  transform:translateY(-2px) scale(1.06);
  background:#0b76dc;
  box-shadow:0 10px 24px rgba(10,102,194,.6), 0 0 0 1px rgba(255,255,255,.25) inset;
}
.card .li-btn:active{ transform:scale(.96); }
.card.anime .li-btn{
  background:linear-gradient(135deg,#ff3ea5,#8b5cf6);
  box-shadow:0 8px 22px rgba(255,62,165,.5), 0 0 0 1px rgba(255,255,255,.25) inset;
}

.ctrl-btn.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .65rem;
}
.ctrl-btn.icon-btn svg{ display:block; }