@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@300;400;500&display=swap');

/* --- Utilities for Navigation --- */
.mobile-only-nav { display: none !important; }
.desktop-only-nav { display: list-item !important; }

@media (max-width: 960px) {
    .mobile-only-nav { display: list-item !important; }
    .desktop-only-nav { display: none !important; }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #0b0b0b;
  /* Deep Black */
  font-family: 'Poppins', sans-serif;
  color: #f0f0f0;
  /* Off-white */
  overflow-x: hidden;
  min-height: 200vh;
  /* For scrolling test */
}

/* ================= TOAST NOTIFICATIONS ================= */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: #1a1a1a;
  border-left: 4px solid #d4af37;
  color: #fff;
  padding: 15px 25px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  max-width: 450px;
  animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s ease;
  cursor: pointer;
}

.toast.error {
  border-left-color: #ff4d4d;
}

.toast.success {
  border-left-color: #4caf50;
}

.toast i {
  font-size: 1.2rem;
}

.toast-message {
  font-size: 0.9rem;
  font-weight: 500;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast-fade-out {
  opacity: 0;
  transform: translateX(100%);
}

/* ================= HEADER ================= */

.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: transparent;
  /* Start transparent */
  transition: background 0.4s ease, padding 0.4s ease, border-bottom 0.4s ease;
  padding: 15px 0;
  animation: fadeDown 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0;
  transform: translateY(-20px);
}

.header.scrolled {
  background: rgba(8, 8, 8, 0.95);
  /* Nearly solid black on scroll */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
  padding: 5px 0;
  /* Compact on scroll */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

@keyframes fadeDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-container {
  max-width: 1600px;
  /* Constrain on ultra-wide screens */
  width: 95%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
}

@media (max-width: 1024px) {
  .nav-container {
    padding: 0 20px;
  }
}

/* ================= LOGO ================= */

.logo {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 1px;
  transition: transform 0.3s ease;

  /* Golden Gradient Text */
  background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0px 0px 0px rgba(255, 255, 255, 0);
  /* Fix for some browsers */
}

.logo:hover {
  transform: scale(1.05);
  /* Subtle zoom */
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.logo span {
  color: #d4af37;
  /* Metallic Gold */
}

/* ================= NAV LINKS (DESKTOP) ================= */

.nav-links {
  display: flex;
  list-style: none;
  gap: 40px;
  /* Base desktop gap */
  align-items: center;
  transition: gap 0.3s ease;
}

@media (max-width: 1400px) {
  .nav-links {
    gap: 30px;
  }
}

@media (max-width: 1200px) {
  .nav-links {
    gap: 20px;
  }

  .logo {
    font-size: 1.8rem;
  }
}

@media (max-width: 1100px) {
  .nav-links {
    gap: 12px;
  }

  .nav-links a {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
  }
}

.nav-links li {
  position: relative;
  overflow: visible;
  /* Changed from hidden to fix dropdowns */
}

.nav-links a {
  text-decoration: none;
  color: #cfcfcf;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.3s ease, letter-spacing 0.3s ease, text-shadow 0.3s ease;
  position: relative;
  padding: 5px 0;
  display: inline-block;
}

.nav-links a:hover {
  color: #d4af37;
  /* Change text to Gold */
  letter-spacing: 2px;
  /* Cinematic expansion */
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
  /* Gold text glow */
}

/* Exclude dropdown links from underline effect */
.nav-links li:not(.user-avatar-container) a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
  transform-origin: center;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.8);
}

.nav-links li:not(.user-avatar-container) a:hover::after,
.nav-links li:not(.user-avatar-container) a.active::after {
  transform: scaleX(1);
}

/* ================= DROPDOWN MENU ================= */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(15px);
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  min-width: 260px;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-top: 4px solid #d4af37;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(212, 175, 55, 0.05);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.2, 1, 0.2, 1);
  z-index: 1000;
  padding: 20px 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* Tree Line Structure */
.dropdown-menu::before {
  content: '';
  position: absolute;
  left: 25px;
  top: 25px;
  bottom: 25px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.3), transparent);
}

.dropdown:hover .dropdown-menu,
.dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-menu li {
  width: 100%;
  position: relative;
  padding-left: 15px;
}

.dropdown-menu li::after {
  content: '';
  position: absolute;
  left: 25px;
  top: 50%;
  width: 12px;
  height: 1px;
  background: rgba(212, 175, 55, 0.3);
}

.dropdown-menu a {
  display: block;
  padding: 12px 25px 12px 50px !important;
  color: #aaa !important;
  font-size: 0.9rem !important;
  text-transform: capitalize !important;
  letter-spacing: 1px !important;
  transition: all 0.3s ease !important;
  background: transparent !important;
}

.dropdown-menu a:hover {
  background: rgba(212, 175, 55, 0.08) !important;
  color: #d4af37 !important;
  padding-left: 55px !important;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.4) !important;
}

/* Remove original active underline for dropdown items */
.dropdown-menu li:not(.user-avatar-container) a::after {
  display: none !important;
}

/* ================= LOGIN BUTTON IN NAVBAR ================= */
/* ================= LOGIN BUTTON IN NAVBAR ================= */
.nav-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 36px;
  background: linear-gradient(135deg, #d4af37 0%, #fce79a 50%, #d4af37 100%);
  background-size: 200% auto;
  color: #000 !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  font-size: 0.85rem;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-left: 20px;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15);
  position: relative;
  overflow: hidden;
  z-index: 1;
  white-space: nowrap;
}

.nav-login-btn:hover {
  background-position: right center;
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.25);
  transform: translateY(-3px) scale(1.02);
  color: #000 !important;
}

.nav-login-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.nav-login-btn:hover::before {
  left: 100%;
}

.nav-login-btn:active {
  transform: translateY(-1px) scale(0.98);
}

/* Ensure no underline for button */
.nav-links li:has(.nav-login-btn) a::after {
  display: none;
}

/* ================= HAMBURGER ================= */

