/* =====================================================================
   JAREZ SMOOTH BOOKS
   SUPREME V2 — WORLD-CLASS PRODUCTION DESIGN SYSTEM
   ===================================================================== */

/* =====================================================================
   01. DESIGN TOKENS
   ===================================================================== */

:root {
  --bg-0: #05020b;
  --bg-1: #080311;
  --bg-2: #0d0519;
  --bg-3: #140724;

  --panel: rgba(10, 7, 22, 0.88);
  --panel-soft: rgba(15, 10, 30, 0.76);
  --panel-solid: #0e091c;

  --text: #f8f8ff;
  --text-soft: #d8d7e6;
  --text-muted: #9d9aaf;

  --cyan: #64f4ff;
  --cyan-soft: #a9faff;
  --blue: #2f8dff;
  --violet: #8c52ff;
  --magenta: #ff3cf7;
  --rose: #ff465d;
  --gold: #ffd978;

  --stroke: rgba(255, 255, 255, 0.10);
  --stroke-bright: rgba(100, 244, 255, 0.34);

  --shadow-sm:
    0 8px 24px rgba(0,0,0,.24);

  --shadow-md:
    0 18px 44px rgba(0,0,0,.34);

  --shadow-lg:
    0 28px 80px rgba(0,0,0,.48);

  --glow-cyan:
    0 0 22px rgba(100,244,255,.16);

  --glow-magenta:
    0 0 26px rgba(255,60,247,.14);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;

  --max: 1240px;
  --nav-h: 132px;

  --ease: cubic-bezier(.22,.8,.24,1);
}


/* =====================================================================
   02. RESET / BASE
   ===================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: var(--bg-0);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;

  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif;
  line-height: 1.65;

  background-color: var(--bg-0);
}

body.stars-bg {
  position: relative;

  background-image:
    linear-gradient(
      180deg,
      rgba(5,2,11,.42) 0%,
      rgba(5,2,11,.58) 45%,
      rgba(5,2,11,.80) 100%
    ),
    url('assets/background1.png'),
    linear-gradient(
      180deg,
      var(--bg-0) 0%,
      var(--bg-1) 35%,
      var(--bg-2) 70%,
      var(--bg-0) 100%
    );

  background-position:
    center top,
    center top,
    center top;

  background-size:
    100% 100%,
    100% auto,
    100% 100%;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat;

  background-attachment:
    scroll,
    scroll,
    scroll;
}

/* Static atmospheric light — no fixed compositing */
body.stars-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(100,244,255,.085),
      transparent 27%
    ),
    radial-gradient(
      circle at 86% 18%,
      rgba(255,60,247,.075),
      transparent 25%
    ),
    radial-gradient(
      circle at 50% 72%,
      rgba(47,141,255,.055),
      transparent 34%
    );
}

body > * {
  position: relative;
}

img,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: rgba(100,244,255,.26);
  color: #fff;
}


/* =====================================================================
   03. ACCESSIBILITY / FOCUS
   ===================================================================== */

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;

  padding: 12px 18px;
  border-radius: var(--radius-sm);

  color: #031014;
  background: var(--cyan);
}

.skip-link:focus {
  top: 16px;
}


/* =====================================================================
   04. BACKGROUND FX — LIGHTWEIGHT
   ===================================================================== */

.shooting-stars-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.shooting-stars-layer::before,
.shooting-stars-layer::after {
  content: "";
  position: absolute;

  width: 2px;
  height: 130px;

  opacity: .42;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(255,255,255,.92),
      rgba(100,244,255,.12),
      transparent
    );

  transform: rotate(38deg);
}

.shooting-stars-layer::before {
  top: 2%;
  right: 18%;
  animation: supremeShootOne 12s linear infinite;
}

.shooting-stars-layer::after {
  top: 10%;
  left: 16%;
  animation: supremeShootTwo 15s linear infinite 4s;
}

@keyframes supremeShootOne {
  0%,
  78% {
    transform: translate3d(0,0,0) rotate(38deg);
    opacity: 0;
  }

  82% {
    opacity: .45;
  }

  92% {
    transform: translate3d(-28vw,36vh,0) rotate(38deg);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes supremeShootTwo {
  0%,
  72% {
    transform: translate3d(0,0,0) rotate(38deg);
    opacity: 0;
  }

  77% {
    opacity: .38;
  }

  88% {
    transform: translate3d(30vw,40vh,0) rotate(38deg);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}


/* =====================================================================
   05. SITE HEADER / NAVIGATION
   ===================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;
  padding: 14px 0;

  background:
    linear-gradient(
      180deg,
      rgba(5,2,12,.985),
      rgba(8,3,17,.96)
    );

  border-bottom: 1px solid rgba(255,255,255,.08);

  box-shadow:
    0 12px 34px rgba(0,0,0,.32),
    0 1px 0 rgba(100,244,255,.04);
}

.main-nav {
  width: min(calc(100% - 32px), var(--max));
  min-height: 92px;

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
}

.logo,
.site-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.logo img,
.site-logo img {
  max-height: 88px;
  width: auto;

  filter:
    drop-shadow(0 0 8px rgba(100,244,255,.18));
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  flex-wrap: wrap;
}

.nav-links a,
.nav-link {
  position: relative;

  padding: 10px 14px;

  border-radius: 999px;

  color: var(--text-soft);

  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .025em;

  transition:
    color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.nav-links a:hover,
.nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.055);
  transform: translateY(-1px);
}

.nav-links a.active,
.nav-link.active {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      rgba(100,244,255,.13),
      rgba(140,82,255,.13)
    );

  border: 1px solid rgba(100,244,255,.16);
}


/* =====================================================================
   06. MOBILE NAV / HAMBURGER
   ===================================================================== */

.hamburger,
.menu-toggle {
  border: 0;
  cursor: pointer;

  color: #fff;
  background: transparent;
}

.mobile-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 16px;
  right: 16px;

  z-index: 1100;

  display: none;
  flex-direction: column;
  gap: 8px;

  padding: 18px;

  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);

  background: rgba(10,7,22,.985);

  box-shadow: var(--shadow-lg);
}

.mobile-menu.show {
  display: flex;
}

.mobile-menu a {
  padding: 13px 15px;
  border-radius: 13px;

  color: var(--text-soft);
  font-weight: 700;

  background: rgba(255,255,255,.025);
}

.mobile-menu a:hover {
  color: #fff;
  background: rgba(255,255,255,.065);
}


/* =====================================================================
   07. GLOBAL LAYOUT
   ===================================================================== */

main {
  position: relative;
  z-index: 2;
}

section {
  position: relative;
}

.container,
.section-inner,
.footer-inner {
  width: min(calc(100% - 32px), var(--max));
  margin-inline: auto;
}

.luxury-section,
.centered-section {
  width: min(calc(100% - 32px), var(--max));
  margin: clamp(54px, 7vw, 100px) auto;

  padding: clamp(26px, 4vw, 52px);

  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.014)
    ),
    rgba(8,5,18,.80);

  box-shadow: var(--shadow-lg);
}

.centered-section {
  text-align: center;
}

.glow-box {
  box-shadow:
    var(--shadow-lg),
    var(--glow-cyan),
    var(--glow-magenta);
}


/* =====================================================================
   08. TYPOGRAPHY
   ===================================================================== */

h1,
h2,
h3,
h4 {
  margin-top: 0;
  color: #fff;

  font-family: 'Orbitron', 'Inter', sans-serif;
  line-height: 1.15;
}

