/* ============================================================
   LAYOUT — FreeReads
   Fixed header (mobile drawer) · hero with CSS/SVG book-collage ·
   stats counters · features 2×2 · how-it-works 3 steps · trending
   (JS-rendered) · testimonial slider · FAQ · CTA banner · footer.
   ============================================================ */

/* ---------- header (fixed) ---------- */
.header{position:fixed;inset:0 0 auto 0;z-index:99;background:var(--paper);box-shadow:0 1px 0 var(--line)}
.header__wrapper{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.header__logo{font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--ink)}
.header__logo em{font-style:normal;color:var(--accent)}
.header__navbar{display:flex;gap:34px}
.header__link{font-size:16px;font-weight:500;color:var(--ink);transition:color .3s}
.header__link:hover{color:var(--accent)}
.header__btn{display:flex;gap:12px;align-items:center}
.header__btn .btn{padding:11px 22px;font-size:15px}
.header__toggle-btn{display:none;width:42px;height:42px;border-radius:10px;align-items:center;justify-content:center}
.header__toggle-btn:hover{background:var(--paper-2)}
.header__toggle-ic{display:flex;flex-direction:column;gap:5px}
.header__toggle-ic span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s, opacity .3s}
.header__toggle-btn.is-active .header__toggle-ic span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.header__toggle-btn.is-active .header__toggle-ic span:nth-child(2){opacity:0}
.header__toggle-btn.is-active .header__toggle-ic span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{background:var(--paper);padding-top:150px;padding-bottom:80px}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero__left .content-box{max-width:580px}
.content-box__head{margin-bottom:18px}
.content-box__desc{margin-bottom:32px;max-width:480px}
.content-box__btn{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* CSS/SVG collage of floating book covers */
.hero__img-box{position:relative;display:flex;justify-content:center;align-items:center;min-height:480px}
.hero__collage{position:relative;width:100%;max-width:440px;aspect-ratio:440/500}
.book-float{
  position:absolute;width:38%;
  will-change:transform;
  border-radius:6px 12px 12px 6px;
  filter:drop-shadow(0 18px 30px rgba(25,25,33,.2));
}
.book-float--1{top:0;left:6%;width:40%;z-index:2}
.book-float--2{top:16%;right:0;width:36%;z-index:1}
.book-float--3{bottom:0;left:0;width:42%;z-index:3}
.book-float--4{bottom:10%;right:4%;width:34%;z-index:2}
/* dashed orbit rings behind the collage */
.hero__ring{position:absolute;border:1.5px dashed rgba(25,25,33,.16);border-radius:50%}
.hero__ring--1{width:112%;aspect-ratio:1;top:-8%;left:-6%}
.hero__ring--2{width:82%;aspect-ratio:1;bottom:-6%;right:-8%}
/* floating stat chips */
.chip-float{
  position:absolute;z-index:4;
  background:#fff;border-radius:12px;box-shadow:var(--shadow);
  padding:10px 16px;font-size:13.5px;font-weight:600;
  display:flex;align-items:center;gap:9px;
  color:var(--ink);
}
.chip-float svg{width:18px;height:18px;flex:none}
.chip-float--1{top:6%;right:-6%}
.chip-float--2{bottom:2%;left:-8%}
.chip-float small{display:block;font-size:11px;font-weight:500;color:rgba(25,25,33,.55)}

/* ---------- stats strip ---------- */
.stats{background:var(--ink);color:#fff;padding:54px 0}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.stat__num{
  font-family:var(--font-display);font-size:clamp(38px,4.5vw,56px);
  font-weight:600;line-height:1.05;color:var(--accent);
}
.stat__num sup{font-size:.5em;top:-.55em;position:relative}
.stat__label{margin-top:6px;font-size:15px;color:rgba(255,255,255,.66);font-weight:500}

/* ---------- features ---------- */
.features{background:var(--paper);padding:96px 0}
.features__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.feature__card{
  background:var(--paper-2);
  border-radius:18px;padding:32px;
  display:flex;gap:22px;align-items:flex-start;
  transition:transform .3s ease, box-shadow .3s ease;
}
.feature__card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feature__icon-box{
  flex:none;width:58px;height:58px;border-radius:14px;
  background:var(--accent-soft);color:var(--accent-2);
  display:flex;align-items:center;justify-content:center;
}
.feature__icon-box svg{width:27px;height:27px}
.feature__heading{font-size:20px;font-weight:600;margin-bottom:7px;font-family:var(--font-display)}
.feature__card-content p{font-size:15.5px;color:rgba(25,25,33,.66)}

/* ---------- how it works ---------- */
.how{background:var(--paper-2);padding:96px 0}
.how__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.how__step{
  background:#fff;border-radius:18px;padding:34px 30px;
  position:relative;text-align:center;
}
.how__step-num{
  width:48px;height:48px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:19px;margin:0 auto 16px;
}
.how__step-title{font-size:20px;font-weight:600;font-family:var(--font-display);margin-bottom:8px}
.how__step p{font-size:15px;color:rgba(25,25,33,.64)}
.how__arrow{display:flex;justify-content:center;margin-top:18px;color:rgba(25,25,33,.35)}
.how__arrow svg{width:38px;height:14px}

/* ---------- trending ---------- */
.trending{background:var(--paper);padding:96px 0}
.trending__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.trending__footer{margin-top:36px;text-align:center}

/* book card (shared with library) */
.book-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px;display:flex;flex-direction:column;gap:14px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.book-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.book-card__cover-wrap{position:relative}
.book-card .cover{width:62%;margin:0 auto}
.book-card__body{display:flex;flex-direction:column;gap:6px}
.book-card__title{font-size:17px;font-weight:600;font-family:var(--font-display);line-height:1.25}
.book-card__author{font-size:14px;color:rgba(25,25,33,.6)}
.book-card__meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.tag{
  display:inline-block;padding:4px 11px;border-radius:999px;
  font-size:12px;font-weight:600;
  background:var(--paper-2);color:var(--ink);
}
.tag--accent{background:var(--accent-soft);color:var(--accent-2)}
.book-card__time{font-size:13px;color:rgba(25,25,33,.55);display:inline-flex;align-items:center;gap:5px}
.book-card__time svg{width:14px;height:14px}

/* ---------- testimonials slider ---------- */
.testimonials{background:var(--ink);color:#fff;padding:96px 0;overflow:hidden}
.testimonials .lead{color:rgba(255,255,255,.66)}
.testimonials__viewport{margin-top:44px;overflow:hidden}
.testimonials__track{display:flex;gap:24px;will-change:transform;transition:transform .7s cubic-bezier(.25,.46,.45,.94)}
.testimonial__box{
  flex:0 0 calc((100% - 48px)/3);
  background:var(--ink-soft);border-radius:16px;padding:30px;
  display:flex;flex-direction:column;gap:16px;
}
.testimonial__quote-mark{font-family:var(--font-display);font-size:44px;line-height:1;color:var(--accent)}
.testimonial__text{font-size:15.5px;color:rgba(255,255,255,.82);flex:1}
.testimonial__name{font-size:15px;font-weight:600}
.testimonial__role{font-size:13px;color:rgba(255,255,255,.5)}
.testimonials__nav{display:flex;gap:10px;margin-top:30px;justify-content:center}
.testimonials__dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .3s,width .3s}
.testimonials__dot.is-active{background:var(--accent);width:26px;border-radius:6px}

/* ---------- FAQ ---------- */
.faq{background:var(--paper);padding:96px 0}
.faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px;align-items:start}
.faq__col{display:grid;gap:18px}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq__item.is-open{border-color:rgba(217,122,30,.45)}
.faq__header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;text-align:left}
.faq__heading{font-size:16.5px;font-weight:600}
.faq__arrow-box{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--paper-2);display:flex;align-items:center;justify-content:center;
  transition:transform .4s cubic-bezier(.25,.46,.45,.94), background .3s;
  color:var(--ink);
}
.faq__arrow-box svg{width:15px;height:15px}
.faq__item.is-open .faq__arrow-box{transform:rotate(45deg);background:var(--accent);color:#fff}
.faq__content{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.25,.46,.45,.94)}
.faq__content p{padding:0 24px 22px;color:rgba(25,25,33,.68);font-size:15px}

