:root{
  --black:#0A0508;
  --deep:#150C12;
  --plum:#3D1A2E;
  --pink:#D4849A;
  --hot:#E8105A;
  --gold:#C9A96E;
  --cream:#FDF5F7;
  --white:#FFFFFF;
  --grey:#8A6878;
  --pale:#F9F0F4;
  /* Performance: compositor hints */
  --transition-base: cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--white);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:400;
  line-height:1.8;
  overflow-x:hidden;
  letter-spacing:-0.01em;
}

/* ── NOISE TEXTURE ── */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("../images/noise.svg");
  opacity:0.32;mix-blend-mode:overlay;
}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:75px;padding:0 60px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(10,5,8,0.85);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(212,132,154,0.08);
  animation:navDrop .8s cubic-bezier(.2,.8,.2,1) both;
}
.nav-logo img{height:46px;object-fit:contain;filter:brightness(0.95);transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .4s ease}
.nav-logo:hover img{transform:scale(1.03);filter:brightness(1)}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-links a{
  font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,0.6);text-decoration:none;
  transition:color .35s,transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover{color:var(--pink);transform:translateY(-1px)}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  padding: 0;
  z-index: 110;
  outline: none;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--white);
  transition: all 0.35s cubic-bezier(.2,.8,.2,1);
}

.nav-buy{
  background:linear-gradient(135deg,var(--hot) 0%,#B00040 100%);
  color:var(--white);
  font-size:10px;letter-spacing:3px;text-transform:uppercase;font-weight:700;
  padding:12px 28px;text-decoration:none;
  border-radius:0;
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 4px 20px rgba(232,16,90,0.3);
}
.nav-buy:hover{
  background:linear-gradient(135deg,var(--gold) 0%,#A07830 100%);
  color:var(--black);
  transform:translateY(-1px);
  box-shadow:0 4px 20px rgba(201,169,110,0.35);
}

/* ── HERO ── */
.hero{
  min-height:100vh;padding-top:70px;
  display:grid;grid-template-columns:1fr 1fr;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 80% at 80% 50%,rgba(212,132,154,0.08) 0%,transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 20%,rgba(201,169,110,0.05) 0%,transparent 55%);
  pointer-events:none;z-index:0;
}

/* LEFT — cover */
.hero-visual{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:60px 40px 60px 60px;
  z-index:1;
}
.book-wrap{
  position:relative;
  animation:heroBookIn .9s cubic-bezier(.2,.8,.2,1) .12s both,float 5s ease-in-out 1.1s infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-16px) rotate(0.5deg)}
}
.book-wrap img{
  width:100%;max-width:360px;
  filter:drop-shadow(-20px 30px 60px rgba(232,16,90,0.25)) drop-shadow(0 20px 40px rgba(0,0,0,0.7));
  display:block;
  transition:transform .6s ease,filter .6s ease;
}
.book-wrap:hover img{transform:scale(1.025) rotate(.4deg);filter:drop-shadow(-24px 34px 70px rgba(232,16,90,0.32)) drop-shadow(0 24px 48px rgba(0,0,0,0.75))}
.book-glow{
  position:absolute;inset:-30px;
  background:radial-gradient(circle,rgba(212,132,154,0.15) 0%,transparent 65%);
  pointer-events:none;
  animation:pulse 4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:0.6}50%{opacity:1}}

.badge{
  position:absolute;top:20px;right:10px;
  width:88px;height:88px;border-radius:50%;
  background:linear-gradient(135deg,var(--hot),var(--plum));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(232,16,90,0.5);
  animation:spin-slow 12s linear infinite;
}
@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.badge-inner{
  display:flex;flex-direction:column;align-items:center;
  animation:spin-slow 12s linear infinite reverse;
}
.badge-price{font-size:22px;font-weight:900;color:var(--white);line-height:1;font-family:'Playfair Display',serif}
.badge-label{font-size:7px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:2px}

