/* =========================================================
   ODIN LEGEND — CLEAN MASTER (NO CONFLICTS / SAME LOOK)
   ========================================================= */

/* Smooth scroll */
html{ scroll-behavior:smooth; }

/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Montserrat:wght@500;600;700&family=Luckiest+Guy&family=Cormorant+Garamond:wght@400;500;600;700&display=swap");

/* -------------------------
   TOKENS
------------------------- */
:root{
  --bg:#050505;
  --text:#f2f2f2;
  --muted:rgba(255,255,255,.78);
  --line:rgba(255,255,255,.14);

  --card-bg:rgba(10,10,10,.92);
  --card-line:rgba(255,255,255,.15);

  --radius:18px;

  /* Navbar */
  --nav-bg: rgba(0,0,0,.55);
  --nav-blur: 12px;
  --nav-h: 96px; /* desktop */
}

/* -------------------------
   BASE
------------------------- */
*{ box-sizing:border-box; }
html,body{
  margin:0;
  padding:0;
  background: var(--bg);
  color: var(--text);
  font-family: "Cormorant Garamond", serif;
}

/* Reserve space for fixed navbar */
body{ padding-top: var(--nav-h); }

/* Keep particles behind everything */
#embers{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  display:block;
}

/* content always above background layers */
.wrap, main, section, .hero, .intro{
  position: relative;
  z-index: 1;
}

/* -------------------------
   NAVBAR (GLASS)
------------------------- */
.navbar{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 9999;

  background: var(--nav-bg);
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.55);

  padding: 14px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.logo{
  font-size:14px;
  opacity:.9;
}

