:root{
  --bg:#0b0b10;
  --panel:#111118;
  --panel-2:#16161f;
  --text:#e7e7f0;
  --muted:#a6a6b0;
  --brand:#ff3646;
  --outline:#1f1f29;
  --radius:16px;
  --glow: rgba(255,54,70,.32);
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.45 Inter,system-ui,Segoe UI,Arial}
a{color:var(--text);text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.small{font-size:14px}
.hint{opacity:.85}
.row{display:flex;align-items:center;gap:10px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;padding:2px 6px;border-radius:6px;background:#0f0f16;border:1px solid #2a2a38}

/* Nav */
.nav{position:sticky;top:0;z-index:5;background:rgba(10,10,16,.8);backdrop-filter:saturate(1.05) blur(8px);border-bottom:1px solid var(--outline)}
.nav .inner{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:10px 0}
.logo{height:32px}
.nav .link{padding:10px 12px;border-radius:10px;opacity:.9;transition:color .2s,box-shadow .25s,background .25s}
.nav .link:hover{background:var(--panel-2);box-shadow:0 0 0 1px var(--brand) inset, 0 6px 20px var(--glow);color:#fff}
.nav .link.active{background:var(--brand);color:#fff;opacity:1;box-shadow:0 8px 28px var(--glow)}

/* Buttons */
.btn{display:inline-block;background:var(--brand);color:#fff;border:1px solid #8f1f2a;border-radius:12px;padding:10px 14px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .25s,filter .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 28px var(--glow)}
.btn.ghost{background:transparent;border-color:var(--outline);color:var(--text)}
.btn.ghost:hover{box-shadow:0 8px 22px var(--glow),0 0 0 1px var(--brand) inset;color:#fff}
.btn.secondary{background:#2b2b38;border-color:#3a3a48}
.btn.small{padding:6px 10px;font-size:12px}
.btn.disabled{opacity:.6;pointer-events:none}

/* Layout blocks */
.hero{
  display:grid;
  grid-template-columns:1.15fr .85fr; /* original proportions */
  gap:24px;
  padding:40px 0 10px;
  align-items:start;
}
.hero h1{margin:0 0 6px 0;font-size:40px;letter-spacing:.2px}
.hero p{margin:0 0 10px 0;color:var(--muted)}
/* Elements that should span full width under both columns */
.hero .hero-wide{ grid-column:1 / -1; }
@media(max-width:900px){ .hero{grid-template-columns:1fr} }

.card{background:var(--panel);border:1px solid var(--outline);border-radius:var(--radius);padding:18px;transition:transform .18s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:0 14px 44px var(--glow), inset 0 0 0 1px rgba(255,54,70,.25)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){ .grid2,.grid3{grid-template-columns:1fr} }

.footer{border-top:1px solid var(--outline);padding:24px 0;margin-top:40px;color:var(--muted)}

/* Pills (legacy) */
.pill-list{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:6px 10px;border-radius:999px;background:var(--panel-2);border:1px solid var(--outline);transition:box-shadow .25s,transform .15s}
.pill:hover{transform:translateY(-1px);box-shadow:0 8px 22px var(--glow),0 0 0 1px var(--brand) inset}

/* Alerts */
.flash{display:none;margin-top:10px;padding:10px 12px;border-radius:10px;background:#15151b;border:1px solid #2a2a38}
.flash.success{border-color:#2e7c3f}
.flash.error{border-color:#9b2a2a}

/* Account banner */
.account-banner{display:none;gap:10px;align-items:center;justify-content:center;background:#0f1218;border:1px solid var(--outline);padding:10px 12px;border-radius:12px}
.dot{width:8px;height:8px;border-radius:999px;display:inline-block}
.dot-green{background:#27ae60}

/* ===== Account required note ===== */
.note-banner{
  display:flex; gap:10px; align-items:center;
  margin:10px 0 6px;
  background:linear-gradient(180deg,#12121a,#0f1117);
  border:1px solid #2a2a38; border-radius:12px; padding:10px 12px;
}
.note-dot{ width:10px; height:10px; border-radius:999px; background:#ffba24; box-shadow:0 0 16px rgba(255,186,36,.35); }

/* ===== Speech-bubble row (wraps, no scroll) ===== */
.bubble-row{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:14px;
}
.bubble{
  position:relative;
  display:inline-flex; align-items:center;
  background:var(--panel-2);
  border:1px solid var(--outline);
  border-radius:18px;
  padding:8px 12px;
  font-weight:600; font-size:14px;
  white-space:nowrap;
  transition:transform .15s, box-shadow .25s;
}
.bubble:hover{ transform:translateY(-1px); box-shadow:0 8px 22px var(--glow),0 0 0 1px var(--brand) inset; }
.bubble::after{
  content:""; position:absolute; left:-8px; top:14px;
  border:8px solid transparent;
  border-right-color:var(--panel-2);
}
.bubble::before{
  content:""; position:absolute; left:-9px; top:14px;
  border:8px solid transparent;
  border-right-color:var(--outline);
}

/* ===== Carousel (slightly taller for visibility) ===== */
.carousel{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--outline);
  aspect-ratio:16/10;   /* a little taller than 16:9 */
  min-height:0;
  background:#0c0c12;
}
.car-track{
  display:flex;
  align-items:center;
  height:100%;
  transition:transform .45s ease;
}
.carousel img{
  width:100%;
  height:100%;
  flex:0 0 100%;
  object-fit:contain;   /* use 'cover' for full-bleed if desired */
  background:#0c0c12;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
}
.car-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  border:1px solid var(--outline); background:#0d0d14;
  border-radius:999px; padding:12px; cursor:pointer; z-index:2;
  transition:box-shadow .25s,transform .15s;
}
.car-btn:hover{ box-shadow:0 8px 20px var(--glow),0 0 0 1px var(--brand) inset }
.car-btn.left{ left:10px } .car-btn.right{ right:10px }

/* Two-up stage (for 2 visible images) */
.carousel[data-visible="2"]{
  aspect-ratio:32/10;
  min-height:0;
}
.carousel[data-visible="2"] .car-track img{ flex:0 0 50%; }

/* Hide arrows if only 1 slide total */
.carousel[data-images="1"] .car-btn{ display:none }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.92);
  display:none; z-index:1000; align-items:center; justify-content:center; }
.lightbox.open{ display:flex; }
.lb-wrap{ position:relative; max-width:96vw; max-height:96vh; overflow:auto; }
.lb-img{ display:block; max-width:96vw; max-height:96vh; object-fit:contain; cursor:zoom-in; }
.lb-img.zoomed{ max-width:none; max-height:none; cursor:zoom-out; }
.lb-close{ position:absolute; top:10px; right:10px; }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); }
.lb-prev{ left:10px; } .lb-next{ right:10px; }
.lb-btn{ border:1px solid var(--outline); background:#0d0d14; border-radius:999px; padding:10px; cursor:pointer; }
.lb-btn:hover{ box-shadow:0 8px 20px var(--glow),0 0 0 1px var(--brand) inset }

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.field input{padding:10px 12px;border-radius:10px;border:1px solid #2a2a34;background:#101015;color:var(--text)}

/* Download cards */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.dl-card{background:var(--panel);border:1px solid var(--outline);border-radius:16px;padding:18px;transition:box-shadow .25s,transform .15s,border-color .25s}
.dl-card:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:0 14px 40px var(--glow)}
.note{color:var(--muted)}

/* Profile chip + avatar */
.profile{display:inline-flex;align-items:center;gap:8px;margin-left:12px}
.avatar{width:28px;height:28px;border-radius:999px;border:1px solid #2a2a2f}
.avatar-lg{width:96px;height:96px;border-radius:999px;border:1px solid #2a2a2f}

/* Bulleted lists */
.list{margin:6px 0 0 18px}
.list li{margin:6px 0}

/* Download artwork */
.dl-art{
  width:160px;
  height:160px;
  margin:10px auto 14px;
  display:block;
  filter: drop-shadow(0 10px 24px var(--glow));
}

/* ================================
   OVERRIDES TO REMOVE H-SCROLL
   ================================ */
.hero .hero-wide{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;     /* wrap across the full width */
  gap: 12px;
  padding-left: 12px;  /* room for bubble tail */
  overflow: hidden;    /* prevent any overflow */
  max-width: 100%;
}

/* Ensure bubbles never force scrolling */
.bubble{
  white-space: nowrap;
  max-width: 100%;
}

/* Hide the first bubble's tail to avoid left overflow */
.hero .hero-wide .bubble:first-child::before,
.hero .hero-wide .bubble:first-child::after{
  display: none;
}

/* Safety: prevent page-level h-scroll on odd browsers */
html, body { overflow-x: hidden; }

/* Taller carousel on desktop so it sits just above the bubbles */
@media (min-width: 900px){
  .carousel{
    aspect-ratio: 16/20;   /* was 16/15 → much taller */
  }
  .carousel[data-visible="2"]{
    aspect-ratio: 32/20;   /* keep two-up in sync */
  }
}