:root{
  --bg:#0b0c12;
  --panel: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.14);
  --text:#f7f7ff;
  --muted: rgba(247,247,255,.72);

  --pink:#ff3ea5;
  --purple:#7c4dff;
  --orange:#ff8a3d;
  --teal:#2de2e6;

  --serif: "Playfair Display", serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --r: 22px;
  --shadow: 0 16px 50px rgba(0,0,0,.55);
  --shadowSoft: 0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:min(1200px, calc(100% - 48px)); margin:0 auto; }

.card__icon{
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
}

.flatIcon{
  width: 34px;     /* change to 38 if you want bigger */
  height: 34px;
  object-fit: contain;
  display: block;
}

/* Background */
.bg{ position:fixed; inset:0; z-index:-2; }
.bg__grad{
  position:absolute; inset:-20%;
  background:
    radial-gradient(900px 600px at 12% 25%, rgba(124,77,255,.20), transparent 60%),
    radial-gradient(900px 600px at 75% 25%, rgba(45,226,230,.12), transparent 60%),
    radial-gradient(900px 600px at 75% 75%, rgba(255,62,165,.14), transparent 60%),
    radial-gradient(900px 600px at 25% 85%, rgba(255,138,61,.10), transparent 60%);
  filter: blur(10px);
}
.bg__noise{
  position:absolute; inset:0;
  background-image:url("https://grainy-gradients.vercel.app/noise.svg");
  opacity:.07;
  mix-blend-mode:overlay;
}

/* Header */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(11,12,18,.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 8px 0;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand__mark{
 /* width:32px; height:32px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);*/
}
.brand__name{ font-weight:800; letter-spacing:.2px; font-size:24px}

.nav{ display:flex; gap:16px; align-items:center; }
.nav__link{
  font-size:14px;
  color: rgba(255,255,255,.78);
  padding: 8px 10px;
  border-radius: 12px;
}
.nav__link:hover{ background: rgba(255,255,255,.06); color: rgba(255,255,255,.92); }



/* Social proof strip */
.proofStrip{
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgb(0 0 0);
}
.proofStrip__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 0;
  flex-wrap:wrap;
}
.proofStrip__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(90deg, rgb(255 0 136 / 57%), rgb(124 77 255 / 52%), rgba(45, 226, 230, .12));
  box-shadow: 0 10px 30px rgba(124,77,255,.12);
}
.proofStrip__text{
  font-size: 14px;
  color: rgba(255,255,255,.74);
}
.dot{ opacity:.6; padding:0 6px; }
  .header__actions{ display:flex; align-items:center; gap:12px; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 30px;
  font-weight:800;
  font-size: 14px;
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, filter .2s ease, background .2s ease;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn--wide{ width:100%; }

.btn--primary{
  background: linear-gradient(
    90deg,
    #222132,   /* Purple */
    #4b2fd6,   /* Deep Purple */
    #9C27B0    /* Navy Blue */

  );
      color: #fff;
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 16px 40px rgba(75,47,214,.35);
}
.btn--primary:hover{ filter: brightness(1.06); transform: translateY(-1px); }

.btn--ghost{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}
.btn--ghost:hover{ background: rgba(255,255,255,.09); }

.btn--glow{
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 18px 45px rgba(255,62,165,.12),
    0 18px 45px rgba(124,77,255,.12);
}
.btn--glow:hover{ filter: brightness(1.08); }

/* Hamburger */
.menuBtn{
  width:44px; height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:none;
}
.menuBtn span{
  display:block;
  height:2px;
  width:18px;
  background: rgba(255,255,255,.88);
  margin: 4px auto;
  border-radius:2px;
}

/* Mobile menu */
.mobileMenu{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(11,12,18,.86);
}
.mobileMenu__inner{
  padding: 14px 0 18px;
  display:grid;
  gap:10px;
}
.mobileMenu__link{
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
}

/* Hero */
.hero{ padding: 26px 0 10px; }
.heroBox{
  position:relative;
  border-radius: 30px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.10);
}

/* ✅ Use texture background here (replace file name if needed) */
.heroBox__bg{
  position:absolute; inset:0;
  background: url("texture-bg.png") center/cover no-repeat;
  filter: saturate(1.05) contrast(1.03);
  transform: scale(1.04);
}

.heroBox__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,11,18,.92) 0%, rgba(10,11,18,.72) 55%, rgba(10,11,18,.92) 100%),
    radial-gradient(900px 600px at 20% 20%, rgba(255,62,165,.16), transparent 60%),
    radial-gradient(900px 600px at 80% 70%, rgba(45,226,230,.12), transparent 60%);
}

.heroGrid{
  position:relative;
  display:grid;
  grid-template-columns: 1.65fr 0.9fr; /* ~65/35 */
  gap: 18px;
  padding: 18px;
  z-index:1;
}

/* Left area card */
.heroLeft{
  border-radius: 26px;
  padding: 18px;
  /*background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);*/
}