/* RIGHT — text */
.hero-text{
  padding:80px 60px 80px 40px;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:1;
}
.eyebrow{
  font-size:9px;letter-spacing:6px;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;
  animation:fadeUp .8s ease .1s both;
}
.hero-title{
  font-family:'Cinzel',serif;
  font-size:clamp(52px,6vw,88px);
  font-weight:700;
  line-height:0.95;
  letter-spacing:6px;
  color:var(--white);
  margin-bottom:8px;
  animation:fadeUp .8s ease .2s both;
  background:linear-gradient(135deg,#fff 30%,var(--pink) 70%,var(--gold) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{
  font-family:'Playfair Display',serif;
  font-size:clamp(14px,1.6vw,19px);
  font-style:italic;font-weight:400;
  color:rgba(255,255,255,0.5);
  margin-bottom:8px;letter-spacing:2px;
  animation:fadeUp .8s ease .3s both;
}
.hero-author{
  font-size:10px;letter-spacing:4px;text-transform:uppercase;
  color:var(--pink);margin-bottom:36px;
  animation:fadeUp .8s ease .38s both;
}
.hero-rule{
  width:60px;height:2px;
  background:linear-gradient(90deg,var(--hot),var(--gold));
  margin-bottom:32px;
  animation:fadeUp .8s ease .44s both;
}
.hero-desc{
  font-size:15px;line-height:1.9;
  color:rgba(255,255,255,0.65);
  max-width:420px;margin-bottom:44px;
  animation:fadeUp .8s ease .5s both;
}
.hero-desc strong{color:var(--white);font-weight:700}
.cta-block{animation:fadeUp .8s ease .58s both;display:flex;flex-direction:column;gap:14px}
.btn-main{
  display:inline-block;text-decoration:none;width:fit-content;
  background:linear-gradient(135deg,var(--hot) 0%,#B00040 100%);
  color:var(--white);
  font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;letter-spacing:4px;
  text-transform:uppercase;font-weight:700;
  padding:20px 52px;
  box-shadow:0 6px 32px rgba(232,16,90,0.45);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .35s;position:relative;overflow:hidden;
}
.btn-main::before{
  content:'';position:absolute;top:-40%;bottom:-40%;left:-35%;
  width:28%;transform:skewX(-18deg) translateX(-220%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28),transparent);
  transition:transform .65s ease;z-index:1;
}
.btn-main::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--gold),#A07830);
  opacity:0;transition:opacity .35s;
}
.btn-main:hover::before{transform:skewX(-18deg) translateX(620%)}
.btn-main:hover::after{opacity:1}
.btn-main:hover{box-shadow:0 8px 40px rgba(201,169,110,0.5);transform:translateY(-2px)}
.btn-main span{position:relative;z-index:2}
.btn-wa{
  display:inline-flex;align-items:center;gap:12px;
  text-decoration:none;width:fit-content;
  background:rgba(37,211,102,0.12);
  border:1px solid rgba(37,211,102,0.3);
  color:rgba(255,255,255,0.8);
  font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:700;
  padding:16px 36px;
  transition:all .3s;
}
.btn-wa:hover{background:rgba(37,211,102,0.2);border-color:#25D366;color:var(--white);transform:translateY(-2px)}
.price-note{font-size:12px;color:rgba(255,255,255,0.3);letter-spacing:1px}
.price-note strong{color:var(--gold);font-size:20px;font-weight:700}
.text-white{color:var(--white)}
.inside-heading{text-align:center;max-width:700px;margin:0 auto 0}
.weeks-copy{max-width:600px;margin:16px auto 0}
.wc-more{border-color:rgba(232,16,90,0.35);background:rgba(232,16,90,0.05)}
.wc-num-more{color:rgba(232,16,90,0.5)}
.wc-theme-more{color:var(--pink)}
.foryou-dark{background:var(--black)}
.btn-centered{margin:0 auto;display:block;width:fit-content}
.sec-tag-centered{display:block;text-align:center;margin-bottom:16px}
.sec-h-centered{text-align:center;margin-bottom:0}
.pricing-box{margin-top:52px}
.btn-full{width:100%;text-align:center;display:block;padding:22px}
.payment-note{font-size:11px;color:rgba(255,255,255,0.25);margin-top:14px;letter-spacing:1px;text-align:center}
.btn-final{font-size:12px;padding:22px 60px}

/* ── STATS ── */
.stats{
  background:var(--deep);
  padding:52px 80px;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(212,132,154,0.1);
  border-bottom:1px solid rgba(212,132,154,0.1);
  position:relative;z-index:1;
}
.stat{text-align:center;padding:20px;border-right:1px solid rgba(212,132,154,0.1)}
.stat:last-child{border:none}
.stat,.quote-strip blockquote,.quote-cite,.what-img,.what > div:last-child,.ic,.wc,.foryou-grid > div,.photo-cell,.gift-box,.tc,.pbox,.fcta h2,.fcta p,.fcta .btn-main{
  will-change:transform,opacity;
}
.stat-n{
  font-family:'Playfair Display',serif;
  font-size:44px;font-weight:700;
  color:var(--pink);line-height:1;margin-bottom:8px;
}
.stat-l{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.4)}

/* ── QUOTE ── */
.quote-strip{
  background:linear-gradient(135deg,var(--plum) 0%,var(--deep) 100%);
  padding:80px;text-align:center;position:relative;overflow:hidden;
}
.quote-strip::before{
  content:'"';position:absolute;
  font-family:'Playfair Display',serif;font-size:380px;font-weight:900;
  color:rgba(212,132,154,0.05);top:-80px;left:20px;line-height:1;pointer-events:none;
}
.quote-strip blockquote{
  font-family:'Playfair Display',serif;
  font-size:clamp(22px,3vw,36px);font-style:italic;font-weight:400;
  color:rgba(255,255,255,0.88);
  line-height:1.55;max-width:780px;margin:0 auto 18px;
  position:relative;z-index:1;
}
.quote-cite{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--gold)}