h1 {
  font-size:
    clamp(2.5rem, 7vw, 6.6rem);

  letter-spacing: -.045em;
}

h2 {
  font-size:
    clamp(1.9rem, 4vw, 3.5rem);

  letter-spacing: -.025em;
}

h3 {
  font-size:
    clamp(1.2rem, 2vw, 1.7rem);
}

p {
  color: var(--text-soft);
}

.section-title {
  margin-bottom: 14px;

  background:
    linear-gradient(
      90deg,
      #fff 0%,
      var(--cyan-soft) 25%,
      #e3caff 58%,
      #ffb6fa 86%,
      #fff 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-subtitle,
.eyebrow,
.kicker {
  color: var(--cyan);

  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .76rem;
  font-weight: 900;
}


/* =====================================================================
   09. HERO
   ===================================================================== */

.hero,
.home-hero,
.hero-section {
  width: min(calc(100% - 32px), var(--max));
  min-height: min(78vh, 840px);

  margin: 0 auto;

  padding:
    clamp(72px, 10vw, 140px)
    clamp(20px, 5vw, 64px);

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
}

.hero-content {
  width: min(100%, 960px);
}

.hero p {
  max-width: 760px;
  margin: 22px auto 0;

  color: var(--text-soft);

  font-size:
    clamp(1rem, 1.8vw, 1.24rem);
}


/* =====================================================================
   10. BUTTON SYSTEM
   ===================================================================== */

.neon-button,
.mega-view-more,
.ronin-checkout-button,
.audio-btn,
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 48px;

  padding: 13px 20px;

  border: 1px solid rgba(100,244,255,.24);
  border-radius: 14px;

  cursor: pointer;

  color: #fff;

  font-weight: 900;
  letter-spacing: .025em;

  background:
    linear-gradient(
      135deg,
      rgba(100,244,255,.12),
      rgba(140,82,255,.16),
      rgba(255,60,247,.11)
    ),
    #10091f;

  box-shadow:
    0 12px 28px rgba(0,0,0,.24);

  transition:
    transform .18s var(--ease),
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.neon-button:hover,
.mega-view-more:hover,
.ronin-checkout-button:hover,
.audio-btn:hover,
button[type="submit"]:hover {
  transform: translateY(-2px);

  border-color: rgba(100,244,255,.52);

  box-shadow:
    0 16px 36px rgba(0,0,0,.32),
    0 0 22px rgba(100,244,255,.10);
}

.neon-button:active,
.mega-view-more:active,
.ronin-checkout-button:active {
  transform: translateY(0);
}


/* =====================================================================
   11. CARDS / PANELS
   ===================================================================== */

.book-card,
.experience-card,
.site-card,
.release-card,
.news-card,
.feature-card,
.info-card {
  position: relative;
  overflow: hidden;

  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);

  background:
    linear-gradient(
      150deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.012)
    ),
    rgba(10,7,22,.82);

  box-shadow:
    0 14px 34px rgba(0,0,0,.26);

  transition:
    transform .20s var(--ease),
    border-color .20s ease,
    box-shadow .20s ease;
}

.book-card:hover,
.experience-card:hover,
.site-card:hover,
.release-card:hover,
.news-card:hover,
.feature-card:hover,
.info-card:hover {
  transform: translateY(-5px);

  border-color:
    rgba(100,244,255,.28);

  box-shadow:
    0 22px 48px rgba(0,0,0,.34),
    0 0 22px rgba(100,244,255,.07);
}


/* =====================================================================
   12. GRID SYSTEMS
   ===================================================================== */

.book-grid,
.experience-grid,
.network-grid,
.release-grid,
.cards-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 245px), 1fr));

  gap: clamp(18px, 3vw, 28px);
}

.site-card {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 18px;

  text-align: center;
}

.site-card img {
  width: 100%;
  max-height: 180px;

  object-fit: contain;

  border-radius: 14px;
}

.site-card span {
  margin-top: 13px;
  font-weight: 800;
}


/* =====================================================================
   13. BOOK COVER / DETAIL PAGE
   ===================================================================== */

.book-layout,
.book-detail-grid {
  display: grid;
  grid-template-columns:
    minmax(260px, .85fr)
    minmax(0, 1.15fr);

  gap: clamp(28px, 5vw, 64px);

  align-items: start;
}

.book-cover-frame {
  padding: 16px;

  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);

  background: rgba(10,7,22,.90);

  box-shadow:
    var(--shadow-lg),
    0 0 24px rgba(100,244,255,.08);
}

.book-cover-frame img {
  width: 100%;
  border-radius: 18px;

  box-shadow:
    0 18px 42px rgba(0,0,0,.42);
}

.book-info {
  padding: clamp(20px,3vw,34px);
}

.book-info p {
  margin-bottom: 18px;
  line-height: 1.85;
}


/* =====================================================================
   14. RONIN SLASHDOWN FEATURED RELEASE
   ===================================================================== */

.ronin-release {
  width: min(calc(100% - 32px), var(--max));

  margin:
    clamp(66px, 8vw, 110px)
    auto;

  padding:
    clamp(24px, 4vw, 52px);

  overflow: hidden;

  border:
    1px solid rgba(255,70,93,.22);

  border-radius: 34px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255,70,93,.10),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    ),
    rgba(8,5,16,.92);

  box-shadow:
    0 30px 86px rgba(0,0,0,.48),
    0 0 42px rgba(255,70,93,.08);
}

.ronin-release::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 43%,
      rgba(255,255,255,.028) 50%,
      transparent 57%,
      transparent 100%
    );
}

.ronin-release-grid {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns:
    minmax(260px,.85fr)
    minmax(0,1.15fr);

  gap:
    clamp(30px, 5vw, 66px);

  align-items: center;
}

.ronin-release-art {
  width: 100%;
  max-width: 520px;
}

.ronin-release-art img {
  width: 100%;

  border-radius: 22px;

  box-shadow:
    0 28px 64px rgba(0,0,0,.52),
    0 0 32px rgba(255,70,93,.10);
}

.ronin-release-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 14px;

  color: #ff7184;

  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ronin-release h2 {
  margin-bottom: 18px;
}

.ronin-release-title-accent {
  color: #ff5269;
}

.ronin-release-copy {
  max-width: 760px;

  color: var(--text-soft);
  line-height: 1.85;
}

.ronin-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;

  margin: 24px 0;
}

.ronin-format {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 9px 12px;

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;

  color: #dddbea;

  background: rgba(255,255,255,.035);

  font-size: .8rem;
  font-weight: 750;
}

.ronin-release-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 24px;
}

.ronin-checkout-form {
  margin: 0;
}

.ronin-checkout-button {
  min-height: 56px;

  flex-direction: column;

  padding: 12px 20px;

  text-align: center;
}

.ronin-pay-sub {
  display: block;

  margin-top: 2px;

  font-size: .66rem;
  line-height: 1.2;

  letter-spacing: .10em;
  text-transform: uppercase;

  opacity: .72;
}

.ronin-primary {
  min-height: 56px;
}

.ronin-crypto-button {
  border-color:
    rgba(255,70,93,.30);

  background:
    linear-gradient(
      135deg,
      #66101d,
      #a3182d 55%,
      #71101e
    );
}

.ronin-support-note {
  margin-top: 18px;

  color: var(--text-muted);

  font-size: .84rem;
}

.ronin-support-note strong {
  color: #fff;
}


/* =====================================================================
   15. FORMS
   ===================================================================== */

form {
  position: relative;
}