/* ---------- CTA banner ---------- */
.cta{background:var(--paper);padding:20px 0 110px}
.cta__banner{
  position:relative;background:var(--accent);
  border-radius:24px;overflow:hidden;color:#fff;
  display:grid;grid-template-columns:1.2fr 1fr;align-items:center;
  padding:56px 60px;gap:30px;
}
.cta__banner::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(700px 340px at 85% 20%, rgba(255,255,255,.18), transparent 60%);
}
.cta__content-box{position:relative;z-index:1}
.cta .h2{color:#fff}
.cta .content-box__desc{color:rgba(255,255,255,.88)}
.cta__img-box{position:relative;display:flex;justify-content:center}
.cta__books{position:relative;width:200px;aspect-ratio:1}
.cta__books .book-float{width:52%}
.cta__books .book-float--1{top:0;left:10%}
.cta__books .book-float--2{bottom:0;right:0}

/* ---------- responsive ---------- */
@media screen and (max-width:991px){
  .hero{padding-top:120px}
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .hero__img-box{min-height:420px}
  .features__grid{grid-template-columns:1fr}
  .how__grid{grid-template-columns:1fr;gap:14px}
  .trending__grid{grid-template-columns:1fr 1fr}
  .testimonial__box{flex-basis:calc((100% - 24px)/2)}
  .faq__grid{grid-template-columns:1fr}
  .header__navbar{display:none}
  .header__btn .btn{display:none}
  .header__toggle-btn{display:flex}
  .cta__banner{grid-template-columns:1fr;padding:44px 34px}
  .cta__img-box{order:-1}
  .stats__grid{grid-template-columns:1fr;gap:34px}
}
@media screen and (max-width:560px){
  section{padding:64px 0}
  .hero{padding-top:110px;padding-bottom:56px}
  .features,.how,.trending,.testimonials,.faq{padding:64px 0}
  .trending__grid{grid-template-columns:1fr}
  .testimonial__box{flex-basis:100%}
  .book-card .cover{width:52%}
  .chip-float--2{left:0}
  .hero__img-box{min-height:380px}
  .hero__collage{max-width:320px}
  .content-box__btn{flex-direction:column;align-items:stretch}
  .content-box__btn .btn{width:100%}
  .cta__banner{padding:36px 24px}
}