/* ── SECTION HELPERS ── */
.sec{padding:100px 80px;position:relative;z-index:1}
.sec-tag{font-size:9px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:16px;font-weight:700}
.sec-h{
  font-family:'Playfair Display',serif;
  font-size:clamp(30px,3.5vw,52px);
  font-weight:700;
  line-height:1.1;
  color:var(--white);
  background:linear-gradient(135deg,#fff 30%,var(--pink) 70%,var(--gold) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.sec-h em{font-style:italic;-webkit-text-fill-color:var(--pink)}
.sec-p{font-size:15px;line-height:1.9;color:rgba(255,255,255,0.58);margin-bottom:14px}
.rule{width:48px;height:2px;background:linear-gradient(90deg,var(--hot),var(--gold));margin:20px 0}

/* ── WHAT IS REALIGN ── */
.what{
  background:var(--deep);
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
  /* Skip rendering until near viewport — saves ~60ms initial layout */
  content-visibility:auto;
  contain-intrinsic-size:0 700px;
}
.what-img{position:relative;overflow:hidden}
.what-img img{width:100%;height:500px;object-fit:cover;object-position:center top;display:block;filter:brightness(0.85) saturate(1.1);transition:transform .9s ease,filter .9s ease}
.what-img:hover img{transform:scale(1.035);filter:brightness(.92) saturate(1.16)}
.what-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent 60%,var(--deep) 100%)}
.what-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pill{
  padding:8px 18px;border:1px solid rgba(212,132,154,0.3);
  font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--pink);
  transition:transform .3s ease,border-color .3s ease,background .3s ease,color .3s ease;
}
.pill:hover{transform:translateY(-2px);border-color:rgba(201,169,110,0.55);background:rgba(201,169,110,0.08);color:var(--gold)}

/* ── INSIDE THE JOURNAL ── */
.inside{
  background:var(--black);
  content-visibility:auto;
  contain-intrinsic-size:0 900px;
}
.inside-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:1100px;margin:60px auto 0;
}
.ic{
  background:linear-gradient(135deg, rgba(21, 12, 18, 0.7) 0%, rgba(10, 5, 8, 0.9) 100%);
  border:1px solid rgba(212,132,154,0.12);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  padding:40px 32px;position:relative;overflow:hidden;
  transition:all .4s cubic-bezier(.2,.8,.2,1);
  border-radius:4px;
  box-shadow:0 10px 40px rgba(0, 0, 0, 0.4);
}
.ic::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--hot),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.ic:hover{
  border-color:rgba(212,132,154,0.35);
  transform:translateY(-6px);
  box-shadow:0 15px 50px rgba(212,132,154,0.06), 0 10px 30px rgba(0,0,0,0.5);
}
.ic:hover::before{transform:scaleX(1)}
.ic-icon{
  margin-bottom:20px;display:flex;align-items:center;
  color:var(--pink);
  filter:drop-shadow(0 2px 8px rgba(232,16,90,0.2));
}
.ic-icon svg{
  width:32px;height:32px;
}
.ic-title{
  font-family:'Playfair Display',serif;font-size:19px;font-weight:700;
  color:var(--white);margin-bottom:12px;
}
.ic-text{font-size:13.5px;line-height:1.75;color:rgba(255,255,255,0.52)}

/* ── WEEKS PREVIEW ── */
.weeks{
  background:var(--deep);
  content-visibility:auto;
  contain-intrinsic-size:0 1100px;
}
.weeks-intro{text-align:center;margin-bottom:60px}
.weeks-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:16px;max-width:1100px;margin:0 auto;
}
.wc{
  background:linear-gradient(135deg, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.02) 100%);
  border:1px solid rgba(212,132,154,0.08);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  padding:28px 22px;
  border-radius:4px;
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 8px 32px rgba(10,5,8,0.3);
}
.wc:hover{
  background:linear-gradient(135deg, rgba(212,132,154,0.04) 0%, rgba(212,132,154,0.08) 100%);
  border-color:rgba(212,132,154,0.3);
  transform:translateY(-5px);
  box-shadow:0 12px 40px rgba(10,5,8,0.45), 0 0 15px rgba(212,132,154,0.03);
}
.wc-num{
  font-family:'Cinzel',serif;font-size:32px;font-weight:700;
  color:rgba(212,132,154,0.25);line-height:1;margin-bottom:8px;
}
.wc-theme{font-size:13px;font-weight:700;color:var(--white);margin-bottom:4px}
.wc-focus{font-size:11px;color:var(--pink);letter-spacing:1px}