.hamburger {
  display: none;
  cursor: pointer;
  z-index: 1001;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  transition: background 0.3s ease;
}

.hamburger:hover {
  background: rgba(255, 255, 255, 0.05);
}

.hamburger .bar {
  display: block;
  width: 28px;
  /* Slightly wider for better touch */
  height: 2px;
  background-color: #d4af37;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 4px;
}

/* ================= MOBILE MENU ================= */

@media (max-width: 960px) {

  /* Header adjustments for mobile */
  .header {
    padding: 10px 0 !important;
  }

  .nav-container {
    padding: 0 20px !important;
  }

  .logo {
    font-size: 1.5rem !important;
  }

  .hamburger {
    display: flex !important;
    z-index: 2100;
  }

  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Cinematic Side Drawer */
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    /* Premium drawer width */
    max-width: 380px;
    height: 100vh;
    background: rgba(8, 8, 8, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 110px 30px 40px;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.4s ease;
    z-index: 2000;
    border-left: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.9);
    overflow-y: auto;
    /* Enable scrolling for long menus */
    max-height: 100vh;
  }

  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  /* Premium Staggered Link Animation */
  .nav-links li {
    width: 100%;
    margin-bottom: 5px;
    opacity: 0;
    transform: translateX(40px) skewX(-5deg);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .nav-links.open li {
    opacity: 1;
    transform: translateX(0) skewX(0);
  }

  /* Stagger delays */
  .nav-links.open li:nth-child(1) {
    transition-delay: 0.1s;
  }

  .nav-links.open li:nth-child(2) {
    transition-delay: 0.18s;
  }

  .nav-links.open li:nth-child(3) {
    transition-delay: 0.26s;
  }

  .nav-links.open li:nth-child(4) {
    transition-delay: 0.34s;
  }

  .nav-links.open li:nth-child(5) {
    transition-delay: 0.42s;
  }

  .nav-links.open li:nth-child(6) {
    transition-delay: 0.5s;
  }

  /* Decorative numbering for editorial look */
  .nav-links li::after {
    content: "0" counter(item-count);
    counter-increment: item-count;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: #d4af37;
    opacity: 0.3;
    font-family: 'Playfair Display', serif;
  }

  .nav-links {
    counter-reset: item-count;
  }

  .nav-links a {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    padding: 12px 0;
    text-transform: capitalize;
    display: block;
    width: 100%;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.4s ease;
  }

  .nav-links a:hover,
  .nav-links a.active {
    color: #d4af37 !important;
    padding-left: 15px;
    background: rgba(212, 175, 55, 0.05);
  }

  /* Dropdown on Mobile */
  .dropdown {
    width: 100%;
    margin-bottom: 5px;
  }

  .dropdown-menu {
    position: static !important;
    max-height: 0;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.03) !important;
    transition: all 0.4s ease !important;
    padding: 0 !important;
    margin-left: 15px;
    border-left: 2px solid #d4af37 !important;
  }

  .nav-links li.dropdown.active .dropdown-menu {
    max-height: 300px;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 10px 0 !important;
    margin-top: 10px;
  }

  .dropdown-menu a {
    font-size: 1.15rem !important;
    padding: 12px 15px !important;
    font-family: 'Poppins', sans-serif !important;
    border: none !important;
  }


  /* Mobile User Profile - Premium Integrated Design */
  .user-avatar-container {
    width: 100% !important;
    margin-top: 30px !important;
    padding: 25px 0 !important;
    border-top: 1px solid rgba(212, 175, 55, 0.15) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: transparent !important;
    order: 20;
  }

  .user-avatar {
    width: 45px !important;
    height: 45px !important;
    font-size: 1.2rem !important;
    margin-bottom: 0px !important;
    /* Reset for flex row */
    border: 2px solid #d4af37 !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2) !important;
  }

  .user-profile-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* Interactive Mobile Profile Accordion */
  .user-avatar-container .avatar-dropdown {
    position: static !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-top: 0;
    padding: 0 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px;
    margin-top: 5px;
  }

  .user-avatar-container.active .avatar-dropdown {
    max-height: 400px;
    /* Increased for better clearance */
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 15px;
    padding: 10px !important;
  }

  .avatar-dropdown a {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
  }

  .avatar-dropdown a i {
    margin-right: 15px !important;
    font-size: 1.2rem !important;
    color: #d4af37 !important;
  }

  #logout-btn {
    color: #ff6b6b !important;
    border-bottom: none !important;
  }

  /* Fixed Mobile Login Button */
  .nav-login-btn {
    width: 100% !important;
    justify-content: center !important;
    margin: 30px 0 0 0 !important;
    padding: 18px !important;
    border-radius: 12px !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #d4af37, #aa771c) !important;
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3) !important;
    color: #000 !important;
    border: none !important;
    text-transform: uppercase !important;
  }
}

/* ================= USER AVATAR ================= */
.user-avatar-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  overflow: visible !important;
}

.user-profile-trigger {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37, #aa771c);
  color: #000;
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-family: 'Playfair Display', serif;
}

.user-avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
}

.avatar-dropdown {
  position: absolute;
  top: 120%;
  right: 0;
  background: rgba(11, 11, 11, 0.95);
  backdrop-filter: blur(10px);
  z-index: 2000;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 10px;
  padding: 10px;
  min-width: 150px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  /* Ensure it uses flex layout */
  flex-direction: column;
  /* Stack items vertically */
}

.user-avatar-container:hover .avatar-dropdown,
.avatar-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.avatar-dropdown a {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  color: #f0f0f0;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  border-radius: 6px;
  white-space: nowrap;
  margin-bottom: 5px;
}

.avatar-dropdown a:last-child {
  margin-bottom: 0;
}

.avatar-dropdown a:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #d4af37;
  transform: translateX(5px);
}

.avatar-dropdown a i {
  margin-right: 12px;
  font-size: 1.1rem;
  color: #d4af37;
  width: 20px;
  text-align: center;
}

/* Custom style for Logout to make it distinct */
#logout-btn:hover {
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
}

#logout-btn:hover i {
  color: #e74c3c;
}