input,
textarea,
select {
  width: 100%;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius: 14px;

  padding: 13px 15px;

  color: #fff;

  background:
    rgba(8,6,18,.92);

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}

input::placeholder,
textarea::placeholder {
  color: #898698;
}

input:focus,
textarea:focus,
select:focus {
  border-color:
    rgba(100,244,255,.52);

  outline: none;

  box-shadow:
    0 0 0 3px rgba(100,244,255,.07);
}


/* =====================================================================
   16. SUCCESS / POPUP OVERLAYS
   ===================================================================== */

.signup-success-overlay,
.win-popup {
  display: none;

  position: fixed;
  inset: 0;

  z-index: 2000;

  padding: 24px;

  align-items: center;
  justify-content: center;

  background:
    rgba(3,2,9,.90);
}

.signup-success-box,
.win-box {
  width: min(100%, 520px);

  padding: 30px;

  border:
    1px solid var(--stroke);

  border-radius:
    var(--radius-xl);

  text-align: center;

  background:
    var(--panel-solid);

  box-shadow:
    var(--shadow-lg);
}


/* =====================================================================
   17. MELODY FLOATING HOST
   ===================================================================== */

.melody-ai-wrapper {
  position: fixed;

  right: clamp(10px,2vw,22px);
  bottom: clamp(14px,2vw,24px);

  z-index: 850;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 8px;
}

.melody-host {
  width:
    clamp(88px,9vw,120px);

  border-radius: 24px;

  border:
    1px solid rgba(100,244,255,.15);

  background:
    rgba(9,6,20,.94);

  box-shadow:
    0 12px 30px rgba(0,0,0,.30);
}


/* =====================================================================
   18. AUDIO CONTROL BAR
   ===================================================================== */

.audio-control-bar {
  width:
    min(calc(100% - 32px), 760px);

  margin:
    40px auto;

  padding:
    13px 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  flex-wrap: wrap;

  border:
    1px solid var(--stroke);

  border-radius:
    18px;

  background:
    rgba(9,6,20,.92);

  box-shadow:
    var(--shadow-md);
}

.volume-slider {
  accent-color:
    var(--cyan);
}


/* =====================================================================
   19. NEON MOUSE TRAIL
   ===================================================================== */

.neon-trail {
  position: absolute;

  z-index: 9999;

  pointer-events: none;

  border-radius: 999px;

  opacity: .72;

  will-change:
    transform,
    opacity;
}

.trail-cyan {
  background:
    radial-gradient(
      circle,
      rgba(170,251,255,.90),
      rgba(100,244,255,.40) 42%,
      transparent 72%
    );
}

.trail-magenta {
  background:
    radial-gradient(
      circle,
      rgba(255,190,251,.92),
      rgba(255,60,247,.38) 42%,
      transparent 72%
    );
}


/* =====================================================================
   20. VIDEO / MEDIA
   ===================================================================== */

video {
  border-radius: 20px;

  background:
    #000;

  box-shadow:
    0 18px 46px rgba(0,0,0,.34);
}


/* =====================================================================
   21. FOOTER
   ===================================================================== */

.site-footer {
  position: relative;
  z-index: 5;

  margin-top:
    clamp(70px,8vw,120px);

  padding:
    40px 0;

  border-top:
    1px solid rgba(255,255,255,.07);

  background:
    linear-gradient(
      180deg,
      rgba(7,3,15,.78),
      rgba(4,2,9,.98)
    );
}

.footer-inner {
  text-align: center;
}

.footer-links,
.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 16px;
}

.footer-links a {
  color:
    var(--text-soft);

  font-weight:
    700;
}

.footer-links a:hover {
  color:
    var(--cyan);
}

.footer-separator {
  opacity:
    .35;
}

.social-btn {
  width: 42px;
  height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.035);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.social-btn:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(100,244,255,.32);

  background:
    rgba(100,244,255,.07);
}

.footer-copy {
  color:
    var(--text-muted);

  font-size:
    .84rem;
}


/* =====================================================================
   22. TABLES
   ===================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding:
    12px 14px;

  border-bottom:
    1px solid rgba(255,255,255,.07);

  text-align:
    left;
}

th {
  color:
    #fff;

  font-weight:
    850;
}


/* =====================================================================
   23. UTILITY CLASSES
   ===================================================================== */

.text-center {
  text-align:
    center;
}

.hidden {
  display:
    none !important;
}

.flex {
  display:
    flex;
}

.flex-center {
  display:
    flex;
  align-items:
    center;
  justify-content:
    center;
}

.section-header-split {
  display:
    flex;
  align-items:
    end;
  justify-content:
    space-between;

  gap:
    24px;

  margin-bottom:
    30px;
}


/* =====================================================================
   24. RESPONSIVE — TABLET
   ===================================================================== */

@media (max-width: 980px) {

  :root {
    --nav-h: 112px;
  }

  .ronin-release-grid,
  .book-layout,
  .book-detail-grid {
    grid-template-columns:
      1fr;
  }

  .ronin-release-art,
  .book-cover-frame {
    max-width:
      620px;

    margin-inline:
      auto;
  }

  .ronin-release-copy-wrap {
    text-align:
      center;
  }

  .ronin-release-actions,
  .ronin-formats,
  .ronin-release-kicker {
    justify-content:
      center;
  }

  .ronin-release-copy {
    margin-inline:
      auto;
  }

  .section-header-split {
    flex-direction:
      column;

    align-items:
      center;

    text-align:
      center;
  }
}


/* =====================================================================
   25. RESPONSIVE — MOBILE
   ===================================================================== */

@media (max-width: 700px) {

  body.stars-bg {
    background-size:
      100% 100%,
      100% auto,
      100% 100%;
  }

  .site-header {
    padding:
      8px 0;
  }

  .main-nav {
    min-height:
      78px;

    justify-content:
      flex-start;

    padding-left:
      72px;
  }

  .nav-links {
    display:
      none;
  }

  .luxury-section,
  .centered-section,
  .ronin-release {
    width:
      min(calc(100% - 20px), var(--max));

    border-radius:
      24px;

    padding:
      22px 16px;
  }

  .hero,
  .home-hero,
  .hero-section {
    width:
      min(calc(100% - 20px), var(--max));

    min-height:
      auto;

    padding:
      64px 10px;
  }

  .ronin-release-actions {
    flex-direction:
      column;
  }

  .ronin-release-actions > * {
    width:
      100%;
  }

  .ronin-release-actions a,
  .ronin-release-actions button {
    width:
      100%;
  }

  .audio-control-bar {
    width:
      calc(100% - 20px);
  }

  .melody-ai-wrapper {
    right:
      8px;

    bottom:
      10px;
  }

  .melody-host {
    width:
      82px;
  }
}


/* =====================================================================
   26. VERY SMALL MOBILE
   ===================================================================== */

@media (max-width: 430px) {

  h1 {
    font-size:
      clamp(2.1rem, 12vw, 3.3rem);
  }

  h2 {
    font-size:
      clamp(1.7rem, 8vw, 2.5rem);
  }

  .book-grid,
  .experience-grid,
  .network-grid,
  .release-grid,
  .cards-grid {
    grid-template-columns:
      1fr;
  }
}


/* =====================================================================
   27. REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }

  *,
  *::before,
  *::after {
    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;

    scroll-behavior:
      auto !important;
  }

  .shooting-stars-layer {
    display:
      none;
  }

  .neon-trail {
    display:
      none;
  }
}


/* =====================================================================
   28. PRINT
   ===================================================================== */