/* ✅ Left 65% internal layout: image LEFT + content RIGHT */
.heroLeft--twoCol{
  display:grid;
 grid-template-columns: 60% 40%;
  gap: 2px;
  align-items:center;
  background: url("../imgs/bg.png") center/cover no-repeat;
  
}

/* ✅ Image container (NO crop, full visible) */
.heroLeft__media{
  min-height: 520px;
  border-radius: 22px;
  overflow:hidden;
 /* border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 280px at 25% 20%, rgba(255,138,61,.18), transparent 60%),
    radial-gradient(700px 320px at 70% 75%, rgba(124,77,255,.18), transparent 60%),
    rgba(0,0,0,.18);*/
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 0px;
}

.heroLeft__aish{
  width:100%;
  height:100%;
  object-fit: contain;           /* ✅ full body visible */
  object-position: center bottom;
  filter: drop-shadow(0 22px 45px rgba(0,0,0,.55));
}

/* Text */
.heroCopy{ padding: 6px; }
.h1{
  font-family: var(--serif);
  font-size: clamp(34px, 3.1vw, 54px);
  letter-spacing:-.02em;
  margin: 0 0 6px;
}
.h2{
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 38px);
  letter-spacing:-.02em;
  margin: 0 0 14px;
  color: rgba(255,255,255,.92);
}
.sub{
  margin:0;
  color: var(--muted);
  line-height:1.7;
  font-size: 15px;
  max-width: 62ch;
}
.chipRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 13px;
  border:1px solid rgba(255,255,255,.14);
}
.chip--soft{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
}