/* ================= HERO SECTION ================= */

.hero {
  width: 100%;
  min-height: 100vh;
  /* Ensure it covers height but allows content flow */
  height: auto;
  background: radial-gradient(circle at top center, #1a1a1a, #0b0b0b);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 150px 5% 40px;
  /* Reduced top padding to fit 14" screen */
  overflow: hidden;
}

.hero-container {
  width: 100%;
  /* Full Width */
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Split layout on Desktop */
  gap: 40px;
  align-items: center;
}

/* Hero Content (Left) */
.hero-content {
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* Default left alignment for Desktop relative to container, 
       but buttons need specific centering logic within their grid? 
       Actually, if user wants buttons centered relative to themselves, 
       but keeping the content left aligned?
       "content and image centered" was a previous request they reverted.
       But now "desktop me bhi isi tarah" refers to BUTTON layout.
       Let's keep text left-aligned as per "revert" but fix buttons?
       Wait, "image ko rounded rakho... hero section pura dikh na chhiaye... risponsive me teeno butoon ek pehele do ek sath... desktop me bhi isi tarah"
       
       Let's stick to Left Align text for Desktop (Premium feel) but arrange buttons as requested.
    */
  align-items: flex-start;
  text-align: left;
}

.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  /* Balanced size */
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 20px;
  margin-left: 30px;
  background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  animation: fadeInScale 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.3s;
  text-shadow: 0 10px 40px rgba(212, 175, 55, 0.3);
  /* Gold glow shadow */
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.hero-subtitle {
  font-size: 1rem;
  color: #d4af37;
  /* Metallic Gold */
  font-weight: 500;
  letter-spacing: 3px;
  margin-bottom: 25px;
  text-transform: uppercase;
  opacity: 0;
  animation: slideUp 1s ease forwards 0.3s;
  display: flex;
  align-items: center;
  gap: 15px;
  /* Left align on destkop, so no justify-center here */
  white-space: nowrap;
}

.hero-subtitle::before {
  content: '';
  width: 40px;
  /* Longer line */
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4af37);
}

.hero-subtitle::after {
  content: '';
  /* Requested line on back */
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, #d4af37, transparent);
  display: block;
  /* Ensure it's visible */
}

.hero-description {
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  color: #cccccc;
  /* Softer gray */
  line-height: 1.7;
  max-width: 550px;
  margin-bottom: 35px;
  font-weight: 300;
  /* Lighter weight for elegance */
  opacity: 0;
  animation: slideUp 1s ease forwards 0.7s;
}

/* CTA Buttons Layout */
.cta-group {
  display: grid;
  grid-template-columns: auto auto;
  /* 2 columns */
  gap: 15px;
  justify-content: start;
  /* Left align the group */
  opacity: 0;
  animation: slideUp 1s ease forwards 0.9s;
}

.btn:nth-child(3) {
  grid-column: span 2;
  /* 3rd button spans full width */
  justify-self: center;
  /* Center the button in the span */
  width: 100%;
  /* Optional: make it full width or just centered? "bich me vala". Centered preferred. */
  text-align: center;
  justify-content: center;
  max-width: 200px;
  /* Prevent being too wide */
  margin: 0 auto;
}

.btn {
  text-decoration: none;
  padding: 12px 28px;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* Primary: Read Stories (Gold) */
.btn-primary {
  background: linear-gradient(135deg, #d4af37, #aa771c);
  color: #000;
  font-weight: 600;
  box-shadow: 0 5px 20px rgba(212, 175, 55, 0.25);
  border: 1px solid transparent;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
  background: linear-gradient(135deg, #ebd076, #bf953f);
}

/* Secondary: Listen Audio (Glass/Gold Border) */
.btn-secondary {
  border: 1px solid rgba(212, 175, 55, 0.6);
  color: #d4af37;
  background: rgba(212, 175, 55, 0.05);
  backdrop-filter: blur(5px);
}

.btn-secondary:hover {
  background: rgba(212, 175, 55, 0.15);
  transform: translateY(-3px);
  color: #fff;
  border-color: #d4af37;
  box-shadow: 0 5px 20px rgba(212, 175, 55, 0.15);
}

/* Outline: Buy Books (Minimal White) */
.btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #e0e0e0;
  background: transparent;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(255, 255, 255, 0.1);
}

/* Hero Visual (Right) */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  perspective: 1000px;
}

.image-wrapper {
  position: relative;
  width: 350px;
  height: 350px;
  /* Fixed height for circle */
  animation: float 6s ease-in-out infinite;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  /* Rounded as requested */
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(212, 175, 55, 0.2);
}

.glow-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
  filter: blur(30px);
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 50px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  padding-top: 10px;
  opacity: 0;
  animation: fadeIn 1s ease forwards 1.5s;
  cursor: pointer;
}

.scroll-indicator span {
  width: 4px;
  height: 8px;
  background: #d4af37;
  border-radius: 2px;
  animation: scroll 1.5s infinite;
}

/* KEYFRAMES */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes scroll {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(15px);
    opacity: 0;
  }
}

