:root{--accent:#ffffff;--fg:#f2f2f2;--dim:#8a8a8a;}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:#000;color:var(--fg);font-family:"Inter","SF Pro Display",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;overflow:hidden;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{background:#000;color:var(--fg);font-family:"Inter",system-ui,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;overflow:hidden;}

.bg{position:fixed;inset:-40px;background:#000;filter:blur(12px) brightness(0.42);transform:scale(1.08);animation:bg-drift 30s ease-in-out infinite alternate;z-index:0;contain:strict;will-change:transform;}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.88) 100%);}
@keyframes bg-drift{from{transform:scale(1.08) translate(0,0);}to{transform:scale(1.14) translate(-10px,-8px);}}

.glow{position:fixed;left:50%;top:50%;width:640px;height:640px;transform:translate(-50%,-50%);background:radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 60%);filter:blur(70px);opacity:0.4;z-index:1;pointer-events:none;animation:glow-breathe 6s ease-in-out infinite;contain:strict;will-change:transform,opacity;}
@keyframes glow-breathe{0%,100%{opacity:0.32;transform:translate(-50%,-50%) scale(1);}50%{opacity:0.5;transform:translate(-50%,-50%) scale(1.08);}}

.hero{position:relative;z-index:2;text-align:center;max-width:900px;width:100%;padding-top:20px;}

.title{
  font-size:clamp(28px, 5.5vw, 64px);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:0.95;
  color:#fff;
  display:flex;
  justify-content:center;
  flex-wrap:nowrap;
}
.title .l{
  display:inline-block;
  opacity:0;
  transform:translateY(30px);
  animation:rise .7s cubic-bezier(.2,.8,.2,1) forwards,
            float 3.6s ease-in-out infinite;
  animation-delay: var(--d, 0s), calc(var(--d, 0s) + .9s);
}
@keyframes rise{to{opacity:1;transform:translateY(0);}}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-5px);}
}

.tag{
  margin-top:24px;
  font-size:11px;
  letter-spacing:0.5em;
  text-transform:uppercase;
  color:var(--dim);
  opacity:0;
  animation:fadeIn .8s ease 1.4s forwards;
}
.line{
  width:60px;height:1px;
  background:var(--accent);
  margin:22px auto;
  box-shadow:0 0 10px rgba(255,255,255,0.35);
  opacity:0;
  animation:fadeIn .8s ease 1.6s forwards;
}
.sub{
  font-size:14px;
  color:#c8c8c8;
  opacity:0;
  animation:fadeIn .8s ease 1.8s forwards;
}
.hint{
  margin-top:32px;
  font-size:12px;
  color:var(--dim);
  opacity:0;
  animation:fadeIn .8s ease 2.1s forwards;
}
.hint .mono{
  font-family:"JetBrains Mono","Fira Code",monospace;
  color:var(--accent);
  letter-spacing:0.02em;
}
@keyframes fadeIn{to{opacity:1;}}

.hint a.cta{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  position:relative;
  transition:color .2s;
  border-bottom:1px solid rgba(255,255,255,0.14);
  padding-bottom:1px;
}
.hint a.cta::after{
  content:"";
  position:absolute;
  left:0;bottom:-1px;
  width:0;height:1px;
  background:var(--accent);
  transition:width .25s ease;
  box-shadow:0 0 8px var(--accent);
}
.hint a.cta:hover{color:#fff;}
.hint a.cta:hover::after{width:100%;}

/* logo mark above the title */
.mark-wrap{position:relative;width:160px;height:160px;margin:0 auto 28px;display:flex;align-items:center;justify-content:center;}
.mark{position:relative;z-index:2;width:150px;height:150px;object-fit:contain;opacity:0;transform:scale(0.8) rotate(-8deg);animation:mark-in .9s cubic-bezier(.2,.9,.25,1) .15s forwards, mark-float 4.2s ease-in-out infinite .9s;}
@keyframes mark-in{
  to{opacity:1;transform:scale(1) rotate(0);}
}
@keyframes mark-float{
  0%,100%{transform:translateY(0) rotate(0);}
  50%{transform:translateY(-6px) rotate(-1.5deg);}
}

/* soft breathing glow behind the mark */
.mark-glow{
  position:absolute;
  inset:-30px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.14) 0%, transparent 65%);
  filter:blur(26px);
  opacity:0.55;
  z-index:1;
  animation:mark-glow-breathe 4.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes mark-glow-breathe{
  0%,100%{opacity:0.35;transform:scale(1);}
  50%{opacity:0.65;transform:scale(1.12);}
}