@media print {

  .site-header,
  .mobile-menu,
  .shooting-stars-layer,
  .melody-ai-wrapper,
  .audio-control-bar,
  .neon-trail {
    display:
      none !important;
  }

  body,
  body.stars-bg {
    color:
      #000;

    background:
      #fff !important;
  }
}


/* =====================================================================
   JAREZ SMOOTH BOOKS — SUPREME V2
   LIVE MARKUP COMPATIBILITY / FINAL CASCADE
   ===================================================================== */


/* ---------- HEADER ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5000;
  width: 100%;

  padding: 10px 0;

  background:
    linear-gradient(
      180deg,
      rgba(5,2,12,.985) 0%,
      rgba(8,3,18,.965) 100%
    );

  border-bottom: 1px solid rgba(255,255,255,.07);

  box-shadow:
    0 14px 40px rgba(0,0,0,.34),
    0 1px 0 rgba(100,244,255,.04);

  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}


/* ---------- NAV FRAME ---------- */

.main-nav {
  width: min(calc(100% - 32px), 1240px);
  min-height: 86px;

  margin: 0 auto;

  display: grid;
  grid-template-columns: 112px 1fr 112px;

  align-items: center;

  position: relative;
}


/* ---------- LOGO ---------- */

.logo-wrapper {
  grid-column: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.logo-wrapper .logo {
  width: 82px;
  height: 82px;
  max-width: none;
  max-height: none;

  object-fit: contain;

  filter:
    drop-shadow(0 0 8px rgba(100,244,255,.16))
    drop-shadow(0 0 14px rgba(255,60,247,.10));

  animation: none !important;
  transform: none !important;
}


/* ---------- DESKTOP NAV ---------- */

.nav-tabs {
  grid-column: 2;

  display: flex;
  justify-content: center;
  align-items: center;

  gap: 8px;

  list-style: none;

  margin: 0;
  padding: 0;
}

.nav-tabs li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-tabs li::marker {
  content: "";
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;

  padding: 9px 16px;

  border: 1px solid transparent;
  border-radius: 999px;

  color: #d9d8e5;

  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .02em;

  background: transparent;

  transition:
    transform .18s ease,
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.nav-btn:hover {
  color: #fff;

  background: rgba(255,255,255,.055);

  border-color: rgba(100,244,255,.14);

  transform: translateY(-1px);
}

.nav-btn.active {
  color: #fff;

  background:
    linear-gradient(
      135deg,
      rgba(100,244,255,.12),
      rgba(140,82,255,.14),
      rgba(255,60,247,.09)
    );

  border-color: rgba(100,244,255,.22);

  box-shadow:
    0 0 18px rgba(100,244,255,.07);
}


/* ---------- FLYING BOOK ---------- */

.flying-book {
  grid-column: 3;

  justify-self: end;

  width: 76px;
  max-height: 72px;

  object-fit: contain;

  animation: none !important;
  transform: none !important;

  filter:
    drop-shadow(0 0 10px rgba(100,244,255,.12));
}


/* ---------- HAMBURGER ---------- */

.hamburger {
  display: none;
}


/* =====================================================================
   HERO — CINEMATIC TWO-COLUMN SYSTEM
   ===================================================================== */

.main-content {
  position: relative;
  z-index: 2;
}

.home-hero {
  width: min(calc(100% - 32px), 1240px);

  min-height: unset;

  margin: 42px auto 34px;

  padding: clamp(22px, 3vw, 34px);

  display: grid;
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(340px, .88fr);

  gap: clamp(26px, 4vw, 50px);

  align-items: stretch;

  text-align: left;

  border-radius: 34px;

  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(100,244,255,.075),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 15%,
      rgba(255,60,247,.065),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    ),
    rgba(8,5,18,.84);

  border: 1px solid rgba(255,255,255,.085);

  box-shadow:
    0 30px 80px rgba(0,0,0,.42),
    0 0 34px rgba(100,244,255,.045);
}


/* ---------- HERO COPY ---------- */

.hero-copy {
  padding: clamp(30px, 4vw, 54px);

  display: flex;
  flex-direction: column;
  justify-content: center;

  text-align: left;

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.008)
    );

  border: 1px solid rgba(255,255,255,.055);

  box-shadow: none;
}

.hero-kicker {
  width: fit-content;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 18px;

  padding: 9px 14px;

  border-radius: 999px;

  border: 1px solid rgba(100,244,255,.16);

  background: rgba(100,244,255,.045);

  color: #b9fbff;

  font-family: 'Orbitron', sans-serif;

  font-size: .72rem;
  font-weight: 800;

  letter-spacing: .13em;
  text-transform: uppercase;
}