/* RESPONSIVE */
@media (max-width: 960px) {
  .hero {
    padding-top: 110px;
    /* More spacing for navbar on mobile */
    align-items: flex-start;
    /* Start align to fit content */
    padding-bottom: 50px;
  }

  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }

  .hero-content {
    align-items: center;
    /* Center align on mobile */
    text-align: center;
  }

  .nav-links a {
    font-size: 2rem;
    font-weight: 300;
    color: #fff;
    /* Reset */
  }

  .nav-links .nav-login-btn {
    font-size: 1.2rem;
    /* Reasonable size for mobile button */
    padding: 12px 35px;
    margin-top: 15px;
    margin-left: 0;
    width: auto;
    display: inline-flex;
    background: linear-gradient(135deg, #d4af37, #aa771c);
    border: 1px solid #aa771c;
    color: #000 !important;
  }

  .hero-title {
    font-size: 2.2rem;
    /* Adjusted for mobile */
    margin-left: 0;
    /* Reset nudge on mobile */
  }

  .hero-subtitle {
    justify-content: center;
    /* Center align subtitle */
    font-size: 0.9rem;
    /* Slightly smaller to prevent text wall */
    white-space: normal;
    /* ALLOW WRAPPING */
    letter-spacing: 1px;
    line-height: 1.5;
    /* Better readability */
    max-width: 90%;
    /* Prevent edge touching */
    margin: 0 auto 25px;
  }

  .hero-subtitle::before {
    display: none;
    /* Remove lines on mobile for cleaner look */
  }

  .hero-subtitle::after {
    display: none;
  }

  .hero-description {
    margin: 0 auto 30px;
    padding: 0 15px;
    /* Add padding */
  }

  /* Button Layout Optimization for Mobile */
  .cta-group {
    display: flex;
    /* Use Flex for better control */
    flex-direction: column;
    /* Stack by default on mobile */
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 300px;
    /* Constrain width */
    margin: 0 auto;
  }

  .btn {
    padding: 12px 20px;
    font-size: 1rem;
    width: 100%;
    /* Full width buttons */
    justify-content: center;
  }

  /* .btn:nth-child(3) styling - Reset specific grid hacks */
  .btn:nth-child(3) {
    width: 100%;
    min-width: auto;
  }

  .hero-visual {
    order: -1;
    /* Image on top for Mobile */
    margin-bottom: 30px;
  }

  .image-wrapper {
    width: 260px;
    height: 260px;
    margin: 0 auto;
  }

  /* Prevent Scroll Indicator Overlap */
  .scroll-indicator {
    display: none;
    /* Hide on mobile to prevent clutter/overlap */
  }

  /* Very small screens: Stack buttons if needed - REMOVED as valid above is stricter */

}

/* ================= WORLD OF WORDS SECTION ================= */

.world-of-words {
  width: 100%;
  padding: 100px 5%;
  /* Generous padding */
  background: #0b0b0b;
  /* Deep Dark Background (Unified) */
  display: flex;
  justify-content: center;
  text-align: center;
}

.wow-container {
  width: 100%;
  /* Full Width */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wow-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  /* Larger and more prominent */
  color: #d4af37;
  /* Gold */
  font-weight: 700;
  margin-bottom: 25px;
  letter-spacing: 1px;
  text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  /* Added depth */
}

.wow-icon {
  margin-bottom: 30px;
  opacity: 0.9;
}

.wow-icon svg {
  /* Feather adjustment */
  width: 50px;
  /* Slightly larger */
  height: 50px;
  fill: #d4af37;
  transform: rotate(15deg);
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3));
  /* Glow */
}

.wow-text {
  font-family: 'Poppins', sans-serif;
  /* Changed to Sans-Serif for better readability */
  font-size: 1.15rem;
  color: #e0e0e0;
  /* Brighter text */
  line-height: 2;
  margin-bottom: 50px;
  font-weight: 300;
  width: 100%;
  max-width: 800px;
  letter-spacing: 0.5px;
  /* Clean spacing */
}

.wow-btn {
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  /* Consistent sans-serif */
  font-size: 0.9rem;
  color: #d4af37;
  border: 1px solid #d4af37;
  padding: 14px 40px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  background: transparent;
  border-radius: 10px;
  /* Rounded as requested */
}

.wow-btn:hover {
  background: #d4af37;
  color: #000;
  box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3);
  transform: translateY(-2px);
  font-weight: 600;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .wow-title {
    font-size: 2rem;
  }

  .wow-text {
    font-size: 1rem;
    line-height: 1.8;
    padding: 0 10px;
  }

  .wow-btn {
    padding: 12px 30px;
    font-size: 0.8rem;
  }
}

/* ================= LATEST STORIES SECTION ================= */

.latest-stories {
  width: 100%;
  padding: 50px 5% 80px;
  /* Reduced top padding as requested */
  background: #0b0b0b;
  /* Deep Dark Background */
  position: relative;
}

.ls-container {
  width: 100%;
  /* Full Width */
  margin: 0;
  text-align: center;
}

.ls-title {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  color: #d4af37;
  /* Changed to Gold */
  margin-bottom: 10px;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.ls-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: #888;
  margin-bottom: 40px;
  /* Reduced margin */
  font-weight: 300;
}

/* Grid Layout */
.ls-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  /* Reduced gap */
}

/* Story Card */
.story-card {
  background: #151515;
  /* Card BG */
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
}

.story-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.1);
  border-color: rgba(212, 175, 55, 0.3);
}

/* Image Wrapper */
.card-image-wrapper {
  width: 100%;
  height: 220px;
  /* Reduced height (smaller cards) */
  position: relative;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.story-card:hover .card-image {
  transform: scale(1.1);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.9) 100%);
  pointer-events: none;
}

/* Badges */
.badge-container {
  position: absolute;
  top: 15px;
  left: 0;
  /* Star from left edge */
  width: 100%;
  /* Spans full width */
  padding: 0 15px;
  /* Add padding for spacing from edges */
  display: flex;
  justify-content: space-between;
  /* Pushes items to opposite sides */
  align-items: flex-start;
  z-index: 2;
  pointer-events: none;
  /* Let clicks pass through if needed */
}

/* Individual badges need pointer events back if they are clickable (optional) */
.card-badge {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.8);
  color: #d4af37;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 50px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(212, 175, 55, 0.3);
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
}

/* Badge Variants */
.badge-horror {
  color: #ff4d4d;
  border-color: #ff4d4d;
}

.badge-romance {
  color: #ff99cc;
  border-color: #ff99cc;
}

.badge-mystery {
  color: #a385ff;
  border-color: #a385ff;
}

.badge-lang {
  color: #fff;
  border-color: #fff;
}


