:root{
  --bg:#0b0f12;
  --bg2:#0e1217;
  --card:#12161b;
  --soft:#151b22;
  --text:#e9eef4;
  --muted:#9aa8b5;
  --accent:#e53935;
  --accent2:#9b111e;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: url('assets/smoke_bg_1.jpg') center/cover fixed, var(--bg);
  line-height:1.55;
  overflow-x:hidden;
}

/* top marquee */
.top-marquee{position:fixed;top:0;left:0;right:0;background:#0e1319;border-bottom:1px solid #121820;z-index:50}
.top-marquee a { color: #ffffff; text-decoration: none; transition: color .2s ease; }
@keyframes scroll{
  0%{transform:translateX(20%)}
  100%{transform:translateX(-20%)}
}

/* header */
.site-header{position:sticky;top:0;background:rgba(11,15,18,.75);backdrop-filter:blur(10px);border-bottom:1px solid #121820;z-index:40}
.container{width:min(1180px,92vw);margin:0 auto;position:relative}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.logo-img{width:42px;height:42px;border-radius:10px;border:1px solid #2a2f37;background:#0c0f13}
.brand-text{letter-spacing:.4px}
.nav-links a { margin: 0 14px; color: #ffffff; text-decoration: none; transition: color .2s ease; }
.nav-links a:hover { color: #e9eef4; }

/* hero */
.hero{position:relative;padding:120px 0 40px;border-bottom:1px solid #121820;background:linear-gradient(180deg, rgba(12,12,12,.4), rgba(12,12,12,.8)), url('assets/smoke_bg_2.jpg') center/cover fixed}
.noise{position:absolute;inset:0;background:url('assets/pattern.svg');opacity:.6;mix-blend-mode:overlay;pointer-events:none}
.hero-inner{display:grid;grid-template-columns:1.3fr .9fr;gap:28px;align-items:center}
.lead{color:#c5d2de;max-width:60ch}
.cta-row{display:flex;gap:12px;margin:16px 0 10px}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid #242a31;text-decoration:none;color:var(--text);font-weight:800;transition:transform .1s ease, box-shadow .2s ease}
.btn.small{padding:8px 12px;border-radius:10px;font-size:.9rem}
.btn.primary{background:var(--accent);border-color:transparent;color:white;box-shadow:0 8px 24px rgba(229,57,53,.25)}
.btn.ghost{background:transparent}
.btn:hover{box-shadow:0 16px 36px rgba(229,57,53,.3)}
.btn:active{transform:translateY(1px)}
.quick-links{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0 0;padding:0;list-style:none;color:#c5d2de}

.hero-card{background:rgba(18,22,27,.9);border:1px solid #1f2630;border-radius:16px;box-shadow:0 12px 34px rgba(0,0,0,.45)}
.card-tabs{display:flex;gap:8px;padding:12px 12px 0}
.tab{all:unset;background:#0e141a;border:1px solid #1f2630;border-radius:10px;padding:8px 10px;cursor:pointer}
.tab.active{background:var(--accent);border-color:transparent;color:#fff}
.card-body{padding:12px 14px 16px}
.panel{display:none}.panel.show{display:block}
.link-grid{display:grid;grid-template-columns:1fr auto;gap:8px}
.link-grid li{display:grid;grid-template-columns:1fr auto;gap:8px;border-bottom:1px dashed #2a313a;padding:6px 0}
.perk-list{margin:0;padding:0 0 0 18px;color:#c5d2de}

.action-bar{position:sticky;bottom:14px;display:flex;gap:10px;justify-content:center;padding:8px;background:rgba(12,12,12,.55);backdrop-filter:blur(10px);border:1px solid #1c232b;border-radius:12px;width:min(540px,92vw);margin:14px auto;z-index:30}

/* sections */
.section{padding:60px 0;background:linear-gradient(180deg, rgba(12,12,12,.6), rgba(12,12,12,.85)), url('assets/smoke_bg_3.jpg') center/cover fixed}
.section:nth-child(even){background:linear-gradient(180deg, rgba(14,14,14,.6), rgba(14,14,14,.9)), url('assets/smoke_bg_2.jpg') center/cover fixed}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}
.callout{background:#0f1419;border:1px solid #1f2630;border-radius:16px;padding:16px}
.callout .big{display:block;background:#0c0f13;border:1px solid #232a33;border-radius:12px;padding:10px 12px;margin-top:8px;word-break:break-all}
.ticks{margin:12px 0 0 18px;color:#c9d5e0}
.ticks.tight{margin-left:18px}
.sub{color:#a9b6c2}

/* cards and grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
.card{background:#0f1419;border:1px solid #232a33;border-radius:14px;padding:14px;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.card.biz h3{margin:0 0 6px}
.caption{color:#a9b6c2}

/* carousel */
.carousel{position:relative;border:1px solid #232a33;border-radius:16px;padding:16px;overflow:hidden;background:rgba(18,22,27,.92)}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:12px;transition:transform .35s ease}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);border:0;background:#12161b;border:1px solid #232a33;color:#e9eef4;width:34px;height:34px;border-radius:10px;cursor:pointer;z-index:2}
.prev{left:10px}.next{right:10px}

/* support */
.link-list{list-style:none;padding:0;margin:0}
.link-list li{display:flex;justify-content:space-between;border-bottom:1px dashed #2a313a;padding:8px 0}

/* footer */
.site-footer{border-top:1px solid #121820;padding:18px 0 28px;color:#c5d2de;background:#0b0f12}
.foot{display:flex;justify-content:space-between;align-items:center;gap:10px}
.site-footer a { color: #ffffff; text-decoration: none; transition: color .2s ease; }
.site-footer a:hover { color: #e9eef4; }

/* responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .site-header{top:26px}
}


/* Hellcat banner hero */
.hellcat-hero{
  position:relative;
  min-height: 78vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.65)), url('assets/hellcat.png') center/cover no-repeat fixed;
  border-bottom:1px solid #121820;
}
.hellcat-overlay{position:relative; text-align:center; padding:18vh 2rem 16vh}
.hellcat-title{
  font-family: Orbitron, Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 7rem);
  letter-spacing: .04em;
  line-height: 0.9;
  text-transform: uppercase;
  color:#fff;
  text-shadow: 0 20px 60px rgba(0,0,0,.8), 0 6px 18px rgba(229,57,53,.25);
}
.hellcat-title span{
  display:block;
  font-size: .55em;
  color:#d2d8df;
  letter-spacing: .18em;
}

/* top-right logo */
.top-right-logo{
  width:42px;height:42px;border-radius:10px;border:1px solid #2a2f37;background:#0c0f13;
}
/* keep it at far right */
.site-header .container.nav{gap:12px}
.site-header .nav-links{margin-left:auto}

.section-sub{color:#a9b6c2;margin-top:-6px;margin-bottom:10px}

/* auto-scrolling review marquee */
.review-marquee{
  position:relative;
  overflow:hidden;
  border:1px solid #232a33;
  border-radius:16px;
  background:rgba(18,22,27,.92);
  padding:12px 0;
}
.review-track{
  display:flex;
  gap:12px;
  width:max-content;
  animation:reviews-roll 28s linear infinite;
}
.review:hover .review-track, .review-marquee:hover .review-track{animation-play-state:paused}
.card.review{min-width:420px}
@keyframes reviews-roll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

.two-col.single{grid-template-columns:1fr}

/* animated white breathing glow for all cards */
@keyframes cardBreath{
  0%{box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 22px rgba(255,255,255,.35)}
  100%{box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 0 rgba(255,255,255,0)}
}
.card{animation:cardBreath 3.8s ease-in-out infinite}

.section-sub a { color: #ffffff; text-decoration: underline; }

a[href*="discord.gg/smokerp"],
#support a { color: #ffffff !important; }

/* nudge direct donate card down a bit */
.callout.donate{ margin-top:16px; }


/* === Mouse-following crosshair overlay === */
#crosshair{
  position:fixed;
  top:0; left:0;
  width:0; height:0;
  pointer-events:none;
  z-index:1000;
  opacity:0;
  transition:opacity .25s ease;
  will-change: transform, opacity;
}
#crosshair.visible{ opacity:1; }

/* ring */
#crosshair .ring{
  position:absolute;
  left:0; top:0;
  width: 28px; height: 28px;
  border:2px solid #fff;
  border-radius:50%;
  transform:translate(-50%, -50%);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.65));
}

/* cardinal lines */
#crosshair .line{
  position:absolute;
  left:0; top:0;
  transform:translate(-50%, -50%);
}
#crosshair .line.h::before,
#crosshair .line.h::after,
#crosshair .line.v::before,
#crosshair .line.v::after{
  content:"";
  position:absolute;
  background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.65);
}
/* horizontal (left/right) */
#crosshair .line.h::before{
  width: 12px; height:2px;
  right: 16px; top:0;
}
#crosshair .line.h::after{
  width: 12px; height:2px;
  left: 16px; top:0;
}

/* vertical (top/bottom) */
#crosshair .line.v::before{
  width:2px; height: 12px;
  left:0; bottom: 16px;
}
#crosshair .line.v::after{
  width:2px; height: 12px;
  left:0; top: 16px;
}

/* green center dot */
#crosshair .dot{
  position:absolute;
  left:0; top:0;
  width: 4px; height: 4px;
  background:#00ff7b;
  border-radius:50%;
  transform:translate(-50%, -50%);
  box-shadow:0 0 6px rgba(0,255,123,.9), 0 0 14px rgba(0,255,123,.6);
}

/* hide cursor on desktop only when crosshair is active */
@media (pointer: fine){
  body.crosshair-cursor-none{ cursor:none; }
}