/* ---------------------------------------------
1. Clean Base & Reset
--------------------------------------------- 
*/
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Common resets usually handled by Bootstrap, keeping only essential overrides */
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

a:hover {
  text-decoration: none; 
}

img {
  width: 100%;
  height: auto;
  display: block;
}

/* Accessibility: Reduce motion if user requested */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------
2. Typography (Headings)
--------------------------------------------- 
*/
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #2a2a2a;
}

h1 { font-size: 40px; font-weight: 800; line-height: 1.2; letter-spacing: -1px; }
h2 { font-size: 32px; font-weight: 700; color: #03a4ed; line-height: 1.3; }
h3 { font-size: 26px; font-weight: 600; color: #fe3f40; }
h4 { font-size: 20px; font-weight: 600; }
h5 { font-size: 17px; font-weight: 500; color: #444; }
h6 { font-size: 15px; font-weight: 500; text-transform: uppercase; color: #666; }

p {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 15px;
}

.small-text { font-size: 13px; color: #777; }
.highlight { color: #03a4ed; font-weight: 500; }

/* Selection Color */
::selection { background: #03a4ed; color: #fff; }
::-moz-selection { background: #03a4ed; color: #fff; }

/* ---------------------------------------------
3. Kidillus Global Theme & Background
--------------------------------------------- 
*/
body {
  /* Pattern Overlay + Gradient */
  background: #f7f8fa;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-blend-mode: soft-light;
  font-family: 'inter', sans-serif;
  color: #1e293b;
  overflow-x: hidden;
  margin: 0;
}

/* Floating Shapes Animation */
.bg-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.25;
  animation: float 10s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none; /* Mouse clicks pass through */
}

.bg-shape.blue { background: #3b82f6; width: 250px; height: 250px; top: 10%; left: 5%; }
.bg-shape.teal { background: #06b6d4; width: 300px; height: 300px; top: 60%; right: 8%; animation-delay: 3s; }
.bg-shape.light { background: #93c5fd; width: 150px; height: 150px; top: 75%; left: 30%; animation-delay: 5s; }

@keyframes float {
  from { transform: translateY(0px); }
  to { transform: translateY(-40px); }
}

/* Layout Helpers */
main, section, .container {
  position: relative;
  z-index: 2;
  font-family: 'Inter', sans-serif;
}

.btn-start-brief {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1.5px solid #cbd5e1;
    color: #0f172a;
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-right: 15px;
    white-space: nowrap;
    transition: all 0.2s;
}
.btn-start-brief:hover {
    border-color: #b38bff;
    color: #b38bff;
}
@media (max-width: 991px) {
    .btn-start-brief { display: none; }
}

.page-section { margin-top: 120px; }

/* Section Headings */
.section-heading h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: #2a2a2a;
  font-weight: 700;
  position: relative;
  z-index: 2;
  line-height: 44px;
}
.section-heading h2 em { font-style: normal; color: #03a4ed; }
.section-heading h2 span { color: #fe3f40; }

/* =========================================
   🚀 GLOBAL BUTTON SYSTEM (FINAL)
   ========================================= */

/* 1. Base Button Structure (Sab buttons ke liye common) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-decoration: none !important;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    white-space: nowrap;
    position: relative;
    z-index: 1;
    line-height: 1;
}

/* 2. Primary Gradient Button (Main Call to Action) */
.btn-main {
    background: linear-gradient(90deg, #00d4ff 0%, #b38bff 50%, #ff9bd7 100%);
    background-size: 200% auto;
    color: #ffffff !important;
    padding: 14px 35px;
    border-radius: 50px; /* Pill Shape */
    font-size: 16px;
    box-shadow: 0 10px 25px rgba(3, 164, 237, 0.3);
}

.btn-main:hover {
    background-position: right center; /* Gradient Move Effect */
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(179, 139, 255, 0.4);
    color: #ffffff !important;
}

/* 3. Secondary/Outline Button (For less important actions) */
.btn-outline {
    background: transparent;
    border: 2px solid rgba(3, 164, 237, 0.3);
    color: #03a4ed !important;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 16px;
}

.btn-outline:hover {
    border-color: #03a4ed;
    background: rgba(3, 164, 237, 0.05);
    transform: translateY(-3px);
    color: #00d4ff !important;
}

/* 4. Small Button (Header Login, Table Buttons ke liye) */
.btn-sm {
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 30px;
}

/* 5. Full Width (Mobile ke liye) */
.btn-block {
    width: 100%;
    display: flex;
}

/* 6. Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .btn {
        padding: 12px 24px; /* Thoda chhota padding mobile par */
        font-size: 15px;
    }
    
    /* Agar aap chahte hain mobile pe sare buttons full width ho jayein to ye uncomment karein: */
    /* .btn-main, .btn-outline {
        width: 100%;
    } 
    */
}
/* Mobile Fixes */
@media (max-width: 991px) {
  .mobile-top-fix { margin-top: 30px; margin-bottom: 0px; }
  .mobile-bottom-fix { margin-bottom: 30px; }
  .mobile-bottom-fix-big { margin-bottom: 60px; }
}

/* ---------------------------------------------
4. Preloader
--------------------------------------------- 
*/
.js-preloader {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #fff;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #fe3f40;
    border-radius: 50%;
    transform: translateX(0);
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #fe3f40;
    border-radius: 50%;
}

@keyframes dot {
    50% { transform: translateX(96px); }
}

@keyframes dots {
    50% { transform: translateX(-31px); }
}






/* ==========================================================================
   1. RESET & BASE STYLES
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'inter', sans-serif;
}

:root {
  --primary: #03a4ed;
  --secondary: #0f172a;
  --accent: #06b6d4;

  --dark: #0f172a;
  --light: #ffffff;

  --text-main: #334155;
  --text-light: #64748b;

  --border: #e2e8f0;
  --surface: #ffffff;

  --success: #10b981;

  --primary-gradient: linear-gradient(90deg, #03a4ed, #06b6d4);
}
body { margin:0; font-family: var(--font-main); background: var(--light); color: var(--dark); }
.kp-container { max-width: 1450px; margin: 0 auto; padding: 0 24px; 

    font-family: 'Inter', sans-serif;
  color: #1e293b;
  margin: 0;
  overflow-x: hidden;
}


/* Common Resets */
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

a:hover {
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #2a2a2a;
}

h1 { font-size: 48px; font-weight: 800; line-height: 1.2; letter-spacing: -1px; }
h2 { font-size: 36px; font-weight: 700; color: #03a4ed; line-height: 1.3; }
h3 { font-size: 28px; font-weight: 600; color: #fe3f40; }
h4 { font-size: 22px; font-weight: 600; }
h5 { font-size: 18px; font-weight: 500; color: #444; }
h6 { font-size: 16px; font-weight: 500; text-transform: uppercase; color: #666; }

p {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 15px;
}

.small-text { font-size: 13px; color: #777; }
.highlight { color: #03a4ed; font-weight: 500; }

::selection { background: #03a4ed; color: #fff; }
::-moz-selection { background: #03a4ed; color: #fff; }









/* header */

.header-area {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    transition: top 0.3s ease;
    height: 80px;
    min-height: 80px;
    z-index: 99999 !important;
    display: flex;
    align-items: center;
    /* Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* PWA Installed Mode Fix */
html.pwa-installed header {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* =========================================
   LOCK HEADER FONT (PREVENT OVERRIDING)
========================================= */
.header-area, 
.nav-menu li a, 
.sub-menu li a, 
.logo h4,
.user-pill span,
.btn-quote {
    font-family: 'Inter', sans-serif !important;
}

/* FontAwesome Icons Fix */
.header-area i.fa-solid, 
.header-area i.fa-regular, 
.header-area i.fa-brands,
.header-area i.fa {
    font-family: "Font Awesome 6 Free" !important;
}
/* ==========================================================================
   3. NAVIGATION (MAIN NAV & MENU)
   ========================================================================== */
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 30px;
}

/* Logo Styles */
.logo h4 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #03a4ed;
    cursor: pointer;
}

.logo h4 span {
    color: #fe3f40;
}

/* Desktop Menu */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 25px;
    list-style: none;
    padding: 0;
    /* Alignment: Push to Right */
    position: static;
    transform: none;
    margin-left: auto;
    margin-right: 30px;
}
/* Mouse hover par submenu dikhane ke liye */
.nav-menu .has-sub:hover .sub-menu {
    display: block !important;
    opacity: 1;
    visibility: visible;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nav-menu li a {
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    color: #2a2a2a;
    transition: .3s;
}

.nav-menu li a:hover,
.nav-menu li a.active {
    color: #fe3f40;
}

/* ==========================================================================
   4. HERO & UTILITY CLASSES
   ========================================================================== */
.hero-title {
    font-weight: 700;
    line-height: 1.3;
    font-size: 42px;
}

.hero-subtitle h2 {
    color: white;
}

.wa-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #25D366;
    color: #fff;
    padding: 14px 20px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 9999;
}

.stats-bar div {
    transition: transform .3s ease;
}

.stats-bar div:hover {
    transform: translateY(-6px);
}

.stats-bar div strong {
    font-weight: 700;
}

/* ==========================================================================
   5. BUTTONS (LOGIN & MAIN)
   ========================================================================== */



/* ==========================================================================
   6. PROFILE SECTION & USER PILL
   ========================================================================== */
.profile-section {
    display: flex;
    align-items: center;
    gap: 18px;
}

.profile-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

/* Premium Profile Pill */
.user-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    padding: 5px 18px 5px 5px;
    border-radius: 50px;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.user-pill:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.user-pill img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.user-pill span {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    letter-spacing: -0.2px;
}

/* Fixed Avatar Circle */
.profile-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   7. ICONS (INBOX & NOTIFICATIONS)
   ========================================================================== */
.inboxIcon,
.notifBellWrap {
    position: relative;
    width: 12px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 8px;
    transition: background-color 0.2s ease;
}

.inboxIcon:hover,
.notifBellWrap:hover {
    background-color: #f1f5f9;
}

.inboxIcon i,
.notifBellWrap i {
    font-size: 20px;
    color: #5f6368;
}

/* Red Counter Badge */
.topChatCount,
.notif-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #ff4040;
    color: #ffffff;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

/* ==========================================================================
   8. DROPDOWNS (GENERAL, AVATAR, INBOX, NOTIF)
   ========================================================================== */

/* ✅ ADDED: Unified styling for all dropdowns (As requested) */
.avatarMenu, 
.notif-dropdown, 
.chat-dropdown, 
.inbox-dropdown,
#inboxDropdown {
    position: absolute; 
    top: 60px; 
    right: 0;
    background: #ffffff; /* used hex for safety instead of var(--white) */
    border: 1px solid #e5e7eb; /* used hex for safety instead of var(--border) */
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* used hex for safety */
    display: none; 
    flex-direction: column;
    overflow: hidden; 
    z-index: 2000;
}

/* Specific Sizes */
.avatarMenu { 
    width: 200px; 
    padding: 6px 0; 
}

.notif-dropdown, 
.chat-dropdown, 
.inbox-dropdown,
#inboxDropdown { 
    width: 340px; 
    max-height: 450px; 
    overflow-y: auto; 
}

/* Show Class (Essential for JS toggle) */
.show {
    display: flex !important;
}

/* Dropdown Menu Items (Avatar Menu Links) */
#avatarMenu a,
.avatarMenu a {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400 !important;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f1f1;
}

#avatarMenu a i {
    font-size: 16px;
    color: #9ca3af;
    width: 20px;
    text-align: center;
}

#avatarMenu a:hover,
.avatarMenu a:hover {
    background: #f9fafb;
    color: #03a4ed;
    padding-left: 24px;
}

#avatarMenu a:hover i {
    color: #03a4ed;
}

/* Logout Button Special Styling */
#avatarMenu a[href*="logout"] {
    margin-top: 5px;
    border-top: 1px solid #f3f4f6;
    color: #ef4444;
}

#avatarMenu a[href*="logout"] i {
    color: #ef4444;
}

#avatarMenu a[href*="logout"]:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* Header inside Dropdowns */
.notif-header {
    padding: 14px 18px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    font-size: 15px;
    font-weight: 700;
    color: #202124;
}

/* ==========================================================================
   9. NOTIFICATION LIST & CONTENT (SCROLLING)
   ========================================================================== */
.chat-content, 
.notif-content,
.notif-list,
#webInboxList,
#webNotifList {
    /* Limit height inside the dropdown */
    max-height: 400px !important; 
    overflow-y: auto !important;
    overflow-x: hidden;
    background: #fff;
    padding: 0;
    scroll-behavior: smooth;
    display: block;
}

/* Scrollbar Styling */
.notif-list::-webkit-scrollbar,
#webInboxList::-webkit-scrollbar,
#webNotifList::-webkit-scrollbar,
.chat-content::-webkit-scrollbar, 
.notif-content::-webkit-scrollbar,
.notif-dropdown::-webkit-scrollbar {
    width: 5px;
}

.notif-list::-webkit-scrollbar-thumb,
#webInboxList::-webkit-scrollbar-thumb,
#webNotifList::-webkit-scrollbar-thumb,
.chat-content::-webkit-scrollbar-thumb, 
.notif-content::-webkit-scrollbar-thumb,
.notif-dropdown::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.notif-list::-webkit-scrollbar-track,
.chat-content::-webkit-scrollbar-track, 
.notif-content::-webkit-scrollbar-track,
.notif-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

/* Notif Item */
.notif-item {
    padding: 15px 18px;
    border-bottom: 1px solid #f1f3f4;
    cursor: pointer;
    background: #fff;
    transition: background 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notif-item:hover {
    background-color: #f8f9fa;
}

/* Unread Indicator */
.notif-item.unread::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 20px;
    width: 8px;
    height: 8px;
    background-color: #1a73e8;
    border-radius: 50%;
}

.notif-item.unread {
    background-color: #f8fbff;
    padding-left: 24px;
}

.notif-item.unread strong {
    color: #202124;
    font-weight: 700;
}

.notif-item strong {
    font-size: 14px;
    color: #3c4043;
    margin-bottom: 2px;
}

.notif-item p {
    font-size: 13px;
    color: #5f6368;
    margin: 0;
    line-height: 1.4;
}

.notif-item small {
    font-size: 11px;
    color: #9aa0a6;
    margin-top: 4px;
    display: block;
}

.notif-footer {
    padding: 12px;
    text-align: center;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    color: #1a73e8;
    cursor: pointer;
}

.notif-footer:hover {
    background-color: #f8f9fa;
    text-decoration: underline;
}

.notif-empty {
    padding: 40px 20px;
    text-align: center;
    color: #5f6368;
    font-size: 14px;
}

/* ==========================================================================
   10. SUB-MENUS & DROPDOWNS (FIXED: Vertical List)
   ========================================================================== */
.has-sub {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.submenu-toggle {
    cursor: pointer;
    padding: 20px;
    font-size: 14px;
}

.sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    min-width: 270px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
    border-radius: 10px;
    padding: 8px 0;
    z-index: 9999;
    /* ✅ Fix: Ensure vertical stacking */
    flex-direction: column;
}

.sub-menu.show {
    display: block; /* Flex hata kar Block kar diya */
}

/* ✅ Fix: List items ek line me ek hi dikhenge */
.sub-menu li {
    display: block;
    width: 100%;
    margin: 0;
}

.sub-menu a {
    display: block;
    padding: 10px 16px;
    color: #333;
    width: 100%; /* Full width clickable area */
    box-sizing: border-box; /* Padding ke sath width calculate karega */
}

.sub-menu a:hover {
    background: #f5f5f5;
    color: #03a4ed; /* Hover par blue color */
}

.submenu-toggle i {
    transition: transform 0.25s ease;
}

/* When Dropdown Open */
.has-sub.open .submenu-toggle i {
    transform: rotate(180deg);
}
/* ==========================================================================
   11. FLOATING OFFER & ANIMATIONS
   ========================================================================== */
#floatingOffer {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: transparent !important;
    padding: 0;
    width: auto;
    border: none;
    box-shadow: none;
    display: none;
    z-index: 999999;
    animation: floatIn .5s ease;
    font-family: 'Inter', sans-serif;
    pointer-events: none;
}

.offer-character-floating {
    position: absolute;
    top: -120px;
    right: 50%;
    transform: translateX(50%);
    width: 140px;
    z-index: 1000000;
    pointer-events: none;
    animation: bounce 2.5s infinite ease-in-out;
}

.offerContentBox {
    background: #ffffff;
    padding: 18px;
    border-radius: 14px;
    width: 350px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    margin-top: 70px;
    position: relative;
    pointer-events: auto;
}

.offerContentBox .close-offer {
    position: absolute;
    top: 10px;
    right: 12px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: #444;
}

.offer-timer {
    background: #ffecec;
    border-radius: 6px;
    padding: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #d10000;
    text-align: center;
    margin-bottom: 10px;
}

#floatingOffer h4 {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

#floatingOffer p {
    font-size: 15px;
    margin: 0 0 10px;
    line-height: 1.4;
    color: #444;
}

#floatingOffer .btn-claim {
    background: #00ff8c;
    color: #000;
    width: 100%;
    padding: 10px;
    font-weight: 700;
    display: inline-block;
    border-radius: 8px;
    text-align: center;
    margin-top: 5px;
    transition: 0.2s;
    border: none;
}

#floatingOffer .btn-claim:hover {
    background: #00e57d;
    transform: translateY(-2px);
}

.offer-text {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    margin: 10px 0 12px 0;
    white-space: pre-line;
}

.offer-text br {
    margin-bottom: 6px;
    display: block;
}

.offer-text b,
.offer-text strong {
    font-weight: 700;
    color: #000;
}

.btn-claim {
    transition: 0.25s ease;
}

.btn-claim:hover {
    transform: translateY(-3px);
    box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.12);
}

/* Keyframes */
@keyframes softPulse {
    0% { box-shadow: 0 0 6px rgba(3, 164, 237, 0.25); }
    50% { box-shadow: 0 0 18px rgba(3, 164, 237, 0.45); }
    100% { box-shadow: 0 0 6px rgba(3, 164, 237, 0.25); }
}

@keyframes dropdownFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes floatIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
    0%, 100% { transform: translateX(50%) translateY(0); }
    50% { transform: translateX(50%) translateY(-12px); }
}

/* ==========================================================================
   12. 100% PROFESSIONAL MOBILE MENU (Seamless & Clean)
   ========================================================================== */

/* Hamburger Menu Icon */
.menu-toggle {
    display: none;
    cursor: pointer;
    font-size: 24px;
    color: #1e293b; /* Premium Dark Blue-Gray */
    padding: 5px;
    transition: transform 0.2s;
}
.menu-toggle:active {
    transform: scale(0.9);
}

    /* 1. Header Container reset */
    .header-area {
        height: auto !important; /* Fixed height hata diya */
        min-height: auto !important;
        flex-direction: column !important;
        padding: 0 !important;
    }
    
    .main-nav {
        flex-direction: column !important;
        padding: 0 !important;
        width: 100%;
        background: #fff;
    }

    /* 2. Top Row (Logo + User + Hamburger) */
    .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1450px;       /* Content ko jyada failne se rokega */
    margin: 0 auto;          /* ✅ IMPORTANT: Isse content center me rahega */
    border-bottom: 1px solid #f0f0f0;
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 15px 10px; /* Top, Left/Right, Bottom Spacing */
}

    /* 3. Bottom Row (Menu) */
/* ✅ NORMAL STATE (Jab Menu Dikh Raha Hai) */
.header-bottom {
    /* --- Layout Settings --- */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1450px;
    margin: 0 auto; /* Center align */
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid #f0f0f0;
    
    /* --- Animation & Dropdown Settings --- */
    transition: all 0.3s ease-in-out; /* Smooth slide */
    max-height: 80px; /* Menu ki max height */
    opacity: 1;
    overflow: visible; /* ✅ IMPORTANT: Taaki Dropdown cut na ho */
    padding: 0; /* Padding 0 rakhein taaki animation smooth ho */
}

/* ✅ HIDDEN STATE (Jab Scroll Down Karein) */
/* Ye class JS se parent pe lagegi, aur is child ko chupayegi */
.hide-menu .header-bottom {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important; /* ✅ IMPORTANT: Chupne ke time hidden */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    pointer-events: none; /* Click disable */
}
    /* Menu ko adjust karna */
    .nav-menu {
            margin: 0 !important;
    justify-content: left !important;
    width: 100%;
    max-width: 1450px;
    }
    
    .nav-menu li a {
        padding: 12px 20px; /* Thoda spacing badhaya */
    }
@media (min-width: 992px) {
    
    /* Har menu item ke right side me halki line */
    .nav-menu li {
        border-right: 1px solid rgba(0,0,0,0.1); /* Halka Grey Color */
    }

    /* Sabse aakhri item (Book Store) ke baad line hata do */
    .nav-menu li:last-child {
        border-right: none;
    }
}
/* ==========================================================================
   MOBILE & TABLET OPTIMIZATION (FINAL FIX - NO OVERLAP)
   ========================================================================== */
@media (max-width: 991px) {

    /* --- 1. HEADER CONTAINER --- */
    .header-area {
        height: 60px !important;
        min-height: 60px !important;
        padding: 0 !important;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .main-nav {
        width: 100%;
        padding: 0 !important;
    }

    /* --- 2. HEADER TOP (The Layout Controller) --- */
    /* Isse 'Relative' banaya taaki iske andar wale elements ko 'Absolute' move kar sakein */
    .header-top {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* Logo Center ke liye */
        height: 60px;
        width: 100%;
        padding: 0 !important;
        border: none !important;
        position: relative !important; /* Zaroori hai */
    }

    /* --- 3. WRAPPER RESET (Jisme Hamburger aur Profile band hain) --- */
    /* Ye trick hai: Wrapper ko 'static' kar diya taaki bache huye elements header ke hisab se move hon */
    .header-top > div {
        position: static !important; 
        width: 100%;
    }

    /* --- 4. HAMBURGER MENU (Force Move to LEFT) --- */
    .menu-toggle {
        position: absolute !important;
        left: 15px !important;
        top: 0 !important;
        bottom: 0 !important;
        margin: auto !important;
        z-index: 30;
        display: flex !important;
        align-items: center;
        width: 40px;
        font-size: 22px;
        color: #333;
    }

    /* --- 5. LOGO (Perfect Center & Safe Size) --- */
    .logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 10;
        display: flex;
        justify-content: center;
        width: auto;
    }
    .logo img {
        max-height: 22px !important; /* Size chota kiya taaki overlap na ho */
        width: auto;
    }

    /* --- 6. PROFILE SECTION (Force Move to RIGHT) --- */
    .profile-section {
        position: absolute !important;
        right: 15px !important;
        top: 0 !important;
        bottom: 0 !important;
        margin: auto !important;
        z-index: 30;
        display: flex !important;
        align-items: center;
        gap: 8px !important;
    }

    /* --- 7. ICONS FIX (Compact Look) --- */
    /* Name Hide */
    .user-pill .pill-text { display: none !important; }
    
    /* Avatar Image */
    .user-pill { padding: 0 !important; border: none !important; background: transparent !important; }
    .user-pill img {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50%;
        border: 1px solid #eee;
    }

    /* Bell & Inbox Icons (Clean Circle) */
    .inboxIcon, .notifBellWrap {
        margin: 0 !important;
        width: 32px;
        height: 32px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: #f7f7f7;
        border-radius: 50%;
    }
    .inboxIcon i, .notifBellWrap i { font-size: 16px !important; color: #555; }

    /* --- 8. SIDEBAR (Left Slide Menu) --- */
    .header-bottom {
        position: static !important;
        height: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: visible !important;
    }

    .nav-menu {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 270px;
        height: 100vh;
        background: #fff;
        z-index: 99999;
        padding-top: 70px !important;
        padding-bottom: 30px;
        box-shadow: 5px 0 20px rgba(0,0,0,0.1);
        transform: translateX(-105%);
        transition: transform 0.3s ease;
        overflow-y: auto;
    }

    .nav-menu.show { transform: translateX(0); }

    /* Sidebar Items */
    .nav-menu li { display: block; border-bottom: 1px solid #f5f5f5; width: 100%; border-right: none !important; }
    .nav-menu li a { display: flex !important; justify-content: space-between; padding: 14px 20px !important; font-size: 15px; color: #333; }
    
    /* Submenu Fix */
    .nav-menu li.has-sub { flex-direction: column; align-items: flex-start; }
    .submenu-toggle { position: absolute; right: 0; top: 0; height: 50px; width: 50px; display: flex; align-items: center; justify-content: center; }
    .sub-menu { position: static !important; width: 100% !important; background: #fafafa !important; display: none; border: none !important; padding: 0 !important; }
    .sub-menu.show { display: block !important; }
    .sub-menu li a { padding-left: 40px !important; font-size: 14px; color: #666; }

    /* --- 9. DROPDOWNS FIX (Center Screen) --- */
    .chat-dropdown, .notif-dropdown, .avatarMenu {
        position: fixed !important;
        top: 70px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;
        max-width: 350px !important;
        z-index: 200000;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    }
}





/* index */


    /* =========================================
       1. GLOBAL VARIABLES & RESET
       ========================================= */
    
    * { box-sizing: border-box; }
    body {
        font-family: var(--font-main);
        color: var(--text-main);
        line-height: 1.6;
        background: var(--surface);
        overflow-x: hidden;
        margin: 0;
    }

    /* Critical Fixes for Header Z-Index */
    header, .navbar, .site-header { 
        z-index: 1000 !important; 
        position: relative; 
    }


    a { text-decoration: none; transition: 0.3s ease; }
    img { max-width: 100%; height: auto; display: block; }
    ul { list-style: none; padding: 0; margin: 0; }

    /* LAYOUT UTILITIES */
    .container-lg {
        max-width: 1450px !;
        margin: 0 auto!;
        padding: 0 24px!;
        position: relative!;
        z-index: 2!;
    }
    
    .section-padding { padding: 100px 0; }
    .bg-light { background: var(--bg-light); }
    .text-center { text-align: center; }
    
    /* Highlight Text using Gradient */
    .text-primary { 
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
    }
    
    .text-highlight { 
        position: relative; 
        color: #00d4ff; 
        font-weight: 800;
    }

    /* =========================================
       2. BUTTONS & BADGES
       ========================================= */

    /* Badges */
    .hero-seo-badge {
        display: inline-flex; align-items: center; gap: 8px;
        background: #e0f2fe; color: #0077cc;
        padding: 6px 16px; border-radius: 50px;
        font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
        margin-bottom: 20px; border: 1px solid #bae6fd;
    }
    
    .badge-pill {
        display: inline-block !important; background: #e0f2fe!important; 
        /* Using Gradient Text inside Badge */
        background: var(--primary-gradient) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        
        padding: 6px 14px !important; border-radius: 50px !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important;
        margin-bottom: 15px !important; border: 1px solid #e2e8f0 !important;
    }

    /* =========================================
       3. HERO SECTION
       ========================================= */
    .hero-wrapper {
        position: relative !important;
        padding: 180px 0 100px !important;
        overflow: hidden !important;
        min-height: 630px !important; /* Desktop Height */
        display: flex!important; align-items: center !important;
        z-index: 1 !important;
    }
    
    .heroSwiper { width: 100% ; height: 100% ; padding-bottom: 40px ; }
    
    .hero-grid {
        display: grid ;
        grid-template-columns: 1.1fr 0.9fr ;
        gap: 60px ;
        align-items: center ;
        width: 100% ;
    }
 .hero-content2 h1 {
    color: black !important;
 }
    .hero-content2 { z-index: 5 ; text-align: left ; }
    .hero-title-big { font-weight: 800 ; margin-bottom: 20px ; color: var(--secondary) ; }
    .hero-desc { font-size: 1.25rem ; color: var(--text-light) ; margin-bottom: 35px ; max-width: 550px;  }
    
    .hero-btn-group { display: flex; align-items: center; gap: 20px; margin-bottom: 35px; flex-wrap: wrap; }
    .trust-text { font-size: 14px; color: var(--text-light); font-weight: 600; display: flex; align-items: center; gap: 6px; }
    .trust-text i { color: var(--success); }

    .hero-features-list { display: flex; flex-wrap: wrap; gap: 15px; }
    .hero-features-list li {
        display: flex; align-items: center; gap: 8px;
        font-size: 14px; font-weight: 600; color: var(--secondary);
        background: white; padding: 8px 14px; border-radius: 8px;
        border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    }
    .hero-features-list li i { color: var(--success); }

    .hero-img-wrap { perspective: 1000px; display: flex; justify-content: center; }
    .hero-img-wrap img {
        max-height: 480px; width: auto; object-fit: contain;
        transform: rotateY(-5deg) rotateX(2deg);
        transition: transform 0.5s ease;
        border-radius: 12px;
    }
    .hero-img-wrap img:hover { transform: rotateY(0) rotateX(0); }

    /* Navigation Arrows */
    .custom-nav-btn {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important; /* Circle ko pichakne se rokega */
    background: white; 
    border-radius: 50% !important;
    box-shadow: var(--shadow-md); 
    color: #00d4ff;
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    border: 1px solid var(--border); 
    transition: 0.3s;
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 10;
}

.custom-nav-btn::after { 
    font-size: 20px !important; /* Arrow ka size chhota karega */
    font-weight: 900 !important; 
}
    .custom-nav-btn:hover { background: var(--primary-gradient); color: white; border: none; }
    .custom-nav-btn::after { font-size: 18px; font-weight: bold; }
    .swiper-button-prev { left: 20px; }
    .swiper-button-next { right: 20px; }

    /* =========================================
       4. LOGO MARQUEE & STATS
       ========================================= */
    .logo-marquee {
        padding: 40px 0;
        background: white;
        border-bottom: 1px solid var(--border);
        width: 100%;
    }

    .marquee-track {
        display: flex;
        justify-content: center; /* Horizontally Center */
        align-items: center;     /* Vertically Center */
        gap: 40px 60px;          /* Row Gap | Column Gap */
        flex-wrap: wrap;         /* Mobile par next line me aye */
        max-width: 1200px;
        margin: 0 auto;
        
        /* Styling */
        opacity: 0.6;
        font-weight: 700;
        color: var(--text-light);
        font-size: 1.2rem;
        
        /* Stop Animation for Perfect Center */
        animation: none; 
        transform: none;
    }

    .stats-strip1 { background: #0b0f17; padding: 50px 0; margin-top: -1px; }
    .stats-grid { display: grid; grid-template-columns: repeat(5, 1fr) !important; gap: 20px; text-align: center; }
    .stat-box h3 { color: #94a3b8; font-size: 1.2rem; margin-bottom: 5px; font-weight: 700; }
    .stat-box p { color: #94a3b8; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }

    /* =========================================
       5. CARDS (Roles, Tools, Books)
       ========================================= */
    /* Roles */
    .role-card {
        background: white; padding: 35px; border-radius: var(--radius);
        border: 1px solid var(--border); transition: 0.3s;
        height: 100%; display: flex; flex-direction: column; text-align: left;
    }
    .role-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: #00d4ff; }
    .role-icon {
        width: 56px; height: 56px; background: #f0f9ff; color: #00d4ff;
        border-radius: 12px; display: flex; align-items: center; justify-content: center;
        font-size: 26px; margin-bottom: 24px;
    }
    .role-link { font-weight: 700; color: #00d4ff; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; }

    /* Tools Section - Overriding Styles */

/* Grid layout ko strong karne ke liye section ya main wrapper ka sahara lein */
main .tool-grid { 
    display: grid !important; 
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; 
    gap: 24px !important; 
    margin-top: 50px !important; 
}

/* Card ki specificity badha di gayi hai */
.tool-grid .tool-card {
    background: #ffffff !important; 
    padding: 24px !important; 
    border-radius: var(--radius) !important;
    border: 1px solid var(--border) !important; 
    text-align: left !important; 
    transition: all 0.3s ease !important; 
    display: block !important;
    text-decoration: none !important; /* Anchor tag lines hatane ke liye */
}

/* Hover effect ko prioritize karne ke liye */
.tool-grid .tool-card:hover { 
    border-color: #00d4ff !important; 
    box-shadow: var(--shadow-md) !important; 
    transform: translateY(-5px) !important; /* Thoda zyada lift up */
}

.tool-card .tool-head { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: flex-start !important; 
    margin-bottom: 16px !important; 
}

/* Icon size fix */
.tool-card .tool-icon { 
    font-size: 28px !important; /* Pehle 24px tha, thoda bada kiya hai visibility ke liye */
    color: var(--text-light) !important; 
}

.tool-card .tool-badge { 
    font-size: 11px !important; 
    font-weight: 800 !important; 
    text-transform: uppercase !important; 
    padding: 5px 10px !important; 
    border-radius: 6px !important; 
    color: #ffffff !important; 
}

.tool-card .badge-new { background-color: #ef4444 !important; } 
.tool-card .badge-popular { background-color: #f59e0b !important; }
    
    /* Books */
    .book-card {
        background: white; border-radius: var(--radius); overflow: hidden;
        border: 1px solid var(--border); transition: 0.3s; height: 100%; display: flex; flex-direction: column;
    }
    .book-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
    .book-cover-wrap { position: relative; padding-top: 140%; background: #f1f5f9; display: block; overflow: hidden; }
    .book-cover-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
    .book-card:hover .book-cover-img { transform: scale(1.05); }
    .book-info { padding: 16px; }
    .book-title { font-size: 1rem; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .book-price { color: #00d4ff; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
    .btn-buy-sm { background: #e0f2fe; color: #00d4ff; padding: 4px 10px; border-radius: 6px; font-size: 12px; }

    /* =========================================
       6. ARTISTRY & ORDER PROCESS
       ========================================= */
    .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-bottom: 80px; }
    .feature-text { text-align: left; }
    
    .clean-list { list-style: none; padding: 0; margin: 20px 0; }
    .clean-list li { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 15px; font-weight: 400; color: var(--secondary); }
    .clean-list li i { color: var(--success); font-size: 1.2rem; flex-shrink: 0; }

    /* Vertical Slider */
    .slider-mask {
        height: 500px; overflow: hidden; position: relative;
        mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    }
    .dual-slider-wrapper { display: flex; gap: 20px; height: 100%; }
    .art-swiper-1, .art-swiper-2 { width: 50%; height: 100%; }
    .art-slide { height: auto; margin-bottom: 20px; border-radius: 12px; overflow: hidden; }
    .art-slide img { width: 100%; display: block; }

    /* Order Boxes */
    #order-process { background: #f9f9f9; padding: 80px 0; }
    .order-box {
        background: white; border-radius: 18px; padding: 30px;
        box-shadow: var(--shadow-md); transition: 0.3s; text-align: center; height: 100%;
    }
    .order-box:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
    .order-box .tag { display: inline-block; background: #f1f5f9; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; color: var(--text-light); margin-bottom: 15px;}
    .order-box strong { display: block; margin-bottom: 15px; font-size: 1.2rem; }
    .order-box ul { text-align: left; margin: 20px 0; padding-left: 0; }
    .order-box ul li { margin-bottom: 8px; font-size: 14px; color: var(--text-main); }

    /* =========================================
       7. FAQ & REVIEWS
       ========================================= */
    .faq-section1 { margin-bottom: 0px; padding: 40px 0; background: #f8fafc;}
    .faq-title { text-align: center; margin-bottom: 40px; font-size: 28px; font-weight: 600; }
    .faq-list { display: flex; flex-direction: column; gap: 6px; max-width: 800px; margin: 0 auto; }
    .faq-item { background: white; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
    .faq-question {
        width: 100%; text-align: left; padding: 18px; background: white; border: none;
        font-size: 14px; font-weight: 600; color: var(--secondary); cursor: pointer;
        display: flex; justify-content: space-between; align-items: center;
    }
    .faq-question::after { content: "▾"; font-size: 16px; transition: 0.3s; }
    .faq-item.active .faq-question::after { transform: rotate(-180deg); }
    .faq-answer { max-height: 0; overflow: hidden; padding: 0 18px; transition: 0.3s ease; background: #fcfcfc; }
    .faq-item.active .faq-answer { max-height: 300px; padding-bottom: 18px; }

    /* Reviews */
    .review-cards { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
    .review-cards > div {
        background: white; width: 100%; max-width: 350px; padding: 25px;
        border-radius: 12px; box-shadow: var(--shadow-md); font-size: 14px; line-height: 1.6;
    }
.header-area .logo img{
  width: auto !important;
  height: 36px;   /* 👈 size yahin se control hoga */
}
    /* CTA Box */
    .cta-box { background: var(--secondary); color: white; padding: 80px 40px; border-radius: 24px; text-align: center; }

    /* =========================================
       8. MOBILE & TABLET RESPONSIVE (PROFESSIONAL)
       ========================================= */
    
    /* TABLET & SMALL LAPTOP (Max Width: 992px) */
    @media (max-width: 992px) {
        .hero-wrapper { 
            padding: 90px 0 60px !important; 
            min-height: auto; 
        }
        
        .hero-grid { 
            grid-template-columns: 1fr; 
            text-align: center; 
            gap: 40px; 
        }
        
        .hero-content2 { 
            align-items: center; 
            text-align: center !important; 
            display: flex;
            flex-direction: column;
        }
        
        .hero-title-big { 
            font-size: 2.8rem; 
            margin-bottom: 15px;
        }
        
        .hero-desc { 
            margin: 0 auto 30px; 
            font-size: 1.1rem;
        }
        
        .hero-btn-group { 
            justify-content: center; 
            margin-bottom: 40px;
        }
        
        .hero-features-list { 
            justify-content: center; 
        }
        
        /* Reset 3D transforms for cleaner mobile look */
        .hero-img-wrap img { 
            max-height: 380px; 
            transform: none !important; 
            margin-top: 20px;
        }
        
        /* Hide slider arrows on touch devices */
        .swiper-button-prev, .swiper-button-next { 
            display: none; 
        }
        
        /* Adjust Stats Grid to 2 columns */
        .stats-grid { 
            grid-template-columns: repeat(2, 1fr); 
            gap: 25px; 
        }
        /* Center the last item if odd number */
        .stats-grid .stat-box:last-child { 
            grid-column: span 2; 
        }
        
        .feature-row { 
            grid-template-columns: 1fr; 
            gap: 50px; 
            text-align: center;
        }
        
        .feature-list-clean {
            display: inline-block;
            text-align: left;
        }
        
        .slider-mask { 
            height: 400px; 
        }
    }

    /* MOBILE LANDSCAPE (Max Width: 768px) */
    @media (max-width: 768px) {
        .section-padding { padding: 60px 0; }
        .stats-strip1 { padding: 40px 20px; margin-top: 0; }
        .logo-marquee { padding: 15px 0; }
        
        /* Stack Feature Rows Correctly (Image Top/Text Bottom) */
        .feature-row { display: flex; flex-direction: column-reverse; }
        
        /* Handle alternating rows */
        .feature-row[style*="rtl"] { flex-direction: column-reverse; } 
        
        .feature-img { width: 100%; }
        
        /* Order Process Boxes Stack */
        .order-box { margin-bottom: 20px; }
        
        .tool-grid { 
            grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); 
        }
        
        .marquee-track {
            gap: 20px 30px;
            font-size: 1rem;
            padding: 0 20px;
        }
    }

    /* SMALL MOBILE (Max Width: 576px) */
    @media (max-width: 576px) {
        .container-lg { padding: 0 16px; }
        
        /* Hero Adjustments */
        .hero-seo-badge {  padding: 4px 12px; width: auto; }
        .hero-desc { font-size: 1rem; }
        
        /* Full Width Buttons for Easy Tapping */
        .btn-main, .btn-yellow, .btn-outline { 
            width: 100%; 
            justify-content: center; 
            margin-bottom: 10px; 
        }
        
        .hero-btn-group { 
            gap: 10px; 
            flex-direction: column; 
            width: 100%; 
        }
        
        .trust-text { margin-top: 5px; }
        
        /* Stack Stats vertically */
        .stats-grid { 
            grid-template-columns: 1fr; 
            gap: 30px;
        }
        .stats-grid .stat-box:last-child { grid-column: auto; }
        
        /* Card Padding Reduction */
        .role-card, .tool-card { padding: 25px 20px; }
        
        /* CTA Section */
        .cta-box { padding: 50px 20px; }
        .cta-box h2 { font-size: 1.8rem; }
        
        /* Adjust Slider Images */
        .hero-img-wrap img { max-height: 280px; }
    }
}
.header-area .logo img {
  width: auto !important;
  height: 42px;          /* desktop */
  max-width: 180px;
  object-fit: contain;
  display: block;
}
@media (max-width: 768px) {
  .header-area .logo img {
    height: 34px;
    max-width: 140px;
  }
}



/*footer*/

/* ── DESIGN TOKENS ── */
:root {
  --kdf-bg:           #ffffff;
  --kdf-bg-2:         #f8fafc;
  --kdf-bg-3:         #f1f5f9;
  --kdf-border:       #e9eef5;
  --kdf-border-2:     #dde3ec;
  --kdf-text:         #64748b;
  --kdf-text-dark:    #1e293b;
  --kdf-text-mid:     #475569;
  --kdf-accent:       #0ea5e9;       /* Matches existing site cyan/blue */
  --kdf-accent-2:     #0284c7;
  --kdf-green:        #10b981;
  --kdf-gold:         #f59e0b;
  --kdf-bottom-bg:    #0f172a;       /* Only bottom strip is dark */
  --kdf-font:         'Inter', 'Segoe UI', system-ui, sans-serif;
  --kdf-radius:       8px;
}

/* ── BASE ── */
footer.kd-footer {
  background: var(--kdf-bg);
  color: var(--kdf-text);
  font-family: var(--kdf-font);
  font-size: 13.5px;
  line-height: 1.6;
  border-top: 1px solid var(--kdf-border);
}
footer.kd-footer *, footer.kd-footer *::before, footer.kd-footer *::after {
  box-sizing: border-box;
}

/* ── TOP SECTION ── */
.kd-footer__top {
  padding: 60px 0 52px;
  background: var(--kdf-bg);
}

.kd-footer__container {
  max-width: 1450px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.4fr 1.2fr 1.5fr;
  gap: 44px;
  align-items: start;
}

/* ── BRAND COL ── */
.kd-footer__logo-link {
  display: inline-block;
  margin-bottom: 14px;
}
.kd-footer__logo-link img {
  transition: opacity 0.2s;
  height: 30px;
}
.kd-footer__logo-link:hover img { opacity: 0.8; }

.kd-footer__tagline {
  font-size: 13px;
  color: var(--kdf-text);
  line-height: 1.7;
  margin: 0 0 22px;
  max-width: 230px;
}

/* Social Icons */
.kd-footer__socials {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.kd-soc {
  width: 34px; height: 34px;
  border-radius: var(--kdf-radius);
  border: 1px solid var(--kdf-border-2);
  background: var(--kdf-bg-2);
  color: var(--kdf-text-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.kd-soc:hover { transform: translateY(-3px); border-color: transparent; color: #fff; }
.kd-soc--insta:hover  { background: linear-gradient(135deg,#e1306c,#f77737); }
.kd-soc--fiverr:hover { background: #1dbf73; }
.kd-soc--linkedin:hover { background: #0077b5; }
.kd-soc--youtube:hover  { background: #ff0000; }

/* Rating Badge */
.kd-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #92400e;
}

/* ── COLUMN TITLE ── */
.kd-footer__col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--kdf-text-dark);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--kdf-border);
  position: relative;
}
/* Accent underline on title */
.kd-footer__col-title::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 24px; height: 2px;
  background: var(--kdf-accent);
  border-radius: 2px;
}

/* ── LINK LIST ── */
.kd-footer__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.kd-footer__list li a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--kdf-text);
  text-decoration: none;
  padding: 5px 0;
  font-size: 13.5px;
  border-radius: 4px;
  transition: color 0.18s, padding-left 0.18s;
}
.kd-footer__list li a:hover {
  color: var(--kdf-accent-2);
  padding-left: 4px;
}
.kd-link-icon {
  font-size: 10px;
  color: var(--kdf-accent);
  width: 14px;
  flex-shrink: 0;
  opacity: 0.8;
}

/* CTA button inside list */
.kd-footer__highlight {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  margin-top: 10px !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  background: var(--kdf-accent) !important;
  color: #fff !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  transition: background 0.2s, transform 0.18s !important;
  box-shadow: 0 4px 12px rgba(14,165,233,0.25);
}
.kd-footer__highlight:hover {
  background: var(--kdf-accent-2) !important;
  color: #fff !important;
  padding-left: 16px !important;
  transform: translateY(-1px);
}

/* Pills */
.kd-pill {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.kd-pill--new {
  background: #d1fae5;
  color: #065f46;
  border-color: #a7f3d0;
}

/* ── NEWSLETTER ── */
.kd-footer__newsletter-desc {
  font-size: 13px;
  color: var(--kdf-text);
  margin: 0 0 14px;
  line-height: 1.65;
}
.kd-footer__form { margin: 0; }
.kd-footer__input-row {
  display: flex;
  border: 1.5px solid var(--kdf-border-2);
  border-radius: var(--kdf-radius);
  overflow: hidden;
  background: var(--kdf-bg-2);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.kd-footer__input-row:focus-within {
  border-color: var(--kdf-accent);
  box-shadow: 0 0 0 3px rgba(14,165,233,0.1);
}
.kd-footer__input-row input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--kdf-text-dark);
  font-family: var(--kdf-font);
}
.kd-footer__input-row input::placeholder { color: #94a3b8; }
.kd-footer__input-row button {
  background: var(--kdf-accent);
  border: none;
  padding: 0 15px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.kd-footer__input-row button:hover { background: var(--kdf-accent-2); }

/* ── CONTACT LIST ── */
.kd-footer__contact-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kd-footer__contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--kdf-text);
}
.kd-contact-icon {
  width: 28px; height: 28px;
  background: var(--kdf-bg-2);
  border: 1px solid var(--kdf-border-2);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: var(--kdf-accent);
  flex-shrink: 0;
  margin-top: 1px;
}
.kd-contact-icon--wa { color: #16a34a; }
.kd-footer__contact-list a {
  color: var(--kdf-text);
  text-decoration: none;
  transition: color 0.2s;
}
.kd-footer__contact-list a:hover { color: var(--kdf-accent-2); }
.kd-wa-link:hover { color: #16a34a !important; }

/* ── COMMISSION BANNER ── */
.kd-footer__banner {
  background: var(--kdf-bg-2);
  border-top: 1px solid var(--kdf-border);
  border-bottom: 1px solid var(--kdf-border);
  padding: 14px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}
.kd-footer__banner p {
  margin: 0;
  font-size: 13.5px;
  color: var(--kdf-text-mid);
  font-weight: 500;
}
.kd-footer__banner a {
  color: var(--kdf-accent-2);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s;
}
.kd-footer__banner a:hover { color: var(--kdf-accent); text-decoration: underline; }
.kd-footer__banner-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--kdf-accent);
  opacity: 0.4;
  flex-shrink: 0;
}

/* ── BOTTOM BAR — dark strip only here ── */
.kd-footer__bottom {
  background: var(--kdf-bottom-bg);
  padding: 16px 0;
}
.kd-footer__bottom-inner {
  max-width: 1450px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.kd-footer__policy-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.kd-footer__policy-links a {
  color: #64748b;
  text-decoration: none;
  font-size: 12px;
  transition: color 0.2s;
}
.kd-footer__policy-links a:hover { color: #94a3b8; }
.kd-sep { color: #374151; font-size: 10px; }

.kd-footer__copy {
  font-size: 12px;
  color: #d3d6db;
}
.kd-footer__copy a {
  color: #d3d6db !important;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.kd-footer__copy a:hover { color: #94a3b8; }

/* ── SCROLL TOP ── */
#scrollTopBtn {
  position: fixed !important;
  right: 24px; bottom: 130px;
  width: 38px; height: 38px;
  background: #fff;
  color: var(--kdf-text-dark);
  border: 1px solid var(--kdf-border-2);
  border-radius: var(--kdf-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  z-index: 999;
  transition: all 0.25s;
  font-size: 12px;
}
#scrollTopBtn:hover {
  background: var(--kdf-accent);
  color: #fff;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(14,165,233,0.3);
}

/* ── SMART REVIEW MODAL ── */
.smart-feedback-btn { position:fixed; bottom:30px; left:30px; z-index:9999; background:#fff; border:1px solid var(--kdf-border-2); padding:10px 18px; border-radius:50px; box-shadow:0 4px 16px rgba(0,0,0,0.08); display:flex; align-items:center; gap:8px; cursor:pointer; transition:0.25s; font-family:var(--kdf-font); }
.smart-feedback-btn:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.1); }
.smart-feedback-btn .text { font-weight:600; color:#334155; font-size:13px; }
.smart-modal-overlay { position:fixed; inset:0; z-index:10000; background:rgba(15,23,42,0.35); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; opacity:0; transition:opacity 0.3s; }
.smart-modal-overlay.active { display:flex; opacity:1; }
.smart-modal-box { background:#fff; width:90%; max-width:420px; padding:26px; border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,0.12); transform:scale(0.96); transition:0.3s; }
.smart-modal-overlay.active .smart-modal-box { transform:scale(1); }
.modal-header { display:flex; justify-content:space-between; margin-bottom:20px; }
.modal-header h3 { margin:0; font-size:17px; font-weight:700; color:#0f172a; }
.modal-header p { margin:3px 0 0; font-size:13px; color:#64748b; }
.highlight-tool { color:#0284c7; font-weight:600; }
.close-smart-btn { background:transparent; border:none; font-size:24px; color:#94a3b8; cursor:pointer; line-height:1; padding:0; }
.close-smart-btn:hover { color:#ef4444; }
.smart-select { width:100%; padding:10px; border:1px solid #e2e8f0; border-radius:8px; font-size:14px; color:#334155; margin-bottom:15px; outline:none; background:#f8fafc; font-family:var(--kdf-font); }
.smart-stars { display:flex; gap:6px; justify-content:center; margin:14px 0; }
.smart-stars i { font-size:28px; color:#e2e8f0; cursor:pointer; transition:color 0.15s; }
.smart-stars i.active { color:#fbbf24; }
.input-group-smart { margin-bottom:10px; }
.input-group-smart input,.input-group-smart textarea { width:100%; padding:10px 14px; border-radius:8px; border:1.5px solid #e2e8f0; font-size:13.5px; outline:none; font-family:var(--kdf-font); color:#334155; transition:border-color 0.2s; }
.input-group-smart input:focus,.input-group-smart textarea:focus { border-color:#0284c7; box-shadow:0 0 0 3px rgba(2,132,199,0.08); }
.smart-submit-btn { width:100%; background:#0f172a; color:#fff; padding:11px; border-radius:8px; border:none; font-weight:600; font-size:14px; cursor:pointer; margin-top:6px; transition:background 0.2s; font-family:var(--kdf-font); }
.smart-submit-btn:hover { background:#1e293b; }
.success-msg { text-align:center; color:#16a34a; font-weight:600; font-size:13px; margin-top:10px; display:none; }

/* ══ RESPONSIVE ══ */
@media (max-width: 1200px) {
  .kd-footer__container {
    grid-template-columns: 1.4fr 1fr 1.3fr 1fr;
    gap: 36px;
  }
  .kd-footer__brand { grid-column: span 2; }
  .kd-footer__col--contact { grid-column: span 2; }
}

@media (max-width: 900px) {
  .kd-footer__container {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 0 24px;
  }
  .kd-footer__brand { grid-column: span 2; }
  .kd-footer__col--contact { grid-column: span 2; }
  .kd-footer__banner { padding: 14px 24px; }
}

@media (max-width: 600px) {
  .kd-footer__top { padding: 40px 0 36px; }
  .kd-footer__container {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0 20px;
  }
  .kd-footer__brand { grid-column: span 2; }
  .kd-footer__col--contact { grid-column: span 2; }
  .kd-footer__tagline { max-width: 100%; }

  .kd-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 20px;
    gap: 8px;
  }
  .kd-footer__policy-links { gap: 3px 5px; }
  .kd-footer__banner { flex-wrap: wrap; padding: 12px 20px; }
  .kd-footer__banner-dot { display: none; }

  #scrollTopBtn { right: 16px; bottom: 150px; }
  .smart-feedback-btn { bottom: 80px; left: 16px; padding: 10px; }
  .smart-feedback-btn .text { display: none; }
}




/* service */ 

/* --- HERO SECTION WITH WAVE --- */
.services-hero {
  position: relative;
  padding: 150px 20px 160px; /* Extra padding bottom for wave */
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.services-hero h1 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: -1px;
  text-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.services-hero p {
  font-size: 18px;
  max-width: 800px;
  margin: auto;
  opacity: 0.95;
  line-height: 1.6;
  font-weight: 400;
}

/* SVG Wave at Bottom */
.custom-shape-divider-bottom-1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.custom-shape-divider-bottom-1 svg {
    position: relative;
    display: block;
    width: calc(138% + 1.3px);
    height: 100px;
}
.custom-shape-divider-bottom-1 .shape-fill {
    fill: #FFFFFF;
}

/* --- GRID LAYOUT --- */
.services-wrap {
  padding: 60px 20px 100px;
  background: #fff;
  position: relative;
  z-index: 2;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1450px;
  margin: -80px auto 0; /* Cards overlap hero slightly for modern look */
  align-items: stretch;
}

/* --- PRO CARDS --- */
.service-box {
  background: #fff;
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Soft premium shadow */
  border: 1px solid rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Top Color Bar for each card */
.service-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: #eee;
}

/* Color Coding Classes */
.sb-ill::before { background: #FF9F43; } /* Orange */
.sb-cov::before { background: #54A0FF; } /* Blue */
.sb-fmt::before { background: #FF6B6B; } /* Red */
.sb-prt::before { background: #1DD1A1; } /* Green */
.sb-pub::before { background: #5f27cd; } /* Purple */

.service-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.service-box img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin: 0 auto 25px;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service-box:hover img {
  transform: scale(1.15); /* Icon Bounce Effect */
}

.service-box h3 {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 15px;
}

.service-box p {
  font-size: 15px;
  color: #666;
  margin-bottom: 25px;
  line-height: 1.6;
}

/* Button Styling */
.service-box a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 50px;
  background: #f3f4f6;
  color: #333;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
  margin-top: auto;
  align-self: center;
  transition: 0.3s;
}

.service-box a:hover {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 5px 15px rgba(3, 164, 237, 0.3);
}

/* --- CTA SECTION --- */
.services-cta {
  padding: 100px 20px;
  text-align: center;
  background: #f9fafb;
  border-top: 1px solid #eee;
}

.services-cta h2 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 15px;
  color: #111827;
}



/* Mobile Fixes */
@media (max-width: 768px) {
    .services-grid { margin-top: -40px; }
    .custom-shape-divider-bottom-1 svg { height: 60px; }
    .services-hero { padding-bottom: 100px; }
}


/* ==========================================================================
   PRICE QUOTE PAGE & CALCULATOR CSS (SAFE INTEGRATION)
   ========================================================================== */


.pq-wrapper {
    padding: 160px 20px 20px !important;
    max-width: 1450px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    font-family: 'Inter', sans-serif;
}

.pq-hero { text-align: center; margin-bottom: 32px; }

.pq-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.88); backdrop-filter: blur(10px);
    border: 1px solid rgba(0,198,255,0.25); color: #0369a1;
    padding: 8px 20px; border-radius: 50px;
    font-size: 13px; font-weight: 700; margin-bottom: 22px;
    box-shadow: 0 4px 12px rgba(0,198,255,0.1);
}
.pq-eyebrow .pulse { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.6;transform:scale(1.3);} }

.pq-hero h1 {
    font-size: clamp(1.5rem,4vw,3rem); font-weight: 700;
    color: #111827; letter-spacing: -1.2px; line-height: 1.15; margin-bottom: 16px;
}
.pq-hero h1 .grad {
    background: linear-gradient(135deg,#00c6ff,#ff7ad9);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.pq-hero-sub { font-size: .9rem; color: #475569; max-width: 640px; margin: 0 auto 28px; line-height: 1.75; }

.pq-trust-pills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.pq-pill {
    background: rgba(255,255,255,0.9); border: 1px solid #e5e7eb;
    color: #374151; padding: 8px 16px; border-radius: 50px;
    font-size: 12.5px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    backdrop-filter: blur(8px); transition: transform .2s;
}
.pq-pill:hover { transform: translateY(-2px); }

/* Renamed to avoid conflict */
.pq-intro-box {
    display: flex; align-items: flex-start; gap: 16px;
    background: rgba(255,255,255,0.82); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.9); border-radius: 16px;
    padding: 22px 28px; max-width: 820px; margin: 24px auto 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.pq-intro-box .intro-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg,#00c6ff,#ff7ad9);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.pq-intro-box h4 { margin: 0 0 5px; font-size: 15px; font-weight: 800; color: #111827; }
.pq-intro-box p  { margin: 0; font-size: 14px; color: #64748b; line-height: 1.6; }

/* View Toggle */
.view-toggle-wrapper { text-align: center; margin-bottom: 40px; }
.view-toggle {
    display: inline-flex; background: #f1f5f9; border-radius: 50px; padding: 6px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); border: 1px solid #e2e8f0;
}
.top-toggle-btn {
    border: none; background: transparent; padding: 12px 28px; border-radius: 50px;
    font-size: 15px; font-weight: 800; color: #64748b; cursor: pointer; transition: all 0.3s cubic-bezier(.4,0,.2,1);
    display: flex; align-items: center; gap: 8px;
}
.top-toggle-btn.active {
    background: linear-gradient(135deg, #00c6ff, #03a4ed); color: #fff;
    box-shadow: 0 4px 14px rgba(0, 198, 255, 0.35); transform: scale(1.02);
}
.main-view-section { display: none; animation: fadeInView 0.5s ease forwards; }
.main-view-section.active-view { display: block; }
@keyframes fadeInView { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* Grid Layouts */
.gig-grid {
    display: grid; grid-template-columns: 1.8fr 1fr; gap: 28px; align-items: start;
}
@media(max-width:992px){ .gig-grid { grid-template-columns: 1fr; } }
@media(max-width:992px){ .gig-sidebar-wrapper { order: -1; margin-bottom: 4px; } }

.gig-card {
    background: rgba(255,255,255,0.82); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.9); border-radius: 20px;
    padding: 28px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); margin-bottom: 22px;
    transition: box-shadow .3s;
}
.gig-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.09); }

.gig-card-header {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 22px; border-bottom: 1px solid rgba(229,231,235,.6); padding-bottom: 16px;
}
.step-badge {
    width: 34px; height: 34px; background: black;
    color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px; box-shadow: 0 4px 12px rgba(0,198,255,0.3); flex-shrink: 0;
}
.gig-card-header h3 { font-size: 1.15rem; font-weight: 800; margin: 0; color: #111827; }
.gig-card-header .step-label { font-size: 12px; color: #9ca3af; font-weight: 500; margin-top: 2px; }

/* Style Cards */
.style-grid-container { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media(max-width:600px){ .style-grid-container { grid-template-columns: repeat(2,1fr); } }

.style-card {
    background: #fff; border: 2px solid #e5e7eb; border-radius: 14px;
    padding: 10px; cursor: pointer; transition: all .3s cubic-bezier(.4,0,.2,1);
    position: relative; text-align: center; overflow: hidden;
}
.style-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.1); border-color: #93c5fd; }
.style-card.active {
    border-color: #03a4ed; background: #f0f9ff;
    box-shadow: 0 0 0 3px rgba(3,164,237,0.2), 0 8px 24px rgba(3,164,237,0.15);
}
.style-card img { width: 100%; height: 95px; object-fit: cover; border-radius: 9px; margin-bottom: 10px; transition: transform .3s; }
.style-card:hover img { transform: scale(1.04); }
.card-info h4 { font-size: 13.5px; margin: 0; font-weight: 700; color: #111827; line-height: 1.2; }
.pq-price-tag { display: block; font-size: 13.5px; color: #03a4ed; font-weight: 800; margin-top: 4px; }
.pq-price-tag small { font-size: 10.5px; color: black ; font-weight: 500; }
.view-samples-link {
    display: inline-block; margin-top: 5px; font-size: 11.5px; font-weight: 700;
    color: #03a4ed; text-decoration: none; background: rgba(3,164,237,0.07); padding: 2px 8px; border-radius: 10px;
    transition: background .2s;
}
.view-samples-link:hover { background: rgba(3,164,237,0.15); }

.check-icon {
    position: absolute; top: 8px; right: 8px; background: linear-gradient(135deg,#00c6ff,#03a4ed);
    color: #fff; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 11px; opacity: 0; transform: scale(0.5); transition: .2s;
}
.style-card.active .check-icon { opacity: 1; transform: scale(1); }

/* Quantity Controls */
.quantity-wrap { padding: 4px 0 16px; }
.quantity-control { display: flex; justify-content: center; align-items: center; gap: 18px; margin-bottom: 20px; }
.qty-btn {
    width: 46px; height: 46px; background: rgba(255,255,255,0.9); border: 1.5px solid #e5e7eb;
    border-radius: 12px; font-size: 22px; color: #374151; cursor: pointer; transition: all .2s; font-weight: 700;
    backdrop-filter: blur(8px);
}
.qty-btn:hover { background: linear-gradient(135deg,#00c6ff,#ff7ad9); color: #fff; border-color: transparent; transform: scale(1.08); }
#quantityDisplay { font-size: 28px; font-weight: 800; width: 56px; text-align: center; color: #111827; font-family: monospace; }
.gig-slider {
    width: 100%; height: 6px; background: linear-gradient(90deg,#00c6ff 0%,#e5e7eb 0%);
    border-radius: 5px; outline: none; -webkit-appearance: none; transition: background .15s;
}
.gig-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 24px; height: 24px; background: linear-gradient(135deg,#00c6ff,#ff7ad9);
    border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 4px rgba(3,164,237,0.2);
}
.delivery-hint { text-align: center; margin-top: 14px; font-size: 13.5px; color: #64748b; }
.delivery-hint strong { color: #111827; }

/* Page Pills */
.page-pills { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.page-pill {
    padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 700;
    border: 1.5px solid #e5e7eb; cursor: pointer; background: rgba(255,255,255,0.9); color: #374151; transition: all .2s;
}
.page-pill:hover, .page-pill.active { background: linear-gradient(135deg,#00c6ff,#ff7ad9); color: #fff; border-color: transparent; }

/* Services List */
.service-list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media(max-width:600px){ .service-list-grid { grid-template-columns: 1fr; } }
.service-item {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    border: 2px solid #f1f5f9; border-radius: 12px; cursor: pointer; transition: all .2s; background: rgba(255,255,255,0.9);
}
.service-item:hover { border-color: #bfdbfe; background: #f0f9ff; }
.service-item input { width: 17px; height: 17px; accent-color: #03a4ed; flex-shrink: 0; cursor: pointer; }
.s-name { font-size: 13.5px; font-weight: 700; flex: 1; color: #374151; }
.service-item:has(input:checked) { border-color: #03a4ed; background: #f0f9ff; }
.service-item:has(input:checked) .s-name { color: #03a4ed; }
.s-price { font-size: 13.5px; font-weight: 800; color: #9ca3af; }
.service-item:has(input:checked) .s-price { color: #10b981; }

/* Sidebar & Offers */
.gig-sidebar-wrapper { position: sticky; top: 100px; }
@media(max-width:992px){ .gig-sidebar-wrapper { position: static; } }

.offer-box-live {
    background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; padding: 18px; border-radius: 18px;
    margin-bottom: 14px; box-shadow: 0 10px 28px rgba(255,61,113,0.3);
}
.offer-box-header { font-size: 15px; font-weight: 800; margin-bottom: 6px; text-align: center; color: #fff; }
.offer-box-text { font-size: 13.5px; line-height: 1.55; text-align: center; margin-bottom: 10px; color: #fff; }
.offer-box-live .offer-timer { background: rgba(255,255,255,.18); border-radius: 10px; padding: 8px; font-size: 13px; font-weight: 700; text-align: center; color: #fff; }
.offer-box-live .offer-timer span, #priceCountdown { font-size: 17px; color: #fff; }

/* Renamed to avoid conflict */
.pq-custom-offer-box {
    background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); border: 1.5px dashed rgba(74,92,255,0.35);
    border-radius: 16px; padding: 18px; text-align: center; margin-bottom: 14px; font-size: 14px; color: #374151;
}
.custom-offer-link {
    display: inline-block; margin-top: 8px; font-weight: 700; color: #4a5cff; text-decoration: none; font-size: 14px;
    background: rgba(74,92,255,0.07); padding: 6px 16px; border-radius: 20px; transition: background .2s;
}
.custom-offer-link:hover { background: rgba(74,92,255,0.15); text-decoration: none; }

.gig-sidebar {
    background: rgba(255,255,255,0.9); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.95);
    border-radius: 20px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.summary-header { background: linear-gradient(135deg,#0f172a,#1e293b); padding: 20px 24px; }
.summary-header h3 { font-size: 16px; font-weight: 800; color: #fff; margin: 0; display: flex; align-items: center; gap: 8px; }
.summary-body { padding: 20px 20px 24px; }
.summary-list { list-style: none; padding: 0; margin: 0 0 16px; }
.summary-list .empty-state { font-size: 13.5px; color: #9ca3af; text-align: center; padding: 8px 0; }
.summary-list li { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; margin-bottom: 6px; border-radius: 10px; background: #f8fafc; font-size: 14px; color: #374151; }
.li-name { display: flex; align-items: center; gap: 6px; }
.li-price { font-weight: 800; color: #111827; font-size: 14px; }
.qty-badge { font-size: 10px; background: linear-gradient(135deg,#00c6ff22,#ff7ad922); color: #03a4ed; padding: 2px 7px; border-radius: 6px; font-weight: 700; border: 1px solid rgba(3,164,237,0.2); }
.summary-divider { height: 1px; background: #f1f5f9; margin: 14px 0; }

.promo-code-container { display: flex; gap: 6px; margin-bottom: 14px; }
.promo-code-container input { flex: 1; padding: 9px 12px; border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: 13.5px; outline: none; color: #111827; background: #f8fafc; transition: border-color .2s; }
.promo-code-container input:focus { border-color: #03a4ed; background: #fff; }
.promo-code-container button { padding: 9px 14px; background: linear-gradient(135deg,#00c6ff,#03a4ed); color: #fff; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity .2s; }
.promo-code-container button:hover { opacity: 0.88; }

.price-row { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 8px; color: #64748b; }
.text-green { color: #10b981; font-weight: 700; }

.total-row { display: flex; justify-content: space-between; align-items: center; font-size: 22px; font-weight: 800; color: #111827; margin-top: 12px; padding: 14px 16px; background: #f8fafc; border-radius: 12px; }
.total-row #finalTotalDisplay { background: black; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.delivery-time { margin-top: 12px; text-align: center; font-size: 13px; color: #64748b; background: #f1f5f9; padding: 9px 12px; border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.action-area { margin-top: 20px; min-height: 50px; }

.btn-checkout { width: 100%; padding: 15px; font-size: 15px; font-weight: 800; color: #fff; border: none; border-radius: 12px; cursor: pointer; background: linear-gradient(135deg,#00c6ff,#ff7ad9); box-shadow: 0 8px 20px rgba(0,198,255,0.25); transition: all .3s; letter-spacing: 0.3px; }
.btn-checkout:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255,122,217,0.35); }
.auth-note { font-size: 12px; color: #9ca3af; text-align: center; margin-top: 8px; }
.btn-print-quote { width: 100%; margin-top: 10px; padding: 11px; background: rgba(255,255,255,0.9); border: 1.5px solid #e5e7eb; border-radius: 10px; cursor: pointer; font-weight: 700; color: #475569; font-size: 13.5px; transition: all .2s; }
.btn-print-quote:hover { border-color: #03a4ed; color: #03a4ed; background: #f0f9ff; }

.trust-badges { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; align-items: center; font-size: 12px; color: #9ca3af; }
.trust-badges span { display: flex; align-items: center; gap: 6px; }
#paypal-loader { text-align: center; font-size: 13px; color: #9ca3af; margin-bottom: 10px; }

/* Packages Section */
.pkgs-section { background: transparent; padding: 0 20px 80px; position: relative; z-index: 2; font-family: 'Inter', sans-serif; }
.pkgs-inner { max-width: 1100px; margin: 0 auto; }
.pkgs-top { text-align: center; margin-bottom: 48px; display: none; } 
.pkgs-h2 { font-size: clamp(1.7rem,3vw,2.3rem); font-weight: 800; color: #111827; letter-spacing: -0.5px; margin-bottom: 10px; }
.pkgs-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.pkgs-tab { padding: 10px 24px; border-radius: 50px; border: 1.5px solid #e5e7eb; background: #fff; font-size: 14px; font-weight: 700; color: #6b7280; cursor: pointer; transition: all .2s; }
.pkgs-tab:hover { border-color: #cbd5e1; color: #0f172a; }
.pkgs-tab.active { background: #0f172a; color: #fff; border-color: #0f172a; }
.pkgs-panel { display: none; }
.pkgs-panel.active { display: block; }
.pkgs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
@media(max-width:860px){ .pkgs-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }

.pkg-card {
    background: #fff; border: 1.5px solid #e5e7eb; border-radius: 20px;
    padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 0;
    position: relative; transition: transform .3s, box-shadow .3s; overflow: hidden;
}
.pkg-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.1); }
.pkg-card.popular { background: #0f172a; border-color: transparent; box-shadow: 0 20px 50px rgba(0,0,0,0.2); transform: scale(1.02); }
.pkg-card.popular:hover { transform: scale(1.02) translateY(-6px); box-shadow: 0 28px 60px rgba(0,0,0,0.25); }

.pkg-popular-badge {
    position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    background: #f59e0b; color: #fff; font-size: 11px; font-weight: 800; padding: 6px 18px;
    border-radius: 0 0 12px 12px; letter-spacing: 1px; text-transform: uppercase;
    display: flex; align-items: center; gap: 5px; box-shadow: 0 4px 12px rgba(245,158,11,0.4);
}

/* Package Details */
.pkg-price-wrap { text-align: center; padding: 24px 0 20px; border-bottom: 1px solid #f1f5f9; margin-bottom: 22px; }
.pkg-card.popular .pkg-price-wrap { border-bottom-color: rgba(255,255,255,0.1); }
.pkg-price { font-size: 3.2rem; font-weight: 800; color: #111827; line-height: 1; margin-bottom: 6px; letter-spacing: -2px; }
.pkg-card.popular .pkg-price { color: #fff; }
.pkg-name { font-size: 16px; font-weight: 800; color: #374151; }
.pkg-card.popular .pkg-name { color: rgba(255,255,255,0.9); }
.pkg-desc { font-size: 13px; color: #9ca3af; margin-top: 4px; line-height: 1.5; }
.pkg-card.popular .pkg-desc { color: rgba(255,255,255,0.5); }

.pkg-meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.pkg-meta-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #475569; }
.pkg-card.popular .pkg-meta-row { color: rgba(255,255,255,0.7); }
.pkg-meta-row .meta-icon { font-size: 14px; flex-shrink: 0; }
.pkg-meta-row strong { color: #111827; }
.pkg-card.popular .pkg-meta-row strong { color: #10b981; }

.pkg-features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 0; flex-grow: 1; }
.pkg-features li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; color: #374151; }
.pkg-card.popular .pkg-features li { border-bottom-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.8); }
.pkg-features li:last-child { border-bottom: none; }
.pkg-features .feat-icon { font-size: 15px; flex-shrink: 0; }
.pkg-features .feat-text { flex: 1; line-height: 1.4; }
.pkg-features .feat-on  { color: #111827; font-weight: 600; }
.pkg-card.popular .pkg-features .feat-on { color: #fff; font-weight: 700; }

.pkg-paypal-wrap { margin-top: auto; min-height: 45px; }
.pkg-paypal-loader { text-align: center; font-size: 13px; color: #64748b; padding: 12px 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pkg-card.popular .pkg-paypal-loader { color: #94a3b8; }
.pkg-paypal-loader::before { content: ''; width: 16px; height: 16px; border: 2px solid #e2e8f0; border-top-color: #03a4ed; border-radius: 50%; animation: pkg-spin .7s linear infinite; }
@keyframes pkg-spin { to { transform: rotate(360deg); } }

.pkg-btn { width: 100%; padding: 15px; font-size: 15px; font-weight: 800; border: 2px solid #111827; border-radius: 12px; background: transparent; color: #111827; cursor: pointer; transition: all .25s; letter-spacing: 0.2px; text-align: center; }
.pkg-btn:hover { background: #111827; color: #fff; }
.pkg-card.popular .pkg-btn { background: #fff; color: #111827; border-color: #fff; box-shadow: 0 6px 20px rgba(255,255,255,0.15); }
.pkg-card.popular .pkg-btn:hover { background: rgba(255,255,255,0.88); }

.pkg-secure { text-align: center; margin-top: 40px; font-size: 12px; font-weight: 700; color: #10b981; letter-spacing: 0.5px; text-transform: uppercase; display: flex; justify-content: center; align-items: center; gap: 6px; }
.pkg-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px); background: #111827; color: #fff; padding: 12px 26px; border-radius: 50px; font-size: 14px; font-weight: 700; box-shadow: 0 8px 28px rgba(0,0,0,.18); z-index: 9999; transition: transform .35s cubic-bezier(.4,0,.2,1); display: flex; align-items: center; gap: 8px; pointer-events: none; white-space: nowrap; }
.pkg-toast.show { transform: translateX(-50%) translateY(0); }

/* SEO Content */
.seo-section-pq { padding: 70px 0 80px; position: relative; z-index: 2; border-top: 1px solid #e5e7eb;}
.seo-section-pq.alt { background: #f8fafc; backdrop-filter: blur(8px); }
.seo-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.seo-section-pq h2 { font-size: clamp(1.5rem,2.5vw,2rem); font-weight: 800; color: #111827; letter-spacing: -.5px; margin-bottom: 14px; }
.seo-section-pq p  { font-size: 16px; color: #475569; line-height: 1.8; margin-bottom: 16px; }
.seo-section-pq strong { color: #111827; }
.style-price-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 18px; margin-top: 28px; }
.style-price-card { background: rgba(255,255,255,0.82); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.9); border-radius: 16px; padding: 24px; transition: transform .3s,box-shadow .3s; }
.style-price-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,.08); }
.style-price-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.style-price-card-icon { font-size: 24px; }
.style-price-card-name { font-size: 16px; font-weight: 800; color: #111827; }
.style-price-card-price { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.style-price-card-desc { font-size: 13.5px; color: #6b7280; line-height: 1.6; }

.how-to-steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0; margin: 24px 0; }
.how-to-step { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid rgba(229,231,235,.5); }
.how-to-step:last-child { border-bottom: none; }
.how-to-num { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: black ; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; box-shadow: 0 4px 12px rgba(0,198,255,.3); }
.how-to-title { font-size: 15px; font-weight: 800; color: #111827; margin-bottom: 4px; }
.how-to-desc  { font-size: 14px; color: #6b7280; line-height: 1.6; }

/* Renamed FAQ Classes */
.pq-faq-section { padding: 60px 0 80px; position: relative; z-index: 2; }
.pq-faq-title { text-align: center; font-size: clamp(1.5rem,2.5vw,1.9rem); font-weight: 800; color: #111827; margin-bottom: 10px; }
.pq-faq-sub { text-align: center; color: #64748b; margin-bottom: 36px; font-size: 15px; }
.pq-faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 0 24px; }
.pq-faq-item {
    background: rgba(255,255,255,.82); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.9); border-radius: 16px;
    overflow: hidden; transition: box-shadow .2s;
}
.pq-faq-item:hover { box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.pq-faq-question {
    width: 100%; padding: 18px 22px; cursor: pointer; border: none; background: none;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 15.5px; font-weight: 700; color: #111827; text-align: left; gap: 14px; transition: background .2s;
}
.pq-faq-question:hover { background: rgba(0,198,255,.04); }
.faq-q-icon {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
    background: linear-gradient(135deg,#00c6ff,#ff7ad9); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; transition: transform .3s;
}
.faq-q-icon::after { content: '+'; }
.pq-faq-item.active .faq-q-icon { transform: rotate(45deg); }
.pq-faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .3s; padding: 0 22px; font-size: 15px; color: #475569; line-height: 1.75; }
.pq-faq-item.active .pq-faq-answer { max-height: 400px; padding: 0 22px 20px; }




/* ════════════════════════════════
   BOOK-PRINT PAGE STYLES (SAFE INTEGRATION)
   ════════════════════════════════ */

.bp-container { max-width: 1450px !important; }

/* ── HERO ── */
.bp-hero { padding: 180px 0 90px; text-align: center; position: relative; z-index: 2; background: #0b0f17; }
@keyframes pulse-dot { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.6; transform:scale(1.4); } }
.bp-hero-title { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.12; color: #ededed; letter-spacing: -1.5px; margin-bottom: 22px; max-width: 900px; margin-left: auto; margin-right: auto; }
.bp-hero-sub { font-size: 1.12rem; color: #a5a5a5; max-width: 680px; margin: 0 auto 32px; line-height: 1.75; }
.bp-hero-sub strong { color: #e3e3e3; }
.bp-hero-btn-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:44px; }
.bp-btn-gradient { display:inline-flex; align-items:center; gap:10px; padding:16px 36px; font-size:1rem; font-weight:700; color:#fff; text-decoration:none; border-radius:999px; background:linear-gradient(135deg,#00c6ff 0%,#ff7ad9 100%); box-shadow:0 10px 25px rgba(0,198,255,0.25); border:none; cursor:pointer; transition:all 0.3s ease; }
.bp-btn-gradient:hover { transform:translateY(-2px); box-shadow:0 16px 35px rgba(255,122,217,0.35); color:#fff; }
.bp-btn-outline-glass { display:inline-flex; align-items:center; gap:10px; padding:16px 36px; font-size:1rem; font-weight:700; color:#374151; text-decoration:none; border-radius:999px; background:rgba(255,255,255,0.85); border:1.5px solid #e5e7eb; backdrop-filter:blur(10px); transition:all 0.3s ease; }
.bp-btn-outline-glass:hover { transform:translateY(-2px); border-color:#00c6ff; color:#0369a1; box-shadow:0 8px 20px rgba(0,198,255,0.15); }
.bp-trust-pills { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.bp-trust-pill { background:rgba(255,255,255,0.9); border:1px solid #e5e7eb; color:#374151; padding:10px 20px; border-radius:50px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:7px; box-shadow:0 4px 8px rgba(0,0,0,0.04); backdrop-filter:blur(10px); transition:transform 0.2s; }
.bp-trust-pill:hover { transform:translateY(-2px); }

/* ── SECTION HELPERS ── */
.bp-section { padding:70px 0; position:relative; z-index:2; }
.bp-section-title { text-align:center; font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:#111827; letter-spacing:-0.5px; margin-bottom:12px; }
.bp-section-sub { text-align:center; color:#64748b; font-size:1.05rem; max-width:600px; margin:0 auto 48px; line-height:1.7; }
.bp-grad-underline { background:linear-gradient(to right,#00c6ff,#ff7ad9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

/* ── STATS STRIP ── */
.bp-stats-dark { background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%); border-radius:24px; padding:48px 40px; display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:30px; position:relative; overflow:hidden; }
.bp-stats-dark::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 20% 50%,rgba(0,198,255,0.12) 0%,transparent 60%), radial-gradient(ellipse at 80% 50%,rgba(255,122,217,0.12) 0%,transparent 60%); }
.bp-stat-block { text-align:center; position:relative; z-index:2; }
.bp-stat-num { font-size:2.4rem; font-weight:800; line-height:1; background:linear-gradient(135deg,#00c6ff,#ff7ad9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:8px; }
.bp-stat-label { font-size:13px; color:rgba(255,255,255,0.55); font-weight:500; line-height:1.4; }

/* ── BENTO GRID ── */
.bp-bento-grid { display:grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap:20px; margin-bottom:0; }
.bp-bento-box { background:rgba(255,255,255,0.72); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.85); border-radius:24px; padding:32px; transition:all 0.4s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden; }
.bp-bento-box:hover { transform:translateY(-6px); box-shadow:0 20px 48px rgba(0,0,0,0.1); }
.bp-bento-large { grid-column: span 2; }
.bp-bento-tall  { grid-row: span 2; }
.bp-bg-dark { background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%); border-color:transparent; color:#fff; }
.bp-bg-dark h3 {color: white !important; }
.bp-bg-dark p, .bp-bg-dark small { color:rgba(255,255,255,0.7); }
.bp-bg-dark ul { color:rgba(255,255,255,0.8); }
.bp-bg-dark ul li strong { color:#fff; }
.bp-bento-icon { font-size:36px; margin-bottom:16px; }
.bp-bento-box h3 { font-size:1.3rem; font-weight:800; color:#111827; margin-bottom:10px; }
.bp-bento-box p { font-size:14.5px; color:#6b7280; line-height:1.65; margin:0; }
.bp-bento-box ul { list-style:none; display:flex; flex-direction:column; gap:10px; font-size:14.5px; }
.bp-bento-box ul li { display:flex; flex-direction:column; gap:2px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.1); }
.bp-bento-box ul li:last-child { border-bottom:none; }
.bp-bento-badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; margin-top:4px; width:fit-content; }
.bp-badge-green  { background:rgba(16,185,129,0.15); color:#10b981; border:1px solid rgba(16,185,129,0.3); }
.bp-badge-blue   { background:rgba(0,198,255,0.15);  color:#0369a1;  border:1px solid rgba(0,198,255,0.3); }
.bp-badge-pink   { background:rgba(255,122,217,0.15); color:#db2777; border:1px solid rgba(255,122,217,0.3); }

@media(max-width:900px){ .bp-bento-grid { grid-template-columns:1fr 1fr; } .bp-bento-large { grid-column:span 2; } .bp-bento-tall  { grid-row:span 1; } }
@media(max-width:600px){ .bp-bento-grid { grid-template-columns:1fr; } .bp-bento-large { grid-column:span 1; } }

/* ── PROCESS STEPS ── */
.bp-process-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; }
.bp-process-step-card { background:rgba(255,255,255,0.72); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.85); border-radius:20px; padding:28px 22px; text-align:center; transition:transform 0.3s,box-shadow 0.3s; }
.bp-process-step-card:hover { transform:translateY(-5px); box-shadow:0 14px 36px rgba(0,0,0,0.08); }
.bp-ps-num { width:44px; height:44px; border-radius:50%; margin:0 auto 14px; background:linear-gradient(135deg,#00c6ff,#ff7ad9); color:#fff; font-size:18px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,198,255,0.3); }
.bp-ps-icon { font-size:28px; margin-bottom:10px; }
.bp-ps-title { font-size:1rem; font-weight:800; color:#111827; margin-bottom:6px; }
.bp-ps-desc { font-size:13.5px; color:#6b7280; line-height:1.6; }

/* ── PAPER OPTIONS ── */
.bp-paper-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.bp-paper-card { background:rgba(255,255,255,0.72); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.85); border-radius:20px; padding:26px; transition:transform 0.3s,box-shadow 0.3s; }
.bp-paper-card:hover { transform:translateY(-4px); box-shadow:0 14px 32px rgba(0,0,0,0.08); }
.bp-paper-card.bp-recommended { border-color:rgba(0,198,255,0.4); box-shadow:0 0 0 2px rgba(0,198,255,0.15); }
.bp-paper-rec-tag { display:inline-block; font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; margin-bottom:10px; background:linear-gradient(135deg,#00c6ff,#ff7ad9); color:#fff; }
.bp-paper-gsm { font-size:2rem; font-weight:900; background:linear-gradient(135deg,#00c6ff,#ff7ad9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1; margin-bottom:4px; }
.bp-paper-name { font-size:14px; font-weight:700; color:#111827; margin-bottom:8px; }
.bp-paper-desc { font-size:13px; color:#6b7280; line-height:1.6; }
.bp-paper-use { margin-top:10px; font-size:11px; font-weight:700; color:#0369a1; }

/* ── SPECS TABLE ── */
.bp-specs-wrap { background:rgba(255,255,255,0.8); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.9); border-radius:20px; overflow:hidden; box-shadow:0 8px 28px rgba(0,0,0,0.05); }
.bp-specs-table { width:100%; border-collapse:collapse; font-size:14.5px; }
.bp-specs-table th { padding:15px 20px; text-align:left; font-size:12px; font-weight:700; letter-spacing:0.5px; }
.bp-specs-table th:first-child { background:rgba(248,250,252,0.9); color:#6b7280; }
.bp-specs-table th.bp-col-std { background:rgba(240,253,244,0.8); color:#065f46; text-align:center; }
.bp-specs-table th.bp-col-prem { background:linear-gradient(135deg,rgba(0,198,255,0.1),rgba(255,122,217,0.1)); color:#0369a1; text-align:center; }
.bp-specs-table td { padding:13px 20px; border-top:1px solid rgba(229,231,235,0.5); vertical-align:middle; }
.bp-specs-table td:first-child { font-weight:600; color:#374151; background:rgba(248,250,252,0.5); }
.bp-specs-table td:not(:first-child) { text-align:center; color:#475569; }
.bp-specs-table tr:hover td { background:rgba(0,198,255,0.03); }

/* ── COMPARE TABLE ── */
.bp-compare-wrap { background:rgba(255,255,255,0.82); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.9); border-radius:20px; overflow:hidden; box-shadow:0 8px 28px rgba(0,0,0,0.05); }
.bp-compare-table { width:100%; border-collapse:collapse; font-size:14px; }
.bp-compare-table th { padding:15px 20px; text-align:left; font-size:12px; font-weight:700; letter-spacing:0.5px; }
.bp-compare-table th:first-child { background:rgba(248,250,252,0.9); color:#6b7280; }
.bp-compare-table th.bp-pod { background:rgba(248,250,252,0.9); color:#9ca3af; text-align:center; }
.bp-compare-table th.bp-offset { background:linear-gradient(135deg,rgba(0,198,255,0.12),rgba(255,122,217,0.12)); color:#0369a1; text-align:center; }
.bp-compare-table td { padding:12px 20px; border-top:1px solid rgba(229,231,235,0.5); vertical-align:middle; }
.bp-compare-table td:first-child { font-weight:600; color:#374151; background:rgba(248,250,252,0.5); }
.bp-compare-table td:not(:first-child) { text-align:center; }
.bp-compare-table tr:hover td { background:rgba(0,198,255,0.03); }

/* ── PRICING CARDS ── */
.bp-pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.bp-p-card { background:rgba(255,255,255,0.75); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.88); border-radius:20px; padding:32px; display:flex; flex-direction:column; gap:16px; transition:transform 0.3s,box-shadow 0.3s; position:relative; }
.bp-p-card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(0,0,0,0.1); }
.bp-p-card--featured { border:2px solid transparent; background:linear-gradient(white,white) padding-box, linear-gradient(135deg,#00c6ff,#ff7ad9) border-box; box-shadow:0 8px 32px rgba(0,198,255,0.18); }
.bp-p-tag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#00c6ff,#ff7ad9); color:#fff; font-size:11px; font-weight:700; padding:4px 16px; border-radius:20px; white-space:nowrap; }
.bp-p-header { display:flex; justify-content:space-between; align-items:flex-start; }
.bp-p-header h4 { font-size:1.15rem; font-weight:800; color:#111827; margin:0;}
.bp-p-price { font-size:2rem; font-weight:900; background:linear-gradient(135deg,#00c6ff,#ff7ad9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.bp-p-price span { font-size:0.9rem; color:#6b7280; -webkit-text-fill-color:#6b7280; }
.bp-p-desc { font-size:13.5px; color:#6b7280; line-height:1.6; margin:0;}
.bp-p-features { list-style:none; display:flex; flex-direction:column; gap:8px; padding:0; margin:0;}
.bp-p-features li { display:flex; align-items:flex-start; gap:8px; font-size:14px; color:#374151; line-height:1.5; }
.bp-p-features li::before { content:'✓'; color:#10b981; font-weight:900; font-size:12px; flex-shrink:0; margin-top:2px; }

/* ── TESTIMONIALS ── */
.bp-testi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.bp-testi-card { background:rgba(255,255,255,0.72); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.85); border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:14px; transition:transform 0.3s; }
.bp-testi-card:hover { transform:translateY(-4px); box-shadow:0 14px 36px rgba(0,0,0,0.07); }
.bp-testi-stars { font-size:14px; letter-spacing:2px; color:#f59e0b; }
.bp-testi-text { font-size:15px; color:#475569; line-height:1.7; font-style:italic; padding-left:20px; position:relative; }
.bp-testi-text::before { content:'"'; position:absolute; left:0; top:-6px; font-size:42px; color:#e0e7ff; line-height:1; font-style:normal; font-family:Georgia,serif; }
.bp-testi-author { padding-top:14px; border-top:1px solid rgba(229,231,235,0.5); }
.bp-testi-name { font-size:15px; font-weight:800; color:#111827; }
.bp-testi-role { font-size:12px; color:#9ca3af; margin-top:2px; }

/* ── PRICE QUOTE FAQ (Clean Index Style) ── */
.pq-faq-list { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  max-width: 820px; 
  margin: 0 auto; 
  padding: 0 24px; 
}

.pq-faq-item {
  background: #ffffff;
  border: 1px solid #e5e7eb; 
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.pq-faq-item:hover { 
  box-shadow: 0 4px 12px rgba(0,0,0,0.04); 
}

.pq-faq-question {
  width: 100%; 
  padding: 18px 22px; 
  cursor: pointer; 
  border: none; 
  background: #ffffff;
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  font-size: 15px; 
  font-weight: 700; 
  color: #0f172a; 
  text-align: left;
  gap: 14px;
  transition: background 0.2s;
}

/* Turn the gradient circle into a simple index-style arrow */
.faq-q-icon {
  background: transparent;
  width: auto; 
  height: auto;
  color: #0f172a;
  font-size: 20px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  transition: transform 0.3s ease;
  border-radius: 0;
}

.faq-q-icon::after {
  content: '▾'; /* Simple dropdown arrow */
  display: block;
}

/* Answer box with light gray background */
.pq-faq-answer {
  max-height: 0; 
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.3s;
  padding: 0 22px; 
  font-size: 14.5px; 
  color: #475569; 
  line-height: 1.75;
  background: #fcfcfc; 
}

/* Expanded state styling */
.pq-faq-item.active .pq-faq-answer { 
  max-height: 400px; 
  padding: 18px 22px; 
  border-top: 1px solid #f1f5f9; 
}

/* Rotate the arrow up when open */
.pq-faq-item.active .faq-q-icon { 
  transform: rotate(-180deg); 
}


/* ── FAQ (Clean Index Style) ── */
.bp-faq-list-wrap { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  max-width: 820px; 
  margin: 0 auto; 
  padding: 0 24px; 
}

.bp-faq-item {
  background: #ffffff;
  border: 1px solid #e5e7eb; 
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.bp-faq-item:hover { 
  box-shadow: 0 4px 12px rgba(0,0,0,0.04); 
}

.bp-faq-question {
  width: 100%; 
  padding: 18px 22px; 
  cursor: pointer; 
  border: none; 
  background: #ffffff;
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  font-size: 15px; 
  font-weight: 700; 
  color: #0f172a; 
  text-align: left;
  transition: background 0.2s;
}

/* Turn the existing circle icon into a simple index-style arrow */
.bp-faq-icon {
  background: transparent;
  width: auto; 
  height: auto;
  color: #0f172a;
  font-size: 20px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  transition: transform 0.3s ease;
}

.bp-faq-icon::after {
  content: '▾'; /* Index wala simple dropdown arrow */
  display: block;
}

/* Answer box with light gray background like index */
.bp-faq-answer {
  max-height: 0; 
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.3s;
  padding: 0 22px; 
  font-size: 14.5px; 
  color: #475569; 
  line-height: 1.75;
  background: #fcfcfc; /* Light gray background */
}

/* Expanded state styling */
.bp-faq-item.active .bp-faq-answer { 
  max-height: 400px; 
  padding: 18px 22px; 
  border-top: 1px solid #f1f5f9; /* Subtle line separating question and answer */
}

/* Rotate the arrow up when open */
.bp-faq-item.active .bp-faq-icon { 
  transform: rotate(-180deg); 
}
/* ── MODAL ── */
.pc-modal { display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.6); backdrop-filter:blur(8px); justify-content:center; align-items:center; }
.pc-box { background:rgba(255,255,255,0.95); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.9); border-radius:24px; padding:36px; width:100%; max-width:640px; max-height:90vh; overflow-y:auto; box-shadow:0 32px 80px rgba(0,0,0,0.2); }
.pc-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.pc-head h3 { font-size:1.3rem; font-weight:800; color:#111827; display:flex; align-items:center; gap:10px; margin:0;}
.pc-close { background:none; border:none; font-size:28px; color:#9ca3af; cursor:pointer; line-height:1; transition:color 0.2s; }
.pc-close:hover { color:#111827; }
.pc-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
.pc-field { display:flex; flex-direction:column; gap:6px; }
.pc-field label { font-size:12px; font-weight:700; color:#374151; text-transform:uppercase; letter-spacing:0.5px; }
.pc-field input, .pc-field select { padding:10px 14px; border-radius:10px; border:1.5px solid #e5e7eb; font-size:14.5px; font-weight:500; background:rgba(255,255,255,0.9); outline:none; transition:border-color 0.2s; }
.pc-field input:focus, .pc-field select:focus { border-color:#00c6ff; }
.pc-result-panel { background:linear-gradient(135deg,rgba(0,198,255,0.06),rgba(255,122,217,0.06)); border:1px solid rgba(0,198,255,0.2); border-radius:16px; padding:20px; margin-bottom:20px; }
.pc-est-label { font-size:12px; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.pc-price-tag { font-size:2rem; font-weight:900; background:linear-gradient(135deg,#00c6ff,#ff7ad9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1; margin-bottom:12px; }
.pc-note { font-size:12px; color:#9ca3af; margin-top:10px; }
.pc-btn--full { width:100%; justify-content:center; }
@media(max-width:600px){ .pc-grid { grid-template-columns:1fr; } .pc-box { padding:24px; margin:16px; } }

/* ── FLOATING DOCK ── */
.bp-floating-dock { position:fixed; bottom:24px; right:24px; z-index:999; background:rgba(255,255,255,0.95); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.9); border-radius:20px; padding:14px 20px; box-shadow:0 8px 32px rgba(0,0,0,0.12); display:flex; align-items:center; gap:16px; }
.bp-dock-info span { font-size:14px; font-weight:800; color:#111827; display:block; }
.bp-dock-info small { font-size:12px; color:#9ca3af; }

/* ── FINAL CTA ── */
.bp-final-cta-wrap { background:rgba(255,255,255,0.8); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.9); border-radius:24px; padding:60px 40px; text-align:center; box-shadow:0 8px 32px rgba(0,0,0,0.06); }
.bp-final-cta-wrap h2 { font-size:2rem; font-weight:800; color:#111827; margin-bottom:14px; letter-spacing:-0.5px; }
.bp-final-cta-wrap p { font-size:1.05rem; color:#64748b; max-width:520px; margin:0 auto 32px; line-height:1.7; }

/* ── SEO RICH TEXT ── */
.bp-seo-rich { padding:0 0 60px; }
.bp-seo-rich h2 { font-size:1.5rem; font-weight:800; color:#111827; margin-bottom:12px; }
.bp-seo-rich h3 { font-size:1.15rem; font-weight:700; color:#1e293b; margin:20px 0 8px; }
.bp-seo-rich p { font-size:15px; color:#6b7280; line-height:1.8; margin-bottom:10px; max-width:900px; }
.bp-seo-rich a { color:#0369a1; text-decoration:none; }
.bp-seo-rich a:hover { text-decoration:underline; }

@media(max-width:768px){ .bp-hero { padding:90px 0 60px; } .bp-stats-dark { padding:36px 24px; gap:20px; } .bp-final-cta-wrap { padding:40px 24px; } .bp-floating-dock { bottom:16px; right:16px; padding:10px 14px; } .bp-specs-table { font-size:13px; } 
.pq-wrapper {padding: 90px 10px !important} }


/* ==========================================================================
   REVIEWS PAGE — PREMIUM CSS (SAFE INTEGRATION)
   ========================================================================== */

/* ── HERO ── */
.rv-hero {
    background: #0b0f17;
    padding: 160px 24px 72px;
    position: relative;
    overflow: hidden;
}
.rv-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 20% 50%, rgba(245,166,35,.09) 0%, transparent 65%),
        radial-gradient(ellipse 50% 60% at 80% 20%, rgba(14,165,233,.12) 0%, transparent 60%);
    pointer-events: none;
}
.rv-hero::after {
    content: '"';
    position: absolute;
    right: 6%;
    top: -30px;
    font-size: 280px;
    font-family: Georgia, serif;
    color: rgba(255,255,255,.03);
    line-height: 1;
    pointer-events: none;
    user-select: none;
}
.rv-hero-inner {
    max-width: 1450px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.rv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: wheat;
    background: rgba(245,166,35,.1);
    border: 1px solid rgba(245,166,35,.25);
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 24px;
}
.rv-hero h1 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -2px;
    color: #fff;
    margin-bottom: 18px;
}
.rv-hero h1 .accent { 
    background: linear-gradient(90deg,#00d4ff,#b38bff,#ff9bd7); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}
.rv-hero p {
    font-size: 17px;
    color: rgba(255,255,255,.55);
    line-height: 1.75;
    max-width: 560px;
    margin-bottom: 40px;
}

/* ── STATS BAR (hero) ── */
.rv-stats-row {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    padding-top: 36px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.rv-big-score {
    font-family: 'Sora', sans-serif;
    font-size: 62px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}
.rv-stars { color: greenyellow; font-size: 20px; letter-spacing: 2px; margin-bottom: 5px; }
.rv-total { font-size: 13px; color: rgba(255,255,255,.45); font-weight: 600; }
.rv-bars { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.rv-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: rgba(255,255,255,.5);
    font-weight: 600;
}
.rv-bar-track {
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,.1);
    border-radius: 3px;
    overflow: hidden;
}
.rv-bar-fill {
    height: 100%;
    background: linear-gradient(90deg,#00d4ff,#b38bff,#ff9bd7);
    border-radius: 3px;
    transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.rv-bar-count { min-width: 20px; text-align: right; }
.rv-trust-row { display: flex; gap: 20px; flex-wrap: wrap; margin-left: auto; }
.rv-trust-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.6);
}
.rv-trust-pill .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: greenyellow;
    flex-shrink: 0;
}

/* ── FILTER BAR ── */
.rv-filter-bar {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 8px rgba(11,15,23,.06);
}
.rv-filter-inner {
    max-width: 1450px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.rv-filter-inner::-webkit-scrollbar { display: none; }
.rv-filter-btn {
    padding: 16px 20px;
    font-size: 13px;
    font-weight: 700;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #475569;
}
.rv-filter-btn.active { color: #03a4ed; border-bottom-color: #03a4ed; }
.rv-filter-btn .fcount {
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    color: #64748b;
}
.rv-filter-btn.active .fcount { background: #fff8ec; color: #f59e0b; }

/* ── MAIN LAYOUT ── */
.rv-main {
    max-width: 1450px;
    margin: 0 auto;
    padding: 48px 24px 80px;
}
.reviews-feed {
    columns: 2;
    column-gap: 24px;
}

/* ── REVIEW CARD ── */
.review-card-pro {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 24px;
    break-inside: avoid;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: transform .22s, box-shadow .22s;
    position: relative;
    overflow: hidden;
}
.review-card-pro:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.review-card-pro::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #f59e0b, rgba(245,166,35,0));
    border-radius: 3px 0 0 3px;
}

.rc-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}
.rc-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(11,15,23,.08);
}
.rc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-meta { flex: 1; min-width: 0; }
.rc-name {
    font-size: 15px;
    font-weight: 800;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.verified-icon { color: #03a4ed; font-size: 13px; }
.rc-sub {
    font-size: 12px;
    color: #64748b;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rc-stars { 
    background: linear-gradient(90deg,#00d4ff,#b38bff,#ff9bd7); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    font-size: 13px; 
    letter-spacing: 1px; 
    margin-top: 5px; 
}
.rc-date {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}
.rc-body {
    font-size: 15px;
    line-height: 1.75;
    color: #374151;
    margin-bottom: 18px;
    position: relative;
}
.rc-body::before {
    content: '"';
    font-size: 60px;
    font-family: Georgia, serif;
    color: #fff8ec;
    position: absolute;
    top: -14px;
    left: -8px;
    line-height: 1;
    pointer-events: none;
    z-index: -1;
}
.rc-gallery {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.rc-thumb {
    width: 72px; height: 72px;
    border-radius: 10px;
    object-fit: cover;
    cursor: pointer;
    border: 1.5px solid #e2e8f0;
    transition: opacity .18s, transform .18s;
}
.rc-thumb:hover { opacity: .85; transform: scale(1.04); }

/* ── Admin Reply ── */
.admin-bubble {
    background: #f1f5f9;
    border-radius: 12px;
    border-top-left-radius: 4px;
    padding: 14px 18px;
    margin-top: 12px;
}
.admin-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #03a4ed;
    margin-bottom: 8px;
}
.admin-header::before { content: '✦'; font-size: 9px; }
.admin-text { font-size: 14px; color: #374151; line-height: 1.65; }

.reply-zone {
    margin-top: 12px;
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    padding: 14px;
}
.reply-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    resize: none;
    outline: none;
    font-family: inherit;
    color: #111827;
    background: #ffffff;
    transition: border .2s;
}
.reply-input:focus { border-color: #03a4ed; }
.reply-btn {
    margin-top: 8px;
    background: #111827;
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}
.reply-btn:hover { background: #03a4ed; }

/* ── CTA ── */
.rv-cta {
    background: #0b0f17;
    border-radius: 20px;
    padding: 52px 48px;
    text-align: center;
    margin-top: 60px;
    position: relative;
    overflow: hidden;
}
.rv-cta::before {
    content: '★';
    position: absolute;
    font-size: 240px;
    color: rgba(255,255,255,.025);
    right: -20px; top: -40px;
    pointer-events: none;
    user-select: none;
}
.rv-cta h2 {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}
.rv-cta p { font-size: 15px; color: rgba(255,255,255,.55); line-height: 1.7; max-width: 480px; margin: 0 auto 28px; }
.rv-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg,#00d4ff,#b38bff,#ff9bd7);
    color: white;
    font-size: 14px;
    font-weight: 800;
    padding: 14px 32px;
    border-radius: 100px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 20px rgba(245,166,35,.35);
}
.rv-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(245,166,35,.45); color: #fff; }

.rv-empty {
    text-align: center;
    padding: 80px 20px;
    color: #64748b;
    font-size: 15px;
    grid-column: span 2;
}

/* ── LIGHTBOX ── */
#previewOverlay {
    display: none;
    position: fixed; inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    justify-content: center;
    align-items: center;
}
#previewOverlay.show { display: flex; }
.lb-close {
    position: fixed;
    top: 22px; right: 26px;
    width: 46px; height: 46px;
    background: rgba(255,255,255,.12);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 22px;
    z-index: 999999;
    border: 1px solid rgba(255,255,255,.2);
    transition: background .2s;
}
.lb-close:hover { background: rgba(255,255,255,.22); }
.lb-arrow {
    position: fixed;
    top: 50%; transform: translateY(-50%);
    width: 50px; height: 50px;
    background: rgba(255,255,255,.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    z-index: 999999;
    border: 1px solid rgba(255,255,255,.15);
    transition: background .2s;
}
.lb-arrow:hover { background: rgba(255,255,255,.2); }
.lb-arrow.prev { left: 20px; }
.lb-arrow.next { right: 20px; }
#imgContainer {
    width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
}
#previewImg {
    max-width: 90vw; max-height: 85vh;
    width: auto; height: auto;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
    display: block;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .reviews-feed { columns: 1; }
    .rv-stats-row { gap: 20px; }
    .rv-trust-row { margin-left: 0; }
}
@media (max-width: 680px) {
    .rv-hero { padding: 100px 18px 52px; }
    .rv-main { padding: 32px 16px 60px; }
    .rv-cta { padding: 36px 20px; }
    .rv-big-score { font-size: 48px; }
    .rv-bars { display: none; }
}


/* ════════════════════════════════════
   ABOUT PAGE STYLES (SAFE INTEGRATION)
════════════════════════════════════ */

/* ── CONTAINERS ── */
.ab-wrap { position: relative; z-index: 2; overflow: hidden; }
.ab-container { max-width: 1450px; margin: 0 auto; padding: 0 28px; }
.ab-container-wide { max-width: 1450px; margin: 0 auto; padding: 0 28px; }

/* ── HERO ── */
.ab-hero { padding: 170px 28px 90px; text-align: center; position: relative; z-index: 2; }
.ab-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); border: 1px solid rgba(0,198,255,0.25); color: #0369a1; padding: 8px 20px; border-radius: 50px; font-size: 13px; font-weight: 700; margin-bottom: 28px; box-shadow: 0 4px 12px rgba(0,198,255,0.1); }
.ab-hero p { font-size: 16px; }
.ab-hero-eyebrow .ab-pulse { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: ab-pulse-dot 2s infinite; }
@keyframes ab-pulse-dot { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.6;transform:scale(1.3);} }

.ab-hero h1 { font-size: clamp(2.2rem,5vw,3.6rem); font-weight: 800; line-height: 1.12; color: #111827; letter-spacing: -1.5px; margin-bottom: 20px; max-width: 820px; margin-left: auto; margin-right: auto; }
.ab-hero h1 .ab-grad { background: linear-gradient(135deg,#00c6ff,#ff7ad9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.ab-hero-sub { font-size: 1.15rem; color: #475569; max-width: 1450px; margin: 0 auto 36px; line-height: 1.75; }
.ab-hero-sub strong { color: #111827; }

/* CTA buttons */
.ab-hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }
.ab-btn-grad { display: inline-flex; align-items: center; gap: 8px; padding: 15px 34px; font-size: 15px; font-weight: 700; color: #fff; text-decoration: none; border-radius: 999px; background: linear-gradient(135deg,#00c6ff,#ff7ad9); box-shadow: 0 10px 25px rgba(0,198,255,0.25); transition: all .3s; }
.ab-btn-grad:hover { transform: translateY(-2px); box-shadow: 0 16px 35px rgba(255,122,217,0.35); color:#fff; }
.ab-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 15px 34px; font-size: 15px; font-weight: 700; color: #374151; text-decoration: none; border-radius: 999px; background: rgba(255,255,255,0.85); border: 1.5px solid #e5e7eb; backdrop-filter: blur(10px); transition: all .3s; }
.ab-btn-ghost:hover { border-color: #00c6ff; color: #0369a1; transform: translateY(-2px); }

/* Trust pills */
.ab-pills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ab-pill { background: rgba(255,255,255,0.9); border: 1px solid #e5e7eb; color: #374151; padding: 9px 18px; border-radius: 50px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; box-shadow: 0 4px 8px rgba(0,0,0,0.04); backdrop-filter: blur(10px); transition: transform .2s; }
.ab-pill:hover { transform: translateY(-2px); }

/* ── STATS STRIP ── */
.ab-stats-strip { background: linear-gradient(135deg,#0f172a,#1e293b); padding: 48px 28px; position: relative; overflow: hidden; z-index: 2; }
.ab-stats-strip::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%,rgba(0,198,255,.12) 0%,transparent 60%), radial-gradient(ellipse at 80% 50%,rgba(255,122,217,.12) 0%,transparent 60%); }
.ab-stats-grid { max-width: 1450px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 28px; position: relative; z-index: 2; }
.ab-stat { text-align: center; }
.ab-stat-num { font-size: 2.4rem; font-weight: 800; background: linear-gradient(135deg,#00c6ff,#ff7ad9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height: 1; margin-bottom: 8px; }
.ab-stat-label { font-size: 12.5px; color: rgba(255,255,255,.55); font-weight: 500; }

/* ── SECTION LAYOUT ── */
.ab-section { padding: 80px 0; position: relative; z-index: 2; }
.ab-section-alt { background: rgba(255,255,255,0.5); backdrop-filter: blur(8px); }

.ab-chapter-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #0369a1; background: rgba(0,198,255,0.08); border: 1px solid rgba(0,198,255,0.2); padding: 5px 14px; border-radius: 20px; margin-bottom: 16px; }
.ab-section h2 { font-size: clamp(1.7rem,3vw,2.4rem); font-weight: 800; color: #111827; letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 16px; }
.ab-section h2 .ab-grad { background: linear-gradient(135deg,#00c6ff,#ff7ad9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.ab-section p { font-size: 16.5px; color: #475569; line-height: 1.8; margin-bottom: 18px; }
.ab-section p strong { color: #111827; }
.ab-section h3 { font-size: 1.3rem; font-weight: 800; color: #111827; margin: 32px 0 12px; }

/* ── FOUNDER CARD ── */
.ab-founder-grid { display: grid; grid-template-columns: 320px 1fr; gap: 50px; align-items: start; }
@media(max-width:900px){ .ab-founder-grid { grid-template-columns: 1fr; } }

.ab-founder-img-wrap { position: relative; }
.ab-founder-img { width: 100%; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.15); display: block; }
.ab-founder-img-badge { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg,#00c6ff,#ff7ad9); color: #fff; font-size: 12px; font-weight: 800; padding: 8px 20px; border-radius: 30px; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,198,255,0.35); }
.ab-founder-social { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.ab-founder-social a { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.85); border: 1px solid #e5e7eb; color: #374151; padding: 8px 16px; border-radius: 30px; font-size: 13px; font-weight: 600; text-decoration: none; backdrop-filter: blur(8px); transition: all .2s; }
.ab-founder-social a:hover { border-color: #00c6ff; color: #0369a1; transform: translateY(-2px); }

.ab-cred-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.ab-cred-chip { font-size: 12.5px; font-weight: 700; padding: 5px 14px; border-radius: 20px; border: 1px solid; }

/* Timeline */
.ab-timeline { display: flex; flex-direction: column; gap: 0; margin: 28px 0; }
.ab-tl-item { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 28px; position: relative; }
.ab-tl-item:last-child { padding-bottom: 0; }
.ab-tl-item:not(:last-child)::before { content:''; position:absolute; left:19px; top:42px; bottom:0; width:2px; background:linear-gradient(180deg,#00c6ff,transparent); }
.ab-tl-dot { width: 40px; height: 40px; border-radius: 50%; background:linear-gradient(135deg,#00c6ff,#ff7ad9); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; box-shadow:0 6px 16px rgba(0,198,255,.3); }
.ab-tl-year { font-family: monospace; font-size: 11px; font-weight: 700; color: #0369a1; background: rgba(0,198,255,0.08); border: 1px solid rgba(0,198,255,0.2); padding: 3px 10px; border-radius: 12px; margin-bottom: 6px; display: inline-block; }
.ab-tl-title { font-size: 15.5px; font-weight: 800; color: #111827; margin-bottom: 4px; }
.ab-tl-desc { font-size: 14px; color: #64748b; line-height: 1.6; }

/* ── WORKSPACE GALLERY ── */
.ab-workspace-gallery { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; margin: 32px 0; }
.ab-workspace-gallery img { width: 100%; height: 220px; object-fit: cover; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); transition: transform .3s,box-shadow .3s; }
.ab-workspace-gallery img:hover { transform: scale(1.04); box-shadow: 0 16px 40px rgba(0,0,0,0.15); }

/* ── FEATURE LIST ── */
.ab-feature-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 24px 0; padding: 0;}
.ab-feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: #374151; line-height: 1.6; background: rgba(255,255,255,0.78); backdrop-filter:blur(12px); border: 1px solid rgba(255,255,255,.9); border-radius: 12px; padding: 14px 18px; }
.ab-feature-list li::before { content:'✓'; color:#10b981; font-weight:900; font-size:14px; flex-shrink:0; margin-top:2px; }

/* ── TECH STACK ── */
.ab-tech-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; margin: 28px 0; }
.ab-tech-card { background: rgba(255,255,255,0.78); backdrop-filter:blur(12px); border: 1px solid rgba(255,255,255,.9); border-radius: 16px; padding: 22px; display:flex; flex-direction:column; gap:10px; transition: transform .3s,box-shadow .3s; }
.ab-tech-card:hover { transform:translateY(-4px); box-shadow:0 14px 36px rgba(0,0,0,.08); }
.ab-tech-icon { font-size: 26px; }
.ab-tech-title { font-size: 15px; font-weight: 800; color: #111827; }
.ab-tech-desc { font-size: 13.5px; color: #6b7280; line-height: 1.6; }

/* ── QUOTE BOX ── */
.ab-quote-box { background: linear-gradient(135deg,#0f172a,#1e293b); border-radius: 20px; padding: 40px 44px; position: relative; overflow: hidden; margin: 40px 0; }
.ab-quote-box::before { content:'"'; position:absolute; top:-20px; left:20px; font-family:Georgia,serif; font-size:200px; color:rgba(255,255,255,.04); line-height:1; }
.ab-quote-box-text { font-size: 1.2rem; font-style: italic; color: rgba(255,255,255,0.9); line-height: 1.8; margin-bottom: 20px; position:relative; z-index:2; }
.ab-quote-box-author { display:flex; align-items:center; gap:14px; position:relative; z-index:2; }
.ab-quote-author-img { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid rgba(0,198,255,.5); }
.ab-quote-author-name { font-size:15px; font-weight:800; color:#fff; }
.ab-quote-author-title { font-size:12px; color:rgba(255,255,255,.5); margin-top:2px; font-family:monospace; }

/* ── PILLARS GRID ── */
.ab-pillars-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:36px; }
.ab-pillar-card { background:rgba(255,255,255,.78); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.9); border-radius:20px; padding:28px; transition:transform .3s,box-shadow .3s; position:relative; overflow:hidden; }
.ab-pillar-card:hover { transform:translateY(-5px); box-shadow:0 20px 48px rgba(0,0,0,.1); }
.ab-pillar-card-accent { height:4px; border-radius:20px 20px 0 0; position:absolute; top:0; left:0; right:0; }
.ab-pillar-icon { font-size:30px; margin-bottom:14px; }
.ab-pillar-title { font-size:18px; font-weight:800; color:#111827; margin-bottom:10px; }
.ab-pillar-desc { font-size:14px; color:#6b7280; line-height:1.65; }

/* ── POLICIES GRID ── */
.ab-policies-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:32px; }
.ab-policy-card { background:rgba(255,255,255,.78); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.9); border-radius:16px; padding:24px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px; transition:transform .3s,box-shadow .3s,border-color .2s; }
.ab-policy-card:hover { transform:translateY(-4px); box-shadow:0 14px 36px rgba(0,0,0,.08); border-color:rgba(0,198,255,.35); }
.ab-policy-card i { font-size:24px; }
.ab-policy-card h4 { font-size:15px; font-weight:800; color:#111827; margin:0; }
.ab-policy-card p { font-size:13px; color:#6b7280; line-height:1.55; margin:0; }

/* ── VISION CARDS ── */
.ab-vision-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px; }
@media(max-width:680px){ .ab-vision-grid { grid-template-columns:1fr; } }
.ab-vision-card { border-radius:16px; padding:28px; display:flex; flex-direction:column; gap:12px; }
.ab-vision-card.dark { background:linear-gradient(135deg,#0f172a,#1e293b); }
.ab-vision-card.light { background:rgba(255,255,255,.78); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.9); }
.ab-vision-card-icon { font-size:28px; }
.ab-vision-card-title { font-size:18px; font-weight:800; }
.ab-vision-card.dark .ab-vision-card-title { color:#fff; }
.ab-vision-card.light .ab-vision-card-title { color:#111827; }
.ab-vision-card-desc { font-size:14px; line-height:1.65; }
.ab-vision-card.dark .ab-vision-card-desc { color:rgba(255,255,255,.65); }
.ab-vision-card.light .ab-vision-card-desc { color:#6b7280; }

/* ── CTA FINAL ── */
.ab-cta { background:rgba(255,255,255,.82); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.9); border-radius:24px; padding:60px 40px; text-align:center; box-shadow:0 8px 32px rgba(0,0,0,.06); margin:0 0 80px; }
.ab-cta h3 { font-size:2rem; font-weight:800; color:#111827; letter-spacing:-.5px; margin-bottom:14px; margin-top:0; }
.ab-cta h3 .ab-grad { background:linear-gradient(135deg,#00c6ff,#ff7ad9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.ab-cta p { font-size:1.05rem; color:#64748b; max-width:520px; margin:0 auto 32px; line-height:1.7; }

/* Section divider */
.ab-section-sep { display:flex; align-items:center; gap:16px; margin:0; }
.ab-section-sep::before,.ab-section-sep::after { content:''; flex:1; height:1px; background:rgba(229,231,235,.6); }
.ab-section-sep span { font-size:20px; color:rgba(229,231,235,.8); }

/* ── TEAM SECTION ── */
.ab-tm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin: 32px 0 36px; }
.ab-tm-stat { background: rgba(255,255,255,0.85); border: 1px solid rgba(229,231,235,0.9); border-radius: 14px; padding: 18px 12px; text-align: center; }
.ab-tm-stat-n { font-size: 26px; font-weight: 800; color: #111827; line-height: 1; margin-bottom: 5px; }
.ab-tm-stat-l { font-size: 11px; color: #6b7280; font-weight: 600; }

.ab-tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.ab-tm-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 18px; padding: 28px 16px 22px; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.ab-tm-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.ab-tm-card--founder { border-color: #bfdbfe; background: linear-gradient(160deg, #f0f9ff, #fff); }

.ab-tm-photo-wrap { position: relative; display: inline-block; margin-bottom: 14px; }
.ab-tm-photo { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; border: 2px solid #e5e7eb; display: block; }
.ab-tm-photo--founder { border-color: #93c5fd; }
.ab-tm-badge { position: absolute; bottom: 1px; right: -4px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

.ab-tm-name { font-size: 15px; font-weight: 800; color: #111827; margin: 0 0 6px; }
.ab-tm-role { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 50px; margin-bottom: 10px; }
.ab-tm-bio { font-size: 12.5px; color: #6b7280; line-height: 1.6; margin: 0 0 12px; }
.ab-tm-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.ab-tm-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }

.ab-tm-footer { margin-top: 32px; padding: 18px 24px; background: rgba(255,255,255,0.7); border: 1px solid #e5e7eb; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.ab-tm-footer p { font-size: 14px; color: #6b7280; margin: 0; line-height: 1.7; }
.ab-tm-footer p strong { color: #111827; }

@media (max-width: 600px) {
  .ab-tm-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ab-tm-stats { grid-template-columns: repeat(3, 1fr); }
  .ab-tm-card { padding: 20px 12px 16px; }
}
@media (max-width: 360px) { .ab-tm-grid { grid-template-columns: 1fr; } }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .ab-hero h1 { font-size: 42px; }
  .ab-hero p { font-size: 20px; }
  .ab-section h2 { font-size: 36px; }
  .ab-section h3 { font-size: 24px; }
  .ab-founder-img-wrap { width: 320px; margin-left: 30px; }
}
@media (max-width: 768px) {
  .ab-hero { padding: 120px 18px 100px; clip-path: none; }
  .ab-hero h1 { font-size: 32px; line-height: 1.25; }
  .ab-hero p { font-size: 17px; }
  .ab-container, .ab-container-wide { padding-left: 18px !important; padding-right: 18px !important; }
  .ab-section { padding: 60px 0; }
  .ab-section h2 { font-size: 28px; }
  .ab-section h3 { font-size: 22px; }
  .ab-section p { font-size: 16px; text-align: left; }
  .ab-founder-img-wrap { float: none !important; width: 100%; max-width: 100%; margin: 26px 0; display: block; }
  .ab-feature-list { grid-template-columns: 1fr; }
  .ab-quote-box { padding: 26px; font-size: 18px; }
  .ab-cta { padding: 56px 22px; margin-top: 60px; }
  .ab-btn-grad { padding: 16px 34px; font-size: 16px; }
  .ab-founder-img-badge { font-size: 11px; padding: 7px 16px; }
}
@media (max-width: 480px) {
  .ab-container, .ab-container-wide { padding-left: 16px !important; padding-right: 16px !important; }
  .ab-hero h1 { font-size: 26px; }
  .ab-hero p { font-size: 15px; }
  .ab-section h2 { font-size: 24px; }
  .ab-section h3 { font-size: 20px; }
  .ab-stat-num { font-size: 38px; }
  .ab-policy-card { padding: 22px; }
}


/* ══════════════════════════════════════════════
   BOOK STORE PAGE STYLES (SAFE INTEGRATION)
══════════════════════════════════════════════ */

/* ── HERO ── */
.bs-hero { padding: 51px 0px 0px 0px; background: #1a1410; position: relative; overflow: hidden; min-height: 560px; display: flex; align-items: center; font-family: 'inter', sans-serif; }
.bs-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 900px 600px at 10% 60%, rgba(196,84,26,.18) 0%, transparent 65%), radial-gradient(ellipse 600px 400px at 85% 20%, rgba(212,160,23,.12) 0%, transparent 60%), radial-gradient(ellipse 500px 500px at 60% 90%, rgba(74,124,89,.10) 0%, transparent 60%); pointer-events: none; }
.bs-hero::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 42%; background: rgba(255,255,255,.025); clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%); pointer-events: none; }
.bs-hero-inner { max-width: 1450px; margin: 0 auto; padding: 120px 40px 80px; display: grid; grid-template-columns: 1fr 480px; gap: 60px; align-items: center; position: relative; z-index: 2; width: 100%; }

.bs-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(212,160,23,.15); border: 1px solid rgba(212,160,23,.3); color: #d4a017; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; padding: 6px 14px; border-radius: 50px; margin-bottom: 24px; }
.bs-hero-h1 { font-family: 'Fraunces', serif; font-size: clamp(2.4rem, 4.5vw, 3.8rem); font-weight: 800; color: #fff; line-height: 1.08; margin-bottom: 20px; letter-spacing: -.02em; }
.bs-hero-h1 em { font-style: italic; font-weight: 300; color: rgba(255,255,255,.65); }
.bs-hero-desc { font-size: 17px; color: rgba(255,255,255,.55); line-height: 1.75; max-width: 500px; margin-bottom: 36px; }

.bs-hero-stats { display: flex; gap: 32px; margin-bottom: 40px; flex-wrap: wrap; }
.bs-h-stat { text-align: left; }
.bs-h-stat .bs-num { font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 800; color: #fff; display: block; line-height: 1; }
.bs-h-stat .bs-lbl { font-size: 11px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; display: block; }

.bs-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.bs-btn-primary { display: inline-flex; align-items: center; gap: 9px; background: #c4541a; color: #fff; padding: 14px 28px; border-radius: 50px; font-size: 15px; font-weight: 600; text-decoration: none; transition: all .25s; border: 2px solid #c4541a; white-space: nowrap; }
.bs-btn-primary:hover { background: #b04a14; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(196,84,26,.4); color: #fff; }
.bs-btn-secondary { display: inline-flex; align-items: center; gap: 9px; background: transparent; color: rgba(255,255,255,.7); padding: 14px 28px; border-radius: 50px; font-size: 15px; font-weight: 500; text-decoration: none; border: 1.5px solid rgba(255,255,255,.2); transition: all .25s; white-space: nowrap; }
.bs-btn-secondary:hover { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.4); }

.bs-hero-right { position: relative; height: 400px; display: flex; align-items: center; justify-content: center; }
.bs-book-showcase { position: relative; width: 100%; height: 100%; }
.bs-showcase-img { position: absolute; border-radius: 10px; box-shadow: 0 30px 70px rgba(0,0,0,.5); transition: all .9s cubic-bezier(.25,.8,.25,1); object-fit: cover; }
.bs-pos-main { width: 180px; height: 250px; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-3deg); z-index: 5; opacity: 1; }
.bs-pos-left { width: 140px; height: 195px; left: 20%; top: 50%; transform: translate(-50%,-50%) rotate(-10deg); z-index: 3; opacity: .7; }
.bs-pos-right { width: 140px; height: 195px; left: 80%; top: 50%; transform: translate(-50%,-50%) rotate(8deg); z-index: 3; opacity: .7; }
.bs-pos-back { width: 120px; height: 168px; left: 65%; top: 30%; transform: translate(-50%,-50%) rotate(15deg); z-index: 1; opacity: .4; }
.bs-pos-back2 { width: 110px; height: 154px; left: 35%; top: 75%; transform: translate(-50%,-50%) rotate(-15deg); z-index: 1; opacity: .4; }

/* ── SEARCH BAR ── */
.bs-search-bar { background: #ffffff; border-bottom: 1px solid #e2d9cc; position: sticky; top: 80px; z-index: 300; box-shadow: 0 4px 20px rgba(26,20,16,.06); font-family: 'DM Sans', sans-serif;}
.bs-search-inner { max-width: 1450px; margin: 0 auto; padding: 14px 40px; display: flex; align-items: center; gap: 16px; }
.bs-search-wrap { flex: 1; position: relative; max-width: 560px; }
.bs-search-wrap i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #7a6e62; font-size: 15px; pointer-events: none; }
.bs-search-wrap input { width: 100%; padding: 12px 20px 12px 48px; border: 1.5px solid #e2d9cc; border-radius: 50px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: #1a1410; background: #faf7f2; outline: none; transition: all .2s; }
.bs-search-wrap input::placeholder { color: #7a6e62; }
.bs-search-wrap input:focus { border-color: #c4541a; background: #fff; box-shadow: 0 0 0 3px rgba(196,84,26,.1); }

.bs-filter-pills { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.bs-filter-pills::-webkit-scrollbar { display: none; }
.bs-fp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 50px; border: 1.5px solid #e2d9cc; font-size: 13px; font-weight: 500; color: #7a6e62; background: #faf7f2; cursor: pointer; white-space: nowrap; transition: all .2s; text-decoration: none; }
.bs-fp-pill:hover { border-color: #1a1410; color: #1a1410; }
.bs-fp-pill.active { background: #1a1410; color: #fff; border-color: #1a1410; }

.bs-sort-select { padding: 9px 14px; border: 1.5px solid #e2d9cc; border-radius: 50px; font-family: 'DM Sans', sans-serif; font-size: 13px; color: #1a1410; background: #faf7f2; cursor: pointer; outline: none; appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%237a6e62' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }

/* ── LAYOUT ── */
.bs-layout { max-width: 1450px; margin: 0 auto; padding: 36px 0px 40px; display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; font-family: 'DM Sans', sans-serif; background: #ffffff; }

/* ── SIDEBAR ── */
.bs-sidebar { position: sticky; top: 150px; background: #ffffff; border: 1px solid #e2d9cc; border-radius: 14px; overflow: hidden; }
.bs-sidebar-section { padding: 20px 20px 14px; border-bottom: 1px solid #e2d9cc; }
.bs-sidebar-section:last-child { border-bottom: none; }
.bs-ss-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; color: #b0a899; margin-bottom: 12px; display: block; }
.bs-sf-link { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 9px; font-size: 14px; color: #7a6e62; text-decoration: none; cursor: pointer; transition: all .18s; margin-bottom: 2px; font-weight: 500; }
.bs-sf-link:hover { background: #f0ebe0; color: #1a1410; text-decoration:none; }
.bs-sf-link.active { background: #1a1410; color: #fff; }
.bs-sf-link.active .bs-sf-count { background: rgba(255,255,255,.15); color: rgba(255,255,255,.8); }
.bs-sf-left { display: flex; align-items: center; gap: 9px; }
.bs-sf-icon { font-size: 15px; }
.bs-sf-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; background: #f0ebe0; color: #7a6e62; padding: 2px 8px; border-radius: 20px; font-weight: 500; }
.bs-sidebar-ad { padding: 16px; border-top: 1px solid #e2d9cc; }

/* ── MAIN CONTENT ── */
.bs-featured-row { margin-bottom: 40px; }
.bs-section-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.bs-section-label h2 { font-family: 'Fraunces', serif; font-size: 1.35rem; font-weight: 700; color: #1a1410; display: flex; align-items: center; gap: 10px; margin:0;}
.bs-section-label a { font-size: 13px; color: #c4541a; text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.bs-section-label a:hover { text-decoration: underline; }
.bs-featured-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.bs-results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.bs-results-title { font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 700; color: #1a1410; }
.bs-results-count { font-size: 13px; color: #7a6e62; background: #f0ebe0; padding: 5px 14px; border-radius: 20px; font-weight: 500; }

/* ── BOOK CARDS ── */
.bs-book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; transition: opacity .3s; }
.bs-book-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #ffffff; border: 1px solid #e2d9cc; border-radius: 14px; overflow: hidden; transition: all .28s cubic-bezier(.25,.8,.25,1); }
.bs-book-card:hover { transform: translateY(-6px); box-shadow: 0 8px 40px rgba(26,20,16,.14); border-color: transparent; text-decoration:none; color:inherit; }

.bs-bc-cover { position: relative; aspect-ratio: 2/3; background: #f0ebe0; overflow: hidden; }
.bs-bc-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.25,.8,.25,1); display: block; }
.bs-book-card:hover .bs-bc-cover img { transform: scale(1.08); }

.bs-bc-overlay { position: absolute; inset: 0; background: rgba(26,20,16,.55); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s; backdrop-filter: blur(2px); }
.bs-book-card:hover .bs-bc-overlay { opacity: 1; }
.bs-bc-inner { text-align: center; }
.bs-overlay-btn { display: inline-block; background: #fff; color: #1a1410; padding: 9px 20px; border-radius: 50px; font-size: 13px; font-weight: 700; transform: translateY(10px); transition: transform .3s .05s; }
.bs-book-card:hover .bs-overlay-btn { transform: translateY(0); }

.bs-bc-featured { position: absolute; top: 10px; left: 10px; z-index: 3; }
.bs-bc-featured span { background: #d4a017; color: #1a1410; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: .5px; }
.bs-bc-price { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.95); color: #1a1410; font-family: 'Fraunces', serif; font-size: 13px; font-weight: 800; padding: 4px 12px; border-radius: 20px; z-index: 3; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.bs-bc-price.free { background: #4a7c59; color: #fff; }
.bs-bc-price.view { background: #f0ebe0; color: #7a6e62; }

.bs-bc-body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.bs-bc-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bs-bc-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #c4541a; }
.bs-bc-age { font-size: 10px; background: rgba(74,124,89,.1); color: #4a7c59; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.bs-bc-title { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; color: #1a1410; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; margin:0;}
.bs-bc-author { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 8px; border-top: 1px solid #e2d9cc; }
.bs-bc-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1.5px solid #e2d9cc; }
.bs-bc-author span { font-size: 12px; color: #7a6e62; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-bc-formats { display: flex; gap: 5px; margin-top: 4px; }
.bs-fmt-dot { font-size: 13px; opacity: .7; }

/* ── EXTRAS ── */
.bs-empty-state { grid-column: 1 / -1; text-align: center; padding: 80px 30px; }
.bs-empty-state .bs-es-icon { font-size: 60px; margin-bottom: 16px; display: block; }
.bs-empty-state h3 { font-family: 'Fraunces', serif; font-size: 1.4rem; color: #1a1410; margin-bottom: 8px; }
.bs-empty-state p  { font-size: 15px; color: #7a6e62; }

#bs-loader { display: none; grid-column: 1 / -1; text-align: center; padding: 60px; }
.bs-spinner-ring { width: 36px; height: 36px; border: 3px solid #f0ebe0; border-top-color: #c4541a; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; }

.bs-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 48px; flex-wrap: wrap; }
.bs-pg-btn { min-width: 40px; height: 40px; padding: 0 14px; border: 1.5px solid #e2d9cc; border-radius: 10px; background: #ffffff; color: #1a1410; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .18s; display: flex; align-items: center; justify-content: center; gap: 5px; }
.bs-pg-btn:hover { border-color: #c4541a; color: #c4541a; }
.bs-pg-btn.active { background: #1a1410; color: #fff; border-color: #1a1410; }

.bs-seo-block { background: #ffffff; border: 1px solid #e2d9cc; border-radius: 14px; padding: 36px 40px; margin-top: 48px; }
.bs-seo-block h2 { font-family: 'Fraunces', serif; font-size: 1.2rem; color: #1a1410; margin-bottom: 14px; }
.bs-seo-block p { font-size: 14px; color: #7a6e62; line-height: 1.8; margin-bottom: 12px; }
.bs-seo-block p:last-child { margin-bottom: 0; }

.bs-promo-strip { background: linear-gradient(90deg, #c4541a, #e8682a); padding: 14px 40px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; text-align: center; font-family: 'DM Sans', sans-serif;}
.bs-promo-strip span { color: rgba(255,255,255,.85); font-size: 14px; }
.bs-promo-strip strong { color: #fff; }
.bs-promo-strip a { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35); color: #fff; padding: 6px 18px; border-radius: 50px; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .2s; white-space: nowrap; }
.bs-promo-strip a:hover { background: rgba(255,255,255,.25); }

.bs-tag-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.bs-tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border: 1.5px solid #e2d9cc; border-radius: 50px; font-size: 13px; font-weight: 500; color: #7a6e62; background: #ffffff; cursor: pointer; transition: all .18s; text-decoration: none; }
.bs-tag-chip:hover { border-color: #1a1410; color: #1a1410; background: #f0ebe0; }
.bs-tag-chip.active { background: #1a1410; color: #fff; border-color: #1a1410; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
    .bs-layout { grid-template-columns: 220px 1fr; padding: 28px 24px 60px; }
    .bs-featured-grid { grid-template-columns: repeat(3, 1fr); }
    .bs-hero-inner { padding: 80px 24px 60px; gap: 40px; }
}
@media (max-width: 860px) {
    .bs-layout { grid-template-columns: 1fr; padding: 20px 16px 60px; }
    .bs-hero-inner { grid-template-columns: 1fr; }
    .bs-hero-right { display: none; }
    .bs-hero { min-height: auto; }
    .bs-hero-inner { padding: 90px 20px 50px; }
    .bs-search-inner { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
    .bs-search-wrap { max-width: 100%; width: 100%; }
    .bs-sidebar { position: static; border-radius: 14px; overflow-x: auto; }
    .bs-sidebar-section { display: flex; flex-direction: row; align-items: center; gap: 6px; border: none; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; }
    .bs-sidebar-section::-webkit-scrollbar { display: none; }
    .bs-ss-label { display: none; }
    .bs-sf-link { padding: 7px 14px; border-radius: 50px; border: 1.5px solid #e2d9cc; white-space: nowrap; background: #faf7f2; }
    .bs-sf-link:hover { background: #f0ebe0; }
    .bs-sf-link.active { background: #1a1410; }
    .bs-sf-count { display: none; }
    .bs-sidebar-ad { display: none; }
    .bs-featured-grid { grid-template-columns: repeat(2, 1fr); }
    .bs-book-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .bs-promo-strip { padding: 12px 16px; }
    .bs-seo-block { padding: 24px 20px; }
}
@media (max-width: 480px) {
    .bs-hero-h1 { font-size: 2rem; }
    .bs-hero-stats { gap: 20px; }
    .bs-book-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .bs-featured-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .bs-bc-body { padding: 10px; }
    .bs-bc-title { font-size: 13px; }
}