/* ── FOR YOU ── */
.foryou{
  background:var(--black);
  content-visibility:auto;
  contain-intrinsic-size:0 700px;
}
.foryou-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.foryou-img img{
  width:100%;height:480px;
  object-fit:cover;object-position:center top;
  display:block;
  filter:brightness(0.8) saturate(1.1);
  transition:transform .9s ease,filter .9s ease;
}
.foryou-img:hover img{transform:scale(1.035);filter:brightness(.9) saturate(1.15)}
.check-list{list-style:none;margin-top:24px}
.check-list li{
  position:relative;
  padding-left:32px;
  font-size:14.5px;color:rgba(255,255,255,0.75);
  line-height:1.7;margin-bottom:16px;
  font-weight:400;
}
.check-list li::before{
  content:'';position:absolute;left:0;top:4px;
  width:18px;height:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A96E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
}

/* ── GIFT SECTION ── */
.gift{
  background:linear-gradient(135deg,var(--plum) 0%,#1A0818 60%,var(--black) 100%);
  padding:100px 80px;text-align:center;position:relative;overflow:hidden;
  content-visibility:auto;
  contain-intrinsic-size:0 600px;
}
.gift::before{
  content:'🎁';position:absolute;font-size:300px;
  opacity:0.04;top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;
}
.gift-box{
  max-width:680px;margin:0 auto;
  border:1px solid rgba(212,132,154,0.25);
  padding:52px 48px;position:relative;z-index:1;
  background:rgba(255,255,255,0.03);
}
.gift-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--hot),var(--gold),var(--hot),transparent);
}
.gift-tag{
  font-size:9px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);
  display:block;margin-bottom:16px;font-weight:700;
}
.gift-title{
  font-family:'Playfair Display',serif;font-size:clamp(24px,3vw,36px);
  font-weight:700;color:var(--white);margin-bottom:16px;line-height:1.2;
}
.gift-title em{font-style:italic;color:var(--pink)}
.gift-text{font-size:14.5px;line-height:1.85;color:rgba(255,255,255,0.6);margin-bottom:24px}

/* ── TESTIMONIALS ── */
.testi{
  background:var(--deep);
  content-visibility:auto;
  contain-intrinsic-size:0 600px;
}
.t-hdr{text-align:center;margin-bottom:60px}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto}
.tc{
  background:linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.04) 100%);
  border:1px solid rgba(212,132,154,0.12);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  padding:36px 28px;
  border-radius:4px;
  transition:all .4s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 10px 30px rgba(10,5,8,0.3);
}
.tc:hover{
  border-color:rgba(212,132,154,0.35);
  box-shadow:0 15px 45px rgba(212,132,154,0.08), 0 10px 25px rgba(0,0,0,0.45);
  transform:translateY(-6px);
}
.tstars{color:var(--hot);font-size:13px;letter-spacing:3px;margin-bottom:18px}
.ttext{
  font-family:'Playfair Display',serif;font-size:17px;font-style:italic;
  color:rgba(255,255,255,0.78);line-height:1.65;margin-bottom:20px;
}
.tname{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--pink)}

/* ── PHOTOS STRIP ── */
.photos{
  display:grid;grid-template-columns:repeat(3,1fr);
  height:360px;overflow:hidden;
  content-visibility:auto;
  contain-intrinsic-size:0 360px;
}
.photo-cell{overflow:hidden;position:relative}
.photo-cell img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  filter:brightness(0.75) saturate(1.1);
  transition:transform .6s ease,filter .6s ease;
}
.photo-cell:hover img{transform:scale(1.06);filter:brightness(0.85) saturate(1.2)}
.photo-cell::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 50%,rgba(10,5,8,0.6) 100%);
}

/* ── PRICING ── */
.pricing{background:var(--black);text-align:center}
.pricing .sec-h{margin-bottom:60px}
.pbox{
  background:linear-gradient(135deg, rgba(21, 12, 18, 0.8) 0%, rgba(10, 5, 8, 0.95) 100%);
  max-width:560px;margin:0 auto;
  padding:60px 52px;
  border:1px solid rgba(212,132,154,0.14);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  position:relative;overflow:hidden;
  border-radius:4px;
  transition:all .45s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 12px 50px rgba(0,0,0,0.45);
}
.pbox:hover{
  transform:translateY(-6px);
  border-color:rgba(212,132,154,0.35);
  box-shadow:0 20px 60px rgba(212,132,154,0.06), 0 15px 45px rgba(0,0,0,0.55);
}
.pbox::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--hot),var(--gold),var(--hot),transparent);
}
.plabel{font-size:9px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:20px;display:block;font-weight:700}
.pnum{font-family:'Playfair Display',serif;font-size:96px;font-weight:900;color:var(--white);line-height:1;margin-bottom:4px}
.pfree{font-size:13px;color:var(--pink);margin-bottom:36px;font-weight:700;letter-spacing:1px}
.pinc{list-style:none;text-align:left;margin-bottom:44px}
.pinc li{
  position:relative;
  padding:14px 0 14px 32px;border-bottom:1px solid rgba(255,255,255,0.05);
  font-size:14px;color:rgba(255,255,255,0.7);line-height:1.5;font-weight:400;
}
.pinc li:last-child{border:none}
.chk{display:none}
.pinc li::before{
  content:'';position:absolute;left:0;top:16px;
  width:18px;height:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A96E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
}
.guar{
  margin-top:32px;padding:18px 22px;
  border:1px solid rgba(212,132,154,0.15);
  background:rgba(212,132,154,0.05);
  font-size:13px;font-style:italic;
  color:rgba(255,255,255,0.45);line-height:1.7;
}
.order-page{padding-top:150px;min-height:100vh}
.order-intro{max-width:620px;margin:18px auto 54px;text-align:center}
.order-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;max-width:1120px;margin:0 auto;
}
.order-card,.material-card{
  background:linear-gradient(135deg, rgba(21, 12, 18, 0.7) 0%, rgba(10, 5, 8, 0.9) 100%);
  border:1px solid rgba(212,132,154,0.12);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  padding:34px 28px;position:relative;overflow:hidden;
  border-radius:4px;
  transition:all .4s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 10px 40px rgba(0,0,0,0.4);
}
.order-card:hover,.material-card:hover{
  border-color:rgba(212,132,154,0.35);
  transform:translateY(-4px);
  box-shadow:0 15px 50px rgba(212,132,154,0.06), 0 10px 30px rgba(0,0,0,0.5);
}
.order-card::before,.material-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--hot),var(--gold));
  transform:scaleX(1);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.payment-list{display:grid;gap:16px;margin:26px 0}
