/* =====================================================================
   ENHANCE.CSS — Additive layer only.
   Does NOT modify or override style.css / stylesheet.css / home.css.
   Adds: new brand palette, page banners/heroes, scroll-reveal animation,
   sticky-header shrink effect, cursor-reactive glow, magnetic buttons,
   3D tilt cards, ripple clicks, and full micro-interaction system.
   Safe to remove at any time without breaking existing layout.
   ===================================================================== */

:root{
  /* ---- Brand palette ------------------------------------------------ */
  --tfw-primary:  #AF0305;   /* Primary red        */
  --tfw-maroon:   #75060D;   /* Dark maroon red     */
  --tfw-muted:    #A1494B;   /* Muted red           */
  --tfw-pink:     #FDE8E8;   /* Light pink highlight*/
  --tfw-white:    #FFFFFF;   /* White               */
  --tfw-gold:     #FFC927;   /* Golden yellow (eye) */

  /* ---- Back-compat aliases (existing rules in this file use these) -- */
  --tfw-navy:   var(--tfw-maroon);
  --tfw-navy-2: var(--tfw-primary);
  --tfw-blue:   var(--tfw-gold);
  --tfw-blue-2: #FFDA6B;
  --tfw-ease: cubic-bezier(.22,.9,.32,1);
  --tfw-ease-bounce: cubic-bezier(.34,1.56,.64,1);

  /* ---- Global theme-token overrides ---------------------------------
     style.css / stylesheet.css / home.css read these custom properties
     (--gold, --gold-light, --accent, --accent-gradient, --dark, --gray,
     --light, --card-shadow, --hover-shadow). Re-declaring them here,
     after the base stylesheets load, re-themes the ENTIRE site to the
     new palette without editing a single line of the base CSS files. */
  --gold: var(--tfw-primary);
  --gold-light: var(--tfw-gold);
  --dark: var(--tfw-maroon);
  --gray: var(--tfw-muted);
  --light: var(--tfw-pink);
  --accent: var(--tfw-primary);
  --accent-gradient: linear-gradient(135deg, var(--tfw-maroon) 0%, var(--tfw-primary) 55%, var(--tfw-gold) 100%);
  --card-shadow: 0 12px 30px rgba(175,3,5,.08);
  --hover-shadow: 0 20px 40px rgba(175,3,5,.16);
}

/* Base page background/text tuned to the new warm palette */
body{ background-color: var(--tfw-white); }
::selection{ background: var(--tfw-gold); color: var(--tfw-maroon); }

/* Re-theme the site's existing blue utility classes (used across the
   webinar/whitepaper/case-study detail templates) to the new palette,
   so those pages update automatically with zero markup changes. */
.text-blue{ color: var(--tfw-primary) !important; transition: color .25s ease; }
.text-blue:hover{ color: var(--tfw-maroon) !important; }
.btn-blue{
  background: var(--accent-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(175,3,5,.22);
}
.btn-blue:hover{
  box-shadow: 0 16px 30px rgba(175,3,5,.32);
  color: #fff !important;
}
.bg-blue{ background: var(--accent-gradient) !important; }

/* Detail-page hero image + title: gentle fade/slide load-in, and a
   soft hover lift so single hero images feel alive too */
.container > .row.mb-5:first-of-type h1.display-6,
.container > .row.mb-5:first-of-type .breadcrumb{
  animation: tfwBannerIn .6s var(--tfw-ease) both;
}
.container > .row.mb-5:first-of-type img.img-fluid{
  animation: tfwBannerIn .7s var(--tfw-ease) .1s both;
  border-radius: 1rem;
  transition: transform .5s var(--tfw-ease), box-shadow .5s var(--tfw-ease);
  box-shadow: 0 18px 40px -12px rgba(117,6,13,.25);
}
.container > .row.mb-5:first-of-type img.img-fluid:hover{
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 26px 50px -12px rgba(117,6,13,.32);
}

/* thin animated gradient scroll/hover accents reused everywhere below */
@keyframes tfwGradientShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* ---------------------------------------------------------------------
   1. STICKY HEADER — subtle shrink + shadow once the page scrolls
--------------------------------------------------------------------- */
.techmedia-header{
  transition: padding .35s var(--tfw-ease), box-shadow .35s var(--tfw-ease), background-color .35s ease;
}
.techmedia-header.tfw-scrolled{
  padding: 6px 0;
  box-shadow: 0 8px 24px rgba(117,6,13,.08);
  background-color: #ffffff;
}
.techmedia-header .navbar-brand img{
  transition: transform .35s var(--tfw-ease);
}
.techmedia-header.tfw-scrolled .navbar-brand img{
  transform: scale(.92);
}

/* animated underline on nav links (only adds ::after if none exists) */
.techmedia-header .nav-link{
  padding-bottom: 4px;
}
.techmedia-header .nav-link::after{
  content:"";
  position:absolute;
  left:50%; right:50%; bottom:-2px;
  height:2px;
  background: linear-gradient(90deg,var(--tfw-blue),var(--tfw-navy));
  border-radius:2px;
  transition: left .3s var(--tfw-ease), right .3s var(--tfw-ease);
}
.techmedia-header .nav-link:hover::after,
.techmedia-header .nav-link.active::after{
  left:0; right:0;
}

/* ---------------------------------------------------------------------
   2. PAGE BANNER / HERO — used on Webinars, Whitepapers, Blogs,
      Case Studies, Search Results. Background is a gradient so it
      always renders even before a real photo is dropped in; an
      optional image layers on top (see --tfw-banner-img).
--------------------------------------------------------------------- */
.page-banner{
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 4.5rem;
  margin-bottom: 0;
  isolation: isolate;
  background:
    linear-gradient(120deg, rgba(117,6,13,.94) 0%, rgba(175,3,5,.90) 45%, rgba(255,201,39,.85) 100%),
    var(--tfw-banner-img, none) center/cover no-repeat,
    #75060D;
  color:#fff;
}

/* decorative animated blobs — pure CSS, no image dependency */
.page-banner::before,
.page-banner::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter: blur(6px);
  opacity:.35;
  z-index:0;
  pointer-events:none;
}
.page-banner::before{
  width: 380px; height: 380px;
  right: -120px; top: -160px;
  background: radial-gradient(circle at 30% 30%, var(--tfw-blue-2), transparent 70%);
  animation: tfwFloat 9s ease-in-out infinite;
}
.page-banner::after{
  width: 260px; height: 260px;
  left: -90px; bottom: -120px;
  background: radial-gradient(circle at 60% 40%, #ffffff, transparent 70%);
  opacity: .10;
  animation: tfwFloat 11s ease-in-out infinite reverse;
}
@keyframes tfwFloat{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-18px,22px) scale(1.08); }
}

.page-banner .page-banner-pattern{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.15) 1px, transparent 1.5px);
  background-size: 22px 22px;
  opacity:.25;
  z-index:0;
}

.page-banner > .container{
  position: relative;
  z-index: 1;
}

