:root{
  /* Base background color (fallback) and a soft gradient for visual warmth */
  --bg-color:#E6EEFF;
  --bg-gradient:linear-gradient(180deg,#F3F8FF 0%,#E6EEFF 50%,#D6E6FF 100%);
  --bg:var(--bg-color);
  --card:#FFFFFF;
  --primary:#2563EB; /* accessible blue */
  --primary-rgb:37,99,235;
  --primary-dark:#1E40AF;
  --accent:#F97316; /* warm accent */
  --muted:#6B7280;
  --text:#0B1220; /* darker text for contrast */
  --max-width:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background-color:var(--bg-color);
  background-image:var(--bg-gradient);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--max-width);margin:0 auto;padding:24px}
.site-header{background:linear-gradient(90deg, rgba(43,122,120,0.96), rgba(242,140,140,0.95));color:#fff}
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,0.6);backdrop-filter:blur(6px);border-bottom:1px solid rgba(36,49,66,0.06);color:var(--text)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{font-weight:700;margin:0;padding:6px 0;color:var(--text);text-decoration:none}
.nav{display:flex;align-items:center;gap:14px}
.nav a{color:var(--text);text-decoration:none;padding:6px 8px;border-radius:8px}
.nav-buy{padding:8px 12px}
.nav-toggle{display:none;border:0;background:transparent;padding:8px;border-radius:8px;cursor:pointer}
.nav-toggle .hamburger{display:block;width:20px;height:2px;background:var(--text);position:relative}
.nav-toggle .hamburger:before,.nav-toggle .hamburger:after{content:'';position:absolute;left:0;right:0;height:2px;background:var(--text)}
.nav-toggle .hamburger:before{top:-6px}
.nav-toggle .hamburger:after{bottom:-6px}
.nav a.cta:hover,.nav a.cta:focus{background-color:rgba(255,255,255,0.28)}

.hero{padding:48px 0}
.hero-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:center}
.lead{font-size:1.05rem;color:var(--muted);line-height:1.5}
.primary-btn{display:inline-block;background:rgba(var(--primary-rgb),0.08);color:var(--primary);padding:10px 14px;border-radius:8px;text-decoration:none;border:1px solid rgba(var(--primary-rgb),0.14)}
.primary-btn:hover,.primary-btn:focus{background:rgba(var(--primary-rgb),0.14)}
.primary-btn:active{background:rgba(var(--primary-rgb),0.16)}
.primary-btn:focus{outline:3px solid rgba(37,99,235,0.18);outline-offset:3px}
.buy-icon{height:18px;width:auto;vertical-align:middle;margin-right:8px}
.cta-section .buy-icon{height:18px;margin-right:10px}
.hero-media{text-align:center}
.cover{max-width:100%;height:auto;border-radius:8px;box-shadow:0 10px 30px rgba(36,49,66,0.08);display:block}
.cover-link{display:inline-block}
.cover-link .cover{cursor:pointer;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease;will-change:transform,box-shadow}
.cover-link .cover:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 12px 28px rgba(36,49,66,0.09)}
.cover-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.cover-wrap .front{width:240px}
.cover-wrap .backcover{margin:0;text-align:center}
.cover-wrap .backcover .thumb{width:120px;border-radius:8px;box-shadow:0 6px 18px rgba(36,49,66,0.06)}
.cover-wrap .backcover figcaption{font-size:12px;color:var(--muted);margin-top:6px}

.about h3,.reviews h3{margin-top:0}
.reviews{margin-top:16px}
.review{background:var(--card);padding:18px;border-radius:10px;margin:12px 0;box-shadow:0 6px 16px rgba(36,49,66,0.04)}
.quote{margin:0 0 8px;color:#111;line-height:1.5}
.author{margin:0;font-weight:600;color:var(--muted)}
.more{margin-top:8px}

.cta-section{background:linear-gradient(180deg, #fff, #FEFCFC);padding:28px;border-radius:12px;margin:28px auto;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:860px}

/* Make CTA section's primary button filled for emphasis */
.cta-section .primary-btn{background:var(--primary);color:#fff;border:0}
.cta-section .primary-btn:hover,.cta-section .primary-btn:focus{background:var(--primary-dark)}
.cta-section .primary-btn:active{background:var(--primary-dark)}

.site-footer{padding:24px 0;margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.small{color:var(--muted);margin:0}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .cover-wrap{flex-direction:row;gap:16px;justify-content:center}
  /* Keep header elements on one line and place hamburger at right */
  .header-inner{flex-direction:row;align-items:center;justify-content:space-between}
  .nav{margin-top:0}
  .footer-inner{flex-direction:column;gap:8px;align-items:flex-start}
}

@media (max-width:860px){
  .nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--bg);flex-direction:column;padding:12px;box-shadow:0 6px 24px rgba(36,49,66,0.06)}
  .nav.open{display:flex}
  .nav a{padding:10px 12px}
  .nav-toggle{display:block}
  .header-inner{position:relative;padding-left:16px;padding-right:16px}
}