/* Right highlight panel */
.heroRight{ position:relative; }
.highlightCard{
  border-radius: 26px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.highlightCard:before{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(120deg, rgba(255,62,165,.25), rgba(124,77,255,.20), rgba(45,226,230,.16));
  filter: blur(18px);
  opacity:.55;
  z-index:0;
}
.highlightCard > *{ position:relative; z-index:1; }

.highlightCard__top{ text-align:center; padding: 4px 6px 10px; }
.launchLabel{
  font-size: 12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(255,255,255,.76);
}
.launchDate{
  font-family: var(--serif);
  font-size: 40px;
  margin-top: 6px;
  letter-spacing: -.02em;
}
.divider{
  height:1px;
  background: rgba(255,255,255,.12);
  margin: 10px 0 14px;
}

/* Two books */
.twoBooks{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.miniBook{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: 10px;
}
.miniBook__cover{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.miniBook__cover img{
  width:100%;
  height:auto;
  object-fit: cover;
  display:block;
}
.priceRow{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:10px;
  margin: 10px 0;
}
.oldPrice{
  color: rgba(255,255,255,.62);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  font-weight: 800;
}
.newPrice{
  font-size: 26px;
  font-weight: 900;
}

/* Offer strip */
.offerStrip{
  margin-top: 12px;
  border-radius: 20px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(90deg, rgba(255,62,165,.16), rgba(124,77,255,.16), rgba(45,226,230,.10));
}
.offerStrip__label{
  font-size: 12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(255,255,255,.80);
}
.offerStrip__line{
  margin-top: 8px;
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:10px;
}
.offerOld{
  text-decoration: line-through;
  font-weight: 800;
  color: rgba(255,255,255,.65);
}
.offerNew{
  font-size: 40px;
  font-weight: 900;
  letter-spacing:-.02em;
}
.arrow{ opacity:.85; }
.offerStrip__note{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.78);
  text-align:center;
}

/* Countdown */
.countdown{
  margin-top: 12px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
}
.countdown__head{
  display:flex;
  justify-content:center;
  margin-bottom: 10px;
}
.countdown__title{
  font-size: 13px;
  color: rgba(255,255,255,.78);
}
.timer{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.tBox{
  text-align:center;
  padding: 10px 8px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.tNum{
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .08em;
}
.tLbl{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}
.ctaRow{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}
.trustLine{
  margin-top: 10px;
  text-align:center;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

/* Sections */
.section{ padding: 54px 0; }
.sectionHead{ margin-bottom: 18px; }
.sectionTitle{
  font-family: var(--serif);
  font-size: clamp(28px, 2.2vw, 42px);
  letter-spacing:-.02em;
  margin:0;
}
.sectionSub{
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.7;
}
.rowBetween{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 14px;
  flex-wrap:wrap;
}
.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.card{
  border-radius: 24px;
  padding: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadowSoft);
}
.card__icon{
  width:42px; height:42px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.card__title{ margin-top: 12px; font-weight: 900; }
.card__text{ margin-top: 6px; color: var(--muted); line-height: 1.65; font-size: 14px; }

.thumbGrid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-top: 18px;
}
.thumb{
  height: auto;
  /*border-radius: 24px;
  background:
    radial-gradient(220px 130px at 30% 30%, rgba(255,138,61,.14), transparent 60%),
    radial-gradient(260px 160px at 70% 70%, rgba(124,77,255,.16), transparent 60%),
    rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadowSoft);*/
}
.thumb img{border-radius:24px}
.centerBtn{ display:flex; justify-content:center; margin-top: 18px; }

.payCard{
  border-radius: 26px;
  padding: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadowSoft);
}

.notifyCard{
  border-radius: 26px;
  padding: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadowSoft);
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
}
.form{ display:grid; gap:12px; }
.field{ display:grid; gap:6px; font-size: 13px; color: rgba(255,255,255,.76); }
.field input{
  height: 48px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  outline:none;
}
.field input:focus{
  border-color: rgba(255,62,165,.45);
  box-shadow: 0 0 0 4px rgba(255,62,165,.12);
}
.privacy{ font-size:12px; color: rgba(255,255,255,.66); }

.faq{
  display:grid;
  gap: 10px;
  margin-top: 16px;
}
.faqItem{
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.faqItem summary{
  cursor:pointer;
  font-weight: 800;
}
.faqItem p{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

/* Footer */
.footer{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 26px 0 40px;
  color: rgba(255,255,255,.74);
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.footer__links{ display:flex; gap:14px; flex-wrap:wrap; }
.footer__links a{    
    /* text-decoration: underline; */
    text-underline-offset: 4px;
    font-size: 13px;
    padding: 10px; }
.footer__links a:hover{ opacity:1; }

/* ✅ If you have footer text element, keep it on RIGHT */
.footer__copy{
  margin-left:auto;
  text-align:right;
}

/* Reveal animation */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}
  
  /* Mobile Sticky CTA (hidden by default) */
.mobileStickyCta{
  display:none;
}
/* Buy Now CTA below FAQ */
.buyCta{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.buyCta__title{
  margin:0;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.15;
}

.buyCta__sub{
  margin:8px 0 0;
  color: var(--muted);
}

.buyCta__price{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
}

.buyCta__badge{
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
}

.buyCta__right{
  display:grid;
  gap:10px;
  min-width: 240px;
}

.buyCta__note{
  font-size:12px;
  color: var(--muted);
  text-align:center;
}

/* Responsive */
@media (max-width: 760px){
  .buyCta{
    flex-direction:column;
    align-items:stretch;
  }
  .buyCta__right{
    min-width: 100%;
  }
  .buyCta__title{ font-size:24px; }
}


/* Mobile (Portrait): Up to 480px */
@media (max-width: 480px){
  /* show sticky bar */
  .mobileStickyCta{
    display:flex;
    position:fixed;
    left:0px;
    right:0px;
    bottom:0px;
    z-index:9999;

    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:12px 12px;
    border-radius:16px;

    background: rgba(15, 16, 26, 0.92);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* iPhone safe-area */
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .mobileStickyCta__left{
    min-width:0;
  }

  .mobileStickyCta__price{
    display:flex;
    align-items:baseline;
    gap:8px;
    flex-wrap:wrap;
    line-height:1.1;
  }

  .mobileStickyCta__price .new{
    font-weight:800;
    font-size:18px;
  }
  .mobileStickyCta__price .old{
    opacity:.7;
    text-decoration: line-through;
    font-size:14px;
  }
  .mobileStickyCta__price .off{
    font-size:12px;
    padding:4px 8px;
    border-radius:999px;
    background: rgba(255, 62, 165, 0.15);
    border: 1px solid rgba(255, 62, 165, 0.35);
  }

  .mobileStickyCta__sub{
    font-size:12px;
    opacity:.75;
    margin-top:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 55vw;
  }

 .mobileStickyCta__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        padding: 0 16px;
        border-radius: 30px;
        font-weight: 800;
        text-decoration: none;
        white-space: nowrap;
        color: #000000;
        background: linear-gradient(90deg, #cda0b8, #a089e1);
  }

  /* IMPORTANT: prevent content hidden behind sticky button */

}

/* Landscape Phones & Small Tablets: 481px - 768px */
@media (min-width: 481px) and (max-width: 768px){
  .mobileStickyCta{
    display:flex;
    position:fixed;
    left:16px;
    right:16px;
    bottom:16px;
    z-index:9999;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 14px;
    border-radius:18px;
    background: rgba(15, 16, 26, 0.92);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

}
  
/* Responsive */
@media (max-width: 1024px){
  .heroGrid{ grid-template-columns: 1fr; }
  .grid3{ grid-template-columns: 1fr; }
  .thumbGrid{ grid-template-columns: repeat(2, 1fr); }
  .notifyCard{ grid-template-columns: 1fr; }
}

/* ✅ stack image+text only on smaller screens */
@media (max-width: 768px){
  .heroLeft--twoCol{ grid-template-columns: 1fr; }
  .heroLeft__media{ min-height: 380px; }
  .brand__name {font-size:20px}
.none{display:none}
}

@media (max-width: 860px){
  .nav{ display:none; }
  .menuBtn{ display:inline-block; }
  .proofStrip__inner{ justify-content:center; text-align:center; }
}

@media (max-width: 520px){
  .container{ width: calc(100% - 28px); }
  .twoBooks{ grid-template-columns: 1fr; }
  .timer{ grid-template-columns: repeat(2, 1fr); }
  .thumbGrid{ grid-template-columns: 1fr; }
}