/* Menu */
.nav{
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Links */
.nav a{
  font-family:"Luckiest Guy", cursive;
  color:#fff;
  text-decoration:none;
  font-size:16px;
  letter-spacing:1px;
  position:relative;
}
.nav a:visited{ color:#fff; }

.nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:100%;
  height:2px;
  background: rgba(255,255,255,.8);
  transform: scaleX(1);
}
.nav a:hover{ opacity:.85; }

/* -------------------------
   HERO
------------------------- */
.hero{
  min-height: 90vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding: 80px 16px;

  background:
    radial-gradient(circle at center, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(circle, rgba(0,0,0,0.6) 0%, rgba(0,0,0,1) 70%),
    var(--bg);
}

.hero-content{
  max-width: 900px;
  display:grid;
  gap: 22px;
  justify-items:center;
}

/* ODIN TITLE */
.hero .odin-title{
  font-family:"Luckiest Guy", cursive;
  font-size: clamp(38px, 7vw, 50px);
  letter-spacing: .14em;
  color:#fff;
  margin:0;
}
.hero .odin-title span{
  display:block;
  font-family:"Cinzel", serif;
  font-size: clamp(20px, 3.8vw, 30px);
  letter-spacing:.10em;
  margin-top:10px;
}

/* Badges */
.badge,
.book-badge,
.nightmare-badge{
  display:inline-block;
  margin:0 auto;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  backdrop-filter: blur(6px);

  font-family:"Cinzel", serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Presents / small lines (if you use these classes) */
.presents{
  font-family:"Cinzel", serif;
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: .75;
  margin:0;
}

/* Volume title */
.volume-title{
  font-family:"Cinzel", serif;
  font-size: clamp(44px, 7vw, 84px);
  letter-spacing: 6px;
  text-transform: uppercase;
  margin: 8px 0 6px;
  text-shadow: 0 18px 60px rgba(0,0,0,.8);
}

/* Main hero h1 */
.hero h1{
  font-family:"Cinzel", serif;
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  margin:0;
}

/* subtitle */
.hero-sub{
  font-family:"Cinzel", serif;
  font-size: clamp(14px, 2.5vw, 20px);
  opacity: .85;
  max-width: 650px;
  margin:0 auto;
}

/* Hero illustration (the Odin logo art) */
.hero-image{
  width: min(260px, 80vw);
  max-width: 100%;
  height:auto;
  display:block;
  margin: 10px auto 20px;
  border-radius: 18px;
  filter:
    drop-shadow(0 26px 36px rgba(252,250,250,.30))
    drop-shadow(0 18px 28px rgba(0,0,0,.65));
  transition: transform .4s ease, filter .4s ease;
}
.hero-image:hover{ transform: translateY(-2px); }

/* ✅ VOL 2 COVER — ONLY THIS CLASS CONTROLS THE COVER SIZE */
.vol2-cover{
  width: min(380px, 92vw);
  height:auto;
  display:block;
  margin: 24px auto 10px;
  border-radius: 18px;
  filter: drop-shadow(0 25px 50px rgba(0,0,0,.7));
}

/* Actions */
.hero-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Generic buttons (if you still use .btn somewhere) */
.btn{
  margin-top: 32px;
  padding: 14px 36px;
  background:#1f1f1f;
  color:#fff;
  text-decoration:none;
  font-family:"Cormorant Garamond", serif;
  font-weight:600;
  border-radius: 32px;
  transition: background-color .3s ease, transform .2s ease;
}
.btn:hover{ background:#2a2a2a; transform: translateY(-2px); }
.btn.primary{ background:#fff; color:#000; }
.btn.primary:hover{ background:#eaeaea; }
.btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,.30); }
.btn.ghost:hover{ background: rgba(255,255,255,.08); }

/* CTA wrapper */
.cta-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 18px;
  padding: 28px 0;
}
.cta-note{
  font-size: 20px;
  opacity: .6;
  text-align:center;
  margin: 0;
}

/* -------------------------
   ODIN AMAZON + TIKTOK BUTTONS
------------------------- */
@keyframes btnBreathBig{
  0%,100%{ transform: scale(.94); }
  50%{ transform: scale(1.06); }
}

/* Amazon */
.amazon-odin-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding: 16px 34px;
  border-radius:999px;

  background: linear-gradient(180deg,#0a0a0a,#141414);
  border: 1px solid rgba(255,255,255,.25);
  color:#fff;
  text-decoration:none;

  font-size:15px;
  font-weight:800;
  letter-spacing:.8px;
  line-height:1;
  font-family:"Cinzel", serif;

  box-shadow:
    0 0 14px rgba(255,255,255,.25),
    0 0 40px rgba(255,255,255,.15);

  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  animation: btnBreathBig 3s ease-in-out infinite;
  will-change: transform;
}
.amazon-odin-btn:hover{
  animation:none;
  transform: scale(1.05);
  background: linear-gradient(180deg,#111,#1c1c1c);
  box-shadow:
    0 0 22px rgba(255,255,255,.45),
    0 0 80px rgba(255,255,255,.25);
}
.amazon-odin-icon{
  height:35px;
  width:auto;
  display:block;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.6));
}
.amazon-odin-btn span{ display:block; line-height:1; }

/* TikTok */
.tiktok-odin-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding: 16px 34px; /* ✅ fixed typo */
  border-radius:999px;

  background: linear-gradient(180deg,#0a0a0a,#141414);
  border: 1px solid rgba(255,255,255,.25);
  color:#fff;
  text-decoration:none;

  font-size:15px;
  font-weight:800;
  letter-spacing:.8px;
  line-height:1;
  font-family:"Cinzel", serif;

  box-shadow:
    0 0 18px rgba(255,255,255,.35),
    0 0 45px rgba(255,255,255,.18);

  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  animation: btnBreathBig 3s ease-in-out infinite;
  will-change: transform;
  position: relative;
  overflow:hidden;
}
.tiktok-odin-btn::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,.35), rgba(255,255,255,.08), rgba(255,255,255,.35));
  filter: blur(16px);
  opacity:.5;
  pointer-events:none;
  animation: odinGlowBtn 5s ease-in-out infinite;
}
@keyframes odinGlowBtn{
  0%,100%{ opacity:.35; }
  50%{ opacity:.6; }
}
.tiktok-odin-btn > *{ position:relative; z-index:1; }
.tiktok-odin-btn:hover{
  animation:none;
  transform: scale(1.05);
  background: linear-gradient(180deg,#111,#1c1c1c);
  box-shadow:
    0 0 22px rgba(255,255,255,.45),
    0 0 80px rgba(255,255,255,.25);
}
.tiktok-odin-icon{
  height:60px;
  width:auto;
  display:block;
  filter: drop-shadow(0 0 6px rgba(255,255,255,1));
}
.tiktok-odin-btn span{
  display:block;
  line-height:1;
  font-size:15px;
  font-family:"Cinzel", serif;
}

/* Force white text states */
.amazon-odin-btn,
.amazon-odin-btn span,
.tiktok-odin-btn,
.tiktok-odin-btn span{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
}

/* -------------------------
   BRING ALIVE
------------------------- */
.bring-alive{
  padding: 80px 20px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.05), rgba(0,0,0,0.95));
  display:flex;
  justify-content:center;
}