.hero-title {
  margin: 0;

  max-width: 760px;

  font-size:
    clamp(3rem, 6vw, 6.1rem);

  line-height: .97;

  letter-spacing: -.045em;

  background:
    linear-gradient(
      92deg,
      #ffffff 0%,
      #aefaff 25%,
      #d7c2ff 57%,
      #ffb5f9 82%,
      #ffffff 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.hero-subtitle,
.hero-copy .hero-subtitle {
  max-width: 680px;

  margin: 24px 0 0;

  color: #d2d0df;

  font-size:
    clamp(1rem, 1.45vw, 1.14rem);

  line-height: 1.85;
}


/* ---------- HERO ACTIONS ---------- */

.hero-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 28px;
}

.hero-actions .neon-button,
.hero-actions .mega-view-more {
  margin: 0;

  min-height: 52px;

  padding: 13px 20px;

  border-radius: 14px;
}


/* ---------- HERO NOTES ---------- */

.hero-notes {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 11px;

  margin-top: 30px;
}

.hero-note {
  padding: 14px;

  border-radius: 17px;

  background:
    rgba(255,255,255,.028);

  border:
    1px solid rgba(255,255,255,.065);
}

.hero-note strong {
  display: block;

  margin-bottom: 5px;

  color: #fff;

  font-family:
    'Orbitron', sans-serif;

  font-size: .72rem;

  letter-spacing: .075em;

  text-transform: uppercase;
}

.hero-note span {
  color: #aaa7ba;

  font-size: .83rem;

  line-height: 1.55;
}


/* =====================================================================
   HERO VISUAL
   ===================================================================== */

.hero-visual {
  position: relative;

  padding: 12px;

  overflow: hidden;

  border-radius: 28px;

  background:
    rgba(7,4,15,.72);

  border:
    1px solid rgba(255,255,255,.065);

  box-shadow: none;
}

.hero-visual-stack {
  position: relative;

  width: 100%;
  min-height: 560px;

  overflow: hidden;

  border-radius: 22px;

  background:
    #080512;

  border:
    1px solid rgba(255,255,255,.055);
}

.hero-poster {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  opacity: .42;

  filter: none;
}


/* ---------- BOOK STACK ---------- */

.hero-book-card {
  position: absolute;

  width: 178px;

  overflow: hidden;

  border-radius: 19px;

  border:
    1px solid rgba(255,255,255,.10);

  background:
    #0b0717;

  box-shadow:
    0 20px 42px rgba(0,0,0,.44);
}

.hero-book-card img {
  width: 100%;

  aspect-ratio: .72;

  object-fit: cover;
}

.hero-book-card.primary {
  top: 66px;
  right: 38px;

  z-index: 4;

  transform: rotate(4deg);
}

.hero-book-card.secondary {
  bottom: 62px;
  left: 28px;

  z-index: 3;

  transform: rotate(-5deg);
}

.hero-book-card.tertiary {
  width: 146px;

  right: 74px;
  bottom: 28px;

  z-index: 2;

  transform: rotate(7deg);
}


/* ---------- HERO QUOTE ---------- */

.hero-quote {
  position: absolute;

  top: 22px;
  left: 20px;

  z-index: 5;

  max-width: 220px;

  padding: 13px 15px;

  border-radius: 15px;

  color: #c8c6d5;

  font-size: .83rem;

  line-height: 1.6;

  background:
    rgba(8,5,17,.94);

  border:
    1px solid rgba(100,244,255,.12);

  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}


/* =====================================================================
   TABLET
   ===================================================================== */

@media (max-width: 980px) {

  .main-nav {
    grid-template-columns:
      90px 1fr 80px;
  }

  .logo-wrapper .logo {
    width: 72px;
    height: 72px;
  }

  .flying-book {
    width: 62px;
  }

  .home-hero {
    grid-template-columns:
      1fr;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-kicker {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-subtitle,
  .hero-copy .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-visual {
    max-width: 700px;

    margin-inline: auto;
  }
}


/* =====================================================================
   MOBILE
   ===================================================================== */

@media (max-width: 760px) {

  .site-header {
    padding: 7px 0;
  }

  .main-nav {
    width: calc(100% - 20px);

    min-height: 72px;

    display: flex;
    justify-content: space-between;
  }

  .logo-wrapper .logo {
    width: 62px;
    height: 62px;
  }

  .nav-tabs,
  .flying-book {
    display: none;
  }

  .hamburger {
    width: 46px;
    height: 46px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 5px;

    border-radius: 13px;

    border:
      1px solid rgba(255,255,255,.08);

    background:
      rgba(255,255,255,.035);

    cursor: pointer;
  }

  .hamburger span {
    display: block;

    width: 20px;
    height: 2px;

    border-radius: 999px;

    background: #fff;
  }

  .mobile-menu {
    position: absolute;

    top: calc(100% + 8px);

    left: 0;
    right: 0;

    z-index: 1200;

    padding: 14px;

    border-radius: 18px;

    background:
      #0a0616;

    border:
      1px solid rgba(255,255,255,.08);

    box-shadow:
      0 20px 46px rgba(0,0,0,.42);

    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .home-hero {
    width: calc(100% - 20px);

    margin-top: 20px;

    padding: 14px;

    border-radius: 24px;
  }

  .hero-copy {
    padding: 30px 18px;
  }

  .hero-title {
    font-size:
      clamp(2.5rem, 13vw, 4.4rem);
  }

  .hero-notes {
    grid-template-columns:
      1fr;
  }

  .hero-actions {
    flex-direction:
      column;
  }

  .hero-actions a {
    width:
      100%;
  }

  .hero-visual-stack {
    min-height:
      490px;
  }

  .hero-book-card {
    width:
      150px;
  }

  .hero-book-card.primary {
    right:
      20px;
  }

  .hero-book-card.secondary {
    left:
      18px;
  }

  .hero-book-card.tertiary {
    width:
      126px;

    right:
      46px;
  }
}


/* =====================================================================
   JAREZ SMOOTH BOOKS — SUPREME V2
   SITE-WIDE PAGE COMPATIBILITY
   ===================================================================== */

/* Prevent browser-default bullets from appearing in navigation */
.nav-tabs,
.nav-tabs li,
.nav-links,
.nav-links li {
  list-style: none !important;
}

.nav-tabs {
  margin: 0 !important;
  padding: 0 !important;
}


/* ---------- GENERAL INNER PAGE HERO ---------- */

.page-hero,
.inner-hero,
.about-hero,
.books-hero,
.news-hero,
.contact-hero,
.faq-hero {
  width: min(calc(100% - 32px), 1240px);
  margin: 30px auto 34px;
  padding: clamp(28px, 4vw, 54px);

  border-radius: 32px;

  background:
    linear-gradient(145deg,
      rgba(5,3,14,.28),
      rgba(8,5,20,.48)
    );

  border: 1px solid rgba(255,255,255,.075);

  box-shadow:
    0 24px 70px rgba(0,0,0,.30);
}


/* ---------- COMMON HERO GRIDS ---------- */

.page-hero-grid,
.inner-hero-grid,
.about-hero-grid,
.books-hero-grid,
.news-hero-grid,
.contact-hero-grid,
.faq-hero-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(300px, .7fr);

  gap: clamp(30px, 4vw, 54px);
  align-items: center;
}


/* ---------- COMMON HERO COPY ---------- */

.page-hero-copy,
.inner-hero-copy,
.about-hero-copy,
.books-hero-copy,
.news-hero-copy,
.contact-hero-copy,
.faq-hero-copy {
  max-width: 760px;
}

.page-hero h1,
.inner-hero h1,
.about-hero h1,
.books-hero h1,
.news-hero h1,
.contact-hero h1,
.faq-hero h1 {
  margin: 0 0 20px;

  font-size:
    clamp(3rem, 6.2vw, 6.25rem);

  line-height: .98;
  letter-spacing: -.045em;

  background:
    linear-gradient(
      92deg,
      #fff 0%,
      #aefaff 24%,
      #d7c3ff 58%,
      #ffb7f9 84%,
      #fff 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.page-hero p,
.inner-hero p,
.about-hero p,
.books-hero p,
.news-hero p,
.contact-hero p,
.faq-hero p {
  max-width: 720px;

  color: #d5d2df;

  font-size:
    clamp(1rem, 1.45vw, 1.15rem);

  line-height: 1.8;
}


/* ---------- INNER PAGE CONTENT ---------- */

.content-section,
.page-section,
.about-section,
.books-section,
.news-section,
.contact-section,
.faq-section {
  width: min(calc(100% - 32px), 1240px);
  margin: 32px auto;

  padding:
    clamp(26px, 4vw, 48px);

  border-radius: 30px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.040),
      rgba(255,255,255,.010)
    ),
    rgba(8,5,18,.80);

  border:
    1px solid rgba(255,255,255,.075);

  box-shadow:
    0 22px 62px rgba(0,0,0,.30);
}


/* ---------- TWO COLUMN CONTENT ---------- */

.two-column,
.two-col,
.content-grid,
.page-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap:
    clamp(22px, 3vw, 36px);

  align-items: start;
}


/* ---------- GENERAL INNER CARDS ---------- */

.info-card,
.feature-card,
.reason-card,
.faq-card,
.contact-card,
.news-card,
.book-card {
  border-radius: 22px;

  border:
    1px solid rgba(255,255,255,.075);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    ),
    rgba(9,6,20,.82);

  box-shadow:
    0 16px 38px rgba(0,0,0,.26);
}


/* =====================================================================
   LEGAL PAGES — TERMS + PRIVACY
   ===================================================================== */

body.legal-page {
  background-color: #05020b;
}

.legal-page .main-content,
.legal-page main {
  width: min(calc(100% - 32px), 1120px);
  margin: 38px auto 80px;
}


/* Legal title hero */
.legal-page .legal-hero {
  position: relative;

  overflow: hidden;

  margin-bottom: 30px;

  padding:
    clamp(52px, 7vw, 88px)
    clamp(26px, 6vw, 72px);

  border-radius: 32px;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(100,244,255,.085),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 20%,
      rgba(255,60,247,.075),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.008)
    ),
    rgba(8,5,18,.88);

  border:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    0 28px 78px rgba(0,0,0,.38);
}

