/* =========================================================
   Wealth & Beyond — Modern design layer (2026 refresh)
   Loaded after style.css on every page. Remove the <link> to revert.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  --wb-brand: #8f5333;
  --wb-brand-dark: #6b3c23;
  --wb-gold: #d9a15b;
  --wb-ink: #1d1b19;
  --wb-cream: #faf6f1;
  --wb-radius: 18px;
  --wb-shadow-lg: 0 24px 50px -18px rgba(60, 35, 20, .35);
  --wb-ease: cubic-bezier(.22, .61, .36, 1);
}

html { scroll-behavior: smooth; }
body { color: var(--wb-ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, .display-4, .display-5, .display-6 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  letter-spacing: -.02em;
}
::selection { background: var(--wb-brand); color: #fff; }

/* Scroll progress bar */
.wb-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--wb-brand), var(--wb-gold));
  z-index: 99999; pointer-events: none;
}

/* Navbar: frosted glass when sticky */
.navbar { transition: background .4s var(--wb-ease), box-shadow .4s var(--wb-ease); }
.navbar.sticky-top {
  background: rgba(255, 255, 255, .85) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 6px 24px -12px rgba(0, 0, 0, .18) !important;
}
.navbar .dropdown-menu { border: 0; border-radius: 14px; box-shadow: var(--wb-shadow-lg); padding: .5rem; }
.navbar .dropdown-menu .dropdown-item { border-radius: 10px; transition: background .2s, padding-left .2s, color .2s; }
.navbar .dropdown-menu .dropdown-item:hover { background: var(--wb-cream); color: var(--wb-brand); padding-left: 1.4rem; }

/* Buttons with shine sweep */
.btn { transition: transform .25s var(--wb-ease), box-shadow .25s var(--wb-ease), background .25s; }
.btn.btn-primary {
  position: relative; overflow: hidden; border: 0;
  background: linear-gradient(135deg, var(--wb-brand) 0%, #b06a42 100%) !important;
  box-shadow: 0 8px 20px -8px rgba(143, 83, 51, .6);
}
.btn.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .7s var(--wb-ease); pointer-events: none;
}
.btn.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(143, 83, 51, .7); color: #fff; }
.btn.btn-primary:hover::after { left: 140%; }
.btn-sm-square.rounded-circle:hover, .btn-md-square.rounded-circle:hover { transform: translateY(-3px) rotate(-6deg); }

/* Page headers */
.bg-breadcrumb, .page-header { position: relative; overflow: hidden; }
.bg-breadcrumb h1, .bg-breadcrumb h3, .page-header h1 { animation: wbUp .9s var(--wb-ease) both; }
.bg-breadcrumb .breadcrumb, .page-header .breadcrumb, .page-header p { animation: wbUp .9s .15s var(--wb-ease) both; }

/* Cards: rounded, lift on hover */
.service-item, .feature-item, .blog-item, .team-item, .testimonial-card,
.contact-add-item, .card, .faq-section .accordion-item {
  border-radius: var(--wb-radius) !important;
  transition: transform .45s var(--wb-ease), box-shadow .45s var(--wb-ease);
}
.service-item:hover, .feature-item:hover, .blog-item:hover, .team-item:hover,
.contact-add-item:hover, .card:hover {
  transform: translateY(-8px);
  box-shadow: var(--wb-shadow-lg) !important;
}
.service-item, .blog-item, .card { overflow: hidden; }

/* Image zoom on hover */
.blog-img, .service-img { overflow: hidden; }
.blog-img img, .blog-item img { object-position: center 20%; }
.blog-img img, .service-img img, .card-img-top { transition: transform .8s var(--wb-ease); }
.blog-item:hover .blog-img img, .service-item:hover .service-img img, .card:hover .card-img-top { transform: scale(1.07); }