.bring-alive-box{
  max-width: 900px;
  width:100%;
  text-align:center;
  padding: 50px 40px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  position:relative;
  overflow:hidden;
  box-shadow:
    0 0 25px rgba(255,255,255,0.16),
    0 0 70px rgba(255,255,255,0.08),
    inset 0 0 22px rgba(255,255,255,0.05);
}
.bring-alive-box::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius: 22px;
  background: linear-gradient(120deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02), rgba(255,255,255,0.22));
  filter: blur(18px);
  opacity: .35;
  pointer-events:none;
  animation: boxGlow 6s ease-in-out infinite;
}
@keyframes boxGlow{
  0%,100%{ opacity:.22; transform: scale(1); }
  50%{ opacity:.45; transform: scale(1.02); }
}
.bring-alive-box > *{ position:relative; z-index:1; }

.bring-alive-title{
  font-family:"Cinzel", serif;
  font-size: clamp(30px, 5vw, 64px);
  letter-spacing: 2px;
  color:#fff;
  margin: 0 0 30px;
}
.bring-alive-text{
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
  max-width: 750px;
  margin: 0 auto 35px;
  font-family:"Cinzel", serif;
}
.bring-alive-text .email{
  display:inline-block;
  margin-top:10px;
  font-weight:600;
  color:#fff;
  text-shadow: 0 0 6px rgba(255,255,255,0.4);
}

/* breathing CTA */
@keyframes ol-breathe{
  0%{
    transform: scale(1);
    box-shadow: 0 0 18px rgba(255,255,255,0.08), inset 0 0 12px rgba(255,255,255,0.04);
  }
  50%{
    transform: scale(1.06);
    box-shadow: 0 0 30px rgba(255,255,255,0.22), inset 0 0 18px rgba(255,255,255,0.10);
  }
  100%{
    transform: scale(1);
    box-shadow: 0 0 18px rgba(255,255,255,0.08), inset 0 0 12px rgba(255,255,255,0.04);
  }
}
.bring-alive-btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding: 14px 26px;
  border-radius:999px;
  text-decoration:none;

  font-family:"Montserrat", sans-serif;
  font-weight:600;
  letter-spacing:.12em;
  font-size:.85rem;

  color: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.04);

  animation: ol-breathe 5.5s ease-in-out infinite;
  will-change: transform;
  transition: background .25s ease, border-color .25s ease;
}

.bring-alive-image{
  display:block;
  margin: 35px auto 40px;
  max-width: 175px;
  width:100%;
  filter: drop-shadow(0 0 20px rgba(255,255,255,0.35));
}

/* -------------------------
   LIGHTBOX / ZOOM / VIDEO
------------------------- */
.click-zoom,
.video-thumb{
  display:block;
  width: min(180px, 70vw);
  height:auto;
  margin: 18px auto;
  cursor:pointer;
  border-radius:10px;

  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
  -webkit-user-drag:none;
}

.lightbox{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 9999;
  padding:16px;
  touch-action: pan-y;
}
.lightbox.is-open{ display:flex; }

.lightbox-content,
#lightboxVideo{
  max-width: min(92vw, 900px);
  max-height: 86vh;
  width:auto;
  height:auto;
  border-radius:14px;
  background:#111;
}

.lightbox-close{
  position:fixed;
  top:14px;
  right:14px;
  z-index:10000;
  font-size:26px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color:#fff;
  border-radius:12px;
  padding: 8px 12px;
  cursor:pointer;
}

