:root{
  --bg:#090706;
  --fire-orange:#ff7a1a;
  --fire-yellow:#ffd36b;
  --muted:#bdb7a8;
  --accent:linear-gradient(90deg,var(--fire-orange),var(--fire-yellow));
  --btn-dark:#170f0b;
  --max-width:1100px;
  --radius:12px;
}

/* reset and body */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#f3eadb;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* background canvas */
#bg{position:fixed;inset:0;z-index:0;overflow:hidden}
#particle-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.scanlines{position:absolute;inset:0;pointer-events:none;background:
  repeating-linear-gradient(180deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.00) 1px, rgba(255,255,255,0.00) 3px);
  mix-blend-mode:overlay;opacity:0.06;} /* reduced clarity */

/* centered intro (no visible container) */
.center-stage{
  position:relative;
  z-index:10;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:24px;
  text-align:center;
}

/* intro text */
.lead{
  color:var(--fire-yellow);
  font-weight:700;
  font-style:italic;
  text-transform:none;
  letter-spacing:0.6px;
  margin:0;
  opacity:0.95;
  font-size:18px;
  text-shadow:0 6px 14px rgba(255,120,40,0.04);

  /* make it animatable */
  display:inline-block;
  transform-origin:50% 50%;
  animation: lead-dance 3.6s ease-in-out infinite;
}

/* subtle slanting / dancing motion */
@keyframes lead-dance{
  0%   { transform: translateY(0) skewX(0deg) rotate(0deg); }
  10%  { transform: translateY(-2px) skewX(-6deg) rotate(-0.6deg); }
  30%  { transform: translateY(2px)  skewX(6deg)  rotate(0.6deg); }
  50%  { transform: translateY(-1px) skewX(-4deg) rotate(-0.4deg); }
  70%  { transform: translateY(1px)  skewX(4deg)  rotate(0.4deg); }
  100% { transform: translateY(0)   skewX(0deg)  rotate(0deg); }
}

/* respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .lead { animation: none; transform: none; }
}

/* stronger, larger name */
.name{
  /* fluid, responsive heading size */
  font-size: clamp(2.25rem, 8vw, 6rem); /* ~36px - 96px */
  line-height:1;
  margin:6px 0;
  font-weight:900; /* bolder */
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color:#ffffff; /* changed to white */
  text-shadow:0 22px 60px rgba(255,120,40,0.08);
  white-space:nowrap;         /* ensure single line on large screens */
  overflow-wrap: anywhere;
  letter-spacing:1.8px;
}

/* call to action - distinct darker button with bright orange accent */
.cta-btn{
  display:inline-block;
  margin-top:6px;
  padding:12px 26px;
  border-radius:12px;

  /* warm solid button color (harmonious with the design) */
  background: linear-gradient(180deg, #ff7a1a 0%, #ff9b4a 100%);
  color: #170f08;                 /* dark text for contrast on the orange */
  font-weight:800;
  text-decoration:none;
  border: 1px solid rgba(255,120,40,0.18);
  box-shadow: 0 10px 30px rgba(255,120,40,0.10), 0 4px 18px rgba(0,0,0,0.45);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.cta-btn:focus{
  outline:3px solid rgba(255,140,45,0.12);
  outline-offset:4px;
}
.cta-btn:hover{
  transform:translateY(-3px);
  filter:brightness(1.04);
  box-shadow: 0 28px 80px rgba(255,110,40,0.14);
}

/* responsive adjustments */
/* small phones */
@media (max-width:420px){
  .name{white-space:normal; letter-spacing:0.8px}
  .lead{font-size: clamp(0.8rem, 2.2vw, 0.95rem)}
  .cta-btn{padding:12px 18px; font-size:0.95rem}
  .center-stage{padding:18px; gap:10px}
  .scanlines{opacity:0.04}
}

/* tablets / small laptops */
@media (min-width:421px) and (max-width:1024px){
  .name{white-space:nowrap; letter-spacing:1.2px}
  .lead{font-size: clamp(0.9rem, 1.6vw, 1.1rem)}
  .cta-btn{padding:11px 20px}
  .center-stage{padding:22px}
}

/* reduce heavy visual noise on very small screens */
@media (max-width:700px){
  .scanlines{opacity:0.03}
}