/* Content images */
img.rounded, img.shadow, .service-detail-img { border-radius: var(--wb-radius) !important; }
img.shadow { box-shadow: var(--wb-shadow-lg) !important; }
.wb-tilt { transition: transform .5s var(--wb-ease); }

/* Icons flip on card hover */
.feature-icon, .service-icon { transition: transform .6s var(--wb-ease); }
.feature-item:hover .feature-icon, .service-item:hover .service-icon { transform: rotateY(180deg); }

/* Soft warm alternate background */
.bg-light { background-color: var(--wb-cream) !important; }

/* Forms */
.form-control, .form-select { border-radius: 12px; border: 1px solid #e6ddd4; transition: border-color .25s, box-shadow .25s; }
.form-control:focus, .form-select:focus { border-color: var(--wb-brand); box-shadow: 0 0 0 4px rgba(143, 83, 51, .12); }

/* Accordion */
.accordion-button:not(.collapsed) { background: var(--wb-cream); color: var(--wb-brand); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 4px rgba(143, 83, 51, .12); }

/* Footer */
.footer .footer-item a { transition: color .25s, padding-left .25s; }
.footer .footer-item a:hover { padding-left: 6px; }

/* Back-to-top & WhatsApp */
.back-to-top { transition: transform .3s var(--wb-ease); }
.back-to-top:hover { transform: translateY(-4px); }
.whatsapp-float { animation: wbPulse 2.4s infinite; border-radius: 50%; }
@keyframes wbPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Scroll reveal (classes added by js/modern.js) */
.wb-reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--wb-ease), transform .9s var(--wb-ease); }
.wb-reveal.wb-left { transform: translateX(-40px); }
.wb-reveal.wb-right { transform: translateX(40px); }
.wb-reveal.wb-zoom { transform: scale(.94); }
.wb-reveal.wb-in { opacity: 1; transform: none; }