/* -------------------------
   PROMO IMAGE LINK
------------------------- */
.promo-link{
  display:block;
  width: fit-content;
  margin: 14px auto 0;
}
.promo-img{
  display:block;
  width: min(260px, 92vw);
  height:auto;
  border-radius:18px;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 0 18px rgba(255,255,255,0.35), 0 0 45px rgba(255,255,255,0.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.promo-link:hover .promo-img{
  transform: scale(1.04);
  box-shadow: 0 0 26px rgba(255,255,255,0.45), 0 0 70px rgba(255,255,255,0.25);
}

/* -------------------------
   BOOKS SECTION
------------------------- */
.books{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 80px 20px;
  background: transparent;
}
.books-content{
  text-align:center;
  max-width: 900px;
}
.books-title{
  font-family:"Cormorant Garamond", serif;
  font-size: clamp(36px, 6vw, 72px);
  color:#fff;
  text-shadow: 0 0 12px rgba(255,255,255,0.4);
  margin: 0 0 40px;
}
.book-cover{
  width: min(320px, 80vw);
  margin: 0 auto 30px;
  display:block;
  border-radius:25px;
  background: transparent;
  filter: drop-shadow(0 0 25px rgba(255,255,255,0.15));
}
.books-description{
  font-size:18px;
  color:#e0e0e0;
  margin: 0 0 35px;
  line-height:1.6;
}
.books-button{
  display:inline-block;
  padding: 14px 32px;
  border-radius: 40px;
  font-family:"Luckiest Guy", cursive;
  font-size:18px;
  color:#000;
  background:#fff;
  text-decoration:none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.books-button:hover{
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(255,255,255,0.6);
}

/* Extra book text blocks */
.books-text,
.book-features{
  max-width: 520px;
  margin: 0 auto;
  padding: 0 16px;
  font-family:"Cinzel", serif;
}
.books-line,
.book-features li{
  font-size: 15px;
  line-height: 1.6;
  color:#f2f2f2;
  margin-bottom: 12px;
  font-family:"Cinzel", serif;
}
.books-line.highlight{ font-weight:600; color:#fff; }

.underline{
  position:relative;
  font-weight:600;
}
.underline::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:100%;
  height:2px;
  background:#fff;
  box-shadow: 0 0 6px rgba(255,255,255,0.6);
}

/* -------------------------
   TRY SECTION (generic .section)
------------------------- */
.section{
  padding: 80px 20px;
  display:flex;
  justify-content:center;
}
.section-box{
  max-width: 900px;
  width:100%;
  background: rgba(10,10,10,0.92);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 18px;
  padding: 50px 30px;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:
    0 0 30px rgba(0,0,0,0.9),
    inset 0 0 25px rgba(255,255,255,0.03);
}
.section-box::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:22px;
  background: linear-gradient(120deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02), rgba(255,255,255,0.22));
  filter: blur(18px);
  opacity: .35;
  pointer-events:none;
  animation: boxGlow 6s ease-in-out infinite;
}
.section-box > *{ position:relative; z-index:1; }

.section-title{
  font-family:"Cinzel", serif;
  font-size: clamp(32px, 5vw, 56px);
  color:#fff;
  letter-spacing:2px;
  margin: 0 0 20px;
  text-shadow: 0 0 12px rgba(255,255,255,0.35);
}
.section-text{
  font-size: clamp(16px, 2.5vw, 18px);
  line-height:1.6;
  color:#ccc;
  max-width:650px;
  margin: 0 auto 35px;
  font-family:"Cinzel", serif;
}
.try-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
}
.try-btn{
  padding: 14px 26px;
  background:#111;
  color:#eee;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:30px;
  font-family:"Cinzel", serif;
  letter-spacing:1px;
  text-decoration:none;
  transition: all .3s ease;
}
.try-btn:hover{
  background:#1a1a1a;
  color:#fff;
  box-shadow: 0 0 14px rgba(255,255,255,0.35);
  transform: scale(1.05);
}

/* Try illustration */
.try-illustration{
  display:block;
  margin: 0 auto 25px;
  max-width: 220px;
  width:100%;
  filter:
    brightness(1.25)
    contrast(1.35)
    drop-shadow(0 0 18px rgba(255,255,255,0.35));
}
@media (max-width:600px){
  .section-box{ padding: 35px 20px; }
  .try-btn{ width:100%; text-align:center; }
  .try-illustration{ max-width:170px; margin-bottom:20px; }
}

/* -------------------------
   CONTACT
------------------------- */
.contact-section .contact-box{ max-width:900px; }