/* Content */
.card-content {
  padding: 20px;
  /* Reduced padding */
  text-align: left;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  /* Slightly smaller */
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.story-card:hover .card-title {
  color: #d4af37;
}

.card-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  color: #aaa;
  margin-bottom: 15px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

/* Meta Data */
.card-meta {
  display: flex;
  gap: 15px;
  font-size: 0.75rem;
  color: #666;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
}

.card-meta i {
  margin-right: 5px;
  color: #d4af37;
}

/* Button */
.card-btn {
  text-decoration: none;
  text-align: center;
  padding: 10px 0;
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: #d4af37;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card-btn:hover {
  background: #d4af37;
  color: #000;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .ls-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .latest-stories {
    padding-top: 50px;
    /* Ensure 50px padding on mobile too */
  }

  .ls-grid {
    grid-template-columns: 1fr;
    /* Stack on mobile */
    max-width: 350px;
    /* Smaller max width on mobile */
    margin: 0 auto;
  }

  .ls-title {
    font-size: 2.2rem;
  }

  .ls-subtitle {
    margin-bottom: 30px;
  }
}

/* ================= AUDIO STORIES SECTION ================= */

.audio-stories {
  width: 100%;
  padding: 50px 5% 80px;
  /* Reduced top padding */
  background: #0b0b0b;
  /* Deep Dark Background (Unified) */
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.audio-container {
  width: 100%;
  /* Full Width */
  margin: 0;
  text-align: center;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  color: #d4af37;
  /* Gold Color */
  margin-bottom: 10px;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.section-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: #888;
  margin-bottom: 40px;
  /* Reduced margin */
  font-weight: 300;
}

.audio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Audio Card */
.audio-card {
  background: #151515;
  border-radius: 15px;
  overflow: hidden;
  /* Podcast card look */
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.audio-card:hover {
  transform: translateY(-5px);
  border-color: rgba(212, 175, 55, 0.3);
}

/* Thumbnail */
.audio-thumb {
  width: 100%;
  height: 220px;
  /* Reduced height to match Latest Stories */
  position: relative;
  overflow: hidden;
}

.audio-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.audio-card:hover .audio-thumb img {
  transform: scale(1.05);
}

/* Play Overlay */
.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  /* Lighter overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Always visible on desktop for better UX, or hover */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.audio-card:hover .play-overlay {
  opacity: 1;
}

/* Clean Play Button (Audio Series Style) */
.play-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  /* Semi-transparent dark */
  border: 2px solid #d4af37;
  /* Gold Border */
  color: #d4af37;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

.play-btn:hover {
  background: #d4af37;
  color: #000;
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

/* Removed Pulse Ring as requested */
.pulse-ring {
  display: none;
}

@keyframes pulse {
  0% {
    width: 60px;
    height: 60px;
    opacity: 1;
  }

  100% {
    width: 100px;
    height: 100px;
    opacity: 0;
  }
}

/* Audio Info */
.audio-info {
  padding: 20px;
  /* Reduced padding */
  text-align: left;
}

.audio-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  /* Matched Latest Stories */
  color: #fff;
  margin-bottom: 5px;
}

.audio-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Minimal Player UI */
.audio-player-ui {
  margin-bottom: 20px;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: #333;
  border-radius: 2px;
  margin-bottom: 8px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #d4af37;
}

.time-tags {
  display: flex;
  justify-content: space-between;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  color: #666;
}

.listen-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid #d4af37;
  color: #d4af37;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
}

.listen-btn:hover {
  background: #d4af37;
  color: #000;
}

/* Responsive */
@media (max-width: 1024px) {
  .audio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .audio-stories {
    padding-top: 50px;
  }

  .audio-grid {
    grid-template-columns: 1fr;
    max-width: 350px;
    margin: 0 auto;
  }

  .section-title {
    font-size: 2.2rem;
  }
}

/* ================= BOOKS SECTION ================= */

.books-section {
  width: 100%;
  padding: 50px 5% 80px;
  background: #0b0b0b;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.books-container {
  width: 100%;
  /* Full Width */
  margin: 0;
  text-align: center;
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  perspective: 1000px;
  /* Enable 3D perspective */
}

/* Book Card */
.book-card {
  background: #111;
  /* Darker background */
  border-radius: 12px;
  padding: 30px 20px;
  /* More padding */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  /* Removed border */
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  /* Soft shadow */
}

.book-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  background: #151515;
  /* Slightly lighter on hover */
}

.book-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #d4af37;
  transition: all 0.4s ease;
  transform: translateX(-50%);
}

.book-card:hover::after {
  width: 80%;
}

/* 3D Cover Wrapper */
.book-cover-wrapper {
  width: 180px;
  /* Fixed width for consistent look */
  height: 270px;
  margin-bottom: 25px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
  /* Shadow to simulate depth */
}

.book-card:hover .book-cover-wrapper {
  transform: rotateY(-15deg) scale(1.05);
  /* Slight turn and zoom */
  box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.6);
}

.book-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  /* Harder edges for book look */
}

/* Badges */
.book-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 15px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  font-family: 'Poppins', sans-serif;
  z-index: 5;
}