.legal-page .legal-hero h1 {
  max-width: 720px;

  margin: 0 0 18px;

  font-size:
    clamp(3.2rem, 7vw, 6.2rem);

  line-height: .98;

  letter-spacing: -.045em;

  background:
    linear-gradient(
      90deg,
      #bafaff,
      #cfc8ff 50%,
      #ffb4f6
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.legal-page .legal-hero p {
  max-width: 760px;

  margin: 0;

  color: #d2cfdd;

  font-size:
    clamp(1rem,1.4vw,1.15rem);

  line-height: 1.8;
}


/* Legal article */
.legal-page .legal-content {
  padding:
    clamp(28px,4vw,54px);

  border-radius:
    30px;

  background:
    rgba(8,5,18,.90);

  border:
    1px solid rgba(255,255,255,.075);

  box-shadow:
    0 22px 62px rgba(0,0,0,.32);
}

.legal-page .legal-content h2 {
  margin:
    42px 0 14px;

  font-size:
    clamp(1.45rem,2.5vw,2.15rem);

  color:
    #fff;
}

.legal-page .legal-content h2:first-child {
  margin-top:
    0;
}

.legal-page .legal-content h3 {
  margin:
    28px 0 10px;

  color:
    #bdfaff;
}

.legal-page .legal-content p,
.legal-page .legal-content li {
  color:
    #cbc8d6;

  line-height:
    1.85;

  font-size:
    1rem;
}

.legal-page .legal-content ul,
.legal-page .legal-content ol {
  padding-left:
    1.4rem;
}

.legal-page .legal-content li + li {
  margin-top:
    8px;
}

.legal-page .legal-meta {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-top:
    22px;
}

.legal-page .legal-chip {
  padding:
    8px 12px;

  border-radius:
    999px;

  color:
    #bbb7ca;

  font-size:
    .78rem;

  border:
    1px solid rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.028);
}


/* =====================================================================
   GLOBAL RESPONSIVE ALIGNMENT
   ===================================================================== */

@media (max-width: 980px) {
  .page-hero-grid,
  .inner-hero-grid,
  .about-hero-grid,
  .books-hero-grid,
  .news-hero-grid,
  .contact-hero-grid,
  .faq-hero-grid {
    grid-template-columns: 1fr;
  }

  .two-column,
  .two-col,
  .content-grid,
  .page-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .page-hero,
  .inner-hero,
  .about-hero,
  .books-hero,
  .news-hero,
  .contact-hero,
  .faq-hero {
    width: calc(100% - 20px);
    margin-top: 18px;
    padding: 26px 18px;
    border-radius: 24px;
  }

  .content-section,
  .page-section,
  .about-section,
  .books-section,
  .news-section,
  .contact-section,
  .faq-section {
    width: calc(100% - 20px);
    padding: 22px 16px;
  }

  .legal-page main,
  .legal-page .main-content {
    width: calc(100% - 20px);
  }

  .legal-page .legal-hero,
  .legal-page .legal-content {
    padding: 28px 20px;
    border-radius: 24px;
  }
}

/* =========================================================
   INNER PAGE HERO LEFT CONTENT — CENTER SHIFT + CONTAINER BOX
========================================================= */

.about-hero-grid,
.books-hero-grid,
.news-hero-grid,
.contact-hero-grid,
.faq-hero-grid,
.page-hero-grid,
.inner-hero-grid {
  align-items: center;
}

/* Move the left content inward and place it in a box */
.about-hero-copy,
.books-hero-copy,
.news-hero-copy,
.contact-hero-copy,
.faq-hero-copy,
.page-hero-copy,
.inner-hero-copy {
  max-width: 860px;
  margin-left: clamp(24px, 5vw, 90px);
  margin-right: auto;
  padding: clamp(24px, 3vw, 38px);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(8, 10, 24, 0.78), rgba(12, 8, 28, 0.68));
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow:
    0 22px 60px rgba(0,0,0,0.34),
    0 0 28px rgba(100,244,255,0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Tighten spacing inside the box */
.about-hero-copy > *:first-child,
.books-hero-copy > *:first-child,
.news-hero-copy > *:first-child,
.contact-hero-copy > *:first-child,
.faq-hero-copy > *:first-child,
.page-hero-copy > *:first-child,
.inner-hero-copy > *:first-child {
  margin-top: 0;
}

.about-hero-copy > *:last-child,
.books-hero-copy > *:last-child,
.news-hero-copy > *:last-child,
.contact-hero-copy > *:last-child,
.faq-hero-copy > *:last-child,
.page-hero-copy > *:last-child,
.inner-hero-copy > *:last-child {
  margin-bottom: 0;
}

/* Better spacing for button row inside hero */
.about-hero-copy .hero-actions,
.books-hero-copy .hero-actions,
.news-hero-copy .hero-actions,
.contact-hero-copy .hero-actions,
.faq-hero-copy .hero-actions,
.page-hero-copy .hero-actions,
.inner-hero-copy .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

/* Better spacing for mini feature columns inside hero */
.about-hero-copy .hero-mini-grid,
.books-hero-copy .hero-mini-grid,
.news-hero-copy .hero-mini-grid,
.contact-hero-copy .hero-mini-grid,
.faq-hero-copy .hero-mini-grid,
.page-hero-copy .hero-mini-grid,
.inner-hero-copy .hero-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
  margin-top: 30px;
}

/* If those mini items are plain divs/articles, make them read cleaner */
.about-hero-copy .hero-mini-grid > *,
.books-hero-copy .hero-mini-grid > *,
.news-hero-copy .hero-mini-grid > *,
.contact-hero-copy .hero-mini-grid > *,
.faq-hero-copy .hero-mini-grid > *,
.page-hero-copy .hero-mini-grid > *,
.inner-hero-copy .hero-mini-grid > * {
  padding: 10px 2px 0;
}

/* Responsive */
@media (max-width: 1100px) {
  .about-hero-copy,
  .books-hero-copy,
  .news-hero-copy,
  .contact-hero-copy,
  .faq-hero-copy,
  .page-hero-copy,
  .inner-hero-copy {
    margin-left: clamp(10px, 3vw, 30px);
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  .about-hero-copy,
  .books-hero-copy,
  .news-hero-copy,
  .contact-hero-copy,
  .faq-hero-copy,
  .page-hero-copy,
  .inner-hero-copy {
    margin-left: 0;
    padding: 22px 18px;
    border-radius: 22px;
  }

  .about-hero-copy .hero-mini-grid,
  .books-hero-copy .hero-mini-grid,
  .news-hero-copy .hero-mini-grid,
  .contact-hero-copy .hero-mini-grid,
  .faq-hero-copy .hero-mini-grid,
  .page-hero-copy .hero-mini-grid,
  .inner-hero-copy .hero-mini-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* =====================================================================
   JAREZ SMOOTH BOOKS — MEMORY GAME
   SUPREME V2 PRODUCTION MODULE
   ===================================================================== */

.game-page-wrap {
  width: min(calc(100% - 32px), 1180px);
  margin: 0 auto;
  padding: 42px 0 90px;
}


/* ---------- GAME PANEL ---------- */

.memory-game-section {
  width: 100%;
  margin: 0 auto;

  padding:
    clamp(28px, 4vw, 52px);

  border-radius: 32px;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(100,244,255,.07),
      transparent 32%
    ),
    radial-gradient(
      circle at 90% 20%,
      rgba(255,60,247,.06),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.01)
    ),
    rgba(8,5,18,.91);

  border:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    0 28px 76px rgba(0,0,0,.38);
}


.memory-game-section .section-title {
  margin-bottom: 12px;

  font-size:
    clamp(2.1rem, 5vw, 4rem);

  line-height: 1;

  background:
    linear-gradient(
      90deg,
      #bdfbff,
      #d4c9ff 54%,
      #ffb5f7
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.memory-game-section .section-text {
  max-width: 700px;
  margin: 0 auto;

  color: #c8c5d4;

  font-size:
    clamp(.96rem, 1.4vw, 1.08rem);

  line-height: 1.75;
}


/* ---------- GAME GRID ---------- */

.memory-grid {
  width: min(100%, 920px);

  margin:
    32px auto 0;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    clamp(12px, 2vw, 20px);

  perspective: 1200px;
}


/* ---------- CARD SHELL ---------- */

.memory-card {
  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1;

  cursor: pointer;

  border: 0;
  border-radius: 20px;

  background: transparent;

  perspective: 1000px;

  overflow: visible;

  isolation: isolate;
}


/* Support alternate JS-generated class naming */
.memory-card-inner,
.card-inner {
  position: relative;

  width: 100%;
  height: 100%;

  border-radius: inherit;

  transform-style: preserve-3d;

  transition:
    transform .48s cubic-bezier(.22,.8,.24,1);
}


/* Flip states */
.memory-card.flipped .memory-card-inner,
.memory-card.matched .memory-card-inner,
.memory-card.flipped .card-inner,
.memory-card.matched .card-inner,
.memory-card.is-flipped .memory-card-inner,
.memory-card.is-matched .memory-card-inner {
  transform: rotateY(180deg);
}


/* ---------- CARD FACES ---------- */

.memory-card-front,
.memory-card-back,
.card-front,
.card-back {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px;

  border-radius: inherit;

  overflow: hidden;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  border:
    1px solid rgba(255,255,255,.085);

  box-shadow:
    0 15px 34px rgba(0,0,0,.32);
}


/* Back / hidden side */
.memory-card-front,
.card-front {
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(140,82,255,.22),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      #10091f,
      #080512
    );
}


/* Visible image side */
.memory-card-back,
.card-back {
  transform: rotateY(180deg);

  background:
    rgba(8,5,18,.97);
}


/* ---------- GAME IMAGES ---------- */

.memory-card img,
.memory-card-front img,
.memory-card-back img,
.card-front img,
.card-back img {
  display: block;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  border-radius: 13px;

  transform: none !important;

  filter: none !important;
}


/* Prevent logo / artwork from ever exploding outside card */
.memory-grid img {
  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;
}


/* ---------- CARD HOVER ---------- */

@media (hover: hover) {
  .memory-card:hover {
    transform: translateY(-3px);
  }

  .memory-card:hover .memory-card-front,
  .memory-card:hover .card-front {
    border-color:
      rgba(100,244,255,.28);

    box-shadow:
      0 18px 40px rgba(0,0,0,.36),
      0 0 24px rgba(100,244,255,.08);
  }
}


/* ---------- MATCHED STATE ---------- */

.memory-card.matched,
.memory-card.is-matched {
  cursor: default;
}

.memory-card.matched .memory-card-back,
.memory-card.matched .card-back,
.memory-card.is-matched .memory-card-back,
.memory-card.is-matched .card-back {
  border-color:
    rgba(100,244,255,.42);

  box-shadow:
    0 16px 38px rgba(0,0,0,.32),
    0 0 26px rgba(100,244,255,.14);
}


/* ---------- BUTTONS ---------- */

.restart-btn {
  min-width: 190px;
}

.game-bottom-actions {
  display: flex;
  justify-content: center;

  margin-top: 28px;
}

.return-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  min-height: 50px;

  padding: 12px 22px;

  border-radius: 14px;

  color: #fff;

  font-weight: 850;

  background:
    linear-gradient(
      135deg,
      rgba(100,244,255,.10),
      rgba(140,82,255,.13)
    ),
    rgba(9,6,20,.92);

  border:
    1px solid rgba(100,244,255,.18);

  box-shadow:
    0 14px 32px rgba(0,0,0,.28);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.return-btn:hover {
  transform: translateY(-2px);

  border-color:
    rgba(100,244,255,.42);

  box-shadow:
    0 18px 40px rgba(0,0,0,.34),
    0 0 20px rgba(100,244,255,.08);
}


/* =====================================================================
   WIN POPUP
   ===================================================================== */

.win-popup {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: none;

  align-items: center;
  justify-content: center;

  padding: 24px;

  background:
    rgba(3,2,9,.90);
}


/* support JS setting display:flex */
.win-popup[style*="flex"] {
  align-items: center;
  justify-content: center;
}


.win-box {
  width: min(100%, 520px);

  padding:
    clamp(28px, 5vw, 46px);

  border-radius: 28px;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(100,244,255,.09),
      transparent 34%
    ),
    rgba(10,6,22,.98);

  border:
    1px solid rgba(100,244,255,.18);

  box-shadow:
    0 32px 90px rgba(0,0,0,.54),
    0 0 38px rgba(100,244,255,.08);
}


/* =====================================================================
   GAME NAV
   ===================================================================== */

/* Six nav items now — keep clean spacing */
.game-page-wrap ~ * {}

body:has(.game-page-wrap) .nav-tabs {
  gap: 5px;
}

body:has(.game-page-wrap) .nav-btn {
  padding-inline: 13px;
}


/* =====================================================================
   TABLET
   ===================================================================== */

@media (max-width: 900px) {
  .memory-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap: 12px;
  }

  .game-page-wrap {
    width: calc(100% - 24px);
  }
}