.contact-text{
  font-size: 1.05rem;
  line-height: 1.6;
  opacity:.95;
  margin: 14px 0;
  font-family:"Cinzel", serif;
}
.contact-subtitle{
  margin: 18px 0 8px;
  font-size: 1.25rem;
  letter-spacing:.5px;
  font-family:"Cinzel", serif;
}
.divider{
  height:1px;
  width:100%;
  margin: 22px auto;
  background: rgba(255,255,255,0.12);
}

.contact-email{
  display:inline-block;
  margin: 10px 0 12px;
  text-decoration:none;
  font-weight:800;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,0.35);
  padding-bottom:2px;
  font-family:"Cinzel", serif;
}
.contact-email:hover{ border-bottom-color: rgba(255,255,255,0.9); }

.contact-list{
  list-style:none;
  padding:0;
  margin: 10px 0 0;
  font-family:"Cinzel", serif;
}
.contact-list li{ margin: 8px 0; opacity:.92; }
.contact-list li::before{ content:"•"; margin-right:10px; opacity:.75; }

.contact-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin-top:10px;
}
.contact-card{
  border-radius:16px;
  padding:18px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.03);
}
.contact-card-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.contact-icon{
  width:78px;
  height:78px;
  object-fit:contain;
  filter: drop-shadow(0 0 18px rgba(255,255,255,0.22));
  transition: transform .18s ease, filter .18s ease;
}
.contact-card-link:hover .contact-icon{
  transform: scale(1.06);
  filter: drop-shadow(0 0 26px rgba(255,255,255,0.30));
}
.contact-card-title{
  margin: 16px 0 6px;
  font-size:1.1rem;
  letter-spacing:.4px;
  font-family:"Cinzel", serif;
}
.contact-card-text{
  margin: 0 0 12px;
  opacity:.92;
  line-height:1.55;
  font-family:"Cinzel", serif;
}

/* mini buttons */
@keyframes miniBreath{
  0%,100%{ transform: scale(.94); }
  50%{ transform: scale(1.06); }
}
.contact-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin-top:22px;
  flex-wrap:wrap;
}
.mini-btn{
  min-width:120px;
  padding: 10px 18px;
  text-align:center;

  border-radius:999px;
  border:1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.06);

  color:#f2f2f2;
  text-decoration:none;
  font-size:14px;
  letter-spacing:.4px;

  transition: all .25s ease;
  animation: miniBreath 3.2s ease-in-out infinite;
  will-change: transform;
}
.mini-btn:hover{
  animation:none;
  transform: translateY(-2px) scale(1.03);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 18px rgba(255,255,255,0.14);
}
.mini-btn:nth-child(2){ animation-delay:.2s; }
.mini-btn:nth-child(3){ animation-delay:.4s; }

/* legal */
.legal-wrapper{
  max-width: 900px;
  margin: 80px auto;
  padding: 0 20px;
  color:#eaeaea;
  line-height:1.7;
}
.legal-header h1{
  font-size:32px;
  margin: 0 0 10px;
  font-family:"Cinzel", serif;
}
.legal-subtitle{
  font-size:14px;
  opacity:.7;
  margin: 0 0 40px;
  font-family:"Cinzel", serif;
}
.legal-section{
  margin-bottom:40px;
  font-family:"Cinzel", serif;
}
.legal-section h2{
  font-size:20px;
  margin: 0 0 10px;
  border-left:3px solid #fff;
  padding-left:12px;
  font-family:"Cinzel", serif;
}
.legal-link, .legal-link:visited{
  color:#faf8f8;
  text-decoration:none;
  font-family:"Cinzel", serif;
}
.legal-link:hover{
  color:#fff;
  text-shadow: 0 0 6px rgba(255,255,255,0.4);
}

/* gallery */
.odin-gallery{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1100px;
  margin: 100px auto;
  padding: 0 20px;
}
.odin-frame{
  position:relative;
  padding:18px;
  border-radius:20px;
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 35px rgba(0,0,0,0.85), inset 0 0 25px rgba(255,255,255,0.05);
  transition: transform .5s ease, box-shadow .5s ease;
}
.odin-frame:hover{
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 0 45px rgba(0,0,0,0.95), 0 0 30px rgba(180,180,180,0.15), inset 0 0 30px rgba(255,255,255,0.08);
}
.odin-frame img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  object-fit:cover;
}
.odin-frame::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:22px;
  background: radial-gradient(circle at top, rgba(255,255,255,0.18), transparent 65%);
  pointer-events:none;
  opacity:.45;
}

