/* Simple landing styles with animated gradient background */
:root{
  --bg-speed: 14s;
  --accent: 255,255,255;
  --brand-1: 255,145,0;    /* strong orange */
  --brand-2: 255,195,80;   /* warm light */
  --brand-3: 255,95,60;    /* coral */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:rgb(var(--accent));
  background: linear-gradient(120deg,#0b0810 0%, #140a08 45%, #2a0f04 100%);
  overflow:hidden;
  position:relative;
}
/* animated gradient overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background: linear-gradient(60deg, rgba(255,145,0,0.12), rgba(255,195,80,0.10), rgba(255,95,60,0.10));
  background-size: 600% 600%;
  animation: gradientShift var(--bg-speed) ease-in-out infinite;
  pointer-events:none;
}
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  :root{--bg-speed: 0s}
  body::before{animation:none}
}

.wrap{
  position:relative;
  z-index:2; /* above canvas and gradient */
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.logo{
  font-size: clamp(5rem, 18vw, 14rem);
  margin:0;
  letter-spacing: .06em;
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
  text-align:center;
  color: rgba(255,245,230,0.98);
  -webkit-font-smoothing:antialiased;
  filter: drop-shadow(0 8px 30px rgba(2,6,23,0.7));
}

/* Subtle translucent stroke/glow */
.logo::after{
  content:"";
  display:block;
  height:8px;
  margin-top:8px;
  width:100%;
  opacity:.02;
}

/* Canvas sits behind content */
#bg-canvas{
  position:fixed;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}

/* Small responsive tweaks */
@media (max-width:600px){
  .logo{font-size: clamp(3rem, 22vw, 8rem)}
}