:root {
      --book-peach: #efd9c9;
      --book-cream: #f7ebdf;
      --book-mist: #ebe5da;
      --book-sage: #c7c7b8;
      --book-blue: #8aa2ae;
      --book-blue-deep: #4d616c;
      --book-ink: #263544;
      --book-brown: #6e5a4e;
      --book-gold: #d89a4b;
      --book-soft-line: rgba(255, 255, 255, 0.38);
      --book-paper: rgba(255,255,255,0.58);
      --shadow-soft: 0 18px 52px rgba(36, 46, 53, 0.11);
      --shadow-card: 0 12px 30px rgba(39, 51, 59, 0.07);
      --radius-xl: 32px;
      --radius-lg: 24px;
      --radius-md: 18px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', sans-serif;
      color: var(--book-ink);
      background:
        radial-gradient(circle at 12% 14%, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 24%),
        radial-gradient(circle at 88% 82%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 22%),
        linear-gradient(180deg, #f4efe8 0%, #ece7dd 100%);
      overflow-x: hidden;
    }

    h1, h2, h3, h4, .font-display {
      font-family: 'Playfair Display', serif;
      letter-spacing: -0.025em;
    }

    .section-padding { padding: 6rem 0; }
    .text-book-brown { color: var(--book-brown); }
    .text-book-gold { color: var(--book-gold); }

    .navbar {
      backdrop-filter: blur(12px);
      background: rgba(247, 239, 232, 0.76);
      border-bottom: 1px solid rgba(110, 90, 78, 0.06);
    }

    .navbar-brand {
      font-family: 'Playfair Display', serif;
      font-size: 1.2rem;
      color: var(--book-brown);
    }

    .nav-link {
      color: var(--book-ink);
      font-weight: 500;
      position: relative;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      left: .6rem;
      right: .6rem;
      bottom: .2rem;
      height: 1px;
      background: var(--book-gold);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform .25s ease;
      opacity: .7;
    }

    .nav-link:hover,
    .nav-link:focus { color: var(--book-gold); }
    .nav-link:hover::after,
    .nav-link:focus::after { transform: scaleX(1); }

    .btn-book-primary {
      --bs-btn-color: #fff;
      --bs-btn-bg: var(--book-gold);
      --bs-btn-border-color: var(--book-gold);
      --bs-btn-hover-color: #fff;
      --bs-btn-hover-bg: #c98838;
      --bs-btn-hover-border-color: #c98838;
      --bs-btn-focus-shadow-rgb: 216, 154, 75;
      --bs-btn-active-bg: #bb7a2b;
      --bs-btn-active-border-color: #bb7a2b;
      border-radius: 999px;
      padding: 1rem 1.7rem;
      font-weight: 600;
      box-shadow: 0 14px 28px rgba(216, 154, 75, 0.22);
    }

    .btn-book-outline {
      border-radius: 999px;
      padding: 1rem 1.55rem;
      font-weight: 600;
      border: 1.2px solid rgba(77, 97, 108, 0.22);
      color: var(--book-blue-deep);
      background: rgba(255,255,255,0.42);
      backdrop-filter: blur(8px);
    }

    .btn-book-outline:hover {
      background: rgba(255,255,255,0.8);
      border-color: rgba(77, 97, 108, 0.34);
      color: var(--book-blue-deep);
    }

    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding-top: 6rem;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 28%, rgba(255, 245, 232, .48) 0%, rgba(255, 245, 232, 0) 22%),
        linear-gradient(180deg, rgba(231,206,187,1) 0%, rgba(249,223,203,.95) 30%, rgba(232,220,208,.88) 52%, rgba(171,182,179,.84) 73%, rgba(125,149,160,.88) 100%);
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      inset: auto;
      pointer-events: none;
      opacity: .42;
      filter: blur(55px);
      border-radius: 50%;
    }

    .hero::before {
      width: 56rem;
      height: 56rem;
      top: -20rem;
      left: -19rem;
      background: rgba(255,255,255,.34);
    }

    .hero::after {
      width: 44rem;
      height: 44rem;
      bottom: -16rem;
      right: -12rem;
      background: rgba(108, 133, 145, .25);
    }

    .hero-waves {
      position: absolute;
      inset: 0;
      opacity: .15;
      pointer-events: none;
      background-image:
        radial-gradient(ellipse at 18% 20%, transparent 56%, rgba(255,255,255,.72) 57%, transparent 59%),
        radial-gradient(ellipse at 78% 26%, transparent 55%, rgba(255,255,255,.58) 56%, transparent 58%),
        radial-gradient(ellipse at 28% 72%, transparent 58%, rgba(255,255,255,.45) 59%, transparent 61%),
        radial-gradient(ellipse at 84% 82%, transparent 58%, rgba(255,255,255,.38) 59%, transparent 61%);
      background-size: 38rem 16rem, 30rem 14rem, 42rem 18rem, 26rem 12rem;
      background-repeat: no-repeat;
    }

    .hero-copy, .hero-visual { position: relative; z-index: 2; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .48rem .96rem;
      border-radius: 999px;
      background: rgba(255,255,255,.44);
      color: var(--book-brown);
      font-weight: 600;
      box-shadow: var(--shadow-card);
      margin-bottom: 1.15rem;
      border: 1px solid rgba(255,255,255,.42);
    }

    .hero h1 {
      font-size: clamp(2.8rem, 5vw, 4rem);
      line-height: 1.03;
      color: var(--book-brown);
      margin-bottom: 1rem;
      max-width: 11ch;
    }

    .hero .lead {
      font-size: clamp(1.04rem, 1.8vw, 1.2rem);
      line-height: 1.9;
      color: rgba(38, 53, 68, 0.9);
      max-width: 38rem;
    }

    .hero-badge-list {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
      margin-top: 1.5rem;
    }

    .hero-badge {
      padding: .65rem .98rem;
      background: rgba(255,255,255,.36);
      border: 1px solid rgba(255,255,255,.45);
      border-radius: 999px;
      color: var(--book-ink);
      font-size: .95rem;
      box-shadow: var(--shadow-card);
    }

    .hero-book-wrap {
      position: relative;
      max-width: 540px;
      margin-inline: auto;
      display: flex;
      flex-direction: column;
    }

    .hero-glow {
      position: absolute;
      inset: 12% 6% auto;
      height: 76%;
      background: radial-gradient(circle, rgba(255,255,255,.54) 0%, rgba(255,255,255,0) 68%);
      filter: blur(12px);
      z-index: 0;
    }

    .hero-book {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 470px;
      display: block;
      margin-inline: auto;
      filter: drop-shadow(0 28px 54px rgba(44, 57, 66, 0.17));
    }

    .hero-note {
      position: static;
      z-index: 3;
      width: min(260px, 62%);
      margin: 1rem 0 0 auto;
      padding: 1rem 1.1rem;
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.68);
      backdrop-filter: blur(12px);
      box-shadow: var(--shadow-soft);
      border: 1px solid rgba(255,255,255,.55);
    }

    .hero-note p {
      margin: 0;
      color: var(--book-brown);
      font-size: .95rem;
      line-height: 1.7;
    }

    .floating-card,
    .quote-card,
    .reader-card,
    .buy-card,
    .author-panel,
    .book-panel,
    .preview-card,
    .feature-card {
      background: var(--book-paper);
      border: 1px solid rgba(255,255,255,.62);
      box-shadow: var(--shadow-card);
      backdrop-filter: blur(12px);
      border-radius: var(--radius-lg);
    }

    .section-title {
      font-size: clamp(2.1rem, 3.4vw, 3.3rem);
      color: var(--book-brown);
      margin-bottom: 1rem;
    }

    .section-subtitle {
      max-width: 42rem;
      color: rgba(38,53,68,.82);
      line-height: 1.9;
      font-size: 1.05rem;
    }

    .feature-card {
      padding: 1.55rem;
      height: 100%;
      transition: transform .28s ease, box-shadow .28s ease;
    }

    .feature-card:hover,
    .reader-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 36px rgba(39, 51, 59, 0.09);
    }

    .feature-icon {
      width: 52px;
      height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(216,154,75,.14);
      color: var(--book-gold);
      font-size: 1.35rem;
      margin-bottom: 1rem;
    }

    .book-panel,
    .author-panel,
    .buy-card,
    .quote-card,
    .preview-card { padding: 2.2rem; }

    .book-list li,
    .buy-list li { margin-bottom: .88rem; color: rgba(38,53,68,.88); }

    .soft-pattern-section {
      position: relative;
      overflow: hidden;
    }

    .soft-pattern-section::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .12;
      pointer-events: none;
      background-image:
        radial-gradient(ellipse at 10% 18%, transparent 56%, rgba(255,255,255,.78) 57%, transparent 59%),
        radial-gradient(ellipse at 90% 22%, transparent 55%, rgba(255,255,255,.75) 56%, transparent 58%),
        radial-gradient(ellipse at 18% 80%, transparent 59%, rgba(255,255,255,.55) 60%, transparent 62%),
        radial-gradient(ellipse at 84% 78%, transparent 60%, rgba(255,255,255,.45) 61%, transparent 63%);
      background-size: 34rem 14rem, 28rem 14rem, 36rem 16rem, 30rem 16rem;
      background-repeat: no-repeat;
    }

    .quote-section {
      background: linear-gradient(180deg, rgba(245,231,219,.7) 0%, rgba(237,234,226,.9) 100%);
    }

    .quote-card {
      position: relative;
      text-align: center;
      background: rgba(255,255,255,.46);
    }

    .quote-carousel {
      padding: 0 4.5rem 3rem;
    }

    .quote-carousel .carousel-item {
      padding: .35rem 0;
    }

    .quote-mark {
      font-size: 4.4rem;
      line-height: 1;
      color: rgba(216,154,75,.42);
      margin-bottom: .5rem;
      font-family: 'Playfair Display', serif;
    }

    .quote-text {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.75rem, 2.8vw, 2.8rem);
      line-height: 1.33;
      color: var(--book-brown);
      margin-bottom: 1rem;
    }

    .quote-support {
      max-width: 36rem;
      margin-inline: auto;
      color: rgba(38,53,68,.82);
      line-height: 1.85;
    }

    .quote-control {
      width: 48px;
      height: 48px;
      top: 50%;
      transform: translateY(-50%);
      opacity: 1;
      border-radius: 50%;
      background: rgba(255,255,255,.7);
      border: 1px solid rgba(110, 90, 78, 0.08);
      box-shadow: var(--shadow-card);
    }

    .quote-control.carousel-control-prev {
      left: 0;
    }

    .quote-control.carousel-control-next {
      right: 0;
    }

    .quote-control .carousel-control-prev-icon,
    .quote-control .carousel-control-next-icon {
      width: 1.1rem;
      height: 1.1rem;
      filter: invert(21%) sepia(13%) saturate(635%) hue-rotate(167deg) brightness(95%) contrast(89%);
    }

    .quote-indicators {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      margin: 1.5rem 0 0;
      gap: .45rem;
    }

    .quote-indicators [data-bs-target] {
      width: 10px;
      height: 10px;
      margin: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(77, 97, 108, 0.24);
      opacity: 1;
    }

    .quote-indicators .active {
      background: var(--book-gold);
    }

    .author-photo-wrap {
      position: relative;
      max-width: 360px;
      margin-inline: auto;
    }

    .author-frame {
      padding: .85rem;
      border-radius: 32px;
      background: linear-gradient(180deg, rgba(239,217,201,.82) 0%, rgba(138,162,174,.72) 100%);
      box-shadow: var(--shadow-soft);
    }

    .author-photo {
      width: 100%;
      border-radius: 24px;
      display: block;
      aspect-ratio: 4 / 5.2;
      object-fit: cover;
      object-position: center 22%;
      background: #d9d9d9;
    }

    .author-flower {
      position: absolute;
      left: -4rem;
      bottom: -1rem;
      font-size: 7rem;
      color: rgba(110,90,78,.14);
      z-index: 0;
      user-select: none;
    }

    .reader-card {
      padding: 1.7rem;
      height: 100%;
      background: rgba(255,255,255,.5);
      transition: transform .28s ease, box-shadow .28s ease;
    }

    .stars {
      color: var(--book-gold);
      letter-spacing: .14em;
      font-size: .98rem;
      margin-bottom: .85rem;
    }

    .reader-name {
      font-weight: 600;
      color: var(--book-brown);
      margin-top: 1rem;
      font-size: .95rem;
    }

    .opinions-carousel-wrap {
      position: relative;
    }

    .opinions-carousel {
      padding: 0 3.5rem;
    }

    .opinions-carousel .carousel-item {
      padding: .35rem 0;
    }

    .opinions-carousel .carousel-indicators {
      position: static;
      margin: 1.5rem 0 0;
      gap: .45rem;
    }

    .opinions-carousel .carousel-indicators [data-bs-target] {
      width: 10px;
      height: 10px;
      margin: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(77, 97, 108, 0.24);
      opacity: 1;
    }

    .opinions-carousel .carousel-indicators .active {
      background: var(--book-gold);
    }

    .opinions-control {
      width: 48px;
      height: 48px;
      top: 50%;
      transform: translateY(-50%);
      opacity: 1;
      border-radius: 50%;
      background: rgba(255,255,255,.7);
      border: 1px solid rgba(110, 90, 78, 0.08);
      box-shadow: var(--shadow-card);
    }

    .opinions-control.carousel-control-prev {
      left: 0;
    }

    .opinions-control.carousel-control-next {
      right: 0;
    }

    .opinions-control .carousel-control-prev-icon,
    .opinions-control .carousel-control-next-icon {
      width: 1.1rem;
      height: 1.1rem;
      filter: invert(21%) sepia(13%) saturate(635%) hue-rotate(167deg) brightness(95%) contrast(89%);
    }

    .stars-empty {
      color: rgba(216,154,75,.28);
    }

    .buy-section {
      background:
        radial-gradient(circle at 15% 15%, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 18%),
        linear-gradient(180deg, rgba(138,162,174,.16) 0%, rgba(245,231,219,.82) 100%);
    }

    .contact-card {
      background: var(--book-paper);
      border: 1px solid rgba(255,255,255,.62);
      box-shadow: var(--shadow-card);
      backdrop-filter: blur(12px);
      border-radius: var(--radius-lg);
      padding: 2rem;
    }

    .contact-form .form-label {
      color: var(--book-brown);
      font-weight: 600;
      margin-bottom: .5rem;
    }

    .contact-input {
      border-radius: 16px;
      border: 1px solid rgba(77, 97, 108, 0.14);
      background: rgba(255,255,255,.75);
      color: var(--book-ink);
      padding: .9rem 1rem;
      box-shadow: none;
    }

    .contact-input:focus {
      border-color: rgba(216,154,75,.55);
      box-shadow: 0 0 0 .2rem rgba(216,154,75,.12);
    }

    .contact-textarea {
      min-height: 170px;
      resize: vertical;
    }

    .price-tag {
      font-size: 2.55rem;
      font-weight: 700;
      color: var(--book-brown);
    }

    .mini-label {
      display: inline-block;
      padding: .42rem .78rem;
      border-radius: 999px;
      background: rgba(216,154,75,.12);
      color: var(--book-gold);
      font-size: .9rem;
      font-weight: 600;
      margin-bottom: 1rem;
    }

    .cta-final {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(77,97,108,.98) 0%, rgba(61,80,90,1) 100%);
      color: #fff;
    }

    .cta-final::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .14;
      background-image:
        radial-gradient(ellipse at 20% 30%, transparent 57%, rgba(255,255,255,.75) 58%, transparent 60%),
        radial-gradient(ellipse at 80% 72%, transparent 57%, rgba(255,255,255,.55) 58%, transparent 60%);
      background-size: 34rem 14rem, 34rem 14rem;
      background-repeat: no-repeat;
      pointer-events: none;
    }

    .cta-final h2,
    .cta-final p,
    .cta-final a { position: relative; z-index: 2; }

    .footer {
      padding: 2rem 0;
      background: rgba(244,239,231,0.7);
      border-top: 1px solid rgba(110, 90, 78, 0.08);
      color: rgba(38,53,68,.8);
    }

    .mock-book {
      width: 100%;
      max-width: 310px;
      aspect-ratio: 0.7 / 1;
      margin-inline: auto;
      border-radius: 18px;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 24%, rgba(255,245,230,.4) 0%, rgba(255,245,230,0) 24%),
        linear-gradient(180deg, rgba(231,206,187,1) 0%, rgba(249,223,203,.96) 36%, rgba(233,214,201,.9) 58%, rgba(140,160,170,.88) 82%, rgba(77,97,108,.98) 100%);
      box-shadow: 0 22px 40px rgba(36, 48, 56, 0.16);
      border: 1px solid rgba(255,255,255,.45);
      padding: 1.3rem 1.15rem;
    }

    .mock-book::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 16%);
      pointer-events: none;
    }

    .mock-book-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.3rem;
      line-height: 1.28;
      color: var(--book-brown);
      text-align: center;
      margin-bottom: 1rem;
    }

    .mock-book-sub {
      text-align: center;
      color: #b36f38;
      font-size: .88rem;
      line-height: 1.5;
      margin-bottom: 1.2rem;
    }

    .mock-flower {
      width: 108px;
      height: 108px;
      border-radius: 50%;
      margin: 0 auto 1.2rem;
      background:
        radial-gradient(circle at 44% 44%, #ffb37d 0%, #eb7b3a 22%, #d85a24 38%, rgba(216,90,36,0) 40%),
        radial-gradient(circle at 26% 32%, #ffb37d 0%, #eb7b3a 18%, #d85a24 32%, rgba(216,90,36,0) 34%),
        radial-gradient(circle at 73% 32%, #ffb37d 0%, #eb7b3a 18%, #d85a24 32%, rgba(216,90,36,0) 34%),
        radial-gradient(circle at 26% 72%, #ffb37d 0%, #eb7b3a 18%, #d85a24 32%, rgba(216,90,36,0) 34%),
        radial-gradient(circle at 74% 72%, #ffb37d 0%, #eb7b3a 18%, #d85a24 32%, rgba(216,90,36,0) 34%),
        linear-gradient(180deg, rgba(79,98,51,1) 0%, rgba(79,98,51,1) 100%);
      background-size: cover;
      position: relative;
      filter: drop-shadow(0 12px 18px rgba(120, 68, 33, 0.15));
    }

    .mock-flower::after {
      content: "";
      position: absolute;
      width: 8px;
      height: 84px;
      left: 50%;
      transform: translateX(-50%);
      top: 74px;
      border-radius: 999px;
      background: linear-gradient(180deg, #59704a 0%, #455a37 100%);
    }

    .mock-author {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 1rem;
      text-align: center;
      font-weight: 700;
      color: #d5782a;
      letter-spacing: .08em;
      font-size: .9rem;
    }

    .divider-floral {
      width: 88px;
      height: 1px;
      margin: 1.2rem auto 0;
      background: linear-gradient(90deg, transparent, rgba(216,154,75,.8), transparent);
    }

    @media (max-width: 991.98px) {
      .hero {
        text-align: center;
        padding-top: 7rem;
        min-height: auto;
      }

      .hero h1,
      .hero .lead,
      .section-subtitle { margin-inline: auto; }
      .hero-badge-list,
      .hero .d-flex.gap-3.flex-wrap { justify-content: center; }

      .hero-note {
        position: static;
        width: 100%;
        max-width: 360px;
        margin: 1.25rem auto 0;
      }

      .author-flower { display: none; }

      .quote-carousel {
        padding: 0 3.25rem 3rem;
      }

      .opinions-carousel {
        padding: 0 2.8rem;
      }
    }

    @media (max-width: 575.98px) {
      .section-padding { padding: 4.3rem 0; }
      .book-panel,
      .author-panel,
      .buy-card,
      .quote-card,
      .preview-card { padding: 1.4rem; }
      .hero h1 { font-size: 2.4rem; }
      .quote-text { font-size: 1.7rem; }
      .quote-carousel {
        padding: 0 2.3rem 3rem;
      }
      .quote-control {
        width: 42px;
        height: 42px;
      }
      .opinions-carousel {
        padding: 0 2.3rem;
      }
      .opinions-control {
        width: 42px;
        height: 42px;
      }
    }