/* =====================================================================
   MOBILE
   ===================================================================== */

@media (max-width: 640px) {
  .game-page-wrap {
    width: calc(100% - 20px);

    padding-top: 22px;
    padding-bottom: 60px;
  }

  .memory-game-section {
    padding: 24px 14px;

    border-radius: 24px;
  }

  .memory-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 10px;
  }

  .memory-card {
    border-radius: 14px;
  }
}


/* =====================================================================
   SMALL MOBILE
   ===================================================================== */

@media (max-width: 420px) {
  .memory-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* =====================================================================
   REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .memory-card-inner,
  .card-inner {
    transition: none;
  }
}


/* =====================================================================
   JAREZ SMOOTH MEMORY GAME
   COMPACT FULL-VIEW BOARD + LARGE ICONS
   ===================================================================== */


/* Entire game should fit comfortably within one desktop viewport */
.game-page-wrap {
  width: min(calc(100% - 24px), 1060px) !important;

  margin: 0 auto !important;

  padding-top: 16px !important;
  padding-bottom: 28px !important;
}


/* Make the outer game panel tighter */
.memory-game-section {
  padding:
    18px
    clamp(18px, 2.5vw, 30px)
    24px !important;

  border-radius: 26px !important;
}


/* Compact title */
.memory-game-section .section-title {
  margin-bottom: 8px !important;

  font-size:
    clamp(2rem, 3.4vw, 3.25rem) !important;

  line-height: 1 !important;
}


/* Compact subtitle */
.memory-game-section .section-text {
  margin-bottom: 0 !important;

  font-size:
    .98rem !important;

  line-height: 1.5 !important;
}


/* Tighten Restart Game area */
.memory-game-section .restart-btn {
  min-width: 176px !important;

  min-height: 46px !important;

  padding: 10px 18px !important;
}


/* =====================================================================
   BOARD SIZE
   ===================================================================== */