.payment-list dt{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:6px;font-weight:700}
.payment-list dd{font-family:'Playfair Display',serif;font-size:22px;color:var(--white);line-height:1.25}
.order-note{text-align:left;margin-top:0}
.order-wa{margin-top:20px}
.order-price{font-size:64px;margin:24px 0 10px}
.old-price{text-decoration:line-through;color:rgba(255,255,255,0.38);font-size:.55em;font-weight:700;margin-left:8px;vertical-align:middle}
.shop-price .old-price,.material-price .old-price{font-size:.95em;color:rgba(255,255,255,0.38)}
.order-alert{
  max-width:760px;
  margin:0 auto 28px;
  padding:16px 18px;
  border:1px solid rgba(232,16,90,0.35);
  background:rgba(232,16,90,0.08);
  color:rgba(255,255,255,0.82);
  font-size:14px;
  line-height:1.6;
  text-align:center;
}
.order-alert-success{border-color:rgba(201,169,110,0.45);background:rgba(201,169,110,0.08)}
.receipt-form{display:grid;gap:14px;margin-top:22px}
.receipt-form label{display:grid;gap:8px}
.receipt-form span{
  font-size:9px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:700;
}
.receipt-form input{
  width:100%;
  min-height:48px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(212,132,154,0.14);
  color:var(--white);
  padding:12px 16px;
  font:400 15px 'Plus Jakarta Sans',sans-serif;
  outline:none;
  transition:all .3s ease;
}
.receipt-form input:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(212,132,154,0.08);background:rgba(255,255,255,0.06)}
.upload-dropzone {
  width: 100%;
  padding: 32px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(212, 132, 154, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.upload-dropzone:hover {
  background: rgba(212, 132, 154, 0.05);
  border-color: var(--pink);
  box-shadow: 0 0 16px rgba(212, 132, 154, 0.05);
}
.upload-dropzone.dragover {
  background: rgba(212, 132, 154, 0.08);
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(201, 169, 110, 0.15);
  transform: scale(1.005);
}
.upload-dropzone svg {
  transition: transform 0.3s ease;
}
.upload-dropzone:hover svg {
  transform: translateY(-2px);
}
.upload-placeholder {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
}
.upload-filename {
  font-size: 13px;
  color: var(--gold);
  font-weight: 600;
  display: none;
  word-break: break-all;
}
.upload-preview {
  max-width: 120px;
  max-height: 120px;
  object-fit: cover;
  border-radius: 2px;
  display: none;
  margin-top: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.materials-preview{max-width:1120px;margin:70px auto 0}
.material-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.material-card{padding:0}
.material-card img{width:100%;height:220px;object-fit:cover;display:block;filter:brightness(0.88) saturate(1.08)}
.material-card div{padding:24px}
.material-card h2{font-family:'Playfair Display',serif;font-size:24px;color:var(--white);margin-bottom:8px}
.material-card p{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,0.55)}
.material-price{color:var(--pink)!important;font-weight:700;margin-bottom:10px}
.order-complete{text-align:center;margin-top:58px}
.btn-main[disabled]{opacity:.45;cursor:not-allowed}
.shop-page{padding-top:150px;min-height:100vh}
.shop-intro{max-width:620px;margin:18px auto 54px;text-align:center}
.shop-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1120px;
  margin:0 auto;
}
.shop-card{
  background:linear-gradient(135deg, rgba(21, 12, 18, 0.7) 0%, rgba(10, 5, 8, 0.9) 100%);
  border:1px solid rgba(212,132,154,0.12);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  position:relative;
  overflow:hidden;
  border-radius:4px;
  transition:all .4s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 10px 40px rgba(0, 0, 0, 0.4);
}
.shop-card:hover{
  border-color:rgba(212,132,154,0.35);
  transform:translateY(-4px);
  box-shadow:0 15px 50px rgba(212,132,154,0.06), 0 10px 30px rgba(0, 0, 0, 0.5);
}
.shop-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,var(--hot),var(--gold));
  transform:scaleX(1);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.shop-card img{
  width:100%;
  height:280px;
  object-fit:cover;
  display:block;
  filter:brightness(0.88) saturate(1.08);
  transition:transform 0.6s cubic-bezier(.2,.8,.2,1), filter 0.6s ease;
}
.shop-card:hover img{
  transform:scale(1.03);
  filter:brightness(0.95) saturate(1.12);
}
.shop-card-body{padding:28px}
.shop-card h2{font-family:'Playfair Display',serif;font-size:28px;color:var(--white);margin-bottom:8px}
.shop-card p{font-size:13.5px;line-height:1.75;color:rgba(255,255,255,0.56)}
.shop-price{color:var(--pink)!important;font-weight:700;margin-bottom:12px}
.shop-btn{width:100%;margin-top:24px}
.shop-btn em{font-family:'Playfair Display',serif;font-style:italic}
.shop-empty{
  max-width:720px;
  margin:0 auto;
  padding:44px;
  text-align:center;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(212,132,154,0.14);
}
.shop-empty h2{font-family:'Playfair Display',serif;font-size:34px;color:var(--white);margin-bottom:12px}