@media (max-width: 767.98px) {
  .service-item:hover, .feature-item:hover, .blog-item:hover, .card:hover { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .wb-reveal { opacity: 1; transform: none; }
}

/* ---------- Achievement (Finance Outlook) ---------- */
.wb-achievement { background: radial-gradient(1200px 500px at 85% 10%, rgba(217,161,91,.18), transparent 60%), linear-gradient(180deg, #fff, var(--wb-cream)); }
.wb-feature-card { border-radius: 22px; overflow: hidden; box-shadow: var(--wb-shadow-lg); transition: transform .5s var(--wb-ease), box-shadow .5s var(--wb-ease); position: relative; }
.wb-feature-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(217,161,91,.55); pointer-events: none; }
.wb-feature-card:hover { transform: translateY(-6px) rotate(-.6deg); }
.wb-feature-card img { display: block; width: 100%; height: auto; }
.wb-badge { display: inline-flex; align-items: center; padding: .45rem 1rem; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--wb-brand-dark); background: rgba(217,161,91,.18); }
.wb-gold-text { background: linear-gradient(90deg, var(--wb-brand), var(--wb-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wb-pill { height: 100%; display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; padding: .9rem .5rem; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px -10px rgba(60,35,20,.3); font-size: .85rem; font-weight: 600; }
.wb-pill i { color: var(--wb-brand); font-size: 1.2rem; }

/* ---------- Sessions video gallery ---------- */
.wb-video-card { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 9 / 16; background: #111; cursor: pointer; box-shadow: var(--wb-shadow-lg); transition: transform .45s var(--wb-ease), box-shadow .45s var(--wb-ease); }
.wb-video-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--wb-ease), filter .4s; }
.wb-video-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(15,9,6,.85)); }
.wb-video-card:hover, .wb-video-card:focus-visible { transform: translateY(-8px); outline: none; }
.wb-video-card:focus-visible { box-shadow: 0 0 0 4px rgba(143,83,51,.45), var(--wb-shadow-lg); }
.wb-video-card:hover img { transform: scale(1.07); }
.wb-play { position: absolute; z-index: 2; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(143,83,51,.9); box-shadow: 0 0 0 0 rgba(217,161,91,.6); animation: wbPlayPulse 2.2s infinite; transition: transform .3s var(--wb-ease); }
.wb-play i { margin-left: 4px; }
.wb-video-card:hover .wb-play { transform: scale(1.12); }
@keyframes wbPlayPulse { 0% { box-shadow: 0 0 0 0 rgba(217,161,91,.6); } 70% { box-shadow: 0 0 0 18px rgba(217,161,91,0); } 100% { box-shadow: 0 0 0 0 rgba(217,161,91,0); } }
.wb-video-meta { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 1rem; text-align: left; color: #fff; display: flex; flex-direction: column; gap: .35rem; }
.wb-video-meta strong { font-family: 'Plus Jakarta Sans', sans-serif; font-size: .98rem; line-height: 1.3; }
.wb-tag { align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; background: var(--wb-gold); color: #2a1a10; }

.wb-video-modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px; background: rgba(10,6,4,.88); backdrop-filter: blur(6px); animation: wbFade .3s ease; }
.wb-video-modal[hidden] { display: none; }
.wb-video-box { position: relative; width: min(420px, 100%); animation: wbUp .4s var(--wb-ease); }
.wb-video-box video { display: block; width: 100%; max-height: 80vh; border-radius: 16px; background: #000; }
.wb-video-title { color: #fff; text-align: center; margin-top: .75rem; font-weight: 600; }
.wb-video-close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; font-size: 1.6rem; line-height: 1; color: #fff; background: rgba(255,255,255,.15); cursor: pointer; }
.wb-video-close:hover { background: var(--wb-brand); }
@keyframes wbFade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 575.98px) { .wb-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; } .wb-video-meta strong { font-size: .85rem; } }

/* ================= Light theme ================= */
/* Inner-page banners: lighter warm tint instead of 70% black (homepage hero untouched) */
.bg-breadcrumb {
  background: linear-gradient(180deg, rgba(70, 40, 22, .35) 0%, rgba(70, 40, 22, .5) 100%), url(../img/carousel-3.jpg) center/cover no-repeat !important;
}
.bg-breadcrumb h1, .bg-breadcrumb h3, .bg-breadcrumb .breadcrumb-item, .bg-breadcrumb .breadcrumb-item a { text-shadow: 0 2px 14px rgba(0,0,0,.35); }

/* Footer + copyright: light cream */
.footer {
  background: linear-gradient(180deg, #fbf7f2 0%, #f3ebe2 100%) !important;
  border-top: 1px solid #eadfd3;
}
.footer .text-white, .footer h4, .footer h5, .footer h6 { color: var(--wb-ink) !important; }
.footer .text-secondary, .footer .footer-item p, .footer .footer-item a, .footer .small, .footer .text-body { color: #5f564f !important; }
.footer .footer-item a:hover { color: var(--wb-brand) !important; }
.footer .fas.fa-angle-right { color: var(--wb-brand); }
.footer .btn-sm-square .text-white, .footer .btn .text-white { color: #fff !important; }
.copyright { background: #efe5da !important; border-top: 1px solid #e3d6c8; }
.copyright, .copyright .text-white, .copyright .text-light, .copyright a, .copyright span, .copyright p { color: #4a413b !important; }
.copyright a:hover { color: var(--wb-brand) !important; }

/* Session video cards: softer, lighter caption fade */
.wb-video-card { background: #f3ebe2; }
.wb-video-card::after { background: linear-gradient(180deg, transparent 55%, rgba(40, 24, 14, .7)); }
.wb-video-modal { background: rgba(250, 246, 241, .94); }
.wb-video-title { color: var(--wb-ink); }
.wb-video-close { color: var(--wb-ink); background: rgba(0,0,0,.08); }
.wb-video-close:hover { color: #fff; }
.bg-breadcrumb .breadcrumb-item.active, .bg-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #ffe2b8 !important; }