.badge-bestseller {
  background: linear-gradient(45deg, #d4af37, #f7ef8a);
  color: #000;
}

.badge-new {
  background: #007bff;
}

/* Info */
.book-info {
  width: 100%;
}

.book-rating {
  color: #ffd700;
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.book-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 5px;
}

.book-author {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 15px;
  font-style: italic;
}

.book-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  color: #bbb;
  margin-bottom: 20px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.book-meta {
  display: flex;
  justify-content: center;
  gap: 15px;
  align-items: center;
  margin-bottom: 25px;
  font-family: 'Poppins', sans-serif;
}

.book-genre {
  font-size: 0.8rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.book-price {
  font-size: 1.1rem;
  color: #d4af37;
  font-weight: 600;
}

/* Actions */
.book-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn-buy,
.btn-details {
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-buy {
  background: #d4af37;
  color: #000;
  font-weight: 600;
}

.btn-buy:hover {
  background: #fff;
  transform: translateY(-2px);
}

.btn-details {
  border: 1px solid #444;
  color: #ccc;
}

.btn-details:hover {
  border-color: #fff;
  color: #fff;
}

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

@media (max-width: 768px) {
  .books-grid {
    grid-template-columns: 1fr;
    gap: 50px;
    /* More space for vertical scroll */
    max-width: 350px;
    margin: 0 auto;
  }
}

/* ================= SECTION FOOTER BUTTONS ================= */
.section-footer {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.view-all-btn {
  text-decoration: none;
  color: #d4af37;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  padding: 12px 30px;
  border: 1px solid #d4af37;
  border-radius: 50px;
  /* Pillow shape */
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(212, 175, 55, 0.05);
  /* Very subtle gold tint */
}

.view-all-btn:hover {
  background: #d4af37;
  color: #000;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
}

.view-all-btn i {
  transition: transform 0.3s;
}

.view-all-btn:hover i {
  transform: translateX(5px);
}


/* ================= BOOK CARD ADJUSTMENTS (Compact + Big Image) ================= */
.book-cover-wrapper {
  width: 170px;
  /* Increased back up */
  height: 255px;
  /* Increased back up */
  margin-bottom: 15px;
  /* Reduced margin */
}

.book-title {
  font-size: 1.2rem;
  /* Reduced from 1.4rem */
}

/* ================= FOOTER SECTION ================= */
.site-footer {
  background-color: #050505;
  color: #fff;
  padding: 40px 0 30px;
  /* Reduced padding */
  font-family: 'Poppins', sans-serif;
  border-top: 1px solid rgba(212, 175, 55, 0.1);
  position: relative;
  margin-top: 0;
}

.footer-container {
  width: 100%;
  padding: 0 5%;
  /* Adjusted padding as requested */
  margin: 0;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.5fr;
  gap: 50px;
  margin-bottom: 60px;
}

/* Brand Column */
.footer-brand {
  font-family: 'Playfair Display', serif;
  color: #d4af37;
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.footer-tagline {
  color: #aaa;
  font-size: 1rem;
  margin-bottom: 25px;
  line-height: 1.6;
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-link {
  width: 40px;
  height: 40px;
  border: 1px solid #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-link:hover {
  border-color: #d4af37;
  background: #d4af37;
  color: #000;
  transform: translateY(-3px);
}

/* Links Column */
.footer-heading {
  font-family: 'Playfair Display', serif;
  color: #d4af37;
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
  font-size: 1rem;
}

.footer-links a:hover {
  color: #d4af37;
  padding-left: 5px;
}

/* Newsletter Column */
.newsletter-text {
  color: #aaa;
  margin-bottom: 20px;
}

.newsletter-form {
  display: flex;
  background: #111;
  border: 1px solid #333;
  border-radius: 5px;
  overflow: hidden;
}

.newsletter-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px 15px;
  color: #fff;
  outline: none;
  font-family: 'Poppins', sans-serif;
}

.newsletter-btn {
  background: #d4af37;
  border: none;
  padding: 0 20px;
  color: #000;
  cursor: pointer;
  transition: background 0.3s;
}

.newsletter-btn:hover {
  background: #fff;
}

/* Footer Bottom */
.footer-bottom {
  text-align: center;
  border-top: 1px solid #222;
  padding-top: 30px;
  color: #666;
  font-size: 0.9rem;
}



/* Responsive Footer */
@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .social-icons {
    justify-content: center;
  }
}

/* ================= SEARCH & FILTER ================= */
.search-filter-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto 40px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.search-box {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.search-input {
  width: 100%;
  padding: 15px 50px 15px 25px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 50px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease;
}

.search-input:focus {
  border-color: #f37021;
  box-shadow: 0 0 15px rgba(243, 112, 33, 0.2);
}

.search-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.filter-btn {
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
  /* Slightly rounded rect as per image, or full pill? User said 'rounded' in text but image shows slight round. I'll stick to 5px or 8px */
  background: #f5f5f5;
  /* Light Grey/White-ish */
  color: #333;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.filter-btn:hover {
  background: #e0e0e0;
}

.filter-btn.active {
  background: #f37021;
  /* Orange */
  color: #fff;
  box-shadow: 0 5px 15px rgba(243, 112, 33, 0.3);
}

/* ================= CONTACT SIDE-BY-SIDE ================= */
.contact-container-grid {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.contact-info-side {
  background: #111;
  padding: 40px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.contact-form-side {
  background: #111;
  padding: 40px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

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

/* ================= ABOUT PAGE REFINEMENTS ================= */

.about-image-circle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-image-circle img {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid rgba(212, 175, 55, 0.2);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  transition: all 0.5s ease;
}

.about-image-circle:hover img {
  border-color: #d4af37;
  transform: scale(1.02);
  box-shadow: 0 0 50px rgba(212, 175, 55, 0.15);
}

.experience-badge {
  position: absolute;
  bottom: 20px;
  right: 50px;
  background: #d4af37;
  color: #000;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  animation: float 3s ease-in-out infinite;
}

.exp-number {
  font-size: 1.8rem;
  font-family: 'Playfair Display', serif;
  line-height: 1;
}

.exp-text {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.about-intro {
  color: #f37021;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 10px;
}

.about-name {
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.1;
}

.about-divider {
  width: 80px;
  height: 3px;
  background: #d4af37;
  margin-bottom: 30px;
}

.about-text {
  color: #ccc;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 20px;
  text-align: left;
  /* Improved readability */
}

.drop-cap {
  float: left;
  font-size: 3.5rem;
  line-height: 0.8;
  color: #d4af37;
  padding-right: 10px;
  font-family: 'Playfair Display', serif;
}

/* Author Stats */
.author-stats {
  display: flex;
  gap: 50px;
  margin-top: 50px;
  padding-top: 40px;
  border-top: 1px solid rgba(212, 175, 55, 0.3);
  /* Gold divider */
  justify-content: flex-start;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center align text */
}

.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  /* Larger numbers */
  color: #d4af37;
  /* Gold color */
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.stat-label {
  font-size: 1rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 10px;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

@media (max-width: 960px) {
  .about-image-circle img {
    width: 280px;
    height: 280px;
  }

  .experience-badge {
    right: 10%;
    width: 80px;
    height: 80px;
  }

  .exp-number {
    font-size: 1.4rem;
  }

  .about-name {
    font-size: 2.5rem;
  }

  .author-stats {
    justify-content: center;
    gap: 30px;
  }
}

/* ================= STORY DETAIL PAGE ================= */
.story-hero {
  width: 100%;
  /* Keep navbar space */
  padding: 140px 5% 50px;
  background: radial-gradient(circle at top right, #1a1a1a, #0b0b0b);
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.story-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}

/* LEFT: Visual */
.story-visual {
  position: relative;
}

.story-cover-wrapper {
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.4s ease, border-color 0.4s ease;
}

.story-cover-wrapper:hover {
  transform: scale(1.02);
  border-color: #d4af37;
  box-shadow: 0 15px 50px rgba(212, 175, 55, 0.1);
}

.story-cover {
  width: 100%;
  display: block;
  aspect-ratio: 2/3;
  object-fit: cover;
}

.story-badges {
  position: absolute;
  bottom: 15px;
  left: 15px;
  display: flex;
  gap: 10px;
}

.badge {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
  backdrop-filter: blur(5px);
}

.badge-cat {
  background: rgba(243, 112, 33, 0.9);
}

.badge-lang {
  background: rgba(0, 123, 255, 0.9);
}

/* RIGHT: Details */
.story-info {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.story-title {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 10px;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.story-author {
  font-size: 1.1rem;
  color: #888;
  font-weight: 300;
  margin-bottom: 15px;
}

.author-name {
  color: #d4af37;
  font-weight: 500;
}

.story-rating-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
}

.stars {
  color: #ffd700;
  font-size: 1rem;
}

.rating-text {
  color: #ccc;
  font-size: 0.9rem;
}

/* Meta Grid */
.story-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  background: rgba(255, 255, 255, 0.03);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 20px;
}

.meta-item {
  display: flex;
  flex-direction: column;
}

.meta-label {
  font-size: 0.75rem;
  color: #666;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.meta-value {
  color: #fff;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
}

.story-synopsis {
  color: #ccc;
  line-height: 1.8;
  font-size: 1.05rem;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Action Buttons */
.story-actions {
  display: flex;
  gap: 15px;
  margin-top: auto;
  /* Push to bottom if height allows */
}

.btn-read {
  padding: 12px 30px;
  background: linear-gradient(135deg, #d4af37, #b38728);
  color: #000;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
}

.btn-read:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.btn-listen {
  padding: 12px 30px;
  background: transparent;
  color: #fff;
  border: 1px solid #d4af37;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
}

.btn-listen:hover {
  background: rgba(212, 175, 55, 0.1);
}

.btn-icon {
  width: 45px;
  height: 45px;
  border-radius: 5px;
  background: #1a1a1a;
  border: 1px solid #333;
  color: #888;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.3s;
}

.btn-icon:hover {
  border-color: #d4af37;
  color: #d4af37;
}

/* TAB SECTION */
.story-content-section {
  padding: 80px 5%;
  background: #0b0b0b;
  min-height: 50vh;
}

.tabs-container {
  max-width: 800px;
  margin: 0 auto 50px;
  display: flex;
  justify-content: center;
  gap: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0;
}

.tab-btn {
  background: none;
  border: none;
  color: #666;
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  padding-bottom: 20px;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}

.tab-btn:hover {
  color: #fff;
}

.tab-btn.active {
  color: #d4af37;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  /* Align with border-bottom */
  left: 0;
  width: 100%;
  height: 3px;
  background: #d4af37;
  box-shadow: 0 -5px 10px rgba(212, 175, 55, 0.3);
}

/* Tab Panes */
.tab-content-container {
  max-width: 800px;
  margin: 0 auto;
}

.tab-pane {
  display: none;
  animation: fadeIn 0.5s ease;
}

.tab-pane.active {
  display: block;
}

/* Pane Content Styling */
.pane-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 20px;
  border-left: 3px solid #d4af37;
  padding-left: 15px;
}

.tab-pane p {
  color: #ccc;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* Reading Mode Custom Styles */
.read-mode {
  background: #111;
  padding: 50px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.chapter-title {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: #d4af37;
  margin-top: 40px;
  margin-bottom: 20px;
  text-align: center;
}

.read-mode p {
  font-family: 'Georgia', serif;
  /* Classic reading font */
  font-size: 1.15rem;
  line-height: 1.9;
  color: #e0e0e0;
  margin-bottom: 25px;
}

.story-end-marker {
  text-align: center;
  font-style: italic;
  color: #666;
  margin-top: 50px;
}

/* Reviews */
.review-item {
  background: #151515;
  padding: 25px;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.review-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.reviewer-name {
  color: #fff;
  font-weight: 600;
}

.review-stars {
  color: #ffd700;
  font-size: 0.8rem;
}

.review-text {
  font-size: 1rem;
  color: #ccc;
  font-style: italic;
}

/* --- DESKTOP ACTION BUTTONS (User Requested Fix) --- */
.story-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Tight gap to keep them close */
  margin-top: 25px;
  justify-content: flex-start;
  /* Align LEFT */
}

/* Read Button - Desktop */
.btn-read {
  background: #d4af37;
  color: #000;
  font-weight: 600;
  padding: 0 25px;
  height: 45px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: transform 0.2s;
  border: none;
  cursor: pointer;
}

.btn-read:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* Share & Heart - Small & Square on Desktop */
.btn-fav,
.btn-share {
  width: 45px;
  /* Small square */
  height: 45px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.3s;
}

.btn-fav:hover,
.btn-share:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-fav.active {
  color: #e74c3c;
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
}

/* --- RESPONSIVE BREAKPOINTS --- */
@media (max-width: 900px) {
  .story-hero-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .story-visual {
    max-width: 400px;
    margin: 0 auto;
  }

  .story-cover-wrapper {
    aspect-ratio: 3/4;
    /* Slightly shorter on mobile */
  }

  .story-info {
    text-align: center;
  }

  .story-rating-row {
    justify-content: center;
  }

  .story-actions {
    justify-content: center;
  }

  .read-mode {
    padding: 25px;
  }
}

/* Default: Hide mobile-only elements */
.story-back-row {
  display: none;
}

/* --- STORY DETAIL RESPONSIVE FIX (v6.0) --- */
@media (max-width: 768px) {
  .story-hero-container {
    width: 100%;
    padding: 0 15px;
    /* Ensure padding fits */
    overflow-x: hidden;
    /* Prevent overflow */
  }

  .story-info {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    /* Critical */
  }

  /* Force summary text to wrap */
  .story-synopsis,
  .story-title,
  .author-name {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }

  /* Ensure buttons don't push width */
  .story-actions {
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
  }

  .btn-read {
    width: 100%;
    /* Full width button on mobile looks better & safer */
    display: flex;
    justify-content: center;
  }

  /* Fix for Massive Image on Mobile */
  .story-visual {
    width: 100%;
    max-width: 260px;
    /* Much smaller max-width for mobile */
    margin: 0 auto 30px;
    /* Center and add space below */
  }

  /* Ensure the wrapper respects the width */
  .story-cover-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 2/3;
    /* Standard book ratio */
  }

  /* Global Container Protection */
  #story-container {
    overflow-x: hidden;
    width: 100%;
    padding-bottom: 40px;
  }

  /* --- PREMIUM MOBILE APP LAYOUT --- */

  /* 1. Wrapper & Spacing */
  .story-hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px;
  }

  /* Back Link Style - Premium Pill (Mobile Only) */
  .story-back-row {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    /* Align left */
    margin-bottom: 2px;
    /* Tight 2px gap as requested */
    padding-top: 10px;
  }

  .back-link {
    color: #eee;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    text-decoration: none;
  }

  .back-link:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: #d4af37;
    color: #d4af37;
    transform: translateX(-3px);
  }

  /* 2. Cover Image - Card Style (Wider & Centered) */
  .story-visual {
    width: 100%;
    max-width: 95%;
    /* Even wider as requested (almost full width) */
    margin: 0 auto 25px;
    /* Center alignment */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    /* Stronger shadow for card effect */
    border-radius: 12px;
    position: relative;
  }

  .story-cover-wrapper {
    width: 100%;
    aspect-ratio: 2/3;
  }

  .story-info {
    width: 100%;
    padding: 0;
  }

  /* 3. Typography - Bold Title, Muted Author */
  .story-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 5px;
  }

  .story-author {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: #aaa;
    margin-bottom: 15px;
    font-weight: 400;
  }

  /* 4. Rating Row - Immediately below Author */
  .story-rating-row {
    justify-content: center;
    margin-bottom: 25px;
  }

  /* Meta Grid - Keep it but make it subtle (User has it in HTML) */
  .story-meta-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
    opacity: 0.7;
  }

  .meta-item {
    background: transparent;
    padding: 0;
    border: none;
    align-items: center;
  }

  .meta-label {
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: #888;
  }

  .meta-value {
    font-size: 0.95rem;
    color: #eee;
  }

  /* 5. Summary - Clean & Readable */
  .story-synopsis {
    text-align: justify;
    /* Neat block text */
    font-size: 1rem;
    line-height: 1.8;
    /* More breathing room */
    color: #eee;
    /* Brighter text */
    margin-bottom: 30px;
    padding: 0;

    /* CRITICAL TEXT FIXES */
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
    hyphens: none;
  }

  /* 6. Bottom Action Row - Single Line, Balanced Buttons */
  .story-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Space out Read vs Icons */
    gap: 12px;
    /* Tighter gap */
    margin-top: 10px;
    width: 100%;
    padding-top: 20px;
    border-top: none;
    box-sizing: border-box;
    /* Ensure padding doesn't add to width */
  }

  /* Wide Read Button - prioritized for space */
  .btn-read {
    flex: 1;
    /* Takes ALL remaining space */
    width: auto;
    /* Let flex handle width */
    background: #d4af37;
    color: #000;
    font-weight: 600;
    height: 48px;
    /* Slightly more compact height */
    border-radius: 8px;
    font-size: 0.95rem;
    /* Slightly smaller text to prevent cutting */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none;
    padding: 0 15px;
    /* Reduce horizontal padding */
    white-space: nowrap;
    /* Prevent text wrap */
  }

  /* WRAPPER FOR ICONS (Optional) or just style them directly */
  /* Heart & Share - STRICTLY FIXED SQUARE SIZE */
  .btn-fav,
  .btn-share {
    flex: 0 0 48px !important;
    /* Force fixed width, do not grow/shrink */
    width: 48px !important;
    /* Double enforcement */
    height: 48px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    /* Center icon vertically */
    justify-content: center;
    /* Center icon horizontally */
    color: #fff;
    font-size: 1.1rem;
    /* Adjust icon size */
    padding: 0;
    /* no internal padding */
  }

  /* Active Heart State */
  .btn-fav i.fa-heart.fas {
    color: #e74c3c;
    /* Red heart when active */
  }

  /* Global Safety */
  #story-container {
    width: 100%;
    overflow-x: hidden;
    padding-bottom: 60px;
  }
}

/* ================= CARD VIEW COUNT ================= */
.card-views {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    animation: fadeInViews 1s cubic-bezier(0.2, 0.8, 0.2, 1.1) forwards;
    pointer-events: none;
    letter-spacing: 0.5px;
}

.card-views i {
    color: #d4af37;
    font-size: 0.85rem;
    animation: pulseIcon 2.5s infinite ease-in-out;
}

@keyframes fadeInViews {
    from { 
        opacity: 0; 
        transform: translateY(15px) scale(0.9); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

@keyframes pulseIcon {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.3); opacity: 1; text-shadow: 0 0 8px #d4af37; }
}

/* Hover refinement */
.story-card:hover .card-views,
.audio-card:hover .card-views {
    border-color: #d4af37;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
    transform: translateY(-2px);
    transition: all 0.4s ease;
}