/* ── FINAL CTA ── */
.fcta{
  background:linear-gradient(160deg,var(--plum) 0%,var(--deep) 50%,var(--black) 100%);
  padding:140px 80px;text-align:center;position:relative;overflow:hidden;
  content-visibility:auto;
  contain-intrinsic-size:0 500px;
}
.fcta::before{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,132,154,0.1) 0%,transparent 65%);
  pointer-events:none;
}
.fcta h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(36px,5vw,68px);font-weight:700;
  line-height:1.05;color:var(--white);
  margin-bottom:20px;max-width:700px;
  margin-left:auto;margin-right:auto;
  position:relative;z-index:1;
}
.fcta h2 em{font-style:italic;color:var(--pink)}
.fcta p{
  font-family:'Playfair Display',serif;font-size:20px;font-style:italic;
  color:rgba(255,255,255,0.5);margin-bottom:52px;
  position:relative;z-index:1;
}

/* ── FOOTER ── */
footer{
  background:var(--black);
  border-top:1px solid rgba(255,255,255,0.05);
  padding:40px 80px;
  display:flex;align-items:center;justify-content:space-between;
}
footer img{height:44px;object-fit:contain;filter:brightness(0.85)}
footer p{font-size:11px;color:rgba(255,255,255,0.25);letter-spacing:1px}

/* ── FLOATING WA ── */
.wa-float{
  position:fixed;bottom:28px;right:28px;z-index:999;
  width:62px;height:62px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 24px rgba(37,211,102,0.5);
  text-decoration:none;transition:all .3s;
}
.wa-float:hover{transform:scale(1.12);box-shadow:0 6px 32px rgba(37,211,102,0.7)}