.page-banner-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#FFF1C9;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  padding:.4rem .9rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
  backdrop-filter: blur(6px);
}
.page-banner-eyebrow i{ color: var(--tfw-blue-2); }

.page-banner-title{
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  margin-bottom: .9rem;
  color:#fff;
}

.page-banner-subtitle{
  color: rgba(255,255,255,.85);
  max-width: 620px;
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}

.page-banner-breadcrumb{
  background: transparent;
  margin: 0;
  padding: 0;
}
.page-banner-breadcrumb .breadcrumb-item,
.page-banner-breadcrumb .breadcrumb-item a{
  color: rgba(255,255,255,.7);
  font-size:.9rem;
}
.page-banner-breadcrumb .breadcrumb-item a:hover{ color:#fff; }
.page-banner-breadcrumb .breadcrumb-item.active{ color:#fff; }
.page-banner-breadcrumb .breadcrumb-item + .breadcrumb-item::before{
  color: rgba(255,255,255,.5);
}

/* gentle load-in for banner content (runs once, on page load) */
.page-banner-eyebrow,
.page-banner-title,
.page-banner-subtitle,
.page-banner-breadcrumb{
  animation: tfwBannerIn .7s var(--tfw-ease) both;
}
.page-banner-title{ animation-delay: .05s; }
.page-banner-subtitle{ animation-delay: .15s; }
.page-banner-breadcrumb{ animation-delay: .22s; }
@keyframes tfwBannerIn{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}

/* wave divider at the bottom of the banner, blends into page bg */
.page-banner-wave{
  position:absolute; left:0; right:0; bottom:-1px; line-height:0; z-index:1;
}
.page-banner-wave svg{ width:100%; height:48px; display:block; }

@media (max-width: 576px){
  .page-banner{ padding: 3.75rem 0 3.25rem; text-align:center; }
  .page-banner-subtitle{ margin-left:auto; margin-right:auto; }
  .page-banner-breadcrumb{ justify-content:center; display:flex; }
}

/* per-page accent variety, same structure, different mood */
.page-banner-webinar{
  background:
    linear-gradient(120deg, rgba(117,6,13,.94) 0%, rgba(255,201,39,.82) 100%),
    var(--tfw-banner-img, none) center/cover no-repeat, #75060D;
}
.page-banner-whitepaper{
  background:
    linear-gradient(120deg, rgba(175,3,5,.95) 0%, rgba(117,6,13,.90) 55%, rgba(255,218,107,.55) 100%),
    var(--tfw-banner-img, none) center/cover no-repeat, #AF0305;
}
.page-banner-blog{
  background:
    linear-gradient(120deg, rgba(117,6,13,.92) 0%, rgba(161,73,75,.85) 60%, rgba(255,201,39,.7) 100%),
    var(--tfw-banner-img, none) center/cover no-repeat, #75060D;
}
.page-banner-case{
  background:
    linear-gradient(120deg, rgba(74,3,8,.95) 0%, rgba(117,6,13,.92) 50%, rgba(255,201,39,.6) 100%),
    var(--tfw-banner-img, none) center/cover no-repeat, #4A0308;
}
.page-banner-search{
  padding-top: 4rem;
  padding-bottom: 3.25rem;
  background:
    linear-gradient(120deg, rgba(117,6,13,.94) 0%, rgba(255,201,39,.78) 100%),
    var(--tfw-banner-img, none) center/cover no-repeat, #75060D;
}

/* ---------------------------------------------------------------------
   3. SCROLL-REVEAL — generic, applied via enhance.js to existing
      cards/sections. No markup changes required on any page.
--------------------------------------------------------------------- */
.tfw-reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s var(--tfw-ease), transform .65s var(--tfw-ease);
  will-change: opacity, transform;
}
.tfw-reveal.tfw-in{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .tfw-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .page-banner-eyebrow, .page-banner-title, .page-banner-subtitle, .page-banner-breadcrumb{
    animation: none !important; opacity:1 !important; transform:none !important;
  }
  .page-banner::before, .page-banner::after{ animation:none !important; }
}

/* ---------------------------------------------------------------------
   4. LIGHT MICRO-INTERACTIONS (additive, low specificity so existing
      hover rules in style.css / stylesheet.css / home.css still win
      where they already define one)
--------------------------------------------------------------------- */
a, .btn, .btn-blue, .btn-view-all, .news-card, .card-custom{
  transition: transform .35s var(--tfw-ease), box-shadow .35s var(--tfw-ease), color .25s ease, background-color .25s ease;
}

.tfw-pulse-on-hover:hover{
  animation: tfwPulse .6s ease;
}
@keyframes tfwPulse{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.04); }
  100%{ transform: scale(1); }
}

/* loading skeleton shimmer, ready if a page needs it later */
.tfw-skeleton{
  background: linear-gradient(90deg,#FDF0F0 25%,#F6D9D9 37%,#FDF0F0 63%);
  background-size: 400% 100%;
  animation: tfwShimmer 1.4s ease infinite;
  border-radius: .5rem;
}
@keyframes tfwShimmer{
  0%{ background-position: 100% 50%; }
  100%{ background-position: 0 50%; }
}

/* back-to-top button already exists (#scrollup) — just smooth its entrance */
/* =====================================================================
   6. TOP PROGRESS BAR — thin, live reading-progress indicator
--------------------------------------------------------------------- */
#tfw-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-light,#FFC927), var(--gold,#75060D));
  z-index: 2000;
  transition: width .12s linear;
  border-radius: 0 3px 3px 0;
}

/* =====================================================================
   7. HOMEPAGE — KINETIC HERO
--------------------------------------------------------------------- */
.hero-kinetic{
  position: relative;
  overflow: hidden;
  padding: 4rem 0 5rem;
  background: radial-gradient(1200px 600px at 85% -10%, rgba(255,201,39,.14), transparent 60%),
              radial-gradient(900px 500px at -5% 110%, rgba(117,6,13,.10), transparent 60%),
              #ffffff;
  isolation: isolate;
}
.hero-kinetic::before,
.hero-kinetic::after{
  content:"";
  position:absolute;
  border-radius:50%;
  z-index:-1;
  filter: blur(2px);
}
.hero-kinetic::before{
  width: 420px; height:420px; right:-140px; top:-160px;
  background: radial-gradient(circle at 35% 35%, rgba(255,201,39,.20), transparent 70%);
  animation: tfwFloat 10s ease-in-out infinite;
}
.hero-kinetic::after{
  width: 320px; height:320px; left:-120px; bottom:-140px;
  background: radial-gradient(circle at 60% 40%, rgba(117,6,13,.14), transparent 70%);
  animation: tfwFloat 13s ease-in-out infinite reverse;
}

.live-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--gold,#75060D);
  background: rgba(255,201,39,.09);
  border: 1px solid rgba(255,201,39,.25);
  padding:.45rem .9rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.live-dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--gold-light,#FFC927);
  box-shadow: 0 0 0 0 rgba(255,201,39,.6);
  animation: tfwLivePulse 1.8s ease-out infinite;
}
@keyframes tfwLivePulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,201,39,.55); }
  70%{ box-shadow: 0 0 0 9px rgba(255,201,39,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,201,39,0); }
}