/* return portal */
.return-portal-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  margin-top:35px;
}
.return-portal-btn{ display:inline-block; }

/* -------------------------
   RESPONSIVE
------------------------- */
@media (max-width: 820px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-icon{ width:72px; height:72px; }
}

@media (max-width: 520px){
  :root{ --nav-h: 112px; }

  .nav{ gap:14px; }
  .nav a{ font-size:14px; }

  .hero{ padding: 70px 14px; }
  .hero-image{ width: min(240px, 86vw); }
  .vol2-cover{ width: min(330px, 92vw); }
}

/* Vol 2 — line link (no box) */
.vol2-bridge{
  margin-top: 10px;
  opacity: .78;
  font-family: "Cinzel", serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
}

.vol2-bridge a{
  display: inline-block;
  margin-left: 10px;
  letter-spacing: .08em;
  text-transform: none;
  font-size: 12px;
  opacity: .9;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: 2px;
}

.vol2-bridge a:hover{
  opacity: 1;
  border-bottom-color: rgba(255,255,255,.85);
  text-shadow: 0 0 10px rgba(255,255,255,.2);
}

/* VOL 2 — BRIDGE LINE (clean) */
.vol2-bridge{
  margin: 10px auto 0;
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
  text-align: center;
}

/* lien blanc, jamais bleu/violet */
.vol2-bridge a,
.vol2-bridge a:visited,
.vol2-bridge a:active,
.vol2-bridge a:focus{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: 2px;
  opacity: .9;
}

.vol2-bridge a:hover{
  opacity: 1;
  border-bottom-color: rgba(255,255,255,.85);
  text-shadow: 0 0 10px rgba(255,255,255,.18);
}

/* ✅ EMBERS — toujours visible par-dessus les backgrounds */
#embers{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 50;          /* au-dessus des sections/background */
  display: block;
}

/* ✅ ton contenu reste AU-DESSUS des particules */
.hero,
section,
.wrap,
main{
  position: relative;
  z-index: 60;
}

/* ✅ navbar reste au-dessus de tout */
.navbar{
  z-index: 9999;
}
/* =========================
   EMBERS — HARD FIX (OVERRIDE)
   ========================= */
#embers{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;

  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: none !important;

  z-index: 2000 !important;        /* au-dessus de tes backgrounds */
  mix-blend-mode: screen;          /* optionnel: plus lumineux */
}

/* contenu AU-DESSUS des particules */
.navbar{ z-index: 9999 !important; }
.hero, section, main, .wrap{ position: relative; z-index: 3000; }

/* =========================
   FIX EMBERS VISIBILITY (TOP HERO)
   ========================= */

/* 1) Le canvas doit être AU-DESSUS des backgrounds */
#embers{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 20 !important;   /* <- force au-dessus des backgrounds */
}

/* 2) Le contenu doit rester au-dessus des particules */
.navbar,
.hero-content,
.section-box,
.bring-alive-box,
.books-content,
.contact-box{
  position: relative;
  z-index: 30;
}

/* 3) IMPORTANT : le background du HERO doit être TRANSPARENT
      sinon il cache le canvas */
.hero{
  background: transparent !important;
}

/* 4) Mets le background “ciné” sur le body à la place */
body{
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(circle, rgba(0,0,0,0.6) 0%, rgba(0,0,0,1) 70%),
    #0b0b0b !important;
}

/* =========================
   GLOBAL BACKGROUND UNIFORM (FIX)
   ========================= */

html, body{
  background: #050505 !important; /* noir uniforme */
}

/* ton ambiance "halo" globale, partout */
body{
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(circle, rgba(0,0,0,0.65) 0%, rgba(0,0,0,1) 72%),
    #050505 !important;
}

/* Toutes les sections doivent laisser voir le fond */
.hero,
.bring-alive,
.books,
.section,
.contact-section{
  background: transparent !important;
}