/* ── ANIMATIONS ── */
@keyframes navDrop{
  from{opacity:0;transform:translateY(-18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroBookIn{
  from{opacity:0;transform:translateY(34px) scale(.96) rotate(-3deg)}
  to{opacity:1;transform:translateY(0) scale(1) rotate(-1deg)}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:
    opacity .75s ease var(--reveal-delay,0s),
    transform .75s cubic-bezier(.2,.8,.2,1) var(--reveal-delay,0s);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal-left{transform:translateX(-34px)}
.reveal-right{transform:translateX(34px)}
.reveal-scale{transform:translateY(24px) scale(.97)}
.reveal-left.is-visible,.reveal-right.is-visible,.reveal-scale.is-visible{transform:translateX(0) translateY(0) scale(1)}

@media(max-width:960px){
  .hero,.what,.foryou-grid{grid-template-columns:1fr}
  .hero-visual{padding:40px 28px 20px}
  .hero-text{padding:20px 28px 60px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .inside-grid,.weeks-grid,.t-grid{grid-template-columns:1fr}
  .order-grid,.material-grid,.shop-grid{grid-template-columns:1fr}
  .photos{grid-template-columns:1fr;height:auto}
  .photo-cell{height:280px}
  nav{padding:0 24px}
  .sec,.quote-strip,.gift,.fcta,.pricing{padding:64px 28px}
  footer{flex-direction:column;gap:14px;padding:28px;text-align:center}
  .weeks-grid{grid-template-columns:repeat(2,1fr)}
  .inside-grid{grid-template-columns:1fr}

  /* Mobile Navbar Menu styling */
  .nav-toggle {
    display: flex;
  }
  .nav-links {
    position: absolute;
    top: 75px;
    left: 0;
    right: 0;
    background: rgba(10, 5, 8, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(212, 132, 154, 0.08);
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.4s ease;
    width: 100%;
  }
  .nav-links a {
    width: 100%;
    text-align: center;
    padding: 16px 0;
    font-size: 13px;
    letter-spacing: 4px;
    border-bottom: 1px solid rgba(212, 132, 154, 0.03);
  }
  .nav-links a:last-child {
    border-bottom: none;
  }
  .nav-links.is-open {
    max-height: 300px;
    padding: 10px 0;
  }
  .nav-toggle.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    background-color: var(--pink);
  }
  .nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    background-color: var(--pink);
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
  }
  .reveal,.reveal-left,.reveal-right,.reveal-scale{
    opacity:1!important;
    transform:none!important;
  }
}

/* ── INTERACTIVE WEEKS FILTER ── */
.weeks-filter {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 900px;
  margin: -20px auto 44px;
  padding: 0 20px;
}
.filter-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(212, 132, 154, 0.12);
  color: rgba(255, 255, 255, 0.6);
  padding: 10px 24px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  border-radius: 30px;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  outline: none;
}
.filter-btn:hover {
  border-color: var(--pink);
  color: var(--white);
  box-shadow: 0 0 15px rgba(212, 132, 154, 0.2);
  transform: translateY(-2px);
}
.filter-btn.active {
  background: linear-gradient(135deg, var(--hot) 0%, #B00040 100%);
  border-color: var(--hot);
  color: var(--white);
  box-shadow: 0 6px 20px rgba(232, 16, 90, 0.45);
}
.wc.filtered-out {
  display: none !important;
}

/* ── FAQ ACCORDION ── */
.faq {
  background: var(--black);
  border-top: 1px solid rgba(212, 132, 154, 0.06);
  padding-bottom: 120px;
  padding-top: 100px;
  position: relative;
  z-index: 1;
}
.faq-intro {
  text-align: center;
  margin-bottom: 60px;
}
.faq-accordion {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-item {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(212, 132, 154, 0.08);
  border-radius: 2px;
  overflow: hidden;
  transition: all 0.35s ease;
}
.faq-item:hover {
  border-color: rgba(212, 132, 154, 0.2);
  background: rgba(255, 255, 255, 0.02);
}
.faq-question {
  width: 100%;
  padding: 24px 32px;
  background: none;
  border: none;
  text-align: left;
  font-family: 'Playfair Display', serif;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  color: var(--white);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.3s ease;
}
.faq-question:hover {
  color: var(--pink);
}
.faq-chevron {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-bottom: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  margin-right: 4px;
}
.faq-item.active {
  border-color: rgba(212, 132, 154, 0.25);
  box-shadow: 0 10px 30px rgba(10,5,8,0.3);
}
.faq-item.active .faq-chevron {
  transform: rotate(-135deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.4s ease;
  padding: 0 32px;
}
.faq-item.active .faq-answer {
  max-height: 300px;
  padding: 0 32px 28px;
}
.faq-answer p {
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.58);
}

/* ── CONTACT US ── */
.sec-contact {
  background: var(--deep);
  content-visibility: auto;
  contain-intrinsic-size: 0 700px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-start;
  max-width: 1100px;
  margin: 60px auto 0;
}
.contact-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-info .sec-p {
  max-width: 480px;
  margin-bottom: 24px;
}
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.contact-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(212, 132, 154, 0.08);
  border: 1px solid rgba(212, 132, 154, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pink);
}
.contact-text dt {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 2px;
}
.contact-text dd {
  font-size: 15px;
  color: var(--white);
}
.contact-text dd a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}
.contact-text dd a:hover {
  color: var(--pink);
}
.contact-form-card {
  background: linear-gradient(135deg, rgba(21, 12, 18, 0.75) 0%, rgba(10, 5, 8, 0.95) 100%);
  border: 1px solid rgba(212, 132, 154, 0.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 44px;
  border-radius: 4px;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.contact-form-card:hover {
  border-color: rgba(212, 132, 154, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 16px 55px rgba(212, 132, 154, 0.04), 0 12px 40px rgba(0, 0, 0, 0.55);
}
.contact-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--hot), var(--gold));
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-form span {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  min-height: 48px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 132, 154, 0.14);
  color: var(--white);
  padding: 12px 16px;
  font: 400 15px 'Plus Jakarta Sans', sans-serif;
  outline: none;
  transition: all 0.3s ease;
  border-radius: 2px;
}
.contact-form textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}
.contact-form select option {
  background: var(--deep);
  color: var(--white);
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(212, 132, 154, 0.08);
  background: rgba(255, 255, 255, 0.06);
}
.contact-form .btn-main {
  width: 100%;
  margin-top: 10px;
  border: none;
  outline: none;
  cursor: pointer;
}
.hp-field {
  display: none !important;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.alert-box {
  padding: 16px 20px;
  border: 1px solid;
  border-radius: 2px;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.alert-box-success {
  border-color: rgba(201, 169, 110, 0.45);
  background: rgba(201, 169, 110, 0.08);
  color: var(--gold);
}
.alert-box-error {
  border-color: rgba(232, 16, 90, 0.35);
  background: rgba(232, 16, 90, 0.08);
  color: var(--pink);
}

@media (max-width: 820px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ── Sleek Custom Scrollbar ── */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--black);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--plum) 0%, var(--gold) 100%);
  border-radius: 5px;
  border: 2px solid var(--black);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--pink) 0%, var(--gold) 100%);
}