.memory-grid {
  width: min(100%, 740px) !important;

  margin:
    22px auto 0 !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  gap:
    10px !important;
}


/* Smaller cards so all 12 fit in view */
.memory-card {
  width: 100% !important;

  aspect-ratio: 1 / .92 !important;

  min-width: 0 !important;

  border-radius: 16px !important;
}


/* Keep card internals clipped properly */
.memory-card-inner,
.card-inner {
  width: 100% !important;
  height: 100% !important;

  border-radius: 16px !important;
}


/* =====================================================================
   CARD FACES
   ===================================================================== */

.memory-card-front,
.memory-card-back,
.card-front,
.card-back {
  padding: 8px !important;

  border-radius: 16px !important;
}


/* JSB card-back logo */
.memory-card-front img,
.card-front img {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;

  border-radius: 11px !important;
}


/* =====================================================================
   MAKE REVEALED GAME EMOJIS MUCH BIGGER
   ===================================================================== */

.memory-card-back,
.card-back {
  font-size:
    clamp(3rem, 4.5vw, 4.7rem) !important;

  line-height: 1 !important;

  text-align: center !important;

  align-items: center !important;
  justify-content: center !important;
}


/* Catch common emoji/icon wrappers created by JS */
.memory-card-back span,
.memory-card-back i,
.memory-card-back div,
.card-back span,
.card-back i,
.card-back div,
.memory-card .emoji,
.memory-card .game-icon,
.memory-card .memory-icon {
  font-size: inherit !important;

  line-height: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* Font Awesome icons if any are used */
.memory-card-back .fa,
.memory-card-back .fas,
.memory-card-back .far,
.memory-card-back .fa-solid,
.memory-card-back .fa-regular,
.card-back .fa,
.card-back .fas,
.card-back .far,
.card-back .fa-solid,
.card-back .fa-regular {
  font-size:
    clamp(2.8rem, 4vw, 4.3rem) !important;
}


/* =====================================================================
   BOTTOM ACTION
   ===================================================================== */

.game-bottom-actions {
  margin-top: 18px !important;
}

.return-btn {
  min-height: 44px !important;

  padding: 9px 18px !important;
}


/* =====================================================================
   SHORT DESKTOP / LAPTOP SCREENS
   Keep whole board visible without vertical scrolling
   ===================================================================== */

@media (min-width: 700px) and (max-height: 900px) {

  .game-page-wrap {
    padding-top: 10px !important;
    padding-bottom: 16px !important;
  }

  .memory-game-section {
    padding-top: 14px !important;
    padding-bottom: 18px !important;
  }

  .memory-game-section .section-title {
    font-size:
      clamp(1.8rem, 3vw, 2.8rem) !important;
  }

  .memory-grid {
    width:
      min(100%, 660px) !important;

    margin-top:
      16px !important;

    gap:
      8px !important;
  }

  .memory-card-back,
  .card-back {
    font-size:
      clamp(2.8rem, 4vw, 4rem) !important;
  }

  .game-bottom-actions {
    margin-top:
      12px !important;
  }
}


/* =====================================================================
   TABLET
   ===================================================================== */

@media (max-width: 760px) {

  .memory-grid {
    width:
      min(100%, 620px) !important;

    grid-template-columns:
      repeat(4, minmax(0,1fr)) !important;

    gap:
      8px !important;
  }

  .memory-card-back,
  .card-back {
    font-size:
      clamp(2.4rem, 8vw, 3.6rem) !important;
  }
}


/* =====================================================================
   MOBILE
   ===================================================================== */

@media (max-width: 560px) {

  .game-page-wrap {
    width:
      calc(100% - 12px) !important;

    padding-top:
      10px !important;
  }

  .memory-game-section {
    padding:
      16px 10px 20px !important;
  }

  .memory-grid {
    width:
      100% !important;

    grid-template-columns:
      repeat(3, minmax(0,1fr)) !important;

    gap:
      7px !important;
  }

  .memory-card {
    border-radius:
      12px !important;
  }

  .memory-card-front,
  .memory-card-back,
  .card-front,
  .card-back {
    border-radius:
      12px !important;

    padding:
      5px !important;
  }

  .memory-card-back,
  .card-back {
    font-size:
      clamp(2.4rem, 12vw, 3.5rem) !important;
  }
}

/* ============================================================
   HOMEPAGE — SUPREME V2 TITLE ALIGNMENT
   Center major homepage headings consistently
========================================================= */

/* Main homepage hero */
.home-hero,
.home-hero .hero-copy,
.home-hero .hero-content {
  text-align: center !important;
}

.home-hero .hero-title,
.home-hero h1,
.home-hero h2 {
  width: 100%;
  max-width: 920px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Center hero kicker */
.home-hero .hero-kicker,
.home-hero .kicker {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Center subtitle / intro copy */
.home-hero .hero-subtitle,
.home-hero .hero-copy p {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Center homepage hero buttons */
.home-hero .hero-actions {
  justify-content: center !important;
}


/* ============================================================
   RONIN SLASHDOWN FEATURE
========================================================= */

.ronin-release-copy-wrap {
  text-align: center !important;
}

.ronin-release-kicker {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.ronin-release h2 {
  width: 100%;
  max-width: 820px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.ronin-release-copy {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.ronin-formats,
.ronin-release-actions {
  justify-content: center !important;
}

.ronin-support-note {
  text-align: center !important;
}


/* ============================================================
   HOMEPAGE SECTION TITLES
========================================================= */

.luxury-section > .section-title,
.centered-section > .section-title,
.section-header-split .section-title {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.section-header-split {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.section-header-split > div {
  width: 100%;
  text-align: center !important;
}

.section-header-split p {
  max-width: 800px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}


/* ============================================================
   SIGNUP / READERS LIST
========================================================= */

#signup,
#signup .section-title,
#signup h2,
#signup p {
  text-align: center !important;
}

#signup .section-title,
#signup h2,
#signup p {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ============================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {
  .home-hero .hero-title,
  .ronin-release h2,
  .section-header-split .section-title {
    text-align: center !important;
  }

  .ronin-release-copy-wrap {
    text-align: center !important;
  }
}

/* ============================================================
   HOMEPAGE — MEMORY GAME PROMO WIDTH FIX
========================================================= */

.memory-game-promo,
.game-promo,
.game-section,
.home-game-section {
  width: min(calc(100% - 32px), 900px) !important;
  max-width: 900px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding:
    clamp(28px, 4vw, 46px)
    clamp(20px, 4vw, 42px) !important;

  border-radius: 28px !important;
}


/* Center all content inside */
.memory-game-promo,
.memory-game-promo *,
.game-promo,
.game-promo *,
.game-section,
.game-section *,
.home-game-section,
.home-game-section * {
  text-align: center;
}


/* Limit paragraph width */
.memory-game-promo p,
.game-promo p,
.game-section p,
.home-game-section p {
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Keep button centered */
.memory-game-promo .neon-button,
.game-promo .neon-button,
.game-section .neon-button,
.home-game-section .neon-button {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Tablet */
@media (max-width: 980px) {
  .memory-game-promo,
  .game-promo,
  .game-section,
  .home-game-section {
    width: min(calc(100% - 24px), 820px) !important;
  }
}


/* Mobile */
@media (max-width: 700px) {
  .memory-game-promo,
  .game-promo,
  .game-section,
  .home-game-section {
    width: calc(100% - 20px) !important;
    max-width: none !important;

    padding: 24px 16px !important;

    border-radius: 22px !important;
  }
}