/* IMPORTANT : si une section ou wrapper ajoute une “bande”, on l’annule */
.hero::before, .hero::after,
.bring-alive::before, .bring-alive::after,
.books::before, .books::after,
.section::before, .section::after{
  display: none !important;
}

/* Reset spacing */
html, body{
  margin: 0;
  padding: 0;
}

.vol2-bridge{
  font-family: 'Cinzel', serif;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  margin-top: 40px;
  text-shadow: 0 0 20px rgba(255,255,255,0.15);
}

/* BOOK VIDEO SIZE CONTROL */
.book-video{
  width: 300px;        /* ajuste ici */
  max-width: 90%;
  height: auto;
  display: block;
  margin: 40px auto;   /* centre + espace */
  border-radius: 18px; /* optionnel, plus premium */
}

@media (max-width: 768px){
  .book-video{
    width: 90%;
  }
}

/* =========================
   BOOK IMAGE AURA GLOW
   ========================= */

.book-video{
  width: 500px;              /* ajuste si besoin */
  max-width: 90%;
  height: auto;
  display: block;
  margin: 40px auto;
  border-radius: 22px;

  /* 👇 Aura blanchâtre douce */
  box-shadow:
    0 0 25px rgba(255,255,255,0.12),
    0 0 60px rgba(255,255,255,0.06),
    0 0 120px rgba(255,255,255,0.04);
}

/* =========================
   VOL 2 COVER GLOW
   ========================= */

.vol2-cover{
  display: block;
  margin: 40px auto;
  max-width: 500px;
  width: 90%;
  border-radius: 24px;

  /* Aura blanchâtre */
  box-shadow:
    0 0 35px rgba(255,255,255,0.15),
    0 0 80px rgba(255,255,255,0.08),
    0 0 140px rgba(255,255,255,0.05);
}

.vol2-cover{
  box-shadow:
    0 0 40px rgba(255,255,255,0.20),
    0 0 90px rgba(255,255,255,0.10),
    0 0 160px rgba(255,255,255,0.06);
}

.vol2-cover{
  animation: vol2Glow 5s ease-in-out infinite alternate;
}

@keyframes vol2Glow{
  from{
    box-shadow:
      0 0 30px rgba(255,255,255,0.12),
      0 0 70px rgba(255,255,255,0.06);
  }
  to{
    box-shadow:
      0 0 45px rgba(255,255,255,0.22),
      0 0 120px rgba(255,255,255,0.09);
  }
}

.vol1-available{
  font-family:"Luckiest Guy", cursive;
  font-size: 30px;
  letter-spacing: 1px;
  margin-top: 18px;
  margin-bottom: 28px;
  text-align: center;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 0 15px rgba(255,255,255,0.08);
}

/* =========================
   TIKTOK BUTTON MOBILE FIX
   ========================= */

@media (max-width: 768px){

  .tiktok-odin-btn{
    display: flex;
    justify-content: center;
    align-items: center;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
  }

}

/* =========================
   BRING TO LIFE — MOBILE FIX
   ========================= */