.hero-kinetic h1{
  font-size: clamp(2.1rem, 4vw, 3.15rem);
  line-height: 1.12;
}
.rotate-word{
  display:inline-block;
  position: relative;
  background: var(--accent-gradient, linear-gradient(135deg,#75060D,#FFC927));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity .25s ease, transform .25s ease;
}
.rotate-word.tfw-swap{
  opacity: 0;
  transform: translateY(6px);
}

.hero-cta-row{
  display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.6rem;
}
.hero-cta-primary,
.hero-cta-secondary{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:700; font-size:.95rem;
  padding:.8rem 1.5rem;
  border-radius: 999px;
  text-decoration:none;
  transition: transform .3s var(--tfw-ease,ease), box-shadow .3s var(--tfw-ease,ease), background .3s ease;
}
.hero-cta-primary{
  color:#fff;
  background: var(--accent-gradient, linear-gradient(135deg,#75060D,#FFC927));
  box-shadow: 0 10px 24px rgba(117,6,13,.22);
}
.hero-cta-primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px rgba(117,6,13,.3); color:#fff; }
.hero-cta-secondary{
  color: var(--gold,#75060D);
  background: #fff;
  border: 1.5px solid rgba(117,6,13,.16);
}
.hero-cta-secondary:hover{ transform: translateY(-3px); border-color: var(--gold-light,#FFC927); color: var(--gold,#75060D); }

.hero-carousel-frame{
  position: relative;
  padding: 10px;
  border-radius: 1.75rem;
  background: linear-gradient(160deg, rgba(117,6,13,.10), rgba(255,201,39,.10));
  box-shadow: 0 30px 60px -20px rgba(117,6,13,.25);
}
.hero-carousel-frame::before{
  content:"";
  position:absolute; inset: -1px;
  border-radius: 1.85rem;
  padding:1px;
  background: linear-gradient(160deg, rgba(255,201,39,.55), transparent 40%, rgba(117,6,13,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

/* =====================================================================
   8. VENDOR MARQUEE — infinite scrolling logo strip (pure CSS)
--------------------------------------------------------------------- */
.marquee-section{
  padding: 2.75rem 0;
  background: var(--light,#FDE8E8);
  border-top: 1px solid rgba(117,6,13,.06);
  border-bottom: 1px solid rgba(117,6,13,.06);
}
.marquee-label{
  text-align:center;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(117,6,13,.55);
  margin-bottom: 1.4rem;
}
.marquee-viewport{
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex;
  align-items:center;
  gap: 3.5rem;
  width: max-content;
  animation: tfwMarquee 32s linear infinite;
}
.marquee-viewport:hover .marquee-track{ animation-play-state: paused; }
@keyframes tfwMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.marquee-logo{
  height: 34px;
  display:flex; align-items:center;
  filter: grayscale(1) opacity(.55);
  transition: filter .3s ease, transform .3s ease;
}
.marquee-logo:hover{ filter: grayscale(0) opacity(1); transform: translateY(-2px); }
.marquee-logo img{ height: 100%; width:auto; object-fit:contain; }
.marquee-logo-partner{
  width: 120px; height: 34px;
  background-image: url('data:image/png;base64,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');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* =====================================================================
   9. GLASS STAT CARDS (keeps existing .stats-section/.counter/.stat-item
      classes intact for footer.php's counter-animation script)
--------------------------------------------------------------------- */
.stats-section{
  background: var(--light,#FDE8E8) !important;
}
.stat-item{
  background:#fff;
  border-radius: 1.25rem;
  padding: 1.75rem 1rem;
  box-shadow: var(--card-shadow, 0 12px 30px rgba(0,0,0,.04));
  border: 1px solid rgba(117,6,13,.06);
  transition: transform .35s var(--tfw-ease,ease), box-shadow .35s var(--tfw-ease,ease);
}
.stat-item:hover{
  transform: translateY(-6px);
  box-shadow: var(--hover-shadow, 0 20px 35px rgba(0,0,0,.1));
}
.stat-number{
  background: var(--accent-gradient, linear-gradient(135deg,#75060D,#FFC927));
  -webkit-background-clip: text; background-clip:text; color:transparent;
}

/* =====================================================================
   10. TABBED CONTENT EXPLORER — replaces three stacked sections
--------------------------------------------------------------------- */
.explorer-section{ padding: 4.5rem 0 1rem; }
.explorer-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap: 1.5rem; margin-bottom: 2.25rem;
}
.explorer-head h2{ margin-bottom:.25rem; }
.explorer-tabs{
  display:inline-flex; flex-wrap:wrap; gap:.5rem;
  background: var(--light,#FDE8E8);
  padding:.4rem; border-radius: 999px;
  border: 1px solid rgba(117,6,13,.07);
}
.explorer-tab{
  border:none; background:transparent;
  padding:.6rem 1.25rem;
  border-radius: 999px;
  font-weight:700; font-size:.9rem;
  color: rgba(117,6,13,.65);
  display:inline-flex; align-items:center; gap:.5rem;
  cursor:pointer;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.explorer-tab i{ font-size:.85em; }
.explorer-tab:hover{ color: var(--gold,#75060D); }
.explorer-tab.is-active{
  background: var(--accent-gradient, linear-gradient(135deg,#75060D,#FFC927));
  color:#fff;
  box-shadow: 0 10px 20px rgba(117,6,13,.22);
}
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; animation: tfwBannerIn .5s var(--tfw-ease,ease) both; }

/* =====================================================================
   11. CTA BAND — pre-footer call to action
--------------------------------------------------------------------- */
.cta-band{
  position:relative; overflow:hidden;
  margin: 5rem 0 0;
  padding: 3.5rem 0;
  background: var(--accent-gradient, linear-gradient(135deg,#75060D,#92050A,#FFC927));
  color:#fff; text-align:center;
  isolation: isolate;
}
.cta-band::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.5px);
  background-size: 22px 22px; opacity:.4;
}
.cta-band h2{ color:#fff; font-weight:800; margin-bottom:.6rem; }
.cta-band p{ color: rgba(255,255,255,.85); max-width:560px; margin:0 auto 1.75rem; }
.cta-band .hero-cta-secondary{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.4);
  color:#fff;
  backdrop-filter: blur(6px);
}
.cta-band .hero-cta-secondary:hover{ background:#fff; color: var(--gold,#75060D); }
.cta-band .hero-cta-primary{
  background:#fff; color: var(--gold,#75060D); box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.cta-band .hero-cta-primary:hover{ color: var(--gold,#75060D); }

@media (max-width: 767px){
  .hero-kinetic{ text-align:center; padding: 3rem 0 3.5rem; }
  .hero-cta-row{ justify-content:center; }
  .explorer-head{ justify-content:center; text-align:center; }
  .explorer-tabs{ justify-content:center; width:100%; }
}
/* =====================================================================
   12. DYNAMIC / LIVE UI LAYER — cursor spotlight, magnetic buttons,
       3D tilt cards, ripple clicks, glow-on-hover, animated card
       accents. Fully additive: opt-in via classes toggled by main.js,
       falls back gracefully with no JS.
   ===================================================================== */

/* --- Cursor-reactive spotlight glow (desktop only, big surfaces) --- */
.tfw-spotlight{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.tfw-spotlight::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition: opacity .4s ease;
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
              rgba(255,201,39,.16), transparent 65%);
}
.tfw-spotlight:hover::before{ opacity:1; }

/* --- Magnetic buttons: subtle pull-toward-cursor handled by JS,
   this just gives the smoothing curve + glow ring --- */
.hero-cta-primary, .hero-cta-secondary, .btn, .btn-blue, .btn-view-all,
.explorer-tab, .badge-custom{
  transition: transform .25s var(--tfw-ease-bounce),
              box-shadow .3s var(--tfw-ease), color .25s ease,
              background-color .25s ease, border-color .25s ease;
}
.tfw-magnetic{ will-change: transform; }

/* --- 3D tilt cards (mousemove-driven rotateX/rotateY via JS) --- */
.tfw-tilt{
  transform-style: preserve-3d;
  perspective: 900px;
  transition: transform .4s var(--tfw-ease), box-shadow .4s var(--tfw-ease);
}
.tfw-tilt:hover{
  box-shadow: 0 24px 48px -12px rgba(117,6,13,.28);
  z-index: 2;
}
.tfw-tilt .card-body, .tfw-tilt img{ transform: translateZ(18px); }

/* --- Animated gradient border ring on featured cards --- */
.tfw-glow-border{
  position: relative;
  z-index: 0;
}
.tfw-glow-border::before{
  content:"";
  position:absolute; inset:-2px;
  z-index:-1;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--tfw-primary), var(--tfw-gold), var(--tfw-maroon), var(--tfw-primary));
  background-size: 300% 300%;
  opacity:0;
  transition: opacity .35s ease;
  animation: tfwGradientShift 6s linear infinite;
}
.tfw-glow-border:hover::before{ opacity:1; }

/* --- Ripple click feedback (span injected by JS on click) --- */
.tfw-ripple{ position: relative; overflow: hidden; }
.tfw-ripple-fx{
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,201,39,.45);
  pointer-events: none;
  animation: tfwRipple .6s var(--tfw-ease) forwards;
}
@keyframes tfwRipple{
  to{ transform: scale(2.6); opacity: 0; }
}

/* --- Live status / notification pulse re-themed to gold --- */
.tfw-live-pulse{
  box-shadow: 0 0 0 0 rgba(255,201,39,.6);
  animation: tfwLivePulseGold 1.8s ease-out infinite;
}
@keyframes tfwLivePulseGold{
  0%{ box-shadow: 0 0 0 0 rgba(255,201,39,.55); }
  70%{ box-shadow: 0 0 0 10px rgba(255,201,39,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,201,39,0); }
}

/* --- Card hover lift, unified across news/case/blog/webinar cards --- */
.news-card, .card-custom, .vendor-box, .blog-card, .case-card,
.webinar-card, .whitepaper-card{
  transition: transform .4s var(--tfw-ease), box-shadow .4s var(--tfw-ease),
              border-color .3s ease;
  border-color: rgba(175,3,5,.08) !important;
}
.news-card:hover, .card-custom:hover, .vendor-box:hover, .blog-card:hover,
.case-card:hover, .webinar-card:hover, .whitepaper-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--hover-shadow, 0 20px 40px rgba(175,3,5,.16));
  border-color: rgba(255,201,39,.4) !important;
}

/* --- Badges re-themed: primary red chip + gold micro-accent --- */
.badge-custom{
  background: var(--accent-gradient);
  color: #fff !important;
  border: none;
}
.badge-custom i{ color: var(--tfw-gold); }

/* --- Section title underline: animated gold sweep on scroll-in --- */
.section-title{
  position: relative;
  display: inline-block;
  padding-bottom: .5rem;
}
.section-title::after{
  content:"";
  position:absolute; left:0; bottom:0;
  height:3px; width:56px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--tfw-primary), var(--tfw-gold));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .6s var(--tfw-ease);
}
.section-title.tfw-in::after,
.tfw-reveal.tfw-in.section-title::after{ transform: scaleX(1); }

/* --- Smooth image zoom inside card thumbnails on hover --- */
.img-container{ overflow: hidden; border-radius: inherit; }
.img-container img{
  transition: transform .6s var(--tfw-ease), filter .4s ease;
}
.card-custom:hover .img-container img,
.news-card:hover .img-container img{
  transform: scale(1.08);
  filter: saturate(1.08);
}

/* --- Floating particles for hero sections (pure CSS decorative dots) - */
.hero-kinetic .tfw-particle{
  position:absolute;
  width:6px; height:6px;
  border-radius:50%;
  background: var(--tfw-gold);
  opacity:.55;
  animation: tfwParticleFloat 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes tfwParticleFloat{
  0%,100%{ transform: translateY(0) translateX(0); opacity:.35; }
  50%{ transform: translateY(-26px) translateX(10px); opacity:.8; }
}

/* --- Focus-visible states re-themed for accessibility + brand --- */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline: 2px solid var(--tfw-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Skeleton shimmer re-themed warm --- */
.tfw-skeleton{
  background: linear-gradient(90deg,#FDF0F0 25%,#F6D9D9 37%,#FDF0F0 63%);
}

@media (prefers-reduced-motion: reduce){
  .tfw-tilt, .tfw-spotlight::before, .tfw-glow-border::before,
  .hero-kinetic .tfw-particle{ animation:none !important; transition:none !important; }
}

@media (hover: none){
  /* touch devices: skip cursor-only effects, keep taps snappy */
  .tfw-spotlight::before{ display:none; }
}

/* =====================================================================
   13. MODERN SAAS COMPONENTS — glass cards, sticky CTA panels, pill
       badges, bento grids, and restyled form controls. Purely additive
       classes; existing Bootstrap classes on the same elements keep
       working underneath.
   ===================================================================== */

/* --- Glassmorphism card shell, used for sidebar CTAs / feature panels */
.tfw-glass-card{
  position: relative;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(175,3,5,.10);
  border-radius: 1.5rem;
  box-shadow: 0 20px 50px -18px rgba(117,6,13,.28);
  overflow: hidden;
}
.tfw-glass-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:5px;
  background: linear-gradient(90deg, var(--tfw-primary), var(--tfw-gold), var(--tfw-maroon));
  background-size: 200% 100%;
  animation: tfwGradientShift 5s linear infinite;
}

/* --- Sticky sidebar wrapper for detail-page CTA/download forms ----- */
.tfw-sticky-side{
  position: sticky;
  top: 96px;
  align-self: flex-start;
}
@media (max-width: 991px){
  .tfw-sticky-side{ position: static; }
}

/* --- Pill badges for topic/subtopic meta, replacing plain link text - */
.tfw-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  padding:.4rem .95rem;
  border-radius:999px;
  text-decoration:none !important;
  background: var(--tfw-pink);
  color: var(--tfw-primary) !important;
  border: 1px solid rgba(175,3,5,.14);
  transition: background .25s ease, color .25s ease, transform .25s var(--tfw-ease-bounce), box-shadow .25s ease;
}
.tfw-pill i{ color: var(--tfw-gold); }
.tfw-pill:hover{
  background: var(--accent-gradient);
  color:#fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(175,3,5,.22);
}
.tfw-pill:hover i{ color:#fff; }

/* --- Breadcrumb bar restyle: slim, sits above the hero content ----- */
.tfw-breadcrumb-bar{
  padding: .85rem 0;
  border-bottom: 1px solid rgba(175,3,5,.08);
  background: var(--tfw-pink);
}
.tfw-breadcrumb-bar .breadcrumb{ margin-bottom:0; }
.tfw-breadcrumb-bar .breadcrumb-item a{
  color: var(--tfw-muted);
  text-decoration:none;
  transition: color .2s ease;
}
.tfw-breadcrumb-bar .breadcrumb-item a:hover{ color: var(--tfw-primary); }
.tfw-breadcrumb-bar .breadcrumb-item.active{ color: var(--tfw-maroon); font-weight:600; }
.tfw-breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before{ color: var(--tfw-muted); }

/* --- Bento / masonry grid for category & listing pages ------------- */
.tfw-bento{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}
.tfw-bento .tfw-bento-item{ grid-column: span 12; }
@media (min-width: 576px){ .tfw-bento .tfw-bento-item{ grid-column: span 6; } }
@media (min-width: 992px){ .tfw-bento .tfw-bento-item{ grid-column: span 4; } }
@media (min-width: 992px){ .tfw-bento .tfw-bento-item.tfw-bento-wide{ grid-column: span 8; } }

/* --- Modern form controls: pill inputs, glowing focus ring --------- */
.tfw-modern-form .form-control,
.tfw-modern-form .form-select{
  border: 1.5px solid rgba(175,3,5,.14);
  border-radius: .85rem;
  padding: .75rem 1rem;
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.tfw-modern-form .form-control:focus,
.tfw-modern-form .form-select:focus{
  border-color: var(--tfw-primary);
  box-shadow: 0 0 0 4px rgba(255,201,39,.25);
  transform: translateY(-1px);
}
.tfw-modern-form label.form-check-label{ font-size:.85rem; color: var(--tfw-muted); }
.tfw-modern-form .form-check-input:checked{
  background-color: var(--tfw-primary);
  border-color: var(--tfw-primary);
}

/* --- Trust row under CTA forms -------------------------------------- */
.tfw-trust-row{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:.78rem; color: var(--tfw-muted);
  margin-top: .9rem;
}
.tfw-trust-row i{ color: var(--tfw-primary); }

/* --- Hero eyebrow badge (light variant, used outside dark banners) - */
.tfw-eyebrow-light{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color: var(--tfw-primary);
  background: var(--tfw-pink);
  border: 1px solid rgba(175,3,5,.18);
  padding:.4rem .9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.tfw-eyebrow-light i{ color: var(--tfw-gold); }

/* --- Premium carousel badge (home hero) restyled to gold ------------ */
.badge-premium{
  background: linear-gradient(120deg, var(--tfw-gold), #FFDA6B) !important;
  color: var(--tfw-maroon) !important;
  font-weight: 700;
  border: none;
}

/* --- Reading-time / meta chips on blog/case/post detail pages ------ */
.tfw-meta-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.85rem; color: var(--tfw-muted);
}
.tfw-meta-chip i{ color: var(--tfw-primary); }

/* --- Empty-state panel (no results) --------------------------------- */
.tfw-empty-state{
  padding: 4rem 1rem;
  text-align:center;
  border-radius: 1.5rem;
  background: var(--tfw-pink);
  border: 1px dashed rgba(175,3,5,.25);
}
.tfw-empty-state i{ font-size: 2.4rem; color: var(--tfw-primary); margin-bottom: 1rem; }

/* --- Pagination restyle -------------------------------------------- */
.pagination .page-link{
  color: var(--tfw-primary);
  border-color: rgba(175,3,5,.14);
  transition: all .25s ease;
}
.pagination .page-link:hover{
  background: var(--tfw-pink);
  color: var(--tfw-maroon);
}
.pagination .page-item.active .page-link{
  background: var(--accent-gradient);
  border-color: transparent;
}

@media (max-width: 767px){
  .tfw-bento{ gap: 1rem; }
}

/* =====================================================================
   14. PREMIUM HOME PAGE — animated mesh hero, floating stat chips,
       feature bento, glass stat cards, sliding tab indicator, and a
       richer featured-articles + CTA treatment. Additive only.
   ===================================================================== */

/* --- Animated mesh-gradient backdrop behind the hero ---------------- */
.hero-kinetic{
  background:
    radial-gradient(1100px 560px at 88% -8%, rgba(255,201,39,.16), transparent 60%),
    radial-gradient(900px 520px at -6% 108%, rgba(175,3,5,.10), transparent 60%),
    radial-gradient(700px 420px at 50% 40%, rgba(161,73,75,.08), transparent 70%),
    #ffffff;
  background-size: 160% 160%, 160% 160%, 140% 140%, auto;
  animation: tfwMeshDrift 18s ease-in-out infinite;
}
@keyframes tfwMeshDrift{
  0%,100%{ background-position: 0% 0%, 0% 0%, 50% 50%; }
  50%{ background-position: 20% 12%, -10% -8%, 55% 45%; }
}
@media (prefers-reduced-motion: reduce){ .hero-kinetic{ animation:none; } }

/* --- Floating stat chips near the hero carousel ---------------------- */
.hero-float-chip{
  position:absolute;
  display:flex; align-items:center; gap:.6rem;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(175,3,5,.10);
  border-radius: 1rem;
  padding: .65rem 1rem;
  box-shadow: 0 16px 34px -10px rgba(117,6,13,.28);
  z-index: 3;
  animation: tfwChipFloat 5s ease-in-out infinite;
}
.hero-float-chip .chip-icon{
  width: 34px; height: 34px; border-radius:.65rem;
  display:flex; align-items:center; justify-content:center;
  background: var(--accent-gradient);
  color:#fff; font-size:.9rem; flex-shrink:0;
}
.hero-float-chip .chip-num{ font-weight:800; font-size:1.05rem; color:var(--tfw-maroon); line-height:1.1; }
.hero-float-chip .chip-label{ font-size:.72rem; color:var(--tfw-muted); }
.hero-float-chip.chip-top-right{ top:-18px; right:6%; animation-delay:.3s; }
.hero-float-chip.chip-bottom-left{ bottom:-18px; left:5%; animation-delay:1.1s; }
@keyframes tfwChipFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-9px); }
}
@media (max-width: 991px){ .hero-float-chip{ display:none; } }

/* --- Scroll cue at bottom of hero ------------------------------------ */
.hero-scroll-cue{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  margin-top: 3rem;
  opacity:.6;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--tfw-muted);
}
.hero-scroll-cue .cue-dot{
  width: 22px; height: 34px;
  border: 2px solid rgba(175,3,5,.35);
  border-radius: 12px;
  position:relative;
}
.hero-scroll-cue .cue-dot::before{
  content:"";
  position:absolute; top:6px; left:50%;
  width:4px; height:8px; margin-left:-2px;
  border-radius:2px;
  background: var(--tfw-primary);
  animation: tfwCueScroll 1.8s ease-in-out infinite;
}
@keyframes tfwCueScroll{
  0%{ opacity:1; transform: translateY(0); }
  70%{ opacity:0; transform: translateY(10px); }
  100%{ opacity:0; transform: translateY(0); }
}

/* --- Feature bento (value props) section ----------------------------- */
.feature-section{ padding: 5rem 0 1rem; }
.feature-grid{
  display:grid;
  grid-template-columns: repeat(12,1fr);
  gap: 1.5rem;
}
.feature-card{
  grid-column: span 12;
  position:relative;
  background:#fff;
  border-radius: 1.5rem;
  padding: 2rem;
  border: 1px solid rgba(175,3,5,.08);
  box-shadow: var(--card-shadow);
  overflow:hidden;
  transition: transform .4s var(--tfw-ease), box-shadow .4s var(--tfw-ease);
}
@media (min-width: 768px){ .feature-card{ grid-column: span 6; } }
@media (min-width: 992px){ .feature-card{ grid-column: span 3; } }
.feature-card::after{
  content:"";
  position:absolute; inset:auto -40% -60% auto; width:220px; height:220px;
  background: radial-gradient(circle, rgba(255,201,39,.16), transparent 70%);
  border-radius:50%;
  transition: transform .5s var(--tfw-ease);
}
.feature-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--hover-shadow);
}
.feature-card:hover::after{ transform: scale(1.3); }
.feature-icon{
  width:56px; height:56px;
  border-radius: 1rem;
  display:flex; align-items:center; justify-content:center;
  background: var(--accent-gradient);
  color:#fff; font-size:1.35rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 12px 24px rgba(175,3,5,.25);
  transition: transform .4s var(--tfw-ease-bounce);
}
.feature-card:hover .feature-icon{ transform: rotate(-6deg) scale(1.08); }
.feature-card h4{ font-weight:800; color: var(--tfw-maroon); margin-bottom:.5rem; }
.feature-card p{ color:#5b5b5b; font-size:.92rem; margin-bottom:0; }

/* --- Modern glass stat cards (upgrades .stat-item look, keeps IDs) -- */
.stats-section{
  background: linear-gradient(180deg, var(--tfw-pink) 0%, #fff 100%) !important;
  padding: 4.5rem 0;
  position:relative;
  overflow:hidden;
}
.stats-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap:1.25rem;
}
@media (min-width:768px){ .stats-grid{ grid-template-columns: repeat(4,1fr); } }
.stat-item{
  position:relative;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  text-align:center;
}
.stat-item .stat-number{
  font-size: 2.1rem;
  font-weight: 900;
}
.stat-divider{ display:none; }
.stat-item::before{
  content:"";
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:38px; height:3px; border-radius:3px;
  background: linear-gradient(90deg, var(--tfw-primary), var(--tfw-gold));
}

/* --- Sliding pill indicator behind the active explorer tab ---------- */
.explorer-tabs{ position:relative; }
.explorer-tab{ position:relative; z-index:1; }

/* --- News card polish: category ribbon + play affordance ------------ */
.news-card{ position:relative; }
.news-grid{
  display:grid; grid-template-columns: repeat(12,1fr); gap:1.25rem;
}
.news-grid .news-card{ grid-column: span 12; }
@media (min-width:576px){ .news-grid .news-card{ grid-column: span 6; } }
@media (min-width:992px){ .news-grid .news-card{ grid-column: span 3; } }

/* --- Featured-articles hover overlay --------------------------------- */
.vertical-big, .vertical-small{ position:relative; overflow:hidden; }
.vertical-big img, .vertical-small img{
  transition: transform .6s var(--tfw-ease), filter .4s ease;
}
.vertical-big:hover img, .vertical-small:hover img{
  transform: scale(1.07);
  filter: brightness(.92);
}
.vertical-title{ position:relative; display:inline-block; }

/* --- CTA band: floating decorative rings ------------------------------ */
.cta-band .tfw-cta-ring{
  position:absolute; border-radius:50%;
  border: 1.5px solid rgba(255,255,255,.18);
  pointer-events:none;
}
.cta-band .tfw-cta-ring.r1{ width:260px; height:260px; top:-90px; right:8%; animation: tfwFloat 12s ease-in-out infinite; }
.cta-band .tfw-cta-ring.r2{ width:160px; height:160px; bottom:-60px; left:6%; animation: tfwFloat 15s ease-in-out infinite reverse; }

/* --- Section eyebrow used above section titles on the home page ------ */
.tfw-section-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--tfw-primary);
  margin-bottom:.6rem;
}
.tfw-section-eyebrow::before{
  content:""; width:22px; height:2px; background: var(--tfw-gold); display:inline-block;
}

/* =====================================================================
   15. SAAS ENTERPRISE UPGRADE v2 — additive, presentation-only.
   Adds: announcement ticker, trending/engagement chips, sticky glass
   filter bar, category pill counters, card quick-preview overlay,
   cursor-traced glow border, floating activity toast, quick-view
   drawer panel, and image skeleton loaders.
   Nothing here overrides existing selectors from style.css /
   stylesheet.css / home.css / enhance.css — every rule below is
   scoped to new .tfw-* classes so it is safe to remove at any time.
   ===================================================================== */

/* ---------------------------------------------------------------------
   15.1 ANNOUNCEMENT TICKER — thin scrolling strip, injected by JS
   above the header. Pure CSS marquee (no dependency).
--------------------------------------------------------------------- */
.tfw-ticker{
  position: relative;
  z-index: 1051;
  overflow: hidden;
  background: var(--accent-gradient, linear-gradient(135deg,#75060D,#AF0305,#FFC927));
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.tfw-ticker-track{
  display: flex;
  align-items: center;
  gap: 3.5rem;
  white-space: nowrap;
  width: max-content;
  padding: .5rem 0;
  animation: tfwTickerScroll 32s linear infinite;
}
.tfw-ticker:hover .tfw-ticker-track{ animation-play-state: paused; }
.tfw-ticker-item{ display:inline-flex; align-items:center; gap:.5rem; opacity:.95; }
.tfw-ticker-item i{ color: var(--tfw-gold, #FFC927); }
@keyframes tfwTickerScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.tfw-ticker-close{
  position:absolute; right:.75rem; top:50%; transform:translateY(-50%);
  background:transparent; border:none; color:rgba(255,255,255,.8);
  font-size:.85rem; cursor:pointer; z-index:2; padding:.2rem .4rem;
  transition: color .2s ease;
}
.tfw-ticker-close:hover{ color:#fff; }
@media (prefers-reduced-motion: reduce){
  .tfw-ticker-track{ animation: none; overflow-x: auto; }
}

/* ---------------------------------------------------------------------
   15.2 STICKY GLASS FILTER BAR — wraps "Browse by Category" blocks
--------------------------------------------------------------------- */
.tfw-filter-bar{
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 1rem 0 1.25rem;
  margin: 0 0 2.5rem;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(175,3,5,.08);
}
.tfw-filter-bar .btn-blue{
  position: relative;
}

/* Category pill item counters */
.tfw-pill-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 1.4rem; height: 1.4rem;
  padding: 0 .4rem;
  margin-left: .45rem;
  border-radius: 999px;
  font-size: .72rem; font-weight: 800;
  background: rgba(255,255,255,.28);
  color: inherit;
  vertical-align: middle;
}
.btn-blue .tfw-pill-count{ background: rgba(255,255,255,.28); }

/* ---------------------------------------------------------------------
   15.3 LIVE-COUNT BADGE ON PAGE BANNERS — reuses .live-badge/.live-dot
   already defined for the homepage hero; just lets it sit on the
   dark page-banner surfaces too.
--------------------------------------------------------------------- */
.page-banner .live-badge{
  color: #fff;
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.3);
  backdrop-filter: blur(6px);
}
.page-banner .live-badge .live-dot{ background: var(--tfw-gold, #FFC927); }

/* ---------------------------------------------------------------------
   15.4 TRENDING / ENGAGEMENT CHIP — glass pill on card thumbnails.
   Only rendered when the template has real data to show
   (data-views attribute) — see webinar.php / whitepapers.php.
--------------------------------------------------------------------- */
.tfw-img-wrap{ position: relative; overflow: hidden; border-radius: 6px; }
.tfw-trend-chip{
  position: absolute;
  top: .5rem; right: .5rem;
  z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 700;
  padding: .3rem .6rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(20,20,20,.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22);
}
.tfw-trend-chip i{ color: var(--tfw-gold, #FFC927); }

/* ---------------------------------------------------------------------
   15.5 CARD QUICK-PREVIEW OVERLAY — slides up on hover, shows a
   category-flavoured icon + "Quick view" affordance. Decorative only;
   the underlying <a> link and href are untouched.
--------------------------------------------------------------------- */
.news-card, .whitepaper-card, .webinar-card, .case-card{ position: relative; }
.tfw-quickview-btn{
  position: absolute;
  top: .5rem; left: .5rem;
  z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  color: var(--tfw-primary, #AF0305);
  border: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, background .25s ease, color .25s ease;
  cursor: pointer;
  font-size: .8rem;
}
.news-card:hover .tfw-quickview-btn,
.whitepaper-card:hover .tfw-quickview-btn,
.webinar-card:hover .tfw-quickview-btn,
.case-card:hover .tfw-quickview-btn{
  opacity: 1;
  transform: translateY(0);
}
.tfw-quickview-btn:hover{
  background: var(--accent-gradient);
  color: #fff;
}

/* ---------------------------------------------------------------------
   15.6 CURSOR-TRACED GLOW BORDER — a light that follows the pointer
   around the card edge. Reuses --mx / --my already set by the
   existing spotlight mousemove listener in main.js.
--------------------------------------------------------------------- */
.tfw-glow-trace{ position: relative; }
.tfw-glow-trace::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(120px circle at var(--mx,50%) var(--my,50%),
              var(--tfw-gold,#FFC927), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 2;
}
.tfw-glow-trace:hover::after{ opacity: 1; }
@media (hover: none){ .tfw-glow-trace::after{ display:none; } }

/* ---------------------------------------------------------------------
   15.7 IMAGE SKELETON LOADER — shimmer placeholder behind card images
   until the browser finishes loading them.
--------------------------------------------------------------------- */
.tfw-img-wrap .tfw-skeleton{
  position: absolute; inset: 0;
  z-index: 1;
}
.tfw-img-wrap img{
  position: relative; z-index: 0;
  opacity: 0;
  transition: opacity .4s ease;
}
.tfw-img-wrap img.tfw-loaded{ opacity: 1; z-index: 1; }
.tfw-img-wrap img.tfw-loaded ~ .tfw-skeleton{ display:none; }

/* ---------------------------------------------------------------------
   15.8 GLASS HEADER ON SCROLL — opt-in modifier, added by JS alongside
   the existing .tfw-scrolled class so header shrink still works.
--------------------------------------------------------------------- */
.techmedia-header.tfw-glass.tfw-scrolled{
  background-color: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ---------------------------------------------------------------------
   15.9 FLOATING ACTIVITY TOAST — bottom-left, dismissible, rotates
   through messages supplied by main.js. Sample copy only — see the
   TFW_ACTIVITY_FEED comment in main.js before shipping to production.
--------------------------------------------------------------------- */
.tfw-toast{
  position: fixed;
  left: 1rem; bottom: 1rem;
  z-index: 1080;
  max-width: 320px;
  display: flex; align-items: flex-start; gap: .75rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(175,3,5,.1);
  border-radius: 1rem;
  padding: .85rem 1rem;
  box-shadow: 0 20px 45px -14px rgba(117,6,13,.32);
  transform: translateY(24px);
  opacity: 0;
  transition: transform .45s var(--tfw-ease,ease), opacity .45s ease;
  pointer-events: none;
}
.tfw-toast.tfw-toast-in{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.tfw-toast-icon{
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--accent-gradient);
  color:#fff; font-size:.85rem;
}
.tfw-toast-body{ font-size: .82rem; color: #333; line-height: 1.4; }
.tfw-toast-body strong{ color: var(--tfw-maroon, #75060D); }
.tfw-toast-time{ font-size: .7rem; color: #999; margin-top: .15rem; display:block; }
.tfw-toast-close{
  margin-left: auto; background:none; border:none; color:#aaa;
  font-size: .8rem; cursor:pointer; padding: 0 0 0 .5rem; line-height:1;
}
.tfw-toast-close:hover{ color:#555; }
@media (max-width: 576px){ .tfw-toast{ left:.5rem; right:.5rem; max-width:none; } }

/* ---------------------------------------------------------------------
   15.10 QUICK-VIEW DRAWER — right-side slide-in panel with a summary
   of the card the user clicked, plus a real link through to the full
   page (href is copied straight from the card's existing <a>).
--------------------------------------------------------------------- */
.tfw-drawer-overlay{
  position: fixed; inset: 0;
  background: rgba(20,6,7,.45);
  backdrop-filter: blur(2px);
  z-index: 1090;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.tfw-drawer-overlay.tfw-open{ opacity: 1; pointer-events: auto; }

.tfw-drawer{
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background: #fff;
  z-index: 1091;
  box-shadow: -24px 0 60px -20px rgba(0,0,0,.35);
  transform: translateX(100%);
  transition: transform .45s var(--tfw-ease, ease);
  display: flex; flex-direction: column;
}
.tfw-drawer.tfw-open{ transform: translateX(0); }
.tfw-drawer-close{
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border:none;
  background: rgba(255,255,255,.9); color: var(--tfw-maroon,#75060D);
  font-size: 1rem; cursor:pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
.tfw-drawer-img{ width:100%; height: 220px; object-fit: cover; flex-shrink:0; }
.tfw-drawer-body{ padding: 1.5rem; overflow-y:auto; }
.tfw-drawer-eyebrow{
  display:inline-flex; gap:.4rem; align-items:center;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color: var(--tfw-primary, #AF0305); margin-bottom:.75rem;
}
.tfw-drawer-title{ font-weight:800; font-size:1.3rem; color: var(--tfw-maroon,#75060D); margin-bottom:.75rem; }
.tfw-drawer-desc{ color:#5b5b5b; font-size:.92rem; line-height:1.65; margin-bottom:1.5rem; }
.tfw-drawer-cta{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:700; font-size:.92rem;
  padding:.8rem 1.5rem;
  border-radius:999px;
  color:#fff !important;
  background: var(--accent-gradient);
  text-decoration:none !important;
  box-shadow: 0 10px 24px rgba(117,6,13,.22);
  transition: transform .3s var(--tfw-ease,ease), box-shadow .3s var(--tfw-ease,ease);
}
.tfw-drawer-cta:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px rgba(117,6,13,.3); }
body.tfw-drawer-locked{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
  .tfw-drawer, .tfw-drawer-overlay, .tfw-toast{ transition:none !important; }
}

/* ---------------------------------------------------------------------
   15.11 FOOTER POLISH — glass footer already exists in style.css;
   this just adds an animated top accent line, link/logo micro-motion,
   and a trust-row treatment for the newsletter form.
--------------------------------------------------------------------- */
.site-footer{ position: relative; }
.site-footer::after{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--tfw-primary), var(--tfw-gold), var(--tfw-maroon));
  background-size: 200% 100%;
  animation: tfwGradientShift 6s linear infinite;
}
.footer-logo{ transition: transform .35s var(--tfw-ease); }
.footer-logo:hover{ transform: scale(1.04); }
.footer-links a{ position: relative; }
.footer-btn:active{ transform: translateY(0) scale(.97); }
.site-footer .tfw-trust-row{ justify-content: flex-start; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce){ .site-footer::after{ animation:none; } }

/* ---------------------------------------------------------------------
   15.12 CATEGORY PILL — scoped to .tfw-cat-pill only (does not touch
   other .btn-blue buttons elsewhere on the site). No motion/animation:
   state changes apply instantly, but the hover fill still switches.
--------------------------------------------------------------------- */
.tfw-cat-pill{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.85) !important;
  color: var(--tfw-maroon, #75060D) !important;
  border: 1.5px solid rgba(175,3,5,.16) !important;
  box-shadow: 0 4px 14px rgba(117,6,13,.06) !important;
  padding-top: .55rem;
  padding-bottom: .55rem;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .01em;
}

.tfw-cat-pill:hover,
.tfw-cat-pill:focus-visible{
  background: var(--accent-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(175,3,5,.22) !important;
}

.tfw-cat-pill-label{ position: relative; }

.tfw-cat-pill-arrow{
  font-size: .72rem;
  display: none;
}
.tfw-cat-pill:hover .tfw-cat-pill-arrow,
.tfw-cat-pill:focus-visible .tfw-cat-pill-arrow{
  display: inline-block;
}

/* persistently-selected category (only renders if the template passes
   $currentCategory — safe no-op otherwise) */
.tfw-cat-pill-active{
  background: var(--accent-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(175,3,5,.26) !important;
}

.tfw-back-top{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:1050;
  width:46px; height:46px; border-radius:50%; border:none;
  background:var(--accent-gradient); color:#fff; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px rgba(117,6,13,.28);
  opacity:0; transform:translateY(14px) scale(.85); pointer-events:none;
  transition:opacity .3s var(--tfw-ease,ease), transform .3s var(--tfw-ease,ease), box-shadow .3s ease;
}
.tfw-back-top.tfw-show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.tfw-back-top:hover{ box-shadow:0 16px 34px rgba(117,6,13,.36); transform:translateY(-3px) scale(1.04); }

/* ---- Cookie consent banner, re-themed ---- */
.tfw-cookie{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:2000;
  max-width:900px; margin:0 auto;
  background:#fff; border-radius:1.1rem;
  box-shadow:0 24px 60px -16px rgba(0,0,0,.35);
  border:1px solid rgba(175,3,5,.1);
  padding:1.5rem 1.75rem;
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  transform:translateY(140%); opacity:0;
  transition:transform .5s var(--tfw-ease,ease), opacity .5s ease;
}
.tfw-cookie.tfw-show{ transform:translateY(0); opacity:1; }
.tfw-cookie-icon{
  flex-shrink:0; width:46px; height:46px; border-radius:50%;
  background:var(--accent-gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.tfw-cookie-text{ flex:1; min-width:220px; }
.tfw-cookie-text h3{ font-size:1rem; font-weight:800; color:var(--tfw-maroon,#75060D); margin-bottom:.3rem; }
.tfw-cookie-text p{ font-size:.85rem; color:#666; margin:0; line-height:1.5; }
.tfw-cookie-actions{ display:flex; gap:.75rem; flex-shrink:0; }
.tfw-cookie-accept{
  background:var(--accent-gradient); color:#fff; border:none; padding:.65rem 1.4rem;
  border-radius:999px; font-weight:700; font-size:.86rem; cursor:pointer;
  box-shadow:0 10px 22px rgba(175,3,5,.22); transition:transform .25s ease, box-shadow .25s ease;
}
.tfw-cookie-accept:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(175,3,5,.3); }
.tfw-cookie-manage{ background:none; border:none; color:var(--tfw-primary,#AF0305); font-weight:700; font-size:.86rem; text-decoration:underline; cursor:pointer; }

@media (max-width: 991.98px){
  .tfw-legal-toc{ position:relative !important; max-height:none; margin-bottom:1.5rem; width:auto !important; top:auto !important; }
  .tfw-legal-wrap{ margin-top:-1.75rem; }
}
@media (max-width: 575.98px){
  .tfw-legal-content section{ padding:1.5rem 1.3rem; }
  .tfw-cookie{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce){
  .tfw-back-top, .tfw-legal-toc a, .tfw-cookie{ transition:none !important; }
}

.tfw-cookie-reject{
  background:#fff;
  color:var(--tfw-primary,#AF0305);
  border:1.5px solid var(--tfw-primary,#AF0305);
  padding:.6rem 1.3rem;
  border-radius:999px;
  font-weight:700;
  font-size:.86rem;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.tfw-cookie-reject:hover{
  background:var(--tfw-primary,#AF0305);
  color:#fff;
  transform:translateY(-2px);
}

.tfw-legal-footer{ text-align:center; margin-top:2.5rem; padding-top:2rem; border-top:1px solid rgba(0,0,0,.08); color:#8a8a8a; font-size:.88rem; }