/* ── Ambient Background Glows ── */
.ambient-glow {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 132, 154, 0.07) 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: floatGlow 18s ease-in-out infinite;
}
.ambient-glow-left {
  top: 18%;
  left: -200px;
}
.ambient-glow-right {
  top: 60%;
  right: -200px;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.05) 0%, transparent 70%);
  animation-delay: -6s;
}
@keyframes floatGlow {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-50px) scale(1.15); }
}
/* ── 3D BOOK PREVIEW WIDGET ── */
.preview-section {
  background: var(--black);
  text-align: center;
  position: relative;
  z-index: 1;
}
.book-viewport {
  perspective: 1600px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 44px 0 20px;
  min-height: 480px;
  position: relative;
  z-index: 2;
}
.preview-book {
  width: 320px;
  height: 440px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  transform: rotateX(8deg) rotateY(-8deg);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.65);
}
.preview-page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
}
.page-side {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 4px;
  box-shadow: inset 3px 0 20px rgba(0,0,0,0.3);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.side-front {
  z-index: 2;
  transform: rotateY(0deg);
  border: 1px solid rgba(212, 132, 154, 0.14);
}
.side-back {
  z-index: 1;
  transform: rotateY(180deg);
  border: 1px solid rgba(212, 132, 154, 0.14);
}
.preview-page.flipped {
  transform: rotateY(-180deg);
}

/* Page Themes */
.theme-cover {
  background: linear-gradient(135deg, var(--plum) 0%, var(--deep) 100%);
  color: var(--white);
  border-color: var(--gold) !important;
}
.theme-inner {
  background: linear-gradient(135deg, rgba(21, 12, 18, 0.95) 0%, rgba(10, 5, 8, 0.98) 100%);
  color: rgba(255, 255, 255, 0.82);
}
.theme-dedication {
  background: linear-gradient(135deg, var(--deep) 0%, var(--black) 100%);
  border-color: rgba(201, 169, 110, 0.25) !important;
}

/* Page Content Styling */
.preview-cover-logo {
  height: 52px;
  object-fit: contain;
  margin: 20px auto 10px;
  filter: brightness(0.9);
  display: block;
}
.preview-cover-title {
  font-family: 'Cinzel', serif;
  font-size: 34px;
  letter-spacing: 5px;
  color: var(--gold);
  margin-top: 20px;
  text-shadow: 0 2px 10px rgba(201,169,110,0.3);
}
.preview-cover-author {
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 20px;
}
.preview-cover-rule {
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin: 10px auto;
}
.preview-dedication-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--pink);
  margin-top: 40px;
}
.preview-dedication-underline {
  border-bottom: 1px dashed rgba(201, 169, 110, 0.3);
  margin: 24px 0;
  padding-bottom: 6px;
  font-size: 13px;
  color: var(--gold);
}
.preview-page-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
  margin-bottom: 14px;
  text-align: left;
}
.preview-page-tag {
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}
.preview-page-title {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  color: var(--white);
  font-weight: 700;
}
.preview-scripture-box {
  background: rgba(201, 169, 110, 0.04);
  border-left: 2px solid var(--gold);
  padding: 10px 14px;
  font-size: 11.5px;
  line-height: 1.5;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  margin: 10px 0;
  text-align: left;
}
.preview-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
  text-align: left;
}
.preview-checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.preview-checkbox {
  width: 14px;
  height: 14px;
  border: 1px solid var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
}
.preview-checkbox::after {
  content: '✓';
  color: var(--pink);
  font-size: 10px;
  display: none;
}
.preview-checkbox.checked::after {
  display: block;
}
.preview-rule-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}
.preview-rule-line {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  height: 10px;
}
.preview-affirmation {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--pink);
  text-align: center;
  margin: 14px 0;
  line-height: 1.5;
}
.preview-page-num {
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.25);
  text-align: center;
  margin-top: 10px;
}

/* Book Controls */
.book-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  position: relative;
  z-index: 10;
}
.control-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(212, 132, 154, 0.16);
  color: var(--white);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  outline: none;
}
.control-btn:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--black);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 132, 154, 0.35);
}
.control-btn:active {
  transform: translateY(0);
}
.control-info-text {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

@media (max-width: 480px) {
  .preview-book {
    width: 280px;
    height: 385px;
  }
  .page-side {
    padding: 24px 20px;
  }
  .preview-cover-title {
    font-size: 26px;
  }
}