@media (max-width: 900px){

  .bring-to-life-container,
  .bring-alive-box,
  .section-box{
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* Si layout en flex desktop */
  .bring-to-life-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Les cartes à droite */
  .info-card,
  .magic-card,
  .watermark-card{
    width: 100%;
    margin: 20px auto;
  }

  /* Le gros titre */
  .bring-title{
    text-align: center;
    margin-bottom: 30px;
  }

}

/* =========================================================
   BRING-TO-LIFE — HARD CENTER FIX (MOBILE + DESKTOP SAFE)
   Colle tout en bas du style.css
   ========================================================= */

/* évite un décalage horizontal invisible */
html, body { overflow-x: hidden; }

/* 1) Force les wrappers principaux à être centrés */
main,
.wrap,
.container,
.page,
.content,
.section,
.section-box {
  margin-left: auto;
  margin-right: auto;
}

/* 2) Si ta page bring-to-life a un wrapper (très probable) */
#bring-to-life,
.bring-to-life,
.bringtolife,
.bring-life,
.bring-to-life-page,
.btl,
.btl-page,
.page-bring-to-life {
  width: 100%;
  max-width: 1200px;           /* centre et limite la largeur */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* 3) Annule les causes classiques de décentrage */
#bring-to-life *,
.bring-to-life *,
.bringtolife *,
.bring-life *,
.bring-to-life-page *,
.btl *,
.btl-page *,
.page-bring-to-life *{
  /* si un élément a été poussé à droite par un vieux style */
  max-width: 100%;
}

/* si un bloc est déplacé avec transform/margin-left */
#bring-to-life .right,
#bring-to-life .left,
.bring-to-life .right,
.bring-to-life .left,
.btl .right,
.btl .left,
.page-bring-to-life .right,
.page-bring-to-life .left{
  margin-left: 0 !important;
  transform: none !important;
}

/* 4) Layout responsive : sur mobile, tout devient en colonne et centré */
@media (max-width: 900px){

  /* si ta page est en grid 2 colonnes */
  #bring-to-life,
  .bring-to-life,
  .bringtolife,
  .bring-life,
  .bring-to-life-page,
  .btl,
  .btl-page,
  .page-bring-to-life{
    display: block !important;
    text-align: center;
  }

  /* les colonnes (peu importe le nom exact, on couvre large) */
  #bring-to-life .left,
  #bring-to-life .right,
  #bring-to-life .col,
  #bring-to-life .column,
  #bring-to-life .panel,
  #bring-to-life .cards,
  .bring-to-life .left,
  .bring-to-life .right,
  .bring-to-life .col,
  .bring-to-life .column,
  .bring-to-life .panel,
  .bring-to-life .cards,
  .btl .left,
  .btl .right,
  .btl .col,
  .btl .column,
  .btl .panel,
  .btl .cards{
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto 22px !important;
    text-align: center !important;
  }
}

/* =========================================
   BRING-TO-LIFE — HARD CENTER + TITLE TOP
   (colle ceci TOUT EN BAS de style.css)
   ========================================= */

/* 1) Force la page à être centrée */
body{
  overflow-x: hidden;
}

/* 2) Cible ton layout bring-to-life (plusieurs noms possibles) */
.bring-to-life,
.bring-to-life-page,
.bring-to-life-container,
.page,
.container{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3) Si ton bring-to-life est en 2 colonnes -> on le passe en 1 colonne */
.bring-to-life-container,
.bring-to-life .container,
.page .container,
.main-container{
  width: min(1100px, 92vw) !important;
  max-width: 1100px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
}

/* 4) Le bloc "gros titre" (souvent .left ou .bring-title) -> en haut */
.left,
.bring-left,
.hero-left,
.bring-title-wrap{
  width: 100% !important;
  max-width: 1000px !important;
  text-align: center !important;
  margin: 0 auto 14px !important;
  order: 0 !important;
}

/* 5) Le texte central */
.center,
.bring-center,
.hero-center{
  width: 100% !important;
  max-width: 900px !important;
  text-align: center !important;
  margin: 0 auto !important;
  order: 1 !important;
}

/* 6) Les cartes à droite -> sous le titre */
.right,
.bring-right,
.hero-right,
.cards,
.panel{
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  order: 2 !important;
}

/* 7) Le TITRE lui-même */
.bring-title,
.title,
.hero-title{
  text-align: center !important;
  margin: 0 auto 16px !important;
  line-height: 1.05 !important;
}

/* 8) Mobile: aucune marge bizarre */
@media (max-width: 900px){
  .bring-to-life-container,
  .page .container,
  .main-container{
    width: 92vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =====================================
   MOBILE – réduire la liste features
   ===================================== */

@media (max-width: 768px){

  .features-list li,
  .book-features li,
  .details-list li {
    font-size: 0.60rem !important;   /* plus petit */
    line-height: 1.4 !important;
  }

  .features-list,
  .book-features,
  .details-list {
    padding-left: 18px !important;   /* réduit l’espace à gauche */
  }

}

@media (max-width: 768px){
  ul li {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
  }
}

/* =====================================
   ALIGNER TEXTE AVEC LES BULLETS
   ===================================== */

.features-list,
.book-features,
.details-list {
  text-align: left !important;   /* texte aligné à gauche */
  display: inline-block;         /* évite qu'il prenne toute la largeur */
}

.features-list li,
.book-features li,
.details-list li {
  text-align: left !important;
}

.tiktok-odin-btn{
  margin-top: 60px;
}